feat: 存储配置界面框架

src/components/Main/Settings/index.tsx

@@ -0,0 +1,67 @@
+/** @format */
+import { ProCard } from "@ant-design/pro-components";
+import { Avatar, Card, Select } from "antd";
+
+import styles from "./index.module.less";
+import { Outlet, useNavigate } from "react-router-dom";
+import { Suspense } from "react";
+import selectOptions from "@/components/Main/Settings/defaultSettings.ts";
+import StorageIcon from "@/context/stroage-icon.ts";
+
+export default () => {
+	const navigate = useNavigate();
+	return (
+		<>
+			<ProCard bordered={false}>
+				<div className={styles.settings_header}>
+					<Select
+						size="large"
+						status="warning"
+						style={{ width: "20%" }}
+						showSearch={true}
+						allowClear={true}
+						notFoundContent={"未找到，请先配置存储商"}
+						onSelect={(value: any) => {
+							navigate("/main/setting/" + value);
+						}}
+						placeholder={"请选择存储商"}>
+						{selectOptions.map((storage: any, index: any) => {
+							return (
+								<>
+									<Select.Option value={storage.value} key={index}>
+										<Card
+											bordered={false}
+											style={{
+												height: 35,
+												display: "flex",
+												alignItems: "center",
+												flexDirection: "row",
+											}}
+											size={"small"}>
+											<Avatar
+												src={StorageIcon[storage.value]}
+												size={"small"}
+											/>{" "}
+											<span
+												style={{
+													marginLeft: "10px",
+													fontWeight: "bolder",
+												}}>
+												{storage.name}
+											</span>
+										</Card>
+									</Select.Option>
+								</>
+							);
+						})}
+					</Select>
+				</div>
+			</ProCard>
+			<Card style={{ marginTop: 20 }}>
+				<Suspense>
+					<Outlet />
+				</Suspense>
+			</Card>
+		</>
+	);
+};