refactor: cursor 机制

src/core/render/item.ts

@@ -271,6 +271,9 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
     /** 不透明度 */
     alpha: number = 1;
 
+    /** 鼠标覆盖在此元素上时的光标样式 */
+    cursor: string = 'auto';
+
     get x() {
         return this._transform.x;
     }
@@ -1149,6 +1152,11 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
                 this.setAnchor(nextValue[0] as number, nextValue[1] as number);
                 return;
             }
+            case 'cursor': {
+                if (!this.assertType(nextValue, 'string', key)) return;
+                this.cursor = nextValue;
+                return;
+            }
             case 'scale': {
                 if (!this.assertType(nextValue, Array, key)) return;
                 this._transform.setScale(

src/core/render/render.ts

@@ -2,6 +2,7 @@ import { logger } from '../common/logger';
 import { MotaOffscreenCanvas2D } from '../fx/canvas2d';
 import { Container } from './container';
 import {
+    ActionEventMap,
     ActionType,
     IActionEvent,
     IWheelEvent,
@@ -46,6 +47,8 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
 
     /** 用于终止 document 上的监听 */
     private abort?: AbortController;
+    /** 根据捕获行为判断光标样式 */
+    private targetCursor: string = 'auto';
 
     target!: MotaOffscreenCanvas2D;
 
@@ -108,6 +111,7 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
                 ActionType.Move,
                 this.lastMouse
             );
+            this.targetCursor = 'auto';
             this.captureEvent(ActionType.Move, event);
         });
         canvas.addEventListener('mouseenter', ev => {
@@ -381,6 +385,16 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
         return list;
     }
 
+    bubbleEvent<T extends ActionType>(
+        type: T,
+        event: ActionEventMap[T]
+    ): ActionEventMap[T] | null {
+        if (this.targetCursor !== this.target.canvas.style.cursor) {
+            this.target.canvas.style.cursor = this.targetCursor;
+        }
+        return super.bubbleEvent(type, event);
+    }
+
     update(_item: RenderItem = this) {
         this.cacheDirty = true;
     }
@@ -450,7 +464,11 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
         return this.target.canvas;
     }
 
-    hoverElement(_element: RenderItem): void {}
+    hoverElement(element: RenderItem): void {
+        if (element.cursor !== 'auto') {
+            this.targetCursor = element.cursor;
+        }
+    }
 
     destroy() {
         super.destroy();

src/core/render/renderer/props.ts

@@ -45,6 +45,7 @@ export interface BaseProps {
     id?: string;
     alpha?: number;
     composite?: GlobalCompositeOperation;
+    cursor?: string;
     /**
      * 定位属性，可以填 `[横坐标，纵坐标，宽度，高度，x锚点，y锚点]`，
      * 对于横坐标与纵坐标、宽度与高度、x锚点与y锚点，两两一组要么都填，要么都不填

src/module/render/components/page.tsx

@@ -70,6 +70,7 @@ export const Page = defineComponent<PageProps, {}, string, PageSlots>(
         const height = computed(() => props.loc[3] ?? 200);
         const round = computed(() => pageSize.value / 4);
         const pageFont = computed(() => `${pageSize.value}px normal`);
+        const nowPageFont = computed(() => `bold ${pageSize.value}px normal`);
 
         // 左右箭头的颜色
         const leftColor = computed(() => (isFirst.value ? '#666' : '#ddd'));
@@ -161,7 +162,11 @@ export const Page = defineComponent<PageProps, {}, string, PageSlots>(
                         {slots.default?.(nowPage.value)}
                     </container>
                     <container loc={pageLoc.value}>
-                        <container loc={leftLoc.value} onClick={lastPage}>
+                        <container
+                            loc={leftLoc.value}
+                            onClick={lastPage}
+                            cursor="pointer"
+                        >
                             <g-rectr
                                 loc={rectLoc.value}
                                 circle={[round.value]}
@@ -180,6 +185,7 @@ export const Page = defineComponent<PageProps, {}, string, PageSlots>(
                             <container
                                 loc={leftPageLoc.value}
                                 onClick={lastPage}
+                                cursor="pointer"
                             >
                                 <g-rectr
                                     loc={rectLoc.value}
@@ -209,13 +215,14 @@ export const Page = defineComponent<PageProps, {}, string, PageSlots>(
                                 loc={textLoc.value}
                                 text={nowPage.value.toString()}
                                 fillStyle="#222"
-                                font={pageFont.value}
+                                font={nowPageFont.value}
                             ></text>
                         </container>
                         {!isLast.value && (
                             <container
                                 loc={rightPageLoc.value}
                                 onClick={nextPage}
+                                cursor="pointer"
                             >
                                 <g-rectr
                                     loc={rectLoc.value}
@@ -231,7 +238,11 @@ export const Page = defineComponent<PageProps, {}, string, PageSlots>(
                                 ></text>
                             </container>
                         )}
-                        <container loc={rightLoc.value} onClick={nextPage}>
+                        <container
+                            loc={rightLoc.value}
+                            onClick={nextPage}
+                            cursor="pointer"
+                        >
                             <g-rectr
                                 loc={rectLoc.value}
                                 circle={[round.value]}

src/module/render/ui/statusBar.tsx

@@ -92,6 +92,7 @@ export const LeftStatusBar = defineComponent<StatusBarProps<ILeftHeroStatus>>(
                         text={floorName}
                         loc={central(24)}
                         font={font1}
+                        cursor="pointer"
                     ></text>
                     <text text={s.lv} loc={central(54)} font={font1}></text>
                     <image image={hpIcon} loc={iconLoc(0)}></image>
@@ -144,11 +145,17 @@ export const LeftStatusBar = defineComponent<StatusBarProps<ILeftHeroStatus>>(
                         font={font2}
                         fillStyle="#f88"
                     ></text>
-                    <text text="技能树" loc={central(396)} font={font1}></text>
+                    <text
+                        text="技能树"
+                        loc={central(396)}
+                        font={font1}
+                        cursor="pointer"
+                    ></text>
                     <text
                         text="查看技能"
                         loc={central(428)}
                         font={font1}
+                        cursor="pointer"
                     ></text>
                 </container>
             );