@lark-apaas/miaoda-core 0.1.0-alpha.10 → 0.1.0-alpha.11

package/lib/apis/hooks/useCurrentAppInfo.d.ts

@@ -0,0 +1 @@
+export * from '../../hooks/useCurrentAppInfo';

package/lib/apis/hooks/useCurrentAppInfo.js

@@ -0,0 +1 @@
+export * from "../../hooks/useCurrentAppInfo.js";

package/lib/components/AppContainer/IframeBridge.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
+import './LogInterceptor';
 export default function IframeBridge(): React.JSX.Element;

package/lib/components/AppContainer/IframeBridge.js

@@ -1,16 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
 import { useUpdatingRef } from "../../hooks/useUpdatingRef.js";
-var IframeBridge_MessageType = /*#__PURE__*/ function(MessageType) {
-    MessageType["RouteChange"] = "RouteChange";
-    MessageType["RouteBack"] = "RouteBack";
-    MessageType["RouteForward"] = "RouteForward";
-    return MessageType;
-}(IframeBridge_MessageType || {});
-function isMessageType(type) {
-    return Object.values(IframeBridge_MessageType).includes(type);
+import { isIncomingMessage, postMessage } from "../../utils/postMessage.js";
+import "./LogInterceptor.js";
+var IframeBridge_RouteMessageType = /*#__PURE__*/ function(RouteMessageType) {
+    RouteMessageType["RouteChange"] = "RouteChange";
+    RouteMessageType["RouteBack"] = "RouteBack";
+    RouteMessageType["RouteForward"] = "RouteForward";
+    return RouteMessageType;
+}(IframeBridge_RouteMessageType || {});
+function isRouteMessageType(type) {
+    return Object.values(IframeBridge_RouteMessageType).includes(type);
 }
 function IframeBridge() {
     const location = useLocation();
@@ -39,27 +40,46 @@ function IframeBridge() {
         navigateRef
     ]);
     useEffect(()=>{
-        window.parent.postMessage({
-            type: 'PreviewReady'
-        }, getPreviewParentOrigin());
+        postMessage({
+            type: 'PreviewReady',
+            data: {}
+        });
     }, []);
     useEffect(()=>{
         if (isActive.current) {
             isActive.current = false;
             return;
         }
-        window.parent.postMessage({
+        postMessage({
             type: 'ChildLocationChange',
             data: location
-        }, getPreviewParentOrigin());
+        });
     }, [
         location
     ]);
+    const handleGetRoutes = useUpdatingRef(async ()=>{
+        let routes = [
+            {
+                path: '/'
+            }
+        ];
+        try {
+            const res = await fetch('/routes.json');
+            routes = await res.json();
+        } catch (error) {
+            console.warn('get routes.json error', error);
+        }
+        postMessage({
+            type: 'UpdateRoutes',
+            data: {
+                routes
+            }
+        });
+    });
     const handleMessage = useCallback((event)=>{
-        const { data: { data } } = event;
-        const type = data?.type;
-        if (!isMessageType(type)) return;
-        operatorMessage[type](data?.data);
+        const { data } = event;
+        if (isRouteMessageType(data?.type)) operatorMessage[data?.type](data?.data);
+        else if (isIncomingMessage(data, 'GetRoutes')) handleGetRoutes.current();
     }, [
         operatorMessage
     ]);

package/lib/components/AppContainer/LogInterceptor.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/AppContainer/LogInterceptor.js

@@ -0,0 +1,44 @@
+import { postMessage } from "../../utils/postMessage.js";
+const PROXY_CONSOLE_METHOD = [
+    'log',
+    'info',
+    'warn',
+    'error'
+];
+const LOG_FILTER_PREFIX = [
+    '[Dataloom]',
+    '[MiaoDa]'
+];
+const initHandleError = ()=>{
+    window.onerror = (message, source, lineno, colno, error)=>{
+        const errorList = [];
+        if (error) errorList.push(error);
+        else {
+            if ('string' == typeof message && [
+                'Script error.'
+            ].includes(message)) return;
+            if (message) errorList.push(message);
+            else if (source) errorList.push(source);
+        }
+        console.error('[MiaoDa]', ...errorList);
+    };
+};
+const initLogInterceptor = ()=>{
+    PROXY_CONSOLE_METHOD.forEach((method)=>{
+        const originalMethod = window.console[method];
+        window.console[method] = (...args)=>{
+            originalMethod(...args);
+            const log = args[0];
+            if ('string' == typeof log && LOG_FILTER_PREFIX.some((prefix)=>log.startsWith(prefix))) postMessage({
+                type: 'Console',
+                method,
+                data: args
+            });
+        };
+    });
+};
+function init() {
+    initHandleError();
+    initLogInterceptor();
+}
+'production' !== process.env.NODE_ENV && init();

package/lib/components/AppContainer/PageHoc.js

@@ -1,17 +1,37 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import html2canvas_pro from "html2canvas-pro";
-import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+import { postMessage } from "../../utils/postMessage.js";
 function PageHoc(props) {
     const { children } = props;
     useEffect(()=>{
-        if ('production' !== process.env.NODE_ENV) html2canvas_pro(document.body).then((canvas)=>{
-            const base64 = canvas.toDataURL('image/png');
-            window.parent.postMessage({
-                type: 'PageScreenshot',
-                data: base64
-            }, getPreviewParentOrigin());
-        });
+        if ('production' !== process.env.NODE_ENV) setTimeout(()=>{
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const devicePixelRatio = window.devicePixelRatio || 1;
+            const captureWidth = Math.min(viewportWidth, document.documentElement.scrollWidth);
+            const captureHeight = Math.min(viewportHeight, document.documentElement.scrollHeight);
+            html2canvas_pro(document.body, {
+                width: captureWidth,
+                height: captureHeight,
+                scrollX: window.scrollX,
+                scrollY: window.scrollY,
+                useCORS: true,
+                allowTaint: true,
+                backgroundColor: '#ffffff',
+                scale: devicePixelRatio,
+                windowWidth: viewportWidth,
+                windowHeight: viewportHeight
+            }).then((canvas)=>{
+                const base64 = canvas.toDataURL('image/png');
+                postMessage({
+                    type: 'PageScreenshot',
+                    data: base64
+                });
+            }).catch((error)=>{
+                console.error('截图失败:', error);
+            });
+        }, 1000);
     }, []);
     return /*#__PURE__*/ jsx(Fragment, {
         children: children

package/lib/components/AppContainer/index.js

@@ -13,7 +13,7 @@ registerDayjsPlugins();
 const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
 const App = (props)=>{
     const { themeMeta = {} } = props;
-    const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
+    const { rem } = findValueByPixel(`${themeMeta.borderRadius}`, themeMetaOptions.themeRadius) || {
         rem: '0.625'
     };
     const radiusToken = generateTailwindRadiusToken(Number(rem));

package/lib/components/ErrorRender/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { Button } from "antd";
-import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+import { postMessage } from "../../utils/postMessage.js";
 import { copyToClipboard } from "../../utils/copyToClipboard.js";
 const RenderError = (props)=>{
     const { error } = props;
@@ -21,19 +21,19 @@ const RenderError = (props)=>{
         error
     ]);
     const onClickRepair = useCallback(()=>{
-        window.parent.postMessage({
+        postMessage({
             type: 'RenderErrorRepair',
             data: props.error
-        }, getPreviewParentOrigin());
+        });
     }, [
         props
     ]);
     useEffect(()=>{
-        if (props.error) window.parent.postMessage({
+        if (props.error) postMessage({
             type: 'RenderError',
             data: props.error,
             location: location
-        }, getPreviewParentOrigin());
+        });
     }, [
         props.error,
         location

package/lib/components/NotFoundRender/index.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useEffect } from "react";
-import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+import { postMessage } from "../../utils/postMessage.js";
 import { useUpdatingRef } from "../../hooks/useUpdatingRef.js";
 import { logger } from "../../logger/index.js";
 const NotFound = ()=>{
@@ -14,10 +14,10 @@ const NotFound = ()=>{
         location.pathname
     ]);
     const onClick = ()=>{
-        if ('production' !== process.env.NODE_ENV) window.parent.postMessage({
+        if ('production' !== process.env.NODE_ENV) postMessage({
             type: 'CreatePage',
             data: location.pathname
-        }, getPreviewParentOrigin());
+        });
         else navigateRef.current('/');
     };
     return /*#__PURE__*/ jsxs("div", {

package/lib/components/TopNav/TitleBar.js

@@ -3,7 +3,7 @@ import { useMemo, useState } from "react";
 import { Link, matchPath, useLocation } from "react-router-dom";
 import { LogOut, MoreHorizontal, X } from "lucide-react";
 import { clsxWithTw } from "../../utils/utils.js";
-import { useAppInfo, useCurrentUserProfile, useLogout } from "../../hooks/index.js";
+import { useCurrentAppInfo, useCurrentUserProfile, useLogout } from "../../hooks/index.js";
 import { DropdownThemeClass, MaskThemeClass, TopHeaderThemeClass } from "../common/index.js";
 const TitleBar = ({ navList, className })=>{
     const { pathname } = useLocation();
@@ -17,7 +17,7 @@ const TitleBar = ({ navList, className })=>{
         navList,
         pathname
     ]);
-    const { appName, appLogo } = useAppInfo();
+    const { appName, appLogo } = useCurrentAppInfo();
     const { name: userName, avatar: userAvatar } = useCurrentUserProfile();
     const { handlerLogout } = useLogout();
     const [isMenuOpen, setIsMenuOpen] = useState(false);

package/lib/components/TopNav/TopNav.js

@@ -3,13 +3,13 @@ import { useRef, useState } from "react";
 import { Menu, X } from "lucide-react";
 import { Link } from "react-router-dom";
 import { clsxWithTw } from "../../utils/utils.js";
-import { useAppInfo } from "../../hooks/useAppInfo.js";
+import { useCurrentAppInfo } from "../../hooks/useCurrentAppInfo.js";
 import { useCurrentUserProfile } from "../../hooks/useCurrentUserProfile.js";
 import { DropdownThemeClass, NavMenu, TopHeaderThemeClass, UserAvatarMenu } from "../common/index.js";
 function TopNav({ navList = [], align = 'left', className, activeClassName }) {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const navRef = useRef(null);
-    const { appName, appLogo } = useAppInfo();
+    const { appName, appLogo } = useCurrentAppInfo();
     const { avatar: userAvatar } = useCurrentUserProfile();
     return /*#__PURE__*/ jsxs("header", {
         ref: navRef,

package/lib/components/common/LogoInfo.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { Link } from "react-router-dom";
-import { useAppInfo } from "../../hooks/useAppInfo.js";
+import { useCurrentAppInfo } from "../../hooks/useCurrentAppInfo.js";
 import { clsxWithTw } from "../../utils/utils.js";
 function LogoInfo({ className, logoClassName }) {
-    const { name, avatar } = useAppInfo();
+    const { name, avatar } = useCurrentAppInfo();
     return /*#__PURE__*/ jsx("div", {
         className: clsxWithTw('overflow-hidden text-ellipsis whitespace-nowrap', className),
         children: /*#__PURE__*/ jsxs(Link, {

package/lib/components/theme/ThemeProvider.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { type ReactNode } from 'react';
 import type { ITheme } from '../../types';
-import { IThemeTokenMeta } from './util';
+import { IThemeMeta } from './util';
 export interface IBaseThemeProviderProps {
     defaultTheme?: ITheme;
-    themeMeta?: Partial<IThemeTokenMeta>;
+    themeMeta?: Partial<IThemeMeta>;
 }
 interface ThemeProviderProps extends IBaseThemeProviderProps {
     children: ReactNode;

package/lib/components/theme/ThemeProvider.js

@@ -22,13 +22,13 @@ function ThemeProvider({ children, defaultTheme = 'light', themeMeta = {}, enabl
     useEffect(()=>{
         const root = window.document.documentElement;
         if (void 0 !== themeMeta.spacing) {
-            const { rem } = findValueByPixel(themeMetaOptions.themeSpaces, themeMeta.spacing) || {
+            const { rem } = findValueByPixel(`${themeMeta.spacing}`, themeMetaOptions.themeSpaces) || {
                 rem: '0.25'
             };
             root.style.setProperty('--spacing', `${rem}rem`);
         }
         if (void 0 !== themeMeta.borderRadius) {
-            const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
+            const { rem } = findValueByPixel(`${themeMeta.borderRadius}`, themeMetaOptions.themeRadius) || {
                 rem: '0.625'
             };
             root.style.setProperty('--radius', `${rem}rem`);
@@ -44,7 +44,7 @@ function ThemeProvider({ children, defaultTheme = 'light', themeMeta = {}, enabl
         }
     };
     const antdTheme = useMemo(()=>{
-        const res = findValueByPixel(themeMetaOptions.themeSpaces, themeMeta.spacing) || {
+        const res = findValueByPixel(`${themeMeta.spacing}`, themeMetaOptions.themeSpaces) || {
             pixel: '36',
             rem: '0.25',
             size: {

package/lib/components/theme/constants.d.ts

@@ -41,7 +41,7 @@ type ThemeColorTokenMap = {
 };
 export declare const themeColorTokenMap: ThemeColorTokenMap;
 export declare function getKeyByColor(colorValue: string, theme: keyof ThemeColorTokenMap): string;
-export declare function findValueByPixel(themeSpaces: typeof themeMetaOptions.themeSpaces | typeof themeMetaOptions.themeRadius, pixelValue?: string | number): {
+export declare function findValueByPixel(pixelValue: string, themeSpaces: typeof themeMetaOptions.themeSpaces | typeof themeMetaOptions.themeRadius): {
     pixel: string;
     rem: string;
 };

package/lib/components/theme/constants.js

@@ -550,8 +550,7 @@ function getKeyByColor(colorValue, theme) {
     const colorMap = themeColorTokenMap[theme];
     return Object.keys(colorMap).find((key)=>colorMap[key] === colorValue) || '';
 }
-function findValueByPixel(themeSpaces, pixelValue) {
-    if (!pixelValue) return;
+function findValueByPixel(pixelValue, themeSpaces) {
     return themeSpaces.options.find((option)=>option.value.pixel === pixelValue)?.value;
 }
 export { findValueByPixel, getKeyByColor, themeColorTokenMap, themeMetaOptions, themeTailwindRadius };

package/lib/components/theme/util.d.ts

@@ -1,7 +1,7 @@
 import { type ThemeConfig } from 'antd';
 import { UIComponentConfig } from './ui-config';
 export type IThemeMode = 'dark' | 'light' | 'system';
-export interface IThemeTokenMeta {
+export interface IThemeMeta {
     /**
      * 品牌色
      */
@@ -16,5 +16,5 @@ export interface IThemeTokenMeta {
     spacing: number;
 }
 export declare const generateTailwindRadiusToken: (radiusRemValue: number) => UIComponentConfig;
-export declare function generateLightTheme(override?: Partial<IThemeTokenMeta>): ThemeConfig;
-export declare function generateDarkTheme(override?: Partial<IThemeTokenMeta>): ThemeConfig;
+export declare function generateLightTheme(override?: Partial<IThemeMeta>): ThemeConfig;
+export declare function generateDarkTheme(override?: Partial<IThemeMeta>): ThemeConfig;

package/lib/components/theme/util.js

@@ -169,7 +169,7 @@ function generateLightTheme(override) {
         token: {
             ...defaultLightTheme.token,
             ...generateColorPrimaryToken(override?.colorPrimary || lightColorPrimary, 'light'),
-            ...generateBorderRadiusTokenSyncTailwind(override?.borderRadius),
+            ...generateBorderRadiusTokenSyncTailwind(override?.borderRadius || 4),
             ...generateSpacingToken(override)
         }
     };
@@ -180,7 +180,7 @@ function generateDarkTheme(override) {
         token: {
             ...defaultDarkTheme.token,
             ...generateColorPrimaryToken(override?.colorPrimary || darkColorPrimary, 'dark'),
-            ...generateBorderRadiusTokenSyncTailwind(override?.borderRadius),
+            ...generateBorderRadiusTokenSyncTailwind(override?.borderRadius || 4),
             ...generateSpacingToken(override)
         }
     };

package/lib/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export * from './useAppInfo';
+export * from './useCurrentAppInfo';
 export * from './useCurrentUserProfile';
 export * from './useIsMobile';
 export * from './useLogout';

package/lib/hooks/index.js

@@ -1,4 +1,4 @@
-export * from "./useAppInfo.js";
+export * from "./useCurrentAppInfo.js";
 export * from "./useCurrentUserProfile.js";
 export * from "./useIsMobile.js";
 export * from "./useLogout.js";

package/lib/hooks/{useAppInfo.d.ts → useCurrentAppInfo.d.ts}

@@ -1,4 +1,4 @@
-export declare const useAppInfo: () => {
+export declare const useCurrentAppInfo: () => {
     appName: string;
     appLogo: string;
     name?: string;

package/lib/hooks/{useAppInfo.js → useCurrentAppInfo.js}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { getAppInfo } from "../integrations/getAppInfo.js";
-const useAppInfo = ()=>{
+const useCurrentAppInfo = ()=>{
     const [appInfo, setAppInfo] = useState(()=>getAppInfo());
     useEffect(()=>{
         const handleMetaInfoChanged = ()=>{
@@ -17,4 +17,4 @@ const useAppInfo = ()=>{
         appLogo: appInfo.avatar
     };
 };
-export { useAppInfo };
+export { useCurrentAppInfo };

package/lib/tailwind-theme.css

@@ -1,8 +1,5 @@
-@layer tailwind-base {
-  @import "tailwindcss";
-}
-
-@layer antd;
+@import "tailwindcss";
+@layer theme;
 
 @layer base {
   :root {
@@ -420,6 +417,8 @@
   }
 }
 
+@layer components, utilities;
+
 @source inline("text-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl,9xl}");
 
 @source inline("{bg,text,border}-{blue,pink,neutral,red,orange,violet,lime,yellow,green,teal,cyan,indigo,purple,amber,emerald,slate}-{50,{100..900..100},950}");

package/lib/types/iframe-events.d.ts

@@ -0,0 +1,37 @@
+export interface IframeMessage<T = unknown> {
+    type: string;
+    data: T;
+}
+export interface PreviewReadyMessage extends IframeMessage<Record<string, never>> {
+    type: 'PreviewReady';
+}
+export interface ConsoleMessage extends IframeMessage<Record<string, any>> {
+    method: string;
+    type: 'Console';
+}
+export interface ChildLocationChangeMessage extends IframeMessage<any> {
+    type: 'ChildLocationChange';
+}
+export interface CreatePageMessage extends IframeMessage<string> {
+    type: 'CreatePage';
+}
+export interface RenderErrorMessage extends IframeMessage<any> {
+    type: 'RenderError';
+    location?: any;
+}
+export interface RenderErrorRepairMessage extends IframeMessage<any> {
+    type: 'RenderErrorRepair';
+}
+export interface PageScreenshotMessage extends IframeMessage<string> {
+    type: 'PageScreenshot';
+}
+export interface UpdateRoutesMessage extends IframeMessage<{
+    routes: any[];
+}> {
+    type: 'UpdateRoutes';
+}
+export type OutgoingMessage = PreviewReadyMessage | ConsoleMessage | ChildLocationChangeMessage | CreatePageMessage | RenderErrorMessage | RenderErrorRepairMessage | PageScreenshotMessage | UpdateRoutesMessage;
+export interface GetRoutesMessage extends IframeMessage<Record<string, never>> {
+    type: 'GetRoutes';
+}
+export type IncomingMessage = GetRoutesMessage;

package/lib/utils/postMessage.d.ts

@@ -0,0 +1,8 @@
+import { IncomingMessage, OutgoingMessage } from '../types/iframe-events';
+export declare function postMessage<T extends OutgoingMessage>(message: T, targetOrigin?: string): void;
+export declare function isOutgoingMessage<T extends OutgoingMessage['type']>(msg: OutgoingMessage, type: T): msg is Extract<OutgoingMessage, {
+    type: T;
+}>;
+export declare function isIncomingMessage<T extends IncomingMessage['type']>(msg: IncomingMessage, type: T): msg is Extract<IncomingMessage, {
+    type: T;
+}>;

package/lib/utils/postMessage.js

@@ -0,0 +1,11 @@
+import { getPreviewParentOrigin } from "./getParentOrigin.js";
+function postMessage(message, targetOrigin) {
+    window.parent.postMessage(message, targetOrigin ?? getPreviewParentOrigin());
+}
+function isOutgoingMessage(msg, type) {
+    return msg.type === type;
+}
+function isIncomingMessage(msg, type) {
+    return msg.type === type;
+}
+export { isIncomingMessage, isOutgoingMessage, postMessage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/miaoda-core",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.11",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -76,7 +76,7 @@
     "@changesets/cli": "^2.29.5",
     "@rsbuild/core": "~1.4.13",
     "@rsbuild/plugin-react": "^1.3.4",
-    "@rslib/core": "^0.13.2",
+    "@rslib/core": "^0.12.0",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-links": "^8.6.14",
@@ -90,6 +90,7 @@
     "@types/node": "^22.10.2",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
+    "typescript-eslint": "^8.41.0",
     "antd": "^5.26.6",
     "eslint": "^8.57.0",
     "jsdom": "^26.1.0",

package/lib/apis/hooks/useAppInfo.d.ts

@@ -1 +0,0 @@
-export * from '../../hooks/useAppInfo';

package/lib/apis/hooks/useAppInfo.js

@@ -1 +0,0 @@
-export * from "../../hooks/useAppInfo.js";