重构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>;
+}