feat: 后台预览谱面样式修改

src/helpers/customMusicScore.ts

@@ -592,7 +592,7 @@ export const resetFormate = () => {
 		};
 
 		// 给小节添加背景色
-		if (!state.isCreateImg && !state.isPreView && !state.isCbsView) {
+		if (!state.isCreateImg && !state.isPreView) {
 			staves.forEach((stave: any,i: number) => {
 				const list = [
 					Array.from(stave?.querySelectorAll(".vf-StaveSection") || []),
@@ -613,8 +613,8 @@ export const resetFormate = () => {
 					}
 				} catch (error) {}
 				const bbox = stave?.getBBox() || {};
-				const bgColor = state.isEvaluatReport ? '#132D4C' : '#609FCF';
-				const botColor = state.isEvaluatReport ? '#040D1E' : '#2B70A5';
+				const bgColor = state.isEvaluatReport ? '#132D4C' : state.isCbsView ? 'transparent' : '#609FCF';
+				const botColor = state.isEvaluatReport ? '#040D1E' : state.isCbsView ? 'transparent' : '#2B70A5';
 				const rect = `<rect class="vf-custom-bg" x="${bbox.x}" y="${bbox.y}" width="${bbox.width}" height="${bbox.height}" fill=${bgColor} />`
 				const rectBottom = `<rect class="vf-custom-bot" x="${bbox.x}" y="${bbox.y+bbox.height}" width="${bbox.width}" height="7.5" fill=${botColor} />`
 				// const filterDom = `<defs>
@@ -645,7 +645,7 @@ export const resetFormate = () => {
 			while (parent && !parent.classList?.contains('vf-measure') && parent.tagName !== 'body' && parent) { // 假设你想找到最外层的 DIV
 				parent = parent.parentElement;
 			}
-			const parentY = parent?.querySelector('.vf-custom-bg').getBoundingClientRect()?.y || 0;
+			const parentY = parent?.querySelector('.vf-custom-bg')?.getBoundingClientRect()?.y || 0;
 			const dotY = group?.getBoundingClientRect()?.y || 0;
 			const distanceY = parentY - dotY;
 			const translateY = 15 - distanceY;

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

@@ -282,35 +282,41 @@
         #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;
-        // }
+        .noteActive {
+            path {
+                fill: #0097FF;
+                stroke: #0097FF;
+            }
+
+            rect {
+                stroke: #0097FF;
+            }
+        }
+        .lyricActive {
+            text {
+                fill: #0097FF;
+                stroke: #0097FF;
+            }
+        }
+        .voiceActive {
+            rect {
+                fill: #0097FF;
+                stroke: #0097FF;
+            }
+        }
+        .rectActive {
+            fill: #0097FF;
+            stroke: #0097FF;
+        }
         #selectionBgBox {
             display: none;
         }
+        .vf-numbered_note_lines {
+            rect {
+                fill: #000;
+                stroke: #000;
+            }
+        }
     }
 }
 

src/state.ts

@@ -2015,12 +2015,20 @@ watch(
         measureNum = nextMeasureNum
       }
       if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex))) {
-        item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
-        item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
+        if (state.isCbsView) {
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#FFF6E1")
+        } else {
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
+          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
+        }
         // 预备小节
         if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML && state.section.length === 2){
-          item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#71B8BD")
-          item?.querySelector('.vf-custom-bot')?.setAttribute("fill", "#448F9C")
+          if (state.isCbsView) {
+            item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#E3F1FF")
+          } else {
+            item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#71B8BD")
+            item?.querySelector('.vf-custom-bot')?.setAttribute("fill", "#448F9C")
+          }
         }
       } else {
         // 有选段只清除选段处的
@@ -2033,17 +2041,34 @@ watch(
             rightMeasureNumberXML = state.section[0].MeasureNumberXML
           }
           if(measureNum >= leftMeasureNumberXML && measureNum <= rightMeasureNumberXML){
-            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
-            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
+            if (!state.isCbsView) {
+              item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
+              item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
+            } else {
+              item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
+            }
+          }
+          if (measureNum >= leftMeasureNumberXML && measureNum <= rightMeasureNumberXML) {
+            if (state.isCbsView) {
+              item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255,246,225,0.5)")
+            }
           }
           // 预备小节
           if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML){
-            item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#71B8BD")
-            item?.querySelector('.vf-custom-bot')?.setAttribute("fill", "#448F9C")
+            if (state.isCbsView) {
+              item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#E3F1FF")
+            } else {
+              item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#71B8BD")
+              item?.querySelector('.vf-custom-bot')?.setAttribute("fill", "#448F9C")
+            }
           }
         } else {
-          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
-          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
+          if (!state.isCbsView) {
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
+            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
+          } else {
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
+          }
         }
       }
     })
@@ -2078,18 +2103,35 @@ watch(
         }
         // 小于选中置灰
         if (measureNum < leftMeasureNumberXML) {
-          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(96,159,207,0.5)")
-          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "rgba(43,112,165,0.5)")
+          if (!state.isCbsView) {
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(96,159,207,0.5)")
+            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "rgba(43,112,165,0.5)")
+          } else {
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
+          }
         }
         // 大于选中置灰
         if(measureNum > rightMeasureNumberXML){
-          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(96,159,207,0.5)")
-          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "rgba(43,112,165,0.5)")
+          if (!state.isCbsView) {
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(96,159,207,0.5)")
+            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "rgba(43,112,165,0.5)")
+          } else {
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", 'transparent')
+          }
+        }
+        if (measureNum >= leftMeasureNumberXML && measureNum <= rightMeasureNumberXML) {
+          if (state.isCbsView) {
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255,246,225,0.5)")
+          }
         }
         // 预备小节
         if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML){
-          item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#71B8BD")
-          item?.querySelector('.vf-custom-bot')?.setAttribute("fill", "#448F9C")
+          if (state.isCbsView) {
+            item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#E3F1FF")
+          } else {
+            item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "#71B8BD")
+            item?.querySelector('.vf-custom-bot')?.setAttribute("fill", "#448F9C")
+          }
         }        
       })
     }else{
@@ -2108,11 +2150,20 @@ watch(
           measureNum = nextMeasureNum
         }
         if (measureNum >= 0 && (measureNum === state.activeMeasureIndex || (measureNum < state.activeMeasureIndex && nextMeasureNum > state.activeMeasureIndex)) ) {
-          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
-          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
+          if (state.isCbsView) {
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "transparent")
+          } else {
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#132D4C")
+            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#040D1E")
+          }
         } else {
-          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
-          item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
+          if (state.isCbsView) {
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "transparent")
+          } else {
+            item.querySelector('.vf-custom-bg')?.setAttribute("fill", "#609FCF")
+            item.querySelector('.vf-custom-bot')?.setAttribute("fill", "#2B70A5")
+          }
+
         }
       })
     }