no message

app/Models/WebSocket.php

@@ -3,6 +3,8 @@
 namespace App\Models;
 
 
+use Request;
+
 /**
  * Class WebSocket
  *
@@ -27,4 +29,23 @@ namespace App\Models;
 class WebSocket extends AbstractModel
 {
 
+    /**
+     * 获取我自己当前以外的所有连接fd
+     * @return array
+     */
+    public static function getMyFd()
+    {
+        $fd = 0;
+        $userid = 0;
+        try {
+            $fd = Request::header('fd');
+            $userid = User::token2userid();
+        } catch (\Throwable $e) {
+
+        }
+        if ($userid && $fd) {
+            return self::whereUserid($userid)->where('fd', '!=', $fd)->pluck('fd')->toArray();
+        }
+        return [];
+    }
 }

resources/assets/js/components/UserAvatar.vue

@@ -12,7 +12,7 @@
             </div>
         </div>
         <div class="avatar-wrapper">
-            <div :class="['avatar-box', user.online ? 'online' : '']">
+            <div :class="['avatar-box', userId === userid || user.online ? 'online' : '']">
                 <WAvatar v-if="showImg" :src="user.userimg" :size="size"/>
                 <WAvatar v-else :size="size" class="avatar-text">{{nickname}}</WAvatar>
             </div>

resources/assets/js/functions/web.js

@@ -43,6 +43,7 @@
             params.header['Content-Type'] = 'application/json';
             params.header['language'] = $A.getLanguage();
             params.header['token'] = $A.store.state.userToken;
