feat: 保持谱面流速不受播放速度影响

src/pages/public/Chart/components/ChartCanvas/ChartCanvas.tsx

@@ -102,6 +102,7 @@ export function ChartCanvas() {
   const totalMeasures = useGameStore((s) => s.timeline.totalMeasures);
   const beatsPerMeasure = useGameStore((s) => s.timeline.beatsPerMeasure);
   const hiSpeed = useGameStore((s) => s.hiSpeed);
+  const alwaysKeepHiSpeed = useGameStore((s) => s.alwaysKeepHiSpeed);
   const slideRotation = useGameStore((s) => s.slideRotation);
   const mirrorMode = useGameStore((s) => s.mirrorMode);
   const judgmentLineDesign = useGameStore((s) => s.judgmentLineDesign);
@@ -171,6 +172,8 @@ export function ChartCanvas() {
     renderer.setPinkSlideStart(state.pinkSlideStart);
     renderer.setHighlightExNotes(state.highlightExNotes);
     renderer.setNormalColorBreakSlide(state.normalColorBreakSlide);
+    renderer.setAlwaysKeepHiSpeed(state.alwaysKeepHiSpeed);
+    renderer.setPlaybackSpeed(state.playbackSpeed);
 
     const handleResize = () => {
       renderer.resize();
@@ -209,6 +212,20 @@ export function ChartCanvas() {
     }
   }, [hiSpeed, renderFrame]);
 
+  useEffect(() => {
+    if (rendererRef.current) {
+      rendererRef.current.setAlwaysKeepHiSpeed(alwaysKeepHiSpeed);
+      renderFrame(playbackTimeRef.current);
+    }
+  }, [alwaysKeepHiSpeed, renderFrame]);
+
+  useEffect(() => {
+    if (rendererRef.current) {
+      rendererRef.current.setPlaybackSpeed(playbackSpeed);
+      renderFrame(playbackTimeRef.current);
+    }
+  }, [playbackSpeed, renderFrame]);
+
   useEffect(() => {
     if (rendererRef.current) {
       rendererRef.current.setSlideRotation(slideRotation);

src/pages/public/Chart/components/Controls/Controls.tsx

@@ -168,10 +168,10 @@ export function PlaybackControls({ onToggleFullscreen, isFullscreen }: PlaybackC
 
 export function Controls() {
   const {
-    hiSpeed, slideRotation, mirrorMode, playbackSpeed, rawSimaiText,
+    hiSpeed, alwaysKeepHiSpeed, slideRotation, mirrorMode, playbackSpeed, rawSimaiText,
     judgmentLineDesign, pinkSlideStart, highlightExNotes, normalColorBreakSlide,
     musicOffset, musicVolume, soundOffset, selectedDifficulty, availableDifficulties, chartData,
-    setHiSpeed, setSlideRotation, setMirrorMode, setPlaybackSpeed,
+    setHiSpeed, setAlwaysKeepHiSpeed, setSlideRotation, setMirrorMode, setPlaybackSpeed,
     setJudgmentLineDesign, setPinkSlideStart, setHighlightExNotes, setNormalColorBreakSlide,
     setChartData, setMusicOffset, setMusicVolume, setSoundOffset, setSelectedDifficulty,
   } = useGameStore(useShallow((state) => state));
@@ -363,6 +363,14 @@ export function Controls() {
                 onChange={(e) => setNormalColorBreakSlide(e.currentTarget.checked)}
               />
             </Group>
+
+            <Group justify="space-between">
+              <Text size="sm">保持谱面流速</Text>
+              <Switch
+                checked={alwaysKeepHiSpeed}
+                onChange={(e) => setAlwaysKeepHiSpeed(e.currentTarget.checked)}
+              />
+            </Group>
           </Stack>
         </Collapse>
       </Card>

src/pages/public/Chart/renderers/BaseRenderer.ts

@@ -116,7 +116,11 @@ export abstract class BaseRenderer {
   }
 
   protected getApproachTimeMs(): number {
-    return this.context.baseApproachTimeMs / this.context.hiSpeed;
+    if(this.context.config.alwaysKeepHiSpeed) {
+      return this.context.baseApproachTimeMs / (this.context.hiSpeed / this.context.config.playbackSpeed);
+    } else {
+      return this.context.baseApproachTimeMs / this.context.hiSpeed;
+    }
   }
 
   protected distanceToCenter(x: number, y: number): number {

src/pages/public/Chart/renderers/MainRenderer.ts

@@ -42,6 +42,8 @@ export class MainRenderer {
 
   private config: RendererConfig = {
     hiSpeed: HI_SPEED_DEFAULT * HI_SPEED_CONVERSION_FACTOR,
+    alwaysKeepHiSpeed: false,
+    playbackSpeed: 1.0,
     mirrorMode: 'none',
     highlightExNotes: false,
     normalColorBreakSlide: false,
@@ -164,6 +166,18 @@ export class MainRenderer {
     }
   }
 
+  setAlwaysKeepHiSpeed(alwaysKeepHighSpeed: boolean): void {
+    this.config.alwaysKeepHiSpeed = alwaysKeepHighSpeed;
+    this.updateRenderersContext();
+  }
+
+  setPlaybackSpeed(playbackSpeed: number): void {
+    if (playbackSpeed >= 0.1 && playbackSpeed <= 1.0) {
+      this.config.playbackSpeed = playbackSpeed;
+      this.updateRenderersContext();
+    }
+  }
+
   setBpm(bpm: number): void {
     this.bpm = bpm;
   }

src/pages/public/Chart/stores/useGameStore.ts

@@ -29,6 +29,8 @@ interface GameState {
   availableDifficulties: AvailableDifficulties;
   /** 流速 */
   hiSpeed: number;
+  /** 保持固定流速 */
+  alwaysKeepHiSpeed: boolean;
   /** 滑条起始 Note 是否旋转 */
   slideRotation: boolean;
   /** 镜像设置 */
@@ -102,6 +104,8 @@ interface GameActions {
   setAvailableDifficulties: (difficulties: AvailableDifficulties) => void;
   /** 设置流速 */
   setHiSpeed: (speed: number) => void;
+  /** 设置保持固定流速 */
+  setAlwaysKeepHiSpeed: (enabled: boolean) => void;
   /** 设置滑条起始 Note 是否旋转 */
   setSlideRotation: (enabled: boolean) => void;
   /** 设置镜像模式 */
@@ -165,6 +169,7 @@ const initialState: GameState = {
   selectedDifficulty: null,
   availableDifficulties: {},
   hiSpeed: 6,
+  alwaysKeepHiSpeed: false,
   slideRotation: true,
   mirrorMode: 'none',
   judgmentLineDesign: 'simple',
@@ -217,7 +222,7 @@ function getDivisorAt(chartData: Chart | null, time: number, forStepping: boolea
   }
 
   const events = chartData.divisorEvents;
-  
+
   // 二分查找最后一个 timing <= time 的事件
   let left = 0;
   let right = events.length - 1;
@@ -234,7 +239,7 @@ function getDivisorAt(chartData: Chart | null, time: number, forStepping: boolea
   }
 
   const divisor = result >= 0 ? events[result].divisor : 4;
-  
+
   // 步进时限制最大分拍
   return forStepping ? Math.min(divisor, MAX_STEP_DIVISOR) : divisor;
 }
@@ -301,7 +306,7 @@ export const useGameStore = create<GameStore>()(
       const state = get();
       const { beatsPerMeasure, totalMeasures } = state.timeline;
       const time = playbackTimeRef.current;
-      
+
       // 从 playbackTimeRef 同步当前位置
       const measure = Math.floor(time / beatsPerMeasure);
       const clampedMeasure = Math.max(0, Math.min(measure, totalMeasures - 1));
@@ -452,7 +457,7 @@ export const useGameStore = create<GameStore>()(
 
     setChartData: (chart: Chart | null) => {
       playbackTimeRef.current = 0;
-      
+
       set((state) => ({
         chartData: chart,
         isPlaying: false,
@@ -477,6 +482,7 @@ export const useGameStore = create<GameStore>()(
       set({ availableDifficulties: difficulties }),
 
     setHiSpeed: (speed: number) => set({ hiSpeed: Math.max(3, Math.min(9, speed)) }),
+    setAlwaysKeepHiSpeed: (enabled: boolean) => set({ alwaysKeepHiSpeed: enabled }),
     setSlideRotation: (enabled: boolean) => set({ slideRotation: enabled }),
     setMirrorMode: (mode: MirrorMode) => set({ mirrorMode: mode }),
     setJudgmentLineDesign: (design: JudgmentLineDesign) => set({ judgmentLineDesign: design }),

src/pages/public/Chart/types/index.ts

@@ -383,6 +383,10 @@ export interface Point2D {
 export interface RendererConfig {
   /** 谱面流速：3-9 */
   hiSpeed: number;
+  /** 保持固定流速 */
+  alwaysKeepHiSpeed: boolean;
+  /** 播放速度：0.1-1.0 */
+  playbackSpeed: number;
   /** 镜像模式：上下反、左右反、全反 */
   mirrorMode: MirrorMode;
   /** 是否高亮保护套 Note */