refactor: 增加已安装插件tab

web/src/plugin/PluginStore/index.tsx

@@ -3,6 +3,7 @@
  */
 
 import { LoadingSpinner } from '@/components/LoadingSpinner';
+import { PillTabPane, PillTabs } from '@/components/PillTabs';
 import { Divider } from 'antd';
 import React from 'react';
 import { t, useAsync } from 'tailchat-shared';
@@ -11,33 +12,55 @@ import { pluginManager } from '../manager';
 import { PluginStoreItem } from './Item';
 
 export const PluginStore: React.FC = React.memo(() => {
-  const { loading, value: installedPluginNameList = [] } =
+  const { loading, value: installedPluginList = [] } = useAsync(
-    useAsync(async () => {
+    async () => pluginManager.getInstalledPlugins(),
-      const plugins = await pluginManager.getInstalledPlugins();
+    []
-      return plugins.map((p) => p.name);
+  );
-    }, []);
 
   if (loading) {
     return <LoadingSpinner tip={t('正在加载已安装插件')} />;
   }
 
+  const installedPluginNameList = installedPluginList.map((p) => p.name);
+
   return (
     <div className="p-2 w-full">
-      {/* 内置插件 */}
+      <PillTabs>
-      <Divider orientation="left">{t('内置插件')}</Divider>
+        <PillTabPane key="1" tab={t('全部')}>
-
+          <Divider orientation="left">{t('内置插件')}</Divider>
-      <div>
+
-        {builtinPlugins.map((plugin) => (
+          <div className="flex flex-wrap">
-          <PluginStoreItem
+            {builtinPlugins.map((plugin) => (
-            key={plugin.name}
+              <div key={plugin.name} className="m-1">
-            manifest={plugin}
+                <PluginStoreItem
-            installed={installedPluginNameList.includes(plugin.name)}
+                  manifest={plugin}
-            builtin={true}
+                  installed={installedPluginNameList.includes(plugin.name)}
-          />
+                  builtin={true}
-        ))}
+                />
-      </div>
+              </div>
-
+            ))}
-      <Divider orientation="left">{t('插件中心')}</Divider>
+          </div>
+
+          <Divider orientation="left">{t('插件中心')}</Divider>
+
+          {/* TODO: 插件中心 */}
+        </PillTabPane>
+
+        <PillTabPane key="2" tab={t('已安装')}>
+          <Divider orientation="left">{t('已安装')}</Divider>
+
+          <div className="flex flex-wrap">
+            {[...builtinPlugins, ...installedPluginList].map((plugin) => (
+              <PluginStoreItem
+                key={plugin.name}
+                manifest={plugin}
+                installed={true}
+                builtin={true}
+              />
+            ))}
+          </div>
+        </PillTabPane>
+      </PillTabs>
     </div>
   );
 });