@lark-apaas/client-toolkit 0.1.0-alpha.1

package/lib/components/NotFoundRender/index.js

@@ -0,0 +1,59 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+import { postMessage } from "../../utils/postMessage.js";
+import { useUpdatingRef } from "../../hooks/useUpdatingRef.js";
+import { logger } from "../../logger/index.js";
+const NotFound = ()=>{
+    const location = useLocation();
+    const navigate = useNavigate();
+    const navigateRef = useUpdatingRef(navigate);
+    useEffect(()=>{
+        logger.error('404 Error: User attempted to access non-existent route:', location.pathname);
+    }, [
+        location.pathname
+    ]);
+    const onClick = ()=>{
+        if ('production' !== process.env.NODE_ENV) postMessage({
+            type: 'CreatePage',
+            data: location.pathname
+        });
+        else navigateRef.current('/');
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "min-h-screen flex flex-col items-center justify-center bg-white",
+        children: [
+            /*#__PURE__*/ jsx("img", {
+                src: 'production' !== process.env.NODE_ENV ? 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/illustration_empty_positive_create.svg' : 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/illustration_empty_negative_failure-miss.svg',
+                alt: "Empty",
+                className: "mb-3 w-[120px]"
+            }),
+            /*#__PURE__*/ jsx("p", {
+                className: "text-l/[22px] text-[14px] text-[#1F2329] font-medium",
+                children: 'production' !== process.env.NODE_ENV ? '哎呀，这个页面尚未生成' : '404'
+            }),
+            'production' !== process.env.NODE_ENV ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        className: "text-sm/[22px] text-[14px] text-[#646A73] font-normal mt-1",
+                        children: "戳下方按钮，我可以根据上下文帮你生成一个"
+                    }),
+                    /*#__PURE__*/ jsxs("button", {
+                        className: "h-[32px] text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-xs hover:bg-blue-600 active:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500 px-3 flex flex-row items-center mt-3",
+                        onClick: onClick,
+                        children: [
+                            /*#__PURE__*/ jsx("img", {
+                                src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/icon_chat-ai_outlined.svg",
+                                alt: "Icon",
+                                className: "w-[14px] h-[14px] mr-1"
+                            }),
+                            "告诉妙搭生成一个"
+                        ]
+                    })
+                ]
+            }) : null
+        ]
+    });
+};
+const NotFoundRender = NotFound;
+export { NotFoundRender as default };

package/lib/components/SidebarNav/DrawerNav.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { BaseNavProps } from '../../types';
+export default function DrawerNav({ navList, className, activeClassName, }: BaseNavProps): React.JSX.Element;

