display capacity of exist

2024-04-21 12:31:55 +00:00 · 2022-04-10 22:27:58 +08:00
parent 16c84631fe
commit 1dd369fbb1
9 changed files with 237 additions and 172 deletions
@@ -1,4 +1,5 @@
 # 3.1.6
-1. 优化拖拽文件夹进行上传的错误提示
-2. 优化超出限制大小的错误提示
-3. 修复图片预览的已知错误
+1. 增加云盘剩余容量显示
+2. 优化拖拽文件夹进行上传的错误提示
+3. 优化超出限制大小的错误提示
+4. 修复一些已知问题
@@ -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",
@@ -0,0 +1,9 @@
+export const debounce = (func: Function, wait: number) => {
+    let timer: any = null;
+    return () => {
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(func, wait);
+    };
+};
@@ -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;
+        }
    }
-  }
 }
@@ -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<IProps, IState> {
-  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 (
+            <div className={`layout-side ${Sun.getSingleton().showDrawer ? 'show-drawer' : ''}`}>
+                {preference.installed ? (
+                    <div>
+                        <div className="avatar-area">
+                            <Link className="username-text" to={'/user/detail/' + user.uuid}>
+                                <img
+                                    alt="avatar"
+                                    className="avatar-middle"
+                                    src={user.getAvatarUrl()}
+                                />
+                            </Link>
+                        </div>
+                        <div className="username-area">
+                            {user.role === UserRole.GUEST ? (
+                                '未登录'
+                            ) : (
+                                <Link to={'/user/detail/' + user.uuid}>
+                                    <span className="username-text">{user.username}</span>
+                                </Link>
+                            )}
+                        </div>
+                    </div>
+                ) : (
+                    <div className="install-area">
+                        <img alt="avatar" className="install-logo" src={DefaultLogoPng} />
+                    </div>
+                )}

-    return (
-      <div
-        className={`layout-side ${
-          Sun.getSingleton().showDrawer ? "show-drawer" : ""
-        }`}
-      >
-        {preference.installed ? (
-          <div>
-            <div className="avatar-area">
-              <Link className="username-text" to={"/user/detail/" + user.uuid}>
-                <img
-                  alt="avatar"
-                  className="avatar-middle"
-                  src={user.getAvatarUrl()}
-                />
-              </Link>
+                <Menu
+                    theme="dark"
+                    selectedKeys={menuManager.getSelectedKeys()}
+                    onClick={this.onSelect.bind(this)}
+                    mode="inline"
+                >
+                    {menuItems.map((menuItem: MenuItem, index: number) => {
+                        if (menuItem.url === '/bin/list' && !preference.getRecycleBinStatus())
+                            return null;
+                        return (
+                            <Menu.Item key={menuItem.url}>
+                                {menuItem.icon}
+                                <span>{menuItem.name}</span>
+                            </Menu.Item>
+                        );
+                    })}
+                    <Menu.Item className="visible-xs" key="about">
+                        <InfoCircleOutlined />
+                        <span>{Lang.t('layout.about')}</span>
+                    </Menu.Item>
+                </Menu>
+                <Capacity />
            </div>
-            <div className="username-area">
-              {user.role === UserRole.GUEST ? (
-                "未登录"
-              ) : (
-                <Link to={"/user/detail/" + user.uuid}>
-                  <span className="username-text">{user.username}</span>
-                </Link>
-              )}
-            </div>
-          </div>
-        ) : (
-          <div className="install-area">
-            <img alt="avatar" className="install-logo" src={DefaultLogoPng} />
-          </div>
-        )}
-
-        <Menu
-          theme="dark"
-          selectedKeys={menuManager.getSelectedKeys()}
-          onClick={this.onSelect.bind(this)}
-          mode="inline"
-        >
-          {menuItems.map((menuItem: MenuItem, index: number) => {
-            if (
-              menuItem.url === "/bin/list" &&
-              !preference.getRecycleBinStatus()
-            )
-              return null;
-            return (
-              <Menu.Item key={menuItem.url}>
-                {menuItem.icon}
-                <span>{menuItem.name}</span>
-              </Menu.Item>
-            );
-          })}
-          <Menu.Item className="visible-xs" key="about">
-            <InfoCircleOutlined />
-            <span>{Lang.t("layout.about")}</span>
-          </Menu.Item>
-        </Menu>
-      </div>
-    );
-  }
+        );
+    }
 }
@@ -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);
+    }
+}
@@ -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<IProps, IState> {
+    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 (
+            <div className="widget-capacity">
+                {user.totalSizeLimit !== -1 && (
+                    <Progress
+                        percent={(user.totalSize / user.totalSizeLimit) * 100}
+                        showInfo={false}
+                        strokeColor="#215891"
+                        trailColor="#ddd"
+                    />
+                )}
+                <div className="capacity-text">
+                    {`${FileHelper.humanFileSize(user.totalSize)} / ${FileHelper.humanFileSize(
+                        user.totalSizeLimit,
+                    )}`}
+                </div>
+            </div>
+        );
+    }
+}
@@ -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<IProps, IState> {
            () => {
                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<IProps, IState> {
                    () => {
                        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<IProps, IState> {
        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<IProps, IState> {
                                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)}
                            />
@@ -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":