feat: 界面调整

.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
 	}

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)
+      '@ant-design/cssinjs': 1.21.0(react-dom@18.3.1)(react@18.3.1)
-      '@babel/runtime': 7.24.6
+      '@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:

src/assets/styles/index.less

@@ -31,3 +31,10 @@ 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;
+ }

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

@@ -14,8 +14,8 @@
 
 }
 .div_checkCardArea{
-	height: 65vh;
+	height: 68vh;
-	max-height: 65vh;
+	max-height: 68vh;
 	overflow-y:scroll;
 	overflow-x: hidden;
 }

src/components/Main/File/components/FileUpload.tsx

@@ -1,13 +1,17 @@
 /** @format */
 
 import React from "react";
-import { message, Upload } from "antd";
+import { Avatar, Card, Flex, Input, message, Select, Upload } from "antd";
-import { InboxOutlined } from "@ant-design/icons";
+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}>
+			<Flex vertical={false} align={"center"}>
-				<p className="ant-upload-drag-icon">
+				<ProCard bordered={false} boxShadow={false}>
-					<InboxOutlined />
+					<Flex vertical={false}>
-				</p>
+						<Select
-				<p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
+							size="large"
-				<p className="ant-upload-hint">支持单次或批量上传。</p>
+							status="warning"
-			</Dragger>
+							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>
 		</>
 	);
 };

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

@@ -17,7 +17,7 @@
 			display: flex;
 			flex-wrap: wrap;
 			flex-direction: row;
-			margin-top: 20px;
+			margin-top: 10px;
 
 			.file_card:hover {
 				background-color: rgba(16, 15, 15, 0.08);
@@ -29,8 +29,7 @@
 
 		.file_right_header {
 			display: flex;
-			flex-direction: row;
+			flex-direction: column;
-			align-items: center;
 		}
 	}
 }

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
+							<Flex vertical={false} align={"center"} justify={"flex-start"}>
-								shape="circle"
+								<Flex vertical={false} align={"center"}>
-								icon={<LeftOutlined />}
+									<Button
-								onClick={() => {
+										shape="circle"
-									setFiles(dataList);
+										icon={<LeftOutlined />}
-									store.clearFilePath();
+										onClick={() => {
-								}}
+											setFiles(dataList);
-							/>
+											store.clearFilePath();
-							<Breadcrumb items={store.getFilePath()} style={{ marginLeft: 15 }} />
+										}}
+									/>
+									<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({
+														store.setFilePath(file.name);
-															title: file.name,
-														});
 														setFiles(fileList);
 													}}>
 													<CheckCard

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

