@lark-apaas/client-toolkit 1.2.17-alpha.1 → 1.2.17-alpha.2

package/lib/hooks/useScrollReveal.d.ts

@@ -0,0 +1,61 @@
+import { RefObject } from 'react';
+/**
+ * Options for useScrollReveal hook
+ */
+export interface UseScrollRevealOptions<T extends HTMLElement = HTMLElement> {
+    /** Ref to the container element to scope the query (default: document.body) */
+    containerRef?: RefObject<T | null>;
+    /** IntersectionObserver threshold - element visibility percentage to trigger (default: 0.1) */
+    threshold?: number;
+    /** IntersectionObserver rootMargin - margin around root (default: '0px 0px -50px 0px') */
+    rootMargin?: string;
+    /** CSS class to add when element becomes visible (default: 'visible') */
+    visibleClass?: string;
+    /** CSS selector for elements to observe (default: '.scroll-reveal') */
+    selector?: string;
+}
+/**
+ * Hook to enable scroll reveal animations using IntersectionObserver.
+ *
+ * Observes elements with the specified selector and adds a visibility class
+ * when they enter the viewport.
+ *
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * // Usage without parameters (queries entire document.body)
+ * import { useScrollReveal } from '@lark-apaas/client-toolkit/hooks/useScrollReveal';
+ *
+ * function MyComponent() {
+ *   useScrollReveal();
+ *
+ *   return <div className="scroll-reveal">I will fade in on scroll!</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usage with container ref
+ * import { useRef } from 'react';
+ * import { useScrollReveal } from '@lark-apaas/client-toolkit/hooks/useScrollReveal';
+ *
+ * function MyComponent() {
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *   useScrollReveal({ containerRef });
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       <div className="scroll-reveal">I will fade in on scroll!</div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usage with custom options
+ * useScrollReveal({ threshold: 0.2, visibleClass: 'animate-in' });
+ * ```
+ */
+export declare function useScrollReveal<T extends HTMLElement = HTMLElement>(options?: UseScrollRevealOptions<T>): void;

package/lib/hooks/useScrollReveal.js

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+const DEFAULT_OPTIONS = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px',
+    visibleClass: 'visible',
+    selector: '.scroll-reveal'
+};
+function useScrollReveal(options) {
+    const { containerRef, threshold, rootMargin, visibleClass, selector } = {
+        ...DEFAULT_OPTIONS,
+        ...options
+    };
+    useEffect(()=>{
+        const container = containerRef?.current ?? document.body;
+        if (!container) return;
+        const observer = new IntersectionObserver((entries)=>{
+            entries.forEach((entry)=>{
+                if (entry.isIntersecting) entry.target.classList.add(visibleClass);
+            });
+        }, {
+            threshold,
+            rootMargin
+        });
+        const elements = container.querySelectorAll(selector);
+        elements.forEach((el)=>observer.observe(el));
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        containerRef,
+        threshold,
+        rootMargin,
+        visibleClass,
+        selector
+    ]);
+}
+export { useScrollReveal };

package/lib/index.js

@@ -1,6 +1,7 @@
 import { createClient } from "@lark-apaas/client-capability";
 import { normalizeBasePath } from "./utils/utils.js";
 import { logger } from "./logger/index.js";
