Merge pull request #2598 from pikasTech/fix/2380-tasktree-web

fix: 修复 TaskTree 页面空白

web/hwlab-cloud-web/src/views/projects/TaskTreeView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CalendarDays, ChevronDown, Flag, RefreshCw } from "lucide-vue-next";
+import { RefreshCw } from "lucide-vue-next";
 import { computed, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { tasktreeAPI, type TaskTreeGroup, type TaskTreeReport, type TaskTreeTask, type TaskTreeTimeline } from "@/api";
@@ -69,17 +69,17 @@ function statusLabel(status: string) { return ({ pending: "待处理", in_progre
 <template>
   <main class="tasktree-page" data-testid="tasktree-page">
     <PageCommandBar title="TaskTree" eyebrow="项目时间线" description="任务、时间节点与执行报告">
-      <template #actions><label class="tasktree-group-select"><span class="sr-only">Taskgroup</span><select :value="groupId" @change="selectGroup"><option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</option></select><ChevronDown :size="15" /></label><button class="icon-button" type="button" title="刷新" :disabled="loading" @click="loadTimeline()"><RefreshCw :size="17" /></button></template>
+      <template #actions><label class="tasktree-group-select"><span class="sr-only">Taskgroup</span><select :value="groupId" @change="selectGroup"><option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</option></select></label><button class="icon-button" type="button" title="刷新" :disabled="loading" @click="loadTimeline()"><RefreshCw :size="17" /></button></template>
     </PageCommandBar>
     <StatusStrip :items="statusItems" />
     <AsyncBoundary :state="asyncState" title="TaskTree 暂无任务" :message="error || '通过 CLI 创建 taskgroup 和任务后会显示在时间轴中。'" @retry="loadGroups">
       <section v-if="timeline" class="tasktree-workspace" aria-label="TaskTree 甘特图">
-        <header class="tasktree-context"><div><strong>{{ timeline.group.name }}</strong><p>{{ timeline.group.description || '未填写 taskgroup 说明' }}</p></div><span><CalendarDays :size="16" /> {{ days.length }} 天</span></header>
+        <header class="tasktree-context"><div><strong>{{ timeline.group.name }}</strong><p>{{ timeline.group.description || '未填写 taskgroup 说明' }}</p></div><span>{{ days.length }} 天</span></header>
         <div class="tasktree-gantt" :style="{ '--day-count': days.length }">
           <div class="tasktree-corner">任务</div><div class="tasktree-days"><span v-for="day in days" :key="day.toISOString()">{{ dayLabel(day) }}</span></div>
           <template v-for="task in timeline.tasks" :key="task.id">
             <button class="tasktree-label" :class="{ subtask: task.kind === 'subtask' }" type="button" @click="selectedTask = task"><span class="tasktree-status" :data-status="task.status"/><span>{{ task.title }}</span></button>
-            <div class="tasktree-track" :style="{ backgroundSize: `${100 / days.length}% 100%` }"><button class="tasktree-bar" :class="[`status-${task.status}`, { subtask: task.kind === 'subtask' }]" :style="barStyle(task)" type="button" @click="selectedTask = task"><span>{{ statusLabel(task.status) }}</span></button><span v-for="milestone in timeline.milestones.filter((item) => item.taskId === task.id)" :key="milestone.id" class="tasktree-milestone" :title="milestone.title" :style="milestoneStyle(milestone.occursAt)"><Flag :size="13" /></span></div>
+            <div class="tasktree-track" :style="{ backgroundSize: `${100 / days.length}% 100%` }"><button class="tasktree-bar" :class="[`status-${task.status}`, { subtask: task.kind === 'subtask' }]" :style="barStyle(task)" type="button" @click="selectedTask = task"><span>{{ statusLabel(task.status) }}</span></button><span v-for="milestone in timeline.milestones.filter((item) => item.taskId === task.id)" :key="milestone.id" class="tasktree-milestone" :title="milestone.title" :style="milestoneStyle(milestone.occursAt)" /></div>
           </template>
         </div>
       </section>
@@ -91,5 +91,5 @@ function statusLabel(status: string) { return ({ pending: "待处理", in_progre
 </template>
 
 <style scoped>
-.tasktree-page{display:grid;gap:12px;min-width:0}.tasktree-workspace{border:1px solid var(--border-color);background:var(--surface-primary);min-width:0;overflow:hidden}.tasktree-context{min-height:58px;padding:10px 14px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;gap:16px}.tasktree-context p{margin:3px 0 0;color:var(--text-secondary);font-size:12px}.tasktree-context>span{display:flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:12px}.tasktree-gantt{display:grid;grid-template-columns:minmax(210px,280px) minmax(720px,1fr);max-height:calc(100vh - 285px);overflow:auto}.tasktree-corner{position:sticky;left:0;top:0;z-index:4;padding:9px 14px;background:var(--surface-secondary);border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color);font-size:11px;font-weight:700}.tasktree-days{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:repeat(var(--day-count),minmax(28px,1fr));background:var(--surface-secondary);border-bottom:1px solid var(--border-color)}.tasktree-days span{padding:9px 2px;border-right:1px solid var(--border-subtle);font-size:10px;text-align:center;color:var(--text-secondary)}.tasktree-label{position:sticky;left:0;z-index:2;height:46px;border:0;border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-subtle);background:var(--surface-primary);padding:0 12px;display:flex;align-items:center;gap:8px;text-align:left;color:var(--text-primary);min-width:0}.tasktree-label span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tasktree-label.subtask{padding-left:34px;color:var(--text-secondary)}.tasktree-status{width:7px;height:7px;border-radius:50%;background:#83909c;flex:0 0 auto}.tasktree-status[data-status=completed]{background:#1f9d67}.tasktree-status[data-status=in_progress]{background:#2376c9}.tasktree-status[data-status=blocked]{background:#c73e48}.tasktree-track{position:relative;height:46px;border-bottom:1px solid var(--border-subtle);background-image:linear-gradient(to right,var(--border-subtle) 1px,transparent 1px)}.tasktree-bar{position:absolute;top:10px;height:26px;border:0;border-radius:4px;background:#2376c9;color:white;min-width:18px;padding:0 8px;text-align:left;overflow:hidden}.tasktree-bar span{font-size:10px;white-space:nowrap}.tasktree-bar.subtask{top:14px;height:18px;background:#5f7d99}.tasktree-bar.status-completed{background:#23845c}.tasktree-bar.status-blocked{background:#b84149}.tasktree-bar.status-pending{background:#687581}.tasktree-milestone{position:absolute;top:3px;width:20px;height:20px;color:#b36b00;transform:translateX(-10px);z-index:2}.tasktree-group-select{position:relative;display:flex;align-items:center}.tasktree-group-select select{appearance:none;min-width:180px;padding:7px 30px 7px 10px;border:1px solid var(--border-color);background:var(--surface-primary);color:var(--text-primary)}.tasktree-group-select svg{position:absolute;right:8px;pointer-events:none}.tasktree-detail{display:grid;gap:18px}.tasktree-detail dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}.tasktree-detail dl div{padding:10px;border-left:2px solid #2376c9;background:var(--surface-secondary)}.tasktree-detail dt{font-size:11px;color:var(--text-secondary)}.tasktree-detail dd{margin:4px 0 0}.tasktree-detail h3{font-size:13px;margin:0 0 8px}.tasktree-detail p{margin:0;white-space:pre-wrap}.tasktree-reports{display:grid;gap:8px}.tasktree-reports article{border:1px solid var(--border-color);padding:10px}.tasktree-reports header{display:flex;justify-content:space-between;gap:10px}.tasktree-reports time,.tasktree-muted{font-size:11px;color:var(--text-secondary)}@media(max-width:720px){.tasktree-gantt{grid-template-columns:170px minmax(680px,1fr);max-height:calc(100vh - 250px)}.tasktree-detail dl{grid-template-columns:1fr}.tasktree-group-select select{min-width:130px;max-width:42vw}}
+.tasktree-page{display:grid;gap:12px;min-width:0}.tasktree-workspace{border:1px solid var(--border-color);background:var(--surface-primary);min-width:0;overflow:hidden}.tasktree-context{min-height:58px;padding:10px 14px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;gap:16px}.tasktree-context p{margin:3px 0 0;color:var(--text-secondary);font-size:12px}.tasktree-context>span{color:var(--text-secondary);font-size:12px}.tasktree-gantt{display:grid;grid-template-columns:minmax(210px,280px) minmax(720px,1fr);max-height:calc(100vh - 285px);overflow:auto}.tasktree-corner{position:sticky;left:0;top:0;z-index:4;padding:9px 14px;background:var(--surface-secondary);border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color);font-size:11px;font-weight:700}.tasktree-days{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:repeat(var(--day-count),minmax(28px,1fr));background:var(--surface-secondary);border-bottom:1px solid var(--border-color)}.tasktree-days span{padding:9px 2px;border-right:1px solid var(--border-subtle);font-size:10px;text-align:center;color:var(--text-secondary)}.tasktree-label{position:sticky;left:0;z-index:2;height:46px;border:0;border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-subtle);background:var(--surface-primary);padding:0 12px;display:flex;align-items:center;gap:8px;text-align:left;color:var(--text-primary);min-width:0}.tasktree-label span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tasktree-label.subtask{padding-left:34px;color:var(--text-secondary)}.tasktree-status{width:7px;height:7px;border-radius:50%;background:#83909c;flex:0 0 auto}.tasktree-status[data-status=completed]{background:#1f9d67}.tasktree-status[data-status=in_progress]{background:#2376c9}.tasktree-status[data-status=blocked]{background:#c73e48}.tasktree-track{position:relative;height:46px;border-bottom:1px solid var(--border-subtle);background-image:linear-gradient(to right,var(--border-subtle) 1px,transparent 1px)}.tasktree-bar{position:absolute;top:10px;height:26px;border:0;border-radius:4px;background:#2376c9;color:white;min-width:18px;padding:0 8px;text-align:left;overflow:hidden}.tasktree-bar span{font-size:10px;white-space:nowrap}.tasktree-bar.subtask{top:14px;height:18px;background:#5f7d99}.tasktree-bar.status-completed{background:#23845c}.tasktree-bar.status-blocked{background:#b84149}.tasktree-bar.status-pending{background:#687581}.tasktree-milestone{position:absolute;top:7px;width:12px;height:12px;background:#b36b00;border:2px solid var(--surface-primary);transform:translateX(-6px) rotate(45deg);z-index:2}.tasktree-group-select{display:flex;align-items:center}.tasktree-group-select select{min-width:180px;padding:7px 10px;border:1px solid var(--border-color);background:var(--surface-primary);color:var(--text-primary)}.tasktree-detail{display:grid;gap:18px}.tasktree-detail dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}.tasktree-detail dl div{padding:10px;border-left:2px solid #2376c9;background:var(--surface-secondary)}.tasktree-detail dt{font-size:11px;color:var(--text-secondary)}.tasktree-detail dd{margin:4px 0 0}.tasktree-detail h3{font-size:13px;margin:0 0 8px}.tasktree-detail p{margin:0;white-space:pre-wrap}.tasktree-reports{display:grid;gap:8px}.tasktree-reports article{border:1px solid var(--border-color);padding:10px}.tasktree-reports header{display:flex;justify-content:space-between;gap:10px}.tasktree-reports time,.tasktree-muted{font-size:11px;color:var(--text-secondary)}@media(max-width:720px){.tasktree-gantt{grid-template-columns:170px minmax(680px,1fr);max-height:calc(100vh - 250px)}.tasktree-detail dl{grid-template-columns:1fr}.tasktree-group-select select{min-width:130px;max-width:42vw}}
 </style>