globalKey 以 dtid_ 开头时，全局弹窗提示修改

Author: KevenYoung

app/dashboard/i18n/en_US/global.json

@@ -71,5 +71,8 @@
     "noMessage": "No Messages yet",
     "quit": "Quit",
     "quiting": "Quiting",
-    "period": "."
+    "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"
 }

app/dashboard/i18n/zh_CN/global.json

@@ -71,5 +71,8 @@
     "noMessage": "没有私信",
     "quit": "退出",
     "quiting": "退出中",
-    "period": "。"
+    "period": "。",
+    "globalTip1": "系统检测到您的用户名尚未修改。",
+    "globalTip2": "请先进入 [ 腾讯云开发者平台 > 个人设置 ] 修改后再重新登录使用。",
+    "gotoModify": "前往修改"
 }

app/dashboard/view/home/Home.js

@@ -5,8 +5,7 @@ import { NavLink, Link, Switch, Route, Redirect } from 'react-router-dom';
 import './home.css';
 import cloudstudio from '../../static/cloudstudio.svg';
 
-import api from '../../api';
-import i18n from '../../utils/i18n';
+import Mask from './mask';
 import Stripe from '../../share/stripe';
 import Bell from '../bell';
 import Profile from './profile';
@@ -17,15 +16,27 @@ import Plugin from '../plugin';
 import Setting from '../setting';
 import About from '../about';
 