+import { showToast } from "./components/ui/toast.js";
 import { version } from "../package.json";
 const capabilityClient = createClient({
     baseURL: normalizeBasePath(process.env.CLIENT_BASE_PATH),
@@ -9,7 +10,10 @@ const capabilityClient = createClient({
             'X-Suda-Csrf-Token': window.csrfToken ?? ''
         }
     },
-    logger: logger
+    logger: logger,
+    onRateLimitError: ()=>{
+        showToast('应用额度已耗尽，请联系应用开发者');
+    }
 });
 const src = {
     version: version

package/lib/integrations/dataloom.js

@@ -3,8 +3,10 @@ import { createClient } from "@data-loom/js";
 import { getAppId } from "../utils/getAppId.js";
 import { getInitialInfo } from "../utils/getInitialInfo.js";
 const createDataLoomClient = (url, pat)=>{
-    if (!url) return null;
-    const { baseUrl, workspace } = splitWorkspaceUrl(url);
+    const { baseUrl, workspace } = url ? splitWorkspaceUrl(url) : {
+        baseUrl: '',
+        workspace: ''
+    };
     const appId = getAppId(window.location.pathname);
     return createClient(baseUrl, pat, workspace, {
         global: {

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/logger/batch-logger.js

@@ -4,9 +4,9 @@ class BatchLogger {
     flushTimer = null;
     isProcessing = false;
     originConsole;
-    constructor(console, config){
+    constructor(console1, config){
         this.originConsole = {
-            ...console
+            ...console1
         };
         const { userId = '', tenantId = '', appId = '' } = window || {};
         this.config = {
@@ -131,4 +131,5 @@ function destroyBatchLogger() {
         defaultBatchLogger = null;
     }
 }
+if ('production' !== process.env.NODE_ENV && 'undefined' != typeof window) defaultBatchLogger = new BatchLogger(console);
 export { BatchLogger, batchLogInfo, destroyBatchLogger, getBatchLogger, initBatchLogger };

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

@@ -1,4 +1,4 @@
-import { createApplyHandle, getModuleHot } from "../utils/module-hot.js";
+import { getHmrApi } from "../utils/hmr-api.js";
 import { submitPostMessage, submitSlardarEvent } from "../utils/postMessage.js";
 import { levelSchema } from "./log-types.js";
 import { logger } from "./logger.js";
@@ -63,26 +63,28 @@ function processDevServerLog(log) {
     }
 }
 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'
-            }
+    const hmr = getHmrApi();
+    if (hmr) {
+        hmr.onSuccess(()=>{
+            submitPostMessage({
+                type: 'DevServerMessage',
+                data: {
+                    type: 'devServer-status',
+                    status: 'hmr-apply-success'
+                }
+            });
         });
-        else {
-            console.warn('hmr apply failed', status);
+        hmr.onError((error)=>{
+            console.warn('hmr apply failed', error);
             submitSlardarEvent({
                 name: 'sandbox-devServer',
                 categories: {
                     type: 'hmr-apply-failed',
-                    status
+                    error: String(error)
                 }
             });
-        }
-    }));
+        });
+    }
 }
 function interceptErrors() {
     window.addEventListener('error', (event)=>{

package/lib/logger/log-types.d.ts

@@ -1,7 +1,7 @@
 import z from 'zod';
 export declare const networkRequestLogSchema: z.ZodObject<{
     method: z.ZodString;
-    status: z.ZodInt;
+    status: z.ZodNumber;
     statusText: z.ZodString;
     path: z.ZodString;
     requestData: z.ZodOptional<z.ZodUnknown>;
@@ -27,11 +27,11 @@ export declare const logStackFrameSchema: z.ZodObject<{
     columnNumber: z.ZodNumber;
 }, z.core.$strip>;
 export declare const levelSchema: z.ZodEnum<{
+    error: "error";
     success: "success";
     debug: "debug";
     info: "info";
     warn: "warn";
-    error: "error";
 }>;
 export declare const logMeta: z.ZodObject<{
     stacktrace: z.ZodOptional<z.ZodArray<z.ZodObject<{
@@ -52,11 +52,11 @@ export declare const logMeta: z.ZodObject<{
 export declare const selectedLogSchema: z.ZodObject<{
     type: z.ZodLiteral<"typedLogV2">;
     level: z.ZodEnum<{
+        error: "error";
         success: "success";
         debug: "debug";
         info: "info";
         warn: "warn";
-        error: "error";
     }>;
     id: z.ZodString;
     args: z.ZodArray<z.ZodUnknown>;
@@ -80,11 +80,11 @@ export declare const selectedLogSchema: z.ZodObject<{
 export type LogLevel = z.infer<typeof levelSchema>;
 export declare const logWithMetaSchema: z.ZodObject<{
     level: z.ZodEnum<{
+        error: "error";
         success: "success";
         debug: "debug";
         info: "info";
         warn: "warn";
-        error: "error";
     }>;
     args: z.ZodArray<z.ZodUnknown>;
     meta: z.ZodOptional<z.ZodObject<{

package/lib/logger/log-types.js

@@ -1,7 +1,7 @@
 import zod from "zod";
 const networkRequestLogSchema = zod.object({
     method: zod.string(),
-    status: zod.int(),
+    status: zod.number().int(),
     statusText: zod.string(),
     path: zod.string(),
     requestData: zod.optional(zod.unknown()),

package/lib/logger/selected-logs.js

@@ -2,7 +2,7 @@ import { SourceMapConsumer as external_source_map_SourceMapConsumer } from "sour
 import "../utils/utils.js";
 import { mappingText } from "./source-map-mappings-wasm.js";
 import stacktrace_js from "stacktrace-js";
-import { batchLogInfo, initBatchLogger } from "./batch-logger.js";
+import { batchLogInfo } from "./batch-logger.js";
 function hexToBuffer(hexString) {
     const hex = hexString.replace(/\s/g, '').toUpperCase();
     if (!/^[0-9A-F]+$/.test(hex)) throw new Error('Invalid hex string');
@@ -213,7 +213,6 @@ const typedLogInterceptor = (logger)=>({
             });
         }
     });
-'production' !== process.env.NODE_ENV && initBatchLogger(console);
 const interceptors = 'production' !== process.env.NODE_ENV ? [
     typedLogInterceptor
 ] : [];

package/lib/runtime/axios.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Axios 配置初始化
+ * 从原有的 axiosConfig.ts 迁移
+ */
+export { initAxiosConfig } from '../utils/axiosConfig';

package/lib/runtime/axios.js

@@ -0,0 +1,2 @@
+import { initAxiosConfig } from "../utils/axiosConfig.js";
+export { initAxiosConfig };

package/lib/runtime/dayjs.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Dayjs 插件注册
+ * 从原有的 dayjsPlugins.ts 迁移
+ */
+export { registerDayjsPlugins } from '../components/AppContainer/dayjsPlugins';

package/lib/runtime/dayjs.js

@@ -0,0 +1,2 @@
+import { registerDayjsPlugins } from "../components/AppContainer/dayjsPlugins.js";
+export { registerDayjsPlugins };

package/lib/runtime/iframe-bridge.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Iframe Bridge Runtime
+ *
+ * 开发环境下的 iframe 通信初始化：
+ * - connectParent - 通过 penpal 连接父页面，建立双向通信
+ */
+/**
+ * 初始化 iframe bridge（仅开发环境）
+ * - 连接父页面
+ */
+export declare function initIframeBridge(): void;

package/lib/runtime/iframe-bridge.js

@@ -0,0 +1,29 @@
+import { connectToParent } from "penpal";
+import { resolveParentOrigin, submitPostMessage } from "../utils/postMessage.js";
+import { batchLogInfo } from "../logger/batch-logger.js";
+import { childApi } from "../components/AppContainer/utils/childApi.js";
+async function connectParent() {
+    submitPostMessage({
+        type: 'PreviewReady',
+        data: {}
+    });
+    batchLogInfo('info', JSON.stringify({
+        type: 'PreviewReady',
+        timestamp: Date.now(),
+        url: window.location.href
+    }));
+    const parentOrigin = resolveParentOrigin();
+    if (!parentOrigin) return;
+    const connection = connectToParent({
+        parentOrigin,
+        methods: {
+            ...childApi
+        }
+    });
+    await connection.promise;
+}
+function initIframeBridge() {
+    if (window.parent === window) return;
+    connectParent();
+}
+export { initIframeBridge };

package/lib/runtime/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Client Toolkit Runtime
+ *
+ * 全局初始化逻辑，通过 rspack-plugin 自动注入到用户入口之前
+ * 无论用户是否使用 AppContainer，这些基础能力始终可用
+ *
+ * 执行顺序：
+ * 1. 全局样式
+ * 2. Dayjs 插件注册
+ * 3. Axios 配置
+ * 4. 可观测初始化
+ * 5. Server Log SSE (开发环境)
+ *
+ * 兼容性说明：
+ * - 使用 __FULLSTACK_RUNTIME_INITIALIZED__ 标志位防止重复初始化
+ * - 旧版 AppContainer 和新版 runtime 可以共存
+ */
+import './react-devtools-hook';
+import './styles';
+declare global {
+    interface Window {
+        __FULLSTACK_RUNTIME_INITIALIZED__?: boolean;
+    }
+}

package/lib/runtime/index.js

@@ -0,0 +1,17 @@
+import "./react-devtools-hook.js";
+import "./styles.js";
+import { registerDayjsPlugins } from "./dayjs.js";
+import { initAxiosConfig } from "./axios.js";
+import { initObservable } from "./observable.js";
+import { initServerLog } from "./server-log.js";
+import { initIframeBridge } from "./iframe-bridge.js";
+if (!window.__FULLSTACK_RUNTIME_INITIALIZED__) {
+    window.__FULLSTACK_RUNTIME_INITIALIZED__ = true;
+    registerDayjsPlugins();
+    initAxiosConfig();
+    initObservable();
+    if ('production' !== process.env.NODE_ENV) {
+        initServerLog();
+        initIframeBridge();
+    }
+}

package/lib/runtime/observable.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 可观测初始化
+ * 从原有的 observable.ts 迁移
+ */
+export { initObservable } from '../components/AppContainer/utils/observable';

package/lib/runtime/observable.js

@@ -0,0 +1,2 @@
+import { initObservable } from "../components/AppContainer/utils/observable.js";
+export { initObservable };

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

@@ -0,0 +1,19 @@
+/**
+ * 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

@@ -0,0 +1,20 @@
+if ('undefined' != typeof window && 'production' !== process.env.NODE_ENV) 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 () {}
+};

package/lib/runtime/server-log.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 初始化 Server Log SSE 客户端
+ * 仅在开发环境且在 iframe 中时启用
+ */
+export declare function initServerLog(): void;

package/lib/runtime/server-log.js

@@ -0,0 +1,41 @@
+import { ServerLogSSEClient } from "../server-log/index.js";
+let client = null;
+function initServerLog() {
+    if (window.parent === window) return;
+    try {
+        const backendUrl = window.location.origin;
+        client = new ServerLogSSEClient({
+            serverUrl: backendUrl,
+            sseEndpoint: '/dev/logs/server-logs/stream',
+            debug: true
+        });
+        client.start();
+        console.log('[Runtime] Server log SSE client started');
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        window.addEventListener('beforeunload', cleanup);
+        window.addEventListener('unload', cleanup);
+    } catch (error) {
+        console.error('[Runtime] Failed to start server log SSE client:', error);
+    }
+}
+function handleVisibilityChange() {
+    if (!client) return;
+    if (document.hidden) {
+        client.pause();
+        console.log('[Runtime] Tab hidden, SSE paused');
+    } else {
+        client.resume();
+        console.log('[Runtime] Tab visible, SSE resumed');
+    }
+}
+function cleanup() {
+    if (client) {
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+        window.removeEventListener('beforeunload', cleanup);
+        window.removeEventListener('unload', cleanup);
+        client.stop();
+        client = null;
+        console.log('[Runtime] Server log SSE client stopped');
+    }
+}
+export { initServerLog };

package/lib/runtime/styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 全局样式导入
+ * 在 runtime 中最先执行，确保样式优先加载
+ */
+import '../index.css';

package/lib/runtime/styles.js

@@ -0,0 +1 @@
+import "../index.css";

package/lib/theme-layer.css

@@ -1,3 +1,4 @@
 @layer theme, base, antd, components, utilities;
-@import "tailwindcss";
+@import 'tailwindcss' source(none);
+@source "../**/*.{js,jsx,ts,tsx}";
 

package/lib/utils/axiosConfig.js

@@ -54,7 +54,7 @@ async function logResponse(ok, responseOrError) {
             logTraceID
         };
         if (stacktrace) logMeta.stacktrace = stacktrace;
-        logger.debug({
+        logger.log({
             level: ok,
             args: [
                 parts.join(''),
@@ -110,7 +110,7 @@ async function logResponse(ok, responseOrError) {
         const stacktrace = await requestStacktraceMap.get(requestUUID);
         const logMeta = {};
         if (stacktrace) logMeta.stacktrace = stacktrace;
-        logger.debug({
+        logger.log({
             level: 'error',
             args: [
                 parts.join(''),
@@ -120,7 +120,7 @@ async function logResponse(ok, responseOrError) {
         });
         return;
     }
-    logger.debug({
+    logger.log({
         level: 'error',
         args: [
             '请求失败：无响应对象或配置信息'
@@ -234,8 +234,30 @@ function initAxiosConfig(axiosInstance) {
         config._startTime = config._startTime || Date.now();
         const csrfToken = window.csrfToken;
         if (csrfToken) config.headers['X-Suda-Csrf-Token'] = csrfToken;
+        if ('undefined' != typeof window && window.location?.pathname) config.headers['X-Page-Route'] = window.location.pathname;
         return config;
     }, (error)=>Promise.reject(error));
+    instance.interceptors.response.use((response)=>response, (error)=>{
+        try {
+            if (error.response?.status === 403) {
+                const method = (error.config?.method || 'GET').toUpperCase();
+                const url = (error.config?.url || '').split('?')[0];
+                logger.log({
+                    level: 'warn',
+                    args: [
+                        `请求被拒绝(403)：${method} ${url}`,
+                        {
+                            状态码: 403,
+                            返回数据: error.response.data
+                        }
+                    ],
+                    meta: {}
+                });
+                return error.response;
+            }
+        } catch (e) {}
+        return Promise.reject(error);
+    });
     'production' !== process.env.NODE_ENV && instance.interceptors.response.use((response)=>{
         logResponse('success', response);
         return response;

package/lib/utils/getParentOrigin.js

@@ -1,7 +1,17 @@
 function getEnv() {
+    switch(globalThis.ENVIRONMENT){
+        case 'staging':
+            return 'BOE';
+        case 'gray':
+            return 'PRE';
+        case 'online':
+            return 'ONLINE';
+        default:
+            break;
+    }
     const { origin } = window.location;
-    if (origin.includes('feishuapp.cn') || origin.includes('miaoda.feishuapp.net')) return 'ONLINE';
-    if (origin.includes('fsapp.kundou.cn') || origin.includes('miaoda-pre.feishuapp.net')) return 'PRE';
+    if (origin.includes('feishuapp.cn') || origin.includes('miaoda.feishuapp.net') || origin.includes('aiforce.cloud') || origin.includes('aiforce.run')) return 'ONLINE';
+    if (origin.includes('fsapp.kundou.cn') || origin.includes('miaoda-pre.feishuapp.net') || origin.includes('aiforce-pre.bytedance.net') || origin.includes('aiforce-pre-preview.bytedance.net') || origin.includes('aiforce-pre.cloud') || origin.includes('aiforce-pre.run')) return 'PRE';
     return 'BOE';
 }
 export { getEnv };

package/lib/utils/hmr-api.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 统一 HMR API
+ *
+ * 提供统一的 HMR 成功/失败回调接口，屏蔽 Webpack 和 Vite 的差异。
+ *
+ * - Webpack/Rspack: 通过 import.meta.webpackHot 或 module.hot
+ * - Vite: 通过 error-overlay 注入的 window.__VITE_HMR__
+ *
+ * @see docs/RFC_HMR_API.md
+ */
+export interface HmrApi {
+    /**
+     * 注册 HMR 成功回调
+     * @param callback 成功回调函数
+     * @returns cleanup 函数，用于取消注册
+     */
+    onSuccess(callback: () => void): () => void;
+    /**
+     * 注册 HMR 失败回调
+     * @param callback 失败回调函数，参数为错误信息
+     * @returns cleanup 函数，用于取消注册
+     */
+    onError(callback: (error: unknown) => void): () => void;
+}
+declare global {
+    interface Window {
+        __VITE_HMR__?: HmrApi;
+    }
+}
+/**
+ * 获取 HMR API 实例
+ *
+ * 自动检测当前构建工具（Webpack/Vite）并返回对应实现：
+ * - Webpack/Rspack: 使用内置适配器
+ * - Vite: 使用 error-overlay 注入的 window.__VITE_HMR__
+ *
+ * @returns HmrApi 实例，如果不在开发环境或不支持 HMR 则返回 null
+ */
+export declare function getHmrApi(): HmrApi | null;