@@ -86,7 +86,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: any, record: any, _, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -176,47 +176,51 @@ const AliSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<AliOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="阿里云OSS配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="阿里云OSS配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddAliOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddAliOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type AwsOssConfigItem = {
 	id: number;
 	userId: number;
 	bucketName: string;
@@ -17,7 +17,7 @@ type AliOssConfigItem = {
 	updatedTime: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: AwsOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -32,7 +32,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<AwsOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -103,9 +103,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		title: "操作",
 		valueType: "option",
 		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		render: (text: ReactNode, record: AwsOssConfigItem, _, action: any) => [
-		// @ts-expect-error
-		render: (text, record, _, action) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -213,47 +211,51 @@ const AwsSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<AwsOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="亚马逊S3配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="亚马逊S3配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddAwsOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddAwsOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type BaiduOssConfigItem = {
 	id: number;
 	userId: number;
 	endpoint: string;
@@ -15,7 +15,7 @@ type AliOssConfigItem = {
 	updated_time: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: BaiduOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -28,7 +28,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<BaiduOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -85,9 +85,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		title: "操作",
 		valueType: "option",
 		key: "option",
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		render: (text: ReactNode, record: BaiduOssConfigItem, _, action: any) => [
-		// @ts-expect-error
-		render: (text, record, _, action) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -242,47 +240,51 @@ const BaiduSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<BaiduOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="百度云BOS配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="百度云BOS配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddBaiduOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddBaiduOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type HuaweiOssConfigItem = {
 	id: number;
 	userId: number;
 	bucketName: string;
@@ -16,7 +16,7 @@ type AliOssConfigItem = {
 	updatedTime: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: HuaweiOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -30,7 +30,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<HuaweiOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -96,7 +96,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: ReactNode, record: HuaweiOssConfigItem, _: number, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -194,47 +194,51 @@ const HuawaiSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<HuaweiOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="华为云OBS配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="华为云OBS配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddHuaweiOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddHuaweiOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type JdOssConfigItem = {
 	id: number;
 	userId: number;
 	bucketName: number;
@@ -17,7 +17,7 @@ type AliOssConfigItem = {
 	updatedTime: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: JdOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -32,7 +32,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<JdOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -98,7 +98,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: ReactNode, record: JdOssConfigItem, _: number, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -196,47 +196,51 @@ const JdSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<JdOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="京东云OSS配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="京东云OSS配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddJdOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddJdOssConfigDrawer />
+			</div>
 		</>
 	);
 };

src/components/Main/Settings/components/JinshanSettings.tsx

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type JinshanOssConfigItem = {
 	id: number;
 	userId: number;
 	endpoint: string;
@@ -18,7 +18,7 @@ type AliOssConfigItem = {
 	updatedTime: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: JinshanOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -34,7 +34,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<JinshanOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -114,7 +114,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: ReactNode, record: JinshanOssConfigItem, _: number, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -230,47 +230,51 @@ const JinshanSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<JinshanOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="金山OBS配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="金山OBS配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddJinshanOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddJinshanOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type MinioOssConfigItem = {
 	id: number;
 	userId: number;
 	endpoint: string;
@@ -15,7 +15,7 @@ type AliOssConfigItem = {
 	updatedTime: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: MinioOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -28,7 +28,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<MinioOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -87,7 +87,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: ReactNode, record: MinioOssConfigItem, _: number, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -177,47 +177,51 @@ const MinioSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<MinioOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="MinIO配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="MinIO配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddMinioOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddMinioOssConfigDrawer />
+			</div>
 		</>
 	);
 };

src/components/Main/Settings/components/PinanSettings.tsx

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type PinanOssConfigItem = {
 	id: number;
 	userId: number;
 	endpoint: string;
@@ -15,7 +15,7 @@ type AliOssConfigItem = {
 	updated_time: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: PinanOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -28,7 +28,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<PinanOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -87,7 +87,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: ReactNode, record: PinanOssConfigItem, _: number, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -177,47 +177,51 @@ const PinanSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<PinanOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="平安云OSS配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="平安云OSS配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddPinanOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddPinanOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type QingyunOssConfigItem = {
 	id: number;
 	userId: number;
 	zone: string;
@@ -17,7 +17,7 @@ type AliOssConfigItem = {
 	updatedTime: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: QingyunOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -32,7 +32,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<QingyunOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -98,7 +98,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: ReactNode, record: QingyunOssConfigItem, _: number, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -206,47 +206,51 @@ const QingyunSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<QingyunOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="青云OSS配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="青云OSS配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddQingyunOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddQingyunOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type QiniuOssConfigItem = {
 	id: number;
 	userId: number;
 	bucketName: string;
@@ -15,7 +15,7 @@ type AliOssConfigItem = {
 	updatedTime: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: QiniuOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -28,7 +28,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<QiniuOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -87,7 +87,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: ReactNode, record: QiniuOssConfigItem, _: number, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -177,47 +177,51 @@ const QiniuSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<QiniuOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="七牛Kodo配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="七牛Kodo配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddQiniuOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddQiniuOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type TencentOssConfigItem = {
 	id: number;
 	userId: number;
 	bucketName: string;
@@ -15,7 +15,7 @@ type AliOssConfigItem = {
 	updatedTime: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: TencentOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -28,7 +28,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<TencentOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -87,7 +87,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: ReactNode, record: TencentOssConfigItem, _: number, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -167,47 +167,51 @@ const TencentSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<TencentOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="腾讯云COS配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="腾讯云COS配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddTencentOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddTencentOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type UcloudOssConfigItem = {
 	id: number;
 	userId: number;
 	bucketName: string;
@@ -16,7 +16,7 @@ type AliOssConfigItem = {
 	updatedTime: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: UcloudOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -30,7 +30,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<UcloudOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -96,7 +96,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: ReactNode, record: UcloudOssConfigItem, _: number, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -194,47 +194,51 @@ const UcloudSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<UcloudOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="UCloud US3配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="UCloud US3配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddUcloudOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddUcloudOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type UpOssConfigItem = {
 	id: number;
 	userId: number;
 	bucketName: string;
@@ -15,7 +15,7 @@ type AliOssConfigItem = {
 	updatedTime: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: UpOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -28,7 +28,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<UpOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -87,7 +87,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: ReactNode, record: UpOssConfigItem, _: number, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -177,47 +177,51 @@ const UpSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<UpOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="又拍云USS配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="又拍云USS配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddUpOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddUpOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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

@@ -3,9 +3,9 @@ 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";
+import React, { ReactNode, useRef, useState } from "react";
 
-type AliOssConfigItem = {
+type WangyiOssConfigItem = {
 	id: number;
 	userId: number;
 	endpoint: string;
@@ -16,7 +16,7 @@ type AliOssConfigItem = {
 	updatedTime: string;
 	status: string;
 };
-const data: AliOssConfigItem[] = [
+const data: WangyiOssConfigItem[] = [
 	{
 		id: 1,
 		userId: 1,
@@ -30,7 +30,7 @@ const data: AliOssConfigItem[] = [
 	},
 ];
 
-const columns: ProColumns<AliOssConfigItem>[] = [
+const columns: ProColumns<WangyiOssConfigItem>[] = [
 	{
 		dataIndex: "index",
 		valueType: "indexBorder",
@@ -96,7 +96,7 @@ const columns: ProColumns<AliOssConfigItem>[] = [
 		key: "option",
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-expect-error
-		render: (text, record, _, action) => [
+		render: (text: ReactNode, record: WangyiOssConfigItem, _: number, action: any) => [
 			<a
 				key="editable"
 				onClick={() => {
@@ -194,47 +194,51 @@ const WangyiSettings: React.FC = () => {
 	};
 	return (
 		<>
-			<ProTable<AliOssConfigItem>
+			<div style={{ height: "65vh" }}>
-				columns={columns}
+				<ProTable<WangyiOssConfigItem>
-				dataSource={data}
+					columns={columns}
-				actionRef={actionRef}
+					dataSource={data}
-				cardBordered={true}
+					actionRef={actionRef}
-				editable={{
+					cardBordered={true}
-					type: "multiple",
+					editable={{
-				}}
+						type: "multiple",
-				columnsState={{
+					}}
-					persistenceKey: "pro-table-singe-demos",
+					columnsState={{
-					persistenceType: "localStorage",
+						persistenceKey: "pro-table-singe-demos",
-					defaultValue: {
+						persistenceType: "localStorage",
-						option: { fixed: "right", disable: true },
+						defaultValue: {
-					},
+							option: { fixed: "right", disable: true },
-				}}
+						},
-				rowKey="id"
+					}}
-				search={false}
+					rowKey="id"
-				options={{
+					search={false}
-					setting: {
+					options={{
-						listsHeight: 400,
+						setting: {
-					},
+							listsHeight: 400,
-				}}
+						},
-				pagination={{
+					}}
-					pageSize: 5,
+					pagination={
-				}}
+						{
-				dateFormatter="string"
+							pageSize: 5,
-				headerTitle="阿里云OSS配置"
+						} as any
-				bordered={false}
+					}
-				toolBarRender={() => [
+					dateFormatter="string"
-					<Button
+					headerTitle="阿里云OSS配置"
-						key="button"
+					bordered={false}
-						icon={<PlusOutlined />}
+					toolBarRender={() => [
-						onClick={() => {
+						<Button
-							showDrawer();
+							key="button"
-						}}
+							icon={<PlusOutlined />}
-						type="primary">
+							onClick={() => {
-						新建
+								showDrawer();
-					</Button>,
+							}}
-				]}
+							type="primary">
-			/>
+							新建
-			<AddWangyiOssConfigDrawer />
+						</Button>,
+					]}
+				/>
+				<AddWangyiOssConfigDrawer />
+			</div>
 		</>
 	);
 };

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" }} />
 					</>
 				) : (
 					<>

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
+					<Flex vertical={false} align={"center"}>
-						shape="circle"
+						<Button
-						icon={<LeftOutlined />}
+							shape="circle"
-						onClick={() => {
+							icon={<LeftOutlined />}
-							navigate("/main/share/list/1");
+							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>

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
+					<Flex vertical={false} align={"center"} justify={"space-between"}>
-						shape="circle"
+						<Button
-						icon={<LeftOutlined />}
+							shape="circle"
-						onClick={() => {
+							icon={<LeftOutlined />}
-							navigate("/main/share/list/1");
+							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 style={{ height: 500 }}>资源描述</div>
-							资源描述
-						</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>
 		</>
 	);

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;

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" }}>
+														style={{ width: "25%" }}>
-														<Avatar src={logo} size={"small"} />
+														<Flex vertical={false} align={"center"}>
-														<span
+															<Avatar
-															style={{
+																src={logo as any}
-																fontSize: 12,
+																size={"small"}
-																color: "gray",
+															/>
-															}}>
+															<span
-															landaiqing
+																style={{
-														</span>
+																	fontSize: 12,
-														<HeartOutlined />
+																	color: "gray",
-														<span
+																	overflow: "hidden",
-															style={{ fontSize: 12, color: "gray" }}>
+																}}>
-															1024
+																landaiqing
-														</span>
+															</span>
-														<CommentOutlined />
+														</Flex>
-														<span
+														<Flex vertical={false} align={"center"}>
-															style={{ fontSize: 12, color: "gray" }}>
+															<HeartOutlined />
-															1024
+															<span
-														</span>
+																style={{
-														<EyeOutlined style={{ color: "gray" }} />{" "}
+																	fontSize: 12,
-														<span
+																	color: "gray",
-															style={{ fontSize: 12, color: "gray" }}>
+																}}>
-															1024
+																1024
-														</span>
+															</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>
 											</>

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;

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

@@ -1,10 +1,11 @@
 .share_main{
+	min-height: 83vh;
 	display: flex;
 	flex-direction: column;
 	.share_header{
 		display: flex;
 		flex-direction: row;
-		justify-content: space-between;
+		justify-content: center;
 		align-items: center;
 	}
 }

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 }} />
+						<Input
-						<Button onClick={showDrawer}>创建圈子</Button>
+							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}
+									src={pic as any}
-									style={{ height: 200 }}
+									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"} />{" "}
+								<Flex vertical={false} align={"center"}>
-								<span style={{ fontSize: 12, color: "gray" }}>landaiqing</span>
+									<Avatar src={pic as any} size={"small"} />{" "}
-								<Flex
+									<span style={{ fontSize: 12, color: "gray", marginLeft: 5 }}>
-									vertical={false}
+										landaiqing
-									align={"center"}
+									</span>
-									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>
-							</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" }} />{" "}
+									<Flex vertical={false} align={"center"}>
-									<span style={{ fontSize: 12, color: "gray" }}>1024</span>
+										<EyeOutlined style={{ color: "gray" }} />{" "}
-									<UnorderedListOutlined style={{ color: "gray" }} />{" "}
+										<span
-									<span style={{ fontSize: 12, color: "gray" }}>999</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)}
+			/>
 		</>
 	);
 };

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

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;

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;

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;

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,

src/store/modules/file.ts

@@ -5,11 +5,7 @@ import { isHydrated, makePersistable } from "mobx-persist-store";
 import { handleLocalforage } from "@/utils/localforage";
 
 export class useFileStore {
-	filePath: [any] = [
+	filePath: [any] = ["/root"];
-		{
-			title: "/ root",
-		},
-	];
 
 	constructor() {
 		makeObservable(this, {

src/views/Main/index.tsx

@@ -6,12 +6,7 @@ import {
 	LogoutOutlined,
 	QuestionCircleFilled,
 } from "@ant-design/icons";
-import {
+import { DefaultFooter, PageContainer, ProCard, ProLayout } from "@ant-design/pro-components";
-	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={{
+				avatarProps={
-					src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
+					{
-					title: "七妮妮",
+						src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
-					size: "large",
+						title: "七妮妮",
-					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+						size: "large",
-					// @ts-expect-error
+						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-					render: (props, dom) => {
+						// @ts-expect-error
-						return (
+						render: (props, dom) => {
-							<Dropdown
+							return (
-								menu={{
+								<Dropdown
-									items: [
+									menu={{
-										{
+										items: [
-											key: "logout",
+											{
-											icon: <LogoutOutlined />,
+												key: "logout",
-											label: "退出登录",
+												icon: <LogoutOutlined />,
-										},
+												label: "退出登录",
-									],
+												onClick: () => {
-								}}>
+													console.log("推出");
-								{dom}
+												},
-							</Dropdown>
+											},
-						);
+										],
-					},
+									}}>
-				}}
+									{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",
+								key: "schisandra-1",
-								title: "schisandra",
+								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>

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",
+					},
 				],
 			},
 		],