选段

package.json

@@ -14,6 +14,8 @@
     "@varlet/ui": "^2.13.4",
     "@vicons/fa": "^0.12.0",
     "@vicons/ionicons5": "^0.12.0",
+    "@vueuse/components": "^10.3.0",
+    "@vueuse/core": "^10.3.0",
     "abcjs": "^6.2.2",
     "clean-deep": "^3.4.0",
     "consola": "^2.15.3",

pnpm-lock.yaml

@@ -19,6 +19,12 @@ dependencies:
   '@vicons/ionicons5':
     specifier: ^0.12.0
     version: 0.12.0
+  '@vueuse/components':
+    specifier: ^10.3.0
+    version: 10.3.0(vue@3.2.47)
+  '@vueuse/core':
+    specifier: ^10.3.0
+    version: 10.3.0(vue@3.2.47)
   abcjs:
     specifier: ^6.2.2
     version: 6.2.2
@@ -119,7 +125,7 @@ devDependencies:
     version: 4.9.3
   unplugin-auto-import:
     specifier: ^0.16.6
-    version: 0.16.6
+    version: 0.16.6(@vueuse/core@10.3.0)
   unplugin-vue-components:
     specifier: ^0.24.1
     version: 0.24.1(vue@3.2.47)
@@ -1853,6 +1859,9 @@ packages:
     resolution: {integrity: sha512-ZPHnXkzmGMfk+pHqAGzTSpA9CbsHmJLgkvOl5w52LZ0XTxB1ZIHWZzQ7lEtjTNWScBbsQekg8TjApMXkMe4nkw==}
     dev: true
 
+  /@types/web-bluetooth@0.0.17:
+    resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
+
   /@vant/popperjs@1.3.0:
     resolution: {integrity: sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==}
     dev: false
@@ -2155,6 +2164,39 @@ packages:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
     dev: true
 
+  /@vueuse/components@10.3.0(vue@3.2.47):
+    resolution: {integrity: sha512-EeZz3kjmJI7bH7JSxxMlLyk21LGl6GQjXfpl2n/GiI9QSJi+BVzIra5kEty5eM8McwAanx3e/HnK4drYTgFOWw==}
+    dependencies:
+      '@vueuse/core': 10.3.0(vue@3.2.47)
+      '@vueuse/shared': 10.3.0(vue@3.2.47)
+      vue-demi: 0.14.5(vue@3.2.47)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/core@10.3.0(vue@3.2.47):
+    resolution: {integrity: sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.17
+      '@vueuse/metadata': 10.3.0
+      '@vueuse/shared': 10.3.0(vue@3.2.47)
+      vue-demi: 0.14.5(vue@3.2.47)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  /@vueuse/metadata@10.3.0:
+    resolution: {integrity: sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==}
+
+  /@vueuse/shared@10.3.0(vue@3.2.47):
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
+    dependencies:
+      vue-demi: 0.14.5(vue@3.2.47)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   /abcjs@6.2.2:
     resolution: {integrity: sha512-M5pvTb+0yABqScZBEN/bZmrMgX+iTtgD8vxAVTaKNNVt+ivyCzx0SLNYlTXYErlXu7QvPIoIiSPRojne6M24PA==}
     dev: false
@@ -3703,7 +3745,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unplugin-auto-import@0.16.6:
+  /unplugin-auto-import@0.16.6(@vueuse/core@10.3.0):
     resolution: {integrity: sha512-M+YIITkx3C/Hg38hp8HmswP5mShUUyJOzpifv7RTlAbeFlO2Tyw0pwrogSSxnipHDPTtI8VHFBpkYkNKzYSuyA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -3717,6 +3759,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.7.5
       '@rollup/pluginutils': 5.0.2
+      '@vueuse/core': 10.3.0(vue@3.2.47)
       fast-glob: 3.3.0
       local-pkg: 0.4.3
       magic-string: 0.30.1
@@ -3904,6 +3947,20 @@ packages:
       vue: 3.2.47
     dev: false
 
+  /vue-demi@0.14.5(vue@3.2.47):
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.47
+
   /vue-router@4.1.6(vue@3.2.47):
     resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
     peerDependencies:

src/pc/home/index.module.less

@@ -255,13 +255,27 @@
         }
     }
 }
