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

package/lib/components/common/NavItem.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
+import { NavLink, matchPath, useLocation } from "react-router-dom";
+import { Button } from "antd";
+import { clsxWithTw } from "../../utils/utils.js";
+import { MoreHorizontal } from "lucide-react";
+const HashLink = /*#__PURE__*/ forwardRef(({ className, to, name, icon, onClick, direction, hideActive = false }, _ref)=>{
+    const [isActive, setIsActive] = useState(false);
+    useEffect(()=>{
+        const checkHash = ()=>{
+            setIsActive(window.location.hash === to);
+        };
+        checkHash();
+        window.addEventListener('hashchange', checkHash);
+        return ()=>window.removeEventListener('hashchange', checkHash);
+    }, [
+        to
+    ]);
+    const iconNode = icon ? /*#__PURE__*/ react.createElement(icon, {
+        className: 'w-6 h-6'
+    }) : null;
+    return /*#__PURE__*/ jsxs(Button, {
+        variant: "link",
+        href: to,
+        onClick: ()=>{
+            setIsActive(true);
+            onClick?.();
+        },
+        color: isActive && !hideActive ? 'primary' : 'default',
+        className: clsxWithTw('miao-nav p-0 b-0 h-full w-full', 'transition-colors inline-flex gap-1 items-center overflow-hidden', {
+            'flex-col': 'vertical' === direction,
+            'w-full': 'vertical' === direction,
+            'justify-center': 'horizontal' === direction,
+            'text-inherit': !isActive
+        }, className),
+        children: [
+            iconNode,
+            name ? /*#__PURE__*/ jsx("span", {
+                className: clsxWithTw('truncate w-full', {
+                    'text-center': 'vertical' === direction
+                }),
+                children: name
+            }) : null
+        ]
+    });
+});
+HashLink.displayName = 'HashLink';
+const NavItem = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const isHashLink = props.to.startsWith('#');
+    if (isHashLink) return /*#__PURE__*/ jsx(HashLink, {
+        ref: ref,
+        ...props
+    });
+    return /*#__PURE__*/ jsx(NavLink, {
+        ref: ref,
+        to: props.to,
+        end: true,
+        onClick: props.onClick,
+        className: ()=>clsxWithTw('inline-flex justify-center'),
+        children: ({ isActive: linkIsActive })=>/*#__PURE__*/ jsxs(Button, {
+                variant: "link",
+                color: linkIsActive && !props.hideActive || props.forceActive ? 'primary' : 'default',
+                className: clsxWithTw('miao-nav p-0 b-0 h-full w-full', 'transition-colors inline-flex gap-1 items-center overflow-hidden', {
+                    'flex-col': 'vertical' === props.direction,
+                    'justify-center': 'horizontal' === props.direction,
+                    'text-inherit': !(linkIsActive && !props.hideActive || props.forceActive)
+                }, props.className),
+                children: [
+                    props.icon ? /*#__PURE__*/ jsx(props.icon, {
+                        className: "w-6 h-6"
+                    }) : null,
+                    props.name ? /*#__PURE__*/ jsx("span", {
+                        className: clsxWithTw('truncate w-full', {
+                            ' text-center': 'vertical' === props.direction
+                        }),
+                        children: props.name
+                    }) : null
+                ]
+            })
+    });
+});
+NavItem.displayName = 'NavItem';
+const MoreNavItem = ({ expandedNavItemsPath, onClick, isExpanded, name = '更多', ...restProps })=>{
+    const { pathname } = useLocation();
+    const isActive = useMemo(()=>{
+        const matched = expandedNavItemsPath.some((path)=>{
+            const match = matchPath(path, pathname);
+            return match && match.pathname === pathname;
+        });
+        return matched;
+    }, [
+        expandedNavItemsPath,
+        pathname
+    ]);
+    const handleClick = useCallback((e)=>{
+        e.preventDefault();
+        onClick?.();
+    }, [
+        onClick
+    ]);
+    return /*#__PURE__*/ jsx(NavItem, {
+        icon: MoreHorizontal,
+        name: name,
+        to: "",
+        hideActive: !isActive,
+        forceActive: isExpanded || isActive,
+        onClick: handleClick,
+        ...restProps
+    });
+};
+MoreNavItem.displayName = 'MoreNavItem';
+export { MoreNavItem, NavItem };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseNavProps } from '../../types';
+type NavMenuProps = BaseNavProps & {
+    mode?: 'horizontal' | 'vertical';
+    iconClassName?: string;
+    onClick?: (key: string) => void;
+};
+export default function NavMenu({ navList, className, iconClassName, mode, onClick, }: NavMenuProps): React.JSX.Element;
+export {};

