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

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>
   );