Add project channel pages

apps/senlinai-acro-react/src/pages/projects/project-tasks.tsx

@@ -0,0 +1,61 @@
+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>
+  )
+}