From fa7b415c316ff48187dcaf9a15e1d1d1a3fb81a7 Mon Sep 17 00:00:00 2001
From: unanmed <1319491857@qq.com>
Date: Sat, 28 Dec 2024 19:48:33 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=B0=86jsx=E5=85=83=E7=B4=A0?=
 =?UTF-8?q?=E7=9A=84props=E6=8B=86=E5=88=86=E5=87=BA=E6=9D=A5=EF=BC=8C?=
 =?UTF-8?q?=E6=8F=90=E9=AB=98=E5=8F=AF=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/render/index.tsx | 88 +++++++++++++++++++--------------------
 src/core/render/utils.ts  | 15 +++++++
 2 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/src/core/render/index.tsx b/src/core/render/index.tsx
index 76eba60..67c9703 100644
--- a/src/core/render/index.tsx
+++ b/src/core/render/index.tsx
@@ -14,71 +14,67 @@ import { FloorChange } from '@/plugin/fallback';
 import { createApp } from './renderer';
 import { defineComponent } from 'vue';
 import { Textbox } from './components';
+import { ILayerGroupRenderExtends, ILayerRenderExtends } from './preset';
+import { Props } from './utils';
 
 let main: MotaRenderer;
 
 Mota.require('var', 'loading').once('coreInit', () => {
     main = new MotaRenderer();
 
-    const Com = defineComponent(props => {
+    const App = defineComponent(props => {
+        const layerGroupExtends: ILayerGroupRenderExtends[] = [
+            new FloorDamageExtends(),
+            new FloorItemDetail(),
+            new LayerGroupFilter(),
+            new LayerGroupPortal(),
+            new LayerGroupHalo(),
+            new LayerGroupAnimate(),
+            new FloorViewport()
+        ];
+        const eventExtends: ILayerRenderExtends[] = [
+            new HeroRenderer(),
+            new LayerDoorAnimate(),
+            new LayerShadowExtends()
+        ];
+        const mapDrawProps: Props<'container'> = {
+            width: core._PX_,
+            height: core._PY_
+        };
+        const mainTextboxProps: Props<typeof Textbox> = {
+            text: '',
+            hidden: true,
+            width: 480,
+            height: 150,
+            y: 330,
+            zIndex: 30,
+            fillStyle: '#fff',
+            titleFill: 'gold',
+            font: '16px normal',
+            titleFont: '700 20px normal',
+            winskin: 'winskin2.png',
+            interval: 25,
+            lineHeight: 6
+        };
+
         return () => (
-            <container
-                id="map-draw"
-                hd
-                antiAliasing={false}
-                width={core._PX_}
-                height={core._PY_}
-            >
-                <layer-group
-                    id="layer-main"
-                    ex={[
-                        new FloorDamageExtends(),
-                        new FloorItemDetail(),
-                        new LayerGroupFilter(),
-                        new LayerGroupPortal(),
-                        new LayerGroupHalo(),
-                        new LayerGroupAnimate(),
-                        new FloorViewport()
-                    ]}
-                >
+            <container id="map-draw" {...mapDrawProps}>
+                <layer-group id="layer-main" ex={layerGroupExtends}>
                     <layer layer="bg" zIndex={10}></layer>
                     <layer layer="bg2" zIndex={20}></layer>
-                    <layer
-                        layer="event"
-                        zIndex={30}
-                        ex={[
-                            new HeroRenderer(),
-                            new LayerDoorAnimate(),
-                            new LayerShadowExtends()
-                        ]}
-                    ></layer>
+                    <layer layer="event" zIndex={30} ex={eventExtends}></layer>
                     <layer layer="fg" zIndex={40}></layer>
                     <layer layer="fg2" zIndex={50}></layer>
                     <PopText id="pop-main" zIndex={80}></PopText>
                 </layer-group>
-                <Textbox
-                    id="main-textbox"
-                    text=""
-                    hidden
-                    width={480}
-                    height={150}
-                    y={330}
-                    zIndex={30}
-                    fillStyle={'#fff'}
-                    titleFill={'gold'}
-                    font="16px normal"
-                    titleFont="700 20px normal"
-                    winskin="winskin2.png"
-                    interval={25}
-                    lineHeight={6}
-                ></Textbox>
+                <Textbox id="main-textbox" {...mainTextboxProps}></Textbox>
                 <FloorChange id="floor-change" zIndex={50}></FloorChange>
             </container>
         );
     });
 
     main.hide();
-    createApp(Com).mount(main);
+    createApp(App).mount(main);
     // render(<Com></Com>, main);
 
     console.log(main);
diff --git a/src/core/render/utils.ts b/src/core/render/utils.ts
index e41d54b..9f33db6 100644
--- a/src/core/render/utils.ts
+++ b/src/core/render/utils.ts
@@ -1,6 +1,21 @@
 import { Ticker, TimingFn } from 'mutate-animate';
 import { RenderAdapter } from './adapter';
 import { FloorViewport } from './preset/viewport';
+import { JSX } from 'vue/jsx-runtime';
+import { Component, DefineComponent, DefineSetupFnComponent } from 'vue';
+
+export type Props<
+    T extends
+        | keyof JSX.IntrinsicElements
+        | DefineSetupFnComponent<any>
+        | DefineComponent
+> = T extends keyof JSX.IntrinsicElements
+    ? JSX.IntrinsicElements[T]
+    : T extends DefineSetupFnComponent<any>
+    ? InstanceType<T>['$props']
+    : T extends DefineComponent
+    ? InstanceType<T>['$props']
+    : unknown;
 
 export function disableViewport() {
     const adapter = RenderAdapter.get<FloorViewport>('viewport');