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

2026-06-17 00:21:19 +08:00
parent 3186502edb
commit 8aacd3bea2
5 changed files with 103 additions and 5 deletions
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}