From 7ff887ff20024ce9eef29ba13be2955dff0114bb Mon Sep 17 00:00:00 2001
From: root <root@lyon.remote>
Date: Fri, 26 Jun 2026 20:38:45 +0000
Subject: [PATCH] fix(web): make MDTODO rewrite visible as bounded workspace

Issue #2216 requires a visible SPEC rewrite, not only component decomposition. Replace the card-like MDTODO shell with a compact framed workspace, pane separators, a true outline rail, a primary document pane, and a right report pane. Keep public API and web-probe testids intact.
---
 .../layout/SplitWorkspaceLayout.vue           | 18 ++++-
 .../mdtodo/MdtodoCreateTaskDialog.vue         | 11 ++-
 .../src/components/mdtodo/MdtodoPageShell.vue | 36 ++++++---
 .../components/mdtodo/MdtodoReportPanel.vue   | 15 ++--
 .../src/components/mdtodo/MdtodoTaskPanel.vue | 78 ++++++++++---------
 .../src/components/mdtodo/MdtodoTaskTree.vue  | 43 +++++-----
 .../src/components/mdtodo/MdtodoToolbar.vue   | 25 +++---
 7 files changed, 131 insertions(+), 95 deletions(-)

diff --git a/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue b/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
index 552ce3df..167ebca3 100644
--- a/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
+++ b/web/hwlab-cloud-web/src/components/layout/SplitWorkspaceLayout.vue
@@ -142,6 +142,7 @@ function clamp(value: number, min: number, max: number): number {
   height: 100%;
   overflow: hidden;
   gap: 0;
+  background: #fff;
 }
 
 .split-workspace-pane,
@@ -151,11 +152,24 @@ function clamp(value: number, min: number, max: number): number {
   overflow: hidden;
 }
 
