增加M3 Dynamic Scheme的详细页面组成。

src/material-3-scheme.ts

@@ -58,3 +58,20 @@ export type MaterialDesign3SchemeStorage = {
   scssVariables?: string;
   jsVariables?: string;
 };
+
+export type MaterialDesign3DynamicSchemeSource = {
+  source: string | null;
+  error: string | null;
+  custom_colors?: Record<string, string>;
+  variant: number | null;
+  constrastLevel: number | null;
+  harmonizeCustoms: boolean | null;
+};
+
+export type MaterialDesign3DynamicSchemeStorage = {
+  source?: MaterialDesign3DynamicSchemeSource;
+  scheme?: MaterialDesign3Scheme;
+  cssVariables?: string;
+  scssVariables?: string;
+  jsVariables?: string;
+};

src/page-components/scheme/M3DynamicScheme.tsx

@@ -0,0 +1,35 @@
+import { isEqual, isNil } from 'lodash-es';
+import { useState } from 'react';
+import { Tab } from '../../components/Tab';
+import { MaterialDesign3DynamicSchemeStorage } from '../../material-3-scheme';
+import { SchemeContent } from '../../models';
+import { SchemeExport } from './Export';
+import { M3DynamicSchemeBuilder } from './m3-dynamic-scheme/Builder';
+import { M3SchemePreview } from './m3-scheme/Preview';
+
+const tabOptions = [
+  { title: 'Overview', id: 'overview' },
+  { title: 'Builder', id: 'builder' },
+  { title: 'Exports', id: 'export' },
+];
+
+type M3SchemeProps = {
+  scheme: SchemeContent<MaterialDesign3DynamicSchemeStorage>;
+};
+
+export function M3DynamicScheme({ scheme }: M3SchemeProps) {
+  const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
+    isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
+  );
+
+  return (
+    <>
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
+      {isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme.schemeStorage.scheme} />}
+      {isEqual(activeTab, 'builder') && (
+        <M3DynamicSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
+      )}
+      {isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
+    </>
+  );
+}

src/page-components/scheme/M3Scheme.tsx

@@ -25,7 +25,7 @@ export function M3Scheme({ scheme }: M3SchemeProps) {
   return (
     <>
       <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
-      {isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme} />}
+      {isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme.schemeStorage.scheme} />}
       {isEqual(activeTab, 'builder') && (
         <M3SchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
       )}

src/page-components/scheme/m3-dynamic-scheme/Builder.tsx

@@ -0,0 +1,5 @@
+import { ScrollArea } from '../../../components/ScrollArea';
+
+export function M3DynamicSchemeBuilder() {
+  return <ScrollArea enableY></ScrollArea>;
+}

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

@@ -1,11 +1,5 @@
 import { ScrollArea } from '../../../components/ScrollArea';
-import {
-  Baseline,
-  ColorSet,
-  MaterialDesign3SchemeStorage,
-  Surface,
-} from '../../../material-3-scheme';
-import { SchemeContent } from '../../../models';
+import { Baseline, ColorSet, MaterialDesign3Scheme, Surface } from '../../../material-3-scheme';
 import styles from './Preview.module.css';
 
 type ColorSetProps = {
@@ -257,15 +251,15 @@ function PreviewBlock({ title, baseline }: PreviewBlockProps) {
 }
 
 type M3SchemePreviewProps = {
-  scheme: SchemeContent<MaterialDesign3SchemeStorage>;
+  scheme: MaterialDesign3Scheme;
 };
 
 export function M3SchemePreview({ scheme }: M3SchemePreviewProps) {
   return (
     <ScrollArea enableY>
       <div className={styles.preview_layout}>
-        <PreviewBlock title="Light Scheme" baseline={scheme.schemeStorage.scheme!.light_baseline} />
-        <PreviewBlock title="Dark Scheme" baseline={scheme.schemeStorage.scheme!.dark_baseline} />
+        <PreviewBlock title="Light Scheme" baseline={scheme.light_baseline} />
+        <PreviewBlock title="Dark Scheme" baseline={scheme.dark_baseline} />
       </div>
     </ScrollArea>
   );

src/pages/SchemeDetail.tsx

@@ -6,10 +6,14 @@ import { EditableDescription } from '../components/EditableDescription';
 import { EditableTitle } from '../components/EditableTitle';
 import { SchemeSign } from '../components/SchemeSign';
 import { MaterialDesign2SchemeStorage } from '../material-2-scheme';
-import { MaterialDesign3SchemeStorage } from '../material-3-scheme';
+import {
+  MaterialDesign3DynamicSchemeStorage,
+  MaterialDesign3SchemeStorage,
+} from '../material-3-scheme';
 import { SchemeContent } from '../models';
 import { CorruptedScheme } from '../page-components/scheme/CorruptedScheme';
 import { M2Scheme } from '../page-components/scheme/M2Scheme';
+import { M3DynamicScheme } from '../page-components/scheme/M3DynamicScheme';
 import { M3Scheme } from '../page-components/scheme/M3Scheme';
 import { QScheme } from '../page-components/scheme/QScheme';
 import { SwatchScheme } from '../page-components/scheme/SwatchScheme';
@@ -52,6 +56,10 @@ export function SchemeDetail() {
         return <M2Scheme scheme={scheme as SchemeContent<MaterialDesign2SchemeStorage>} />;
       case 'material_3':
         return <M3Scheme scheme={scheme as SchemeContent<MaterialDesign3SchemeStorage>} />;
+      case 'material_3_dynamic':
+        return (
+          <M3DynamicScheme scheme={scheme as SchemeContent<MaterialDesign3DynamicSchemeStorage>} />
+        );
       default:
         return <CorruptedScheme />;
     }