From 21ff0416a30f82b7e4d273b24ccf7b0cb899a03b Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Wed, 3 Jul 2024 14:53:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=AA=E8=A1=A8=E7=9B=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 37 ++- src/assets/icons/flux.svg | 1 + src/assets/icons/setting.svg | 1 + src/assets/icons/storage.svg | 1 + src/components/Main/Home/index.module.less | 20 ++ src/components/Main/Home/index.tsx | 268 +++++++++++++++++- .../Main/User/UserInfo/index.module.less | 2 +- .../Main/User/UserSetting/index.tsx | 22 +- src/views/Main/defaultSettings.tsx | 4 +- src/views/Main/index.tsx | 37 ++- 11 files changed, 376 insertions(+), 18 deletions(-) create mode 100644 src/assets/icons/flux.svg create mode 100644 src/assets/icons/setting.svg create mode 100644 src/assets/icons/storage.svg create mode 100644 src/components/Main/Home/index.module.less diff --git a/package.json b/package.json index 5fa5ac7..11e0c01 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "axios": "^1.7.2", "core-js": "^3.37.1", "crypto-js": "^4.2.0", + "echarts-for-react": "^3.0.2", "jsencrypt": "^3.3.2", "localforage": "^1.10.0", "mobx": "^6.12.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2c6b39c..d86f29e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ dependencies: crypto-js: specifier: ^4.2.0 version: 4.2.0 + echarts-for-react: + specifier: ^3.0.2 + version: 3.0.2(echarts@5.5.1)(react@18.3.1) jsencrypt: specifier: ^3.3.2 version: 3.3.2 @@ -4038,6 +4041,25 @@ packages: engines: {node: '>=12'} dev: false + /echarts-for-react@3.0.2(echarts@5.5.1)(react@18.3.1): + resolution: {integrity: sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==} + peerDependencies: + echarts: ^3.0.0 || ^4.0.0 || ^5.0.0 + react: ^15.0.0 || >=16.0.0 + dependencies: + echarts: 5.5.1 + fast-deep-equal: 3.1.3 + react: 18.3.1 + size-sensor: 1.0.2 + dev: false + + /echarts@5.5.1: + resolution: {integrity: sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==} + dependencies: + tslib: 2.3.0 + zrender: 5.6.0 + dev: false + /ejs@3.1.10: resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==} engines: {node: '>=0.10.0'} @@ -4466,7 +4488,6 @@ packages: /fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} - dev: true /fast-diff@1.3.0: resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==} @@ -7323,6 +7344,10 @@ packages: engines: {node: '>=14'} dev: true + /size-sensor@1.0.2: + resolution: {integrity: sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw==} + dev: false + /slash@3.0.0: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} engines: {node: '>=8'} @@ -7853,6 +7878,10 @@ packages: typescript: 5.4.5 dev: true + /tslib@2.3.0: + resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==} + dev: false + /tslib@2.6.2: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} @@ -8230,3 +8259,9 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} dev: true + + /zrender@5.6.0: + resolution: {integrity: sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==} + dependencies: + tslib: 2.3.0 + dev: false diff --git a/src/assets/icons/flux.svg b/src/assets/icons/flux.svg new file mode 100644 index 0000000..6b1844d --- /dev/null +++ b/src/assets/icons/flux.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/setting.svg b/src/assets/icons/setting.svg new file mode 100644 index 0000000..454585b --- /dev/null +++ b/src/assets/icons/setting.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/storage.svg b/src/assets/icons/storage.svg new file mode 100644 index 0000000..c536e99 --- /dev/null +++ b/src/assets/icons/storage.svg @@ -0,0 +1 @@ + diff --git a/src/components/Main/Home/index.module.less b/src/components/Main/Home/index.module.less new file mode 100644 index 0000000..dfa5e97 --- /dev/null +++ b/src/components/Main/Home/index.module.less @@ -0,0 +1,20 @@ +.home_content_main{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + .home_content_head_left { + height: 51vh; + width: 31vw; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + + } +} + + + diff --git a/src/components/Main/Home/index.tsx b/src/components/Main/Home/index.tsx index 58c6069..2b69eec 100644 --- a/src/components/Main/Home/index.tsx +++ b/src/components/Main/Home/index.tsx @@ -1,7 +1,269 @@ /** @format */ -import { FunctionComponent } from "react"; - +import { FunctionComponent, useEffect, useState } from "react"; +import { Avatar, Card, Skeleton, Space } from "antd"; +import Meta from "antd/es/card/Meta"; +import styles from "./index.module.less"; +import ReactECharts from "echarts-for-react"; +// import * as echarts from "echarts/core"; +import { ProCard } 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"; const MainHome: FunctionComponent = () => { - return
首页
; + const [loading, setLoading] = useState(true); + 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: { + normal: { + 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: { + normal: { + 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: { + normal: { + 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: { + normal: { + 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: { + normal: { + 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: { + normal: { + 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" + /> + + +
+
+ + + +
+ + + ); }; export default MainHome; diff --git a/src/components/Main/User/UserInfo/index.module.less b/src/components/Main/User/UserInfo/index.module.less index ca9ed85..bbc4d09 100644 --- a/src/components/Main/User/UserInfo/index.module.less +++ b/src/components/Main/User/UserInfo/index.module.less @@ -6,7 +6,7 @@ background-size: cover; border-radius: 10px; height: 150px; - box-shadow: rgba(15, 15, 16, 0.18) 0px 10px 10px;; + box-shadow: rgba(15, 15, 16, 0.18) 0px 10px 10px; } .user_info_header_avatar { display: flex; diff --git a/src/components/Main/User/UserSetting/index.tsx b/src/components/Main/User/UserSetting/index.tsx index 62e5098..dfa6b5f 100644 --- a/src/components/Main/User/UserSetting/index.tsx +++ b/src/components/Main/User/UserSetting/index.tsx @@ -1,6 +1,6 @@ /** @format */ import { FunctionComponent, useEffect, useState } from "react"; -import { ProCard, ProFormCascader } from "@ant-design/pro-components"; +import { ProCard, ProForm, ProFormCascader } from "@ant-design/pro-components"; import { AntDesignOutlined } from "@ant-design/icons"; import { Avatar, @@ -68,12 +68,23 @@ const UserSetting: FunctionComponent = () => { const prefixSelector = ( - https:// http:// ); + const ProFormText = (props: any) => { + return ( + + city} + width="md" + name="location" + disabled={disable}> + + ); + }; useEffect(() => { setTimeout(() => { setLoading(false); @@ -94,6 +105,7 @@ const UserSetting: FunctionComponent = () => { style={{ maxWidth: 600 }} onFinish={onFinish} onFinishFailed={onFinishFailed} + initialValues={{ prefix: "https://" }} autoComplete="off"> label="邮箱" @@ -138,11 +150,7 @@ const UserSetting: FunctionComponent = () => { label="地区" name="location" rules={[{ required: true, message: "请输入地区!" }]}> - city} - width="md" - name="location" - disabled={disable}> + label="公司" name="company"> diff --git a/src/views/Main/defaultSettings.tsx b/src/views/Main/defaultSettings.tsx index 1ca2ca2..6dda7a3 100644 --- a/src/views/Main/defaultSettings.tsx +++ b/src/views/Main/defaultSettings.tsx @@ -1,12 +1,12 @@ /** @format */ -import { SmileFilled } from "@ant-design/icons"; import dashboard from "@/assets/icons/dashboard.svg"; import bucket from "@/assets/icons/bucket.svg"; import file from "@/assets/icons/file.svg"; import share from "@/assets/icons/share.svg"; import user from "@/assets/icons/user.svg"; import userInfo from "@/assets/icons/userInfo.svg"; +import setting from "@/assets/icons/setting.svg"; export default { route: { @@ -47,7 +47,7 @@ export default { { path: "main/user/setting", name: "用户设置", - icon: , + icon: setting, }, ], }, diff --git a/src/views/Main/index.tsx b/src/views/Main/index.tsx index dd9ff21..31ee377 100644 --- a/src/views/Main/index.tsx +++ b/src/views/Main/index.tsx @@ -1,7 +1,12 @@ /** @format */ import { GithubFilled, InfoCircleFilled, QuestionCircleFilled } from "@ant-design/icons"; -import { PageContainer, ProCard, ProLayout } from "@ant-design/pro-components"; +import { + DefaultFooter, + PageContainer, + ProCard, + ProLayout, +} from "@ant-design/pro-components"; import defaultProps from "./defaultSettings.tsx"; import { Link, Outlet, useLocation } from "react-router-dom"; import logo from "@/assets/images/logo.png"; @@ -19,7 +24,12 @@ export default function Layout() { logo={logo} layout={"mix"} // contentWidth={"Fluid"} - menu={{ defaultOpenAll: false, hideMenuWhenCollapsed: false }} + menu={{ + defaultOpenAll: false, + hideMenuWhenCollapsed: false, + type: "group", + collapsedShowTitle: true, + }} title={"五味子云存储"} siderWidth={216} menuItemRender={(menuItemProps, defaultDom) => { @@ -45,8 +55,27 @@ export default function Layout() { , , ]; - }}> - + }} + breadcrumbRender={(routers = []) => [ + { + path: "/main/home", + title: "主页", + }, + ...routers, + ]} + footerRender={() => ( + + )}> +