refactor: 侧边栏路由切换

web/src/components/IsDeveloping.tsx

@@ -0,0 +1,17 @@
+import { Icon } from '@iconify/react';
+import { t } from 'pawchat-shared';
+import React from 'react';
+
+/**
+ * 正在开发中的功能
+ * 占位符
+ */
+export const IsDeveloping: React.FC = React.memo(() => {
+  return (
+    <div className="text-white w-full h-full flex items-center justify-center flex-col">
+      <Icon className="text-9xl" icon="mdi-code-braces" />
+      <p className="text-2xl">{t('该功能暂未开放')}</p>
+    </div>
+  );
+});
+IsDeveloping.displayName = 'IsDeveloping';

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

@@ -1,31 +1,6 @@
 import React from 'react';
-import clsx, { ClassValue } from 'clsx';
 import { Icon } from '@iconify/react';
-import { Avatar } from '@/components/Avatar';
+import { SidebarItem } from '../SidebarItem';
-
-const SidebarItem: React.FC<{
-  className?: ClassValue;
-  icon?: React.ReactNode;
-  action?: React.ReactNode;
-}> = React.memo((props) => {
-  return (
-    <div
-      className={clsx(
-        'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-2 h-11 flex items-center text-base group',
-        props.className
-      )}
-    >
-      <div className="flex h-8 items-center justify-center text-2xl w-8 mr-3">
-        {props.icon}
-      </div>
-      <div className="flex-1">{props.children}</div>
-      <div className="text-base p-1 cursor-pointer hidden opacity-70 group-hover:block hover:opacity-100">
-        {props.action}
-      </div>
-    </div>
-  );
-});
-SidebarItem.displayName = 'SidebarItem';
 
 const SidebarSection: React.FC<{
   action: React.ReactNode;
@@ -49,37 +24,24 @@ SidebarSection.displayName = 'SidebarSection';
 export const Sidebar: React.FC = React.memo(() => {
   return (
     <>
-      <SidebarItem icon={<Icon icon="mdi-account-multiple" />}>
+      <SidebarItem
-        好友
+        name="好友"
-      </SidebarItem>
+        icon={<Icon icon="mdi-account-multiple" />}
-      <SidebarItem icon={<Icon icon="mdi-puzzle" />}>插件中心</SidebarItem>
+        to="/main/personal/friends"
+      />
+      <SidebarItem
+        name="插件中心"
+        icon={<Icon icon="mdi-puzzle" />}
+        to="/main/personal/plugins"
+      />
 
       <SidebarSection action={<Icon icon="mdi-plus" />}>私信</SidebarSection>
 
       <SidebarItem
-        icon={<Avatar name="用户" />}
+        name="用户1"
-        action={<Icon icon="mdi-close" />}
-      >
-        用户1
-      </SidebarItem>
-      <SidebarItem
-        icon={<Avatar name="用户" />}
-        action={<Icon icon="mdi-close" />}
-      >
-        用户1
-      </SidebarItem>
-      <SidebarItem
-        icon={<Avatar name="用户" />}
-        action={<Icon icon="mdi-close" />}
-      >
-        用户1
-      </SidebarItem>
-      <SidebarItem
-        icon={<Avatar name="用户" />}
         action={<Icon icon="mdi-close" />}
-      >
+        to={`/main/personal/converse/${'uuid'}`}
-        用户1
+      />
-      </SidebarItem>
     </>
   );
 });

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

@@ -1,3 +1,4 @@
+import { IsDeveloping } from '@/components/IsDeveloping';
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { PageContent } from '../PageContent';
@@ -10,6 +11,10 @@ export const Personal: React.FC = React.memo(() => {
       <Switch>
         <Route path="/main/personal/friends" component={FriendPanel} />
 
+        <Route path="/main/personal/plugins" component={IsDeveloping} />
+
+        <Route path="/main/personal/converse" component={IsDeveloping} />
+
         <Redirect to="/main/personal/friends" />
       </Switch>
     </PageContent>

web/src/routes/Main/Content/SidebarItem.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
+import { Typography, Badge } from 'antd';
+import { Avatar } from '@/components/Avatar';
+import clsx from 'clsx';
+
+interface SidebarItemProps {
+  name: string;
+  to: string;
+  badge?: boolean | number;
+  icon?: string | React.ReactElement;
+  action?: React.ReactNode;
+}
+export const SidebarItem: React.FC<SidebarItemProps> = React.memo((props) => {
+  const { icon, name, to, badge } = props;
+  const location = useLocation();
+  const isActive = location.pathname.startsWith(to);
+
+  return (
+    <Link to={to}>
+      <div
+        className={clsx(
+          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-2 h-11 flex items-center text-base group',
+          {
+            'bg-opacity-20': isActive,
+          }
+        )}
+      >
+        <div className="flex h-8 items-center justify-center text-2xl w-8 mr-3">
+          {React.isValidElement(icon) ? (
+            icon
+          ) : (
+            <Avatar src={icon} name={name} />
+          )}
+        </div>
+
+        <Typography.Text className="flex-1 text-white" ellipsis={true}>
+          {name}
+        </Typography.Text>
+
+        {badge === true ? (
+          <Badge status="error" />
+        ) : (
+          <Badge count={Number(badge) || 0} />
+        )}
+
+        <div className="text-base p-1 cursor-pointer hidden opacity-70 group-hover:block hover:opacity-100">
+          {props.action}
+        </div>
+      </div>
+    </Link>
+  );
+});
+SidebarItem.displayName = 'SidebarItem';