+            params.header['fd'] = $A.store.state.method.getStorageString("userWsFd");
             //
             if (params.spinner === true) {
                 let beforeCall = params.before;

resources/assets/js/pages/manage.vue

@@ -1,10 +1,22 @@
 <template>
-    <div class="manage-box">
+    <div class="manage-wrapper">
         <div class="manage-box-menu">
+            <Dropdown class="manage-box-dropdown" trigger="click" @on-click="settingRoute">
                 <div class="manage-box-title">
-                <div class="manage-box-logo"></div>
+                    <div class="manage-box-avatar">
-                <span>Doo Task</span>
+                        <UserAvatar :userid="userId" :size="36" tooltip-disabled/>
                     </div>
+                    <span>{{userInfo.nickname}}</span>
+                    <div class="manage-box-arrow">
+                        <Icon type="ios-arrow-up" />
+                        <Icon type="ios-arrow-down" />
+                    </div>
+                </div>
+                <DropdownMenu slot="list">
+                    <DropdownItem v-for="(item, key) in menu" :key="key" :name="item.path">{{$L(item.name)}}</DropdownItem>
+                    <DropdownItem divided name="signout">{{$L('退出登录')}}</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
             <ul>
                 <li @click="toggleRoute('dashboard')" :class="classNameRoute('dashboard')">
                     <Icon type="ios-speedometer-outline" />
@@ -19,10 +31,6 @@
                     <div class="menu-title">{{$L('消息')}}</div>
                     <Badge class="menu-badge" :count="dialogMsgUnread"></Badge>
                 </li>
-                <li @click="toggleRoute('setting/personal')" :class="classNameRoute('setting')">
-                    <Icon type="ios-cog-outline" />
-                    <div class="menu-title">{{$L('设置')}}</div>
-                </li>
                 <li class="menu-project">
                     <ul>
                         <li v-for="(item, key) in projectList" :key="key" @click="toggleRoute('project/' + item.id)" :class="classNameRoute('project/' + item.id)">{{item.name}}</li>
@@ -78,164 +86,6 @@
     </div>
 </template>
 
-<style lang="scss" scoped>
-:global {
-    .manage-box {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        display: flex;
-        .manage-box-menu {
-            flex-grow: 0;
-            flex-shrink: 0;
-            width: 255px;
-            height: 100%;
-            background: #F4F5F7;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            transition: all 0.2s;
-            .manage-box-title {
-                display: flex;
-                align-items: center;
-                flex-shrink: 0;
-                width: 86%;
-                padding: 6px;
-                margin-top: 27px;
-                border-radius: 8px;
-                background-color: #ffffff;
-                .manage-box-logo {
-                    width: 36px;
-                    height: 36px;
-                    background: url("../../statics/images/logo.svg") no-repeat center center;
-                    background-size: contain;
-                }
-                > span {
-                    padding-left: 12px;
-                    font-size: 16px;
-                    font-weight: 600;
-                }
-            }
-            > ul {
-                flex: 1;
-                width: 100%;
-                margin-top: 16px;
-                overflow: auto;
-                > li {
-                    display: flex;
-                    align-items: center;
-                    height: 38px;
-                    color: #6C7D8C;
-                    cursor: pointer;
-                    position: relative;
-                    width: 80%;
-                    max-width: 100%;
-                    margin: 8px auto;
-                    padding: 0 4%;
-                    border-radius: 4px;
-                    > i {
-                        opacity: 0.5;
-                        font-size: 22px;
-                        margin-right: 10px;
-                        margin-top: -1px;
-                    }
-                    .menu-title {
-                        flex: 1;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                    }
-                    .menu-badge {
-                        margin-left: 12px;
-                        transform: scale(0.9);
-                    }
-                    &.menu-project {
-                        display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                        height: auto;
-                        padding: 14px 0 0;
-                        > ul {
-                            width: 100%;
-                            > li {
-                                position: relative;
-                                list-style: none;
-                                padding: 0 8px 0 30px;
-                                height: 38px;
-                                line-height: 38px;
-                                margin: 4px auto;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                                white-space: nowrap;
-                                border-radius: 4px;
-                                color: #333333;
-                                &:before {
-                                    content: "";
-                                    position: absolute;
-                                    top: 50%;
-                                    left: 8px;
-                                    transform: translateY(-50%);
-                                    width: 12px;
-                                    height: 12px;
-                                    background: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjIyMzkwODExNTQxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI0OTk3IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxwYXRoIGQ9Ik0zNjYuMTgyNCAxMDguMjM2OEw4MTIuMDMyIDQyOC4wMzJhMTAyLjQgMTAyLjQgMCAwIDEgMCAxNjYuNTAyNEwzNjYuMTgyNCA5MTQuMzI5NmExMDIuNCAxMDIuNCAwIDAgMS0xNjIuMDk5Mi04My4yNTEyVjE5MS40ODhhMTAyLjQgMTAyLjQgMCAwIDEgMTYyLjA5OTItODMuMjUxMnoiIHAtaWQ9IjI0OTk4IiBmaWxsPSIjOTk5OTk5Ij48L3BhdGg+PC9zdmc+") no-repeat center center;
-                                    background-size: contain;
-                                }
-                                &.active {
-                                    background-color: #ffffff;
-                                }
-                            }
-                        }
-                        .common-loading {
-                            margin: 6px;
-                            width: 22px;
-                            height: 22px;
-                        }
-                    }
-                    &.active {
-                        background-color: #ffffff;
-                    }
-                }
-            }
-            .manage-box-new {
-                width: 80%;
-                height: 38px;
-                margin-top: 16px;
-                margin-bottom: 20px;
-            }
-        }
-        .manage-box-main {
-            flex: 1;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            background: white;
-            .manage-box-body {
-                width: 100%;
-                flex: 1;
-                position: relative;
-                overflow: auto;
-                display: flex;
-                flex-direction: column;
-                .manage-box-body-content {
-                    flex: 1;
-                    position: relative;
-                    .manage-box-view {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        overflow: auto;
-                    }
-                }
-            }
-        }
-    }
-}
-</style>
-
 <script>
 import { mapState } from 'vuex'
 
@@ -255,6 +105,25 @@ export default {
             addRule: {},
 
             columns: [],
+
+            menu: [
+                {
+                    path: 'personal',
+                    name: '个人设置'
+                },
+                {
+                    path: 'password',
+                    name: '密码设置'
+                },
+                {
+                    path: 'system',
+                    name: '系统设置'
+                },
+                {
+                    path: 'priority',
+                    name: '任务等级'
+                }
+            ]
         }
     },
 
