From 2f85832b89f7575cc8f55598b6a045eb621c85a7 Mon Sep 17 00:00:00 2001
From: Jasery <jaserydev@163.com>
Date: Mon, 27 Oct 2025 23:12:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=9B=BD=E9=99=85=E5=8C=96=E6=BA=90?=
 =?UTF-8?q?=E8=AF=AD=E8=A8=80=E5=92=8CVue=E6=A0=BC=E5=BC=8F=E5=8C=96?=
 =?UTF-8?q?=E5=99=A8=E9=85=8D=E7=BD=AE=EF=BC=9B=E4=BC=98=E5=8C=96=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E6=A8=A1=E6=9D=BF=E7=95=8C=E9=9D=A2=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=BC=BA=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .npmrc                                        |   1 +
 .vscode/settings.json                         |   6 +-
 eslint.config.ts                              |   1 +
 src/renderer/screens/CreateTemplateScreen.vue | 384 ++++++++++++++----
 4 files changed, 303 insertions(+), 89 deletions(-)
 create mode 100644 .npmrc

diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..4464e3d
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+electron_mirror=https://npmmirror.com/mirrors/electron/
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 225277b..31a39ee 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -24,5 +24,9 @@
     },
     "i18n-ally.localesPaths": [
       "src/renderer/locales"
-    ]
+    ],
+    "i18n-ally.sourceLanguage": "zh-hans",
+    "[vue]": {
+      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    }
 }
