feat: add custom sidebar item

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

@@ -0,0 +1,31 @@
+import type { PluginCustomPanel } from '@/plugin/common';
+import React, { useMemo } from 'react';
+import { Icon } from 'tailchat-design';
+import { SidebarItem } from './SidebarItem';
+
+const defaultUseIsShow = () => true;
+
+/**
+ * 导航栏自定义选项
+ * 用于插件
+ */
+export const CustomSidebarItem: React.FC<{
+  panelInfo: PluginCustomPanel;
+}> = React.memo(({ panelInfo }) => {
+  const useIsShow = useMemo(() => panelInfo.useIsShow ?? defaultUseIsShow, []);
+  const isShow = useIsShow();
+
+  if (!isShow) {
+    return null;
+  }
+
+  return (
+    <SidebarItem
+      key={panelInfo.name}
+      name={panelInfo.label}
+      icon={<Icon icon={panelInfo.icon} />}
+      to={`/main/personal/custom/${panelInfo.name}`}
+    />
+  );
+});
+CustomSidebarItem.displayName = 'CustomSidebarItem';

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

@@ -14,6 +14,7 @@ import { CreateDMConverse } from '@/components/modals/CreateDMConverse';
 import { SectionHeader } from '@/components/SectionHeader';
 import { CommonSidebarWrapper } from '@/components/CommonSidebarWrapper';
 import { pluginCustomPanel } from '@/plugin/common';
+import { CustomSidebarItem } from '../CustomSidebarItem';
 
 const SidebarSection: React.FC<
   PropsWithChildren<{
@@ -73,12 +74,7 @@ export const PersonalSidebar: React.FC = React.memo(() => {
         {pluginCustomPanel
           .filter((p) => p.position === 'personal')
           .map((p) => (
-            <SidebarItem
+            <CustomSidebarItem key={p.name} panelInfo={p} />
-              key={p.name}
-              name={p.label}
-              icon={<Icon icon={p.icon} />}
-              to={`/main/personal/custom/${p.name}`}
-            />
           ))}
 
         <SidebarSection

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

@@ -12,10 +12,12 @@ const defaultUseIsShow = () => true;
  */
 export const NavbarCustomNavItem: React.FC<{
   panelInfo: PluginCustomPanel;
+  /**
+   * 是否包含背景
+   */
   withBg: boolean;
 }> = React.memo(({ panelInfo, withBg }) => {
   const useIsShow = useMemo(() => panelInfo.useIsShow ?? defaultUseIsShow, []);
-
   const isShow = useIsShow();
 
   if (!isShow) {