From 8677b975db631de228d7247f8851a77bce4409bb Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Fri, 12 Jul 2024 11:33:41 +0800 Subject: [PATCH] feat: update --- .eslintrc.cjs | 106 +++--- .../Main/File/components/FileUpload.tsx | 40 +++ src/components/Main/File/index.tsx | 42 ++- src/components/Main/Home/index.tsx | 302 +++++++++++------- 4 files changed, 310 insertions(+), 180 deletions(-) create mode 100644 src/components/Main/File/components/FileUpload.tsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 0107045..9b86464 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,56 +1,50 @@ -module.exports = { - "env": { - "browser": true, - "es2021": true, - "node": true - }, - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:react/recommended", - "plugin:prettier/recommended" - ], - "overrides": [ - { - "env": { - "node": true - }, - "files": [ - ".eslintrc.{js,cjs}" - ], - "parserOptions": { - "sourceType": "script" - } - } - ], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaVersion": "latest", - "sourceType": "module" - }, - "plugins": [ - "@typescript-eslint", - "react", - "prettier" - ], - "rules": { - "react/jsx-use-react": 0, // React V17开始JSX已经不再需要引入React - "react/react-in-jsx-scope": 0, // 同上 - "import/first": 0, // 消除绝对路径必须要在相对路径前引入， - // 'no-mixed-spaces-and-tabs': 2, // 禁止空格和 tab 的混合缩进 - "no-debugger": 2, // 禁止有debugger - "space-infix-ops": 2, // 要求操作符周围有空格 - "space-before-blocks": 2, // 要求语句块之前有空格 - "@typescript-eslint/explicit-function-return-type": 0, // 禁止函数必须要定义返回类型 - "react/display-name": "off", - "@typescript-eslint/no-explicit-any": ["off"], - "@typescript-eslint/no-var-requires": ["off"], - "@typescript-eslint/no-use-before-define": ["off"], - "@typescript-eslint/no-empty-function": ["off"], - "@typescript-eslint/no-empty-interface": ["off"], - "@typescript-eslint/no-unused-vars": ["off"], - "@typescript-eslint/no-non-null-assertion": ["off"], - "no-control-regex": "off", - "no-eval": 0 - } -}; +module.exports = { + "env": { + "browser": true, + "es2021": true, + "node": true + }, + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react/recommended", + "plugin:prettier/recommended" + ], + "overrides": [ + { + "env": { + "node": true + }, + "files": [ + ".eslintrc.{js,cjs}" + ], + "parserOptions": { + "sourceType": "script" + } + } + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module" + }, + "plugins": [ + "@typescript-eslint", + "react", + "prettier" + ], + "rules": { + "react/jsx-use-react": 0, // React V17开始JSX已经不再需要引入React + "react/react-in-jsx-scope": 0, // 同上 + "import/first": 0, // 消除绝对路径必须要在相对路径前引入， + // 'no-mixed-spaces-and-tabs': 2, // 禁止空格和 tab 的混合缩进 + "no-debugger": 2, // 禁止有debugger + "space-infix-ops": 2, // 要求操作符周围有空格 + "space-before-blocks": 2, // 要求语句块之前有空格 + "@typescript-eslint/explicit-function-return-type": 0, // 禁止函数必须要定义返回类型 + "react/display-name": "off", + "@typescript-eslint/no-explicit-any": ["off"], + "no-control-regex": "off", + "no-eval": 0 + } +}; diff --git a/src/components/Main/File/components/FileUpload.tsx b/src/components/Main/File/components/FileUpload.tsx new file mode 100644 index 0000000..1c4839d --- /dev/null +++ b/src/components/Main/File/components/FileUpload.tsx @@ -0,0 +1,40 @@ +/** @format */ + +import React from "react"; +import { message, Upload } from "antd"; +import { InboxOutlined } from "@ant-design/icons"; + +const { Dragger } = Upload; +const props: any = { + name: "file", + multiple: true, + action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload", + onChange(info) { + const { status } = info.file; + if (status !== "uploading") { + console.log(info.file, info.fileList); + } + if (status === "done") { + message.success(`${info.file.name} file uploaded successfully.`); + } else if (status === "error") { + message.error(`${info.file.name} file upload failed.`); + } + }, + onDrop(e) { + console.log("Dropped files", e.dataTransfer.files); + }, +}; +const FileUpload: React.FC = () => { + return ( + <> + +

+ +

+

单击或拖动文件到此区域进行上传

+

支持单次或批量上传。

+ + + ); +}; +export default FileUpload; diff --git a/src/components/Main/File/index.tsx b/src/components/Main/File/index.tsx index 3731e59..6dbf236 100644 --- a/src/components/Main/File/index.tsx +++ b/src/components/Main/File/index.tsx @@ -11,23 +11,20 @@ import { Dropdown, FloatButton, 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 { - CommentOutlined, - CustomerServiceOutlined, - EllipsisOutlined, - LeftOutlined, -} from "@ant-design/icons"; +import { CloudUploadOutlined, 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 "@/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", @@ -86,6 +83,8 @@ const fileList: any = [ const File: FunctionComponent = () => { const store = useStore("file"); const [files, setFiles] = useState([]); + const [loading, setLoading] = useState(true); + const [open, setOpen] = useState(false); async function getFile() { setFiles(dataList); } @@ -96,6 +95,9 @@ const File: FunctionComponent = () => { useEffect(() => { getFile().then(); + setTimeout(() => { + setLoading(false); + }, 2000); }, []); return ( <> @@ -120,7 +122,7 @@ const File: FunctionComponent = () => { flexDirection: "row", }} size={"small"}> - + 阿里云OSS @@ -136,7 +138,7 @@ const File: FunctionComponent = () => { }} bordered={false} size={"small"}> - {" "} + {" "} 腾讯云COS @@ -152,7 +154,7 @@ const File: FunctionComponent = () => { { { alignItems: "center", }}> @@ -379,14 +381,22 @@ const File: FunctionComponent = () => { - }> - - } /> - + icon={} + onClick={() => setOpen(true)} + /> + 文件上传

} + loading={loading} + footer={false} + open={open} + width={"50%"} + onCancel={() => setOpen(false)}> + + ); }; diff --git a/src/components/Main/Home/index.tsx b/src/components/Main/Home/index.tsx index 51c6ec8..edfbca3 100644 --- a/src/components/Main/Home/index.tsx +++ b/src/components/Main/Home/index.tsx @@ -213,7 +213,7 @@ const MainHome: React.FC = () => { ], }; const data = [ - 264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546 + 264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546, ].map((value, index) => ({ value, index })); const config = { data, @@ -266,11 +266,24 @@ const MainHome: React.FC = () => { - {{2}}/个 + { + + {2} + + } + /个 - + @@ -303,12 +316,25 @@ const MainHome: React.FC = () => { - - {{2}}/个 + + { + + {2} + + } + /个 - + @@ -342,11 +368,24 @@ const MainHome: React.FC = () => { - {{2}}/个 + { + + {2} + + } + /个 - + @@ -380,11 +419,24 @@ const MainHome: React.FC = () => { - {{2}}/M + { + + {2} + + } + /M - + @@ -393,7 +445,12 @@ const MainHome: React.FC = () => {
- + @@ -407,111 +464,140 @@ const MainHome: React.FC = () => { marginTop: "30px", }} title={"文件上传热力图"}> - + + +
- - rowKey="id" - headerTitle="最近上传文件" - dataSource={dataSource} - showActions="hover" - editable={{ - onSave: async (key, record, originRow) => { - console.log(key, record, originRow); - return true; - }, - }} - onDataSourceChange={setDataSource} - metas={{ - title: { - dataIndex: "name", - }, - avatar: { - dataIndex: "image", - editable: false, - }, - description: { - dataIndex: "desc", - }, - subTitle: { - render: () => { - return ( - - Ant Design - TechUI - - ); + + + rowKey="id" + headerTitle="最近上传文件" + dataSource={dataSource} + showActions="hover" + editable={{ + onSave: async (key, record, originRow) => { + console.log(key, record, originRow); + return true; }, - }, - }} - /> + }} + onDataSourceChange={setDataSource} + metas={{ + title: { + dataIndex: "name", + }, + avatar: { + dataIndex: "image", + editable: false, + }, + description: { + dataIndex: "desc", + }, + subTitle: { + render: () => { + return ( + + Ant Design + TechUI + + ); + }, + }, + }} + /> + - - rowKey="id" - headerTitle="最近浏览文件" - dataSource={dataSource} - showActions="hover" - editable={{ - onSave: async (key, record, originRow) => { - console.log(key, record, originRow); - return true; - }, - }} - onDataSourceChange={setDataSource} - metas={{ - title: { - dataIndex: "name", - }, - avatar: { - dataIndex: "image", - editable: false, - }, - description: { - dataIndex: "desc", - }, - subTitle: { - render: () => { - return ( - - Ant Design - TechUI - - ); + + + rowKey="id" + headerTitle="最近浏览文件" + dataSource={dataSource} + showActions="hover" + editable={{ + onSave: async (key, record, originRow) => { + console.log(key, record, originRow); + return true; }, - }, - }} - /> + }} + onDataSourceChange={setDataSource} + metas={{ + title: { + dataIndex: "name", + }, + avatar: { + dataIndex: "image", + editable: false, + }, + description: { + dataIndex: "desc", + }, + subTitle: { + render: () => { + return ( + + Ant Design + TechUI + + ); + }, + }, + }} + /> +