@lark-apaas/client-toolkit 1.2.0-alpha.5 → 1.2.0-alpha.7

package/lib/apis/components/Avatar.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Avatar components re-exported from ui/avatar for public API.
+ */
+export { Avatar, AvatarImage, AvatarFallback } from '../../components/ui/avatar';

package/lib/apis/components/Avatar.js

@@ -0,0 +1,2 @@
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar.js";
+export { Avatar, AvatarFallback, AvatarImage };

package/lib/apis/components/NavLink.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { type NavLinkProps } from 'react-router-dom';
+/**
+ * Enhanced NavLink component that extends react-router-dom's NavLink
+ * with support for hash links (anchor navigation) and smooth scrolling.
+ */
+declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export { NavLink };
+export type { NavLinkProps };

package/lib/apis/components/NavLink.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { NavLink, useLocation, useNavigate } from "react-router-dom";
+const NavLink_NavLink = /*#__PURE__*/ forwardRef(({ to, children, className, style, ...props }, ref)=>{
+    const isHashLink = 'string' == typeof to && to.startsWith('#');
+    const location = useLocation();
+    const navigate = useNavigate();
+    if (isHashLink) {
+        const handleClick = (e)=>{
+            e.preventDefault();
+            const element = document.querySelector(to);
+            if (element) element.scrollIntoView({
+                behavior: 'smooth'
+            });
+            navigate(to);
+        };
+        const isActive = location.hash === to;
+        const renderProps = {
+            isActive,
+            isPending: false,
+            isTransitioning: false
+        };
+        const resolvedClassName = 'function' == typeof className ? className(renderProps) : className;
+        const resolvedStyle = 'function' == typeof style ? style(renderProps) : style;
+        const { caseSensitive, end, replace, state, preventScrollReset, relative, viewTransition, ...restProps } = props;
+        return /*#__PURE__*/ jsx("a", {
+            href: to,
+            onClick: handleClick,
+            ref: ref,
+            className: resolvedClassName,
+            style: resolvedStyle,
+            ...restProps,
+            children: 'function' == typeof children ? children(renderProps) : children
+        });
+    }
+    return /*#__PURE__*/ jsx(NavLink, {
+        to: to,
+        ref: ref,
+        className: className,
+        style: style,
+        onClick: ()=>(document.getElementById('rootContainer') || window)?.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            }),
+        ...props,
+        children: children
+    });
+});
+NavLink_NavLink.displayName = 'NavLink';
+export { NavLink_NavLink as NavLink };

package/lib/apis/components/TruncatedTitle.d.ts

@@ -0,0 +1,5 @@
+/**
+ * TruncatedTitle component - displays truncated text with a tooltip when overflowed.
+ * This is an alias for OverflowTooltipText for semantic naming in layout components.
+ */
+export { OverflowTooltipText, OverflowTooltipText as TruncatedTitle, type OverflowTooltipTextProps, type OverflowTooltipTextProps as TruncatedTitleProps, } from '../../components/ui/overflow-tooltip-text';

package/lib/apis/components/TruncatedTitle.js

@@ -0,0 +1,2 @@
+import { OverflowTooltipText } from "../../components/ui/overflow-tooltip-text.js";
+export { OverflowTooltipText, OverflowTooltipText as TruncatedTitle };

package/lib/components/AppContainer/index.js

@@ -15,10 +15,12 @@ import { useAppInfo } from "../../hooks/index.js";
 import { TrackKey } from "../../types/tea.js";
 import safety from "./safety.js";
 import { getAppId } from "../../utils/getAppId.js";
-import { ServerLogPoller } from "../../server-log/index.js";
+import { ServerLogSSEClient } from "../../server-log/index.js";
 import QueryProvider from "../QueryProvider/index.js";
+import { initObservable } from "./utils/observable.js";
 registerDayjsPlugins();
 initAxiosConfig();
