feat: 添加 @vueuse/core 依赖并重构模板树组件，优化创建模板界面
This commit is contained in:
zhanggy committed
1 parent
2f85832b89
commit
87ce5cb24f
5 files changed
+306
-156
No files matched your search
@@ -138,143 +138,25 @@
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-card
|
||||
variant="outlined"
|
||||
class="pa-2"
|
||||
<TemplateTree
|
||||
:items="treeItems"
|
||||
: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 #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 #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 #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>
|
||||
</v-treeview>
|
||||
|
||||
<div
|
||||
v-if="treeItems.length === 0"
|
||||
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>
|
||||
</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 #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 #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>
|
||||
:expanded="expandedNodes"
|
||||
:show-context-menu-var="showContextMenuVar"
|
||||
:context-menu-x="contextMenuX"
|
||||
:context-menu-y="contextMenuY"
|
||||
:current-context-item="currentContextItem"
|
||||
:empty-text="'暂无文件或目录'"
|
||||
:read-only="false"
|
||||
@showContextMenu="showContextMenu"
|
||||
@add-new-item-to-current-directory="addNewItemToCurrentDirectory"
|
||||
@edit-file="editFile"
|
||||
@delete-item="deleteItem"
|
||||
@add-directory="addDirectory"
|
||||
@add-file="addFile"
|
||||
@update:showContextMenuVar="handleContextMenuUpdate"
|
||||
@update:expanded="expandedNodes = $event"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@@ -295,6 +177,7 @@
|
||||
required
|
||||
density="comfortable"
|
||||
ref="directoryInputRef"
|
||||
@keydown.enter="confirmAddDirectory"
|
||||
/>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
@@ -329,6 +212,7 @@
|
||||
required
|
||||
density="comfortable"
|
||||
ref="fileInputRef"
|
||||
@keydown.enter="confirmAddFile"
|
||||
/>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
@@ -394,6 +278,7 @@ 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'
|
||||
import TemplateTree from '@/renderer/components/TemplateTree.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
@@ -425,6 +310,11 @@ const contextMenuX = ref(0)
|
||||
const contextMenuY = ref(0)
|
||||
const currentContextItem = ref<TreeItem | null>(null)
|
||||
|
||||
// Handler for context menu visibility updates from TemplateTree component
|
||||
const handleContextMenuUpdate = (value: boolean) => {
|
||||
showContextMenuVar.value = value
|
||||
}
|
||||
|
||||
// New item state
|
||||
const newDirectoryPath = ref('')
|
||||
const newFilePath = ref('')
|
||||
@@ -677,14 +567,14 @@ const deleteItem = (item: TreeItem) => {
|
||||
const autoFocusDirectoryInput = async () => {
|
||||
await nextTick()
|
||||
if (directoryInputRef.value) {
|
||||
(directoryInputRef.value as HTMLInputElement).focus()
|
||||
;(directoryInputRef.value as HTMLInputElement).focus()
|
||||
}
|
||||
}
|
||||
|
||||
const autoFocusFileInput = async () => {
|
||||
await nextTick()
|
||||
if (fileInputRef.value) {
|
||||
(fileInputRef.value as HTMLInputElement).focus()
|
||||
;(fileInputRef.value as HTMLInputElement).focus()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user