mirror of https://github.com/msgbyte/tailchat
refactor: 侧边栏路由切换
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';
|
@ -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…
Reference in New Issue