feat: enhance top toolbar state

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>
-        <a-tag color="blue">v1.0.0</a-tag>
-        <span class="save-status">已保存</span>
+        <strong>{{ templateInfo.name }}</strong>
+        <a-tag color="blue">{{ templateInfo.version }}</a-tag>
+        <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;