515 lines
15 KiB
Vue
515 lines
15 KiB
Vue
<template>
|
|
<v-container fluid class="pa-0 fill-height">
|
|
<v-row class="fill-height">
|
|
<!-- Left Panel - Template Info -->
|
|
<v-col cols="12" md="4" class="pa-4 border-e">
|
|
<div class="d-flex align-center mb-4">
|
|
<h2 class="text-h5 mr-2">
|
|
{{ isEditMode ? '编辑模板' : '创建模板' }}
|
|
</h2>
|
|
<v-spacer />
|
|
<v-btn icon variant="text" @click="goBack">
|
|
<v-icon>mdi-close</v-icon>
|
|
<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-form>
|
|
|
|
<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>
|
|
</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="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>
|
|
</v-btn>
|
|
<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>
|
|
</v-btn>
|
|
</div>
|
|
|
|
<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>
|
|
</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-icon size="small">mdi-pencil</v-icon>
|
|
<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">
|
|
mdi-delete
|
|
</v-icon>
|
|
<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>
|
|
</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-form>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn @click="showDirectoryDialog = false">
|
|
取消
|
|
</v-btn>
|
|
<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-form>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn @click="showFileDialog = false">
|
|
取消
|
|
</v-btn>
|
|
<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>
|
|
<v-toolbar dark color="primary">
|
|
<v-btn icon @click="showEditorDialog = false">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
<v-toolbar-title>
|
|
编辑文件: {{ editingFile?.path }}
|
|
</v-toolbar-title>
|
|
<v-spacer />
|
|
<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-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const templateStore = useTemplateStore()
|
|
|
|
// Extract methods from store
|
|
const { getTemplateById } = templateStore
|
|
|
|
// Form state
|
|
const formValid = ref(false)
|
|
const templateName = ref('')
|
|
const templateDescription = ref('')
|
|
const hasChanges = ref(false)
|
|
|
|
// Dialogs
|
|
const showDirectoryDialog = ref(false)
|
|
const showFileDialog = ref(false)
|
|
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('')
|
|
const editingFile = ref<{ path: string; content: string } | null>(null)
|
|
const editingFileContent = ref('')
|
|
|
|
// Tree state
|
|
const expandedNodes = ref<string[]>([])
|
|
const treeHeight = ref(600)
|
|
|
|
// Item state
|
|
const directories = ref<{ path: string }[]>([])
|
|
const files = ref<{ path: string; content: string }[]>([])
|
|
|
|
// Computed
|
|
const isEditMode = computed(() => !!route.params.id)
|
|
const treeItems = computed(() => {
|
|
const items = []
|
|
|
|
// Add directories
|
|
directories.value.forEach(dir => {
|
|
items.push({
|
|
id: `dir-${dir.path}`,
|
|
name: dir.path,
|
|
type: 'directory',
|
|
children: []
|
|
})
|
|
})
|
|
|
|
// Add files
|
|
files.value.forEach(file => {
|
|
items.push({
|
|
id: `file-${file.path}`,
|
|
name: file.path,
|
|
type: 'file'
|
|
})
|
|
})
|
|
|
|
return items
|
|
})
|
|
|
|
// Validation rules
|
|
const requiredRule = (v: any) => !!v || '此字段为必填项'
|
|
|
|
// Watch for changes to detect unsaved changes
|
|
watch([templateName, templateDescription, directories, files], () => {
|
|
hasChanges.value = true
|
|
}, { deep: true })
|
|
|
|
// 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
|
|
directories.value = [...template.directories]
|
|
files.value = [...template.files]
|
|
hasChanges.value = false
|
|
} else {
|
|
router.push('/templates')
|
|
}
|
|
}
|
|
|
|
// Expand all nodes by default
|
|
expandAll()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', updateTreeHeight)
|
|
})
|
|
|
|
// Methods
|
|
const updateTreeHeight = () => {
|
|
treeHeight.value = window.innerHeight - 200
|
|
}
|
|
|
|
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('您有未保存的更改，确定要离开吗？')) {
|
|
router.push('/templates')
|
|
}
|
|
} else {
|
|
router.push('/templates')
|
|
}
|
|
}
|
|
|
|
const expandAll = () => {
|
|
expandedNodes.value = treeItems.value.map(item => item.id)
|
|
}
|
|
|
|
const collapseAll = () => {
|
|
expandedNodes.value = []
|
|
}
|
|
|
|
const editFile = (item: any) => {
|
|
const file = files.value.find(f => `file-${f.path}` === item.id)
|
|
if (file) {
|
|
editFileContent(file)
|
|
}
|
|
}
|
|
|
|
const editFileContent = (file: { path: string; content: string }) => {
|
|
editingFile.value = file
|
|
editingFileContent.value = file.content
|
|
showEditorDialog.value = true
|
|
}
|
|
|
|
const saveFileContent = () => {
|
|
if (editingFile.value) {
|
|
const index = files.value.findIndex(f => f.path === editingFile.value?.path)
|
|
if (index !== -1) {
|
|
files.value[index].content = editingFileContent.value
|
|
}
|
|
}
|
|
showEditorDialog.value = false
|
|
}
|
|
|
|
const deleteItem = (item: any) => {
|
|
if (!confirm('确定要删除此项吗？')) return
|
|
|
|
if (item.type === 'directory') {
|
|
directories.value = directories.value.filter(d => `dir-${d.path}` !== item.id)
|
|
} else {
|
|
files.value = files.value.filter(f => `file-${f.path}` !== item.id)
|
|
}
|
|
}
|
|
|
|
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({
|
|
id: templateId,
|
|
...templateData
|
|
})
|
|
} else {
|
|
templateStore.addTemplate(templateData)
|
|
}
|
|
|
|
hasChanges.value = false
|
|
router.push('/templates')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.border-e {
|
|
border-right: 1px solid rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.fill-height {
|
|
height: 100%;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|