完成Q Scheme的导出复制功能。

src/page-components/scheme/QScheme.tsx

@@ -1,3 +1,35 @@
-export function QScheme() {
+import { isEqual, isNil } from 'lodash-es';
-  return <div>Q Scheme</div>;
+import { useState } from 'react';
+import { Tab } from '../../components/Tab';
+import { SchemeContent } from '../../models';
+import { QSchemeStorage } from '../../q-scheme';
+import { QSchemeBuilder } from './q-scheme/Builder';
+import { QSchemeExport } from './q-scheme/Export';
+import { QSchemePreview } from './q-scheme/Preview';
+
+const tabOptions = [
+  { title: 'Overview', id: 'overview' },
+  { title: 'Builder', id: 'builder' },
+  { title: 'Exports', id: 'export' },
+];
+
+type QSchemeProps = {
+  scheme: SchemeContent<QSchemeStorage>;
+};
+
+export function QScheme({ scheme }: QSchemeProps) {
+  const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
+    isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
+  );
+
+  return (
+    <>
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
+      {isEqual(activeTab, 'overview') && <QSchemePreview scheme={scheme} />}
+      {isEqual(activeTab, 'builder') && (
+        <QSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
+      )}
+      {isEqual(activeTab, 'export') && <QSchemeExport scheme={scheme} />}
+    </>
+  );
 }

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

@@ -0,0 +1,16 @@
+@layer pages {
+  .export_layout {
+    padding: var(--spacing-s) var(--spacing-m);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-s);
+    .tools {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: var(--font-size-s);
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+import { useMemo, useState } from 'react';
+import { HSegmentedControl } from '../../../components/HSegmentedControl';
+import { Labeled } from '../../../components/Labeled';
+import { ScrollArea } from '../../../components/ScrollArea';
+import { useCopy } from '../../../hooks/useCopy';
+import { Option, SchemeContent } from '../../../models';
+import { QSchemeStorage } from '../../../q-scheme';
+import styles from './Export.module.css';
+
+const exportOptions: Option[] = [
+  { label: 'CSS', value: 'css' },
+  { label: 'SCSS', value: 'scss' },
+  { label: 'Javascript Object', value: 'js_object' },
+];
+
+type QSchemeExportProps = {
+  scheme: SchemeContent<QSchemeStorage>;
+};
+
+export function QSchemeExport({ scheme }: QSchemeExportProps) {
+  const [activeExport, setActiveExport] = useState<Option['value']>(exportOptions[0].value);
+  const exportContent = useMemo(() => {
+    switch (activeExport) {
+      case 'css':
+        return scheme.schemeStorage.cssVariables;
+      case 'scss':
+        return scheme.schemeStorage.scssVariables;
+      case 'js_object':
+        return scheme.schemeStorage.jsVariables;
+    }
+  }, [scheme, activeExport]);
+  const copyToClipboard = useCopy();
+
+  return (
+    <ScrollArea enableY>
+      <div className={styles.export_layout}>
+        <div className={styles.tools}>
+          <Labeled label="Export Options" inline>
+            <HSegmentedControl
+              options={exportOptions}
+              value={activeExport}
+              onChange={setActiveExport}
+            />
+          </Labeled>
+          <button onClick={() => copyToClipboard(exportContent)}>Copy</button>
+        </div>
+        <pre>{exportContent}</pre>
+      </div>
+    </ScrollArea>
+  );
+}

src/pages/SchemeDetail.tsx

@@ -40,7 +40,7 @@ export function SchemeDetail() {
   const schemeContent = useMemo(() => {
     switch (scheme?.type) {
       case 'q_scheme':
-        return <QScheme />;
+        return <QScheme scheme={scheme} />;
       case 'swatch_scheme':
         return <SwatchScheme />;
       case 'material_2':