diff --git a/web/src/components/IsDeveloping.tsx b/web/src/components/IsDeveloping.tsx
new file mode 100644
index 00000000..964c7858
--- /dev/null
+++ b/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 (
+
+ );
+});
+IsDeveloping.displayName = 'IsDeveloping';
diff --git a/web/src/routes/Main/Content/Personal/Sidebar.tsx b/web/src/routes/Main/Content/Personal/Sidebar.tsx
index 4a3168a1..c1afd26c 100644
--- a/web/src/routes/Main/Content/Personal/Sidebar.tsx
+++ b/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';
-
-const SidebarItem: React.FC<{
- className?: ClassValue;
- icon?: React.ReactNode;
- action?: React.ReactNode;
-}> = React.memo((props) => {
- return (
-
-
- {props.icon}
-
-
{props.children}
-
- {props.action}
-
-
- );
-});
-SidebarItem.displayName = 'SidebarItem';
+import { SidebarItem } from '../SidebarItem';
const SidebarSection: React.FC<{
action: React.ReactNode;
@@ -49,37 +24,24 @@ SidebarSection.displayName = 'SidebarSection';
export const Sidebar: React.FC = React.memo(() => {
return (
<>
- }>
- 好友
-
- }>插件中心
+ }
+ to="/main/personal/friends"
+ />
+ }
+ to="/main/personal/plugins"
+ />
}>私信
}
- action={}
- >
- 用户1
-
- }
- action={}
- >
- 用户1
-
- }
- action={}
- >
- 用户1
-
- }
+ name="用户1"
action={}
- >
- 用户1
-
+ to={`/main/personal/converse/${'uuid'}`}
+ />
>
);
});
diff --git a/web/src/routes/Main/Content/Personal/index.tsx b/web/src/routes/Main/Content/Personal/index.tsx
index 27b7d0e7..bcc84ab2 100644
--- a/web/src/routes/Main/Content/Personal/index.tsx
+++ b/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(() => {
+
+
+
+
diff --git a/web/src/routes/Main/Content/SidebarItem.tsx b/web/src/routes/Main/Content/SidebarItem.tsx
new file mode 100644
index 00000000..67d17979
--- /dev/null
+++ b/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 = React.memo((props) => {
+ const { icon, name, to, badge } = props;
+ const location = useLocation();
+ const isActive = location.pathname.startsWith(to);
+
+ return (
+
+
+
+ {React.isValidElement(icon) ? (
+ icon
+ ) : (
+
+ )}
+
+
+
+ {name}
+
+
+ {badge === true ? (
+
+ ) : (
+
+ )}
+
+
+ {props.action}
+
+
+
+ );
+});
+SidebarItem.displayName = 'SidebarItem';