From bda4db5e5bf945a298ec8b3440c2cffad56f4cae Mon Sep 17 00:00:00 2001
From: Xiaoxia AI <xiaoxia@localhost>
Date: Tue, 16 Jun 2026 12:40:12 +0800
Subject: [PATCH] feat: add task creation form and detail page

- CreateTaskForm component with validation
- Task detail page with issue list
- Integrated create form into projects page
- Task name links to detail page
- Added workspace_id parameter
- Improved state management
---
 apps/web/app/components/CreateTaskForm.tsx | 200 +++++++++++++++++++
 apps/web/app/projects/page.tsx             |  28 ++-
 apps/web/app/tasks/[id]/page.tsx           | 213 +++++++++++++++++++++
 3 files changed, 436 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/app/components/CreateTaskForm.tsx
 create mode 100644 apps/web/app/tasks/[id]/page.tsx

diff --git a/apps/web/app/components/CreateTaskForm.tsx b/apps/web/app/components/CreateTaskForm.tsx
new file mode 100644
index 000000000..d130f9800
--- /dev/null
+++ b/apps/web/app/components/CreateTaskForm.tsx
@@ -0,0 +1,200 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+interface CreateTaskFormProps {
+  projectId: string;
+  workspaceId: string;
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}
+
+export default function CreateTaskForm({ projectId, workspaceId, onSuccess, onCancel }: CreateTaskFormProps) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    priority: 'medium',
+    assignee_user_id: '',
+    parent_task_id: '',
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/project-management/tasks`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          project_id: projectId,
+          workspace_id: workspaceId,
+          ...formData,
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.detail || '创建失败');
+      }
+
+      if (onSuccess) {
+        onSuccess();
+      } else {
+        router.push('/projects');
+      }
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{
+      background: 'var(--bg-white)',
+      padding: '24px',
+      borderRadius: '8px',
+      maxWidth: '600px',
+      margin: '0 auto',
+    }}>
+      <h2 style={{ marginBottom: '20px', fontSize: '20px', fontWeight: 'bold' }}>新增任务</h2>
+
+      {error && (
+        <div style={{
+          padding: '12px',
+          background: '#FFECE8',
+          border: '1px solid var(--error)',
+          borderRadius: '4px',
+          color: 'var(--error)',
+          marginBottom: '20px',
+        }}>
+          {error}
+        </div>
+      )}
+
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
+          任务名称 <span style={{ color: 'var(--error)' }}>*</span>
+        </label>
+        <input
+          type="text"
+          required
+          value={formData.name}
+          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+          style={{
+            width: '100%',
+            padding: '8px 12px',
+            border: '1px solid var(--border)',
+            borderRadius: '4px',
+            fontSize: '14px',
+          }}
+          placeholder="输入任务名称"
+        />
+      </div>
+
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
+          任务描述
+        </label>
+        <textarea
+          value={formData.description}
+          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+          rows={4}
+          style={{
+            width: '100%',
+            padding: '8px 12px',
+            border: '1px solid var(--border)',
+            borderRadius: '4px',
+            fontSize: '14px',
+            resize: 'vertical',
+          }}
+          placeholder="详细描述任务内容"
+        />
+      </div>
+
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
+          优先级
+        </label>
+        <select
+          value={formData.priority}
+          onChange={(e) => setFormData({ ...formData, priority: e.target.value })}
+          style={{
+            width: '100%',
+            padding: '8px 12px',
+            border: '1px solid var(--border)',
+            borderRadius: '4px',
+            fontSize: '14px',
+          }}
+        >
+          <option value="low">低</option>
+          <option value="medium">中</option>
+          <option value="high">高</option>
+          <option value="urgent">紧急</option>
+        </select>
+      </div>
+
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
+          负责人 ID（可选）
+        </label>
+        <input
+          type="text"
+          value={formData.assignee_user_id}
+          onChange={(e) => setFormData({ ...formData, assignee_user_id: e.target.value })}
+          style={{
+            width: '100%',
+            padding: '8px 12px',
+            border: '1px solid var(--border)',
+            borderRadius: '4px',
+            fontSize: '14px',
+          }}
+          placeholder="输入负责人 ID"
+        />
+      </div>
+
+      <div style={{ display: 'flex', gap: '12px', marginTop: '24px' }}>
+        <button
+          type="submit"
+          disabled={loading}
+          style={{
+            flex: 1,
+            padding: '10px',
+            borderRadius: '4px',
+            border: 'none',
+            background: loading ? '#ccc' : 'var(--primary)',
+            color: 'white',
+            fontWeight: 'bold',
+            cursor: loading ? 'not-allowed' : 'pointer',
+          }}
+        >
+          {loading ? '创建中...' : '创建任务'}
+        </button>
+        {onCancel && (
+          <button
+            type="button"
+            onClick={onCancel}
+            style={{
+              flex: 1,
+              padding: '10px',
+              borderRadius: '4px',
+              border: '1px solid var(--border)',
+              background: 'white',
+              cursor: 'pointer',
+            }}
+          >
+            取消
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}
diff --git a/apps/web/app/projects/page.tsx b/apps/web/app/projects/page.tsx
index 2a3dddfe2..b83e73848 100644
--- a/apps/web/app/projects/page.tsx
+++ b/apps/web/app/projects/page.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
+import CreateTaskForm from '../components/CreateTaskForm';
 
 interface Task {
   id: string;
@@ -20,15 +21,18 @@ export default function ProjectsPage() {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
+  const [showCreateForm, setShowCreateForm] = useState(false);
 
   // 模拟项目ID，生产环境应该从路由或上下文获取
   const projectId = 'demo_project_1';
+  const workspaceId = 'demo_workspace_1';
 
   useEffect(() => {
     fetchTasks();
   }, []);
 
   const fetchTasks = async () => {
+    setLoading(true);
     try {
       const res = await fetch(`${API_BASE}/api/v1/project-management/tasks?project_id=${projectId}`);
       if (!res.ok) throw new Error('获取任务列表失败');
@@ -73,7 +77,7 @@ export default function ProjectsPage() {
     return texts[priority] || priority;
   };
 
-  if (loading) {
+  if (loading && !showCreateForm) {
     return (
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
         <p style={{ color: 'var(--text-secondary)' }}>加载中...</p>
@@ -113,7 +117,7 @@ export default function ProjectsPage() {
             刷新
           </button>
           <button
-            onClick={() => alert('创建任务功能开发中')}
+            onClick={() => setShowCreateForm(!showCreateForm)}
             style={{
               padding: '6px 12px',
               borderRadius: '4px',
@@ -124,7 +128,7 @@ export default function ProjectsPage() {
               fontWeight: 'bold',
             }}
           >
-            + 新增任务
+            {showCreateForm ? '取消' : '+ 新增任务'}
           </button>
         </div>
       </header>
@@ -144,7 +148,17 @@ export default function ProjectsPage() {
           </div>
         )}
 
-        {tasks.length === 0 ? (
+        {showCreateForm ? (
+          <CreateTaskForm
+            projectId={projectId}
+            workspaceId={workspaceId}
+            onSuccess={() => {
+              setShowCreateForm(false);
+              fetchTasks();
+            }}
+            onCancel={() => setShowCreateForm(false)}
+          />
+        ) : tasks.length === 0 ? (
           <div style={{
             background: 'var(--bg-white)',
             borderRadius: '8px',
@@ -175,7 +189,11 @@ export default function ProjectsPage() {
               <tbody>
                 {tasks.map((task) => (
                   <tr key={task.id} style={{ borderBottom: '1px solid #F7F8FA' }}>
-                    <td style={{ padding: '12px', fontWeight: '500' }}>{task.name}</td>
+                    <td style={{ padding: '12px', fontWeight: '500' }}>
+                      <Link href={`/tasks/${task.id}`} style={{ color: 'var(--primary)', textDecoration: 'none' }}>
+                        {task.name}
+                      </Link>
+                    </td>
                     <td style={{ padding: '12px' }}>
                       <span style={{
                         display: 'inline-block',
diff --git a/apps/web/app/tasks/[id]/page.tsx b/apps/web/app/tasks/[id]/page.tsx
new file mode 100644
index 000000000..1d04160a3
--- /dev/null
+++ b/apps/web/app/tasks/[id]/page.tsx
@@ -0,0 +1,213 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+
+interface Task {
+  id: string;
+  name: string;
+  description: string;
+  status: string;
+  priority: string;
+  progress: number;
+  assignee_user_id: string;
+  parent_task_id: string;
+  planned_start_date: string | null;
+  planned_end_date: string | null;
+  actual_start_date: string | null;
+  actual_end_date: string | null;
+  tags: string[];
+  created_at: string;
+  updated_at: string;
+}
+
+interface TaskIssue {
+  id: string;
+  title: string;
+  description: string;
+  resolved: boolean;
+  resolved_at: string | null;
+  created_at: string;
+}
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+export default function TaskDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const taskId = params.id as string;
+  
+  const [task, setTask] = useState<Task | null>(null);
+  const [issues, setIssues] = useState<TaskIssue[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [updating, setUpdating] = useState(false);
+
+  useEffect(() => {
+    fetchTaskDetail();
+    fetchTaskIssues();
+  }, [taskId]);
+
+  const fetchTaskDetail = async () => {
+    try {
+      // 因为没有单任务详情接口，这里演示如何处理
+      // 生产环境应该补一个 GET /tasks/{task_id} 接口
+      setError('任务详情接口待补充');
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchTaskIssues = async () => {
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/project-management/issues?task_id=${taskId}`);
+      if (res.ok) {
+        const data = await res.json();
+        setIssues(data);
+      }
+    } catch (err) {
+      console.error('获取问题列表失败:', err);
+    }
+  };
+
+  const updateStatus = async (newStatus: string) => {
+    setUpdating(true);
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/project-management/tasks/${taskId}/status`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: newStatus }),
+      });
+      if (!res.ok) throw new Error('更新状态失败');
+      await fetchTaskDetail();
+    } catch (err: any) {
+      alert(err.message);
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  const updateProgress = async (newProgress: number) => {
+    setUpdating(true);
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/project-management/tasks/${taskId}/progress`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ progress: newProgress }),
+      });
+      if (!res.ok) throw new Error('更新进度失败');
+      await fetchTaskDetail();
+    } catch (err: any) {
+      alert(err.message);
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
+        <p>加载中...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ minHeight: '100vh', background: 'var(--bg-gray)' }}>
+      {/* Header */}
+      <header style={{
+        height: '60px',
+        background: 'var(--bg-white)',
+        borderBottom: '1px solid var(--border)',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 20px',
+        gap: '20px',
+      }}>
+        <Link href="/projects" style={{ fontSize: '18px', fontWeight: 'bold', color: 'var(--primary)', textDecoration: 'none' }}>
+          ← 返回任务列表
+        </Link>
+      </header>
+
+      {/* Main */}
+      <main style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
+        {error && (
+          <div style={{
+            padding: '20px',
+            background: 'var(--bg-white)',
+            borderRadius: '8px',
+            border: '1px solid var(--border)',
+            textAlign: 'center',
+          }}>
+            <p style={{ color: 'var(--text-secondary)', marginBottom: '12px' }}>{error}</p>
+            <p style={{ fontSize: '14px', color: 'var(--text-secondary)' }}>
+              提示：需要在后端补充 <code>GET /api/v1/project-management/tasks/{'{task_id}'}</code> 接口
+            </p>
+          </div>
+        )}
+
+        {task && (
+          <div style={{ display: 'grid', gap: '20px' }}>
+            {/* 任务基本信息 */}
+            <div style={{ background: 'var(--bg-white)', padding: '24px', borderRadius: '8px' }}>
+              <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>{task.name}</h1>
+              <p style={{ color: 'var(--text-secondary)', lineHeight: '1.6' }}>{task.description || '暂无描述'}</p>
+              
+              <div style={{ display: 'flex', gap: '20px', marginTop: '20px', paddingTop: '20px', borderTop: '1px solid var(--border)' }}>
+                <div>
+                  <span style={{ color: 'var(--text-secondary)', fontSize: '14px' }}>状态</span>
+                  <p style={{ fontWeight: 'bold', marginTop: '4px' }}>{task.status}</p>
+                </div>
+                <div>
+                  <span style={{ color: 'var(--text-secondary)', fontSize: '14px' }}>优先级</span>
+                  <p style={{ fontWeight: 'bold', marginTop: '4px' }}>{task.priority}</p>
+                </div>
+                <div>
+                  <span style={{ color: 'var(--text-secondary)', fontSize: '14px' }}>进度</span>
+                  <p style={{ fontWeight: 'bold', marginTop: '4px' }}>{task.progress}%</p>
+                </div>
+              </div>
+            </div>
+
+            {/* 问题卡点列表 */}
+            <div style={{ background: 'var(--bg-white)', padding: '24px', borderRadius: '8px' }}>
+              <h2 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>问题卡点 ({issues.length})</h2>
+              {issues.length === 0 ? (
+                <p style={{ color: 'var(--text-secondary)' }}>暂无问题</p>
+              ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                  {issues.map(issue => (
+                    <div key={issue.id} style={{
+                      padding: '12px',
+                      border: '1px solid var(--border)',
+                      borderRadius: '4px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '12px',
+                    }}>
+                      <span style={{ fontSize: '20px' }}>{issue.resolved ? '🟢' : '🔴'}</span>
+                      <div style={{ flex: 1 }}>
+                        <p style={{ fontWeight: '500' }}>{issue.title}</p>
+                        {issue.description && (
+                          <p style={{ fontSize: '14px', color: 'var(--text-secondary)', marginTop: '4px' }}>
+                            {issue.description}
+                          </p>
+                        )}
+                      </div>
+                      <span style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
+                        {issue.resolved ? '已解决' : '未解决'}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}