From 6ec4a9285368a362c70e418ed6e6cb78b9fc6f7c Mon Sep 17 00:00:00 2001
From: landaiqing <3517283258@qq.com>
Date: Fri, 12 Jul 2024 23:46:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=95=8C=E9=9D=A2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.cjs                                 |   6 +
 pnpm-lock.yaml                                |  40 +-
 src/assets/images/favorites.png               | Bin 0 -> 5597 bytes
 src/assets/styles/index.less                  |  73 ++-
 src/components/Main/Bucket/index.module.less  |   4 +-
 .../Main/File/components/FileUpload.tsx       | 115 +++-
 src/components/Main/File/index.module.less    |  95 ++-
 src/components/Main/File/index.tsx            | 121 +++-
 .../Main/Settings/components/AliSettings.tsx  | 452 +++++++-------
 .../Main/Settings/components/AwsSettings.tsx  | 524 ++++++++--------
 .../Settings/components/BaiduSettings.tsx     | 582 +++++++++---------
 .../Settings/components/HuaweiSettings.tsx    | 488 +++++++--------
 .../Main/Settings/components/JdSettings.tsx   | 492 +++++++--------
 .../Settings/components/JinshanSettings.tsx   | 560 ++++++++---------
 .../Settings/components/MinioSettings.tsx     | 454 +++++++-------
 .../Settings/components/PinanSettings.tsx     | 454 +++++++-------
 .../Settings/components/QingyunSettings.tsx   | 512 +++++++--------
 .../Settings/components/QiniuSettings.tsx     | 454 +++++++-------
 .../Settings/components/TencentSettings.tsx   | 434 ++++++-------
 .../Settings/components/UcloudSettings.tsx    | 488 +++++++--------
 .../Main/Settings/components/UpSettings.tsx   | 454 +++++++-------
 .../Settings/components/WangyiSettings.tsx    | 488 +++++++--------
 src/components/Main/Settings/index.tsx        |   2 +-
 .../Share/components/ShareAdd/ShareAdd.tsx    |  74 ++-
 .../components/ShareDetail/ShareDetail.tsx    | 103 +++-
 .../components/Comment/index.module.less      |   0
 .../ShareDetail/components/Comment/index.tsx  |  60 ++
 .../Share/components/ShareList/ShareList.tsx  |  98 ++-
 .../components/ShareList/index.module.less    |   1 +
 src/components/Main/Share/index.module.less   |  21 +-
 src/components/Main/Share/index.tsx           | 117 ++--
 .../Main/User/MyFavorites/index.module.less   |   0
 .../Main/User/MyFavorites/index.tsx           | 131 ++++
 src/constant/random-color.ts                  |  24 +
 src/constant/stroage-icon.ts                  |   2 +
 .../modules/main/user/myFavorites/index.ts    |  11 +
 src/router/routes.tsx                         |   6 +
 src/store/modules/file.ts                     | 134 ++--
 src/views/Main/index.tsx                      |  74 ++-
 src/views/Main/settings.tsx                   |   5 +
 40 files changed, 4396 insertions(+), 3757 deletions(-)
 create mode 100644 src/assets/images/favorites.png
 create mode 100644 src/components/Main/Share/components/ShareDetail/components/Comment/index.module.less
 create mode 100644 src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx
 create mode 100644 src/components/Main/User/MyFavorites/index.module.less
 create mode 100644 src/components/Main/User/MyFavorites/index.tsx
 create mode 100644 src/constant/random-color.ts
 create mode 100644 src/router/modules/main/user/myFavorites/index.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 9b86464..3ce81c0 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -44,6 +44,12 @@ module.exports = {
 		"@typescript-eslint/explicit-function-return-type": 0, // 禁止函数必须要定义返回类型
 		"react/display-name": "off",
 		"@typescript-eslint/no-explicit-any": ["off"],
+		"@typescript-eslint/no-var-requires": ["off"],
+		"@typescript-eslint/no-use-before-define": ["off"],
+		"@typescript-eslint/no-empty-function": ["off"],
+		"@typescript-eslint/no-empty-interface": ["off"],
+		"@typescript-eslint/no-unused-vars": ["off"],
+		"@typescript-eslint/no-non-null-assertion": ["off"],
 		"no-control-regex": "off",
 		"no-eval": 0
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0719a84..4e72bee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
   '@ant-design/pro-components':
     specifier: ^2.7.10
     version: 2.7.10(antd@5.19.1)(rc-field-form@1.44.0)(react-dom@18.3.1)(react@18.3.1)
+  '@ant-design/pro-provider':
+    specifier: ^2.14.7
+    version: 2.14.7(antd@5.19.1)(react-dom@18.3.1)(react@18.3.1)
   '@ant-design/use-emotion-css':
     specifier: ^1.0.4
     version: 1.0.4(antd@5.19.1)(react-dom@18.3.1)(react@18.3.1)
@@ -191,23 +194,6 @@ packages:
       '@ctrl/tinycolor': 3.6.1
     dev: false
 
-  /@ant-design/cssinjs@1.20.0(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-uG3iWzJxgNkADdZmc6W0Ci3iQAUOvLMcM8SnnmWq3r6JeocACft4ChnY/YWvI2Y+rG/68QBla/O+udke1yH3vg==}
-    peerDependencies:
-      react: '>=16.0.0'
-      react-dom: '>=16.0.0'
-    dependencies:
-      '@babel/runtime': 7.24.6
-      '@emotion/hash': 0.8.0
-      '@emotion/unitless': 0.7.5
-      classnames: 2.5.1
-      csstype: 3.1.3
-      rc-util: 5.41.0(react-dom@18.3.1)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      stylis: 4.3.2
-    dev: false
-
   /@ant-design/cssinjs@1.21.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-gIilraPl+9EoKdYxnupxjHB/Q6IHNRjEXszKbDxZdsgv4sAZ9pjkCq8yanDWNvyfjp4leir2OVAJm0vxwKK8YA==}
     peerDependencies:
@@ -425,11 +411,11 @@ packages:
       react: '>=17.0.0'
       react-dom: '>=17.0.0'
     dependencies:
-      '@ant-design/cssinjs': 1.20.0(react-dom@18.3.1)(react@18.3.1)
-      '@babel/runtime': 7.24.6
+      '@ant-design/cssinjs': 1.21.0(react-dom@18.3.1)(react@18.3.1)
+      '@babel/runtime': 7.24.7
       '@ctrl/tinycolor': 3.6.1
       antd: 5.19.1(react-dom@18.3.1)(react@18.3.1)
-      rc-util: 5.41.0(react-dom@18.3.1)(react@18.3.1)
+      rc-util: 5.43.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       swr: 2.2.5(react@18.3.1)
@@ -2493,7 +2479,7 @@ packages:
     resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
     dependencies:
       '@babel/helper-module-imports': 7.24.6
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.24.7
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
       '@emotion/serialize': 1.1.4
@@ -4315,7 +4301,7 @@ packages:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.24.7
       cosmiconfig: 7.1.0
       resolve: 1.22.8
     dev: false
@@ -5869,7 +5855,7 @@ packages:
   /i18next@23.11.5:
     resolution: {integrity: sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==}
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.24.7
     dev: false
 
   /iconv-lite@0.6.3:
@@ -7838,9 +7824,9 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.24.7
       classnames: 2.5.1
-      rc-util: 5.41.0(react-dom@18.3.1)(react@18.3.1)
+      rc-util: 5.43.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       resize-observer-polyfill: 1.5.1
@@ -8056,7 +8042,7 @@ packages:
       react: '>=16.9.0'
       react-dom: '>=16.9.0'
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.24.7
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-is: 18.3.1
@@ -8229,7 +8215,7 @@ packages:
   /regenerator-transform@0.15.2:
     resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
     dependencies:
-      '@babel/runtime': 7.24.6
+      '@babel/runtime': 7.24.7
     dev: false
 
   /regexp.prototype.flags@1.5.2:
diff --git a/src/assets/images/favorites.png b/src/assets/images/favorites.png
new file mode 100644
index 0000000000000000000000000000000000000000..05e10557a53f76058721ab330ba51d1957feb4b8
GIT binary patch
literal 5597
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

literal 0
HcmV?d00001

diff --git a/src/assets/styles/index.less b/src/assets/styles/index.less
index b6517be..d58d3a6 100644
--- a/src/assets/styles/index.less
+++ b/src/assets/styles/index.less
@@ -1,33 +1,40 @@
-/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
-// 滚动条整体部分
-&::-webkit-scrollbar {
-	width: 6px;
-	height: 8px;
-}
-
-// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
-&::-webkit-scrollbar-button {
-	visibility: hidden;
-}
-
-// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
-&::-webkit-scrollbar-thumb {
-	background: rgba(144, 147, 153, 0.3);
-	cursor: pointer;
-	border-radius: 4px;
-}
-
-// 边角，即两个滚动条的交汇处
-&::-webkit-scrollbar-corner {
-	visibility: hidden;
-}
-
-// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
-&::-webkit-resizer {
-	visibility: hidden;
-}
-
-body {
-	background-image: url("@/assets/images/background.png");
-	background-size: cover;
-}
+/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
+// 滚动条整体部分
+&::-webkit-scrollbar {
+	width: 6px;
+	height: 8px;
+}
+
+// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
+&::-webkit-scrollbar-button {
+	visibility: hidden;
+}
+
+// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
+&::-webkit-scrollbar-thumb {
+	background: rgba(144, 147, 153, 0.3);
+	cursor: pointer;
+	border-radius: 4px;
+}
+
+// 边角，即两个滚动条的交汇处
+&::-webkit-scrollbar-corner {
+	visibility: hidden;
+}
+
+// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
+&::-webkit-resizer {
+	visibility: hidden;
+}
+
+body {
+	background-image: url("@/assets/images/background.png");
+	background-size: cover;
+}
+
+.ant-pro-page-container-children-container-no-header {
+	padding-block-start: 10px !important;
+}
+ .ant-pro-page-container-children-container {
+	 padding-inline: 10px !important;
+ }
diff --git a/src/components/Main/Bucket/index.module.less b/src/components/Main/Bucket/index.module.less
index 0d1d495..85e986e 100644
--- a/src/components/Main/Bucket/index.module.less
+++ b/src/components/Main/Bucket/index.module.less
@@ -14,8 +14,8 @@
 
 }
 .div_checkCardArea{
-	height: 65vh;
-	max-height: 65vh;
+	height: 68vh;
+	max-height: 68vh;
 	overflow-y:scroll;
 	overflow-x: hidden;
 }
diff --git a/src/components/Main/File/components/FileUpload.tsx b/src/components/Main/File/components/FileUpload.tsx
index 1c4839d..ad95a24 100644
--- a/src/components/Main/File/components/FileUpload.tsx
+++ b/src/components/Main/File/components/FileUpload.tsx
@@ -1,13 +1,17 @@
 /** @format */
 
 import React from "react";
-import { message, Upload } from "antd";
-import { InboxOutlined } from "@ant-design/icons";
+import { Avatar, Card, Flex, Input, message, Select, Upload } from "antd";
+import { CloudUploadOutlined } from "@ant-design/icons";
+import { ProCard } from "@ant-design/pro-components";
+import selectOptions from "@/components/Main/Settings/settings.ts";
+import StorageIcon from "@/constant/stroage-icon.ts";
 
 const { Dragger } = Upload;
 const props: any = {
 	name: "file",
 	multiple: true,
+	directory: true,
 	action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
 	onChange(info) {
 		const { status } = info.file;
@@ -27,13 +31,106 @@ const props: any = {
 const FileUpload: React.FC = () => {
 	return (
 		<>
-			<Dragger {...props}>
-				<p className="ant-upload-drag-icon">
-					<InboxOutlined />
-				</p>
-				<p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
-				<p className="ant-upload-hint">支持单次或批量上传。</p>
-			</Dragger>
+			<Flex vertical={false} align={"center"}>
+				<ProCard bordered={false} boxShadow={false}>
+					<Flex vertical={false}>
+						<Select
+							size="large"
+							status="warning"
+							style={{
+								width: "30%",
+								display: "flex",
+								flexDirection: "row",
+								alignItems: "center",
+							}}
+							showSearch={true}
+							allowClear={true}
+							notFoundContent={"未找到，请先配置存储商"}
+							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>
+						<Select
+							size="large"
+							status="warning"
+							style={{
+								width: "30%",
+								display: "flex",
+								flexDirection: "row",
+								alignItems: "center",
+								marginLeft: "10px",
+							}}
+							showSearch={true}
+							allowClear={true}
+							notFoundContent={"未找到，请先配置存储商"}
+							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["bucket"]}
+												size={"small"}
+												shape={"square"}
+											/>{" "}
+											<span
+												style={{
+													marginLeft: "10px",
+													fontWeight: "bolder",
+												}}>
+												{storage.name}
+											</span>
+										</Card>
+									</Select.Option>
+								);
+							})}
+						</Select>
+						<Input placeholder={"请输入路径/默认当前打开的路径"} style={{ marginLeft: 10,width: "40%" }}></Input>
+					</Flex>
+				</ProCard>
+			</Flex>
+			<ProCard>
+				<Dragger {...props}>
+					<p className="ant-upload-drag-icon">
+						<CloudUploadOutlined />
+					</p>
+					<p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
+					<p className="ant-upload-hint">支持单次或批量上传。</p>
+				</Dragger>
+			</ProCard>
 		</>
 	);
 };
