@lark-apaas/miaoda-core 0.1.0-alpha.2 → 0.1.0-alpha.20

package/lib/apis/dataloom.d.ts

@@ -1 +1 @@
-export { dataloom } from '../integrations/dataloom';
+export { getDataloom } from '../integrations/dataloom';

package/lib/apis/dataloom.js

@@ -1,2 +1,2 @@
-import { dataloom } from "../integrations/dataloom.js";
-export { dataloom };
+import { getDataloom } from "../integrations/dataloom.js";
+export { getDataloom };

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

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

package/lib/apis/hooks/useAppInfo.js

@@ -0,0 +1 @@
+export * from "../../hooks/useAppInfo.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,29 @@
 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 { connectToParent } from "penpal";
 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 { postMessage } from "../../utils/postMessage.js";
+import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+import { childApi } from "./childApi.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);
+}
+async function connectParent() {
+    const connection = connectToParent({
+        parentOrigin: getPreviewParentOrigin(),
+        methods: {
+            ...childApi
+        }
+    });
+    await connection.promise;
 }
 function IframeBridge() {
     const location = useLocation();
@@ -39,27 +52,27 @@ function IframeBridge() {
         navigateRef
     ]);
     useEffect(()=>{
-        window.parent.postMessage({
-            type: 'PreviewReady'
-        }, getPreviewParentOrigin());
+        postMessage({
+            type: 'PreviewReady',
+            data: {}
+        });
+        connectParent();
     }, []);
     useEffect(()=>{
         if (isActive.current) {
             isActive.current = false;
             return;
         }
-        window.parent.postMessage({
+        postMessage({
             type: 'ChildLocationChange',
             data: location
-        }, getPreviewParentOrigin());
+        });
     }, [
         location
     ]);
     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);
     }, [
         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/childApi.d.ts

@@ -0,0 +1,5 @@
+import { ChildApi } from '../../types/iframe-events';
+/**
+ * 子级方法，提供给父级调用
+ */
+export declare const childApi: ChildApi;

package/lib/components/AppContainer/childApi.js

@@ -0,0 +1,20 @@
+import { normalizeBasePath } from "../../utils/utils.js";
+async function getRoutes() {
+    let routes = [
+        {
+            path: '/'
+        }
+    ];
+    try {
+        const basePath = normalizeBasePath(process.env.CLIENT_BASE_PATH);
+        const res = await fetch(`${basePath}/routes.json`);
+        routes = await res.json();
+    } catch (error) {
+        console.warn('get routes.json error', error);
+    }
+    return routes;
+}
+const childApi = {
+    getRoutes
+};
+export { childApi };

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(`${themeMeta.borderRadius}`, themeMetaOptions.themeRadius) || {
+    const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
         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/SidebarNav/DrawerNav.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { BaseNavProps } from '../../types';
-export default function DrawerNav({ navList, className, activeClassName }: BaseNavProps): React.JSX.Element;
+export default function DrawerNav({ navList, className, activeClassName, }: BaseNavProps): React.JSX.Element;

package/lib/components/SidebarNav/DropdownNav.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { BaseNavProps } from '../../types';
-export default function DropdownNav({ navList, className, activeClassName }: BaseNavProps): React.JSX.Element;
+export default function DropdownNav({ navList, className, activeClassName, }: BaseNavProps): React.JSX.Element;

package/lib/components/SidebarNav/Sidebar.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { NavProps } from '../../types';
-export default function SidebarNav({ activeClassName, className, navList }: NavProps): React.JSX.Element;
+export default function SidebarNav({ activeClassName, className, navList, }: NavProps): React.JSX.Element;

package/lib/components/TopNav/BottomNav.d.ts

@@ -8,5 +8,5 @@ interface BottomNavProps extends BaseNavProps {
     navList: NavItemProps[];
     maxBottomItems?: number;
 }
-export declare function BottomNav({ navList, className, maxBottomItems }: BottomNavProps): React.JSX.Element;
+export declare function BottomNav({ navList, className, maxBottomItems, }: BottomNavProps): React.JSX.Element;
 export {};

package/lib/components/TopNav/TitleBar.js

@@ -2,8 +2,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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 { useCurrentAppInfo, useCurrentUserProfile, useLogout } from "../../hooks/index.js";
+import { clsxWithTw, isSanboxMode } from "../../utils/utils.js";
+import { useAppInfo, 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 } = useCurrentAppInfo();
+    const { appName, appLogo } = useAppInfo();
     const { name: userName, avatar: userAvatar } = useCurrentUserProfile();
     const { handlerLogout } = useLogout();
     const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -90,6 +90,9 @@ const TitleBar = ({ navList, className })=>{
                                                     children: userName
                                                 }),
                                                 /*#__PURE__*/ jsx("img", {
+                                                    onClick: ()=>{
+                                                        if (isSanboxMode()) location.href = '/suda/user?brand=1';
+                                                    },
                                                     src: userAvatar,
                                                     alt: "avatar",
                                                     className: "w-8 h-8 rounded-full ml-2"

package/lib/components/TopNav/TopNav.d.ts

@@ -7,4 +7,4 @@ import { BaseNavProps } from '../../types';
 export interface TopNavProps extends BaseNavProps {
     align?: 'left' | 'center' | 'right';
 }
-export declare function TopNav({ navList, align, className, activeClassName }: TopNavProps): React.JSX.Element;
+export declare function TopNav({ navList, align, className, activeClassName, }: TopNavProps): React.JSX.Element;

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 { useCurrentAppInfo } from "../../hooks/useCurrentAppInfo.js";
+import { useAppInfo } from "../../hooks/useAppInfo.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 } = useCurrentAppInfo();
+    const { appName, appLogo } = useAppInfo();
     const { avatar: userAvatar } = useCurrentUserProfile();
     return /*#__PURE__*/ jsxs("header", {
         ref: navRef,

package/lib/components/User/UserDisplay.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { IUserProfile } from '../../apis/udt-types';
 export interface UserDisplayProps {
     users: IUserProfile[];
-    size: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
     className?: string;
     style?: React.CSSProperties;
 }

package/lib/components/User/UserSelect.js

@@ -3,7 +3,7 @@ import { useMemo, useRef, useState } from "react";
 import { Avatar, Select, Spin } from "antd";
 import { LoaderCircle } from "lucide-react";
 import { debounce } from "lodash";
-import { dataloom } from "../../integrations/dataloom.js";
+import { getDataloom } from "../../integrations/dataloom.js";
 import "./UserSelect.css";
 import { UserWithAvatar } from "./UserWithAvatar.js";
 const mapValueToOptions = (value)=>{
@@ -57,6 +57,7 @@ const UserSelect = ({ mode = 'single', defaultValue, value, onChange, placeholde
     const fetchRef = useRef(0);
     const fetchUsers = async (search)=>{
         try {
+            const dataloom = await getDataloom();
             const { data } = await dataloom.service.user.search({
                 name: search,
                 pageSize: 20

package/lib/components/User/UserWithAvatar.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { UserWithAvatarProps } from './type';
-export declare function UserWithAvatar({ data, size, mode, className }: UserWithAvatarProps): React.JSX.Element;
+export declare function UserWithAvatar({ data, size, mode, className, }: UserWithAvatarProps): React.JSX.Element;

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 { useCurrentAppInfo } from "../../hooks/useCurrentAppInfo.js";
+import { useAppInfo } from "../../hooks/useAppInfo.js";
 import { clsxWithTw } from "../../utils/utils.js";
 function LogoInfo({ className, logoClassName }) {
-    const { name, avatar } = useCurrentAppInfo();
+    const { name, avatar } = useAppInfo();
     return /*#__PURE__*/ jsx("div", {
         className: clsxWithTw('overflow-hidden text-ellipsis whitespace-nowrap', className),
         children: /*#__PURE__*/ jsxs(Link, {

package/lib/components/common/UserAvatarLayout.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-export default function UserAvatarLayout({ className }: {
+export default function UserAvatarLayout({ className, }: {
     className?: string;
 }): React.JSX.Element;

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 { IThemeMeta } from './util';
+import { IThemeTokenMeta } from './util';
 export interface IBaseThemeProviderProps {
     defaultTheme?: ITheme;
-    themeMeta?: Partial<IThemeMeta>;
+    themeMeta?: Partial<IThemeTokenMeta>;
 }
 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(`${themeMeta.spacing}`, themeMetaOptions.themeSpaces) || {
+            const { rem } = findValueByPixel(themeMetaOptions.themeSpaces, themeMeta.spacing) || {
                 rem: '0.25'
             };
             root.style.setProperty('--spacing', `${rem}rem`);
         }
         if (void 0 !== themeMeta.borderRadius) {
-            const { rem } = findValueByPixel(`${themeMeta.borderRadius}`, themeMetaOptions.themeRadius) || {
+            const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
                 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(`${themeMeta.spacing}`, themeMetaOptions.themeSpaces) || {
+        const res = findValueByPixel(themeMetaOptions.themeSpaces, themeMeta.spacing) || {
             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(pixelValue: string, themeSpaces: typeof themeMetaOptions.themeSpaces | typeof themeMetaOptions.themeRadius): {
+export declare function findValueByPixel(themeSpaces: typeof themeMetaOptions.themeSpaces | typeof themeMetaOptions.themeRadius, pixelValue?: string | number): {
     pixel: string;
     rem: string;
 };

package/lib/components/theme/constants.js

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

package/lib/components/theme/ui-config.d.ts

@@ -1,49 +1 @@
-export interface SelectOption {
-    label: string;
-    value: string;
-    rawValue: string;
-}
-export interface SelectUIConfig {
-    type: 'select';
-    options: SelectOption[];
-}
-export interface SpacingUIConfig {
-    type: 'spacing';
-    options: SelectOption[];
-}
-interface Color {
-    label: string;
-    value: string;
-    type?: 'tailwind' | 'style';
-    rawValue?: string;
-}
-export interface ColorPickerUIConfig {
-    type: 'color-picker';
-    recommendColors: {
-        title: string;
-        options: Color[];
-    }[];
-}
-export interface IconPickerUIConfig {
-    type: 'icon-picker';
-}
-export type UIComponentConfig = SelectUIConfig | ColorPickerUIConfig | IconPickerUIConfig | SpacingUIConfig;
-export interface InspectorUIConfig {
-    version: string;
-    common: {
-        fontSize: UIComponentConfig;
-        fontWeight: UIComponentConfig;
-        borderRadius: UIComponentConfig;
-        borderWidth: UIComponentConfig;
-        textAlign: UIComponentConfig;
-        padding: UIComponentConfig;
-        margin: UIComponentConfig;
-        color: UIComponentConfig;
-        borderColor: UIComponentConfig;
-        backgroundColor: UIComponentConfig;
-    };
-    components?: Record<string, Record<string, UIComponentConfig>>;
-    tokens: Record<string, string>;
-}
-export declare const defaultUIConfig: InspectorUIConfig;
-export {};
+export { defaultUIConfig, type UIComponentConfig, } from '@lark-apaas/miaoda-inspector';