refactor: 侧边栏路由切换

pull/13/head
moonrailgun 4 years ago
parent 01c594f825
commit 63ebbd0f52

@ -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';

@ -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 (
<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';
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 (
<>
<SidebarItem icon={<Icon icon="mdi-account-multiple" />}>
</SidebarItem>
<SidebarItem icon={<Icon icon="mdi-puzzle" />}></SidebarItem>
<SidebarItem
name="好友"
icon={<Icon icon="mdi-account-multiple" />}
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="用户" />}
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="用户" />}
name="用户1"
action={<Icon icon="mdi-close" />}
>
1
</SidebarItem>
to={`/main/personal/converse/${'uuid'}`}
/>
</>
);
});

@ -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>

@ -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';
Loading…
Cancel
Save