zwt13703
136 lines
2.8 KiB
Vue
136 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from "vue";
|
|
import {
|
|
DownloadOutlined,
|
|
EyeOutlined,
|
|
FullscreenOutlined,
|
|
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">
|
|
<span v-for="item in breadcrumbs" :key="item">{{ item }}</span>
|
|
</div>
|
|
<div class="template-meta">
|
|
<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" @click="markDirty">
|
|
<template #icon><EyeOutlined /></template>
|
|
预览
|
|
</a-button>
|
|
<a-button size="small" type="primary" @click="saveTemplate">
|
|
<template #icon><SaveOutlined /></template>
|
|
保存
|
|
</a-button>
|
|
<a-button size="small" @click="markDirty">
|
|
<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 {
|
|
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;
|
|
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: "";
|
|
}
|
|
|
|
.save-status.dirty::before {
|
|
background: var(--c-warn);
|
|
}
|
|
|
|
.toolbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|