From cd972e807767531fa3ba2e4ebc6fd5268257bfd1 Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Fri, 5 Jul 2024 14:03:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E7=95=8C=E9=9D=A2update?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/files/gz.svg | 1 + src/assets/icons/files/java.svg | 1 + src/assets/icons/files/rar.svg | 1 + src/components/Main/File/index.module.less | 32 ++++- src/components/Main/File/index.tsx | 141 +++++++++++++-------- src/context/file-icon.ts | 63 +++++++++ 6 files changed, 182 insertions(+), 57 deletions(-) create mode 100644 src/assets/icons/files/gz.svg create mode 100644 src/assets/icons/files/java.svg create mode 100644 src/assets/icons/files/rar.svg 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;