重构Color展示组件为更加简单的形式。

src/components/ColorStand.module.css

@@ -38,14 +38,11 @@
   .color_value {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: flex-end;
     gap: var(--spacing-xxs);
     font-size: var(--font-size-xs);
     line-height: var(--font-size-xs);
     padding-inline: var(--spacing-xxs);
-    h6 {
-      font-size: var(--font-size-xs);
-    }
     .na_value {
       display: flex;
       flex-direction: row;

src/components/ColorStand.tsx

@@ -1,18 +1,18 @@
 import { Icon } from '@iconify/react/dist/iconify.js';
 import { isNil } from 'lodash-es';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import NoColor from '../assets/NoColor.svg';
 import { useColorFunction } from '../ColorFunctionContext';
 import styles from './ColorStand.module.css';
 import { NotificationType, useNotification } from './Notifications';
+import { SegmentedControl } from './SegmentedControl';
 
 type ColorValueProps = {
-  title: string;
   value: string | null;
 };
 
-function ColorValue({ title, value }: ColorValueProps) {
+function ColorValue({ value }: ColorValueProps) {
   const [cpState, copyToClipboard] = useCopyToClipboard();
   const { showToast } = useNotification();
   const handleCopy = useCallback(() => {
@@ -36,7 +36,6 @@ function ColorValue({ title, value }: ColorValueProps) {
 
   return (
     <div className={styles.color_value}>
-      <h6>{title}</h6>
       {isNil(value) ? (
         <div className={styles.na_value}>
           <Icon icon="tabler:alert-hexagon" />
@@ -58,48 +57,34 @@ type ColorStandProps = {
 
 export function ColorStand({ title, color }: ColorStandProps) {
   const { colorFn } = useColorFunction();
-  const rgb = useMemo(() => {
+  const [viewColor, setViewColor] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
-    try {
+  const displayColorValue = useMemo(() => {
-      const rgbValues = colorFn?.represent_rgb(color);
+    if (isNil(color)) {
-      return `rgb(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]})`;
-    } catch (e) {
-      console.error('[Convert RGB]', e);
-    }
       return null;
-  }, [color]);
-  const hsl = useMemo(() => {
-    try {
-      const hslValues = colorFn?.represent_hsl(color);
-      return `hsl(${hslValues[0].toFixed(2)}, ${(hslValues[1] * 100).toFixed(2)}%, ${(
-        hslValues[2] * 100
-      ).toFixed(2)}%)`;
-    } catch (e) {
-      console.error('[Convert HSL]', e);
     }
-    return null;
+    switch (viewColor) {
-  }, [color]);
+      case 'hex':
-  const lab = useMemo(() => {
+        return color;
-    try {
+      case 'rgb': {
-      const labValues = colorFn?.represent_lab(color);
+        const rgb = colorFn?.represent_rgb(color);
-      return `lab(${labValues[0].toFixed(2)}, ${labValues[1].toFixed(2)}, ${labValues[2].toFixed(
+        return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
-        2,
-      )})`;
-    } catch (e) {
-      console.error('[Convert LAB]', e);
       }
-    return null;
+      case 'hsl': {
-  }, [color]);
+        const hsl = colorFn?.represent_hsl(color);
-  const oklch = useMemo(() => {
+        return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
-    try {
-      const oklchValues = colorFn?.represent_oklch(color);
-      return `oklch(${oklchValues[0].toFixed(2)}, ${oklchValues[1].toFixed(
-        2,
-      )}, ${oklchValues[2].toFixed(2)})`;
-    } catch (e) {
-      console.error('[Convert OKLCH]', e);
       }
+      case 'lab': {
+        const lab = colorFn?.represent_lab(color);
+        return `lab(${lab[0]}, ${lab[1]}, ${lab[2]})`;
+      }
+      case 'oklch': {
+        const oklch = colorFn?.represent_oklch(color);
+        return `oklch(${oklch[0]}%, ${oklch[1]}, ${oklch[2]})`;
+      }
+      default:
         return null;
-  }, [color]);
+    }
+  }, [viewColor, color]);
 
   return (
     <div className={styles.color_stand}>
@@ -112,11 +97,18 @@ export function ColorStand({ title, color }: ColorStandProps) {
         </div>
       </div>
       <div className={styles.color_describe}>
-        <ColorValue title="HEX" value={color} />
+        <SegmentedControl
-        <ColorValue title="RGB" value={rgb} />
+          options={[
-        <ColorValue title="HSL" value={hsl} />
+            { label: 'HEX', value: 'hex' },
-        <ColorValue title="LAB" value={lab} />
+            { label: 'RGB', value: 'rgb' },
-        <ColorValue title="OKLCH" value={oklch} />
+            { label: 'HSL', value: 'hsl' },
+            { label: 'LAB', value: 'lab' },
+            { label: 'OKLCH', value: 'oklch' },
+          ]}
+          value={viewColor}
+          onChange={(value) => setViewColor(value as typeof viewColor)}
+        />
+        <ColorValue value={displayColorValue} />
       </div>
     </div>
   );