diff --git a/src/components/Main/File/index.module.less b/src/components/Main/File/index.module.less
index a8edd9f..562f86e 100644
--- a/src/components/Main/File/index.module.less
+++ b/src/components/Main/File/index.module.less
@@ -1,48 +1,47 @@
-.file_main {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-
-	.file_content_left {
-		width: 25%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.file_content_right {
-		width: 73%;
-		height: 75vh;
-
-		.file_right_content {
-			display: flex;
-			flex-wrap: wrap;
-			flex-direction: row;
-			margin-top: 20px;
-
-			.file_card:hover {
-				background-color: rgba(16, 15, 15, 0.08);
-			}
-
-
-
-		}
-
-		.file_right_header {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-		}
-	}
-}
-
-.file_name {
-	width: 65px;
-	text-align: center;
-	font-size: 12px;
-	margin-top: 5px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	display: inline-block;
-	-o-text-overflow: ellipsis;
-}
+.file_main {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+
+	.file_content_left {
+		width: 25%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.file_content_right {
+		width: 73%;
+		height: 75vh;
+
+		.file_right_content {
+			display: flex;
+			flex-wrap: wrap;
+			flex-direction: row;
+			margin-top: 10px;
+
+			.file_card:hover {
+				background-color: rgba(16, 15, 15, 0.08);
+			}
+
+
+
+		}
+
+		.file_right_header {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+}
+
+.file_name {
+	width: 65px;
+	text-align: center;
+	font-size: 12px;
+	margin-top: 5px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	display: inline-block;
+	-o-text-overflow: ellipsis;
+}
diff --git a/src/components/Main/File/index.tsx b/src/components/Main/File/index.tsx
index 6dbf236..801dd2e 100644
--- a/src/components/Main/File/index.tsx
+++ b/src/components/Main/File/index.tsx
@@ -4,12 +4,13 @@ import { CheckCard, ProCard } from "@ant-design/pro-components";
 import styles from "./index.module.less";
 import {
 	Avatar,
-	Breadcrumb,
 	Button,
 	Card,
 	Divider,
 	Dropdown,
+	Flex,
 	FloatButton,
+	Input,
 	message,
 	Modal,
 	Select,
@@ -18,7 +19,20 @@ import {
 import ali from "@/assets/icons/aliyun.svg";
 import bucket from "@/assets/icons/bucket.svg";
 import tencent from "@/assets/icons/tencent.svg";
-import { CloudUploadOutlined, EllipsisOutlined, LeftOutlined } from "@ant-design/icons";
+import {
+	CloudUploadOutlined,
+	CopyOutlined,
+	DeleteOutlined,
+	DownloadOutlined,
+	EllipsisOutlined,
+	EyeOutlined,
+	LeftOutlined,
+	QrcodeOutlined,
+	RedoOutlined,
+	ScissorOutlined,
+	SearchOutlined,
+	SnippetsOutlined,
+} from "@ant-design/icons";
 import standard_dir from "@/assets/icons/standard_directory.svg";
 import useStore from "@/utils/store/useStore.tsx";
 import { observer } from "mobx-react";
@@ -103,11 +117,16 @@ const File: FunctionComponent = () => {
 		<>
 			<div className={styles.file_main}>
 				<div className={styles.file_content_left}>
-					<ProCard bordered boxShadow style={{ height: "75vh" }}>
+					<ProCard bordered boxShadow style={{ height: "83vh" }}>
 						<Select
 							size="large"
 							status="warning"
-							style={{ width: "100%" }}
+							style={{
+								width: "100%",
+								display: "flex",
+								flexDirection: "row",
+								alignItems: "center",
+							}}
 							showSearch={true}
 							allowClear={true}
 							notFoundContent={"未找到，请先配置存储商"}
@@ -220,17 +239,87 @@ const File: FunctionComponent = () => {
 					</ProCard>
 				</div>
 				<div className={styles.file_content_right}>
-					<ProCard bordered boxShadow style={{ height: "75vh" }}>
+					<ProCard bordered boxShadow style={{ height: "83vh" }}>
 						<div className={styles.file_right_header}>
-							<Button
-								shape="circle"
-								icon={<LeftOutlined />}
-								onClick={() => {
-									setFiles(dataList);
-									store.clearFilePath();
-								}}
-							/>
-							<Breadcrumb items={store.getFilePath()} style={{ marginLeft: 15 }} />
+							<Flex vertical={false} align={"center"} justify={"flex-start"}>
+								<Flex vertical={false} align={"center"}>
+									<Button
+										shape="circle"
+										icon={<LeftOutlined />}
+										onClick={() => {
+											setFiles(dataList);
+											store.clearFilePath();
+										}}
+									/>
+									<Button
+										style={{ marginLeft: 20 }}
+										shape="circle"
+										icon={<RedoOutlined />}
+									/>
+								</Flex>
+								<Input
+									value={store.getFilePath().join("/")}
+									style={{ marginLeft: 15}}
+								/>
+							</Flex>
+							<Flex
+								vertical={false}
+								align={"center"}
+								justify={"flex-start"}
+								style={{ marginTop: 10 }}>
+								<Tooltip title="删除" placement={"bottom"}>
+									<Button shape="circle" icon={<DeleteOutlined />} />
+								</Tooltip>
+								<Tooltip title="下载" placement={"bottom"}>
+									<Button
+										style={{ marginLeft: 20 }}
+										shape="circle"
+										icon={<DownloadOutlined />}
+									/>
+								</Tooltip>
+								<Tooltip title="预览" placement={"bottom"}>
+									<Button
+										style={{ marginLeft: 20 }}
+										shape="circle"
+										icon={<EyeOutlined />}
+									/>
+								</Tooltip>
+								<Tooltip title="扫码下载" placement={"bottom"}>
+									<Button
+										style={{ marginLeft: 20 }}
+										shape="circle"
+										icon={<QrcodeOutlined />}
+									/>
+								</Tooltip>
+								<Tooltip title="粘贴" placement={"bottom"}>
+									<Button
+										style={{ marginLeft: 20 }}
+										shape="circle"
+										icon={<SnippetsOutlined />}
+									/>
+								</Tooltip>
+								<Tooltip title="剪切" placement={"bottom"}>
+									<Button
+										style={{ marginLeft: 20 }}
+										shape="circle"
+										icon={<ScissorOutlined />}
+									/>
+								</Tooltip>
+								<Tooltip title="复制" placement={"bottom"}>
+									<Button
+										style={{ marginLeft: 20 }}
+										shape="circle"
+										icon={<CopyOutlined />}
+									/>
+								</Tooltip>
+								<Tooltip title="搜索" placement={"bottom"}>
+									<Button
+										style={{ marginLeft: 20 }}
+										shape="circle"
+										icon={<SearchOutlined />}
+									/>
+								</Tooltip>
+							</Flex>
 						</div>
 
 						<div className={styles.file_right_content}>
@@ -259,9 +348,7 @@ const File: FunctionComponent = () => {
 												<div
 													style={{ marginLeft: 10 }}
 													onDoubleClick={() => {
-														store.setFilePath({
-															title: file.name,
-														});
+														store.setFilePath(file.name);
 														setFiles(fileList);
 													}}>
 													<CheckCard
diff --git a/src/components/Main/Settings/components/AliSettings.tsx b/src/components/Main/Settings/components/AliSettings.tsx
index 2224d35..c278024 100644
--- a/src/components/Main/Settings/components/AliSettings.tsx
+++ b/src/components/Main/Settings/components/AliSettings.tsx
@@ -1,224 +1,228 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	endpoint: string;
-	accessKeyId: string;
-	accessKeySecret: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		endpoint: "https://oss.aliyuncs.com",
-		accessKeyId: "LTAI5tG3",
-		accessKeySecret: "G3",
-		createdTime: "2024-06-28 10:51:59",
-		updatedTime: "2024-06-29 10:51:59",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "服务地址",
-		dataIndex: "endpoint",
-		tooltip: "endpoint",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "accessKeyId",
-		tooltip: "access key id",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "accessKeySecret",
-		tooltip: "access key secret",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const AliSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddAliOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="endpoint"
-									label="服务地址"
-									rules={[{ required: true, message: "请输入服务地址！" }]}>
-									<Input placeholder="请输入服务地址！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="accessKeyId"
-									label="密钥ID"
-									rules={[{ required: true, message: "请输入密钥ID!" }]}>
-									<Input placeholder="请输入密钥ID！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="accessKeySecret"
-									label="密钥值"
-									rules={[{ required: true, message: "请输入密钥值!" }]}>
-									<Input placeholder="请输入密钥值！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="阿里云OSS配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddAliOssConfigDrawer />
-		</>
-	);
-};
-
-export default AliSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { useRef, useState } from "react";
+
+type AliOssConfigItem = {
+	id: number;
+	userId: number;
+	endpoint: string;
+	accessKeyId: string;
+	accessKeySecret: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: AliOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		endpoint: "https://oss.aliyuncs.com",
+		accessKeyId: "LTAI5tG3",
+		accessKeySecret: "G3",
+		createdTime: "2024-06-28 10:51:59",
+		updatedTime: "2024-06-29 10:51:59",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<AliOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "服务地址",
+		dataIndex: "endpoint",
+		tooltip: "endpoint",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "accessKeyId",
+		tooltip: "access key id",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "accessKeySecret",
+		tooltip: "access key secret",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: any, record: any, _, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const AliSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddAliOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="endpoint"
+									label="服务地址"
+									rules={[{ required: true, message: "请输入服务地址！" }]}>
+									<Input placeholder="请输入服务地址！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="accessKeyId"
+									label="密钥ID"
+									rules={[{ required: true, message: "请输入密钥ID!" }]}>
+									<Input placeholder="请输入密钥ID！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="accessKeySecret"
+									label="密钥值"
+									rules={[{ required: true, message: "请输入密钥值!" }]}>
+									<Input placeholder="请输入密钥值！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<AliOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="阿里云OSS配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddAliOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default AliSettings;
diff --git a/src/components/Main/Settings/components/AwsSettings.tsx b/src/components/Main/Settings/components/AwsSettings.tsx
index 9c5912b..5c4638d 100644
--- a/src/components/Main/Settings/components/AwsSettings.tsx
+++ b/src/components/Main/Settings/components/AwsSettings.tsx
@@ -1,261 +1,263 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	bucketName: string;
-	accessKeyId: string;
-	secretAccessKey: string;
-	region: string;
-	mode: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		bucketName: "https://oss.aliyuncs.com",
-		accessKeyId: "LTAI5tG3",
-		secretAccessKey: "G3",
-		region: "2024-06-28 10:51:59",
-		mode: "2024-06-29 10:51:59",
-		createdTime: "2024-06-28 10:51:59",
-		updatedTime: "2024-06-29 10:51:59",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "存储桶",
-		dataIndex: "bucketName",
-		tooltip: "bucket",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "accessKeyId",
-		tooltip: "access key id",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "secretAccessKey",
-		tooltip: "secret access key",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "地区",
-		dataIndex: "region",
-		tooltip: "region",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "模式",
-		dataIndex: "mode",
-		tooltip: "mode",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const AwsSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddAwsOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="bucketName"
-									label="存储桶"
-									rules={[{ required: true, message: "请输入存储桶！" }]}>
-									<Input placeholder="请输入存储桶！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="region"
-									label="地区"
-									rules={[{ required: true, message: "请输入地区！" }]}>
-									<Input placeholder="请输入地区！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="accessKeyId"
-									label="密钥ID"
-									rules={[{ required: true, message: "请输入密钥ID!" }]}>
-									<Input placeholder="请输入密钥ID！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="secretAccessKey"
-									label="密钥值"
-									rules={[{ required: true, message: "请输入密钥值!" }]}>
-									<Input placeholder="请输入密钥值！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="mode"
-									label="模式"
-									rules={[{ required: true, message: "请输入模式!" }]}>
-									<Input placeholder="请输入模式！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="亚马逊S3配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddAwsOssConfigDrawer />
-		</>
-	);
-};
-
-export default AwsSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type AwsOssConfigItem = {
+	id: number;
+	userId: number;
+	bucketName: string;
+	accessKeyId: string;
+	secretAccessKey: string;
+	region: string;
+	mode: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: AwsOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		bucketName: "https://oss.aliyuncs.com",
+		accessKeyId: "LTAI5tG3",
+		secretAccessKey: "G3",
+		region: "2024-06-28 10:51:59",
+		mode: "2024-06-29 10:51:59",
+		createdTime: "2024-06-28 10:51:59",
+		updatedTime: "2024-06-29 10:51:59",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<AwsOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "存储桶",
+		dataIndex: "bucketName",
+		tooltip: "bucket",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "accessKeyId",
+		tooltip: "access key id",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "secretAccessKey",
+		tooltip: "secret access key",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "地区",
+		dataIndex: "region",
+		tooltip: "region",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "模式",
+		dataIndex: "mode",
+		tooltip: "mode",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		render: (text: ReactNode, record: AwsOssConfigItem, _, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const AwsSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddAwsOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="bucketName"
+									label="存储桶"
+									rules={[{ required: true, message: "请输入存储桶！" }]}>
+									<Input placeholder="请输入存储桶！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="region"
+									label="地区"
+									rules={[{ required: true, message: "请输入地区！" }]}>
+									<Input placeholder="请输入地区！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="accessKeyId"
+									label="密钥ID"
+									rules={[{ required: true, message: "请输入密钥ID!" }]}>
+									<Input placeholder="请输入密钥ID！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="secretAccessKey"
+									label="密钥值"
+									rules={[{ required: true, message: "请输入密钥值!" }]}>
+									<Input placeholder="请输入密钥值！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="mode"
+									label="模式"
+									rules={[{ required: true, message: "请输入模式!" }]}>
+									<Input placeholder="请输入模式！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<AwsOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="亚马逊S3配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddAwsOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default AwsSettings;
diff --git a/src/components/Main/Settings/components/BaiduSettings.tsx b/src/components/Main/Settings/components/BaiduSettings.tsx
index 72da2be..b18c45c 100644
--- a/src/components/Main/Settings/components/BaiduSettings.tsx
+++ b/src/components/Main/Settings/components/BaiduSettings.tsx
@@ -1,290 +1,292 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	endpoint: string;
-	accessKeyId: string;
-	accessKeySecret: string;
-	created_time: string;
-	updated_time: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		endpoint: "https://oss.aliyuncs.com",
-		accessKeyId: "LTAI5tG3",
-		accessKeySecret: "G3",
-		created_time: "2022-01-01",
-		updated_time: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "服务地址",
-		dataIndex: "endpoint",
-		tooltip: "endpoint",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "accessKeyId",
-		tooltip: "access key id",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "accessKeySecret",
-		tooltip: "access key secret",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "date",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updateTime",
-		valueType: "date",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const BaiduSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddBaiduOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="Create a new account"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>Cancel</Button>
-							<Button onClick={onClose} type="primary">
-								Submit
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical" hideRequiredMark>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="name"
-									label="Name"
-									rules={[{ required: true, message: "Please enter user name" }]}>
-									<Input placeholder="Please enter user name" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="url"
-									label="Url"
-									rules={[{ required: true, message: "Please enter url" }]}>
-									<Input
-										style={{ width: "100%" }}
-										addonBefore="http://"
-										addonAfter=".com"
-										placeholder="Please enter url"
-									/>
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="owner"
-									label="Owner"
-									rules={[{ required: true, message: "Please select an owner" }]}>
-									<Select placeholder="Please select an owner">
-										<Select.Option value="xiao">Xiaoxiao Fu</Select.Option>
-										<Select.Option value="mao">Maomao Zhou</Select.Option>
-									</Select>
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="type"
-									label="Type"
-									rules={[{ required: true, message: "Please choose the type" }]}>
-									<Select placeholder="Please choose the type">
-										<Select.Option value="private">Private</Select.Option>
-										<Select.Option value="public">Public</Select.Option>
-									</Select>
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="approver"
-									label="Approver"
-									rules={[
-										{ required: true, message: "Please choose the approver" },
-									]}>
-									<Select placeholder="Please choose the approver">
-										<Select.Option value="jack">Jack Ma</Select.Option>
-										<Select.Option value="tom">Tom Liu</Select.Option>
-									</Select>
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="dateTime"
-									label="DateTime"
-									rules={[
-										{ required: true, message: "Please choose the dateTime" },
-									]}>
-									<DatePicker.RangePicker
-										style={{ width: "100%" }}
-										getPopupContainer={(trigger) => trigger.parentElement!}
-									/>
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={24}>
-								<Form.Item
-									name="description"
-									label="Description"
-									rules={[
-										{
-											required: true,
-											message: "please enter url description",
-										},
-									]}>
-									<Input.TextArea
-										rows={4}
-										placeholder="please enter url description"
-									/>
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="百度云BOS配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddBaiduOssConfigDrawer />
-		</>
-	);
-};
-
-export default BaiduSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type BaiduOssConfigItem = {
+	id: number;
+	userId: number;
+	endpoint: string;
+	accessKeyId: string;
+	accessKeySecret: string;
+	created_time: string;
+	updated_time: string;
+	status: string;
+};
+const data: BaiduOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		endpoint: "https://oss.aliyuncs.com",
+		accessKeyId: "LTAI5tG3",
+		accessKeySecret: "G3",
+		created_time: "2022-01-01",
+		updated_time: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<BaiduOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "服务地址",
+		dataIndex: "endpoint",
+		tooltip: "endpoint",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "accessKeyId",
+		tooltip: "access key id",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "accessKeySecret",
+		tooltip: "access key secret",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "date",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updateTime",
+		valueType: "date",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		render: (text: ReactNode, record: BaiduOssConfigItem, _, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const BaiduSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddBaiduOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="Create a new account"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>Cancel</Button>
+							<Button onClick={onClose} type="primary">
+								Submit
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical" hideRequiredMark>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="name"
+									label="Name"
+									rules={[{ required: true, message: "Please enter user name" }]}>
+									<Input placeholder="Please enter user name" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="url"
+									label="Url"
+									rules={[{ required: true, message: "Please enter url" }]}>
+									<Input
+										style={{ width: "100%" }}
+										addonBefore="http://"
+										addonAfter=".com"
+										placeholder="Please enter url"
+									/>
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="owner"
+									label="Owner"
+									rules={[{ required: true, message: "Please select an owner" }]}>
+									<Select placeholder="Please select an owner">
+										<Select.Option value="xiao">Xiaoxiao Fu</Select.Option>
+										<Select.Option value="mao">Maomao Zhou</Select.Option>
+									</Select>
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="type"
+									label="Type"
+									rules={[{ required: true, message: "Please choose the type" }]}>
+									<Select placeholder="Please choose the type">
+										<Select.Option value="private">Private</Select.Option>
+										<Select.Option value="public">Public</Select.Option>
+									</Select>
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="approver"
+									label="Approver"
+									rules={[
+										{ required: true, message: "Please choose the approver" },
+									]}>
+									<Select placeholder="Please choose the approver">
+										<Select.Option value="jack">Jack Ma</Select.Option>
+										<Select.Option value="tom">Tom Liu</Select.Option>
+									</Select>
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="dateTime"
+									label="DateTime"
+									rules={[
+										{ required: true, message: "Please choose the dateTime" },
+									]}>
+									<DatePicker.RangePicker
+										style={{ width: "100%" }}
+										getPopupContainer={(trigger) => trigger.parentElement!}
+									/>
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={24}>
+								<Form.Item
+									name="description"
+									label="Description"
+									rules={[
+										{
+											required: true,
+											message: "please enter url description",
+										},
+									]}>
+									<Input.TextArea
+										rows={4}
+										placeholder="please enter url description"
+									/>
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<BaiduOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="百度云BOS配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddBaiduOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default BaiduSettings;
diff --git a/src/components/Main/Settings/components/HuaweiSettings.tsx b/src/components/Main/Settings/components/HuaweiSettings.tsx
index c9de753..853b9eb 100644
--- a/src/components/Main/Settings/components/HuaweiSettings.tsx
+++ b/src/components/Main/Settings/components/HuaweiSettings.tsx
@@ -1,242 +1,246 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	bucketName: string;
-	endpoint: string;
-	accessKey: string;
-	secretKey: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		bucketName: "666",
-		endpoint: "https://oss.aliyuncs.com",
-		accessKey: "LTAI5tG3",
-		secretKey: "G3",
-		createdTime: "2022-01-01",
-		updatedTime: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "存储桶",
-		dataIndex: "bucketName",
-		tooltip: "bucketName",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "服务地址",
-		dataIndex: "endpoint",
-		tooltip: "endpoint",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "accessKey",
-		tooltip: "access key",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "secretKey",
-		tooltip: "secret key",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const HuawaiSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddHuaweiOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="endpoint"
-									label="服务地址"
-									rules={[{ required: true, message: "请输入服务地址！" }]}>
-									<Input placeholder="请输入服务地址！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="bucketName"
-									label="存储桶"
-									rules={[{ required: true, message: "请输入存储桶！" }]}>
-									<Input placeholder="请输入存储桶！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="accessKeyId"
-									label="密钥ID"
-									rules={[{ required: true, message: "请输入密钥ID!" }]}>
-									<Input placeholder="请输入密钥ID！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="accessKeySecret"
-									label="密钥值"
-									rules={[{ required: true, message: "请输入密钥值!" }]}>
-									<Input placeholder="请输入密钥值！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="华为云OBS配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddHuaweiOssConfigDrawer />
-		</>
-	);
-};
-
-export default HuawaiSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type HuaweiOssConfigItem = {
+	id: number;
+	userId: number;
+	bucketName: string;
+	endpoint: string;
+	accessKey: string;
+	secretKey: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: HuaweiOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		bucketName: "666",
+		endpoint: "https://oss.aliyuncs.com",
+		accessKey: "LTAI5tG3",
+		secretKey: "G3",
+		createdTime: "2022-01-01",
+		updatedTime: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<HuaweiOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "存储桶",
+		dataIndex: "bucketName",
+		tooltip: "bucketName",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "服务地址",
+		dataIndex: "endpoint",
+		tooltip: "endpoint",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "accessKey",
+		tooltip: "access key",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "secretKey",
+		tooltip: "secret key",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: ReactNode, record: HuaweiOssConfigItem, _: number, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const HuawaiSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddHuaweiOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="endpoint"
+									label="服务地址"
+									rules={[{ required: true, message: "请输入服务地址！" }]}>
+									<Input placeholder="请输入服务地址！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="bucketName"
+									label="存储桶"
+									rules={[{ required: true, message: "请输入存储桶！" }]}>
+									<Input placeholder="请输入存储桶！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="accessKeyId"
+									label="密钥ID"
+									rules={[{ required: true, message: "请输入密钥ID!" }]}>
+									<Input placeholder="请输入密钥ID！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="accessKeySecret"
+									label="密钥值"
+									rules={[{ required: true, message: "请输入密钥值!" }]}>
+									<Input placeholder="请输入密钥值！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<HuaweiOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="华为云OBS配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddHuaweiOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default HuawaiSettings;
diff --git a/src/components/Main/Settings/components/JdSettings.tsx b/src/components/Main/Settings/components/JdSettings.tsx
index 95fb54f..cfbe8d8 100644
--- a/src/components/Main/Settings/components/JdSettings.tsx
+++ b/src/components/Main/Settings/components/JdSettings.tsx
@@ -1,244 +1,248 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	bucketName: number;
-	endpoint: string;
-	accessKey: string;
-	secretKey: string;
-	region: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		bucketName: 666,
-		endpoint: "https://oss.aliyuncs.com",
-		accessKey: "LTAI5tG3",
-		secretKey: "G3",
-		region: "G3",
-		createdTime: "2022-01-01",
-		updatedTime: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "服务地址",
-		dataIndex: "endpoint",
-		tooltip: "endpoint",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "accessKey",
-		tooltip: "access key",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "secretKey",
-		tooltip: "secret key",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "地区",
-		dataIndex: "region",
-		tooltip: "region",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const JdSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddJdOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="endpoint"
-									label="服务地址"
-									rules={[{ required: true, message: "请输入服务地址！" }]}>
-									<Input placeholder="请输入服务地址！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="region"
-									label="地区"
-									rules={[{ required: true, message: "请输入地区！" }]}>
-									<Input placeholder="请输入地区！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="accessKey"
-									label="密钥ID"
-									rules={[{ required: true, message: "请输入密钥ID!" }]}>
-									<Input placeholder="请输入密钥ID！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="secretKey"
-									label="密钥值"
-									rules={[{ required: true, message: "请输入密钥值!" }]}>
-									<Input placeholder="请输入密钥值！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="京东云OSS配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddJdOssConfigDrawer />
-		</>
-	);
-};
-
-export default JdSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type JdOssConfigItem = {
+	id: number;
+	userId: number;
+	bucketName: number;
+	endpoint: string;
+	accessKey: string;
+	secretKey: string;
+	region: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: JdOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		bucketName: 666,
+		endpoint: "https://oss.aliyuncs.com",
+		accessKey: "LTAI5tG3",
+		secretKey: "G3",
+		region: "G3",
+		createdTime: "2022-01-01",
+		updatedTime: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<JdOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "服务地址",
+		dataIndex: "endpoint",
+		tooltip: "endpoint",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "accessKey",
+		tooltip: "access key",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "secretKey",
+		tooltip: "secret key",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "地区",
+		dataIndex: "region",
+		tooltip: "region",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: ReactNode, record: JdOssConfigItem, _: number, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const JdSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddJdOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="endpoint"
+									label="服务地址"
+									rules={[{ required: true, message: "请输入服务地址！" }]}>
+									<Input placeholder="请输入服务地址！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="region"
+									label="地区"
+									rules={[{ required: true, message: "请输入地区！" }]}>
+									<Input placeholder="请输入地区！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="accessKey"
+									label="密钥ID"
+									rules={[{ required: true, message: "请输入密钥ID!" }]}>
+									<Input placeholder="请输入密钥ID！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="secretKey"
+									label="密钥值"
+									rules={[{ required: true, message: "请输入密钥值!" }]}>
+									<Input placeholder="请输入密钥值！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<JdOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="京东云OSS配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddJdOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default JdSettings;
diff --git a/src/components/Main/Settings/components/JinshanSettings.tsx b/src/components/Main/Settings/components/JinshanSettings.tsx
index fa5d582..b7394c6 100644
--- a/src/components/Main/Settings/components/JinshanSettings.tsx
+++ b/src/components/Main/Settings/components/JinshanSettings.tsx
@@ -1,278 +1,282 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	endpoint: string;
-	bucketName: string;
-	accessKeyId: string;
-	accessKeySecret: string;
-	region: string;
-	securityToken: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		bucketName: "6666",
-		endpoint: "https://oss.aliyuncs.com",
-		accessKeyId: "LTAI5tG3",
-		accessKeySecret: "G3",
-		region: "G3",
-		securityToken: "G3",
-		createdTime: "2022-01-01",
-		updatedTime: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "存储桶",
-		dataIndex: "bucketName",
-		tooltip: "bucketName",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "服务地址",
-		dataIndex: "endpoint",
-		tooltip: "endpoint",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "accessKeyId",
-		tooltip: "access key id",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "accessKeySecret",
-		tooltip: "access key secret",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "地区",
-		dataIndex: "region",
-		tooltip: "region",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "令牌",
-		dataIndex: "securityToken",
-		tooltip: "security token",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const JinshanSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddJinshanOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="endpoint"
-									label="服务地址"
-									rules={[{ required: true, message: "请输入服务地址！" }]}>
-									<Input placeholder="请输入服务地址！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="bucketName"
-									label="存储桶"
-									rules={[{ required: true, message: "请输入存储桶！" }]}>
-									<Input placeholder="请输入存储桶！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="accessKeyId"
-									label="密钥ID"
-									rules={[{ required: true, message: "请输入密钥ID!" }]}>
-									<Input placeholder="请输入密钥ID！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="accessKeySecret"
-									label="密钥值"
-									rules={[{ required: true, message: "请输入密钥值!" }]}>
-									<Input placeholder="请输入密钥值！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="securityToken"
-									label="令牌Token"
-									rules={[{ required: true, message: "请输入令牌Token!" }]}>
-									<Input placeholder="请输入令牌Token！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="region"
-									label="地区"
-									rules={[{ required: true, message: "请输入地区!" }]}>
-									<Input placeholder="请输入地区！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="金山OBS配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddJinshanOssConfigDrawer />
-		</>
-	);
-};
-
-export default JinshanSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type JinshanOssConfigItem = {
+	id: number;
+	userId: number;
+	endpoint: string;
+	bucketName: string;
+	accessKeyId: string;
+	accessKeySecret: string;
+	region: string;
+	securityToken: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: JinshanOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		bucketName: "6666",
+		endpoint: "https://oss.aliyuncs.com",
+		accessKeyId: "LTAI5tG3",
+		accessKeySecret: "G3",
+		region: "G3",
+		securityToken: "G3",
+		createdTime: "2022-01-01",
+		updatedTime: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<JinshanOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "存储桶",
+		dataIndex: "bucketName",
+		tooltip: "bucketName",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "服务地址",
+		dataIndex: "endpoint",
+		tooltip: "endpoint",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "accessKeyId",
+		tooltip: "access key id",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "accessKeySecret",
+		tooltip: "access key secret",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "地区",
+		dataIndex: "region",
+		tooltip: "region",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "令牌",
+		dataIndex: "securityToken",
+		tooltip: "security token",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: ReactNode, record: JinshanOssConfigItem, _: number, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const JinshanSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddJinshanOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="endpoint"
+									label="服务地址"
+									rules={[{ required: true, message: "请输入服务地址！" }]}>
+									<Input placeholder="请输入服务地址！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="bucketName"
+									label="存储桶"
+									rules={[{ required: true, message: "请输入存储桶！" }]}>
+									<Input placeholder="请输入存储桶！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="accessKeyId"
+									label="密钥ID"
+									rules={[{ required: true, message: "请输入密钥ID!" }]}>
+									<Input placeholder="请输入密钥ID！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="accessKeySecret"
+									label="密钥值"
+									rules={[{ required: true, message: "请输入密钥值!" }]}>
+									<Input placeholder="请输入密钥值！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="securityToken"
+									label="令牌Token"
+									rules={[{ required: true, message: "请输入令牌Token!" }]}>
+									<Input placeholder="请输入令牌Token！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="region"
+									label="地区"
+									rules={[{ required: true, message: "请输入地区!" }]}>
+									<Input placeholder="请输入地区！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<JinshanOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="金山OBS配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddJinshanOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default JinshanSettings;
diff --git a/src/components/Main/Settings/components/MinioSettings.tsx b/src/components/Main/Settings/components/MinioSettings.tsx
index caaf9d9..2f09912 100644
--- a/src/components/Main/Settings/components/MinioSettings.tsx
+++ b/src/components/Main/Settings/components/MinioSettings.tsx
@@ -1,225 +1,229 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	endpoint: string;
-	accessKey: string;
-	secretKey: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		endpoint: "https://oss.aliyuncs.com",
-		accessKey: "LTAI5tG3",
-		secretKey: "G3",
-		createdTime: "2022-01-01",
-		updatedTime: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "服务地址",
-		dataIndex: "endpoint",
-		tooltip: "endpoint",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "accessKey",
-		tooltip: "access key",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "secretKey",
-		tooltip: "secret key",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const MinioSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddMinioOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="endpoint"
-									label="服务地址"
-									rules={[{ required: true, message: "请输入服务地址！" }]}>
-									<Input placeholder="请输入服务地址！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="accessKey"
-									label="密钥ID"
-									rules={[{ required: true, message: "请输入密钥ID!" }]}>
-									<Input placeholder="请输入密钥ID！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="secretKey"
-									label="密钥值"
-									rules={[{ required: true, message: "请输入密钥值!" }]}>
-									<Input placeholder="请输入密钥值！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="MinIO配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddMinioOssConfigDrawer />
-		</>
-	);
-};
-
-export default MinioSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type MinioOssConfigItem = {
+	id: number;
+	userId: number;
+	endpoint: string;
+	accessKey: string;
+	secretKey: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: MinioOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		endpoint: "https://oss.aliyuncs.com",
+		accessKey: "LTAI5tG3",
+		secretKey: "G3",
+		createdTime: "2022-01-01",
+		updatedTime: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<MinioOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "服务地址",
+		dataIndex: "endpoint",
+		tooltip: "endpoint",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "accessKey",
+		tooltip: "access key",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "secretKey",
+		tooltip: "secret key",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: ReactNode, record: MinioOssConfigItem, _: number, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const MinioSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddMinioOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="endpoint"
+									label="服务地址"
+									rules={[{ required: true, message: "请输入服务地址！" }]}>
+									<Input placeholder="请输入服务地址！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="accessKey"
+									label="密钥ID"
+									rules={[{ required: true, message: "请输入密钥ID!" }]}>
+									<Input placeholder="请输入密钥ID！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="secretKey"
+									label="密钥值"
+									rules={[{ required: true, message: "请输入密钥值!" }]}>
+									<Input placeholder="请输入密钥值！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<MinioOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="MinIO配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddMinioOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default MinioSettings;
diff --git a/src/components/Main/Settings/components/PinanSettings.tsx b/src/components/Main/Settings/components/PinanSettings.tsx
index 5439b44..3594694 100644
--- a/src/components/Main/Settings/components/PinanSettings.tsx
+++ b/src/components/Main/Settings/components/PinanSettings.tsx
@@ -1,225 +1,229 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	endpoint: string;
-	accessKeyId: string;
-	accessKeySecret: string;
-	created_time: string;
-	updated_time: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		endpoint: "https://oss.aliyuncs.com",
-		accessKeyId: "LTAI5tG3",
-		accessKeySecret: "G3",
-		created_time: "2022-01-01",
-		updated_time: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "服务地址",
-		dataIndex: "endpoint",
-		tooltip: "endpoint",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "accessKeyId",
-		tooltip: "access key id",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "accessKeySecret",
-		tooltip: "access key secret",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updateTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const PinanSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddPinanOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="endpoint"
-									label="服务地址"
-									rules={[{ required: true, message: "请输入服务地址！" }]}>
-									<Input placeholder="请输入服务地址！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="accessKeyId"
-									label="密钥ID"
-									rules={[{ required: true, message: "请输入密钥ID!" }]}>
-									<Input placeholder="请输入密钥ID！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="accessKeySecret"
-									label="密钥值"
-									rules={[{ required: true, message: "请输入密钥值!" }]}>
-									<Input placeholder="请输入密钥值！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="平安云OSS配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddPinanOssConfigDrawer />
-		</>
-	);
-};
-
-export default PinanSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type PinanOssConfigItem = {
+	id: number;
+	userId: number;
+	endpoint: string;
+	accessKeyId: string;
+	accessKeySecret: string;
+	created_time: string;
+	updated_time: string;
+	status: string;
+};
+const data: PinanOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		endpoint: "https://oss.aliyuncs.com",
+		accessKeyId: "LTAI5tG3",
+		accessKeySecret: "G3",
+		created_time: "2022-01-01",
+		updated_time: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<PinanOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "服务地址",
+		dataIndex: "endpoint",
+		tooltip: "endpoint",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "accessKeyId",
+		tooltip: "access key id",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "accessKeySecret",
+		tooltip: "access key secret",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updateTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: ReactNode, record: PinanOssConfigItem, _: number, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const PinanSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddPinanOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="endpoint"
+									label="服务地址"
+									rules={[{ required: true, message: "请输入服务地址！" }]}>
+									<Input placeholder="请输入服务地址！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="accessKeyId"
+									label="密钥ID"
+									rules={[{ required: true, message: "请输入密钥ID!" }]}>
+									<Input placeholder="请输入密钥ID！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="accessKeySecret"
+									label="密钥值"
+									rules={[{ required: true, message: "请输入密钥值!" }]}>
+									<Input placeholder="请输入密钥值！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<PinanOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="平安云OSS配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddPinanOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default PinanSettings;
diff --git a/src/components/Main/Settings/components/QingyunSettings.tsx b/src/components/Main/Settings/components/QingyunSettings.tsx
index 9bb2ab8..ca2a7ce 100644
--- a/src/components/Main/Settings/components/QingyunSettings.tsx
+++ b/src/components/Main/Settings/components/QingyunSettings.tsx
@@ -1,254 +1,258 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	zone: string;
-	endpoint: string;
-	accessKey: string;
-	bucketName: string;
-	accessSecret: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		bucketName: "1",
-		zone: "1",
-		endpoint: "https://oss.aliyuncs.com",
-		accessKey: "LTAI5tG3",
-		accessSecret: "G3",
-		createdTime: "2022-01-01",
-		updatedTime: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "地区",
-		dataIndex: "zone",
-		tooltip: "zone",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "服务地址",
-		dataIndex: "endpoint",
-		tooltip: "endpoint",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "accessKey",
-		tooltip: "access Key",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "accessSecret",
-		tooltip: "access Secret",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const QingyunSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddQingyunOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="endpoint"
-									label="服务地址"
-									rules={[{ required: true, message: "请输入服务地址！" }]}>
-									<Input placeholder="请输入服务地址！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="bucketName"
-									label="存储桶"
-									rules={[{ required: true, message: "请输入存储桶！" }]}>
-									<Input placeholder="请输入存储桶！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="accessKey"
-									label="密钥ID"
-									rules={[{ required: true, message: "请输入密钥ID!" }]}>
-									<Input placeholder="请输入密钥ID！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="accessSecret"
-									label="密钥值"
-									rules={[{ required: true, message: "请输入密钥值!" }]}>
-									<Input placeholder="请输入密钥值！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="zone"
-									label="地区"
-									rules={[{ required: true, message: "请输入地区!" }]}>
-									<Input placeholder="请输入地区！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="青云OSS配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddQingyunOssConfigDrawer />
-		</>
-	);
-};
-
-export default QingyunSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type QingyunOssConfigItem = {
+	id: number;
+	userId: number;
+	zone: string;
+	endpoint: string;
+	accessKey: string;
+	bucketName: string;
+	accessSecret: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: QingyunOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		bucketName: "1",
+		zone: "1",
+		endpoint: "https://oss.aliyuncs.com",
+		accessKey: "LTAI5tG3",
+		accessSecret: "G3",
+		createdTime: "2022-01-01",
+		updatedTime: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<QingyunOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "地区",
+		dataIndex: "zone",
+		tooltip: "zone",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "服务地址",
+		dataIndex: "endpoint",
+		tooltip: "endpoint",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "accessKey",
+		tooltip: "access Key",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "accessSecret",
+		tooltip: "access Secret",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: ReactNode, record: QingyunOssConfigItem, _: number, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const QingyunSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddQingyunOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="endpoint"
+									label="服务地址"
+									rules={[{ required: true, message: "请输入服务地址！" }]}>
+									<Input placeholder="请输入服务地址！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="bucketName"
+									label="存储桶"
+									rules={[{ required: true, message: "请输入存储桶！" }]}>
+									<Input placeholder="请输入存储桶！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="accessKey"
+									label="密钥ID"
+									rules={[{ required: true, message: "请输入密钥ID!" }]}>
+									<Input placeholder="请输入密钥ID！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="accessSecret"
+									label="密钥值"
+									rules={[{ required: true, message: "请输入密钥值!" }]}>
+									<Input placeholder="请输入密钥值！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="zone"
+									label="地区"
+									rules={[{ required: true, message: "请输入地区!" }]}>
+									<Input placeholder="请输入地区！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<QingyunOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="青云OSS配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddQingyunOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default QingyunSettings;
diff --git a/src/components/Main/Settings/components/QiniuSettings.tsx b/src/components/Main/Settings/components/QiniuSettings.tsx
index ca6457e..b63e9f6 100644
--- a/src/components/Main/Settings/components/QiniuSettings.tsx
+++ b/src/components/Main/Settings/components/QiniuSettings.tsx
@@ -1,225 +1,229 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	bucketName: string;
-	accessKey: string;
-	secretKey: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		bucketName: "https://oss.aliyuncs.com",
-		accessKey: "LTAI5tG3",
-		secretKey: "G3",
-		createdTime: "2022-01-01",
-		updatedTime: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "服务地址",
-		dataIndex: "endpoint",
-		tooltip: "endpoint",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "accessKeyId",
-		tooltip: "access key id",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "accessKeySecret",
-		tooltip: "access key secret",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const QiniuSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddQiniuOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="bucketName"
-									label="存储桶"
-									rules={[{ required: true, message: "请输入存储桶！" }]}>
-									<Input placeholder="请输入存储桶！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="accessKey"
-									label="密钥ID"
-									rules={[{ required: true, message: "请输入密钥ID!" }]}>
-									<Input placeholder="请输入密钥ID！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="secretKey"
-									label="密钥值"
-									rules={[{ required: true, message: "请输入密钥值!" }]}>
-									<Input placeholder="请输入密钥值！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="七牛Kodo配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddQiniuOssConfigDrawer />
-		</>
-	);
-};
-
-export default QiniuSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type QiniuOssConfigItem = {
+	id: number;
+	userId: number;
+	bucketName: string;
+	accessKey: string;
+	secretKey: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: QiniuOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		bucketName: "https://oss.aliyuncs.com",
+		accessKey: "LTAI5tG3",
+		secretKey: "G3",
+		createdTime: "2022-01-01",
+		updatedTime: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<QiniuOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "服务地址",
+		dataIndex: "endpoint",
+		tooltip: "endpoint",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "accessKeyId",
+		tooltip: "access key id",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "accessKeySecret",
+		tooltip: "access key secret",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: ReactNode, record: QiniuOssConfigItem, _: number, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const QiniuSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddQiniuOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="bucketName"
+									label="存储桶"
+									rules={[{ required: true, message: "请输入存储桶！" }]}>
+									<Input placeholder="请输入存储桶！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="accessKey"
+									label="密钥ID"
+									rules={[{ required: true, message: "请输入密钥ID!" }]}>
+									<Input placeholder="请输入密钥ID！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="secretKey"
+									label="密钥值"
+									rules={[{ required: true, message: "请输入密钥值!" }]}>
+									<Input placeholder="请输入密钥值！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<QiniuOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="七牛Kodo配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddQiniuOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default QiniuSettings;
diff --git a/src/components/Main/Settings/components/TencentSettings.tsx b/src/components/Main/Settings/components/TencentSettings.tsx
index 9e08e8a..d401523 100644
--- a/src/components/Main/Settings/components/TencentSettings.tsx
+++ b/src/components/Main/Settings/components/TencentSettings.tsx
@@ -1,215 +1,219 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	bucketName: string;
-	secretId: string;
-	secretKey: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		bucketName: "https://oss.aliyuncs.com",
-		secretId: "LTAI5tG3",
-		secretKey: "G3",
-		createdTime: "2022-01-01",
-		updatedTime: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "存储桶",
-		dataIndex: "bucketName",
-		tooltip: "bucketName",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "secretId",
-		tooltip: "secret Id",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "secretKey",
-		tooltip: "secret Key",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const TencentSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddTencentOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="secretId"
-									label="密钥ID"
-									rules={[{ required: true, message: "请输入密钥ID!" }]}>
-									<Input placeholder="请输入密钥ID！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="secretKey"
-									label="密钥值"
-									rules={[{ required: true, message: "请输入密钥值!" }]}>
-									<Input placeholder="请输入密钥值！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="腾讯云COS配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddTencentOssConfigDrawer />
-		</>
-	);
-};
-
-export default TencentSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type TencentOssConfigItem = {
+	id: number;
+	userId: number;
+	bucketName: string;
+	secretId: string;
+	secretKey: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: TencentOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		bucketName: "https://oss.aliyuncs.com",
+		secretId: "LTAI5tG3",
+		secretKey: "G3",
+		createdTime: "2022-01-01",
+		updatedTime: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<TencentOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "存储桶",
+		dataIndex: "bucketName",
+		tooltip: "bucketName",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "secretId",
+		tooltip: "secret Id",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "secretKey",
+		tooltip: "secret Key",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: ReactNode, record: TencentOssConfigItem, _: number, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const TencentSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddTencentOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="secretId"
+									label="密钥ID"
+									rules={[{ required: true, message: "请输入密钥ID!" }]}>
+									<Input placeholder="请输入密钥ID！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="secretKey"
+									label="密钥值"
+									rules={[{ required: true, message: "请输入密钥值!" }]}>
+									<Input placeholder="请输入密钥值！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<TencentOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="腾讯云COS配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddTencentOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default TencentSettings;
diff --git a/src/components/Main/Settings/components/UcloudSettings.tsx b/src/components/Main/Settings/components/UcloudSettings.tsx
index 54c0837..9bf6971 100644
--- a/src/components/Main/Settings/components/UcloudSettings.tsx
+++ b/src/components/Main/Settings/components/UcloudSettings.tsx
@@ -1,242 +1,246 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	bucketName: string;
-	publicKey: string;
-	privateKey: string;
-	customHost: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		bucketName: "https://oss.aliyuncs.com",
-		publicKey: "LTAI5tG3",
-		privateKey: "G3",
-		customHost: "G3",
-		createdTime: "2022-01-01",
-		updatedTime: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "存储桶",
-		dataIndex: "bucketName",
-		tooltip: "bucketName",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "公钥",
-		dataIndex: "publicKey",
-		tooltip: "publicKey",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "私钥",
-		dataIndex: "privateKey",
-		tooltip: "privateKey",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "服务地址",
-		dataIndex: "customHost",
-		tooltip: "customHost",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const UcloudSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddUcloudOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="customHost"
-									label="服务地址"
-									rules={[{ required: true, message: "请输入服务地址！" }]}>
-									<Input placeholder="请输入服务地址！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="bucketName"
-									label="存储桶"
-									rules={[{ required: true, message: "请输入存储桶！" }]}>
-									<Input placeholder="请输入存储桶！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="publicKey"
-									label="公钥"
-									rules={[{ required: true, message: "请输入公钥!" }]}>
-									<Input placeholder="请输入公钥！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="privateKey"
-									label="私钥"
-									rules={[{ required: true, message: "请输入私钥!" }]}>
-									<Input placeholder="请输入私钥！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="UCloud US3配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddUcloudOssConfigDrawer />
-		</>
-	);
-};
-
-export default UcloudSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type UcloudOssConfigItem = {
+	id: number;
+	userId: number;
+	bucketName: string;
+	publicKey: string;
+	privateKey: string;
+	customHost: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: UcloudOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		bucketName: "https://oss.aliyuncs.com",
+		publicKey: "LTAI5tG3",
+		privateKey: "G3",
+		customHost: "G3",
+		createdTime: "2022-01-01",
+		updatedTime: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<UcloudOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "存储桶",
+		dataIndex: "bucketName",
+		tooltip: "bucketName",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "公钥",
+		dataIndex: "publicKey",
+		tooltip: "publicKey",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "私钥",
+		dataIndex: "privateKey",
+		tooltip: "privateKey",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "服务地址",
+		dataIndex: "customHost",
+		tooltip: "customHost",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: ReactNode, record: UcloudOssConfigItem, _: number, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const UcloudSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddUcloudOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="customHost"
+									label="服务地址"
+									rules={[{ required: true, message: "请输入服务地址！" }]}>
+									<Input placeholder="请输入服务地址！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="bucketName"
+									label="存储桶"
+									rules={[{ required: true, message: "请输入存储桶！" }]}>
+									<Input placeholder="请输入存储桶！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="publicKey"
+									label="公钥"
+									rules={[{ required: true, message: "请输入公钥!" }]}>
+									<Input placeholder="请输入公钥！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="privateKey"
+									label="私钥"
+									rules={[{ required: true, message: "请输入私钥!" }]}>
+									<Input placeholder="请输入私钥！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<UcloudOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="UCloud US3配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddUcloudOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default UcloudSettings;
diff --git a/src/components/Main/Settings/components/UpSettings.tsx b/src/components/Main/Settings/components/UpSettings.tsx
index d14f091..1623ee5 100644
--- a/src/components/Main/Settings/components/UpSettings.tsx
+++ b/src/components/Main/Settings/components/UpSettings.tsx
@@ -1,225 +1,229 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	bucketName: string;
-	userName: string;
-	password: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		bucketName: "https://oss.aliyuncs.com",
-		userName: "LTAI5tG3",
-		password: "G3",
-		createdTime: "2022-01-01",
-		updatedTime: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "存储桶",
-		dataIndex: "bucketName",
-		tooltip: "bucketName",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "用户名",
-		dataIndex: "userName",
-		tooltip: "userName",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密码",
-		dataIndex: "password",
-		tooltip: "password",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const UpSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddUpOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="bucketName"
-									label="存储桶"
-									rules={[{ required: true, message: "请输入存储桶！" }]}>
-									<Input placeholder="请输入存储桶！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="userName"
-									label="用户名"
-									rules={[{ required: true, message: "请输入用户名!" }]}>
-									<Input placeholder="请输入用户名！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="password"
-									label="密码"
-									rules={[{ required: true, message: "请输入密码!" }]}>
-									<Input placeholder="请输入密码！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="又拍云USS配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddUpOssConfigDrawer />
-		</>
-	);
-};
-
-export default UpSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type UpOssConfigItem = {
+	id: number;
+	userId: number;
+	bucketName: string;
+	userName: string;
+	password: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: UpOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		bucketName: "https://oss.aliyuncs.com",
+		userName: "LTAI5tG3",
+		password: "G3",
+		createdTime: "2022-01-01",
+		updatedTime: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<UpOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "存储桶",
+		dataIndex: "bucketName",
+		tooltip: "bucketName",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "用户名",
+		dataIndex: "userName",
+		tooltip: "userName",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密码",
+		dataIndex: "password",
+		tooltip: "password",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: ReactNode, record: UpOssConfigItem, _: number, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const UpSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddUpOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="bucketName"
+									label="存储桶"
+									rules={[{ required: true, message: "请输入存储桶！" }]}>
+									<Input placeholder="请输入存储桶！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="userName"
+									label="用户名"
+									rules={[{ required: true, message: "请输入用户名!" }]}>
+									<Input placeholder="请输入用户名！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="password"
+									label="密码"
+									rules={[{ required: true, message: "请输入密码!" }]}>
+									<Input placeholder="请输入密码！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<UpOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="又拍云USS配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddUpOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default UpSettings;
diff --git a/src/components/Main/Settings/components/WangyiSettings.tsx b/src/components/Main/Settings/components/WangyiSettings.tsx
index 548d573..5a25fd2 100644
--- a/src/components/Main/Settings/components/WangyiSettings.tsx
+++ b/src/components/Main/Settings/components/WangyiSettings.tsx
@@ -1,242 +1,246 @@
-/** @format */
-import { PlusOutlined } from "@ant-design/icons";
-import type { ActionType, ProColumns } from "@ant-design/pro-components";
-import { ProTable, TableDropdown } from "@ant-design/pro-components";
-import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
-import React, { useRef, useState } from "react";
-
-type AliOssConfigItem = {
-	id: number;
-	userId: number;
-	endpoint: string;
-	bucketName: string;
-	accessKey: string;
-	secretKey: string;
-	createdTime: string;
-	updatedTime: string;
-	status: string;
-};
-const data: AliOssConfigItem[] = [
-	{
-		id: 1,
-		userId: 1,
-		endpoint: "https://oss.aliyuncs.com",
-		bucketName: "https://oss.aliyuncs.com",
-		accessKey: "LTAI5tG3",
-		secretKey: "G3",
-		createdTime: "2022-01-01",
-		updatedTime: "2022-01-01",
-		status: "正常",
-	},
-];
-
-const columns: ProColumns<AliOssConfigItem>[] = [
-	{
-		dataIndex: "index",
-		valueType: "indexBorder",
-		width: 48,
-	},
-	{
-		title: "ID",
-		dataIndex: "id",
-		copyable: true,
-		ellipsis: true,
-		tooltip: "Id",
-	},
-	{
-		disable: true,
-		title: "服务地址",
-		dataIndex: "endpoint",
-		tooltip: "endpoint",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "存储桶",
-		dataIndex: "bucketName",
-		tooltip: "bucketName",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥ID",
-		dataIndex: "accessKey",
-		tooltip: "accessKey",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "密钥值",
-		dataIndex: "secretKey",
-		tooltip: "secretKey",
-		ellipsis: true,
-	},
-	{
-		disable: true,
-		title: "状态",
-		dataIndex: "status",
-		search: true,
-	},
-	{
-		title: "创建时间",
-		dataIndex: "createdTime",
-		valueType: "dateTime",
-		sorter: true,
-		hideInSearch: true,
-	},
-	{
-		title: "更新时间",
-		dataIndex: "updatedTime",
-		valueType: "dateTime",
-		sorter: true,
-	},
-	{
-		title: "操作",
-		valueType: "option",
-		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		render: (text, record, _, action) => [
-			<a
-				key="editable"
-				onClick={() => {
-					action?.startEditable?.(record.id);
-				}}>
-				编辑
-			</a>,
-			<a target="_blank" rel="noopener noreferrer" key="view">
-				查看
-			</a>,
-			<TableDropdown
-				key="actionGroup"
-				onSelect={() => action?.reload()}
-				menus={[
-					{ key: "copy", name: "复制" },
-					{ key: "delete", name: "删除" },
-				]}
-			/>,
-		],
-	},
-];
-
-const WangyiSettings: React.FC = () => {
-	const actionRef = useRef<ActionType>();
-	const [open, setOpen] = useState(false);
-	const showDrawer = () => {
-		setOpen(true);
-	};
-
-	const onClose = () => {
-		setOpen(false);
-	};
-	const AddWangyiOssConfigDrawer = () => {
-		return (
-			<>
-				<Drawer
-					title="创建连接配置"
-					width={720}
-					onClose={onClose}
-					open={open}
-					styles={{
-						body: {
-							paddingBottom: 80,
-						},
-					}}
-					extra={
-						<Space>
-							<Button onClick={onClose}>取消</Button>
-							<Button onClick={onClose} type="primary">
-								提交
-							</Button>
-						</Space>
-					}>
-					<Form layout="vertical">
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="endpoint"
-									label="服务地址"
-									rules={[{ required: true, message: "请输入服务地址！" }]}>
-									<Input placeholder="请输入服务地址！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="bucketName"
-									label="存储桶"
-									rules={[{ required: true, message: "请输入存储桶！" }]}>
-									<Input placeholder="请输入存储桶！" />
-								</Form.Item>
-							</Col>
-						</Row>
-						<Row gutter={16}>
-							<Col span={12}>
-								<Form.Item
-									name="accessKey"
-									label="密钥ID"
-									rules={[{ required: true, message: "请输入密钥ID!" }]}>
-									<Input placeholder="请输入密钥ID！" />
-								</Form.Item>
-							</Col>
-							<Col span={12}>
-								<Form.Item
-									name="secretKey"
-									label="密钥值"
-									rules={[{ required: true, message: "请输入密钥值!" }]}>
-									<Input placeholder="请输入密钥值！" />
-								</Form.Item>
-							</Col>
-						</Row>
-					</Form>
-				</Drawer>
-			</>
-		);
-	};
-	return (
-		<>
-			<ProTable<AliOssConfigItem>
-				columns={columns}
-				dataSource={data}
-				actionRef={actionRef}
-				cardBordered={true}
-				editable={{
-					type: "multiple",
-				}}
-				columnsState={{
-					persistenceKey: "pro-table-singe-demos",
-					persistenceType: "localStorage",
-					defaultValue: {
-						option: { fixed: "right", disable: true },
-					},
-				}}
-				rowKey="id"
-				search={false}
-				options={{
-					setting: {
-						listsHeight: 400,
-					},
-				}}
-				pagination={{
-					pageSize: 5,
-				}}
-				dateFormatter="string"
-				headerTitle="阿里云OSS配置"
-				bordered={false}
-				toolBarRender={() => [
-					<Button
-						key="button"
-						icon={<PlusOutlined />}
-						onClick={() => {
-							showDrawer();
-						}}
-						type="primary">
-						新建
-					</Button>,
-				]}
-			/>
-			<AddWangyiOssConfigDrawer />
-		</>
-	);
-};
-
-export default WangyiSettings;
+/** @format */
+import { PlusOutlined } from "@ant-design/icons";
+import type { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ProTable, TableDropdown } from "@ant-design/pro-components";
+import { Button, Col, Drawer, Form, Input, Row, Space } from "antd";
+import React, { ReactNode, useRef, useState } from "react";
+
+type WangyiOssConfigItem = {
+	id: number;
+	userId: number;
+	endpoint: string;
+	bucketName: string;
+	accessKey: string;
+	secretKey: string;
+	createdTime: string;
+	updatedTime: string;
+	status: string;
+};
+const data: WangyiOssConfigItem[] = [
+	{
+		id: 1,
+		userId: 1,
+		endpoint: "https://oss.aliyuncs.com",
+		bucketName: "https://oss.aliyuncs.com",
+		accessKey: "LTAI5tG3",
+		secretKey: "G3",
+		createdTime: "2022-01-01",
+		updatedTime: "2022-01-01",
+		status: "正常",
+	},
+];
+
+const columns: ProColumns<WangyiOssConfigItem>[] = [
+	{
+		dataIndex: "index",
+		valueType: "indexBorder",
+		width: 48,
+	},
+	{
+		title: "ID",
+		dataIndex: "id",
+		copyable: true,
+		ellipsis: true,
+		tooltip: "Id",
+	},
+	{
+		disable: true,
+		title: "服务地址",
+		dataIndex: "endpoint",
+		tooltip: "endpoint",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "存储桶",
+		dataIndex: "bucketName",
+		tooltip: "bucketName",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥ID",
+		dataIndex: "accessKey",
+		tooltip: "accessKey",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "密钥值",
+		dataIndex: "secretKey",
+		tooltip: "secretKey",
+		ellipsis: true,
+	},
+	{
+		disable: true,
+		title: "状态",
+		dataIndex: "status",
+		search: true,
+	},
+	{
+		title: "创建时间",
+		dataIndex: "createdTime",
+		valueType: "dateTime",
+		sorter: true,
+		hideInSearch: true,
+	},
+	{
+		title: "更新时间",
+		dataIndex: "updatedTime",
+		valueType: "dateTime",
+		sorter: true,
+	},
+	{
+		title: "操作",
+		valueType: "option",
+		key: "option",
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		render: (text: ReactNode, record: WangyiOssConfigItem, _: number, action: any) => [
+			<a
+				key="editable"
+				onClick={() => {
+					action?.startEditable?.(record.id);
+				}}>
+				编辑
+			</a>,
+			<a target="_blank" rel="noopener noreferrer" key="view">
+				查看
+			</a>,
+			<TableDropdown
+				key="actionGroup"
+				onSelect={() => action?.reload()}
+				menus={[
+					{ key: "copy", name: "复制" },
+					{ key: "delete", name: "删除" },
+				]}
+			/>,
+		],
+	},
+];
+
+const WangyiSettings: React.FC = () => {
+	const actionRef = useRef<ActionType>();
+	const [open, setOpen] = useState(false);
+	const showDrawer = () => {
+		setOpen(true);
+	};
+
+	const onClose = () => {
+		setOpen(false);
+	};
+	const AddWangyiOssConfigDrawer = () => {
+		return (
+			<>
+				<Drawer
+					title="创建连接配置"
+					width={720}
+					onClose={onClose}
+					open={open}
+					styles={{
+						body: {
+							paddingBottom: 80,
+						},
+					}}
+					extra={
+						<Space>
+							<Button onClick={onClose}>取消</Button>
+							<Button onClick={onClose} type="primary">
+								提交
+							</Button>
+						</Space>
+					}>
+					<Form layout="vertical">
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="endpoint"
+									label="服务地址"
+									rules={[{ required: true, message: "请输入服务地址！" }]}>
+									<Input placeholder="请输入服务地址！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="bucketName"
+									label="存储桶"
+									rules={[{ required: true, message: "请输入存储桶！" }]}>
+									<Input placeholder="请输入存储桶！" />
+								</Form.Item>
+							</Col>
+						</Row>
+						<Row gutter={16}>
+							<Col span={12}>
+								<Form.Item
+									name="accessKey"
+									label="密钥ID"
+									rules={[{ required: true, message: "请输入密钥ID!" }]}>
+									<Input placeholder="请输入密钥ID！" />
+								</Form.Item>
+							</Col>
+							<Col span={12}>
+								<Form.Item
+									name="secretKey"
+									label="密钥值"
+									rules={[{ required: true, message: "请输入密钥值!" }]}>
+									<Input placeholder="请输入密钥值！" />
+								</Form.Item>
+							</Col>
+						</Row>
+					</Form>
+				</Drawer>
+			</>
+		);
+	};
+	return (
+		<>
+			<div style={{ height: "65vh" }}>
+				<ProTable<WangyiOssConfigItem>
+					columns={columns}
+					dataSource={data}
+					actionRef={actionRef}
+					cardBordered={true}
+					editable={{
+						type: "multiple",
+					}}
+					columnsState={{
+						persistenceKey: "pro-table-singe-demos",
+						persistenceType: "localStorage",
+						defaultValue: {
+							option: { fixed: "right", disable: true },
+						},
+					}}
+					rowKey="id"
+					search={false}
+					options={{
+						setting: {
+							listsHeight: 400,
+						},
+					}}
+					pagination={
+						{
+							pageSize: 5,
+						} as any
+					}
+					dateFormatter="string"
+					headerTitle="阿里云OSS配置"
+					bordered={false}
+					toolBarRender={() => [
+						<Button
+							key="button"
+							icon={<PlusOutlined />}
+							onClick={() => {
+								showDrawer();
+							}}
+							type="primary">
+							新建
+						</Button>,
+					]}
+				/>
+				<AddWangyiOssConfigDrawer />
+			</div>
+		</>
+	);
+};
+
+export default WangyiSettings;
diff --git a/src/components/Main/Settings/index.tsx b/src/components/Main/Settings/index.tsx
index 32b81e5..2e75613 100644
--- a/src/components/Main/Settings/index.tsx
+++ b/src/components/Main/Settings/index.tsx
@@ -58,7 +58,7 @@ export default () => {
 			<ProCard style={{ marginTop: 20, height: "100%" }} bordered boxShadow>
 				{location.pathname === "/main/setting" || location.pathname === "/main/setting/" ? (
 					<>
-						<Empty description={"请选择存储商"} />
+						<Empty description={"请选择存储商"} style={{ height: "65vh" }} />
 					</>
 				) : (
 					<>
diff --git a/src/components/Main/Share/components/ShareAdd/ShareAdd.tsx b/src/components/Main/Share/components/ShareAdd/ShareAdd.tsx
index 9efc83a..ece6148 100644
--- a/src/components/Main/Share/components/ShareAdd/ShareAdd.tsx
+++ b/src/components/Main/Share/components/ShareAdd/ShareAdd.tsx
@@ -6,7 +6,7 @@ import { useNavigate } from "react-router-dom";
 import "aieditor/dist/style.css";
 import styles from "./index.module.less";
 import { ProCard } from "@ant-design/pro-components";
-import { Button, Card, Form, FormListFieldData, FormProps, Input, Select } from "antd";
+import { Button, Card, Flex, Form, FormListFieldData, FormProps, Input, Select } from "antd";
 import { CloseOutlined, LeftOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 import selectOptions from "@/components/Main/Settings/settings.ts";
 
@@ -34,7 +34,7 @@ const ShareAdd: React.FunctionComponent = () => {
 						content: value.getHtml(),
 					});
 				},
-			});
+			} as any);
 			return () => {
 				aiEditor.destroy();
 			};
