feat: list res

9 months ago · 859b4cd6cc
parent d454214ddc
commit 859b4cd6cc
5 changed files with 88 additions and 47 deletions
--- a/web/app/(commonLayout)/apps/check-legacy/components/list.tsx
+++ b/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>
  )
--- a/web/app/(commonLayout)/apps/check-legacy/page.tsx
+++ b/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>
  )
--- a/web/app/(commonLayout)/apps/check-legacy/use-legacy-list.ts
+++ b/web/app/(commonLayout)/apps/check-legacy/use-legacy-list.ts
@ -30,6 +30,7 @@ const useLegacyList = () => {
  }, [queryParams])

  return {
+    total: 100,
    list,
    sort_by,
    setOrderBy,
--- a/web/i18n/en-US/app.ts
+++ b/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',
+    },
  },
 }

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