✨ feat: add plugin market Setting Modal

lobehub · Sep 9, 2023 · a0603a9 · a0603a9
1 parent 0e35c18
commit a0603a9
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 57 deletions.
diff --git a/src/features/AgentSetting/AgentPlugin/MarketList.tsx b/src/features/AgentSetting/AgentPlugin/MarketList.tsx
@@ -1,8 +1,8 @@
 import { Avatar, Form, Icon, Tooltip } from '@lobehub/ui';
-import { Button, Skeleton, Switch, Tag } from 'antd';
+import { Button, Skeleton, Space, Switch, Tag } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { LucideBlocks, LucideStore, LucideTrash2 } from 'lucide-react';
+import { LucideBlocks, LucideSettings, LucideStore, LucideTrash2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -13,6 +13,7 @@ import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
 
 import { useStore } from '../store';
 import LocalPluginItem from './LocalPluginItem';
+import MarketSettingModal from './MarketSettingModal';
 
 const useStyles = createStyles(({ css }) => ({
   avatar: css`
@@ -36,6 +37,7 @@ const MarketList = memo(() => {
   const { styles } = useStyles();
 
   const [showModal, setModal] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
 
   const [userEnabledPlugins, hasPlugin, toggleAgentPlugin] = useStore((s) => [
     s.config.plugins || [],
@@ -173,12 +175,13 @@ const MarketList = memo(() => {
         onValueChange={updateNewDevPlugin}
         open={showModal}
       />
+      <MarketSettingModal onOpenChange={setShowSettings} open={showSettings} />
       <Form
         items={[
           {
             children: isEmpty ? loadingList : [...deprecatedList, ...customList, ...list],
             extra: (
-              <Flexbox gap={8} horizontal>
+              <Flexbox align={'center'} gap={8} horizontal>
                 {hasDeprecated ? (
                   <Tooltip title={t('settingPlugin.clearDeprecated')}>
                     <Button
@@ -191,21 +194,32 @@ const MarketList = memo(() => {
                       }}
                       size={'small'}
                       type={'text'}
-                    ></Button>
+                    />
                   </Tooltip>
                 ) : null}
-                <Tooltip title={t('settingPlugin.addTooltip')}>
-                  <Button
-                    icon={<Icon icon={LucideBlocks} />}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setModal(true);
-                    }}
-                    size={'small'}
-                  >
-                    {t('settingPlugin.add')}
-                  </Button>
-                </Tooltip>
+
+                <Space.Compact style={{ width: 'auto' }}>
+                  <Tooltip title={t('settingPlugin.addTooltip')}>
+                    <Button
+                      icon={<Icon icon={LucideBlocks} />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setModal(true);
+                      }}
+                      size={'small'}
+                    />
+                  </Tooltip>
+                  <Tooltip title={t('settingPlugin.settings')}>
+                    <Button
+                      icon={<Icon icon={LucideSettings} />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setShowSettings(true);
+                      }}
+                      size={'small'}
+                    />
+                  </Tooltip>
+                </Space.Compact>
               </Flexbox>
             ),
             icon: LucideStore,

diff --git a/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx b/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx
@@ -0,0 +1,76 @@
+import { Icon, Input, Tooltip } from '@lobehub/ui';
+import { ConfigProvider, Form, Modal } from 'antd';
+import { createStyles } from 'antd-style';
+import { LucideSettings } from 'lucide-react';
+import { lighten } from 'polished';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { PLUGINS_INDEX_URL } from '@/const/url';
+
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  content: css`
+    .${prefixCls}-modal-content {
+      border: 1px solid ${token.colorSplit};
+      border-radius: 12px;
+    }
+  `,
+  root: css`
+    backdrop-filter: blur(2px);
+  `,
+}));
+
+interface MarketSettingModalProps {
+  onOpenChange: (open: boolean) => void;
+  open?: boolean;
+}
+
+const MarketSettingModal = memo<MarketSettingModalProps>(({ open, onOpenChange }) => {
+  const { t } = useTranslation('plugin');
+  const { styles, theme } = useStyles();
+
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorBgElevated: lighten(0.005, theme.colorBgContainer),
+        },
+      }}
+    >
+      <Modal
+        centered
+        closable
+        maskClosable
+        onCancel={() => {
+          onOpenChange(false);
+        }}
+        open={open}
+        title={
+          <Flexbox gap={8} horizontal style={{ marginBottom: 24 }}>
+            <Icon icon={LucideSettings} />
+            {t('settings.title')}
+          </Flexbox>
+        }
+        width={700}
+        wrapClassName={styles.root}
+      >
+        <Flexbox gap={12}>
+          <Form layout={'vertical'}>
+            <Form.Item extra={t('settings.modalDesc')} label={t('settings.indexUrl.title')}>
+              <Tooltip title={t('settings.indexUrl.tooltip')}>
+                <Input
+                  defaultValue={PLUGINS_INDEX_URL}
+                  disabled
+                  placeholder={'https://xxxxx.com/index.json'}
+                />
+              </Tooltip>
+            </Form.Item>
+          </Form>
+        </Flexbox>
+      </Modal>
+    </ConfigProvider>
+  );
+});
+
+export default MarketSettingModal;
diff --git a/src/features/AgentSetting/test.json b/src/features/AgentSetting/test.json
diff --git a/src/locales/default/plugin.ts b/src/locales/default/plugin.ts
@@ -87,13 +87,21 @@ export default {
       'local.title': '自定义',
     },
   },
-
   loading: {
     content: '数据获取中...',
     plugin: '插件运行中...',
   },
+
   pluginList: '插件列表',
   plugins: {
     unknown: '插件检测中...',
   },
+  settings: {
+    indexUrl: {
+      title: '市场索引',
+      tooltip: '暂不支持编辑',
+    },
+    modalDesc: '配置插件市场的地址后，可以使用自定义的插件市场',
+    title: '设置插件市场',
+  },
 };
diff --git a/src/locales/default/setting.ts b/src/locales/default/setting.ts
@@ -132,6 +132,7 @@ export default {
     addTooltip: '添加自定义插件',
     clearDeprecated: '移除无效插件',
     config: '{{id}} 插件配置',
+    settings: '配置插件市场',
     title: '插件列表',
   },
   settingSystem: {