refactor(web): 实质重写 MDTODO 三栏组件树

web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue

@@ -1,11 +1,14 @@
 <!-- SPEC: MDTODO 三栏任务工作区. -->
 <!-- Implementation reference: MDTODO R2 / PJ2026-010405 云端控制台. -->
 <script setup lang="ts">
-import { reactive } from "vue";
+import { computed, reactive } from "vue";
 import ApiErrorDiagnostic from "@/components/common/ApiErrorDiagnostic.vue";
 import EmptyState from "@/components/common/EmptyState.vue";
 import LoadingState from "@/components/common/LoadingState.vue";
 import SplitWorkspaceLayout from "@/components/layout/SplitWorkspaceLayout.vue";
+import StatusStrip, {
+  type ConsoleStatusItem,
+} from "@/components/layout/StatusStrip.vue";
 import MdtodoCreateTaskDialog from "@/components/mdtodo/MdtodoCreateTaskDialog.vue";
 import MdtodoInfoDialog from "@/components/mdtodo/MdtodoInfoDialog.vue";
 import MdtodoReportPanel from "@/components/mdtodo/MdtodoReportPanel.vue";
@@ -16,6 +19,38 @@ import MdtodoToolbar from "@/components/mdtodo/MdtodoToolbar.vue";
 import { useMdtodoWorkspaceController } from "@/composables/mdtodo/useMdtodoWorkspaceController";
 
 const model = reactive(useMdtodoWorkspaceController());
+const statusItems = computed<ConsoleStatusItem[]>(() => [
+  {
+    id: "source",
+    label: "Source",
+    value: model.selectedSource?.displayName || model.selectedSourceId || "未选择",
+    tone: model.selectedSourceId ? "ok" : "warn",
+  },
+  {
+    id: "file",
+    label: "File",
+    value: model.selectedFileName || "未选择",
+    tone: model.selectedFileRef ? "info" : "warn",
+  },
+  {
+    id: "tasks",
+    label: "Tasks",
+    value: model.fileTasks.length,
+    detail: `${model.filteredTasks.length} 个任务符合当前筛选`,
+  },
+  {
+    id: "authority",
+    label: "Authority",
+    value: model.taskDetailPartial ? "projection" : "source",
+    tone: model.taskDetailPartial ? "warn" : "ok",
+  },
+  {
+    id: "report",
+    label: "Report",
+    value: model.reportOpen ? "open" : "closed",
+    tone: model.reportOpen ? "info" : "neutral",
+  },
+]);
 </script>
 
 <template>
@@ -59,6 +94,7 @@ const model = reactive(useMdtodoWorkspaceController());
         @reindex="model.reindex"
         @info="model.showInfo = true"
       />
+      <StatusStrip :items="statusItems" label="MDTODO 当前上下文" live="polite" />
       <nav class="mobile-tabs" role="tablist" aria-label="MDTODO 面板">
         <button
           role="tab"
@@ -294,7 +330,7 @@ const model = reactive(useMdtodoWorkspaceController());
 <style scoped>
 .mdtodo-page {
   display: grid;
-  grid-template-rows: auto auto auto auto minmax(0, 1fr);
+  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
   min-width: 0;
   min-height: 0;
   height: calc(100dvh - 68px);
@@ -303,7 +339,6 @@ const model = reactive(useMdtodoWorkspaceController());
   background: #e9f0f2;
 }
 .mdtodo-workspace {
-  grid-row: -2 / -1;
   min-height: 0;
   height: 100%;
 }

web/hwlab-cloud-web/src/components/mdtodo/MdtodoReportPanel.vue

@@ -1,12 +1,13 @@
 <!-- SPEC: MDTODO 三栏任务工作区. -->
-<!-- Implementation reference: MDTODO R2 / PJ2026-010405 云端控制台. -->
-<!-- Responsibility: 保持报告栏折叠、关闭与全屏预览交互。 -->
+<!-- Responsibility: 报告检查器、调宽栏位、关闭与独立全屏。 -->
 
 <script setup lang="ts">
-import { ChevronLeft, ChevronRight, Maximize2, X } from "lucide-vue-next";
+import { ChevronLeft, FileText, Maximize2 } from "lucide-vue-next";
 import type { MdtodoReportPreviewRecord, MdtodoTaskLinkRecord } from "@/api";
 import BaseDialog from "@/components/common/BaseDialog.vue";
 import ContentViewer from "@/components/common/ContentViewer.vue";
