56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
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 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>
|
||
);
|
||
}
|