请求聊天总数设置已读改为websocket模式

2025-01-12 01:54:15 +08:00 · 2025-01-12 01:54:15 +08:00 · 7bfb2df8de
commit 7bfb2df8de
parent 6a0e09c90e
22 changed files with 1107 additions and 138 deletions
--- a/src/main/java/com/dd/admin/business/chat/controller/ChatController.java
+++ b/src/main/java/com/dd/admin/business/chat/controller/ChatController.java
@ -3,8 +3,10 @@ package com.dd.admin.business.chat.controller;
 import cn.hutool.core.bean.BeanUtil;
 import cn.hutool.core.date.DateUtil;
 import cn.hutool.extra.pinyin.PinyinUtil;
-import com.dd.admin.business.chat.domain.AuthorChat;
-import com.dd.admin.business.chat.domain.MessageBean;
+import com.dd.admin.business.api.domain.UnReadCountBean;
+import com.dd.admin.business.chat.domain.*;
+import com.dd.admin.common.aop.operationLog.aop.OperLog;
+import com.dd.admin.common.aop.operationLog.aop.OperType;
 import com.github.xiaoymin.knife4j.annotations.ApiOperationSupport;
 import org.springframework.web.bind.annotation.*;
 import io.swagger.annotations.Api;
@ -16,8 +18,6 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.validation.annotation.Validated;
 import javax.validation.constraints.NotBlank;
 import com.dd.admin.business.chat.entity.Chat;
-import com.dd.admin.business.chat.domain.ChatVo;
-import com.dd.admin.business.chat.domain.ChatDto;
 import com.dd.admin.business.chat.service.ChatService;

 import java.util.*;
@ -52,6 +52,16 @@ public class ChatController {
        return calendar.getTimeInMillis();
    }

+
+    @ApiOperation(value = "查询客服未读消息数量")
+    @ApiOperationSupport(order = 1)
+    @GetMapping("/admin/chat/getUnReadCount")
+    @OperLog(operModule = "查询客服未读消息数量",operType = OperType.OTHER,operDesc = "查询客服未读消息数量")
+    public ResultBean getUnReadCount() {
+        Integer chatUnReadCount = chatService.selectUnReadCount("8");
+        return ResultBean.success(chatUnReadCount);
+    };
+
    @ApiOperation(value = "作者列表")
    @ApiOperationSupport(order = 2)
    @GetMapping("/admin/chat/authorList")
@ -98,6 +108,17 @@ public class ChatController {
    }


+
+    @ApiOperation(value = "读取聊天消息")
+    @ApiOperationSupport(order = 4)
+    @PostMapping("/admin/chat/readAuthorMessage")
+    @OperLog(operModule = "读取回复消息", operType = OperType.OTHER, operDesc = "读取聊天消息")
+    public ResultBean readReplyMessage(@RequestBody AuthorParam authorParam) {
+        chatService.readMessage(authorParam.getAuthorId(),"8");
+        return ResultBean.success("noAlert");
+    }
+
+
    @ApiOperation(value = "-分页列表")
    @ApiOperationSupport(order = 1)
    @GetMapping("/admin/chat/page")
--- a/src/main/java/com/dd/admin/business/chat/domain/AuthorParam.java
+++ b/src/main/java/com/dd/admin/business/chat/domain/AuthorParam.java
@ -0,0 +1,12 @@
+package com.dd.admin.business.chat.domain;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+public class AuthorParam {
+    private String authorId;
+}
--- a/src/main/java/com/dd/admin/business/chat/mapper/xml/ChatMapper.xml
+++ b/src/main/java/com/dd/admin/business/chat/mapper/xml/ChatMapper.xml
@ -113,58 +113,52 @@


    <select id="selectAuthorChatList" resultType="com.dd.admin.business.chat.domain.AuthorChat">
