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

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

@@ -1,7 +1,5 @@
 import React from 'react';
-import { IBaseThemeProviderProps } from '../theme';
-import '../../index.css';
 declare const AppContainer: React.FC<{
     children: React.ReactNode;
-} & IBaseThemeProviderProps>;
+}>;
 export default AppContainer;

package/lib/components/AppContainer/index.js

@@ -1,19 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import react, { useEffect } from "react";
-import { MiaodaInspector } from "@lark-apaas/miaoda-inspector";
-import IframeBridge from "./IframeBridge.js";
-import { defaultUIConfig } from "../theme/ui-config.js";
-import { Toaster } from "./sonner.js";
-import { PageHoc } from "./PageHoc.js";
-import { findValueByPixel, generateTailwindRadiusToken, themeColorTokenMap, themeMetaOptions } from "../theme/index.js";
-import { registerDayjsPlugins } from "./dayjsPlugins.js";
-import "../../index.css";
-import { initAxiosConfig } from "../../utils/axiosConfig.js";
-import { useAppInfo } from "../../hooks/index.js";
+import { useEffect, useRef, useState } from "react";
+import { ConfigProvider } from "antd";
 import safety from "./safety.js";
-registerDayjsPlugins();
-initAxiosConfig();
-const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
 const readCssVarColor = (varName, fallback)=>{
     try {
         if ('undefined' == typeof document) return fallback;
@@ -23,149 +11,85 @@ const readCssVarColor = (varName, fallback)=>{
         return fallback;
     }
 };
-const App = (props)=>{
-    const { themeMeta = {} } = props;
-    useAppInfo();
-    const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
-        rem: '0.625'
-    };
-    const radiusToken = generateTailwindRadiusToken(Number(rem));
-    const themeToken = {
-        ...defaultUIConfig,
-        common: {
-            ...defaultUIConfig.common,
-            borderRadius: radiusToken
-        }
-    };
+const AppContainer = (props)=>{
+    const { children } = 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'),
+            radius: readCssVarColor('--radius')
+        }));
+    const lastHref = useRef(null);
     useEffect(()=>{
-        if (isMiaodaPreview) fetch(`${location.origin}/ai/api/feida_preview/csrf`).then(()=>{
-            setTimeout(()=>{
-                const match = document.cookie.match(/lgw_csrf_token=([^;]+)/);
-                if (match) window.lgw_csrf_token = match[1];
-            }, 300);
+        if ('production' === process.env.NODE_ENV) return;
+        const selector = 'link[data-webpack="fullstack-nestjs-template:chunk-main"]';
+        const updateTheme = ()=>{
+            const linkTag = document.querySelector(selector);
+            const currentHref = linkTag?.href;
+            if (currentHref && currentHref !== lastHref.current) {
+                lastHref.current = currentHref;
+                setTimeout(()=>{
+                    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'),
+                        radius: readCssVarColor('--radius')
+                    };
+                    setCssColors((currentColors)=>{
+                        if (JSON.stringify(currentColors) !== JSON.stringify(newColors)) return newColors;
+                        return currentColors;
+                    });
+                }, 100);
+            }
+        };
+        const headObserver = new MutationObserver(updateTheme);
+        updateTheme();
+        headObserver.observe(document.head, {
+            childList: true,
+            subtree: true
         });
+        return ()=>{
+            headObserver.disconnect();
+        };
     }, []);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(Toaster, {}),
-            'production' !== process.env.NODE_ENV && /*#__PURE__*/ jsx(MiaodaInspector, {
-                theme: {
-                    themeMetaOptions: themeMetaOptions,
-                    themeColorTokenMap: themeColorTokenMap,
-                    themeToken
-                },
-                cwd: process.env.CWD || ''
-            }),
-            'production' !== process.env.NODE_ENV && /*#__PURE__*/ jsx(IframeBridge, {}),
-            /*#__PURE__*/ jsx(PageHoc, {
-                children: props.children
-            })
-        ]
-    });
-};
-const AppContainer_AppContainer = (props)=>{
-    const { children, ...rest } = props;
-    const cssColors = {
-        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'),
-        radius: readCssVarColor('--radius')
-    };
-    const antdThemeToken = {
-        borderRadius: cssColors.radius,
-        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,
-        headerBorderRadius: 'var(--radius)'
-    };
-    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
-    };
-    const OptionalAntdProvider = ({ children })=>{
-        const [Provider, setProvider] = react.useState(null);
-        const [ready, setReady] = react.useState(false);
-        react.useEffect(()=>{
-            let mounted = true;
-            import("antd").then((mod)=>{
-                if (mounted && mod?.ConfigProvider) setProvider(()=>mod.ConfigProvider);
-                if (mounted) setReady(true);
-            }).catch(()=>{
-                if (mounted) {
-                    setProvider(null);
-                    setReady(true);
-                }
-            });
-            return ()=>{
-                mounted = false;
-            };
-        }, []);
-        if (!ready) return null;
-        if (!Provider) return /*#__PURE__*/ jsx(Fragment, {
-            children: children
-        });
-        return /*#__PURE__*/ jsx(Provider, {
-            theme: {
-                token: antdThemeToken,
-                components: {
-                    Table: antdTableToken,
-                    Pagination: antdPaginationToken
-                }
-            },
-            children: children
-        });
+    const antdTheme = {
+        token: {
+            colorPrimary: cssColors.primary,
+            colorSuccess: cssColors.success,
+            colorWarning: cssColors.warning,
+            colorError: cssColors.destructive,
+            colorInfo: cssColors.primary,
+            colorTextBase: cssColors.foreground,
+            colorBgContainer: cssColors.background,
+            colorBorder: cssColors.border,
+            borderRadius: parseInt(cssColors.radius || '0')
+        }
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(safety, {}),
-            /*#__PURE__*/ jsx(OptionalAntdProvider, {
-                children: /*#__PURE__*/ jsx(App, {
-                    themeMeta: props.themeMeta,
-                    children: children
-                })
+            /*#__PURE__*/ jsx(ConfigProvider, {
+                theme: antdTheme,
+                children: children
             })
         ]
     });
 };
-const AppContainer = AppContainer_AppContainer;
-export { AppContainer as default };
+const components_AppContainer = AppContainer;
+export { components_AppContainer as default };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.1.19-antd-test.0",
+  "version": "1.1.19-antd-test.2",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -15,10 +15,10 @@
       "require": "./lib/index.js",
       "types": "./lib/index.d.ts"
     },
-    "./ant-table": {
-      "import": "./lib/ant-table.js",
-      "require": "./lib/ant-table.js",
-      "types": "./lib/ant-table.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": {