@lark-apaas/client-toolkit 0.1.0-alpha.1 → 0.2.0-alpha.user.1

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import type { IUserProfile } from '../../apis/udt-types';
 export interface UserDisplayProps {
     users: IUserProfile[];

package/lib/components/User/UserDisplay.js

@@ -1,38 +1,114 @@
-import { jsx } from "react/jsx-runtime";
-import react from "react";
-import { Popover } from "antd";
-import { UserWithAvatar } from "./UserWithAvatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { getDataloom } from "../../integrations/dataloom.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";
 const UserDisplay = ({ users, size, className, style })=>{
-    const displayUsers = react.useMemo(()=>Array.isArray(users) ? users : [
+    const normalizedUsers = useMemo(()=>Array.isArray(users) ? users : [
             users
         ].filter(Boolean), [
         users
     ]);
-    if (!displayUsers.length) return null;
+    const [resolvedUsers, setResolvedUsers] = useState(normalizedUsers);
+    const [loadingProfiles, setLoadingProfiles] = useState(false);
+    useEffect(()=>{
+        let isCancelled = false;
+        if (!normalizedUsers.length) {
+            setResolvedUsers([]);
+            setLoadingProfiles(false);
+            return ()=>{
+                isCancelled = true;
+            };
+        }
+        const usersNeedingDetails = normalizedUsers.filter((user)=>!user?.name?.trim());
+        if (!usersNeedingDetails.length) {
+            setResolvedUsers(normalizedUsers);
+            setLoadingProfiles(false);
+            return ()=>{
+                isCancelled = true;
+            };
+        }
+        const fetchProfiles = async ()=>{
+            try {
+                setLoadingProfiles(true);
+                const dataloom = await getDataloom();
+                if (!dataloom) throw new Error('dataloom client is unavailable');
+                const ids = usersNeedingDetails.map((user)=>Number(user.user_id)).filter((id)=>Number.isFinite(id));
+                if (!ids.length) {
+                    setResolvedUsers(normalizedUsers);
+                    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 fetchedMap = new Map();
+                fetchedList.forEach((profile)=>{
+                    const id = String(profile?.user_id ?? '');
+                    if (!id) return;
+                    fetchedMap.set(id, {
+                        user_id: id,
+                        name: profile?.name ?? '',
+                        avatar: profile?.avatar ?? '',
+                        email: profile?.email,
+                        status: profile?.status,
+                        ...profile
+                    });
+                });
+                const mergedUsers = normalizedUsers.map((user)=>{
+                    const id = String(user.user_id);
+                    const fetched = fetchedMap.get(id);
+                    if (!fetched) return user;
+                    return {
+                        ...fetched,
+                        ...user,
+                        name: user?.name?.trim() ? user.name : fetched.name,
+                        avatar: user.avatar || fetched.avatar,
+                        email: user.email || fetched.email,
+                        status: user.status ?? fetched.status
+                    };
+                });
+                if (!isCancelled) setResolvedUsers(mergedUsers);
+            } catch (error) {
+                console.error('Failed to resolve user profiles:', error);
+                if (!isCancelled) setResolvedUsers(normalizedUsers);
+            } finally{
+                if (!isCancelled) setLoadingProfiles(false);
+            }
+        };
+        fetchProfiles();
+        return ()=>{
+            isCancelled = true;
+        };
+    }, [
+        normalizedUsers.length
+    ]);
+    if (!resolvedUsers.length || loadingProfiles) return null;
     return /*#__PURE__*/ jsx("div", {
-        className: clsxWithTw('flex gap-1 flex-wrap', className),
+        className: clsxWithTw('flex flex-wrap gap-1', className),
         style: style,
-        children: displayUsers.map((user)=>/*#__PURE__*/ jsx(Popover, {
-                placement: "bottomLeft",
-                trigger: "click",
-                content: /*#__PURE__*/ jsx(UserProfile, {
-                    user_id: user.user_id
-                }),
-                arrow: false,
-                styles: {
-                    body: {
-                        padding: 0
-                    }
-                },
-                children: /*#__PURE__*/ jsx("div", {
-                    children: /*#__PURE__*/ jsx(UserWithAvatar, {
-                        data: user,
-                        size: size,
-                        className: "cursor-pointer hover:bg-[rgba(31,35,41,0.15)] active:bg-[rgba(31,35,41,0.2)]"
+        children: resolvedUsers.map((user)=>/*#__PURE__*/ jsxs(Popover, {
+                children: [
+                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx("div", {
+                            children: /*#__PURE__*/ jsx(UserWithAvatar, {
+                                data: user,
+                                size: size,
+                                className: "cursor-pointer hover:bg-[rgba(31,35,41,0.15)] active:bg-[rgba(31,35,41,0.2)]"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(PopoverContent, {
+                        align: "start",
+                        sideOffset: 8,
+                        className: "w-[320px] border-border/50 bg-card p-0 border-0 shadow-[0px_8px_24px_8px_rgba(31,35,41,0.04),0px_6px_12px_rgba(31,35,41,0.04),0px_4px_8px_-8px_rgba(31,35,41,0.06)]",
+                        children: /*#__PURE__*/ jsx(UserProfile, {
+                            user_id: user.user_id
+                        })
                     })
-                })
+                ]
             }, user.user_id))
     });
 };

package/lib/components/User/UserProfile/UserProfile.css

@@ -25,7 +25,7 @@
 }
 
 .user-profile-name {
-  color: #1f2937;
+  color: var(--color-card-foreground);
   margin-bottom: 0;
   font-size: 22px;
   font-weight: 600;

package/lib/components/User/UserProfile/UserProfileContainer.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import './UserProfile.css';
 export declare const UserProfileContainer: ({ children }: PropsWithChildren<any>) => React.JSX.Element;

package/lib/components/User/UserProfile/UserProfileSkeleton.d.ts

@@ -1,3 +1,2 @@
 import * as React from 'react';
-import './UserProfile.css';
 export declare function UserProfileSkeleton(): React.JSX.Element;

package/lib/components/User/UserProfile/UserProfileSkeleton.js

@@ -1,36 +1,28 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { Skeleton } from "antd";
-import "./UserProfile.css";
+import { Skeleton } from "../../ui/skeleton.js";
 function UserProfileSkeleton() {
-    return /*#__PURE__*/ jsxs("div", {
-        className: "p-5 bg-white",
-        children: [
-            /*#__PURE__*/ jsx(Skeleton, {
-                loading: true,
-                avatar: {
-                    size: 90,
-                    shape: 'circle'
-                },
-                active: true,
-                paragraph: false,
-                round: true,
-                title: false,
-                className: "mt-[68px]"
-            }),
-            /*#__PURE__*/ jsx(Skeleton, {
-                loading: true,
-                title: false,
-                paragraph: {
-                    rows: 2,
-                    width: [
-                        '120px',
-                        '180px'
+    return /*#__PURE__*/ jsx("div", {
+        className: "p-5 bg-background",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "pt-0",
+            children: [
+                /*#__PURE__*/ jsx(Skeleton, {
+                    className: "h-[90px] w-[90px] rounded-full mt-[68px]"
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "mt-[22px] flex flex-col gap-4",
+                    children: [
+                        /*#__PURE__*/ jsx(Skeleton, {
+                            className: "h-4 w-[120px] rounded-full"
+                        }),
+                        /*#__PURE__*/ jsx(Skeleton, {
+                            className: "h-4 w-[180px] rounded-full"
+                        })
                     ]
-                },
-                className: "mt-[22px] user-profile-skeleton-lines"
-            })
-        ]
+                })
+            ]
+        })
     });
 }
 export { UserProfileSkeleton };

package/lib/components/User/UserProfile/UserProfileUI.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import './UserProfile.css';
-import { User } from './type';
+import type { User } from './type';
 interface UserProfileUIProps {
     user: User;
 }

package/lib/components/User/UserProfile/UserProfileUI.js

@@ -1,107 +1,121 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { Avatar, Button, Card, Tag, Typography } from "antd";
-import "./UserProfile.css";
-import { getChatAppLink } from "./utils.js";
+import { useState } from "react";
 import { clsxWithTw } from "../../../utils/utils.js";
+import { getChatAppLink } from "./utils.js";
+import { OverflowTooltipText } from "../../ui/overflow-tooltip-text.js";
 function UserProfileUI({ user }) {
-    return /*#__PURE__*/ jsxs(Card, {
-        className: "border-0",
-        cover: /*#__PURE__*/ jsx("img", {
-            alt: "cover",
-            src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/LMfspH/ljhwZthlaukjlkulzlp/miao/default-cover.png",
-            className: "h-[136px] w-full object-cover"
-        }),
-        bodyStyle: {
-            padding: '16px'
-        },
+    const [avatarError, setAvatarError] = useState(false);
+    const canShowAvatar = Boolean(user.avatar) && !avatarError;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "overflow-hidden rounded-[8px] border-0 bg-card text-card-foreground h-full",
         children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "relative flex flex-col -mt-16 user-profile-button",
-                children: [
-                    /*#__PURE__*/ jsx(Avatar, {
-                        size: 96,
-                        src: user.avatar,
-                        className: "border-4 border-white -mx-1 user-profile-avatar"
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex gap-1 items-center user-profile-name-container",
-                        children: [
-                            /*#__PURE__*/ jsx(Typography.Title, {
-                                level: 2,
-                                ellipsis: {
-                                    rows: 1,
-                                    tooltip: user.name
-                                },
-                                className: "user-profile-name",
-                                children: user.name
-                            }),
-                            'inactive' === user.status && /*#__PURE__*/ jsx(Tag, {
-                                color: "#f50",
-                                style: {
-                                    marginRight: 0
-                                },
-                                children: "暂停使用"
-                            })
-                        ]
-                    }),
-                    user.feishu_open_id ? /*#__PURE__*/ jsx("div", {
-                        className: "w-ful mt-2",
-                        children: /*#__PURE__*/ jsx(Button, {
-                            type: "primary",
-                            icon: /*#__PURE__*/ jsx("svg", {
-                                width: "24",
-                                height: "24",
-                                viewBox: "0 0 24 24",
-                                fill: "none",
-                                xmlns: "http://www.w3.org/2000/svg",
-                                className: "w-[18px] h-[18px]",
-                                children: /*#__PURE__*/ jsx("path", {
-                                    d: "M4.44576 19.2236L3.39131 20.7324C2.86623 21.4838 3.41996 22.5 4.35448 22.5H11.7556C11.7556 22.5 11.7593 22.4996 11.7661 22.4995C11.8225 22.4984 12.094 22.4991 12.2975 22.4996L12.5 22.5C12.9236 22.5 13.3414 22.4749 13.7519 22.4261L13.7544 22.4258C18.962 21.8059 23 17.3745 23 12C23 10.567 22.5218 8.58544 22.5 8.52497C21.8654 6.76558 20.7624 5.22024 19.3364 4.03023C17.4995 2.45304 15.111 1.5 12.5 1.5C12.4676 1.5 12.4352 1.50015 12.4028 1.50044C12.3695 1.50015 12.3362 1.5 12.3028 1.5C6.33659 1.5 1.5 6.20101 1.5 12C1.5 12.197 1.50558 12.3928 1.5166 12.5871C1.65458 15.1526 2.74286 17.4735 4.44576 19.2236ZM17 10C17 10.5 16.6133 11 16 11H9.01953C8.39798 11 8 10.5 8 10C8 9.39844 8.5 9 9 9H16C16.5 9 17 9.39844 17 10ZM12.9883 13C13.6055 13 14 13.5 14 14C14 14.5 13.6055 15 13 15H9C8.5 15 8 14.6018 8 14C8 13.3982 8.5 13 9 13H12.9883Z",
-                                    fill: "#2B2F36"
-                                })
-                            }),
-                            className: "gap-1 rounded-[10px] h-[42px] w-full bg-[#F5F6F7] text-[#2B2F36] hover:bg-[rgba(31,35,41,0.08)] active:bg-[rgba(31,35,41,0.12)] border-none",
-                            href: getChatAppLink(user.feishu_open_id),
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            children: "消息"
-                        })
-                    }) : null
-                ]
+            /*#__PURE__*/ jsx("div", {
+                className: "mt-[-1px] ms-[-1px] me-[-1px]",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "h-[136px] w-full",
+                    children: /*#__PURE__*/ jsx("img", {
+                        alt: "cover",
+                        src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/LMfspH/ljhwZthlaukjlkulzlp/miao/default-cover.png",
+                        className: "h-full w-full object-cover"
+                    })
+                })
             }),
             /*#__PURE__*/ jsxs("div", {
-                className: "mt-2",
+                className: "p-4",
                 children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex py-2 gap-4",
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: "text-sm text-[#646A73] min-w-[74px]",
-                                children: "部门"
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: clsxWithTw('text-sm text-[#1F2329] flex-1 break-all', {
-                                    'text-[#8F959E]': !user.department
+                    /*#__PURE__*/ jsx("div", {
+                        className: "relative flex flex-col -mt-16 user-profile-button",
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "-mx-1 flex flex-col items-start",
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "flex items-center",
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        className: "h-24 w-24 overflow-hidden rounded-full border-4 border-white bg-muted shadow-[0px_6px_18px_6px_rgba(31,35,41,0.03),0px_3px_6px_-6px_rgba(31,35,41,0.05),0px_4px_8px_rgba(31,35,41,0.03)]",
+                                        children: canShowAvatar ? /*#__PURE__*/ jsx("img", {
+                                            src: user.avatar,
+                                            alt: user.name,
+                                            className: "h-full w-full object-cover",
+                                            onError: ()=>setAvatarError(true)
+                                        }) : null
+                                    })
                                 }),
-                                children: user.department || '--'
-                            })
-                        ]
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex w-full items-center gap-2 user-profile-name-container",
+                                    children: [
+                                        /*#__PURE__*/ jsx("h2", {
+                                            className: "min-w-0",
+                                            children: /*#__PURE__*/ jsx(OverflowTooltipText, {
+                                                text: user.name,
+                                                className: "block truncate text-[22px] font-semibold leading-[28px] text-card-foreground"
+                                            })
+                                        }),
+                                        'inactive' === user.status && /*#__PURE__*/ jsx("span", {
+                                            className: "shrink-0 inline-flex items-center rounded-sm bg-destructive px-2 py-0.5 text-xs font-medium text-white",
+                                            children: "暂停使用"
+                                        })
+                                    ]
+                                }),
+                                user.feishu_open_id ? /*#__PURE__*/ jsx("div", {
+                                    className: "w-full mt-2",
+                                    children: /*#__PURE__*/ jsxs("a", {
+                                        className: "inline-flex h-[42px] w-full items-center justify-center gap-2 rounded-[10px] border border-transparent bg-muted text-sm font-medium text-foreground transition-colors focus-visible:outline-none hover:bg-foreground/10 active:bg-foreground/15",
+                                        href: getChatAppLink(user.feishu_open_id),
+                                        target: "_blank",
+                                        rel: "noopener noreferrer",
+                                        children: [
+                                            /*#__PURE__*/ jsx("svg", {
+                                                width: "18",
+                                                height: "18",
+                                                viewBox: "0 0 24 24",
+                                                fill: "none",
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                children: /*#__PURE__*/ jsx("path", {
+                                                    d: "M4.44576 19.2236L3.39131 20.7324C2.86623 21.4838 3.41996 22.5 4.35448 22.5H11.7556C11.7556 22.5 11.7593 22.4996 11.7661 22.4995C11.8225 22.4984 12.094 22.4991 12.2975 22.4996L12.5 22.5C12.9236 22.5 13.3414 22.4749 13.7519 22.4261L13.7544 22.4258C18.962 21.8059 23 17.3745 23 12C23 10.567 22.5218 8.58544 22.5 8.52497C21.8654 6.76558 20.7624 5.22024 19.3364 4.03023C17.4995 2.45304 15.111 1.5 12.5 1.5C12.4676 1.5 12.4352 1.50015 12.4028 1.50044C12.3695 1.50015 12.3362 1.5 12.3028 1.5C6.33659 1.5 1.5 6.20101 1.5 12C1.5 12.197 1.50558 12.3928 1.5166 12.5871C1.65458 15.1526 2.74286 17.4735 4.44576 19.2236ZM17 10C17 10.5 16.6133 11 16 11H9.01953C8.39798 11 8 10.5 8 10C8 9.39844 8.5 9 9 9H16C16.5 9 17 9.39844 17 10ZM12.9883 13C13.6055 13 14 13.5 14 14C14 14.5 13.6055 15 13 15H9C8.5 15 8 14.6018 8 14C8 13.3982 8.5 13 9 13H12.9883Z",
+                                                    fill: "currentColor"
+                                                })
+                                            }),
+                                            "消息"
+                                        ]
+                                    })
+                                }) : null
+                            ]
+                        })
                     }),
                     /*#__PURE__*/ jsxs("div", {
-                        className: "flex py-2 gap-4",
+                        className: "mt-2",
                         children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: "text-sm text-[#646A73] min-w-[74px]",
-                                children: "邮箱"
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-start gap-4 py-2",
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "min-w-[74px] text-sm text-muted-foreground",
+                                        children: "部门"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: clsxWithTw('flex-1 break-all text-sm text-foreground', {
+                                            'text-muted-foreground': !user.department
+                                        }),
+                                        children: user.department || '--'
+                                    })
+                                ]
                             }),
-                            user.email ? /*#__PURE__*/ jsx("a", {
-                                href: `mailto:${user.email}`,
-                                className: "text-sm text-blue-500 flex-1 break-all",
-                                children: user.email
-                            }) : /*#__PURE__*/ jsx("span", {
-                                className: "text-sm text-[#8F959E] flex-1 break-all",
-                                children: "--"
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-start gap-4 py-2",
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "min-w-[74px] text-sm text-muted-foreground",
+                                        children: "邮箱"
+                                    }),
+                                    user.email ? /*#__PURE__*/ jsx("a", {
+                                        href: `mailto:${user.email}`,
+                                        className: "flex-1 break-all text-sm text-primary",
+                                        children: user.email
+                                    }) : /*#__PURE__*/ jsx("span", {
+                                        className: "flex-1 break-all text-sm text-muted-foreground",
+                                        children: "--"
+                                    })
+                                ]
                             })
                         ]
                     })

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { IUserProfile } from '../../apis/udt-types';
-import './UserSelect.css';
 export interface UserSelectProps {
     value?: IUserProfile | IUserProfile[];
     onChange?: (value: IUserProfile | IUserProfile[]) => void;
     defaultValue?: IUserProfile | IUserProfile[];
     mode?: 'single' | 'multiple';
     placeholder?: string;
+    fetchUsers?: (keyword: string) => Promise<IUserProfile[]>;
 }
 export declare const UserSelect: React.FC<UserSelectProps>;

