From 7e431b19728d158e28530238886e665859e3e92c Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 24 Dec 2021 14:48:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E8=87=AA=E5=AE=9A=E4=B9=89=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/i18n/index.ts                          |  2 +-
 web/src/plugin/common/index.ts                |  1 +
 web/src/plugin/common/reg.ts                  | 35 +++++++++++++++++++
 .../routes/Main/Content/Personal/Sidebar.tsx  | 14 ++++++++
 .../routes/Main/Content/Personal/index.tsx    | 11 ++++++
 5 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/shared/i18n/index.ts b/shared/i18n/index.ts
index b25f7675..c761d42e 100644
--- a/shared/i18n/index.ts
+++ b/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 翻译对象
  */
diff --git a/web/src/plugin/common/index.ts b/web/src/plugin/common/index.ts
index af55113b..c3749646 100644
--- a/web/src/plugin/common/index.ts
+++ b/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,
diff --git a/web/src/plugin/common/reg.ts b/web/src/plugin/common/reg.ts
index 362031e5..59c17467 100644
--- a/web/src/plugin/common/reg.ts
+++ b/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>();
+
 /**
  * 注册群组面板
  */
diff --git a/web/src/routes/Main/Content/Personal/Sidebar.tsx b/web/src/routes/Main/Content/Personal/Sidebar.tsx
index 7af19d6b..d1f176f5 100644
--- a/web/src/routes/Main/Content/Personal/Sidebar.tsx
+++ b/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>
diff --git a/web/src/routes/Main/Content/Personal/index.tsx b/web/src/routes/Main/Content/Personal/index.tsx
index 16a0ccda..25d2a07d 100644
--- a/web/src/routes/Main/Content/Personal/index.tsx
+++ b/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>