feat: 文件管理界面框架
This commit is contained in:
landaiqing
@@ -1,7 +1,349 @@
|
||||
/** @format */
|
||||
import { FunctionComponent } from "react";
|
||||
import { FunctionComponent, useEffect, useState } from "react";
|
||||
import { CheckCard, ProCard } from "@ant-design/pro-components";
|
||||
import styles from "./index.module.less";
|
||||
import {
|
||||
Avatar,
|
||||
Breadcrumb,
|
||||
Button,
|
||||
Card,
|
||||
Divider,
|
||||
Dropdown,
|
||||
FloatButton,
|
||||
message,
|
||||
Select,
|
||||
} from "antd";
|
||||
import ali from "@/assets/icons/aliyun.svg";
|
||||
import bucket from "@/assets/icons/bucket.svg";
|
||||
import tencent from "@/assets/icons/tencent.svg";
|
||||
import {
|
||||
CommentOutlined,
|
||||
CustomerServiceOutlined,
|
||||
EllipsisOutlined,
|
||||
LeftOutlined,
|
||||
} 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 "@/context/file-icon.ts";
|
||||
import file_icon from "@/assets/icons/files/file.svg";
|
||||
const dataList: any = [
|
||||
{
|
||||
name: "demo0.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 = () => {
|
||||
return <div>文件管理</div>;
|
||||
const store = useStore("file");
|
||||
const [files, setFiles] = useState<any>([]);
|
||||
async function getFile() {
|
||||
setFiles(dataList);
|
||||
}
|
||||
function getFileExtension(filename: any): string {
|
||||
const dotIndex = filename.lastIndexOf(".");
|
||||
return dotIndex !== -1 ? filename.slice(dotIndex + 1) : "";
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getFile().then();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className={styles.file_main}>
|
||||
<div className={styles.file_content_left}>
|
||||
<ProCard bordered boxShadow style={{ height: "75vh" }}>
|
||||
<Select
|
||||
size="large"
|
||||
status="warning"
|
||||
style={{ width: "100%" }}
|
||||
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} 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} 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}
|
||||
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}
|
||||
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: "75vh" }}>
|
||||
<div className={styles.file_right_header}>
|
||||
<Button
|
||||
shape="circle"
|
||||
icon={<LeftOutlined />}
|
||||
onClick={() => {
|
||||
setFiles(dataList);
|
||||
store.clearFilePath();
|
||||
}}
|
||||
/>
|
||||
<Breadcrumb items={store.getFilePath()} style={{ marginLeft: 15 }} />
|
||||
</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 (
|
||||
<div
|
||||
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
|
||||
style={{
|
||||
fontSize: 12,
|
||||
marginTop: 5,
|
||||
}}>
|
||||
{file.name}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
className={styles.file_card}
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div key={index} style={{ marginLeft: 10 }}>
|
||||
<CheckCard
|
||||
key={index}
|
||||
size={"small"}
|
||||
value={file.name}
|
||||
avatar={
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<Avatar
|
||||
src={
|
||||
FileIcon[
|
||||
getFileExtension(file.name)
|
||||
] || file_icon
|
||||
}
|
||||
shape={"square"}
|
||||
size={"large"}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 12,
|
||||
marginTop: 5,
|
||||
}}>
|
||||
{file.name}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
className={styles.file_card}
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</CheckCard.Group>
|
||||
</div>
|
||||
</ProCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FloatButton.Group
|
||||
trigger="click"
|
||||
type="primary"
|
||||
style={{ right: "5%" }}
|
||||
icon={<CustomerServiceOutlined />}>
|
||||
<FloatButton />
|
||||
<FloatButton icon={<CommentOutlined />} />
|
||||
</FloatButton.Group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default File;
|
||||
export default observer(File);
|
||||
|
||||
Reference in New Issue
Block a user