From 8aacd3bea2ae60fc10261c182113c638ca252d42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E8=88=AA=E5=AE=87?= <3364451258@qq.com>
Date: Wed, 17 Jun 2026 00:21:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BB=E5=B8=83=E5=B1=80=20+=20?=
 =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E6=A8=A1=E5=BC=8F=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gui/src-frontend/src/App.tsx                  | 56 +++++++++++++++++--
 .../src/components/ExportPanel.tsx            |  8 +++
 .../src/components/HistoryList.tsx            |  8 +++
 gui/src-frontend/src/components/ModePanel.tsx | 27 +++++++++
 gui/src-frontend/src/components/QrPreview.tsx |  9 +++
 5 files changed, 103 insertions(+), 5 deletions(-)
 create mode 100644 gui/src-frontend/src/components/ExportPanel.tsx
 create mode 100644 gui/src-frontend/src/components/HistoryList.tsx
 create mode 100644 gui/src-frontend/src/components/ModePanel.tsx
 create mode 100644 gui/src-frontend/src/components/QrPreview.tsx

diff --git a/gui/src-frontend/src/App.tsx b/gui/src-frontend/src/App.tsx
index d94ed79..08c9835 100644
--- a/gui/src-frontend/src/App.tsx
+++ b/gui/src-frontend/src/App.tsx
@@ -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>
+  );
+}
diff --git a/gui/src-frontend/src/components/ExportPanel.tsx b/gui/src-frontend/src/components/ExportPanel.tsx
new file mode 100644
index 0000000..3d718ee
--- /dev/null
+++ b/gui/src-frontend/src/components/ExportPanel.tsx
@@ -0,0 +1,8 @@
+export default function ExportPanel() {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider">导出选项</div>
+      <div className="text-xs text-gray-400">开发中...</div>
+    </div>
+  );
+}
diff --git a/gui/src-frontend/src/components/HistoryList.tsx b/gui/src-frontend/src/components/HistoryList.tsx
new file mode 100644
index 0000000..c5a7309
--- /dev/null
+++ b/gui/src-frontend/src/components/HistoryList.tsx
@@ -0,0 +1,8 @@
+export default function HistoryList() {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">📋 历史记录</div>
+      <p className="text-xs text-gray-400 text-center py-4">暂无记录</p>
+    </div>
+  );
+}
diff --git a/gui/src-frontend/src/components/ModePanel.tsx b/gui/src-frontend/src/components/ModePanel.tsx
new file mode 100644
index 0000000..8f92ef6
--- /dev/null
+++ b/gui/src-frontend/src/components/ModePanel.tsx
@@ -0,0 +1,27 @@
+import { useQrState } from '../store/qrContext';
+import { MODES, MODE_LABELS } from '../types';
+
+export default function ModePanel() {
+  const { state, dispatch } = useQrState();
+
+  return (
+    <div className="w-48 border-r border-gray-200 dark:border-gray-800 p-3 flex flex-col gap-1 bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm">
+      <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-2">
+        编码模式
+      </div>
+      {MODES.map(mode => (
+        <button
+          key={mode}
+          onClick={() => dispatch({ type: 'SET_MODE', payload: mode })}
+          className={`px-3 py-2 rounded-lg text-left text-sm transition-all ${
+            state.mode === mode
+              ? 'bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-md shadow-blue-500/20'
+              : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
+          }`}
+        >
+          {MODE_LABELS[mode]}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/gui/src-frontend/src/components/QrPreview.tsx b/gui/src-frontend/src/components/QrPreview.tsx
new file mode 100644
index 0000000..ca8f919
--- /dev/null
+++ b/gui/src-frontend/src/components/QrPreview.tsx
@@ -0,0 +1,9 @@
+export default function QrPreview() {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 text-gray-400">
+      <div className="w-48 h-48 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-2xl flex items-center justify-center">
+        <span className="text-sm">输入内容生成 QR 码</span>
+      </div>
+    </div>
+  );
+}