feat: 增加导航栏相关的插件面板注册

client/web/src/plugin/common/reg.ts

@@ -20,10 +20,16 @@ export interface PluginCustomPanel {
    *
    * - personal: 个人面板中的一项
    * - setting: 设置面板
-   * - navbar: 导航栏(未实装)
    * - groupdetail: 群组详情
+   * - navbar*: 导航栏
    */
-  position: 'personal' | 'setting' | 'navbar' | 'groupdetail';
+  position:
+    | 'personal'
+    | 'setting'
+    | 'groupdetail'
+    | 'navbar-more'
+    | 'navbar-group'
+    | 'navbar-personal';
 
   /**
    * Iconify 名
@@ -210,7 +216,7 @@ export interface DMPluginPanelActionProps extends BasePluginPanelActionProps {
 }
 
 /**
- * 注册面板操作
+ * 注册 面板操作 到面板右上角
  */
 export const [pluginPanelActions, regPluginPanelAction] = buildRegList<
   GroupPluginPanelActionProps | DMPluginPanelActionProps

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

@@ -3,6 +3,7 @@ import { Personal } from './Personal';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { Group } from './Group';
 import { Inbox } from './Inbox';
+import { pluginCustomPanel } from '@/plugin/common';
 
 export const MainContent: React.FC = React.memo(() => {
   return (
@@ -10,6 +11,21 @@ export const MainContent: React.FC = React.memo(() => {
       <Route path="/personal/*" element={<Personal />} />
       <Route path="/inbox/*" element={<Inbox />} />
       <Route path="/group/:groupId/*" element={<Group />} />
+
+      {pluginCustomPanel
+        .filter((p) =>
+          ['navbar-more', 'navbar-group', 'navbar-personal'].includes(
+            p.position
+          )
+        )
+        .map((p) => (
+          <Route
+            key={p.name}
+            path={`/custom/${p.name}`}
+            element={React.createElement(p.render)}
+          />
+        ))}
+
       <Route
         path="/"
         element={<Navigate to="/main/personal" replace={true} />}

client/web/src/routes/Main/Navbar/CustomNavItem.tsx

@@ -0,0 +1,27 @@
+import type { PluginCustomPanel } from '@/plugin/common';
+import clsx from 'clsx';
+import React from 'react';
+import { Icon } from 'tailchat-design';
+import { NavbarNavItem } from './NavItem';
+
+/**
+ * 导航栏自定义选项
+ * 用于插件
+ */
+export const NavbarCustomNavItem: React.FC<{
+  panelInfo: PluginCustomPanel;
+  withBg: boolean;
+}> = React.memo(({ panelInfo, withBg }) => {
+  return (
+    <NavbarNavItem
+      key={panelInfo.name}
+      name={panelInfo.label}
+      className={clsx({ 'bg-gray-700': withBg })}
+      to={`/main/custom/${panelInfo.name}`}
+      data-testid={`navbar-custom-${panelInfo.name}`}
+    >
+      <Icon className="text-3xl text-white" icon={panelInfo.icon} />
+    </NavbarNavItem>
+  );
+});
+NavbarCustomNavItem.displayName = 'NavbarCustomNavItem';

client/web/src/routes/Main/Navbar/index.tsx

@@ -7,6 +7,10 @@ import { PersonalNav } from './PersonalNav';
 import { InboxNav } from './InboxNav';
 import { InstallBtn } from './InstallBtn';
 import { ReactQueryDevBtn } from './ReactQueryDevBtn';
+import { pluginCustomPanel } from '@/plugin/common';
+import { Icon } from 'tailchat-design';
+import { NavbarNavItem } from './NavItem';
+import { NavbarCustomNavItem } from './CustomNavItem';
 
 /**
  * 导航栏组件
@@ -25,6 +29,12 @@ export const Navbar: React.FC = React.memo(() => {
           <PersonalNav />
 
           <InboxNav />
+
+          {pluginCustomPanel
+            .filter((p) => p.position === 'navbar-personal')
+            .map((p) => (
+              <NavbarCustomNavItem key={p.name} panelInfo={p} withBg={true} />
+            ))}
         </div>
 
         <div className="px-3">
@@ -32,12 +42,24 @@ export const Navbar: React.FC = React.memo(() => {
         </div>
 
         <GroupNav />
+
+        {pluginCustomPanel
+          .filter((p) => p.position === 'navbar-group')
+          .map((p) => (
+            <NavbarCustomNavItem key={p.name} panelInfo={p} withBg={true} />
+          ))}
       </div>
 
       <div
         data-tc-role="navbar-settings"
         className="flex flex-col items-center space-y-2"
       >
+        {pluginCustomPanel
+          .filter((p) => p.position === 'navbar-more')
+          .map((p) => (
+            <NavbarCustomNavItem key={p.name} panelInfo={p} withBg={false} />
+          ))}
+
         {/* React Query 的调试面板 */}
         <ReactQueryDevBtn />