-              SELECT
-                    wa.AUTHOR_ID id,
-                    wa.AUTHOR_NAME displayName,
-                    wa.AVATAR_URL avatar,
-                    wa.AUTHOR_NAME AS 'index',
-                    wb.unReadCount unRead,
-                    wb.content lastContent,
-                    wb.create_time
+           SELECT
+            *
+        FROM
+            (
+                SELECT
+                    a.FROM_ID AS id,
+                    b.AUTHOR_NAME AS displayName,
+              b.AUTHOR_NAME AS 'index',
+                    b.AVATAR_URL AS avatar,
+                    a.content lastContent,
+                    a.create_time,
+                    (
+                        SELECT
+                            count(1)
+                        FROM
+                            business_chat ca
+                        WHERE
+                            ca.FROM_ID = a.FROM_ID
+                        AND ca.to_id = '8'
+                        AND ca.MESSAGE_STATUS = 0
+                    ) AS unRead
                FROM
-                    business_author wa
-                LEFT JOIN (
+                    business_chat a
+                LEFT JOIN business_author b ON a.FROM_ID = b.AUTHOR_ID
+                WHERE
+                    a.TO_ID = '8'
+                UNION ALL
                    SELECT
-                        a.FROM_ID AS authorId,
-                        a.FROM_NAME AS authorName,
-                        b.AVATAR_URL AS authorAvatar,
-                        a.content,
+                        a.TO_ID AS id,
+                        b.AUTHOR_NAME AS displayName,
+                b.AUTHOR_NAME AS 'index',
+                        b.AVATAR_URL AS avatar,
+                        a.content lastContent,
                        a.create_time,
-                        (
-                            SELECT
-                                count(1)
-                            FROM
-                                business_chat ca
-                            WHERE
-                                ca.FROM_ID = a.FROM_ID
-                            AND ca.to_id = #{authorId}
-                            AND ca.MESSAGE_STATUS = 0
-                        ) AS unReadCount
+                        0 AS unRead
                    FROM
                        business_chat a
-                    LEFT JOIN business_author b ON a.FROM_ID = b.AUTHOR_ID
+                    LEFT JOIN business_author b ON a.TO_ID = b.AUTHOR_ID
                    WHERE
-                        a.TO_ID = #{authorId}
-                    UNION ALL
-                        SELECT
-                            a.TO_ID AS authorId,
-                            a.TO_NAME AS authorName,
-                            b.AVATAR_URL AS authorAvatar,
-                            a.content,
-                            a.create_time,
-                            0 AS unReadCount
-                        FROM
-                            business_chat a
-                        LEFT JOIN business_author b ON a.TO_ID = b.AUTHOR_ID
-                        WHERE
-                            a.FROM_ID = #{authorId}
-                        ORDER BY
-                                    create_time DESC
-                        ) wb ON wa.author_id = wb.authorId
-                        where wa.AUTHOR_ID != #{authorId}
-                        GROUP BY
-                            wa.author_id
-                        ORDER BY
-                            wb.create_time DESC
+                        a.FROM_ID = '8'
+                    ORDER BY
+                        create_time DESC
+            ) a1
+        GROUP BY
+            a1.id
+        ORDER BY
+            create_time DESC
    </select>
 </mapper>
