feat: update

src/components/Main/Settings/index.tsx

@@ -1,15 +1,15 @@
 /** @format */
 import { ProCard } from "@ant-design/pro-components";
-import { Avatar, Card, Select } from "antd";
+import { Avatar, Card, Empty, Select } from "antd";
 
 import styles from "./index.module.less";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useLocation, 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();
+	const location = useLocation();
 	return (
 		<>
 			<ProCard bordered={false}>
@@ -20,6 +20,9 @@ export default () => {
 						style={{ width: "20%" }}
 						showSearch={true}
 						allowClear={true}
+						onClear={() => {
+							navigate("/main/setting");
+						}}
 						notFoundContent={"未找到，请先配置存储商"}
 						onSelect={(value: any) => {
 							navigate("/main/setting/" + value);
@@ -27,40 +30,43 @@ export default () => {
 						placeholder={"请选择存储商"}>
 						{selectOptions.map((storage: any, index: any) => {
 							return (
-								<>
-									<Select.Option value={storage.value} key={index}>
-										<Card
-											bordered={false}
+								<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={{
-												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>
-								</>
+												marginLeft: "10px",
+												fontWeight: "bolder",
+											}}>
+											{storage.name}
+										</span>
+									</Card>
+								</Select.Option>
 							);
 						})}
 					</Select>
 				</div>
 			</ProCard>
 			<Card style={{ marginTop: 20 }}>
-				<Suspense>
-					<Outlet />
-				</Suspense>
+				{location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? (
+					<>
+						<Empty />
+					</>
+				) : (
+					<>
+						<Suspense>
+							<Outlet />
+						</Suspense>
+					</>
+				)}
 			</Card>
 		</>
 	);