基本形成色卡页面功能。

2025-01-10 14:24:18 +08:00
parent 6708c40ffb
commit 9fec4a31e9
11 changed files with 356 additions and 1 deletions
--- a/src/pages/CardsDetail.tsx
+++ b/src/pages/CardsDetail.tsx
@@ -0,0 +1,102 @@
+import cx from 'clsx';
+import { isEqual } from 'lodash-es';
+import { ChangeEvent, useMemo, useState } from 'react';
+import { useColorFunction } from '../ColorFunctionContext';
+import { HSegmentedControl } from '../components/HSegmentedControl';
+import { ScrollArea } from '../components/ScrollArea';
+import { ColorDescription } from '../models';
+import { ColorCard } from '../page-components/cards-detail/ColorCard';
+import styles from './CardsDetail.module.css';
+
+type CardsDetailProps = {
+  mainTag: string;
+};
+
+export function CardsDetail({ mainTag }: CardsDetailProps) {
+  const { colorFn } = useColorFunction();
+  const categories = useMemo(() => {
+    if (!colorFn) {
+      return [];
+    }
+    try {
+      const embededCategories = colorFn.color_categories() as { label: string; value: string }[];
+      return embededCategories.filter((cate) => !isEqual(cate.get('value'), 'unknown'));
+    } catch (e) {
+      console.error('[Fetch color categories]', e);
+    }
+    return [];
+  }, [colorFn]);
+  const [colorCategory, setCategory] = useState<string | 'null'>('null');
+  const handleSelectCategory = (e: ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = e.target.value;
+    setCategory(selectedValue);
+  };
+  const [mode, setMode] = useState<'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch'>('hex');
+  const colors = useMemo(() => {
+    if (!colorFn) {
+      return [];
+    }
+    try {
+      const colorCate = isEqual(colorCategory, 'null') ? undefined : colorCategory;
+      let tag = '';
+      switch (mainTag) {
+        case 'japanese':
+          tag = 'japanese_traditional';
+          break;
+        case 'chinese':
+          tag = 'chinese_traditional';
+          break;
+        default:
+          tag = '';
+          break;
+      }
+      const embedColors = colorFn.search_color_cards(tag, colorCate) as ColorDescription[];
+      console.debug('[Fetch cards]', embedColors);
+      return embedColors;
+    } catch (e) {
+      console.error('[Fetch colors]', e);
+    }
+    return [];
+  }, [colorFn, mainTag, colorCategory]);
+
+  return (
+    <div className={cx('workspace', styles.cards_workspace)}>
+      <div className={styles.filters}>
+        <span>Show</span>
+        <select
+          className={styles.cate_select}
+          value={colorCategory}
+          onChange={handleSelectCategory}>
+          <option value="null">All</option>
+          {categories.map((cate, index) => (
+            <option key={`${cate.get('value')}-${index}`} value={cate.get('value')}>
+              {cate.get('label')}
+            </option>
+          ))}
+        </select>
+        <span>colors.</span>
+        <div>Copy color value in</div>
+        <HSegmentedControl
+          options={[
+            { label: 'HEX', value: 'hex' },
+            { label: 'RGB', value: 'rgb' },
+            { label: 'HSL', value: 'hsl' },
+            { label: 'LAB', value: 'lab' },
+            { label: 'OKLCH', value: 'oklch' },
+          ]}
+          value={mode}
+          onChange={setMode}
+        />
+      </div>
+      <ScrollArea enableY>
+        <div className={styles.cards_container}>
+          {colors.map((c, index) => (
+            <div key={`${c.name}-${index}`} className={styles.card}>
+              <ColorCard color={c} copyMode={mode} />
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}