feature: 新增创建Bucket

.gitignore

@@ -36,3 +36,4 @@ script
 static
 !static/package.json
 .eslintcache
+.history

CHANGELOG.md

@@ -0,0 +1,31 @@
+# 更新日志
+# 🚀 0.4.3
+`2021.01.06`
+- 🚀 新增
+	- 支持创建Bucket
+	- 文件列表操作hover提示
+- 🐞 修复
+	- 文件列表调整
+# 🚀 0.4.2
+`2020.11.18`
+
+- 🚀 新增
+	- 支持多AZ存储类型及归档存储类型展示
+- 🐞 修复
+	- 修复滚动无法加载的问题
+	- 选中多个文件状态下分享功能未禁用
+	- 进入文件夹中当前选中文件数量未更新
+	- 删除文件后当前选中文件数量未更新
+	- 文件图标排列未对齐
+	- 上传完成文件图标显示不正确
+	- xmind, docx, gif, jpeg等扩展名文件的图标显示不正确
+	- 点击文件/文件夹命令后错误选中文件/文件夹
+	- 新建文件夹后成功后未清空上一次输入框中的文件夹名称
+	- 搜索Bucket输入不存在的Bucket名称，错误进入上传页面
+	- 左边sidebar首次进入后没有默认选中全部文件
+	- 同步盘删除映射后选择框错误选中问题
+	- 同步盘本地文件目录显示不全
+	- 同步盘checkbox显示问题
+	- windows环境下标题栏操作按钮缩放比例较小状态下显示不全
+	- windows环境下同步盘选择框样式问题
+

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 木休大人
+Copyright (c) 2016 BAIDU
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -25,7 +25,7 @@
 - [Releases](https://github.com/mudio/bce-client/releases)
 
 ## License
-MIT © [木休大人](https://github.com/mudio)
+MIT © BAIDU
 
 [travis-url]: https://travis-ci.org/mudio/bce-client
 [travis-image]: https://img.shields.io/travis/mudio/bce-client/master.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Imljb24tbWFjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTUgMTUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE1IDE1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6bm9uZTtzdHJva2U6IzlEOUQ5RDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQo8L3N0eWxlPgo8ZyBpZD0ibWFjIj4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yLjA2LDkuMDc1YzAtMC4xODUsMC0wLjM3MSwwLTAuNTU2QzIuMDYzLDguNSwyLjA2OCw4LjQ4MiwyLjA3LDguNDY0YzAuMDI2LTAuMjEzLDAuMDQtMC40MjgsMC4wODEtMC42MzgKCQljMC4xNDEtMC43MzEsMC40NTItMS4zNzksMC45OTEtMS45YzAuNTUzLTAuNTM0LDEuMjE2LTAuODI3LDEuOTktMC44NDdDNS40ODUsNS4wNyw1LjgxNyw1LjE3Myw2LjE0Niw1LjI4NwoJCWMwLjI4OSwwLjEsMC41NzgsMC4yMDMsMC44NjgsMC4zMDNjMC4xMzQsMC4wNDYsMC4yNjcsMC4wNDUsMC40MDItMC4wMDNjMC4yNzMtMC4wOTgsMC41NDgtMC4xOSwwLjgyMS0wLjI4OAoJCWMwLjMwNy0wLjExMSwwLjYyLTAuMjAxLDAuOTQ1LTAuMjQyYzAuMjgxLTAuMDM1LDAuNTU4LTAuMDA1LDAuODM1LDAuMDQ2YzAuNTc4LDAuMTA4LDEuMDkzLDAuMzQyLDEuNTE4LDAuNzU3CgkJYzAuMTMzLDAuMTI5LDAuMjUxLDAuMjcxLDAuMzUyLDAuNDI0Yy0wLjAwNiwwLjAwOC0wLjAwOCwwLjAxMi0wLjAxMSwwLjAxNGMtMC4wMTQsMC4wMS0wLjAyOCwwLjAxOS0wLjA0MiwwLjAyOAoJCWMtMC4zNSwwLjIyNy0wLjY1NywwLjUwMS0wLjg4MywwLjg1NWMtMC40MiwwLjY1Ny0wLjQ5LDEuMzcyLTAuMzMzLDIuMTE4YzAuMTMxLDAuNjIsMC40NzIsMS4xMTMsMC45NjEsMS41MDgKCQljMC4xOTQsMC4xNTYsMC40MDIsMC4yOSwwLjYzNiwwLjM4MWMwLDAuMDA4LDAsMC4wMTcsMCwwLjAyNWMtMC4wMDUsMC4wMDktMC4wMTEsMC4wMTctMC4wMTQsMC4wMjcKCQljLTAuMDY5LDAuMTgzLTAuMTMzLDAuMzY4LTAuMjA4LDAuNTQ4Yy0wLjIzNSwwLjU2Ny0wLjU1MywxLjA4Ni0wLjkyMSwxLjU3NmMtMC4yMTMsMC4yODMtMC40MzUsMC41NTgtMC43MTcsMC43NzgKCQljLTAuMzQ4LDAuMjcyLTAuNzM1LDAuNC0xLjE3OSwwLjMyM2MtMC4yNjMtMC4wNDUtMC41MTItMC4xMzMtMC43NTctMC4yMzRDOC4wODYsMTQuMDk0LDcuNzQyLDE0LDcuMzc5LDE0CgkJYy0wLjI3OCwwLTAuNTQ4LDAuMDUyLTAuODEsMC4xNDJjLTAuMjQyLDAuMDgzLTAuNDgsMC4xODEtMC43MjMsMC4yNmMtMC4xMzcsMC4wNDUtMC4yODEsMC4wNjctMC40MjIsMC4wOTkKCQljLTAuMDg0LDAtMC4xNjksMC0wLjI1MywwYy0wLjA5MS0wLjAyNC0wLjE4NC0wLjA0MS0wLjI3My0wLjA3MmMtMC4yOS0wLjEtMC41Mi0wLjI5MS0wLjczMy0wLjUwMQoJCWMtMC4zMy0wLjMyNS0wLjU5NS0wLjcwMy0wLjg1My0xLjA4NWMtMC40MTItMC42MTEtMC43MDQtMS4yNzktMC45MjMtMS45ODFDMi4yMzIsMTAuMzU5LDIuMTI0LDkuODQ2LDIuMDgzLDkuMzIKCQlDMi4wNzYsOS4yMzcsMi4wNjcsOS4xNTYsMi4wNiw5LjA3NXoiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05LjkzLDAuNWMwLjAyLDAuMjY1LDAuMDEyLDAuNTMtMC4wMzUsMC43OTJjLTAuMSwwLjU0Ni0wLjM0NCwxLjAyMy0wLjY5MiwxLjQ0OQoJCUM4LjksMy4xMTEsOC41NDMsMy40MTMsOC4wOTMsMy41OUM3LjgsMy43MDUsNy40OTYsMy43NTIsNy4xODIsMy43M2MtMC4wMTktMC4wMDEtMC4wMzctMC4wMDUtMC4wNi0wLjAwOAoJCWMwLTAuMTgxLTAuMDE1LTAuMzYxLDAuMDAyLTAuNTM5YzAuMTEtMS4xMjEsMS4wMjctMi4zLDIuNDM2LTIuNjMyQzkuNjUsMC41MzEsOS43NDEsMC41MTcsOS44MzEsMC41CgkJQzkuODY0LDAuNSw5Ljg5NywwLjUsOS45MywwLjV6Ii8%2BCjwvZz4KPC9zdmc%2BCg%3D%3D

app/bce/components/common/SystemBar.css

@@ -7,11 +7,12 @@
 .container div {
     color: #ccc;
     width: 35px;
+    height: 100%;
     display: flex;
     cursor: pointer;
     line-height: 24px;
     justify-content: center;
-    transition: 0.3s ease-in,color 0.3s ease-in;
+    transition: .3s ease-in, color .3s ease-in;
 }
 
 .container .exit,
@@ -22,7 +23,7 @@
 
 .container .exit:hover {
     color: #fff;
-    background-color: #f06a6a;
+    background-color: #ff4d4f;
 }
 
 .container .min:hover,

app/bos/actions/context.js

@@ -24,13 +24,13 @@ export const commandMap = {
     [MENU_UPLOAD_COMMAND]: {name: '上传', icon: 'cloud-upload', command: MENU_UPLOAD_COMMAND},
     [MENU_UPLOAD_DIRECTORY_COMMAND]: {name: '上传目录', icon: 'cloud-upload', command: MENU_UPLOAD_DIRECTORY_COMMAND},
     [MENU_REFRESH_COMMAND]: {name: '刷新', icon: 'refresh', command: MENU_REFRESH_COMMAND},
-    [MENU_COPY_COMMAND]: {name: '复制到', icon: 'copy', command: MENU_COPY_COMMAND},
-    [MENU_TRASH_COMMAND]: {name: '删除', icon: 'trash', command: MENU_TRASH_COMMAND},
-    [MENU_SHARE_COMMAND]: {name: '分享', icon: 'chain', command: MENU_SHARE_COMMAND},
+    [MENU_COPY_COMMAND]: {name: '复制到', icon: 'copy', title: '复制文件', command: MENU_COPY_COMMAND},
+    [MENU_TRASH_COMMAND]: {name: '删除', icon: 'trash', title: '删除文件', command: MENU_TRASH_COMMAND},
+    [MENU_SHARE_COMMAND]: {name: '分享', icon: 'chain', title: '复制链接', command: MENU_SHARE_COMMAND},
     [MENU_MOVE_COMMAND]: {name: '移动到', icon: 'arrows', command: MENU_MOVE_COMMAND},
     [MENU_VIEW_COMMAND]: {name: '查看', icon: 'eye', command: MENU_VIEW_COMMAND},
-    [MENU_RENAME_COMMAND]: {name: '重命名', icon: 'pencil', command: MENU_RENAME_COMMAND},
-    [MENU_DOWNLOAD_COMMAND]: {name: '下载', icon: 'cloud-download', command: MENU_DOWNLOAD_COMMAND},
+    [MENU_RENAME_COMMAND]: {name: '重命名', icon: 'pencil', title: '重命名文件', command: MENU_RENAME_COMMAND},
+    [MENU_DOWNLOAD_COMMAND]: {name: '下载', icon: 'cloud-download', title: '下载文件', command: MENU_DOWNLOAD_COMMAND},
     [MENU_NEW_DIRECTORY_COMMAND]: {name: '新建文件夹', icon: 'plus', command: MENU_NEW_DIRECTORY_COMMAND},
     [MENU_NEW_MAPPING_COMMAND]: {name: '创建同步盘', icon: 'plus', command: MENU_NEW_MAPPING_COMMAND}
 };

app/bos/actions/window.js

@@ -51,7 +51,7 @@ export function listMoreObjects(bucketName, prefix = '', marker = '') {
         [API_TYPE]: {
             types: [LIST_MORE_REQUEST, LIST_MORE_SUCCESS, LIST_MORE_FAILURE],
             method: 'listObjects',
-            args: [bucketName, {delimiter: '/', prefix, marker, maxKeys: 200}]
+            args: [bucketName, {delimiter: '/', prefix, marker, maxKeys: 1000}]
         }
     };
 }
@@ -126,7 +126,13 @@ export function migrationObject(config, removeSource = false) {
         const objects = await client.listAllObjects(sourceBucket, sourceObject);
         // 控制一下copy速率，250ms最多执行5次
         const throttledTask = throttle((item, targetKey) => dispatch(
-            copyObject(sourceBucket, item, targetBucket, targetKey)
+            copyObject(
+                sourceBucket,
+                item,
+                targetBucket,
+                targetKey,
+                {'x-bce-storage-class': item.storageClass}
+            )
         ).then(res => {
             const {error, response} = res;
 

app/bos/api/client.js

@@ -5,6 +5,7 @@
  * @author mudio([email protected])
  */
 
+import _ from 'lodash';
 import url from 'url';
 import {isString} from 'util';
 import {BosClient} from '@baiducloud/sdk';
@@ -22,6 +23,18 @@ export class Client extends BosClient {
         this.credentials = credentials;
     }
 
+    createBucket(bucketName, options) {
+        return super.createBucket(bucketName, options);
+    }
+
+    putBucketStorageclass(bucketName, storageClass, options) {
+        return super.putBucketStorageclass(bucketName, storageClass, options);
+    }
+
+    putBucketAcl(bucketName, acl, options) {
+        return super.putBucketAcl(bucketName, acl, options);
+    }
+
     listBuckets(config = {}) {
         const {forceUpdate, search} = config;
 
@@ -42,9 +55,15 @@ export class Client extends BosClient {
 
         return super.listBuckets().then(res => {
             const {buckets, owner} = res.body;
+            const response = _.cloneDeep(res.body);
+            // hanle multi-az property
+            response.buckets = response.buckets.map(bucket => ({
+                ...bucket,
+                enableMultiAz: !!bucket.enableMultiAz
+            }));
 
             try {
-                sessionStorage.setItem('buckets', JSON.stringify(res.body));
+                sessionStorage.setItem('buckets', JSON.stringify(response));
             } catch (ex) {} // eslint-disable-line
 
             if (search) {
@@ -54,7 +73,10 @@ export class Client extends BosClient {
                 };
             }
 
-            return {owner, buckets};
+            return {
+                owner,
+                buckets
+            };
         });
     }
 

app/bos/components/app/SideBar.css

@@ -29,7 +29,7 @@
     align-items: center;
     padding-left: 40px;
     text-decoration: blink;
-    transition: background 0.3s ease-in,color 0.3s ease-in;
+    transition: background .3s ease-in, color .3s ease-in;
 }
 
 .item:before {
@@ -99,7 +99,7 @@
 }
 
 .active .badge {
-    background: rgba(10, 84, 183, 0.5);
+    background: rgba(10, 84, 183, .5);
     color: #fff;
 }
 
@@ -108,14 +108,14 @@
     flex-flow: column nowrap;
 }
 
-.tool>span {
+.tool > span {
     cursor: pointer;
     font-size: 12px;
     color: #8692b2;
     margin-left: 40px;
     line-height: 24px;
 }
 
-.tool>span:hover {
+.tool > span:hover {
     color: #2eacfc;
 }

app/bos/components/app/SideBar.js

@@ -43,6 +43,13 @@ class SideBar extends Component {
                     <NavLink to="/region"
                         className={`${styles.item} ${styles.region}`}
                         activeClassName={styles.active}
+                        isActive={(match, location) => {
+                            if (!location || !location.pathname || !['/upload', '/download', '/complete', '/sync'].includes(location.pathname)) {
+                                return true;
+                            }
+
+                            return false;
+                        }}
                     >
                         全部文件
                     </NavLink>
@@ -84,9 +91,6 @@ class SideBar extends Component {
                     <BrowserLink linkTo="https://cloud.baidu.com/doc/BOS/s/Ok1rk605h">
                         开发者文档
                     </BrowserLink>
-                    <BrowserLink linkTo="https://github.com/leeight/bce-bos-uploader/">
-                        Web Uploader
-                    </BrowserLink>
                     <BrowserLink linkTo="https://github.com/baidubce/bce-sdk-js">
                         JavaScript SDK
                     </BrowserLink>

app/bos/components/common/Selection.css

@@ -12,8 +12,8 @@
     left: 0;
     border-radius: 3px;
     position: absolute;
-    background: rgba(68, 76, 99, 0.1);
-    border: 1px solid rgba(68, 76, 99, 0.2);
+    background: rgba(68, 76, 99, .1);
+    border: 1px solid rgba(68, 76, 99, .2);
 }
 
 :global .selectionItem {
@@ -37,6 +37,7 @@
     color: #3b8cff;
     visibility: hidden;
     position: absolute;
+    font-size: 16px;
 }
 
 :global .selectionItem:hover .checkbox {

app/bos/components/common/Selection.js

@@ -11,6 +11,13 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import React, {Component} from 'react';
 
+import {
+    MENU_RENAME_COMMAND,
+    MENU_COPY_COMMAND,
+    MENU_SHARE_COMMAND,
+    MENU_DOWNLOAD_COMMAND,
+    MENU_TRASH_COMMAND
+} from '../../actions/context';
 import styles from './Selection.css';
 
 export default class Selection extends Component {
@@ -87,6 +94,19 @@ export default class Selection extends Component {
         evt.preventDefault();
         evt.stopPropagation();
 
+        const supportCommands = [
+            MENU_RENAME_COMMAND,
+            MENU_COPY_COMMAND,
+            MENU_SHARE_COMMAND,
+            MENU_DOWNLOAD_COMMAND,
+            MENU_TRASH_COMMAND
+        ].map(item => item.toString());
+
+        // 如果点击文件命令，则不选中当前文件
+        if (supportCommands.includes(_.get(evt, 'target.id'))) {
+            return;
+        }
+
         const {enabled} = this.props;
         const {ctrlKey, shiftKey} = evt;
         const keys = Object.keys(this.__selectedCache);
@@ -112,9 +132,9 @@ export default class Selection extends Component {
     }
 
     _onKeyDown = (evt) => {
-        const {keyCode, ctrlKey, metaKey} = evt;
+        const {key, ctrlKey, metaKey} = evt;
 
-        if (keyCode === 65 && (ctrlKey || metaKey)) {
+        if (key === 'a' && (ctrlKey || metaKey)) {
             evt.preventDefault();
             this.selectAll();
         }
@@ -249,7 +269,8 @@ export default class Selection extends Component {
             );
 
             return (
-                <div key={child.key}
+                <div
+                    key={child.key}
                     className={styleName}
                     onClick={evt => this._onSelectItem(evt, child.key)}
                     onContextMenu={evt => this._onContextMenu(evt, child.key)}

app/bos/components/common/SystemBar.css

@@ -1,6 +1,6 @@
 
 .container {
-    height: 25px;
+    min-height: 24px;
     display: flex;
     justify-content: flex-end;
     -webkit-app-region: drag;
@@ -12,8 +12,9 @@
     display: flex;
     cursor: pointer;
     line-height: 24px;
+    min-height: 24px;
     justify-content: center;
-    transition: 0.3s ease-in,color 0.3s ease-in;
+    transition: .3s ease-in,color .3s ease-in;
 }
 
 .title {

app/bos/components/explorer/Bucket.css

@@ -2,15 +2,15 @@
 .container {
     display: flex;
     width: 90px;
-    min-height: 80px;
+    height: 90px;
     color: #666;
     cursor: pointer;
     margin: 5px 0 0 5px;
     border-radius: 5px;
     flex-flow: column wrap;
     align-self: flex-start;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     user-select: none;
 }
 
@@ -19,15 +19,16 @@
 }
 
 .text {
-    display: inline-flex;
-    flex: auto;
-    width: 90%;
+    width: 95%;
     font-size: 12px;
-    overflow: hidden;
     text-align: center;
-    align-items: center;
+    overflow: hidden;
+    display: -webkit-box;
+    word-wrap: break-word;
     word-break: break-all;
-    justify-content: center;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
 }
 
 .bucketicon {

app/bos/components/explorer/Bucket.js

@@ -7,6 +7,7 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
+import {Tooltip} from 'antd';
 
 import styles from './Bucket.css';
 
@@ -31,7 +32,9 @@ export default class Bucket extends Component {
         return (
             <div className={styles.container} onClick={this._triggerClick}>
                 <i className={`${styles.bucketicon} asset-bucket`} />
-                <span className={styles.text} alt={item.creationDate}>{item.name}</span>
+                <Tooltip placement="bottom" title={item.name}>
+                    <span className={styles.text} alt={item.creationDate}>{item.name}</span>
+                </Tooltip>
             </div>
         );
     }

app/bos/components/explorer/BucketCreate.css

@@ -0,0 +1,9 @@
+
+.link {
+    color: #1890ff;
+    cursor: pointer;
+}
+
+.tipFocus {
+    color: #f7a73f;
+}