From d6395d3c640228ab2f931abc223f1a17d74d2db4 Mon Sep 17 00:00:00 2001
From: yanweidong <david.yan@qq.com>
Date: Tue, 21 Jul 2026 01:00:27 +0800
Subject: [PATCH] feat: reorganize project task planning UI

---
 apps/senlinai-acro-react/src/App.css          |  92 +++++++++++
 apps/senlinai-acro-react/src/api/mappers.tsx  |   2 +
 apps/senlinai-acro-react/src/api/projects.ts  |   2 +
 apps/senlinai-acro-react/src/app/App.tsx      |   1 -
 .../pages/projects/project-action-modals.tsx  |   9 +-
 .../pages/projects/project-channel-page.tsx   |   4 +-
 .../src/pages/projects/project-notes.tsx      |  15 --
 .../src/pages/projects/project-sidebar.tsx    |  65 +-------
 .../src/pages/projects/project-tasks.tsx      | 144 +++++++++++-------
 .../src/pages/projects/project-types.ts       |   2 +
 .../src/pages/workspace-body.tsx              |  21 ++-
 .../src/pages/workspace-home.tsx              |   2 +-
 backend/internal/logic/projects/service.go    |  63 ++++++--
 13 files changed, 251 insertions(+), 171 deletions(-)

diff --git a/apps/senlinai-acro-react/src/App.css b/apps/senlinai-acro-react/src/App.css
index 6d814d2..f02eb9f 100644
--- a/apps/senlinai-acro-react/src/App.css
+++ b/apps/senlinai-acro-react/src/App.css
@@ -1044,6 +1044,98 @@
   padding: 10px;
 }
 
