更新

src/page-instrument/view-figner/change-subject/index.tsx

@@ -89,7 +89,7 @@ export default defineComponent({
             ))}
           </div>
         </div> */}
-        <div class={styles.changeSubjectContainer}>
+        <div class={[styles.changeSubjectContainer,"changeSubjectContainer_pc"]}>
           <div class={styles.title}>声部</div>
 
           <div class={styles.subjectContainer}>

src/page-instrument/view-figner/index.module.less

@@ -1460,4 +1460,26 @@
     // .backBtn {
     //     display: none;
     // }
+}
+.dragbomBox{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 36px;
+    width: 100%;
+    padding: 0 14px 0 15px;
+}
+.dragTopBox{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 40px;
+    width: 100%; 
+}
+:global{
+    .changeSubjectShowBoxClass_drag{
+        .changeSubjectContainer_pc{
+            height: 170px !important;
+        }
+    }
 }

src/page-instrument/view-figner/index.tsx

@@ -1,4 +1,4 @@
-import { PropType, computed, defineComponent, nextTick, onBeforeMount, onMounted, onUnmounted, reactive, ref } from "vue";
+import { PropType, computed, defineComponent, nextTick, onBeforeMount, onMounted, onUnmounted, reactive, ref,toRef } from "vue";
 import styles from "./index.module.less";
 import icons from "./image/icons.json";
 import { FIGNER_INSTRUMENT_DATA, FIGNER_INSTRUMENT_REALKEY, IFIGNER_INSTRUMENT_Note } from "/src/view/figner-preview";
@@ -18,6 +18,8 @@ import state, { IPlatform } from "/src/state";
 import { api_musicalInstrumentList, api_subjectList, getSubjectList } from "../api";
 import ChangeSubject from "./change-subject";
 import { Tabs,Tab } from "vant"
+import useDrag from '/src/hooks/useDrag';
+import Dragbom from '/src/hooks/useDrag/dragbom';
 
 export default defineComponent({
   name: "viewFigner",
@@ -994,6 +996,18 @@ export default defineComponent({
         value:"2"
       }
     ]
+    // 切换乐器弹窗
+    let changeSubjectShowBoxDragData: any;
+    let changeSubjectShowBoxClass: string;
+    if (query.platform==="pc") {
+      changeSubjectShowBoxClass = 'changeSubjectShowBoxClass_drag';
+      changeSubjectShowBoxDragData = useDrag(
+        [`${changeSubjectShowBoxClass} .dragTopBox`, `${changeSubjectShowBoxClass} .dragbomBox`],
+        changeSubjectShowBoxClass,
+        toRef(data, 'changeSubjectShow'),
+        storeData.user.id as string
+      );
+    }
     return () => {
       const relationship = fingerData.subject?.relationship?.[data.realKey] || [];
       const rs: number[] = Array.isArray(relationship[1]) ? relationship[fingerData.relationshipIndex] : relationship;
@@ -1696,8 +1710,11 @@ export default defineComponent({
           </Popup>
 
           <Popup
+            style={
+              query.platform==="pc" ? changeSubjectShowBoxDragData.styleDrag.value : {}
+            }
             v-model:show={data.changeSubjectShow}
-            class={styles.changeSubjectPopup}
+            class={[styles.changeSubjectPopup,changeSubjectShowBoxClass]}
             onClick={(e: any) => {
               e.stopPropagation();
             }}
@@ -1735,6 +1752,12 @@ export default defineComponent({
                 }, 100);
               }}
             />
+            {query.platform==="pc" && <>
+              <div class={[styles.dragTopBox,"dragTopBox"]}></div>
+              <div class={[styles.dragbomBox,"dragbomBox"]}>
+                <Dragbom></Dragbom>
+              </div>
+            </>}
           </Popup>
 
           {props.show && !data.loading && !data.loadingSoundFonts && <GuideIndex fingeringMode={data.fingeringMode} showGuide={false} list={["finger"]} />}