From e6c4957fef89aa8c93d0f19d5f284f490c301feb Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Fri, 5 Jul 2024 17:59:09 +0800 Subject: [PATCH] feat: update --- src/components/Main/Settings/index.tsx | 66 ++++++++++++++------------ src/main.tsx | 2 +- src/router/{routes.ts => routes.tsx} | 6 ++- src/store/index.ts | 2 + src/store/modules/storage_setting.ts | 50 +++++++++++++++++++ 5 files changed, 94 insertions(+), 32 deletions(-) rename src/router/{routes.ts => routes.tsx} (96%) create mode 100644 src/store/modules/storage_setting.ts diff --git a/src/components/Main/Settings/index.tsx b/src/components/Main/Settings/index.tsx index 5c6b74d..870a946 100644 --- a/src/components/Main/Settings/index.tsx +++ b/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 ( <> @@ -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 ( - <> - - + + {" "} + - {" "} - - {storage.name} - - - - + marginLeft: "10px", + fontWeight: "bolder", + }}> + {storage.name} + + + ); })} - - - + {location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? ( + <> + + + ) : ( + <> + + + + + )} ); diff --git a/src/main.tsx b/src/main.tsx index e37d53c..fa1b835 100644 --- a/src/main.tsx +++ b/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( diff --git a/src/router/routes.ts b/src/router/routes.tsx similarity index 96% rename from src/router/routes.ts rename to src/router/routes.tsx index 241f2b6..7b85502 100644 --- a/src/router/routes.ts +++ b/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: , + }, { path: "/main", Component: (props) => ComponentLoading(Main, props), diff --git a/src/store/index.ts b/src/store/index.ts index 2bcdaaa..ce24777 100644 --- a/src/store/index.ts +++ b/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(), }; diff --git a/src/store/modules/storage_setting.ts b/src/store/modules/storage_setting.ts new file mode 100644 index 0000000..b20add6 --- /dev/null +++ b/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); + } +}