package/lib/components/common/NavMenu.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "antd";
+import react, { useEffect, useMemo, useState } from "react";
+import { NavLink, useLocation } from "react-router-dom";
+import { clsxWithTw } from "../../utils/utils.js";
+function NavMenu({ navList, className, iconClassName = '', mode = 'horizontal', onClick }) {
+    const location = useLocation();
+    const [currentMenu, setCurrentMenu] = useState(location.pathname);
+    useEffect(()=>{
+        setCurrentMenu(location.pathname);
+    }, [
+        location
+    ]);
+    const menuItems = useMemo(()=>navList?.map((n)=>({
+                label: /*#__PURE__*/ jsxs(NavLink, {
+                    to: n.to,
+                    end: true,
+                    className: ({ isActive })=>clsxWithTw('flex items-center', {
+                            'text-[var(--ant-menu-horizontal-item-selected-color)]': isActive
+                        }),
+                    children: [
+                        n.icon ? /*#__PURE__*/ react.createElement(n.icon, {
+                            className: clsxWithTw('w-4 h-4', iconClassName)
+                        }) : null,
+                        /*#__PURE__*/ jsx("span", {
+                            children: n.name
+                        })
+                    ]
+                }),
+                key: n.to
+            })), [
+        navList
+    ]);
+    return /*#__PURE__*/ jsx(Menu, {
+        className: clsxWithTw('bg-inherit h-full', className),
+        items: menuItems,
+        selectedKeys: [
+            currentMenu
+        ],
+        onClick: (info)=>{
+            setCurrentMenu(info.key);
+            onClick?.(info.key);
+        },
+        mode: mode,
+        style: {
+            borderBottomWidth: 0
+        }
+    });
+}
+export { NavMenu as default };

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

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

package/lib/components/common/UserAvatarLayout.js

@@ -0,0 +1,41 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Button } from "antd";
+import { LogOut } from "lucide-react";
+import { useCurrentUserProfile, useLogout } from "../../hooks/index.js";
+import { clsxWithTw } from "../../utils/utils.js";
+function UserAvatarLayout({ className }) {
+    const { name, avatar } = useCurrentUserProfile();
+    const { handlerLogout } = useLogout();
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: name ? /*#__PURE__*/ jsx("div", {
+            className: clsxWithTw('py-4 px-5 border-gray-200 border-t', className),
+            children: /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap",
+                        children: [
+                            avatar ? /*#__PURE__*/ jsx("img", {
+                                src: avatar,
+                                alt: name,
+                                className: "h-8 w-8 rounded-full"
+                            }) : null,
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-sm font-medium truncate",
+                                children: name
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        type: "text",
+                        className: "text-inherit",
+                        icon: /*#__PURE__*/ jsx(LogOut, {}),
+                        onClick: handlerLogout
+                    })
+                ]
+            })
+        }) : null
+    });
+}
+export { UserAvatarLayout as default };

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

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

