62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
/** @format */
|
|
import { FunctionComponent, Suspense } from "react";
|
|
import { CheckCard, ProCard } from "@ant-design/pro-components";
|
|
import styles from "./index.module.less";
|
|
|
|
import { Outlet, useNavigate } from "react-router-dom";
|
|
import { Button, Empty } from "antd";
|
|
import StorageIcon from "@/constant/stroage-icon.ts";
|
|
import { ReloadOutlined } from "@ant-design/icons";
|
|
|
|
const Bucket: FunctionComponent = () => {
|
|
const navigate = useNavigate();
|
|
const checkList = ["minio", "ali", "tencent", "huawei", "baidu", "jd"];
|
|
return (
|
|
<div className={styles.div_proCard}>
|
|
<ProCard
|
|
extra={<Button type="primary" shape={"circle"} icon={<ReloadOutlined />}></Button>}
|
|
title="存储商"
|
|
headerBordered
|
|
className={styles.proCard}
|
|
boxShadow={true}
|
|
colSpan={"100%"}
|
|
bordered>
|
|
<CheckCard.Group>
|
|
<div className={styles.div_checkCardArea}>
|
|
{checkList.map((item) => {
|
|
return (
|
|
<CheckCard
|
|
key={item}
|
|
avatar={StorageIcon[item]}
|
|
style={{ width: "100%" }}
|
|
title={item}
|
|
description="点击查看"
|
|
value={item}
|
|
onChange={() => {
|
|
navigate(`/main/bucket/${item}`);
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</CheckCard.Group>
|
|
</ProCard>
|
|
<ProCard className={styles.proCardBucket} bordered boxShadow>
|
|
{location.pathname === "/main/bucket" || location.pathname === "/main/bucket/" ? (
|
|
<>
|
|
<div></div>
|
|
<Empty description={"请选择存储商"} />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Suspense>
|
|
<Outlet />
|
|
</Suspense>
|
|
</>
|
|
)}
|
|
</ProCard>
|
|
</div>
|
|
);
|
|
};
|
|
export default Bucket;
|