feat: 存储配置界面框架

src/assets/icons/storage_setting.svg

@@ -0,0 +1 @@
+<svg t="1720161761538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="66700" width="200" height="200"><path d="M0.847053 0m511.232983 0l0.01334 0q511.232984 0 511.232984 511.232984l0 1.534032q0 511.232984-511.232984 511.232984l-0.01334 0q-511.232984 0-511.232983-511.232984l0-1.534032q0-511.232984 511.232983-511.232984Z" fill="#72DB86" opacity=".5" p-id="66701"></path><path d="M0.67364 511.513111c0 282.288647 228.837621 511.139608 511.126269 511.139608s511.139608-228.850961 511.139608-511.139608S794.101895 0.386843 511.799909 0.386843 0.67364 229.224464 0.67364 511.513111z" fill="#72DB86" opacity=".5" p-id="66702"></path><path d="M233.046206 771.631655A468.600221 468.600221 0 0 0 274.131596 964.146056a508.81855 508.81855 0 0 0 237.654973 58.506663c282.301987 0 511.139608-228.850961 511.139608-511.139608a514.341067 514.341067 0 0 0-8.297114-92.17534A468.386791 468.386791 0 0 0 703.247157 301.470722C443.542135 301.470722 233.046206 511.953312 233.046206 771.631655z" fill="#52C181" p-id="66703"></path><path d="M563.823618 536.110988a206.454087 206.454087 0 0 1 5.002279-45.220608l7.176604-32.01459 31.80116 8.003647a19.28879 19.28879 0 0 0 4.548739 0.546916 19.048681 19.048681 0 0 0 13.339413-32.641542l-18.675178-18.274995H201.16501a29.546799 29.546799 0 0 0-29.546799 29.546798v131.91345a29.546799 29.546799 0 0 0 29.546799 29.53346h373.50355l-5.869342-26.198606a206.240657 206.240657 0 0 1-4.9756-45.19393zM738.249775 329.603543l7.470071 35.055976a18.981984 18.981984 0 0 0 7.816896 11.631968h21.596509a18.901948 18.901948 0 0 0 8.003647-12.7258l5.335765-35.41614 34.589097 9.337589a203.065876 203.065876 0 0 1 29.346707 10.391402V214.844578a29.546799 29.546799 0 0 0-29.533459-29.546799H201.16501a29.546799 29.546799 0 0 0-29.546799 29.546799V346.824725a29.546799 29.546799 0 0 0 29.546799 29.533459h438.866671a206.827591 206.827591 0 0 1 64.202592-35.322764z m-84.305087-48.80891c0-20.822823 19.048681-37.69718 42.552726-37.69718s42.552726 16.874357 42.552726 37.69718-19.048681 37.69718-42.552726 37.69718-42.552726-16.874357-42.552726-37.69718zM788.566039 744.072429l-5.335765-35.41614a19.06202 19.06202 0 0 0-37.45707-1.093832l-6.856458 32.147984a33.481925 33.481925 0 0 1 0.186752 3.494926c0 20.809483-19.048681 37.69718-42.552726 37.69718s-42.552726-16.887696-42.552726-37.69718c0-11.178428 5.495838-21.209666 14.206474-28.119482a207.094379 207.094379 0 0 1-42.392653-31.867856L602.347841 660.300918l12.912551-12.632423H201.16501a29.546799 29.546799 0 0 0-29.546799 29.533459v131.91345a29.546799 29.546799 0 0 0 29.546799 29.546799h621.843392a29.546799 29.546799 0 0 0 29.53346-29.546799V724.330098a203.519416 203.519416 0 0 1-29.346708 10.418082z" fill="#FFFFFF" p-id="66704"></path><path d="M938.234247 494.478682a51.049932 51.049932 0 0 1-52.197121-87.226419 173.412362 173.412362 0 0 0-71.205784-38.884387 51.07661 51.07661 0 0 1-100.419097 2.974689 173.559096 173.559096 0 0 0-66.270201 40.551814 51.063271 51.063271 0 0 1-48.021885 86.025871 174.519534 174.519534 0 0 0 0 76.368137 51.07661 51.07661 0 0 1 48.021885 86.03921 173.732508 173.732508 0 0 0 66.270201 40.551814 51.07661 51.07661 0 0 1 100.419097 2.96135 173.278968 173.278968 0 0 0 71.205784-38.871048 51.063271 51.063271 0 0 1 52.197121-87.239758 174.746304 174.746304 0 0 0 0-83.251273zM769.557376 597.952504a61.841516 61.841516 0 1 1 61.841517-61.841516 61.854856 61.854856 0 0 1-61.841517 61.841516z" fill="#FFFFFF" p-id="66705"></path></svg>

