feat: reorganize project task planning UI

2026-07-21 01:00:27 +08:00
parent c613d4c997
commit d6395d3c64
13 changed files with 251 additions and 171 deletions
--- 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;
--- 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,
--- 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
 }

--- 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()
--- 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
--- 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':
--- 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',
-  }))
-}
--- 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
--- 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) : ['暂无已完成任务'] },
-  ]
-}
--- 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
--- 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>
--- 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>
--- 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":