@@ -44,38 +44,66 @@ const ShareAdd: React.FunctionComponent = () => {
 		<>
 			<div className={styles.share_add_main}>
 				<ProCard bordered={true}>
-					<Button
-						shape="circle"
-						icon={<LeftOutlined />}
-						onClick={() => {
-							navigate("/main/share/list/1");
-						}}
-					/>
+					<Flex vertical={false} align={"center"}>
+						<Button
+							shape="circle"
+							icon={<LeftOutlined />}
+							onClick={() => {
+								navigate("/main/share/list/1");
+							}}
+						/>
+						<Flex
+							vertical={false}
+							align={"center"}
+							justify={"center"}
+							style={{ width: "90%" }}>
+							<h3>新增分享</h3>
+						</Flex>
+					</Flex>
 				</ProCard>
 				<div className={styles.share_add_content}>
 					<Form onFinish={onFinish} autoComplete="off" ref={fromRef}>
 						<Form.Item
-							label={"标题"}
+							label={
+								<>
+									<h4>标题</h4>
+								</>
+							}
 							name="title"
 							id={"title"}
 							rules={[{ required: true, message: "请输入标题" }]}>
 							<Input name="title" maxLength={50} showCount></Input>
 						</Form.Item>
 						<Form.Item
-							label={"图标"}
+							label={
+								<>
+									<h4>图标</h4>
+								</>
+							}
 							id={"icon"}
 							name="icon"
 							rules={[{ required: true, message: "请输入图标" }]}>
 							<Input name="icon"></Input>
 						</Form.Item>
 						<Form.Item
-							label={"摘要"}
+							label={
+								<>
+									<h4>摘要</h4>
+								</>
+							}
 							id={"description"}
 							name="description"
 							rules={[{ required: true, message: "请输入摘要" }]}>
 							<Input name="description" maxLength={100} showCount></Input>
 						</Form.Item>
-						<Form.Item label={"介绍"} name={"content"} id={"content"}>
+						<Form.Item
+							label={
+								<>
+									<h4>介绍</h4>
+								</>
+							}
+							name="content"
+							id={"content"}>
 							<div
 								ref={divRef}
 								style={{ height: "300px", maxWidth: "100%", minWidth: "100%" }}
@@ -92,7 +120,7 @@ const ShareAdd: React.FunctionComponent = () => {
 										if (tags.length >= 3) {
 											setIsDisabled(true);
 											return Promise.reject(
-												new Error("最多只能添加五个标签"),
+												new Error("最多只能添加三个标签"),
 											);
 										}
 									},
@@ -102,7 +130,11 @@ const ShareAdd: React.FunctionComponent = () => {
 								<>
 									{fields.map((field: FormListFieldData, index: number) => (
 										<Form.Item
-											label={"标签" + (index + 1)}
+											label={
+												<>
+													<h4>{"标签" + (index + 1)}</h4>
+												</>
+											}
 											key={index}
 											id={"tags"}>
 											<Form.Item
@@ -129,7 +161,7 @@ const ShareAdd: React.FunctionComponent = () => {
 									))}
 									<Form.Item>
 										<Button
-											type="dashed"
+											type="default"
 											disabled={isDisabled}
 											onClick={() => add()}
 											style={{ width: "100%" }}
@@ -153,8 +185,14 @@ const ShareAdd: React.FunctionComponent = () => {
 									{fields.map((field: FormListFieldData, index: number) => (
 										<Card
 											size="small"
-											title={`链接 ${index + 1}`}
+											title={
+												<>
+													<h4>{`链接 ${index + 1}`}</h4>
+												</>
+											}
 											key={index}
+											bordered
+											hoverable
 											extra={
 												<CloseOutlined
 													onClick={() => {
@@ -199,7 +237,7 @@ const ShareAdd: React.FunctionComponent = () => {
 										</Card>
 									))}
 
-									<Button type="dashed" onClick={() => add()} block>
+									<Button type="default" onClick={() => add()} block>
 										+ 添加分享链接
 									</Button>
 								</div>
diff --git a/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx b/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx
index 249c4f5..327d057 100644
--- a/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx
+++ b/src/components/Main/Share/components/ShareDetail/ShareDetail.tsx
@@ -1,10 +1,16 @@
 /** @format */
 import React from "react";
-import { Avatar, Button, Card, Divider, Flex, Tooltip } from "antd";
+import { Avatar, Button, Card, Divider, Flex, Tag, Tooltip } from "antd";
 import {
+	CommentOutlined,
 	ExportOutlined,
+	EyeOutlined,
+	HeartOutlined,
 	InfoCircleOutlined,
 	LeftOutlined,
+	LikeOutlined,
+	StarOutlined,
+	TagsOutlined,
 	WarningOutlined,
 } from "@ant-design/icons";
 import { useNavigate } from "react-router-dom";
@@ -13,7 +19,8 @@ import { ProCard } from "@ant-design/pro-components";
 import styles from "./index.module.less";
 import logo from "@/assets/icons/baiduyun.svg";
 import { Typography } from "antd";
-
+import Comment from "@/components/Main/Share/components/ShareDetail/components/Comment";
+import getRandomColor from "@/constant/random-color.ts";
 const { Paragraph } = Typography;
 const ShareDetail: React.FunctionComponent = () => {
 	const navigate = useNavigate();
@@ -21,19 +28,69 @@ const ShareDetail: React.FunctionComponent = () => {
 		<>
 			<div>
 				<ProCard bordered={true}>
-					<Button
-						shape="circle"
-						icon={<LeftOutlined />}
-						onClick={() => {
-							navigate("/main/share/list/1");
-						}}
-					/>
+					<Flex vertical={false} align={"center"} justify={"space-between"}>
+						<Button
+							shape="circle"
+							icon={<LeftOutlined />}
+							onClick={() => {
+								navigate("/main/share/list/1");
+							}}
+						/>
+						<Flex vertical={false} align={"center"}>
+							<h3>办公软件分享</h3>
+						</Flex>
+						<Flex
+							vertical={false}
+							align={"center"}
+							justify={"space-between"}
+							style={{ width: "20%" }}>
+							<Flex vertical={false} align={"center"}>
+								<Avatar src={logo as any} size={"small"} />
+								<span
+									style={{
+										fontSize: 12,
+										color: "gray",
+										overflow: "hidden",
+									}}>
+									landaiqing
+								</span>
+							</Flex>
+							<Flex vertical={false} align={"center"}>
+								<HeartOutlined />
+								<span
+									style={{
+										fontSize: 12,
+										color: "gray",
+									}}>
+									1024
+								</span>
+							</Flex>
+							<Flex vertical={false} align={"center"}>
+								<CommentOutlined />
+								<span
+									style={{
+										fontSize: 12,
+										color: "gray",
+									}}>
+									1024
+								</span>
+							</Flex>
+							<Flex vertical={false} align={"center"}>
+								<EyeOutlined style={{ color: "gray" }} />{" "}
+								<span
+									style={{
+										fontSize: 12,
+										color: "gray",
+									}}>
+									1024
+								</span>
+							</Flex>
+						</Flex>
+					</Flex>
 				</ProCard>
 				<div className={styles.share_detail_container}>
 					<ProCard bordered={true}>
-						<div style={{ height: 500 }}>
-							资源描述
-						</div>
+						<div style={{ height: 500 }}>资源描述</div>
 
 						<Card style={{ borderRadius: "10px", borderColor: "#1677FF" }}>
 							<Flex vertical={false} align={"center"} justify={"space-between"}>
@@ -124,8 +181,30 @@ const ShareDetail: React.FunctionComponent = () => {
 								</span>
 							</Flex>
 						</Card>
+
+						<Flex vertical={false} align={"center"} style={{ marginTop: 20 }}>
+							<TagsOutlined style={{ fontSize: 30, color: "#1677FF" }} />
+							<Flex vertical={false} align={"center"} style={{ marginLeft: 10 }}>
+								<Tag bordered={false} color={getRandomColor()}>
+									测试标签
+								</Tag>
+								<Tag bordered={false} color={getRandomColor()}>
+									测试标签
+								</Tag>
+								<Tag bordered={false} color={getRandomColor()}>
+									测试标签
+								</Tag>
+							</Flex>
+						</Flex>
+						<Flex vertical={false} align={"center"} justify={"center"}>
+							<LikeOutlined style={{ fontSize: 30, color: "red" }} />
+							<StarOutlined
+								style={{ fontSize: 30, marginLeft: 20, color: "orange" }}
+							/>
+						</Flex>
 					</ProCard>
 				</div>
+				<Comment />
 			</div>
 		</>
 	);
diff --git a/src/components/Main/Share/components/ShareDetail/components/Comment/index.module.less b/src/components/Main/Share/components/ShareDetail/components/Comment/index.module.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx b/src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx
new file mode 100644
index 0000000..2ca3e2d
--- /dev/null
+++ b/src/components/Main/Share/components/ShareDetail/components/Comment/index.tsx
@@ -0,0 +1,60 @@
+/** @format */
+import { ProCard } from "@ant-design/pro-components";
+import { Avatar, Button, Flex, Input, Segmented } from "antd";
+import logo from "@/assets/icons/gitee.svg";
+import {
+	BarsOutlined,
+	FireOutlined,
+	PictureOutlined,
+	SendOutlined,
+	SmileOutlined,
+} from "@ant-design/icons";
+const Comment = () => {
+	return (
+		<>
+			<div>
+				<ProCard title={"评论 5"}>
+					<Flex vertical={false}>
+						<Flex vertical={true} justify={"flex-start"}>
+							<Avatar src={logo as any} size={"large"} />
+						</Flex>
+						<Flex vertical={true} style={{ width: "100%" }}>
+							<Input.TextArea
+								style={{ marginLeft: 10 }}
+								rows={5}
+								maxLength={500}
+								showCount
+								placeholder={"平等表达，友善交流"}></Input.TextArea>
+							<Flex
+								vertical={false}
+								align={"center"}
+								style={{ marginTop: 10, marginLeft: 10 }}>
+								<SmileOutlined style={{ fontSize: 20, color: "grey" }} />
+								<PictureOutlined
+									style={{ marginLeft: 20, fontSize: 20, color: "grey" }}
+								/>
+							</Flex>
+							<Flex vertical={false} align={"center"} justify={"flex-end"}>
+								<Button icon={<SendOutlined />} type={"primary"}>
+									发表
+								</Button>
+							</Flex>
+						</Flex>
+					</Flex>
+					<Flex vertical={true}>
+						<Segmented
+							block={false}
+							style={{ width: 145 }}
+							size={"middle"}
+							options={[
+								{ label: "最新", value: "List", icon: <BarsOutlined /> },
+								{ label: "最热", value: "Kanban", icon: <FireOutlined /> },
+							]}
+						/>
+					</Flex>
+				</ProCard>
+			</div>
+		</>
+	);
+};
+export default Comment;
diff --git a/src/components/Main/Share/components/ShareList/ShareList.tsx b/src/components/Main/Share/components/ShareList/ShareList.tsx
index 3d58d06..69ca4ee 100644
--- a/src/components/Main/Share/components/ShareList/ShareList.tsx
+++ b/src/components/Main/Share/components/ShareList/ShareList.tsx
@@ -1,13 +1,18 @@
 /** @format */
 
 import { ProCard } from "@ant-design/pro-components";
-import { Avatar, Button, Divider, Flex, List, Skeleton, Tag } from "antd";
+import { Avatar, Button, Divider, Flex, Input, List, Skeleton, Tag } from "antd";
 import { useEffect, useState } from "react";
 import styles from "./index.module.less";
-import Search from "antd/es/input/Search";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useNavigate } from "react-router-dom";
-import { CommentOutlined, EyeOutlined, HeartOutlined, LeftOutlined } from "@ant-design/icons";
+import {
+	CommentOutlined,
+	EyeOutlined,
+	HeartOutlined,
+	LeftOutlined,
+	ShareAltOutlined,
+} from "@ant-design/icons";
 import logo from "@/assets/icons/aliyun.svg";
 interface DataType {
 	gender: string;
@@ -51,7 +56,7 @@ export default () => {
 	return (
 		<>
 			<div className={styles.share_list_main}>
-				<ProCard bordered={true} boxShadow={true}>
+				<ProCard bordered={false} boxShadow={false}>
 					<div className={styles.share_list_header}>
 						<div>
 							<Button
@@ -61,10 +66,15 @@ export default () => {
 									navigate("/main/share");
 								}}
 							/>
-							<Search placeholder="搜索" style={{ width: 500, marginLeft: 20 }} />
+							<Input
+								placeholder="搜索"
+								style={{ borderRadius: 20, width: 500, marginLeft: 20 }}
+							/>
 						</div>
 
 						<Button
+							icon={<ShareAltOutlined />}
+							type={"primary"}
 							onClick={() => {
 								navigate("/main/share/add");
 							}}>
@@ -72,7 +82,7 @@ export default () => {
 						</Button>
 					</div>
 				</ProCard>
-				<ProCard bordered={true} boxShadow={true} style={{ marginTop: 20 }}>
+				<ProCard bordered={false} boxShadow={false}>
 					<InfiniteScroll
 						dataLength={data.length}
 						next={loadMoreData}
@@ -82,6 +92,11 @@ export default () => {
 						scrollableTarget="scrollableDiv">
 						<List
 							dataSource={data}
+							header={
+								<>
+									<h4>分享列表</h4>
+								</>
+							}
 							renderItem={(item) => (
 								<List.Item key={item.email}>
 									<List.Item.Meta
@@ -113,30 +128,53 @@ export default () => {
 														vertical={false}
 														align={"center"}
 														justify={"space-between"}
-														style={{ width: "250px" }}>
-														<Avatar src={logo} size={"small"} />
-														<span
-															style={{
-																fontSize: 12,
-																color: "gray",
-															}}>
-															landaiqing
-														</span>
-														<HeartOutlined />
-														<span
-															style={{ fontSize: 12, color: "gray" }}>
-															1024
-														</span>
-														<CommentOutlined />
-														<span
-															style={{ fontSize: 12, color: "gray" }}>
-															1024
-														</span>
-														<EyeOutlined style={{ color: "gray" }} />{" "}
-														<span
-															style={{ fontSize: 12, color: "gray" }}>
-															1024
-														</span>
+														style={{ width: "25%" }}>
+														<Flex vertical={false} align={"center"}>
+															<Avatar
+																src={logo as any}
+																size={"small"}
+															/>
+															<span
+																style={{
+																	fontSize: 12,
+																	color: "gray",
+																	overflow: "hidden",
+																}}>
+																landaiqing
+															</span>
+														</Flex>
+														<Flex vertical={false} align={"center"}>
+															<HeartOutlined />
+															<span
+																style={{
+																	fontSize: 12,
+																	color: "gray",
+																}}>
+																1024
+															</span>
+														</Flex>
+														<Flex vertical={false} align={"center"}>
+															<CommentOutlined />
+															<span
+																style={{
+																	fontSize: 12,
+																	color: "gray",
+																}}>
+																1024
+															</span>
+														</Flex>
+														<Flex vertical={false} align={"center"}>
+															<EyeOutlined
+																style={{ color: "gray" }}
+															/>{" "}
+															<span
+																style={{
+																	fontSize: 12,
+																	color: "gray",
+																}}>
+																1024
+															</span>
+														</Flex>
 													</Flex>
 												</Flex>
 											</>
diff --git a/src/components/Main/Share/components/ShareList/index.module.less b/src/components/Main/Share/components/ShareList/index.module.less
index 709256b..61c59f6 100644
--- a/src/components/Main/Share/components/ShareList/index.module.less
+++ b/src/components/Main/Share/components/ShareList/index.module.less
@@ -1,6 +1,7 @@
 .share_list_main{
 	display: flex;
 	flex-direction: column;
+	min-height: 83vh;
 	.share_list_header{
 		display: flex;
 		flex-direction: row;
diff --git a/src/components/Main/Share/index.module.less b/src/components/Main/Share/index.module.less
index 92c5c46..48f8a6b 100644
--- a/src/components/Main/Share/index.module.less
+++ b/src/components/Main/Share/index.module.less
@@ -1,10 +1,11 @@
-.share_main{
-	display: flex;
-	flex-direction: column;
-	.share_header{
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-	}
-}
+.share_main{
+	min-height: 83vh;
+	display: flex;
+	flex-direction: column;
+	.share_header{
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+}
diff --git a/src/components/Main/Share/index.tsx b/src/components/Main/Share/index.tsx
index ed76e9d..f8baf3b 100644
--- a/src/components/Main/Share/index.tsx
+++ b/src/components/Main/Share/index.tsx
@@ -2,14 +2,15 @@
 import { FunctionComponent, useState } from "react";
 import { ProCard } from "@ant-design/pro-components";
 import styles from "./index.module.less";
-import { Avatar, Button, Card, Drawer, Flex, Form, Image, Input, Space } from "antd";
+import { Avatar, Button, Card, Drawer, Flex, FloatButton, Form, Image, Input, Space } from "antd";
 
-import Search from "antd/es/input/Search";
-import Meta from "antd/es/card/Meta";
 import { useNavigate } from "react-router-dom";
-import background from "@/assets/images/background.png";
 import TextArea from "antd/es/input/TextArea";
-import { EyeOutlined, UnorderedListOutlined } from "@ant-design/icons";
+import { EyeOutlined, PlusOutlined, UnorderedListOutlined } from "@ant-design/icons";
+import pic from "@/assets/images/background.png";
+import pic2 from "@/assets/images/setting.png";
+
+import Meta from "antd/es/card/Meta";
 const MainShare: FunctionComponent = () => {
 	const navigate = useNavigate();
 	const [open, setOpen] = useState(false);
@@ -23,91 +24,90 @@ const MainShare: FunctionComponent = () => {
 	return (
 		<>
 			<div className={styles.share_main}>
-				<ProCard bordered={true} boxShadow={true}>
+				<ProCard bordered={false} boxShadow={false}>
 					<div className={styles.share_header}>
-						<Search placeholder="搜索圈子" style={{ width: 500 }} />
-						<Button onClick={showDrawer}>创建圈子</Button>
+						<Input
+							size={"large"}
+							placeholder="搜索圈子"
+							style={{ width: 500, borderRadius: 20 }}
+						/>
 					</div>
 				</ProCard>
-				<ProCard bordered={true} boxShadow={true} style={{ marginTop: 20 }}>
+				<ProCard title={<h3>文件分享圈</h3>} bordered={false} boxShadow={false}>
 					<Flex vertical={false} align={"center"}>
 						<Card
 							hoverable
-							style={{ width: "250px" }}
+							style={{
+								width: "250px",
+								boxShadow: " 0 0 10px rgba(0, 0, 0, 0.1)",
+								borderRadius: 20,
+								// backgroundColor: "rgba(79,68,68,0.11)",
+							}}
 							onClick={() => {
 								navigate("/main/share/list/1");
 							}}
 							cover={
 								<Image
 									alt="example"
-									src={background}
-									style={{ height: 200 }}
+									src={pic as any}
+									style={{
+										height: 180,
+										borderTopLeftRadius: 20,
+										borderTopRightRadius: 20,
+									}}
 									preview={false}
 									width={"100%"}
 									fallback="data:image/png;base64,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"
 								/>
 							}>
 							<Meta title="工具软件分享" description="分享一些常用的办公软件" />
+							{/*<Avatar*/}
+							{/*	src={pic2 as any}*/}
+							{/*	shape={"circle"}*/}
+							{/*	style={{*/}
+							{/*		position: "absolute",*/}
+							{/*		top: 160,*/}
+							{/*		left: 10,*/}
+							{/*		width: 60,*/}
+							{/*		height: 60,*/}
+							{/*		zIndex: 9999,*/}
+							{/*	}}></Avatar>*/}
 							<Flex
 								vertical={false}
 								style={{ marginTop: 10 }}
 								align={"center"}
 								justify={"space-between"}>
-								<Avatar src={background} size={"small"} />{" "}
-								<span style={{ fontSize: 12, color: "gray" }}>landaiqing</span>
-								<Flex
-									vertical={false}
-									align={"center"}
-									style={{ width: 100 }}
-									justify={"space-between"}>
-									<EyeOutlined style={{ color: "gray" }} />{" "}
-									<span style={{ fontSize: 12, color: "gray" }}>1024</span>
-									<UnorderedListOutlined style={{ color: "gray" }} />{" "}
-									<span style={{ fontSize: 12, color: "gray" }}>999</span>
+								<Flex vertical={false} align={"center"}>
+									<Avatar src={pic as any} size={"small"} />{" "}
+									<span style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
+										landaiqing
+									</span>
 								</Flex>
-							</Flex>
-						</Card>
-
-						<Card
-							hoverable
-							style={{ width: "250px", marginLeft: 20 }}
-							onClick={() => {
-								navigate("/main/share/list/1");
-							}}
-							cover={
-								<Image
-									alt="example"
-									src={background}
-									style={{ height: 200 }}
-									preview={false}
-									width={"100%"}
-									fallback="data:image/png;base64,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"
-								/>
-							}>
-							<Meta title="工具软件分享" description="分享一些常用的办公软件" />
-							<Flex
-								vertical={false}
-								style={{ marginTop: 10 }}
-								align={"center"}
-								justify={"space-between"}>
-								<Avatar src={background} size={"small"} />{" "}
-								<span style={{ fontSize: 12, color: "gray" }}>landaiqing</span>
 								<Flex
 									vertical={false}
 									align={"center"}
 									style={{ width: 100 }}
 									justify={"space-between"}>
-									<EyeOutlined style={{ color: "gray" }} />{" "}
-									<span style={{ fontSize: 12, color: "gray" }}>1024</span>
-									<UnorderedListOutlined style={{ color: "gray" }} />{" "}
-									<span style={{ fontSize: 12, color: "gray" }}>999</span>
+									<Flex vertical={false} align={"center"}>
+										<EyeOutlined style={{ color: "gray" }} />{" "}
+										<span
+											style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
+											1024
+										</span>
+									</Flex>
+									<Flex vertical={false} align={"center"}>
+										<UnorderedListOutlined style={{ color: "gray" }} />{" "}
+										<span
+											style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
+											999
+										</span>
+									</Flex>
 								</Flex>
 							</Flex>
 						</Card>
 					</Flex>
 				</ProCard>
 			</div>
-
 			<Drawer
 				title="创建圈子"
 				width={"40%"}
@@ -149,6 +149,13 @@ const MainShare: FunctionComponent = () => {
 					</Form.Item>
 				</Form>
 			</Drawer>
+			<FloatButton
+				trigger="click"
+				type="primary"
+				style={{ right: "5%", width: 50, height: 50 }}
+				icon={<PlusOutlined />}
+				onClick={() => setOpen(true)}
+			/>
 		</>
 	);
 };
diff --git a/src/components/Main/User/MyFavorites/index.module.less b/src/components/Main/User/MyFavorites/index.module.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Main/User/MyFavorites/index.tsx b/src/components/Main/User/MyFavorites/index.tsx
new file mode 100644
index 0000000..238b074
--- /dev/null
+++ b/src/components/Main/User/MyFavorites/index.tsx
@@ -0,0 +1,131 @@
+/** @format */
+
+import { ProCard } from "@ant-design/pro-components";
+import { Avatar, Divider, Flex, List, Skeleton, Tag } from "antd";
+import { useEffect, useState } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useNavigate } from "react-router-dom";
+import { CommentOutlined, EyeOutlined, HeartOutlined } from "@ant-design/icons";
+import logo from "@/assets/icons/aliyun.svg";
+interface DataType {
+	gender: string;
+	name: {
+		title: string;
+		first: string;
+		last: string;
+	};
+	email: string;
+	picture: {
+		large: string;
+		medium: string;
+		thumbnail: string;
+	};
+	nat: string;
+}
+
+export default () => {
+	const navigate = useNavigate();
+	const [loading, setLoading] = useState(false);
+	const [data, setData] = useState<DataType[]>([]);
+	const loadMoreData = () => {
+		if (loading) {
+			return;
+		}
+		setLoading(true);
+		fetch("https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo")
+			.then((res) => res.json())
+			.then((body) => {
+				setData([...data, ...body.results]);
+				setLoading(false);
+			})
+			.catch(() => {
+				setLoading(false);
+			});
+	};
+
+	useEffect(() => {
+		loadMoreData();
+	}, []);
+	return (
+		<>
+			<div>
+				<ProCard bordered={true} boxShadow={true}>
+					<InfiniteScroll
+						dataLength={data.length}
+						next={loadMoreData}
+						hasMore={data.length < 50}
+						loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
+						endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
+						scrollableTarget="scrollableDiv">
+						<List
+							dataSource={data}
+							renderItem={(item) => (
+								<List.Item key={item.email}>
+									<List.Item.Meta
+										avatar={<Avatar src={item.picture.large} />}
+										title={
+											<>
+												<a
+													onClick={() => {
+														navigate("/main/share/detail/1");
+													}}>
+													{item.name.last}
+												</a>
+												<Tag
+													bordered={false}
+													color="processing"
+													style={{ marginLeft: 10 }}>
+													IDM
+												</Tag>
+											</>
+										}
+										description={
+											<>
+												<Flex
+													vertical={false}
+													justify={"space-between"}
+													align={"center"}>
+													{item.email}
+													<Flex
+														vertical={false}
+														align={"center"}
+														justify={"space-between"}
+														style={{ width: "250px" }}>
+														<Avatar src={logo} size={"small"} />
+														<span
+															style={{
+																fontSize: 12,
+																color: "gray",
+															}}>
+															landaiqing
+														</span>
+														<HeartOutlined />
+														<span
+															style={{ fontSize: 12, color: "gray" }}>
+															1024
+														</span>
+														<CommentOutlined />
+														<span
+															style={{ fontSize: 12, color: "gray" }}>
+															1024
+														</span>
+														<EyeOutlined style={{ color: "gray" }} />{" "}
+														<span
+															style={{ fontSize: 12, color: "gray" }}>
+															1024
+														</span>
+													</Flex>
+												</Flex>
+											</>
+										}
+									/>
+									{/*<div>Content</div>*/}
+								</List.Item>
+							)}
+						/>
+					</InfiniteScroll>
+				</ProCard>
+			</div>
+		</>
+	);
+};
diff --git a/src/constant/random-color.ts b/src/constant/random-color.ts
new file mode 100644
index 0000000..2a53845
--- /dev/null
+++ b/src/constant/random-color.ts
@@ -0,0 +1,24 @@
+/** @format */
+
+const RandomColor: any = [
+	"processing",
+	"success",
+	"error",
+	"warning",
+	"magenta",
+	"blue",
+	"geekblue",
+	"purple",
+	"#f50",
+	"#2db7f5",
+	"#87d068",
+	"#108ee9",
+	"red",
+	"volcano",
+	"orange",
+	"gold",
+	"lime",
+	"green",
+];
+const getRandomColor = () => RandomColor[Math.floor(Math.random() * RandomColor.length)];
+export default getRandomColor;
diff --git a/src/constant/stroage-icon.ts b/src/constant/stroage-icon.ts
index 6777808..28a11b9 100644
--- a/src/constant/stroage-icon.ts
+++ b/src/constant/stroage-icon.ts
@@ -14,6 +14,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 bucket from "@/assets/icons/bucket.svg";
 
 const StorageIcon: any = {
 	ali: aliyun,
@@ -30,5 +31,6 @@ const StorageIcon: any = {
 	qingyun: qingyun,
 	ucloud: ucloud,
 	jinshan: jinshan,
+	bucket:bucket,
 };
 export default StorageIcon;
diff --git a/src/router/modules/main/user/myFavorites/index.ts b/src/router/modules/main/user/myFavorites/index.ts
new file mode 100644
index 0000000..dfcb23d
--- /dev/null
+++ b/src/router/modules/main/user/myFavorites/index.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const MyFavorites = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/User/MyFavorites/index.tsx"));
+		}),
+);
+export default MyFavorites;
diff --git a/src/router/routes.tsx b/src/router/routes.tsx
index eb8bb24..76a1737 100644
--- a/src/router/routes.tsx
+++ b/src/router/routes.tsx
@@ -48,6 +48,7 @@ import upBucket from "@/router/modules/main/bucket/createBuckets/up.ts";
 import wangyiBucket from "@/router/modules/main/bucket/createBuckets/wangyi.ts";
 import ShareAdd from "@/router/modules/main/share/modules/shareAdd.tsx";
 import MyShare from "@/router/modules/main/user/myShare";
+import MyFavorites from "@/router/modules/main/user/myFavorites";
 
 const routes: RouteObject[] = [
 	{
@@ -161,6 +162,11 @@ const routes: RouteObject[] = [
 				path: "/main/user/myshare",
 				Component: MyShare,
 			},
+			{
+				path: "/main/user/favorites",
+				Component: MyFavorites,
+			},
+
 			{
 				path: "/main/share",
 				Component: MainShare,
diff --git a/src/store/modules/file.ts b/src/store/modules/file.ts
index 889cd5b..e4d8b3c 100644
--- a/src/store/modules/file.ts
+++ b/src/store/modules/file.ts
@@ -1,69 +1,65 @@
-/** @format */
-
-import { action, makeObservable, observable } from "mobx";
-import { isHydrated, makePersistable } from "mobx-persist-store";
-import { handleLocalforage } from "@/utils/localforage";
-
-export class useFileStore {
-	filePath: [any] = [
-		{
-			title: "/ root",
-		},
-	];
-
-	constructor() {
-		makeObservable(this, {
-			filePath: observable,
-			setFilePath: action,
-			getFilePath: action,
-			clearFilePath: action,
-			getFilePathSecondLast: action,
-			isHydrated: action,
-		});
-		makePersistable(
-			this,
-			{
-				// 在构造函数内使用 makePersistable
-				name: "file", // 保存的name，用于在storage中的名称标识，只要不和storage中其他名称重复就可以
-				properties: ["filePath"], // 要保存的字段，这些字段会被保存在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)
-			}),
-		);
-	}
-	// 获取文件路径
-	getFilePath() {
-		return this.filePath ? this.filePath : [];
-	}
-	// 设置文件路径
-	setFilePath(path: any) {
-		this.filePath.push(path);
-	}
-	// 删除文件路径最后一个
-	clearFilePath() {
-		if (this.filePath.length === 1) {
-			return;
-		}
-		this.filePath.pop();
-	}
-	// 获取文件路径倒数第二个
-	getFilePathSecondLast() {
-		return this.filePath.slice(0, -1).pop();
-	}
-
-	isHydrated() {
-		return isHydrated(this);
-	}
-}
+/** @format */
+
+import { action, makeObservable, observable } from "mobx";
+import { isHydrated, makePersistable } from "mobx-persist-store";
+import { handleLocalforage } from "@/utils/localforage";
+
+export class useFileStore {
+	filePath: [any] = ["/root"];
+
+	constructor() {
+		makeObservable(this, {
+			filePath: observable,
+			setFilePath: action,
+			getFilePath: action,
+			clearFilePath: action,
+			getFilePathSecondLast: action,
+			isHydrated: action,
+		});
+		makePersistable(
+			this,
+			{
+				// 在构造函数内使用 makePersistable
+				name: "file", // 保存的name，用于在storage中的名称标识，只要不和storage中其他名称重复就可以
+				properties: ["filePath"], // 要保存的字段，这些字段会被保存在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)
+			}),
+		);
+	}
+	// 获取文件路径
+	getFilePath() {
+		return this.filePath ? this.filePath : [];
+	}
+	// 设置文件路径
+	setFilePath(path: any) {
+		this.filePath.push(path);
+	}
+	// 删除文件路径最后一个
+	clearFilePath() {
+		if (this.filePath.length === 1) {
+			return;
+		}
+		this.filePath.pop();
+	}
+	// 获取文件路径倒数第二个
+	getFilePathSecondLast() {
+		return this.filePath.slice(0, -1).pop();
+	}
+
+	isHydrated() {
+		return isHydrated(this);
+	}
+}
diff --git a/src/views/Main/index.tsx b/src/views/Main/index.tsx
index 4ded12b..0d7c582 100644
--- a/src/views/Main/index.tsx
+++ b/src/views/Main/index.tsx
@@ -6,12 +6,7 @@ import {
 	LogoutOutlined,
 	QuestionCircleFilled,
 } from "@ant-design/icons";
-import {
-	DefaultFooter,
-	PageContainer,
-	ProCard,
-	ProLayout,
-} from "@ant-design/pro-components";
+import { DefaultFooter, PageContainer, ProCard, ProLayout } from "@ant-design/pro-components";
 import { Link, Outlet, useLocation } from "react-router-dom";
 import logo from "@/assets/images/logo.png";
 import { Suspense } from "react";
@@ -28,8 +23,9 @@ export default function Layout() {
 				height: "100vh",
 			}}>
 			<ProLayout
-				logo={logo}
+				logo={logo as any}
 				layout={"mix"}
+				splitMenus={false}
 				pure={false}
 				loading={false}
 				contentWidth={"Fluid"}
@@ -56,29 +52,34 @@ export default function Layout() {
 				location={{
 					pathname: location.pathname,
 				}}
-				avatarProps={{
-					src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
-					title: "七妮妮",
-					size: "large",
-					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-					// @ts-expect-error
-					render: (props, dom) => {
-						return (
-							<Dropdown
-								menu={{
-									items: [
-										{
-											key: "logout",
-											icon: <LogoutOutlined />,
-											label: "退出登录",
-										},
-									],
-								}}>
-								{dom}
-							</Dropdown>
-						);
-					},
-				}}
+				avatarProps={
+					{
+						src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
+						title: "七妮妮",
+						size: "large",
+						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+						// @ts-expect-error
+						render: (props, dom) => {
+							return (
+								<Dropdown
+									menu={{
+										items: [
+											{
+												key: "logout",
+												icon: <LogoutOutlined />,
+												label: "退出登录",
+												onClick: () => {
+													console.log("推出");
+												},
+											},
+										],
+									}}>
+									{dom}
+								</Dropdown>
+							);
+						},
+					} as any
+				}
 				actionsRender={(props: any) => {
 					// eslint-disable-next-line react/prop-types
 					if (props.isMobile) return [];
@@ -99,15 +100,20 @@ export default function Layout() {
 					<DefaultFooter
 						links={[
 							{
-								key: "schisandra",
-								title: "schisandra",
+								key: "schisandra-1",
+								title: "五味子云存储",
+								href: "https://landaiqing.cn",
+							},
+							{
+								key: "schisandra-2",
+								title: "schisandra cloud storage",
 								href: "https://landaiqing.cn",
 							},
 						]}
-						copyright="2024"
+						copyright="2024 by schisandra"
 					/>
 				)}>
-				<PageContainer title={false}>
+				<PageContainer title={false} breadcrumb={false as any} ghost={true}>
 					<ProCard>
 						<div>
 							<Suspense>
diff --git a/src/views/Main/settings.tsx b/src/views/Main/settings.tsx
index fb227eb..c122968 100644
--- a/src/views/Main/settings.tsx
+++ b/src/views/Main/settings.tsx
@@ -73,6 +73,11 @@ export default {
 						name: "我的分享",
 						icon: "https://pic.imgdb.cn/item/668f8e5fd9c307b7e9f079bf.png",
 					},
+					{
+						path: "main/user/favorites",
+						name: "我的收藏",
+						icon: "https://pic.imgdb.cn/item/6690e7c0d9c307b7e9738f02.png",
+					},
 				],
 			},
 		],