feat: finsh loading error comp

web/app/(commonLayout)/plugins/test/card/page.tsx

@@ -13,7 +13,7 @@ const PluginList = () => {
   const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
   const [isShow, {
     setFalse: hide,
-  }] = useBoolean(false)
+  }] = useBoolean(true)
 
   return (
     <div className='pb-3 bg-white'>
@@ -22,12 +22,12 @@ const PluginList = () => {
         <InstallBundle
           onClose={hide}
           fromDSLPayload={[
-            // {
+            {
-            //   type: 'marketplace',
+              type: 'marketplace',
-            //   value: {
+              value: {
-            //     plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
+                plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
-            //   },
+              },
-            // },
+            },
             {
               type: 'github',
               value: {

web/app/components/plugins/install-plugin/base/loading-error.tsx

@@ -2,30 +2,43 @@
 import type { FC } from 'react'
 import React from 'react'
 import { Group } from '../../../base/icons/src/vender/other'
-import cn from '@/utils/classnames'
 import { LoadingPlaceholder } from '@/app/components/plugins/card/base/placeholder'
+import Checkbox from '@/app/components/base/checkbox'
+import { RiCloseLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 
 const LoadingError: FC = () => {
+  const { t } = useTranslation()
   return (
-    <div>
+    <div className='flex items-center space-x-2'>
-      <div className="flex">
+      <Checkbox
-        <div
+        className='shrink-0'
-          className='flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
+        checked={false}
-              border-[0.5px] border-components-panel-border bg-background-default backdrop-blur-sm'>
+        disabled
-          <div className='flex w-5 h-5 justify-center items-center'>
+      />
-            <Group className='text-text-tertiary' />
+      <div className='grow relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
+        <div className="flex">
+          <div
+            className='relative flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
+              border-[0.5px] border-state-destructive-border bg-state-destructive-hover backdrop-blur-sm'>
+            <div className='flex w-5 h-5 justify-center items-center'>
+              <Group className='text-text-quaternary' />
+            </div>
+            <div className='absolute bottom-[-4px] right-[-4px] rounded-full border-[2px] border-components-panel-bg bg-state-destructive-solid'>
+              <RiCloseLine className='w-3 h-3 text-text-primary-on-surface' />
+            </div>
           </div>
-        </div>
+          <div className="ml-3 grow">
-        <div className="ml-3 grow">
+            <div className="flex items-center h-5 system-md-semibold text-text-destructive">
-          <div className="flex items-center h-5 system-md-semibold text-text-destructive">
+              {t('plugin.installModal.pluginLoadError')}
-            Plugin load error
+            </div>
-          </div>
+            <div className='mt-0.5 system-xs-regular text-text-tertiary'>
-          <div className={cn('flex items-center h-4 space-x-0.5')}>
+              {t('plugin.installModal.pluginLoadErrorDesc')}
-            This plugin will not be installed
+            </div>
           </div>
         </div>
+        <LoadingPlaceholder className="mt-3 w-[420px]" />
       </div>
-      <LoadingPlaceholder className="mt-3 w-[420px]" />
     </div>
   )
 }

web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx

@@ -8,6 +8,7 @@ import { useFetchPluginsInMarketPlaceByIds } from '@/service/use-plugins'
 import produce from 'immer'
 import { useGetState } from 'ahooks'
 import PackageItem from '../item/package-item'
+import LoadingError from '../../base/loading-error'
 
 type Props = {
   allPlugins: Dependency[]
@@ -105,7 +106,7 @@ const InstallByDSLList: FC<Props> = ({
       {allPlugins.map((d, index) => {
         if (errorIndexes.includes(index)) {
           return (
-            <div key={index}>error</div>
+            <LoadingError key={index} />
           )
         }
         if (d.type === 'github') {

web/i18n/en-US/plugin.ts

@@ -116,6 +116,8 @@ const translation = {
     cancel: 'Cancel',
     back: 'Back',
     next: 'Next',
+    pluginLoadError: 'Plugin load error',
+    pluginLoadErrorDesc: 'This plugin will not be installed',
   },
   installFromGitHub: {
     installPlugin: 'Install plugin from GitHub',

web/i18n/zh-Hans/plugin.ts

@@ -116,6 +116,8 @@ const translation = {
     cancel: '取消',
     back: '返回',
     next: '下一步',
+    pluginLoadError: '插件加载错误',
+    pluginLoadErrorDesc: '此插件将不会被安装',
   },
   installFromGitHub: {
     installPlugin: '从 GitHub 安装插件',