490 lines
13 KiB
TypeScript
490 lines
13 KiB
TypeScript
/** @format */
|
|
import { FunctionComponent, useEffect, useState } from "react";
|
|
import { CheckCard, ProCard } from "@ant-design/pro-components";
|
|
import styles from "./index.module.less";
|
|
import {
|
|
Avatar,
|
|
Button,
|
|
Card,
|
|
Divider,
|
|
Dropdown,
|
|
Flex,
|
|
FloatButton,
|
|
Input,
|
|
message,
|
|
Modal,
|
|
Select,
|
|
Tooltip,
|
|
} from "antd";
|
|
import ali from "@/assets/icons/aliyun.svg";
|
|
import bucket from "@/assets/icons/bucket.svg";
|
|
import tencent from "@/assets/icons/tencent.svg";
|
|
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";
|
|
import FileIcon from "@/constant/file-icon.ts";
|
|
import file_icon from "@/assets/icons/files/file.svg";
|
|
import FileUpload from "@/components/Main/File/components/FileUpload.tsx";
|
|
const dataList: any = [
|
|
{
|
|
name: "demo01.java",
|
|
isDir: false,
|
|
path: "demo0.java",
|
|
length: "346",
|
|
createTime: "2024-06-26T08:22:13.244Z",
|
|
},
|
|
{
|
|
name: "测试.pdf",
|
|
isDir: false,
|
|
path: "测试.pdf",
|
|
length: "346",
|
|
createTime: "2024-06-26T08:22:13.244Z",
|
|
},
|
|
{
|
|
name: "test.jpg",
|
|
isDir: false,
|
|
path: "test.jpg",
|
|
length: "2057535",
|
|
createTime: "2024-06-27T02:27:05.472Z",
|
|
},
|
|
{
|
|
name: "test1.png",
|
|
isDir: false,
|
|
path: "test1.png",
|
|
length: "1766511",
|
|
createTime: "2024-06-29T10:28:03.224Z",
|
|
},
|
|
{
|
|
name: "schisandra",
|
|
isDir: true,
|
|
path: "schisandra/",
|
|
},
|
|
{
|
|
name: "测试文件夹",
|
|
isDir: true,
|
|
path: "测试文件夹/",
|
|
},
|
|
];
|
|
const fileList: any = [
|
|
{
|
|
name: "test1.png",
|
|
isDir: false,
|
|
path: "test1.png",
|
|
length: "1766511",
|
|
createTime: "2024-06-29T10:28:03.224Z",
|
|
},
|
|
{
|
|
name: "schisandra",
|
|
isDir: true,
|
|
path: "schisandra/",
|
|
},
|
|
];
|
|
|
|
const File: FunctionComponent = () => {
|
|
const store = useStore("file");
|
|
const [files, setFiles] = useState<any>([]);
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
const [open, setOpen] = useState<boolean>(false);
|
|
async function getFile() {
|
|
setFiles(dataList);
|
|
}
|
|
function getFileExtension(filename: any): string {
|
|
const dotIndex = filename.lastIndexOf(".");
|
|
return dotIndex !== -1 ? filename.slice(dotIndex + 1) : "";
|
|
}
|
|
|
|
useEffect(() => {
|
|
getFile().then();
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 2000);
|
|
}, []);
|
|
return (
|
|
<>
|
|
<div className={styles.file_main}>
|
|
<div className={styles.file_content_left}>
|
|
<ProCard bordered boxShadow style={{ height: "83vh" }}>
|
|
<Select
|
|
size="large"
|
|
status="warning"
|
|
style={{
|
|
width: "100%",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
}}
|
|
showSearch={true}
|
|
allowClear={true}
|
|
notFoundContent={"未找到，请先配置存储商"}
|
|
placeholder={"请选择存储商"}>
|
|
<Select.Option value="ali">
|
|
<Card
|
|
bordered={false}
|
|
style={{
|
|
height: 35,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
}}
|
|
size={"small"}>
|
|
<Avatar src={ali as any} size={"small"} />
|
|
<span style={{ marginLeft: "10px", fontWeight: "bolder" }}>
|
|
阿里云OSS
|
|
</span>
|
|
</Card>
|
|
</Select.Option>
|
|
<Select.Option value="腾讯">
|
|
<Card
|
|
style={{
|
|
height: 35,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
}}
|
|
bordered={false}
|
|
size={"small"}>
|
|
<Avatar src={tencent as any} size={"small"} />{" "}
|
|
<span style={{ marginLeft: "10px", fontWeight: "bolder" }}>
|
|
腾讯云COS
|
|
</span>
|
|
</Card>
|
|
</Select.Option>
|
|
</Select>
|
|
<Divider></Divider>
|
|
<div>
|
|
<CheckCard.Group
|
|
defaultValue="A"
|
|
size={"small"}
|
|
style={{ width: "100%" }}>
|
|
<CheckCard
|
|
style={{ width: "100%" }}
|
|
title="schisandra"
|
|
avatar={bucket as any}
|
|
description="100Mb"
|
|
value="schisandra"
|
|
extra={
|
|
<Dropdown
|
|
placement="top"
|
|
menu={{
|
|
onClick: ({ domEvent }) => {
|
|
domEvent.stopPropagation();
|
|
message.info("menu click");
|
|
},
|
|
items: [
|
|
{
|
|
label: "删除",
|
|
key: "1",
|
|
},
|
|
{
|
|
label: "编辑",
|
|
key: "2",
|
|
},
|
|
],
|
|
}}>
|
|
<EllipsisOutlined
|
|
style={{ fontSize: 22, color: "rgba(0,0,0,0.5)" }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
</Dropdown>
|
|
}
|
|
/>
|
|
<CheckCard
|
|
style={{ width: "100%" }}
|
|
title="schisandra2"
|
|
avatar={bucket as any}
|
|
description="100Mb"
|
|
value="schisandra2"
|
|
extra={
|
|
<Dropdown
|
|
placement="top"
|
|
menu={{
|
|
onClick: ({ domEvent }) => {
|
|
domEvent.stopPropagation();
|
|
message.info("menu click");
|
|
},
|
|
items: [
|
|
{
|
|
label: "删除",
|
|
key: "1",
|
|
},
|
|
{
|
|
label: "编辑",
|
|
key: "2",
|
|
},
|
|
],
|
|
}}>
|
|
<EllipsisOutlined
|
|
style={{ fontSize: 22, color: "rgba(0,0,0,0.5)" }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
/>
|
|
</Dropdown>
|
|
}
|
|
/>
|
|
</CheckCard.Group>
|
|
</div>
|
|
</ProCard>
|
|
</div>
|
|
<div className={styles.file_content_right}>
|
|
<ProCard bordered boxShadow style={{ height: "83vh" }}>
|
|
<div className={styles.file_right_header}>
|
|
<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}>
|
|
<CheckCard.Group
|
|
multiple={true}
|
|
bordered={false}
|
|
className={styles.file_right_content}>
|
|
{files.map((file: any, index: any) => {
|
|
if (file.isDir) {
|
|
return (
|
|
<Dropdown
|
|
key={index}
|
|
menu={{
|
|
items: [
|
|
{
|
|
label: "删除",
|
|
key: "1",
|
|
},
|
|
{
|
|
label: "编辑",
|
|
key: "2",
|
|
},
|
|
],
|
|
}}
|
|
trigger={["contextMenu"]}>
|
|
<div
|
|
style={{ marginLeft: 10 }}
|
|
onDoubleClick={() => {
|
|
store.setFilePath(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 as any}
|
|
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 (
|
|
<Dropdown
|
|
key={index}
|
|
menu={{
|
|
items: [
|
|
{
|
|
label: "删除",
|
|
key: "1",
|
|
},
|
|
{
|
|
label: "编辑",
|
|
key: "2",
|
|
},
|
|
],
|
|
}}
|
|
trigger={["contextMenu"]}>
|
|
<div style={{ marginLeft: 10 }}>
|
|
<CheckCard
|
|
size={"small"}
|
|
value={file.name}
|
|
bodyStyle={{ overflow: "hidden" }}
|
|
avatar={
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
overflow: "hidden",
|
|
}}>
|
|
<Avatar
|
|
src={
|
|
FileIcon[
|
|
getFileExtension(
|
|
file.name,
|
|
)
|
|
] || file_icon
|
|
}
|
|
shape={"square"}
|
|
size={"large"}
|
|
/>
|
|
<Tooltip
|
|
title={file.name}
|
|
color={"lime"}
|
|
autoAdjustOverflow={true}
|
|
placement={"bottom"}>
|
|
<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>
|
|
);
|
|
}
|
|
})}
|
|
</CheckCard.Group>
|
|
</div>
|
|
</ProCard>
|
|
</div>
|
|
</div>
|
|
|
|
<FloatButton
|
|
type="primary"
|
|
style={{ right: "5%" }}
|
|
icon={<CloudUploadOutlined />}
|
|
onClick={() => setOpen(true)}
|
|
/>
|
|
<Modal
|
|
title={<p>文件上传</p>}
|
|
loading={loading}
|
|
footer={false}
|
|
open={open}
|
|
width={"50%"}
|
|
onCancel={() => setOpen(false)}>
|
|
<FileUpload></FileUpload>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
export default observer(File);
|