zhanggy/gdt-tool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化模板创建界面，添加右键菜单功能以支持目录和文件的快速添加

Browse Source
This commit is contained in:
zhanggy committed 2025-10-27 19:13:47 +08:00
1 parent 4f859a4933
commit 02610224a1
1 file changed
+207 -250
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/screens/CreateTemplateScreen.vue
+207 -250
View File
@@ -8,215 +8,154 @@
{{ isEditMode ? '编辑模板' : '创建模板' }}
</h2>
<v-spacer />
<v-btn
icon
variant="text"
@click="goBack"
>
<v-btn icon variant="text" @click="goBack">
<v-icon>mdi-close</v-icon>
<v-tooltip
activator="parent"
location="bottom"
>
<v-tooltip activator="parent" location="bottom">
关闭
</v-tooltip>
</v-btn>
</div>
<v-form v-model="formValid" class="mb-4">
<v-text-field
v-model="templateName"
label="模板名称 *"
placeholder="输入模板名称"
:rules="[requiredRule]"
required
clearable
density="comfortable"
/>
<v-textarea
v-model="templateDescription"
label="模板描述"
placeholder="描述这个模板的用途..."
rows="2"
auto-grow
clearable
density="comfortable"
/>
<v-text-field v-model="templateName" label="模板名称 *" placeholder="输入模板名称" :rules="[requiredRule]" required
clearable density="comfortable" />
<v-textarea v-model="templateDescription" label="模板描述" placeholder="描述这个模板的用途..." rows="2" auto-grow clearable
density="comfortable" />
</v-form>
<v-divider class="my-4" />
<!-- File Operations -->
<div class="mb-4">
<h3 class="text-subtitle-1 mb-2">添加项</h3>
<div class="d-flex flex-column ga-2">
<v-btn
color="primary"
variant="outlined"
prepend-icon="mdi-folder-plus"
@click="showAddDirectoryDialog"
block
>
添加目录
</v-btn>
<v-btn
color="success"
variant="outlined"
prepend-icon="mdi-file-plus"
@click="showAddFileDialog"
block
>
添加文件
</v-btn>
</div>
</div>
<v-divider class="my-4" />
<!-- Template Actions -->
<div class="d-flex ga-2">
<v-btn
color="primary"
@click="saveTemplate"
:disabled="!formValid || !hasChanges"
prepend-icon="mdi-content-save"
block
>
<v-btn color="primary" @click="saveTemplate" :disabled="!formValid || !hasChanges"
prepend-icon="mdi-content-save" block>
保存模板
</v-btn>
</div>
</v-col>
<!-- Right Panel - Tree Structure -->
<v-col cols="12" md="8" class="pa-4">
<div class="d-flex align-center mb-4">
<h3 class="text-h6 mr-2">模板结构</h3>
<v-spacer />
<v-btn
icon
variant="text"
@click="expandAll"
size="small"
>
<v-btn icon variant="text" @click="addRootDirectory" size="small">
<v-icon>mdi-folder-plus</v-icon>
<v-tooltip activator="parent" location="bottom">
添加根目录
</v-tooltip>
</v-btn>
<v-btn icon variant="text" @click="addRootFile" size="small">
<v-icon>mdi-file-plus</v-icon>
<v-tooltip activator="parent" location="bottom">
添加根文件
</v-tooltip>
</v-btn>
<v-btn icon variant="text" @click="expandAll" size="small">
<v-icon>mdi-arrow-expand-down</v-icon>
<v-tooltip
activator="parent"
location="bottom"
>
<v-tooltip activator="parent" location="bottom">
展开全部
</v-tooltip>
</v-btn>
<v-btn
icon
variant="text"
@click="collapseAll"
size="small"
>
<v-btn icon variant="text" @click="collapseAll" size="small">
<v-icon>mdi-arrow-collapse-up</v-icon>
<v-tooltip
activator="parent"
location="bottom"
>
<v-tooltip activator="parent" location="bottom">
收起全部
</v-tooltip>
</v-btn>
</div>
<v-card
variant="outlined"
class="pa-2"
:height="treeHeight"
>
<v-treeview
v-model:expanded="expandedNodes"
:items="treeItems"
item-title="name"
item-key="id"
item-children="children"
activatable
open-on-click
:return-object="false"
>
<v-card variant="outlined" class="pa-2" :height="treeHeight"
@contextmenu.prevent="showContextMenu($event, null)">
<v-treeview v-model:expanded="expandedNodes" :items="treeItems" item-title="name" item-key="id"
item-children="children" activatable open-on-click :return-object="false">
<template v-slot:prepend="{ item }">
<v-icon
:color="item.type === 'directory' ? 'warning' : 'info'"
size="large"
>
{{
item.type === 'directory'
? 'mdi-folder-outline'
: 'mdi-file-document-outline'
<v-icon :color="item.type === 'directory' ? 'warning' : 'info'" size="large">
{{
item.type === 'directory'
? 'mdi-folder-outline'
: 'mdi-file-document-outline'
}}
</v-icon>
</template>
<template v-slot:title="{ item }">
<span @contextmenu.prevent="showContextMenu($event, item)" class="cursor-pointer d-flex align-center">
{{ item.name }}
<v-btn v-if="item.type === 'directory'" icon variant="text" size="small" class="ml-2"
@click.stop="addNewItemToCurrentDirectory(item)">
<v-icon size="small">mdi-plus</v-icon>
<v-tooltip activator="parent" location="top">
添加到目录
</v-tooltip>
</v-btn>
</span>
</template>
<template v-slot:append="{ item }">
<div class="d-flex align-center ga-1">
<v-btn
v-if="item.type === 'file'"
icon
variant="text"
size="small"
@click.stop="editFile(item)"
>
<v-btn v-if="item.type === 'file'" icon variant="text" size="small" @click.stop="editFile(item)">
<v-icon size="small">mdi-pencil</v-icon>
<v-tooltip
activator="parent"
location="top"
>
<v-tooltip activator="parent" location="top">
编辑内容
</v-tooltip>
</v-btn>
<v-btn
icon
variant="text"
size="small"
@click.stop="deleteItem(item)"
>
<v-icon
size="small"
color="error"
>
<v-btn icon variant="text" size="small" @click.stop="deleteItem(item)">
<v-icon size="small" color="error">
mdi-delete
</v-icon>
<v-tooltip
activator="parent"
location="top"
>
<v-tooltip activator="parent" location="top">
删除
</v-tooltip>
</v-btn>
</div>
</template>
<template v-slot:no-data>
<div class="text-center pa-4">
<v-icon size="48" color="grey-lighten-1">mdi-folder-open-outline</v-icon>
<p class="text-body-2 mt-2">暂无文件或目录</p>
<p class="text-caption">点击左侧"添加目录"或"添加文件"开始创建</p>
<p class="text-caption">右键点击空白区域添加根目录或文件</p>
</div>
</template>
</v-treeview>
</v-card>
<!-- Context Menu -->
<v-menu v-model="showContextMenuVar" :position-x="contextMenuX" :position-y="contextMenuY" absolute>
<v-list density="compact">
<v-list-item @click="addDirectory(currentContextItem)">
<template v-slot:prepend>
<v-icon>mdi-folder-plus</v-icon>
</template>
<v-list-item-title>
{{ currentContextItem ? '添加子目录' : '添加根目录' }}
</v-list-item-title>
</v-list-item>
<v-list-item @click="addFile(currentContextItem)">
<template v-slot:prepend>
<v-icon>mdi-file-plus</v-icon>
</template>
<v-list-item-title>
{{ currentContextItem ? '添加子文件' : '添加根文件' }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
<!-- Add Directory Dialog -->
<v-dialog v-model="showDirectoryDialog" max-width="500">
<v-card>
<v-card-title>添加目录</v-card-title>
<v-card-text>
<v-form v-model="directoryFormValid">
<v-text-field
v-model="newDirectoryPath"
label="目录路径 *"
placeholder="例如: src/components"
:rules="[requiredRule]"
required
density="comfortable"
/>
<v-text-field v-model="newDirectoryPath" label="目录路径 *" placeholder="例如: src/components"
:rules="[requiredRule]" required density="comfortable" />
</v-form>
</v-card-text>
<v-card-actions>
@@ -224,31 +163,21 @@
<v-btn @click="showDirectoryDialog = false">
取消
</v-btn>
<v-btn
color="primary"
@click="addDirectory"
:disabled="!directoryFormValid"
>
<v-btn color="primary" @click="confirmAddDirectory" :disabled="!directoryFormValid">
添加
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- Add File Dialog -->
<v-dialog v-model="showFileDialog" max-width="500">
<v-card>
<v-card-title>添加文件</v-card-title>
<v-card-text>
<v-form v-model="fileFormValid">
<v-text-field
v-model="newFilePath"
label="文件路径 *"
placeholder="例如: src/index.js"
:rules="[requiredRule]"
required
density="comfortable"
/>
<v-text-field v-model="newFilePath" label="文件路径 *" placeholder="例如: src/index.js" :rules="[requiredRule]"
required density="comfortable" />
</v-form>
</v-card-text>
<v-card-actions>
@@ -256,17 +185,13 @@
<v-btn @click="showFileDialog = false">
取消
</v-btn>
<v-btn
color="primary"
@click="addFile"
:disabled="!fileFormValid"
>
<v-btn color="primary" @click="confirmAddFile" :disabled="!fileFormValid">
添加并编辑
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- File Content Editor Dialog -->
<v-dialog v-model="showEditorDialog" fullscreen>
<v-card>
@@ -278,25 +203,14 @@
编辑文件: {{ editingFile?.path }}
</v-toolbar-title>
<v-spacer />
<v-btn
variant="text"
@click="saveFileContent"
>
<v-btn variant="text" @click="saveFileContent">
保存
</v-btn>
</v-toolbar>
<v-card-text class="pa-0 fill-height">
<v-textarea
v-model="editingFileContent"
class="fill-height"
style="height: calc(100vh - 120px);"
no-resize
spellcheck="false"
placeholder="在此输入文件内容..."
variant="solo-filled"
density="comfortable"
/>
<v-textarea v-model="editingFileContent" class="fill-height" style="height: calc(100vh - 120px);" no-resize
spellcheck="false" placeholder="在此输入文件内容..." variant="solo-filled" density="comfortable" />
</v-card-text>
</v-card>
</v-dialog>
@@ -304,7 +218,7 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTemplateStore } from '@/renderer/store/template'
import { Template } from '@/renderer/store/template'
@@ -329,6 +243,12 @@ const showEditorDialog = ref(false)
const directoryFormValid = ref(false)
const fileFormValid = ref(false)
// Context menu
const showContextMenuVar = ref(false)
const contextMenuX = ref(0)
const contextMenuY = ref(0)
const currentContextItem = ref<any>(null)
// New item state
const newDirectoryPath = ref('')
const newFilePath = ref('')
@@ -347,7 +267,7 @@ const files = ref<{ path: string; content: string }[]>([])
const isEditMode = computed(() => !!route.params.id)
const treeItems = computed(() => {
const items = []
// Add directories
directories.value.forEach(dir => {
items.push({
@@ -357,7 +277,7 @@ const treeItems = computed(() => {
children: []
})
})
// Add files
files.value.forEach(file => {
items.push({
@@ -366,7 +286,7 @@ const treeItems = computed(() => {
type: 'file'
})
})
return items
})
@@ -381,18 +301,18 @@ watch([templateName, templateDescription, directories, files], () => {
// Lifecycle
onMounted(async () => {
await templateStore.loadTemplates()
// Set tree height based on window height
updateTreeHeight()
// Add resize listener
window.addEventListener('resize', updateTreeHeight)
// Handle edit mode
if (isEditMode.value) {
const templateId = route.params.id as string
const template = getTemplateById(templateId)
if (template) {
templateName.value = template.name
templateDescription.value = template.description
@@ -403,7 +323,7 @@ onMounted(async () => {
router.push('/templates')
}
}
// Expand all nodes by default
expandAll()
})
@@ -417,7 +337,92 @@ const updateTreeHeight = () => {
treeHeight.value = window.innerHeight - 200
}
// Methods
const showContextMenu = (event: MouseEvent, item: any) => {
event.preventDefault()
contextMenuX.value = event.clientX
contextMenuY.value = event.clientY
currentContextItem.value = item
showContextMenuVar.value = false // Close first to reset position
nextTick(() => {
contextMenuX.value = event.clientX
contextMenuY.value = event.clientY
showContextMenuVar.value = true
})
}
const addRootDirectory = () => {
newDirectoryPath.value = ''
showDirectoryDialog.value = true
}
const addRootFile = () => {
newFilePath.value = ''
showFileDialog.value = true
}
const addDirectory = (parentItem: any = null) => {
showContextMenuVar.value = false
currentContextItem.value = parentItem
newDirectoryPath.value = parentItem ? `${parentItem.name}/` : ''
showDirectoryDialog.value = true
}
const addFile = (parentItem: any = null) => {
showContextMenuVar.value = false
newFilePath.value = parentItem ? `${parentItem.name}/` : ''
showFileDialog.value = true
}
const addNewItemToCurrentDirectory = (directoryItem: any) => {
currentContextItem.value = directoryItem
newDirectoryPath.value = directoryItem ? `${directoryItem.name}/` : ''
showDirectoryDialog.value = true
}
const confirmAddDirectory = () => {
if (!newDirectoryPath.value.trim()) return
// Check for duplicates
const exists = directories.value.some(d => d.path === newDirectoryPath.value)
if (exists) {
alert('该目录路径已存在！')
return
}
directories.value.push({
path: newDirectoryPath.value
})
showDirectoryDialog.value = false
newDirectoryPath.value = ''
currentContextItem.value = null
}
const confirmAddFile = () => {
if (!newFilePath.value.trim()) return
// Check for duplicates
const exists = files.value.some(f => f.path === newFilePath.value)
if (exists) {
alert('该文件路径已存在！')
return
}
const newFile = {
path: newFilePath.value,
content: ''
}
files.value.push(newFile)
// Open editor for the new file
editFileContent(newFile)
showFileDialog.value = false
newFilePath.value = ''
currentContextItem.value = null
}
const goBack = () => {
if (hasChanges.value) {
if (confirm('您有未保存的更改，确定要离开吗？')) {
@@ -436,58 +441,6 @@ const collapseAll = () => {
expandedNodes.value = []
}
const showAddDirectoryDialog = () => {
newDirectoryPath.value = ''
showDirectoryDialog.value = true
}
const showAddFileDialog = () => {
newFilePath.value = ''
showFileDialog.value = true
}
const addDirectory = () => {
if (!newDirectoryPath.value.trim()) return
// Check for duplicates
const exists = directories.value.some(d => d.path === newDirectoryPath.value)
if (exists) {
alert('该目录路径已存在！')
return
}
directories.value.push({
path: newDirectoryPath.value
})
showDirectoryDialog.value = false
newDirectoryPath.value = ''
}
const addFile = () => {
if (!newFilePath.value.trim()) return
// Check for duplicates
const exists = files.value.some(f => f.path === newFilePath.value)
if (exists) {
alert('该文件路径已存在！')
return
}
const newFile = {
path: newFilePath.value,
content: ''
}
files.value.push(newFile)
// Open editor for the new file
editFileContent(newFile)
showFileDialog.value = false
newFilePath.value = ''
}
const editFile = (item: any) => {
const file = files.value.find(f => `file-${f.path}` === item.id)
if (file) {
@@ -513,7 +466,7 @@ const saveFileContent = () => {
const deleteItem = (item: any) => {
if (!confirm('确定要删除此项吗？')) return
if (item.type === 'directory') {
directories.value = directories.value.filter(d => `dir-${d.path}` !== item.id)
} else {
@@ -523,14 +476,14 @@ const deleteItem = (item: any) => {
const saveTemplate = () => {
if (!formValid.value) return
const templateData = {
name: templateName.value,
description: templateDescription.value,
files: files.value,
directories: directories.value
}
if (isEditMode.value) {
const templateId = route.params.id as string
templateStore.updateTemplate({
@@ -540,7 +493,7 @@ const saveTemplate = () => {
} else {
templateStore.addTemplate(templateData)
}
hasChanges.value = false
router.push('/templates')
}
@@ -554,4 +507,8 @@ const saveTemplate = () => {
.fill-height {
height: 100%;
}
</style>
.cursor-pointer {
cursor: pointer;
}
</style>