From d454214ddc3e1ce39bd988c327418947fbfc807e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 2 Jul 2025 16:18:44 +0800
Subject: [PATCH] fix: table placeholder

---
 .../apps/check-legacy/components/list.tsx     | 29 +++++++--
 .../(commonLayout)/apps/check-legacy/page.tsx | 62 +++++++++++--------
 .../apps/check-legacy/use-legacy-list.ts      |  2 +
 3 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/web/app/(commonLayout)/apps/check-legacy/components/list.tsx b/web/app/(commonLayout)/apps/check-legacy/components/list.tsx
index 149f8b30d4..d464c4e76f 100644
--- a/web/app/(commonLayout)/apps/check-legacy/components/list.tsx
+++ b/web/app/(commonLayout)/apps/check-legacy/components/list.tsx
@@ -1,6 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 
 type Props = {
   list: any[]
@@ -9,16 +11,33 @@ type Props = {
 const List: FC<Props> = ({
   list,
 }) => {
+  const { t } = useTranslation()
   return (
     <div>
       {list.length > 0 ? (
-        <ul className='list-disc pl-5'>
+        <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>
+          </tr>
+        </thead>
+        <tbody className="system-sm-regular text-text-secondary"></tbody>
           {list.map((item, index) => (
-            <li key={index} className='system-md-regular text-text-primary'>
-              {item}
-            </li>
+            <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
+              </td>
+              <td className='whitespace-nowrap py-1.5 pl-3'>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>
           ))}
-        </ul>
+        </table>
       ) : (
         <div className='system-md-regular text-text-secondary'>No items found</div>
       )}
diff --git a/web/app/(commonLayout)/apps/check-legacy/page.tsx b/web/app/(commonLayout)/apps/check-legacy/page.tsx
index a110c877f1..73f23084ec 100644
--- a/web/app/(commonLayout)/apps/check-legacy/page.tsx
+++ b/web/app/(commonLayout)/apps/check-legacy/page.tsx
@@ -4,14 +4,16 @@ import Header from './components/header'
 import List from './components/list'
 import useLegacyList from './use-legacy-list'
 import Chip from '@/app/components/base/chip'
-import { RiFilter3Line } from '@remixicon/react'
+import { RiFilter3Line, RiLoopLeftLine } from '@remixicon/react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
 
 const i18nPrefix = 'app.checkLegacy'
 const Page = () => {
   const { t } = useTranslation()
   const {
+    list,
     sort_by,
     setOrderBy,
     published,
@@ -38,34 +40,40 @@ const Page = () => {
     <div className='h-full 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 flex-row flex-wrap 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='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>
       <div>
-        <List list={[]} />
+        <List list={list} />
       </div>
     </div>
   )
diff --git a/web/app/(commonLayout)/apps/check-legacy/use-legacy-list.ts b/web/app/(commonLayout)/apps/check-legacy/use-legacy-list.ts
index dcc5e133d9..3bd50d2166 100644
--- a/web/app/(commonLayout)/apps/check-legacy/use-legacy-list.ts
+++ b/web/app/(commonLayout)/apps/check-legacy/use-legacy-list.ts
@@ -2,6 +2,7 @@ import produce from 'immer'
 import { useCallback, useState } from 'react'
 
 const useLegacyList = () => {
+  const list: any[] = [{}, {}, {}] // Placeholder for the list, replace with actual data fetching logic
   const [queryParams, setQueryParams] = useState<Record<string, any>>({})
   const {
     sort_by,
@@ -29,6 +30,7 @@ const useLegacyList = () => {
   }, [queryParams])
 
   return {
+    list,
     sort_by,
     setOrderBy,
     published,