重构Scheme编辑器结构。

src/page-components/scheme/M2Scheme.tsx

@@ -0,0 +1,3 @@
+export function M2Scheme() {
+  return <div>Material Design 2 Scheme</div>;
+}

src/page-components/scheme/M3Scheme.tsx

@@ -0,0 +1,3 @@
+export function M3Scheme() {
+  return <div>Material Design 3 Scheme</div>;
+}

src/page-components/scheme/QScheme.tsx

@@ -0,0 +1,3 @@
+export function QScheme() {
+  return <div>Q Scheme</div>;
+}

src/page-components/scheme/SchemeContent.module.css

@@ -1,25 +0,0 @@
-@layer pages {
-  .scheme_content {
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-m);
-  }
-  .series_row {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-s);
-    h4 {
-      padding-block: var(--spacing-xs);
-      font-size: var(--font-size-l);
-    }
-    ul {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      flex-wrap: wrap;
-      gap: var(--spacing-l);
-    }
-  }
-}

src/page-components/scheme/SchemeContent.tsx

@@ -1,61 +0,0 @@
-import { isArray } from 'lodash-es';
-import { ColorStand } from '../../components/ColorStand';
-import { SchemeSet } from '../../stores/schemes';
-import styles from './SchemeContent.module.css';
-
-type ColorSeriesProps = {
-  title: string;
-  series: SchemeSet['lightScheme' | 'darkScheme']['primary'];
-  simpleSeries?: boolean;
-};
-
-function ColorSeries({ title, series, simpleSeries = false }: ColorSeriesProps) {
-  return (
-    <div className={styles.series_row}>
-      <h4>{title}</h4>
-      <ul>
-        <ColorStand title="Normal" color={series?.normal} />
-        {simpleSeries ? (
-          <>
-            <ColorStand title="Lightness" color={series?.lighten} />
-            <ColorStand title="Darkness" color={series?.darken} />
-          </>
-        ) : (
-          <>
-            <ColorStand title="Hover" color={series?.hover} />
-            <ColorStand title="Active" color={series?.active} />
-            <ColorStand title="Focus" color={series?.focus} />
-            <ColorStand title="Disabled" color={series?.disabled} />
-          </>
-        )}
-      </ul>
-    </div>
-  );
-}
-
-type SchemeContentProps = {
-  scheme: SchemeSet['lightScheme' | 'darkScheme'];
-};
-
-export function SchemeContent({ scheme }: SchemeContentProps) {
-  return (
-    <div className={styles.scheme_content}>
-      <ColorSeries title="Foreground Series" series={scheme.foreground} simpleSeries />
-      <ColorSeries title="Background Series" series={scheme.background} simpleSeries />
-      <ColorSeries title="Primary Series" series={scheme.primary} />
-      {isArray(scheme.secondary) ? (
-        scheme.secondary.map((cSet, index) => (
-          <ColorSeries title={`Secondary Series ${index + 1}`} series={cSet} />
-        ))
-      ) : (
-        <ColorSeries title="Secondary Series" series={scheme.secondary} />
-      )}
-      <ColorSeries title="Accent Series" series={scheme.accent} />
-      <ColorSeries title="Neutral Serias" series={scheme.neutral} />
-      <ColorSeries title="Success Series" series={scheme.success} />
-      <ColorSeries title="Danger Series" series={scheme.danger} />
-      <ColorSeries title="Warn Series" series={scheme.warning} />
-      <ColorSeries title="Info Series" series={scheme.info} />
-    </div>
-  );
-}

src/page-components/scheme/SchemeView.module.css

@@ -1,17 +0,0 @@
-@layer pages {
-  .scheme_view_layout {
-    flex: 1 0;
-    width: 100%;
-    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-m);
-    overflow: hidden;
-  }
-  .preview_switch_container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-}

src/page-components/scheme/SchemeView.tsx

@@ -1,23 +0,0 @@
-import { useState } from 'react';
-import { Switch } from '../../components/Switch';
-import { SchemeSet } from '../../stores/schemes';
-import { SchemeContent } from './SchemeContent';
-import styles from './SchemeView.module.css';
-
-type SchemeViewProps = {
-  scheme: SchemeSet['lightScheme' | 'darkScheme'];
-};
-
-export function SchemeView({ scheme }: SchemeViewProps) {
-  const [enablePreview, setEnablePreview] = useState(false);
-
-  return (
-    <div className={styles.scheme_view_layout}>
-      <div className={styles.preview_switch_container}>
-        <span>Preview scheme</span>
-        <Switch onChange={(checked) => setEnablePreview(checked)} />
-      </div>
-      {enablePreview ? <div>SVG Preview</div> : <SchemeContent scheme={scheme} />}
-    </div>
-  );
-}

src/page-components/scheme/SwatchScheme.tsx

@@ -0,0 +1,3 @@
+export function SwatchScheme() {
+  return <div>Swatch Scheme</div>;
+}

src/page-components/scheme/UnknownScheme.tsx

@@ -0,0 +1,3 @@
+export function UnknownScheme() {
+  return <div>Unknown or currupted scheme</div>;
+}

src/pages/SchemeDetail.tsx

@@ -1,10 +1,15 @@
 import dayjs from 'dayjs';
 import { isNil, set } from 'lodash-es';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { EditableDescription } from '../components/EditableDescription';
 import { EditableTitle } from '../components/EditableTitle';
 import { SchemeSign } from '../components/SchemeSign';
+import { M2Scheme } from '../page-components/scheme/M2Scheme';
+import { M3Scheme } from '../page-components/scheme/M3Scheme';
+import { QScheme } from '../page-components/scheme/QScheme';
+import { SwatchScheme } from '../page-components/scheme/SwatchScheme';
+import { UnknownScheme } from '../page-components/scheme/UnknownScheme';
 import { useScheme, useUpdateScheme } from '../stores/schemes';
 import styles from './SchemeDetail.module.css';
 
@@ -32,6 +37,20 @@ export function SchemeDetail() {
     },
     [id],
   );
+  const schemeContent = useMemo(() => {
+    switch (scheme?.type) {
+      case 'q_scheme':
+        return <QScheme />;
+      case 'swatch_scheme':
+        return <SwatchScheme />;
+      case 'material_2':
+        return <M2Scheme />;
+      case 'material_3':
+        return <M3Scheme />;
+      default:
+        return <UnknownScheme />;
+    }
+  }, [scheme]);
 
   useEffect(() => {
     if (isNil(scheme)) {
@@ -49,6 +68,7 @@ export function SchemeDetail() {
         </div>
       </div>
       <EditableDescription content={scheme?.description} onChange={updateDescription} />
+      {schemeContent}
     </div>
   );
 }