@lark-apaas/client-toolkit 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/apis/hooks/useTheme.d.ts +1 -0
- package/lib/apis/hooks/useTheme.js +1 -0
- package/lib/components/AppContainer/LogInterceptor.js +27 -5
- package/lib/components/AppContainer/index.js +2 -0
- package/lib/components/User/UserDisplay.d.ts +1 -1
- package/lib/components/User/UserDisplay.js +101 -25
- package/lib/components/User/UserProfile/UserProfile.css +1 -1
- package/lib/components/User/UserProfile/UserProfileContainer.d.ts +1 -1
- package/lib/components/User/UserProfile/UserProfileSkeleton.d.ts +0 -1
- package/lib/components/User/UserProfile/UserProfileSkeleton.js +21 -29
- package/lib/components/User/UserProfile/UserProfileUI.d.ts +1 -2
- package/lib/components/User/UserProfile/UserProfileUI.js +106 -92
- package/lib/components/User/UserSelect.d.ts +1 -1
- package/lib/components/User/UserSelect.js +17 -143
- package/lib/components/User/UserSelectUI/ActionButtons.d.ts +11 -0
- package/lib/components/User/UserSelectUI/ActionButtons.js +44 -0
- package/lib/components/User/UserSelectUI/Dropdown.d.ts +12 -0
- package/lib/components/User/UserSelectUI/Dropdown.js +66 -0
- package/lib/components/User/UserSelectUI/MultipleSelectionTags.d.ts +14 -0
- package/lib/components/User/UserSelectUI/MultipleSelectionTags.js +48 -0
- package/lib/components/User/UserSelectUI/SingleSelectionPreview.d.ts +9 -0
- package/lib/components/User/UserSelectUI/SingleSelectionPreview.js +37 -0
- package/lib/components/User/UserSelectUI/Spinner.d.ts +2 -0
- package/lib/components/User/UserSelectUI/Spinner.js +13 -0
- package/lib/components/User/UserSelectUI/UserSelectUI.d.ts +5 -0
- package/lib/components/User/UserSelectUI/UserSelectUI.js +230 -0
- package/lib/components/User/UserSelectUI/index.d.ts +2 -0
- package/lib/components/User/UserSelectUI/index.js +2 -0
- package/lib/components/User/UserSelectUI/types.d.ts +14 -0
- package/lib/components/User/UserSelectUI/types.js +0 -0
- package/lib/components/User/UserWithAvatar.js +38 -21
- package/lib/components/index.d.ts +2 -5
- package/lib/components/index.js +2 -3
- package/lib/components/ui/avatar.d.ts +6 -0
- package/lib/components/ui/avatar.js +27 -0
- package/lib/components/ui/badge.d.ts +9 -0
- package/lib/components/ui/badge.js +29 -0
- package/lib/components/ui/button.d.ts +10 -0
- package/lib/components/ui/button.js +42 -0
- package/lib/components/ui/input.d.ts +3 -0
- package/lib/components/ui/input.js +12 -0
- package/lib/components/ui/overflow-tooltip-text.d.ts +8 -0
- package/lib/components/ui/overflow-tooltip-text.js +66 -0
- package/lib/components/ui/popover.d.ts +7 -0
- package/lib/components/ui/popover.js +35 -0
- package/lib/components/ui/skeleton.d.ts +7 -0
- package/lib/components/ui/skeleton.js +10 -0
- package/lib/components/ui/tooltip.d.ts +7 -0
- package/lib/components/ui/tooltip.js +24 -0
- package/lib/integrations/getAppInfo.js +14 -2
- package/lib/logger/__tests__/batch-logger.test.d.ts +1 -0
- package/lib/logger/__tests__/batch-logger.test.js +367 -0
- package/lib/logger/batch-logger.d.ts +78 -0
- package/lib/logger/batch-logger.js +134 -0
- package/lib/override.css +0 -16
- package/lib/types/index.d.ts +0 -29
- package/package.json +7 -1
- package/lib/apis/components/SidebarNav.d.ts +0 -1
- package/lib/apis/components/SidebarNav.js +0 -2
- package/lib/components/SidebarNav/DrawerNav.d.ts +0 -3
- package/lib/components/SidebarNav/DrawerNav.js +0 -64
- package/lib/components/SidebarNav/DropdownNav.d.ts +0 -3
- package/lib/components/SidebarNav/DropdownNav.js +0 -40
- package/lib/components/SidebarNav/Sidebar.d.ts +0 -3
- package/lib/components/SidebarNav/Sidebar.js +0 -33
- package/lib/components/SidebarNav/index.d.ts +0 -5
- package/lib/components/SidebarNav/index.js +0 -61
- package/lib/components/User/UserSelect.css +0 -11
- package/lib/components/common/LogoInfo.d.ts +0 -5
- package/lib/components/common/LogoInfo.js +0 -30
- package/lib/components/common/NavItem.d.ts +0 -20
- package/lib/components/common/NavItem.js +0 -112
- package/lib/components/common/NavMenu.d.ts +0 -9
- package/lib/components/common/NavMenu.js +0 -50
- package/lib/components/common/UserAvatarLayout.d.ts +0 -4
- package/lib/components/common/UserAvatarLayout.js +0 -41
- package/lib/components/common/UserAvatarMenu.d.ts +0 -4
- package/lib/components/common/UserAvatarMenu.js +0 -58
- package/lib/components/common/index.d.ts +0 -9
- package/lib/components/common/index.js +0 -10
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lark-apaas/client-toolkit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"types": "./lib/index.d.ts",
|
|
5
5
|
"main": "./lib/index.js",
|
|
6
6
|
"files": [
|
|
@@ -77,8 +77,13 @@
|
|
|
77
77
|
"@ant-design/cssinjs": "^1.24.0",
|
|
78
78
|
"@data-loom/js": "0.3.1",
|
|
79
79
|
"@lark-apaas/miaoda-inspector": "^1.0.0",
|
|
80
|
+
"@radix-ui/react-avatar": "^1.1.10",
|
|
81
|
+
"@radix-ui/react-popover": "^1.1.15",
|
|
82
|
+
"@radix-ui/react-slot": "^1.2.3",
|
|
83
|
+
"@radix-ui/react-tooltip": "^1.2.8",
|
|
80
84
|
"@zumer/snapdom": "^1.9.14",
|
|
81
85
|
"axios": "^1.12.2",
|
|
86
|
+
"class-variance-authority": "^0.7.1",
|
|
82
87
|
"clsx": "~2.0.1",
|
|
83
88
|
"dayjs": "^1.11.13",
|
|
84
89
|
"echarts": "^6.0.0",
|
|
@@ -103,6 +108,7 @@
|
|
|
103
108
|
"@storybook/blocks": "^8.6.14",
|
|
104
109
|
"@storybook/react": "^8.6.14",
|
|
105
110
|
"@storybook/test": "^8.6.14",
|
|
111
|
+
"@tailwindcss/postcss": "^4.1.0",
|
|
106
112
|
"@testing-library/jest-dom": "^6.6.4",
|
|
107
113
|
"@testing-library/react": "^16.3.0",
|
|
108
114
|
"@types/lodash": "^4.17.20",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as SidebarNav } from '../../components/SidebarNav';
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { Button, Drawer } from "antd";
|
|
4
|
-
import { Menu } from "lucide-react";
|
|
5
|
-
import { clsxWithTw } from "../../utils/utils.js";
|
|
6
|
-
import { LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarLayout } from "../common/index.js";
|
|
7
|
-
function DrawerNav({ navList, className, activeClassName }) {
|
|
8
|
-
const [open, setOpen] = useState(false);
|
|
9
|
-
const showDrawer = ()=>{
|
|
10
|
-
setOpen(true);
|
|
11
|
-
};
|
|
12
|
-
const onClose = ()=>{
|
|
13
|
-
setOpen(false);
|
|
14
|
-
};
|
|
15
|
-
return /*#__PURE__*/ jsxs("div", {
|
|
16
|
-
className: clsxWithTw('w-full sticky top-0 z-50 flex flex-row h-14 px-3 items-center', TopHeaderThemeClass, className),
|
|
17
|
-
children: [
|
|
18
|
-
/*#__PURE__*/ jsx(Button, {
|
|
19
|
-
type: "text",
|
|
20
|
-
onClick: showDrawer,
|
|
21
|
-
className: "md:hidden px-0 text-inherit border-0",
|
|
22
|
-
children: /*#__PURE__*/ jsx(Menu, {
|
|
23
|
-
className: "h-6 w-6"
|
|
24
|
-
})
|
|
25
|
-
}),
|
|
26
|
-
/*#__PURE__*/ jsx(LogoInfo, {
|
|
27
|
-
className: "ml-[6px] pl-3"
|
|
28
|
-
}),
|
|
29
|
-
/*#__PURE__*/ jsxs(Drawer, {
|
|
30
|
-
placement: "left",
|
|
31
|
-
rootClassName: "miao-nav",
|
|
32
|
-
closeIcon: null,
|
|
33
|
-
classNames: {
|
|
34
|
-
body: clsxWithTw('w-full h-full flex flex-col p-0', className),
|
|
35
|
-
content: 'w-[320px]'
|
|
36
|
-
},
|
|
37
|
-
onClose: onClose,
|
|
38
|
-
open: open,
|
|
39
|
-
children: [
|
|
40
|
-
/*#__PURE__*/ jsx("div", {
|
|
41
|
-
className: "w-full h-14",
|
|
42
|
-
children: /*#__PURE__*/ jsx(LogoInfo, {
|
|
43
|
-
className: "pl-5 pr-3 h-full flex items-center"
|
|
44
|
-
})
|
|
45
|
-
}),
|
|
46
|
-
/*#__PURE__*/ jsx("div", {
|
|
47
|
-
className: "flex-1 overflow-auto min-h-0",
|
|
48
|
-
children: /*#__PURE__*/ jsx(NavMenu, {
|
|
49
|
-
navList: navList,
|
|
50
|
-
className: clsxWithTw('border-0', className),
|
|
51
|
-
activeClassName: activeClassName,
|
|
52
|
-
mode: "vertical",
|
|
53
|
-
onClick: onClose
|
|
54
|
-
})
|
|
55
|
-
}),
|
|
56
|
-
/*#__PURE__*/ jsx(UserAvatarLayout, {
|
|
57
|
-
className: "mt-2"
|
|
58
|
-
})
|
|
59
|
-
]
|
|
60
|
-
})
|
|
61
|
-
]
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
export { DrawerNav as default };
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { Menu, X } from "lucide-react";
|
|
4
|
-
import { clsxWithTw } from "../../utils/utils.js";
|
|
5
|
-
import { DropdownThemeClass, LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarMenu } from "../common/index.js";
|
|
6
|
-
function DropdownNav({ navList = [], className, activeClassName }) {
|
|
7
|
-
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
8
|
-
const MenuDropdownIcon = isMenuOpen ? X : Menu;
|
|
9
|
-
return /*#__PURE__*/ jsxs("header", {
|
|
10
|
-
className: clsxWithTw('w-full flex sticky top-0 z-50 h-14 px-3 gap-1.5 items-center', TopHeaderThemeClass, isMenuOpen ? 'border-transparent' : '', className),
|
|
11
|
-
children: [
|
|
12
|
-
navList.length > 0 ? /*#__PURE__*/ jsx("div", {
|
|
13
|
-
className: "md:hidden flex mr-3",
|
|
14
|
-
children: /*#__PURE__*/ jsx(MenuDropdownIcon, {
|
|
15
|
-
className: "h-6 w-6 cursor-pointer",
|
|
16
|
-
onClick: ()=>setIsMenuOpen(!isMenuOpen)
|
|
17
|
-
})
|
|
18
|
-
}) : null,
|
|
19
|
-
/*#__PURE__*/ jsx(LogoInfo, {
|
|
20
|
-
className: "flex-1"
|
|
21
|
-
}),
|
|
22
|
-
/*#__PURE__*/ jsx(UserAvatarMenu, {
|
|
23
|
-
className: className
|
|
24
|
-
}),
|
|
25
|
-
isMenuOpen && navList.length > 0 ? /*#__PURE__*/ jsx("div", {
|
|
26
|
-
className: clsxWithTw('overflow-y-auto max-h-[482px] px-2 pb-2 absolute top-14 left-0 right-0 shadow-lg', DropdownThemeClass, className),
|
|
27
|
-
children: /*#__PURE__*/ jsx(NavMenu, {
|
|
28
|
-
navList: navList,
|
|
29
|
-
className: className,
|
|
30
|
-
activeClassName: activeClassName,
|
|
31
|
-
onClick: (_key)=>{
|
|
32
|
-
setIsMenuOpen(false);
|
|
33
|
-
},
|
|
34
|
-
mode: "vertical"
|
|
35
|
-
})
|
|
36
|
-
}) : null
|
|
37
|
-
]
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
export { DropdownNav as default };
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import "react";
|
|
3
|
-
import { clsxWithTw } from "../../utils/utils.js";
|
|
4
|
-
import { LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarLayout } from "../common/index.js";
|
|
5
|
-
function SidebarNav({ activeClassName, className, navList }) {
|
|
6
|
-
return /*#__PURE__*/ jsx("div", {
|
|
7
|
-
className: clsxWithTw('h-full overflow-y-auto scrollbar-none w-[260px] dark:border-gray-800', className),
|
|
8
|
-
children: /*#__PURE__*/ jsxs("div", {
|
|
9
|
-
className: clsxWithTw('fixed top-0 bottom-0 left-0 w-[260px] flex flex-col border-r', TopHeaderThemeClass, className),
|
|
10
|
-
children: [
|
|
11
|
-
/*#__PURE__*/ jsx("div", {
|
|
12
|
-
className: "w-full px-2 pt-2 h-12 mb-3",
|
|
13
|
-
children: /*#__PURE__*/ jsx(LogoInfo, {
|
|
14
|
-
className: "px-2 pt-[9px] pb-[15px]"
|
|
15
|
-
})
|
|
16
|
-
}),
|
|
17
|
-
/*#__PURE__*/ jsx("div", {
|
|
18
|
-
className: "flex-1 overflow-auto min-h-0",
|
|
19
|
-
children: /*#__PURE__*/ jsx(NavMenu, {
|
|
20
|
-
navList: navList,
|
|
21
|
-
className: clsxWithTw('border-0', className),
|
|
22
|
-
activeClassName: activeClassName,
|
|
23
|
-
mode: "vertical"
|
|
24
|
-
})
|
|
25
|
-
}),
|
|
26
|
-
/*#__PURE__*/ jsx(UserAvatarLayout, {
|
|
27
|
-
className: "mt-2"
|
|
28
|
-
})
|
|
29
|
-
]
|
|
30
|
-
})
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
export { SidebarNav as default };
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useMemo } from "react";
|
|
3
|
-
import { useIsMobile } from "../../hooks/useIsMobile.js";
|
|
4
|
-
import { useLocation } from "react-router-dom";
|
|
5
|
-
import DrawerNav from "./DrawerNav.js";
|
|
6
|
-
import Sidebar from "./Sidebar.js";
|
|
7
|
-
import DropdownNav from "./DropdownNav.js";
|
|
8
|
-
import { ConfigProvider } from "antd";
|
|
9
|
-
import { generateDarkTheme, generateLightTheme } from "../theme/util.js";
|
|
10
|
-
import { useTheme } from "../../hooks/useTheme.js";
|
|
11
|
-
function SideNavigationBar({ navList = [], className, activeClassName, mobileVariant = 'normal' }) {
|
|
12
|
-
const isMobile = useIsMobile();
|
|
13
|
-
const location = useLocation();
|
|
14
|
-
useEffect(()=>{
|
|
15
|
-
window.scrollTo(0, 0);
|
|
16
|
-
}, [
|
|
17
|
-
location.pathname
|
|
18
|
-
]);
|
|
19
|
-
if (isMobile) {
|
|
20
|
-
if ('dropdown' === mobileVariant) return /*#__PURE__*/ jsx(DropdownNav, {
|
|
21
|
-
navList: navList,
|
|
22
|
-
className: className,
|
|
23
|
-
activeClassName: activeClassName
|
|
24
|
-
});
|
|
25
|
-
return /*#__PURE__*/ jsx(DrawerNav, {
|
|
26
|
-
navList: navList,
|
|
27
|
-
className: className,
|
|
28
|
-
activeClassName: activeClassName
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
return /*#__PURE__*/ jsx(Sidebar, {
|
|
32
|
-
navList: navList,
|
|
33
|
-
className: className,
|
|
34
|
-
activeClassName: activeClassName
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
function SideNavigation(props) {
|
|
38
|
-
const { theme } = useTheme();
|
|
39
|
-
const { darkColorPrimary, lightColorPrimary } = props;
|
|
40
|
-
const themeToken = useMemo(()=>{
|
|
41
|
-
if ('dark' === theme && darkColorPrimary) return generateDarkTheme({
|
|
42
|
-
colorPrimary: darkColorPrimary
|
|
43
|
-
});
|
|
44
|
-
if ('light' === theme && lightColorPrimary) return generateLightTheme({
|
|
45
|
-
colorPrimary: lightColorPrimary
|
|
46
|
-
});
|
|
47
|
-
return {};
|
|
48
|
-
}, [
|
|
49
|
-
theme,
|
|
50
|
-
darkColorPrimary,
|
|
51
|
-
lightColorPrimary
|
|
52
|
-
]);
|
|
53
|
-
return /*#__PURE__*/ jsx(ConfigProvider, {
|
|
54
|
-
theme: themeToken,
|
|
55
|
-
children: /*#__PURE__*/ jsx(SideNavigationBar, {
|
|
56
|
-
...props
|
|
57
|
-
})
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
const SidebarNav = SideNavigation;
|
|
61
|
-
export { SideNavigation, SideNavigation as SidebarNav, SidebarNav as default };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
.user-select-container .ant-select-selection-item {
|
|
2
|
-
height: unset !important;
|
|
3
|
-
border-radius: 50px !important;
|
|
4
|
-
padding: 1px 8px 1px 1px !important;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.user-select-container .ant-select-focused .ant-select-selector {
|
|
8
|
-
box-shadow: none !important;
|
|
9
|
-
border-color: #1456f0 !important;
|
|
10
|
-
}
|
|
11
|
-
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import "react";
|
|
3
|
-
import { Link } from "react-router-dom";
|
|
4
|
-
import { useAppInfo } from "../../hooks/useAppInfo.js";
|
|
5
|
-
import { clsxWithTw } from "../../utils/utils.js";
|
|
6
|
-
function LogoInfo({ className, logoClassName }) {
|
|
7
|
-
const { name, avatar } = useAppInfo();
|
|
8
|
-
return /*#__PURE__*/ jsx("div", {
|
|
9
|
-
className: clsxWithTw('overflow-hidden text-ellipsis whitespace-nowrap', className),
|
|
10
|
-
children: /*#__PURE__*/ jsxs(Link, {
|
|
11
|
-
to: "/",
|
|
12
|
-
className: "text-inherit flex items-center gap-2 w-full",
|
|
13
|
-
children: [
|
|
14
|
-
avatar ? /*#__PURE__*/ jsx("img", {
|
|
15
|
-
src: avatar,
|
|
16
|
-
alt: name,
|
|
17
|
-
className: clsxWithTw('h-7 w-7', logoClassName)
|
|
18
|
-
}) : null,
|
|
19
|
-
/*#__PURE__*/ jsxs("span", {
|
|
20
|
-
className: "w-full truncate",
|
|
21
|
-
children: [
|
|
22
|
-
name || '新应用',
|
|
23
|
-
" "
|
|
24
|
-
]
|
|
25
|
-
})
|
|
26
|
-
]
|
|
27
|
-
})
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
export { LogoInfo as default };
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface NavItemProps {
|
|
3
|
-
name: string;
|
|
4
|
-
to: string;
|
|
5
|
-
icon?: React.ComponentType<{
|
|
6
|
-
className?: string;
|
|
7
|
-
}>;
|
|
8
|
-
children?: NavItemProps[];
|
|
9
|
-
className?: string;
|
|
10
|
-
hasBadge?: boolean;
|
|
11
|
-
direction?: 'horizontal' | 'vertical';
|
|
12
|
-
onClick?: () => void;
|
|
13
|
-
hideActive?: boolean;
|
|
14
|
-
forceActive?: boolean;
|
|
15
|
-
}
|
|
16
|
-
export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
17
|
-
export declare const MoreNavItem: React.FC<{
|
|
18
|
-
expandedNavItemsPath: string[];
|
|
19
|
-
isExpanded: boolean;
|
|
20
|
-
} & Omit<NavItemProps, 'icon' | 'to'>>;
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import react, { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
|
|
3
|
-
import { NavLink, matchPath, useLocation } from "react-router-dom";
|
|
4
|
-
import { Button } from "antd";
|
|
5
|
-
import { clsxWithTw } from "../../utils/utils.js";
|
|
6
|
-
import { MoreHorizontal } from "lucide-react";
|
|
7
|
-
const HashLink = /*#__PURE__*/ forwardRef(({ className, to, name, icon, onClick, direction, hideActive = false }, _ref)=>{
|
|
8
|
-
const [isActive, setIsActive] = useState(false);
|
|
9
|
-
useEffect(()=>{
|
|
10
|
-
const checkHash = ()=>{
|
|
11
|
-
setIsActive(window.location.hash === to);
|
|
12
|
-
};
|
|
13
|
-
checkHash();
|
|
14
|
-
window.addEventListener('hashchange', checkHash);
|
|
15
|
-
return ()=>window.removeEventListener('hashchange', checkHash);
|
|
16
|
-
}, [
|
|
17
|
-
to
|
|
18
|
-
]);
|
|
19
|
-
const iconNode = icon ? /*#__PURE__*/ react.createElement(icon, {
|
|
20
|
-
className: 'w-6 h-6'
|
|
21
|
-
}) : null;
|
|
22
|
-
return /*#__PURE__*/ jsxs(Button, {
|
|
23
|
-
variant: "link",
|
|
24
|
-
href: to,
|
|
25
|
-
onClick: ()=>{
|
|
26
|
-
setIsActive(true);
|
|
27
|
-
onClick?.();
|
|
28
|
-
},
|
|
29
|
-
color: isActive && !hideActive ? 'primary' : 'default',
|
|
30
|
-
className: clsxWithTw('miao-nav p-0 b-0 h-full w-full', 'transition-colors inline-flex gap-1 items-center overflow-hidden', {
|
|
31
|
-
'flex-col': 'vertical' === direction,
|
|
32
|
-
'w-full': 'vertical' === direction,
|
|
33
|
-
'justify-center': 'horizontal' === direction,
|
|
34
|
-
'text-inherit': !isActive
|
|
35
|
-
}, className),
|
|
36
|
-
children: [
|
|
37
|
-
iconNode,
|
|
38
|
-
name ? /*#__PURE__*/ jsx("span", {
|
|
39
|
-
className: clsxWithTw('truncate w-full', {
|
|
40
|
-
'text-center': 'vertical' === direction
|
|
41
|
-
}),
|
|
42
|
-
children: name
|
|
43
|
-
}) : null
|
|
44
|
-
]
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
HashLink.displayName = 'HashLink';
|
|
48
|
-
const NavItem = /*#__PURE__*/ react.forwardRef((props, ref)=>{
|
|
49
|
-
const isHashLink = props.to.startsWith('#');
|
|
50
|
-
if (isHashLink) return /*#__PURE__*/ jsx(HashLink, {
|
|
51
|
-
ref: ref,
|
|
52
|
-
...props
|
|
53
|
-
});
|
|
54
|
-
return /*#__PURE__*/ jsx(NavLink, {
|
|
55
|
-
ref: ref,
|
|
56
|
-
to: props.to,
|
|
57
|
-
end: true,
|
|
58
|
-
onClick: props.onClick,
|
|
59
|
-
className: ()=>clsxWithTw('inline-flex justify-center'),
|
|
60
|
-
children: ({ isActive: linkIsActive })=>/*#__PURE__*/ jsxs(Button, {
|
|
61
|
-
variant: "link",
|
|
62
|
-
color: linkIsActive && !props.hideActive || props.forceActive ? 'primary' : 'default',
|
|
63
|
-
className: clsxWithTw('miao-nav p-0 b-0 h-full w-full', 'transition-colors inline-flex gap-1 items-center overflow-hidden', {
|
|
64
|
-
'flex-col': 'vertical' === props.direction,
|
|
65
|
-
'justify-center': 'horizontal' === props.direction,
|
|
66
|
-
'text-inherit': !(linkIsActive && !props.hideActive || props.forceActive)
|
|
67
|
-
}, props.className),
|
|
68
|
-
children: [
|
|
69
|
-
props.icon ? /*#__PURE__*/ jsx(props.icon, {
|
|
70
|
-
className: "w-6 h-6"
|
|
71
|
-
}) : null,
|
|
72
|
-
props.name ? /*#__PURE__*/ jsx("span", {
|
|
73
|
-
className: clsxWithTw('truncate w-full', {
|
|
74
|
-
' text-center': 'vertical' === props.direction
|
|
75
|
-
}),
|
|
76
|
-
children: props.name
|
|
77
|
-
}) : null
|
|
78
|
-
]
|
|
79
|
-
})
|
|
80
|
-
});
|
|
81
|
-
});
|
|
82
|
-
NavItem.displayName = 'NavItem';
|
|
83
|
-
const MoreNavItem = ({ expandedNavItemsPath, onClick, isExpanded, name = '更多', ...restProps })=>{
|
|
84
|
-
const { pathname } = useLocation();
|
|
85
|
-
const isActive = useMemo(()=>{
|
|
86
|
-
const matched = expandedNavItemsPath.some((path)=>{
|
|
87
|
-
const match = matchPath(path, pathname);
|
|
88
|
-
return match && match.pathname === pathname;
|
|
89
|
-
});
|
|
90
|
-
return matched;
|
|
91
|
-
}, [
|
|
92
|
-
expandedNavItemsPath,
|
|
93
|
-
pathname
|
|
94
|
-
]);
|
|
95
|
-
const handleClick = useCallback((e)=>{
|
|
96
|
-
e.preventDefault();
|
|
97
|
-
onClick?.();
|
|
98
|
-
}, [
|
|
99
|
-
onClick
|
|
100
|
-
]);
|
|
101
|
-
return /*#__PURE__*/ jsx(NavItem, {
|
|
102
|
-
icon: MoreHorizontal,
|
|
103
|
-
name: name,
|
|
104
|
-
to: "",
|
|
105
|
-
hideActive: !isActive,
|
|
106
|
-
forceActive: isExpanded || isActive,
|
|
107
|
-
onClick: handleClick,
|
|
108
|
-
...restProps
|
|
109
|
-
});
|
|
110
|
-
};
|
|
111
|
-
MoreNavItem.displayName = 'MoreNavItem';
|
|
112
|
-
export { MoreNavItem, NavItem };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { BaseNavProps } from '../../types';
|
|
3
|
-
type NavMenuProps = BaseNavProps & {
|
|
4
|
-
mode?: 'horizontal' | 'vertical';
|
|
5
|
-
iconClassName?: string;
|
|
6
|
-
onClick?: (key: string) => void;
|
|
7
|
-
};
|
|
8
|
-
export default function NavMenu({ navList, className, iconClassName, mode, onClick, }: NavMenuProps): React.JSX.Element;
|
|
9
|
-
export {};
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Menu } from "antd";
|
|
3
|
-
import react, { useEffect, useMemo, useState } from "react";
|
|
4
|
-
import { NavLink, useLocation } from "react-router-dom";
|
|
5
|
-
import { clsxWithTw } from "../../utils/utils.js";
|
|
6
|
-
function NavMenu({ navList, className, iconClassName = '', mode = 'horizontal', onClick }) {
|
|
7
|
-
const location = useLocation();
|
|
8
|
-
const [currentMenu, setCurrentMenu] = useState(location.pathname);
|
|
9
|
-
useEffect(()=>{
|
|
10
|
-
setCurrentMenu(location.pathname);
|
|
11
|
-
}, [
|
|
12
|
-
location
|
|
13
|
-
]);
|
|
14
|
-
const menuItems = useMemo(()=>navList?.map((n)=>({
|
|
15
|
-
label: /*#__PURE__*/ jsxs(NavLink, {
|
|
16
|
-
to: n.to,
|
|
17
|
-
end: true,
|
|
18
|
-
className: ({ isActive })=>clsxWithTw('flex items-center', {
|
|
19
|
-
'text-[var(--ant-menu-horizontal-item-selected-color)]': isActive
|
|
20
|
-
}),
|
|
21
|
-
children: [
|
|
22
|
-
n.icon ? /*#__PURE__*/ react.createElement(n.icon, {
|
|
23
|
-
className: clsxWithTw('w-4 h-4', iconClassName)
|
|
24
|
-
}) : null,
|
|
25
|
-
/*#__PURE__*/ jsx("span", {
|
|
26
|
-
children: n.name
|
|
27
|
-
})
|
|
28
|
-
]
|
|
29
|
-
}),
|
|
30
|
-
key: n.to
|
|
31
|
-
})), [
|
|
32
|
-
navList
|
|
33
|
-
]);
|
|
34
|
-
return /*#__PURE__*/ jsx(Menu, {
|
|
35
|
-
className: clsxWithTw('bg-inherit h-full', className),
|
|
36
|
-
items: menuItems,
|
|
37
|
-
selectedKeys: [
|
|
38
|
-
currentMenu
|
|
39
|
-
],
|
|
40
|
-
onClick: (info)=>{
|
|
41
|
-
setCurrentMenu(info.key);
|
|
42
|
-
onClick?.(info.key);
|
|
43
|
-
},
|
|
44
|
-
mode: mode,
|
|
45
|
-
style: {
|
|
46
|
-
borderBottomWidth: 0
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
export { NavMenu as default };
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import "react";
|
|
3
|
-
import { Button } from "antd";
|
|
4
|
-
import { LogOut } from "lucide-react";
|
|
5
|
-
import { useCurrentUserProfile, useLogout } from "../../hooks/index.js";
|
|
6
|
-
import { clsxWithTw } from "../../utils/utils.js";
|
|
7
|
-
function UserAvatarLayout({ className }) {
|
|
8
|
-
const { name, avatar } = useCurrentUserProfile();
|
|
9
|
-
const { handlerLogout } = useLogout();
|
|
10
|
-
return /*#__PURE__*/ jsx(Fragment, {
|
|
11
|
-
children: name ? /*#__PURE__*/ jsx("div", {
|
|
12
|
-
className: clsxWithTw('py-4 px-5 border-gray-200 border-t', className),
|
|
13
|
-
children: /*#__PURE__*/ jsxs("div", {
|
|
14
|
-
className: "flex items-center justify-between",
|
|
15
|
-
children: [
|
|
16
|
-
/*#__PURE__*/ jsxs("div", {
|
|
17
|
-
className: "flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap",
|
|
18
|
-
children: [
|
|
19
|
-
avatar ? /*#__PURE__*/ jsx("img", {
|
|
20
|
-
src: avatar,
|
|
21
|
-
alt: name,
|
|
22
|
-
className: "h-8 w-8 rounded-full"
|
|
23
|
-
}) : null,
|
|
24
|
-
/*#__PURE__*/ jsx("span", {
|
|
25
|
-
className: "text-sm font-medium truncate",
|
|
26
|
-
children: name
|
|
27
|
-
})
|
|
28
|
-
]
|
|
29
|
-
}),
|
|
30
|
-
/*#__PURE__*/ jsx(Button, {
|
|
31
|
-
type: "text",
|
|
32
|
-
className: "text-inherit",
|
|
33
|
-
icon: /*#__PURE__*/ jsx(LogOut, {}),
|
|
34
|
-
onClick: handlerLogout
|
|
35
|
-
})
|
|
36
|
-
]
|
|
37
|
-
})
|
|
38
|
-
}) : null
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
export { UserAvatarLayout as default };
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import "react";
|
|
3
|
-
import { Avatar, Dropdown, Menu } from "antd";
|
|
4
|
-
import { LogOut } from "lucide-react";
|
|
5
|
-
import { useCurrentUserProfile, useLogout } from "../../hooks/index.js";
|
|
6
|
-
import { clsxWithTw } from "../../utils/utils.js";
|
|
7
|
-
function UserAvatarMenu({ className }) {
|
|
8
|
-
const { name, avatar } = useCurrentUserProfile();
|
|
9
|
-
const { handlerLogout } = useLogout();
|
|
10
|
-
if (!name) return null;
|
|
11
|
-
return /*#__PURE__*/ jsx(Dropdown, {
|
|
12
|
-
placement: "bottomRight",
|
|
13
|
-
overlay: /*#__PURE__*/ jsxs(Menu, {
|
|
14
|
-
className: clsxWithTw('min-w-48', className),
|
|
15
|
-
children: [
|
|
16
|
-
/*#__PURE__*/ jsx(Menu.Item, {
|
|
17
|
-
children: /*#__PURE__*/ jsxs("div", {
|
|
18
|
-
className: "flex items-center gap-2",
|
|
19
|
-
children: [
|
|
20
|
-
/*#__PURE__*/ jsx(Avatar, {
|
|
21
|
-
src: avatar,
|
|
22
|
-
className: "w-10 h-10"
|
|
23
|
-
}),
|
|
24
|
-
/*#__PURE__*/ jsx("span", {
|
|
25
|
-
className: "flex-1 text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]",
|
|
26
|
-
children: name
|
|
27
|
-
})
|
|
28
|
-
]
|
|
29
|
-
})
|
|
30
|
-
}, "user-info"),
|
|
31
|
-
/*#__PURE__*/ jsx(Menu.Divider, {}),
|
|
32
|
-
/*#__PURE__*/ jsx(Menu.Item, {
|
|
33
|
-
onClick: handlerLogout,
|
|
34
|
-
children: /*#__PURE__*/ jsxs("div", {
|
|
35
|
-
className: "flex items-center gap-2",
|
|
36
|
-
children: [
|
|
37
|
-
/*#__PURE__*/ jsx(LogOut, {}),
|
|
38
|
-
/*#__PURE__*/ jsx("span", {
|
|
39
|
-
children: "退出登录"
|
|
40
|
-
})
|
|
41
|
-
]
|
|
42
|
-
})
|
|
43
|
-
}, "logout")
|
|
44
|
-
]
|
|
45
|
-
}),
|
|
46
|
-
trigger: [
|
|
47
|
-
'click'
|
|
48
|
-
],
|
|
49
|
-
children: /*#__PURE__*/ jsx("div", {
|
|
50
|
-
className: "cursor-pointer py-3 flex items-center justify-center",
|
|
51
|
-
children: /*#__PURE__*/ jsx(Avatar, {
|
|
52
|
-
src: avatar,
|
|
53
|
-
className: "w-8 h-8"
|
|
54
|
-
})
|
|
55
|
-
})
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
export { UserAvatarMenu as default };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export { default as UserAvatarMenu } from './UserAvatarMenu';
|
|
2
|
-
export { default as UserAvatarLayout } from './UserAvatarLayout';
|
|
3
|
-
export { default as NavMenu } from './NavMenu';
|
|
4
|
-
export { default as LogoInfo } from './LogoInfo';
|
|
5
|
-
export * from './NavItem';
|
|
6
|
-
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";
|
|
7
|
-
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";
|
|
8
|
-
export declare const BottomBarThemeClass = "bg-white dark:bg-gray-800 text-[#646A73] dark:text-gray-300";
|
|
9
|
-
export declare const MaskThemeClass = "bg-black/55";
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import UserAvatarMenu from "./UserAvatarMenu.js";
|
|
2
|
-
import UserAvatarLayout from "./UserAvatarLayout.js";
|
|
3
|
-
import NavMenu from "./NavMenu.js";
|
|
4
|
-
import LogoInfo from "./LogoInfo.js";
|
|
5
|
-
export * from "./NavItem.js";
|
|
6
|
-
const TopHeaderThemeClass = 'bg-white text-gray-900 border-gray-200 dark:bg-neutral-50 dark:text-white dark:border-gray-700 border-b';
|
|
7
|
-
const DropdownThemeClass = TopHeaderThemeClass;
|
|
8
|
-
const BottomBarThemeClass = 'bg-white dark:bg-gray-800 text-[#646A73] dark:text-gray-300';
|
|
9
|
-
const MaskThemeClass = 'bg-black/55';
|
|
10
|
-
export { BottomBarThemeClass, DropdownThemeClass, LogoInfo, MaskThemeClass, NavMenu, TopHeaderThemeClass, UserAvatarLayout, UserAvatarMenu };
|