feat: 新增表单类弹窗

1. 表单类弹窗组件增加
2. 按钮样式增加

src/apis/musicControl.ts

@@ -14,7 +14,7 @@ export async function fetchPlayList(): Promise< ResponseData<Magnet[]> >
 
 export async function selectScanDir(defaultPath: string): Promise< ResponseData<string> >
 {
-    let [_callId, promise] = api.sendQuery(Music_Actions.scan_music_select, defaultPath, -1);
+    let [_callId, promise] = api.sendQuery(Music_Actions.scan_music_select, defaultPath, -1, true);
     return await promise;
 }
 

src/assets/base.css

@@ -213,6 +213,10 @@
     align-items: center;
     z-index: 1000;
 }
+.form-dialog{
+
+}
+
 .dialog-mask::before{
     content: '';
     position: absolute;
@@ -263,6 +267,21 @@
     padding: 5px;
 }
 
+.form-dialog .dialog-show{
+    height: calc(100% - 80px);
+}
+
+.form-dialog .dialog-footer{
+    width: 100%;
+    height: 50px;
+    box-sizing: border-box;
+    padding: 0 20px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border-top: 1px solid #eee;
+}
+
 
 .site{
     width: 100%;
@@ -391,6 +410,49 @@
     transform: rotate(180deg);
 }
 
+.primary-btn{
+    background-color: #5cb7fd;
+    color: #fff;
+    border: 1px solid #5cb7fd;
+}
+.primary-btn:hover{
+    background-color: #3f9efd;
+    color: #fff;
+    border: 1px solid #3f9efd;
+}
+.primary-btn:focus{
+    outline: none;
+}
+.primary-btn:active{
+    background-color: #3f9efd;
+    color: #fff;
+    border: 1px solid #3f9efd;
+}
+.primary-btn:disabled{
+    background-color: #ccc;
+    color: #ccc;
+    cursor: not-allowed;
+}
+
+.cancel-btn{
+    background-color: #ccc;
+    color: #fff;
+    border: 1px solid #ccc;
+}
+.cancel-btn:hover{
+    background-color: #bbb;
+    color: #fff;
+    border: 1px solid #bbb;
+}
+.cancel-btn:focus{
+    outline: none;
+}
+.cancel-btn:active{
+    background-color: #bbb;
+    color: #fff;
+    border: 1px solid #bbb;
+}
+
 
 .event-mask{
     position: absolute;

src/components/music/dialog/addScan.vue

@@ -33,7 +33,7 @@ async function selectPathHandle() {
 </script>
 
 <template>
-  <div class="dialog-content">
+  <div class="dialog-content form-dialog">
     <div class="dialog-title">
       添加扫描路径
       <div
@@ -51,6 +51,11 @@ async function selectPathHandle() {
                    :value="dirPath"
         />
       </div>
+
+    </div>
+    <div class="dialog-footer">
+      <div class="btn cancel-btn mr-2" @click="closeDialog()">取消</div>
+      <div class="btn primary-btn" @click="emits('submit')">确定</div>
     </div>
 
   </div>