feat: 主布局 + 左侧模式面板

2026-06-17 00:21:19 +08:00
parent 3186502edb
commit 8aacd3bea2
5 changed files with 103 additions and 5 deletions
@@ -1,9 +1,55 @@
-export default function App() {
+import { QrProvider, useQrState } from './store/qrContext';
+import ModePanel from './components/ModePanel';
+import QrPreview from './components/QrPreview';
+import ExportPanel from './components/ExportPanel';
+import HistoryList from './components/HistoryList';
+
+function AppLayout() {
  return (
-    <div className="h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
-      <h1 className="text-2xl font-bold text-gray-700 dark:text-gray-300">
-        🀫 QRGen GUI — 开发中
-      </h1>
+    <div className="h-screen flex flex-col bg-gray-50 dark:bg-gray-950">
+      {/* 顶部标题栏 */}
+      <div className="h-10 flex items-center px-4 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border-b border-gray-200 dark:border-gray-800">
+        <span className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+          🀫 QRGen
+        </span>
+      </div>
+
+      {/* 三栏主体 */}
+      <div className="flex-1 flex overflow-hidden">
+        <ModePanel />
+        <div className="flex-1 flex items-center justify-center p-4">
+          <QrPreview />
+        </div>
+        <div className="w-56 flex flex-col border-l border-gray-200 dark:border-gray-800 p-3 gap-3 bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm">
+          <ExportPanel />
+          <div className="flex-1 overflow-hidden">
+            <HistoryList />
+          </div>
+        </div>
+      </div>
+
+      {/* 底部输入区 */}
+      <div className="h-24 border-t border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl p-3">
+        <BottomInput />
+      </div>
    </div>
  );
 }
+
+function BottomInput() {
+  const { state } = useQrState();
+
+  return (
+    <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+      输入区 — 开发中（当前模式: {state.mode}）
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <QrProvider>
+      <AppLayout />
+    </QrProvider>
+  );
+}