@lark-apaas/client-toolkit 1.2.10-alpha.36 → 1.2.10-alpha.38

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

@@ -4,7 +4,11 @@ import '../../runtime';
 interface IBaseAuthProviderProps {
     enableAuth?: boolean;
 }
+interface IToasterProps {
+    /** 禁用内建 Toaster 组件，默认 false */
+    disableToaster?: boolean;
+}
 declare const AppContainer: React.FC<{
     children: React.ReactNode;
-} & IBaseThemeProviderProps & IBaseAuthProviderProps>;
+} & IBaseThemeProviderProps & IBaseAuthProviderProps & IToasterProps>;
 export default AppContainer;

package/lib/components/AppContainer/index.js

@@ -4,8 +4,10 @@ import { ConfigProvider } from "antd";
 import { MiaodaInspector } from "@lark-apaas/miaoda-inspector";
 import zh_CN from "antd/locale/zh_CN";
 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 { reportTeaEvent } from "./utils/tea.js";
 import { useAppInfo } from "../../hooks/index.js";
 import { TrackKey } from "../../types/tea.js";
@@ -24,9 +26,21 @@ const readCssVarColor = (varName, fallback)=>{
         return fallback;
     }
 };
+const appFlags = process.env.APP_FLAGS || {};
 const App = (props)=>{
-    const { enableAuth } = props;
+    const { themeMeta = {}, enableAuth, disableToaster = false } = 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
+        }
+    };
     useEffect(()=>{
         if (isMiaodaPreview) fetch(`${location.origin}/ai/api/feida_preview/csrf`).then(()=>{
             setTimeout(()=>{
@@ -50,8 +64,15 @@ const App = (props)=>{
             enable: enableAuth
         },
         children: [
-            /*#__PURE__*/ jsx(Toaster, {}),
-            'production' !== process.env.NODE_ENV && /*#__PURE__*/ jsx(MiaodaInspector, {}),
+            !disableToaster && true !== appFlags.customToaster && /*#__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
@@ -60,7 +81,7 @@ const App = (props)=>{
     });
 };
 const AppContainer_AppContainer = (props)=>{
-    const { children } = props;
+    const { children, ...rest } = props;
     const [cssColors, setCssColors] = useState(()=>({
             background: readCssVarColor('--background'),
             destructive: readCssVarColor('--destructive'),
@@ -188,7 +209,9 @@ const AppContainer_AppContainer = (props)=>{
                         }
                     },
                     children: /*#__PURE__*/ jsx(App, {
+                        themeMeta: props.themeMeta,
                         enableAuth: props.enableAuth,
+                        disableToaster: props.disableToaster,
                         children: children
                     })
                 })

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

@@ -1,2 +1,3 @@
 export * from './constants';
 export * from './util';
+export * from './ui-config';

package/lib/components/theme/index.js

@@ -1,2 +1,3 @@
 export * from "./constants.js";
 export * from "./util.js";
+export * from "./ui-config.js";

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

@@ -0,0 +1 @@
+export { defaultUIConfig, type UIComponentConfig, } from '@lark-apaas/miaoda-inspector';

package/lib/components/theme/ui-config.js

@@ -0,0 +1,2 @@
+import { defaultUIConfig } from "@lark-apaas/miaoda-inspector";
+export { defaultUIConfig };

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

@@ -1,4 +1,5 @@
 import { ITheme } from "../../types";
+import { UIComponentConfig } from "./ui-config";
 export interface IBaseThemeProviderProps {
     defaultTheme?: ITheme;
     themeMeta?: Partial<IThemeTokenMeta>;
@@ -17,3 +18,4 @@ export interface IThemeTokenMeta {
      */
     spacing: number;
 }
+export declare const generateTailwindRadiusToken: (radiusRemValue: number) => UIComponentConfig;

package/lib/components/theme/util.js

@@ -0,0 +1,108 @@
+const generateTailwindRadiusToken = (radiusRemValue)=>{
+    try {
+        const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        const radiusPx = radiusRemValue * rootFontSize;
+        const tempElement = document.createElement('div');
+        tempElement.style.position = 'absolute';
+        tempElement.style.visibility = 'hidden';
+        document.body.appendChild(tempElement);
+        tempElement.style.borderRadius = `${radiusPx}px`;
+        const computed = getComputedStyle(tempElement).borderRadius;
+        document.body.removeChild(tempElement);
+        if (computed && 'auto' !== computed && 'initial' !== computed) return {
+            type: 'select',
+            options: [
+                {
+                    value: 'rounded-none',
+                    label: 'none（0px）',
+                    rawValue: '0'
+                },
+                {
+                    value: 'rounded-sm',
+                    label: `sm (${Math.max(0, radiusPx - 4)}px)`,
+                    rawValue: `${Math.max(0, radiusPx - 4)}`
+                },
+                {
+                    value: 'rounded',
+                    label: 's (4px)',
+                    rawValue: '4'
+                },
+                {
+                    value: 'rounded-md',
+                    label: `m (${Math.max(0, radiusPx - 2)}px)`,
+                    rawValue: `${Math.max(0, radiusPx - 2)}`
+                },
+                {
+                    value: 'rounded-lg',
+                    label: `l (${radiusPx}px)`,
+                    rawValue: `${radiusPx}`
+                },
+                {
+                    value: 'rounded-xl',
+                    label: `xl (${radiusPx + 4}px)`,
+                    rawValue: `${radiusPx + 4}`
+                },
+                {
+                    value: 'rounded-2xl',
+                    label: '2xl (16px)',
+                    rawValue: '16'
+                },
+                {
+                    value: 'rounded-full',
+                    label: 'Full',
+                    rawValue: '9999'
+                }
+            ]
+        };
+        throw new Error('Browser calculation validation failed');
+    } catch (error) {
+        console.warn('Failed to get computed values from browser, falling back to default calculation:', error);
+        const radiusPx = 16 * radiusRemValue;
+        return {
+            type: 'select',
+            options: [
+                {
+                    value: 'rounded-none',
+                    label: 'none（0px）',
+                    rawValue: '0'
+                },
+                {
+                    value: 'rounded-sm',
+                    label: `sm (${Math.max(0, radiusPx - 4)}px)`,
+                    rawValue: `${Math.max(0, radiusPx - 4)}`
+                },
+                {
+                    value: 'rounded',
+                    label: 's (4px)',
+                    rawValue: '4'
+                },
+                {
+                    value: 'rounded-md',
+                    label: `m (${Math.max(0, radiusPx - 2)}px)`,
+                    rawValue: `${Math.max(0, radiusPx - 2)}`
+                },
+                {
+                    value: 'rounded-lg',
+                    label: `l (${radiusPx}px)`,
+                    rawValue: `${radiusPx}`
+                },
+                {
+                    value: 'rounded-xl',
+                    label: `xl (${radiusPx + 4}px)`,
+                    rawValue: `${radiusPx + 4}`
+                },
+                {
+                    value: 'rounded-2xl',
+                    label: '2xl (16px)',
+                    rawValue: '16'
+                },
+                {
+                    value: 'rounded-full',
+                    label: 'Full',
+                    rawValue: '9999'
+                }
+            ]
+        };
+    }
+};
+export { generateTailwindRadiusToken };

package/lib/integrations/services/types.d.ts

@@ -14,6 +14,7 @@ export type UserInfo = {
     avatar: string;
     userType: '_employee' | '_externalUser' | '_anonymousUser';
     department: DepartmentBasic;
+    email?: string;
 };
 export type DepartmentInfo = {
     departmentID: string;

package/lib/runtime/index.d.ts

@@ -15,7 +15,6 @@
  * - 使用 __FULLSTACK_RUNTIME_INITIALIZED__ 标志位防止重复初始化
  * - 旧版 AppContainer 和新版 runtime 可以共存
  */
-import './react-devtools-hook';
 import './styles';
 declare global {
     interface Window {

package/lib/runtime/index.js

@@ -1,4 +1,3 @@
-import "./react-devtools-hook.js";
 import "./styles.js";
 import { registerDayjsPlugins } from "./dayjs.js";
 import { initAxiosConfig } from "./axios.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.10-alpha.36",
+  "version": "1.2.10-alpha.38",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -93,10 +93,10 @@
   "dependencies": {
     "@ant-design/colors": "^7.2.1",
     "@ant-design/cssinjs": "^1.24.0",
-    "@data-loom/js": "0.4.6",
+    "@data-loom/js": "0.4.7",
     "@lark-apaas/auth-sdk": "^0.1.0",
     "@lark-apaas/client-capability": "^0.1.4",
-    "@lark-apaas/miaoda-inspector": "1.0.14-alpha.18",
+    "@lark-apaas/miaoda-inspector": "^1.0.16",
     "@lark-apaas/observable-web": "^1.0.1",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-popover": "^1.1.15",

package/lib/runtime/react-devtools-hook.d.ts

@@ -1,19 +0,0 @@
-/**
- * Inject minimal __REACT_DEVTOOLS_GLOBAL_HOOK__ before React loads.
- * React checks for this hook during module initialization and registers its
- * renderer via hook.inject(). This gives us access to renderer.overrideProps()
- * for live component prop modification in the inspector.
- *
- * Must execute before React's module-level code runs.
- *
- * When react-refresh-runtime runs first (as an rspack runtime module),
- * it may create __REACT_DEVTOOLS_GLOBAL_HOOK__ with an inject() that
- * doesn't populate the renderers Map. We patch the existing hook to
- * ensure renderers are always tracked.
- */
-export {};
-declare global {
-    interface Window {
-        __REACT_DEVTOOLS_GLOBAL_HOOK__?: any;
-    }
-}

package/lib/runtime/react-devtools-hook.js

@@ -1,20 +0,0 @@
-if ('undefined' != typeof window) if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
-    const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    if (!(hook.renderers instanceof Map)) hook.renderers = new Map();
-    const originalInject = 'function' == typeof hook.inject ? hook.inject.bind(hook) : null;
-    hook.inject = function(renderer) {
-        const id = originalInject ? originalInject(renderer) : hook.renderers.size + 1;
-        if (null != id && !hook.renderers.has(id)) hook.renderers.set(id, renderer);
-        return id;
-    };
-} else window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
-    renderers: new Map(),
-    supportsFiber: true,
-    inject (renderer) {
-        const id = this.renderers.size + 1;
-        this.renderers.set(id, renderer);
-        return id;
-    },
-    onCommitFiberRoot () {},
-    onCommitFiberUnmount () {}
-};