+import RefreshBoundary from "@/components/common/RefreshBoundary.vue";
+import InspectorPanel from "@/components/console/InspectorPanel.vue";
 
 defineProps<{
   report: MdtodoReportPreviewRecord | null;
@@ -27,135 +28,194 @@ const emit = defineEmits<{
 
 <template>
   <aside
-    class="report-viewer"
+    class="report-inspector"
     data-testid="mdtodo-report-sidebar"
     :data-collapsed="collapsed"
   >
-    <header>
-      <button
-        type="button"
-        data-testid="mdtodo-report-sidebar-toggle"
-        :aria-label="collapsed ? '展开报告' : '收起报告'"
-        @click="emit('update:collapsed', !collapsed)"
+    <button
+      v-if="collapsed"
+      class="report-rail"
+      type="button"
+      data-testid="mdtodo-report-sidebar-toggle"
+      aria-label="展开报告"
+      title="展开报告"
+      @click="emit('update:collapsed', false)"
+    >
+      <ChevronLeft :size="16" aria-hidden="true" />
+      <FileText :size="16" aria-hidden="true" />
+      <span>报告</span>
+    </button>
+
+    <InspectorPanel
+      v-else
+      :title="activeLink?.label || report?.relativePath || '任务报告'"
+      :subtitle="report?.relativePath || 'Source/File 报告预览'"
+      @close="emit('close')"
+    >
+      <template #tabs>
+        <button
+          class="report-tab"
+          type="button"
+          role="tab"
+          aria-selected="true"
+        >
+          Markdown
+        </button>
+        <button
+          class="icon-button"
+          type="button"
+          data-testid="mdtodo-report-sidebar-toggle"
+          title="收起报告"
+          aria-label="收起报告"
+          @click="emit('update:collapsed', true)"
+        >
+          <ChevronLeft :size="15" aria-hidden="true" />
+        </button>
+      </template>
+
+      <RefreshBoundary
+        class="report-boundary"
+        :loading="loading"
+        mode="persistent"
+        :has-content="Boolean(report)"
+        label="读取报告"
       >
-        <ChevronRight v-if="collapsed" :size="16" aria-hidden="true" />
-        <ChevronLeft v-else :size="16" aria-hidden="true" />
-      </button>
-      <strong v-if="!collapsed">{{
-        activeLink?.label || report?.relativePath || "Report"
-      }}</strong>
-      <span />
-      <button
-        v-if="!collapsed"
-        type="button"
-        data-testid="mdtodo-report-fullscreen"
-        :disabled="!report"
-        title="全屏查看报告"
-        aria-label="全屏查看报告"
-        @click="emit('openFullscreen')"
-      >
-        <Maximize2 :size="16" aria-hidden="true" />
-      </button>
-      <button
-        v-if="!collapsed"
-        type="button"
-        data-testid="mdtodo-report-close"
-        title="关闭报告"
-        aria-label="关闭报告"
-        @click="emit('close')"
-      >
-        <X :size="16" aria-hidden="true" />
-      </button>
-    </header>
-    <article v-if="!collapsed" data-testid="mdtodo-report-preview">
-      <div v-if="loading">读取报告…</div>
-      <ContentViewer v-else class="report-markdown" :content="report?.content || ''" mode="markdown" title="报告预览" :filename="report?.relativePath || 'report.md'" :line-numbers="false" />
-      <p v-if="error">{{ error }}</p>
-    </article>
+        <ContentViewer
+          class="report-markdown"
+          data-testid="mdtodo-report-preview"
+          :content="report?.content || ''"
+          mode="markdown"
+          title="报告预览"
+          :filename="report?.relativePath || 'report.md'"
+          :line-numbers="false"
+        />
+        <template #empty>
+          <div class="report-empty">报告内容尚未加载。</div>
+        </template>
+      </RefreshBoundary>
+      <p v-if="error" class="report-error" role="alert">{{ error }}</p>
+
+      <template #footer>
+        <span class="report-authority">read-only source report</span>
+        <button
+          class="btn"
+          type="button"
+          data-testid="mdtodo-report-fullscreen"
+          :disabled="!report"
+          @click="emit('openFullscreen')"
+        >
+          <Maximize2 :size="15" aria-hidden="true" />
+          全屏
+        </button>
+      </template>
+    </InspectorPanel>
   </aside>
+
   <BaseDialog
     :open="showFullscreen && Boolean(report)"
-    :title="activeLink?.label || report?.relativePath || 'Report'"
+    :title="activeLink?.label || report?.relativePath || '任务报告'"
     description="Markdown 报告只读预览"
     wide
     @close="emit('closeFullscreen')"
   >
-    <ContentViewer class="report-markdown fullscreen" data-testid="mdtodo-report-fullscreen-dialog" :content="report?.content || ''" mode="markdown" :title="activeLink?.label || report?.relativePath || 'Report'" :filename="report?.relativePath || 'report.md'" :line-numbers="false" />
-    <template #footer
-      ><button type="button" @click="emit('closeFullscreen')">
+    <ContentViewer
+      class="report-markdown fullscreen"
+      data-testid="mdtodo-report-fullscreen-dialog"
+      :content="report?.content || ''"
+      mode="markdown"
+      :title="activeLink?.label || report?.relativePath || '任务报告'"
+      :filename="report?.relativePath || 'report.md'"
+      :line-numbers="false"
+    />
+    <template #footer>
+      <button class="btn" type="button" @click="emit('closeFullscreen')">
         关闭
-      </button></template
-    >
+      </button>
+    </template>
   </BaseDialog>
 </template>
 
 <style scoped>
-.report-viewer {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+.report-inspector {
   min-width: 0;
   min-height: 0;
   height: 100%;
-  background: #f3f7f8;
+  background: var(--console-surface, #fff);
 }
-.report-viewer[data-collapsed="true"] {
-  width: 38px;
+.report-inspector[data-collapsed="true"] {
+  width: 40px;
 }
-.report-viewer header {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
-  align-items: center;
-  gap: 5px;
-  border-bottom: 1px solid #bdcbd2;
-  padding: 7px;
+.report-inspector :deep(.operations-inspector-panel) {
+  height: 100%;
+  border: 0;
+  border-radius: 0;
 }
-.report-viewer header button {
-  height: 28px;
-  border: 1px solid #9fb1ba;
-  background: #fff;
-  color: #294653;
-  font-size: 11px;
-}
-.report-viewer svg {
-  width: 13px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.7;
-}
-.report-viewer[data-collapsed="false"] header > button:first-child svg {
-  transform: rotate(180deg);
-}
-.report-viewer strong {
-  overflow: hidden;
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.report-viewer > article {
+.report-inspector :deep(.operations-inspector-body) {
   min-height: 0;
-  overflow: auto;
-  padding: 12px;
+  overflow: hidden;
+  padding: 8px;
+}
+.report-inspector :deep(.operations-inspector-footer) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.report-rail {
+  display: grid;
+  width: 40px;
+  height: 100%;
+  grid-template-rows: auto auto 1fr;
+  justify-items: center;
+  gap: 10px;
+  border: 0;
+  border-left: 1px solid var(--console-border, #bdcbd2);
+  background: var(--console-surface-subtle, #f3f7f8);
+  padding: 10px 0;
+  color: var(--console-accent, #1f718c);
+}
+.report-rail span {
+  writing-mode: vertical-rl;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+}
+.report-tab {
+  border: 0;
+  border-bottom: 2px solid var(--console-accent, #1f718c);
+  background: transparent;
+  color: var(--console-text, #172830);
+  font-size: 11px;
+  font-weight: 800;
+}
+.report-boundary,
+.report-markdown {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
 }
 .report-markdown {
-  overflow-wrap: anywhere;
-  color: #1b3039;
-  font: 12.5px/1.6 system-ui;
-}
-.report-markdown :deep(pre) {
-  max-width: 100%;
   overflow: auto;
-  border: 1px solid #c8d5da;
-  background: #fff;
-  padding: 9px;
 }
-.report-viewer p {
+.report-empty {
+  padding: 22px 10px;
+  color: var(--console-text-muted, #607680);
+  text-align: center;
+}
+.report-error {
+  margin: 8px 0 0;
   border: 1px solid #e4b6ae;
   background: #fff1ef;
   padding: 7px;
   color: #963f32;
+  font-size: 11px;
+}
+.report-authority {
+  color: var(--console-text-muted, #607680);
+  font: 700 9px ui-monospace, monospace;
+  text-transform: uppercase;
 }
 .fullscreen {
   max-height: calc(100dvh - 230px);
-  overflow: auto;
 }
 </style>

web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskPanel.vue

@@ -1,6 +1,8 @@
 <!-- SPEC: MDTODO 三栏任务工作区. -->
-<!-- Implementation reference: MDTODO R2 / PJ2026-010405 云端控制台. -->
+<!-- Responsibility: Source Markdown 正文检查、inline edit、报告入口与 Workbench 交接。 -->
+
 <script setup lang="ts">
+import { ExternalLink, FileText, Pencil, Save, Trash2, X } from "lucide-vue-next";
 import type {
   MdtodoTaskDetailRecord,
   MdtodoTaskLinkRecord,
@@ -8,6 +10,11 @@ import type {
 } from "@/api";
 import ApiErrorDiagnostic from "@/components/common/ApiErrorDiagnostic.vue";
 import ContentViewer from "@/components/common/ContentViewer.vue";
+import EmptyState from "@/components/common/EmptyState.vue";
+import RefreshBoundary from "@/components/common/RefreshBoundary.vue";
+import StatusBadge from "@/components/common/StatusBadge.vue";
+import SectionFrame from "@/components/layout/SectionFrame.vue";
+import { statusLabel } from "@/composables/mdtodo/useMdtodoDisplay";
 import type { ApiError, ErrorDiagnostic, ProviderProfile } from "@/types";
 
 const props = defineProps<{
@@ -72,106 +79,120 @@ function updateStatus(event: Event): void {
 </script>
 
 <template>
-  <main class="document-workspace" data-testid="mdtodo-task-detail">
-    <header class="document-header">
-      <div class="title-region">
-        <code>{{ task?.taskId || task?.rxxId || "R?" }}</code>
-        <div v-if="editingTitle" class="title-editor">
-          <input
-            data-testid="mdtodo-edit-title"
-            :value="editTitle"
-            :disabled="mutationLoading || mutationDisabled"
-            @input="
-              emit(
-                'update:editTitle',
-                ($event.target as HTMLInputElement).value,
-              )
-            "
-            @keydown.enter="emit('saveTaskBasics')"
-            @keydown.esc="emit('cancelTitleEdit')"
-          />
+  <SectionFrame
+    class="document-workspace"
+    data-testid="mdtodo-task-detail"
+    :title="task ? task.taskId || task.rxxId || '任务正文' : '任务正文'"
+    :description="detail?.relativePath || '从任务树选择任务后读取 Source Markdown'"
+    :body-padding="false"
+  >
+    <template #actions>
+      <StatusBadge
+        v-if="task"
+        :status="task.status"
+        :label="statusLabel(task.status)"
+      />
+      <span v-if="detailPartial" class="authority-warning">projection fallback</span>
+      <span v-else-if="task" class="authority-ready">source markdown</span>
+    </template>
+
+    <template v-if="task">
+      <header class="document-command-strip">
+        <div class="title-region">
+          <div v-if="editingTitle" class="title-editor">
+            <input
+              data-testid="mdtodo-edit-title"
+              :value="editTitle"
+              :disabled="mutationLoading || mutationDisabled"
+              aria-label="任务标题"
+              @input="emit('update:editTitle', ($event.target as HTMLInputElement).value)"
+              @keydown.enter="emit('saveTaskBasics')"
+              @keydown.esc="emit('cancelTitleEdit')"
+            />
+            <button
+              class="icon-button"
+              type="button"
+              data-testid="mdtodo-edit-save"
+              title="保存标题"
+              aria-label="保存标题"
+              :disabled="mutationLoading || mutationDisabled"
+              @click="emit('saveTaskBasics')"
+            >
+              <Save :size="15" aria-hidden="true" />
+            </button>
+            <button
+              class="icon-button"
+              type="button"
+              title="取消标题编辑"
+              aria-label="取消标题编辑"
+              :disabled="mutationLoading"
+              @click="emit('cancelTitleEdit')"
+            >
+              <X :size="15" aria-hidden="true" />
+            </button>
+          </div>
           <button
+            v-else
+            class="title-button"
             type="button"
-            data-testid="mdtodo-edit-save"
-            :disabled="mutationLoading || mutationDisabled"
-            @click="emit('saveTaskBasics')"
+            data-testid="mdtodo-title-read"
+            :disabled="mutationDisabled"
+            title="双击或按 Enter/F2 编辑标题"
+            @dblclick="emit('beginTitleEdit')"
+            @keydown="titleKeydown"
           >
-            保存
-          </button>
-          <button
-            type="button"
-            :disabled="mutationLoading"
-            @click="emit('cancelTitleEdit')"
-          >
-            取消
+            {{ task.title || "未命名任务" }}
           </button>
         </div>
-        <button
-          v-else
-          class="title-button"
-          type="button"
-          data-testid="mdtodo-title-read"
-          :disabled="!task || mutationDisabled"
-          @dblclick="emit('beginTitleEdit')"
-          @keydown="titleKeydown"
-        >
-          {{ task?.title || "选择任务查看正文" }}
-        </button>
-      </div>
-      <div class="document-meta">
-        <select
-          data-testid="mdtodo-edit-status"
-          :value="editStatus"
-          :disabled="!task || mutationLoading || mutationDisabled"
-          aria-label="任务状态"
-          @change="updateStatus"
-        >
-          <option value="open">待处理</option>
-          <option value="in_progress">进行中</option>
-          <option value="blocked">受阻</option>
-          <option value="done">已完成</option>
-        </select>
-        <span v-if="detailPartial" class="authority-warning"
-          >offline projection</span
-        >
-        <span v-else>{{ detail?.relativePath || "source detail" }}</span>
-      </div>
-    </header>
+        <label class="status-editor">
+          <span>状态</span>
+          <select
+            data-testid="mdtodo-edit-status"
+            :value="editStatus"
+            :disabled="mutationLoading || mutationDisabled"
+            @change="updateStatus"
+          >
+            <option value="open">待办</option>
+            <option value="in_progress">进行中</option>
+            <option value="blocked">阻塞</option>
+            <option value="done">完成</option>
+          </select>
+        </label>
+      </header>
 
-    <div
-      v-if="mutationMessage || mutationError || detailError"
-      class="document-notice"
-      data-testid="mdtodo-task-notice"
-      :data-error="Boolean(mutationError || detailError)"
-    >
-      {{ mutationError || detailError || mutationMessage }}
-    </div>
-    <ApiErrorDiagnostic
-      v-if="launchError || launchApiError || launchDiagnostic"
-      title="Workbench 启动失败"
-      :error="launchError"
-      :api-error="launchApiError"
-      :diagnostic="launchDiagnostic"
-      compact
-    />
-
-    <section class="document-body">
-      <div v-if="detailLoading" class="document-loading">
-        读取 Markdown 正文…
+      <div
+        v-if="mutationMessage || mutationError || detailError"
+        class="document-notice"
+        data-testid="mdtodo-task-notice"
+        :data-error="Boolean(mutationError || detailError)"
+        role="status"
+      >
+        {{ mutationError || detailError || mutationMessage }}
       </div>
-      <template v-else-if="task">
+      <ApiErrorDiagnostic
+        v-if="launchError || launchApiError || launchDiagnostic"
+        title="Workbench 启动失败"
+        :error="launchError"
+        :api-error="launchApiError"
+        :diagnostic="launchDiagnostic"
+        compact
+      />
+
+      <RefreshBoundary
+        class="document-boundary"
+        :loading="detailLoading"
+        mode="persistent"
+        :has-content="Boolean(task)"
+        label="读取 Markdown 正文"
+      >
         <textarea
           v-if="editingBody"
+          class="document-editor"
           data-testid="mdtodo-body-editor"
           :value="editBody"
           :disabled="mutationLoading || mutationDisabled"
           aria-label="Markdown 正文编辑器"
-          @input="
-            emit(
-              'update:editBody',
-              ($event.target as HTMLTextAreaElement).value,
-            )
-          "
+          @input="emit('update:editBody', ($event.target as HTMLTextAreaElement).value)"
           @keydown.esc="emit('cancelBodyEdit')"
         />
         <div
@@ -189,165 +210,191 @@ function updateStatus(event: Event): void {
             :line-numbers="false"
           />
         </div>
-      </template>
-      <div v-else class="document-empty">从左侧任务索引选择一个 Rxx。</div>
-    </section>
+      </RefreshBoundary>
 
-    <footer class="document-footer">
-      <div class="edit-actions">
-        <template v-if="editingBody">
+      <footer class="document-footer">
+        <div class="edit-actions">
+          <template v-if="editingBody">
+            <button
+              class="btn btn-primary"
+              type="button"
+              data-testid="mdtodo-body-save"
+              :disabled="mutationLoading || mutationDisabled"
+              @click="emit('saveTaskBody')"
+            >
+              <Save :size="15" aria-hidden="true" />保存正文
+            </button>
+            <button class="btn" type="button" @click="emit('cancelBodyEdit')">
+              取消
+            </button>
+          </template>
           <button
+            v-else
+            class="btn"
             type="button"
-            data-testid="mdtodo-body-save"
-            :disabled="mutationLoading || mutationDisabled"
-            @click="emit('saveTaskBody')"
+            data-testid="mdtodo-body-edit"
+            :disabled="mutationDisabled"
+            @click="emit('beginBodyEdit')"
           >
-            保存正文
+            <Pencil :size="15" aria-hidden="true" />编辑正文
           </button>
-          <button type="button" @click="emit('cancelBodyEdit')">取消</button>
-        </template>
-        <button
-          v-else
-          type="button"
-          data-testid="mdtodo-body-edit"
-          :disabled="!task || mutationDisabled"
-          @click="emit('beginBodyEdit')"
-        >
-          编辑正文
-        </button>
-        <button
-          type="button"
-          data-testid="mdtodo-delete-task"
-          :disabled="!task || mutationLoading || mutationDisabled"
-          @click="emit('deleteTask')"
-        >
-          {{ deleteConfirm ? "确认删除" : "删除" }}
-        </button>
-        <button
-          v-if="deleteConfirm"
-          type="button"
-          @click="emit('cancelDelete')"
-        >
-          取消删除
-        </button>
-      </div>
-      <div class="report-links">
-        <div v-for="link in links" :key="link.linkId" class="report-link-item">
           <button
+            class="btn btn-danger"
+            type="button"
+            data-testid="mdtodo-delete-task"
+            :disabled="mutationLoading || mutationDisabled"
+            @click="emit('deleteTask')"
+          >
+            <Trash2 :size="15" aria-hidden="true" />
+            {{ deleteConfirm ? "确认删除" : "删除" }}
+          </button>
+          <button
+            v-if="deleteConfirm"
+            class="btn"
+            type="button"
+            @click="emit('cancelDelete')"
+          >
+            取消删除
+          </button>
+        </div>
+
+        <div class="report-links" aria-label="任务报告">
+          <button
+            v-for="link in links"
+            :key="link.linkId"
+            class="report-link"
             type="button"
             data-testid="mdtodo-report-link"
             :disabled="link.availability === 'projected-link-unavailable'"
+            :title="link.message || link.relativePath || undefined"
             @click="emit('openReport', link)"
           >
-            报告 · {{ link.label || link.relativePath }}
+            <FileText :size="14" aria-hidden="true" />
+            {{ link.label || link.relativePath || "报告" }}
           </button>
-          <small v-if="link.availability === 'projected-link-unavailable'">{{
-            link.message || "报告索引待刷新，Node 恢复后可打开"
-          }}</small>
+          <span v-if="links.length === 0" class="no-reports">暂无报告链接</span>
         </div>
-      </div>
-      <div class="launch-controls">
-        <select
-          id="mdtodo-provider-profile"
-          data-testid="mdtodo-provider-profile"
-          :value="providerProfile"
-          aria-label="模型通道"
-          @change="
-            emit(
-              'update:providerProfile',
-              ($event.target as HTMLSelectElement).value as ProviderProfile,
-            )
-          "
-        >
-          <option
-            v-for="option in providerOptions"
-            :key="option.value"
-            :value="option.value"
-            :disabled="option.configured === false"
+
+        <div class="launch-controls">
+          <select
+            id="mdtodo-provider-profile"
+            data-testid="mdtodo-provider-profile"
+            :value="providerProfile"
+            aria-label="模型通道"
+            @change="emit('update:providerProfile', ($event.target as HTMLSelectElement).value as ProviderProfile)"
           >
-            {{ option.label }}
-          </option>
-        </select>
-        <button
-          type="button"
-          data-testid="mdtodo-launch-workbench"
-          :disabled="!launchEnabled || launchLoading"
-          :title="launchBlocker || undefined"
-          @click="emit('launchWorkbench')"
-        >
-          {{ launchLoading ? "启动中…" : "Workbench" }}
-        </button>
-        <small v-if="launchBlocker" class="launch-blocker">{{
-          launchBlocker
-        }}</small>
-      </div>
-    </footer>
-  </main>
+            <option
+              v-for="option in providerOptions"
+              :key="option.value"
+              :value="option.value"
+              :disabled="option.configured === false"
+            >
+              {{ option.label }}
+            </option>
+          </select>
+          <button
+            class="btn btn-primary"
+            type="button"
+            data-testid="mdtodo-launch-workbench"
+            :disabled="!launchEnabled || launchLoading"
+            :title="launchBlocker || undefined"
+            @click="emit('launchWorkbench')"
+          >
+            <ExternalLink :size="15" aria-hidden="true" />
+            {{ launchLoading ? "启动中…" : "Workbench" }}
+          </button>
+          <small v-if="launchBlocker" class="launch-blocker">{{ launchBlocker }}</small>
+        </div>
+      </footer>
+    </template>
+
+    <EmptyState
+      v-else
+      title="选择任务"
+      description="从左侧任务树选择一个 Rxx，正文、报告和执行入口会在同一深链上下文中打开。"
+    />
+  </SectionFrame>
 </template>
 
 <style scoped>
 .document-workspace {
-  display: grid;
-  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
   min-width: 0;
   min-height: 0;
   height: 100%;
-  background: #fff;
-  color: #1b2d35;
+  border: 0;
+  border-radius: 0;
+  background: var(--console-surface, #fff);
 }
-.document-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 14px;
-  border-bottom: 1px solid #c7d3d9;
-  padding: 10px 12px;
+.document-workspace :deep(.console-section-body) {
+  display: grid;
+  min-height: 0;
+  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
+}
+.authority-warning,
+.authority-ready {
+  font: 750 10px ui-monospace, monospace;
+  text-transform: uppercase;
+}
+.authority-warning {
+  color: var(--console-danger, #9b4a34);
+}
+.authority-ready {
+  color: var(--console-success, #287047);
+}
+.document-command-strip {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid var(--console-border, #c7d3d9);
+  background: var(--console-surface-subtle, #f4f7f8);
+  padding: 8px 10px;
 }
 .title-region,
 .title-editor,
-.document-meta,
-.document-footer > div {
+.status-editor,
+.edit-actions,
+.launch-controls {
   display: flex;
   min-width: 0;
   align-items: center;
   gap: 7px;
 }
-.title-region code {
-  color: #276079;
-  font:
-    800 12px ui-monospace,
-    monospace;
-}
 .title-button {
   overflow: hidden;
   border: 0;
   background: transparent;
   padding: 0;
-  color: #152a33;
-  font-size: 16px;
-  font-weight: 760;
+  color: var(--console-text, #152a33);
+  font-size: 15px;
+  font-weight: 780;
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .title-editor input {
-  min-width: 220px;
-  border: 1px solid #8fa7b2;
-  padding: 6px 8px;
+  min-width: 260px;
+  height: 30px;
+  border: 1px solid var(--console-border-strong, #8fa7b2);
+  background: var(--console-surface, #fff);
+  padding: 0 8px;
 }
-.document-meta {
-  color: #657983;
-  font:
-    700 10px ui-monospace,
-    monospace;
+.status-editor span {
+  color: var(--console-text-muted, #607680);
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
 }
-.authority-warning {
-  color: #9b4a34;
+.status-editor select,
+.launch-controls select {
+  height: 30px;
+  border: 1px solid var(--console-border-strong, #9fb2bb);
+  background: var(--console-surface, #fff);
 }
 .document-notice {
   border-bottom: 1px solid #b7d8c2;
   background: #edf8f1;
-  padding: 6px 12px;
+  padding: 7px 12px;
   color: #276342;
   font-size: 12px;
 }
@@ -356,88 +403,91 @@ function updateStatus(event: Event): void {
   background: #fff1ef;
   color: #963e31;
 }
-.document-body {
+.document-boundary,
+.markdown-document,
+.document-editor {
+  min-width: 0;
   min-height: 0;
+  height: 100%;
+}
+.document-boundary {
   overflow: hidden;
 }
-.markdown-document,
-.document-body textarea {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
+.markdown-document {
   overflow: auto;
-  border: 0;
-  padding: 18px 22px;
-  color: #172b34;
-  font: 13px/1.65 system-ui;
-}
-.document-body textarea {
-  resize: none;
-  background: #f8fbfc;
-  font-family: ui-monospace, monospace;
-}
-.markdown-document :deep(pre) {
-  max-width: 100%;
-  overflow: auto;
-  border: 1px solid #cbd7dc;
-  background: #f4f7f8;
   padding: 10px;
 }
-.document-loading,
-.document-empty {
-  padding: 22px;
-  color: #647983;
+.markdown-document :deep(.content-viewer) {
+  min-height: 100%;
+}
+.document-editor {
+  box-sizing: border-box;
+  width: 100%;
+  resize: none;
+  border: 0;
+  background: #f8fbfc;
+  padding: 18px 22px;
+  color: var(--console-text, #172b34);
+  font: 13px/1.65 ui-monospace, monospace;
 }
 .document-footer {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: 8px;
-  border-top: 1px solid #c7d3d9;
-  background: #f2f6f7;
+  border-top: 1px solid var(--console-border, #c7d3d9);
+  background: var(--console-surface-subtle, #f2f6f7);
   padding: 7px 9px;
 }
-.document-footer button,
-.document-footer select,
-.title-editor button {
-  height: 29px;
-  border: 1px solid #9fb2bb;
-  background: #fff;
-  padding: 0 8px;
-  color: #24404c;
+.document-footer button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.report-links {
+  display: flex;
+  min-width: 0;
+  gap: 6px;
+  overflow: auto;
+}
+.report-link {
+  display: inline-flex;
+  min-height: 29px;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 5px;
+  border: 1px solid var(--console-border-strong, #9fb2bb);
+  background: var(--console-surface, #fff);
+  color: var(--console-accent, #1f718c);
   font-size: 11px;
   font-weight: 700;
 }
-.report-links {
-  overflow: auto;
-}
-.report-link-item {
-  display: grid;
-  gap: 2px;
-}
-.report-link-item small {
-  max-width: 260px;
-  color: #98503c;
+.no-reports,
+.launch-blocker {
+  color: var(--console-text-muted, #607680);
   font-size: 10px;
 }
 .launch-blocker {
-  max-width: 220px;
-  color: #98503c;
-  font-size: 10px;
+  max-width: 200px;
+  color: var(--console-danger, #98503c);
 }
-.report-links button {
-  white-space: nowrap;
-}
-@media (max-width: 720px) {
-  .document-header {
-    display: grid;
-  }
+@media (max-width: 960px) {
   .document-footer {
     grid-template-columns: 1fr;
   }
-  .markdown-document,
-  .document-body textarea {
+  .launch-controls {
+    flex-wrap: wrap;
+  }
+}
+@media (max-width: 540px) {
+  .document-command-strip {
+    grid-template-columns: 1fr;
+  }
+  .title-editor input {
+    min-width: 0;
+    width: 100%;
+  }
+  .document-editor {
     padding: 14px;
   }
 }

web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskTree.vue

@@ -1,16 +1,19 @@
 <!-- SPEC: MDTODO 三栏任务工作区. -->
-<!-- Implementation reference: MDTODO R2 / PJ2026-010405 云端控制台. -->
+<!-- Responsibility: 高密度、可键盘导航的层级任务索引。 -->
 
 <script setup lang="ts">
-import { ChevronRight } from "lucide-vue-next";
+import { ChevronRight, Search, UnfoldVertical } from "lucide-vue-next";
 import { computed, nextTick, ref } from "vue";
 import type { MdtodoTaskPage, MdtodoTaskRecord } from "@/api";
-import { statusLabel } from "@/composables/mdtodo/useMdtodoDisplay";
+import RefreshBoundary from "@/components/common/RefreshBoundary.vue";
+import StatusBadge from "@/components/common/StatusBadge.vue";
+import SectionFrame from "@/components/layout/SectionFrame.vue";
 import {
   taskParentRefs,
   treeKeyAction,
   visibleTasks,
 } from "@/composables/mdtodo/mdtodoTaskTreeModel";
+import { statusLabel } from "@/composables/mdtodo/useMdtodoDisplay";
 
 const props = defineProps<{
   tasks: MdtodoTaskRecord[];
@@ -55,6 +58,10 @@ function updateCollapse(task: MdtodoTaskRecord, collapse: boolean): void {
   emit("update:collapsedTaskRefs", next);
 }
 
+function expandAll(): void {
+  emit("update:collapsedTaskRefs", new Set());
+}
+
 function focus(index: number): void {
   void nextTick(() =>
     rows.value[Math.max(0, Math.min(index, rows.value.length - 1))]?.focus(),
@@ -86,104 +93,109 @@ function keydown(
 </script>
 
 <template>
-  <aside class="task-index" aria-label="任务索引">
+  <SectionFrame
+    class="task-index"
+    title="任务树"
+    :description="`${items.length} 可见 / ${fileScopedTaskCount} 文件任务`"
+    :body-padding="false"
+  >
+    <template #actions>
+      <button
+        class="icon-button"
+        type="button"
+        title="展开全部任务"
+        aria-label="展开全部任务"
+        :disabled="collapsedTaskRefs.size === 0"
+        @click="expandAll"
+      >
+        <UnfoldVertical :size="15" aria-hidden="true" />
+      </button>
+    </template>
+
     <div class="task-index-tools">
-      <label>
+      <label class="task-search">
+        <Search :size="15" aria-hidden="true" />
         <span class="sr-only">搜索任务</span>
         <input
           data-testid="mdtodo-task-search"
           type="search"
           :value="search"
-          placeholder="搜索 Rxx、标题"
-          @input="
-            emit('updateSearch', ($event.target as HTMLInputElement).value)
-          "
+          placeholder="搜索 Rxx 或标题"
+          @input="emit('updateSearch', ($event.target as HTMLInputElement).value)"
         />
       </label>
       <select
         data-testid="mdtodo-task-status-filter"
         aria-label="任务状态"
         :value="status"
-        @change="
-          emit('updateStatus', ($event.target as HTMLSelectElement).value)
-        "
+        @change="emit('updateStatus', ($event.target as HTMLSelectElement).value)"
       >
         <option value="all">全部状态</option>
-        <option value="open">Open</option>
-        <option value="in_progress">In progress</option>
-        <option value="done">Done</option>
-        <option value="blocked">Blocked</option>
+        <option value="open">待办</option>
+        <option value="in_progress">进行中</option>
+        <option value="blocked">阻塞</option>
+        <option value="done">完成</option>
       </select>
     </div>
-    <div class="task-index-count">
-      <span data-testid="mdtodo-task-page-fact"
-        >{{ fileScopedTaskCount }} /
-        {{ page?.total ?? fileScopedTaskCount }} 已载入</span
+
+    <RefreshBoundary
+      class="task-index-boundary"
+      :loading="loading"
+      mode="persistent"
+      :has-content="items.length > 0"
+      label="读取任务树"
+      compact
+    >
+      <ol
+        class="task-tree"
+        role="tree"
+        aria-label="MDTODO 任务树"
+        data-testid="mdtodo-task-tree"
       >
-      <span v-if="loading">同步中…</span>
-    </div>
-    <ul class="task-tree" role="tree" data-testid="mdtodo-task-tree">
-      <li
-        v-for="(task, index) in items"
-        :key="task.taskRef"
-        role="none"
-        :style="{ '--depth': depth(task) }"
-      >
-        <button
-          v-if="children(task).length"
-          class="tree-toggle"
-          type="button"
-          tabindex="-1"
-          :aria-label="
-            collapsedTaskRefs.has(task.taskRef) ? '展开子任务' : '折叠子任务'
-          "
-          @click="updateCollapse(task, !collapsedTaskRefs.has(task.taskRef))"
+        <li
+          v-for="(task, index) in items"
+          :key="task.taskRef"
+          role="none"
+          :style="{ '--task-depth': depth(task) }"
         >
-          <ChevronRight :size="12" aria-hidden="true" />
-        </button>
-        <span v-else class="tree-spacer" />
-        <button
-          :ref="
-            (element) => {
-              if (element) rows[index] = element as HTMLElement;
-            }
-          "
-          class="task-row"
-          role="treeitem"
-          type="button"
-          :tabindex="
-            task.taskRef === selectedTaskRef ||
-            (!selectedTaskRef && index === 0)
-              ? 0
-              : -1
-          "
-          :aria-level="depth(task) + 1"
-          :aria-selected="task.taskRef === selectedTaskRef"
-          :aria-expanded="
-            children(task).length
-              ? !collapsedTaskRefs.has(task.taskRef)
-              : undefined
-          "
-          :data-testid="`mdtodo-task-${task.taskId || task.rxxId}`"
-          :data-task-id="task.taskId || task.rxxId"
-          :data-task-ref="task.taskRef"
-          @click="emit('select', task.taskRef)"
-          @keydown="keydown($event, task, index)"
-        >
-          <span class="task-id">{{ task.taskId || task.rxxId }}</span>
-          <span class="task-title">{{ task.title || "未命名任务" }}</span>
-          <span
-            v-if="task.linkCount"
-            class="task-links"
-            :aria-label="`${task.linkCount} 个报告链接`"
-            >⌁{{ task.linkCount }}</span
+          <button
+            :ref="(element) => { if (element) rows[index] = element as HTMLElement; }"
+            class="task-row"
+            type="button"
+            role="treeitem"
+            :tabindex="task.taskRef === selectedTaskRef ? 0 : -1"
+            :aria-current="task.taskRef === selectedTaskRef ? 'true' : undefined"
+            :aria-selected="task.taskRef === selectedTaskRef"
+            :aria-expanded="children(task).length ? !collapsedTaskRefs.has(task.taskRef) : undefined"
+            :data-testid="`mdtodo-task-${task.taskId || task.rxxId}`"
+            :data-task-id="task.taskId || task.rxxId"
+            :data-task-ref="task.taskRef"
+            @click="emit('select', task.taskRef)"
+            @keydown="keydown($event, task, index)"
           >
-          <span class="task-state" :data-state="task.status || 'unknown'">{{
-            statusLabel(task.status)
-          }}</span>
-        </button>
-      </li>
-    </ul>
+            <span class="tree-branch" aria-hidden="true">
+              <ChevronRight
+                v-if="children(task).length"
+                :size="14"
+                :data-open="!collapsedTaskRefs.has(task.taskRef)"
+              />
+            </span>
+            <code>{{ task.taskId || task.rxxId || "R?" }}</code>
+            <span class="task-copy">
+              <strong>{{ task.title || "未命名任务" }}</strong>
+              <small>{{ task.linkCount || 0 }} 报告 · L{{ task.lineNumber || "-" }}</small>
+            </span>
+            <StatusBadge :status="task.status" :label="statusLabel(task.status)" />
+          </button>
+        </li>
+      </ol>
+      <template #empty>
+        <div class="task-empty">
+          {{ loading ? "读取任务树…" : "当前筛选没有任务。" }}
+        </div>
+      </template>
+    </RefreshBoundary>
+
     <button
       v-if="page?.hasMore"
       class="load-more"
@@ -192,136 +204,137 @@ function keydown(
       data-testid="mdtodo-load-more"
       @click="emit('loadMore')"
     >
-      加载更多任务
+      {{ loading ? "读取中…" : "加载更多任务" }}
     </button>
-  </aside>
+  </SectionFrame>
 </template>
 
 <style scoped>
 .task-index {
-  display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
   min-width: 0;
   min-height: 0;
   height: 100%;
-  border-right: 1px solid #b9c8cf;
-  background: #edf3f5;
+  border: 0;
+  border-right: 1px solid var(--console-border, #b9c8cf);
+  border-radius: 0;
+}
+.task-index :deep(.console-section-body) {
+  display: grid;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 1fr) auto;
 }
 .task-index-tools {
   display: grid;
+  grid-template-columns: minmax(0, 1fr) 112px;
   gap: 6px;
-  border-bottom: 1px solid #c6d2d8;
+  border-bottom: 1px solid var(--console-border, #c6d2d8);
   padding: 8px;
+  background: var(--console-surface-subtle, #f4f7f8);
 }
-.task-index-tools input,
-.task-index-tools select {
-  box-sizing: border-box;
-  width: 100%;
-  height: 30px;
-  border: 1px solid #aebdc5;
-  background: #fff;
+.task-search {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--console-border-strong, #a8bbc4);
+  background: var(--console-surface, #fff);
   padding: 0 8px;
-  font-size: 12px;
 }
-.task-index-count {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid #c6d2d8;
-  padding: 5px 9px;
-  color: #58707b;
-  font:
-    700 10px ui-monospace,
-    monospace;
-  text-transform: uppercase;
+.task-search input,
+.task-index-tools select {
+  min-width: 0;
+  height: 30px;
+  border: 0;
+  background: transparent;
+  color: var(--console-text, #172830);
 }
+.task-index-tools select {
+  border: 1px solid var(--console-border-strong, #a8bbc4);
+  background: var(--console-surface, #fff);
+}
+.task-index-boundary,
 .task-tree {
   min-height: 0;
+}
+.task-index-boundary {
+  overflow: hidden;
+}
+.task-tree {
+  height: 100%;
+  overflow: auto;
   margin: 0;
   padding: 4px 0;
-  overflow: auto;
   list-style: none;
 }
-.task-tree li {
+.task-row {
   display: grid;
-  grid-template-columns: 22px minmax(0, 1fr);
-  padding-left: calc(var(--depth) * 13px);
-}
-.tree-toggle,
-.tree-spacer {
-  width: 22px;
-  height: 34px;
+  width: 100%;
+  min-height: 48px;
+  grid-template-columns: 16px 46px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 6px;
   border: 0;
+  border-left: 3px solid transparent;
+  border-bottom: 1px solid var(--console-border-soft, #d8e0e4);
   background: transparent;
-  padding: 0;
+  padding: 5px 8px 5px calc(8px + var(--task-depth) * 14px);
+  color: var(--console-text, #172830);
+  text-align: left;
 }
-.tree-toggle svg {
-  width: 11px;
-  fill: none;
-  stroke: #45616e;
-  stroke-width: 1.6;
+.task-row:hover {
+  background: var(--console-surface-hover, #eef5f7);
 }
-.tree-toggle[aria-label^="折叠"] svg {
+.task-row[aria-current="true"] {
+  border-left-color: var(--console-accent, #1f718c);
+  background: var(--console-selection, #deedf2);
+}
+.tree-branch {
+  display: grid;
+  place-items: center;
+  color: var(--console-text-muted, #607680);
+}
+.tree-branch svg[data-open="true"] {
   transform: rotate(90deg);
 }
-.task-row {
+.task-row code {
+  color: var(--console-accent, #1f718c);
+  font-size: 11px;
+  font-weight: 850;
+}
+.task-copy {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto auto;
-  align-items: center;
-  gap: 7px;
   min-width: 0;
-  height: 34px;
+  gap: 2px;
 }
-.task-row {
-  border: 0;
-  border-left: 2px solid transparent;
-  background: transparent;
-  padding: 0 7px;
-  text-align: left;
-  cursor: pointer;
-}
-.task-row[aria-selected="true"] {
-  border-left-color: #25708d;
-  background: #d9eaf0;
-}
-.task-id {
-  color: #315563;
-  font:
-    750 11px ui-monospace,
-    monospace;
-}
-.task-title {
+.task-copy strong,
+.task-copy small {
   overflow: hidden;
-  color: #1b3039;
-  font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.task-links {
-  color: #3b7185;
-  font:
-    700 9px ui-monospace,
-    monospace;
+.task-copy strong {
+  font-size: 12px;
 }
-.task-state {
-  color: #687d86;
-  font:
-    700 9px ui-monospace,
-    monospace;
-  text-transform: uppercase;
+.task-copy small {
+  color: var(--console-text-muted, #607680);
+  font: 10px ui-monospace, monospace;
 }
-.task-state[data-state="blocked"] {
-  color: #a33b2e;
-}
-.task-state[data-state="done"] {
-  color: #28704b;
+.task-empty {
+  padding: 24px 14px;
+  color: var(--console-text-muted, #607680);
+  text-align: center;
 }
 .load-more {
-  height: 34px;
+  min-height: 34px;
   border: 0;
-  border-top: 1px solid #bccbd2;
-  background: #e5eef1;
-  color: #285466;
-  font-size: 11px;
+  border-top: 1px solid var(--console-border, #c6d2d8);
+  background: var(--console-surface-subtle, #f4f7f8);
+  color: var(--console-accent, #1f718c);
   font-weight: 750;
 }
+@media (max-width: 960px) {
+  .task-index-tools {
+    grid-template-columns: 1fr;
+  }
+}
 </style>

web/hwlab-cloud-web/src/components/mdtodo/MdtodoToolbar.vue

@@ -1,11 +1,18 @@
 <!-- SPEC: MDTODO 三栏任务工作区. -->
-<!-- Implementation reference: MDTODO R2 / PJ2026-010405 云端控制台. -->
-<!-- Responsibility: 维护 source/file/view 深链选择与任务命令入口。 -->
+<!-- Responsibility: Source/File 深链、视图切换与页面级命令。 -->
 
 <script setup lang="ts">
-import { Info, ListTodo, PanelsTopLeft, Plus, RefreshCw, Settings } from "lucide-vue-next";
+import {
+  Info,
+  ListTodo,
+  PanelsTopLeft,
+  Plus,
+  RefreshCw,
+  Settings,
+} from "lucide-vue-next";
 import type { MdtodoFileRecord, ProjectSource } from "@/api";
 import ViewModeSwitch from "@/components/console/ViewModeSwitch.vue";
+import PageCommandBar from "@/components/layout/PageCommandBar.vue";
 import { fileDisplayName } from "@/composables/mdtodo/useMdtodoDisplay";
 import type { MdtodoViewMode } from "@/composables/mdtodo/useMdtodoViewState";
 
@@ -20,6 +27,7 @@ defineProps<{
   createDisabledReason: string | null;
   reindexDisabled: boolean;
 }>();
+
 const emit = defineEmits<{
   selectSource: [value: string];
   selectFile: [value: string];
@@ -29,94 +37,52 @@ const emit = defineEmits<{
   reindex: [];
   info: [];
 }>();
+
 function selectView(value: string): void {
   emit("selectView", value === "queue" ? "queue" : "workspace");
 }
 </script>
 
 <template>
-  <header
+  <PageCommandBar
     class="mdtodo-command"
     data-testid="mdtodo-toolbar"
-    aria-label="MDTODO 命令栏"
+    eyebrow="Project Management / MDTODO"
+    title="任务执行台"
+    description="Source 与 File 是路由事实；任务树、正文和报告共享同一选择上下文。"
   >
-    <div class="mdtodo-path">
-      <label>
-        Source
-        <select
-          data-testid="mdtodo-source-select"
-          :value="sourceId || ''"
-          @change="
-            emit('selectSource', ($event.target as HTMLSelectElement).value)
-          "
-        >
-          <option
-            v-for="item in sources"
-            :key="item.sourceId"
-            :value="item.sourceId"
-          >
-            {{ item.displayName || item.sourceId }}
-          </option>
-        </select>
-      </label>
-      <span aria-hidden="true">/</span>
-      <label>
-        File
-        <select
-          data-testid="mdtodo-file-select"
-          :value="fileRef || ''"
-          :disabled="busy"
-          @change="
-            emit('selectFile', ($event.target as HTMLSelectElement).value)
-          "
-        >
-          <option
-            v-for="item in files"
-            :key="item.fileRef"
-            :value="item.fileRef"
-          >
-            {{ fileDisplayName(item) }}
-          </option>
-        </select>
-      </label>
-    </div>
-    <ViewModeSwitch
-      :model-value="view"
-      :options="[
-        { value: 'workspace', label: '工作区', icon: PanelsTopLeft },
-        { value: 'queue', label: '队列', icon: ListTodo },
-      ]"
-      @update:model-value="selectView"
-    />
-    <div class="mdtodo-actions">
+    <template #actions>
       <small
         v-if="createDisabledReason"
         class="mdtodo-create-blocker"
         data-testid="mdtodo-create-blocker"
         role="status"
         :title="createDisabledReason"
-        >{{ createDisabledReason }}</small
-      >
+      >{{ createDisabledReason }}</small>
       <button
+        class="btn btn-primary"
         type="button"
         data-testid="mdtodo-new-task-open"
         :disabled="createDisabled"
         :title="createDisabledReason || undefined"
         @click="emit('create')"
       >
-        <Plus :size="16" aria-hidden="true" />新建任务
+        <Plus :size="16" aria-hidden="true" />
+        新建任务
       </button>
       <button
+        class="icon-button"
         type="button"
         data-testid="mdtodo-source-reindex"
         :disabled="busy || reindexDisabled"
-        title="重建索引"
-        aria-label="重建索引"
+        title="重建 Source 索引"
+        aria-label="重建 Source 索引"
         @click="emit('reindex')"
       >
         <RefreshCw :size="16" aria-hidden="true" />
       </button>
       <button
+        class="icon-button"
         type="button"
         data-testid="mdtodo-source-config-open"
         title="配置 Source"
@@ -126,124 +92,131 @@ function selectView(value: string): void {
         <Settings :size="16" aria-hidden="true" />
       </button>
       <button
+        class="icon-button"
         type="button"
         data-testid="mdtodo-info-open"
-        title="查看信息"
-        aria-label="查看信息"
+        title="查看上下文信息"
+        aria-label="查看上下文信息"
         @click="emit('info')"
       >
         <Info :size="16" aria-hidden="true" />
       </button>
-    </div>
-  </header>
+    </template>
+
+    <template #filters>
+      <div class="mdtodo-route-facts" aria-label="MDTODO 路由事实">
+        <label>
+          <span>Source</span>
+          <select
+            data-testid="mdtodo-source-select"
+            :value="sourceId || ''"
+            @change="emit('selectSource', ($event.target as HTMLSelectElement).value)"
+          >
+            <option
+              v-for="item in sources"
+              :key="item.sourceId"
+              :value="item.sourceId"
+            >
+              {{ item.displayName || item.sourceId }}
+            </option>
+          </select>
+        </label>
+        <span class="route-separator" aria-hidden="true">/</span>
+        <label>
+          <span>File</span>
+          <select
+            data-testid="mdtodo-file-select"
+            :value="fileRef || ''"
+            :disabled="busy"
+            @change="emit('selectFile', ($event.target as HTMLSelectElement).value)"
+          >
+            <option
+              v-for="item in files"
+              :key="item.fileRef"
+              :value="item.fileRef"
+            >
+              {{ fileDisplayName(item) }}
+            </option>
+          </select>
+        </label>
+      </div>
+      <ViewModeSwitch
+        :model-value="view"
+        :options="[
+          { value: 'workspace', label: '三栏', icon: PanelsTopLeft },
+          { value: 'queue', label: '队列', icon: ListTodo },
+        ]"
+        @update:model-value="selectView"
+      />
+    </template>
+  </PageCommandBar>
 </template>
 
 <style scoped>
 .mdtodo-command {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  align-items: center;
-  gap: 10px;
-  border-bottom: 1px solid #b8c7cf;
-  background: #f7fafb;
-  padding: 8px 10px;
-  color: #20323b;
+  border-bottom: 1px solid var(--console-border, #b8c7cf);
 }
-.mdtodo-path,
-.mdtodo-actions {
+.mdtodo-route-facts {
   display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+}
+.mdtodo-route-facts label {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(120px, 1fr);
   align-items: center;
   gap: 6px;
-  min-width: 0;
-}
-.mdtodo-path label {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  min-width: 0;
+  color: var(--console-text-muted, #607680);
   font-size: 11px;
-  font-weight: 750;
+  font-weight: 800;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
-  letter-spacing: 0;
 }
-.mdtodo-path select {
+.mdtodo-route-facts select {
   min-width: 0;
-  max-width: 260px;
-  height: 30px;
-  border: 1px solid #aebfc8;
-  background: #fff;
-  padding: 0 25px 0 8px;
-  color: #172830;
+  max-width: 360px;
+  height: 32px;
+  border: 1px solid var(--console-border-strong, #a8bbc4);
+  background: var(--console-surface, #fff);
+  color: var(--console-text, #172830);
 }
-.mdtodo-command button {
-  display: inline-flex;
-  height: 30px;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  border: 1px solid #9fb2bc;
-}
-.mdtodo-command button {
-  background: #fff;
-  padding: 0 9px;
-  color: #20323b;
-  font-size: 12px;
-  font-weight: 700;
-}
-.mdtodo-command button:disabled {
-  opacity: 0.45;
+.route-separator {
+  color: var(--console-text-muted, #607680);
+  font-family: ui-monospace, monospace;
 }
 .mdtodo-create-blocker {
-  max-width: 230px;
+  max-width: 260px;
   overflow: hidden;
-  color: #98503c;
+  color: var(--console-danger, #98503c);
   font-size: 10px;
   font-weight: 700;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.mdtodo-command svg {
-  width: 15px;
-  height: 15px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.6;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.mdtodo-actions button:not(:first-of-type) {
-  width: 30px;
-  padding: 0;
-}
 @media (max-width: 960px) {
-  .mdtodo-command {
-    grid-template-columns: minmax(0, 1fr) auto;
+  .mdtodo-route-facts {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }
-  .mdtodo-actions {
-    grid-column: 2;
+  .route-separator {
+    display: none;
+  }
+  .mdtodo-route-facts label {
+    grid-template-columns: 52px minmax(0, 1fr);
   }
 }
 @media (max-width: 540px) {
-  .mdtodo-command {
+  .mdtodo-route-facts {
     grid-template-columns: 1fr;
   }
-  .mdtodo-path {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
-  .mdtodo-path > span {
-    display: none;
-  }
-  .mdtodo-path label {
-    display: grid;
-    grid-template-columns: 52px minmax(0, 1fr);
-  }
-  .mdtodo-path select {
+  .mdtodo-route-facts select {
     max-width: none;
   }
-  .mdtodo-actions {
-    grid-column: auto;
-    justify-content: flex-end;
+  .mdtodo-create-blocker {
+    display: none;
   }
 }
 </style>

web/hwlab-cloud-web/src/styles/console-r2.css

@@ -196,8 +196,7 @@ body {
 }
 
 .route-stack,
-.hwpod-console,
-.mdtodo-page {
+.hwpod-console {
   gap: 12px;
 }
 
@@ -562,8 +561,7 @@ button:focus-visible,
   font-family: var(--console-font-mono);
 }
 
-.hwpod-workspace,
-.mdtodo-workspace {
+.hwpod-workspace {
   min-height: min(72vh, 760px);
 }
 
@@ -585,14 +583,6 @@ button:focus-visible,
   color: var(--console-cyan-600);
 }
 
-.mdtodo-workspace,
-.document-workspace,
-.report-viewer,
-.task-index {
-  border-color: var(--console-border-strong);
-  background: var(--console-surface-raised);
-}
-
 @media (max-width: 1100px) {
   :root {
     --console-sidebar-width: 224px;
@@ -661,8 +651,7 @@ button:focus-visible,
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .hwpod-workspace,
-  .mdtodo-workspace {
+  .hwpod-workspace {
     min-height: 0;
   }
 }