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()