chore: layout

web/app/(commonLayout)/apps/check-legacy/components/header.tsx

@@ -2,21 +2,24 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'app.checkLegacy'
 
 type Props = {
+  className?: string,
   appNum: number,
   publishedNum: number,
 }
 
 const Header: FC<Props> = ({
+  className,
   appNum,
   publishedNum,
 }) => {
   const { t } = useTranslation()
   return (
-    <div>
+    <div className={cn(className)}>
       <div className='title-2xl-semi-bold text-text-primary'>{t(`${i18nPrefix}.title`)}</div>
       <div className='system-md-regular mt-1 text-text-tertiary'>{t(`${i18nPrefix}.description`, { num: appNum, publishedNum })}</div>
     </div>

web/app/(commonLayout)/apps/check-legacy/page.tsx

@@ -11,6 +11,7 @@ import Button from '@/app/components/base/button'
 import Pagination from '@/app/components/base/pagination'
 import { APP_PAGE_LIMIT } from '@/config'
 import { noop } from 'lodash'
+import Tip from './components/tip'
 
 const i18nPrefix = 'app.checkLegacy'
 const Page = () => {
@@ -41,55 +42,56 @@ const Page = () => {
   }, [published, t])
 
   return (
-    <div className='flex grow flex-col rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle px-6 pt-4'>
+    <div className='flex grow rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle px-6 pt-4'>
-      <Header appNum={5} publishedNum={3}/>
+      <div className='flex h-full grow flex-col pr-6'>
-      <div className='flex grow'>
+        <Header className='shrink-0' appNum={5} publishedNum={3}/>
-        <div className='flex flex-col'>
+        {/* Filter */}
-          {/* Filter */}
+        <div className='mb-2 mt-4 flex shrink-0 items-center justify-between'>
-          <div className='mb-2 mt-4 flex items-center justify-between'>
+          <div className='flex items-center gap-2'>
-            <div className='flex items-center gap-2'>
+            <Chip
-              <Chip
+              className='min-w-[150px]'
-                className='min-w-[150px]'
+              panelClassName='w-[270px]'
-                panelClassName='w-[270px]'
+              leftIcon={<RiFilter3Line className='h-4 w-4 text-text-secondary' />}
-                leftIcon={<RiFilter3Line className='h-4 w-4 text-text-secondary' />}
+              value={published}
-                value={published}
+              renderTriggerContent={renderTriggerContent}
-                renderTriggerContent={renderTriggerContent}
+              onSelect={handleSelectPublished}
-                onSelect={handleSelectPublished}
+              onClear={clearPublished}
-                onClear={clearPublished}
+              items={[
-                items={[
+                { value: 1, name: t(`${i18nPrefix}.yes`) },
-                  { value: 1, name: t(`${i18nPrefix}.yes`) },
+                { value: 0, name: t(`${i18nPrefix}.no`) },
-                  { value: 0, name: t(`${i18nPrefix}.no`) },
+              ]}
-                ]}
+            />
-              />
+            <div className='h-3.5 w-px bg-divider-regular'></div>
-              <div className='h-3.5 w-px bg-divider-regular'></div>
+            <Sort
-              <Sort
+              // '-' means descending order
-                // '-' means descending order
+              order={sort_by?.startsWith('-') ? '-' : ''}
-                order={sort_by?.startsWith('-') ? '-' : ''}
+              value={sort_by?.replace('-', '') || 'created_at'}
-                value={sort_by?.replace('-', '') || 'created_at'}
+              items={[
-                items={[
+                { value: 'created_at', name: t(`${i18nPrefix}.createAt`) },
-                  { value: 'created_at', name: t(`${i18nPrefix}.createAt`) },
+                { value: 'last_request', name: t(`${i18nPrefix}.lastRequest`) },
-                  { value: 'last_request', name: t(`${i18nPrefix}.lastRequest`) },
+              ]}
-                ]}
+              onSelect={setOrderBy}
-                onSelect={setOrderBy}
-              />
-            </div>
-            <Button >
-                <RiLoopLeftLine className='mr-1 h-4 w-4' />
-                {t('common.operation.reset')}
-              </Button>
-          </div>
-          <List list={list} />
-          {(total && total > APP_PAGE_LIMIT)
-            ? <Pagination
-              className='shrink-0'
-              current={1}
-              onChange={noop}
-              total={total}
-              limit={10}
-              onLimitChange={noop}
             />
-            : null}
+          </div>
+          <Button >
+              <RiLoopLeftLine className='mr-1 h-4 w-4' />
+              {t('common.operation.reset')}
+            </Button>
         </div>
+        <List list={list} />
+        {(total && total > APP_PAGE_LIMIT)
+          ? <div className='flex justify-end'><Pagination
+            className='shrink-0'
+            current={1}
+            onChange={noop}
+            total={total}
+            limit={10}
+            onLimitChange={noop}
+          /></div>
+          : null}
+      </div>
+      <div className='ml-3 shrink-0 pr-8 pt-[108px]'>
+        <Tip />
       </div>
     </div>
   )