完成Q Scheme预览功能。

src/page-components/scheme/q-scheme/Preview.module.css

@@ -0,0 +1,35 @@
+@layer pages {
+  .preview_layout {
+    padding: var(--spacing-s) var(--spacing-m);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-m);
+  }
+  .preview_block {
+    width: inherit;
+    padding: var(--spacing-xl) var(--spacing-m);
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: var(--spacing-xs);
+    h2 {
+      font-size: var(--font-size-xl);
+      font-weight: bold;
+      line-height: 1.7em;
+    }
+  }
+  .preview_cell {
+    padding: var(--spacing-xs) var(--spacing-s);
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--spacing-m);
+    font-size: var(--font-size-s);
+    line-height: 2em;
+    .wacg {
+      font-size: var(--font-size-xxs);
+      line-height: 1em;
+    }
+  }
+}

src/page-components/scheme/q-scheme/Preview.tsx

@@ -0,0 +1,100 @@
+import { ReactNode, useMemo } from 'react';
+import { useColorFunction } from '../../../ColorFunctionContext';
+import { ScrollArea } from '../../../components/ScrollArea';
+import { SchemeContent } from '../../../models';
+import { Baseline, ColorSet, QSchemeStorage } from '../../../q-scheme';
+import styles from './Preview.module.css';
+
+type PreviewCellProps = {
+  bg: string;
+  fg: string;
+  children: ReactNode;
+};
+
+function PreviewCell({ bg, fg, children }: PreviewCellProps) {
+  const { colorFn } = useColorFunction();
+  const wacgRatio = useMemo(() => {
+    try {
+      if (!colorFn) return null;
+      return colorFn.wacg_relative_contrast(fg, bg);
+    } catch (e) {
+      console.error('[Error on calc WACG Ratio]', e);
+    }
+    return null;
+  }, [bg, fg]);
+
+  return (
+    <div className={styles.preview_cell} style={{ backgroundColor: `#${bg}`, color: `#${fg}` }}>
+      <span>{children}</span>
+      {wacgRatio && <span className={styles.wacg}>WACG {wacgRatio?.toFixed(2)}</span>}
+    </div>
+  );
+}
+
+type PreviewCellSetProps = {
+  colorSet: ColorSet;
+  name: string;
+};
+
+function PreviewCellSetGroup({ colorSet, name }: PreviewCellSetProps) {
+  return (
+    <>
+      <PreviewCell bg={colorSet.root} fg={colorSet.onRoot}>
+        {name}
+      </PreviewCell>
+      <PreviewCell bg={colorSet.hover} fg={colorSet.onHover}>
+        {name} Hover
+      </PreviewCell>
+      <PreviewCell bg={colorSet.active} fg={colorSet.onActive}>
+        {name} Active
+      </PreviewCell>
+      <PreviewCell bg={colorSet.focus} fg={colorSet.onFocus}>
+        {name} Focus
+      </PreviewCell>
+      <PreviewCell bg={colorSet.disabled} fg={colorSet.onDisabled}>
+        {name} Disabled
+      </PreviewCell>
+    </>
+  );
+}
+
+type PreviewBlockProps = {
+  baseline: Baseline;
+  title: string;
+};
+
+function PreviewBlock({ baseline, title }: PreviewBlockProps) {
+  return (
+    <div className={styles.preview_block} style={{ backgroundColor: `#${baseline.background}` }}>
+      <h2 style={{ color: `#${baseline.foreground}`, gridColumn: '1 / span 5' }}>{title}</h2>
+      <PreviewCellSetGroup colorSet={baseline.primary} name="Primary" />
+      {baseline.secondary && <PreviewCellSetGroup colorSet={baseline.secondary} name="Secondary" />}
+      {baseline.tertiary && <PreviewCellSetGroup colorSet={baseline.tertiary} name="Tertiary" />}
+      {baseline.accent && <PreviewCellSetGroup colorSet={baseline.accent} name="Accent" />}
+      <PreviewCellSetGroup colorSet={baseline.neutral} name="Neutral" />
+      <PreviewCellSetGroup colorSet={baseline.danger} name="Danger" />
+      <PreviewCellSetGroup colorSet={baseline.warning} name="Warning" />
+      <PreviewCellSetGroup colorSet={baseline.success} name="Success" />
+      <PreviewCellSetGroup colorSet={baseline.info} name="Info" />
+    </div>
+  );
+}
+
+type PreviewProps = {
+  scheme: SchemeContent<QSchemeStorage>;
+};
+
+export function QSchemePreview({ scheme }: PreviewProps) {
+  return (
+    <ScrollArea enableY>
+      <div className={styles.preview_layout}>
+        {scheme.schemeStorage.scheme?.light && (
+          <PreviewBlock baseline={scheme.schemeStorage.scheme.light} title="Light Scheme" />
+        )}
+        {scheme.schemeStorage.scheme?.dark && (
+          <PreviewBlock baseline={scheme.schemeStorage.scheme.dark} title="Dark Scheme" />
+        )}
+      </div>
+    </ScrollArea>
+  );
+}