80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import { useState } from "react";
|
||
import { App as AntApp, ConfigProvider, Tabs } from "antd";
|
||
import zhCN from "antd/locale/zh_CN";
|
||
import { CalculatorPanel } from "./CalculatorPanel";
|
||
import { HistoryTab } from "./HistoryTab";
|
||
import { UpdateButton } from "./UpdateButton";
|
||
import type { SampleInput } from "./types";
|
||
|
||
function Brand() {
|
||
return (
|
||
<div className="brand">
|
||
<img className="brand-logo" src="/logo.png" alt="" />
|
||
<span className="brand-name">建筑材料放射性判定分析</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function App() {
|
||
const [activeTab, setActiveTab] = useState("calc");
|
||
const [reloadSignal, setReloadSignal] = useState(0);
|
||
// 复算：带入历史 input 并强制重挂 CalculatorPanel（key 递增）。
|
||
const [loadedInput, setLoadedInput] = useState<SampleInput | undefined>(undefined);
|
||
const [calcKey, setCalcKey] = useState(0);
|
||
|
||
const recompute = (input: SampleInput) => {
|
||
setLoadedInput(input);
|
||
setCalcKey((k) => k + 1);
|
||
setActiveTab("calc");
|
||
};
|
||
|
||
return (
|
||
<ConfigProvider
|
||
locale={zhCN}
|
||
theme={{
|
||
token: {
|
||
colorPrimary: "#243150",
|
||
colorInfo: "#243150",
|
||
colorLink: "#243150",
|
||
colorLinkHover: "#3a4d78",
|
||
borderRadius: 8,
|
||
fontSize: 14
|
||
}
|
||
}}
|
||
>
|
||
<AntApp>
|
||
<main className="app-shell">
|
||
<Tabs
|
||
activeKey={activeTab}
|
||
onChange={setActiveTab}
|
||
className="main-tabs"
|
||
tabBarExtraContent={{ left: <Brand />, right: <UpdateButton /> }}
|
||
items={[
|
||
{
|
||
key: "calc",
|
||
label: "计算",
|
||
children: (
|
||
<CalculatorPanel
|
||
key={calcKey}
|
||
initialInput={loadedInput}
|
||
onSaved={() => setReloadSignal((s) => s + 1)}
|
||
/>
|
||
)
|
||
},
|
||
{
|
||
key: "history",
|
||
label: "历史记录",
|
||
children: (
|
||
<HistoryTab active={activeTab === "history"} reloadSignal={reloadSignal} onRecompute={recompute} />
|
||
)
|
||
}
|
||
]}
|
||
/>
|
||
</main>
|
||
</AntApp>
|
||
</ConfigProvider>
|
||
);
|
||
}
|
||
|
||
export { App };
|