From d6fe22b19e00a2ea5131e38814ec2361c0097700 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 1 Jul 2025 17:57:49 +0800
Subject: [PATCH] feat: page holder

---
 .../apps/check-legacy/components/header.tsx   | 26 +++++++++++++++++
 .../apps/check-legacy/components/list.tsx     | 28 +++++++++++++++++++
 .../(commonLayout)/apps/check-legacy/page.tsx | 16 +++++++++--
 web/i18n/en-US/app.ts                         |  4 +++
 web/i18n/zh-Hans/app.ts                       |  4 +++
 5 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 web/app/(commonLayout)/apps/check-legacy/components/header.tsx
 create mode 100644 web/app/(commonLayout)/apps/check-legacy/components/list.tsx

diff --git a/web/app/(commonLayout)/apps/check-legacy/components/header.tsx b/web/app/(commonLayout)/apps/check-legacy/components/header.tsx
new file mode 100644
index 0000000000..9671188559
--- /dev/null
+++ b/web/app/(commonLayout)/apps/check-legacy/components/header.tsx
@@ -0,0 +1,26 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'app.checkLegacy'
+
+type Props = {
+  appNum: number,
+  publishedNum: number,
+}
+
+const Header: FC<Props> = ({
+  appNum,
+  publishedNum,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div>
+      <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>
+  )
+}
+
+export default React.memo(Header)
diff --git a/web/app/(commonLayout)/apps/check-legacy/components/list.tsx b/web/app/(commonLayout)/apps/check-legacy/components/list.tsx
new file mode 100644
index 0000000000..149f8b30d4
--- /dev/null
+++ b/web/app/(commonLayout)/apps/check-legacy/components/list.tsx
@@ -0,0 +1,28 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  list: any[]
+}
+
+const List: FC<Props> = ({
+  list,
+}) => {
+  return (
+    <div>
+      {list.length > 0 ? (
+        <ul className='list-disc pl-5'>
+          {list.map((item, index) => (
+            <li key={index} className='system-md-regular text-text-primary'>
+              {item}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <div className='system-md-regular text-text-secondary'>No items found</div>
+      )}
+    </div>
+  )
+}
+export default React.memo(List)
diff --git a/web/app/(commonLayout)/apps/check-legacy/page.tsx b/web/app/(commonLayout)/apps/check-legacy/page.tsx
index 023b815d68..4f13f3bd6c 100644
--- a/web/app/(commonLayout)/apps/check-legacy/page.tsx
+++ b/web/app/(commonLayout)/apps/check-legacy/page.tsx
@@ -1,7 +1,17 @@
+'use client'
+import Header from './components/header'
+// TODO: Filter
+import List from './components/list'
+
 const Page = () => {
-  return (<>
-  <div>Check legacy page</div>
-  </>)
+  return (
+    <div>
+      <Header appNum={5} publishedNum={3}/>
+      <div>
+        <List list={[]} />
+      </div>
+    </div>
+  )
 }
 
 export default Page
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index e75a9d5358..4cd551c0fd 100644
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@@ -233,6 +233,10 @@ const translation = {
     notSetDesc: 'Currently nobody can access the web app. Please set permissions.',
   },
   noAccessPermission: 'No permission to access web app',
+  checkLegacy: {
+    title: 'Apps affected by image upload legacy',
+    description: 'The current workspace has {{num}} applications affected, {{publishedNum}} of which have been published.',
+  },
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/app.ts b/web/i18n/zh-Hans/app.ts
index c5bfb39f4f..5a12691480 100644
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@@ -234,6 +234,10 @@ const translation = {
     notSetDesc: '当前任何人都无法访问 Web 应用。请设置访问权限。',
   },
   noAccessPermission: '没有权限访问 web 应用',
+  checkLegacy: {
+    title: '受图像上传遗留问题影响的应用',
+    description: '当前工作区有 {{num}} 个应用受图像上传遗留问题影响，其中 {{publishedNum}} 个已发布。',
+  },
 }
 
 export default translation