refactor(模板管理): 移除未保存更改检测并提取模板卡片组件

移除CreateTemplateScreen中的未保存更改检测逻辑，简化保存和返回操作将TemplateListScreen中的模板卡片提取为独立的TemplateCard组件
2025-10-31 16:37:06 +08:00
1 parent f3e909923a
commit 35a0821153
@@ -0,0 +1,100 @@
+<template>
+  <v-card class="d-flex flex-column" height="100%">
+    <v-card-item>
+      <v-card-title>{{ template.name }}</v-card-title>
+      <v-card-subtitle>{{ template.description }}</v-card-subtitle>
+    </v-card-item>
+
+    <v-card-text class="flex-grow-1 py-2">
+      <v-chip-group column>
+        <v-chip size="small" color="primary" variant="tonal">
+          节点: {{ nodeCount.files }}
+        </v-chip>
+        <v-chip size="small" color="success" variant="tonal">
+          目录: {{ nodeCount.directories }}
+        </v-chip>
+      </v-chip-group>
+    </v-card-text>
+
+    <v-divider class="mt-auto"></v-divider>
+
+    <v-card-actions class="pa-2 justify-space-between">
+      <div>
+        <v-btn color="primary" variant="text" size="small" @click="$emit('view', template)">
+          查看
+        </v-btn>
+        <v-btn color="success" variant="text" size="small" @click="$emit('execute', template)">
+          执行
+        </v-btn>
+      </div>
+
+      <v-menu location="bottom end">
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" icon variant="text" size="small" density="comfortable">
+            <v-icon>mdi-dots-vertical</v-icon>
+          </v-btn>
+        </template>
+
+        <v-list density="compact">
+          <v-list-item @click="$emit('edit', template)">
+            <template v-slot:prepend>
+              <v-icon>mdi-pencil</v-icon>
+            </template>
+            <v-list-item-title>修改</v-list-item-title>
+          </v-list-item>
+
+          <v-divider></v-divider>
+
+          <v-list-item @click="$emit('delete', template)">
+            <template v-slot:prepend>
+              <v-icon color="error">mdi-delete</v-icon>
+            </template>
+            <v-list-item-title class="text-error">删除</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Template, TreeNode } from '@/renderer/store/template'
+
+interface Props {
+  template: Template
+}
+
+interface Emits {
+  (e: 'view', template: Template): void
+  (e: 'execute', template: Template): void
+  (e: 'edit', template: Template): void
+  (e: 'delete', template: Template): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// Count files and directories in tree structure
+const nodeCount = computed(() => {
+  let files = 0
+  let directories = 0
+
+  const count = (nodeList: TreeNode[]) => {
+    nodeList.forEach(node => {
+      if (node.type === 'file') {
+        files++
+      } else if (node.type === 'directory') {
+        directories++
+        if (node.children) {
+          count(node.children)
+        }
+      }
+    })
+  }
+
+  count(props.template.treeStructure || [])
+
+  return { files, directories }
+})
+</script>