feat: 编辑扫描配置

1. 编辑扫描配置功能

src/assets/public.css

@@ -18,4 +18,30 @@
 .cover img {
     width: 100%;
     height: 100%;
-}
+}
+
+.line-row {
+    width: 100%;
+    height: 35px;
+    display: flex;
+    align-items: center;
+}
+.line-row .label {
+    width: 30%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-shrink: 1;
+}
+
+.line-row .value {
+    width: 70%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-shrink: 1;
+    box-sizing: border-box;
+    padding: 0 10px;
+}

src/common/db/db_music.ts

@@ -231,7 +231,7 @@ export async function getScanConfig() : PromiseResult<MusicScanSetting[]>
         return [new Error('音乐数据库初始化失败'), null]
     }
     let [err, res] = await handle(
-        db.select('name', 'path', 'scanSubDir', 'isFileRepeat')
+        db.select('id', 'name', 'path', 'scanSubDir', 'isFileRepeat')
             .from(MusicTableName.music_scan_setting)
     )
     if (err) {
@@ -336,4 +336,4 @@ export async function addPlayList(playList: PlayList) : PromiseResult<boolean>
         return [err, false];
     }
     return [null, true];
-}
+}

src/components/music/common/mSettingScan.vue

@@ -8,6 +8,7 @@ import addScanDialog from "@/components/music/dialog/addScan.vue"
 import message from "@/components/public/kui/message";
 import {fetchScanConfig} from "@/apis/musicControl.ts";
 import {ErrorCode} from "@/types/apiTypes.ts";
+import IconSvg from "@/components/public/icon/iconSvg.vue";
 
 defineComponent({
   name: 'm-setting-scan'
@@ -33,9 +34,17 @@ const kuiDialog = new KuiDialogCmd({
   mountTarget: props.windowId,
   className: 'dialog',
   on: {
-    onSubmit: testFn
-  }
+    onSubmit: testFn,
+  },
+  onClose: closeScanDialogHandle
 });
+
+function closeScanDialogHandle()
+{
+  // fetchScanSetting();
+  return true;
+}
+
 function openDialog()
 {
   if(!kuiDialog.isShow())
@@ -60,6 +69,12 @@ onBeforeMount(()=>{
   fetchScanSetting();
 })
 
+
+function editScanHandle(item: MusicScanSetting)
+{
+  kuiDialog.show({scanSetting: item});
+}
+
 </script>
 
 <template>
@@ -75,8 +90,19 @@ onBeforeMount(()=>{
           {{ item.name }}
         </div>
         <div class="scan-content">
-          <div class="scan-item-content">{{ item.path }}</div>
-
+          <div class="line-row">{{ item.path }}</div>
+          <div class="line-row">
+            <span class="label">扫描子目录: </span>
+            <span class="value"> {{ item.scanSubDir ? '是' : '否' }}</span>
+
+          </div>
+          <div class="line-row">
+            <span class="label">是否允许重复文件:</span>
+            <span class="value"> {{ item.isFileRepeat ? '是' : '否' }}</span>
+          </div>
+        </div>
+        <div class="edit-btn" @click="editScanHandle(item)">
+          <icon-svg icon-name="edit"/>
         </div>
       </div>
     </div>
@@ -86,6 +112,7 @@ onBeforeMount(()=>{
 </template>
 
 <style scoped>
+@import "../../../assets/public.css";
 .btn-group{
   width: 100%;
   height: 50px;
@@ -116,12 +143,13 @@ onBeforeMount(()=>{
 
 .scan-item{
   width: calc(100% - 40px);
-  height: 120px;
+  height: 140px;
   border-radius: 1rem;
   margin: 20px auto 0;
   box-sizing: border-box;
   padding: 5px 10px;
   background-color: var(--color-background-mute);
+  position: relative;
 }
 .scan-item .scan-title{
   width: 100%;
@@ -129,6 +157,35 @@ onBeforeMount(()=>{
   font-size: 1.2rem;
   font-weight: bold;
 }
+.line-row {
+  height: 30px;
+}
+.line-row .label{
+  width: 9rem;
+}
+.line-row .value{
+  width: calc(100% - 9rem);
+}
+.edit-btn{
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  border-radius: 50%;
+  box-shadow: 0 0 5px 2px white;
+  font-size: 1.4rem;
+}
+.edit-btn:hover{
+  background-color: var(--color-btn-bg-hover);
+  color: var(--color-btn-text-hover);
+}
+
 
 
 </style>

src/components/music/dialog/addScan.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {defineComponent, ref} from "vue";
+import {defineComponent, onMounted, PropType, ref} from "vue";
 import KuiInput from "@/components/public/kui/kui-input.vue";
 import message from "@/components/public/kui/message";
 import {addScanDir, selectScanDir} from "@/apis/musicControl.ts";
@@ -10,16 +10,44 @@ defineComponent({
   name: "addScanDialog"
 })
 
+const props = defineProps({
+  scanSetting: {
+    type: Object as PropType<MusicScanSetting>,
+    default: () => {
+      return {
+        id: -1,
+        name: '',
+        path: '',
+        scanSubDir: false,
+        isFileRepeat: false
+      }
+    }
+  }
+  }
+)
+
 const emits = defineEmits<{
     (e: 'close' ): void,
     (e: 'submit'): void
 }>()
 
+const isEdit = ref(false);
 const name = ref('');
 const dirPath = ref('');
 const scanSubDir = ref(false);
 const isFileRepeat = ref(false);
 
+onMounted(()=>{
+  console.log(props.scanSetting);
+  if ( props.scanSetting && props.scanSetting.id > 0) {
+    isEdit.value = true;
+    name.value = props.scanSetting.name;
+    dirPath.value = props.scanSetting.path;
+    scanSubDir.value = props.scanSetting.scanSubDir;
+    isFileRepeat.value = props.scanSetting.isFileRepeat;
+  }
+})
+
 function closeDialog() {
   emits('close');
 }
@@ -68,7 +96,7 @@ async function submitHandle() {
 <template>
   <div class="dialog-content form-dialog">
     <div class="dialog-title">
-      添加扫描路径
+      {{ isEdit? '编辑扫描路径' : '新增扫描路径' }}
       <div
           class="close-btn"
           @click="closeDialog()">

src/components/public/kui-dialog-cmd.ts

@@ -83,8 +83,8 @@ export class KuiDialogCmd {
             this.targetEl.removeChild(this.containerEl);
         }
         render(null, this.containerEl);
-        if (closeFn) closeFn();
         this.showFlag = false;
+        if (closeFn) closeFn();
     }
 
     getAllListeners() {

src/style.css

@@ -37,6 +37,9 @@
   --vt-c-text-dark-3: #56a7fb;
   --vt-c-text-light-title: #fffff;
   --vt-c-text-red: #e74c3c;
+
+  --vt-blue-500: #56a7fb;
+  --vt-c-blue-500: #56a7fb;
 }
 
 :root {
@@ -56,7 +59,7 @@
   --color-btn-bg: var(--vt-c-indigo);
   --color-btn-text: var(--vt-c-white);
 
-  --color-btn-bg-hover: var(--vt-c-indigo);
+  --color-btn-bg-hover: var(--vt-c-text-light-1);
   --color-btn-text-hover: var(--vt-c-white);
 
   --color-btn-text-disabled: var(--vt-c-text-light-2);