From afaa7d25dead0774f75e8372f13f08b85f419068 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Sun, 20 Jul 2025 07:54:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(q-2-scheme):=20=E6=B7=BB=E5=8A=A0=E4=B8=AD?=
 =?UTF-8?q?=E6=80=A7=E8=89=B2=E6=9D=BF=E5=B9=B6=E4=BC=98=E5=8C=96=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E9=A2=9C=E8=89=B2=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在Q2Baseline类型中添加neutralSwatch字段
- 将custom重命名为customColors以提高语义清晰度
- 优化预览组件中色板的展示样式，添加标签和间距
- 更新Builder组件处理自定义颜色的映射逻辑
---
 .../scheme/q-2-scheme/Builder.tsx              | 13 +++++++++++--
 .../scheme/q-2-scheme/Preview.module.css       |  6 +++++-
 .../scheme/q-2-scheme/Preview.tsx              | 18 +++++++++++++-----
 src/q-2-scheme.ts                              |  3 ++-
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/page-components/scheme/q-2-scheme/Builder.tsx b/src/page-components/scheme/q-2-scheme/Builder.tsx
index f434d97..c235a82 100644
--- a/src/page-components/scheme/q-2-scheme/Builder.tsx
+++ b/src/page-components/scheme/q-2-scheme/Builder.tsx
@@ -9,7 +9,7 @@ import { VSegmentedControl } from '../../../components/VSegmentedControl';
 import { SchemeContent } from '../../../models';
 import { Q2SchemeSource, Q2SchemeStorage } from '../../../q-2-scheme';
 import { useUpdateScheme } from '../../../stores/schemes';
-import { isNilOrEmpty } from '../../../utls';
+import { isNilOrEmpty, mapToObject } from '../../../utls';
 import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
 import styles from './Builder.module.css';
 
@@ -220,7 +220,16 @@ export function Q2SchemeBuilder({ scheme, onBuildCompleted }: Q2SchemeBuilderPro
         console.log('[Generated scheme]', generatedScheme);
         updateScheme((prev) => {
           prev.schemeStorage.source = source;
-          prev.schemeStorage.scheme = generatedScheme[0];
+          prev.schemeStorage.scheme = {
+            light: {
+              ...generatedScheme[0].light,
+              customColors: mapToObject(generatedScheme[0].light.customColors),
+            },
+            dark: {
+              ...generatedScheme[0].dark,
+              customColors: mapToObject(generatedScheme[0].dark.customColors),
+            },
+          };
           prev.schemeStorage.cssVariables = generatedScheme[1];
           prev.schemeStorage.cssAutoSchemeVariables = generatedScheme[2];
           prev.schemeStorage.scssVariables = generatedScheme[3];
diff --git a/src/page-components/scheme/q-2-scheme/Preview.module.css b/src/page-components/scheme/q-2-scheme/Preview.module.css
index 81f9785..a43e1d9 100644
--- a/src/page-components/scheme/q-2-scheme/Preview.module.css
+++ b/src/page-components/scheme/q-2-scheme/Preview.module.css
@@ -39,7 +39,11 @@
     grid-template-columns: repeat(16, 1fr);
     gap: var(--spacing-xs);
     .preview_swatch_cell {
-      height: 1em;
+      padding: var(--spacing-xs) var(--spacing-s);
+      .swatch_label {
+        font-size: var(--font-size-s);
+        filter: invert(100%);
+      }
     }
   }
   .preview_cell {
diff --git a/src/page-components/scheme/q-2-scheme/Preview.tsx b/src/page-components/scheme/q-2-scheme/Preview.tsx
index c9141a8..7d15832 100644
--- a/src/page-components/scheme/q-2-scheme/Preview.tsx
+++ b/src/page-components/scheme/q-2-scheme/Preview.tsx
@@ -69,7 +69,14 @@ const PreviewSwatchLine: FC<PreviewSwatchLineProps> = ({ swatch }) => {
     for (const key of keys(swatch)) {
       const color = swatch[key];
       collection.push(
-        <div className={styles.preview_swatch_cell} style={{ backgroundColor: `#${color}` }} />,
+        <div
+          className={styles.preview_swatch_cell}
+          style={{ backgroundColor: `#${color}` }}
+          key={key}>
+          <span className={styles.swatch_label} style={{ color: `#${color}` }}>
+            {key}
+          </span>
+        </div>,
       );
     }
     return collection;
@@ -88,7 +95,7 @@ const PreviewSet: FC<PreviewSetProps> = ({ name, colorUnit }) => {
     <>
       <PreviewLine name={name} unit={colorUnit.root} />
       <PreviewLine name={`${name} Surface`} unit={colorUnit.surface} />
-      <PreviewSwatchLine name={name} swatch={colorUnit.swatch} />
+      <PreviewSwatchLine swatch={colorUnit.swatch} />
     </>
   );
 };
@@ -100,16 +107,16 @@ interface PreviewBlockProps {
 
 const PreviewBlock: FC<PreviewBlockProps> = ({ baseline, title }) => {
   const customSets = useMemo(() => {
-    const colors = keys(baseline.custom);
+    const colors = keys(baseline.customColors);
     const elements: ReactNode[] = [];
 
     for (const key of colors) {
-      const color = baseline.custom[key];
+      const color = baseline.customColors[key];
       elements.push(<PreviewSet name={capitalize(key)} colorUnit={color} />);
     }
 
     return elements;
-  }, [baseline.custom]);
+  }, [baseline.customColors]);
 
   return (
     <div className={styles.preview_block} style={{ backgroundColor: `#${baseline.surface.root}` }}>
@@ -140,6 +147,7 @@ const PreviewBlock: FC<PreviewBlockProps> = ({ baseline, title }) => {
           Outline Variant
         </PreviewCell>
       </div>
+      <PreviewSwatchLine swatch={baseline.neutralSwatch} />
       {customSets}
     </div>
   );
diff --git a/src/q-2-scheme.ts b/src/q-2-scheme.ts
index b204d4f..28cc301 100644
--- a/src/q-2-scheme.ts
+++ b/src/q-2-scheme.ts
@@ -25,6 +25,7 @@ export type Q2Baseline = {
   neutralVariant: Q2ColorUnit;
   surface: Q2ColorUnit;
   surfaceVariant: Q2ColorUnit;
+  neutralSwatch: Record<string, string>;
   danger: Q2ColorUnit;
   success: Q2ColorUnit;
   warn: Q2ColorUnit;
@@ -33,7 +34,7 @@ export type Q2Baseline = {
   overlay: string;
   outline: string;
   outlineVariant: string;
-  custom: Record<string, Q2ColorUnit>;
+  customColors: Record<string, Q2ColorUnit>;
 };
 
 export type Q2Scheme = {