From b9a45b4112a5852ecf63fd4eaedbcaa8072d2439 Mon Sep 17 00:00:00 2001
From: yibo <yibo@yiboM5MacBook-Air.local>
Date: Mon, 31 Aug 2026 11:01:32 +0800
Subject: [PATCH] feat(task-decomposition): 看板展示子任务（43 号文档 Phase 4）

---
 web/src/components/graph-console/GoalTaskPane.vue | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------
 web/src/components/task-board/TaskTable.vue       |  10 ++++++++++
 2 files changed, 86 insertions(+), 50 deletions(-)

diff --git a/web/src/components/graph-console/GoalTaskPane.vue b/web/src/components/graph-console/GoalTaskPane.vue
index b0d6b77..4912918 100644
--- a/web/src/components/graph-console/GoalTaskPane.vue
+++ b/web/src/components/graph-console/GoalTaskPane.vue
@@ -76,58 +76,70 @@
           </p>
 
           <ul class="tasks">
-            <li
-              v-for="t in g.tasks || []"
-              :key="t.taskId"
-              class="task"
-              :class="{ on: t.taskId === selectedTaskId, blocked: t.status === 'blocked' }"
-              @click="$emit('select', { goalId: g.goalId, taskId: t.taskId })"
-            >
-              <span class="dot" :class="{ pulse: taskStyle(t.status).pulse }" :style="dotStyle(taskStyle(t.status))" />
-              <div class="t-body">
-                <div class="t-title">
-                  <span
-                    v-if="(t.dependsOn || []).length"
-                    class="dep"
-                    :title="dependsLabel(t, g.tasks || [])"
-                  >⇢</span>{{ t.title || t.taskId }}
+            <template v-for="t in topLevel(g.tasks)" :key="t.taskId">
+              <li
+                class="task"
+                :class="{ on: t.taskId === selectedTaskId, blocked: t.status === 'blocked' }"
+                @click="$emit('select', { goalId: g.goalId, taskId: t.taskId })"
+              >
+                <span class="dot" :class="{ pulse: taskStyle(t.status).pulse }" :style="dotStyle(taskStyle(t.status))" />
+                <div class="t-body">
+                  <div class="t-title">
+                    <span
+                      v-if="(t.dependsOn || []).length"
+                      class="dep"
+                      :title="dependsLabel(t, g.tasks || [])"
+                    >⇢</span>{{ t.title || t.taskId }}
+                  </div>
+                  <div class="t-sub">
+                    <!-- 排队中的行把状态标签换成位次：「排队中」谁都看得出来，「前面还有几个」才是
+                         用户点完下达之后真正在问的问题。位次是服务端算的，前端不排（见 queueBadge） -->
+                    <span
+                      v-if="queueBadge(t)"
+                      class="st queue"
+                      :style="{ color: taskStyle(t.status).color }"
+                      :title="queueBadge(t).title"
+                    >{{ queueBadge(t).text }}</span>
+                    <span v-else class="st" :style="{ color: taskStyle(t.status).color }">{{ taskStyle(t.status).label }}</span>
+                    <span v-if="taskSubtitle(t, now)"> · {{ taskSubtitle(t, now) }}</span>
+                  </div>
+                  <!-- blocked 的原因单独一行并标红：它是**要人动手**的状态，混在灰色第二排里等于没说 -->
+                  <div v-if="blockedLabel(t, g.tasks || [])" class="t-blocked" :title="t.blockedReason">
+                    ⚠ {{ blockedLabel(t, g.tasks || []) }}
+                  </div>
                 </div>
-                <div class="t-sub">
-                  <!-- 排队中的行把状态标签换成位次：「排队中」谁都看得出来，「前面还有几个」才是
-                       用户点完下达之后真正在问的问题。位次是服务端算的，前端不排（见 queueBadge） -->
-                  <span
-                    v-if="queueBadge(t)"
-                    class="st queue"
-                    :style="{ color: taskStyle(t.status).color }"
-                    :title="queueBadge(t).title"
-                  >{{ queueBadge(t).text }}</span>
-                  <span v-else class="st" :style="{ color: taskStyle(t.status).color }">{{ taskStyle(t.status).label }}</span>
-                  <span v-if="taskSubtitle(t, now)"> · {{ taskSubtitle(t, now) }}</span>
-                </div>
-                <!-- blocked 的原因单独一行并标红：它是**要人动手**的状态，混在灰色第二排里等于没说 -->
-                <div v-if="blockedLabel(t, g.tasks || [])" class="t-blocked" :title="t.blockedReason">
-                  ⚠ {{ blockedLabel(t, g.tasks || []) }}
-                </div>
-              </div>
-              <button
-                v-if="taskActions(t).length"
-                class="more t-more"
-                title="更多"
-                @click.stop="menu = menu === t.taskId ? '' : t.taskId"
-              >⋯</button>
-
-              <!-- 每条 task 的操作菜单。做不成的（重跑）置灰并说明，不给能点却必然 4xx 的入口 -->
-              <div v-if="menu === t.taskId" class="menu t-menu" @click.stop>
                 <button