--- a/src/main/java/com/dd/admin/business/operationLog/domain/OperationLogVo.java
+++ b/src/main/java/com/dd/admin/business/operationLog/domain/OperationLogVo.java
@ -27,6 +27,10 @@ public class OperationLogVo {
    @ApiModelProperty(value = "日志id")
    private String operId;

+    @ApiModelProperty(value = "操作ip")
+    @TableField("OPER_IP_ADDRESS")
+    private String operIpAddress;
+
    @ApiModelProperty(value = "请求模块")
    private String operModule;

--- a/src/main/java/com/dd/admin/business/webSocket/handler/GetReadCoutMessageHandler.java
+++ b/src/main/java/com/dd/admin/business/webSocket/handler/GetReadCoutMessageHandler.java
@ -0,0 +1,26 @@
+package com.dd.admin.business.webSocket.handler;
+
+import com.dd.admin.business.chat.service.ChatService;
+import com.dd.admin.business.webSocket.MsgHandlerInterface;
+import com.dd.admin.business.webSocket.util.TioUtil;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.tio.core.ChannelContext;
+
+import java.util.Map;
+
+
+@Slf4j
+@Service("8")
+public class GetReadCoutMessageHandler implements MsgHandlerInterface {
+    @Autowired
+    ChatService chatService;
+    @Override
+    public Object handler(Map map, ChannelContext context) {
+        String authorId = String.valueOf(map.get("authorId"));
+        Integer unReadCount = chatService.selectUnReadCount(authorId);
+        TioUtil.sendChatMessageToUser(context.getGroupContext(),authorId,"8",unReadCount);
+        return null;
+    }
+}
--- a/src/main/java/com/dd/admin/business/webSocket/handler/ReadMessageHandler.java
+++ b/src/main/java/com/dd/admin/business/webSocket/handler/ReadMessageHandler.java
@ -0,0 +1,27 @@
+package com.dd.admin.business.webSocket.handler;
+
+import com.dd.admin.business.chat.service.ChatService;
+import com.dd.admin.business.webSocket.MsgHandlerInterface;
+import com.dd.admin.business.webSocket.util.TioUtil;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Component;
+import org.springframework.stereotype.Service;
+import org.tio.core.ChannelContext;
+
+import java.util.Map;
+
+
+@Slf4j
+@Service("7")
+public class ReadMessageHandler implements MsgHandlerInterface {
+    @Autowired
+    ChatService chatService;
+    @Override
+    public Object handler(Map map, ChannelContext context) {
+        String authorId = String.valueOf(map.get("authorId"));
+        String loginId = String.valueOf(map.get("loginId"));
+        chatService.readMessage(authorId,loginId);
+        return null;
+    }
+}
--- a/web/.env.development
+++ b/web/.env.development
@ -3,8 +3,9 @@ ENV = 'development'

 # base api
 VUE_APP_BASE_API = 'http://127.0.0.1:8080'
+VUE_APP_WEBSOCKET_API = 'ws://192.168.10.98:9326'

 # system name
-VUE_APP_SYSTEM_NAME = 'DD ADMIN'
+VUE_APP_SYSTEM_NAME = '小红书社区后台管理系统'

 VUE_APP_SYSTEM_LOGO = 'logo.png'
--- a/web/.env.production
+++ b/web/.env.production
@ -3,8 +3,9 @@ ENV = 'production'

 # base api
 VUE_APP_BASE_API = 'http://8.146.211.120:8080'
-VUE_APP_WEBSOCKET_API = 'ws://8.146.211.120:9326/'
+VUE_APP_WEBSOCKET_API = 'ws://8.146.211.120:9326'
 # system name
-VUE_APP_SYSTEM_NAME = 'DD STORE'
+VUE_APP_SYSTEM_NAME = '小红书社区后台管理系统'

+VUE_APP_SYSTEM_LOGO = 'logo.png'

--- a/web/src/api/business/chat/chat.js
+++ b/web/src/api/business/chat/chat.js
@ -54,3 +54,24 @@ export function getAuthorChat(params) {
    params
  })
 }
