zhanggy
35a0821153
移除CreateTemplateScreen中的未保存更改检测逻辑，简化保存和返回操作 将TemplateListScreen中的模板卡片提取为独立的TemplateCard组件
100 lines
2.7 KiB
Vue
100 lines
2.7 KiB
Vue
<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> |