package/lib/components/common/UserAvatarMenu.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Avatar, Dropdown, Menu } from "antd";
+import { LogOut } from "lucide-react";
+import { useCurrentUserProfile, useLogout } from "../../hooks/index.js";
+import { clsxWithTw } from "../../utils/utils.js";
+function UserAvatarMenu({ className }) {
+    const { name, avatar } = useCurrentUserProfile();
+    const { handlerLogout } = useLogout();
+    if (!name) return null;
+    return /*#__PURE__*/ jsx(Dropdown, {
+        placement: "bottomRight",
+        overlay: /*#__PURE__*/ jsxs(Menu, {
+            className: clsxWithTw('min-w-48', className),
+            children: [
+                /*#__PURE__*/ jsx(Menu.Item, {
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Avatar, {
+                                src: avatar,
+                                className: "w-10 h-10"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "flex-1 text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]",
+                                children: name
+                            })
+                        ]
+                    })
+                }, "user-info"),
+                /*#__PURE__*/ jsx(Menu.Divider, {}),
+                /*#__PURE__*/ jsx(Menu.Item, {
+                    onClick: handlerLogout,
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(LogOut, {}),
+                            /*#__PURE__*/ jsx("span", {
+                                children: "退出登录"
+                            })
+                        ]
+                    })
+                }, "logout")
+            ]
+        }),
+        trigger: [
+            'click'
+        ],
+        children: /*#__PURE__*/ jsx("div", {
+            className: "cursor-pointer py-3 flex items-center justify-center",
+            children: /*#__PURE__*/ jsx(Avatar, {
+                src: avatar,
+                className: "w-8 h-8"
+            })
+        })
+    });
+}
+export { UserAvatarMenu as default };

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

@@ -0,0 +1,9 @@
+export { default as UserAvatarMenu } from './UserAvatarMenu';
+export { default as UserAvatarLayout } from './UserAvatarLayout';
+export { default as NavMenu } from './NavMenu';
+export { default as LogoInfo } from './LogoInfo';
+export * from './NavItem';
+export declare const TopHeaderThemeClass = "bg-white text-gray-900 border-gray-200 dark:bg-neutral-50 dark:text-white dark:border-gray-700 border-b";
+export declare const DropdownThemeClass = "bg-white text-gray-900 border-gray-200 dark:bg-neutral-50 dark:text-white dark:border-gray-700 border-b";
+export declare const BottomBarThemeClass = "bg-white dark:bg-gray-800 text-[#646A73] dark:text-gray-300";
+export declare const MaskThemeClass = "bg-black/55";

package/lib/components/common/index.js

@@ -0,0 +1,10 @@
+import UserAvatarMenu from "./UserAvatarMenu.js";
+import UserAvatarLayout from "./UserAvatarLayout.js";
+import NavMenu from "./NavMenu.js";
+import LogoInfo from "./LogoInfo.js";
+export * from "./NavItem.js";
+const TopHeaderThemeClass = 'bg-white text-gray-900 border-gray-200 dark:bg-neutral-50 dark:text-white dark:border-gray-700 border-b';
+const DropdownThemeClass = TopHeaderThemeClass;
+const BottomBarThemeClass = 'bg-white dark:bg-gray-800 text-[#646A73] dark:text-gray-300';
+const MaskThemeClass = 'bg-black/55';
+export { BottomBarThemeClass, DropdownThemeClass, LogoInfo, MaskThemeClass, NavMenu, TopHeaderThemeClass, UserAvatarLayout, UserAvatarMenu };

package/lib/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from './SidebarNav';
+export * from './User';
+export * from './TopNav';
+export * from './SidebarNav';
+export * from './User';
+export * from './theme';
+export * from './AppContainer';
+export * from './ErrorRender';
+export * from './NotFoundRender';

package/lib/components/index.js

@@ -0,0 +1,7 @@
+export * from "./SidebarNav/index.js";
+export * from "./User/index.js";
+export * from "./TopNav/index.js";
+export * from "./theme/index.js";
+export * from "./AppContainer/index.js";
+export * from "./ErrorRender/index.js";
+export * from "./NotFoundRender/index.js";

package/lib/components/theme/ThemeProvider.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import type { ITheme } from '../../types';
+import { IThemeMeta } from './util';
+export interface IBaseThemeProviderProps {
+    defaultTheme?: ITheme;
+    themeMeta?: Partial<IThemeMeta>;
+}
+interface ThemeProviderProps extends IBaseThemeProviderProps {
+    children: ReactNode;
+    /** 是否启用系统主题自动切换 */
+    enableSystemTheme?: boolean;
+}
+type ThemeProviderState = {
+    theme: ITheme;
+    setTheme: (theme: ITheme) => void;
+};
+export declare const ThemeProviderContext: React.Context<ThemeProviderState>;
+export declare function ThemeProvider({ children, defaultTheme, themeMeta, enableSystemTheme, ...props }: ThemeProviderProps): React.JSX.Element;
+export {};

