From 337eb14b54fddd0dd546b2ec5dd3c8d7b2a47e7c Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 24 Aug 2021 17:38:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=E5=B7=B2?=
 =?UTF-8?q?=E5=AE=89=E8=A3=85=E6=8F=92=E4=BB=B6tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/plugin/PluginStore/index.tsx | 63 +++++++++++++++++++---------
 1 file changed, 43 insertions(+), 20 deletions(-)

diff --git a/web/src/plugin/PluginStore/index.tsx b/web/src/plugin/PluginStore/index.tsx
index c0b7c0ac..d56ec930 100644
--- a/web/src/plugin/PluginStore/index.tsx
+++ b/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 = [] } =
-    useAsync(async () => {
-      const plugins = await pluginManager.getInstalledPlugins();
-      return plugins.map((p) => p.name);
-    }, []);
+  const { loading, value: installedPluginList = [] } = useAsync(
+    async () => pluginManager.getInstalledPlugins(),
+    []
+  );
 
   if (loading) {
     return <LoadingSpinner tip={t('正在加载已安装插件')} />;
   }
 
+  const installedPluginNameList = installedPluginList.map((p) => p.name);
+
   return (
     <div className="p-2 w-full">
-      {/* 内置插件 */}
-      <Divider orientation="left">{t('内置插件')}</Divider>
-
-      <div>
-        {builtinPlugins.map((plugin) => (
-          <PluginStoreItem
-            key={plugin.name}
-            manifest={plugin}
-            installed={installedPluginNameList.includes(plugin.name)}
-            builtin={true}
-          />
-        ))}
-      </div>
-
-      <Divider orientation="left">{t('插件中心')}</Divider>
+      <PillTabs>
+        <PillTabPane key="1" tab={t('全部')}>
+          <Divider orientation="left">{t('内置插件')}</Divider>
+
+          <div className="flex flex-wrap">
+            {builtinPlugins.map((plugin) => (
+              <div key={plugin.name} className="m-1">
+                <PluginStoreItem
+                  manifest={plugin}
+                  installed={installedPluginNameList.includes(plugin.name)}
+                  builtin={true}
+                />
+              </div>
+            ))}
+          </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>
   );
 });