style: 将jsx元素的props拆分出来，提高可读性

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
+            <container id="map-draw" {...mapDrawProps}>
-                id="map-draw"
+                <layer-group id="layer-main" ex={layerGroupExtends}>
-                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()
-                    ]}
-                >
                     <layer layer="bg" zIndex={10}></layer>
                     <layer layer="bg2" zIndex={20}></layer>
-                    <layer
+                    <layer layer="event" zIndex={30} ex={eventExtends}></layer>
-                        layer="event"
-                        zIndex={30}
-                        ex={[
-                            new HeroRenderer(),
-                            new LayerDoorAnimate(),
-                            new LayerShadowExtends()
-                        ]}
-                    ></layer>
                     <layer layer="fg" zIndex={40}></layer>
                     <layer layer="fg2" zIndex={50}></layer>
                     <PopText id="pop-main" zIndex={80}></PopText>
                 </layer-group>
-                <Textbox
+                <Textbox id="main-textbox" {...mainTextboxProps}></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>
                 <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);

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');