From b4e128c22784518630ea3a404d2d8822a989de63 Mon Sep 17 00:00:00 2001
From: zwt13703 <zwt13703@gmail.com>
Date: Wed, 1 Jul 2026 20:34:24 +0800
Subject: [PATCH] feat: add template edit shell layout

---
 .../AI文档模板系统-像素级任务清单-20260701.md |  12 +-
 docs/tasks/task_detail_2026_07_01.md          |  13 ++
 .../components/TemplateEdit/ConfigPanel.vue   |  89 ++++++++++++++
 .../src/components/TemplateEdit/LeftMenu.vue  | 116 ++++++++++++++++++
 .../components/TemplateEdit/StructureTree.vue | 108 ++++++++++++++++
 .../components/TemplateEdit/TopToolbar.vue    | 104 ++++++++++++++++
 .../components/TemplateEdit/WordPreview.vue   |  93 ++++++++++++++
 frontend/src/router/index.ts                  |   6 +
 frontend/src/views/TemplateEdit.vue           |  44 +++++++
 9 files changed, 579 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/TemplateEdit/ConfigPanel.vue
 create mode 100644 frontend/src/components/TemplateEdit/LeftMenu.vue
 create mode 100644 frontend/src/components/TemplateEdit/StructureTree.vue
 create mode 100644 frontend/src/components/TemplateEdit/TopToolbar.vue
 create mode 100644 frontend/src/components/TemplateEdit/WordPreview.vue
 create mode 100644 frontend/src/views/TemplateEdit.vue

diff --git a/docs/AI文档模板系统-像素级任务清单-20260701.md b/docs/AI文档模板系统-像素级任务清单-20260701.md
index a52fa9d..419df4a 100644
--- a/docs/AI文档模板系统-像素级任务清单-20260701.md
+++ b/docs/AI文档模板系统-像素级任务清单-20260701.md
@@ -50,12 +50,12 @@
 | 032 | 实现 `GET /api/data-sources` 返回预设列表 | 后端 | 0.25d | ✅ 已完成 |
 | 033 | 实现 `POST /api/data-sources` 新增数据源 | 后端 | 0.25d | ✅ 已完成 |
 | | **四栏布局** | | | |
-| 034 | 实现四栏 CSS Grid 布局 | 前端 | 0.5d | ⏳ 未完成 |
-| 035 | 实现左侧菜单 shell 组件 | 前端 | 0.25d | ⏳ 未完成 |
-| 036 | 实现顶部工具栏 shell 组件 | 前端 | 0.25d | ⏳ 未完成 |
-| 037 | 实现配置面板 shell 组件 | 前端 | 0.25d | ⏳ 未完成 |
-| 038 | 实现预览区 shell 组件（A4 纸效果） | 前端 | 0.25d | ⏳ 未完成 |
-| 039 | 实现结构树 shell 组件 | 前端 | 0.25d | ⏳ 未完成 |
+| 034 | 实现四栏 CSS Grid 布局 | 前端 | 0.5d | ✅ 已完成 |
+| 035 | 实现左侧菜单 shell 组件 | 前端 | 0.25d | ✅ 已完成 |
+| 036 | 实现顶部工具栏 shell 组件 | 前端 | 0.25d | ✅ 已完成 |
+| 037 | 实现配置面板 shell 组件 | 前端 | 0.25d | ✅ 已完成 |
+| 038 | 实现预览区 shell 组件（A4 纸效果） | 前端 | 0.25d | ✅ 已完成 |
+| 039 | 实现结构树 shell 组件 | 前端 | 0.25d | ✅ 已完成 |
 | | **左侧菜单** | | | |
 | 040 | 菜单数据模型（JSON）+ 子菜单配置 | 前端 | 0.25d | ⏳ 未完成 |
 | 041 | 菜单展开/收起交互 + 箭头旋转动画 | 前端 | 0.25d | ⏳ 未完成 |
diff --git a/docs/tasks/task_detail_2026_07_01.md b/docs/tasks/task_detail_2026_07_01.md
index d1fe526..57e4ad8 100644
--- a/docs/tasks/task_detail_2026_07_01.md
+++ b/docs/tasks/task_detail_2026_07_01.md
@@ -59,3 +59,16 @@
     5. 新增 `POST /api/data-sources` 支持新增内存数据源并校验 code 唯一。
     6. 执行语法检查和 FastAPI 路由注册检查。
 - **执行结果**: 完成任务 030-033，模板详情、区域配置保存和数据源接口已可调用。
