music-score/src/view/fingering/index.tsx

import { computed, defineComponent, onBeforeMount, reactive } from "vue";
import styles from "./index.module.less";
import state from "/src/state";
import { getFingeringConfig, ITypeFingering } from "./fingering-config";

export default defineComponent({
	name: "fingering",
	setup(props, { expose }) {
		const fingerData = reactive({
			relationshipIndex: 0,
			subject: null as unknown as ITypeFingering,
		});
		const getFingeringData = async () => {
			fingerData.subject = await getFingeringConfig(state.fingeringInfo.name);
		};
		onBeforeMount(() => {
			getFingeringData();
		});

		/** 当前音域 */
		const realKey = computed(() => {
			return state.times[state.activeNoteIndex]?.realKey || -1;
		});

		return () => {
			const relationship = fingerData.subject?.relationship?.[realKey.value] || [];
			const rs: number[] = Array.isArray(relationship[1]) ? relationship[fingerData.relationshipIndex] : relationship;
			const canTizhi = Array.isArray(relationship[1]);
			return (
				<>
					{state.fingeringInfo.direction === "transverse" ? (
						<div class={[styles.fingeringContainer]}>
							<span class={[styles.yidiao, rs.includes(0) && styles.canDisplay]}>转调</span>

							<div class={styles.imgs}>
								<img src={fingerData.subject?.json?.full} />
								{rs.map((key: number | string, index: number) => {
									const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
									return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
								})}
							</div>

							<div
								class={[styles.tizhi, canTizhi && styles.canDisplay]}
								onClick={() => (fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)}
							>
								替指
							</div>
						</div>
					) : (
						<div class={[styles.fingeringContainer, styles.vertical]}>
							<div class={styles.imgs}>
								<img src={fingerData.subject?.json?.full} />
								{rs.map((key: number | string, index: number) => {
									const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
									return <img data-index={nk} src={fingerData.subject?.json?.[nk]} />;
								})}
							</div>

							<div class={styles.rightContent}>
								<span class={[styles.yidiao, rs.includes(0) && styles.canDisplay]}>转调</span>
								<div
									class={[styles.tizhi, canTizhi && styles.canDisplay]}
									onClick={() => (fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)}
								>
									替指
								</div>
							</div>
						</div>
					)}
				</>
			);
		};
	},
});