@lark-apaas/miaoda-core 0.1.0-alpha.1

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 };

package/lib/components/User/UserSelect.css

@@ -0,0 +1,11 @@
+.user-select-container .ant-select-selection-item {
+  height: unset !important;
+  border-radius: 50px !important;
+  padding: 1px 8px 1px 1px !important;
+}
+
+.user-select-container .ant-select-focused .ant-select-selector {
+  box-shadow: none !important;
+  border-color: #1456f0 !important;
+}
+

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

@@ -0,0 +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;
+}
+export declare const UserSelect: React.FC<UserSelectProps>;

package/lib/components/User/UserSelect.js

@@ -0,0 +1,171 @@
+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 { dataloom } 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)=>{
+        try {
+            const { data } = await dataloom.service.user.search({
+                name: search,
+                pageSize: 20
+            });
+            if (!data || !Array.isArray(data.user_list)) return [];
+            return data.user_list.map((user)=>({
+                    avatar: user.avatar,
+                    email: user.email,
+                    name: user.name,
+                    user_id: user.user_id,
+                    status: user.status
+                }));
+        } catch (error) {
+            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
+                })
+            ]
+        });
+    };
+    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,
+            mode: selectMode,
+            filterOption: false,
+            onSearch: debounceFetcher,
+            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
+        })
+    });
+};
+export { UserSelect };

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { UserWithAvatarProps } from './type';
+export declare function UserWithAvatar({ data, size, mode, className }: UserWithAvatarProps): React.JSX.Element;

package/lib/components/User/UserWithAvatar.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Avatar, Typography } from "antd";
+import { clsxWithTw } from "../../utils/utils.js";
+const avatarSizeMap = {
+    small: 16,
+    medium: 20,
+    large: 24
+};
+const textVariantMap = {
+    small: 'text-[12px] leading-[16px]',
+    medium: 'text-[14px] leading-[20px]',
+    large: 'text-[16px] leading-[24px]'
+};
+function UserWithAvatar({ data, size = 'medium', mode = 'tag', className }) {
+    const { avatar, name } = data;
+    const displayName = name || '无效人员';
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsxWithTw('flex items-center gap-1 rounded-full', {
+            'bg-[rgba(31,35,41,0.1)]': 'tag' === mode,
+            'py-0.5 pl-0.5 pr-1.5 max-w-[148px]': 'small' === size,
+            'py-0.5 pl-0.5 pr-2 max-w-[172px]': 'medium' === size,
+            'py-1 pl-1 pr-2.5 max-w-[196px]': 'large' === size
+        }, className),
+        children: [
+            /*#__PURE__*/ jsx(Avatar, {
+                src: avatar,
+                size: avatarSizeMap[size],
+                className: "shrink-0 border-0"
+            }),
+            /*#__PURE__*/ jsx(Typography.Text, {
+                ellipsis: {
+                    tooltip: displayName
+                },
+                className: textVariantMap[size],
+                children: displayName
+            })
+        ]
+    });
+}
+export { UserWithAvatar };

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

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

package/lib/components/User/index.js

@@ -0,0 +1,5 @@
+import { UserSelect } from "./UserSelect.js";
+import { UserDisplay } from "./UserDisplay.js";
+import { UserWithAvatar } from "./UserWithAvatar.js";
+import { UserProfile } from "./UserProfile/index.js";
+export { UserDisplay, UserProfile, UserSelect, UserWithAvatar };

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

@@ -0,0 +1,13 @@
+import { IUserProfile } from '../../apis/udt-types';
+export interface UserWithAvatarProps {
+    data: IUserProfile;
+    /**
+     * @default medium
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * @default tag
+     */
+    mode?: 'tag' | 'plain';
+    className?: string;
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Welcome: React.FC;
+export default Welcome;

package/lib/components/Welcome/index.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const Welcome = ()=>/*#__PURE__*/ jsxs("div", {
+        className: "min-h-screen bg-white p-6 flex justify-center items-center",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "mr-[32px] w-[280px]",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "text-2xl font-bold mb-3",
+                        children: "欢迎使用妙搭 \uD83D\uDC4B"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "text-[#646A73] text-sm",
+                        children: "1. 随时发送消息，开始构建你的专属应用"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "text-[#646A73] text-sm",
+                        children: "2. 无需担心代码实现，妙搭帮你一一解决"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("img", {
+                className: "rounded-md",
+                width: "372",
+                height: "210",
+                src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/LMfspH/ljhwZthlaukjlkulzlp/miao/spark-welcome-img.png",
+                alt: "Welcome"
+            })
+        ]
+    });
+const components_Welcome = Welcome;
+export { components_Welcome as default };

package/lib/components/common/LogoInfo.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export default function LogoInfo({ className, logoClassName, }: {
+    className?: string;
+    logoClassName?: string;
+}): React.JSX.Element;

package/lib/components/common/LogoInfo.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Link } from "react-router-dom";
+import { useCurrentAppInfo } from "../../hooks/useCurrentAppInfo.js";
+import { clsxWithTw } from "../../utils/utils.js";
+function LogoInfo({ className, logoClassName }) {
+    const { name, avatar } = useCurrentAppInfo();
+    return /*#__PURE__*/ jsx("div", {
+        className: clsxWithTw('overflow-hidden text-ellipsis whitespace-nowrap', className),
+        children: /*#__PURE__*/ jsxs(Link, {
+            to: "/",
+            className: "text-inherit flex items-center gap-2 w-full",
+            children: [
+                avatar ? /*#__PURE__*/ jsx("img", {
+                    src: avatar,
+                    alt: name,
+                    className: clsxWithTw('h-7 w-7', logoClassName)
+                }) : null,
+                /*#__PURE__*/ jsxs("span", {
+                    className: "w-full truncate",
+                    children: [
+                        name || '新应用',
+                        " "
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { LogoInfo as default };

package/lib/components/common/NavItem.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface NavItemProps {
+    name: string;
+    to: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    children?: NavItemProps[];
+    className?: string;
+    hasBadge?: boolean;
+    direction?: 'horizontal' | 'vertical';
+    onClick?: () => void;
+    hideActive?: boolean;
+    forceActive?: boolean;
+}
+export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const MoreNavItem: React.FC<{
+    expandedNavItemsPath: string[];
+    isExpanded: boolean;
+} & Omit<NavItemProps, 'icon' | 'to'>>;