@lark-apaas/miaoda-core 0.1.0-alpha.1 → 0.1.0-alpha.10
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/useAppInfo.d.ts +1 -0
- package/lib/apis/hooks/useAppInfo.js +1 -0
- package/lib/components/AppContainer/index.js +1 -1
- package/lib/components/SidebarNav/DrawerNav.d.ts +1 -1
- package/lib/components/SidebarNav/DropdownNav.d.ts +1 -1
- package/lib/components/SidebarNav/Sidebar.d.ts +1 -1
- package/lib/components/TopNav/BottomNav.d.ts +1 -1
- package/lib/components/TopNav/TitleBar.js +2 -2
- package/lib/components/TopNav/TopNav.d.ts +1 -1
- package/lib/components/TopNav/TopNav.js +2 -2
- package/lib/components/User/UserWithAvatar.d.ts +1 -1
- package/lib/components/common/LogoInfo.js +2 -2
- package/lib/components/common/UserAvatarLayout.d.ts +1 -1
- package/lib/components/theme/ThemeProvider.d.ts +2 -2
- package/lib/components/theme/ThemeProvider.js +3 -3
- package/lib/components/theme/constants.d.ts +1 -1
- package/lib/components/theme/constants.js +2 -1
- package/lib/components/theme/util.d.ts +3 -3
- package/lib/components/theme/util.js +2 -2
- package/lib/hooks/index.d.ts +1 -1
- package/lib/hooks/index.js +1 -1
- package/lib/hooks/{useCurrentAppInfo.d.ts → useAppInfo.d.ts} +1 -1
- package/lib/hooks/{useCurrentAppInfo.js → useAppInfo.js} +2 -2
- package/lib/tailwind-theme.css +5 -4
- package/package.json +20 -22
- package/lib/apis/hooks/useCurrentAppInfo.d.ts +0 -1
- package/lib/apis/hooks/useCurrentAppInfo.js +0 -1
@@ -0,0 +1 @@
|
|
1
|
+
export * from '../../hooks/useAppInfo';
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from "../../hooks/useAppInfo.js";
|
@@ -13,7 +13,7 @@ registerDayjsPlugins();
|
|
13
13
|
const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
|
14
14
|
const App = (props)=>{
|
15
15
|
const { themeMeta = {} } = props;
|
16
|
-
const { rem } = findValueByPixel(
|
16
|
+
const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
|
17
17
|
rem: '0.625'
|
18
18
|
};
|
19
19
|
const radiusToken = generateTailwindRadiusToken(Number(rem));
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { BaseNavProps } from '../../types';
|
3
|
-
export default function DrawerNav({ navList, className, activeClassName }: BaseNavProps): React.JSX.Element;
|
3
|
+
export default function DrawerNav({ navList, className, activeClassName, }: BaseNavProps): React.JSX.Element;
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { BaseNavProps } from '../../types';
|
3
|
-
export default function DropdownNav({ navList, className, activeClassName }: BaseNavProps): React.JSX.Element;
|
3
|
+
export default function DropdownNav({ navList, className, activeClassName, }: BaseNavProps): React.JSX.Element;
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { NavProps } from '../../types';
|
3
|
-
export default function SidebarNav({ activeClassName, className, navList }: NavProps): React.JSX.Element;
|
3
|
+
export default function SidebarNav({ activeClassName, className, navList, }: NavProps): React.JSX.Element;
|
@@ -8,5 +8,5 @@ interface BottomNavProps extends BaseNavProps {
|
|
8
8
|
navList: NavItemProps[];
|
9
9
|
maxBottomItems?: number;
|
10
10
|
}
|
11
|
-
export declare function BottomNav({ navList, className, maxBottomItems }: BottomNavProps): React.JSX.Element;
|
11
|
+
export declare function BottomNav({ navList, className, maxBottomItems, }: BottomNavProps): React.JSX.Element;
|
12
12
|
export {};
|
@@ -3,7 +3,7 @@ import { useMemo, useState } from "react";
|
|
3
3
|
import { Link, matchPath, useLocation } from "react-router-dom";
|
4
4
|
import { LogOut, MoreHorizontal, X } from "lucide-react";
|
5
5
|
import { clsxWithTw } from "../../utils/utils.js";
|
6
|
-
import {
|
6
|
+
import { useAppInfo, useCurrentUserProfile, useLogout } from "../../hooks/index.js";
|
7
7
|
import { DropdownThemeClass, MaskThemeClass, TopHeaderThemeClass } from "../common/index.js";
|
8
8
|
const TitleBar = ({ navList, className })=>{
|
9
9
|
const { pathname } = useLocation();
|
@@ -17,7 +17,7 @@ const TitleBar = ({ navList, className })=>{
|
|
17
17
|
navList,
|
18
18
|
pathname
|
19
19
|
]);
|
20
|
-
const { appName, appLogo } =
|
20
|
+
const { appName, appLogo } = useAppInfo();
|
21
21
|
const { name: userName, avatar: userAvatar } = useCurrentUserProfile();
|
22
22
|
const { handlerLogout } = useLogout();
|
23
23
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
@@ -7,4 +7,4 @@ import { BaseNavProps } from '../../types';
|
|
7
7
|
export interface TopNavProps extends BaseNavProps {
|
8
8
|
align?: 'left' | 'center' | 'right';
|
9
9
|
}
|
10
|
-
export declare function TopNav({ navList, align, className, activeClassName }: TopNavProps): React.JSX.Element;
|
10
|
+
export declare function TopNav({ navList, align, className, activeClassName, }: TopNavProps): React.JSX.Element;
|
@@ -3,13 +3,13 @@ import { useRef, useState } from "react";
|
|
3
3
|
import { Menu, X } from "lucide-react";
|
4
4
|
import { Link } from "react-router-dom";
|
5
5
|
import { clsxWithTw } from "../../utils/utils.js";
|
6
|
-
import {
|
6
|
+
import { useAppInfo } from "../../hooks/useAppInfo.js";
|
7
7
|
import { useCurrentUserProfile } from "../../hooks/useCurrentUserProfile.js";
|
8
8
|
import { DropdownThemeClass, NavMenu, TopHeaderThemeClass, UserAvatarMenu } from "../common/index.js";
|
9
9
|
function TopNav({ navList = [], align = 'left', className, activeClassName }) {
|
10
10
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
11
11
|
const navRef = useRef(null);
|
12
|
-
const { appName, appLogo } =
|
12
|
+
const { appName, appLogo } = useAppInfo();
|
13
13
|
const { avatar: userAvatar } = useCurrentUserProfile();
|
14
14
|
return /*#__PURE__*/ jsxs("header", {
|
15
15
|
ref: navRef,
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import type { UserWithAvatarProps } from './type';
|
3
|
-
export declare function UserWithAvatar({ data, size, mode, className }: UserWithAvatarProps): React.JSX.Element;
|
3
|
+
export declare function UserWithAvatar({ data, size, mode, className, }: UserWithAvatarProps): React.JSX.Element;
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
2
2
|
import "react";
|
3
3
|
import { Link } from "react-router-dom";
|
4
|
-
import {
|
4
|
+
import { useAppInfo } from "../../hooks/useAppInfo.js";
|
5
5
|
import { clsxWithTw } from "../../utils/utils.js";
|
6
6
|
function LogoInfo({ className, logoClassName }) {
|
7
|
-
const { name, avatar } =
|
7
|
+
const { name, avatar } = useAppInfo();
|
8
8
|
return /*#__PURE__*/ jsx("div", {
|
9
9
|
className: clsxWithTw('overflow-hidden text-ellipsis whitespace-nowrap', className),
|
10
10
|
children: /*#__PURE__*/ jsxs(Link, {
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { type ReactNode } from 'react';
|
3
3
|
import type { ITheme } from '../../types';
|
4
|
-
import {
|
4
|
+
import { IThemeTokenMeta } from './util';
|
5
5
|
export interface IBaseThemeProviderProps {
|
6
6
|
defaultTheme?: ITheme;
|
7
|
-
themeMeta?: Partial<
|
7
|
+
themeMeta?: Partial<IThemeTokenMeta>;
|
8
8
|
}
|
9
9
|
interface ThemeProviderProps extends IBaseThemeProviderProps {
|
10
10
|
children: ReactNode;
|
@@ -22,13 +22,13 @@ function ThemeProvider({ children, defaultTheme = 'light', themeMeta = {}, enabl
|
|
22
22
|
useEffect(()=>{
|
23
23
|
const root = window.document.documentElement;
|
24
24
|
if (void 0 !== themeMeta.spacing) {
|
25
|
-
const { rem } = findValueByPixel(
|
25
|
+
const { rem } = findValueByPixel(themeMetaOptions.themeSpaces, themeMeta.spacing) || {
|
26
26
|
rem: '0.25'
|
27
27
|
};
|
28
28
|
root.style.setProperty('--spacing', `${rem}rem`);
|
29
29
|
}
|
30
30
|
if (void 0 !== themeMeta.borderRadius) {
|
31
|
-
const { rem } = findValueByPixel(
|
31
|
+
const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
|
32
32
|
rem: '0.625'
|
33
33
|
};
|
34
34
|
root.style.setProperty('--radius', `${rem}rem`);
|
@@ -44,7 +44,7 @@ function ThemeProvider({ children, defaultTheme = 'light', themeMeta = {}, enabl
|
|
44
44
|
}
|
45
45
|
};
|
46
46
|
const antdTheme = useMemo(()=>{
|
47
|
-
const res = findValueByPixel(
|
47
|
+
const res = findValueByPixel(themeMetaOptions.themeSpaces, themeMeta.spacing) || {
|
48
48
|
pixel: '36',
|
49
49
|
rem: '0.25',
|
50
50
|
size: {
|
@@ -41,7 +41,7 @@ type ThemeColorTokenMap = {
|
|
41
41
|
};
|
42
42
|
export declare const themeColorTokenMap: ThemeColorTokenMap;
|
43
43
|
export declare function getKeyByColor(colorValue: string, theme: keyof ThemeColorTokenMap): string;
|
44
|
-
export declare function findValueByPixel(
|
44
|
+
export declare function findValueByPixel(themeSpaces: typeof themeMetaOptions.themeSpaces | typeof themeMetaOptions.themeRadius, pixelValue?: string | number): {
|
45
45
|
pixel: string;
|
46
46
|
rem: string;
|
47
47
|
};
|
@@ -550,7 +550,8 @@ function getKeyByColor(colorValue, theme) {
|
|
550
550
|
const colorMap = themeColorTokenMap[theme];
|
551
551
|
return Object.keys(colorMap).find((key)=>colorMap[key] === colorValue) || '';
|
552
552
|
}
|
553
|
-
function findValueByPixel(
|
553
|
+
function findValueByPixel(themeSpaces, pixelValue) {
|
554
|
+
if (!pixelValue) return;
|
554
555
|
return themeSpaces.options.find((option)=>option.value.pixel === pixelValue)?.value;
|
555
556
|
}
|
556
557
|
export { findValueByPixel, getKeyByColor, themeColorTokenMap, themeMetaOptions, themeTailwindRadius };
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { type ThemeConfig } from 'antd';
|
2
2
|
import { UIComponentConfig } from './ui-config';
|
3
3
|
export type IThemeMode = 'dark' | 'light' | 'system';
|
4
|
-
export interface
|
4
|
+
export interface IThemeTokenMeta {
|
5
5
|
/**
|
6
6
|
* 品牌色
|
7
7
|
*/
|
@@ -16,5 +16,5 @@ export interface IThemeMeta {
|
|
16
16
|
spacing: number;
|
17
17
|
}
|
18
18
|
export declare const generateTailwindRadiusToken: (radiusRemValue: number) => UIComponentConfig;
|
19
|
-
export declare function generateLightTheme(override?: Partial<
|
20
|
-
export declare function generateDarkTheme(override?: Partial<
|
19
|
+
export declare function generateLightTheme(override?: Partial<IThemeTokenMeta>): ThemeConfig;
|
20
|
+
export declare function generateDarkTheme(override?: Partial<IThemeTokenMeta>): ThemeConfig;
|
@@ -169,7 +169,7 @@ function generateLightTheme(override) {
|
|
169
169
|
token: {
|
170
170
|
...defaultLightTheme.token,
|
171
171
|
...generateColorPrimaryToken(override?.colorPrimary || lightColorPrimary, 'light'),
|
172
|
-
...generateBorderRadiusTokenSyncTailwind(override?.borderRadius
|
172
|
+
...generateBorderRadiusTokenSyncTailwind(override?.borderRadius),
|
173
173
|
...generateSpacingToken(override)
|
174
174
|
}
|
175
175
|
};
|
@@ -180,7 +180,7 @@ function generateDarkTheme(override) {
|
|
180
180
|
token: {
|
181
181
|
...defaultDarkTheme.token,
|
182
182
|
...generateColorPrimaryToken(override?.colorPrimary || darkColorPrimary, 'dark'),
|
183
|
-
...generateBorderRadiusTokenSyncTailwind(override?.borderRadius
|
183
|
+
...generateBorderRadiusTokenSyncTailwind(override?.borderRadius),
|
184
184
|
...generateSpacingToken(override)
|
185
185
|
}
|
186
186
|
};
|
package/lib/hooks/index.d.ts
CHANGED
package/lib/hooks/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { useEffect, useState } from "react";
|
2
2
|
import { getAppInfo } from "../integrations/getAppInfo.js";
|
3
|
-
const
|
3
|
+
const useAppInfo = ()=>{
|
4
4
|
const [appInfo, setAppInfo] = useState(()=>getAppInfo());
|
5
5
|
useEffect(()=>{
|
6
6
|
const handleMetaInfoChanged = ()=>{
|
@@ -17,4 +17,4 @@ const useCurrentAppInfo = ()=>{
|
|
17
17
|
appLogo: appInfo.avatar
|
18
18
|
};
|
19
19
|
};
|
20
|
-
export {
|
20
|
+
export { useAppInfo };
|
package/lib/tailwind-theme.css
CHANGED
@@ -1,5 +1,8 @@
|
|
1
|
-
@
|
2
|
-
@
|
1
|
+
@layer tailwind-base {
|
2
|
+
@import "tailwindcss";
|
3
|
+
}
|
4
|
+
|
5
|
+
@layer antd;
|
3
6
|
|
4
7
|
@layer base {
|
5
8
|
:root {
|
@@ -417,8 +420,6 @@
|
|
417
420
|
}
|
418
421
|
}
|
419
422
|
|
420
|
-
@layer components, utilities;
|
421
|
-
|
422
423
|
@source inline("text-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl,9xl}");
|
423
424
|
|
424
425
|
@source inline("{bg,text,border}-{blue,pink,neutral,red,orange,violet,lime,yellow,green,teal,cyan,indigo,purple,amber,emerald,slate}-{50,{100..900..100},950}");
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@lark-apaas/miaoda-core",
|
3
|
-
"version": "0.1.0-alpha.
|
3
|
+
"version": "0.1.0-alpha.10",
|
4
4
|
"types": "./lib/index.d.ts",
|
5
5
|
"main": "./lib/index.js",
|
6
6
|
"files": [
|
@@ -56,25 +56,9 @@
|
|
56
56
|
"types": "./lib/apis/utils/*.d.ts"
|
57
57
|
}
|
58
58
|
},
|
59
|
-
"scripts": {
|
60
|
-
"tsc": "tsc --declaration",
|
61
|
-
"build": "rslib build",
|
62
|
-
"build:storybook": "storybook build",
|
63
|
-
"bump": "changeset version",
|
64
|
-
"change": "changeset",
|
65
|
-
"check": "biome check --write",
|
66
|
-
"dev": "rslib build --watch",
|
67
|
-
"format": "biome format --write",
|
68
|
-
"storybook": "storybook dev",
|
69
|
-
"test": "echo 0",
|
70
|
-
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
|
71
|
-
"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
|
72
|
-
"prepublishOnly": "npm run build"
|
73
|
-
},
|
74
59
|
"dependencies": {
|
75
60
|
"@ant-design/colors": "^7.2.1",
|
76
61
|
"@ant-design/cssinjs": "^1.24.0",
|
77
|
-
"@lark-apaas/miaoda-inspector": "workspace:*",
|
78
62
|
"@data-loom/js": "0.2.3",
|
79
63
|
"clsx": "~2.0.1",
|
80
64
|
"dayjs": "^1.11.13",
|
@@ -84,14 +68,15 @@
|
|
84
68
|
"sonner": "~2.0.0",
|
85
69
|
"tailwind-merge": "~2.0.0",
|
86
70
|
"tailwind-variants": "0.3.1",
|
87
|
-
"tailwindcss-animate": "^1.0.7"
|
71
|
+
"tailwindcss-animate": "^1.0.7",
|
72
|
+
"@lark-apaas/miaoda-inspector": "0.1.0-alpha.5"
|
88
73
|
},
|
89
74
|
"devDependencies": {
|
90
75
|
"@biomejs/biome": "2.0.6",
|
91
76
|
"@changesets/cli": "^2.29.5",
|
92
77
|
"@rsbuild/core": "~1.4.13",
|
93
78
|
"@rsbuild/plugin-react": "^1.3.4",
|
94
|
-
"@rslib/core": "^0.
|
79
|
+
"@rslib/core": "^0.13.2",
|
95
80
|
"@storybook/addon-essentials": "^8.6.14",
|
96
81
|
"@storybook/addon-interactions": "^8.6.14",
|
97
82
|
"@storybook/addon-links": "^8.6.14",
|
@@ -108,7 +93,7 @@
|
|
108
93
|
"antd": "^5.26.6",
|
109
94
|
"eslint": "^8.57.0",
|
110
95
|
"jsdom": "^26.1.0",
|
111
|
-
"lucide-react": "
|
96
|
+
"lucide-react": "npm:@lark-apaas/lucide-react@0.1.0-alpha.5",
|
112
97
|
"react": "^18.3.1",
|
113
98
|
"react-dom": "^18.3.1",
|
114
99
|
"react-router-dom": "^6.26.2",
|
@@ -122,9 +107,22 @@
|
|
122
107
|
},
|
123
108
|
"peerDependencies": {
|
124
109
|
"antd": ">=5.26.6",
|
125
|
-
"lucide-react": "^0.541.0",
|
126
110
|
"react": ">=16.14.0",
|
127
111
|
"react-dom": ">=16.14.0",
|
128
112
|
"react-router-dom": ">=6.26.2"
|
113
|
+
},
|
114
|
+
"scripts": {
|
115
|
+
"tsc": "tsc --declaration",
|
116
|
+
"build": "rslib build",
|
117
|
+
"build:storybook": "storybook build",
|
118
|
+
"bump": "changeset version",
|
119
|
+
"change": "changeset",
|
120
|
+
"check": "biome check --write",
|
121
|
+
"dev": "rslib build --watch",
|
122
|
+
"format": "biome format --write",
|
123
|
+
"storybook": "storybook dev",
|
124
|
+
"test": "echo 0",
|
125
|
+
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
|
126
|
+
"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix"
|
129
127
|
}
|
130
|
-
}
|
128
|
+
}
|
@@ -1 +0,0 @@
|
|
1
|
-
export * from '../../hooks/useCurrentAppInfo';
|
@@ -1 +0,0 @@
|
|
1
|
-
export * from "../../hooks/useCurrentAppInfo.js";
|