新增多证书模板管理流程

2026-08-13 18:06:05 +08:00
parent eac19ea593
commit abbefc4b48
27 changed files with 774 additions and 61 deletions
--- a/frontend/src/views/AdminTemplates.vue
+++ b/frontend/src/views/AdminTemplates.vue
@@ -0,0 +1,118 @@
+<template>
+  <section>
+    <header class="page-head">
+      <div>
+        <h2>证书模板</h2>
+        <p>查看系统可用模板及其动态填写内容。项目默认模板可在项目管理中设置。</p>
+      </div>
+    </header>
+
+    <div class="template-list">
+      <article v-for="item in templates" :key="item.code" class="template-item">
+        <img :src="item.preview_url" :alt="item.name" />
+        <div class="template-content">
+          <div class="template-title">
+            <h3>{{ item.name }}</h3>
+            <el-tag type="success">启用</el-tag>
+          </div>
+          <p>{{ item.description }}</p>
+          <dl>
+            <dt>模板代码</dt>
+            <dd>{{ item.code }}</dd>
+            <dt>动态内容</dt>
+            <dd>
+              <el-tag v-for="field in item.dynamic_fields" :key="field" type="info">{{ field }}</el-tag>
+            </dd>
+          </dl>
+        </div>
+      </article>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+import { http, type CertificateTemplate } from "../api";
+
+const templates = ref<CertificateTemplate[]>([]);
+
+async function loadTemplates() {
+  const { data } = await http.get<CertificateTemplate[]>("/admin/certificate-templates");
+  templates.value = data;
+}
+
+onMounted(loadTemplates);
+</script>
+
+<style scoped>
+.template-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.template-item {
+  overflow: hidden;
+  border: 1px solid var(--app-border);
+  border-radius: 8px;
+  background: #fff;
+}
+
+.template-item img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1.36;
+  object-fit: contain;
+  background: #f6f8f9;
+  border-bottom: 1px solid var(--app-border);
+}
+
+.template-content {
+  padding: 18px;
+}
+
+.template-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.template-title h3,
+.template-content p,
+.template-content dl {
+  margin: 0;
+}
+
+.template-content p {
+  min-height: 48px;
+  margin-top: 8px;
+  color: var(--app-muted);
+  line-height: 1.6;
+}
+
+.template-content dl {
+  display: grid;
+  grid-template-columns: 72px 1fr;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.template-content dt {
+  color: var(--app-muted);
+}
+
+.template-content dd {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0;
+}
+
+@media (max-width: 1000px) {
+  .template-list {
+    grid-template-columns: 1fr;
+  }
+}
+</style>