src/components/Main/File/index.tsx

@@ -320,50 +320,55 @@ const File: FunctionComponent = () => {
 													],
 												}}
 												trigger={["contextMenu"]}>
-											<div style={{ marginLeft: 10 }}>
-												<CheckCard
-													size={"small"}
-													value={file.name}
-													bodyStyle={{ overflow: "hidden" }}
-													avatar={
-														<div
-															style={{
-																display: "flex",
-																flexDirection: "column",
-																justifyContent: "center",
-																alignItems: "center",
-																overflow: "hidden",
-															}}>
-															<Avatar
-																src={
-																	FileIcon[
-																		getFileExtension(file.name)
-																	] || file_icon
-																}
-																shape={"square"}
-																size={"large"}
-															/>
-															<Tooltip
-																title={file.name}
-																color={"lime"}
-																autoAdjustOverflow={true}
-																placement={"bottom"}>
-																<span className={styles.file_name}>
-																	{file.name}
-																</span>
-															</Tooltip>
-														</div>
-													}
-													className={styles.file_card}
-													style={{
-														width: 100,
-														height: 100,
-														display: "flex",
-														alignItems: "center",
-														justifyContent: "center",
-													}}
-												/>
-											</div>
+												<div style={{ marginLeft: 10 }}>
+													<CheckCard
+														size={"small"}
+														value={file.name}
+														bodyStyle={{ overflow: "hidden" }}
+														avatar={
+															<div
+																style={{
+																	display: "flex",
+																	flexDirection: "column",
+																	justifyContent: "center",
+																	alignItems: "center",
+																	overflow: "hidden",
+																}}>
+																<Avatar
+																	src={
+																		FileIcon[
+																			getFileExtension(
+																				file.name,
+																			)
+																		] || file_icon
+																	}
+																	shape={"square"}
+																	size={"large"}
+																/>
+																<Tooltip
+																	title={file.name}
+																	color={"lime"}
+																	autoAdjustOverflow={true}
+																	placement={"bottom"}>
+																	<span
+																		className={
+																			styles.file_name
+																		}>
+																		{file.name}
+																	</span>
+																</Tooltip>
+															</div>
+														}
+														className={styles.file_card}
+														style={{
+															width: 100,
+															height: 100,
+															display: "flex",
+															alignItems: "center",
+															justifyContent: "center",
+														}}
+													/>
+												</div>
 											</Dropdown>
 										);
 									}

src/components/Main/Settings/components/AliSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const AliSettings: React.FC = () => {
+	return <>阿里云OSs设置</>;
+};
+
+export default AliSettings;

src/components/Main/Settings/components/AwsSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const AwsSettings: React.FC = () => {
+	return <>AWS设置</>;
+};
+
+export default AwsSettings;

src/components/Main/Settings/components/BaiduSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const BaiduSettings: React.FC = () => {
+	return <>百度OBS设置</>;
+};
+
+export default BaiduSettings;

src/components/Main/Settings/components/HuaweiSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const HuaweiSettings: React.FC = () => {
+	return <>华为COS设置</>;
+};
+
+export default HuaweiSettings;

