@blocklet/pages-kit 0.4.157 → 0.4.159
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/cjs/builtin/color-picker.js +183 -70
- package/lib/cjs/contexts/color.js +33 -33
- package/lib/cjs/tsconfig.tsbuildinfo +1 -1
- package/lib/cjs/utils/data-source.js +3 -3
- package/lib/cjs/utils/style.js +0 -4
- package/lib/esm/builtin/color-picker.js +183 -72
- package/lib/esm/contexts/color.js +31 -34
- package/lib/esm/tsconfig.tsbuildinfo +1 -1
- package/lib/esm/utils/data-source.js +3 -3
- package/lib/esm/utils/style.js +0 -3
- package/lib/types/builtin/color-picker.d.ts +18 -3
- package/lib/types/contexts/color.d.ts +3 -2
- package/lib/types/tsconfig.tsbuildinfo +1 -1
- package/lib/types/utils/style.d.ts +0 -1
- package/package.json +5 -5
|
@@ -8,9 +8,9 @@ function setPageDataSource(page, state, locale, pageData) {
|
|
|
8
8
|
page.locales = {};
|
|
9
9
|
}
|
|
10
10
|
page.locales[locale] = (0, lodash_1.cloneDeep)(page.locales[locale] || {});
|
|
11
|
-
page.locales[locale].title =
|
|
12
|
-
page.locales[locale].image =
|
|
13
|
-
page.locales[locale].description =
|
|
11
|
+
page.locales[locale].title = page.locales[locale].title || pageData.title;
|
|
12
|
+
page.locales[locale].image = page.locales[locale].image || pageData.image;
|
|
13
|
+
page.locales[locale].description = page.locales[locale].description || pageData.description;
|
|
14
14
|
// 遍历 pageData 的每个 key
|
|
15
15
|
Object.entries(pageData.sectionsData).forEach(([sectionKey, sectionData]) => {
|
|
16
16
|
try {
|
package/lib/cjs/utils/style.js
CHANGED
|
@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.isMuiColorKey = void 0;
|
|
7
|
-
exports.getBlockletTheme = getBlockletTheme;
|
|
8
7
|
exports.isGradient = isGradient;
|
|
9
8
|
exports.isColorString = isColorString;
|
|
10
9
|
exports.getSafeGradient = getSafeGradient;
|
|
@@ -33,9 +32,6 @@ const blockletTheme = (0, Theme_1.createTheme)({
|
|
|
33
32
|
},
|
|
34
33
|
},
|
|
35
34
|
});
|
|
36
|
-
function getBlockletTheme() {
|
|
37
|
-
return blockletTheme;
|
|
38
|
-
}
|
|
39
35
|
function isGradient(color) {
|
|
40
36
|
if (color?.trim()) {
|
|
41
37
|
try {
|
|
@@ -1,18 +1,97 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Empty from '@arcblock/ux/lib/Empty';
|
|
3
3
|
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
|
|
4
|
-
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, ButtonGroup, Typography, Tooltip, Skeleton,
|
|
4
|
+
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, ButtonGroup, Typography, Tooltip, Skeleton, Alert, } from '@mui/material';
|
|
5
5
|
import { useBoolean, useLocalStorageState, useReactive } from 'ahooks';
|
|
6
6
|
import { Suspense, forwardRef, lazy, useCallback, useImperativeHandle, useRef } from 'react';
|
|
7
7
|
import tinycolor from 'tinycolor2';
|
|
8
8
|
import { useMuiColorPalette } from '../contexts/color';
|
|
9
|
-
import {
|
|
9
|
+
import { isColorString, isGradient, getSafeGradient, getTransparentBackground } from '../utils/style';
|
|
10
10
|
const ColorPickerLib = lazy(() => import('react-best-gradient-color-picker'));
|
|
11
11
|
const HEIGHT = 400;
|
|
12
12
|
const WIDTH = 270;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
export function AlternateColorIndicator({ value, sx = {} }) {
|
|
14
|
+
if (!value)
|
|
15
|
+
return null;
|
|
16
|
+
return (_jsx(Box, { sx: {
|
|
17
|
+
position: 'absolute',
|
|
18
|
+
right: 0,
|
|
19
|
+
bottom: 0,
|
|
20
|
+
width: '100%',
|
|
21
|
+
height: '100%',
|
|
22
|
+
clipPath: 'polygon(100% 50%, 100% 100%, 50% 100%)',
|
|
23
|
+
zIndex: 1,
|
|
24
|
+
...(value === 'transparent' ? { background: getTransparentBackground() } : { backgroundColor: value }),
|
|
25
|
+
...sx,
|
|
26
|
+
} }));
|
|
27
|
+
}
|
|
28
|
+
export function ThemeModeLabel({ mode, position = 'top-left', sx = {} }) {
|
|
29
|
+
// 根据位置设置样式
|
|
30
|
+
const positionStyles = position === 'top-left' ? { top: 10, left: 10 } : { bottom: 10, right: 10 };
|
|
31
|
+
const { t } = useLocaleContext();
|
|
32
|
+
// 根据模式设置样式
|
|
33
|
+
const modeStyles = mode === 'dark'
|
|
34
|
+
? { bgcolor: 'rgba(0,0,0,0.5)', color: '#fff' }
|
|
35
|
+
: { bgcolor: 'rgba(255,255,255,0.7)', color: '#000' };
|
|
36
|
+
return (_jsx(Box, { sx: {
|
|
37
|
+
position: 'absolute',
|
|
38
|
+
py: 0.5,
|
|
39
|
+
px: 1,
|
|
40
|
+
height: 26,
|
|
41
|
+
borderRadius: '4px',
|
|
42
|
+
display: 'flex',
|
|
43
|
+
alignItems: 'center',
|
|
44
|
+
justifyContent: 'center',
|
|
45
|
+
fontSize: '12px',
|
|
46
|
+
fontWeight: 'bold',
|
|
47
|
+
zIndex: 3,
|
|
48
|
+
...positionStyles,
|
|
49
|
+
...modeStyles,
|
|
50
|
+
...sx,
|
|
51
|
+
}, children: t(mode === 'dark' ? 'maker.configColorDarkMode' : 'maker.configColorLightMode') }));
|
|
52
|
+
}
|
|
53
|
+
export function CornerBorder({ border, cornerSize = 20, borderRadius = 8, sx = {} }) {
|
|
54
|
+
const commonStyle = {
|
|
55
|
+
position: 'absolute',
|
|
56
|
+
width: cornerSize,
|
|
57
|
+
height: cornerSize,
|
|
58
|
+
zIndex: 10,
|
|
59
|
+
pointerEvents: 'none',
|
|
60
|
+
};
|
|
61
|
+
const offset = 2;
|
|
62
|
+
return (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
|
|
63
|
+
...commonStyle,
|
|
64
|
+
top: offset,
|
|
65
|
+
left: offset,
|
|
66
|
+
borderTop: border,
|
|
67
|
+
borderLeft: border,
|
|
68
|
+
borderTopLeftRadius: borderRadius,
|
|
69
|
+
...sx,
|
|
70
|
+
} }), _jsx(Box, { sx: {
|
|
71
|
+
...commonStyle,
|
|
72
|
+
top: offset,
|
|
73
|
+
right: offset,
|
|
74
|
+
borderTop: border,
|
|
75
|
+
borderRight: border,
|
|
76
|
+
borderTopRightRadius: borderRadius,
|
|
77
|
+
...sx,
|
|
78
|
+
} }), _jsx(Box, { sx: {
|
|
79
|
+
...commonStyle,
|
|
80
|
+
bottom: offset,
|
|
81
|
+
left: offset,
|
|
82
|
+
borderBottom: border,
|
|
83
|
+
borderLeft: border,
|
|
84
|
+
borderBottomLeftRadius: borderRadius,
|
|
85
|
+
...sx,
|
|
86
|
+
} }), _jsx(Box, { sx: {
|
|
87
|
+
...commonStyle,
|
|
88
|
+
bottom: offset,
|
|
89
|
+
right: offset,
|
|
90
|
+
borderBottom: border,
|
|
91
|
+
borderRight: border,
|
|
92
|
+
borderBottomRightRadius: borderRadius,
|
|
93
|
+
...sx,
|
|
94
|
+
} })] }));
|
|
16
95
|
}
|
|
17
96
|
export function ColorItem({ color, sx = {}, ...props }) {
|
|
18
97
|
isColorString(color);
|
|
@@ -26,21 +105,19 @@ export function ColorItem({ color, sx = {}, ...props }) {
|
|
|
26
105
|
else {
|
|
27
106
|
styleMap.backgroundColor = color;
|
|
28
107
|
}
|
|
29
|
-
return (
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
...styleMap,
|
|
43
|
-
}, ...props }) }));
|
|
108
|
+
return (_jsx(Box, { sx: {
|
|
109
|
+
width: '100%',
|
|
110
|
+
height: '100%',
|
|
111
|
+
cursor: 'pointer',
|
|
112
|
+
transition: 'opacity 0.2s',
|
|
113
|
+
border: '1px solid #ccc',
|
|
114
|
+
borderRadius: 0.5,
|
|
115
|
+
'&:hover': {
|
|
116
|
+
opacity: 0.75,
|
|
117
|
+
},
|
|
118
|
+
...sx,
|
|
119
|
+
...styleMap,
|
|
120
|
+
}, ...props }));
|
|
44
121
|
}
|
|
45
122
|
export const ConfigColorDialog = forwardRef(function ConfigColorDialog({ onSave, enableMuiPalette = true }, ref) {
|
|
46
123
|
const state = useReactive({
|
|
@@ -52,6 +129,8 @@ export const ConfigColorDialog = forwardRef(function ConfigColorDialog({ onSave,
|
|
|
52
129
|
defaultValue: 0,
|
|
53
130
|
});
|
|
54
131
|
const muiPalette = useMuiColorPalette();
|
|
132
|
+
const mode = muiPalette?.theme?.palette?.mode;
|
|
133
|
+
const isDark = mode === 'dark';
|
|
55
134
|
const previewStyle = {};
|
|
56
135
|
if (state.value) {
|
|
57
136
|
if (isGradient(state.value)) {
|
|
@@ -115,15 +194,21 @@ export const ConfigColorDialog = forwardRef(function ConfigColorDialog({ onSave,
|
|
|
115
194
|
};
|
|
116
195
|
// 直接从 hook 获取分组
|
|
117
196
|
const { groupedMuiColors } = muiPalette;
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
197
|
+
const rectWrapperBorder = `2px solid ${muiPalette?.theme?.palette?.divider}`;
|
|
198
|
+
return (_jsxs(Dialog, { disableEnforceFocus: true, open: open, onClose: handleClose, children: [_jsxs(DialogTitle, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Typography, { variant: "inherit", children: t('maker.configColor') }), enableMuiPalette && (_jsx(ButtonGroup, { size: "small", "aria-label": "color mode selector", children: [
|
|
199
|
+
{
|
|
200
|
+
label: t('maker.configColorMuiTheme') || 'Theme Color',
|
|
201
|
+
value: 0,
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
label: t('maker.configColorCustomColor') || 'Custom Color',
|
|
205
|
+
value: 1,
|
|
206
|
+
},
|
|
207
|
+
].map((item) => (_jsx(Button, { variant: activeTab === item.value ? 'contained' : 'outlined', onClick: () => setActiveTab(item.value), sx: {
|
|
208
|
+
fontWeight: 500,
|
|
209
|
+
textTransform: 'none',
|
|
210
|
+
minWidth: 'unset',
|
|
211
|
+
}, children: item.label }))) }))] }), _jsxs(DialogContent, { sx: { width: 600, display: 'flex', flexDirection: 'row', gap: 2, overflowX: 'hidden' }, children: [_jsxs(Box, { sx: {
|
|
127
212
|
...previewStyle,
|
|
128
213
|
flex: '0 0 270px',
|
|
129
214
|
borderRadius: 1,
|
|
@@ -132,7 +217,13 @@ export const ConfigColorDialog = forwardRef(function ConfigColorDialog({ onSave,
|
|
|
132
217
|
justifyContent: 'center',
|
|
133
218
|
position: 'sticky',
|
|
134
219
|
top: 0,
|
|
135
|
-
|
|
220
|
+
'&::before, &::after': {
|
|
221
|
+
content: 'none',
|
|
222
|
+
},
|
|
223
|
+
}, children: [_jsx(CornerBorder, { border: rectWrapperBorder }), !state.value && _jsx(Empty, { children: t('error.notConfig') }), state.value &&
|
|
224
|
+
isActiveMuiTab &&
|
|
225
|
+
muiPalette.isMuiColorKey(state.originalMuiKey || '') &&
|
|
226
|
+
state.value !== 'transparent' && _jsx(ThemeModeLabel, { mode: isDark ? 'dark' : 'light' }), state.originalMuiKey && isActiveMuiTab && (_jsx(Typography, { variant: "body2", sx: {
|
|
136
227
|
bgcolor: 'rgba(255,255,255,0.7)',
|
|
137
228
|
px: 2,
|
|
138
229
|
py: 1,
|
|
@@ -140,50 +231,70 @@ export const ConfigColorDialog = forwardRef(function ConfigColorDialog({ onSave,
|
|
|
140
231
|
color: '#000',
|
|
141
232
|
maxWidth: '90%',
|
|
142
233
|
textAlign: 'center',
|
|
143
|
-
|
|
234
|
+
position: 'relative',
|
|
235
|
+
zIndex: 2,
|
|
236
|
+
}, children: state.originalMuiKey })), state.originalMuiKey && isActiveMuiTab && muiPalette.isMuiColorKey(state.originalMuiKey || '') && (_jsx(_Fragment, { children: (() => {
|
|
237
|
+
const colorInfo = muiPalette.muiPaletteColors.find((c) => c.colorKey === state.originalMuiKey);
|
|
238
|
+
if (colorInfo?.alternateColorValue) {
|
|
239
|
+
return (_jsxs(_Fragment, { children: [_jsx(AlternateColorIndicator, { value: colorInfo.alternateColorValue, sx: {
|
|
240
|
+
borderRadius: 1,
|
|
241
|
+
} }), _jsx(ThemeModeLabel, { mode: !isDark ? 'dark' : 'light', position: "bottom-right" })] }));
|
|
242
|
+
}
|
|
243
|
+
return null;
|
|
244
|
+
})() }))] }, "color-preview"), _jsx(Box, { sx: { flex: 1 }, children: isActiveMuiTab ? (
|
|
144
245
|
// MUI 主题色面板
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
246
|
+
_jsxs(Box, { sx: { height: HEIGHT }, children: [_jsx(Alert, { severity: "info", sx: { mb: 1.5, mr: -1.5, py: 0, px: 1.5 }, children: t('maker.configColorMuiThemeInfo') }), Object.entries(groupedMuiColors).map(([palette, paletteColors]) => (_jsxs(Box, { sx: { pb: 1.5 }, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, sx: { textTransform: 'capitalize', mb: 0.5, lineHeight: 1 }, children: palette }), _jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: paletteColors.map((item) => {
|
|
247
|
+
let selectedColor = '';
|
|
248
|
+
if (state.originalMuiKey === item.colorKey) {
|
|
249
|
+
if (item.colorValue === 'transparent') {
|
|
250
|
+
selectedColor = 'rgba(0,0,0,0.7)';
|
|
251
|
+
}
|
|
252
|
+
else if (tinycolor(item.colorValue).isDark()) {
|
|
253
|
+
selectedColor = 'rgba(255,255,255,0.8)';
|
|
254
|
+
}
|
|
255
|
+
else {
|
|
256
|
+
selectedColor = 'rgba(0,0,0,0.7)';
|
|
257
|
+
}
|
|
156
258
|
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
},
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
:
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
259
|
+
// 是否有另一种模式的颜色值
|
|
260
|
+
const hasAlternateColor = !!item.alternateColorValue;
|
|
261
|
+
return (_jsx(Tooltip, { title: `${item.colorKey}${hasAlternateColor ? t('maker.configColorMuiThemeWithAlternateColor') : ''}`, sx: {
|
|
262
|
+
zIndex: 99999,
|
|
263
|
+
}, children: _jsxs(Box, { onClick: () => {
|
|
264
|
+
state.value = item.colorValue;
|
|
265
|
+
state.originalMuiKey = item.colorKey;
|
|
266
|
+
}, sx: {
|
|
267
|
+
width: 32,
|
|
268
|
+
height: 32,
|
|
269
|
+
border: state.originalMuiKey === item.colorKey
|
|
270
|
+
? `2px solid ${isDark ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.7)'}`
|
|
271
|
+
: '1px solid #ccc',
|
|
272
|
+
borderRadius: 0.5,
|
|
273
|
+
cursor: 'pointer',
|
|
274
|
+
'&:hover': { opacity: 0.8 },
|
|
275
|
+
display: 'flex',
|
|
276
|
+
alignItems: 'center',
|
|
277
|
+
justifyContent: 'center',
|
|
278
|
+
position: 'relative',
|
|
279
|
+
overflow: 'hidden',
|
|
280
|
+
}, children: [_jsx(Box, { sx: {
|
|
281
|
+
position: 'absolute',
|
|
282
|
+
top: 0,
|
|
283
|
+
right: 0,
|
|
284
|
+
bottom: 0,
|
|
285
|
+
left: 0,
|
|
286
|
+
...(item.colorValue === 'transparent'
|
|
287
|
+
? { background: getTransparentBackground() }
|
|
288
|
+
: { backgroundColor: item.colorValue }),
|
|
289
|
+
} }), hasAlternateColor && _jsx(AlternateColorIndicator, { value: item.alternateColorValue }), state.originalMuiKey === item.colorKey && (_jsx("i", { className: "i-mdi:check", style: {
|
|
290
|
+
color: selectedColor,
|
|
291
|
+
fontSize: '1.2rem',
|
|
292
|
+
position: 'relative',
|
|
293
|
+
zIndex: 2,
|
|
294
|
+
} }))] }) }, item.colorKey));
|
|
295
|
+
}) })] }, palette)))] })) : (
|
|
185
296
|
// 自定义颜色选择器
|
|
186
|
-
_jsx(Box, { sx: { overflowY: 'auto', overflowX: 'hidden' }, children: _jsx(Suspense, { fallback: _jsx(Skeleton, { variant: "rectangular", width: WIDTH, height: HEIGHT }), children: _jsx(ColorPickerLib, { disableDarkMode:
|
|
297
|
+
_jsx(Box, { sx: { overflowY: 'auto', overflowX: 'hidden' }, children: _jsx(Suspense, { fallback: _jsx(Skeleton, { variant: "rectangular", width: WIDTH, height: HEIGHT }), children: _jsx(ColorPickerLib, { disableDarkMode: !isDark, disableLightMode: isDark, width: WIDTH,
|
|
187
298
|
// menu color picker height
|
|
188
299
|
height: WIDTH, value: state.value, onChange: (value) => {
|
|
189
300
|
state.value = value;
|
|
@@ -1,16 +1,22 @@
|
|
|
1
|
-
|
|
1
|
+
import { createTheme } from '@arcblock/ux/lib/Theme';
|
|
2
|
+
import { useTheme } from '@mui/material/styles';
|
|
3
|
+
import get from 'lodash/get';
|
|
2
4
|
import { useCallback, useMemo } from 'react';
|
|
3
|
-
import { isMuiColorKey, colorConvert
|
|
5
|
+
import { isMuiColorKey, colorConvert } from '../utils/style';
|
|
4
6
|
/**
|
|
5
7
|
* Hook 用于获取和操作 MUI 主题色
|
|
6
8
|
*/
|
|
7
9
|
export function useMuiColorPalette() {
|
|
8
|
-
|
|
9
|
-
const theme = getBlockletTheme();
|
|
10
|
-
// const theme = useTheme();
|
|
10
|
+
const theme = useTheme();
|
|
11
11
|
// 创建 MUI 色板预设及映射关系
|
|
12
12
|
const muiPaletteColors = useMemo(() => {
|
|
13
|
+
const isDark = theme.palette.mode === 'dark';
|
|
13
14
|
const colors = [];
|
|
15
|
+
const alternateTheme = createTheme({
|
|
16
|
+
palette: {
|
|
17
|
+
mode: isDark ? 'light' : 'dark',
|
|
18
|
+
},
|
|
19
|
+
});
|
|
14
20
|
// 定义调色板配置
|
|
15
21
|
const paletteConfig = [
|
|
16
22
|
// 特殊颜色组
|
|
@@ -68,47 +74,39 @@ export function useMuiColorPalette() {
|
|
|
68
74
|
// 统一处理各种调色板颜色
|
|
69
75
|
paletteConfig.forEach((config) => {
|
|
70
76
|
const { keys, variants, format, accessor } = config;
|
|
77
|
+
const formatColors = (key, variant) => {
|
|
78
|
+
try {
|
|
79
|
+
const paletteObj = accessor(key);
|
|
80
|
+
const colorKey = format(key, variant || '');
|
|
81
|
+
const alternateColorValue = get(alternateTheme, `palette.${colorKey}`, '');
|
|
82
|
+
if (paletteObj && typeof paletteObj === 'object') {
|
|
83
|
+
const colorValue = String(paletteObj[variant ?? key] || '');
|
|
84
|
+
if (colorValue) {
|
|
85
|
+
colors.push({ colorKey, colorValue, group: config.type, alternateColorValue });
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
catch (e) {
|
|
90
|
+
// 忽略错误
|
|
91
|
+
}
|
|
92
|
+
};
|
|
71
93
|
if (variants) {
|
|
72
94
|
// 处理带变体的调色板（如primary.main）
|
|
73
95
|
keys.forEach((key) => {
|
|
74
96
|
variants.forEach((variant) => {
|
|
75
|
-
|
|
76
|
-
const paletteObj = accessor(key);
|
|
77
|
-
if (paletteObj && typeof paletteObj === 'object') {
|
|
78
|
-
const colorValue = String(paletteObj[variant] || '');
|
|
79
|
-
if (colorValue) {
|
|
80
|
-
colors.push({ colorKey: format(key, variant), colorValue, group: config.type });
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
catch (e) {
|
|
85
|
-
// 忽略错误
|
|
86
|
-
}
|
|
97
|
+
formatColors(key, variant);
|
|
87
98
|
});
|
|
88
99
|
});
|
|
89
100
|
}
|
|
90
101
|
else {
|
|
91
102
|
// 处理不带变体的调色板（如grey.500）
|
|
92
103
|
keys.forEach((key) => {
|
|
93
|
-
|
|
94
|
-
const paletteObj = accessor();
|
|
95
|
-
if (paletteObj && typeof paletteObj === 'object') {
|
|
96
|
-
const colorValue = String(paletteObj[key] || '');
|
|
97
|
-
if (colorValue) {
|
|
98
|
-
colors.push({ colorKey: format(key), colorValue, group: config.type });
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
catch (e) {
|
|
103
|
-
// 忽略错误
|
|
104
|
-
}
|
|
104
|
+
formatColors(key);
|
|
105
105
|
});
|
|
106
106
|
}
|
|
107
107
|
});
|
|
108
108
|
return colors;
|
|
109
109
|
}, [theme]);
|
|
110
|
-
// 提取预设颜色数组 (仅颜色值)
|
|
111
|
-
const presetColors = useMemo(() => muiPaletteColors.map((color) => color.colorValue), [muiPaletteColors]);
|
|
112
110
|
// 根据颜色值获取 MUI 键名
|
|
113
111
|
const getMuiKeyByColor = useCallback((colorValue) => {
|
|
114
112
|
const found = muiPaletteColors.find((item) => item.colorValue === colorValue);
|
|
@@ -126,12 +124,12 @@ export function useMuiColorPalette() {
|
|
|
126
124
|
// 颜色分组逻辑
|
|
127
125
|
const groupedMuiColors = useMemo(() => {
|
|
128
126
|
const groups = {};
|
|
129
|
-
muiPaletteColors.forEach(({ colorKey, colorValue, group }) => {
|
|
127
|
+
muiPaletteColors.forEach(({ colorKey, colorValue, group, alternateColorValue }) => {
|
|
130
128
|
if (group) {
|
|
131
129
|
if (!groups[group]) {
|
|
132
130
|
groups[group] = [];
|
|
133
131
|
}
|
|
134
|
-
groups[group].push({ colorKey, colorValue });
|
|
132
|
+
groups[group].push({ colorKey, colorValue, alternateColorValue });
|
|
135
133
|
}
|
|
136
134
|
});
|
|
137
135
|
return groups;
|
|
@@ -139,7 +137,6 @@ export function useMuiColorPalette() {
|
|
|
139
137
|
return {
|
|
140
138
|
muiPaletteColors,
|
|
141
139
|
groupedMuiColors,
|
|
142
|
-
presetColors,
|
|
143
140
|
getMuiKeyByColor,
|
|
144
141
|
getColorByMuiKey,
|
|
145
142
|
isMuiColorKey: isMuiColorKeyHook,
|