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

调整颜色拣选器，使其能初始化颜色。

Browse Source
This commit is contained in:
徐涛 2025-01-02 09:00:08 +08:00
parent f8e37e03d6
commit b252b2eb20
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/Harmonies.tsx
View File

@ -1,19 +1,20 @@
import cx from 'clsx'; import cx from 'clsx';
import { useAtom } from 'jotai';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { useColorFunction } from '../ColorFunctionContext'; import { useColorFunction } from '../ColorFunctionContext';
import { ColorPicker } from '../components/ColorPicker'; import { ColorPicker } from '../components/ColorPicker';
import { VSegmentedControl } from '../components/VSegmentedControl'; import { VSegmentedControl } from '../components/VSegmentedControl';
import { HarmonyColor } from '../models'; import { HarmonyColor } from '../models';
import { HarmonyPreview } from '../page-components/harmonies/HarmonyPreview'; import { HarmonyPreview } from '../page-components/harmonies/HarmonyPreview';
import { currentPickedColor } from '../stores/colors';
import styles from './Harmonies.module.css'; import styles from './Harmonies.module.css';
export function Harmonies() { export function Harmonies() {
const { colorFn } = useColorFunction(); const { colorFn } = useColorFunction();
const [seletedColor, setSelectedColor] = useState('000000'); const [seletedColor, setSelectedColor] = useAtom(currentPickedColor);
const [selectedMode, setSelectedMode] = useState('complementary'); const [selectedMode, setSelectedMode] = useState('complementary');
const generatedColors = useMemo(() => { const generatedColors = useMemo(() => {
try { try {
console.debug('[Mode]', selectedMode);
const colors: HarmonyColor[] = []; const colors: HarmonyColor[] = [];
switch (selectedMode) { switch (selectedMode) {
case 'complementary': case 'complementary':
@ -91,7 +92,6 @@ export function Harmonies() {
default: default:
break; break;
} }
console.debug('[Generated colors]', colors);
return colors; return colors;
} catch (error) { } catch (error) {
console.error('[Generate Color Series]', error); console.error('[Generate Color Series]', error);
@ -109,7 +109,7 @@ export function Harmonies() {
<aside className={styles.function_side}> <aside className={styles.function_side}>
<div> <div>
<h5>Basic color</h5> <h5>Basic color</h5>
<ColorPicker onSelect={setSelectedColor} /> <ColorPicker color={seletedColor} onSelect={(color) => setSelectedColor(color)} />
</div> </div>
<div className={styles.mode_navigation}> <div className={styles.mode_navigation}>
<h5>Color selection method</h5> <h5>Color selection method</h5>