feat: add custom setting panel

web/src/components/modals/SettingsView/index.tsx

@@ -1,5 +1,10 @@
 import { FullModal } from '@/components/FullModal';
-import { SidebarView, SidebarViewMenuType } from '@/components/SidebarView';
+import {
+  SidebarView,
+  SidebarViewMenuItem,
+  SidebarViewMenuType,
+} from '@/components/SidebarView';
+import { pluginCustomPanel } from '@/plugin/common';
 import React, { useCallback, useMemo } from 'react';
 import { t } from 'tailchat-shared';
 import { SettingsAbout } from './About';
@@ -21,9 +26,8 @@ export const SettingsView: React.FC<SettingsViewProps> = React.memo((props) => {
     [props.onClose]
   );
 
-  const menu: SidebarViewMenuType[] = useMemo(
+  const menu: SidebarViewMenuType[] = useMemo(() => {
-    () => [
+    const common: SidebarViewMenuType = {
-      {
       type: 'group',
       title: t('通用'),
       children: [
@@ -53,10 +57,26 @@ export const SettingsView: React.FC<SettingsViewProps> = React.memo((props) => {
           content: <SettingsAbout />,
         },
       ],
-      },
+    };
-    ],
+    const more: SidebarViewMenuItem[] = pluginCustomPanel
-    []
+      .filter((p) => p.position === 'setting')
-  );
+      .map((p) => ({
+        type: 'item',
+        title: p.label,
+        content: React.createElement(p.render),
+      }));
+
+    const menu: SidebarViewMenuType[] = [common];
+    if (more.length > 0) {
+      menu.push({
+        type: 'group',
+        title: t('更多'),
+        children: [...more],
+      });
+    }
+
+    return menu;
+  }, []);
 
   return (
     <FullModal onChangeVisible={handleChangeVisible}>

web/src/plugin/common/reg.ts

@@ -14,9 +14,10 @@ export interface PluginCustomPanel {
    * 面板位置:
    *
    * - personal: 个人面板中的一项
+   * - setting: 设置面板
    * - navbar: 导航栏(未实装)
    */
-  position: 'personal' | 'navbar';
+  position: 'personal' | 'setting' | 'navbar';
 
   /**
    * Iconify 名