From 1dd369fbb1084697ffeb2011fa829af4db82a0ee Mon Sep 17 00:00:00 2001 From: simba Date: Sun, 10 Apr 2022 22:27:58 +0800 Subject: [PATCH] display capacity of exist --- CHANGELOG.md | 7 +- package.json | 6 +- src/common/util/OptimizeUtil.ts | 9 ++ src/pages/layout/SideLayout.less | 105 +++++++------- src/pages/layout/SideLayout.tsx | 191 +++++++++++++------------- src/pages/layout/widget/Capacity.less | 11 ++ src/pages/layout/widget/Capacity.tsx | 48 +++++++ src/pages/matter/List.tsx | 15 +- yarn.lock | 17 ++- 9 files changed, 237 insertions(+), 172 deletions(-) create mode 100644 src/common/util/OptimizeUtil.ts create mode 100644 src/pages/layout/widget/Capacity.less create mode 100644 src/pages/layout/widget/Capacity.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index fd433d9..a927c5f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ # 3.1.6 -1. 优化拖拽文件夹进行上传的错误提示 -2. 优化超出限制大小的错误提示 -3. 修复图片预览的已知错误 +1. 增加云盘剩余容量显示 +2. 优化拖拽文件夹进行上传的错误提示 +3. 优化超出限制大小的错误提示 +4. 修复一些已知问题 diff --git a/package.json b/package.json index 000af2b..8dd740a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tank-front", - "version": "3.1.5", + "version": "3.1.6", "private": true, "dependencies": { "@ant-design/icons": "4.7.0", @@ -9,8 +9,8 @@ "@types/node": "16.7.13", "@types/photoswipe": "^4.1.2", "@types/qs": "^6.9.7", - "@types/react": "17.0.20", - "@types/react-dom": "17.0.9", + "@types/react": "17.0.2", + "@types/react-dom": "17.0.2", "@types/react-router-dom": "^5.3.3", "antd": "4.19.2", "axios": "^0.26.1", diff --git a/src/common/util/OptimizeUtil.ts b/src/common/util/OptimizeUtil.ts new file mode 100644 index 0000000..d15e08f --- /dev/null +++ b/src/common/util/OptimizeUtil.ts @@ -0,0 +1,9 @@ +export const debounce = (func: Function, wait: number) => { + let timer: any = null; + return () => { + if (timer) { + clearTimeout(timer); + } + timer = setTimeout(func, wait); + }; +}; diff --git a/src/pages/layout/SideLayout.less b/src/pages/layout/SideLayout.less index 1f9117e..b78c758 100644 --- a/src/pages/layout/SideLayout.less +++ b/src/pages/layout/SideLayout.less @@ -1,64 +1,59 @@ -@import "../../assets/css/global/variables"; - +@import '../../assets/css/global/variables'; //旁边布局 .layout-side { + @nav-text-color: white; + @font-highlight-color: #ddd; + @left-border-color: @brand-primary; - @nav-text-color: white; - @font-highlight-color: #ddd; - @left-border-color: @brand-primary; + transition: all 0.4s; + position: fixed; + width: @sidebar-width; + left: 0; + top: 0; + bottom: 0; + z-index: 1000; - transition: all 0.4s; - position: fixed; - width: @sidebar-width; - left: 0; - top: 0; - bottom: 0; - z-index: 1000; + background: #001529; - background: #001529; - - - //show-drawer只在手机屏幕生效 - @media (max-width: @screen-xs-max) { - left: -@sidebar-width; - &.show-drawer { - left: 0; - } - } - - - .avatar-area { - text-align: center; - margin-top: 40px; - } - - .username-area { - padding: 10px 20px; - text-align: center; - color: #bbb; - - .username-text { - color: #bbb; - font-size: 16px; - } - } - - - .install-area { - text-align: center; - margin-top: 40px; - margin-bottom: 20px; - - .install-logo { - width: 80px; - } - } - - .visible-xs { - display: none; + //show-drawer只在手机屏幕生效 @media (max-width: @screen-xs-max) { - display: block; + left: -@sidebar-width; + &.show-drawer { + left: 0; + } + } + + .avatar-area { + text-align: center; + margin-top: 40px; + } + + .username-area { + padding: 10px 20px; + text-align: center; + color: #bbb; + + .username-text { + color: #bbb; + font-size: 16px; + } + } + + .install-area { + text-align: center; + margin-top: 40px; + margin-bottom: 20px; + + .install-logo { + width: 80px; + } + } + + .visible-xs { + display: none; + @media (max-width: @screen-xs-max) { + display: block; + } } - } } diff --git a/src/pages/layout/SideLayout.tsx b/src/pages/layout/SideLayout.tsx index 431e4ca..cd29c16 100644 --- a/src/pages/layout/SideLayout.tsx +++ b/src/pages/layout/SideLayout.tsx @@ -1,114 +1,107 @@ -import React from "react"; -import "./SideLayout.less"; -import TankComponent from "../../common/component/TankComponent"; -import Preference from "../../common/model/preference/Preference"; -import Moon from "../../common/model/global/Moon"; -import DefaultLogoPng from "../../assets/image/logo.png"; -import Sun from "../../common/model/global/Sun"; -import { Link } from "react-router-dom"; -import { UserRole } from "../../common/model/user/UserRole"; -import { Menu } from "antd"; -import MenuItem from "../../common/menu/MenuItem"; -import User from "../../common/model/user/User"; -import MenuManager from "../../common/menu/MenuManager"; -import { InfoCircleOutlined } from "@ant-design/icons"; -import Lang from "../../common/model/global/Lang"; -import AboutModal from "./widget/AboutModal"; +import React from 'react'; +import './SideLayout.less'; +import TankComponent from '../../common/component/TankComponent'; +import Preference from '../../common/model/preference/Preference'; +import Moon from '../../common/model/global/Moon'; +import DefaultLogoPng from '../../assets/image/logo.png'; +import Sun from '../../common/model/global/Sun'; +import { Link } from 'react-router-dom'; +import { UserRole } from '../../common/model/user/UserRole'; +import { Menu } from 'antd'; +import MenuItem from '../../common/menu/MenuItem'; +import User from '../../common/model/user/User'; +import MenuManager from '../../common/menu/MenuManager'; +import { InfoCircleOutlined } from '@ant-design/icons'; +import Lang from '../../common/model/global/Lang'; +import AboutModal from './widget/AboutModal'; +import Capacity from './widget/Capacity'; interface IProps {} interface IState {} export default class SideLayout extends TankComponent { - constructor(props: IProps) { - super(props); - } - - componentDidMount() {} - - onSelect(param: any) { - if (param.key === "about") { - AboutModal.open(); - return; + constructor(props: IProps) { + super(props); } - let menuManager: MenuManager = MenuManager.getSingleton(); - menuManager.selectMenu(param.key); + onSelect(param: any) { + if (param.key === 'about') { + AboutModal.open(); + return; + } - //打到对应的页面中。 - if (param.key == "/user/logout") { - Sun.navigateTo("/user/login"); - } else { - Sun.navigateTo(param.key); + let menuManager: MenuManager = MenuManager.getSingleton(); + menuManager.selectMenu(param.key); + + //打到对应的页面中。 + if (param.key == '/user/logout') { + Sun.navigateTo('/user/login'); + } else { + Sun.navigateTo(param.key); + } + + this.updateUI(); } - this.updateUI(); - } + render() { + const menuManager: MenuManager = MenuManager.getSingleton(); + const menuItems: MenuItem[] = menuManager.getMenuItems(); + const preference: Preference = Moon.getSingleton().preference; + const user: User = Moon.getSingleton().user; - render() { - const menuManager: MenuManager = MenuManager.getSingleton(); - const menuItems: MenuItem[] = menuManager.getMenuItems(); - const preference: Preference = Moon.getSingleton().preference; - const user: User = Moon.getSingleton().user; + return ( +
+ {preference.installed ? ( +
+
+ + avatar + +
+
+ {user.role === UserRole.GUEST ? ( + '未登录' + ) : ( + + {user.username} + + )} +
+
+ ) : ( +
+ avatar +
+ )} - return ( -
- {preference.installed ? ( -
-
- - avatar - + + {menuItems.map((menuItem: MenuItem, index: number) => { + if (menuItem.url === '/bin/list' && !preference.getRecycleBinStatus()) + return null; + return ( + + {menuItem.icon} + {menuItem.name} + + ); + })} + + + {Lang.t('layout.about')} + + +
-
- {user.role === UserRole.GUEST ? ( - "未登录" - ) : ( - - {user.username} - - )} -
-
- ) : ( -
- avatar -
- )} - - - {menuItems.map((menuItem: MenuItem, index: number) => { - if ( - menuItem.url === "/bin/list" && - !preference.getRecycleBinStatus() - ) - return null; - return ( - - {menuItem.icon} - {menuItem.name} - - ); - })} - - - {Lang.t("layout.about")} - - -
- ); - } + ); + } } diff --git a/src/pages/layout/widget/Capacity.less b/src/pages/layout/widget/Capacity.less new file mode 100644 index 0000000..9c2fa1d --- /dev/null +++ b/src/pages/layout/widget/Capacity.less @@ -0,0 +1,11 @@ +.widget-capacity { + position: absolute; + bottom: 40px; + left: 0; + right: 0; + color: #fff; + padding: 0 24px; + .capacity-text { + color: rgba(255, 255, 255, 0.65); + } +} diff --git a/src/pages/layout/widget/Capacity.tsx b/src/pages/layout/widget/Capacity.tsx new file mode 100644 index 0000000..75db112 --- /dev/null +++ b/src/pages/layout/widget/Capacity.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Progress } from 'antd'; +import TankComponent from '../../../common/component/TankComponent'; +import FileHelper from '../../../common/util/FileHelper'; +import Moon from '../../../common/model/global/Moon'; +import User from '../../../common/model/user/User'; +import { debounce } from '../../../common/util/OptimizeUtil'; +import './Capacity.less'; + +interface IProps {} + +interface IState {} + +export default class Capacity extends TankComponent { + user: User = Moon.getSingleton().user; + //持有全局唯一的实例。 + static instance: Capacity | null = null; + + refresh = debounce(() => { + this.user.httpInfo(false, () => this.updateUI()); + }, 1000); + + constructor(props: IProps) { + super(props); + Capacity.instance = this; + } + + render() { + const { user } = this; + return ( +
+ {user.totalSizeLimit !== -1 && ( + + )} +
+ {`${FileHelper.humanFileSize(user.totalSize)} / ${FileHelper.humanFileSize( + user.totalSizeLimit, + )}`} +
+
+ ); + } +} diff --git a/src/pages/matter/List.tsx b/src/pages/matter/List.tsx index 855ff47..5e13163 100644 --- a/src/pages/matter/List.tsx +++ b/src/pages/matter/List.tsx @@ -39,6 +39,7 @@ import FileHelper from '../../common/util/FileHelper'; import SafeUtil from '../../common/util/SafeUtil'; import MatterSortPanel from './widget/MatterSortPanel'; import { UploadRequestOption as RcCustomRequestOptions } from 'rc-upload/lib/interface'; +import Capacity from '../layout/widget/Capacity'; interface IProps extends RouteComponentProps {} @@ -220,12 +221,14 @@ export default class List extends TankComponent { () => { this.matter.httpSoftDeleteBatch(uuids, () => { MessageBoxUtil.success(Lang.t('operationSuccess')); + Capacity.instance?.refresh(); this.refresh(); }); }, () => { this.matter.httpDeleteBatch(uuids, () => { MessageBoxUtil.success(Lang.t('operationSuccess')); + Capacity.instance?.refresh(); this.refresh(); }); }, @@ -367,10 +370,11 @@ export default class List extends TankComponent { () => { const index = List.uploadMatters.findIndex((matter) => matter === m); List.uploadMatters.splice(index, 1); - List.instance!.refresh(); + List.instance?.refresh(); + Capacity.instance?.refresh(); }, (msg: string) => { - List.instance!.updateUI(); + List.instance?.updateUI(); SafeUtil.safeCallback(errHandle)(msg); }, ); @@ -438,6 +442,11 @@ export default class List extends TankComponent { ImagePreviewer.showMultiPhoto(imageArray, startIndex); } + delete() { + Capacity.instance?.refresh(); + this.refresh(); + } + goToDirectory(id: string) { this.searchText = null; this.pager.setFilterValue('puuid', id); @@ -643,7 +652,7 @@ export default class List extends TankComponent { director={director} matter={matter} onGoToDirectory={(id) => this.goToDirectory(id)} - onDeleteSuccess={() => this.refresh()} + onDeleteSuccess={() => this.delete()} onCheckMatter={(m) => this.checkMatter(m)} onPreviewImage={(m) => this.previewImage(m)} /> diff --git a/yarn.lock b/yarn.lock index dc1d075..ccc5705 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1889,10 +1889,10 @@ resolved "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== -"@types/react-dom@17.0.9": - version "17.0.9" - resolved "https://registry.npmmirror.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add" - integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg== +"@types/react-dom@17.0.2": + version "17.0.2" + resolved "https://registry.npmmirror.com/@types/react-dom/-/react-dom-17.0.2.tgz#35654cf6c49ae162d5bc90843d5437dc38008d43" + integrity sha512-Icd9KEgdnFfJs39KyRyr0jQ7EKhq8U6CcHRMGAS45fp5qgUvxL3ujUCfWFttUK2UErqZNj97t9gsVPNAqcwoCg== dependencies: "@types/react" "*" @@ -1922,13 +1922,12 @@ "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@17.0.20": - version "17.0.20" - resolved "https://registry.npmmirror.com/@types/react/-/react-17.0.20.tgz#a4284b184d47975c71658cd69e759b6bd37c3b8c" - integrity sha512-wWZrPlihslrPpcKyCSlmIlruakxr57/buQN1RjlIeaaTWDLtJkTtRW429MoQJergvVKc4IWBpRhWw7YNh/7GVA== +"@types/react@17.0.2": + version "17.0.2" + resolved "https://registry.npmmirror.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8" + integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA== dependencies: "@types/prop-types" "*" - "@types/scheduler" "*" csstype "^3.0.2" "@types/resolve@1.17.1":