102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
/** @format */
|
|
import { ProCard } from "@ant-design/pro-components";
|
|
import { Avatar, Card, Empty, Select } from "antd";
|
|
|
|
import styles from "./index.module.less";
|
|
import { Outlet, useLocation, useNavigate } from "react-router-dom";
|
|
import { Suspense } from "react";
|
|
import selectOptions from "@/components/Main/Settings/settings.ts";
|
|
import StorageIcon from "@/constant/stroage-icon.ts";
|
|
export default () => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
return (
|
|
<div className={styles.settings_container}>
|
|
<ProCard bordered={false} boxShadow>
|
|
<div className={styles.settings_header}>
|
|
<Select
|
|
size="large"
|
|
status="warning"
|
|
style={{ width: "20%" }}
|
|
showSearch={true}
|
|
allowClear={true}
|
|
onClear={() => {
|
|
navigate("/main/setting");
|
|
}}
|
|
notFoundContent={"未找到，请先配置存储商"}
|
|
onSelect={(value: any) => {
|
|
navigate("/main/setting/" + value);
|
|
}}
|
|
fieldNames={{
|
|
label: "name",
|
|
value: "value",
|
|
}}
|
|
labelRender={(label: any) => {
|
|
return (
|
|
<>
|
|
<Card
|
|
bordered={false}
|
|
style={{
|
|
height: 35,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
}}
|
|
size={"small"}>
|
|
<Avatar src={StorageIcon[label.value]} size={"small"} />
|
|
<span
|
|
style={{
|
|
marginLeft: "10px",
|
|
fontWeight: "bolder",
|
|
}}>
|
|
{label.label}
|
|
</span>
|
|
</Card>
|
|
</>
|
|
);
|
|
}}
|
|
options={selectOptions}
|
|
optionRender={(item: any) => {
|
|
return (
|
|
<>
|
|
<Card
|
|
bordered={false}
|
|
style={{
|
|
height: 35,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
}}
|
|
size={"small"}>
|
|
<Avatar src={StorageIcon[item.value]} size={"small"} />
|
|
<span
|
|
style={{
|
|
marginLeft: "10px",
|
|
fontWeight: "bolder",
|
|
}}>
|
|
{item.label}
|
|
</span>
|
|
</Card>
|
|
</>
|
|
);
|
|
}}
|
|
placeholder={"请选择存储商"}></Select>
|
|
</div>
|
|
</ProCard>
|
|
<ProCard style={{ marginTop: 20, height: "100%" }} bordered boxShadow>
|
|
{location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? (
|
|
<>
|
|
<Empty description={"请选择存储商"} style={{ height: "65vh" }} />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Suspense>
|
|
<Outlet />
|
|
</Suspense>
|
|
</>
|
|
)}
|
|
</ProCard>
|
|
</div>
|
|
);
|
|
};
|