@lark-apaas/client-toolkit 1.2.10-alpha.3 → 1.2.10-alpha.31

package/lib/apis/hooks/useScrollReveal.d.ts

@@ -0,0 +1 @@
+export * from '../../hooks/useScrollReveal';

package/lib/apis/hooks/useScrollReveal.js

@@ -0,0 +1 @@
+export * from "../../hooks/useScrollReveal.js";

package/lib/apis/utils/scopedStorage.d.ts

@@ -0,0 +1 @@
+export { scopedStorage } from '../../utils/scopedStorage';

package/lib/apis/utils/scopedStorage.js

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

package/lib/components/AppContainer/api-proxy/core.js

@@ -139,7 +139,8 @@ class ApiProxy {
             ...config,
             headers: {
                 ...this.defaultConfig.headers,
-                ...config.headers
+                ...config.headers,
+                'X-Page-Route': 'undefined' != typeof window ? window.location?.pathname || '/' : '/'
             }
         };
         const requestKey = this.generateRequestKey(mergedConfig);

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

@@ -16,6 +16,7 @@ async function getRoutes() {
     return routes;
 }
 async function getSourceMap() {
+    if ('vite' === process.env.BUILD_TOOL) return '';
     let sourceMapContent = '';
     try {
         const basePath = normalizeBasePath(process.env.CLIENT_BASE_PATH);

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

@@ -16,7 +16,7 @@ async function createTracker() {
     const userIDEncrypt = userID && '0' !== userID ? encryptTea(userID) : void 0;
     const tenantIDEncrypt = tenantID && '0' !== tenantID ? encryptTea(tenantID) : void 0;
     window.collectEvent('init', {
-        app_id: 672575,
+        app_id: 788827,
         channel: 'cn',
         disable_auto_pv: false,
         enable_ab_test: false,

package/lib/components/ErrorRender/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { logger } from "../../logger/index.js";
-import { createApplyHandle, getModuleHot } from "../../utils/module-hot.js";
+import { getHmrApi } from "../../utils/hmr-api.js";
 import { submitPostMessage } from "../../utils/postMessage.js";
 const RenderError = (props)=>{
     const { error, resetErrorBoundary } = props;
@@ -27,16 +27,10 @@ const RenderError = (props)=>{
     ]);
     useEffect(()=>{
         if (!resetErrorBoundary) return;
-        const hot = getModuleHot();
-        if (hot) {
-            const handler = createApplyHandle((success)=>{
-                if (success) resetErrorBoundary();
-            });
-            hot.addStatusHandler(handler);
-            return ()=>{
-                hot.removeStatusHandler(handler);
-            };
-        }
+        const hmr = getHmrApi();
+        if (hmr) return hmr.onSuccess(()=>{
+            resetErrorBoundary();
+        });
     }, [
         resetErrorBoundary
     ]);

package/lib/components/User/UserSelect.js

@@ -67,20 +67,8 @@ const UserSelect = ({ mode = 'single', defaultValue, value, onChange, placeholde
         if (!normalizedIds.length) return void setUiValue(void 0);
         const fetchProfiles = async ()=>{
             try {
-                const ids = normalizedIds.map((id)=>Number(id)).filter((id)=>Number.isFinite(id));
-                if (!ids.length) {
-                    const profiles = normalizedIds.map((id)=>inputProfilesMap.get(id) ?? {
-                            user_id: id,
-                            name: '',
-                            avatar: '',
-                            email: '',
-                            status: 1
-                        });
-                    setUiValue('single' === mode ? profiles[0] : profiles);
-                    return;
-                }
                 const dataloom = await getDataloom();
-                const response = await dataloom.service.user.getByIds(ids);
+                const response = await dataloom.service.user.getByIds(normalizedIds);
                 const fetchedList = Array.isArray(response?.data) ? response?.data : Array.isArray(response?.data?.user_list) ? response?.data?.user_list : [];
                 const fetchedMap = new Map();
                 fetchedList.forEach((profile)=>{

package/lib/components/ui/toast.d.ts

@@ -0,0 +1,2 @@
+/** 显示 toast 提示（兼容 PC/移动端） */
+export declare function showToast(message: string, duration?: number): Promise<void>;

package/lib/components/ui/toast.js

@@ -0,0 +1,53 @@
+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: '32px',
+            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);
+    });
+}
+export { showToast };

package/lib/hooks/index.d.ts

@@ -2,3 +2,4 @@ export * from './useAppInfo';
 export * from './useCurrentUserProfile';
 export * from './useIsMobile';
 export * from './useLogout';
+export * from './useScrollReveal';

package/lib/hooks/index.js

@@ -2,3 +2,4 @@ export * from "./useAppInfo.js";
 export * from "./useCurrentUserProfile.js";
 export * from "./useIsMobile.js";
 export * from "./useLogout.js";
+export * from "./useScrollReveal.js";

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/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/runtime/index.d.ts

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

package/lib/runtime/index.js

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

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

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+export {};
+declare global {
+    interface Window {
+        __REACT_DEVTOOLS_GLOBAL_HOOK__?: any;
+    }
+}

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

@@ -0,0 +1,11 @@
+if ('undefined' != typeof window && !window.__REACT_DEVTOOLS_GLOBAL_HOOK__) 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/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,6 +234,7 @@ 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)=>{
@@ -241,8 +242,8 @@ function initAxiosConfig(axiosInstance) {
             if (error.response?.status === 403) {
                 const method = (error.config?.method || 'GET').toUpperCase();
                 const url = (error.config?.url || '').split('?')[0];
-                logger.debug({
-                    level: 'warning',
+                logger.log({
+                    level: 'warn',
                     args: [
                         `请求被拒绝(403)：${method} ${url}`,
                         {

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;

package/lib/utils/hmr-api.js

@@ -0,0 +1,36 @@
+function createWebpackHmrApi(hot) {
+    return {
+        onSuccess (callback) {
+            let lastStatus = null;
+            const handler = (status)=>{
+                if ('idle' === status && 'apply' === lastStatus) try {
+                    callback();
+                } catch (e) {
+                    console.error('[HMR] Success callback error:', e);
+                }
+                lastStatus = status;
+            };
+            hot.addStatusHandler(handler);
+            return ()=>hot.removeStatusHandler(handler);
+        },
+        onError (callback) {
+            const handler = (status)=>{
+                if ('fail' === status || 'abort' === status) try {
+                    callback(new Error(`HMR ${status}`));
+                } catch (e) {
+                    console.error('[HMR] Error callback error:', e);
+                }
+            };
+            hot.addStatusHandler(handler);
+            return ()=>hot.removeStatusHandler(handler);
+        }
+    };
+}
+function getHmrApi() {
+    if ('production' === process.env.NODE_ENV) return null;
+    if (import.meta.webpackHot) return createWebpackHmrApi(import.meta.webpackHot);
+    'undefined' != typeof module && module.hot;
+    if (window.__VITE_HMR__) return window.__VITE_HMR__;
+    return null;
+}
+export { getHmrApi };

package/lib/utils/module-hot.d.ts

@@ -15,10 +15,15 @@ export interface ModuleHotInstance {
     addStatusHandler: (handler: (status: ModuleHotType) => void) => void;
     removeStatusHandler: (handler: (status: ModuleHotType) => void) => void;
 }
+/**
+ * 获取 Webpack HMR 实例
+ * 仅支持 Webpack/Rspack 的 HMR API
+ */
 export declare function getModuleHot(): ModuleHotInstance | null;
 /**
  * 创建模块热更成功处理函数
- * 监听模块热更状态，当状态为apply时，调用回调函数并传入true
- * @param callback 热更成功回调函数，参数为是否成功
+ * 监听模块热更状态，检测 apply -> idle 转换表示热更成功
+ *
+ * @param callback 热更回调函数，参数为是否成功和当前状态
  */
 export declare function createApplyHandle(callback: (success: boolean, status: ModuleHotType) => void): (status: ModuleHotType) => void;

package/lib/utils/module-hot.js

@@ -1,66 +1,21 @@
-function createViteHmrAdapter(viteHot) {
-    const handlers = new Set();
-    const notifyHandlers = (status)=>{
-        handlers.forEach((handler)=>{
-            try {
-                handler(status);
-            } catch (e) {
-                console.error('[HMR] Status handler error:', e);
-            }
-        });
-    };
-    const beforeUpdateHandler = ()=>{
-        notifyHandlers('prepare');
-        setTimeout(()=>notifyHandlers('apply'), 0);
-    };
-    const afterUpdateHandler = ()=>{
-        notifyHandlers('idle');
-    };
-    const errorHandler = ()=>{
-        notifyHandlers('fail');
-    };
-    const beforeFullReloadHandler = ()=>{
-        notifyHandlers('check');
-    };
-    viteHot.on('vite:beforeUpdate', beforeUpdateHandler);
-    viteHot.on('vite:afterUpdate', afterUpdateHandler);
-    viteHot.on('vite:error', errorHandler);
-    viteHot.on('vite:beforeFullReload', beforeFullReloadHandler);
-    return {
-        addStatusHandler (handler) {
-            handlers.add(handler);
-        },
-        removeStatusHandler (handler) {
-            handlers.delete(handler);
-        }
-    };
-}
-let viteAdapterInstance = null;
 function getModuleHot() {
     if ('production' === process.env.NODE_ENV) return null;
-    if (import.meta.hot) {
-        if (!viteAdapterInstance) viteAdapterInstance = createViteHmrAdapter(import.meta.hot);
-        return viteAdapterInstance;
-    }
     if (import.meta.webpackHot) return import.meta.webpackHot;
     'undefined' != typeof module && module.hot;
     return null;
 }
 function createApplyHandle(callback) {
-    let hasApply = false;
+    let lastStatus = null;
     return (status)=>{
         if ('fail' === status || 'abort' === status) {
-            hasApply = false;
+            lastStatus = status;
             return callback(false, status);
         }
-        if (hasApply) {
-            if ('idle' === status) {
-                hasApply = false;
-                callback(true, status);
-            }
-            return;
+        if ('idle' === status && 'apply' === lastStatus) {
+            lastStatus = status;
+            return callback(true, status);
         }
-        hasApply = 'apply' === status;
+        lastStatus = status;
     };
 }
 export { createApplyHandle, getModuleHot };

package/lib/utils/requestManager.js

@@ -4,9 +4,7 @@ async function fetchUserProfilesByIds(ids) {
     try {
         const dataloom = await getDataloom();
         if (!dataloom) throw new Error('Dataloom client is unavailable');
-        const numericIds = ids.map(Number).filter(Number.isFinite);
-        if (0 === numericIds.length) return [];
-        const response = await dataloom.service.user.getByIds(numericIds);
+        const response = await dataloom.service.user.getByIds(ids);
         return Array.isArray(response?.data) ? response.data : response?.data?.user_list || [];
     } catch (error) {
         console.error(`Failed to fetch profiles for user IDs ${ids.join(', ')}:`, error);

package/lib/utils/scopedStorage.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 按 appId 隔离的 localStorage 封装
+ * API 与原生 localStorage 保持一致
+ */
+export declare const scopedStorage: Storage;

package/lib/utils/scopedStorage.js

@@ -0,0 +1,46 @@
+import { getAppId } from "./getAppId.js";
+function getPrefix() {
+    const appId = getAppId(window.location.pathname);
+    const namespace = appId || '__global__';
+    return `__miaoda_${namespace}__:`;
+}
+function getScopedKeys() {
+    const prefix = getPrefix();
+    const keys = [];
+    for(let i = 0; i < localStorage.length; i++){
+        const key = localStorage.key(i);
+        if (key && key.startsWith(prefix)) keys.push(key.substring(prefix.length));
+    }
+    return keys;
+}
+const scopedStorage = {
+    getItem (key) {
+        const prefixedKey = getPrefix() + key;
+        return localStorage.getItem(prefixedKey);
+    },
+    setItem (key, value) {
+        const prefixedKey = getPrefix() + key;
+        localStorage.setItem(prefixedKey, value);
+    },
+    removeItem (key) {
+        const prefixedKey = getPrefix() + key;
+        localStorage.removeItem(prefixedKey);
+    },
+    clear () {
+        const prefix = getPrefix();
+        const keysToRemove = [];
+        for(let i = 0; i < localStorage.length; i++){
+            const key = localStorage.key(i);
+            if (key && key.startsWith(prefix)) keysToRemove.push(key);
+        }
+        keysToRemove.forEach((key)=>localStorage.removeItem(key));
+    },
+    key (index) {
+        const keys = getScopedKeys();
+        return keys[index] || null;
+    },
+    get length () {
+        return getScopedKeys().length;
+    }
+};
+export { scopedStorage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.10-alpha.3",
+  "version": "1.2.10-alpha.31",
   "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.4-alpha.10",
+    "@data-loom/js": "0.4.6",
     "@lark-apaas/auth-sdk": "^0.1.0",
-    "@lark-apaas/client-capability": "^0.1.3",
-    "@lark-apaas/miaoda-inspector": "^1.0.14-alpha.4",
+    "@lark-apaas/client-capability": "^0.1.4",
+    "@lark-apaas/miaoda-inspector": "1.0.14-alpha.14",
     "@lark-apaas/observable-web": "^1.0.1",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-popover": "^1.1.15",