基本完成M3 Scheme的生成功能。

src/page-components/scheme/M3Scheme.tsx

@@ -3,6 +3,8 @@ import { useState } from 'react';
 import { Tab } from '../../components/Tab';
 import { MaterialDesign3SchemeStorage } from '../../material-3-scheme';
 import { SchemeExport } from './Export';
+import { M3SchemeBuilder } from './m3-scheme/Builder';
+import { M3SchemePreview } from './m3-scheme/Preview';
 
 const tabOptions = [
   { title: 'Overview', id: 'overview' },
@@ -22,8 +24,10 @@ export function M3Scheme({ scheme }: M3SchemeProps) {
   return (
     <>
       <Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
-      {isEqual(activeTab, 'overview') && <div>Preview</div>}
-      {isEqual(activeTab, 'builder') && <div>Builder</div>}
+      {isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme} />}
+      {isEqual(activeTab, 'builder') && (
+        <M3SchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
+      )}
       {isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
     </>
   );