feat: 界面调整

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