From 59cd675028a20cbc5b02da5eecfc9ba23e1e2688 Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Fri, 12 Jul 2024 10:48:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E4=BB=AA=E8=A1=A8?= =?UTF-8?q?=E7=9B=98=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 6 +- package.json | 1 + src/components/Main/Bucket/index.tsx | 2 +- src/components/Main/File/index.tsx | 2 +- src/components/Main/Home/index.module.less | 65 +- src/components/Main/Home/index.tsx | 924 ++++++++++-------- src/components/Main/Settings/index.tsx | 2 +- .../Main/User/UserSetting/index.tsx | 2 +- src/{context => constant}/file-icon.ts | 148 +-- .../five-level-address.ts | 0 src/{context => constant}/stroage-icon.ts | 68 +- tsconfig.json | 89 +- vite.config.ts | 312 +++--- 13 files changed, 877 insertions(+), 744 deletions(-) rename src/{context => constant}/file-icon.ts (96%) rename src/{context => constant}/five-level-address.ts (100%) rename src/{context => constant}/stroage-icon.ts (96%) diff --git a/.eslintignore b/.eslintignore index 947b394..adde2d8 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,3 @@ -node_modules -.eslintrc.cjs -dist \ No newline at end of file +node_modules +.eslintrc.cjs +dist diff --git a/package.json b/package.json index a8c9b11..551ffca 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@ant-design/icons": "^5.3.7", "@ant-design/pro-components": "^2.7.10", + "@ant-design/pro-provider": "^2.14.7", "@ant-design/use-emotion-css": "^1.0.4", "@babel/preset-env": "^7.24.7", "@types/crypto-js": "^4.2.2", diff --git a/src/components/Main/Bucket/index.tsx b/src/components/Main/Bucket/index.tsx index 9d6fb08..82c4929 100644 --- a/src/components/Main/Bucket/index.tsx +++ b/src/components/Main/Bucket/index.tsx @@ -5,7 +5,7 @@ import styles from "./index.module.less"; import { Outlet, useNavigate } from "react-router-dom"; import { Button, Empty } from "antd"; -import StorageIcon from "@/context/stroage-icon.ts"; +import StorageIcon from "@/constant/stroage-icon.ts"; import { ReloadOutlined } from "@ant-design/icons"; const Bucket: FunctionComponent = () => { diff --git a/src/components/Main/File/index.tsx b/src/components/Main/File/index.tsx index ab2f0d6..3731e59 100644 --- a/src/components/Main/File/index.tsx +++ b/src/components/Main/File/index.tsx @@ -26,7 +26,7 @@ import { 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 FileIcon from "@/constant/file-icon.ts"; import file_icon from "@/assets/icons/files/file.svg"; const dataList: any = [ { diff --git a/src/components/Main/Home/index.module.less b/src/components/Main/Home/index.module.less index d8f58d3..c911edf 100644 --- a/src/components/Main/Home/index.module.less +++ b/src/components/Main/Home/index.module.less @@ -1,32 +1,33 @@ -.home_content_main { - display: flex; - flex-direction: column; -} - -.home_content_head { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - - -} - -.home_content_head_left { - height: 51vh; - width: 43%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-around; - flex-wrap: wrap; - -} - -.home_content_list { - display: flex; - flex-direction: row; - justify-content: space-between; - margin-top: 30px; - -} +.home_content_main { + display: flex; + flex-direction: column; +} + +.home_content_head { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + +} + +.home_content_head_left { + height: 50vh; + width: 43%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + +} + +.home_content_list { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 30px; + +} diff --git a/src/components/Main/Home/index.tsx b/src/components/Main/Home/index.tsx index 013e25e..51c6ec8 100644 --- a/src/components/Main/Home/index.tsx +++ b/src/components/Main/Home/index.tsx @@ -1,403 +1,521 @@ -/** @format */ -import { FunctionComponent, useEffect, useState } from "react"; -import { Avatar, Card, Skeleton, Space, Tag } from "antd"; -import Meta from "antd/es/card/Meta"; -import styles from "./index.module.less"; -import ReactECharts from "echarts-for-react"; -import { ProCard, ProList } from "@ant-design/pro-components"; -import storage from "@/assets/icons/storage.svg"; -import bucket from "@/assets/icons/bucket.svg"; -import file from "@/assets/icons/file.svg"; -import flux from "@/assets/icons/flux.svg"; -import aliyun from "@/assets/icons/aliyun.svg"; -// import * as echarts from "echarts/core"; -import CalendarHeatmap from "react-calendar-heatmap"; -import "react-calendar-heatmap/dist/styles.css"; -const defaultData = [ - { - id: "1", - name: "语雀的天空", - image: aliyun, - desc: "我是一条测试的描述", - }, - { - id: "2", - name: "Ant Design", - image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg", - desc: "我是一条测试的描述", - }, - { - id: "3", - name: "蚂蚁金服体验科技", - image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg", - desc: "我是一条测试的描述", - }, - { - id: "4", - name: "TechUI", - image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg", - desc: "我是一条测试的描述", - }, -]; - -type DataItem = (typeof defaultData)[number]; -const MainHome: FunctionComponent = () => { - const [loading, setLoading] = useState(true); - const [dataSource, setDataSource] = useState(defaultData); - const option = { - tooltip: { - trigger: "axis", - }, - legend: { - color: ["#F58080", "#47D8BE", "#F9A589"], - data: ["文件", "流量", "存储桶"], - left: "center", - bottom: "bottom", - }, - grid: { - top: "middle", - left: "3%", - right: "4%", - bottom: "3%", - height: "80%", - containLabel: true, - }, - xAxis: { - type: "category", - data: [100, 200, 20, 30, 60, 89], - axisLine: { - lineStyle: { - color: "#999", - }, - }, - }, - yAxis: { - type: "value", - - splitLine: { - lineStyle: { - type: "dashed", - color: "#DDD", - }, - }, - axisLine: { - show: false, - lineStyle: { - color: "#333", - }, - }, - nameTextStyle: { - color: "#999", - }, - splitArea: { - show: false, - }, - }, - series: [ - { - name: "文件", - type: "line", - data: [800, 900, 220, 130, 660, 289], - color: "#F58080", - lineStyle: { - width: 5, - color: { - type: "linear", - - colorStops: [ - { - offset: 0, - color: "#FFCAD4", // 0% 处的颜色 - }, - { - offset: 0.4, - color: "#F58080", // 100% 处的颜色 - }, - { - offset: 1, - color: "#F58080", // 100% 处的颜色 - }, - ], - globalCoord: false, // 缺省为 false - }, - shadowColor: "rgba(245,128,128, 0.5)", - shadowBlur: 10, - shadowOffsetY: 7, - }, - itemStyle: { - color: "#F58080", - borderWidth: 10, - /*shadowColor: 'rgba(72,216,191, 0.3)', - shadowBlur: 100,*/ - borderColor: "#F58080", - }, - smooth: true, - }, - { - name: "流量", - type: "line", - data: [123, 568, 111, 222, 123, 56], - lineStyle: { - width: 5, - color: { - type: "linear", - - colorStops: [ - { - offset: 0, - color: "#AAF487", // 0% 处的颜色 - }, - { - offset: 0.4, - color: "#47D8BE", // 100% 处的颜色 - }, - { - offset: 1, - color: "#47D8BE", // 100% 处的颜色 - }, - ], - globalCoord: false, // 缺省为 false - }, - shadowColor: "rgba(71,216,190, 0.5)", - shadowBlur: 10, - shadowOffsetY: 7, - }, - itemStyle: { - color: "#AAF487", - borderWidth: 10, - /*shadowColor: 'rgba(72,216,191, 0.3)', - shadowBlur: 100,*/ - borderColor: "#AAF487", - }, - smooth: true, - }, - { - name: "存储桶", - type: "line", - data: [125, 568, 25, 36, 784, 56], - lineStyle: { - width: 5, - color: { - type: "linear", - - colorStops: [ - { - offset: 0, - color: "#F6D06F", // 0% 处的颜色 - }, - { - offset: 0.4, - color: "#F9A589", // 100% 处的颜色 - }, - { - offset: 1, - color: "#F9A589", // 100% 处的颜色 - }, - ], - globalCoord: false, // 缺省为 false - }, - shadowColor: "rgba(249,165,137, 0.5)", - shadowBlur: 10, - shadowOffsetY: 7, - }, - itemStyle: { - color: "#F6D06F", - borderWidth: 10, - /*shadowColor: 'rgba(72,216,191, 0.3)', - shadowBlur: 100,*/ - borderColor: "#F6D06F", - }, - smooth: true, - }, - ], - }; - - useEffect(() => { - setTimeout(() => { - setLoading(false); - }, 2000); - }, []); - return ( - <> -
-
-
- - - } - title="存储" - description="This is the description" - /> - - - - - } - title="存储桶" - description="This is the description" - /> - - - - - } - title="文件" - description="This is the description" - /> - - - - - } - title="总量" - description="This is the description" - /> - - -
-
- - - - - -
-
-
- - - -
-
- - - 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 - - ); - }, - }, - }} - /> - -
-
- - ); -}; -export default MainHome; +/** @format */ +import React, { useEffect, useState } from "react"; +import { Avatar, Card, Flex, Skeleton, Space, Tag } from "antd"; +import Meta from "antd/es/card/Meta"; +import styles from "./index.module.less"; +import ReactECharts from "echarts-for-react"; +import { ProCard, ProList } from "@ant-design/pro-components"; +import storage from "@/assets/icons/storage.svg"; +import bucket from "@/assets/icons/bucket.svg"; +import file from "@/assets/icons/file.svg"; +import flux from "@/assets/icons/flux.svg"; +import aliyun from "@/assets/icons/aliyun.svg"; +// import * as echarts from "echarts/core"; +import CalendarHeatmap from "react-calendar-heatmap"; +import "react-calendar-heatmap/dist/styles.css"; +import { Tiny } from "@ant-design/plots"; +const defaultData = [ + { + id: "1", + name: "语雀的天空", + image: aliyun, + desc: "我是一条测试的描述", + }, + { + id: "2", + name: "Ant Design", + image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg", + desc: "我是一条测试的描述", + }, + { + id: "3", + name: "蚂蚁金服体验科技", + image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg", + desc: "我是一条测试的描述", + }, + { + id: "4", + name: "TechUI", + image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg", + desc: "我是一条测试的描述", + }, +]; + +type DataItem = (typeof defaultData)[number]; +const MainHome: React.FC = () => { + const [loading, setLoading] = useState(true); + const [dataSource, setDataSource] = useState(defaultData); + const option = { + tooltip: { + trigger: "axis", + }, + legend: { + color: ["#F58080", "#47D8BE", "#F9A589"], + data: ["文件", "流量", "存储桶"], + left: "center", + bottom: "bottom", + }, + grid: { + top: "middle", + left: "3%", + right: "4%", + bottom: "3%", + height: "80%", + containLabel: true, + }, + xAxis: { + type: "category", + data: [100, 200, 20, 30, 60, 89], + axisLine: { + lineStyle: { + color: "#999", + }, + }, + }, + yAxis: { + type: "value", + + splitLine: { + lineStyle: { + type: "dashed", + color: "#DDD", + }, + }, + axisLine: { + show: false, + lineStyle: { + color: "#333", + }, + }, + nameTextStyle: { + color: "#999", + }, + splitArea: { + show: false, + }, + }, + series: [ + { + name: "文件", + type: "line", + data: [800, 900, 220, 130, 660, 289], + color: "#F58080", + lineStyle: { + width: 5, + color: { + type: "linear", + + colorStops: [ + { + offset: 0, + color: "#FFCAD4", // 0% 处的颜色 + }, + { + offset: 0.4, + color: "#F58080", // 100% 处的颜色 + }, + { + offset: 1, + color: "#F58080", // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + }, + shadowColor: "rgba(245,128,128, 0.5)", + shadowBlur: 10, + shadowOffsetY: 7, + }, + itemStyle: { + color: "#F58080", + borderWidth: 10, + /*shadowColor: 'rgba(72,216,191, 0.3)', + shadowBlur: 100,*/ + borderColor: "#F58080", + }, + smooth: true, + }, + { + name: "流量", + type: "line", + data: [123, 568, 111, 222, 123, 56], + lineStyle: { + width: 5, + color: { + type: "linear", + + colorStops: [ + { + offset: 0, + color: "#AAF487", // 0% 处的颜色 + }, + { + offset: 0.4, + color: "#47D8BE", // 100% 处的颜色 + }, + { + offset: 1, + color: "#47D8BE", // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + }, + shadowColor: "rgba(71,216,190, 0.5)", + shadowBlur: 10, + shadowOffsetY: 7, + }, + itemStyle: { + color: "#AAF487", + borderWidth: 10, + /*shadowColor: 'rgba(72,216,191, 0.3)', + shadowBlur: 100,*/ + borderColor: "#AAF487", + }, + smooth: true, + }, + { + name: "存储桶", + type: "line", + data: [125, 568, 25, 36, 784, 56], + lineStyle: { + width: 5, + color: { + type: "linear", + + colorStops: [ + { + offset: 0, + color: "#F6D06F", // 0% 处的颜色 + }, + { + offset: 0.4, + color: "#F9A589", // 100% 处的颜色 + }, + { + offset: 1, + color: "#F9A589", // 100% 处的颜色 + }, + ], + globalCoord: false, // 缺省为 false + }, + shadowColor: "rgba(249,165,137, 0.5)", + shadowBlur: 10, + shadowOffsetY: 7, + }, + itemStyle: { + color: "#F6D06F", + borderWidth: 10, + /*shadowColor: 'rgba(72,216,191, 0.3)', + shadowBlur: 100,*/ + borderColor: "#F6D06F", + }, + smooth: true, + }, + ], + }; + const data = [ + 264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546 + ].map((value, index) => ({ value, index })); + const config = { + data, + padding: 10, + width: 150, + height: 80, + shapeField: "smooth", + xField: "index", + yField: "value", + style: { + fill: "linear-gradient(-90deg, white 0%, orange 100%)", + fillOpacity: 0.6, + }, + }; + useEffect(() => { + setTimeout(() => { + setLoading(false); + }, 2000); + }, []); + return ( + <> +
+
+
+ + + + + + + + {" "} + 存储 + + + + + {{2}}/个 + + + + + + + + + + + + + + + + + {" "} + 存储桶 + + + + + {{2}}/个 + + + + + + + + + + + + + + + + + {" "} + 文件 + + + + + {{2}}/个 + + + + + + + + + + + + + + + + + {" "} + 总量 + + + + + {{2}}/M + + + + + + + + + +
+
+ + + + + +
+
+
+ + + +
+
+ + + 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 + + ); + }, + }, + }} + /> + +
+
+ + ); +}; +export default MainHome; diff --git a/src/components/Main/Settings/index.tsx b/src/components/Main/Settings/index.tsx index d86135c..32b81e5 100644 --- a/src/components/Main/Settings/index.tsx +++ b/src/components/Main/Settings/index.tsx @@ -6,7 +6,7 @@ import styles from "./index.module.less"; import { Outlet, useLocation, useNavigate } from "react-router-dom"; import { Suspense } from "react"; import selectOptions from "@/components/Main/Settings/settings.ts"; -import StorageIcon from "@/context/stroage-icon.ts"; +import StorageIcon from "@/constant/stroage-icon.ts"; export default () => { const navigate = useNavigate(); const location = useLocation(); diff --git a/src/components/Main/User/UserSetting/index.tsx b/src/components/Main/User/UserSetting/index.tsx index 994c2b0..77bca98 100644 --- a/src/components/Main/User/UserSetting/index.tsx +++ b/src/components/Main/User/UserSetting/index.tsx @@ -18,7 +18,7 @@ import { } from "antd"; import styles from "./index.module.less"; import TextArea from "antd/es/input/TextArea"; -import { city } from "@/context/five-level-address.ts"; +import { city } from "@/constant/five-level-address.ts"; const UserSetting: FunctionComponent = () => { const [disable, setDisable] = useState(true); diff --git a/src/context/file-icon.ts b/src/constant/file-icon.ts similarity index 96% rename from src/context/file-icon.ts rename to src/constant/file-icon.ts index 92cbb21..9143c59 100644 --- a/src/context/file-icon.ts +++ b/src/constant/file-icon.ts @@ -1,74 +1,74 @@ -/** @format */ - -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; +/** @format */ + +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; diff --git a/src/context/five-level-address.ts b/src/constant/five-level-address.ts similarity index 100% rename from src/context/five-level-address.ts rename to src/constant/five-level-address.ts diff --git a/src/context/stroage-icon.ts b/src/constant/stroage-icon.ts similarity index 96% rename from src/context/stroage-icon.ts rename to src/constant/stroage-icon.ts index 1286990..6777808 100644 --- a/src/context/stroage-icon.ts +++ b/src/constant/stroage-icon.ts @@ -1,34 +1,34 @@ -/** @format */ - -import aliyun from "@/assets/icons/aliyun.svg"; -import tencent from "@/assets/icons/tencent.svg"; -import huawei from "@/assets/icons/huawei.svg"; -import baiduyun from "@/assets/icons/baiduyun.svg"; -import minio from "@/assets/icons/minio.svg"; -import jdyun from "@/assets/icons/jdyun.svg"; -import aws from "@/assets/icons/aws.svg"; -import wangyi from "@/assets/icons/wangyi.svg"; -import qiniu from "@/assets/icons/qiniu.svg"; -import upyun from "@/assets/icons/upyun.svg"; -import pinanyun from "@/assets/icons/pinanyun.svg"; -import qingyun from "@/assets/icons/qingyun.svg"; -import ucloud from "@/assets/icons/ucloud.svg"; -import jinshan from "@/assets/icons/jinshan.svg"; - -const StorageIcon: any = { - ali: aliyun, - tencent: tencent, - huawei: huawei, - baidu: baiduyun, - minio: minio, - jd: jdyun, - aws: aws, - wangyi: wangyi, - qiniu: qiniu, - up: upyun, - pinan: pinanyun, - qingyun: qingyun, - ucloud: ucloud, - jinshan: jinshan, -}; -export default StorageIcon; +/** @format */ + +import aliyun from "@/assets/icons/aliyun.svg"; +import tencent from "@/assets/icons/tencent.svg"; +import huawei from "@/assets/icons/huawei.svg"; +import baiduyun from "@/assets/icons/baiduyun.svg"; +import minio from "@/assets/icons/minio.svg"; +import jdyun from "@/assets/icons/jdyun.svg"; +import aws from "@/assets/icons/aws.svg"; +import wangyi from "@/assets/icons/wangyi.svg"; +import qiniu from "@/assets/icons/qiniu.svg"; +import upyun from "@/assets/icons/upyun.svg"; +import pinanyun from "@/assets/icons/pinanyun.svg"; +import qingyun from "@/assets/icons/qingyun.svg"; +import ucloud from "@/assets/icons/ucloud.svg"; +import jinshan from "@/assets/icons/jinshan.svg"; + +const StorageIcon: any = { + ali: aliyun, + tencent: tencent, + huawei: huawei, + baidu: baiduyun, + minio: minio, + jd: jdyun, + aws: aws, + wangyi: wangyi, + qiniu: qiniu, + up: upyun, + pinan: pinanyun, + qingyun: qingyun, + ucloud: ucloud, + jinshan: jinshan, +}; +export default StorageIcon; diff --git a/tsconfig.json b/tsconfig.json index c0411e3..038c86f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,45 +1,44 @@ -{ - "compilerOptions": { - "esModuleInterop": true, - "target": "ES2020", - "useDefineForClassFields": true, - "lib": [ - "ES2020", - "DOM", - "DOM.Iterable" - ], - "module": "ESNext", - "skipLibCheck": true, - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "experimentalDecorators": true, - "jsx": "react-jsx", - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "baseUrl": "./", - "paths": { - "@/*": [ - "./src/*" - ] - } - }, - "include": [ - "src/**/*.ts", - "src/**/*.d.ts", - "src/**/*.tsx", - "types/*.d.ts", - "vite.config.ts" - ], - "references": [ - { - "path": "./tsconfig.node.json" - } - ] -} +{ + "compilerOptions": { + "esModuleInterop": true, + "target": "ES2020", + "useDefineForClassFields": true, + "lib": [ + "ES2020", + "DOM", + "DOM.Iterable" + ], + "module": "ESNext", + "skipLibCheck": true, + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "experimentalDecorators": true, + "jsx": "react-jsx", + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "baseUrl": "./", + "paths": { + "@/*": [ + "./src/*" + ] + } + }, + "include": [ + "src/**/*.ts", + "src/**/*.d.ts", + "src/**/*.tsx", + "types/*.d.ts", + ], + "references": [ + { + "path": "./tsconfig.node.json" + } + ] +} diff --git a/vite.config.ts b/vite.config.ts index 492d783..22e9fa9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,149 +1,163 @@ -/** @format */ - -import { defineConfig, loadEnv } from "vite"; -import react from "@vitejs/plugin-react"; -import { resolve } from "path"; -import viteCompression from "vite-plugin-compression"; -import { createHtmlPlugin } from "vite-plugin-html"; -import legacy from "@vitejs/plugin-legacy"; -import postcssPresetEnv from "postcss-preset-env"; -import autoprefixer from "autoprefixer"; -import { nodePolyfills } from "vite-plugin-node-polyfills"; -import svgr from "vite-plugin-svgr"; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-expect-error -//配置参数 -export default defineConfig(({ mode }) => { - const env = loadEnv(mode, process.cwd()); - return { - base: "/", - plugins: [ - react(), - nodePolyfills(), - svgr({ svgrOptions: { icon: true } }), - legacy({ - targets: [ - "ie >= 11", - "chrome 52", - "Chrome > 70", - "Safari 12.1", - "last 2 versions and since 2018 and > 0.5%", - "iOS >= 9", - "Android >= 4.4", - "last 2 versions", - ], - additionalLegacyPolyfills: ["regenerator-runtime/runtime"], - renderLegacyChunks: true, - polyfills: [ - "es.promise.all-settled", - "es.symbol", - "es.array.filter", - "es.promise", - "es.promise.finally", - "es/map", - "es/set", - "es.array.for-each", - "es.object.define-properties", - "es.object.define-property", - "es.object.get-own-property-descriptor", - "es.object.get-own-property-descriptors", - "es.object.keys", - "es.object.to-string", - "web.dom-collections.for-each", - "esnext.global-this", - "esnext.string.match-all", - ], - modernPolyfills: ["es.promise.all-settled", "es.object.entries"], - }), - viteCompression({ - verbose: true, // 是否在控制台中输出压缩结果 - disable: false, - threshold: 10240, // 如果体积大于阈值,将被压缩,单位为b,体积过小时请不要压缩,以免适得其反 - algorithm: "gzip", // 压缩算法,可选['gzip',' brotliccompress ','deflate ','deflateRaw'] - ext: ".gz", - deleteOriginFile: true, // 源文件压缩后是否删除 - }), - createHtmlPlugin({ - minify: true, - /** - * 在这里写entry后,你将不需要在`index.html`内添加 script 标签,原有标签需要删除 - * @default src/main.ts - */ - entry: "src/main.tsx", - /** - * 如果你想将 `index.html`存放在指定文件夹,可以修改它,否则不需要配置 - * @default index.html - */ - template: "index.html", - /** - * 需要注入 index.html ejs 模版的数据 - */ - inject: { - data: { - title: env.VITE_TITLE_NAME, - }, - }, - }), - ], - resolve: { - alias: { - "@": resolve(__dirname, "src"), - }, - extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"], // 默认值,这些文件引入时不需要写后缀 - }, - css: { - modules: { - // 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义 - // 其中,name 表示当前文件名,local 表示类名 - generateScopedName: "[name]__[local]___[hash:base64:5]", - }, - postcss: { - plugins: [ - postcssPresetEnv(), - autoprefixer({ - // 自动添加前缀 - overrideBrowserslist: [ - "Android 4.1", - "iOS 7.1", - "Chrome > 31", - "ff > 31", - "ie >= 8", - ], - }), - ], - }, - preprocessorOptions: { - less: { - javascriptEnabled: true, - }, - }, - }, - esbuild: { - // drop: ["console", "debugger"], - }, - build: { - outDir: "dist", // 指定输出路径 - assetsDir: "assets", // 指定生成静态文件目录 - assetsInlineLimit: "4096", // 小于此阈值的导入或引用资源将内联为 base64 编码 - cssCodeSplit: true, // 启用 CSS 代码拆分 - sourcemap: false, // 构建后是否生成 source map 文件 - minify: "esbuild", // 指定使用哪种混淆器 - write: true, // 启用将构建后的文件写入磁盘 - emptyOutDir: true, // 构建时清空该目录 - brotliSize: true, // 启用 brotli 压缩大小报告 - chunkSizeWarningLimit: 2000, // chunk 大小警告的限制 - watch: null, // 设置为 {} 则会启用 rollup 的监听器 - }, - server: { - proxy: { - [env.VITE_APP_BASE_API]: { - //后端接口的baseurl - target: env.VITE_API_BASE_URL, - //是否允许跨域 - changeOrigin: true, - rewrite: (path) => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ""), - }, - }, - }, - }; -}); +/** @format */ + +import { defineConfig, loadEnv, UserConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import { resolve } from "path"; +import viteCompression from "vite-plugin-compression"; +import { createHtmlPlugin } from "vite-plugin-html"; +import legacy from "@vitejs/plugin-legacy"; +import postcssPresetEnv from "postcss-preset-env"; +import autoprefixer from "autoprefixer"; +import { nodePolyfills } from "vite-plugin-node-polyfills"; +import svgr from "vite-plugin-svgr"; +export default defineConfig(({ mode }): any => { + const env = loadEnv(mode, process.cwd()); + return { + base: "/", + plugins: [ + react(), + nodePolyfills(), + svgr({ svgrOptions: { icon: true } }), + legacy({ + targets: [ + "ie >= 11", + "chrome 52", + "Chrome > 70", + "Safari 12.1", + "last 2 versions and since 2018 and > 0.5%", + "iOS >= 9", + "Android >= 4.4", + "last 2 versions", + ], + additionalLegacyPolyfills: ["regenerator-runtime/runtime"], + renderLegacyChunks: true, + polyfills: [ + "es.promise.all-settled", + "es.symbol", + "es.array.filter", + "es.promise", + "es.promise.finally", + "es/map", + "es/set", + "es.array.for-each", + "es.object.define-properties", + "es.object.define-property", + "es.object.get-own-property-descriptor", + "es.object.get-own-property-descriptors", + "es.object.keys", + "es.object.to-string", + "web.dom-collections.for-each", + "esnext.global-this", + "esnext.string.match-all", + ], + modernPolyfills: ["es.promise.all-settled", "es.object.entries"], + }), + viteCompression({ + verbose: true, // 是否在控制台中输出压缩结果 + disable: false, + threshold: 10240, // 如果体积大于阈值,将被压缩,单位为b,体积过小时请不要压缩,以免适得其反 + algorithm: "gzip", // 压缩算法,可选['gzip',' brotliccompress ','deflate ','deflateRaw'] + ext: ".gz", + deleteOriginFile: true, // 源文件压缩后是否删除 + }), + createHtmlPlugin({ + minify: true, + /** + * 在这里写entry后,你将不需要在`index.html`内添加 script 标签,原有标签需要删除 + * @default src/main.ts + */ + entry: "src/main.tsx", + /** + * 如果你想将 `index.html`存放在指定文件夹,可以修改它,否则不需要配置 + * @default index.html + */ + template: "index.html", + /** + * 需要注入 index.html ejs 模版的数据 + */ + inject: { + data: { + title: env.VITE_TITLE_NAME, + }, + }, + }), + ], + resolve: { + alias: { + "@": resolve(__dirname, "src"), + }, + extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"], // 默认值,这些文件引入时不需要写后缀 + }, + css: { + modules: { + // 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义 + // 其中,name 表示当前文件名,local 表示类名 + generateScopedName: "[name]__[local]___[hash:base64:5]", + }, + postcss: { + plugins: [ + postcssPresetEnv(), + autoprefixer({ + // 自动添加前缀 + overrideBrowserslist: [ + "Android 4.1", + "iOS 7.1", + "Chrome > 31", + "ff > 31", + "ie >= 8", + ], + }), + ], + }, + preprocessorOptions: { + less: { + javascriptEnabled: true, + }, + }, + }, + esbuild: { + // drop: ["console", "debugger"], + }, + build: { + outDir: "dist", // 指定输出路径 + assetsDir: "assets", // 指定生成静态文件目录 + assetsInlineLimit: "4096", // 小于此阈值的导入或引用资源将内联为 base64 编码 + cssCodeSplit: true, // 启用 CSS 代码拆分 + sourcemap: false, // 构建后是否生成 source map 文件 + minify: "esbuild", // 指定使用哪种混淆器 + write: true, // 启用将构建后的文件写入磁盘 + emptyOutDir: true, // 构建时清空该目录 + brotliSize: true, // 启用 brotli 压缩大小报告 + chunkSizeWarningLimit: 4000, // chunk 大小警告的限制 + watch: null, // 设置为 {} 则会启用 rollup 的监听器 + rollupOptions: { + output: { + // manualChunks 配置 + manualChunks: { + // 将 React 相关库打包成单独的 chunk 中 + "react-vendor": ["react", "react-dom"], + // 将组件库的代码打包 + library: [ + "antd", + "@ant-design/icons", + "@ant-design/pro-components", + "@ant-design/use-emotion-css", + "@ant-design/charts", + ], + }, + }, + }, + }, + server: { + proxy: { + [env.VITE_APP_BASE_API]: { + //后端接口的baseurl + target: env.VITE_API_BASE_URL, + //是否允许跨域 + changeOrigin: true, + rewrite: (path) => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ""), + }, + }, + }, + }; +});