雨霖铃
9097c48b1f
- 新增 dashboardFeatures.ts 和 useDashboard.ts 文件，封装仪表板功能的解析和状态管理逻辑。 - 更新 Dashboard 组件，使用 useDashboard 钩子简化可见工具和最近使用工具的处理。 - 添加仪表板功能的单元测试，确保功能正确性。 - 更新 README.md，移除不再使用的 ToolCard 组件说明。
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
|
|
|
import { QrCodeContext } from './contexts/QrCodeContext';
|
|
import { useQrCode } from './hooks/useQrCode';
|
|
import GeneratePanel from './components/GeneratePanel';
|
|
import ParsePanel from './components/ParsePanel';
|
|
import type { QrCodeMode } from './types';
|
|
|
|
export default function Index() {
|
|
const qrCode = useQrCode();
|
|
|
|
const modeOptions = [
|
|
{ value: 'generate' as QrCodeMode, label: '文本转二维码' },
|
|
{ value: 'parse' as QrCodeMode, label: '二维码转文本' },
|
|
];
|
|
|
|
return (
|
|
<QrCodeContext.Provider value={qrCode}>
|
|
<div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
|
|
<div className="w-full sm:w-fit pt-0.5">
|
|
<SwitchButtonGroup
|
|
value={qrCode.mode}
|
|
options={modeOptions}
|
|
onChange={qrCode.setMode}
|
|
size="small"
|
|
/>
|
|
</div>
|
|
|
|
<div className="w-full pt-1.5">
|
|
{qrCode.mode === 'generate' ? (
|
|
<div>
|
|
<GeneratePanel />
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<ParsePanel />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</QrCodeContext.Provider>
|
|
);
|
|
}
|