@lark-apaas/client-toolkit 1.1.26-alpha.3 → 1.1.27-dataloom-test.0

package/lib/components/AppContainer/safety.js

@@ -44,7 +44,7 @@ const Component = ()=>{
             /*#__PURE__*/ jsx(SheetTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ jsxs("div", {
-                    className: "fixed right-3 bottom-20 inline-flex items-center gap-x-1 border-solid border-[#ffffff1a] border px-2.5 py-1.5 bg-[#1f2329e5] backdrop-blur-[5px] shadow-[0px_6px_12px_0px_#41444a0a,0px_8px_24px_8px_#41444a0a] rounded-md text-[#ebebeb)] font-['PingFang_SC'] text-xs leading-[20px] tracking-[0px] z-[10000000]",
+                    className: "fixed right-[12px] bottom-[80px] inline-flex items-center gap-x-1 border-solid border-[#ffffff1a] border px-[10px] py-[6px] bg-[#1f2329e5] backdrop-blur-[5px] shadow-[0px_6px_12px_0px_#41444a0a,0px_8px_24px_8px_#41444a0a] rounded-md text-[#ebebeb)] font-['PingFang_SC'] text-xs leading-[20px] tracking-[0px] z-[10000000]",
                     onClick: ()=>{
                         setOpen(true);
                     },
@@ -64,10 +64,10 @@ const Component = ()=>{
                 side: "bottom",
                 className: "z-[10000001] border-none bg-transparent outline-0!",
                 children: /*#__PURE__*/ jsxs("div", {
-                    className: "flex flex-col bg-white overflow-hidden rounded-t-2xl relative",
+                    className: "flex flex-col bg-white overflow-hidden rounded-t-[16px] relative",
                     children: [
                         /*#__PURE__*/ jsx(X, {
-                            className: "absolute top-2 left-4 size-6 text-[#2B2F36]",
+                            className: "absolute top-[8px] left-[16px] size-[24px] text-[#2B2F36]",
                             onClick: ()=>setOpen(false)
                         }),
                         /*#__PURE__*/ jsx("img", {
@@ -79,7 +79,7 @@ const Component = ()=>{
                             }
                         }),
                         /*#__PURE__*/ jsxs("div", {
-                            className: "flex flex-col w-full justify-center items-end gap-y-4 border-solid border-[#ffffff0d] border px-5 pt-4 pb-12 shadow-(--shadow-2xs,0px_2px_8px_2px_var(--shadow-2xs-1-color,#1f232905),0px_2px_8px_2px_var(--shadow-2xs-1-color,#1f232905),0px_2px_4px_0px_var(--shadow-2xs-1-color,#1f232905)) rounded-t-[12px] text-[#a6a6a6] font-['PingFang_SC'] text-[12px] leading-[20px] tracking-[0px]",
+                            className: "flex flex-col w-full justify-center items-end gap-y-[16px] border-solid border-[#ffffff0d] border px-[20px] pt-[16px] pb-[48px] shadow-(--shadow-2xs,0px_2px_8px_2px_var(--shadow-2xs-1-color,#1f232905),0px_2px_8px_2px_var(--shadow-2xs-1-color,#1f232905),0px_2px_4px_0px_var(--shadow-2xs-1-color,#1f232905)) rounded-t-[12px] text-[#a6a6a6] font-['PingFang_SC'] text-[12px] leading-[20px] tracking-[0px]",
                             children: [
                                 /*#__PURE__*/ jsxs("div", {
                                     className: "self-stretch shrink-0 flex flex-col items-start gap-y-[4px]",
@@ -89,7 +89,7 @@ const Component = ()=>{
                                             children: [
                                                 /*#__PURE__*/ jsx("img", {
                                                     src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/LMfspH/ljhwZthlaukjlkulzlp/icon/icon_company_outlined.svg",
-                                                    className: "shrink-0 w-3.5 h-3.5"
+                                                    className: "shrink-0 w-[14px] h-[14px]"
                                                 }),
                                                 /*#__PURE__*/ jsxs("p", {
                                                     className: "shrink-0 min-w-[96px] m-0! text-[#646A73] text-sm",
@@ -105,7 +105,7 @@ const Component = ()=>{
                                             children: [
                                                 /*#__PURE__*/ jsx("img", {
                                                     src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/LMfspH/ljhwZthlaukjlkulzlp/icon/icon_efficiency-ai_outlined.svg",
-                                                    className: "shrink-0 w-3.5 h-3.5"
+                                                    className: "shrink-0 w-[14px] h-[14px]"
                                                 }),
                                                 /*#__PURE__*/ jsx("p", {
                                                     className: "shrink-0 min-w-[163px] m-0! text-[#646A73] text-sm",
@@ -116,10 +116,10 @@ const Component = ()=>{
                                     ]
                                 }),
                                 /*#__PURE__*/ jsxs("div", {
-                                    className: "self-stretch shrink-0 flex items-start gap-x-4",
+                                    className: "self-stretch shrink-0 flex items-start gap-x-[16px]",
                                     children: [
                                         /*#__PURE__*/ jsx("div", {
-                                            className: "flex-1 flex rounded-[99px] items-center justify-center border-[0.5px] border-[#D0D3D6] bg-white text-[#1F2329] cursor-pointer text-lg py-3",
+                                            className: "flex-1 flex rounded-[99px] items-center justify-center border-[0.5px] border-[#D0D3D6] bg-white text-[#1F2329] cursor-pointer text-lg py-[12px]",
                                             onClick: (e)=>{
                                                 e.stopPropagation();
                                                 e.preventDefault();
@@ -130,7 +130,7 @@ const Component = ()=>{
                                             children: "不再展示"
                                         }),
                                         /*#__PURE__*/ jsx("div", {
-                                            className: "flex-1 flex rounded-[99px] items-center justify-center border-[0.5px] border-black bg-black text-white cursor-pointer text-lg py-3",
+                                            className: "flex-1 flex rounded-[99px] items-center justify-center border-[0.5px] border-black bg-black text-white cursor-pointer text-lg py-[12px]",
                                             onClick: ()=>{
                                                 window.open('https://miaoda.feishu.cn/landing', '_blank');
                                             },
@@ -152,7 +152,7 @@ const Component = ()=>{
             /*#__PURE__*/ jsx(PopoverTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ jsxs("div", {
-                    className: "fixed right-3 bottom-3 inline-flex items-center gap-x-1 border-solid border-[#ffffff1a] border px-2.5 py-1.5 bg-[#1f2329e5] backdrop-blur-[5px] shadow-[0px_6px_12px_0px_#41444a0a,0px_8px_24px_8px_#41444a0a] rounded-[6px] text-[#ebebeb)] font-['PingFang_SC'] text-xs leading-[20px] tracking-[0px] z-[10000000] cursor-pointer",
+                    className: "fixed right-[12px] bottom-[12px] inline-flex items-center gap-x-1 border-solid border-[#ffffff1a] border px-[10px] py-[6px] bg-[#1f2329e5] backdrop-blur-[5px] shadow-[0px_6px_12px_0px_#41444a0a,0px_8px_24px_8px_#41444a0a] rounded-[6px] text-[#ebebeb)] font-['PingFang_SC'] text-xs leading-[20px] tracking-[0px] z-[10000000] cursor-pointer",
                     onMouseEnter: ()=>{
                         clearTimeout(timeoutRef.current);
                         setOpen(true);
@@ -173,7 +173,7 @@ const Component = ()=>{
                 })
             }),
             /*#__PURE__*/ jsx(PopoverContent, {
-                className: "overflow-hidden p-0 m-0 border-0 rounded-[12px]!",
+                className: "overflow-hidden p-0 m-0 border-0 rounded-[12px]! w-[286px]",
                 style: {
                     boxShadow: '0 6px 12px 0 #41444a0a, 0 8px 24px 0 #41444a0a'
                 },
@@ -188,18 +188,18 @@ const Component = ()=>{
                     timeoutRef.current = setTimeout(()=>setOpen(false), 100);
                 },
                 children: /*#__PURE__*/ jsxs("div", {
-                    className: "flex flex-col bg-[#1F2021]",
+                    className: "flex flex-col bg-[#1A1A1A]",
                     children: [
                         /*#__PURE__*/ jsx("img", {
                             src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/LMfspH/ljhwZthlaukjlkulzlp/logo/miaodacover.png",
                             alt: "",
-                            className: "w-72 h-32 cursor-pointer",
+                            className: "w-[286px] h-[128px] cursor-pointer",
                             onClick: ()=>{
                                 window.open('https://miaoda.feishu.cn/landing', '_blank');
                             }
                         }),
                         /*#__PURE__*/ jsxs("div", {
-                            className: "flex flex-col justify-center items-end gap-y-[12px] border-solid border-[#ffffff0d] border pl-[14px] pr-[15px] pt-[11px] pb-[15px] w-[286px] shadow-(--shadow-2xs,0px_2px_8px_2px_var(--shadow-2xs-1-color,#1f232905),0px_2px_8px_2px_var(--shadow-2xs-1-color,#1f232905),0px_2px_4px_0px_var(--shadow-2xs-1-color,#1f232905)) rounded-t-[12px] text-[#a6a6a6] font-['PingFang_SC'] text-[12px] leading-[20px] tracking-[0px]",
+                            className: "flex flex-col justify-center items-end gap-y-[12px] border-solid border-[#ffffff0d] border pl-[14px] pr-[15px] pt-[11px] pb-[15px] w-[286px] shadow-(--shadow-2xs,0px_2px_8px_2px_var(--shadow-2xs-1-color,#1f232905),0px_2px_8px_2px_var(--shadow-2xs-1-color,#1f232905),0px_2px_4px_0px_var(--shadow-2xs-1-color,#1f232905)) rounded-t-[12px] text-[#a6a6a6] font-['PingFang_SC'] text-[12px] leading-[20px] tracking-[0px] bg-[#1f2021]",
                             children: [
                                 /*#__PURE__*/ jsxs("div", {
                                     className: "self-stretch shrink-0 flex flex-col items-start gap-y-[4px]",
@@ -236,10 +236,10 @@ const Component = ()=>{
                                     ]
                                 }),
                                 /*#__PURE__*/ jsxs("div", {
-                                    className: "self-stretch shrink-0 flex items-start gap-x-[8px]",
+                                    className: "w-full self-stretch shrink-0 flex items-start gap-x-[8px]",
                                     children: [
                                         /*#__PURE__*/ jsx("div", {
-                                            className: "flex-1 flex rounded-lg h-[34px] items-center justify-center border-[0.5px] bg-transparent border-solid hover:bg-[#ffffff08] text-[#ebebeb99] hover:text-[#ebebebe6] cursor-pointer border-[#ffffff1c]",
+                                            className: "flex-1 flex rounded-lg items-center justify-center h-[34px] border-[0.5px] border-solid border-[#ffffff1c] hover:border-[#ffffff33] bg-[#ffffff08] hover:bg-[#ffffff14] cursor-pointer text-[#ebebeb]",
                                             "data-custom-element": "safety-close",
                                             onClick: (e)=>{
                                                 e.stopPropagation();

package/lib/components/User/UserDisplay.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { IUserProfile } from '../../apis/udt-types';
-export interface UserDisplayProps {
+export interface IUserDisplayProps {
     /**
      * 支持传入完整的用户资料（IUserProfile）/ 列表（IUserProfile[]）
      * 或仅传入用户 ID（string）/ 列表（string[]）。
@@ -11,5 +11,6 @@ export interface UserDisplayProps {
     className?: string;
     style?: React.CSSProperties;
     showLabel?: boolean;
+    showUserProfile?: boolean;
 }
-export declare const UserDisplay: React.FC<UserDisplayProps>;
+export declare const UserDisplay: React.FC<IUserDisplayProps>;

package/lib/components/User/UserDisplay.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { getDataloom } from "../../integrations/dataloom.js";
+import { getCachedUserProfiles, setCachedUserProfiles } from "../../utils/userProfileCache.js";
 import { clsxWithTw } from "../../utils/utils.js";
 import { UserProfile } from "./UserProfile/index.js";
 import { UserWithAvatar } from "./UserWithAvatar.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { fetchWithDeduplication } from "../../utils/requestManager.js";
 const UserDisplay = ({ users, size, className, style, showLabel = true })=>{
     const normalizedIds = useMemo(()=>{
         if (!users) return [];
@@ -71,22 +72,20 @@ const UserDisplay = ({ users, size, className, style, showLabel = true })=>{
         const fetchProfiles = async ()=>{
             try {
                 setLoadingProfiles(true);
-                const dataloom = await getDataloom();
-                if (!dataloom) throw new Error('dataloom client is unavailable');
-                const ids = normalizedIds.map((id)=>Number(id)).filter((id)=>Number.isFinite(id));
-                if (!ids.length) {
-                    setResolvedUsers(normalizedIds.map((id)=>inputProfilesMap.get(id) ?? {
-                            user_id: id,
-                            name: '',
-                            avatar: '',
-                            email: '',
-                            status: 1
-                        }));
-                    setLoadingProfiles(false);
-                    return;
-                }
-                const response = await dataloom.service.user.getByIds(ids);
-                const fetchedList = Array.isArray(response?.data) ? response?.data : Array.isArray(response?.data?.user_list) ? response?.data?.user_list : [];
+                const { cachedProfiles, remainingIds } = getCachedUserProfiles(normalizedIds);
+                if (cachedProfiles.length > 0) setResolvedUsers((prev)=>{
+                    const updatedUsers = [
+                        ...prev
+                    ];
+                    cachedProfiles.forEach((cached)=>{
+                        const index = updatedUsers.findIndex((u)=>u.user_id === cached.user_id);
+                        if (-1 !== index) updatedUsers[index] = cached;
+                    });
+                    return updatedUsers;
+                });
+                if (0 === remainingIds.length) return void setLoadingProfiles(false);
+                const fetchedList = await fetchWithDeduplication(remainingIds);
+                if (isCancelled || !fetchedList) return;
                 const fetchedMap = new Map();
                 fetchedList.forEach((profile)=>{
                     const id = String(profile?.user_id ?? '');
@@ -99,13 +98,15 @@ const UserDisplay = ({ users, size, className, style, showLabel = true })=>{
                         status: profile?.status ?? 1
                     });
                 });
+                setCachedUserProfiles(fetchedList);
                 const mergedUsers = normalizedIds.map((id)=>{
                     const fetched = fetchedMap.get(id);
                     const given = inputProfilesMap.get(id);
-                    const name = given?.name?.trim() ? given.name : fetched?.name ?? '';
-                    const avatar = given?.avatar || fetched?.avatar || '';
-                    const email = given?.email || fetched?.email || '';
-                    const status = given?.status ?? fetched?.status ?? 1;
+                    const cached = cachedProfiles.find((p)=>p.user_id === id);
+                    const name = given?.name?.trim() || fetched?.name || cached?.name || '';
+                    const avatar = given?.avatar || fetched?.avatar || cached?.avatar || '';
+                    const email = given?.email || fetched?.email || cached?.email || '';
+                    const status = given?.status ?? fetched?.status ?? cached?.status ?? 1;
                     return {
                         user_id: id,
                         name,

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

@@ -1,7 +1,7 @@
 export { UserSelect } from './UserSelect';
 export type { UserSelectProps } from './UserSelect';
 export { UserDisplay } from './UserDisplay';
-export type { UserDisplayProps } from './UserDisplay';
+export type { IUserDisplayProps as UserDisplayProps } from './UserDisplay';
 export { UserWithAvatar } from './UserWithAvatar';
 export type { UserWithAvatarProps } from './type';
 export { UserProfile } from './UserProfile';

package/lib/utils/requestManager.d.ts

@@ -0,0 +1,2 @@
+import type { IUserProfile } from '../apis/udt-types';
+export declare function fetchWithDeduplication(ids: string[]): Promise<IUserProfile[] | null>;

package/lib/utils/requestManager.js

@@ -0,0 +1,26 @@
+import { getDataloom } from "../integrations/dataloom.js";
+const pendingRequests = new Map();
+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);
+        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);
+        return null;
+    }
+}
+function fetchWithDeduplication(ids) {
+    const key = ids.sort().join(',');
+    if (pendingRequests.has(key)) return pendingRequests.get(key);
+    const fetchPromise = fetchUserProfilesByIds(ids);
+    pendingRequests.set(key, fetchPromise);
+    fetchPromise.finally(()=>{
+        pendingRequests.delete(key);
+    });
+    return fetchPromise;
+}
+export { fetchWithDeduplication };

package/lib/utils/userProfileCache.d.ts

@@ -0,0 +1,12 @@
+import type { IUserProfile } from '../apis/udt-types';
+export interface ICachedUserProfile {
+    profile: IUserProfile;
+    timestamp: number;
+}
+export declare const cache: Map<string, ICachedUserProfile>;
+export declare const cacheExpiry: number;
+export declare function setCachedUserProfiles(profiles: IUserProfile[]): void;
+export declare function getCachedUserProfiles(ids: string[]): {
+    cachedProfiles: IUserProfile[];
+    remainingIds: string[];
+};

package/lib/utils/userProfileCache.js

@@ -0,0 +1,26 @@
+const cache = new Map();
+const cacheExpiry = 1 / 0;
+function setCachedUserProfiles(profiles) {
+    const now = Date.now();
+    profiles.forEach((profile)=>{
+        if (profile && profile.user_id) cache.set(String(profile.user_id), {
+            profile,
+            timestamp: now
+        });
+    });
+}
+function getCachedUserProfiles(ids) {
+    const cachedProfiles = [];
+    const remainingIds = [];
+    const now = Date.now();
+    ids.forEach((id)=>{
+        const cachedItem = cache.get(id);
+        if (cachedItem && now - cachedItem.timestamp < cacheExpiry) cachedProfiles.push(cachedItem.profile);
+        else remainingIds.push(id);
+    });
+    return {
+        cachedProfiles,
+        remainingIds
+    };
+}
+export { cache, cacheExpiry, getCachedUserProfiles, setCachedUserProfiles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.1.26-alpha.3",
+  "version": "1.1.27-dataloom-test.0",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -80,7 +80,7 @@
   "dependencies": {
     "@ant-design/colors": "^7.2.1",
     "@ant-design/cssinjs": "^1.24.0",
-    "@data-loom/js": "^0.4.0",
+    "@data-loom/js": "0.4.3-alpha.1",
     "@lark-apaas/miaoda-inspector": "^1.0.5",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-popover": "^1.1.15",