feat: add project task edit modal

2026-07-21 01:18:06 +08:00
parent d6395d3c64
commit 1c58825a7b
7 changed files with 174 additions and 15 deletions
--- a/apps/senlinai-acro-react/src/pages/projects/project-channel-page.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-channel-page.tsx
@@ -3,6 +3,7 @@ import { ProjectCron } from './project-cron'
 import { ProjectNewChannel } from './project-new-channel'
 import { ProjectNotes } from './project-notes'
 import { ProjectOverview } from './project-overview'
+import type { ProjectTaskUpdate } from './project-task-edit-modal'
 import { ProjectTasks } from './project-tasks'
 import type { ChannelKey, ProjectWorkspace } from './project-types'

@@ -17,6 +18,7 @@ export function ProjectChannelPage({
  onUploadSource,
  onCreateCronPlan,
  onCreateProjectTag,
+  onUpdateTask,
 }: {
  activeChannel: ChannelKey
  activeWorkspace: ProjectWorkspace
@@ -28,10 +30,11 @@ export function ProjectChannelPage({
  onUploadSource: () => void
  onCreateCronPlan: () => void
  onCreateProjectTag: (name: string) => void
+  onUpdateTask: (update: ProjectTaskUpdate) => void
 }) {
  switch (activeChannel) {
    case 'tasks':
-      return <ProjectTasks activeWorkspace={activeWorkspace} activeTaskID={activeTaskID} onOpenTask={onOpenTask} onCloseTask={onCloseTask} onSelectItem={onSelectItem} onCreateTask={onCreateTask} onCreateProjectTag={onCreateProjectTag} />
+      return <ProjectTasks activeWorkspace={activeWorkspace} activeTaskID={activeTaskID} onOpenTask={onOpenTask} onCloseTask={onCloseTask} onSelectItem={onSelectItem} onCreateTask={onCreateTask} onCreateProjectTag={onCreateProjectTag} onUpdateTask={onUpdateTask} />
    case 'ai':
      return <ProjectAi activeWorkspace={activeWorkspace} onSelectItem={onSelectItem} />
    case 'notes':
@@ -42,6 +45,6 @@ export function ProjectChannelPage({
      return <ProjectNewChannel activeWorkspace={activeWorkspace} />
    case 'overview':
    default:
-      return <ProjectOverview activeWorkspace={activeWorkspace} onSelectItem={onSelectItem} />
+      return <ProjectOverview activeWorkspace={activeWorkspace} onSelectItem={onSelectItem} onUpdateTask={onUpdateTask} />
  }
 }
--- a/apps/senlinai-acro-react/src/pages/projects/project-overview.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-overview.tsx
@@ -1,16 +1,26 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { Button, Card, Grid, Space, Tag, Typography } from '@arco-design/web-react'
 import { IconCheckCircleFill, IconClockCircle, IconFile, IconLink } from '@arco-design/web-react/icon'
 import { ProjectFileGrid } from './project-file-grid'
+import { ProjectTaskEditModal, type ProjectTaskUpdate } from './project-task-edit-modal'
 import type { ProjectWorkspace, TaskItem } from './project-types'

 const { Row, Col } = Grid
 const { Title, Text, Paragraph } = Typography

-export function ProjectOverview({ activeWorkspace, onSelectItem }: { activeWorkspace: ProjectWorkspace; onSelectItem: (title: string) => void }) {
+export function ProjectOverview({
+  activeWorkspace,
+  onSelectItem,
+  onUpdateTask,
+}: {
+  activeWorkspace: ProjectWorkspace
+  onSelectItem: (title: string) => void
+  onUpdateTask: (update: ProjectTaskUpdate) => void
+}) {
  const { project, tasks, notes, cronJobs } = activeWorkspace
  const runningTasks = useMemo(() => tasks.filter((task) => !task.completed), [tasks])
  const completedTasks = useMemo(() => tasks.filter((task) => task.completed), [tasks])
+  const [editingTask, setEditingTask] = useState<TaskItem | null>(null)
  const shareURL = useMemo(() => projectShareURL(project.identifier || project.id), [project.id, project.identifier])
  const metrics = useMemo(() => [
    { title: '进行中的任务', value: runningTasks.length, icon: <IconCheckCircleFill />, color: 'green' },
@@ -52,14 +62,35 @@ export function ProjectOverview({ activeWorkspace, onSelectItem }: { activeWorks
        ))}
      </Row>

-      <TaskCardSection title={`进行中的任务（${runningTasks.length}）`} tasks={runningTasks} emptyText="当前没有进行中的任务" onSelectItem={onSelectItem} />
+      <TaskCardSection title={`进行中的任务（${runningTasks.length}）`} tasks={runningTasks} emptyText="当前没有进行中的任务" onEditTask={setEditingTask} />
      <TaskCardSection title={`完成的任务（${completedTasks.length}）`} tasks={completedTasks} emptyText="当前没有完成的任务" onSelectItem={onSelectItem} />
      <NoteSection notes={notes} onSelectItem={onSelectItem} />
+      <ProjectTaskEditModal
+        task={editingTask}
+        workspace={activeWorkspace}
+        onClose={() => setEditingTask(null)}
+        onSubmit={(update) => {
+          onUpdateTask(update)
+          setEditingTask(null)
+        }}
+      />
    </div>
  )
 }

-function TaskCardSection({ title, tasks, emptyText, onSelectItem }: { title: string; tasks: TaskItem[]; emptyText: string; onSelectItem: (title: string) => void }) {
+function TaskCardSection({
+  title,
+  tasks,
+  emptyText,
+  onSelectItem,
+  onEditTask,
+}: {
+  title: string
+  tasks: TaskItem[]
+  emptyText: string
+  onSelectItem?: (title: string) => void
+  onEditTask?: (task: TaskItem) => void
+}) {
  return (
    <Card className="queue-section overview-task-section" bordered>
      <div className="section-header">
@@ -71,7 +102,7 @@ function TaskCardSection({ title, tasks, emptyText, onSelectItem }: { title: str
      ) : (
        <div className="overview-task-grid">
          {tasks.map((task) => (
-            <button key={task.id} className={task.completed ? 'overview-task-card completed' : 'overview-task-card'} onClick={() => onSelectItem(task.title)}>
+            <button key={task.id} className={task.completed ? 'overview-task-card completed' : 'overview-task-card'} onClick={() => onEditTask ? onEditTask(task) : onSelectItem?.(task.title)}>
              <span className="overview-task-title">
                <IconCheckCircleFill />
                {task.title}
--- a/apps/senlinai-acro-react/src/pages/projects/project-task-edit-modal.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-task-edit-modal.tsx
@@ -0,0 +1,93 @@
+import { Input, Modal, Select, Space, Switch, Typography } from '@arco-design/web-react'
+import { useEffect, useMemo, useState } from 'react'
+import type { ProjectWorkspace, TaskItem } from './project-types'
+
+const { Text } = Typography
+const { TextArea } = Input
+
+export type ProjectTaskUpdate = {
+  taskId: string
+  title: string
+  summary: string
+  tag: string
+  completed: boolean
+}
+
+type TaskDraft = {
+  title: string
+  summary: string
+  tag: string
+  completed: boolean
+}
+
+export function ProjectTaskEditModal({
+  task,
+  workspace,
+  onClose,
+  onSubmit,
+}: {
+  task: TaskItem | null
+  workspace: ProjectWorkspace
+  onClose: () => void
+  onSubmit: (update: ProjectTaskUpdate) => void
+}) {
+  const tagOptions = useMemo(() => workspace.tags.filter((tag) => tag !== 'all' && tag !== '全部'), [workspace.tags])
+  const [draft, setDraft] = useState<TaskDraft>({ title: '', summary: '', tag: '', completed: false })
+
+  useEffect(() => {
+    if (!task) return
+    setDraft({
+      title: task.title,
+      summary: task.summary,
+      tag: task.tag,
+      completed: task.completed,
+    })
+  }, [task])
+
+  return (
+    <Modal
+      className="action-modal"
+      title="编辑计划"
+      visible={Boolean(task)}
+      onCancel={onClose}
+      onOk={() => {
+        if (!task) return
+        onSubmit({
+          taskId: task.id,
+          title: draft.title.trim() || task.title,
+          summary: draft.summary.trim(),
+          tag: draft.tag.trim(),
+          completed: draft.completed,
+        })
+      }}
+    >
+      <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
+            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>
+            ))}
+          </Select>
+        </label>
+        <label className="action-switch">
+          <Text>完成状态</Text>
+          <Switch checked={draft.completed} checkedText="完成" uncheckedText="未完成" onChange={(completed) => setDraft((value) => ({ ...value, completed }))} />
+        </label>
+      </Space>
+    </Modal>
+  )
+}
--- a/apps/senlinai-acro-react/src/pages/projects/project-tasks.tsx
+++ b/apps/senlinai-acro-react/src/pages/projects/project-tasks.tsx
@@ -1,6 +1,7 @@
 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 { ProjectTaskEditModal, type ProjectTaskUpdate } from './project-task-edit-modal'
 import type { ProjectWorkspace, TaskItem } from './project-types'

 const { Title, Text, Paragraph } = Typography
@@ -12,6 +13,7 @@ export function ProjectTasks({
  onCloseTask,
  onCreateTask,
  onCreateProjectTag,
+  onUpdateTask,
 }: {
  activeWorkspace: ProjectWorkspace
  activeTaskID: string | null
@@ -20,6 +22,7 @@ export function ProjectTasks({
  onSelectItem: (title: string) => void
  onCreateTask: () => void
  onCreateProjectTag: (name: string) => void
+  onUpdateTask: (update: ProjectTaskUpdate) => void
 }) {
  const { tasks, project, tags } = activeWorkspace
  const activeTask = tasks.find((task) => task.id === activeTaskID)
@@ -28,6 +31,7 @@ export function ProjectTasks({
  const projectTags = tags.filter((tag) => tag !== 'all' && tag !== '全部')
  const [tagModalOpen, setTagModalOpen] = useState(false)
  const [tagName, setTagName] = useState('')
+  const [editingTask, setEditingTask] = useState<TaskItem | null>(null)

  if (activeTask) {
    return <TaskDetail activeWorkspace={activeWorkspace} task={activeTask} onBack={onCloseTask} />
@@ -71,7 +75,7 @@ export function ProjectTasks({
        </div>
        <div className="task-plan-card-grid">
          {pendingTasks.map((task) => (
-            <button className="task-plan-card" key={task.id} onClick={() => onOpenTask(task.id)}>
+            <button className="task-plan-card" key={task.id} onClick={() => setEditingTask(task)}>
              <span className="task-plan-title"><IconCheckCircleFill />{task.title}</span>
              <Paragraph ellipsis={{ rows: 2 }} type="secondary">{task.summary || '暂无正文'}</Paragraph>
              <div className="task-plan-meta">
@@ -120,6 +124,15 @@ export function ProjectTasks({
          </label>
        </Space>
      </Modal>
+      <ProjectTaskEditModal
+        task={editingTask}
+        workspace={activeWorkspace}
+        onClose={() => setEditingTask(null)}
+        onSubmit={(update) => {
+          onUpdateTask(update)
+          setEditingTask(null)
+        }}
+      />
    </div>
  )
 }