陶笛，葫芦丝，移调移调指法

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

@@ -180,61 +180,81 @@
 
     }
 
-    .note {
+
+}
+.tones{
+    position: absolute;
+    left: 50px;
+    top: 50%;
+    transform: translateY(-50%);
+    max-height: calc(100% - 200px);
+    border-radius: 25px;
+    background: rgba(255, 255, 255, 0.53);
+    border: 1px solid rgba(255, 255, 255, 0.81);
+    overflow: auto;
+    overflow-x: hidden;
+    z-index: 10;
+
+    &::-webkit-scrollbar {
+        width: 0;
+        display: none;
+    }
+}
+
+.note {
+    position: relative;
+    margin: 0 2.5Px;
+    width: 42px;
+    height: 42px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 6px;
+    z-index: 2;
+
+    img {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .noteKey {
         position: relative;
-        margin: 0 2.5Px;
-        width: 42px;
-        height: 42px;
         display: flex;
-        justify-content: center;
+        flex-direction: column;
+        justify-content: space-evenly;
         align-items: center;
-        flex-shrink: 0;
-        padding: 6px;
-        z-index: 2;
+        z-index: 1;
+        font-size: 16px;
+        font-family: 'jianzhu';
+        font-weight: normal;
+        color: #FFFFFF;
+        text-shadow: 0px 1px 3px #1EADF1;
+        line-height: 1;
+        height: 100%;
+
+        &.keyActive {
+            text-shadow: 0px 1px 3px #F6A81B;
+        }
 
-        img {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
+        .dot {
+            width: 3px;
+            height: 3px;
+            border-radius: 50%;
+            background-color: #fff;
         }
 
-        .noteKey {
+        .noteName {
             position: relative;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-evenly;
-            align-items: center;
-            z-index: 1;
-            font-size: 16px;
-            font-family: 'jianzhu';
-            font-weight: normal;
-            color: #FFFFFF;
-            text-shadow: 0px 1px 3px #1EADF1;
-            line-height: 1;
-            height: 100%;
-
-            &.keyActive {
-                text-shadow: 0px 1px 3px #F6A81B;
-            }
-
-            .dot {
-                width: 3px;
-                height: 3px;
-                border-radius: 50%;
-                background-color: #fff;
-            }
-
-            .noteName {
-                position: relative;
-            }
+        }
 
-            .mark {
-                position: absolute;
-                left: -80%;
-                font-size: 12px;
-            }
+        .mark {
+            position: absolute;
+            left: -80%;
+            font-size: 12px;
         }
     }
 }

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

@@ -32,6 +32,8 @@ export default defineComponent({
 			subject: subject,
 			realKey: 0,
 			notes: [] as IFIGNER_INSTRUMENT_Note[],
+			tones: [] as IFIGNER_INSTRUMENT_Note[],
+			activeTone: "",
 			soundFonts: {} as any,
 			viewIndex: 0,
 			noteAudio: null as unknown as Howl,
@@ -53,7 +55,17 @@ export default defineComponent({
 		const getNotes = () => {
 			const fignerData = FIGNER_INSTRUMENT_DATA[data.subject as keyof typeof FIGNER_INSTRUMENT_DATA];
 			if (fignerData) {
-				data.notes = fignerData.list;
+				data.tones = fignerData.tones || [];
+				if (data.tones.length) {
+					data.activeTone = data.tones[0].realName;
+					setNotes();
+				}
+			}
+		};
+		const setNotes = () => {
+			const fignerData = FIGNER_INSTRUMENT_DATA[data.subject as keyof typeof FIGNER_INSTRUMENT_DATA];
+			if (fignerData) {
+				data.notes = fignerData[`list${data.activeTone}`];
 			}
 		};
 		const getFingeringData = async () => {
@@ -232,6 +244,38 @@ export default defineComponent({
 								替指
 							</div>
 						</div>
+
+						<div class={styles.tones}>
+							{data.tones.map((tone: IFIGNER_INSTRUMENT_Note) => {
+								const steps = new Array(Math.abs(tone.step)).fill(1);
+								return (
+									<div
+										draggable={false}
+										class={styles.note}
+										onClick={() => {
+											data.activeTone = tone.realName;
+											setNotes();
+										}}
+									>
+										{data.activeTone === tone.realName ? (
+											<img draggable={false} src={icons.icon_btn_ylow} />
+										) : (
+											<img draggable={false} src={icons.icon_btn_blue} />
+										)}
+
+										<div class={[styles.noteKey, data.activeTone === tone.realName && styles.keyActive]}>
+											{tone.step > 0 ? steps.map((n) => <span class={styles.dot}></span>) : null}
+
+											<div class={styles.noteName}>
+												<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
+												{tone.key}
+											</div>
+											{tone.step < 0 ? steps.map((n) => <span class={styles.dot}></span>) : null}
+										</div>
+									</div>
+								);
+							})}
+						</div>
 					</div>
 					<div class={styles.notes}>
 						{/* <Button>