布局Scheme的内容展示。

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

@@ -0,0 +1,25 @@
+@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

@@ -0,0 +1,61 @@
+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>
+  );
+}