chore: some ui and mock data

web/app/components/plugins/card/card-mock.ts

@@ -1,3 +1,4 @@
+import type { PluginDeclaration } from '../types'
 import { PluginType } from '../types'
 
 export const toolNotion = {
@@ -17,6 +18,33 @@ export const toolNotion = {
   },
 }
 
+export const toolNotionManifest: PluginDeclaration = {
+  version: '1.2.0',
+  author: 'Notion',
+  icon: 'https://via.placeholder.com/150',
+  name: 'notion page search',
+  category: PluginType.tool,
+  label: {
+    'en-US': 'Notion Page Search',
+    'zh-Hans': 'Notion 页面搜索',
+  },
+  description: {
+    'en-US': 'Description: Search Notion pages and open visited ones faster. No admin access required.More and more info...More and more info...More and more info...',
+    'zh-Hans': '搜索 Notion 页面并更快地打开已访问的页面。无需管理员访问权限。More and more info...More and more info...More and more info...',
+  },
+  created_at: '2022-01-01',
+  resource: {},
+  plugins: {},
+  verified: true,
+  endpoint: {
+    settings: [],
+    endpoints: [],
+  },
+  tool: {
+  } as any,
+  model: {},
+}
+
 export const extensionDallE = {
   type: PluginType.extension,
   org: 'OpenAI',

web/app/components/plugins/install-plugin/install-from-local-package/index.tsx

@@ -8,6 +8,7 @@ import Uploading from './steps/uploading'
 import Install from './steps/install'
 import Installed from './steps/installed'
 import { useTranslation } from 'react-i18next'
+import { toolNotionManifest } from '../../card/card-mock'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -22,6 +23,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
   onClose,
 }) => {
   const { t } = useTranslation()
+  // uploading -> readyToInstall -> installed
   const [step, setStep] = useState<InstallStep>(InstallStep.uploading)
 
   const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
@@ -31,10 +33,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
       return t(`${i18nPrefix}.installedSuccessfully`)
     return t(`${i18nPrefix}.installPlugin`)
   }, [])
-  const [manifest, setManifest] = useState<PluginDeclaration | null>({
-    name: 'Notion Sync',
-    description: 'Sync your Notion notes with Dify',
-  } as any)
+  const [manifest, setManifest] = useState<PluginDeclaration | null>(toolNotionManifest)
 
   const handleUploaded = useCallback((result: {
     uniqueIdentifier: string

web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx

@@ -7,6 +7,7 @@ import { pluginManifestToCardPluginProps } from '../../utils'
 import Button from '@/app/components/base/button'
 import { sleep } from '@/utils'
 import { Trans, useTranslation } from 'react-i18next'
+import { RiLoader2Line } from '@remixicon/react'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -59,11 +60,12 @@ const Installed: FC<Props> = ({
         )}
         <Button
           variant='primary'
-          className='min-w-[72px]'
+          className='min-w-[72px] flex space-x-0.5'
           disabled={isInstalling}
           onClick={handleInstall}
         >
-          {t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}
+          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
         </Button>
       </div>
     </>

web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx

@@ -7,6 +7,7 @@ import type { PluginDeclaration } from '../../../types'
 import Button from '@/app/components/base/button'
 import { sleep } from '@/utils'
 import { useTranslation } from 'react-i18next'
+import { toolNotionManifest } from '../../../card/card-mock'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -30,10 +31,7 @@ const Uploading: FC<Props> = ({
     await sleep(3000)
     onUploaded({
       uniqueIdentifier: 'yeuoly/neko:0.0.1@5395654da2c0b919b3d9b946a1a0545b737004380765e5f3b8c49976d3276c87',
-      manifest: {
-        name: 'Notion Sync',
-        description: 'Sync your Notion notes with Dify',
-      } as any,
+      manifest: toolNotionManifest,
     })
   }
 
@@ -44,7 +42,7 @@ const Uploading: FC<Props> = ({
     <>
       <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
         <div className='flex items-center gap-1 self-stretch'>
-          <RiLoader2Line className='text-text-accent w-4 h-4' />
+          <RiLoader2Line className='text-text-accent w-4 h-4 animate-spin-slow' />
           <div className='text-text-secondary system-md-regular'>
             {t(`${i18nPrefix}.uploadingPackage`, {
               packageName: fileName,

web/tailwind-common-config.ts

@@ -83,6 +83,9 @@ const config = {
       fontSize: {
         '2xs': '0.625rem',
       },
+      animation: {
+        'spin-slow': 'spin 2s linear infinite',
+      },
     },
   },
   plugins: [