From 62a58bf65ca93b12d08ebc183e75a3cc69e7293d Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 28 Nov 2021 22:20:00 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=B9=B6=E4=BF=AE=E5=A4=8D=E5=B7=B2=E5=AE=89=E8=A3=85?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E9=83=BD=E6=98=BE=E7=A4=BA=E5=86=85=E9=83=A8?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/plugin/PluginStore/index.module.less |  7 +++++++
 web/src/plugin/PluginStore/index.tsx         | 10 ++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 web/src/plugin/PluginStore/index.module.less

diff --git a/web/src/plugin/PluginStore/index.module.less b/web/src/plugin/PluginStore/index.module.less
new file mode 100644
index 00000000..41c9facb
--- /dev/null
+++ b/web/src/plugin/PluginStore/index.module.less
@@ -0,0 +1,7 @@
+.pluginSection {
+  @apply flex flex-wrap;
+
+  > * {
+    @apply m-1;
+  }
+}
diff --git a/web/src/plugin/PluginStore/index.tsx b/web/src/plugin/PluginStore/index.tsx
index 6e550ccc..6d4caac8 100644
--- a/web/src/plugin/PluginStore/index.tsx
+++ b/web/src/plugin/PluginStore/index.tsx
@@ -11,6 +11,7 @@ import { builtinPlugins } from '../builtin';
 import { pluginManager } from '../manager';
 import { PluginStoreItem } from './Item';
 import { ManualInstall } from './ManualInstall';
+import styles from './index.module.less';
 
 function usePluginStoreData() {
   const { loading: loading1, value: installedPluginList = [] } = useAsync(
@@ -39,6 +40,7 @@ export const PluginStore: React.FC = React.memo(() => {
   }
 
   const installedPluginNameList = installedPluginList.map((p) => p.name);
+  const builtinPluginNameList = builtinPlugins.map((p) => p.name);
 
   return (
     <div className="p-2 w-full">
@@ -46,7 +48,7 @@ export const PluginStore: React.FC = React.memo(() => {
         <PillTabPane key="1" tab={t('全部')}>
           <Divider orientation="left">{t('内置插件')}</Divider>
 
-          <div className="flex flex-wrap gap-2">
+          <div className={styles.pluginSection}>
             {builtinPlugins.map((plugin) => (
               <PluginStoreItem
                 key={plugin.name}
@@ -59,7 +61,7 @@ export const PluginStore: React.FC = React.memo(() => {
 
           <Divider orientation="left">{t('插件中心')}</Divider>
 
-          <div className="flex flex-wrap gap-2">
+          <div className={styles.pluginSection}>
             {allPlugins.map((plugin) => (
               <PluginStoreItem
                 key={plugin.name}
@@ -73,13 +75,13 @@ export const PluginStore: React.FC = React.memo(() => {
         <PillTabPane key="2" tab={t('已安装')}>
           <Divider orientation="left">{t('已安装')}</Divider>
 
-          <div className="flex flex-wrap gap-2">
+          <div className={styles.pluginSection}>
             {[...builtinPlugins, ...installedPluginList].map((plugin) => (
               <PluginStoreItem
                 key={plugin.name}
                 manifest={plugin}
                 installed={true}
-                builtin={true}
+                builtin={builtinPluginNameList.includes(plugin.name)}
               />
             ))}
           </div>