选择目录功能

2026-06-10 03:07:32 +08:00 · 2021-09-28 17:42:07 +08:00
parent 62003faab4
commit 918b0d6bc2
9 changed files with 93 additions and 8 deletions
--- a/app/controller/v1/example.js
+++ b/app/controller/v1/example.js
@@ -196,6 +196,21 @@ class ExampleController extends BaseController {
    }
    this.sendSuccess(data);
  }
+
+  /**
+   * 选择文件夹目录
+   */
+  async selectFileDir() {
+    const { service } = this;
+
+    const data = {
+      dir: ''
+    };
+    const dir = await service.example.selectDir();
+    data.dir = dir;
+
+    this.sendSuccess(data);
+  }
 }

 module.exports = ExampleController;
--- a/app/router/example.js
+++ b/app/router/example.js
@@ -31,4 +31,6 @@ module.exports = app => {
  router.post('/api/v1/example/autoLaunchIsEnabled', controller.v1.example.autoLaunchIsEnabled);
  // open software
  router.post('/api/v1/example/openSoftware', controller.v1.example.openSoftware);
+  // select file dir
+  router.post('/api/v1/example/selectFileDir', controller.v1.example.selectFileDir);
 };
--- a/app/service/example.js
+++ b/app/service/example.js
@@ -83,6 +83,15 @@ class ExampleService extends BaseService {
    
    return callResult.data;
  }
+
+  async selectDir() {
+    const result = await this.ipcCall('example.selectDir');
+    if (!result.data) {
+      return '';
+    }
+
+    return result.data;
+  } 
 }

 module.exports = ExampleService;
--- a/electron/apis/example.js
+++ b/electron/apis/example.js
@@ -2,8 +2,9 @@

 const path = require('path');
 const fs = require('fs');
+const _ = require('lodash');
 const {exec} = require('child_process');
-const {app, webContents, shell} = require('electron');
+const {app, webContents, shell, dialog} = require('electron');
 const AutoLaunchManager = require('../lib/autoLaunch');
 const shortcut = require('../lib/shortcut');
 const eLogger = require('../lib/eLogger').get();
@@ -103,6 +104,21 @@ exports.openSoftware = function (softName = '') {
  return true;
 }

+/**
+ * 选择目录
+ */
+ exports.selectDir = function () {
+  var filePaths = dialog.showOpenDialogSync({
+    properties: ['openDirectory', 'createDirectory']
+  });
+  console.log('[example] [selectDir] filePaths:', filePaths);
+  if (_.isEmpty(filePaths)) {
+    return null
+  }
+
+  return filePaths[0];
+}
+
 function getElectronPath(filepath) {
  //filepath = path.resolve(filepath);
  filepath = filepath.replace("resources", "");
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -6,6 +6,15 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+      /* 滚动条 */
+      ::-webkit-scrollbar{width:8px;height:4px}
+      ::-webkit-scrollbar-button{width:10px;height:0}
+      ::-webkit-scrollbar-track{background:0 0}
+      ::-webkit-scrollbar-thumb{background:#E6FFEE;-webkit-transition:.3s;transition:.3s}
+      ::-webkit-scrollbar-thumb:hover{background-color:#07C160}
+      ::-webkit-scrollbar-thumb:active{background-color:#E6FFEE}
+    </style>
  </head>
  <body>
    <noscript>
--- a/frontend/src/api/main.js
+++ b/frontend/src/api/main.js
@@ -10,6 +10,7 @@ const mainApi = {
  autoLaunchDisable: '/api/v1/example/autoLaunchDisable',
  autoLaunchIsEnabled: '/api/v1/example/autoLaunchIsEnabled',
  openSoftware: '/api/v1/example/openSoftware',
+  selectFileDir: '/api/v1/example/selectFileDir',
 }

 /**
--- a/frontend/src/utils/shortcut/hot-key-input/index.vue
+++ b/frontend/src/utils/shortcut/hot-key-input/index.vue
@@ -4,12 +4,12 @@
    :class="{ cursor: focus, 'hot-key-input-shark': isShark }"
    :style="$props.style"
    tabindex="0"
+    :placeholder="list.length ? '' : placeholder"
    @focus="handleFocus"
    @blur="focus = false"
    @keydown.prevent="handleKeydown"
-    :placeholder="list.length ? '' : placeholder"
  >
-    <div class="hot-item" v-for="(item, index) in list" :key="index">
+    <div v-for="(item, index) in list" :key="index" class="hot-item">
      <span class="hot-text">{{ formatItemText(item.text) }} </span>
      <i class="icon-close" @click="handleDeleteKey(index)"></i>
    </div>
@@ -47,7 +47,7 @@ export default {
    // 默认绑定值
    // 传入 ['Ctrl+d'] 格式时会自动处理成 [{ text: 'Ctrl+d', controlKey: { altKey: false, ctrlKey: true, shiftKey: false, key: 'd', code: 'KeyD } }]
    hotkey: {
-      type: Array | Object,
+      type: [Array , Object],
      required: true,
    },
    // 校验函数 判断是否允许显示快捷键
--- a/frontend/src/views/demo/file/Index.vue
+++ b/frontend/src/views/demo/file/Index.vue
@@ -1,6 +1,5 @@
 <template>
  <div id="app-demo-file">
-		<!-- 1 -->
    <div class="one-block-1">
      <span>
        上传文件到sm图床
@@ -34,7 +33,6 @@
        </a-list-item>
      </a-list>
    </div>
-		<!-- 2 -->
    <div class="one-block-1">
      <span>
        打开文件夹
@@ -51,6 +49,22 @@
        </a-list-item>
      </a-list>
    </div>
+    <div class="one-block-1">
+      <span>
+        保存到目录
+      </span>
+    </div>  
+    <div class="one-block-2">
+			<a-input addon-before="保存目录" v-model="dir_path" :value="dir_path" />
+			<a-button @click="selectDir">修改目录</a-button>
+      <!-- <a-card hoverable style="width: 100%">
+        <template slot="actions" class="ant-card-actions">
+          <a @click="selectDir">修改目录</a>
+        </template>
+        <a-card-meta v-model="dir_path" title="保存目录" :description="dir_path">
+        </a-card-meta>
+      </a-card> -->
+    </div>
  </div>
 </template>
 <script>
@@ -81,7 +95,8 @@ export default {
      file_list: fileList,
      action_url: process.env.VUE_APP_API_BASE_URL + '/api/v1/example/uploadFile',
      image_info: [],
-      num: 0
+      num: 0,
+			dir_path: "D:\\www\\xing\\electron-egg",
    };
  },
  methods: {
@@ -120,7 +135,17 @@ export default {
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
-    }
+    },
+		selectDir() {
+      localApi('selectFileDir', {}).then(res => {
+        if (res.code !== 0) {
+          return false
+        }
+        this.dir_path = res.data.dir;
+      }).catch(err => {
+        this.$message.error('异常')
+      })
+    },
  }
 };
 </script>
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -8,6 +8,14 @@ module.exports = {
        "maxAssetSize": 30000000,
      }
    },
+    chainWebpack: config => {
+      config
+        .plugin('html')
+        .tap(args => {
+          args[0].title= 'electron-egg'
+          return args
+        })
+    },
    css: {
      loaderOptions: {
          less: {