修复 message 不弹出

lib/components/func/debugPanel/web.js

@@ -9,11 +9,15 @@ function render(props) {
     var _a = props.data, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.style, style = _c === void 0 ? {} : _c;
     var _d = props.methods, printCachedStore = _d.printCachedStore, printDebugStore = _d.printDebugStore, printRunningTree = _d.printRunningTree, resetInitialData = _d.resetInitialData, downloadEnv = _d.downloadEnv, resetEnv = _d.resetEnv;
     var _e = tslib_1.__read((0, react_1.useState)(false), 2), visible = _e[0], setVisible = _e[1];
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { type: "text", shape: "circle", icon: (0, jsx_runtime_1.jsx)(icons_1.UpOutlined, { style: { fontSize: 12 } }), style: tslib_1.__assign({ position: 'fixed', bottom: 0, right: '45vw', zIndex: 999 }, style), onClick: function () {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { type: "text", shape: "circle", icon: (0, jsx_runtime_1.jsx)(icons_1.UpOutlined, { style: { fontSize: 12 } }), style: tslib_1.__assign({ position: 'fixed', bottom: 0, right: 'calc(100% / 2 - 16px)', zIndex: 999, width: 32, height: 32 }, style), onClick: function () {
                     setVisible(true);
-                } }), (0, jsx_runtime_1.jsxs)(antd_1.Drawer, tslib_1.__assign({ placement: placement, open: visible, onClose: function () {
+                } }), (0, jsx_runtime_1.jsxs)(antd_1.Drawer, tslib_1.__assign({ getContainer: false, placement: placement, open: visible, onClose: function () {
                     setVisible(false);
-                }, title: "Debug\u63A7\u5236\u53F0", footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: "application/json", hidden: true, id: "upload", onChange: function () {
+                }, title: "Debug\u63A7\u5236\u53F0", footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), rootStyle: {
+                    width: '100vw',
+                }, bodyStyle: {
+                    width: '100vw',
+                } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: "application/json", hidden: true, id: "upload", onChange: function () {
                             var file = document.getElementById('upload')
                                 .files[0];
                             if (typeof FileReader === undefined) {

lib/components/message/index.js

@@ -7,9 +7,10 @@ exports.default = OakComponent({
     formData: function (_a) {
         var props = _a.props;
         var data = this.consumeMessage();
+        if (process.env.OAK_PLATFORM === 'wechatMp') {
             if (data) {
                 var self_1 = this;
-            message_1.default[data.type](Object.assign({}, process.env.OAK_PLATFORM === 'wechatMp' && {
+                message_1.default[data.type](Object.assign({
                     // 处理小程序
                     offset: [20, 32],
                     icon: true,
@@ -17,6 +18,10 @@ exports.default = OakComponent({
                 }, data));
             }
             return {};
+        }
+        return {
+            data: data,
+        };
     },
     lifetimes: {
         attached: function () {

lib/components/message/web.d.ts

@@ -1 +1,7 @@
-export default function render(): null;
+/// <reference types="react" />
+import { MessageProps } from 'oak-frontend-base/lib/types/Message';
+export default function render(props: {
+    data: {
+        data: MessageProps;
+    };
+}): JSX.Element;

lib/components/message/web.js

@@ -1,6 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function render() {
+var tslib_1 = require("tslib");
-    return null;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var antd_1 = require("antd");
+function render(props) {
+    var _a = tslib_1.__read(antd_1.message.useMessage(), 2), messageApi = _a[0], contextHolder = _a[1];
+    var data = props.data.data;
+    (0, react_1.useEffect)(function () {
+        if (data) {
+            messageApi[data.type](data);
+        }
+    }, [data]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: contextHolder });
 }
 exports.default = render;

package.json

@@ -80,7 +80,7 @@
         "gen:areaDebug": "ts-node ./scripts/generateAreaDebug.ts",
         "clean:dir": "ts-node ./scripts/cleanDtsAndJs",
         "test": "ts-node ./test/test.ts",
-        "prepare": "rimraf node_modules/react & rimraf node_modules/react-dom & rimraf node_modules/react-router"
+        "prepare": "rimraf node_modules/react & rimraf node_modules/react-dom & rimraf node_modules/react-router & rimraf node_modules/antd"
     },
     "main": "lib/index"
 }

src/components/func/debugPanel/web.tsx

@@ -27,8 +27,10 @@ export default function render(props: WebComponentProps<EntityDict, 'address', t
                 style={{
                     position: 'fixed',
                     bottom: 0,
-                    right: '45vw',
+                    right: 'calc(100% / 2 - 16px)',
                     zIndex: 999,
+                    width: 32,
+                    height: 32,
                     ...style,
                 }}
                 onClick={() => {
@@ -36,6 +38,7 @@ export default function render(props: WebComponentProps<EntityDict, 'address', t
                 }}
             />
             <Drawer
+                getContainer={false}
                 placement={placement}
                 open={visible}
                 onClose={() => {
@@ -43,6 +46,12 @@ export default function render(props: WebComponentProps<EntityDict, 'address', t
                 }}
                 title="Debug控制台"
                 footer={<></>}
+                rootStyle={{
+                    width: '100vw',
+                }}
+                bodyStyle={{
+                    width: '100vw',
+                }}
             >
                 <input
                     type="file"

src/components/message/index.ts

@@ -5,12 +5,12 @@ export default OakComponent({
     isList: false,
     formData({ props }) {
          const data = this.consumeMessage() as MessageProps;
+        if (process.env.OAK_PLATFORM === 'wechatMp') {
             if (data) {
                 const self = this;
                 Message[data.type as MessageProps['type']](
                     Object.assign(
-                    {},
+                        {
-                    process.env.OAK_PLATFORM === 'wechatMp' && {
                             // 处理小程序
                             offset: [20, 32],
                             icon: true,
@@ -21,6 +21,11 @@ export default OakComponent({
                 );
             }
             return {};
+        }
+
+        return {
+            data,
+        };
     },
     lifetimes: {
         attached() {

src/components/message/web.tsx

@@ -1,6 +1,17 @@
 
-import * as React from 'react';
+import React, { useEffect } from 'react';
+import { message } from 'antd';
+import { MessageProps } from 'oak-frontend-base/lib/types/Message';
 
-export default function render() {
+export default function render(props: { data: { data: MessageProps } }) {
-    return null;
+    const [messageApi, contextHolder] = message.useMessage();
+    const { data } = props.data;
+
+    useEffect(() => {
+        if (data) {
+            messageApi[data.type as MessageProps['type']](data as any);
+        }
+    }, [data]);
+
+    return <>{contextHolder}</>;
 }