+import api from '../../api';
+import i18n from '../../utils/i18n';
+
 class Home extends Component {
-    state = {
-        isBellOn: false,
-        isProfileOn: false,
+    constructor(props) {
+        super(props);
+        this.state = {
+            loaded: false,
+            isMaskOn: true,
+            isBellOn: false,
+            isProfileOn: false,
+        };
+        this.fetchUserProfile();
     }
 
     render() {
-        const { isBellOn, isProfileOn } = this.state;
+        const { loaded, isMaskOn, isBellOn, isProfileOn } = this.state;
         const { isMbarOn, wsCount, hideMbar } = this.props;
+        if (loaded && isMaskOn) {
+            return <Mask />;
+        }
         return (
             <div id="dash-container" onClick={this.turnOffPanel}>
                 <div className="dash-mbar">
@@ -54,20 +65,22 @@ class Home extends Component {
                         <NavLink className="nav-item" activeClassName="active" to="/dashboard/plugin">{i18n('global.plugin')}</NavLink>
                         <NavLink className="nav-item" activeClassName="active" to="/dashboard/setting">{i18n('global.setting')}</NavLink>
                     </div>
-                    <Bell on={isBellOn} togglePanel={this.toggleBellPanel} />
-                    <Profile on={isProfileOn} togglePanel={this.toggleProfilePanel} />
+                    {!isMaskOn && <Bell on={isBellOn} togglePanel={this.toggleBellPanel} />}
+                    {!isMaskOn && <Profile on={isProfileOn} togglePanel={this.toggleProfilePanel} />}
                 </div>
                 <div className="dash-main">
                     <Banner />
                     <div className="dash-view">
-                        <Switch>
-                            <Route exact path="/dashboard/workspace" component={Workspace}></Route>
-                            <Route exact path="/dashboard/workspace/create" component={Create}></Route>
-                            <Route path="/dashboard/plugin" component={Plugin}></Route>
-                            <Route exact path="/dashboard/setting" component={Setting}></Route>
-                            <Route exact path="/dashboard/about" component={About}></Route>
-                            <Redirect to="/dashboard/workspace" />
-                        </Switch>
+                        {!isMaskOn && (
+                            <Switch>
+                                <Route exact path="/dashboard/workspace" component={Workspace}></Route>
+                                <Route exact path="/dashboard/workspace/create" component={Create}></Route>
+                                <Route path="/dashboard/plugin" component={Plugin}></Route>
+                                <Route exact path="/dashboard/setting" component={Setting}></Route>
+                                <Route exact path="/dashboard/about" component={About}></Route>
+                                <Redirect to="/dashboard/workspace" />
+                            </Switch>
+                        )}
                     </div>
                 </div>
             </div>
@@ -95,8 +108,6 @@ class Home extends Component {
             state: (historyState && historyState.state) ? historyState.state : undefined,
         }, '*');
         gtag('config', 'UA-65952334-9', {'page_path': window.location.pathname});
-        // 获取工作空间数量信息
-        this.fetchWorkspaceCount();
         // 缩放页面时，关闭 mbar
         window.addEventListener('resize', () => {
             const { isMbarOn } = this.props;
@@ -106,7 +117,24 @@ class Home extends Component {
         });
     }
 
-    fetchWorkspaceCount() {
+    fetchUserProfile = () => {
+        api.getUserProfile().then(res => {
+            this.setState({ loaded: true });
+            if (res.code === 0) {
+                if (!/^dtid_[a-z0-9]+/i.test(res.data.global_key)) {
+                    this.props.logIn(res.data);
+                    this.setState({ isMaskOn: false });
+                    // 获取工作空间数量信息
+                    this.fetchWorkspaceCount();
+                }
+            } else {
+                window.top.postMessage({ path: '/intro' }, '*');
+                window.location.href = '/intro';
+            }
+        });
+    }
+
+    fetchWorkspaceCount = () => {
         const { storeWorkspace } = this.props;
         // 获取工作空间
         // 获取创建工作空间数量限制
@@ -165,9 +193,8 @@ const mapState = (state) => {
 
 const mapDispatch = (dispatch) => {
     return {
-        storeWorkspace: (payload) => {
-            dispatch({ type: 'STORE_WORKSPACE', payload })
-        },
+        logIn: (payload) => dispatch({ type: 'USER_LOG_IN', payload }),
+        storeWorkspace: (payload) => dispatch({ type: 'STORE_WORKSPACE', payload }),
         hideMbar: () => dispatch({ type: 'SWITCH_MBAR_TO_OFF' }),
     }
 }

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

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import './mask.css';
+
+import i18n from '../../../utils/i18n';
+
+const Mask = () => {
+    return (
+        <div className="dash-global-mask">
+            <div className="panel">
+                <div className="line">{i18n('global.globalTip1')}</div>
+                <div className="line">{i18n('global.globalTip2')}</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>
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Mask;

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

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

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

@@ -0,0 +1,31 @@
+.dash-global-mask {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .6);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+}
+.dash-global-mask .panel {
+    width: 465px;
+    padding: 20px;
+    border-radius: 5px;
+    font-size: 14px;
+    color: #ccc;
+    background-color: #333;
+    position: absolute;
+    top: 40%;
+    left: calc(50% - 210px);
+}
+.dash-global-mask .panel .line {
+    padding-bottom: 5px;
+}
+.dash-global-mask .panel .control {
+    padding-top: 20px;
+    text-align: center;
+}
+.dash-global-mask .panel button {
+    width: 90px;
+    height: 35px;
+}

app/dashboard/view/home/profile/Profile.js

@@ -34,17 +34,6 @@ class Profile extends Component {
         );
     }
 
-    componentDidMount() {
-        api.getUserProfile().then(res => {
-            if (res.code === 0) {
-                this.props.logIn(res.data);
-            } else {
-                window.top.postMessage({ path: '/intro' }, '*');
-                window.location.href = '/intro';
-            }
-        });
-    }
-
     handleLogout = () => {
         api.logout().then(res => {
             if (res.code === 0) {
@@ -66,7 +55,6 @@ const mapState = (state) => {
 
 const mapDispatch = (dispatch) => {
     return {
-        logIn: (payload) => dispatch({ type: 'USER_LOG_IN', payload }),
         logOut: () => dispatch({ type: 'USER_LOG_OUT' }),
     }
 }