@lark-apaas/client-toolkit 1.2.0-alpha.4 → 1.2.0-alpha.6

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

@@ -17,8 +17,10 @@ import safety from "./safety.js";
 import { getAppId } from "../../utils/getAppId.js";
 import { ServerLogPoller } 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 {

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/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.4",
+  "version": "1.2.0-alpha.6",
   "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.2",
-    "@lark-apaas/miaoda-inspector": "^1.0.7",
+    "@lark-apaas/client-capability": "0.0.1-alpha.3",
+    "@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",