src/components/Main/Settings/components/JdSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const JdSettings: React.FC = () => {
+	return <>AWS设置</>;
+};
+
+export default JdSettings;

src/components/Main/Settings/components/MinioSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const MinioSettings: React.FC = () => {
+	return <>Minio设置</>;
+};
+
+export default MinioSettings;

src/components/Main/Settings/components/PinganSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const PinganSettings: React.FC = () => {
+	return <>平安云设置</>;
+};
+
+export default PinganSettings;

src/components/Main/Settings/components/QingyunSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const QingyunSettings: React.FC = () => {
+	return <>青云设置</>;
+};
+
+export default QingyunSettings;

src/components/Main/Settings/components/QiniuSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const AliSettings: React.FC = () => {
+	return <>七牛设置</>;
+};
+
+export default AliSettings;

src/components/Main/Settings/components/TencentSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const TencentSettings: React.FC = () => {
+	return <>腾讯云COS设置</>;
+};
+
+export default TencentSettings;

src/components/Main/Settings/components/UcloudSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const UcloudSettings: React.FC = () => {
+	return <>Ucloud设置</>;
+};
+
+export default UcloudSettings;

src/components/Main/Settings/components/UpSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const UpSettings: React.FC = () => {
+	return <>又拍云设置</>;
+};
+
+export default UpSettings;

src/components/Main/Settings/components/WangyiSettings.tsx

@@ -0,0 +1,8 @@
+/** @format */
+
+import React from "react";
+const WangyiSettings: React.FC = () => {
+	return <>网易云设置</>;
+};
+
+export default WangyiSettings;

src/components/Main/Settings/defaultSettings.ts

@@ -0,0 +1,60 @@
+/** @format */
+const selectOptions = [
+	{
+		name: "阿里云OSS",
+		value: "ali",
+	},
+	{
+		name: "腾讯云COS",
+		value: "tencent",
+	},
+	{
+		name: "华为云OBS",
+		value: "huawei",
+	},
+	{
+		name: "百度云BOS",
+		value: "baidu",
+	},
+	{
+		name: "MinIO",
+		value: "minio",
+	},
+	{
+		name: "京东云OSS",
+		value: "jd",
+	},
+	{
+		name: "亚马逊S3",
+		value: "aws",
+	},
+	{
+		name: "网易数帆NOS",
+		value: "wangyi",
+	},
+	{
+		name: "七牛云Kodo",
+		value: "qiniu",
+	},
+	{
+		name: "又拍云USS",
+		value: "up",
+	},
+	{
+		name: "平安云OSS",
+		value: "pinanyun",
+	},
+	{
+		name: "青云QingCloud",
+		value: "qingyun",
+	},
+	{
+		name: "UCloud US3",
+		value: "ucloud",
+	},
+	{
+		name: "金山云OBS",
+		value: "jinshan",
+	},
+];
+export default selectOptions;

src/components/Main/Settings/index.module.less

@@ -0,0 +1,5 @@
+.settings_header{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}

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>
+		</>
+	);
+};

src/context/stroage-icon.ts

@@ -0,0 +1,34 @@
+/** @format */
+
+import aliyun from "@/assets/icons/aliyun.svg";
+import tencent from "@/assets/icons/tencent.svg";
+import huawei from "@/assets/icons/huawei.svg";
+import baiduyun from "@/assets/icons/baiduyun.svg";
+import minio from "@/assets/icons/minio.svg";
+import jdyun from "@/assets/icons/jdyun.svg";
+import aws from "@/assets/icons/aws.svg";
+import wangyi from "@/assets/icons/wangyi.svg";
+import qiniu from "@/assets/icons/qiniu.svg";
+import upyun from "@/assets/icons/upyun.svg";
+import pinanyun from "@/assets/icons/pinanyun.svg";
+import qingyun from "@/assets/icons/qingyun.svg";
+import ucloud from "@/assets/icons/ucloud.svg";
+import jinshan from "@/assets/icons/jinshan.svg";
+
+const StorageIcon: any = {
+	ali: aliyun,
+	tencent: tencent,
+	huawei: huawei,
+	baidu: baiduyun,
+	minio: minio,
+	jd: jdyun,
+	aws: aws,
+	wangyi: wangyi,
+	qiniu: qiniu,
+	up: upyun,
+	pinanyun: pinanyun,
+	qingyun: qingyun,
+	ucloud: ucloud,
+	jinshan: jinshan,
+};
+export default StorageIcon;

