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 ( +
+ +

{t('该功能暂未开放')}

+
+ ); +}); +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';