package/lib/components/theme/ThemeProvider.js

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useMemo, useState } from "react";
+import { ConfigProvider } from "antd";
+import { generateDarkTheme, generateLightTheme } from "./util.js";
+import { findValueByPixel, themeMetaOptions } from "./constants.js";
+const initialState = {
+    theme: 'system',
+    setTheme: ()=>null
+};
+const ThemeProviderContext = /*#__PURE__*/ createContext(initialState);
+const themeKey = 'miao-ui-theme';
+function ThemeProvider({ children, defaultTheme = 'light', themeMeta = {}, enableSystemTheme = false, ...props }) {
+    const [theme, setTheme] = useState(()=>localStorage.getItem(themeKey) || defaultTheme);
+    useEffect(()=>{
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+        root.classList.add(theme);
+    }, [
+        theme,
+        enableSystemTheme
+    ]);
+    useEffect(()=>{
+        const root = window.document.documentElement;
+        if (void 0 !== themeMeta.spacing) {
+            const { rem } = findValueByPixel(`${themeMeta.spacing}`, themeMetaOptions.themeSpaces) || {
+                rem: '0.25'
+            };
+            root.style.setProperty('--spacing', `${rem}rem`);
+        }
+        if (void 0 !== themeMeta.borderRadius) {
+            const { rem } = findValueByPixel(`${themeMeta.borderRadius}`, themeMetaOptions.themeRadius) || {
+                rem: '0.625'
+            };
+            root.style.setProperty('--radius', `${rem}rem`);
+        }
+    }, [
+        themeMeta
+    ]);
+    const value = {
+        theme,
+        setTheme: (theme)=>{
+            localStorage.setItem(themeKey, theme);
+            setTheme(theme);
+        }
+    };
+    const antdTheme = useMemo(()=>{
+        const res = findValueByPixel(`${themeMeta.spacing}`, themeMetaOptions.themeSpaces) || {
+            pixel: '36',
+            rem: '0.25',
+            size: {
+                sizeUnit: '4',
+                sizeStep: '4'
+            }
+        };
+        const transformThemeMeta = {
+            colorPrimary: themeMeta.colorPrimary,
+            borderRadius: Number(themeMeta.borderRadius),
+            sizeUnit: Number(res.size.sizeUnit),
+            sizeStep: Number(res.size.sizeStep)
+        };
+        return 'dark' === theme ? generateDarkTheme(transformThemeMeta) : generateLightTheme(transformThemeMeta);
+    }, [
+        theme,
+        themeMeta
+    ]);
+    return /*#__PURE__*/ jsx(ThemeProviderContext.Provider, {
+        ...props,
+        value: value,
+        children: /*#__PURE__*/ jsx(ConfigProvider, {
+            theme: antdTheme,
+            children: children
+        })
+    });
+}
+export { ThemeProvider, ThemeProviderContext };

package/lib/components/theme/constants.d.ts

@@ -0,0 +1,48 @@
+export interface IThemeMeta {
+    themeColors: {
+        title: string;
+        options: {
+            value: string;
+            color: string;
+        }[];
+    };
+    themeRadius: {
+        title: string;
+        options: {
+            value: {
+                pixel: string;
+                rem: string;
+            };
+            iconUrl: string;
+            size: string;
+        }[];
+    };
+    themeSpaces: {
+        title: string;
+        options: {
+            value: {
+                pixel: string;
+                rem: string;
+                size: {
+                    sizeUnit: string;
+                    sizeStep: string;
+                };
+            };
+            iconUrl: string;
+            size: string;
+        }[];
+    };
+}
+export declare const themeMetaOptions: Omit<IThemeMeta, 'colorPrimary' | 'borderRadius' | 'spacing'>;
+export declare const themeTailwindRadius: {};
+type ThemeColorTokenMap = {
+    light: Record<string, string>;
+    dark: Record<string, string>;
+};
+export declare const themeColorTokenMap: ThemeColorTokenMap;
+export declare function getKeyByColor(colorValue: string, theme: keyof ThemeColorTokenMap): string;
+export declare function findValueByPixel(pixelValue: string, themeSpaces: typeof themeMetaOptions.themeSpaces | typeof themeMetaOptions.themeRadius): {
+    pixel: string;
+    rem: string;
+};
+export {};