@lark-apaas/client-toolkit 1.1.19 → 1.1.20-antd-test.0

package/lib/antd-table.d.ts

@@ -0,0 +1,4 @@
+import { Table } from 'antd';
+import type { TableProps } from 'antd';
+export { Table };
+export type { TableProps };

package/lib/antd-table.js

@@ -0,0 +1,2 @@
+import { Table } from "antd";
+export { Table };

package/lib/components/AppContainer/index.js

@@ -1,5 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { ConfigProvider } from "antd";
 import { MiaodaInspector } from "@lark-apaas/miaoda-inspector";
 import IframeBridge from "./IframeBridge.js";
 import { defaultUIConfig } from "../theme/ui-config.js";
@@ -14,6 +15,15 @@ import safety from "./safety.js";
 registerDayjsPlugins();
 initAxiosConfig();
 const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
+const readCssVarColor = (varName, fallback)=>{
+    try {
+        if ('undefined' == typeof document) return fallback;
+        const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+        return value || fallback;
+    } catch  {
+        return fallback;
+    }
+};
 const App = (props)=>{
     const { themeMeta = {} } = props;
     useAppInfo();
@@ -54,17 +64,139 @@ const App = (props)=>{
         ]
     });
 };
-const AppContainer = (props)=>{
+const AppContainer_AppContainer = (props)=>{
     const { children, ...rest } = props;
+    const [cssColors, setCssColors] = useState(()=>({
+            background: readCssVarColor('--background'),
+            destructive: readCssVarColor('--destructive'),
+            primary: readCssVarColor('--primary'),
+            foreground: readCssVarColor('--foreground'),
+            warning: readCssVarColor('--warning'),
+            success: readCssVarColor('--success'),
+            muted: readCssVarColor('--muted'),
+            mutedForeground: readCssVarColor('--muted-foreground'),
+            border: readCssVarColor('--border'),
+            popover: readCssVarColor('--popover'),
+            accent: readCssVarColor('--accent')
+        }));
+    useEffect(()=>{
+        if ('production' === process.env.NODE_ENV) return ()=>{};
+        const observer = new MutationObserver((mutations)=>{
+            for (const mutation of mutations){
+                let linkTag = null;
+                if ('attributes' === mutation.type) {
+                    if ('fullstack-nestjs-template:chunk-main' === mutation.target.dataset.webpack) linkTag = mutation.target;
+                } else if ('childList' === mutation.type) {
+                    for (const node of Array.from(mutation.addedNodes))if ('LINK' === node.nodeName && 'fullstack-nestjs-template:chunk-main' === node.dataset.webpack) {
+                        linkTag = node;
+                        break;
+                    }
+                }
+                if (linkTag) {
+                    let retryCount = 0;
+                    const maxRetries = 10;
+                    const retryDelay = 400;
+                    const updateColors = ()=>{
+                        const newColors = {
+                            background: readCssVarColor('--background'),
+                            destructive: readCssVarColor('--destructive'),
+                            primary: readCssVarColor('--primary'),
+                            foreground: readCssVarColor('--foreground'),
+                            warning: readCssVarColor('--warning'),
+                            success: readCssVarColor('--success'),
+                            muted: readCssVarColor('--muted'),
+                            mutedForeground: readCssVarColor('--muted-foreground'),
+                            border: readCssVarColor('--border'),
+                            popover: readCssVarColor('--popover'),
+                            accent: readCssVarColor('--accent')
+                        };
+                        setCssColors((currentColors)=>{
+                            if (JSON.stringify(currentColors) !== JSON.stringify(newColors)) {
+                                retryCount = 0;
+                                return newColors;
+                            }
+                            if (retryCount < maxRetries) {
+                                retryCount++;
+                                setTimeout(updateColors, retryDelay);
+                            }
+                            return currentColors;
+                        });
+                    };
+                    setTimeout(updateColors, 100);
+                }
+            }
+        });
+        observer.observe(document.head, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: [
+                'href'
+            ]
+        });
+        return ()=>{
+            observer.disconnect();
+        };
+    }, []);
+    const antdThemeToken = {
+        colorBgBase: cssColors.background,
+        colorError: cssColors.destructive,
+        colorInfo: cssColors.primary,
+        colorLink: cssColors.primary,
+        colorPrimary: cssColors.primary,
+        colorSuccess: cssColors.primary,
+        colorTextBase: cssColors.foreground,
+        colorWarning: cssColors.destructive
+    };
+    const antdTableToken = {
+        bodySortBg: cssColors.muted,
+        borderColor: cssColors.border,
+        expandIconBg: cssColors.background,
+        filterDropdownBg: cssColors.popover,
+        filterDropdownMenuBg: cssColors.popover,
+        fixedHeaderSortActiveBg: cssColors.muted,
+        footerBg: cssColors.muted,
+        footerColor: cssColors.mutedForeground,
+        headerBg: cssColors.muted,
+        headerColor: cssColors.mutedForeground,
+        headerFilterHoverBg: cssColors.muted,
+        headerSortActiveBg: cssColors.muted,
+        headerSortHoverBg: cssColors.muted,
+        headerSplitColor: cssColors.border,
+        rowExpandedBg: cssColors.background,
+        rowHoverBg: cssColors.muted,
+        rowSelectedBg: cssColors.accent,
+        rowSelectedHoverBg: cssColors.accent,
+        stickyScrollBarBg: cssColors.muted
+    };
+    const antdPaginationToken = {
+        itemActiveBg: cssColors.background,
+        itemActiveBgDisabled: cssColors.muted,
+        itemActiveColor: cssColors.primary,
+        itemActiveColorDisabled: cssColors.muted,
+        itemActiveColorHover: cssColors.muted,
+        itemBg: cssColors.background,
+        itemInputBg: cssColors.background,
+        itemLinkBg: cssColors.background
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(safety, {}),
-            /*#__PURE__*/ jsx(App, {
-                themeMeta: props.themeMeta,
-                children: children
+            /*#__PURE__*/ jsx(ConfigProvider, {
+                theme: {
+                    token: antdThemeToken,
+                    components: {
+                        Table: antdTableToken,
+                        Pagination: antdPaginationToken
+                    }
+                },
+                children: /*#__PURE__*/ jsx(App, {
+                    themeMeta: props.themeMeta,
+                    children: children
+                })
             })
         ]
     });
 };
