feat: add template edit shell layout

2026-07-01 20:34:24 +08:00
parent 217af9bc99
commit b4e128c227
9 changed files with 579 additions and 6 deletions
@@ -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>