From 6431049d052725be7a356f4418737d99c42a4203 Mon Sep 17 00:00:00 2001
From: Jasery <jaserydev@163.com>
Date: Tue, 28 Oct 2025 11:18:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=20TemplateTree=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=20v-model=20=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=20Snackbar=20=E4=BB=A5=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=94=99=E8=AF=AF=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/TemplateTree.vue      | 21 ++++-----
 src/renderer/screens/CreateTemplateScreen.vue | 43 ++++++++++++++-----
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/renderer/components/TemplateTree.vue b/src/renderer/components/TemplateTree.vue
index dc8a339..a68f480 100644
--- a/src/renderer/components/TemplateTree.vue
+++ b/src/renderer/components/TemplateTree.vue
@@ -152,7 +152,6 @@
 </template>
 
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core'
 
 interface TreeItem {
   id: string
@@ -166,8 +165,6 @@ interface Props {
   height?: number
   readOnly?: boolean
   emptyText?: string
-  expanded?: string[]
-  showContextMenuVar?: boolean
   contextMenuX?: number
   contextMenuY?: number
   currentContextItem?: TreeItem | null
@@ -177,27 +174,27 @@ const props = withDefaults(defineProps<Props>(), {
   height: 600,
   readOnly: false,
   emptyText: '暂无文件或目录',
-  expanded: () => [],
-  showContextMenuVar: false,
   contextMenuX: 0,
   contextMenuY: 0,
   currentContextItem: null
 })
 
+const localExpanded = defineModel<string[]>('expanded', {
+  default: () => []
+})
+
+const localShowContextMenuVar = defineModel<boolean>('showContextMenuVar', {
+  default: false
+})
+
 const emit = defineEmits([
   'showContextMenu',
   'addNewItemToCurrentDirectory',
   'editFile',
   'deleteItem',
   'addDirectory',
-  'addFile',
-  'update:showContextMenuVar',
-  'update:expanded'
+  'addFile'
 ])
-
-// Use useVModel to create two-way binding for props
-const localShowContextMenuVar = useVModel(props, 'showContextMenuVar', emit)
-const localExpanded = useVModel(props, 'expanded', emit)
 </script>
 
 <style scoped>
diff --git a/src/renderer/screens/CreateTemplateScreen.vue b/src/renderer/screens/CreateTemplateScreen.vue
index 23f922f..13a4063 100644
--- a/src/renderer/screens/CreateTemplateScreen.vue
+++ b/src/renderer/screens/CreateTemplateScreen.vue
@@ -141,8 +141,8 @@
         <TemplateTree
           :items="treeItems"
           :height="treeHeight"
-          :expanded="expandedNodes"
-          :show-context-menu-var="showContextMenuVar"
+          v-model:expanded="expandedNodes"
+          v-model:showContextMenuVar="showContextMenuVar"
           :context-menu-x="contextMenuX"
           :context-menu-y="contextMenuY"
           :current-context-item="currentContextItem"
@@ -154,8 +154,6 @@
           @delete-item="deleteItem"
           @add-directory="addDirectory"
           @add-file="addFile"
-          @update:showContextMenuVar="handleContextMenuUpdate"
-          @update:expanded="expandedNodes = $event"
         />
       </v-col>
     </v-row>
@@ -270,6 +268,24 @@
         </v-card-text>
       </v-card>
     </v-dialog>
+
+    <!-- Snackbar for error messages -->
+    <v-snackbar
+      v-model="snackbarVisible"
+      :color="snackbarColor"
+      :timeout="2000"
+      location="top"
+    >
+      {{ snackbarMessage }}
+      <template #actions>
+        <v-btn
+          icon
+          @click="snackbarVisible = false"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </template>
+    </v-snackbar>
   </v-container>
 </template>
 
@@ -310,10 +326,10 @@ 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
-}
+// Snackbar variables
+const snackbarVisible = ref(false)
+const snackbarMessage = ref('')
+const snackbarColor = ref('error') // Can be 'error', 'success', 'warning', etc.
 
 // New item state
 const newDirectoryPath = ref('')
@@ -470,7 +486,7 @@ const confirmAddDirectory = () => {
     (d) => d.path === newDirectoryPath.value
   )
   if (exists) {
-    alert('该目录路径已存在！')
+    showSnackbar('该目录路径已存在！')
     return
   }
 
@@ -489,7 +505,7 @@ const confirmAddFile = () => {
   // Check for duplicates
   const exists = files.value.some((f) => f.path === newFilePath.value)
   if (exists) {
-    alert('该文件路径已存在！')
+    showSnackbar('该文件路径已存在！')
     return
   }
 
@@ -563,6 +579,13 @@ const deleteItem = (item: TreeItem) => {
   }
 }
 
+// Show snackbar message
+const showSnackbar = (message: string, color: string = 'error') => {
+  snackbarMessage.value = message
+  snackbarColor.value = color
+  snackbarVisible.value = true
+}
+
 // Auto focus methods
 const autoFocusDirectoryInput = async () => {
   await nextTick()