diff --git a/src/assets/icons/files/gz.svg b/src/assets/icons/files/gz.svg
new file mode 100644
index 0000000..f0055b0
--- /dev/null
+++ b/src/assets/icons/files/gz.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/files/java.svg b/src/assets/icons/files/java.svg
new file mode 100644
index 0000000..883af8f
--- /dev/null
+++ b/src/assets/icons/files/java.svg
@@ -0,0 +1 @@
+
diff --git a/src/assets/icons/files/rar.svg b/src/assets/icons/files/rar.svg
new file mode 100644
index 0000000..a054dbe
--- /dev/null
+++ b/src/assets/icons/files/rar.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/Main/File/index.module.less b/src/components/Main/File/index.module.less
index 8e05594..a8edd9f 100644
--- a/src/components/Main/File/index.module.less
+++ b/src/components/Main/File/index.module.less
@@ -1,28 +1,48 @@
-.file_main{
+.file_main {
display: flex;
flex-direction: row;
justify-content: space-between;
- .file_content_left{
+
+ .file_content_left {
width: 25%;
display: flex;
flex-direction: column;
}
- .file_content_right{
+
+ .file_content_right {
width: 73%;
height: 75vh;
- .file_right_content{
+
+ .file_right_content {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-top: 20px;
- .file_card:hover{
+
+ .file_card:hover {
background-color: rgba(16, 15, 15, 0.08);
}
+
+
+
}
- .file_right_header{
+
+ .file_right_header {
display: flex;
flex-direction: row;
align-items: center;
}
}
}
+
+.file_name {
+ width: 65px;
+ text-align: center;
+ font-size: 12px;
+ margin-top: 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: inline-block;
+ -o-text-overflow: ellipsis;
+}
diff --git a/src/components/Main/File/index.tsx b/src/components/Main/File/index.tsx
index 763dd1a..ab25d08 100644
--- a/src/components/Main/File/index.tsx
+++ b/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 (
-
{
- store.setFilePath({
- title: file.name,
- });
- setFiles(fileList);
- }}>
-
-
-
+ {
+ store.setFilePath({
+ title: file.name,
+ });
+ setFiles(fileList);
+ }}>
+
- {file.name}
-
-
- }
- className={styles.file_card}
- style={{
- width: 100,
- height: 100,
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- }}
- />
-
+
+
+
+ {file.name}
+
+
+
+ }
+ className={styles.file_card}
+ style={{
+ width: 100,
+ height: 100,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ />
+
+
);
} else {
return (
-
+
+
{
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
+ overflow: "hidden",
}}>
{
shape={"square"}
size={"large"}
/>
-
- {file.name}
-
+
+
+ {file.name}
+
+
}
className={styles.file_card}
@@ -326,6 +364,7 @@ const File: FunctionComponent = () => {
}}
/>
+
);
}
})}
diff --git a/src/context/file-icon.ts b/src/context/file-icon.ts
index d888a21..92cbb21 100644
--- a/src/context/file-icon.ts
+++ b/src/context/file-icon.ts
@@ -3,9 +3,72 @@
import jpg from "@/assets/icons/files/jpg.svg";
import png from "@/assets/icons/files/png.svg";
import pdf from "@/assets/icons/files/pdf.svg";
+import java from "@/assets/icons/files/java.svg";
+import ai from "@/assets/icons/files/ai.svg";
+import avi from "@/assets/icons/files/avi.svg";
+import css from "@/assets/icons/files/css.svg";
+import csv from "@/assets/icons/files/csv.svg";
+import dbf from "@/assets/icons/files/dbf.svg";
+import doc from "@/assets/icons/files/doc.svg";
+import dwg from "@/assets/icons/files/dwg.svg";
+import exe from "@/assets/icons/files/exe.svg";
+import fla from "@/assets/icons/files/fla.svg";
+import flash from "@/assets/icons/files/flash.svg";
+import gif from "@/assets/icons/files/gif.svg";
+import html from "@/assets/icons/files/html.svg";
+import iso from "@/assets/icons/files/iso.svg";
+import javascript from "@/assets/icons/files/javascript.svg";
+import json from "@/assets/icons/files/json-file.svg";
+import mp3 from "@/assets/icons/files/mp3.svg";
+import mp4 from "@/assets/icons/files/mp4.svg";
+import ppt from "@/assets/icons/files/ppt.svg";
+import psd from "@/assets/icons/files/psd.svg";
+import rtf from "@/assets/icons/files/rtf.svg";
+import search from "@/assets/icons/files/search.svg";
+import svg from "@/assets/icons/files/svg.svg";
+import trash from "@/assets/icons/files/trash.svg";
+import trashbox from "@/assets/icons/files/trashbox.svg";
+import txt from "@/assets/icons/files/txt.svg";
+import xls from "@/assets/icons/files/xls.svg";
+import xml from "@/assets/icons/files/xml.svg";
+import zip from "@/assets/icons/files/zip.svg";
+import rar from "@/assets/icons/files/rar.svg";
+import gz from "@/assets/icons/files/gz.svg";
const FileIcon: any = {
jpg: jpg,
png: png,
pdf: pdf,
+ java: java,
+ ai: ai,
+ avi: avi,
+ css: css,
+ csv: csv,
+ dbf: dbf,
+ doc: doc,
+ docx: doc,
+ dwg: dwg,
+ exe: exe,
+ fla: fla,
+ flash: flash,
+ gif: gif,
+ html: html,
+ iso: iso,
+ javascript: javascript,
+ json: json,
+ mp3: mp3,
+ mp4: mp4,
+ ppt: ppt,
+ psd: psd,
+ rtf: rtf,
+ search: search,
+ svg: svg,
+ trash: trash,
+ trashbox: trashbox,
+ txt: txt,
+ xls: xls,
+ xml: xml,
+ zip: zip,
+ rar: rar,
+ gz: gz,
};
export default FileIcon;