zhanggy
5d7d31c04d
- 在模板列表和创建模板界面添加复制模板功能 - 将模板卡片样式改为outlined并修正节点统计标签 - 将同步文件操作改为异步操作提升性能 - 在执行模板对话框显示当前模板名称
109 lines
3.1 KiB
Vue
109 lines
3.1 KiB
Vue
<template>
|
|
<v-card class="d-flex flex-column" height="100%" variant="outlined">
|
|
<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-list-item @click="$emit('copy', template)">
|
|
<template v-slot:prepend>
|
|
<v-icon color="primary">mdi-content-copy</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 '@/types'
|
|
|
|
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
|
|
(e: 'copy', 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>
|