From 11eb8000b359388025e835365f04a5be388790a1 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 25 Jun 2021 23:08:18 +0800
Subject: [PATCH] no message

---
 resources/assets/js/components/UserAvatar.vue |  4 +-
 resources/assets/js/pages/login.vue           | 29 +++++++-
 resources/assets/js/pages/manage.vue          | 73 +++++++++++++------
 resources/assets/js/store/actions.js          |  4 +-
 resources/assets/js/store/state.js            |  8 ++
 .../assets/sass/components/user-avatar.scss   |  5 ++
 resources/assets/sass/pages/page-login.scss   | 19 ++++-
 resources/assets/sass/pages/page-manage.scss  |  4 +
 8 files changed, 113 insertions(+), 33 deletions(-)

diff --git a/resources/assets/js/components/UserAvatar.vue b/resources/assets/js/components/UserAvatar.vue
index fd50d04c..8fdaf30e 100755
--- a/resources/assets/js/components/UserAvatar.vue
+++ b/resources/assets/js/components/UserAvatar.vue
@@ -15,7 +15,9 @@
             <div :class="['avatar-box', userId === userid || user.online ? 'online' : '']" :style="boxStyle">
                 <em :style="spotStyle"></em>
                 <EAvatar v-if="showImg" :src="user.userimg" :size="avatarSize"/>
-                <EAvatar v-else :size="avatarSize" class="avatar-text">{{nickname}}</EAvatar>
+                <EAvatar v-else :size="avatarSize" class="avatar-text">
+                    <span :style="spotStyle">{{nickname}}</span>
+                </EAvatar>
             </div>
             <div v-if="showName" class="avatar-name">{{user.nickname}}</div>
         </div>
diff --git a/resources/assets/js/pages/login.vue b/resources/assets/js/pages/login.vue
index c2740d98..9cb78a41 100644
--- a/resources/assets/js/pages/login.vue
+++ b/resources/assets/js/pages/login.vue
@@ -1,22 +1,31 @@
 <template>
     <div class="page-login">
         <PageTitle :title="$L('登录')"/>
-        <div class="login-body">
+        <div class="login-body overlay-y">
             <div class="login-logo"></div>
             <div class="login-box">
                 <div class="login-title">Welcome Dootask</div>
-                <div class="login-subtitle">{{$L('输入您的凭证以访问您的帐户。')}}</div>
+
+                <div v-if="loginType=='reg'" class="login-subtitle">{{$L('输入您的信息以创建帐户。')}}</div>
+                <div v-else class="login-subtitle">{{$L('输入您的凭证以访问您的帐户。')}}</div>
+
                 <div class="login-input">
                     <Input v-model="email" prefix="ios-mail-outline" :placeholder="$L('输入您的电子邮件')" size="large" @on-enter="onLogin" @on-blur="onBlur" />
                     <Input v-model="password" prefix="ios-lock-outline" :placeholder="$L('输入您的密码')" type="password" size="large" @on-enter="onLogin" />
+
+                    <Input v-if="loginType=='reg'" v-model="password2" prefix="ios-lock-outline" :placeholder="$L('输入确认密码')" type="password" size="large" @on-enter="onLogin" />
+
                     <Input v-if="codeNeed" v-model="code" class="login-code" :placeholder="$L('输入图形验证码')" size="large" @on-enter="onLogin">
                         <Icon type="ios-checkmark-circle-outline" class="login-icon" slot="prepend"></Icon>
                         <div slot="append" class="login-code-end" @click="reCode"><img :src="codeUrl"/></div>
                     </Input>
-                    <Button type="primary" :loading="loadIng > 0" size="large" long @click="onLogin">{{$L('登录')}}</Button>
+                    <Button type="primary" :loading="loadIng > 0" size="large" long @click="onLogin">{{$L(loginType=='login'?'登录':'注册')}}</Button>
+
+                    <div v-if="loginType=='reg'" class="login-switch">{{$L('已经有帐号？')}}<a href="javascript:void(0)" @click="loginType='login'">{{$L('登录帐号')}}</a></div>
+                    <div v-else class="login-switch">{{$L('还没有帐号？')}}<a href="javascript:void(0)" @click="loginType='reg'">{{$L('注册帐号')}}</a></div>
                 </div>
             </div>
