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}>
-									<Select.Option value={storage.value} key={index}>
+									<Card
-										<Card
+										bordered={false}
-											bordered={false}
+										style={{
+											height: 35,
+											display: "flex",
+											alignItems: "center",
+											flexDirection: "row",
+										}}
+										size={"small"}>
+										<Avatar src={StorageIcon[storage.value]} size={"small"} />{" "}
+										<span
 											style={{
-												height: 35,
+												marginLeft: "10px",
-												display: "flex",
+												fontWeight: "bolder",
-												alignItems: "center",
+											}}>
-												flexDirection: "row",
+											{storage.name}
-											}}
+										</span>
-											size={"small"}>
+									</Card>
-											<Avatar
+								</Select.Option>
-												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>
+				{location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? (
-					<Outlet />
+					<>
-				</Suspense>
+						<Empty />
+					</>
+				) : (
+					<>
+						<Suspense>
+							<Outlet />
+						</Suspense>
+					</>
+				)}
 			</Card>
 		</>
 	);

src/main.tsx

@@ -5,7 +5,7 @@ import "./assets/styles/index.less";
 import "virtual:svg-icons-register";
 import { Provider as MobxProvider } from "mobx-react";
 import { RootStore } from "@/store";
-import routeConfig from "@/router/routes.ts";
+import routeConfig from "@/router/routes.tsx";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 const router = createBrowserRouter(routeConfig);
 ReactDOM.createRoot(document.getElementById("root")!).render(

src/router/routes.tsx

@@ -1,6 +1,6 @@
 /** @format */
 
-import type { RouteObject } from "react-router-dom";
+import { Navigate, RouteObject } from "react-router-dom";
 
 import NoFound from "@/views/404/404";
 import Login from "./modules/login/index.ts";
@@ -53,6 +53,10 @@ const routes: RouteObject[] = [
 		path: "/forget",
 		Component: (props) => ComponentLoading(Forget, props),
 	},
+	{
+		path: "/main",
+		element: <Navigate to={"/main/home"} />,
+	},
 	{
 		path: "/main",
 		Component: (props) => ComponentLoading(Main, props),

src/store/index.ts

@@ -2,9 +2,11 @@
 
 import { useUserStore } from "./modules/user.ts";
 import { useFileStore } from "@/store/modules/file.ts";
+import { UseStorageSettingStore } from "@/store/modules/storage_setting.ts";
 
 /** 将每个Store实例化 */
 export const RootStore = {
 	user: new useUserStore(),
 	file: new useFileStore(),
+	storage: new UseStorageSettingStore(),
 };

src/store/modules/storage_setting.ts

@@ -0,0 +1,50 @@
+/** @format */
+
+import { action, makeObservable, observable } from "mobx";
+import { isHydrated, makePersistable } from "mobx-persist-store";
+import { handleLocalforage } from "@/utils/localforage";
+
+export class UseStorageSettingStore {
+	selectValue: string = "";
+
+	constructor() {
+		makeObservable(this, {
+			selectValue: observable,
+			setSelectValue: action,
+			getSelectValue: action,
+			isHydrated: action,
+		});
+		makePersistable(
+			this,
+			{
+				// 在构造函数内使用 makePersistable
+				name: "storage_setting", // 保存的name，用于在storage中的名称标识，只要不和storage中其他名称重复就可以
+				properties: ["selectValue"], // 要保存的字段，这些字段会被保存在name对应的storage中，注意：不写在这里面的字段将不会被保存，刷新页面也将丢失：get字段例外。get数据会在数据返回后再自动计算
+				storage: handleLocalforage, // 保存的位置：可以是localStorage，sessionstorage
+				removeOnExpiration: true, //如果 expireIn 具有值且已过期，则在调用 getItem 时将自动删除存储中的数据。默认值为 true。
+				stringify: false, //如果为 true，则数据在传递给 setItem 之前将是 JSON.stringify。默认值为 true。
+				expireIn: 2592000000, // 一个以毫秒为单位的值，用于确定 getItem 何时不应检索存储中的数据。默认情况下永不过期。
+				debugMode: false, // 如果为 true，将为多个 mobx-persist-store 项调用 console.info。默认值为 false。
+			},
+			{
+				delay: 0, // 允许您设置一个 delay 选项来限制 write 函数的调用次数。默认情况下没有延迟。
+				fireImmediately: false, // 确定是应立即保留存储数据，还是等到存储中的属性发生更改。 false 默认情况下。
+			},
+		).then(
+			action(() => {
+				// persist 完成的回调，在这里可以执行一些拿到数据后需要执行的操作，如果在页面上要判断是否完成persist，使用 isHydrated
+				// console.log(persistStore)
+			}),
+		);
+	}
+	getSelectValue() {
+		return this.selectValue ? this.selectValue : null;
+	}
+	setSelectValue(value: any) {
+		this.selectValue = value;
+	}
+
+	isHydrated() {
+		return isHydrated(this);
+	}
+}