62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
|
import { Button, Card, Progress, Space, Tag, Typography } from '@arco-design/web-react'
|
||
|
|
import { IconCalendar, IconCheckCircle, IconPlus, IconUser } from '@arco-design/web-react/icon'
|
||
|
|
import { tasks } from './project-data'
|
||
|
|
import type { Project } from './project-types'
|
||
|
|
|
||
|
|
const { Title, Text } = Typography
|
||
|
|
|
||
|
|
const lanes = [
|
||
|
|
{ title: '待开始', color: 'gray', items: ['权限边界确认', '客户案例素材整理'] },
|
||
|
|
{ title: '进行中', color: 'arcoblue', items: tasks.map((task) => task.title) },
|
||
|
|
{ title: '已完成', color: 'green', items: ['项目模板初始化', '会议纪要归档'] },
|
||
|
|
]
|
||
|
|
|
||
|
|
export function ProjectTasks({ activeProject, onSelectItem }: { activeProject: Project; onSelectItem: (title: string) => void }) {
|
||
|
|
return (
|
||
|
|
<div className="project-channel-page project-tasks-page overview-page">
|
||
|
|
<div className="overview-head">
|
||
|
|
<div>
|
||
|
|
<Title heading={4}>工作计划</Title>
|
||
|
|
<Text type="secondary">{activeProject.name} 的 TODO 计划、负责人和截止时间。</Text>
|
||
|
|
</div>
|
||
|
|
<Button type="primary" icon={<IconPlus />}>新建任务</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Card className="queue-section" bordered>
|
||
|
|
<div className="section-header">
|
||
|
|
<Title heading={6}>任务清单</Title>
|
||
|
|
<Tag color="arcoblue">{tasks.length} 个进行中</Tag>
|
||
|
|
</div>
|
||
|
|
{tasks.map((task) => (
|
||
|
|
<button className="data-row task-row" key={task.title} onClick={() => onSelectItem(task.title)}>
|
||
|
|
<span className="row-title"><IconCheckCircle /> {task.title}</span>
|
||
|
|
<Tag color="arcoblue">{task.tag}</Tag>
|
||
|
|
<span><IconUser /> {task.owner}</span>
|
||
|
|
<span><IconCalendar /> {task.due}</span>
|
||
|
|
<Progress percent={Number.parseInt(task.progress, 10)} size="small" />
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<div className="task-board">
|
||
|
|
{lanes.map((lane) => (
|
||
|
|
<Card className="task-lane" bordered key={lane.title}>
|
||
|
|
<div className="section-header">
|
||
|
|
<Title heading={6}>{lane.title}</Title>
|
||
|
|
<Tag color={lane.color}>{lane.items.length}</Tag>
|
||
|
|
</div>
|
||
|
|
<Space direction="vertical" size={8}>
|
||
|
|
{lane.items.map((title) => (
|
||
|
|
<button className="task-card-button" key={title} onClick={() => onSelectItem(title)}>
|
||
|
|
<Text>{title}</Text>
|
||
|
|
<Text type="secondary">优先级 · 本周</Text>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</Space>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|