package/lib/components/SidebarNav/DrawerNav.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Drawer } from "antd";
+import { Menu } from "lucide-react";
+import { clsxWithTw } from "../../utils/utils.js";
+import { LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarLayout } from "../common/index.js";
+function DrawerNav({ navList, className, activeClassName }) {
+    const [open, setOpen] = useState(false);
+    const showDrawer = ()=>{
+        setOpen(true);
+    };
+    const onClose = ()=>{
+        setOpen(false);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsxWithTw('w-full sticky top-0 z-50 flex flex-row h-14 px-3 items-center', TopHeaderThemeClass, className),
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                type: "text",
+                onClick: showDrawer,
+                className: "md:hidden px-0 text-inherit border-0",
+                children: /*#__PURE__*/ jsx(Menu, {
+                    className: "h-6 w-6"
+                })
+            }),
+            /*#__PURE__*/ jsx(LogoInfo, {
+                className: "ml-[6px] pl-3"
+            }),
+            /*#__PURE__*/ jsxs(Drawer, {
+                placement: "left",
+                rootClassName: "miao-nav",
+                closeIcon: null,
+                classNames: {
+                    body: clsxWithTw('w-full h-full flex flex-col p-0', className),
+                    content: 'w-[320px]'
+                },
+                onClose: onClose,
+                open: open,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "w-full h-14",
+                        children: /*#__PURE__*/ jsx(LogoInfo, {
+                            className: "pl-5 pr-3 h-full flex items-center"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex-1 overflow-auto min-h-0",
+                        children: /*#__PURE__*/ jsx(NavMenu, {
+                            navList: navList,
+                            className: clsxWithTw('border-0', className),
+                            activeClassName: activeClassName,
+                            mode: "vertical",
+                            onClick: onClose
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(UserAvatarLayout, {
+                        className: "mt-2"
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { DrawerNav as default };

package/lib/components/SidebarNav/DropdownNav.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { BaseNavProps } from '../../types';
+export default function DropdownNav({ navList, className, activeClassName, }: BaseNavProps): React.JSX.Element;

package/lib/components/SidebarNav/DropdownNav.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Menu, X } from "lucide-react";
+import { clsxWithTw } from "../../utils/utils.js";
+import { DropdownThemeClass, LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarMenu } from "../common/index.js";
+function DropdownNav({ navList = [], className, activeClassName }) {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const MenuDropdownIcon = isMenuOpen ? X : Menu;
+    return /*#__PURE__*/ jsxs("header", {
+        className: clsxWithTw('w-full flex sticky top-0 z-50 h-14 px-3 gap-1.5 items-center', TopHeaderThemeClass, isMenuOpen ? 'border-transparent' : '', className),
+        children: [
+            navList.length > 0 ? /*#__PURE__*/ jsx("div", {
+                className: "md:hidden flex mr-3",
+                children: /*#__PURE__*/ jsx(MenuDropdownIcon, {
+                    className: "h-6 w-6 cursor-pointer",
+                    onClick: ()=>setIsMenuOpen(!isMenuOpen)
+                })
+            }) : null,
+            /*#__PURE__*/ jsx(LogoInfo, {
+                className: "flex-1"
+            }),
+            /*#__PURE__*/ jsx(UserAvatarMenu, {
+                className: className
+            }),
+            isMenuOpen && navList.length > 0 ? /*#__PURE__*/ jsx("div", {
+                className: clsxWithTw('overflow-y-auto max-h-[482px] px-2 pb-2 absolute top-14 left-0 right-0 shadow-lg', DropdownThemeClass, className),
+                children: /*#__PURE__*/ jsx(NavMenu, {
+                    navList: navList,
+                    className: className,
+                    activeClassName: activeClassName,
+                    onClick: (_key)=>{
+                        setIsMenuOpen(false);
+                    },
+                    mode: "vertical"
+                })
+            }) : null
+        ]
+    });
+}
+export { DropdownNav as default };

package/lib/components/SidebarNav/Sidebar.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { NavProps } from '../../types';
+export default function SidebarNav({ activeClassName, className, navList, }: NavProps): React.JSX.Element;

package/lib/components/SidebarNav/Sidebar.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { clsxWithTw } from "../../utils/utils.js";
+import { LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarLayout } from "../common/index.js";
+function SidebarNav({ activeClassName, className, navList }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: clsxWithTw('h-full overflow-y-auto scrollbar-none w-[260px] dark:border-gray-800', className),
+        children: /*#__PURE__*/ jsxs("div", {
+            className: clsxWithTw('fixed top-0 bottom-0 left-0 w-[260px] flex flex-col border-r', TopHeaderThemeClass, className),
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: "w-full px-2 pt-2 h-12 mb-3",
+                    children: /*#__PURE__*/ jsx(LogoInfo, {
+                        className: "px-2 pt-[9px] pb-[15px]"
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "flex-1 overflow-auto min-h-0",
+                    children: /*#__PURE__*/ jsx(NavMenu, {
+                        navList: navList,
+                        className: clsxWithTw('border-0', className),
+                        activeClassName: activeClassName,
+                        mode: "vertical"
+                    })
+                }),
+                /*#__PURE__*/ jsx(UserAvatarLayout, {
+                    className: "mt-2"
+                })
+            ]
+        })
+    });
+}
+export { SidebarNav as default };

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { NavProps } from '../../types';
+export declare function SideNavigation(props: NavProps): React.JSX.Element;
+export { SideNavigation as SidebarNav };
+export default SideNavigation;

package/lib/components/SidebarNav/index.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { useIsMobile } from "../../hooks/useIsMobile.js";
+import { useLocation } from "react-router-dom";
+import DrawerNav from "./DrawerNav.js";
+import Sidebar from "./Sidebar.js";
+import DropdownNav from "./DropdownNav.js";
+import { ConfigProvider } from "antd";
+import { generateDarkTheme, generateLightTheme } from "../theme/util.js";
+import { useTheme } from "../../hooks/useTheme.js";
+function SideNavigationBar({ navList = [], className, activeClassName, mobileVariant = 'normal' }) {
+    const isMobile = useIsMobile();
+    const location = useLocation();
+    useEffect(()=>{
+        window.scrollTo(0, 0);
+    }, [
+        location.pathname
+    ]);
+    if (isMobile) {
+        if ('dropdown' === mobileVariant) return /*#__PURE__*/ jsx(DropdownNav, {
+            navList: navList,
+            className: className,
+            activeClassName: activeClassName
+        });
+        return /*#__PURE__*/ jsx(DrawerNav, {
+            navList: navList,
+            className: className,
+            activeClassName: activeClassName
+        });
+    }
+    return /*#__PURE__*/ jsx(Sidebar, {
+        navList: navList,
+        className: className,
+        activeClassName: activeClassName
+    });
+}
+function SideNavigation(props) {
+    const { theme } = useTheme();
+    const { darkColorPrimary, lightColorPrimary } = props;
+    const themeToken = useMemo(()=>{
+        if ('dark' === theme && darkColorPrimary) return generateDarkTheme({
+            colorPrimary: darkColorPrimary
+        });
+        if ('light' === theme && lightColorPrimary) return generateLightTheme({
+            colorPrimary: lightColorPrimary
+        });
+        return {};
+    }, [
+        theme,
+        darkColorPrimary,
+        lightColorPrimary
+    ]);
+    return /*#__PURE__*/ jsx(ConfigProvider, {
+        theme: themeToken,
+        children: /*#__PURE__*/ jsx(SideNavigationBar, {
+            ...props
+        })
+    });
+}
+const SidebarNav = SideNavigation;
+export { SideNavigation, SideNavigation as SidebarNav, SidebarNav as default };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IUserProfile } from '../../apis/udt-types';
+export interface UserDisplayProps {
+    users: IUserProfile[];
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const UserDisplay: React.FC<UserDisplayProps>;

package/lib/components/User/UserDisplay.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import { Popover } from "antd";
+import { UserWithAvatar } from "./UserWithAvatar.js";
+import { clsxWithTw } from "../../utils/utils.js";
+import { UserProfile } from "./UserProfile/index.js";
+const UserDisplay = ({ users, size, className, style })=>{
+    const displayUsers = react.useMemo(()=>Array.isArray(users) ? users : [
+            users
+        ].filter(Boolean), [
+        users
+    ]);
+    if (!displayUsers.length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: clsxWithTw('flex gap-1 flex-wrap', 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)]"
+                    })
+                })
+            }, user.user_id))
+    });
+};
+export { UserDisplay };

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

