feat: complete project workspace tags and notes UI

apps/senlinai-acro-react/src/pages/workspace-body.tsx

@@ -1,4 +1,5 @@
-import { Card, Empty, Grid, Space, Tag, Typography } from '@arco-design/web-react'
+import { useEffect, useMemo, useState } from 'react'
+import { Card, Empty, Grid, Input, Modal, Select, Space, Switch, Tag, Typography } from '@arco-design/web-react'
 import {
   IconCalendar,
   IconCheckCircleFill,
@@ -6,14 +7,44 @@ import {
   IconFile,
   IconRobot,
 } from '@arco-design/web-react/icon'
-import type { Project, ProjectWorkspace } from './projects/project-types'
+import type { Project, ProjectWorkspace, TaskItem } from './projects/project-types'
 
 const { Row, Col } = Grid
 const { Title, Text, Paragraph } = Typography
+const { TextArea } = Input
 
-export function WorkspacePage({ workspaces, onOpenTask }: { workspaces: ProjectWorkspace[]; onOpenTask: (project: Project, taskID: string) => void }) {
+export type WorkspaceTaskUpdate = {
+  originalProjectId: string
+  nextProjectId: string
+  taskId: string
+  title: string
+  summary: string
+  tag: string
+  completed: boolean
+}
+
+type WorkspaceTask = TaskItem & {
+  project: Project
+}
+
+type TaskDraft = {
+  title: string
+  summary: string
+  projectId: string
+  tag: string
+  completed: boolean
+}
+
+export function WorkspacePage({
+  workspaces,
+  onUpdateTask,
+}: {
+  workspaces: ProjectWorkspace[]
+  onOpenTask: (project: Project, taskID: string) => void
+  onUpdateTask: (update: WorkspaceTaskUpdate) => void
+}) {
   const projects = workspaces.map((workspace) => workspace.project)
-  const unfinishedTasks = workspaces.flatMap((workspace) =>
+  const unfinishedTasks: WorkspaceTask[] = workspaces.flatMap((workspace) =>
     workspace.tasks
       .filter((task) => !task.completed)
       .map((task) => ({
@@ -21,6 +52,28 @@ export function WorkspacePage({ workspaces, onOpenTask }: { workspaces: ProjectW
         project: workspace.project,
       })),
   )
+  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])
+
+  useEffect(() => {
+    if (!editingTask) return
+    setDraft({
+      title: editingTask.title,
+      summary: editingTask.summary,
+      projectId: editingTask.project.id,
+      tag: editingTask.tag,
+      completed: editingTask.completed,
+    })
+  }, [editingTask])
   const aiSessions = workspaces.flatMap((workspace) => workspace.aiSessions)
   const notes = workspaces.flatMap((workspace) => workspace.notes)
   const urgentProjects = projects.filter((project) => project.urgent).length
@@ -65,7 +118,7 @@ export function WorkspacePage({ workspaces, onOpenTask }: { workspaces: ProjectW
         {unfinishedTasks.length ? (
           <div className="workspace-task-list">
             {unfinishedTasks.map((task) => (
-              <button key={`${task.project.id}-${task.id}`} className="workspace-task-card" onClick={() => onOpenTask(task.project, task.id)}>
+              <button key={`${task.project.id}-${task.id}`} className="workspace-task-card" onClick={() => setEditingTask(task)}>
                 <div className="workspace-task-main">
                   <span className="workspace-task-title">
                     <IconCheckCircleFill />
@@ -87,6 +140,62 @@ export function WorkspacePage({ workspaces, onOpenTask }: { workspaces: ProjectW
           <Empty description="暂无未完成任务" />
         )}
       </Card>
+
+      <Modal
+        className="action-modal"
+        title="编辑任务"
+        visible={Boolean(editingTask)}
+        onCancel={() => setEditingTask(null)}
+        onOk={() => {
+          if (!editingTask) return
+          onUpdateTask({
+            originalProjectId: editingTask.project.id,
+            nextProjectId: draft.projectId,
+            taskId: editingTask.id,
+            title: draft.title.trim() || editingTask.title,
+            summary: draft.summary.trim(),
+            tag: draft.tag.trim(),
+            completed: draft.completed,
+          })
+          setEditingTask(null)
+        }}
+      >
+        <Space direction="vertical" size={12} className="action-form">
+          <label>
+            <Text>任务标题</Text>
+            <Input value={draft.title} onChange={(title) => setDraft((value) => ({ ...value, title }))} />
+          </label>
+          <label>
+            <Text>任务内容</Text>
+            <TextArea rows={4} value={draft.summary} onChange={(summary) => setDraft((value) => ({ ...value, summary }))} />
+          </label>
+          <label>
+            <Text>所属项目</Text>
+            <Select value={draft.projectId} onChange={(projectId) => setDraft((value) => ({ ...value, projectId }))}>
+              {projects.map((project) => (
+                <Select.Option key={project.id} value={project.id}>{project.name}</Select.Option>
+              ))}
+            </Select>
+          </label>
+          <label>
+            <Text>所属标签</Text>
+            <Select
+              allowCreate
+              value={draft.tag}
+              placeholder="选择或输入标签"
+              onChange={(tag) => setDraft((value) => ({ ...value, tag }))}
+            >
+              {tagOptions.map((tag) => (
+                <Select.Option key={tag} value={tag}>{tag}</Select.Option>
+              ))}
+            </Select>
+          </label>
+          <label className="action-switch">
+            <Text>完成状态</Text>
+            <Switch checked={draft.completed} checkedText="完成" uncheckedText="未完成" onChange={(completed) => setDraft((value) => ({ ...value, completed }))} />
+          </label>
+        </Space>
+      </Modal>
     </div>
   )
 }