+
+
+export function getUnReadCount() {
+  return request({
+    url: '/admin/chat/getUnReadCount',
+    method: 'get',
+  })
+}
+
+
+
+export function readAuthorMessage(data) {
+  return request({
+    url: '/admin/chat/readAuthorMessage',
+    method: 'post',
+    data: data,
+    noLoading:true
+  })
+}
+
+
--- a/web/src/api/websocket.js
+++ b/web/src/api/websocket.js
@ -1,3 +1,5 @@
+import {error} from "@/utils";
+
 class WebSocketManager {
  constructor() {
    this.webSocketInstance = null; // WebSocket实例对象，使用更清晰的命名
@ -32,6 +34,16 @@ class WebSocketManager {
      }
      console.log("连接WebSocket");
      this.webSocketInstance = new WebSocket(url);
+
+      const timeoutTimer = setTimeout(() => {
+        console.log(this.isConnected)
+        if (!this.isConnected) {
+          error("WebSocket连接超时")
+        }
+        clearTimeout(timeoutTimer)
+      }, 5000);
+
+
      this.webSocketInstance.onmessage = (event) => {
        const data = event.data;
        if (data === 'pong') {
@ -53,6 +65,8 @@ class WebSocketManager {
        console.log("WebSocket连接成功");
        this.isConnected = true;
        this.heartbeatCheck.start();
+
+        this.onConnectCallback && this.onConnectCallback();
      };

      // 连接发生错误的回调方法
--- a/web/src/assets/logo.png
+++ b/web/src/assets/logo.png
--- a/web/src/layout/components/Navbar.vue
+++ b/web/src/layout/components/Navbar.vue
@ -4,9 +4,6 @@

    <breadcrumb class="breadcrumb-container" />

-
-
-
    <div class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
@ -39,14 +36,21 @@

    <div class="right-menu" style="margin-right: 20px;">
      <div class="top-icon" @click="openIm">
-        <el-badge :value="200" :max="99" >
+        <el-badge v-show="unReadCount>0" :value="unReadCount" :max="99" >
+          客服消息
          <i class="el-icon-bell"></i>
        </el-badge>
+        <template v-show="unReadCount==0">
+          客服消息
+          <i class="el-icon-bell"></i>
+        </template>
      </div>
    </div>

    <UpdatePassword ref="updatePass"/>
-    <Im ref="im"/>
+    <Im ref="im" />
+
+
  </div>
 </template>

@ -56,13 +60,16 @@ import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 import UpdatePassword from '@/views/common/system/UpdatePassword'
 import Im from "@/views/common/Im";
+import {getUnReadCount} from "@/api/business/chat/chat";
+import webSocketManager from "@/api/websocket";
+import {isNotEmpty} from "@/utils";

 export default {
  components: {
    UpdatePassword,
    Breadcrumb,
    Hamburger,
-    Im
+    Im,
  },
  computed: {
    ...mapGetters([
@ -71,6 +78,37 @@ export default {
      'avatar'
    ])
  },
+  data() {
+    return {
+      unReadCount:0
+    }
+  },
+  mounted() {
+    // 设置收到消息回调函数
+    webSocketManager.onMessage((data) => {
+      console.log('我是Navbar的mounted')
+      console.log(data.handlerType)
+      if(data.handlerType == '6'){
+        console.log(JSON.stringify(data.body))
+        const {IMUI} = this.$refs.im.$refs;
+        try {
+          IMUI.appendMessage(data.body);
+          IMUI.messageViewToBottom()
+          const contactId = this.$refs.im.contact.id
+          if(isNotEmpty(contactId)&&contactId==data.body.toContactId){
+            console.log('当前在该用户聊天框 设置为已读')
+          }
+        }catch (e) {
+        }
+
+        //请求总数
+        this.$refs.im.getUnReadCount()
+      }
+      if(data.handlerType == '8'){
+        this.unReadCount = data.body
+      }
+    });
+  },
  methods: {
    updatePassword(){
      this.$refs.updatePass.open()
@ -117,7 +155,7 @@ export default {
  .top-icon{
    text-align: center;
    height: 50px;
-    width: 50px;
+    width: 150px;
    line-height: 50px;
    cursor: pointer;
    color: #606266;
--- a/web/src/layout/index.vue
+++ b/web/src/layout/index.vue
@ -8,6 +8,18 @@
        <tags-view />    <!-- 此处增加tag-->
      </div>
      <app-main />
+
+      <div class="floating-component">
+        <!-- 悬浮内容 -->
+        <el-tooltip placement="left" effect="light" popper-class="too">
+<!--          <div slot="content">-->
+<!--            <el-button icon="el-icon-s-comment" class="butto" @click="handleQuestion">问题反馈 </el-button>-->
+<!--            <br/>-->
+<!--            <el-button icon="el-icon-question" class="butto" @click="handleHelp">帮助手册 </el-button>-->
+<!--          </div>-->
+          <el-button icon="el-icon-menu" circle class="but"></el-button>
+        </el-tooltip>
+      </div>
    </div>
  </div>
 </template>
@ -94,4 +106,36 @@ export default {
  }


+  .floating-component {
+    position: fixed; /* 固定位置 */
+    bottom: 5%; /* 下边距 */
+    right: 1%; /* 右边距 */
+    padding: 0;
+    border-radius: 50%; /* 圆角 */
+    z-index: 10000; /* 设置 z-index 确保悬浮在顶层 */
+  }
+  .but {
+    font-size: larger;
+    color: rgb(0,119,216);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); /* 阴影 */
+  }
+  .butto {
+    border: 0;
+    padding: 10px;
+    margin: 0;
+  }
+
+   .too.el-tooltip__popper.is-light {
+     border: none !important;
+     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+     padding: 5px
+   }
+  /* 修改箭头边框 这里方位是left，所以 x-placement^="left" 并且是设置 border-right-color 的颜色*/
+  .too.el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow {
+    border-left-color: #eaeaea !important;
+  }
+  .too.el-tooltip__popper[x-placement^="left"] .popper__arrow {
+    border-left-color: #eaeaea !important;
+  }
+
 </style>
--- a/web/src/utils/request.js
+++ b/web/src/utils/request.js
@ -18,7 +18,10 @@ service.interceptors.request.use(
    // do something before request is sent

    if(config.method == 'post'){
-      showLoading()
+      console.log(config)
+      if(!config.noLoading){
+        showLoading()
+      }
    }

    if (store.getters.token) {
@ -79,7 +82,12 @@ service.interceptors.response.use(
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      if(response.config.method == 'post'){
-        success('提交成功')
+        console.log(response)
+
+        if(response.data.data=='noAlert'){
+          return res
+        }
+        success('请求成功')
      }
      return res
    }
--- a/web/src/views/business/operationLog/operationLogList.vue
+++ b/web/src/views/business/operationLog/operationLogList.vue
@ -73,6 +73,16 @@
            </template>
          </el-table-column>

+          <el-table-column
+            label="操作ip地址"
+            width="160"
+            align="center"
+          >
+            <template slot-scope="scope">
+              {{ scope.row.operIpAddress }}
+            </template>
+          </el-table-column>
+
            <el-table-column
                    label="请求模块"
                    width="160"
@ -156,27 +166,7 @@
            </el-table-column>

            <el-table-column
-                    label="操作机构id"
-                    width="160"
-                    align="center"
-            >
-                <template slot-scope="scope">
-                    {{ scope.row.operDeptId }}
-                </template>
-            </el-table-column>
-
-            <el-table-column
-                    label="机构名"
-                    width="160"
-                    align="center"
-            >
-                <template slot-scope="scope">
-                    {{ scope.row.operDeptName }}
-                </template>
-            </el-table-column>
-
-            <el-table-column
-                    label=""
+                    label="操作时间"
                    width="160"
                    align="center"
            >
@ -185,25 +175,6 @@
                </template>
            </el-table-column>

-            <el-table-column
-                    label="会员id"
-                    width="160"
-                    align="center"
-            >
-                <template slot-scope="scope">
-                    {{ scope.row.memberId }}
-                </template>
-            </el-table-column>
-
-            <el-table-column
-                    label="会员名"
-                    width="160"
-                    align="center"
-            >
-                <template slot-scope="scope">
-                    {{ scope.row.memberName }}
-                </template>
-            </el-table-column>


            <el-table-column
--- a/web/src/views/common/Im.vue
+++ b/web/src/views/common/Im.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <el-dialog
-      :title="user.displayName"
+      title="客服消息"
      append-to-body
      top="15vh"
      width="60%"
@ -14,9 +14,11 @@
          width="100%"
          height="60vh"
          position="center"
-          :user='this.user' ref="IMUI"
+          :user='this.user'
+          ref="IMUI"
          @pull-messages='handlePullMessages'
          @send="handleSend"
+          @change-contact="handleContactClick"
        />
      </div>
    </el-dialog>
@ -24,8 +26,8 @@
 </template>

 <script>
-  import {getAuthorChatList,getAuthorChat} from "@/api/business/chat/chat";
-  import {isNotEmpty} from "@/utils";
+  import {getAuthorChatList,getAuthorChat,readAuthorMessage} from "@/api/business/chat/chat";
+  import {isNotEmpty,error} from "@/utils";
  import webSocketManager from "@/api/websocket.js";

  export default {
@ -38,30 +40,46 @@
        dialogVisible: false,
        temp:{},
        page:1,
-        user:{id:8,displayName:'官方客服-薯队长',avatar:'http://8.146.211.120:8080/upload/avatar/kefu.jpg'},
+        user:{id:8,displayName:'官方客服',avatar:'http://8.146.211.120:8080/upload/avatar/kefu.jpg'},
+        contact:{}
      }
    },
    mounted(){
-      console.log(process.env.VUE_APP_WEBSOCKET_API)
      webSocketManager.connect( process.env.VUE_APP_WEBSOCKET_API + '?authorId=8')

-      // 设置收到消息回调函数
-      webSocketManager.onMessage((data) => {
-        if(data.handlerType == '6'){
-          console.log('mounted')
-          console.log(JSON.stringify(data.body))
-          const {IMUI} = this.$refs;
-          IMUI.appendMessage(data.body);
-          IMUI.messageViewToBottom()
-        }
-      });
-
+      //链接成功后获取总数
+      webSocketManager.onConnect(res=>{
+        this.getUnReadCount()
+      })
    },
    methods: {
      open() {
        this.dialogVisible = true
        this.getAuthorList()
      },
+      getUnReadCount(){
+        webSocketManager.sendMessage(JSON.stringify({handlerType:'8',authorId:'8'}))
+      },
+      readAuthorMessage(toContactId){
+        webSocketManager.sendMessage(JSON.stringify({handlerType:'7',authorId:toContactId,loginId:'8'}))
+      },
+      handleContactClick(contact, instance){
+        console.log('点击了消息')
+        //将此人的消息设置为已读
+        instance.updateContact({
+          id: contact.id,
+          unread: 0,
+        });
+        this.contact = contact
+        contact.page = 1
+        contact.chatList = []
+        //读取当前用户信息
+        this.readAuthorMessage(contact.id)
+        //获取总未读消息
+        this.getUnReadCount()
+        const {IMUI} = this.$refs;
+        IMUI.messageViewToBottom()
+      },
      getAuthorList(){
        getAuthorChatList({authorId:8}).then(response=> {
          this.$nextTick(() => {
@ -91,6 +109,7 @@
      },
      handleCancel(){
        this.dialogVisible = false
+        this.contact = this.$options.data().contact
      },
      submit(){

@ -98,15 +117,36 @@
      handleSend(message, next, file) {
        console.log('发送了信息')
        message.handlerType = '6'
+        console.log(JSON.stringify(message))
        webSocketManager.sendMessage(JSON.stringify(message))
        //执行到next消息会停止转圈，如果接口调用失败，可以修改消息的状态 next({status:'failed'});
        next();
      },
      handlePullMessages(contact, next) {
-        console.log(contact)
-        getAuthorChat({authorId:8,fromId:contact.id,limit:6,page:this.page}).then(res=> {
-          console.log(res.data.records)
-          next(res.data.records.reverse(),true);
+        console.log('获取到总数'+this.contact.totalPage)
+        console.log('当前的总数'+this.contact.chatList.length)
+
+        if(this.contact.page>this.contact.totalPage){
+          error('没有记录了')
+          return
+        }
+        getAuthorChat({authorId:8,fromId:contact.id,limit:8,page:this.contact.page}).then(res=> {
+          //倒序查询但是正序排列 时间早的在前面
+          this.contact.totalPage = res.data.pages
+          const messages = res.data.records
+
+          this.contact.chatList.push(... res.data.records.reverse());
+          //当前页数小于等于总页数
+          if(this.contact.page<=res.data.pages){
+            //等于1时执行页面滚动操作
+            if(this.contact.page==res.data.pages){
+              console.log('相等了')
+              next(messages,true);
+            }else{
+              next(messages,false);
+            }
+            this.contact.page++
+          }
        })
        //将第二个参数设为true，表示已到末尾，聊天窗口顶部会显示“暂无更多消息”，不然会一直转圈。
      },
--- a/web/src/views/dashboard/components/BarChart.vue
+++ b/web/src/views/dashboard/components/BarChart.vue
@ -0,0 +1,102 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          name: 'pageA',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [79, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageB',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [80, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }, {
+          name: 'pageC',
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: [30, 52, 200, 334, 390, 330, 220],
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>
--- a/web/src/views/dashboard/components/PieChart.vue
+++ b/web/src/views/dashboard/components/PieChart.vue
@ -0,0 +1,79 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '0',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+        },
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' }
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
--- a/web/src/views/dashboard/components/RaddarChart.vue
+++ b/web/src/views/dashboard/components/RaddarChart.vue
@ -0,0 +1,116 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 3000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        radar: {
+          radius: '66%',
+          center: ['50%', '42%'],
+          splitNumber: 8,
+          splitArea: {
+            areaStyle: {
+              color: 'rgba(127,95,132,.3)',
+              opacity: 1,
+              shadowBlur: 45,
+              shadowColor: 'rgba(0,0,0,.5)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 15
+            }
+          },
+          indicator: [
+            { name: 'Sales', max: 10000 },
+            { name: 'Administration', max: 20000 },
+            { name: 'Information Technology', max: 20000 },
+            { name: 'Customer Support', max: 20000 },
+            { name: 'Development', max: 20000 },
+            { name: 'Marketing', max: 20000 }
+          ]
+        },
+        legend: {
+          left: 'center',
+          bottom: '0',
+          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
+        },
+        series: [{
+          type: 'radar',
+          symbolSize: 0,
+          areaStyle: {
+            normal: {
+              shadowBlur: 13,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1
+            }
+          },
+          data: [
+            {
+              value: [5000, 7000, 12000, 11000, 15000, 14000],
+              name: 'Allocated Budget'
+            },
+            {
+              value: [4000, 9000, 15000, 15000, 13000, 11000],
+              name: 'Expected Spending'
+            },
+            {
+              value: [5500, 11000, 12000, 15000, 12000, 12000],
+              name: 'Actual Spending'
+            }
+          ],
+          animationDuration: animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>
--- a/web/src/views/dashboard/components/mixins/resize.js
+++ b/web/src/views/dashboard/components/mixins/resize.js
@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}
--- a/web/src/views/dashboard/index.vue
+++ b/web/src/views/dashboard/index.vue
@ -1,23 +1,416 @@
 <template>
  <div class="dashboard-container">
-    dashboard
+    <div class="dashboard-editor-container">
+      <div>
+        <a href="https://gitee.com/iimeepo/vue-admin-template" target="_blank" class="github-corner" aria-label="View source on Github">
+          <svg
+            width="80"
+            height="80"
+            viewBox="0 0 250 250"
+            style="fill:#40c9c6; color:#fff;"
+            aria-hidden="true"
+          >
+            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+            <path
+              d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+              fill="currentColor"
+              style="transform-origin: 130px 106px;"
+              class="octo-arm"
+            />
+            <path
+              d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+              fill="currentColor"
+              class="octo-body"
+            />
+          </svg>
+        </a>
+      </div>
+
+      <el-row :gutter="40" class="panel-group">
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <div class="card-panel">
+            <div class="card-panel-icon-wrapper icon-people">
+              <i class="el-icon-user-solid" />
+            </div>
+            <div class="card-panel-description">
+              <div class="card-panel-text">
+                用户总数
+              </div>
+              <span class="card-panel-num">102400</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <div class="card-panel">
+            <div class="card-panel-icon-wrapper icon-message">
+              <i class="el-icon-document" />
+            </div>
+            <div class="card-panel-description">
+              <div class="card-panel-text">
+                文章总数
+              </div>
+              <span class="card-panel-num">81212</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <div class="card-panel">
+            <div class="card-panel-icon-wrapper icon-money">
+              <i class="el-icon-chat-dot-square" />
+            </div>
+            <div class="card-panel-description">
+              <div class="card-panel-text">
+                评论总数
+              </div>
+              <span class="card-panel-num">9280</span>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+          <div class="card-panel">
+            <div class="card-panel-icon-wrapper icon-shopping">
+              <i class="el-icon-view" />
+            </div>
+            <div class="card-panel-description">
+              <div class="card-panel-text">
+                阅读总数
+              </div>
+              <span class="card-panel-num">13600</span>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="32">
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <raddar-chart />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <pie-chart />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <bar-chart />
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="16">
+        <el-col :xs="24" :sm="24" :lg="8">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>阅读量排行</span>
+            </div>
+            <el-table
+              :data="tableData"
+              style="width: 100%"
+            >
+              <el-table-column
+                prop="sort"
+                label="排名"
+              />
+              <el-table-column
+                prop="address"
+                label="地区"
+              />
+              <el-table-column
+                prop="number"
+                label="人数"
+              />
+            </el-table>
+          </el-card>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>收益排行</span>
+            </div>
+            <div class="block">
+              <div style="padding-top:35px;" class="progress-item">
+                <span>Vue</span>
+                <el-progress :percentage="70" />
+              </div>
+              <div class="progress-item">
+                <span>JavaScript</span>
+                <el-progress :percentage="18" />
+              </div>
+              <div class="progress-item">
+                <span>CSS</span>
+                <el-progress :percentage="12" />
+              </div>
+              <div class="progress-item">
+                <span>PHP</span>
+                <el-progress :percentage="22" />
+              </div>
+              <div class="progress-item">
+                <span>Hyperf</span>
+                <el-progress :percentage="38" />
+              </div>
+              <div class="progress-item">
+                <span>ESLint</span>
+                <el-progress :percentage="100" status="success" />
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>待办事项</span>
+            </div>
+            <div class="block">
+              <el-timeline>
+                <el-timeline-item
+                  v-for="(activity, index) in activities"
+                  :key="index"
+                  :icon="activity.icon"
+                  :type="activity.type"
+                  :color="activity.color"
+                  :size="activity.size"
+                  :timestamp="activity.timestamp"
+                >
+                  {{ activity.content }}
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
  </div>
 </template>

 <script>
-  export default {
-    name: 'Dashboard',
-    data() {
-      return {
-      }
-    },
-    mounted(){
-
-    },
-    methods: {
+import { mapGetters } from 'vuex'
+import BarChart from './components/BarChart'
+import PieChart from './components/PieChart'
+import RaddarChart from './components/RaddarChart'

+export default {
+  name: 'Dashboard',
+  components: {
+    BarChart,
+    PieChart,
+    RaddarChart
+  },
+  data() {
+    return {
+      tableData: [{
+        sort: '1',
+        address: '北京',
+        number: 23423
+      }, {
+        sort: '2',
+        address: '上海',
+        number: 2312
+      }, {
+        sort: '3',
+        address: '广州',
+        number: 2231
+      }, {
+        sort: '4',
+        address: '深圳',
+        number: 1234
+      }, {
+        sort: '5',
+        address: '杭州',
+        number: 123
+      }],
+      activities: [{
+        content: '支持使用图标',
+        timestamp: '2018-04-12 20:46',
+        size: 'large',
+        type: 'primary',
+        icon: 'el-icon-more'
+      }, {
+        content: '支持自定义颜色',
+        timestamp: '2018-04-03 20:46',
+        color: '#0bbd87'
+      }, {
+        content: '支持自定义尺寸',
+        timestamp: '2018-04-03 20:46',
+        size: 'large'
+      }, {
+        content: '默认样式的节点',
+        timestamp: '2018-04-03 20:46'
+      }]
    }
-
+  },
+  computed: {
+    ...mapGetters([
+      'name'
+    ])
  }
+}
 </script>

+<style lang="scss" scoped>
+.dashboard-editor-container {
+  padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .github-corner {
+    position: absolute;
+    top: 0px;
+    border: 0;
+    right: 0;
+  }
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
+}
+
+.panel-group {
+  margin-top: 18px;
+
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      font-size: 48px;
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      font-size: 48px;
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      font-size: 48px;
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      font-size: 48px;
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 14px 0 0 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 26px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+@media (max-width:500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>
--- a/web/src/views/login/login.vue
+++ b/web/src/views/login/login.vue
@ -38,7 +38,7 @@
                            z-0
                        "></div>
        <div class="w-full max-w-md z-10">
-          <div class="sm:text-4xl xl:text-4xl font-bold leading-tight mb-6">小红书社区后台管理系统</div>
+          <div class="sm:text-4xl xl:text-4xl font-bold leading-tight mb-6">{{title}}</div>
          <div class="sm:text-sm xl:text-md text-gray-200 font-normal"></div>
        </div>
        <ul class="circles">
@ -269,7 +269,8 @@ export default {
      loading: false,
      passwordType: 'password',
      redirect: undefined,
-      logoShow:false
+      logoShow:false,
+      title:''
    }
  },
  watch: {
@ -282,6 +283,7 @@ export default {
  },
  mounted() {
    this.loginLogo = require('@/assets/' + process.env.VUE_APP_SYSTEM_LOGO)
+    this.title = process.env.VUE_APP_SYSTEM_NAME
  },
  methods: {
    showPwd() {