+.task-tag-section .arco-card-body {
+  padding: 12px;
+}
+
+.task-plan-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 12px;
+}
+
+.task-plan-card {
+  min-height: 138px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 10px;
+  border: 1px solid var(--senlin-border);
+  border-radius: 6px;
+  background: var(--senlin-surface);
+  color: var(--senlin-text);
+  padding: 14px;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
+}
+
+.task-plan-card:hover {
+  border-color: color-mix(in srgb, var(--senlin-primary) 42%, var(--senlin-border));
+  box-shadow: 0 8px 22px color-mix(in srgb, var(--senlin-primary) 12%, transparent);
+  transform: translateY(-1px);
+}
+
+.task-plan-title,
+.completed-plan-title {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--senlin-text);
+  font-weight: 600;
+}
+
+.task-plan-title svg,
+.completed-plan-title svg {
+  color: var(--senlin-primary);
+}
+
+.task-plan-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 10px;
+  color: var(--senlin-muted);
+  font-size: 12px;
+}
+
+.completed-plan-row {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) 120px 120px 86px;
+  align-items: center;
+  gap: 14px;
+  border: 0;
+  border-top: 1px solid var(--senlin-border);
+  background: transparent;
+  color: var(--senlin-muted);
+  padding: 10px 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.completed-plan-row:first-of-type {
+  border-top: 0;
+}
+
+.completed-plan-row:hover {
+  background: color-mix(in srgb, var(--senlin-primary) 5%, transparent);
+}
+
+.completed-plan-main {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+}
+
+.completed-plan-row > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .chat-thread {
   display: grid;
   gap: 12px;
diff --git a/apps/senlinai-acro-react/src/api/mappers.tsx b/apps/senlinai-acro-react/src/api/mappers.tsx
index 7af92eb..a1e0135 100644
--- a/apps/senlinai-acro-react/src/api/mappers.tsx
+++ b/apps/senlinai-acro-react/src/api/mappers.tsx
@@ -145,6 +145,8 @@ function mapTask(task: BackendTask): TaskItem {
     progress: task.completed ? '100%' : '60%',
     due: task.due || '未设置',
     createdAt: formatCreatedAt(task.createdAt),
+    completedAt: task.completedAt ? formatCreatedAt(task.completedAt) : '',
+    duration: task.duration || '',
     tag: task.tag || (task.completed ? '已完成' : '进行中'),
     summary: task.summary,
     completed: task.completed,
diff --git a/apps/senlinai-acro-react/src/api/projects.ts b/apps/senlinai-acro-react/src/api/projects.ts
index 0ddab47..7217a7f 100644
--- a/apps/senlinai-acro-react/src/api/projects.ts
+++ b/apps/senlinai-acro-react/src/api/projects.ts
@@ -55,6 +55,8 @@ export type BackendTask = {
   owner: string
   due: string
   createdAt: string
+  completedAt: string
+  duration: string
   tag: string
 }
 
diff --git a/apps/senlinai-acro-react/src/app/App.tsx b/apps/senlinai-acro-react/src/app/App.tsx
index 92fe876..9bda1a9 100644
--- a/apps/senlinai-acro-react/src/app/App.tsx
+++ b/apps/senlinai-acro-react/src/app/App.tsx
@@ -134,7 +134,6 @@ function App() {
         title: draft.title.trim(),
         description: draft.description.trim(),
         status: 'open',
-        dueAt: normalizeOptionalTime(draft.dueAt),
         tag: draft.tag.trim(),
       })
       await refreshAfterAction()
diff --git a/apps/senlinai-acro-react/src/pages/projects/project-action-modals.tsx b/apps/senlinai-acro-react/src/pages/projects/project-action-modals.tsx
index d2ce6a7..c84702f 100644
--- a/apps/senlinai-acro-react/src/pages/projects/project-action-modals.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-action-modals.tsx
@@ -17,7 +17,6 @@ export type ProjectDraft = {
 export type TaskDraft = {
   title: string
   description: string
-  dueAt: string
   tag: string
 }
 
@@ -53,14 +52,14 @@ export function ProjectActionModals({
   tagOptions: string[]
 }) {
   const [project, setProject] = useState<ProjectDraft>({ name: '', identifier: '', icon: '', background: '', description: '' })
-  const [task, setTask] = useState<TaskDraft>({ title: '', description: '', dueAt: '', tag: '' })
+  const [task, setTask] = useState<TaskDraft>({ title: '', description: '', tag: '' })
   const [source, setSource] = useState<SourceDraft>({ title: '', file: null })
   const [cron, setCron] = useState<CronDraft>({ title: '', schedule: '0 9 * * *', enabled: true, nextRunAt: '' })
 
   useEffect(() => {
     if (activeModal === null) {
       setProject({ name: '', identifier: '', icon: '', background: '', description: '' })
-      setTask({ title: '', description: '', dueAt: '', tag: '' })
+      setTask({ title: '', description: '', tag: '' })
       setSource({ title: '', file: null })
       setCron({ title: '', schedule: '0 9 * * *', enabled: true, nextRunAt: '' })
     }
@@ -117,10 +116,6 @@ export function ProjectActionModals({
             <Text>任务说明</Text>
             <TextArea rows={4} placeholder="补充背景、验收口径或下一步" value={task.description} onChange={(description) => setTask((draft) => ({ ...draft, description }))} />
           </label>
-          <label>
-            <Text>截止时间</Text>
-            <Input placeholder="2026-07-21T09:30:00Z，可留空" value={task.dueAt} onChange={(dueAt) => setTask((draft) => ({ ...draft, dueAt }))} />
-          </label>
           <label>
             <Text>所属标签</Text>
             <Select
diff --git a/apps/senlinai-acro-react/src/pages/projects/project-channel-page.tsx b/apps/senlinai-acro-react/src/pages/projects/project-channel-page.tsx
index 3981ca7..4b6f523 100644
--- a/apps/senlinai-acro-react/src/pages/projects/project-channel-page.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-channel-page.tsx
@@ -16,6 +16,7 @@ export function ProjectChannelPage({
   onCreateTask,
   onUploadSource,
   onCreateCronPlan,
+  onCreateProjectTag,
 }: {
   activeChannel: ChannelKey
   activeWorkspace: ProjectWorkspace
@@ -26,10 +27,11 @@ export function ProjectChannelPage({
   onCreateTask: () => void
   onUploadSource: () => void
   onCreateCronPlan: () => void
+  onCreateProjectTag: (name: string) => void
 }) {
   switch (activeChannel) {
     case 'tasks':
-      return <ProjectTasks activeWorkspace={activeWorkspace} activeTaskID={activeTaskID} onOpenTask={onOpenTask} onCloseTask={onCloseTask} onSelectItem={onSelectItem} onCreateTask={onCreateTask} />
+      return <ProjectTasks activeWorkspace={activeWorkspace} activeTaskID={activeTaskID} onOpenTask={onOpenTask} onCloseTask={onCloseTask} onSelectItem={onSelectItem} onCreateTask={onCreateTask} onCreateProjectTag={onCreateProjectTag} />
     case 'ai':
       return <ProjectAi activeWorkspace={activeWorkspace} onSelectItem={onSelectItem} />
     case 'notes':
diff --git a/apps/senlinai-acro-react/src/pages/projects/project-notes.tsx b/apps/senlinai-acro-react/src/pages/projects/project-notes.tsx
index 4e0f432..70cf806 100644
--- a/apps/senlinai-acro-react/src/pages/projects/project-notes.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-notes.tsx
@@ -5,8 +5,6 @@ import type { ProjectWorkspace } from './project-types'
 
 const { Title, Text } = Typography
 
-const folders = ['需求文档', '技术方案', '会议纪要', '竞品资料']
-
 export function ProjectNotes({ activeWorkspace, onSelectItem, onUploadSource }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void; onUploadSource: () => void }) {
   const { notes, project } = activeWorkspace
 
@@ -23,8 +21,6 @@ export function ProjectNotes({ activeWorkspace, onSelectItem, onUploadSource }:
         </Space>
       </div>
 
-      <ProjectFileGrid items={folderItems(folders)} onSelectItem={onSelectItem} />
-
       <Card className="queue-section" bordered>
         <div className="section-header">
           <Title heading={6}>最近更新</Title>
@@ -35,14 +31,3 @@ export function ProjectNotes({ activeWorkspace, onSelectItem, onUploadSource }:
     </div>
   )
 }
-
-function folderItems(names: string[]) {
-  return names.map((name) => ({
-    id: `folder-${name}`,
-    title: name,
-    type: 'folder',
-    updated: '文件夹',
-    owner: '',
-    source: 'folder',
-  }))
-}
diff --git a/apps/senlinai-acro-react/src/pages/projects/project-sidebar.tsx b/apps/senlinai-acro-react/src/pages/projects/project-sidebar.tsx
index 7d4def0..7c1834c 100644
--- a/apps/senlinai-acro-react/src/pages/projects/project-sidebar.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-sidebar.tsx
@@ -1,5 +1,5 @@
-import { Fragment, useEffect, useState } from 'react'
-import { Badge, Button, Divider, Input, Layout, Modal, Space, Tag, Typography } from '@arco-design/web-react'
+import { useEffect, useState } from 'react'
+import { Badge, Button, Divider, Input, Layout, Modal, Space, Typography } from '@arco-design/web-react'
 import { IconApps, IconDashboard, IconMore, IconPlus, IconSettings } from '@arco-design/web-react/icon'
 import type { ChannelKey, ProjectChannel, ProjectWorkspace, WorkbenchView } from './project-types'
 
@@ -23,7 +23,6 @@ export function ProjectSidebar({
   onSelectChannel,
   onSelectItem,
   onUpdateProject,
-  onCreateProjectTag,
 }: {
   activeView: WorkbenchView
   activeWorkspace: ProjectWorkspace
@@ -31,7 +30,6 @@ export function ProjectSidebar({
   onSelectChannel: (key: ChannelKey) => void
   onSelectItem: (title: string) => void
   onUpdateProject: (update: ProjectSettingsUpdate) => void
-  onCreateProjectTag: (name: string) => void
 }) {
   const workspaceMode = activeView === 'workspace'
   const channels = activeWorkspace.channels
@@ -43,8 +41,6 @@ export function ProjectSidebar({
     background: activeWorkspace.project.background,
     description: activeWorkspace.project.description,
   })
-  const [tagModalOpen, setTagModalOpen] = useState(false)
-  const [tagName, setTagName] = useState('')
 
   useEffect(() => {
     if (!settingsOpen) return
@@ -58,13 +54,6 @@ export function ProjectSidebar({
   }, [activeWorkspace.project, settingsOpen])
 
   const projectIcon = activeWorkspace.project.short || activeWorkspace.project.identifier || activeWorkspace.project.name.slice(0, 2)
-  const submitTag = () => {
-    if (!tagName.trim()) return
-    onCreateProjectTag(tagName.trim())
-    setTagName('')
-    setTagModalOpen(false)
-  }
-
   return (
     <Sider className="channel-sidebar" width={248}>
       <div className="project-title">
@@ -109,29 +98,6 @@ export function ProjectSidebar({
         )}
       </div>
 
-      <Divider />
-      <section className="tag-cloud">
-        <Text className="section-title">标签</Text>
-        <Space wrap>
-          {activeWorkspace.tags.map((tag) => (
-            <Fragment key={tag}>
-              <Tag color={isAllTag(tag) ? 'arcoblue' : 'gray'}>{tag}</Tag>
-              {isAllTag(tag) && (
-                <Button
-                  className="tag-create-button"
-                  size="mini"
-                  type="text"
-                  icon={<IconPlus />}
-                  onClick={() => setTagModalOpen(true)}
-                >
-                  新建
-                </Button>
-              )}
-            </Fragment>
-          ))}
-        </Space>
-      </section>
-      
       <Divider />
       <section className="recent-sessions">
         <Text className="section-title">最近会话</Text>
@@ -183,37 +149,10 @@ export function ProjectSidebar({
           </label>
         </Space>
       </Modal>
-      <Modal
-        className="action-modal"
-        title="新建标签"
-        visible={tagModalOpen}
-        onCancel={() => {
-          setTagModalOpen(false)
-          setTagName('')
-        }}
-        onOk={submitTag}
-      >
-        <Space direction="vertical" size={12} className="action-form">
-          <label>
-            <Text>标签名称</Text>
-            <Input
-              autoFocus
-              placeholder="例如：设计、客户、重要"
-              value={tagName}
-              onChange={setTagName}
-              onPressEnter={submitTag}
-            />
-          </label>
-        </Space>
-      </Modal>
     </Sider>
   )
 }
 
-function isAllTag(tag: string) {
-  return tag === '全部' || tag === 'all'
-}
-
 function renderChannelButton(channel: ProjectChannel, activeChannel: ChannelKey, onSelectChannel: (key: ChannelKey) => void) {
   return (
     <button
diff --git a/apps/senlinai-acro-react/src/pages/projects/project-tasks.tsx b/apps/senlinai-acro-react/src/pages/projects/project-tasks.tsx
index 83e1190..671e8cd 100644
--- a/apps/senlinai-acro-react/src/pages/projects/project-tasks.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-tasks.tsx
@@ -1,16 +1,17 @@
-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 { useState } from 'react'
+import { Button, Card, Descriptions, Input, Modal, Progress, Space, Tag, Typography } from '@arco-design/web-react'
+import { IconArrowLeft, IconCalendar, IconCheckCircle, IconCheckCircleFill, IconClockCircle, IconPlus } from '@arco-design/web-react/icon'
 import type { ProjectWorkspace, TaskItem } from './project-types'
 
-const { Title, Text } = Typography
+const { Title, Text, Paragraph } = Typography
 
 export function ProjectTasks({
   activeWorkspace,
   activeTaskID,
   onOpenTask,
   onCloseTask,
-  onSelectItem,
   onCreateTask,
+  onCreateProjectTag,
 }: {
   activeWorkspace: ProjectWorkspace
   activeTaskID: string | null
@@ -18,59 +19,107 @@ export function ProjectTasks({
   onCloseTask: () => void
   onSelectItem: (title: string) => void
   onCreateTask: () => void
+  onCreateProjectTag: (name: string) => void
 }) {
-  const { tasks, project } = activeWorkspace
+  const { tasks, project, tags } = activeWorkspace
   const activeTask = tasks.find((task) => task.id === activeTaskID)
-  const lanes = makeLanes(tasks)
+  const pendingTasks = tasks.filter((task) => !task.completed)
+  const completedTasks = tasks.filter((task) => task.completed)
+  const projectTags = tags.filter((tag) => tag !== 'all' && tag !== '全部')
+  const [tagModalOpen, setTagModalOpen] = useState(false)
+  const [tagName, setTagName] = useState('')
 
   if (activeTask) {
     return <TaskDetail activeWorkspace={activeWorkspace} task={activeTask} onBack={onCloseTask} />
   }
 
+  function submitTag() {
+    const nextTag = tagName.trim()
+    if (!nextTag) return
+    onCreateProjectTag(nextTag)
+    setTagName('')
+    setTagModalOpen(false)
+  }
+
   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} 的标签、未完成计划和完成记录。</Text>
         </div>
         <Button type="primary" icon={<IconPlus />} onClick={onCreateTask}>新建任务</Button>
       </div>
 
-      <Card className="queue-section" bordered>
+      <Card className="queue-section task-tag-section" bordered>
         <div className="section-header">
-          <Title heading={6}>任务清单</Title>
-          <Tag color="arcoblue">{tasks.length} 个任务</Tag>
+          <Title heading={6}>标签</Title>
+          <Button className="tag-create-button" size="mini" type="text" icon={<IconPlus />} onClick={() => setTagModalOpen(true)}>新建</Button>
         </div>
-        {tasks.map((task) => (
-          <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.createdAt}</span>
-            <Progress percent={Number.parseInt(task.progress, 10)} size="small" />
-          </button>
-        ))}
+        <Space wrap>
+          <Tag color="arcoblue">全部</Tag>
+          {projectTags.map((tag) => (
+            <Tag key={tag} color="gray">{tag}</Tag>
+          ))}
+        </Space>
       </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={() => openTaskByTitle(tasks, title, onOpenTask, onSelectItem)}>
-                  <Text>{title}</Text>
-                  <Text type="secondary">优先级 · 本周</Text>
-                </button>
-              ))}
-            </Space>
-          </Card>
+      <Card className="queue-section" bordered>
+        <div className="section-header">
+          <Title heading={6}>未完成的计划</Title>
+          <Tag color="arcoblue">{pendingTasks.length}</Tag>
+        </div>
+        <div className="task-plan-card-grid">
+          {pendingTasks.map((task) => (
+            <button className="task-plan-card" key={task.id} onClick={() => onOpenTask(task.id)}>
+              <span className="task-plan-title"><IconCheckCircleFill />{task.title}</span>
+              <Paragraph ellipsis={{ rows: 2 }} type="secondary">{task.summary || '暂无正文'}</Paragraph>
+              <div className="task-plan-meta">
+                <Tag color="arcoblue">{task.tag || '未设置标签'}</Tag>
+                <span><IconCalendar /> 创建 {task.createdAt}</span>
+              </div>
+            </button>
+          ))}
+          {pendingTasks.length === 0 && <Text type="secondary">当前没有未完成计划</Text>}
+        </div>
+      </Card>
+
+      <Card className="queue-section" bordered>
+        <div className="section-header">
+          <Title heading={6}>完成的计划</Title>
+          <Tag color="green">{completedTasks.length}</Tag>
+        </div>
+        {completedTasks.map((task) => (
+          <button className="completed-plan-row" key={task.id} onClick={() => onOpenTask(task.id)}>
+            <span className="completed-plan-main">
+              <Text className="completed-plan-title"><IconCheckCircle />{task.title}</Text>
+              <Text type="secondary" ellipsis={{ showTooltip: true }}>{task.summary || '暂无正文'}</Text>
+            </span>
+            <span>{task.createdAt}</span>
+            <span>{task.completedAt || '未知'}</span>
+            <span><IconClockCircle /> {task.duration || '未知'}</span>
+          </button>
         ))}
-      </div>
+        {completedTasks.length === 0 && <Text type="secondary">当前没有完成计划</Text>}
+      </Card>
+
+      <Modal
+        className="action-modal"
+        title="新建标签"
+        visible={tagModalOpen}
+        onCancel={() => {
+          setTagModalOpen(false)
+          setTagName('')
+        }}
+        onOk={submitTag}
+      >
+        <Space direction="vertical" size={12} className="action-form">
+          <label>
+            <Text>标签名称</Text>
+            <Input autoFocus placeholder="例如：设计、客户、重要" value={tagName} onChange={setTagName} onPressEnter={submitTag} />
+          </label>
+        </Space>
+      </Modal>
     </div>
   )
 }
@@ -86,7 +135,7 @@ function TaskDetail({ activeWorkspace, task, onBack }: { activeWorkspace: Projec
           <Title heading={4}>{task.title}</Title>
           <Text type="secondary">{activeWorkspace.project.name} 的任务详情</Text>
         </div>
-        <Tag color={task.completed ? 'green' : 'arcoblue'}>{task.tag}</Tag>
+        <Tag color={task.completed ? 'green' : 'arcoblue'}>{task.tag || '未设置标签'}</Tag>
       </div>
 
       <Card className="queue-section task-detail-card" bordered>
@@ -98,6 +147,8 @@ function TaskDetail({ activeWorkspace, task, onBack }: { activeWorkspace: Projec
             { label: '负责人', value: task.owner },
             { label: '创建时间', value: task.createdAt },
             { label: '完成状态', value: task.completed ? '已完成' : '未完成' },
+            { label: '完成时间', value: task.completedAt || '未完成' },
+            { label: '耗时', value: task.duration || '未完成' },
           ]}
         />
         <div className="task-detail-progress">
@@ -112,22 +163,3 @@ function TaskDetail({ activeWorkspace, task, onBack }: { activeWorkspace: Projec
     </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)
-  return [
-    { title: '待开始', color: 'gray', items: active.slice(0, 1).map((task) => task.title) },
-    { title: '进行中', color: 'arcoblue', items: active.map((task) => task.title) },
-    { title: '已完成', color: 'green', items: done.length ? done.map((task) => task.title) : ['暂无已完成任务'] },
-  ]
-}
diff --git a/apps/senlinai-acro-react/src/pages/projects/project-types.ts b/apps/senlinai-acro-react/src/pages/projects/project-types.ts
index 133a6eb..405759e 100644
--- a/apps/senlinai-acro-react/src/pages/projects/project-types.ts
+++ b/apps/senlinai-acro-react/src/pages/projects/project-types.ts
@@ -46,6 +46,8 @@ export type TaskItem = {
   progress: string
   due: string
   createdAt: string
+  completedAt: string
+  duration: string
   tag: string
   summary: string
   completed: boolean
diff --git a/apps/senlinai-acro-react/src/pages/workspace-body.tsx b/apps/senlinai-acro-react/src/pages/workspace-body.tsx
index 98a793b..7f635b1 100644
--- a/apps/senlinai-acro-react/src/pages/workspace-body.tsx
+++ b/apps/senlinai-acro-react/src/pages/workspace-body.tsx
@@ -55,14 +55,9 @@ export function WorkspacePage({
   const [editingTask, setEditingTask] = useState<WorkspaceTask | null>(null)
   const [draft, setDraft] = useState<TaskDraft>({ title: '', summary: '', projectId: '', tag: '', completed: false })
   const tagOptions = useMemo(() => {
-    const tags = new Set<string>()
     const selectedWorkspace = workspaces.find((workspace) => workspace.project.id === draft.projectId)
-    selectedWorkspace?.tags
-      .filter((tag) => tag !== 'all' && tag !== '全部')
-      .forEach((tag) => tags.add(tag))
-    if (draft.tag) tags.add(draft.tag)
-    return Array.from(tags)
-  }, [draft.projectId, draft.tag, workspaces])
+    return selectedWorkspace?.tags.filter((tag) => tag !== 'all' && tag !== '全部') ?? []
+  }, [draft.projectId, workspaces])
 
   useEffect(() => {
     if (!editingTask) return
@@ -74,6 +69,10 @@ export function WorkspacePage({
       completed: editingTask.completed,
     })
   }, [editingTask])
+  useEffect(() => {
+    if (!draft.tag || tagOptions.includes(draft.tag)) return
+    setDraft((value) => ({ ...value, tag: '' }))
+  }, [draft.tag, tagOptions])
   const aiSessions = workspaces.flatMap((workspace) => workspace.aiSessions)
   const notes = workspaces.flatMap((workspace) => workspace.notes)
   const urgentProjects = projects.filter((project) => project.urgent).length
@@ -180,10 +179,10 @@ export function WorkspacePage({
           <label>
             <Text>所属标签</Text>
             <Select
-              allowCreate
-              value={draft.tag}
-              placeholder="选择或输入标签"
-              onChange={(tag) => setDraft((value) => ({ ...value, tag }))}
+              allowClear
+              value={draft.tag || undefined}
+              placeholder="不设置标签"
+              onChange={(tag) => setDraft((value) => ({ ...value, tag: tag ?? '' }))}
             >
               {tagOptions.map((tag) => (
                 <Select.Option key={tag} value={tag}>{tag}</Select.Option>
diff --git a/apps/senlinai-acro-react/src/pages/workspace-home.tsx b/apps/senlinai-acro-react/src/pages/workspace-home.tsx
index 7b2a2eb..2734875 100644
--- a/apps/senlinai-acro-react/src/pages/workspace-home.tsx
+++ b/apps/senlinai-acro-react/src/pages/workspace-home.tsx
@@ -81,7 +81,6 @@ export function ProjectPage({
             onSelectChannel={onSelectChannel}
             onSelectItem={onSelectItem}
             onUpdateProject={onUpdateProject}
-            onCreateProjectTag={onCreateProjectTag}
           />
         )}
 
@@ -101,6 +100,7 @@ export function ProjectPage({
               onCreateTask={onCreateTask}
               onUploadSource={onUploadSource}
               onCreateCronPlan={onCreateCronPlan}
+              onCreateProjectTag={onCreateProjectTag}
             />
           )}
         </Content>
diff --git a/backend/internal/logic/projects/service.go b/backend/internal/logic/projects/service.go
index a5e7b60..20d02f8 100644
--- a/backend/internal/logic/projects/service.go
+++ b/backend/internal/logic/projects/service.go
@@ -54,14 +54,16 @@ type InboxMessage struct {
 }
 
 type WorkTask struct {
-	ID        string `json:"id"`
-	Title     string `json:"title"`
-	Summary   string `json:"summary"`
-	Completed bool   `json:"completed"`
-	Owner     string `json:"owner"`
-	Due       string `json:"due"`
-	CreatedAt string `json:"createdAt"`
-	Tag       string `json:"tag"`
+	ID          string `json:"id"`
+	Title       string `json:"title"`
+	Summary     string `json:"summary"`
+	Completed   bool   `json:"completed"`
+	Owner       string `json:"owner"`
+	Due         string `json:"due"`
+	CreatedAt   string `json:"createdAt"`
+	CompletedAt string `json:"completedAt"`
+	Duration    string `json:"duration"`
+	Tag         string `json:"tag"`
 }
 
 type AISessionItem struct {
@@ -550,15 +552,24 @@ func (s *Service) workspaceTasks(projectID uint) ([]WorkTask, error) {
 		if err != nil {
 			return nil, err
 		}
+		completed := task.Status == "done"
+		completedAt := ""
+		duration := ""
+		if completed {
+			completedAt = displayTime(task.UpdatedAt)
+			duration = displayDuration(task.CreatedAt, task.UpdatedAt)
+		}
 		items = append(items, WorkTask{
-			ID:        fmt.Sprint(task.ID),
-			Title:     task.Title,
-			Summary:   task.Description,
-			Completed: task.Status == "done",
-			Owner:     owner,
-			Due:       displayOptionalTime(task.DueAt),
-			CreatedAt: displayTime(task.CreatedAt),
-			Tag:       tagNames[task.ID],
+			ID:          fmt.Sprint(task.ID),
+			Title:       task.Title,
+			Summary:     task.Description,
+			Completed:   completed,
+			Owner:       owner,
+			Due:         displayOptionalTime(task.DueAt),
+			CreatedAt:   displayTime(task.CreatedAt),
+			CompletedAt: completedAt,
+			Duration:    duration,
+			Tag:         tagNames[task.ID],
 		})
 	}
 	return items, nil
@@ -740,6 +751,26 @@ func displayOptionalTime(value *time.Time) string {
 	return displayTime(*value)
 }
 
+func displayDuration(start time.Time, end time.Time) string {
+	if start.IsZero() || end.IsZero() || end.Before(start) {
+		return ""
+	}
+	duration := end.Sub(start)
+	days := int(duration.Hours()) / 24
+	if days > 0 {
+		return fmt.Sprintf("%d 天", days)
+	}
+	hours := int(duration.Hours())
+	if hours > 0 {
+		return fmt.Sprintf("%d 小时", hours)
+	}
+	minutes := int(duration.Minutes())
+	if minutes > 0 {
+		return fmt.Sprintf("%d 分钟", minutes)
+	}
+	return "1 分钟内"
+}
+
 func sourceDisplayName(source models.SenlinAgentSource) string {
 	switch source.Kind {
 	case "file":