葫芦丝指法

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

@@ -126,17 +126,45 @@
 }
 
 .notes {
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     height: 65px;
 
-    .noteBox {
+    .noteContent {
+        position: relative;
         max-width: calc(100% - 92px);
-        display: flex;
-        background: rgba(255, 255, 255, 0.53);
         border-radius: 25px;
+        background: rgba(255, 255, 255, 0.53);
         border: 1px solid rgba(255, 255, 255, 0.81);
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 20px;
+            background-color: red;
+            background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(28, 172, 241, 0.45) 100%);
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 0;
+            height: 100%;
+            width: 20px;
+            background-color: red;
+            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(28, 172, 241, 0.45) 100%);
+        }
+    }
+
+    .noteBox {
+        display: flex;
         overflow-y: hidden;
         overflow-x: auto;
 
@@ -145,14 +173,7 @@
             display: none;
         }
 
-        &::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            height: 0;
 
-        }
     }
 
     .note {
@@ -165,6 +186,7 @@
         align-items: center;
         flex-shrink: 0;
         padding: 6px;
+        z-index: 2;
 
         img {
             position: absolute;

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

@@ -48,7 +48,7 @@ export default defineComponent({
 		};
 		const getFingeringData = async () => {
 			const subject: any = data.subject + (data.viewIndex === 0 ? "" : data.viewIndex);
-			console.log("🚀 ~ subject:", subject)
+			console.log("🚀 ~ subject:", subject);
 			fingerData.subject = await getFingeringConfig(subject);
 		};
 		const getSounFonts = () => {
@@ -170,40 +170,40 @@ export default defineComponent({
 						{/* <Button>
 							<Icon name="arrow-left" />
 						</Button> */}
-						<div class={styles.noteBox}>
-							{data.notes.map((note: IFIGNER_INSTRUMENT_Note) => {
-								const steps = new Array(Math.abs(note.step)).fill(1);
-								return (
-									<div
-										draggable={false}
-										class={styles.note}
-										onKeydown={() => noteClick(note, "start")}
-										onKeyup={() => noteClick(note, "start")}
-										onMouseleave={() => noteClick(note, "stop")}
-										onTouchstart={() => noteClick(note, "start")}
-										onTouchend={() => noteClick(note, "stop")}
-										onTouchcancel={() => noteClick(note, "stop")}
-									>
-										{data.realKey === note.realKey ? (
-											<img draggable={false} src={icons.icon_btn_ylow} />
-										) : (
-											<img draggable={false} src={icons.icon_btn_blue} />
-										)}
+						<div class={styles.noteContent}>
+							<div class={styles.noteBox}>
+								{data.notes.map((note: IFIGNER_INSTRUMENT_Note) => {
+									const steps = new Array(Math.abs(note.step)).fill(1);
+									return (
+										<div
+											draggable={false}
+											class={styles.note}
+											onKeydown={() => noteClick(note, "start")}
+											onKeyup={() => noteClick(note, "start")}
+											onMouseleave={() => noteClick(note, "stop")}
+											onTouchstart={() => noteClick(note, "start")}
+											onTouchend={() => noteClick(note, "stop")}
+											onTouchcancel={() => noteClick(note, "stop")}
+										>
+											{data.realKey === note.realKey ? (
+												<img draggable={false} src={icons.icon_btn_ylow} />
+											) : (
+												<img draggable={false} src={icons.icon_btn_blue} />
+											)}
 
-										<div class={[styles.noteKey, data.realKey === note.realKey && styles.keyActive]}>
-											{note.step > 0 ? steps.map((n) => <span class={styles.dot}></span>) : null}
+											<div class={[styles.noteKey, data.realKey === note.realKey && styles.keyActive]}>
+												{note.step > 0 ? steps.map((n) => <span class={styles.dot}></span>) : null}
 
-											<div class={styles.noteName}>
-												<sup>
-													{note.mark && (note.mark === "rise" ? "#" : "b")}
-												</sup>
-												{note.key}
+												<div class={styles.noteName}>
+													<sup>{note.mark && (note.mark === "rise" ? "#" : "b")}</sup>
+													{note.key}
+												</div>
+												{note.step < 0 ? steps.map((n) => <span class={styles.dot}></span>) : null}
 											</div>
-											{note.step < 0 ? steps.map((n) => <span class={styles.dot}></span>) : null}
 										</div>
-									</div>
-								);
-							})}
+									);
+								})}
+							</div>
 						</div>
 						{/* <Button size="small" >
 							<Icon name="arrow" />

src/view/figner-preview/index.ts

@@ -5,13 +5,13 @@ export interface IFIGNER_INSTRUMENT_Note {
 	step: number;
 	realKey: number;
 	/** 升降记号 */
-	mark?: 'rise' | 'fall';
+	mark?: "rise" | "fall";
 	/** 音名 */
 	realName: string;
 }
 interface IFIGNER_INSTRUMENT_DATA {
 	list: IFIGNER_INSTRUMENT_Note[];
-	[_: string]: IFIGNER_INSTRUMENT_Note[]
+	[_: string]: IFIGNER_INSTRUMENT_Note[];
 }
 export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } = {
 	"pan-flute": {
@@ -186,7 +186,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 			},
 		],
 	},
-	"hulusi-flute":{
+	"hulusi-flute": {
 		list: [
 			{
 				key: 3,
@@ -194,7 +194,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 4,
 				step: -1,
 				realKey: 64,
-				realName: 'E4'
+				realName: "E4",
 			},
 			{
 				key: 4,
@@ -202,16 +202,16 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 4,
 				step: -1,
 				realKey: 65,
-				realName: 'F4'
+				realName: "F4",
 			},
 			{
 				key: 4,
 				name: "F",
 				octave: 4,
 				step: -1,
-				mark: 'rise',
+				mark: "rise",
 				realKey: 66,
-				realName: 'Gb4'
+				realName: "Gb4",
 			},
 			{
 				key: 5,
@@ -219,16 +219,16 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 4,
 				step: -1,
 				realKey: 67,
-				realName: 'G4'
+				realName: "G4",
 			},
 			{
 				key: 6,
 				name: "A",
 				octave: 4,
 				step: -1,
-				mark: 'fall',
+				mark: "fall",
 				realKey: 68,
-				realName: 'Ab4'
+				realName: "Ab4",
 			},
 			{
 				key: 6,
@@ -236,16 +236,16 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 4,
 				step: -1,
 				realKey: 69,
-				realName: 'A4'
+				realName: "A4",
 			},
 			{
 				key: 7,
 				name: "B",
 				octave: 4,
 				step: -1,
-				mark: 'fall',
+				mark: "fall",
 				realKey: 70,
-				realName: 'Bb4'
+				realName: "Bb4",
 			},
 			{
 				key: 7,
@@ -253,7 +253,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 4,
 				step: -1,
 				realKey: 71,
-				realName: 'B4'
+				realName: "B4",
 			},
 			{
 				key: 1,
@@ -261,16 +261,16 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 72,
-				realName: 'C5'
+				realName: "C5",
 			},
 			{
 				key: 1,
 				name: "C",
 				octave: 5,
 				step: 0,
-				mark: 'rise',
+				mark: "rise",
 				realKey: 73,
-				realName: 'Db5'
+				realName: "Db5",
 			},
 			{
 				key: 2,
@@ -278,16 +278,16 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 74,
-				realName: 'D5'
+				realName: "D5",
 			},
 			{
 				key: 3,
 				name: "E",
 				octave: 5,
 				step: 0,
-				mark: 'fall',
+				mark: "fall",
 				realKey: 75,
-				realName: 'Eb5'
+				realName: "Eb5",
 			},
 			{
 				key: 3,
@@ -295,7 +295,7 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 76,
-				realName: 'E5'
+				realName: "E5",
 			},
 			{
 				key: 4,
@@ -303,16 +303,16 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 77,
-				realName: 'F5'
+				realName: "F5",
 			},
 			{
 				key: 4,
 				name: "F",
 				octave: 5,
 				step: 0,
-				mark: 'rise',
+				mark: "rise",
 				realKey: 78,
-				realName: 'Gb5'
+				realName: "Gb5",
 			},
 			{
 				key: 5,
@@ -320,16 +320,16 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 79,
-				realName: 'G5'
+				realName: "G5",
 			},
 			{
 				key: 6,
 				name: "A",
 				octave: 5,
 				step: 0,
-				mark: 'fall',
+				mark: "fall",
 				realKey: 80,
-				realName: 'Ab5'
+				realName: "Ab5",
 			},
 			{
 				key: 6,
@@ -337,11 +337,240 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 				octave: 5,
 				step: 0,
 				realKey: 81,
-				realName: 'A5'
+				realName: "A5",
 			},
 		],
-		list1: [
-
-		]
-	}
+		list1: [],
+	},
+	piccolo: {
+		list: [
+			{
+				key: 1,
+				name: "C",
+				octave: 5,
+				step: 0,
+				realKey: 60,
+				realName: "C5",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 5,
+				step: 0,
+				realKey: 61,
+				mark: 'fall',
+				realName: "Db5",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 5,
+				step: 0,
+				realKey: 62,
+				realName: "D5",
+			},
+			{
+				key: 3,
+				name: "E",
+				octave: 5,
+				step: 0,
+				realKey: 63,
+				mark: 'fall',
+				realName: "Eb5",
+			},
+			{
+				key: 3,
+				name: "E",
+				octave: 5,
+				step: 0,
+				realKey: 64,
+				realName: "E5",
+			},
+			{
+				key: 4,
+				name: "F",
+				octave: 5,
+				step: 0,
+				realKey: 65,
+				realName: "F5",
+			},
+			{
+				key: 5,
+				name: "G",
+				octave: 5,
+				step: 0,
+				realKey: 66,
+				mark: 'fall',
+				realName: "Gb5",
+			},
+			{
+				key: 5,
+				name: "G",
+				octave: 5,
+				step: 0,
+				realKey: 67,
+				realName: "G5",
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 5,
+				step: 0,
+				realKey: 68,
+				mark: 'fall',
+				realName: "Ab5",
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 5,
+				step: 0,
+				realKey: 69,
+				realName: "A5",
+			},
+			{
+				key: 7,
+				name: "B",
+				octave: 5,
+				step: 0,
+				realKey: 70,
+				mark: 'fall',
+				realName: "Bb5",
+			},
+			{
+				key: 7,
+				name: "B",
+				octave: 5,
+				step: 0,
+				realKey: 71,
+				realName: "B5",
+			},
+			{
+				key: 1,
+				name: "C",
+				octave: 6,
+				step: 1,
+				realKey: 72,
+				realName: "C6",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 6,
+				step: 1,
+				realKey: 73,
+				mark: 'fall',
+				realName: "Db6",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 6,
+				step: 1,
+				realKey: 74,
+				realName: "D6",
+			},
+			{
+				key: 3,
+				name: "E",
+				octave: 6,
+				step: 1,
+				realKey: 75,
+				mark: 'fall',
+				realName: "Eb6",
+			},
+			{
+				key: 3,
+				name: "E",
+				octave: 6,
+				step: 1,
+				realKey: 76,
+				realName: "E6",
+			},
+			{
+				key: 4,
+				name: "F",
+				octave: 6,
+				step: 1,
+				realKey: 77,
+				realName: "F6",
+			},
+			{
+				key: 5,
+				name: "G",
+				octave: 6,
+				step: 1,
+				realKey: 78,
+				mark: 'fall',
+				realName: "Gb6",
+			},
+			{
+				key: 5,
+				name: "G",
+				octave: 6,
+				step: 1,
+				realKey: 79,
+				realName: "G6",
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 6,
+				step: 1,
+				realKey: 80,
+				mark: 'fall',
+				realName: "Ab6",
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 6,
+				step: 1,
+				realKey: 81,
+				realName: "A6",
+			},
+			{
+				key: 7,
+				name: "B",
+				octave: 6,
+				step: 1,
+				realKey: 82,
+				mark: 'fall',
+				realName: "Bb6",
+			},
+			{
+				key: 7,
+				name: "B",
+				octave: 6,
+				step: 1,
+				realKey: 83,
+				realName: "B6",
+			},
+			{
+				key: 1,
+				name: "C",
+				octave: 7,
+				step: 2,
+				realKey: 84,
+				realName: "C7",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 7,
+				step: 2,
+				realKey: 85,
+				mark: 'fall',
+				realName: "Db7",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 7,
+				step: 2,
+				realKey: 86,
+				realName: "D7",
+			},
+		],
+	},
 };

src/view/fingering/fingering-config.ts

@@ -103,12 +103,12 @@ export const mappingVoicePart = (
 			ukulele: 130,
 			mouthorgan: 140,
 			piano: 150,
-			4: 120,
+			4: "piccolo",
 			3: "hulusi-flute",
 			1: "pan-flute",
 			2: "ocarina",
 			5: "melodica",
-			renorrecorder: 120,
+			renorrecorder: "piccolo",
 			woodwind: "hulusi-flute",
 			panpipes: "pan-flute",
 			ocarina: "ocarina",
@@ -178,6 +178,13 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				width: "3rem",
 				orientation: 1,
 			};
+		case "piccolo": // 竖笛
+			return {
+				name: "piccolo",
+				direction: "vertical",
+				width: "3rem",
+				orientation: 1,
+			};
 		case "hulusi-flute": // 葫芦丝
 			return {
 				name: "hulusi-flute",