feat: list res

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

@@ -3,43 +3,51 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
+import AppIcon from '@/app/components/base/app-icon'
 
+const i18nPrefix = 'app.checkLegacy.list'
 type Props = {
+  className?: string
   list: any[]
 }
 
 const List: FC<Props> = ({
+  className,
   list,
 }) => {
   const { t } = useTranslation()
   return (
-    <div>
+    <div className='grow'>
       {list.length > 0 ? (
         <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
         <thead className='system-xs-medium-uppercase text-text-tertiary'>
           <tr>
-            <td className='whitespace-nowrap rounded-l-lg bg-background-section-burn pl-3 pr-1'>xxx</td>
-            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.endUser')}</td>
-            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.userRate')}</td>
-            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.time')}</td>
-            <td className='whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t('appLog.table.header.time')}</td>
+            <td className='whitespace-nowrap rounded-l-lg bg-background-section-burn pl-3 pr-1'>{t(`${i18nPrefix}.appName`)}</td>
+            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t(`${i18nPrefix}.published`)}</td>
+            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t(`${i18nPrefix}.createBy`)}</td>
+            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t(`${i18nPrefix}.lastRequest`)}</td>
+            <td className='whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t(`${i18nPrefix}.createAt`)}</td>
           </tr>
         </thead>
-        <tbody className="system-sm-regular text-text-secondary"></tbody>
+        <tbody className="system-sm-regular text-text-secondary">
           {list.map((item, index) => (
-            <tr key={index} className='hover:bg-background-section-hover'>
-              <td className='w-5 whitespace-nowrap rounded-l-lg pl-3 pr-1'>
-                Python bug fixer
+            <tr key={index} className='cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'>
+              <td className='whitespace-nowrap rounded-l-lg py-2 pl-3 pr-1'>
+                <div className='flex items-center space-x-2'>
+                  <AppIcon size='tiny' />
+                  <div>Python bug fixer</div>
+                </div>
               </td>
-              <td className='whitespace-nowrap py-1.5 pl-3'>Yes</td>
+              <td className='whitespace-nowrap py-1.5 pl-3'>{t('app.checkLegacy.yes')}</td>
               <td className='whitespace-nowrap py-1.5 pl-3'>Evan · evan@dify.ai</td>
               <td className='whitespace-nowrap py-1.5 pl-3'>2023-03-21 10:25</td>
               <td className='whitespace-nowrap rounded-r-lg py-1.5 pl-3'>2023-03-21 10:25</td>
             </tr>
           ))}
+          </tbody>
         </table>
       ) : (
-        <div className='system-md-regular text-text-secondary'>No items found</div>
+        <div className='system-md-regular flex items-center justify-center text-text-secondary'>{t(`${i18nPrefix}.noData`)}</div>
       )}
     </div>
   )

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

@@ -8,12 +8,16 @@ import { RiFilter3Line, RiLoopLeftLine } from '@remixicon/react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
+import Pagination from '@/app/components/base/pagination'
+import { APP_PAGE_LIMIT } from '@/config'
+import { noop } from 'lodash'
 
 const i18nPrefix = 'app.checkLegacy'
 const Page = () => {
   const { t } = useTranslation()
   const {
     list,
+    total,
     sort_by,
     setOrderBy,
     published,
@@ -37,43 +41,55 @@ const Page = () => {
   }, [published, t])
 
   return (
-    <div className='h-full rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle px-6 pt-4'>
+    <div className='flex grow flex-col rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle px-6 pt-4'>
       <Header appNum={5} publishedNum={3}/>
-      {/* Filter */}
-      <div className='mb-2 mt-4 flex items-center justify-between'>
-        <div className='flex items-center gap-2'>
-          <Chip
-            className='min-w-[150px]'
-            panelClassName='w-[270px]'
-            leftIcon={<RiFilter3Line className='h-4 w-4 text-text-secondary' />}
-            value={published}
-            renderTriggerContent={renderTriggerContent}
-            onSelect={handleSelectPublished}
-            onClear={clearPublished}
-            items={[
-              { value: 1, name: t(`${i18nPrefix}.yes`) },
-              { value: 0, name: t(`${i18nPrefix}.no`) },
-            ]}
-          />
-          <div className='h-3.5 w-px bg-divider-regular'></div>
-          <Sort
-            // '-' means descending order
-            order={sort_by?.startsWith('-') ? '-' : ''}
-            value={sort_by?.replace('-', '') || 'created_at'}
-            items={[
-              { value: 'created_at', name: t(`${i18nPrefix}.createAt`) },
-              { value: 'last_request', name: t(`${i18nPrefix}.lastRequest`) },
-            ]}
-            onSelect={setOrderBy}
-          />
+      <div className='flex grow'>
+        <div className='flex flex-col'>
+          {/* Filter */}
+          <div className='mb-2 mt-4 flex items-center justify-between'>
+            <div className='flex items-center gap-2'>
+              <Chip
+                className='min-w-[150px]'
+                panelClassName='w-[270px]'
+                leftIcon={<RiFilter3Line className='h-4 w-4 text-text-secondary' />}
+                value={published}
+                renderTriggerContent={renderTriggerContent}
+                onSelect={handleSelectPublished}
+                onClear={clearPublished}
+                items={[
+                  { value: 1, name: t(`${i18nPrefix}.yes`) },
+                  { value: 0, name: t(`${i18nPrefix}.no`) },
+                ]}
+              />
+              <div className='h-3.5 w-px bg-divider-regular'></div>
+              <Sort
+                // '-' means descending order
+                order={sort_by?.startsWith('-') ? '-' : ''}
+                value={sort_by?.replace('-', '') || 'created_at'}
+                items={[
+                  { value: 'created_at', name: t(`${i18nPrefix}.createAt`) },
+                  { value: 'last_request', name: t(`${i18nPrefix}.lastRequest`) },
+                ]}
+                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>
-      <div>
-        <List list={list} />
       </div>
     </div>
   )

web/app/(commonLayout)/apps/check-legacy/use-legacy-list.ts

@@ -30,6 +30,7 @@ const useLegacyList = () => {
   }, [queryParams])
 
   return {
+    total: 100,
     list,
     sort_by,
     setOrderBy,

web/i18n/en-US/app.ts

@@ -241,6 +241,14 @@ const translation = {
     no: 'No',
     createAt: 'Created At',
     lastRequest: 'Last Request',
+    list: {
+      appName: 'App Name',
+      published: 'Published',
+      createBy: 'Created By',
+      lastRequest: 'Last Request',
+      createAt: 'Created At',
+      noData: 'No items found',
+    },
   },
 }
 

web/i18n/zh-Hans/app.ts

@@ -242,6 +242,14 @@ const translation = {
     no: '否',
     createAt: '创建时间',
     lastRequest: '最后请求',
+    list: {
+      appName: '应用名称',
+      published: '已发布',
+      createBy: '创建者',
+      lastRequest: '最后请求时间',
+      createAt: '创建时间',
+      noData: '暂无数据',
+    },
   },
 }