增加颜色对比的分析模式选择。

src/page-components/color-compare/HCTCompare.tsx

@@ -19,20 +19,28 @@ const defaultCompareResult: HctDiffference = {
   },
 };
 
-export function HCTCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+export function HCTCompare({
+  basic = '000000',
+  compare = '000000',
+  mode = 'absolute',
+}: CompareMethodProps) {
   const { colorFn } = useColorFunction();
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;
     }
     try {
-      const diff = colorFn.differ_in_hct(basic, compare);
+      const diffFn = {
+        absolute: colorFn.differ_in_hct,
+        relative: colorFn.relative_differ_in_hct,
+      };
+      const diff = diffFn[mode](basic, compare);
       return diff;
     } catch (e) {
       console.error('[Compare in HCT]', e);
     }
     return defaultCompareResult;
-  }, [basic, compare]);
+  }, [basic, compare, mode]);
 
   return (
     <div>

src/page-components/color-compare/HSLCompare.tsx

@@ -19,20 +19,28 @@ const defaultCompareResult: HSLDifference = {
   },
 };
 
-export function HSLCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+export function HSLCompare({
+  basic = '000000',
+  compare = '000000',
+  mode = 'absolute',
+}: CompareMethodProps) {
   const { colorFn } = useColorFunction();
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;
     }
     try {
-      const diff = colorFn.differ_in_hsl(basic, compare);
+      const diffFn = {
+        absolute: colorFn.differ_in_hsl,
+        relative: colorFn.relative_differ_in_hsl,
+      };
+      const diff = diffFn[mode](basic, compare);
       return diff;
     } catch (e) {
       console.error('[Compare in HSL]', e);
     }
     return defaultCompareResult;
-  }, [basic, compare]);
+  }, [basic, compare, mode]);
 
   return (
     <div>

src/page-components/color-compare/OKLCHCompare.tsx

@@ -19,20 +19,28 @@ const defaultCompareResult: OklchDifference = {
   },
 };
 
-export function OklchCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+export function OklchCompare({
+  basic = '000000',
+  compare = '000000',
+  mode = 'absolute',
+}: CompareMethodProps) {
   const { colorFn } = useColorFunction();
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;
     }
     try {
-      const diff = colorFn.differ_in_oklch(basic, compare);
+      const diffFn = {
+        absolute: colorFn.differ_in_oklch,
+        relative: colorFn.relative_differ_in_oklch,
+      };
+      const diff = diffFn[mode](basic, compare);
       return diff;
     } catch (e) {
       console.error('[Compare in Oklch]', e);
     }
     return defaultCompareResult;
-  }, [basic, compare]);
+  }, [basic, compare, mode]);
 
   return (
     <div>

src/page-components/color-compare/RGBCompare.tsx

@@ -19,14 +19,22 @@ const defaultCompareResult: RGBDifference = {
   },
 };
 
-export function RGBCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
+export function RGBCompare({
+  basic = '000000',
+  compare = '000000',
+  mode = 'absolute',
+}: CompareMethodProps) {
   const { colorFn } = useColorFunction();
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;
     }
     try {
-      const diff = colorFn?.differ_in_rgb(basic, compare);
+      const diffFn = {
+        absolute: colorFn.differ_in_rgb,
+        relative: colorFn.relative_differ_in_rgb,
+      };
+      const diff = diffFn[mode](basic, compare);
       return {
         r: {
           delta: Math.round(diff.r.delta * 255),
@@ -45,7 +53,7 @@ export function RGBCompare({ basic = '000000', compare = '000000' }: CompareMeth
       console.error('[Compare in RGB]', e);
     }
     return defaultCompareResult;
-  }, [basic, compare]);
+  }, [basic, compare, mode]);
 
   return (
     <div>

src/page-components/color-compare/ShadeScale.tsx

@@ -46,7 +46,7 @@ export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMeth
       </div>
       <div className={styles.elements}>
         <div className={styles.element}>
-          <div className={cx(styles.element_name, styles.mean)}>F</div>
+          <div className={cx(styles.element_name, styles.mean)}>Factor</div>
           <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
         </div>
       </div>

src/page-components/color-compare/TintScale.tsx

@@ -46,7 +46,7 @@ export function TintScale({ basic = '000000', compare = '000000' }: CompareMetho
       </div>
       <div className={styles.elements}>
         <div className={styles.element}>
-          <div className={cx(styles.element_name, styles.mean)}>F</div>
+          <div className={cx(styles.element_name, styles.mean)}>Factor</div>
           <div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
         </div>
       </div>

src/page-components/color-compare/share-props.ts

@@ -1,4 +1,5 @@
 export type CompareMethodProps = {
   basic?: string;
   compare?: string;
+  mode?: 'absolute' | 'relative';
 };