@@ -0,0 +1,34 @@
+.user-profile-skeleton-lines .ant-skeleton-paragraph > li {
+  border-radius: 100px;
+  height: 16px;
+}
+
+.user-profile-button .ant-btn-icon {
+  height: 18px;
+}
+
+.no-scrollbar {
+  scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.user-profile-avatar {
+  box-shadow: 0 6px 18px 6px #1f232908, 0 3px 6px -6px #1f23290d, 0 4px 8px #1f232908;
+}
+
+.user-profile-name-container {
+  margin-top: 10px;
+  padding-bottom: 4px;
+}
+
+.user-profile-name {
+  color: #1f2937;
+  margin-bottom: 0;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 28px;
+}
+

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface UserProfileProps {
+    user_id: string;
+}
+export declare function UserProfile(props: UserProfileProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { UserProfileUI } from "./UserProfileUI.js";
+import { UserProfileSkeleton } from "./UserProfileSkeleton.js";
+import { getUserProfile } from "../../../utils/getUserProfile.js";
+import { INVALID_USER, formatI18nProfile } from "./utils.js";
+import { UserProfileContainer } from "./UserProfileContainer.js";
+import { logger } from "../../../logger/index.js";
+function UserProfile(props) {
+    const { user_id } = props;
+    const [user, setUser] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(()=>{
+        const fetchUser = async ()=>{
+            setLoading(true);
+            try {
+                const { data } = await getUserProfile({
+                    userID: user_id
+                });
+                if (data.userProfile) {
+                    const profile = data.userProfile;
+                    setUser(formatI18nProfile(profile));
+                } else setUser(INVALID_USER);
+            } catch (error) {
+                setUser(INVALID_USER);
+                logger.error('Failed to fetch user profile:', error);
+            } finally{
+                setLoading(false);
+            }
+        };
+        fetchUser();
+    }, [
+        user_id
+    ]);
+    return /*#__PURE__*/ jsx(UserProfileContainer, {
+        children: loading || !user ? /*#__PURE__*/ jsx(UserProfileSkeleton, {}) : /*#__PURE__*/ jsx(UserProfileUI, {
+            user: user
+        })
+    });
+}
+export { UserProfile };

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

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

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

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import "./UserProfile.css";
+const UserProfileContainer = ({ children })=>/*#__PURE__*/ jsx("div", {
+        className: "w-[320px] h-[468px] rounded-[8px] overflow-y-auto no-scrollbar",
+        children: children
+    });
+export { UserProfileContainer };

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

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

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

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Skeleton } from "antd";
+import "./UserProfile.css";
+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'
+                    ]
+                },
+                className: "mt-[22px] user-profile-skeleton-lines"
+            })
+        ]
+    });
+}
+export { UserProfileSkeleton };

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import './UserProfile.css';
+import { User } from './type';
+interface UserProfileUIProps {
+    user: User;
+}
+export declare function UserProfileUI({ user }: UserProfileUIProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,113 @@
+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 { clsxWithTw } from "../../../utils/utils.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'
+        },
+        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__*/ jsxs("div", {
+                className: "mt-2",
+                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
+                                }),
+                                children: user.department || '--'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex py-2 gap-4",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-sm text-[#646A73] min-w-[74px]",
+                                children: "邮箱"
+                            }),
+                            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: "--"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { UserProfileUI };

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

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

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

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

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