+initObservable();
 const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
 const readCssVarColor = (varName, fallback)=>{
     try {
@@ -32,7 +34,7 @@ const readCssVarColor = (varName, fallback)=>{
 const App = (props)=>{
     const { themeMeta = {} } = props;
     useAppInfo();
-    const serverLogPollerRef = useRef(null);
+    const serverLogClientRef = useRef(null);
     const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
         rem: '0.625'
     };
@@ -48,22 +50,32 @@ const App = (props)=>{
         if ('production' !== process.env.NODE_ENV && window.parent !== window) {
             try {
                 const backendUrl = window.location.origin;
-                serverLogPollerRef.current = new ServerLogPoller({
+                serverLogClientRef.current = new ServerLogSSEClient({
                     serverUrl: backendUrl,
-                    apiPath: '/dev/logs/server-logs',
-                    pollInterval: 2000,
-                    limit: 100,
+                    sseEndpoint: '/dev/logs/server-logs/stream',
                     debug: true
                 });
-                serverLogPollerRef.current.start();
-                console.log('[AppContainer] Server log poller started');
+                serverLogClientRef.current.start();
+                console.log('[AppContainer] Server log SSE client started');
             } catch (error) {
-                console.error('[AppContainer] Failed to start server log poller:', error);
+                console.error('[AppContainer] Failed to start server log SSE client:', error);
             }
+            const handleVisibilityChange = ()=>{
+                if (!serverLogClientRef.current) return;
+                if (document.hidden) {
+                    serverLogClientRef.current.pause();
+                    console.log('[AppContainer] Tab hidden, SSE paused');
+                } else {
+                    serverLogClientRef.current.resume();
+                    console.log('[AppContainer] Tab visible, SSE resumed');
+                }
+            };
+            document.addEventListener('visibilitychange', handleVisibilityChange);
             return ()=>{
-                if (serverLogPollerRef.current) {
-                    serverLogPollerRef.current.stop();
-                    console.log('[AppContainer] Server log poller stopped');
+                document.removeEventListener('visibilitychange', handleVisibilityChange);
+                if (serverLogClientRef.current) {
+                    serverLogClientRef.current.stop();
+                    console.log('[AppContainer] Server log SSE client stopped');
                 }
             };
         }

package/lib/components/AppContainer/utils/observable.d.ts

@@ -0,0 +1 @@
+export declare const initObservable: () => void;

package/lib/components/AppContainer/utils/observable.js

@@ -0,0 +1,16 @@
+import { AppEnv, observable } from "@lark-apaas/observable-web";
+const initObservable = ()=>{
+    try {
+        observable.start({
+            serviceName: "app",
+            env: 'development' === process.env.NODE_ENV ? AppEnv.Dev : AppEnv.Prod,
+            collectorUrl: {
+                log: `/spark/app/${window.appId}/runtime/api/v1/observability/logs/collect`,
+                metric: `/spark/app/${window.appId}/runtime/api/v1/observability/metrics/collect`
+            }
+        });
+    } catch (error) {
+        console.error('Failed to start WebObservableSdk:', error);
+    }
+};
+export { initObservable };

package/lib/hooks/useAppInfo.js

@@ -23,17 +23,19 @@ const useAppInfo = ()=>{
             if (info.description) {
                 const meta = document.querySelector("meta[property='og:description']");
                 if (meta) meta.content = info.description;
+                const metaDom = document.querySelector("meta[name='description']");
+                if (metaDom) metaDom.content = info.description;
             }
         };
-        const handleMetaInfoChanged = async (info)=>{
-            if (!info) info = await getAppInfo(true);
+        const handleMetaInfoChanged = async (info, refresh = true)=>{
+            if (!info) info = await getAppInfo(refresh);
             updateDomInfo(info);
             setAppInfo((prev)=>({
                     ...prev,
                     ...info
                 }));
         };
-        handleMetaInfoChanged();
+        handleMetaInfoChanged(null, false);
         const onUpdate = (e)=>{
             const info = e.detail;
             handleMetaInfoChanged(info);

package/lib/hooks/useCurrentUserProfile.js

@@ -3,6 +3,11 @@ import { logger } from "../logger/index.js";
 import { getCurrentUserProfile } from "../integrations/getCurrentUserProfile.js";
 import { getDataloom } from "../integrations/dataloom.js";
 import { isSparkRuntime } from "../utils/utils.js";
+function getNameFromArray(nameArray) {
+    if (!nameArray || 0 === nameArray.length) return;
+    const chineseName = nameArray.find((item)=>2052 === item.language_code);
+    return chineseName?.text ?? nameArray[0]?.text;
+}
 function getCompatibilityUserProfile() {
     const userInfo = getCurrentUserProfile();
     return {
@@ -18,34 +23,36 @@ const useCurrentUserProfile = ()=>{
         if (isSparkRuntime()) {
             (async ()=>{
                 const dataloom = await getDataloom();
-                const result = await dataloom.service.session.getUserInfo();
+                const result = await dataloom?.service?.session?.getUserInfo();
                 const userInfo = result?.data?.user_info;
+                const userName = getNameFromArray(userInfo?.name);
                 setUserInfo({
                     user_id: userInfo?.user_id?.toString(),
                     email: userInfo?.email,
-                    name: userInfo?.name?.[0]?.text,
+                    name: userName,
                     avatar: userInfo?.avatar?.image?.large,
-                    userName: userInfo?.name?.[0]?.text,
+                    userName: userName,
                     userAvatar: userInfo?.avatar?.image?.large
                 });
             })();
             handleMetaInfoChanged = async ()=>{
                 const dataloom = await getDataloom();
-                const result = await dataloom.service.session.getUserInfo();
+                const result = await dataloom?.service?.session?.getUserInfo();
                 const userInfo = result?.data?.user_info;
+                const userName = getNameFromArray(userInfo?.name);
                 const newUserInfo = {
                     user_id: userInfo?.user_id?.toString(),
                     email: userInfo?.email,
-                    name: userInfo?.name?.[0]?.text,
+                    name: userName,
                     avatar: userInfo?.avatar?.image?.large,
-                    userName: userInfo?.name?.[0]?.text,
+                    userName: userName,
                     userAvatar: userInfo?.avatar?.image?.large
                 };
-                logger.info('MiaoDaMetaInfoChanged', newUserInfo);
+                if ('development' === process.env.NODE_ENV) logger.info('MiaoDaMetaInfoChanged', newUserInfo);
                 setUserInfo(newUserInfo);
             };
         } else handleMetaInfoChanged = ()=>{
-            logger.info('MiaoDaMetaInfoChanged', getCompatibilityUserProfile());
+            if ('development' === process.env.NODE_ENV) logger.info('MiaoDaMetaInfoChanged', getCompatibilityUserProfile());
             setUserInfo(getCompatibilityUserProfile());
         };
         window.addEventListener('MiaoDaMetaInfoChanged', handleMetaInfoChanged);

package/lib/logger/logger.js

@@ -1,5 +1,8 @@
+import { observable } from "@lark-apaas/observable-web";
 import { interceptors } from "./selected-logs.js";
 import { interceptErrors } from "./intercept-global-error.js";
+import { mapLogLevel, processLogParams } from "../utils/safeStringify.js";
+const shouldReportToObservable = 'production' === process.env.NODE_ENV;
 const LOG_LEVELS = [
     'debug',
     'info',
@@ -45,18 +48,35 @@ let logger = {
     },
     info (message, ...args) {
         if (shouldLog('info')) console.log(...getFormattedPrefix('info'), message, ...args);
+        if (shouldReportToObservable) observable.log('INFO', processLogParams([
+            message,
+            ...args
+        ]));
     },
     warn (message, ...args) {
         if (shouldLog('warn')) console.log(...getFormattedPrefix('warn'), message, ...args);
+        if (shouldReportToObservable) observable.log('WARN', processLogParams([
+            message,
+            ...args
+        ]));
     },
     error (message, ...args) {
         if (shouldLog('error')) console.error(...getFormattedPrefix('error'), message, ...args);
+        if (shouldReportToObservable) observable.log('ERROR', processLogParams([
+            message,
+            ...args
+        ]));
     },
     success (message, ...args) {
         if (shouldLog('success')) console.log(...getFormattedPrefix('success'), message, ...args);
+        if (shouldReportToObservable) observable.log('INFO', processLogParams([
+            message,
+            ...args
+        ]));
     },
     log ({ level, args }) {
         if (shouldLog(level)) console.log(...getFormattedPrefix(level), ...args);
+        if (shouldReportToObservable && "debug" !== level) observable.log(mapLogLevel(level), processLogParams(args));
     }
 };
 if ('production' !== process.env.NODE_ENV) window.__RUNTIME_LOGGER__ = {

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

@@ -1,9 +1,15 @@
 /**
  * Server Log 模块
  *
- * 通过 HTTP 轮询方式获取服务端日志并转发给父窗口
+ * 通过 SSE (Server-Sent Events) 方式获取服务端日志并转发给父窗口
+ *
+ * 变更说明 (2026-01-04):
+ * - 从 HTTP 轮询改为 SSE，降低延迟和网络压力
+ * - ServerLogPoller 已弃用，使用 ServerLogSSEClient 替代
  */
+export { ServerLogSSEClient } from './sse-client';
+export type { ServerLogSSEClientOptions } from './sse-client';
 export { ServerLogPoller } from './poller';
 export type { ServerLogPollerOptions } from './poller';
-export type { ServerLog, ServerLogLevel, ServerLogSource, ServerLogMeta, ServerLogPostMessage, ClientToServerMessage, ServerToClientMessage, } from './types';
-export { ServerLogPoller as default } from './poller';
+export type { ServerLog, ServerLogLevel, ServerLogSource, ServerLogMeta, ServerLogPostMessage, ServerLogControlMessage, ClientToServerMessage, ServerToClientMessage, } from './types';
+export { ServerLogSSEClient as default } from './sse-client';

package/lib/server-log/index.js

@@ -1,2 +1,3 @@
+import { ServerLogSSEClient } from "./sse-client.js";
 import { ServerLogPoller } from "./poller.js";
-export { ServerLogPoller, ServerLogPoller as default };
+export { ServerLogPoller, ServerLogSSEClient, ServerLogSSEClient as default };

package/lib/server-log/sse-client.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Server Log SSE Client (SSE 版本)
+ *
+ * 职责：
+ * 1. 通过 EventSource 连接后端 SSE 端点 (/dev/logs/server-logs/stream)
+ * 2. 实时接收服务端日志
+ * 3. 将接收到的日志通过 postMessage 转发给父窗口 (miaoda)
+ * 4. 管理连接状态并通知父窗口
+ * 5. 支持通过 postMessage 从父窗口控制 (pause/resume/stop)
+ *
+ * 优势：
+ * - 相比 HTTP 轮询，延迟更低（~10ms vs 0-2000ms）
+ * - 无需持续请求，减少网络压力
+ * - EventSource 自带自动重连机制
+ * - 支持暂停/恢复，可按需关闭
+ */
+export interface ServerLogSSEClientOptions {
+    /**
+     * 后端服务器 URL
+     * @example 'http://localhost:3000'
+     */
+    serverUrl: string;
+    /**
+     * SSE 端点路径
+     * @default '/dev/logs/server-logs/stream'
+     */
+    sseEndpoint?: string;
+    /**
+     * 是否启用调试日志
+     * @default false
+     */
+    debug?: boolean;
+}
+type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
+export declare class ServerLogSSEClient {
+    private eventSource;
+    private status;
+    private isPaused;
+    private options;
+    private messageListener;
+    private reconnectCount;
+    constructor(options: ServerLogSSEClientOptions);
+    /**
+     * 启动 SSE 连接
+     */
+    start(): void;
+    /**
+     * 停止 SSE 连接
+     */
+    stop(): void;
+    /**
+     * 暂停接收日志（断开 SSE 连接）
+     */
+    pause(): void;
+    /**
+     * 恢复接收日志（重新建立 SSE 连接）
+     */
+    resume(): void;
+    /**
+     * 重新连接（用于断开后手动重连）
+     */
+    reconnect(): void;
+    /**
+     * 获取当前连接状态
+     */
+    getStatus(): ConnectionStatus;
+    /**
+     * 是否暂停中
+     */
+    getIsPaused(): boolean;
+    /**
+     * 设置 EventSource 连接
+     */
+    private setupEventSource;
+    /**
+     * 清理 EventSource
+     */
+    private cleanupEventSource;
+    /**
+     * 设置父窗口控制消息监听器
+     */
+    private setupParentMessageListener;
+    /**
+     * 清理消息监听器
+     */
+    private cleanupMessageListener;
+    /**
+     * 转发日志到父窗口
+     */
+    private forwardLog;
+    /**
+     * 更新连接状态并通知父窗口
+     */
+    private updateStatus;
+    /**
+     * 发送消息到父窗口
+     */
+    private postToParent;
+    /**
+     * 调试日志
+     */
+    private log;
+    /**
+     * 错误日志
+     */
+    private error;
+}
+export {};

package/lib/server-log/sse-client.js

@@ -0,0 +1,209 @@
+class ServerLogSSEClient {
+    eventSource = null;
+    status = 'disconnected';
+    isPaused = false;
+    options;
+    messageListener = null;
+    reconnectCount = 0;
+    constructor(options){
+        this.options = {
+            serverUrl: options.serverUrl,
+            sseEndpoint: (process.env.CLIENT_BASE_PATH || '') + (options.sseEndpoint || '/dev/logs/server-logs/stream'),
+            debug: options.debug ?? false
+        };
+    }
+    start() {
+        if (this.eventSource) return void this.log('SSE client already started');
+        this.log('Starting SSE client...', {
+            serverUrl: this.options.serverUrl,
+            sseEndpoint: this.options.sseEndpoint
+        });
+        this.updateStatus('connecting');
+        this.setupEventSource();
+        this.setupParentMessageListener();
+    }
+    stop() {
+        this.log('Stopping SSE client...');
+        this.cleanupEventSource();
+        this.cleanupMessageListener();
+        this.updateStatus('disconnected');
+    }
+    pause() {
+        if (this.isPaused) return;
+        this.isPaused = true;
+        this.cleanupEventSource();
+        this.log('Paused - SSE connection closed');
+    }
+    resume() {
+        if (!this.isPaused) return;
+        this.isPaused = false;
+        this.setupEventSource();
+        this.log('Resumed - SSE connection reopened');
+    }
+    reconnect() {
+        this.log('Reconnecting...');
+        this.cleanupEventSource();
+        this.isPaused = false;
+        this.setupEventSource();
+    }
+    getStatus() {
+        return this.status;
+    }
+    getIsPaused() {
+        return this.isPaused;
+    }
+    setupEventSource() {
+        this.reconnectCount = 0;
+        const url = `${this.options.serverUrl}${this.options.sseEndpoint}`;
+        this.log('Connecting to SSE endpoint:', url);
+        try {
+            this.eventSource = new EventSource(url);
+            this.eventSource.addEventListener('connected', (event)=>{
+                try {
+                    const data = JSON.parse(event.data);
+                    this.log('Connected to SSE server', data);
+                    this.updateStatus('connected');
+                } catch (e) {
+                    this.error('Failed to parse connected event', e);
+                }
+            });
+            this.eventSource.addEventListener('log', (event)=>{
+                if (this.isPaused) return;
+                try {
+                    const log = JSON.parse(event.data);
+                    this.forwardLog(log);
+                } catch (e) {
+                    this.error('Failed to parse log event', e);
+                }
+            });
+            this.eventSource.addEventListener('heartbeat', (event)=>{
+                try {
+                    const data = JSON.parse(event.data);
+                    this.log('Heartbeat received', data);
+                } catch (e) {}
+            });
+            this.eventSource.onmessage = (event)=>{
+                this.log('Received generic message:', event.data);
+            };
+            this.eventSource.onerror = (event)=>{
+                this.error('SSE connection error', event);
+                this.reconnectCount++;
+                if (this.reconnectCount > 1) {
+                    this.log('Max reconnect attempts reached, closing connection');
+                    this.cleanupEventSource();
+                    this.updateStatus('error');
+                    this.postToParent({
+                        type: 'SERVER_LOG_CONNECTION',
+                        status: 'error',
+                        error: 'SSE connection failed after retry'
+                    });
+                } else if (this.eventSource?.readyState === EventSource.CONNECTING) {
+                    this.log(`Reconnecting... attempt ${this.reconnectCount}`);
+                    this.updateStatus('connecting');
+                } else if (this.eventSource?.readyState === EventSource.CLOSED) {
+                    this.updateStatus('error');
+                    this.postToParent({
+                        type: 'SERVER_LOG_CONNECTION',
+                        status: 'error',
+                        error: 'SSE connection closed'
+                    });
+                }
+            };
+            this.eventSource.onopen = ()=>{
+                this.log('SSE connection opened');
+                this.reconnectCount = 0;
+            };
+        } catch (e) {
+            this.error('Failed to create EventSource', e);
+            this.updateStatus('error');
+            this.postToParent({
+                type: 'SERVER_LOG_CONNECTION',
+                status: 'error',
+                error: e instanceof Error ? e.message : String(e)
+            });
+        }
+    }
+    cleanupEventSource() {
+        if (this.eventSource) {
+            this.eventSource.close();
+            this.eventSource = null;
+        }
+    }
+    setupParentMessageListener() {
+        this.messageListener = (event)=>{
+            const data = event.data;
+            if (data?.type !== 'SERVER_LOG_CONTROL') return;
+            this.log('Received control message:', data);
+            switch(data.action){
+                case 'pause':
+                    this.pause();
+                    break;
+                case 'resume':
+                    this.resume();
+                    break;
+                case 'stop':
+                    this.stop();
+                    break;
+                case 'reconnect':
+                    this.reconnect();
+                    break;
+                default:
+                    this.log('Unknown control action:', data.action);
+            }
+        };
+        window.addEventListener('message', this.messageListener);
+    }
+    cleanupMessageListener() {
+        if (this.messageListener) {
+            window.removeEventListener('message', this.messageListener);
+            this.messageListener = null;
+        }
+    }
+    forwardLog(log) {
+        try {
+            this.log('Forwarding log to parent window', {
+                type: 'SERVER_LOG',
+                logId: log.id,
+                level: log.level,
+                tags: log.tags
+            });
+            this.postToParent({
+                type: 'SERVER_LOG',
+                payload: JSON.stringify(log)
+            });
+            this.log('Log forwarded successfully');
+        } catch (e) {
+            this.error('Failed to forward log', e);
+        }
+    }
+    updateStatus(status) {
+        const previousStatus = this.status;
+        this.status = status;
+        if (previousStatus !== status) {
+            this.log(`Status changed: ${previousStatus} → ${status}`);
+            this.postToParent({
+                type: 'SERVER_LOG_CONNECTION',
+                status
+            });
+        }
+    }
+    postToParent(message) {
+        if (window.parent === window) return;
+        try {
+            window.parent.postMessage(message, '*');
+        } catch (e) {
+            this.error('postMessage error', e);
+        }
+    }
+    log(message, data) {
+        const enableLog = 'true' === localStorage.getItem('debug_server_log_sse');
+        if (this.options.debug && enableLog) if (data) console.log(`[ServerLogSSEClient] ${message}`, data);
+        else console.log(`[ServerLogSSEClient] ${message}`);
+    }
+    error(message, error) {
+        const enableLog = 'true' === localStorage.getItem('debug_server_log_sse');
+        if (enableLog) if (error) console.error(`[ServerLogSSEClient] ${message}`, error);
+        else console.error(`[ServerLogSSEClient] ${message}`);
+    }
+}
+export { ServerLogSSEClient };

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

@@ -164,3 +164,12 @@ export type ServerLogPostMessage = {
 } | {
     type: 'SERVER_LOG_CLEARED';
 };
+/**
+ * PostMessage 控制类型（parent → iframe）
+ *
+ * 父窗口可以通过 postMessage 控制 iframe 内的 SSE 客户端
+ */
+export type ServerLogControlMessage = {
+    type: 'SERVER_LOG_CONTROL';
+    action: 'pause' | 'resume' | 'stop' | 'reconnect';
+};

package/lib/utils/axiosConfig.js

@@ -52,7 +52,7 @@ async function logResponse(ok, responseOrError) {
             logTraceID
         };
         if (stacktrace) logMeta.stacktrace = stacktrace;
-        logger.log({
+        if ('development' === process.env.NODE_ENV) logger.log({
             level: ok,
             args: [
                 parts.join(''),
@@ -131,15 +131,17 @@ function initAxiosConfig(axiosInstance) {
     if (!axiosInstance) axiosInstance = axios;
     axiosInstance.interceptors.request.use((config)=>{
         const requestUUID = crypto.randomUUID();
-        const stacktrace = getStacktrace();
-        requestStacktraceMap.set(requestUUID, stacktrace);
+        if ('production' !== process.env.NODE_ENV) {
+            const stacktrace = getStacktrace();
+            requestStacktraceMap.set(requestUUID, stacktrace);
+        }
         config._requestUUID = requestUUID;
         config._startTime = Date.now();
         const csrfToken = window.csrfToken;
         if (csrfToken) config.headers['X-Suda-Csrf-Token'] = csrfToken;
         return config;
     }, (error)=>Promise.reject(error));
-    axiosInstance.interceptors.response.use((response)=>{
+    'production' !== process.env.NODE_ENV && axiosInstance.interceptors.response.use((response)=>{
         logResponse('success', response);
         return response;
     }, (error)=>{

package/lib/utils/getAxiosForBackend.js

@@ -1,6 +1,58 @@
 import axios from "axios";
 import { initAxiosConfig } from "./axiosConfig.js";
 let axiosInstance;
+function showToast(message, duration = 3000) {
+    return new Promise((resolve)=>{
+        const toast = document.createElement('div');
+        const iconSvg = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.333a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 8 1.333ZM8 10a.667.667 0 1 0 0 1.333A.667.667 0 0 0 8 10Zm0-5.333a.667.667 0 0 0-.667.666v3.334a.667.667 0 0 0 1.334 0V5.333A.667.667 0 0 0 8 4.667Z" fill="#ff811a"/>
+    </svg>`;
+        const iconWrapper = document.createElement('span');
+        iconWrapper.innerHTML = iconSvg;
+        Object.assign(iconWrapper.style, {
+            display: 'flex',
+            alignItems: 'center',
+            marginRight: '8px',
+            flexShrink: '0'
+        });
+        const textWrapper = document.createElement('span');
+        textWrapper.textContent = message;
+        toast.appendChild(iconWrapper);
+        toast.appendChild(textWrapper);
+        Object.assign(toast.style, {
+            position: 'fixed',
+            top: '20%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            display: 'flex',
+            alignItems: 'center',
+            padding: '12px 16px',
+            backgroundColor: '#fff',
+            color: '#1f2329',
+            border: '1px solid #dee0e3',
+            borderRadius: '6px',
+            fontSize: '14px',
+            lineHeight: '1.5',
+            zIndex: '99999',
+            maxWidth: '80vw',
+            wordBreak: 'break-word',
+            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.03), 0 3px 6px rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.03)',
+            opacity: '0',
+            transition: 'opacity 0.3s ease'
+        });
+        document.body.appendChild(toast);
+        requestAnimationFrame(()=>{
+            toast.style.opacity = '1';
+        });
+        setTimeout(()=>{
+            toast.style.opacity = '0';
+            setTimeout(()=>{
+                document.body.removeChild(toast);
+                resolve();
+            }, 300);
+        }, duration);
+    });
+}
 function getAxiosForBackend() {
     if (!axiosInstance) {
         axiosInstance = axios.create({
@@ -9,7 +61,9 @@ function getAxiosForBackend() {
         axiosInstance.interceptors.response.use(null, (err)=>{
             if (err.config.meta?.autoJumpToLogin !== false) {
                 const loginUrl = err.response?.headers?.['x-login-url'];
-                if (loginUrl) window.location.href = loginUrl;
+                if (loginUrl) showToast('需要登录后才能执行操作，将自动跳转登录页', 3000).then(()=>{
+                    window.location.href = loginUrl;
+                });
             }
             return Promise.reject(err);
         });

package/lib/utils/safeStringify.d.ts

@@ -0,0 +1,4 @@
+import { LogLevel } from "../logger/log-types";
+export declare function safeStringify(obj: unknown): string;
+export declare function processLogParams(args: unknown[]): string;
+export declare function mapLogLevel(level: LogLevel): "INFO" | "WARN" | "ERROR";

package/lib/utils/safeStringify.js

@@ -0,0 +1,42 @@
+function safeStringify(obj) {
+    const seen = new Set();
+    try {
+        return JSON.stringify(obj, (key, value)=>{
+            if ('object' == typeof value && null !== value) {
+                if (seen.has(value)) return '[Circular]';
+                seen.add(value);
+            }
+            if ('bigint' == typeof value) return value.toString();
+            if (value instanceof Date) return value.toISOString();
+            if (value instanceof Map) return Object.fromEntries(value);
+            if (value instanceof Set) return Array.from(value);
+            if (void 0 === value) return 'undefined';
+            if ('symbol' == typeof value) return value.toString();
+            return value;
+        });
+    } catch  {
+        return '';
+    } finally{
+        seen.clear();
+    }
+}
+function processLogParams(args) {
+    if (1 === args.length) return safeStringify(args[0]);
+    const obj = {};
+    for(let i = 0; i < args.length; i++)obj[i.toString()] = args[i];
+    return safeStringify(obj);
+}
+function mapLogLevel(level) {
+    switch(level){
+        case "error":
+            return "ERROR";
+        case "info":
+        case "success":
+            return "INFO";
+        case "warn":
+            return "WARN";
+        default:
+            return "INFO";
+    }
+}
+export { mapLogLevel, processLogParams, safeStringify };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.0-alpha.5",
+  "version": "1.2.0-alpha.7",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -81,8 +81,9 @@
     "@ant-design/colors": "^7.2.1",
     "@ant-design/cssinjs": "^1.24.0",
     "@data-loom/js": "^0.4.3",
-    "@lark-apaas/client-capability": "0.0.1-alpha.3",
-    "@lark-apaas/miaoda-inspector": "^1.0.7",
+    "@lark-apaas/client-capability": "^0.1.0",
+    "@lark-apaas/miaoda-inspector": "^1.0.8",
+    "@lark-apaas/observable-web": "^1.0.0",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.3",