+.split-workspace-left {
+  border-right: 1px solid #d8e1e7;
+  background: #f8fafb;
+}
+
+.split-workspace-main {
+  background: #fff;
+}
+
+.split-workspace-right {
+  border-left: 1px solid #d8e1e7;
+  background: #f8fafb;
+}
+
 .split-workspace-resizer {
   min-width: 0;
   border-inline: 1px solid transparent;
-  border-radius: 999px;
-  background: linear-gradient(90deg, transparent 1px, #cbd8d2 2px, #cbd8d2 4px, transparent 5px);
+  background: linear-gradient(90deg, transparent 2px, #cbd6dd 3px, transparent 4px);
   cursor: col-resize;
 }
 
diff --git a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoCreateTaskDialog.vue b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoCreateTaskDialog.vue
index d88eafb0..d398b6d7 100644
--- a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoCreateTaskDialog.vue
+++ b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoCreateTaskDialog.vue
@@ -23,7 +23,7 @@ const emit = defineEmits<{
   <div v-if="show" class="modal-backdrop" data-testid="mdtodo-task-create-dialog" role="dialog" aria-modal="true" aria-label="新建 MDTODO 任务" @click.self="emit('close')">
     <section class="mdtodo-dialog task-create-dialog">
       <header><h2>新建任务</h2><button class="icon-button" type="button" aria-label="关闭新建任务" @click="emit('close')">×</button></header>
-      <div class="task-create-box">
+      <div class="task-create-form">
         <label><span>New task</span><input :value="newTitle" data-testid="mdtodo-new-title" :disabled="loading" placeholder="新任务标题" @input="emit('update:newTitle', ($event.target as HTMLInputElement).value)" /></label>
         <textarea :value="newBody" data-testid="mdtodo-new-body" :disabled="loading" rows="5" placeholder="新任务正文，可留空。" @input="emit('update:newBody', ($event.target as HTMLTextAreaElement).value)" />
         <div class="editor-actions">
@@ -44,11 +44,10 @@ const emit = defineEmits<{
 .mdtodo-dialog h2 { margin: 0; font-size: 18px; }
 .icon-button { display: inline-grid; width: 36px; height: 36px; place-items: center; border: 1px solid #cbd8d2; border-radius: 6px; background: #fff; color: #14211d; font-weight: 850; }
 .task-create-dialog { width: min(620px, calc(100vw - 32px)); }
-.task-create-box { display: grid; gap: 8px; border-top: 1px solid #e2ece8; padding-top: 10px; }
-.task-create-box label { display: grid; min-width: 0; gap: 5px; color: #52615c; font-size: 12px; font-weight: 800; }
-.task-create-box input, .task-create-box textarea { width: 100%; min-width: 0; border: 1px solid #cbd8d4; border-radius: 6px; background: #fff; color: #14211d; font: inherit; line-height: 1.4; padding: 8px 9px; }
-.task-create-box textarea { resize: vertical; }
+.task-create-form { display: grid; gap: 8px; border-top: 1px solid #e2ece8; padding-top: 10px; }
+.task-create-form label { display: grid; min-width: 0; gap: 5px; color: #52615c; font-size: 12px; font-weight: 800; }
+.task-create-form input, .task-create-form textarea { width: 100%; min-width: 0; border: 1px solid #cbd8d4; border-radius: 6px; background: #fff; color: #14211d; font: inherit; line-height: 1.4; padding: 8px 9px; }
+.task-create-form textarea { resize: vertical; }
 .editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
 .source-error { margin: 0; border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
 </style>
-
diff --git a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue
index 58667bec..d2f498b4 100644
--- a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue
+++ b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoPageShell.vue
@@ -51,7 +51,7 @@ const taskSearch = ref("");
 const taskStatusFilter = ref("all");
 const collapsedTaskRefs = ref<Set<string>>(new Set());
 const taskPaneCollapsed = ref(false);
-const taskPaneWidth = ref(30);
+const taskPaneWidth = ref(26);
 const reportPaneCollapsed = ref(false);
 const reportPaneWidth = ref(50);
 
@@ -368,12 +368,15 @@ function setError(err: unknown): void {
 
 <template>
   <section class="route-stack mdtodo-page" data-testid="project-management-mdtodo">
-    <header class="mdtodo-compact-header">
-      <div>
+    <header class="mdtodo-framebar">
+      <div class="mdtodo-title-lockup">
         <span>Project Management</span>
-        <h1>MDTODO</h1>
+        <strong>MDTODO</strong>
+      </div>
+      <div class="mdtodo-route-chip">
+        <span>{{ selectedFileName }}</span>
+        <small v-if="selectedTask">{{ selectedTask.taskId }} · {{ selectedTask.title }}</small>
       </div>
-      <p>{{ selectedFileName }}<small v-if="selectedTask"> / {{ selectedTask.taskId }}</small></p>
     </header>
 
     <LoadingState v-if="loading && !source.sources.value.length" label="加载 MDTODO source" />
@@ -409,6 +412,11 @@ function setError(err: unknown): void {
         :left-collapsed="taskPaneCollapsed"
         :right-open="reportPaneOpen"
         :right-collapsed="reportPaneCollapsed"
+        :min-left-width="22"
+        :max-left-width="30"
+        :left-collapsed-width="42"
+        :min-right-width="40"
+        :max-right-width="62"
         left-resizer-test-id="mdtodo-task-pane-resizer"
         right-resizer-test-id="mdtodo-report-pane-resizer"
         aria-label="MDTODO 工作区"
@@ -537,12 +545,15 @@ function setError(err: unknown): void {
 </template>
 
 <style scoped>
-.mdtodo-page { display: grid; height: calc(100dvh - 68px); max-height: calc(100dvh - 68px); min-width: 0; min-height: 0; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 10px; overflow: hidden; }
-.mdtodo-compact-header { display: flex; min-width: 0; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d8e2df; padding: 0 2px 6px; }
-.mdtodo-compact-header span { color: #64706b; font-size: 11px; font-weight: 800; text-transform: uppercase; }
-.mdtodo-compact-header h1 { margin: 1px 0 0; color: #14211d; font-size: 18px; line-height: 1.1; }
-.mdtodo-compact-header p { min-width: 0; margin: 0; overflow: hidden; color: #52615c; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
-.mdtodo-compact-header small { color: #0f766e; font: inherit; }
+.mdtodo-page { display: grid; height: calc(100dvh - 68px); max-height: calc(100dvh - 68px); min-width: 0; min-height: 0; grid-template-rows: 34px auto auto minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid #cad6dd; border-radius: 8px; background: #f7fafb; }
+.mdtodo-framebar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d8e1e7; background: #f9fbfc; padding: 0 10px; }
+.mdtodo-title-lockup { display: inline-flex; min-width: 0; align-items: baseline; gap: 8px; }
+.mdtodo-title-lockup span { color: #6b7a86; font-size: 10px; font-weight: 850; letter-spacing: 0; text-transform: uppercase; }
+.mdtodo-title-lockup strong { color: #111827; font-size: 16px; line-height: 1; }
+.mdtodo-route-chip { display: inline-flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; color: #52616b; font-size: 12px; font-weight: 750; }
+.mdtodo-route-chip span,
+.mdtodo-route-chip small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mdtodo-route-chip small { max-width: min(46vw, 720px); color: #0f766e; font: inherit; }
 .source-message, .source-error { margin: 0; border-radius: 6px; padding: 6px 10px; font-size: 13px; }
 .source-message { border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534; }
 .source-error { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; }
@@ -550,6 +561,7 @@ function setError(err: unknown): void {
 .mdtodo-error { display: grid; min-width: 0; min-height: 0; height: 100%; align-content: start; gap: 12px; padding: 12px; overflow: auto; }
 @media (max-width: 720px) {
   .mdtodo-page { height: calc(100dvh - 68px); max-height: calc(100dvh - 68px); overflow: hidden; }
+  .mdtodo-framebar { align-items: start; flex-direction: column; gap: 2px; height: auto; padding: 6px 10px; }
+  .mdtodo-route-chip { width: 100%; justify-content: flex-start; }
 }
 </style>
-
diff --git a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoReportPanel.vue b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoReportPanel.vue
index e64d03a2..c4c94812 100644
--- a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoReportPanel.vue
+++ b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoReportPanel.vue
@@ -26,7 +26,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <aside class="data-panel report-sidebar" data-testid="mdtodo-report-sidebar" :data-collapsed="collapsed">
+  <aside class="report-sidebar" data-testid="mdtodo-report-sidebar" :data-collapsed="collapsed">
     <header class="report-sidebar-header">
       <button class="icon-button" type="button" data-testid="mdtodo-report-sidebar-toggle" :aria-label="collapsed ? '展开报告侧栏' : '收起报告侧栏'" @click="emit('update:collapsed', !collapsed)">{{ collapsed ? '‹' : '›' }}</button>
       <strong v-if="!collapsed" class="report-title">{{ activeLink?.label || report?.relativePath || 'Report' }}</strong>
@@ -51,26 +51,25 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
-.data-panel { display: grid; min-width: 0; min-height: 0; height: 100%; grid-template-rows: auto minmax(0, 1fr); border: 1px solid #d8e2df; border-radius: 8px; background: #fff; padding: 10px; overflow: hidden; }
+.report-sidebar { display: grid; min-width: 0; min-height: 0; height: 100%; grid-template-rows: auto minmax(0, 1fr); background: #f8fafb; overflow: hidden; }
 .report-sidebar[data-collapsed="true"] { justify-items: center; padding: 8px 4px; grid-template-rows: auto; }
-.report-sidebar-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; color: #14211d; font-size: 13px; }
+.report-sidebar-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #d8e1e7; color: #111827; font-size: 13px; padding: 9px 10px; }
 .report-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .report-sidebar-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; }
-.report-preview { display: grid; min-height: 0; gap: 8px; border-top: 1px solid #e2ece8; padding-top: 8px; overflow: hidden; }
+.report-preview { display: grid; min-height: 0; gap: 8px; overflow: hidden; padding: 10px; }
 .report-preview > .markdown-body { min-height: 0; overflow: auto; }
 .report-loading { color: #64706b; font-size: 13px; padding: 12px; }
-.markdown-body { min-width: 0; color: #14211d; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
+.markdown-body { min-width: 0; color: #111827; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
 .markdown-body :deep(p), .markdown-body :deep(ul), .markdown-body :deep(ol), .markdown-body :deep(pre), .markdown-body :deep(blockquote) { margin: 0 0 8px; }
-.markdown-body :deep(pre) { max-width: 100%; overflow: auto; border: 1px solid #d8e2df; border-radius: 6px; background: #f8faf9; color: #14211d; padding: 10px; white-space: pre; }
+.markdown-body :deep(pre) { max-width: 100%; overflow: auto; border: 1px solid #d8e2df; border-radius: 6px; background: #f8faf9; color: #111827; padding: 10px; white-space: pre; }
 .markdown-body :deep(code) { border-radius: 4px; background: #eef6f2; padding: 1px 4px; color: #0f766e; }
 .markdown-body :deep(pre code) { background: transparent; color: inherit; padding: 0; white-space: inherit; }
 .markdown-body :deep(a) { color: #0f766e; font-weight: 750; }
 .source-error { margin: 0; border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
-.icon-button { display: inline-grid; width: 36px; height: 36px; place-items: center; border: 1px solid #cbd8d2; border-radius: 6px; background: #fff; color: #14211d; font-weight: 850; }
+.icon-button { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; font-weight: 850; }
 .modal-backdrop { position: fixed; z-index: 60; inset: 0; display: grid; place-items: start center; overflow: auto; background: rgba(15, 23, 42, 0.38); padding: 8dvh 16px 32px; }
 .mdtodo-dialog { display: grid; width: min(1180px, calc(100vw - 48px)); height: min(820px, calc(100dvh - 64px)); max-height: calc(100dvh - 64px); grid-template-rows: auto minmax(0, 1fr); align-content: stretch; gap: 14px; border: 1px solid #cbd8d2; border-radius: 8px; background: #fff; color: #14211d; padding: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22); overflow: hidden; }
 .mdtodo-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .mdtodo-dialog h2 { margin: 0; font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .report-fullscreen-body { min-height: 0; height: 100%; overflow: auto; border: 1px solid #e2e8f0; border-radius: 6px; padding: 14px; }
 </style>
-
diff --git a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskPanel.vue b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskPanel.vue
index fd1f9f80..35640232 100644
--- a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskPanel.vue
+++ b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskPanel.vue
@@ -47,7 +47,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <section class="data-panel mdtodo-detail-panel" data-testid="mdtodo-task-detail">
+  <section class="mdtodo-detail-panel" data-testid="mdtodo-task-detail">
     <header class="mdtodo-detail-header">
       <div class="task-title-block">
         <span class="task-id-large">{{ task?.taskId || 'R?' }}</span>
@@ -74,12 +74,20 @@ const emit = defineEmits<{
     <EmptyState v-if="!task" title="未选择任务" description="从左侧任务树选择一个任务，正文将在此处显示。" />
 
     <template v-else>
+      <div class="task-status-stack">
+        <p v-if="mutationMessage" class="source-message" data-testid="mdtodo-task-mutation-message">{{ mutationMessage }}</p>
+        <p v-if="mutationError" class="source-error" data-testid="mdtodo-task-mutation-error">{{ mutationError }}</p>
+        <p v-if="launchError" class="launch-blocker" data-testid="mdtodo-workbench-launch-error">{{ launchError }}</p>
+        <p v-else-if="!launchEnabled" class="launch-blocker" data-testid="mdtodo-workbench-launch-blocker">Workbench Launch capability unavailable</p>
+      </div>
+
       <section class="task-detail-content" data-testid="mdtodo-task-editor">
-        <LoadingState v-if="detailLoading" compact label="同步任务详情" />
-        <p v-if="detailError" class="source-error" data-testid="mdtodo-task-detail-error">{{ detailError }}</p>
+        <div class="task-detail-status">
+          <LoadingState v-if="detailLoading" compact label="同步任务详情" />
+          <p v-if="detailError" class="source-error" data-testid="mdtodo-task-detail-error">{{ detailError }}</p>
+        </div>
 
         <section class="task-body-section" data-testid="mdtodo-task-body">
-          <header><strong>正文</strong><small>双击编辑</small></header>
           <div v-if="editingBody" class="inline-body-editor">
             <textarea :value="editBody" data-testid="mdtodo-edit-body" :disabled="mutationLoading" rows="14" @input="emit('update:editBody', ($event.target as HTMLTextAreaElement).value)" />
             <div class="editor-actions">
@@ -92,76 +100,74 @@ const emit = defineEmits<{
             <p v-else class="empty-inline">暂无正文</p>
           </article>
         </section>
+      </section>
 
+      <footer class="task-document-footer">
         <section class="report-link-section" data-testid="mdtodo-report-section">
-          <header><strong>报告</strong><span v-if="links.length">{{ links.length }}</span></header>
+          <strong>报告</strong>
           <div v-if="links.length" class="report-link-list">
             <button v-for="link in links" :key="link.linkId" class="report-link-button" type="button" data-testid="mdtodo-report-link" :disabled="link.kind !== 'markdown-report'" @click="emit('openReport', link)">
               <span>{{ link.label || link.href }}</span>
               <small>{{ link.relativePath || link.kind }}</small>
             </button>
           </div>
-          <p v-else class="empty-inline">暂无报告链接</p>
+          <span v-else class="empty-inline">暂无报告链接</span>
         </section>
 
         <div class="editor-actions danger-actions">
           <button class="btn btn-secondary" type="button" data-testid="mdtodo-delete-task" :disabled="mutationLoading" @click="emit('deleteTask')">{{ deleteConfirm ? '确认删除' : '删除任务' }}</button>
           <button v-if="deleteConfirm" class="btn btn-secondary" type="button" data-testid="mdtodo-delete-cancel" :disabled="mutationLoading" @click="emit('cancelDelete')">取消</button>
         </div>
-
-        <p v-if="mutationMessage" class="source-message" data-testid="mdtodo-task-mutation-message">{{ mutationMessage }}</p>
-        <p v-if="mutationError" class="source-error" data-testid="mdtodo-task-mutation-error">{{ mutationError }}</p>
-        <p class="launch-blocker" data-testid="mdtodo-workbench-launch-blocker">{{ launchEnabled ? 'Workbench Launch API ready' : 'Workbench Launch capability unavailable' }}</p>
-        <p v-if="launchError" class="launch-blocker" data-testid="mdtodo-workbench-launch-error">{{ launchError }}</p>
-      </section>
+      </footer>
     </template>
   </section>
 </template>
 
 <style scoped>
-.data-panel { display: grid; min-width: 0; min-height: 0; height: 100%; align-content: stretch; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 12px; overflow: hidden; }
-.mdtodo-detail-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e2ece8; padding-bottom: 8px; }
+.mdtodo-detail-panel { display: grid; min-width: 0; min-height: 0; height: 100%; align-content: stretch; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0; overflow: hidden; background: #fff; }
+.mdtodo-detail-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #e2e8ed; padding: 10px 12px; }
 .task-title-block { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
-.task-id-large { display: inline-flex; min-width: 46px; justify-content: center; border: 1px solid #99f6e4; border-radius: 6px; background: #ecfdf5; color: #0f766e; padding: 5px 8px; font-size: 12px; font-weight: 850; }
-.task-title-read { min-width: 0; overflow: hidden; border: 0; border-radius: 6px; background: transparent; color: #14211d; padding: 5px 6px; font: inherit; font-size: 17px; font-weight: 850; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
-.task-title-read:hover { background: #f4fbf8; }
+.task-id-large { display: inline-flex; min-width: 46px; justify-content: center; border: 1px solid #9be3dc; border-radius: 6px; background: #e8faf6; color: #0f766e; padding: 5px 8px; font-size: 12px; font-weight: 850; }
+.task-title-read { min-width: 0; overflow: hidden; border: 0; border-radius: 5px; background: transparent; color: #111827; padding: 5px 6px; font: inherit; font-size: 18px; font-weight: 850; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
+.task-title-read:hover { background: #f3f8f8; }
 .inline-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
-.inline-editor input { width: 100%; min-width: 0; border: 1px solid #cbd8d4; border-radius: 6px; color: #14211d; font: inherit; padding: 8px 9px; }
+.inline-editor input { width: 100%; min-width: 0; border: 1px solid #cbd6dd; border-radius: 6px; color: #111827; font: inherit; padding: 8px 9px; }
 .detail-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
-.detail-toolbar select { min-width: 112px; height: 34px; border: 1px solid #cbd8d2; border-radius: 6px; background: #fff; color: #14211d; padding: 0 8px; font: inherit; }
-.task-detail-content { display: grid; min-width: 0; min-height: 0; align-content: start; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto auto; gap: 10px; overflow: auto; }
-.task-body-section { display: grid; min-width: 0; min-height: 0; gap: 8px; flex: 1 1 auto; }
-.task-body-section header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; color: #14211d; font-size: 13px; }
-.task-body-section header small { color: #64706b; font-size: 12px; }
-.task-body-rendered { min-height: 120px; overflow: auto; border: 1px solid #d8e2df; border-radius: 6px; background: #fff; padding: 14px; flex: 1 1 auto; }
-.markdown-body { min-width: 0; color: #14211d; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
+.detail-toolbar select { min-width: 108px; height: 32px; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; padding: 0 8px; font: inherit; font-size: 13px; }
+.task-status-stack { display: grid; min-width: 0; gap: 6px; }
+.task-detail-content { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 0; overflow: hidden; }
+.task-detail-status { display: grid; min-width: 0; gap: 6px; }
+.task-body-section { display: grid; min-width: 0; min-height: 0; }
+.task-body-rendered { min-height: 0; height: 100%; overflow: auto; border: 0; background: #fff; padding: 16px 18px 20px; }
+.markdown-body { min-width: 0; color: #111827; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
 .markdown-body :deep(p), .markdown-body :deep(ul), .markdown-body :deep(ol), .markdown-body :deep(pre), .markdown-body :deep(blockquote) { margin: 0 0 10px; }
-.markdown-body :deep(pre) { max-width: 100%; overflow: auto; border: 1px solid #d8e2df; border-radius: 6px; background: #f8faf9; color: #14211d; padding: 10px; white-space: pre; }
+.markdown-body :deep(pre) { max-width: 100%; overflow: auto; border: 1px solid #d8e2df; border-radius: 6px; background: #f8faf9; color: #111827; padding: 10px; white-space: pre; }
 .markdown-body :deep(code) { border-radius: 4px; background: #eef6f2; padding: 1px 4px; color: #0f766e; }
 .markdown-body :deep(pre code) { background: transparent; color: inherit; padding: 0; white-space: inherit; }
 .markdown-body :deep(a) { color: #0f766e; font-weight: 750; }
 .empty-inline { margin: 0; color: #64706b; }
-.inline-body-editor { display: grid; gap: 8px; }
-.inline-body-editor textarea { width: 100%; min-width: 0; min-height: 240px; border: 1px solid #cbd8d4; border-radius: 6px; background: #fff; color: #14211d; font: inherit; line-height: 1.5; padding: 10px; resize: vertical; }
-.report-link-section { display: grid; min-height: 0; gap: 8px; border: 1px solid #d8e2df; border-radius: 8px; background: #fff; padding: 10px; }
-.report-link-section header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; color: #14211d; font-size: 13px; }
-.report-link-section header span { color: #64706b; font-size: 12px; }
-.report-link-list { display: grid; gap: 6px; }
-.report-link-button { display: grid; width: 100%; min-width: 0; gap: 3px; border: 1px solid #d8e2df; border-radius: 6px; background: #fff; color: #14211d; padding: 8px 10px; text-align: left; }
+.inline-body-editor { display: grid; min-height: 0; height: 100%; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding: 12px; }
+.inline-body-editor textarea { width: 100%; min-width: 0; min-height: 0; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; font: inherit; line-height: 1.5; padding: 10px; resize: none; }
+.task-document-footer { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; border-top: 1px solid #e2e8ed; background: #fbfcfd; padding: 9px 12px; }
+.report-link-section { display: grid; min-width: 0; min-height: 0; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
+.report-link-section > strong { color: #5d6a73; font-size: 11px; font-weight: 850; text-transform: uppercase; }
+.report-link-list { display: flex; min-width: 0; gap: 6px; overflow-x: auto; padding-bottom: 1px; }
+.report-link-button { display: grid; flex: 0 0 min(280px, 40vw); min-width: 0; gap: 2px; border: 1px solid #d8e2df; border-radius: 6px; background: #fff; color: #111827; padding: 6px 8px; text-align: left; }
 .report-link-button:disabled { opacity: 0.55; }
 .report-link-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
 .report-link-button small { color: #64706b; overflow-wrap: anywhere; }
 .editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
-.danger-actions { border-top: 1px solid #e2ece8; padding-top: 10px; }
+.danger-actions { justify-content: flex-end; }
 .danger-actions .btn { border-color: #fecaca; color: #991b1b; }
 .source-message { margin: 0; border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
 .source-error { margin: 0; border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
-.launch-blocker { margin: 0; color: #64706b; font-size: 12px; }
+.launch-blocker { margin: 0; border-bottom: 1px solid #e2e8ed; background: #fff7ed; color: #9a3412; padding: 7px 12px; font-size: 12px; }
 @media (max-width: 640px) {
   .mdtodo-detail-header { flex-direction: column; align-items: stretch; }
   .detail-toolbar { justify-content: flex-start; }
   .task-title-block { grid-template-columns: 1fr; }
   .inline-editor { grid-template-columns: 1fr; }
+  .task-document-footer { grid-template-columns: 1fr; }
+  .report-link-section { grid-template-columns: 1fr; }
 }
 </style>
-
diff --git a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskTree.vue b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskTree.vue
index 578339ef..5b795852 100644
--- a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskTree.vue
+++ b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoTaskTree.vue
@@ -42,14 +42,19 @@ function toggleTask(task: MdtodoTaskRecord): void {
 </script>
 
 <template>
-  <section class="data-panel mdtodo-task-panel" data-testid="mdtodo-task-tree" :data-collapsed="collapsed">
+  <section class="mdtodo-task-panel" data-testid="mdtodo-task-tree" :data-collapsed="collapsed">
     <header class="mdtodo-panel-header">
-      <div><h2>{{ collapsed ? '纲' : '任务树' }}</h2><p v-if="!collapsed">{{ tree.visibleTaskRows.value.length }} / {{ taskPage?.total ?? fileScopedTaskCount }} tasks<span v-if="taskPage?.hasMore"> · window {{ taskPage.limit }}</span></p></div>
+      <div class="task-tree-title">
+        <h2>{{ collapsed ? '纲' : '任务树' }}</h2>
+        <p v-if="!collapsed">{{ tree.visibleTaskRows.value.length }} / {{ taskPage?.total ?? fileScopedTaskCount }} tasks<span v-if="taskPage?.hasMore"> · window {{ taskPage.limit }}</span></p>
+      </div>
       <div class="task-pane-actions">
         <button class="icon-button" type="button" data-testid="mdtodo-new-task-open" aria-label="新建任务" @click="emit('openCreateTask')">+</button>
         <button class="icon-button" type="button" data-testid="mdtodo-task-pane-toggle" :aria-label="collapsed ? '展开任务树' : '收起任务树'" @click="emit('update:collapsed', !collapsed)">{{ collapsed ? '›' : '‹' }}</button>
       </div>
-      <div v-if="!collapsed" class="task-tools">
+    </header>
+    <template v-if="!collapsed">
+      <div class="task-tools">
         <input :value="search" data-testid="mdtodo-task-search" type="search" placeholder="R1 / title" aria-label="搜索任务" @input="emit('update:search', ($event.target as HTMLInputElement).value)" />
         <select :value="statusFilter" data-testid="mdtodo-task-status-filter" aria-label="筛选状态" @change="emit('update:statusFilter', ($event.target as HTMLSelectElement).value)">
           <option value="all">全部</option>
@@ -59,8 +64,6 @@ function toggleTask(task: MdtodoTaskRecord): void {
           <option value="blocked">阻塞</option>
         </select>
       </div>
-    </header>
-    <template v-if="!collapsed">
       <LoadingState v-if="loading" compact label="同步文件和任务" />
       <EmptyState v-else-if="!tree.visibleTaskRows.value.length" title="暂无任务" description="当前文件没有任务投影。" />
       <div v-else class="task-tree" role="tree" aria-label="MDTODO task tree">
@@ -78,27 +81,29 @@ function toggleTask(task: MdtodoTaskRecord): void {
 </template>
 
 <style scoped>
-.data-panel { display: grid; min-width: 0; min-height: 0; height: 100%; align-content: start; gap: 12px; padding: 12px; overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr); }
-.mdtodo-task-panel[data-collapsed="true"] { justify-items: center; padding: 8px 4px; overflow: hidden; grid-template-rows: auto auto; }
-.mdtodo-panel-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
-.mdtodo-panel-header h2 { margin: 0; color: #14211d; font-size: 16px; line-height: 1.2; }
-.mdtodo-panel-header p { margin: 3px 0 0; color: #64706b; font-size: 12px; }
+.mdtodo-task-panel { display: grid; min-width: 0; min-height: 0; height: 100%; align-content: stretch; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; overflow: hidden; padding: 10px 8px 10px 10px; }
+.mdtodo-task-panel[data-collapsed="true"] { justify-items: center; padding: 8px 4px; overflow: hidden; grid-template-rows: auto; }
+.mdtodo-panel-header { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
+.task-tree-title { min-width: 0; }
+.mdtodo-panel-header h2 { min-width: 0; margin: 0; overflow: hidden; color: #111827; font-size: 14px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
+.mdtodo-panel-header p { margin: 2px 0 0; color: #64706b; font-size: 11px; }
 .task-pane-actions { display: flex; gap: 6px; margin-left: auto; }
-.task-tools { display: grid; width: min(360px, 100%); grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.7fr); gap: 8px; }
-.task-tools input, .task-tools select { width: 100%; min-width: 0; height: 36px; border: 1px solid #cbd8d2; border-radius: 6px; background: #fff; color: #14211d; padding: 0 10px; font: inherit; }
-.task-tree { display: grid; min-height: 0; gap: 5px; overflow: auto; }
+.task-tools { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(96px, 0.55fr); gap: 6px; }
+.task-tools input, .task-tools select { width: 100%; min-width: 0; height: 30px; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; padding: 0 8px; font: inherit; font-size: 12px; }
+.task-tree { display: grid; min-height: 0; align-content: start; gap: 1px; overflow: auto; border-top: 1px solid #e3e9ee; padding-top: 2px; }
 .task-row-shell { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px; align-items: center; }
-.task-toggle { width: 24px; height: 24px; border: 1px solid #d8e2df; border-radius: 4px; background: #fff; color: #31423c; font-weight: 850; line-height: 1; }
+.task-toggle { width: 24px; height: 24px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #52616b; font-weight: 850; line-height: 1; }
+.task-toggle:hover:not(:disabled) { border-color: #cbd6dd; background: #fff; }
 .task-toggle:disabled { border-color: transparent; background: transparent; }
-.task-row { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(52px, 0.22fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid #d8e2df; border-radius: 6px; background: #fff; color: #14211d; padding: 8px 10px; text-align: left; }
-.task-row[data-selected="true"] { border-color: #0f766e; background: #ecfdf5; box-shadow: inset 3px 0 0 #0f766e; }
+.task-row { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(44px, 0.2fr) minmax(0, 1fr) auto; gap: 7px; align-items: center; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #111827; padding: 7px 8px; text-align: left; }
+.task-row:hover { border-color: #d9e2e8; background: #fff; }
+.task-row[data-selected="true"] { border-color: #5bb7af; background: #e8faf6; box-shadow: inset 3px 0 0 #0f766e; }
 .task-id { color: #0f766e; font-size: 12px; font-weight: 850; }
 .task-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.task-status { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; border-radius: 999px; border: 1px solid #bae6fd; background: #f0f9ff; color: #075985; padding: 4px 8px; font-size: 11px; font-weight: 750; line-height: 1; }
+.task-status { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; border-radius: 999px; border: 1px solid #bae6fd; background: #f0f9ff; color: #075985; padding: 3px 7px; font-size: 10px; font-weight: 750; line-height: 1; }
 .task-status[data-status="done"] { border-color: #86efac; background: #dcfce7; color: #166534; }
 .task-status[data-status="in_progress"] { border-color: #fde68a; background: #fffbeb; color: #92400e; }
 .task-status[data-status="blocked"] { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
-.icon-button { display: inline-grid; width: 36px; height: 36px; place-items: center; border: 1px solid #cbd8d2; border-radius: 6px; background: #fff; color: #14211d; font-weight: 850; }
+.icon-button { display: inline-grid; width: 30px; height: 30px; place-items: center; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; font-weight: 850; }
 .icon-button:disabled { opacity: 0.5; }
 </style>
-
diff --git a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoToolbar.vue b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoToolbar.vue
index 83a5cebc..bb1d57b1 100644
--- a/web/hwlab-cloud-web/src/components/mdtodo/MdtodoToolbar.vue
+++ b/web/hwlab-cloud-web/src/components/mdtodo/MdtodoToolbar.vue
@@ -47,12 +47,12 @@ function onFileSelect(event: Event): void {
         <option v-for="file in files" :key="file.fileRef" :value="file.fileRef">{{ fileDisplayName(file) }}</option>
       </select>
     </label>
-    <div class="toolbar-context">
+    <div class="toolbar-context" data-testid="mdtodo-toolbar-context">
       <span class="toolbar-file-name" :title="selectedFileName">{{ selectedFileName }}</span>
       <small v-if="selectedTaskLabel" class="toolbar-task-label">{{ selectedTaskLabel }}</small>
     </div>
     <div class="toolbar-actions">
-      <button class="btn btn-secondary" type="button" data-testid="mdtodo-new-task-open" @click="emit('openCreateTask')">+ 任务</button>
+      <button class="btn btn-secondary toolbar-create" type="button" data-testid="mdtodo-new-task-open" @click="emit('openCreateTask')">+ 任务</button>
       <button class="icon-button" type="button" data-testid="mdtodo-source-config-open" aria-label="配置 Source" @click="emit('openSourceConfig')">⚙</button>
       <button class="icon-button" type="button" data-testid="mdtodo-source-reindex" aria-label="重建索引" :disabled="!selectedSourceId || reindexLoading" @click="emit('reindex')">↻</button>
       <button class="icon-button" type="button" data-testid="mdtodo-info-open" aria-label="查看摘要" @click="emit('openInfo')">ⓘ</button>
@@ -61,15 +61,16 @@ function onFileSelect(event: Event): void {
 </template>
 
 <style scoped>
-.mdtodo-toolbar { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; border: 1px solid #d8e2df; border-radius: 8px; background: #fbfdfb; padding: 8px; }
-.toolbar-field { display: grid; min-width: 0; gap: 5px; }
-.toolbar-field span { color: #52615c; font-size: 11px; font-weight: 800; text-transform: uppercase; }
-.toolbar-field select { width: 100%; min-width: 0; height: 36px; border: 1px solid #cbd8d2; border-radius: 6px; background: #fff; color: #14211d; padding: 0 10px; font: inherit; }
-.toolbar-context { display: grid; min-width: 0; gap: 2px; align-content: center; padding: 0 4px; }
-.toolbar-file-name { min-width: 0; overflow: hidden; color: #14211d; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
-.toolbar-task-label { color: #0f766e; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.toolbar-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
-.icon-button { display: inline-grid; width: 36px; height: 36px; place-items: center; border: 1px solid #cbd8d2; border-radius: 6px; background: #fff; color: #14211d; font-weight: 850; }
+.mdtodo-toolbar { display: grid; grid-template-columns: minmax(160px, 240px) minmax(220px, 360px) minmax(0, 1fr) auto; gap: 8px; align-items: center; border-bottom: 1px solid #d8e1e7; background: #ffffff; padding: 7px 10px; }
+.toolbar-field { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: center; }
+.toolbar-field span { color: #5d6a73; font-size: 10px; font-weight: 850; letter-spacing: 0; text-transform: uppercase; }
+.toolbar-field select { width: 100%; min-width: 0; height: 32px; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; padding: 0 9px; font: inherit; font-size: 13px; }
+.toolbar-context { display: grid; min-width: 0; gap: 1px; align-content: center; border-left: 1px solid #e2e8ed; padding-left: 10px; }
+.toolbar-file-name { min-width: 0; overflow: hidden; color: #111827; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
+.toolbar-task-label { color: #0f766e; font-size: 11px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.toolbar-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
+.toolbar-create { min-height: 32px; border-color: #a7c2c0; color: #0f4f4a; }
+.icon-button { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 1px solid #cbd6dd; border-radius: 6px; background: #fff; color: #111827; font-weight: 850; }
 .icon-button:disabled { opacity: 0.5; }
 @media (max-width: 980px) {
   .mdtodo-toolbar { grid-template-columns: 1fr 1fr auto; }
@@ -77,6 +78,6 @@ function onFileSelect(event: Event): void {
 }
 @media (max-width: 640px) {
   .mdtodo-toolbar { grid-template-columns: 1fr; }
+  .toolbar-field { grid-template-columns: 1fr; gap: 4px; }
 }
 </style>
-