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