feat: 简谱支持编辑、后台预览改为白色模式

src/helpers/customMusicScore.ts

@@ -592,7 +592,7 @@ export const resetFormate = () => {
 		};
 
 		// 给小节添加背景色
-		if (!state.isCreateImg && !state.isPreView) {
+		if (!state.isCreateImg && !state.isPreView && !state.isCbsView) {
 			staves.forEach((stave: any,i: number) => {
 				const list = [
 					Array.from(stave?.querySelectorAll(".vf-StaveSection") || []),

src/page-instrument/component/authorName/index.module.less

@@ -38,4 +38,12 @@
             }
         }
     }
+}
+
+.blackTitle {
+    :global{
+        .van-notice-bar{
+            color: #000 !important;
+        }
+    }
 }

src/page-instrument/component/authorName/index.tsx

@@ -17,11 +17,11 @@ export default defineComponent({
             {
                !smoothAnimationState.isShow.value && !state.isCombineRender && 
                <div class={["authorName", styles.authorName]}>
-                  <div class={styles.title}>
+                  <div class={[styles.title, state.isCbsView && styles.blackTitle]}>
                      <NoticeBar text={state.examSongName} background="none" />
                   </div>
                   <div class={styles.authorCon}>
-                     <div class={styles.author}>
+                     <div class={[styles.author, state.isCbsView && styles.blackTitle]}>
                         {
                            state.isSingleLine ? 
                            <>

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

@@ -267,6 +267,53 @@
     }
 }
 
+.cbsViewDetail {
+    background: #fff !important;
+
+    >.pageBg {
+        display: none;
+    }
+
+    .headHeight {
+        // background: #fff !important;
+    }
+
+    :global {
+        #cursorImg-0 {
+            opacity: 0 !important;
+        }
+        // .noteActive {
+        //     path {
+        //         fill: #000000;
+        //         stroke: #000000;
+        //     }
+
+        //     rect {
+        //         stroke: #000000;
+        //     }
+        // }
+        // .lyricActive {
+        //     text {
+        //         fill: #000000;
+        //         stroke: #000000;
+        //     }
+        // }
+        // .voiceActive {
+        //     rect {
+        //         fill: #000000;
+        //         stroke: #000000;
+        //     }
+        // }
+        // .rectActive {
+        //     fill: #000000;
+        //     stroke: #000000;
+        // }
+        #selectionBgBox {
+            display: none;
+        }
+    }
+}
+
 .preJson {
     width: 1px;
     height: 1px;

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

@@ -162,6 +162,7 @@ export default defineComponent({
     onMounted(async () => {
       (window as any).appName = "colexiu";
       const id = query.id || "43554";
+      state.isCbsView = query.isCbs;
       // 如果是纯预览模式，0.65倍缩放谱面
       state.isPreView = query.isPreView;
       if (state.isPreView) {
@@ -514,7 +515,7 @@ export default defineComponent({
     };
     return () => (
       <div
-        class={[styles.detail, styles[state.modeType], state.setting.eyeProtection && "eyeProtection", state.platform === IPlatform.PC && state.zoom > 0.8 && styles.PC, state.isPreView && styles.preViewDetail]}
+        class={[styles.detail, styles[state.modeType], state.setting.eyeProtection && "eyeProtection", state.platform === IPlatform.PC && state.zoom > 0.8 && styles.PC, state.isPreView && styles.preViewDetail, state.isCbsView && styles.cbsViewDetail]}
         style={{
           "--detailDataPaddingLeft": detailData.paddingLeft,
           paddingLeft: detailData.paddingLeft,
@@ -568,7 +569,7 @@ export default defineComponent({
           {!detailData.isLoading && 
             <MusicScore 
               ref={musicScoreRef}
-              musicColor={state.isPreView ? '#000000' : '#FFFFFF'}
+              musicColor={state.isPreView || state.isCbsView ? '#000000' : '#FFFFFF'}
               showPartNames={state.isCombineRender}
               onRendered={handleOnRendered} 
             > 

src/page-instrument/view-detail/loading.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
    setup(props) {
       return () =>
          (
-            <div class={[styles.loadingPop, state.isPreView && styles.isPreView]} style={{display:state.isLoading? "flex" : "none"}}>
+            <div class={[styles.loadingPop, (state.isPreView || state.isCbsView) && styles.isPreView]} style={{display:state.isLoading? "flex" : "none"}}>
                <img class={styles.lottie} src={animGif} />
                {/* <Vue3Lottie class={styles.lottie} animationData={animBg}></Vue3Lottie> */}
                <div class={styles.loadingTip}>{props.tipText}</div>

src/state.ts

@@ -319,6 +319,8 @@ const state = reactive({
   extConfigJson: {} as any,
   /** 扩展样式字段 */
   extStyleConfigJson: {} as any,
+  /** 简谱扩展样式字段 */
+  extJianStyleConfigJson: {} as any,  
   /** 是否开启节拍器(mp3节拍器) */
   isOpenMetronome: false,
   /** 演唱模式是否开启节拍器(mp3节拍器) */
@@ -507,6 +509,8 @@ const state = reactive({
   beatStartTime: 0,
   /** 是否为详情预览模式 */
   isPreView: false,
+  /** 是否为内容平台预览模式 */
+  isCbsView: false,  
   /** 是否为评测报告模式 */
   isEvaluatReport: false,
   /** midi播放器是否初始化中 */
@@ -1666,6 +1670,7 @@ const setState = (data: any, index: number) => {
   // 开启预备小节
   state.isOpenPrepare = true;
   state.extStyleConfigJson = data.extStyleConfigJson || {}
+  state.extJianStyleConfigJson = data.extJianStyleConfigJson || {}
   // console.log("🚀 ~ state.subjectId:", state.subjectId, state.track as any , state.subjectId)
   // 是否打击乐
   /**

src/view/music-score/index.tsx

@@ -251,7 +251,7 @@ export default defineComponent({
 					isInTheGradualRange.value && styles.inGradualRange,
 					state.musicRenderType == EnumMusicRenderType.staff ? "staff" : "jianpuTone",
 					state.isSingleLine && "singleLineMusicBox",
-					(!state.isCreateImg && !state.isPreView && state.musicRenderType === EnumMusicRenderType.staff) ? "blueMusicXml" : "",
+					(!state.isCreateImg && !state.isPreView && !state.isCbsView && state.musicRenderType === EnumMusicRenderType.staff) ? "blueMusicXml" : "",
 					state.isSingleLine && state.playState ==="play" && styles.notTouch,
 					!state.isSingleLine && (state.platform === "PC" || query.isCbs) &&  styles.pcCursorGrab
 

src/view/plugins/move-music-score/index.module.less

@@ -61,7 +61,7 @@
     left: 0;
     top: 0;
     width: 100%;
-    background: rgba(19, 36, 64, 0.5);
+    background: rgba(0, 0, 0, 0.5);
     z-index: 999999;
     display: flex;
     align-items: center;

src/view/plugins/move-music-score/index.tsx

@@ -233,18 +233,27 @@ export const filterMoveData = async () => {
 		// }
 		extStyleConfigJson[moveData.partIndex] = list;
 		console.log("🚀 ~ extStyleConfigJson", extStyleConfigJson)
+		const dataParams = state.musicRenderType === 'staff' ? {
+			id: examSongId,
+			extStyleConfigJson: JSON.stringify(extStyleConfigJson),
+		} : {
+			id: examSongId,
+			extJianStyleConfigJson: JSON.stringify(extStyleConfigJson),
+		}
 		const res = await request.post("/musicSheet/img", {
 			requestType: "json",
-			data: {
-				id: examSongId,
-				extStyleConfigJson: JSON.stringify(extStyleConfigJson),
-			}
+			data: dataParams
 		});
 		if (res && res.code == 200) {
 			showToast("保存成功");
 			undoData.undoList = [];
 			undoData.activeItem = null;
-			state.extStyleConfigJson = JSON.stringify(extStyleConfigJson)
+			if (state.musicRenderType === 'staff') {
+				state.extStyleConfigJson = JSON.stringify(extStyleConfigJson)
+			} else {
+				state.extJianStyleConfigJson = JSON.stringify(extStyleConfigJson)
+			}
+			
 		}
 		clearActiveModel();
 	}
@@ -491,10 +500,11 @@ const handleUndo = () => {
 
 /** 根据移动数据渲染 */
 export const renderForMoveData = () => {
-	if (state.isSingleLine || state.musicRenderType !== 'staff') return; 
-	if (state.extStyleConfigJson) {
+	// 一行谱模式暂时不支持谱面编辑和回显
+	if (state.isSingleLine) return; 
+	if (state.extStyleConfigJson || state.extJianStyleConfigJson) {
 		try {
-			extStyleConfigJson = JSON.parse(state.extStyleConfigJson);
+			extStyleConfigJson = state.musicRenderType === 'staff' ? JSON.parse(state.extStyleConfigJson) : JSON.parse(state.extJianStyleConfigJson);
 		} catch (error) {
 			extStyleConfigJson = {};
 		}
@@ -628,7 +638,7 @@ export default defineComponent({
 					}   */}	
 					<div class={[styles.editToolBox, !moveData.open && styles.itemDisabled]}>		
 						{
-							state.musicRenderType === 'staff' && !state.isSingleLine && 
+							!state.isSingleLine && 
 							<>
 								<div class={[styles.editItem, styles.canEdit]} onClick={switchMoveState}>
 									<img src={moveData.open ? editCloseIcon : editIcon} />

vite.config.ts

@@ -76,7 +76,7 @@ export default defineConfig({
         // target: "https://kt.colexiu.com",
         // target: "https://test.lexiaoya.cn",
         // target: "https://kt.colexiu.com",
-        target: "https://dev.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
+        target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
         // target: "https://test.kt.colexiu.com",
         // target: "https://mec.colexiu.com",
         changeOrigin: true,