-.titleName{
-    :global{
-        .n-input{
+
+.titleName {
+    :global {
+        .n-input {
             font-size: 18px;
             font-weight: 600;
             height: 40px;
             line-height: 40px;
         }
     }
+}
+
+.selectMearesBox {
+    position: fixed;
+    padding: 12px !important;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 16px;
+    border: 1px solid #F5F5F7;
+    cursor: move;
+}
+.selectMearesHidden{
+    display: none;
 }

src/pc/home/index.tsx

@@ -25,7 +25,6 @@ import TheIcon from "/src/components/The-icon";
 import { cloneDeep } from "lodash";
 import TheSpeed from "./component/the-speed";
 import { getImage } from "./images";
-import { Dropdown, Dsubmenu, Doption, Trigger, Input, Select, Option } from "@arco-design/web-vue";
 import {
 	NButton,
 	NDropdown,
@@ -51,6 +50,8 @@ import { useRoute } from "vue-router";
 import { api_musicSheetCreationDetail, api_musicSheetCreationUpdate } from "../api";
 import instrumentsNames from "/src/constant/instrmentsNames.json";
 import { ALL_NOTES, NOTE_DOT } from "./noteData";
+import { Close } from "@vicons/ionicons5";
+import { UseDraggable } from "@vueuse/components";
 
 const allPitches = [
 	"C,,,,",
@@ -186,6 +187,7 @@ export default defineComponent({
 			mearseDeleteShow: false,
 			staffShow: false, // 五线谱弹窗
 			settingShow: false, // 设置弹窗
+			selectMearesShow: false, // 选择小节弹窗
 		});
 		const data = reactive({
 			drawCount: 0,
@@ -221,6 +223,11 @@ export default defineComponent({
 			loadingAudioSrouce: false, // 加载音频资源
 			/** 移调类型 */
 			moveKeyType: "inset" as "inset" | "up" | "down", // 移调类型
+			selectMearesDrag: {
+				state: false,
+				x: 0,
+				y: 0,
+			}, // 选择小节拖拽状态
 		});
 		const noteTypes = ABC_DATA.types.map((item) => item.value).filter(Boolean);
 		const accidentals = ABC_DATA.accidentals.map((item) => item.value).filter(Boolean);
@@ -468,7 +475,7 @@ export default defineComponent({
 				...abcData.abcOptions,
 				visualTranspose: abcData.abc.visualTranspose,
 			})[0];
-			if (data.drawCount <3 ){
+			if (data.drawCount < 3) {
 				console.log("🚀 ~ visualObj:", abcData.visualObj);
 			}
 		};
@@ -478,6 +485,7 @@ export default defineComponent({
 			const padding = 4;
 			for (let i = 0; i < abcData.visualObj.lines.length; i++) {
 				const line = abcData.visualObj.lines[i];
+				console.log("🚀 ~ line:", line);
 				for (let j = 0; j < line.staff.length; j++) {
 					const staff = line.staff[j];
 					const voices = [...staff.voices].flat();
@@ -503,10 +511,6 @@ export default defineComponent({
 					}
 				}
 			}
-			// const annotation = document.querySelectorAll("#paper .abcjs-annotation");
-			// annotation.forEach((n) => {
-			// 	n.setAttribute("color", "rgba(0,0,0,0)");
-			// })
 		};
 
 		/**
@@ -1859,12 +1863,16 @@ export default defineComponent({
 							</NSpin>
 							<div>{data.playState ? "暂停" : "播放"}</div>
 						</div>
-						<div class={[styles.topBtn, styles.btnDisabled]}>
-							<div class={styles.btnImg}>
+						<div
+							class={[styles.topBtn]}
+							onClick={() => (popup.selectMearesShow = !popup.selectMearesShow)}
+						>
+							<div class={[styles.btnImg, popup.selectMearesShow && styles.btnImgActive]}>
 								<img class={styles.topBtnIcon} src={getImage("icon_22.png")} />
 							</div>
 							<div>选段</div>
 						</div>
+
 						<div class={[styles.topBtn, styles.btnDisabled]}>
 							<div class={styles.btnImg}>
 								<img class={styles.topBtnIcon} src={getImage("icon_23.png")} />
@@ -2090,6 +2098,39 @@ export default defineComponent({
 				<div ref={downRef}></div>
 
 				<TheSetting v-model:show={popup.settingShow} />
+
+				{/* <UseDraggable
+					initialValue={{ x: 320, y: 60 }}
+					class={[styles.selectMearesBox, !popup.selectMearesShow && styles.selectMearesHidden]}
+				>
+					<NSpace justify="space-between">
+						<div class={styles.btnLineTitle}>输入小节范围</div>
+						<NButton circle quaternary size="small" onClick={() => (popup.selectMearesShow = false)}>
+							<NIcon size={16} component={<Close />} />
+						</NButton>
+					</NSpace>
+					<NSpace align="center">
+						<div style={{ width: "200px" }}>
+							<NInput pair placeholder={["开始小节", "结束小节"]}></NInput>
+						</div>
+						<div class={styles.topBtn}>
+							<NSpin show={data.loadingAudioSrouce} size="small">
+								<div class={styles.btnImg} onClick={() => togglePlay(data.playState ? "pause" : "play")}>
+									<img
+										style={{ display: data.playState ? "" : "none" }}
+										class={styles.topBtnIcon}
+										src={getImage("icon_21_1.png")}
+									/>
+									<img
+										style={{ display: data.playState ? "none" : "" }}
+										class={styles.topBtnIcon}
+										src={getImage("icon_21.png")}
+									/>
+								</div>
+							</NSpin>
+						</div>
+					</NSpace>
+				</UseDraggable> */}
 			</div>
 		);
 	},