酷乐秀及滚动防抖

index-colexiu.html → colexiu.html

@@ -6,6 +6,8 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>酷乐秀</title>
+  <link rel="icon" href="/favicon.ico" />
+  <script src="/flexible.js" charset="UTF-8"></script>
   <style>
     #loading {
       position: fixed;

src/page-colexiu/App.tsx

@@ -25,9 +25,9 @@ export default defineComponent({
 		};
 		const setUser = async () => {
 			const res = await getUserInfo();
-			const { student } = res?.data || {};
+			const student = res?.data || {};
 			setUserInfo(student);
-			// console.log("🚀 ~ res:", res);
+			console.log("🚀 ~ res:", student);
 		};
 		onBeforeMount(() => {
 			if (query.Authorization) {

src/page-colexiu/api.ts

@@ -15,12 +15,7 @@ export const employeeQueryUserInfo = () => {
 
 /** 获取曲谱信息 */
 export const sysMusicScoreAccompanimentQueryPage = (sysMusicScoreId: string) => {
-	return request.get("/sysMusicScoreAccompaniment/queryPage", {
-		params: {
-			clientType: "SMART_PRACTICE",
-			sysMusicScoreId,
-		},
-	});
+	return request.get("/music/sheet/detail/" + sysMusicScoreId);
 };
 
 /** 获取曲谱分类 */

src/page-colexiu/detail/index.tsx

@@ -18,10 +18,8 @@ import Evaluating, { evaluatingData } from "/src/view/evaluating";
 import MeasureSpeed from "/src/view/plugins/measure-speed";
 import { mappingVoicePart, subjectFingering } from "/src/view/fingering/fingering-config";
 import Fingering from "/src/view/fingering";
-import store from 'store'
+import store from "store";
 
-//特殊教材分类id
-const classids = [1, 30, 97]; // [大雅金唐, 竖笛教程, 声部训练]
 export default defineComponent({
 	name: "music-list",
 	setup() {
@@ -31,7 +29,6 @@ export default defineComponent({
 			...route.query,
 		};
 
-		const paramsId = route.params.id as string;
 		const detailData = reactive({
 			isLoading: true,
 			paddingLeft: "",
@@ -48,56 +45,40 @@ export default defineComponent({
 		};
 		onBeforeMount(() => {
 			getAPPData();
+			api_setStatusBarVisibility();
+			const settting = store.get("musicscoresetting");
+			if (settting) {
+				state.setting = settting;
+				if (state.setting.camera) {
+					api_openCamera();
+				}
+				// console.log("🚀 ~ settting:", settting)
+			}
 		});
 		// console.log(route.params, query)
 		/** 获取曲谱数据 */
 		const getMusicInfo = (res: any) => {
 			const index = query["part-index"] ? parseInt(query["part-index"] as string) : 0;
-			const musicInfo = res.data[index];
+			const musicInfo = {
+				...res.data,
+				...res.data.background[index],
+			};
 			// console.log("🚀 ~ musicInfo:", musicInfo);
 			setState(musicInfo, index);
 			setCustom();
 			detailData.isLoading = false;
 		};
-		const getCategorId = (arr: any[], key = "sysMusicScoreCategoriesList"): any[] => {
-			const list = [];
-			if (!Array.isArray(arr)) return [];
-			for (let i = 0; i < arr.length; i++) {
-				list.push(arr[i].id);
-				if (Array.isArray(arr[i][key])) {
-					list.push(...getCategorId(arr[i][key]));
-				}
-			}
-			return list;
-		};
-		const getIds = (arr: any[], key = "sysMusicScoreCategoriesList"): any[] => {
-			if (!Array.isArray(arr)) return [];
-			const ids = [];
-			for (let i = 0; i < arr.length; i++) {
-				if (classids.includes(arr[i].id)) {
-					ids.push(arr[i].id, ...getCategorId(arr[i][key]));
-				} else {
-					ids.push(...getIds(arr[i][key]));
-				}
-			}
-			return ids;
-		};
-		/** 获取分类数据 */
-		const getCategory = (res: any) => {
-			console.log("特殊曲谱分类ids:");
-			console.log(getIds(res.data).toString());
-		};
 
 		const setState = (data: any, index: number) => {
 			state.detailId = data.id;
-			state.xmlUrl = data.xmlUrl;
+			state.xmlUrl = data.xmlFileUrl;
 			state.partIndex = index;
-			state.subjectId = data.subjectId;
+			state.subjectId = data.musicSubject;
 			state.categoriesId = data.categoriesId;
-			state.categoriesName = data.categoriesName;
-			state.enableEvaluation = data.enableEvaluation;
-			state.examSongId = data.examSongId + "";
-			state.examSongName = data.examSongName;
+			state.categoriesName = data.musicTagNames;
+			state.enableEvaluation = data.canEvaluate ? true : false;
+			state.examSongId = data.id + "";
+			state.examSongName = data.musicSheetName;
 			// 解析扩展字段
 			if (data.extConfigJson) {
 				try {
@@ -106,25 +87,25 @@ export default defineComponent({
 					console.error("解析扩展字段错误:", error);
 				}
 			}
-			state.isOpenMetronome = !data.isOpenMetronome;
+			state.isOpenMetronome = data.mp3Type === "MP3_METRONOME" ? true : false;
 			state.needTick = data.isOpenMetronome;
-			state.isShowFingering = data.isShowFingering;
-			state.music = data.isOpenMetronome ? data.mp3Url : data.metronomeMp3Url;
-			state.accompany = data.isOpenMetronome ? data.url : data.metronomeUrl;
+			state.isShowFingering = data.showFingering ? true : false;
+			state.music = data.audioFileUrl;
+			state.accompany = data.metronomeUrl || data.metronomeUrl;
 			state.midiUrl = data.midiUrl;
-			state.parentCategoriesId = data.parentCategoriesId;
-			state.playMode = data.playMode;
-			state.originSpeed = state.speed = data.speed;
+			state.parentCategoriesId = data.musicTag;
+			state.playMode = data.audioType === "MP3" ? "mp3" : "midi";
+			state.originSpeed = state.speed = data.playSpeed;
 			state.track = data.track;
-			state.isOpenPrepare = true;
 
 			// 映射声部ID
-			state.subjectId = mappingVoicePart(state.subjectId, "GYM");
+			state.subjectId = mappingVoicePart(state.track as any, "COLEXIU");
 			// 是否打击乐
 			state.isPercussion = state.subjectId == 23 || state.subjectId == 113 || state.subjectId == 121 || isRhythmicExercises();
 
 			// 设置指法
 			state.fingeringInfo = subjectFingering(state.subjectId);
+			console.log("🚀 ~ state.fingeringInfo:", state.fingeringInfo, state.subjectId)
 		};
 
 		const setCustom = () => {
@@ -133,23 +114,10 @@ export default defineComponent({
 			}
 		};
 
-		onBeforeMount(() => {
-			api_setStatusBarVisibility();
-			const settting = store.get('musicscoresetting')
-			if (settting){
-				state.setting = settting
-				if (state.setting.camera){
-					api_openCamera();
-				}
-				// console.log("🚀 ~ settting:", settting)
-			}
-		});
-
 		onMounted(() => {
-			(window as any).appName = "gym";
-			Promise.all([sysMusicScoreCategoriesQueryTree(storeData.platformType === "WEB"), sysMusicScoreAccompanimentQueryPage(paramsId)]).then((values) => {
-				getCategory(values[0]);
-				getMusicInfo(values[1]);
+			(window as any).appName = "colexiu";
+			Promise.all([sysMusicScoreAccompanimentQueryPage(query.id)]).then((values) => {
+				getMusicInfo(values[0]);
 			});
 		});
 

src/page-colexiu/main.ts

@@ -15,7 +15,7 @@ const platformApi = getRequestHostname()
 initStore({
     platformApi: platformApi,
     platformType: platformApi === '/api-student' ? 'STUDENT' : platformApi === '/api-teacher' ? 'TEACHER' : 'WEB',
-    proxy: import.meta.env.DEV ? '/gym' : '',
+    proxy: import.meta.env.DEV ? '/colexiu' : '',
 })
 
 createApp(App).use(router)

src/page-colexiu/router.ts

@@ -4,7 +4,7 @@ import Notfind from "../view/notfind";
 
 const routes: RouteRecordRaw[] = [
 	{
-		path: "/detail/:id",
+		path: "/",
 		component: Home,
 	},
 	{

src/state.ts

@@ -398,7 +398,7 @@ export const handleSelection = (item: any) => {
 		state.sectionToast.message = "请选择结束小节";
 	}
 };
-
+let offsetTop = 0
 /**
  * 窗口内滚动到音符的区域
  * @param isScroll 可选: 强制滚动到顶部, 默认: false
@@ -407,7 +407,8 @@ export const handleSelection = (item: any) => {
 export const scrollViewNote = () => {
 	const cursorElement = document.getElementById("cursorImg-0")!;
 	const musicAndSelection = document.getElementById("musicAndSelection")!;
-	if (!cursorElement && !musicAndSelection) return;
+	if (!cursorElement || !musicAndSelection || offsetTop === cursorElement.offsetTop) return;
+	offsetTop = cursorElement.offsetTop
 	if (cursorElement.offsetTop > 50) {
 		musicAndSelection.scrollTo({
 			top: cursorElement.offsetTop - 25,

src/view/fingering/fingering-config.ts

@@ -28,8 +28,25 @@ export const mappingVoicePart = (id: number, soruce: "GYM" | "COLEXIU" | "ORCHES
 		return id;
 	} else if (soruce === "COLEXIU") {
 		const subject: { [_key: string | number]: number } = {
-			2: 32,
-		};
+			Flute: 2,
+			Clarinet: 4,
+			Trombone: 14,
+			Tuba: 17,
+			Trumpet: 12,
+			Horn: 13,
+			AltoSaxophone: 6,
+			TenorSaxophone: 6,
+			Saxophone: 6,
+			UpBassHorn: 15,
+			Melodica: 137,
+			HulusiFlute: 136,
+			PanFlute: 135,
+			Ocarina: 134,
+			Recorder: 120,
+			Ukulele: 130,
+			Mouthorgan: 140,
+			Piano: 150
+		  }
 		return subject[id];
 	}
 	return 0;

vite.config.ts

@@ -40,8 +40,8 @@ export default defineConfig({
 		rollupOptions: {
 			input: {
 				index: resolve(__dirname, "index.html"),
-				colexiu: resolve(__dirname, "index-colexiu.html"),
-				orchestra: resolve(__dirname, "index-orchestra.html"),
+				colexiu: resolve(__dirname, "colexiu.html"),
+				orchestra: resolve(__dirname, "orchestra.html"),
 			},
 		},
 	},
@@ -55,7 +55,7 @@ export default defineConfig({
 				rewrite: (path) => path.replace(/^\/gym/, ""),
 			},
 			"^/colexiu/.*": {
-				target: "http://dev.colexiu.cn",
+				target: "https://online.colexiu.com",
 				changeOrigin: true,
 				rewrite: (path) => path.replace(/^\/colexiu/, ""),
 			},