feat: enhance top toolbar state

docs/AI文档模板系统-像素级任务清单-20260701.md

@@ -61,10 +61,10 @@
 | 041 | 菜单展开/收起交互 + 箭头旋转动画 | 前端 | 0.25d | ✅ 已完成 |
 | 042 | 菜单选中高亮（蓝色左侧竖条） | 前端 | 0.25d | ✅ 已完成 |
 | | **顶部工具栏** | | | |
-| 043 | 面包屑导航渲染 | 前端 | 0.25d | ⏳ 未完成 |
+| 043 | 面包屑导航渲染 | 前端 | 0.25d | ✅ 已完成 |
-| 044 | 模板名称 + 版本号标签展示 | 前端 | 0.25d | ⏳ 未完成 |
+| 044 | 模板名称 + 版本号标签展示 | 前端 | 0.25d | ✅ 已完成 |
-| 045 | 保存状态指示器（已保存/未保存 圆点切换） | 前端 | 0.25d | ⏳ 未完成 |
+| 045 | 保存状态指示器（已保存/未保存 圆点切换） | 前端 | 0.25d | ✅ 已完成 |
-| 046 | 操作按钮区（预览/保存/生成测试/导出模板/全屏） | 前端 | 0.25d | ⏳ 未完成 |
+| 046 | 操作按钮区（预览/保存/生成测试/导出模板/全屏） | 前端 | 0.25d | ✅ 已完成 |
 | | **Word 预览区** | | | |
 | 047 | v-html 渲染后端 HTML + 为 [data-block-id] 添加 doc-block class | 前端 | 0.25d | ⏳ 未完成 |
 | 048 | 点击事件委托 + block_id 提取 | 前端 | 0.25d | ⏳ 未完成 |

docs/tasks/task_detail_2026_07_01.md

@@ -83,3 +83,14 @@
     4. 增加选中状态管理，子菜单选中后显示高亮样式。
     5. 执行前端构建和浏览器交互检查。
 - **执行结果**: 完成任务 040-042，左侧菜单支持数据驱动、展开收起与选中高亮。
+
+## 会话 ID: 20260701-top-toolbar
+- [2026-07-01 20:37:24]
+- **执行原因**: 按任务清单继续完成顶部工具栏 043-046。
+- **执行过程**:
+    1. 将面包屑、模板名称和版本号改为数据驱动渲染。
+    2. 增加已保存/未保存状态和状态圆点样式。
+    3. 绑定保存按钮，可将未保存状态切换为已保存。
+    4. 保留预览、保存、生成测试、导出模板、全屏 5 个操作按钮。
+    5. 执行前端构建和浏览器轻量 DOM 检查。
+- **执行结果**: 完成任务 043-046，顶部工具栏具备基础展示和保存状态切换能力。

frontend/src/components/TemplateEdit/TopToolbar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, ref } from "vue";
 import {
   DownloadOutlined,
   EyeOutlined,
@@ -6,29 +7,47 @@ import {
   PlayCircleOutlined,
   SaveOutlined,
 } from "@ant-design/icons-vue";
+
+const breadcrumbs = ["模板管理", "模板标注"];
+const templateInfo = {
+  name: "企业经营分析报告模板",
+  version: "v1.0.0",
+};
+const isSaved = ref(true);
+const saveStatusText = computed(() => (isSaved.value ? "已保存" : "未保存"));
+
+function markDirty() {
+  isSaved.value = false;
+}
+
+function saveTemplate() {
+  isSaved.value = true;
+}
 </script>
 
 <template>
   <header class="top-toolbar">
     <div class="toolbar-left">
-      <div class="breadcrumb">模板管理 / 模板标注</div>
+      <div class="breadcrumb">
+        <span v-for="item in breadcrumbs" :key="item">{{ item }}</span>
+      </div>
       <div class="template-meta">
-        <strong>企业经营分析报告模板</strong>
+        <strong>{{ templateInfo.name }}</strong>
-        <a-tag color="blue">v1.0.0</a-tag>
+        <a-tag color="blue">{{ templateInfo.version }}</a-tag>
-        <span class="save-status">已保存</span>
+        <span class="save-status" :class="{ dirty: !isSaved }">{{ saveStatusText }}</span>
       </div>
     </div>
 
     <div class="toolbar-actions">
-      <a-button size="small">
+      <a-button size="small" @click="markDirty">
         <template #icon><EyeOutlined /></template>
         预览
       </a-button>
-      <a-button size="small" type="primary">
+      <a-button size="small" type="primary" @click="saveTemplate">
         <template #icon><SaveOutlined /></template>
         保存
       </a-button>
-      <a-button size="small">
+      <a-button size="small" @click="markDirty">
         <template #icon><PlayCircleOutlined /></template>
         生成测试
       </a-button>
@@ -59,11 +78,19 @@ import {
 }
 
 .breadcrumb {
+  display: flex;
+  gap: 4px;
   color: var(--c-text-muted);
   font-size: 12px;
   line-height: 18px;
 }
 
+.breadcrumb span + span::before {
+  margin-right: 4px;
+  color: var(--c-border);
+  content: "/";
+}
+
 .template-meta {
   display: flex;
   align-items: center;
@@ -95,6 +122,10 @@ import {
   content: "";
 }
 
+.save-status.dirty::before {
+  background: var(--c-warn);
+}
+
 .toolbar-actions {
   display: flex;
   align-items: center;