feat: 选择扫描文件夹

1. 添加扫描文件夹功能
2. 添加api防抖功能

src/App.vue

@@ -169,7 +169,6 @@ function openApplication(key: string)
   console.log(runningApplications);
   openApp(key);
   closeApplicationCenter();
-
 }
 </script>
 

src/apis/ApiAction.ts

@@ -6,6 +6,6 @@ export enum Magnet_Actions {
 
 
 export enum Music_Actions {
-  get_play_list= 'get_play_list',
-
+  play_list_fetch= 'play_list_fetch',
+  scan_music_select = 'scan_music_select',
 }

src/apis/baseApi.ts

@@ -273,14 +273,21 @@ export class ApiController {
         this.signId = signId
     }
 
+    _findTaskByAction(action)
+    {
+        return this.sendTasks.find(task => {
+            return task.action === action
+        })
+    }
 
     /**
      * 调用ipc 获取数据
      * @param action
      * @param params
      * @param timeout
+     * @param once 是否合并多个请求
      */
-    sendQuery(action: string, params: any, timeout: number = 10 * 1000): [callId: string, Promise<ResponseData<any>>] {
+    sendQuery(action: string, params: any, timeout: number = 10 * 1000, once: boolean = false): [callId: string, Promise<ResponseData<any>>] {
         let callId = this.buildCallId()
         let requestData: RequestData = {
             type: ApiType.req,
@@ -291,6 +298,27 @@ export class ApiController {
             timeout: timeout,
         }
         console.log(requestData)
+        if (once)
+        {
+            // 寻找队列中是否存在相同的请求. 如果有则直接返回, 不再发送请求
+            let _task = this._findTaskByAction(action);
+            if (_task)
+            {
+                // 返回一个直接触发的promise, 并将此次请求无效化
+                let promise: Promise<ResponseData<null>> = new Promise((resolve, reject): Promise<ResponseData<null>> => {
+                    resolve({
+                        type: ApiType.res,
+                        action: action,
+                        callId: callId,
+                        code: ErrorCode.cancel,
+                        msg: '请求被取消',
+                        data: null,
+                    })
+                })
+                console.log(`[I] sendQuery: ${action} has same task, return a promise`);
+                return [callId, promise];
+            }
+        }
         if(this.isInit){
             if (this.sendCallback){
                 this.sendCallback(this.sendKey, requestData)

src/apis/musicControl.ts

@@ -5,8 +5,17 @@ import {Music_Actions} from "@/apis/ApiAction.ts";
 
 export async function fetchPlayList(): Promise< ResponseData<Magnet[]> >
 {
-    let [_callId, promise] = api.sendQuery(Music_Actions.get_play_list, {});
+    let [_callId, promise] = api.sendQuery(Music_Actions.play_list_fetch, {});
     let response = await promise;
 
     return response;
 }
+
+
+export async function selectScanDir(defaultPath: string): Promise< ResponseData<string> >
+{
+    let [_callId, promise] = api.sendQuery(Music_Actions.scan_music_select, defaultPath, -1);
+    return await promise;
+}
+
+

src/components/music/dialog/addScan.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, ref} from "vue";
+import KuiInput from "@/components/public/kui/kui-input.vue";
+import message from "@/components/public/kui/message";
+import {selectScanDir} from "@/apis/musicControl.ts";
 
 defineComponent({
   name: "addScanDialog"
@@ -10,10 +13,23 @@ const emits = defineEmits<{
     (e: 'submit'): void
 }>()
 
+const dirPath = ref('');
+
 function closeDialog() {
   emits('close');
 }
 
+async function selectPathHandle() {
+  let responseData = await selectScanDir(dirPath.value);
+  // console.log(responseData)
+  if (responseData.code === 0) {
+    dirPath.value = responseData.data;
+    // message.success(`选择目录: ${responseData.data}`);
+  } else {
+    message.error(responseData.msg);
+  }
+}
+
 </script>
 
 <template>
@@ -28,12 +44,23 @@ function closeDialog() {
     </div>
 
     <div class="dialog-show">
-
+      <div class="form-row" >
+        <kui-input label="扫描路径"
+                   placeholder="点击选择文件"
+                   @firstClick="selectPathHandle"
+                   :value="dirPath"
+        />
+      </div>
     </div>
 
   </div>
 </template>
 
 <style scoped>
-
+.form-row{
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
 </style>

src/components/public/kui/kui-input.vue

@@ -0,0 +1,168 @@
+<script >
+import IconSvg from "@/components/public/icon/iconSvg.vue";
+
+export default {
+  name: "kui-input",
+  components: {IconSvg},
+  props: {
+    formId: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    iconPosition: {
+      type: String,
+      default: 'left'
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+
+  },
+  data() {
+    return {
+      inputValue: this.value,
+      showPassword: false,
+      labelWidth: 10
+    }
+  },
+  computed: {
+    id(){
+      // 随机字符加上指定的id
+      return this.formId + '_' + this.label
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.inputValue = newVal
+    }
+  },
+  mounted() {
+    this.labelWidth = this.comIndent()
+  },
+  methods: {
+    clickHandle(){
+      this.$emit('firstClick', this.inputValue);
+    },
+    changeHandle(e){
+      let nextVal = e.target.value
+      this.inputValue = nextVal
+      this.$emit('input', this.inputValue)
+    },
+    passwordChangeHandle(){
+      this.showPassword = !this.showPassword
+    },
+    comIndent() {
+      // 获取label的长度, 计算input的缩进长度
+      let labelWidth = this.$refs.label.offsetWidth
+      return labelWidth
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="input-box">
+
+      <input class="basic-slide"
+             :id="id"
+             :type="showPassword ? 'text' : type"
+             :value="inputValue"
+             @change="changeHandle"
+             :placeholder="placeholder"
+             @click="clickHandle"
+             :style="`--text-indent-value: ${labelWidth}px;`"
+      />
+
+    <label :for="id" ref="label">
+      <slot></slot>
+      {{ label }}
+    </label>
+      <div class="icon-box" v-if="type==='password'" @click="passwordChangeHandle">
+        <icon-svg :icon-class="showPassword ? 'eye-open' : 'eye-close'"></icon-svg>
+      </div>
+  </div>
+</template>
+
+<style scoped>
+.input-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.input-box .icon-box{
+  position: absolute;
+  right: 5px;
+  top: 0;
+  width: 30px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.basic-slide {
+  --text-indent-value: 0;
+  display: inline-block;
+  width: 100%;
+  padding: 10px 0 10px 15px;
+  font-family: "Open Sans", sans;
+  font-weight: 400;
+  color: #377D6A;
+  background: #efefef;
+  border: 0;
+  border-radius: 3px;
+  outline: 0;
+  text-indent: var(--text-indent-value);
+  transition: all 0.3s ease-in-out;
+}
+.basic-slide::-webkit-input-placeholder {
+  color: #efefef;
+  text-indent: 0;
+  font-weight: 300;
+}
+.input-box > label {
+  display: inline-flex;
+  position: absolute;
+  top: -1px;
+  left: 0;
+  height: 100%;
+  padding: 0 15px;
+  align-items: center;
+  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
+  background: #7AB893;
+  transition: all 0.3s ease-in-out;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.basic-slide:focus, .basic-slide:active {
+  color: #377D6A;
+  text-indent: 0;
+  background: #fff;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  box-shadow: 0 0 2px;
+}
+.basic-slide:focus::-webkit-input-placeholder, .basic-slide:active::-webkit-input-placeholder {
+  color: #aaa;
+}
+.basic-slide:focus + label, .basic-slide:active + label {
+  transform: translateX(-100%);
+}
+
+
+</style>

src/main/control/api_router.ts

@@ -1,6 +1,7 @@
 import {ApiType, ErrorCode, RequestData, ResponseData} from "@/types/apiTypes.ts";
-import {Magnet_Actions} from "@/apis/ApiAction.ts";
+import {Magnet_Actions, Music_Actions} from "@/apis/ApiAction.ts";
 import {c_fetchMagnetList, c_magnet_batch_update, c_magnet_delete} from "@/main/control/magnet/magnet.ts";
+import {c_fetchPlayList, c_scanMusicSelect} from "@/main/control/magnet/music.ts";
 
 export async function apiRouter(requestData: RequestData){
     // 生成callId
@@ -16,6 +17,12 @@ export async function apiRouter(requestData: RequestData){
         case Magnet_Actions.magnet_delete:
             responseData = await c_magnet_delete(requestData);
             break;
+        case Music_Actions.play_list_fetch:
+            responseData = await c_fetchPlayList();
+            break;
+        case Music_Actions.scan_music_select:
+            responseData = await c_scanMusicSelect(requestData);
+            break;
         default:
             responseData = {
                 type: ApiType.res,

src/main/control/magnet/music.ts

@@ -0,0 +1,45 @@
+import {dialog} from "electron"
+import {ApiType, ErrorCode, RequestData, ResponseData} from "@/types/apiTypes.ts";
+import Logger from "@/util/logger.ts";
+let logger = Logger.logger('music', 'info');
+
+export async function c_fetchPlayList(requestData: RequestData)
+{
+    let responseData: ResponseData<any>
+    responseData = {
+        type: ApiType.res,
+        code: ErrorCode.success,
+        callId: requestData.callId,
+        action: requestData.action,
+        msg: '暂无歌单',
+        data: [],
+    }
+    return responseData;
+}
+
+
+export async function c_scanMusicSelect(requestData: RequestData): Promise<ResponseData<string>>
+{
+    let defaultPath = requestData.data;
+    let responseData: ResponseData<any>
+    logger.info(`select scan dir`);
+    let result = await dialog.showOpenDialog({
+        defaultPath: defaultPath,
+        properties: ['openDirectory'],
+        multiSelections: false,
+        title: '请选择扫描目录'
+    })
+    console.log(result)
+    logger.info(`scan dir ${result.filePaths[0]}`);
+
+    responseData = {
+        type: ApiType.res,
+        code: ErrorCode.success,
+        callId: requestData.callId,
+        action: requestData.action,
+        msg: '',
+        data: result.filePaths[0],
+    }
+
+    return responseData;
+}