-const components_AppContainer = AppContainer;
-export { components_AppContainer as default };
+const AppContainer = AppContainer_AppContainer;
+export { AppContainer as default };

package/lib/components/AppContainer/safety.js

@@ -152,7 +152,7 @@ const Component = ()=>{
             /*#__PURE__*/ jsx(PopoverTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ jsxs("div", {
-                    className: "fixed right-3 bottom-3 inline-flex items-center gap-x-1 border-solid border-[#ffffff1a] border px-2.5 py-1.5 bg-[#1f2329e5] backdrop-blur-[5px] shadow-[0px_6px_12px_0px_#41444a0a,0px_8px_24px_8px_#41444a0a] rounded-md text-[#ebebeb)] font-['PingFang_SC'] text-xs leading-[20px] tracking-[0px] z-[10000000] cursor-pointer",
+                    className: "fixed right-3 bottom-3 inline-flex items-center gap-x-1 border-solid border-[#ffffff1a] border px-2.5 py-1.5 bg-[#1f2329e5] backdrop-blur-[5px] shadow-[0px_6px_12px_0px_#41444a0a,0px_8px_24px_8px_#41444a0a] rounded-[6px] text-[#ebebeb)] font-['PingFang_SC'] text-xs leading-[20px] tracking-[0px] z-[10000000] cursor-pointer",
                     onMouseEnter: ()=>{
                         clearTimeout(timeoutRef.current);
                         setOpen(true);
@@ -173,7 +173,7 @@ const Component = ()=>{
                 })
             }),
             /*#__PURE__*/ jsx(PopoverContent, {
-                className: "overflow-hidden p-0 m-0 border-0 rounded-xl!",
+                className: "overflow-hidden p-0 m-0 border-0 rounded-[12px]!",
                 style: {
                     boxShadow: '0 6px 12px 0 #41444a0a, 0 8px 24px 0 #41444a0a'
                 },

package/lib/components/ErrorRender/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 declare const RenderError: React.FC<{
     error: Error;
+    resetErrorBoundary?: () => void;
 }>;
 export default RenderError;

package/lib/components/ErrorRender/index.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { logger } from "../../logger/index.js";
+import { createApplyHandle, getModuleHot } from "../../utils/module-hot.js";
 const RenderError = (props)=>{
-    const { error } = props;
+    const { error, resetErrorBoundary } = props;
     useEffect(()=>{
-        if (props.error) logger.log({
+        if (error) logger.log({
             level: 'error',
             args: [
                 'Render Error',
@@ -15,7 +16,22 @@ const RenderError = (props)=>{
             }
         });
     }, [
-        props.error
+        error
+    ]);
+    useEffect(()=>{
+        if (!resetErrorBoundary) return;
+        const hot = getModuleHot();
+        if (hot) {
+            const handler = createApplyHandle((success)=>{
+                if (success) resetErrorBoundary();
+            });
+            hot.addStatusHandler(handler);
+            return ()=>{
+                hot.removeStatusHandler(handler);
+            };
+        }
+    }, [
+        resetErrorBoundary
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "min-h-screen flex items-center justify-center bg-white",

package/lib/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: {
-    variant?: "default" | "secondary" | "destructive" | "outline";
+    variant?: "default" | "destructive" | "secondary" | "outline";
 } & import("class-variance-authority/dist/types").ClassProp) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/lib/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: {
-    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost";
+    variant?: "default" | "link" | "destructive" | "secondary" | "outline" | "ghost";
     size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | "icon-lg";
 } & import("class-variance-authority/dist/types").ClassProp) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/lib/logger/intercept-global-error.js

@@ -1,3 +1,4 @@
+import { createApplyHandle, getModuleHot } from "../utils/module-hot.js";
 import { submitPostMessage, submitSlardarEvent } from "../utils/postMessage.js";
 import { levelSchema } from "./log-types.js";
 import { logger } from "./logger.js";
@@ -61,10 +62,17 @@ function processDevServerLog(log) {
         });
     }
 }
-function listenHmrApplyFailed() {
-    const hot = import.meta.webpackHot || module.hot;
-    if (hot) hot.addStatusHandler((status)=>{
-        if ('fail' === status || 'abort' === status) {
+function listenModuleHmr() {
+    const hot = getModuleHot();
+    if (hot) hot.addStatusHandler(createApplyHandle((success, status)=>{
+        if (success) submitPostMessage({
+            type: 'DevServerMessage',
+            data: {
+                type: 'devServer-status',
+                status: 'hmr-apply-success'
+            }
+        });
+        else {
             console.warn('hmr apply failed', status);
             submitSlardarEvent({
                 name: 'sandbox-devServer',
@@ -74,7 +82,7 @@ function listenHmrApplyFailed() {
                 }
             });
         }
-    });
+    }));
 }
 function interceptErrors() {
     window.addEventListener('error', (event)=>{
@@ -83,7 +91,7 @@ function interceptErrors() {
     window.addEventListener('unhandledrejection', (event)=>{
         logger.error(event.reason);
     });
-    listenHmrApplyFailed();
+    listenModuleHmr();
     const PROXY_CONSOLE_METHOD = [
         'log',
         'info',

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

@@ -41,7 +41,7 @@ export interface HmrMessage extends IframeMessage<Record<string, never>> {
 /** devServer相关消息 */
 export interface DevServerMessage extends IframeMessage<{
     type: 'devServer-status';
-    status: 'connected' | 'disconnected';
+    status: 'connected' | 'disconnected' | 'hmr-apply-success';
 }> {
     type: 'DevServerMessage';
 }

package/lib/utils/module-hot.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Module Hot Replacement 状态类型定义
+ *
+ * - idle: The process is waiting for a call to check
+ * - check: The process is checking for updates
+ * - prepare: The process is getting ready for the update (e.g. downloading the updated module)
+ * - ready: The update is prepared and available
+ * - dispose: The process is calling the dispose handlers on the modules that will be replaced
+ * - apply: The process is calling the accept handlers and re-executing self-accepted modules
+ * - abort: An update was aborted, but the system is still in its previous state
+ * - fail: An update has thrown an exception and the system's state has been compromised
+ */
+type ModuleHotType = 'idle' | 'check' | 'prepare' | 'ready' | 'dispose' | 'apply' | 'abort' | 'fail';
+interface ModuleHotInstance {
+    addStatusHandler: (handler: (status: ModuleHotType) => void) => void;
+    removeStatusHandler: (handler: (status: ModuleHotType) => void) => void;
+}
+export declare function getModuleHot(): ModuleHotInstance | null;
+/**
+ * 创建模块热更成功处理函数
+ * 监听模块热更状态，当状态为apply时，调用回调函数并传入true
+ * @param callback 热更成功回调函数，参数为是否成功
+ */
+export declare function createApplyHandle(callback: (success: boolean, status: ModuleHotType) => void): (status: ModuleHotType) => void;
+export {};

package/lib/utils/module-hot.js

@@ -0,0 +1,22 @@
+function getModuleHot() {
+    if ('production' === process.env.NODE_ENV) return null;
+    return import.meta.webpackHot || module.hot;
+}
+function createApplyHandle(callback) {
+    let hasApply = false;
+    return (status)=>{
+        if ('fail' === status || 'abort' === status) {
+            hasApply = false;
+            return callback(false, status);
+        }
+        if (hasApply) {
+            if ('idle' === status) {
+                hasApply = false;
+                callback(true, status);
+            }
+            return;
+        }
+        hasApply = 'apply' === status;
+    };
+}
+export { createApplyHandle, getModuleHot };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.1.19",
+  "version": "1.1.20-antd-test.0",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -15,6 +15,11 @@
       "require": "./lib/index.js",
       "types": "./lib/index.d.ts"
     },
+    "./antd-table": {
+      "import": "./lib/antd-table.js",
+      "require": "./lib/antd-table.js",
+      "types": "./lib/antd-table.d.ts"
+    },
     "./lib/index.css": "./lib/index.css",
     "./dataloom": {
       "import": "./lib/apis/dataloom.js",