feat: update workspace pages and global inbox

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

@@ -1,18 +1,36 @@
-import { Button, Card, Progress, Space, Tag, Typography } from '@arco-design/web-react'
-import { IconCalendar, IconCheckCircle, IconPlus, IconUser } from '@arco-design/web-react/icon'
+import { Button, Card, Descriptions, Progress, Space, Tag, Typography } from '@arco-design/web-react'
+import { IconArrowLeft, IconCalendar, IconCheckCircle, IconPlus, IconUser } from '@arco-design/web-react/icon'
 import type { ProjectWorkspace, TaskItem } from './project-types'
 
 const { Title, Text } = Typography
 
-export function ProjectTasks({ activeWorkspace, onSelectItem }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void }) {
+export function ProjectTasks({
+  activeWorkspace,
+  activeTaskID,
+  onOpenTask,
+  onCloseTask,
+  onSelectItem,
+}: {
+  activeWorkspace: ProjectWorkspace
+  activeTaskID: string | null
+  onOpenTask: (taskID: string) => void
+  onCloseTask: () => void
+  onSelectItem: (title: string) => void
+}) {
   const { tasks, project } = activeWorkspace
+  const activeTask = tasks.find((task) => task.id === activeTaskID)
   const lanes = makeLanes(tasks)
+
+  if (activeTask) {
+    return <TaskDetail activeWorkspace={activeWorkspace} task={activeTask} onBack={onCloseTask} />
+  }
+
   return (
     <div className="project-channel-page project-tasks-page overview-page">
       <div className="overview-head">
         <div>
           <Title heading={4}>工作计划</Title>
-          <Text type="secondary">{project.name} 的 TODO 计划、负责人和截止时间。</Text>
+          <Text type="secondary">{project.name} 的 TODO 计划、负责人和创建时间。</Text>
         </div>
         <Button type="primary" icon={<IconPlus />}>新建任务</Button>
       </div>
@@ -20,14 +38,14 @@ export function ProjectTasks({ activeWorkspace, onSelectItem }: { activeWorkspac
       <Card className="queue-section" bordered>
         <div className="section-header">
           <Title heading={6}>任务清单</Title>
-          <Tag color="arcoblue">{tasks.length} 个进行中</Tag>
+          <Tag color="arcoblue">{tasks.length} 个任务</Tag>
         </div>
         {tasks.map((task) => (
-          <button className="data-row task-row" key={task.title} onClick={() => onSelectItem(task.title)}>
+          <button className="data-row task-row" key={task.id} onClick={() => onOpenTask(task.id)}>
             <span className="row-title"><IconCheckCircle /> {task.title}</span>
             <Tag color="arcoblue">{task.tag}</Tag>
             <span><IconUser /> {task.owner}</span>
-            <span><IconCalendar /> {task.due}</span>
+            <span><IconCalendar /> {task.createdAt}</span>
             <Progress percent={Number.parseInt(task.progress, 10)} size="small" />
           </button>
         ))}
@@ -42,7 +60,7 @@ export function ProjectTasks({ activeWorkspace, onSelectItem }: { activeWorkspac
             </div>
             <Space direction="vertical" size={8}>
               {lane.items.map((title) => (
-                <button className="task-card-button" key={title} onClick={() => onSelectItem(title)}>
+                <button className="task-card-button" key={title} onClick={() => openTaskByTitle(tasks, title, onOpenTask, onSelectItem)}>
                   <Text>{title}</Text>
                   <Text type="secondary">优先级 · 本周</Text>
                 </button>
@@ -55,6 +73,53 @@ export function ProjectTasks({ activeWorkspace, onSelectItem }: { activeWorkspac
   )
 }
 
+function TaskDetail({ activeWorkspace, task, onBack }: { activeWorkspace: ProjectWorkspace; task: TaskItem; onBack: () => void }) {
+  const percent = Number.parseInt(task.progress, 10)
+
+  return (
+    <div className="project-channel-page project-task-detail-page overview-page">
+      <div className="overview-head">
+        <div>
+          <Button type="text" icon={<IconArrowLeft />} onClick={onBack}>返回任务列表</Button>
+          <Title heading={4}>{task.title}</Title>
+          <Text type="secondary">{activeWorkspace.project.name} 的任务详情</Text>
+        </div>
+        <Tag color={task.completed ? 'green' : 'arcoblue'}>{task.tag}</Tag>
+      </div>
+
+      <Card className="queue-section task-detail-card" bordered>
+        <Descriptions
+          colon="："
+          column={2}
+          data={[
+            { label: '所属项目', value: activeWorkspace.project.name },
+            { label: '负责人', value: task.owner },
+            { label: '创建时间', value: task.createdAt },
+            { label: '完成状态', value: task.completed ? '已完成' : '未完成' },
+          ]}
+        />
+        <div className="task-detail-progress">
+          <Text type="secondary">任务进度</Text>
+          <Progress percent={Number.isNaN(percent) ? 0 : percent} />
+        </div>
+        <div className="task-detail-summary">
+          <Title heading={6}>任务说明</Title>
+          <Text>{task.summary || '暂无任务说明'}</Text>
+        </div>
+      </Card>
+    </div>
+  )
+}
+
+function openTaskByTitle(tasks: TaskItem[], title: string, onOpenTask: (taskID: string) => void, onSelectItem: (title: string) => void) {
+  const task = tasks.find((item) => item.title === title)
+  if (task) {
+    onOpenTask(task.id)
+    return
+  }
+  onSelectItem(title)
+}
+
 function makeLanes(tasks: TaskItem[]) {
   const done = tasks.filter((task) => task.completed)
   const active = tasks.filter((task) => !task.completed)