-            <div class="login-forgot">{{$L('忘记密码了？')}}<a href="#">{{$L('重置密码')}}</a></div>
+            <div class="login-forgot">{{$L('忘记密码了？')}}<a href="javascript:void(0)" @click="forgotPassword">{{$L('重置密码')}}</a></div>
         </div>
     </div>
 </template>
@@ -33,10 +42,15 @@ export default {
             loginType: 'login',
             email: '',
             password: '',
+            password2: '',
             code: '',
         }
     },
     methods: {
+        forgotPassword() {
+            $A.modalWarning("请联系管理员！");
+        },
+
         reCode() {
             this.codeUrl = this.$store.state.method.apiUrl('users/login/codeimg?_=' + Math.random())
         },
@@ -69,6 +83,12 @@ export default {
             if (!this.password) {
                 return;
             }
+            if (this.loginType == 'reg') {
+                if (this.password != this.password2) {
+                    $A.noticeError("确认密码输入不一致");
+                    return;
+                }
+            }
             this.loadIng++;
             this.$store.dispatch("call", {
                 url: 'users/login',
@@ -80,6 +100,7 @@ export default {
                 },
             }).then(({data}) => {
                 this.loadIng--;
+                this.$store.state.method.clearLocal();
                 this.$store.dispatch("saveUserInfo", data);
                 this.goNext();
             }).catch(({data, msg}) => {
diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index db0c431f..25818269 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -1,8 +1,12 @@
 <template>
     <div class="page-manage">
         <div class="manage-box-menu">
-            <Dropdown class="manage-box-dropdown" trigger="click" @on-click="settingRoute">
-                <div class="manage-box-title">
+            <Dropdown
+                class="manage-box-dropdown"
+                trigger="click"
+                @on-click="settingRoute"
+                @on-visible-change="menuVisibleChange">
+                <div :class="['manage-box-title', visibleMenu ? 'menu-visible' : '']">
                     <div class="manage-box-avatar">
                         <UserAvatar :userid="userId" :size="36" tooltip-disabled/>
                     </div>
@@ -15,8 +19,8 @@
                 <DropdownMenu slot="list">
                     <DropdownItem
                         v-for="(item, key) in menu"
-                        v-if="!item.admin||userIsAdmin"
                         :key="key"
+                        :divided="!!item.divided"
                         :name="item.path">{{$L(item.name)}}</DropdownItem>
                     <DropdownItem divided name="signout" style="color:#f40">{{$L('退出登录')}}</DropdownItem>
                 </DropdownMenu>
@@ -143,15 +147,8 @@ export default {
 
             columns: [],
 
-            menu: [
-                {path: 'personal', admin: false, name: '个人设置'},
-                {path: 'password', admin: false, name: '密码设置'},
-                {path: 'system', admin: true, name: '系统设置'},
-                {path: 'priority', admin: true, name: '任务等级'},
-                {path: 'archivedProject', admin: false, name: '已归档项目'}
-            ],
-
             openMenu: {},
+            visibleMenu: false,
 
             archivedProjectShow: false,
 
@@ -196,6 +193,27 @@ export default {
                 num += unread;
             })
             return num;
+        },
+
+        menu() {
+            const {userIsAdmin} = this;
+            if (userIsAdmin) {
+                return [
+                    {path: 'personal', name: '个人设置'},
+                    {path: 'password', name: '密码设置'},
+                    {path: 'system', name: '系统设置', divided: true},
+                    {path: 'priority', name: '任务等级'},
+                    {path: 'project', name: '项目管理'},
+                    {path: 'user', name: '会员管理', divided: true},
+                    {path: 'archivedProject', name: '已归档的项目'}
+                ]
+            } else {
+                return [
+                    {path: 'personal', name: '个人设置'},
+                    {path: 'password', name: '密码设置'},
+                    {path: 'archivedProject', name: '已归档的项目', divided: true}
+                ]
+            }
         }
     },
 
@@ -280,22 +298,31 @@ export default {
         },
 
         settingRoute(path) {
-            if (path === 'signout') {
-                $A.modalConfirm({
-                    title: '退出登录',
-                    content: '你确定要登出系统？',
-                    onOk: () => {
-                        this.$store.dispatch("logout")
-                    }
-                });
-                return;
-            } else if (path === 'archivedProject') {
-                this.archivedProjectShow = true;
-                return;
+            switch (path) {
+                case 'project':
+                    return;
+                case 'user':
+                    return;
+                case 'archivedProject':
+                    this.archivedProjectShow = true;
+                    return;
+                case 'signout':
+                    $A.modalConfirm({
+                        title: '退出登录',
+                        content: '你确定要登出系统？',
+                        onOk: () => {
+                            this.$store.dispatch("logout")
+                        }
+                    });
+                    return;
             }
             this.toggleRoute('setting/' + path);
         },
 
+        menuVisibleChange(visible) {
+            this.visibleMenu = visible
+        },
+
         classNameRoute(path, openMenu) {
             return {
                 "active": this.curPath == '/manage/' + path,
diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js
index fda1a383..6eca2170 100644
--- a/resources/assets/js/store/actions.js
+++ b/resources/assets/js/store/actions.js
@@ -263,9 +263,11 @@ export default {
 
     /**
      * 登出（打开登录页面）
+     * @param state
      * @param dispatch
      */
-    logout({dispatch}) {
+    logout({state, dispatch}) {
+        state.method.clearLocal();
         dispatch("saveUserInfo", {}).then(() => {
             const from = window.location.pathname == '/' ? '' : encodeURIComponent(window.location.href);
             $A.goForward({path: '/login', query: from ? {from: from} : {}}, true);
diff --git a/resources/assets/js/store/state.js b/resources/assets/js/store/state.js
index 0b6b835f..3060c0a3 100644
--- a/resources/assets/js/store/state.js
+++ b/resources/assets/js/store/state.js
@@ -171,6 +171,14 @@ const method = {
         }
     },
 
+    clearLocal() {
+        try {
+            window.localStorage.clear();
+        } catch (e) {
+            //
+        }
+    },
+
     runNum(str, fixed) {
         let _s = Number(str);
         if (_s + "" === "NaN") {
diff --git a/resources/assets/sass/components/user-avatar.scss b/resources/assets/sass/components/user-avatar.scss
index 58dac10e..28207c9a 100755
--- a/resources/assets/sass/components/user-avatar.scss
+++ b/resources/assets/sass/components/user-avatar.scss
@@ -10,6 +10,11 @@
             align-items: center;
             .avatar-text {
                 background-color: $primary-color;
+                > span {
+                    display: inline-block;
+                    font-size: 15px;
+                    line-height: 1;
+                }
             }
             > em {
                 position: absolute;
diff --git a/resources/assets/sass/pages/page-login.scss b/resources/assets/sass/pages/page-login.scss
index 5dd4a560..271f5d56 100644
--- a/resources/assets/sass/pages/page-login.scss
+++ b/resources/assets/sass/pages/page-login.scss
@@ -12,15 +12,20 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        padding: 32px 0;
+        width: 100%;
+        max-height: 100%;
+        overflow: auto;
         .login-logo {
-            width: 72px;
-            height: 72px;
+            flex-shrink: 0;
+            width: 68px;
+            height: 68px;
             background: url("../images/logo.svg") no-repeat center center;
             background-size: contain;
         }
         .login-box {
             margin-top: 32px;
-            width: 450px;
+            width: 400px;
             border-radius: 12px;
             background-color: #ffffff;
             box-shadow: 0 0 10px #e6ecfa;
@@ -37,13 +42,16 @@
                 color: #AAAAAA;
             }
             .login-input {
-                margin: 40px;
+                margin: 32px 40px;
                 > * {
                     margin-top: 26px;
                 }
                 .ivu-input {
                     border-color: #f1f1f1;
                 }
+                .ivu-input-large {
+                    font-size: 15px;
+                }
                 .login-code {
                     .ivu-input-group-prepend,
                     .ivu-input-group-append {
@@ -64,6 +72,9 @@
                         }
                     }
                 }
+                .login-switch {
+                    color: #aaaaaa;
+                }
             }
         }
         .login-forgot {
diff --git a/resources/assets/sass/pages/page-manage.scss b/resources/assets/sass/pages/page-manage.scss
index ebc83f42..2bdb62e0 100644
--- a/resources/assets/sass/pages/page-manage.scss
+++ b/resources/assets/sass/pages/page-manage.scss
@@ -40,6 +40,10 @@
                 border-radius: 8px;
                 background-color: #ffffff;
                 cursor: pointer;
+                transition: box-shadow 0.3s;
+                &.menu-visible {
+                    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+                }
                 .manage-box-avatar {
                     width: 36px;
                     height: 36px;