feat: UIContainer 元素返回 VNode 数组

src/core/system/ui/container.tsx

@@ -1,7 +1,6 @@
-import { computed, defineComponent } from 'vue';
-import { IUIMountable, UIBaseElementSlots, UIComponent } from './shared';
+import { computed, defineComponent, VNode } from 'vue';
+import { IUIMountable, UIComponent } from './shared';
 import { SetupComponentOptions } from '@/module';
-import { ContainerProps } from '@/core/render';
 
 export interface UIContainerProps {
     controller: IUIMountable<UIComponent>;
@@ -15,42 +14,18 @@ export const UIContainer = defineComponent<UIContainerProps>(props => {
     const data = props.controller;
     const back = data.backIns;
     const show = computed(() => data.stack.filter(v => !v.hidden));
-    return () => {
-        return (
-            <data.baseElement>
-                {(() => {
-                    const b = back.value;
-                    if (!b || !data.showBack.value || b.hidden) return;
-                    return (
-                        <b.ui.component
-                            {...b.vBind}
-                            key={b.key}
-                        ></b.ui.component>
-                    );
-                })()}
-                {show.value.map(v => (
-                    <v.ui.component {...v.vBind} key={v.key}></v.ui.component>
-                ))}
-            </data.baseElement>
+    return (): VNode[] => {
+        const elements: VNode[] = [];
+        const b = back.value;
+        if (b && data.showBack.value && !b.hidden) {
+            elements.push(
+                <b.ui.component {...b.vBind} key={b.key}></b.ui.component>
+            );
+        }
+        return elements.concat(
+            show.value.map(v => (
+                <v.ui.component {...v.vBind} key={v.key}></v.ui.component>
+            ))
         );
     };
 }, containerConfig);
-
-export const UIRenderBase = defineComponent<
-    ContainerProps,
-    {},
-    string,
-    UIBaseElementSlots
->((_props, { slots }) => {
-    return () => {
-        return <container>{slots.defaults()}</container>;
-    };
-});
-
-export const UIDomBase = defineComponent<{}, {}, string, UIBaseElementSlots>(
-    (_props, { slots }) => {
-        return () => {
-            return <div>{slots.defaults()}</div>;
-        };
-    }
-);

src/core/system/ui/controller.ts

@@ -5,7 +5,6 @@ import {
     IKeepController,
     IUIInstance,
     IUIMountable,
-    UIBaseElement,
     UIComponent
 } from './shared';
 import { Props } from '@/core/render';
@@ -18,7 +17,8 @@ import {
     ref,
     Ref,
     shallowRef,
-    ShallowRef
+    ShallowRef,
+    VNode
 } from 'vue';
 import { UIContainer } from './container';
 
@@ -109,10 +109,7 @@ export class UIController<C extends UIComponent = UIComponent>
      * 创建一个 ui 控制器
      * @param id 这个控制器的唯一标识符
      */
-    constructor(
-        public readonly id: string,
-        public readonly baseElement: UIBaseElement
-    ) {
+    constructor(public readonly id: string) {
         super();
         if (UIController.controllers.has(id)) {
             logger.warn(57, id);
@@ -124,7 +121,7 @@ export class UIController<C extends UIComponent = UIComponent>
     /**
      * 渲染这个 UI
      */
-    render() {
+    render(): VNode {
         return h(UIContainer, { controller: this });
     }
 

src/core/system/ui/shared.ts

@@ -1,12 +1,5 @@
 import { Props } from '@/core/render';
-import {
-    DefineComponent,
-    DefineSetupFnComponent,
-    Ref,
-    ShallowRef,
-    SlotsType,
-    VNode
-} from 'vue';
+import { DefineComponent, DefineSetupFnComponent, Ref, ShallowRef } from 'vue';
 
 export type UIComponent = DefineSetupFnComponent<any> | DefineComponent;
 
@@ -29,14 +22,6 @@ export interface IKeepController {
     unload(): void;
 }
 
-export type UIBaseElementSlots = SlotsType<{
-    defaults: () => VNode[];
-}>;
-
-export type UIBaseElement =
-    | DefineComponent<{}, {}, string, UIBaseElementSlots>
-    | DefineSetupFnComponent<{}, {}, UIBaseElementSlots>;
-
 export interface IUIMountable<C extends UIComponent> {
     /** 当前的 UI 栈 */
     readonly stack: IUIInstance<C>[];
@@ -44,8 +29,6 @@ export interface IUIMountable<C extends UIComponent> {
     readonly backIns: ShallowRef<IUIInstance<C> | null>;
     /** 当前是否显示背景 UI */
     readonly showBack: Ref<boolean>;
-    /** UI 控制器的根元素 */
-    readonly baseElement: UIBaseElement;
 
     /**
      * 隐藏一个 UI

src/module/render/index.tsx

@@ -17,7 +17,7 @@ import { Textbox } from './components';
 import { ILayerGroupRenderExtends, ILayerRenderExtends } from '@/core/render';
 import { Props } from '@/core/render';
 import { WeatherController } from '../weather';
-import { UIController, UIRenderBase } from '@/core/system';
+import { UIController } from '@/core/system';
 
 export function create() {
     const main = new MotaRenderer();
@@ -64,11 +64,13 @@ export function create() {
             weather.bind(map.value);
         });
 
-        const ui = new UIController('main-ui', UIRenderBase);
+        const ui = new UIController('main-ui');
 
         return () => (
             <container id="map-draw" {...mapDrawProps}>
-                {ui.render()}
+                <container width={480} height={480}>
+                    {ui.render()}
+                </container>
                 <layer-group id="layer-main" ex={layerGroupExtends} ref={map}>
                     <layer layer="bg" zIndex={10}></layer>
                     <layer layer="bg2" zIndex={20}></layer>