@@ -267,7 +136,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['dialogMsgUnread', 'projectList']),
+        ...mapState(['userId', 'userInfo', 'dialogMsgUnread', 'projectList']),
     },
 
     watch: {
@@ -300,6 +169,20 @@ export default {
             this.goForward({path: '/manage/' + path});
         },
 
+        settingRoute(path) {
+            if (path === 'signout') {
+                $A.modalConfirm({
+                    title: '退出登录',
+                    content: '你确定要登出系统？',
+                    onOk: () => {
+                        $A.logout()
+                    }
+                });
+                return;
+            }
+            this.toggleRoute('setting/' + path);
+        },
+
         classNameRoute(path) {
             return {
                 "active": $A.leftExists(this.curPath, '/manage/' + path)

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -92,6 +92,10 @@ export default {
                 this.$nextTick(this.goBottom);
             }
             this.msgLength = list.length;
+        },
+
+        dialogId() {
+            this.msgNew = 0;
         }
     },
 

resources/assets/js/pages/manage/components/ProjectDialog.vue

@@ -27,6 +27,7 @@
         display: flex;
         flex-direction: column;
         background-color: #ffffff;
+        border-left: 1px solid #f4f5f5;
         z-index: 1;
         .project-dialog-wrapper {
             flex: 1;

resources/assets/js/pages/manage/components/ProjectList.vue

@@ -29,7 +29,7 @@
                         <Badge :count="msgUnread"></Badge>
                     </li>
                     <li class="project-icon">
-                        <Dropdown @on-click="projectDropdown" transfer>
+                        <Dropdown @on-click="projectDropdown" trigger="click" transfer>
                             <Icon type="ios-more" />
                             <DropdownMenu v-if="projectDetail.owner_userid === userId" slot="list">
                                 <DropdownItem name="setting">{{$L('项目设置')}}</DropdownItem>

resources/assets/js/pages/manage/setting/index.vue

@@ -124,10 +124,6 @@ export default {
                 {
                     path: 'priority',
                     name: '任务等级'
-                },
-                {
-                    path: 'signout',
-                    name: '退出登录'
                 }
             ]
         }
@@ -157,16 +153,6 @@ export default {
     },
     methods: {
         toggleRoute(path) {
-            if (path === 'signout') {
-                $A.modalConfirm({
-                    title: '退出登录',
-                    content: '你确定要登出系统？',
-                    onOk: () => {
-                        $A.logout()
-                    }
-                });
-                return;
-            }
             this.goForward({path: '/manage/setting/' + path});
         },
 

resources/assets/js/store/mutations.js

@@ -450,6 +450,7 @@ export default {
             const {type, msgId} = msgDetail;
             switch (type) {
                 case "open":
+                    state.method.setStorage("userWsFd", msgDetail.data.fd)
                     break
 
                 case "receipt":

resources/assets/sass/app.scss

@@ -3,6 +3,7 @@
 @import "loading";
 @import "main";
 
+@import "manage-wrapper";
 @import "dialog-wrapper";
 @import "messenger-wrapper";
 @import "project-list";

resources/assets/sass/manage-wrapper.scss

@@ -0,0 +1,184 @@
+.manage-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    .manage-box-menu {
+        position: relative;
+        flex-grow: 0;
+        flex-shrink: 0;
+        width: 255px;
+        height: 100%;
+        background: #F4F5F7;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        transition: all 0.2s;
+        .manage-box-dropdown {
+            flex-shrink: 0;
+            width: 86%;
+            .ivu-select-dropdown {
+                padding: 7px 0;
+                .ivu-dropdown-item {
+                    padding: 9px 16px;
+                }
+                .ivu-dropdown-item-divided {
+                    margin-top: 7px;
+                    &:before {
+                        top: -9px;
+                    }
+                }
+            }
+            .manage-box-title {
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+                padding: 6px 10px;
+                margin-top: 27px;
+                border-radius: 8px;
+                background-color: #ffffff;
+                cursor: pointer;
+                .manage-box-avatar {
+                    width: 36px;
+                    height: 36px;
+                }
+                > span {
+                    flex: 1;
+                    padding-left: 12px;
+                    font-size: 16px;
+                    font-weight: 600;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+                .manage-box-arrow {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    padding-left: 16px;
+                    padding-right: 2px;
+                    > i {
+                        font-size: 12px;
+                        margin: -1px;
+                    }
+                }
+            }
+        }
+        > ul {
+            flex: 1;
+            width: 100%;
+            margin-top: 16px;
+            overflow: auto;
+            > li {
+                display: flex;
+                align-items: center;
+                height: 38px;
+                color: #6C7D8C;
+                cursor: pointer;
+                position: relative;
+                width: 80%;
+                max-width: 100%;
+                margin: 8px auto;
+                padding: 0 4%;
+                border-radius: 4px;
+                > i {
+                    opacity: 0.5;
+                    font-size: 22px;
+                    margin-right: 10px;
+                    margin-top: -1px;
+                }
+                .menu-title {
+                    flex: 1;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                .menu-badge {
+                    margin-left: 12px;
+                    transform: scale(0.9);
+                }
+                &.menu-project {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    height: auto;
+                    padding: 14px 0 0;
+                    > ul {
+                        width: 100%;
+                        > li {
+                            position: relative;
+                            list-style: none;
+                            padding: 0 8px 0 30px;
+                            height: 38px;
+                            line-height: 38px;
+                            margin: 4px auto;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            border-radius: 4px;
+                            color: #333333;
+                            &:before {
+                                content: "";
+                                position: absolute;
+                                top: 50%;
+                                left: 8px;
+                                transform: translateY(-50%);
+                                width: 12px;
+                                height: 12px;
+                                background: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjIyMzkwODExNTQxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI0OTk3IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxwYXRoIGQ9Ik0zNjYuMTgyNCAxMDguMjM2OEw4MTIuMDMyIDQyOC4wMzJhMTAyLjQgMTAyLjQgMCAwIDEgMCAxNjYuNTAyNEwzNjYuMTgyNCA5MTQuMzI5NmExMDIuNCAxMDIuNCAwIDAgMS0xNjIuMDk5Mi04My4yNTEyVjE5MS40ODhhMTAyLjQgMTAyLjQgMCAwIDEgMTYyLjA5OTItODMuMjUxMnoiIHAtaWQ9IjI0OTk4IiBmaWxsPSIjOTk5OTk5Ij48L3BhdGg+PC9zdmc+") no-repeat center center;
+                                background-size: contain;
+                            }
+                            &.active {
+                                background-color: #ffffff;
+                            }
+                        }
+                    }
+                    .common-loading {
+                        margin: 6px;
+                        width: 22px;
+                        height: 22px;
+                    }
+                }
+                &.active {
+                    background-color: #ffffff;
+                }
+            }
+        }
+        .manage-box-new {
+            width: 80%;
+            height: 38px;
+            margin-top: 16px;
+            margin-bottom: 20px;
+        }
+    }
+    .manage-box-main {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        background: white;
+        .manage-box-body {
+            width: 100%;
+            flex: 1;
+            position: relative;
+            overflow: auto;
+            display: flex;
+            flex-direction: column;
+            .manage-box-body-content {
+                flex: 1;
+                position: relative;
+                .manage-box-view {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    overflow: auto;
+                }
+            }
+        }
+    }
+}

resources/assets/sass/project-list.scss

@@ -445,6 +445,8 @@
     }
     .project-table {
         height: 100%;
+        padding-top: 18px;
+        overflow-x: hidden;
         overflow-y: auto;
         .project-row {
             background-color: #ffffff;