xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成M3动态Scheme的创建。

Browse Source
This commit is contained in:
徐涛 2025-02-17 09:28:33 +08:00
parent 9b6f4ace14
commit 84c164b2c8
2 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/material-3-scheme.ts
View File

@ -64,7 +64,7 @@ export type MaterialDesign3DynamicSchemeSource = {
error: string | null;
custom_colors?: Record<string, string>;
variant: number | null;
constrastLevel: number | null;
contrastLevel: number | null;
harmonizeCustoms: boolean | null;
};

36
src/page-components/scheme/m3-dynamic-scheme/Builder.tsx
View File

@ -8,6 +8,7 @@ import { VSegmentedControl } from '../../../components/VSegmentedControl';
import { MaterialDesign3DynamicSchemeStorage } from '../../../material-3-scheme';
import { Option, SchemeContent } from '../../../models';
import { useUpdateScheme } from '../../../stores/schemes';
import { mapToObject } from '../../../utls';
import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
import styles from './Builder.module.css';
@ -46,7 +47,7 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
return [];
}, []);
const [contrastLevel, setContrastLevel] = useState<number>(
scheme.schemeStorage.source?.constrastLevel ?? 0,
() => scheme.schemeStorage.source?.contrastLevel ?? 1,
);
const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
@ -61,7 +62,7 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
try {
const dynamicVariant = Number(formData.get('variant'));
const contrastLevel = Number(formData.get('contrast_level'));
const contrast = Number(formData.get('contrast_level'));
const harmonizeCustoms = isEqual(formData.get('harmonize_customs'), 'true');
const errorColor = formData.get('error') as string;
const customColors: Record<string, string> = {};
@ -80,7 +81,34 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
harmonizeCustoms,
customColors,
);
console.debug('[generate m3d]', generate_scheme);
updateScheme((prev) => {
prev.schemeStorage.source = {
source: sourceColor,
error: errorColor,
custom_colors: customColors,
variant: dynamicVariant,
contrastLevel: contrast,
harmonizeCustoms: harmonizeCustoms,
};
prev.schemeStorage.scheme = {
white: generate_scheme[0].white,
black: generate_scheme[0].black,
light_baseline: {
...generate_scheme[0].light_baseline,
customs: mapToObject(generate_scheme[0].light_baseline.customs),
},
dark_baseline: {
...generate_scheme[0].dark_baseline,
customs: mapToObject(generate_scheme[0].dark_baseline.customs),
},
};
prev.schemeStorage.cssVariables = generate_scheme[1];
prev.schemeStorage.scssVariables = generate_scheme[2];
prev.schemeStorage.jsVariables = generate_scheme[3];
return prev;
});
onBuildCompleted?.();
} catch (e) {
console.error('[generate m3d]', e);
}
@ -125,7 +153,7 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
<VSegmentedControl
name="variant"
options={variantOptions}
defaultValue={scheme.schemeStorage.source?.variant}
defaultValue={scheme.schemeStorage.source?.variant ?? 6}
/>
</div>
<label className={styles.label}>Contrast Level</label>