Merge branch 'dashboard' of github.com:Coding/WebIDE-Frontend into dashboard

Author: hallee9000

app/changelog.html

@@ -14,7 +14,6 @@ const PluginArea = observer(({ position = '', childProps = {}, children, getChil
   // 如果侧边栏插件的数量超过 5 条，则只显示图标
   if (pluginsArray.filter(plugin => plugin.position === SIDEBAR.RIGHT).length > 5) {
     pluginsArray.map(plugin => {
-      console.log(plugin.label)
       if (plugin.position === SIDEBAR.RIGHT && plugin.label && typeof plugin.label === 'object') {
         plugin.label.onlyIcon = true;
       }

app/components/Plugins/component.jsx

@@ -11,3 +11,7 @@ export const markReaded = (data) => {
 export const getMessage = () => {
     return axios.get('/workspaces/message?page=1&pageSize=10');
 }
+
+export const renameGlobalKey = (data) => {
+    return axios.post('/user/modify-new-global-key', data);
+}

app/dashboard/api/global.js

@@ -43,7 +43,7 @@
     "deleting": "Deleting",
     "repoUrl": "Repo Url",
     "recentdeleted": "Recently Deleted",
-    "inputTip": "A minimum of two characters, only letters, numbers, or underscores (_), underscores (-), dots (.)",
+    "inputTip": "Only letters, numbers, or underscores (_), underscores (-), dots (.)",
     "sync": "Sync",
     "syncing": "Syncing",
     "nodata": "No Data",
@@ -72,10 +72,12 @@
     "quit": "Quit",
     "quiting": "Quiting",
     "period": ".",
-    "globalTip1": "The system has detected that your username has not been modified.",
-    "globalTip2": "Please go to [ Tencent Cloud Dev Platform > Personal Settings ] and then log in again.",
-    "gotoModify": "Go to edit",
+    "globalTip": "You have not set a username yet. Please set a username first, which will be your unique identifier on this platform.",
+    "submitting": "Submitting...",
     "eventStreamBulletin1": "Dear developer, due to ",
     "eventStreamBulletin2": "[ event-stream package event ]",
-    "eventStreamBulletin3": " Impact, your plugin needs to manually delete the `yarn.lock` file and reinstall the dependencies, then push the code to release a new version or pre-release."
+    "eventStreamBulletin3": " Impact, your plugin needs to manually delete the `yarn.lock` file and reinstall the dependencies, then push the code to release a new version or pre-release.",
+    "globalTip1": "The system has detected that your username has not been modified.",
+    "globalTip2": "Please go to [ Tencent Cloud Dev Platform > Personal Settings ] and then log in again.",
+    "gotoModify": "Go to edit"
 }

app/dashboard/i18n/en_US/global.json

@@ -43,7 +43,7 @@
     "deleting": "删除中",
     "repoUrl": "仓库地址",
     "recentdeleted": "最近删除",
-    "inputTip": "最少两个字符，仅支持字母、数字或者下划线(_)、中划线(-)、点(.)。",
+    "inputTip": "仅支持字母、数字或者下划线(_)、中划线(-)、点(.)",
     "sync": "同步",
     "syncing": "同步中",
     "nodata": "暂无数据",
@@ -72,10 +72,12 @@
     "quit": "退出",
     "quiting": "退出中",
     "period": "。",
-    "globalTip1": "系统检测到您的用户名尚未修改。",
-    "globalTip2": "请先进入 [ 腾讯云开发者平台 > 个人设置 ] 修改后再重新登录使用。",
-    "gotoModify": "前往修改",
+    "globalTip": "您还没有设置用户名，请先设置用户名，该用户名将作为您在该平台上的唯一标识。",
+    "submitting": "提交中...",
     "eventStreamBulletin1": "尊敬的开发者，由于受 ",
     "eventStreamBulletin2": "[ event-stream 包事件 ]",
-    "eventStreamBulletin3": " 影响，您的插件需要手动删除 `yarn.lock` 文件并重新安装依赖，再推送代码发布新版本或预发布。"
+    "eventStreamBulletin3": " 影响，您的插件需要手动删除 `yarn.lock` 文件并重新安装依赖，再推送代码发布新版本或预发布。",
+    "globalTip1": "系统检测到您的用户名尚未修改。",
+    "globalTip2": "请先进入 [ 腾讯云开发者平台 > 个人设置 ] 修改后再重新登录使用。",
+    "gotoModify": "前往修改"
 }

app/dashboard/i18n/zh_CN/global.json

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+
+import './mask.css';
+
+import Inbox from '../../../share/inbox';
+
+import api from '../../../api';
+import i18n from '../../../utils/i18n';
+
+class Mask extends Component {
+    state = {
+        loading: false,
+        value: '',
+        error: '',
+    }
+
+    render() {
+        const { loading, value, error } = this.state;
+        return (
+            <div className="dash-global-mask">
+                <div className="panel">
+                    <div className="line">{i18n('global.globalTip')}</div>
+                    <Inbox holder="global.inputTip" value={value} onChange={this.handleChange} />
+                    <div className={`error${error ? ' on' : ''}`}>{error}</div>
+                    {!loading ? (
+                        <button className="com-button primary" onClick={this.handleSubmit}>{i18n('global.ok')}</button>
+                    ) : <button className="com-button primary">{i18n('global.submitting')}</button>}
+                </div>
+            </div>
+        );
+    }
+
+    handleChange = (event) => {
+        this.setState({ value: event.target.value });
+    }
+
+    handleSubmit = () => {
+        const { value } = this.state;
+        this.setState({ loading: true });
+        api.renameGlobalKey({ newGlobalKey: value }).then(res => {
+            this.setState({ loading: false });
+            if (res.code === 0) {
+                window.reload();
+            } else {
+                this.setState({ error: res.msg });
+            }
+        });
+    }
+}
+
+export default Mask;

app/dashboard/view/home/mas/Mask.js

@@ -0,0 +1,3 @@
+import Mask from './Mask';
+
+export default Mask;

app/dashboard/view/home/mas/index.js

@@ -0,0 +1,42 @@
+.dash-global-mask {
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+}
+.dash-global-mask .panel {
+    width: 95%;
+    max-width: 420px;
+    padding: 15px;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #ccc;
+    background-color: #333;
+    transform: translate(-50%, -50%);
+    position: absolute;
+    top: 40%;
+    left: 50%;
+}
+.dash-global-mask .panel input {
+    margin-top: 10px;
+}
+.dash-global-mask .panel .error {
+    height: 0;
+    font-size: 12px;
+    color: #f84a4a;
+    overflow: hidden;
+    transition: height .2s ease, margin-top .2s ease;
+}
+.dash-global-mask .panel .error.on {
+    height: 16px;
+    margin-top: 5px;
+}
+.dash-global-mask .panel button {
+    min-width: 55px;
+    padding: 4px 13px;
+    margin-top: 10px;
+    font-size: 12px;
+}

app/dashboard/view/home/mas/mask.css

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import './mask.css';