@@ -0,0 +1,8 @@
+export interface User {
+    name: string;
+    avatar: string;
+    email: string;
+    department: string;
+    feishu_open_id: string;
+    status: 'active' | 'inactive';
+}

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

@@ -0,0 +1,5 @@
+import { UserProfile } from '../../../utils/getUserProfile';
+import { User } from './type';
+export declare const formatI18nProfile: (profile: UserProfile) => User;
+export declare const getChatAppLink: (openId: string) => string;
+export declare const INVALID_USER: User;

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

@@ -0,0 +1,26 @@
+const convertI18nTextToText = (i18nText)=>{
+    if (Array.isArray(i18nText) && i18nText.length > 0) {
+        const chineseText = i18nText.find((value)=>2052 === value.language_code);
+        if (chineseText) return chineseText.text;
+        return i18nText[0].text;
+    }
+    return '';
+};
+const formatI18nProfile = (profile)=>({
+        name: convertI18nTextToText(profile.name),
+        avatar: profile.avatar || '',
+        email: profile.email || '',
+        department: convertI18nTextToText(profile.departmentName),
+        feishu_open_id: profile.feishuOpenID || '',
+        status: 1 === profile.status ? 'active' : 'inactive'
+    });
+const getChatAppLink = (openId)=>`https://applink.feishu.cn/client/chat/open?openId=${openId}`;
+const INVALID_USER = {
+    name: '无效人员',
+    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/LMfspH/ljhwZthlaukjlkulzlp/miao/no-person.svg',
+    email: '',
+    department: '',
+    feishu_open_id: '',
+    status: 'active'
+};
+export { INVALID_USER, formatI18nProfile, getChatAppLink };