feat: 文件管理界面update

src/components/Main/File/index.tsx

@@ -12,6 +12,7 @@ import {
 	FloatButton,
 	message,
 	Select,
+	Tooltip,
 } from "antd";
 import ali from "@/assets/icons/aliyun.svg";
 import bucket from "@/assets/icons/bucket.svg";
@@ -29,7 +30,7 @@ import FileIcon from "@/context/file-icon.ts";
 import file_icon from "@/assets/icons/files/file.svg";
 const dataList: any = [
 	{
-		name: "demo0.java",
+		name: "demo01.java",
 		isDir: false,
 		path: "demo0.java",
 		length: "346",
@@ -238,58 +239,92 @@ const File: FunctionComponent = () => {
 								{files.map((file: any, index: any) => {
 									if (file.isDir) {
 										return (
-											<div
+											<Dropdown
 												key={index}
-												style={{ marginLeft: 10 }}
-												onDoubleClick={() => {
-													store.setFilePath({
-														title: file.name,
-													});
-													setFiles(fileList);
-												}}>
-												<CheckCard
-													size={"small"}
-													value={file.name}
-													avatar={
-														<div
-															style={{
-																display: "flex",
-																flexDirection: "column",
-																justifyContent: "center",
-																alignItems: "center",
-															}}>
-															<Avatar
-																src={standard_dir}
-																shape={"square"}
-																size={"large"}
-															/>
-															<span
+												menu={{
+													items: [
+														{
+															label: "删除",
+															key: "1",
+														},
+														{
+															label: "编辑",
+															key: "2",
+														},
+													],
+												}}
+												trigger={["contextMenu"]}>
+												<div
+													style={{ marginLeft: 10 }}
+													onDoubleClick={() => {
+														store.setFilePath({
+															title: file.name,
+														});
+														setFiles(fileList);
+													}}>
+													<CheckCard
+														size={"small"}
+														value={file.name}
+														avatar={
+															<div
 																style={{
-																	fontSize: 12,
-																	marginTop: 5,
+																	display: "flex",
+																	flexDirection: "column",
+																	justifyContent: "center",
+																	alignItems: "center",
 																}}>
-																{file.name}
-															</span>
-														</div>
-													}
-													className={styles.file_card}
-													style={{
-														width: 100,
-														height: 100,
-														display: "flex",
-														alignItems: "center",
-														justifyContent: "center",
-													}}
-												/>
-											</div>
+																<Avatar
+																	src={standard_dir}
+																	shape={"square"}
+																	size={"large"}
+																/>
+																<Tooltip
+																	title={file.name}
+																	placement={"bottom"}
+																	color={"lime"}>
+																	<span
+																		className={
+																			styles.file_name
+																		}>
+																		{file.name}
+																	</span>
+																</Tooltip>
+															</div>
+														}
+														className={styles.file_card}
+														style={{
+															width: 100,
+															height: 100,
+															display: "flex",
+															alignItems: "center",
+															justifyContent: "center",
+														}}
+													/>
+												</div>
+											</Dropdown>
 										);
 									} else {
 										return (
-											<div key={index} style={{ marginLeft: 10 }}>
+											<Dropdown
+												key={index}
+												menu={{
+													items: [
+														{
+															label: "删除",
+															key: "1",
+														},
+														{
+															label: "编辑",
+															key: "2",
+														},
+													],
+												}}
+												trigger={["contextMenu"]}>
+											<div style={{ marginLeft: 10 }}>
 												<CheckCard
-													key={index}
 													size={"small"}
 													value={file.name}
+													bodyStyle={{ overflow: "hidden" }}
 													avatar={
 														<div
 															style={{
@@ -297,6 +332,7 @@ const File: FunctionComponent = () => {
 																flexDirection: "column",
 																justifyContent: "center",
 																alignItems: "center",
+																overflow: "hidden",
 															}}>
 															<Avatar
 																src={
@@ -307,13 +343,15 @@ const File: FunctionComponent = () => {
 																shape={"square"}
 																size={"large"}
 															/>
-															<span
-																style={{
-																	fontSize: 12,
-																	marginTop: 5,
-																}}>
-																{file.name}
-															</span>
+															<Tooltip
+																title={file.name}
+																color={"lime"}
+																autoAdjustOverflow={true}
+																placement={"bottom"}>
+																<span className={styles.file_name}>
+																	{file.name}
+																</span>
+															</Tooltip>
 														</div>
 													}
 													className={styles.file_card}
@@ -326,6 +364,7 @@ const File: FunctionComponent = () => {
 													}}
 												/>
 											</div>
+											</Dropdown>
 										);
 									}
 								})}