Эх сурвалжийг харах

feat(template-panel): add output directory functionality in DirectoryBrowserSection

- Introduced a new button to set the current path as the output directory.
- Added an input field for users to specify an output directory path, with validation and handling for empty inputs.
- Implemented methods to synchronize and set the output directory in the template store, enhancing user experience in directory management.
zhch158_admin 23 цаг өмнө
parent
commit
660a98fa65

+ 54 - 0
table_line_generator/frontend/src/components/panels/template-panel/DirectoryBrowserSection.vue

@@ -69,6 +69,13 @@
         >
           设为JSON目录
         </el-button>
+        <el-button 
+          size="small"
+          @click="setAsOutputDir"
+          :disabled="!templateStore.currentPath"
+        >
+          设为输出目录
+        </el-button>
       </div>
       
       <div class="scan-config" v-if="templateStore.scanConfig.imageDir">
@@ -80,6 +87,27 @@
           <label>JSON目录:</label>
           <span>{{ templateStore.scanConfig.jsonDir }}</span>
         </div>
+        <div class="config-item">
+          <label>输出目录:</label>
+          <el-input
+            v-model="outputDirInput"
+            size="small"
+            placeholder="输入输出目录路径(可不存在)"
+            @keyup.enter.prevent="handleSetOutputDir"
+            @blur="handleSetOutputDir"
+            clearable
+          >
+            <template #append>
+              <el-button 
+                @click="handleSetOutputDir"
+                :disabled="!outputDirInput"
+                size="small"
+              >
+                设置
+              </el-button>
+            </template>
+          </el-input>
+        </div>
         <el-button 
           type="success" 
           size="small"
@@ -94,6 +122,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref, watch } from 'vue'
 import { ArrowUp, Folder, FolderOpened, Search } from '@element-plus/icons-vue'
 import { useTemplateStore } from '@/stores'
 import { useDirectory } from './composables'
@@ -107,6 +136,8 @@ const {
   goToParent,
   setAsImageDir,
   setAsJsonDir,
+  setAsOutputDir,
+  setOutputDir,
   scanFiles
 } = useDirectory()
 
@@ -114,6 +145,23 @@ const emit = defineEmits<{
   filesScanned: []
 }>()
 
+// 输出目录输入框
+const outputDirInput = ref('')
+
+// 同步输出目录到输入框
+watch(() => templateStore.scanConfig.outputDir, (newVal) => {
+  if (newVal && newVal !== outputDirInput.value) {
+    outputDirInput.value = newVal
+  }
+}, { immediate: true })
+
+// 处理设置输出目录
+function handleSetOutputDir() {
+  if (outputDirInput.value) {
+    setOutputDir(outputDirInput.value)
+  }
+}
+
 async function handleScanFiles() {
   const result = await scanFiles()
   if (result) {
@@ -173,16 +221,22 @@ async function handleScanFiles() {
       gap: 8px;
       margin-bottom: 8px;
       font-size: 12px;
+      align-items: center;
       
       label {
         color: #909399;
         min-width: 70px;
+        flex-shrink: 0;
       }
       
       span {
         color: #303133;
         word-break: break-all;
       }
+      
+      :deep(.el-input) {
+        flex: 1;
+      }
     }
   }
 }

+ 37 - 0
table_line_generator/frontend/src/components/panels/template-panel/composables/useDirectory.ts

@@ -90,6 +90,41 @@ export function useDirectory() {
   }
   
   /**
+   * 设置为输出目录(从当前浏览的目录)
+   */
+  function setAsOutputDir() {
+    if (!templateStore.currentPath) {
+      ElMessage.warning('请先浏览到目标目录')
+      return false
+    }
+    
+    templateStore.setScanConfig({
+      ...templateStore.scanConfig,
+      outputDir: templateStore.currentPath
+    })
+    ElMessage.success('已设置输出目录')
+    return true
+  }
+  
+  /**
+   * 直接设置输出目录(允许目录不存在)
+   */
+  function setOutputDir(path: string) {
+    const trimmedPath = path.trim()
+    if (!trimmedPath) {
+      ElMessage.warning('请输入输出目录路径')
+      return false
+    }
+    
+    templateStore.setScanConfig({
+      ...templateStore.scanConfig,
+      outputDir: trimmedPath
+    })
+    ElMessage.success('已设置输出目录')
+    return true
+  }
+  
+  /**
    * 扫描文件对
    */
   async function scanFiles() {
@@ -145,6 +180,8 @@ export function useDirectory() {
     goToParent,
     setAsImageDir,
     setAsJsonDir,
+    setAsOutputDir,
+    setOutputDir,
     scanFiles,
     browseToHome,
     clearPathInput