基本完成M2 Scheme的预览。

src/page-components/scheme/M2Scheme.tsx

@@ -2,6 +2,8 @@ import { isEqual, isNil } from 'lodash-es';
 import { useState } from 'react';
 import { Tab } from '../../components/Tab';
 import { SchemeExport } from './Export';
+import { M2SchemeBuilder } from './m2-scheme/Builder';
+import { M2SchemePreview } from './m2-scheme/Preview';
 
 const tabOptions = [
   { title: 'Overview', id: 'overview' },
@@ -21,8 +23,10 @@ export function M2Scheme({ 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') && <M2SchemePreview scheme={scheme} />}
+      {isEqual(activeTab, 'builder') && (
+        <M2SchemeBuilder scheme={scheme} onBuildComplete={() => setActiveTab('overview')} />
+      )}
       {isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
     </>
   );