48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { Avatar, Button, Layout, Space, Typography } from '@arco-design/web-react'
|
|
import {
|
|
IconApps,
|
|
IconCalendar,
|
|
IconCheckCircleFill,
|
|
IconMessage,
|
|
IconRobot,
|
|
IconSettings,
|
|
IconStorage,
|
|
IconThunderbolt,
|
|
IconUserGroup,
|
|
} from '@arco-design/web-react/icon'
|
|
|
|
const { Footer } = Layout
|
|
const { Text } = Typography
|
|
|
|
export function ProjectStatusbar() {
|
|
return (
|
|
<Footer className="statusbar">
|
|
<div className="status-user">
|
|
<Avatar size={26} style={{ backgroundColor: '#165DFF' }}>张</Avatar>
|
|
<div className="status-identity">
|
|
<Text className="status-name">张明</Text>
|
|
<span className="status-online-dot" aria-label="在线" title="在线" />
|
|
</div>
|
|
<Button type="text" icon={<IconUserGroup />}>好友</Button>
|
|
<Button type="text" icon={<IconMessage />}>私信</Button>
|
|
<Button type="text" icon={<IconSettings />}>设置</Button>
|
|
</div>
|
|
<Space className="status-tasks" size={28}>
|
|
<span><IconCheckCircleFill /> 同步完成</span>
|
|
<span><IconInteractionFallback /> 3 个任务进行中</span>
|
|
<span><IconRobot /> AI 队列空闲</span>
|
|
<span><IconThunderbolt /> 本地草稿已保存</span>
|
|
</Space>
|
|
<Space className="status-system" size={24}>
|
|
<span><IconStorage /> 系统存储 152GB 可用</span>
|
|
<span>系统健康 <b>正常</b></span>
|
|
<IconApps />
|
|
</Space>
|
|
</Footer>
|
|
)
|
|
}
|
|
|
|
function IconInteractionFallback() {
|
|
return <IconCalendar />
|
|
}
|