+
+## 会话 ID: 20260701-template-edit-shell
+- [2026-07-01 20:34:14]
+- **执行原因**: 按任务清单继续完成前端四栏布局和基础 shell 组件 034-039。
+- **执行过程**:
+    1. 新增 `TemplateEdit.vue`，使用 CSS Grid 搭建左侧菜单、顶部工具栏、配置面板、预览区、结构树布局。
+    2. 新增 `LeftMenu.vue`，实现左侧菜单 shell。
+    3. 新增 `TopToolbar.vue`，实现面包屑、模板元信息和操作按钮区域 shell。
+    4. 新增 `ConfigPanel.vue`，实现区域配置面板 shell。
+    5. 新增 `WordPreview.vue`，实现 A4 纸张预览 shell。
+    6. 新增 `StructureTree.vue`，实现结构树 shell。
+    7. 增加 `/templates/:id/edit` 路由，并执行前端构建和浏览器 DOM 检查。
+- **执行结果**: 完成任务 034-039，编辑页基础四栏工作台已可访问。
diff --git a/frontend/src/components/TemplateEdit/ConfigPanel.vue b/frontend/src/components/TemplateEdit/ConfigPanel.vue
new file mode 100644
index 0000000..4b941b8
--- /dev/null
+++ b/frontend/src/components/TemplateEdit/ConfigPanel.vue
@@ -0,0 +1,89 @@
+<template>
+  <aside class="config-panel">
+    <div class="panel-tabs">
+      <button class="tab active" type="button">区域配置</button>
+      <button class="tab" type="button">批量规则</button>
+    </div>
+    <div class="panel-body">
+      <section class="section">
+        <h2>基础信息</h2>
+        <label>
+          区域名称
+          <a-input placeholder="请选择预览区块" />
+        </label>
+        <label>
+          区域类型
+          <a-select value="ai_generate">
+            <a-select-option value="ai_generate">AI 生成</a-select-option>
+            <a-select-option value="manual">人工填写</a-select-option>
+            <a-select-option value="fixed">固定内容</a-select-option>
+            <a-select-option value="table">表格区域</a-select-option>
+          </a-select>
+        </label>
+      </section>
+      <section class="section">
+        <h2>提示词</h2>
+        <a-textarea :rows="6" placeholder="选择区域后配置提示词" />
+      </section>
+      <a-button block type="primary">保存配置</a-button>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.config-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  border-right: 1px solid var(--c-border);
+  background: var(--c-surface);
+}
+
+.panel-tabs {
+  display: flex;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--c-border);
+}
+
+.tab {
+  padding: 12px 16px 10px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  color: var(--c-text-secondary);
+  background: transparent;
+  cursor: pointer;
+}
+
+.tab.active {
+  border-bottom-color: var(--c-primary);
+  color: var(--c-primary);
+  font-weight: 500;
+}
+
+.panel-body {
+  min-height: 0;
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+}
+
+.section {
+  margin-bottom: 18px;
+}
+
+.section h2 {
+  margin: 0 0 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--c-border-light);
+  font-size: 14px;
+}
+
+label {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 12px;
+  color: var(--c-text-secondary);
+  font-size: 12px;
+}
+</style>
diff --git a/frontend/src/components/TemplateEdit/LeftMenu.vue b/frontend/src/components/TemplateEdit/LeftMenu.vue
new file mode 100644
index 0000000..3088570
--- /dev/null
+++ b/frontend/src/components/TemplateEdit/LeftMenu.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import {
+  AppstoreOutlined,
+  DatabaseOutlined,
+  FileTextOutlined,
+  SettingOutlined,
+} from "@ant-design/icons-vue";
+</script>
+
+<template>
+  <aside class="left-menu">
+    <div class="brand">
+      <div class="brand-mark">AI</div>
+      <span>AI 文档模板系统</span>
+    </div>
+
+    <nav class="menu-list">
+      <div class="menu-group-title">模板管理</div>
+      <button class="menu-item active" type="button">
+        <FileTextOutlined />
+        模板标注
+      </button>
+      <button class="menu-item" type="button">
+        <AppstoreOutlined />
+        模板中心
+      </button>
+
+      <div class="menu-group-title">资料与配置</div>
+      <button class="menu-item" type="button">
+        <DatabaseOutlined />
+        数据源
+      </button>
+      <button class="menu-item" type="button">
+        <SettingOutlined />
+        系统配置
+      </button>
+    </nav>
+  </aside>
+</template>
+
+<style scoped>
+.left-menu {
+  min-width: 0;
+  border-right: 1px solid var(--c-border);
+  background: var(--c-surface);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 52px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--c-border);
+  font-weight: 600;
+}
+
+.brand-mark {
+  display: grid;
+  width: 26px;
+  height: 26px;
+  place-items: center;
+  border-radius: 5px;
+  color: #fff;
+  background: var(--c-primary);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.menu-list {
+  padding: 8px 0;
+}
+
+.menu-group-title {
+  padding: 8px 16px 4px;
+  color: var(--c-text-muted);
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+  padding: 8px 16px;
+  border: 0;
+  color: var(--c-text-secondary);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+
+.menu-item:hover {
+  color: var(--c-text);
+  background: var(--c-surface-soft);
+}
+
+.menu-item.active {
+  color: var(--c-primary);
+  background: var(--c-primary-soft);
+  font-weight: 500;
+}
+
+.menu-item.active::before {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 0;
+  width: 3px;
+  border-radius: 0 2px 2px 0;
+  background: var(--c-primary);
+  content: "";
+}
+</style>
diff --git a/frontend/src/components/TemplateEdit/StructureTree.vue b/frontend/src/components/TemplateEdit/StructureTree.vue
new file mode 100644
index 0000000..d1a8148
--- /dev/null
+++ b/frontend/src/components/TemplateEdit/StructureTree.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+const nodes = [
+  { id: "block_001", name: "企业经营分析报告", status: "done" },
+  { id: "block_003", name: "一、经营概况", status: "pending" },
+  { id: "block_005", name: "经营指标表", status: "empty" },
+];
+</script>
+
+<template>
+  <aside class="structure-tree">
+    <header>
+      <span>文档结构</span>
+      <span class="count">{{ nodes.length }}</span>
+    </header>
+    <ul>
+      <li v-for="node in nodes" :key="node.id">
+        <button type="button">
+          <span class="dot" :class="node.status"></span>
+          <span class="node-name">{{ node.name }}</span>
+          <span class="node-id">{{ node.id }}</span>
+        </button>
+      </li>
+    </ul>
+  </aside>
+</template>
+
+<style scoped>
+.structure-tree {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  border-left: 1px solid var(--c-border);
+  background: var(--c-surface);
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 43px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--c-border);
+  font-weight: 500;
+}
+
+.count {
+  padding: 0 7px;
+  border-radius: 9px;
+  color: var(--c-text-muted);
+  background: var(--c-surface-soft);
+  font-size: 11px;
+  line-height: 18px;
+}
+
+ul {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 8px 0;
+  overflow: auto;
+  list-style: none;
+}
+
+button {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 8px minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+  padding: 7px 12px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+
+button:hover {
+  background: var(--c-surface-soft);
+}
+
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--c-text-muted);
+}
+
+.dot.done {
+  background: var(--c-success);
+}
+
+.dot.pending {
+  background: var(--c-warn);
+}
+
+.node-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.node-id {
+  grid-column: 2;
+  color: var(--c-text-muted);
+  font-size: 11px;
+}
+</style>
diff --git a/frontend/src/components/TemplateEdit/TopToolbar.vue b/frontend/src/components/TemplateEdit/TopToolbar.vue
new file mode 100644
index 0000000..9b79fe9
--- /dev/null
+++ b/frontend/src/components/TemplateEdit/TopToolbar.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import {
+  DownloadOutlined,
+  EyeOutlined,
+  FullscreenOutlined,
+  PlayCircleOutlined,
+  SaveOutlined,
+} from "@ant-design/icons-vue";
+</script>
+
+<template>
+  <header class="top-toolbar">
+    <div class="toolbar-left">
+      <div class="breadcrumb">模板管理 / 模板标注</div>
+      <div class="template-meta">
+        <strong>企业经营分析报告模板</strong>
+        <a-tag color="blue">v1.0.0</a-tag>
+        <span class="save-status">已保存</span>
+      </div>
+    </div>
+
+    <div class="toolbar-actions">
+      <a-button size="small">
+        <template #icon><EyeOutlined /></template>
+        预览
+      </a-button>
+      <a-button size="small" type="primary">
+        <template #icon><SaveOutlined /></template>
+        保存
+      </a-button>
+      <a-button size="small">
+        <template #icon><PlayCircleOutlined /></template>
+        生成测试
+      </a-button>
+      <a-button size="small">
+        <template #icon><DownloadOutlined /></template>
+        导出模板
+      </a-button>
+      <a-button size="small" shape="circle" aria-label="全屏">
+        <template #icon><FullscreenOutlined /></template>
+      </a-button>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.top-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--c-border);
+  background: var(--c-surface);
+}
+
+.toolbar-left {
+  min-width: 0;
+}
+
+.breadcrumb {
+  color: var(--c-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.template-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  line-height: 20px;
+}
+
+.template-meta strong {
+  overflow: hidden;
+  max-width: 320px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.save-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--c-text-secondary);
+  font-size: 12px;
+}
+
+.save-status::before {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--c-success);
+  content: "";
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/frontend/src/components/TemplateEdit/WordPreview.vue b/frontend/src/components/TemplateEdit/WordPreview.vue
new file mode 100644
index 0000000..06eafe1
--- /dev/null
+++ b/frontend/src/components/TemplateEdit/WordPreview.vue
@@ -0,0 +1,93 @@
+<template>
+  <section class="preview-wrap">
+    <div class="doc-page">
+      <h1 data-block-id="block_001">企业经营分析报告</h1>
+      <p data-block-id="block_002">
+        本报告用于展示 Word 模板解析后的 A4 预览效果，后续会由后端返回的 preview_html 驱动渲染。
+      </p>
+      <h2 data-block-id="block_003">一、经营概况</h2>
+      <p data-block-id="block_004">
+        点击预览区块后，左侧配置面板将展示对应区域的提示词、数据源和输出格式配置。
+      </p>
+      <table data-block-id="block_005">
+        <thead>
+          <tr>
+            <th>指标</th>
+            <th>本期</th>
+            <th>同比</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>营业收入</td>
+            <td>-</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>利润率</td>
+            <td>-</td>
+            <td>-</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.preview-wrap {
+  min-width: 0;
+  min-height: 0;
+  padding: 24px;
+  overflow: auto;
+  background: var(--c-surface-soft);
+}
+
+.doc-page {
+  width: 794px;
+  min-height: 1123px;
+  margin: 0 auto;
+  padding: 72px 64px;
+  background: var(--c-surface);
+  box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
+  color: var(--c-text);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+h1 {
+  margin: 0 0 28px;
+  text-align: center;
+  font-size: 20px;
+}
+
+h2 {
+  margin: 24px 0 12px;
+  padding-bottom: 6px;
+  border-bottom: 2px solid var(--c-text);
+  font-size: 16px;
+}
+
+p {
+  margin: 8px 0;
+  text-align: justify;
+  text-indent: 2em;
+}
+
+table {
+  width: 100%;
+  margin: 14px 0;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 7px 10px;
+  border: 1px solid var(--c-border);
+  text-align: left;
+}
+
+th {
+  background: var(--c-surface-soft);
+}
+</style>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 8301ee0..ae08fa0 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 
 import TemplateCenter from "@/views/TemplateCenter.vue";
+import TemplateEdit from "@/views/TemplateEdit.vue";
 
 const router = createRouter({
   history: createWebHistory(),
@@ -10,6 +11,11 @@ const router = createRouter({
       name: "template-center",
       component: TemplateCenter,
     },
+    {
+      path: "/templates/:id/edit",
+      name: "template-edit",
+      component: TemplateEdit,
+    },
   ],
 });
 
diff --git a/frontend/src/views/TemplateEdit.vue b/frontend/src/views/TemplateEdit.vue
new file mode 100644
index 0000000..508ed8d
--- /dev/null
+++ b/frontend/src/views/TemplateEdit.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import ConfigPanel from "@/components/TemplateEdit/ConfigPanel.vue";
+import LeftMenu from "@/components/TemplateEdit/LeftMenu.vue";
+import StructureTree from "@/components/TemplateEdit/StructureTree.vue";
+import TopToolbar from "@/components/TemplateEdit/TopToolbar.vue";
+import WordPreview from "@/components/TemplateEdit/WordPreview.vue";
+</script>
+
+<template>
+  <main class="template-edit">
+    <LeftMenu />
+    <section class="edit-main">
+      <TopToolbar />
+      <div class="edit-workspace">
+        <ConfigPanel />
+        <WordPreview />
+        <StructureTree />
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.template-edit {
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr);
+  height: 100vh;
+  overflow: hidden;
+  background: var(--c-bg);
+}
+
+.edit-main {
+  display: grid;
+  min-width: 0;
+  grid-template-rows: 48px minmax(0, 1fr);
+}
+
+.edit-workspace {
+  display: grid;
+  min-height: 0;
+  grid-template-columns: 380px minmax(520px, 1fr) 240px;
+  overflow: hidden;
+}
+</style>