feat：添加客服功能

src/router/index.js

@@ -367,6 +367,39 @@ export const asyncRouterMap = [
       }
     ]
   },
+  {
+    path: '/service',
+    component: Layout,
+    redirect: 'noredirect',
+    alwaysShow: true,
+    name: 'customerService',
+    meta: {
+      title: '在线客服',
+      icon: 'people'
+    },
+    children: [
+      {
+        path: 'detail',
+        component: () => import('@/views/customerService/chatDetail'),
+        name: 'chatDetail',
+        meta: {
+          title: '当前会话',
+          icon: 'user',
+          noCache: true
+        }
+      },
+      {
+        path: 'list',
+        component: () => import('@/views/customerService/chatList'),
+        name: 'chatList',
+        meta: {
+          title: '会话记录',
+          icon: 'form',
+          noCache: true
+        }
+      }
+    ]
+  },
   {
     path: '/profile',
     component: Layout,

src/views/customerService/chatDetail.vue

+<template>
+  <div class="page-chatDetail flex">
+    <!--    <el-menu :default-active="activeIndex" class="chat-list" mode="horizontal" @select="handleSelect">
+      <el-menu-item v-for="item in chatList" :key="item.userId" :index="item.userId">
+        <span slot="title">{{ item.title }}</span>
+      </el-menu-item>
+    </el-menu>-->
+    <el-container style="width: 100%;height: 100%; border: 1px solid #eee">
+
+      <el-aside style="background-color: white;padding: 10px">
+        <el-tabs :tab-position="top" style="height: 100%;width: 100%;" @tab-click="handleClick">
+          <el-tab-pane v-for="item in chatList" :key="item.userId" :label="item.title">{{ item.title }}</el-tab-pane>
+        </el-tabs>
+      </el-aside>
+      <el-main style="background-color: rgb(238, 241, 246); padding: 0; border: 1px solid #eee">
+        <div class="chat-message">
+          <div class="chat-message-top flex f-jc-sb">
+            <div class="chat-message-top__title">账号昵称</div>
+            <el-button type="text">人工介入</el-button>
+          </div>
+        </div>
+      </el-main>
+      <el-aside style="width: 20%;background-color: white;padding: 10px">
+        <div>
+          有边框
+        </div>
+      </el-aside>
+    </el-container>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChatDetail',
+  data() {
+    return {
+      activeIndex: '1233',
+      chatList: [
+        {
+          title: '老猫',
+          userId: '1233'
+        },
+        {
+          title: '葛若',
+          userId: '1323'
+        },
+        {
+          title: '斑胡',
+          userId: '1133'
+        },
+        {
+          title: '测试1',
+          userId: '1143'
+        },
+        {
+          title: '测试2',
+          userId: '1633'
+        },
+        {
+          title: '测试3',
+          userId: '1933'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    handleClick(tab, event) {
+      console.log(tab, event)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .main {
+  padding: 0;
+}
+
+.page-chatDetail {
+  height: calc(100vh - 84px);
+
+  .chat-list {
+    width: 30%;
+  }
+
+  .chat-message {
+    display: flex;
+    flex-direction: column;
+
+    .chat-message-top {
+      background: white;
+      padding: 8px;
+    }
+  }
+}
+
+</style>

src/views/customerService/chatList.vue

+<template>
+  <div>
+    会话记录
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'ChatList'
+}
+</script>
+
+<style scoped>
+
+</style>