feat: 声轨切换增加重置按钮

src/view/plugins/toggleMusicSheet/choosePartName/index.module.less

@@ -1,5 +1,6 @@
 .container {
-  width: 334px;
+  width: 573px;
+  height: 332px;
   .head{
       height: 42px;
       position: relative;
@@ -40,7 +41,7 @@
       .titCon{
         display: flex;
         align-items: center;
-        padding: 10px 0;
+        padding-top: 10px;
         &.stickyTit{
           position: sticky;
           top: -1px;
@@ -61,8 +62,12 @@
         }
       }
       .content{
+        display: flex;
+        flex-wrap: wrap;
+        .specialBtn {
+          width: 96px;
+        }
         .selBtn{
-          width: 100%;
           height: 34px;
           line-height: 34px;
           background: #F6F6F6;
@@ -74,9 +79,8 @@
           cursor: pointer;
           border:1px solid transparent;
           margin-top: 10px;
-          &:first-child{
-            margin-top: 0;
-          }
+          margin-right: 10px;
+          padding: 0 8px;
           &.active{
             background: #F2FFFC;
             border-color: #01C1B5;

src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -7,6 +7,7 @@ import { headImg } from "/src/page-instrument/header-top/image";
 import { toggleMusicSheet } from "../index"
 import okBtn from "./imgs/okBtn.png"
 import cancelBtn from "./imgs/cancelBtn.png"
+import resetBtn from "./imgs/resetBtn.png"
 
 export default defineComponent({
   name: 'choosePartName',
@@ -76,11 +77,11 @@ export default defineComponent({
             {
               state.isScoreRender &&
                 <>
-                  <div class={styles.titCon}>
+                  {/* <div class={styles.titCon}>
                     <div class={styles.tit}>选择总谱</div>
-                  </div>
+                  </div> */}
                   <div class={styles.content}>
-                    <div class={[styles.selBtn, selValues.value.includes(999) && styles.active]} onClick={()=>{ hanldeSelSheet(999, true) }}>总谱</div>
+                    <div class={[styles.selBtn, styles.specialBtn, selValues.value.includes(999) && styles.active]} onClick={()=>{ hanldeSelSheet(999, true) }}>总谱</div>
                   </div>
                 </>
             }
@@ -100,11 +101,18 @@ export default defineComponent({
             </div>
           </div>
           <div class={styles.btnCon}>
-              <img src={ cancelBtn } class={styles.btn} onClick={async () => {
-                  emit('close')
+              <img src={ resetBtn } class={styles.btn} onClick={async () => {
+                  selValues.value = []
                 }
               }></img>
               <img src={ okBtn } class={styles.btn} onClick={async () => {
+                  if (!selValues.value.length) {
+                    showToast({
+                      position: "top",
+                      message: "最少需要选择一个声部"
+                    });
+                    return
+                  }
                   await checkMoveNoSave();
                   nextTick(()=>{
                     emit('close', selValues.value)