dtid开头的用户名提示修改面板改进

Author: veedrin

app/dashboard/i18n/en_US/global.json

@@ -76,8 +76,5 @@
     "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.",
-    "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"
+    "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."
 }

app/dashboard/i18n/zh_CN/global.json

@@ -76,8 +76,5 @@
     "submitting": "提交中...",
     "eventStreamBulletin1": "尊敬的开发者，由于受 ",
     "eventStreamBulletin2": "[ event-stream 包事件 ]",
-    "eventStreamBulletin3": " 影响，您的插件需要手动删除 `yarn.lock` 文件并重新安装依赖，再推送代码发布新版本或预发布。",
-    "globalTip1": "系统检测到您的用户名尚未修改。",
-    "globalTip2": "请先进入 [ 腾讯云开发者平台 > 个人设置 ] 修改后再重新登录使用。",
-    "gotoModify": "前往修改"
+    "eventStreamBulletin3": " 影响，您的插件需要手动删除 `yarn.lock` 文件并重新安装依赖，再推送代码发布新版本或预发布。"
 }

app/dashboard/static/globalkey.png

@@ -1,18 +1,19 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import './mask.css';
-
-import i18n from '../../../utils/i18n';
+import img from '../../../static/globalkey.png';
 
 const Mask = () => {
     return (
-        <div className="dash-global-mask">
+        <div className="dash-globalmask">
             <div className="panel">
-                <div className="line">{i18n('global.globalTip1')}</div>
-                <div className="line">{i18n('global.globalTip2')}</div>
+                <div className="title">请先设置用户名</div>
+                <div className="line">1. 前往「个人设置」页面，找到用户名 (不是用户昵称) ，修改并保存。</div>
+                <img src={img} alt="" />
+                <div className="line">2. 返回并刷新该页面。</div>
                 <div className="control">
                     <a href="https://dev.tencent.com/user/account" target="_blank" rel="noopener noreferrer">
-                        <button className="com-button primary">{i18n('global.gotoModify')}</button>
+                        <button className="com-button primary">前往设置用户名</button>
                     </a>
                 </div>
             </div>

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

@@ -1,4 +1,4 @@
-.dash-global-mask {
+.dash-globalmask {
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, .6);
@@ -7,25 +7,41 @@
     left: 0;
     z-index: 100;
 }
-.dash-global-mask .panel {
-    width: 465px;
+.dash-globalmask .panel {
+    width: 600px;
     padding: 20px;
     border-radius: 5px;
     font-size: 14px;
     color: #ccc;
     background-color: #333;
+    transform: translate(-50%, -50%);
     position: absolute;
-    top: 40%;
-    left: calc(50% - 210px);
+    top: 50%;
+    left: 50%;
 }
-.dash-global-mask .panel .line {
-    padding-bottom: 5px;
+.dash-globalmask .panel .title {
+    font-size: 18px;
+    margin-bottom: 20px;
 }
-.dash-global-mask .panel .control {
-    padding-top: 20px;
+.dash-globalmask .panel .line {
+    margin-bottom: 10px;
+}
+.dash-globalmask .panel img {
+    width: calc(100% - 15px);
+    margin: 0 0 10px 15px;
+    vertical-align: middle;
+}
+.dash-globalmask .panel .control {
+    padding-top: 10px;
     text-align: center;
 }
-.dash-global-mask .panel button {
-    width: 90px;
-    height: 35px;
+.dash-globalmask .panel button {
+    width: 130px;
+    height: 40px;
+}
+
+@media screen and (max-width: 600px) {
+    .dash-globalmask .panel {
+        width: 100%;
+    }
 }

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

@@ -14,6 +14,11 @@
     border-radius: 4px;
     color: #ccc;
     background-color: #3b3b3b;
+    transition: border-color .2s ease, background-color .2s ease;
+}
+.dash-pluginset .overview .goto:hover {
+    border-color: #444;
+    background-color: #444;
 }
 .dash-pluginset .overview .desc {
     margin-top: 20px;