src/router/modules/main/settings/ali/ali.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const Ali = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Settings/components/AliSettings.tsx"));
+		}),
+);
+export default Ali;

src/router/modules/main/settings/aws/aws.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const Aws = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Settings/components/AwsSettings.tsx"));
+		}),
+);
+export default Aws;

src/router/modules/main/settings/baidu/baidu.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const Baidu = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Settings/components/BaiduSettings.tsx"));
+		}),
+);
+export default Baidu;

src/router/modules/main/settings/huawei/huawei.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const Huawei = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Settings/components/HuaweiSettings.tsx"));
+		}),
+);
+export default Huawei;

src/router/modules/main/settings/index.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const MainSetting = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Settings"));
+		}),
+);
+export default MainSetting;

src/router/modules/main/settings/jd/jd.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const Jd = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Settings/components/JdSettings.tsx"));
+		}),
+);
+export default Jd;

src/router/modules/main/settings/tencent/tencent.ts

@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const Tencent = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Settings/components/TencentSettings.tsx"));
+		}),
+);
+export default Tencent;

src/router/routes.ts

@@ -16,6 +16,8 @@ import MainFile from "@/router/modules/main/file";
 import MainUserInfo from "@/router/modules/main/userInfo";
 import MainUserSetting from "@/router/modules/main/userSetting";
 import MainShare from "@/router/modules/main/share";
+import MainSetting from "@/router/modules/main/settings";
+import Ali from "@/router/modules/main/settings/ali/ali.ts";
 const routes: RouteObject[] = [
 	{
 		path: "/",
@@ -66,6 +68,16 @@ const routes: RouteObject[] = [
 				path: "/main/share",
 				Component: MainShare,
 			},
+			{
+				path: "/main/setting",
+				Component: MainSetting,
+				children: [
+					{
+						path: "/main/setting/ali",
+						Component: Ali,
+					},
+				],
+			},
 		],
 	},
 	{

src/views/Main/defaultSettings.tsx

@@ -21,6 +21,7 @@ import pinanyun from "@/assets/icons/pinanyun.svg";
 import qingyun from "@/assets/icons/qingyun.svg";
 import ucloud from "@/assets/icons/ucloud.svg";
 import jinshan from "@/assets/icons/jinshan.svg";
+import storage_setting from "@/assets/icons/storage_setting.svg";
 export default {
 	route: {
 		path: "/",
@@ -31,6 +32,11 @@ export default {
 				name: "仪表盘",
 				icon: dashboard,
 			},
+			{
+				path: "main/setting",
+				name: "配置",
+				icon: storage_setting,
+			},
 			{
 				path: "main/bucket",
 				name: "存储桶",
@@ -38,7 +44,7 @@ export default {
 			},
 			{
 				path: "main/file",
-				name: "我的文件",
+				name: "文件",
 				icon: file,
 			},
 			{
@@ -67,7 +73,7 @@ export default {
 		],
 	},
 	location: {
-		pathname: "/",
+		pathname: "/main/home",
 	},
 	appList: [
 		{
@@ -122,7 +128,7 @@ export default {
 		},
 		{
 			icon: wangyi,
-			title: "网易数帆",
+			title: "网易数帆NOS",
 			desc: "高可用、高可靠、高性能的云端存储服务",
 			url: "https://sf.163.com/product/nos",
 			target: "_blank",