diff --git a/eslint.config.ts b/eslint.config.ts
index 4b0c22f..ee52ad5 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -60,6 +60,7 @@ export default pluginTypeScriptESLint.config(
       'vue/v-on-event-hyphenation': 'off',
       'vue/no-v-text-v-html-on-component': 'off',
       'vue/attribute-hyphenation': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
       'vue/max-attributes-per-line': [
         'error',
         {
diff --git a/src/renderer/screens/CreateTemplateScreen.vue b/src/renderer/screens/CreateTemplateScreen.vue
index 36e63b0..8bcbe34 100644
--- a/src/renderer/screens/CreateTemplateScreen.vue
+++ b/src/renderer/screens/CreateTemplateScreen.vue
@@ -1,77 +1,164 @@
 <template>
-  <v-container fluid class="pa-0 fill-height">
+  <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">
+      <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-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-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-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
+            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">
+      <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-btn
+            icon
+            variant="text"
+            @click="addRootDirectory"
+            size="small"
+          >
             <v-icon>mdi-folder-plus</v-icon>
-            <v-tooltip activator="parent" location="bottom">
+            <v-tooltip
+              activator="parent"
+              location="bottom"
+            >
               添加根目录
             </v-tooltip>
           </v-btn>
-          <v-btn icon variant="text" @click="addRootFile" size="small">
+          <v-btn
+            icon
+            variant="text"
+            @click="addRootFile"
+            size="small"
+          >
             <v-icon>mdi-file-plus</v-icon>
-            <v-tooltip activator="parent" location="bottom">
+            <v-tooltip
+              activator="parent"
+              location="bottom"
+            >
               添加根文件
             </v-tooltip>
           </v-btn>
-          <v-btn icon variant="text" @click="expandAll" size="small">
+          <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"
-          @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">
+        <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 #prepend="{ item }">
+              <v-icon
+                :color="item.type === 'directory' ? 'warning' : 'info'"
+                size="large"
+              >
                 {{
                   item.type === 'directory'
                     ? 'mdi-folder-outline'
@@ -80,33 +167,65 @@
               </v-icon>
             </template>
 
-            <template v-slot:title="{ item }">
-              <span @contextmenu.prevent="showContextMenu($event, item)" class="cursor-pointer d-flex align-center">
+            <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-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
+                    activator="parent"
+                    location="top"
+                  >
                     添加到目录
                   </v-tooltip>
                 </v-btn>
               </span>
             </template>
 
-            <template v-slot:append="{ item }">
+            <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-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">
+                <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>
@@ -114,18 +233,31 @@
             </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-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-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>
+              <template #prepend>
                 <v-icon>mdi-folder-plus</v-icon>
               </template>
               <v-list-item-title>
@@ -134,7 +266,7 @@
             </v-list-item>
 
             <v-list-item @click="addFile(currentContextItem)">
-              <template v-slot:prepend>
+              <template #prepend>
                 <v-icon>mdi-file-plus</v-icon>
               </template>
               <v-list-item-title>
@@ -147,21 +279,33 @@
     </v-row>
 
     <!-- Add Directory Dialog -->
-    <v-dialog v-model="showDirectoryDialog" max-width="500">
+    <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"
+              ref="directoryInputRef"
+            />
           </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 @click="showDirectoryDialog = false"> 取消 </v-btn>
+          <v-btn
+            color="primary"
+            @click="confirmAddDirectory"
+            :disabled="!directoryFormValid"
+          >
             添加
           </v-btn>
         </v-card-actions>
@@ -169,21 +313,33 @@
     </v-dialog>
 
     <!-- Add File Dialog -->
-    <v-dialog v-model="showFileDialog" max-width="500">
+    <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"
+              ref="fileInputRef"
+            />
           </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 @click="showFileDialog = false"> 取消 </v-btn>
+          <v-btn
+            color="primary"
+            @click="confirmAddFile"
+            :disabled="!fileFormValid"
+          >
             添加并编辑
           </v-btn>
         </v-card-actions>
@@ -191,24 +347,42 @@
     </v-dialog>
 
     <!-- File Content Editor Dialog -->
-    <v-dialog v-model="showEditorDialog" fullscreen>
+    <v-dialog
+      v-model="showEditorDialog"
+      fullscreen
+    >
       <v-card>
-        <v-toolbar dark color="primary">
-          <v-btn icon @click="showEditorDialog = false">
+        <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-toolbar-title> 编辑文件: {{ 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>
@@ -241,11 +415,15 @@ const showEditorDialog = ref(false)
 const directoryFormValid = ref(false)
 const fileFormValid = ref(false)
 
+// Input refs for auto-focus
+const directoryInputRef = ref<HTMLInputElement | null>(null)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
 // Context menu
 const showContextMenuVar = ref(false)
 const contextMenuX = ref(0)
 const contextMenuY = ref(0)
-const currentContextItem = ref<any>(null)
+const currentContextItem = ref<TreeItem | null>(null)
 
 // New item state
 const newDirectoryPath = ref('')
@@ -275,7 +453,7 @@ const treeItems = computed<TreeItem[]>(() => {
   const items: TreeItem[] = []
 
   // Add directories
-  directories.value.forEach(dir => {
+  directories.value.forEach((dir) => {
     items.push({
       id: `dir-${dir.path}`,
       name: dir.path,
@@ -285,7 +463,7 @@ const treeItems = computed<TreeItem[]>(() => {
   })
 
   // Add files
-  files.value.forEach(file => {
+  files.value.forEach((file) => {
     items.push({
       id: `file-${file.path}`,
       name: file.path,
@@ -297,12 +475,16 @@ const treeItems = computed<TreeItem[]>(() => {
 })
 
 // Validation rules
-const requiredRule = (v: any) => !!v || '此字段为必填项'
+const requiredRule = (v: string | null | undefined) => !!v || '此字段为必填项'
 
 // Watch for changes to detect unsaved changes
-watch([templateName, templateDescription, directories, files], () => {
-  hasChanges.value = true
-}, { deep: true })
+watch(
+  [templateName, templateDescription, directories, files],
+  () => {
+    hasChanges.value = true
+  },
+  { deep: true }
+)
 
 // Lifecycle
 onMounted(async () => {
@@ -343,7 +525,7 @@ const updateTreeHeight = () => {
   treeHeight.value = window.innerHeight - 200
 }
 
-const showContextMenu = (event: MouseEvent, item: any) => {
+const showContextMenu = (event: MouseEvent, item: TreeItem | null) => {
   event.preventDefault()
   contextMenuX.value = event.clientX
   contextMenuY.value = event.clientY
@@ -359,37 +541,44 @@ const showContextMenu = (event: MouseEvent, item: any) => {
 const addRootDirectory = () => {
   newDirectoryPath.value = ''
   showDirectoryDialog.value = true
+  autoFocusDirectoryInput()
 }
 
 const addRootFile = () => {
   newFilePath.value = ''
   showFileDialog.value = true
+  autoFocusFileInput()
 }
 
-const addDirectory = (parentItem: any = null) => {
+const addDirectory = (parentItem: TreeItem | null = null) => {
   showContextMenuVar.value = false
   currentContextItem.value = parentItem
   newDirectoryPath.value = parentItem ? `${parentItem.name}/` : ''
   showDirectoryDialog.value = true
+  autoFocusDirectoryInput()
 }
 
-const addFile = (parentItem: any = null) => {
+const addFile = (parentItem: TreeItem | null = null) => {
   showContextMenuVar.value = false
   newFilePath.value = parentItem ? `${parentItem.name}/` : ''
   showFileDialog.value = true
+  autoFocusFileInput()
 }
 
-const addNewItemToCurrentDirectory = (directoryItem: any) => {
+const addNewItemToCurrentDirectory = (directoryItem: TreeItem) => {
   currentContextItem.value = directoryItem
   newDirectoryPath.value = directoryItem ? `${directoryItem.name}/` : ''
   showDirectoryDialog.value = true
+  autoFocusDirectoryInput()
 }
 
 const confirmAddDirectory = () => {
   if (!newDirectoryPath.value.trim()) return
 
   // Check for duplicates
-  const exists = directories.value.some(d => d.path === newDirectoryPath.value)
+  const exists = directories.value.some(
+    (d) => d.path === newDirectoryPath.value
+  )
   if (exists) {
     alert('该目录路径已存在！')
     return
@@ -408,7 +597,7 @@ const confirmAddFile = () => {
   if (!newFilePath.value.trim()) return
 
   // Check for duplicates
-  const exists = files.value.some(f => f.path === newFilePath.value)
+  const exists = files.value.some((f) => f.path === newFilePath.value)
   if (exists) {
     alert('该文件路径已存在！')
     return
@@ -440,15 +629,15 @@ const goBack = () => {
 }
 
 const expandAll = () => {
-  expandedNodes.value = treeItems.value.map(item => item.id)
+  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)
+const editFile = (item: TreeItem) => {
+  const file = files.value.find((f) => `file-${f.path}` === item.id)
   if (file) {
     editFileContent(file)
   }
@@ -462,7 +651,9 @@ const editFileContent = (file: { path: string; content: string }) => {
 
 const saveFileContent = () => {
   if (editingFile.value) {
-    const index = files.value.findIndex(f => f.path === editingFile.value?.path)
+    const index = files.value.findIndex(
+      (f) => f.path === editingFile.value?.path
+    )
     if (index !== -1) {
       files.value[index].content = editingFileContent.value
     }
@@ -470,13 +661,30 @@ const saveFileContent = () => {
   showEditorDialog.value = false
 }
 
-const deleteItem = (item: any) => {
+const deleteItem = (item: TreeItem) => {
   if (!confirm('确定要删除此项吗？')) return
 
   if (item.type === 'directory') {
-    directories.value = directories.value.filter(d => `dir-${d.path}` !== item.id)
+    directories.value = directories.value.filter(
+      (d) => `dir-${d.path}` !== item.id
+    )
   } else {
-    files.value = files.value.filter(f => `file-${f.path}` !== item.id)
+    files.value = files.value.filter((f) => `file-${f.path}` !== item.id)
+  }
+}
+
+// Auto focus methods
+const autoFocusDirectoryInput = async () => {
+  await nextTick()
+  if (directoryInputRef.value) {
+    (directoryInputRef.value as HTMLInputElement).focus()
+  }
+}
+
+const autoFocusFileInput = async () => {
+  await nextTick()
+  if (fileInputRef.value) {
+    (fileInputRef.value as HTMLInputElement).focus()
   }
 }