package/lib/components/User/UserSelect.js

@@ -1,61 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from "react";
-import { Avatar, Select, Spin } from "antd";
-import { LoaderCircle } from "lucide-react";
-import { debounce } from "lodash";
+import { jsx } from "react/jsx-runtime";
+import react from "react";
 import { getDataloom } from "../../integrations/dataloom.js";
-import "./UserSelect.css";
-import { UserWithAvatar } from "./UserWithAvatar.js";
-const mapValueToOptions = (value)=>{
-    if (!value) return [];
-    const unifiedValue = Array.isArray(value) ? value : [
-        value
-    ];
-    return unifiedValue.map((user)=>({
-            value: user.user_id,
-            label: /*#__PURE__*/ jsx(UserWithAvatar, {
-                data: user,
-                mode: "plain",
-                className: "p-[1px] pr-0"
-            }),
-            avatar: user.avatar,
-            name: user.name,
-            rawValue: user
-        }));
-};
-const mapValueToSelectValue = (value)=>{
-    if (!value) return;
-    if (Array.isArray(value)) return value.map((user)=>({
-            value: user.user_id,
-            label: /*#__PURE__*/ jsx(UserWithAvatar, {
-                data: user,
-                mode: "plain",
-                className: "p-[1px] pr-0"
-            }),
-            avatar: user.avatar,
-            name: user.name,
-            rawValue: user
-        }));
-    return {
-        value: value.user_id,
-        label: /*#__PURE__*/ jsx(UserWithAvatar, {
-            data: value,
-            mode: "plain",
-            className: "p-[1px] pr-0"
-        }),
-        avatar: value.avatar,
-        name: value.name,
-        rawValue: value
-    };
-};
-const UserSelect = ({ mode = 'single', defaultValue, value, onChange, placeholder })=>{
-    const defaultOptions = useMemo(()=>mapValueToOptions(defaultValue), [
-        defaultValue
-    ]);
-    const [options, setOptions] = useState(defaultOptions);
-    const [fetching, setFetching] = useState(false);
-    const fetchRef = useRef(0);
-    const fetchUsers = async (search)=>{
+import { UserSelectUI } from "./UserSelectUI/index.js";
+const UserSelect = ({ mode = 'single', defaultValue, value, onChange, placeholder, fetchUsers })=>{
+    const fetchUsersImpl = react.useCallback(async (search)=>{
+        if (fetchUsers) return fetchUsers(search);
         try {
             const dataloom = await getDataloom();
             const { data } = await dataloom.service.user.search({
@@ -74,98 +23,23 @@ const UserSelect = ({ mode = 'single', defaultValue, value, onChange, placeholde
             console.error('Failed to fetch users:', error);
             return [];
         }
-    };
-    const debounceFetcher = useMemo(()=>{
-        const loadOptions = (value)=>{
-            if (!value) return;
-            fetchRef.current += 1;
-            const fetchId = fetchRef.current;
-            setOptions([]);
-            setFetching(true);
-            fetchUsers(value).then((newOptions)=>{
-                if (fetchId !== fetchRef.current) return;
-                setOptions(newOptions.map((v)=>({
-                        value: v.user_id,
-                        label: /*#__PURE__*/ jsx(UserWithAvatar, {
-                            data: v,
-                            mode: "plain",
-                            className: "p-[1px] pr-0"
-                        }),
-                        avatar: v.avatar,
-                        name: v.name,
-                        rawValue: v
-                    })));
-                setFetching(false);
-            });
-        };
-        return debounce(loadOptions, 500);
-    }, []);
-    const optionRender = (option)=>{
-        const user = option.data;
-        return /*#__PURE__*/ jsxs("div", {
-            className: "flex items-center gap-2",
-            children: [
-                /*#__PURE__*/ jsx(Avatar, {
-                    src: user.avatar,
-                    size: "small",
-                    className: "shrink-0 !border-0"
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: "text-sm",
-                    children: user.name
-                })
-            ]
-        });
-    };
+    }, [
+        fetchUsers
+    ]);
     const selectMode = 'multiple' === mode ? 'multiple' : void 0;
     return /*#__PURE__*/ jsx("div", {
         className: "user-select-container",
-        children: /*#__PURE__*/ jsx(Select, {
-            labelInValue: true,
-            showSearch: true,
-            className: "w-full",
-            maxTagCount: "responsive",
-            defaultValue: defaultOptions,
+        children: /*#__PURE__*/ jsx(UserSelectUI, {
+            defaultValue: defaultValue,
             mode: selectMode,
-            filterOption: false,
-            onSearch: debounceFetcher,
+            onSearch: fetchUsersImpl,
             allowClear: true,
             placeholder: placeholder,
-            notFoundContent: fetching ? /*#__PURE__*/ jsx("div", {
-                className: "flex items-center justify-center",
-                children: /*#__PURE__*/ jsx(Spin, {
-                    size: "small",
-                    indicator: /*#__PURE__*/ jsx(LoaderCircle, {
-                        className: "!text-[16px] animate-spin"
-                    })
-                })
-            }) : /*#__PURE__*/ jsx("span", {
-                className: "py-[1px] px-1 text-[#8F959E]",
-                children: "无结果，建议更换搜索词"
-            }),
-            optionRender: optionRender,
-            options: options,
-            dropdownStyle: {
-                boxShadow: '0px 8px 24px 8px rgba(31, 35, 41, 0.04), 0px 6px 12px 0px rgba(31, 35, 41, 0.04), 0px 4px 8px -8px rgba(31, 35, 41, 0.06)',
-                padding: '3px'
-            },
-            value: mapValueToSelectValue(value),
-            maxTagPlaceholder: (omittedValues)=>/*#__PURE__*/ jsxs("span", {
-                    className: "pl-2",
-                    children: [
-                        "+ ",
-                        omittedValues.length
-                    ]
-                }),
-            onChange: onChange ? (_, options)=>{
-                if (Array.isArray(options)) {
-                    const selectedUsers = options.map((opt)=>opt.rawValue);
-                    onChange(selectedUsers);
-                } else {
-                    const selectedUser = options?.rawValue;
-                    if (selectedUser) onChange(selectedUser);
-                }
-            } : void 0
+            value: value,
+            onChange: (value)=>{
+                if ('multiple' === selectMode) onChange?.(value ?? []);
+                else onChange?.(value);
+            }
         })
     });
 };