Skip to content

Commit 70e8c31

Browse files
caixwcaixw
committed
refactor(components): 动态生成 ColorPanel 中的各种颜色值
1 parent 54072cc commit 70e8c31

4 files changed

Lines changed: 33 additions & 485 deletions

File tree

‎packages/admin/src/plugin.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,7 @@
66
//
77
// NOTE: 每个引用的 plugin 文件应该只包含简单的常量和类型声明，
88
// 不涉及浏览端特有功能引用，比如对 window 对象的引用。
9+
//
10+
// NOTE: 由 vite-plugin-cmfx-about 引用当前包，可以减少当前包的依赖数量。
911

1012
export * from '@admin/pages/system/plugin';

‎packages/components/src/color/picker_preset.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export class PresetPickerPanel implements PickerPanel {
4343
<span
4444
class={joinClass(undefined, styles.color, signal[0]() === v ? styles.selected : '')}
4545
style={{ background: v }}
46+
title={v}
4647
onclick={() => {
4748
signal[1](v);
4849
}}

‎packages/components/src/color/picker_vars.tsx‎

Lines changed: 27 additions & 263 deletions
Original file line numberDiff line numberDiff line change
@@ -8,271 +8,34 @@ import { joinClass } from '@components/base';
88
import type { PickerPanel } from './picker';
99
import styles from './style.module.css';
1010

11-
const vars: Array<string> = [
12-
'var(--color-red-50)',
13-
'var(--color-red-100)',
14-
'var(--color-red-200)',
15-
'var(--color-red-300)',
16-
'var(--color-red-400)',
17-
'var(--color-red-500)',
18-
'var(--color-red-600)',
19-
'var(--color-red-700)',
20-
'var(--color-red-800)',
21-
'var(--color-red-900)',
22-
'var(--color-red-950)',
23-
24-
'var(--color-orange-50)',
25-
'var(--color-orange-100)',
26-
'var(--color-orange-200)',
27-
'var(--color-orange-300)',
28-
'var(--color-orange-400)',
29-
'var(--color-orange-500)',
30-
'var(--color-orange-600)',
31-
'var(--color-orange-700)',
32-
'var(--color-orange-800)',
33-
'var(--color-orange-900)',
34-
'var(--color-orange-950)',
35-
36-
'var(--color-amber-50)',
37-
'var(--color-amber-100)',
38-
'var(--color-amber-200)',
39-
'var(--color-amber-300)',
40-
'var(--color-amber-400)',
41-
'var(--color-amber-500)',
42-
'var(--color-amber-600)',
43-
'var(--color-amber-700)',
44-
'var(--color-amber-800)',
45-
'var(--color-amber-900)',
46-
'var(--color-amber-950)',
47-
48-
'var(--color-yellow-50)',
49-
'var(--color-yellow-100)',
50-
'var(--color-yellow-200)',
51-
'var(--color-yellow-300)',
52-
'var(--color-yellow-400)',
53-
'var(--color-yellow-500)',
54-
'var(--color-yellow-600)',
55-
'var(--color-yellow-700)',
56-
'var(--color-yellow-800)',
57-
'var(--color-yellow-900)',
58-
'var(--color-yellow-950)',
59-
60-
'var(--color-lime-50)',
61-
'var(--color-lime-100)',
62-
'var(--color-lime-200)',
63-
'var(--color-lime-300)',
64-
'var(--color-lime-400)',
65-
'var(--color-lime-500)',
66-
'var(--color-lime-600)',
67-
'var(--color-lime-700)',
68-
'var(--color-lime-800)',
69-
'var(--color-lime-900)',
70-
'var(--color-lime-950)',
71-
72-
'var(--color-green-50)',
73-
'var(--color-green-100)',
74-
'var(--color-green-200)',
75-
'var(--color-green-300)',
76-
'var(--color-green-400)',
77-
'var(--color-green-500)',
78-
'var(--color-green-600)',
79-
'var(--color-green-700)',
80-
'var(--color-green-800)',
81-
'var(--color-green-900)',
82-
'var(--color-green-950)',
83-
84-
'var(--color-emerald-50)',
85-
'var(--color-emerald-100)',
86-
'var(--color-emerald-200)',
87-
'var(--color-emerald-300)',
88-
'var(--color-emerald-400)',
89-
'var(--color-emerald-500)',
90-
'var(--color-emerald-600)',
91-
'var(--color-emerald-700)',
92-
'var(--color-emerald-800)',
93-
'var(--color-emerald-900)',
94-
'var(--color-emerald-950)',
95-
96-
'var(--color-teal-50)',
97-
'var(--color-teal-100)',
98-
'var(--color-teal-200)',
99-
'var(--color-teal-300)',
100-
'var(--color-teal-400)',
101-
'var(--color-teal-500)',
102-
'var(--color-teal-600)',
103-
'var(--color-teal-700)',
104-
'var(--color-teal-800)',
105-
'var(--color-teal-900)',
106-
'var(--color-teal-950)',
107-
108-
'var(--color-cyan-50)',
109-
'var(--color-cyan-100)',
110-
'var(--color-cyan-200)',
111-
'var(--color-cyan-300)',
112-
'var(--color-cyan-400)',
113-
'var(--color-cyan-500)',
114-
'var(--color-cyan-600)',
115-
'var(--color-cyan-700)',
116-
'var(--color-cyan-800)',
117-
'var(--color-cyan-900)',
118-
'var(--color-cyan-950)',
119-
120-
'var(--color-sky-50)',
121-
'var(--color-sky-100)',
122-
'var(--color-sky-200)',
123-
'var(--color-sky-300)',
124-
'var(--color-sky-400)',
125-
'var(--color-sky-500)',
126-
'var(--color-sky-600)',
127-
'var(--color-sky-700)',
128-
'var(--color-sky-800)',
129-
'var(--color-sky-900)',
130-
'var(--color-sky-950)',
131-
132-
'var(--color-blue-50)',
133-
'var(--color-blue-100)',
134-
'var(--color-blue-200)',
135-
'var(--color-blue-300)',
136-
'var(--color-blue-400)',
137-
'var(--color-blue-500)',
138-
'var(--color-blue-600)',
139-
'var(--color-blue-700)',
140-
'var(--color-blue-800)',
141-
'var(--color-blue-900)',
142-
'var(--color-blue-950)',
143-
144-
'var(--color-indigo-50)',
145-
'var(--color-indigo-100)',
146-
'var(--color-indigo-200)',
147-
'var(--color-indigo-300)',
148-
'var(--color-indigo-400)',
149-
'var(--color-indigo-500)',
150-
'var(--color-indigo-600)',
151-
'var(--color-indigo-700)',
152-
'var(--color-indigo-800)',
153-
'var(--color-indigo-900)',
154-
'var(--color-indigo-950)',
155-
156-
'var(--color-violet-50)',
157-
'var(--color-violet-100)',
158-
'var(--color-violet-200)',
159-
'var(--color-violet-300)',
160-
'var(--color-violet-400)',
161-
'var(--color-violet-500)',
162-
'var(--color-violet-600)',
163-
'var(--color-violet-700)',
164-
'var(--color-violet-800)',
165-
'var(--color-violet-900)',
166-
'var(--color-violet-950)',
167-
168-
'var(--color-purple-50)',
169-
'var(--color-purple-100)',
170-
'var(--color-purple-200)',
171-
'var(--color-purple-300)',
172-
'var(--color-purple-400)',
173-
'var(--color-purple-500)',
174-
'var(--color-purple-600)',
175-
'var(--color-purple-700)',
176-
'var(--color-purple-800)',
177-
'var(--color-purple-900)',
178-
'var(--color-purple-950)',
179-
180-
'var(--color-fuchsia-50)',
181-
'var(--color-fuchsia-100)',
182-
'var(--color-fuchsia-200)',
183-
'var(--color-fuchsia-300)',
184-
'var(--color-fuchsia-400)',
185-
'var(--color-fuchsia-500)',
186-
'var(--color-fuchsia-600)',
187-
'var(--color-fuchsia-700)',
188-
'var(--color-fuchsia-800)',
189-
'var(--color-fuchsia-900)',
190-
'var(--color-fuchsia-950)',
191-
192-
'var(--color-pink-50)',
193-
'var(--color-pink-100)',
194-
'var(--color-pink-200)',
195-
'var(--color-pink-300)',
196-
'var(--color-pink-400)',
197-
'var(--color-pink-500)',
198-
'var(--color-pink-600)',
199-
'var(--color-pink-700)',
200-
'var(--color-pink-800)',
201-
'var(--color-pink-900)',
202-
'var(--color-pink-950)',
203-
204-
'var(--color-rose-50)',
205-
'var(--color-rose-100)',
206-
'var(--color-rose-200)',
207-
'var(--color-rose-300)',
208-
'var(--color-rose-400)',
209-
'var(--color-rose-500)',
210-
'var(--color-rose-600)',
211-
'var(--color-rose-700)',
212-
'var(--color-rose-800)',
213-
'var(--color-rose-900)',
214-
'var(--color-rose-950)',
215-
216-
'var(--color-slate-50)',
217-
'var(--color-slate-100)',
218-
'var(--color-slate-200)',
219-
'var(--color-slate-300)',
220-
'var(--color-slate-400)',
221-
'var(--color-slate-500)',
222-
'var(--color-slate-600)',
223-
'var(--color-slate-700)',
224-
'var(--color-slate-800)',
225-
'var(--color-slate-900)',
226-
'var(--color-slate-950)',
227-
228-
'var(--color-gray-50)',
229-
'var(--color-gray-100)',
230-
'var(--color-gray-200)',
231-
'var(--color-gray-300)',
232-
'var(--color-gray-400)',
233-
'var(--color-gray-500)',
234-
'var(--color-gray-600)',
235-
'var(--color-gray-700)',
236-
'var(--color-gray-800)',
237-
'var(--color-gray-900)',
238-
'var(--color-gray-950)',
239-
240-
'var(--color-zinc-50)',
241-
'var(--color-zinc-100)',
242-
'var(--color-zinc-200)',
243-
'var(--color-zinc-300)',
244-
'var(--color-zinc-400)',
245-
'var(--color-zinc-500)',
246-
'var(--color-zinc-600)',
247-
'var(--color-zinc-700)',
248-
'var(--color-zinc-800)',
249-
'var(--color-zinc-900)',
250-
'var(--color-zinc-950)',
11+
const names = [
12+
'red',
13+
'orange',
14+
'amber',
15+
'yellow',
16+
'lime',
17+
'green',
18+
'emerald',
19+
'teal',
20+
'cyan',
21+
'sky',
22+
'blue',
23+
'indigo',
24+
'violet',
25+
'purple',
26+
'fuchsia',
27+
'pink',
28+
'rose',
29+
'slate',
30+
'gray',
31+
'zinc',
32+
'neutral',
33+
'stone',
34+
] as const;
25135

252-
'var(--color-neutral-50)',
253-
'var(--color-neutral-100)',
254-
'var(--color-neutral-200)',
255-
'var(--color-neutral-300)',
256-
'var(--color-neutral-400)',
257-
'var(--color-neutral-500)',
258-
'var(--color-neutral-600)',
259-
'var(--color-neutral-700)',
260-
'var(--color-neutral-800)',
261-
'var(--color-neutral-900)',
262-
'var(--color-neutral-950)',
36+
const values = [50, 100, 200, 300, 400, 500, 600, 700, 800, 950] as const;
26337

264-
'var(--color-stone-50)',
265-
'var(--color-stone-100)',
266-
'var(--color-stone-200)',
267-
'var(--color-stone-300)',
268-
'var(--color-stone-400)',
269-
'var(--color-stone-500)',
270-
'var(--color-stone-600)',
271-
'var(--color-stone-700)',
272-
'var(--color-stone-800)',
273-
'var(--color-stone-900)',
274-
'var(--color-stone-950)',
275-
] as const;
38+
const vars = values.flatMap(val => names.map(name => `var(--color-${name}-${val})`));
27639

27740
/**
27841
* tailwind 提供的颜色列表 {@link PickerPanel} 实现
@@ -317,6 +80,7 @@ export class TailwindVarsPickerPanel implements PickerPanel {
31780
<span
31881
class={cls}
31982
style={{ background: v }}
83+
title={v}
32084
onclick={() => {
32185
if (this.#disabled.includes(v)) {
32286
return;

0 commit comments

Comments
 (0)