-                  v-for="a in taskActions(t)"
-                  :key="a.key"
-                  :class="{ danger: a.danger }"
-                  :disabled="busy || a.disabled"
-                  :title="a.title"
-                  @click="runTaskAction(g, t, a)"
-                >{{ a.label }}</button>
-              </div>
-            </li>
+                  v-if="taskActions(t).length"
+                  class="more t-more"
+                  title="更多"
+                  @click.stop="menu = menu === t.taskId ? '' : t.taskId"
+                >⋯</button>
+
+                <!-- 每条 task 的操作菜单。做不成的（重跑）置灰并说明，不给能点却必然 4xx 的入口 -->
+                <div v-if="menu === t.taskId" class="menu t-menu" @click.stop>
+                  <button
+                    v-for="a in taskActions(t)"
+                    :key="a.key"
+                    :class="{ danger: a.danger }"
+                    :disabled="busy || a.disabled"
+                    :title="a.title"
+                    @click="runTaskAction(g, t, a)"
+                  >{{ a.label }}</button>
+                </div>
+              </li>
+
+              <!-- 43 号文档：itemized 任务按验收条目物化出的子任务，只读展示——没有独立的 run，
+                   不接操作菜单/选中态，状态由 coder-validator 逐条上报（tasks.status 那套枚举）。
+                   子任务不会再递归拆一层（createTask 校验过），所以这里只用一层 <ul>，不需要
+                   FileNode.vue 那种自递归组件。 -->
+              <ul v-if="childrenOf(g.tasks, t.taskId).length" class="subtasks">
+                <li v-for="st in childrenOf(g.tasks, t.taskId)" :key="st.taskId" class="subtask">
+                  <span class="dot sm" :class="{ pulse: taskStyle(st.status).pulse }" :style="dotStyle(taskStyle(st.status))" />
+                  <span class="st-title">{{ st.title || st.taskId }}</span>
+                  <span class="st-status" :style="{ color: taskStyle(st.status).color }">{{ taskStyle(st.status).label }}</span>
+                </li>
+              </ul>
+            </template>
           </ul>
 
           <p v-if="g.status !== 'planning' && !(g.tasks || []).length" class="tip small">这个目标下还没有任务。</p>
@@ -173,6 +185,14 @@ let clock = null;
 onMounted(() => { clock = setInterval(() => { now.value = Date.now(); }, 30000); });
 onBeforeUnmount(() => clearInterval(clock));
 
+/** 43 号文档：g.tasks 是摊平的（父任务 + 子任务同一个数组），这里按 parentTaskId 分两层 */
+function topLevel(tasks) {
+  return (tasks || []).filter((t) => !t.parentTaskId);
+}
+function childrenOf(tasks, parentTaskId) {
+  return (tasks || []).filter((t) => t.parentTaskId === parentTaskId);
+}
+
 function toggle(goalId) {
   const next = new Set(collapsed.value);
   if (next.has(goalId)) next.delete(goalId); else next.add(goalId);
@@ -378,6 +398,12 @@ function onDispatched(d) {
 .dot.pulse { animation: pulse 1.6s ease-in-out infinite; }
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
 
+.subtasks { list-style: none; margin: 0 0 2px; padding: 0 0 0 27px; }
+.subtask { display: flex; align-items: center; gap: 5px; padding: 2px 6px; font-size: 11px; }
+.subtask .dot.sm { margin-top: 0; width: 6px; height: 6px; }
+.st-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; }
+.st-status { font-size: 10px; font-weight: 600; white-space: nowrap; }
+
 .t-body { min-width: 0; flex: 1; }
 .t-title {
   font-size: 12px; line-height: 1.4; color: #1a1a1a;
diff --git a/web/src/components/task-board/TaskTable.vue b/web/src/components/task-board/TaskTable.vue
index df96297..ed34338 100644
--- a/web/src/components/task-board/TaskTable.vue
+++ b/web/src/components/task-board/TaskTable.vue
@@ -50,6 +50,9 @@
               <span v-if="queueBadge(t)" class="qb" :title="queueBadge(t).title">{{ queueBadge(t).text }}</span>
             </td>
             <td class="c-desc">
+              <!-- 43 号文档：子任务是按验收条目物化出来的只读行，没有独立的 run，
+                   表格本身是平铺+可排序的，不适合画树——用一行小字指回父任务就够了 -->
+              <div v-if="t.parentTaskId" class="parent-line">↳ 子任务 · 属于「{{ parentTitle(t) }}」</div>
               <div class="title">{{ t.title || '（无标题）' }}</div>
               <div v-if="t.description" class="desc" :title="t.description">{{ t.description }}</div>
               <div v-if="t.status === 'blocked'" class="blocked-line">{{ blockedLabel(t, siblingsOf(t)) || '挂起' }}</div>
@@ -95,6 +98,12 @@ function siblingsOf(t) {
   return (g && g.tasks) || [];
 }
 
+/** 43 号文档：子任务行指回父任务标题——父任务恒在同一个 goal 下，查兄弟列表就够了 */
+function parentTitle(t) {
+  const parent = siblingsOf(t).find((x) => x.taskId === t.parentTaskId);
+  return (parent && (parent.title || parent.taskId)) || t.parentTaskId;
+}
+
 function dotStyle(s) {
   return s.hollow ? { background: 'transparent', borderColor: s.color } : { background: s.color, borderColor: s.color };
 }
@@ -208,6 +217,7 @@ tbody td { padding: 8px 10px; border-bottom: 1px solid #f4f4f6; vertical-align: 
 .title { font-weight: 600; color: #1a1a1a; }
 .desc { margin-top: 2px; color: #888; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .blocked-line { margin-top: 2px; color: #d33; font-size: 11px; }
+.parent-line { color: #8a5cd6; font-size: 10px; margin-bottom: 2px; }
 .c-goal, .c-assignee { color: #555; white-space: nowrap; }
 .c-priority { white-space: nowrap; }
 .c-time { white-space: nowrap; color: #666; }
--
libgit2 0.21.4