feat: bottom tooltip

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

@@ -0,0 +1,44 @@
+'use client'
+import { RiArrowRightLine, RiImage2Fill } from '@remixicon/react'
+import Link from 'next/link'
+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 AppTip: FC<Props> = ({
+  appNum,
+  publishedNum,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div className='fixed bottom-0 left-0 right-0 z-10 border-t border-state-warning-hover px-[60px] py-4'>
+      <div className="absolute inset-0 bg-[linear-gradient(92deg,_rgba(247,144,9,0.25)_53.67%,_rgba(255,255,255,0)_100%)] opacity-40" />
+      <div className='relative flex items-center'>
+        <div className='relative rounded-lg bg-text-accent p-1.5'>
+          <RiImage2Fill className='size-5 text-text-primary-on-surface' />
+          <div className='border-px absolute left-[-2px] top-[-2px] size-2 rounded-[3px] border-white bg-components-badge-status-light-error-border-inner p-0.5'>
+            <div className='h-full w-full rounded-[3px] bg-components-badge-status-light-error-bg'></div>
+          </div>
+        </div>
+
+        <div className='ml-3'>
+          <div className='system-md-semibold text-text-primary'>{t(`${i18nPrefix}.title`)}</div>
+          <div className='system-sm-regular mt-1 flex items-center space-x-0.5 text-text-secondary'>
+            {t(`${i18nPrefix}.description`, { num: appNum, publishedNum })}
+            <Link className='system-sm-semibold text-text-accent' href='/apps/check-legacy'>{t(`${i18nPrefix}.toSolve`)}</Link>
+            <RiArrowRightLine className='size-4 text-components-button-secondary-accent-text' />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(AppTip)

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

@@ -12,6 +12,7 @@ import Pagination from '@/app/components/base/pagination'
 import { APP_PAGE_LIMIT } from '@/config'
 import { noop } from 'lodash'
 import Tip from './components/tip'
+import AppTip from './components/app-tip'
 
 const i18nPrefix = 'app.checkLegacy'
 const Page = () => {
@@ -93,6 +94,7 @@ const Page = () => {
       <div className='ml-3 shrink-0 pr-8 pt-[108px]'>
         <Tip />
       </div>
+      <AppTip appNum={5} publishedNum={3} />
     </div>
   )
 }

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

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

web/i18n/en-US/app.ts

@@ -254,6 +254,7 @@ const translation = {
       description: 'You can now create file type variables in the start form. We will no longer support the image upload feature in the future.',
       learnMore: 'Learn more',
     },
+    toSolve: 'To resolve',
   },
 }
 

web/i18n/zh-Hans/app.ts

@@ -255,6 +255,7 @@ const translation = {
       description: '您现在可以在开始表单中创建文件类型变量。未来我们将不再支持图片上传功能。',
       learnMore: '了解更多',
     },
+    toSolve: '去解决',
   },
 }