feat: 工具栏整合成一个组件

packages-user/client-modules/src/render/ui/main.tsx

@@ -117,6 +117,7 @@ const MainScene = defineComponent(() => {
         magicDef: 0
     });
     const replayStatus: ReplayingStatus = reactive({
+        replaying: false,
         playing: false,
         speed: 1,
         played: 0,
@@ -129,7 +130,6 @@ const MainScene = defineComponent(() => {
         jumpCount: 0,
         springCount: 0,
         floor: 'MT0',
-        replaying: false,
         replayStatus,
         night: 0
     });
@@ -161,8 +161,8 @@ const MainScene = defineComponent(() => {
         rightStatus.skillDesc = HeroSkill.getSkillDesc();
         rightStatus.night = NightSpecial.getNight(floor);
         rightStatus.floor = floor;
-        rightStatus.replaying = core.isReplaying();
         const { pausing, speed, toReplay, totalList } = core.status.replay;
+        replayStatus.replaying = core.isReplaying();
         replayStatus.playing = !pausing;
         replayStatus.speed = speed;
         replayStatus.played = totalList.length - toReplay.length;

packages-user/client-modules/src/render/ui/statusBar.tsx

@@ -12,12 +12,7 @@ import { transitionedColor } from '../use';
 import { linear } from 'mutate-animate';
 import { Scroll } from '../components';
 import { getArea, MinimapDrawer } from '@motajs/legacy-ui';
-import {
+import { MixedToolbar, ReplayingStatus } from './toolbar';
-    NumpadToolbar,
-    PlayingToolbar,
-    ReplayingStatus,
-    ReplayingToolbar
-} from './toolbar';
 import { HeroSkill } from '@user/data-state';
 import { openViewMap } from './viewmap';
 import { mainUIController } from './controller';
@@ -55,8 +50,6 @@ export interface IRightHeroStatus {
     springCount: number;
     /** 当前楼层 */
     floor: FloorIds;
-    /** 是否正在录像播放 */
-    replaying: boolean;
     /** 录像播放状态 */
     replayStatus: ReplayingStatus;
     /** 极昼永夜 */
@@ -216,11 +209,6 @@ export const RightStatusBar = defineComponent<StatusBarProps<IRightHeroStatus>>(
         const font2 = new Font('normal', 16);
 
         const minimap = ref<Sprite>();
-        const inNumpad = ref(false);
-
-        const onNumpad = () => {
-            inNumpad.value = !inNumpad.value;
-        };
 
         const s = p.status;
         const skill = computed(() =>
@@ -395,22 +383,10 @@ export const RightStatusBar = defineComponent<StatusBarProps<IRightHeroStatus>>(
                         lineWidth={1}
                         zIndex={-20}
                     ></g-line>
-                    {inNumpad.value ? (
+                    <MixedToolbar
-                        <NumpadToolbar
+                        loc={[0, 367, 180, 113]}
-                            loc={[0, 367, 180, 113]}
+                        status={s.replayStatus}
-                            onNumpad={onNumpad}
+                    />
-                        />
-                    ) : s.replaying ? (
-                        <ReplayingToolbar
-                            loc={[0, 367, 180, 113]}
-                            status={s.replayStatus}
-                        />
-                    ) : (
-                        <PlayingToolbar
-                            loc={[0, 367, 180, 113]}
-                            onNumpad={onNumpad}
-                        />
-                    )}
                 </container>
             );
         };

packages-user/client-modules/src/render/ui/toolbar.tsx

@@ -145,6 +145,8 @@ export const PlayingToolbar = defineComponent<
 }, toolbarProps);
 
 export interface ReplayingStatus {
+    /** 是否处在录像播放状态 */
+    replaying: boolean;
     /** 是否正在播放 */
     playing: boolean;
     /** 录像播放速度 */
@@ -378,3 +380,20 @@ export const NumpadToolbar = defineComponent<
         </container>
     );
 }, toolbarProps);
+
+export const MixedToolbar = defineComponent<ReplayingProps>(props => {
+    const inNumpad = ref(false);
+
+    const onNumpad = () => {
+        inNumpad.value = !inNumpad.value;
+    };
+
+    return () =>
+        inNumpad.value ? (
+            <NumpadToolbar loc={props.loc} onNumpad={onNumpad} />
+        ) : props.status.replaying ? (
+            <ReplayingToolbar loc={props.loc} status={props.status} />
+        ) : (
+            <PlayingToolbar loc={props.loc} onNumpad={onNumpad} />
+        );
+}, replayingProps);