feat: 增加个人面板自定义面板

shared/i18n/index.ts

@@ -61,7 +61,7 @@ export const t: TFunction = (
 /**
  * 本地翻译
  * @example
- * localTrans({zh-CN: '你好', en-US: 'Hello'});
+ * localTrans({'zh-CN': '你好', 'en-US': 'Hello'});
  *
  * @param trans 翻译对象
  */

web/src/plugin/common/index.ts

@@ -9,6 +9,7 @@ export {
   useCurrentGroupPanelInfo,
 } from '@/routes/Main/Content/Group/utils';
 export { openModal, ModalWrapper, useModalContext } from '@/components/Modal';
+export { Loadable } from '@/components/Loadable';
 export { getGlobalState } from '@/utils/global-state-helper';
 export {
   getCachedUserInfo,

web/src/plugin/common/reg.ts

@@ -6,6 +6,41 @@ import {
   regSocketEventListener,
 } from 'tailchat-shared';
 
+/**
+ * 注册自定义面板
+ */
+export interface PluginCustomPanel {
+  /**
+   * 面板位置:
+   *
+   * - personal: 个人面板中的一项
+   * - navbar: 导航栏(未实装)
+   */
+  position: 'personal' | 'navbar';
+
+  /**
+   * Iconify 名
+   */
+  icon: string;
+
+  /**
+   * 自定义面板唯一标识名
+   */
+  name: string;
+
+  /**
+   * 自定义面板显示名
+   */
+  label: string;
+
+  /**
+   * 渲染组件
+   */
+  render: React.ComponentType;
+}
+export const [pluginCustomPanel, regCustomPanel] =
+  buildRegList<PluginCustomPanel>();
+
 /**
  * 注册群组面板
  */

web/src/routes/Main/Content/Personal/Sidebar.tsx

@@ -8,6 +8,7 @@ import { CreateDMConverse } from '@/components/modals/CreateDMConverse';
 import { DevContainer } from '@/components/DevContainer';
 import { SectionHeader } from '@/components/SectionHeader';
 import { CommonSidebarWrapper } from '@/components/CommonSidebarWrapper';
+import { pluginCustomPanel } from '@/plugin/common';
 
 const SidebarSection: React.FC<{
   action: React.ReactNode;
@@ -47,6 +48,19 @@ export const PersonalSidebar: React.FC = React.memo(() => {
           icon={<Icon icon="mdi:puzzle" />}
           to="/main/personal/plugins"
         />
+
+        {/* 插件自定义面板 */}
+        {pluginCustomPanel
+          .filter((p) => p.position === 'personal')
+          .map((p) => (
+            <SidebarItem
+              key={p.name}
+              name={p.label}
+              icon={<Icon icon={p.icon} />}
+              to={`/main/personal/custom/${p.name}`}
+            />
+          ))}
+
         <SidebarSection
           action={
             <DevContainer>

web/src/routes/Main/Content/Personal/index.tsx

@@ -1,3 +1,4 @@
+import { pluginCustomPanel } from '@/plugin/common';
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { PageContent } from '../PageContent';
@@ -19,6 +20,16 @@ export const Personal: React.FC = React.memo(() => {
           component={PersonalConverse}
         />
 
+        {pluginCustomPanel
+          .filter((p) => p.position === 'personal')
+          .map((p) => (
+            <Route
+              key={p.name}
+              path={`/main/personal/custom/${p.name}`}
+              component={p.render}
+            />
+          ))}
+
         <Redirect to="/main/personal/friends" />
       </Switch>
     </PageContent>