init

+src/assets/*
+node_modules/*
+sdk/*
\ No newline at end of file

+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "plugin:vue/essential",
+    "eslint:recommended"
+  ],
+  "rules": {
+    "no-console": 'off',
+    "quotes": ["error", "single"],
+    "semi": ["error","never"],
+    "space-before-blocks": "error",
+    "space-unary-ops": "error"
+  },
+  "parserOptions": {
+    "parser": "babel-eslint"
+  }
+}

+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+tests/**/coverage/
+dist/*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+.env.development

+# TIMSDK Web Demo
+
+## 一分钟跑通Demo
+
+1. 下载源码到本地
+
+3. 配置 `SDKAppID` 和 `SECRETKEY`，参考：[密钥获取方法](https://cloud.tencent.com/document/product/269/36838#.E6.AD.A5.E9.AA.A42.EF.BC.9A.E8.8E.B7.E5.8F.96.E5.AF.86.E9.92.A5.E4.BF.A1.E6.81.AF)
+
+   2.1 打开 `/dist/debug/GenerateTestUserSig.js` 文件
+
+   2.2 按图示填写相应配置后，保存文件
+
+   ![配置SDKAppID和SECRETKEY](_doc/image/demo-init-1.png)
+
+4. 建议使用 `Chrome` 浏览器打开 `/dist/index.html` 文件，即可预览。
+
+## 开发运行
+
+Web Demo 使用 `Vue` + `Vuex` + `Element-UI` 开发，你可以参考该 Demo 进行业务开发，也可以直接基于本Demo 进行二次开发。 
+
+> 参考文档：
+>
+> - [TIMSDK 官方文档](https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/index.html)
+
+### 目录结构
+
+```
+├───sdk/
+│   ├───tim-js.js - tim sdk 文件，demo 中未使用，仅供自行集成使用
+├───dist/  - 打包编译后的目录
+├───public/ - 公共入口
+│   ├───debug/ - 用于配置SDKAppID 和 SECRETKEY
+│   └───index.html
+├───src/ - 源码目录
+│   ├───assets/ - 静态资源目录
+│   ├───components/ - 组件目录
+│   ├───store/ - Vuex Store 目录
+│   ├───utils/ - 工具函数目录
+│   ├───index.vue - 入口文件
+│   ├───main.js - Vue 全局配置
+│   └───tim.js - TIM SDK相关
+├───_doc/ - 文档相关
+├───.eslintignore - eslint 忽略配置
+├───babel.config.js - babel 配置
+├───package.json
+├───README.md
+└───vue.config.js - vue-cli@3 配置文件
+```
+
+### 准备工作
+
+1. 准备好您的 `SDKAPPID` 和 `SECRETKEY`，获取方式参考：[密钥获取方法](https://cloud.tencent.com/document/product/269/36838#.E6.AD.A5.E9.AA.A41.EF.BC.9A.E5.88.9B.E5.BB.BA.E5.BA.94.E7.94.A8)
+
+2. 搭建 [nodejs 环境](https://nodejs.org/zh-cn/) （建议安装 8.0 版本以上的 nodejs），选择官网推荐的安装包，安装即可
+
+   安装完成后，打开命令行，输入以下命令：
+
+   ```shell
+   node -v
+   ```
+
+   如果上述命令输出相应的版本号，说明环境搭建完成。
+
+### 启动流程
+
+1. 克隆本仓库到本地
+
+   ```shell
+   # 命令行执行
+   git clone https://github.com/tencentyun/TIMSDK.git
+
+   # 进入 Web Demo 项目
+   cd TIMSDK/H5
+   ```
+
+2. 配置 `SDKAppID` 和 `SECRETKEY`，参考：[密钥获取方法](https://cloud.tencent.com/document/product/269/36838#.E6.AD.A5.E9.AA.A42.EF.BC.9A.E8.8E.B7.E5.8F.96.E5.AF.86.E9.92.A5.E4.BF.A1.E6.81.AF)
+
+   2.1 打开 `/public/debug/GenerateTestUserSig.js` 文件
+
+   2.2 按图示填写相应配置后，保存文件
+
+   ![配置SDKAppID和SECRETKEY](_doc/image/demo-init-1.png)
+
+3. 启动项目
+
+   ```shell
+   # 同步依赖
+   npm install
+   # 启动项目
+   npm start
+   ```
+
+   > 若同步依赖过程中出现问题，尝试切换 npm 源后重试。
+   >
+   > ```shell
+   > # 切换 cnpm 源
+   > npm config set registry http://r.cnpmjs.org/
+   > ```
+
+4. 浏览器中打开链接：http://localhost:8080/
+
+### 注意事项
+
+1. 避免在前端进行签名计算
+
+   本 Demo 为了用户体验的便利，将 `userSig` 签发放到前端执行。若直接部署上线，会面临 `SECRETKEY` 泄露的风险。
+
+   正确的 `userSig` 签发方式是将 `userSig` 的计算代码集成到您的服务端，并提供相应接口。在需要 `userSig` 时，发起请求获取动态 `userSig`。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688#GeneratingdynamicUserSig)。
+
+### WebIM Demo Change Log
+
+#### 2020/12/04
+
+**Features**
+
+- Web Demo增加群直播功能
+
+- Web Demo新增 1v1 和群语音视频通话,和native互通
+
+#### 2020/10/22
+
+**Features**
+
+- SDK 版本更新，支持查询直播群在线人数，发送图片消息接入图片压缩
+
+**BUG Fixes**
+
+- 修复C2C 消息发送失败显示未读标示问题
+
+#### 2020/7/3
+
+**Features**
+
+- SDK 版本更新至 2.7.6
+
+#### 2020/7/3
+
+**Features**
+
+- SDK 版本更新至 2.7.5
+
+**Changes**
+
+- Web demo 更新群名称：好友工作群（Work）、陌生人社交群（Public）、临时会议群（Meeting）和直播群（AVChatRoom）
+
+#### 2020/6/10
+
+**Features**
+
+- SDK 版本更新至 2.7.0，支持C2C已读回执功能
+- Web demo C2C支持已读回执功能上报显示
+
+**Changes**
+
+- Web demo  登录页面增加直播电商解决方案入口
+
+#### 2020/4/28
+
+**Features**
+
+- SDK 版本更新至 2.6.3，支持群组全体禁言和取消禁言
+- Web demo 群组支持全体禁言和取消全体禁言的功能入口
+
+**Changes**
+
+- 监听 TIM.EVENT.NET_STATE_CHANGE ，添加网络状态变更提醒
+- 废弃 TIM.EVENT.GROUP_SYSTEM_NOTICE_RECEIVED事件
+- 用户入群、退群、发消息，优先展示其 nick 没有 nick 才用 userID
+
+#### 2020/3/30
+
+**Features**
+
+- SDK 版本更新至 2.6.0, 支持收发视频消息
+- Web demo 支持收发视频消息，可拖拽发送框发送或选取文件发送
+
+**Change**
+
+- 修改视频通话界面UI
+
+**BUG Fixes**
+
+- 修复撤回 C2C 消息通知在 web 多实例登录时的同步问题
+- 修复大文件或空文件发送失败后无法第二次发送的问题
+
+#### 2020/1/14
+
+**Features**
+
+- 支持 C2C 视频通话
+
+**Change**
+
+- 消息发送两分钟后，不展示撤回菜单
+
+#### 2020/1/6
+
+**Features**
+
+- SDK 版本更新，支持消息撤回
+- Web Demo增加消息撤回与重新编辑功能
+- 账号被踢出时，给出原因提醒
+
+#### 2019/12/13
+
+**Features**
+
+- 支持粘贴发送截图
+
+**Change**
+
+- 完善收到新消息时的通知处理
+- 处理完【加群申请】后，将相应的通知删除
+
+#### 2019/11/22
+
+**Features**
+
+- 支持地理位置消息的渲染
+- 支持点击群消息头像查看详细资料
+- 支持我的名片的展示和修改
+
+**Change**
+
+- 优化几处体验问题
+
+#### 2019/11/01
+
+**Change**
+
+- 优化几处体验问题
+
+**BUG Fixes**
+
+- 修复删除群组会话后，会话又出现的问题
+- 修复退出群组时，Demo 出现空白区域的问题
+
+#### 2019/10/17
+
+**Features**
+
+- Web Demo 样式调整
+- SDK 版本更新，支持接收视频消息
+- 移除掷骰子功能，替换为使用评分
+
+#### 2019/10/12
+
+**Bug Fixes**
+
+- 修复 React 框架下发图片消息失败的问题
+
+#### 2019/09/21
+
+**Bug Fixes**
+
+- 修复收到新群系统通知事件名不正确的问题
+
+#### 2019/09/06
+
+**Bug Fixes**
+
+- 修复 IE 下超长文本消息的显示超出会话框的问题
+- 修复重发消息失败时无错误提示的问题
+
+
+#### 2019/09/05
+
+**Bug Fixes**
+
+- 修复预览图片时，图片显示不正确的问题
+- 修复点击群组列表时，群成员列表不更新的问题
+- 解决修改个人资料时，报错的问题
+
+#### 2019/12/19
+
+**Feat**
+
+- 添加trtc视频通话，基础流程跑通

+module.exports = {
+  presets: ['@vue/app'],
+  ignore: ['sdk/**'],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk'
+      }
+    ]
+  ]
+}

+{
+  "name": "timsdk-demo",
+  "version": "2.1.3",
+  "private": true,
+  "scripts": {
+    "start": "node node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
+    "serve": "node node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
+    "build": "node node_modules/@vue/cli-service/bin/vue-cli-service.js build",
+    "lint": "node node_modules/@vue/cli-service/bin/vue-cli-service.js lint src --ext .vue,.js --fix"
+  },
+  "dependencies": {
+    "axios": "^0.21.0",
+    "core-js": "^2.6.11",
+    "cos-js-sdk-v5": "^0.5.22",
+    "element-ui": "^2.13.0",
+    "md5": "^2.3.0",
+    "mta-h5-analysis": "^2.0.15",
+    "tim-js-sdk": "^2.8.5",
+    "trtc-calling-js": "^0.6.0",
+    "trtc-js-sdk": "^4.7.1",
+    "tsignaling": "^0.3.0",
+    "tweblive": "^1.1.1",
+    "vue": "^2.6.11",
+    "vue-clipboard2": "^0.3.1",
+    "vuex": "^3.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.12.1",
+    "@vue/cli-plugin-eslint": "^3.12.1",
+    "@vue/cli-service": "^3.12.1",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-component": "^1.1.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

+/*eslint-disable*/
+/*
+ * Module:   GenerateTestUserSig
+ *
+ * Function: 用于生成测试用的 UserSig，UserSig 是腾讯云为其云服务设计的一种安全保护签名。
+ *           其计算方法是对 SDKAppID、UserID 和 EXPIRETIME 进行加密，加密算法为 HMAC-SHA256。
+ *
+ * Attention: 请不要将如下代码发布到您的线上正式版本的 App 中，原因如下：
+ *
+ *            本文件中的代码虽然能够正确计算出 UserSig，但仅适合快速调通 SDK 的基本功能，不适合线上产品，
+ *            这是因为客户端代码中的 SECRETKEY 很容易被反编译逆向破解，尤其是 Web 端的代码被破解的难度几乎为零。
+ *            一旦您的密钥泄露，攻击者就可以计算出正确的 UserSig 来盗用您的腾讯云流量。
+ *
+ *            正确的做法是将 UserSig 的计算代码和加密密钥放在您的业务服务器上，然后由 App 按需向您的服务器获取实时算出的 UserSig。
+ *            由于破解服务器的成本要高于破解客户端 App，所以服务器计算的方案能够更好地保护您的加密密钥。
+ *
+ * Reference：https://cloud.tencent.com/document/product/647/17275#Server
+ */
+function genTestUserSig(userID) {
+  /**
+   * 腾讯云 SDKAppId，需要替换为您自己账号下的 SDKAppId。
+   *
+   * 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用，即可看到 SDKAppId，
+   * 它是腾讯云用于区分客户的唯一标识。
+   */
+  var SDKAPPID = 1400514950;
+
+  /**
+   * 签名过期时间，建议不要设置的过短
+   * <p>
+   * 时间单位：秒
+   * 默认时间：7 x 24 x 60 x 60 = 604800 = 7 天
+   */
+  var EXPIRETIME = 604800;
+
+  /**
+   * 计算签名用的加密密钥，获取步骤如下：
+   *
+   * step1. 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav )，如果还没有应用就创建一个，
+   * step2. 单击“应用配置”进入基础配置页面，并进一步找到“帐号体系集成”部分。
+   * step3. 点击“查看密钥”按钮，就可以看到计算 UserSig 使用的加密的密钥了，请将其拷贝并复制到如下的变量中
+   *
+   * 注意：该方案仅适用于调试Demo，正式上线前请将 UserSig 计算代码和密钥迁移到您的后台服务器上，以避免加密密钥泄露导致的流量盗用。
+   * 文档：https://cloud.tencent.com/document/product/647/17275#Server
+   */
+  var SECRETKEY = 'eb219c4b42bdbbf5dca38f21f5be26ab38f1c157d0ba4277d5acce6507f2d727';
+
+  var generator = new window.LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
+  var userSig = generator.genTestUserSig(userID);
+  return {
+    SDKAppID: SDKAPPID,
+    userSig: userSig
+  };
+}
\ No newline at end of file

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <!-- 优先使用Chrome内核 -->
+    <meta name="renderer" content="webkit"/>
+    <meta name="force-rendering" content="webkit"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
+    <title>星斗推</title>
+    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
+</head>
+
+<body>
+<div id="app"></div>
+<script src="./debug/GenerateTestUserSig.js"></script>
+<script src="./debug/lib-generate-test-usersig.min.js"></script>
+</body>
+</html>

+$bg = #4a5a6c
+
+$black = #000000
+$white = #ffffff
+
+// font-related
+$base = #1c2438
+$regular = #495060
+// $first = #99a8b4
+$first = #a5b5c1
+$secondary = #a5b5c1
+$font-light = #f7f7f8
+$font-dark = #76828c
+
+// border-related
+$border-base = #e7e7e7
+$border-light = #e9eaec
+$border-highlight = #55d48b
+
+// theme-related
+$dark-primary = #2b85e4
+$primary = #2d8cf0
+$light-primary = #5cadff
+// $light-primary = #55d48b
+$success = #0ac160
+$warning = #fa9d3b
+$danger = #f35f5f
+
+// background-related
+$light-background = #f2f7f7
+$background = #404953
+$dark-background = #363e47
+$deep-background = #303841
+
+$background = #404953
+$background-light = #f5f5f5
+$background-dark = #363e47
+$background-deep-dark = #303841
+
+
+$height = 80vh
+$width = 80vw
\ No newline at end of file

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1571037879389'); /* IE9 */
+  src: url('iconfont.eot?t=1571037879389#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAtUAAsAAAAAE2gAAAsGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEcAqXNJM0ATYCJAM4Cx4ABCAFhG0HgSUbfxAjkg9WkOyvD7g5YB2zHKxobKzh+qoa2/WqPbHCSnoiPo59IsJbFdKfyG2qSMv5HA/A/fL9DL4COjrgO8sFZgpMRyU84NGIu80RgNAHwN/Tpr3dD72wi4QikUZ9LhAqSoxSB8LuRqhp0tQkvetSCwetYzWJQFqP1jWC1NKemKcHzMz/7W/a31pGRKguefYvPz2lgaaM8CC9xQAOJvc5QDA3736timhdwDwkHrVsp9sX3g3fHWaeqJAImXaimH38Ny5eBEKy0IjUSiz4MLx+r06Igxt8aPvCwwQoTUwF88/lvsQYF2DMA12fKlEmLokO5CWp4dJY8AKJPHzCHwPP3vcH/zALQgglEfaorYsLC7sCto89YAs89sewcUaEKeKN+GnUfYAPTrGRcmrsjYE+86IvDFdsysaaaa4FnAJfTLjizcWMWQmrDwx40RHPTixTbs6KVBKhVKNWrP94KcbXWnxP9DR8YZLKTwIXVAwhFlQGQQmqhDAGnDbCWFARhJmgKghzwelLWAAqhOAElUIIIIuG7wlZ1Pwo9AqMb/UlI8yYT3QWgJsCEKu8ThwQcKWIoFhsEqLdyI3g8/uHhUYn8HgJ4v5CIS8mhp+WJhTwwvsT/OjsCFFIhECDYQKMR+ULVHy+nMer8fmMrD/bSOsoo56hSmjmCRUMMoFAqSC0fwu/n/L5anyfGv2fUcEvmMDnq00SzcES6uCN9Ps+o4Dq9DH0scDYpluYnqFp9mXRPUGygWdCmzujOAe7VOK2nljuoe7VYocD8JuBDG+rFGtulxpHejOuFtlPSI3I5VoTanXKMSbMxR3KPOnZjrpkR0MY45LvjrRFXPHnA2tf2tZj7rZ2sl2MbS/rtnrNTWuErd0x3MM9g0g40Qgc1pMsamjCuGZvCka2dEVzDnTOsVvltNPcZJNRjMvmYaXl/EauU8nDPbauaLLOwzYuvMMac4C+Sxcz6EdBzBwYyjxJfISuv2q+ZrvCXp770A5Eq5nbGmkBZDXkjwkGY8GdtG9kHgYSdGkdm0G1DHURjCV5Ov71NcLbvjggrI2shyS9X3zUXyy6F0zkHgtMdl9OEtZfjcRIW5PZSxDOpP3XUkV1VyJm9TiJPB4cfccfT/af3vbslvnmU0J/1M/cMrHe+gdr+NZ6Ob3vKcGfCy90i7UCR52M2vuEFNg8AKGYq8n+RrxyJMbZxunLPtN68hRJGq8GiIdRPiuZIxlgOy5h2BprRrmxMcloJ6zy+vMDmP2ZDO09rliTLd3a57aRLUP0p9gsY5nnSJqxsdz6k3R2qZRykOTMNsrLjdRsOyhxVdmlRpmDZKI0YbRTLh82QkYtk9PT6p5DJFEM7SQII7AyaoATtMgaRclkk8xyg5Nyyp0d4X3a6T5Xg8xzNC2LYUibxWnQvG4IWI0+NhhYyq93sK+Erm46gAXngwVt1J2U+n1F2MjuwlQQ7N46W8N+87566wn3dIL1POed1sbpps5lVi+GXkvUAxYKKrUifnqQuRAc5qrzuKU+40lfPOtnQbagE8wcyAnQzn1hYVPq7PDn+v3DQNE4PfA5/R5C76R636drrVkdCJjoULnzcFOLzJFyFeZq8xyU2n3l9d6R0GJofKmpx6OX4I7d+EJFAvMTTW/YkLfB3NGRJxTB0A0V5V9MgsVl1dX4Qs0WX9J/beqwiXxA1Tw9psOIMnI0H+Ik6wLcmGhukAyIiQlwghyClIeCMdGCjZ529OtvtetV20MuXcpNPft8fCVo2CVL2O2qf/auXftR0Vj8l5FpfL2+iy1Ijd/r3mlq1LWj36pfCTrVdhiyMU81LaFfc7+Ead6rVV3PVx3pJb7T6pZfoQ7/CP8yde8SZ83jwuhfx4vt6//n9Sp//kxF9BKmq/Uzc/XnV39v7UqcKmZdrx9eUQ47i4l+lK72VpaRvTs6WEpPG2g9lVYj+DGCe4FEGAhLrh+x8G4QliOK2epHMpP8kdqEKLlJJnm24oiFuMGzLBn6Xdp322rfpL5O/W/+nLPeBPTf2HfUgBzZ48xHagXPQlt4CvWjzMdQM1xTrC823YJl1dSlsUUaTalh1lvYAJaqL2IqtdrMYdNHDs4tP6UZbVOzMA70Y2r/39hZO6J2uDwF/tmrrQINNvX996biHGqJ2FQoHl11aUu8pxvbgVIR7nrwwI0AQXFX3DG209P1xwrFbcBPnkRKRkp/fI2tuTqOGDaFxOhly2gsLjWuGKuowJyoogpT3ji8k5yIzZmL4QmkbCIW4Qnuj5o3F/KQWq3TarnqOKE4SiyMO7LuVnO1Wl0pYQPL8f4nlEfUR5REVXXZtKnr9VhlJaZvqlido8b0lZX6/MRdmUWZuxIzyNitujJAOZBLhCEzjmlIYkhy4ZP8uMHXH/M3CS53pnguBF8LHqveNQzeGZkvNzdeI1SKRlQGhQlKw4MUUaJwVuUskRKc5Fp0/DhSuGadtBavwRHwWkgSSsokuQrJnN7eP+b0UW706BHu5hCIYhz/LnIXZCyr7u2dI0mUSHrh3c7V0crf33l8M77WlrabCFnS2lkRv2vRime3X36VxE06dkwxRPn2u0+ff7dIdl34wY+lP3715qdlHld57LjBbOKLwy2rjdNvHahP4CDxsWNFmp+w857h6mGy4lpL9lRNeMIeXNZve/p0xabqaqXUlHMiX1m9KLKv7WVbsvjx4R/UWvgwdfZ5z5tvExBqqEechMqlGDHXUpt7TvKtfsLSpQlljvt+SHtjeQ37pp+dt27dkNIF2sYV8dfEy/c0EY/qYqxhnKl0bEmMeUnRrmMCujCEcXyVEsNVfvEuvTaqMFKdR0teS+bYYrSxYw1QkVqSottWUx4/JeEpoAtDGG9JK4G2PLnthbPBIn+RpqoeuTxb0DwuvKI5orkifFxzJJkjdadyr73OIqU5ggumcNOFiGY9oRlEm0ONoS2SxMGtotmRfdPPaTQFBepkY/qMkC7F5KNjDT/c96VNuD9xYHbJ2jAT6EbsWLHEMaxOOFqxaMQuXW6YaUFOSYH8tsk2OHD7+duxhnOKySFdGTOSjLVmOrEiCfrWPedGR3MVfk4RtNEEwR7XOfTVVwj4HEVYQE/dMJe7ZMqQQ8V3Zp9Ck9QFHA7pQHRq9p3iQ0NM3T8PV1sySBVAwNb/C2xQ3y82o2gPbPI/Wgce+BWpwHZ30PvgprFoJHjpS5Sku44SNcCH4Wg4OK0bGUCtf9B6cEgfDTb7GW3p3eg/9N7/kcMgj2dSThUN/y2E/Nuy58XDwjZC+zb2h+orf6MJcFL915jHQQB9/4dvNaxcyDmq5EYUrQbKXgxC2PhviYexCMG3Afy3qO8Pb4goq636NyXKomQc3oFogkz+SYQD/6xkLpCQR/rBf1QyAZkw+moSJLAUEGAcHgBkwGYkYxAKZ5JxEMI1guD/hHDg35vMBTl8h/shHEPJBNCYRCIJKe0Bnd4yKsEB+ieQ5mhEpZz8sd9oZ68y0ayO+8dciCO0VXPt+8KIuY8zys12IgZM5gCfzinoPUPKPKGWakRvuta12Z1ZaQ6Lk7eMSnT6AfTPwqQ5mt3llPn6b7SzV7lkyVPhf8yF9g9alaaG9xcfay15K5PLzXaEMANyduYAPglDz7sZJPNBE2qpjC0601VNtjJ1+Wp8MbzUeS++ZZnH2iBKsqJqumFatuN6YXeFQXk89l5p56nITuZEKu4HdTbrUW1vTBq3NvOc9vM2WZSW/R3jVM5tWjk5vGigaJ90KSG3JaZKtqgHl6THeVsCeVwsAAA=') format('woff2'),
+  url('iconfont.woff?t=1571037879389') format('woff'),
+  url('iconfont.ttf?t=1571037879389') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1571037879389#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-female:before {
+  content: "\e649";
+}
+
+.icon-blacklist:before {
+  content: "\e66a";
+}
+
+.icon-tupian:before {
+  content: "\e64a";
+}
+
+.icon-diaocha:before {
+  content: "\e605";
+}
+
+.icon-voice:before {
+  content: "\e667";
+}
+
+.icon-group:before {
+  content: "\e696";
+}
+
+.icon-contact:before {
+  content: "\e61f";
+}
+
+.icon-wenjian:before {
+  content: "\e601";
+}
+
+.icon-male:before {
+  content: "\e832";
+}
+
+.icon-zidingyi:before {
+  content: "\e633";
+}
+
+.icon-conversation:before {
+  content: "\e663";
+}
+
+.icon-tuichu:before {
+  content: "\e74d";
+}
+
+.icon-smile:before {
+  content: "\e6d6";
+}
+

+@font-face {
+  font-family: 'tim';
+  src: url('tim.eot?gollaf');
+  src: url('tim.eot?gollaf#iefix') format('embedded-opentype'),
+      url('tim.ttf?gollaf') format('truetype'),
+      url('tim.woff?gollaf') format('woff'),
+      url('tim.svg?gollaf#tim') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="tim-icon-"], [class*=" tim-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'tim' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.tim-icon-friend-add:before {
+  content: "\e907";
+}
+.tim-icon-close:before {
+  content: "\e901";
+}
+.tim-icon-right:before {
+  content: "\e903";
+}
+.tim-icon-add:before {
+  content: "\e904";
+}
+.tim-icon-refresh:before {
+  content: "\e905";
+}
+.tim-icon-send:before {
+  content: "\e902";
+}
+.tim-icon-angle:before {
+  content: "\e900";
+}
+.tim-icon-angle-middle:before {
+  content: "\e906";
+}

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="tim" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="angle" horiz-adv-x="410" d="M53.893-51.211c5.48 176.067 42.594 341.987 105.815 494.339l-3.415-9.287c67.368 170.846 113.179 269.474 220.968 377.263 14.339 14.217 24.492 32.634 28.461 53.252l0.103 0.643c1.321 5.986 2.078 12.862 2.078 19.914 0 29.579-13.312 56.048-34.27 73.745l-0.144 0.118c-13.613 8.803-30.249 14.035-48.108 14.035-0.708 0-1.415-0.008-2.119-0.025l0.105 0.002h-323.368s0-916.21 0-1024z" />
+<glyph unicode="&#xe901;" glyph-name="close" d="M557.312 459.552l265.28 263.904c12.544 12.48 12.608 32.704 0.128 45.248-12.512 12.576-32.704 12.608-45.248 0.128l-265.344-263.936-263.040 263.84c-12.448 12.48-32.704 12.544-45.248 0.064-12.512-12.48-12.544-32.736-0.064-45.28l262.976-263.776-265.152-263.744c-12.544-12.48-12.608-32.704-0.128-45.248 6.24-6.272 14.464-9.44 22.688-9.44 8.16 0 16.32 3.104 22.56 9.312l265.216 263.808 265.44-266.24c6.24-6.272 14.432-9.408 22.656-9.408 8.192 0 16.352 3.136 22.592 9.344 12.512 12.48 12.544 32.704 0.064 45.248l-265.376 266.176z" />
+<glyph unicode="&#xe902;" glyph-name="send" d="M350.912 367.424l-299.968 182.72 908.48 355.648-159.072-818.272-387.040 247.872 345.952 373.472zM416 268.8v-209.92l128.256 130.208z" />
+<glyph unicode="&#xe903;" glyph-name="right" d="M822.464 707.456c-5.192 5.738-12.666 9.328-20.979 9.328-8.918 0-16.871-4.131-22.050-10.585l-0.043-0.055-352.96-417.664-181.92 212.992c-5.228 6.441-13.144 10.523-22.014 10.523-8.368 0-15.887-3.633-21.066-9.409l-0.023-0.027c-5.835-6.529-9.401-15.192-9.401-24.689 0-8.977 3.187-17.211 8.491-23.63l-0.050 0.063 204.096-238.944c5.76-6.752 13.696-10.56 22.016-10.56h0.096c8.877 0.144 16.768 4.243 22.008 10.606l0.040 0.050 374.976 443.744c11.52 13.728 11.008 35.328-1.216 48.256z" />
+<glyph unicode="&#xe904;" glyph-name="add" d="M512 140.8c17.673 0 32 14.327 32 32v0 256h256c17.673 0 32 14.327 32 32s-14.327 32-32 32v0h-256v256c0 17.673-14.327 32-32 32s-32-14.327-32-32v0-256h-256c-17.673 0-32-14.327-32-32s14.327-32 32-32v0h256v-256c0-17.673 14.327-32 32-32v0z" />
+<glyph unicode="&#xe905;" glyph-name="refresh" d="M832 476.8c-17.673 0-32-14.327-32-32v0c0-158.784-129.216-288-288-288s-288 129.216-288 288 129.216 288 288 288c66.208 0 129.536-22.752 180.608-64h-84.608c-17.673 0-32-14.327-32-32s14.327-32 32-32v0h160c17.673 0 32 14.327 32 32v0 160c0 17.673-14.327 32-32 32s-32-14.327-32-32v0-80.96c-60.256 50.365-138.555 80.951-223.998 80.96h-0.002c-194.080 0-352-157.92-352-352s157.92-352 352-352 352 157.92 352 352c0 17.673-14.327 32-32 32v0z" />
+<glyph unicode="&#xe906;" glyph-name="angle-middle" d="M361.945-51.199c5.48 176.063 42.593 341.979 105.813 494.327l-3.415-9.287c67.366 170.842 113.176 269.467 220.963 377.255 14.339 14.217 24.491 32.633 28.46 53.251l0.103 0.643c1.321 5.986 2.078 12.862 2.078 19.914 0 29.578-13.312 56.047-34.269 73.743l-0.144 0.118c-13.613 8.803-30.248 14.035-48.107 14.035-0.708 0-1.415-0.008-2.119-0.025l0.105 0.002h-323.361s0-916.191 0-1023.977z" />
+<glyph unicode="&#xe907;" glyph-name="friend-add" d="M781.713 596.267c0 150.519-120.415 270.933-270.933 270.933s-270.933-120.415-270.933-270.933c0-99.342 54.187-189.653 138.477-234.809-114.394-45.156-201.695-144.498-225.778-270.933-3.010-15.052 6.021-33.114 24.083-36.124h6.021c15.052 0 27.093 9.031 30.104 24.083 27.093 141.487 150.519 243.84 295.016 246.85h6.021c147.508 0 267.923 123.425 267.923 270.933zM300.054 596.267c0 117.404 93.321 210.726 210.726 210.726s210.726-93.321 210.726-210.726c0-114.394-93.321-207.716-207.716-210.726h-9.031c-114.394 6.021-204.705 99.342-204.705 210.726zM841.921 207.929h-60.207v60.207c0 18.062-12.041 30.104-30.104 30.104s-30.104-12.041-30.104-30.104v-60.207h-60.207c-18.062 0-30.104-12.041-30.104-30.104s12.041-30.104 30.104-30.104h60.207v-60.207c0-18.062 12.041-30.104 30.104-30.104s30.104 12.041 30.104 30.104v60.207h60.207c18.062 0 30.104 12.041 30.104 30.104s-12.041 30.104-30.104 30.104z" />
+</font></defs></svg>
\ No newline at end of file

+<template>
+  <div class="avatar" :class="shape === 'circle' ? 'shape-circle' : ''">
+    <img :src="avatarSrc">
+  </div>
+</template>
+
+<script>
+import systemAvatar from '@/assets/image/system.png'
+export default {
+  props: {
+    src: String,
+    type: {
+      type: String,
+      default: 'C2C'
+    },
+    shape: {
+      type: String,
+      default: 'circle'
+    }
+  },
+  computed: {
+    avatarSrc: function () {
+      let src = this.src
+      if (/^(https:|http:|\/\/)/.test(src)) {
+        return src
+      } else {
+        return this.defaultSrc
+      }
+    },
+    defaultSrc: function () {
+      switch(this.type) {
+        case 'C2C':
+          // 个人头像
+          return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-2.png'
+        case 'GROUP':
+          // 群默认头像
+          return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-3.png'
+        case this.TIM.TYPES.CONV_SYSTEM:
+          return systemAvatar
+        default:
+          // 默认头像
+          return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-1.png'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.avatar 
+  background-color $first
+  text-align center
+  width 100%
+  height 100%
+  overflow hidden
+  img 
+    width 100%
+    height 100%
+.shape-circle
+  border-radius 50%
+</style>

+<template>
+  <div class="avatar">
+    <img :src="avatarSrc">
+  </div>
+</template>
+
+<script>
+import systemAvatar from '@/assets/image/system.png'
+export default {
+  props: {
+    src: String,
+    type: {
+      type: String,
+      default: 'C2C'
+    },
+    shape: {
+      type: String,
+      default: 'circle'
+    }
+  },
+  computed: {
+    avatarSrc: function () {
+      let src = this.src
+      if(/^(https:|http:|\/\/)/.test(src)) {
+        return src
+      } else {
+        return this.defaultSrc
+      }
+    },
+    defaultSrc: function () {
+      switch(this.type) {
+        case 'C2C':
+          // 个人头像
+          return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-2.png'
+        case 'GROUP':
+          // 群默认头像
+          return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-3.png'
+        case this.TIM.TYPES.CONV_SYSTEM:
+          return systemAvatar
+        default:
+          // 默认头像
+          return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-1.png'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.avatar 
+  background-color $first
+  text-align center
+  width 100%
+  height 100%
+  overflow hidden
+  img 
+    width 100%
+    height 100%
+</style>

+<template>
+  <div class="blacklist-item-wrapper">
+    <img
+      class="avatar"
+      :src="profile.avatar ? profile.avatar : 'http://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-2.png'"
+    />
+    <div class="item">{{profile.nick||profile.userID}}</div>
+    <el-button type="text" @click="removeFromBlacklist">取消拉黑</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BlacklistItem',
+  props: {
+    profile: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    removeFromBlacklist() {
+      this.tim
+        .removeFromBlacklist({ userIDList: [this.profile.userID] })
+        .then(() => {
+          this.$store.commit('removeFromBlacklist', this.profile.userID)
+        })
+        .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.item {
+  padding-left: 20px;
+  width: 100%;
+  color: $white;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.blacklist-item-wrapper {
+  padding-bottom: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+}
+</style>

+<template>
+  <div class="blacklist-wrapper" :class="{'default': !hasBlacklist}">
+    <div v-if="hasBlacklist">
+      <blacklist-item
+        v-for="item in blacklist"
+        :key="item.userID"
+        :profile="item"
+      />
+    </div>
+    <span style="color:gray" v-else>黑名单还是空的</span>
+  </div>
+</template>
+
+<script>
+import BlacklistItem from './blacklist-item'
+import { mapState } from 'vuex'
+export default {
+  name: 'Blacklist',
+  components: {
+    BlacklistItem
+  },
+  computed: {
+    ...mapState({
+      blacklist: state => state.blacklist.blacklist
+    }),
+    hasBlacklist() {
+      return this.blacklist.length > 0
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.blacklist-wrapper {
+  padding: 12px;
+  overflow-y: scroll;
+}
+.default {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+</style>

+<template>
+  <popover
+    placement="top"
+    style="display: flex;flex-direction: column;"
+    v-model="visible"
+  >
+    <el-button class="context-menu-button" type="text" @click="option.handler" v-for="option in options" :key="option.text">{{options.text}}</el-button>
+    <el-button class="context-menu-button" type="text" @click="visible = false ">取消</el-button>
+    <slot slot="reference" @contextmenu.prevent=""></slot>
+  </popover>
+</template>
+
+<script>
+import { Popover } from 'element-ui'
+export default {
+  props: ['visible', 'options'],
+  components: {
+    Popover
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+</style>

+<template>
+    <div
+        class="conversation-item-container"
+        :class="{ 'choose': conversation.conversationID === currentConversation.conversationID }"
+        @click="selectConversation"
+    >
+      <div class="close-btn">
+        <span class="tim-icon-close" title="删除会话" @click="deleteConversation"></span>
+      </div>
+      <div class="warp">
+        <avatar :src="avatar" :type="conversation.type" />
+        <div class="content">
+          <div class="row-1">
+            <div class="name">
+              <div class="text-ellipsis">
+                <span :title="conversation.userProfile.nick || conversation.userProfile.userID"
+                  v-if="conversation.type ===  TIM.TYPES.CONV_C2C"
+                  >{{conversation.userProfile.nick || conversation.userProfile.userID}}
+                </span>
+                <span :title="conversation.groupProfile.name || conversation.groupProfile.groupID"
+                  v-else-if="conversation.type ===  TIM.TYPES.CONV_GROUP"
+                  >{{conversation.groupProfile.name || conversation.groupProfile.groupID}}
+                </span>
+                <span
+                  v-else-if="conversation.type === TIM.TYPES.CONV_SYSTEM"
+                  >系统通知
+                </span>
+              </div>
+            </div>
+            <div class="unread-count">
+              <span class="badge" v-if="showUnreadCount">
+                {{conversation.unreadCount > 99 ? '99+' : conversation.unreadCount}}
+              </span>
+            </div>
+          </div>
+          <div class="row-2">
+            <div class="summary">
+              <div v-if="conversation.lastMessage" class="text-ellipsis">
+                <span class="remind" style="color:red;" v-if="hasMessageAtMe">[有人提到我]</span>
+                <span class="text" :title="conversation.lastMessage.messageForShow">
+                  {{messageForShow}}
+                </span>
+              </div>
+            </div>
+            <div class="date">
+              {{date}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex'
+import { isToday, getDate, getTime } from '../../utils/date'
+export default {
+  name: 'conversation-item',
+  props: ['conversation'],
+  data() {
+    return {
+      popoverVisible: false,
+      hasMessageAtMe: false
+    }
+  },
+  computed: {
+    showUnreadCount() {
+      if (this.$store.getters.hidden) {
+        return this.conversation.unreadCount > 0
+      }
+      // 是否显示未读计数。当前会话和未读计数为0的会话，不显示。
+      return (
+        this.currentConversation.conversationID !==
+          this.conversation.conversationID && this.conversation.unreadCount > 0
+      )
+    },
+    date() {
+      if (
+        !this.conversation.lastMessage ||
+        !this.conversation.lastMessage.lastTime
+      ) {
+        return ''
+      }
+      const date = new Date(this.conversation.lastMessage.lastTime * 1000)
+      if (isToday(date)) {
+        return getTime(date)
+      }
+      return getDate(date)
+    },
+    avatar: function() {
+      switch (this.conversation.type) {
+        case 'GROUP':
+          return this.conversation.groupProfile.avatar
+        case 'C2C':
+          return this.conversation.userProfile.avatar
+        default:
+          return ''
+      }
+    },
+    conversationName: function() {
+      if (this.conversation.type === this.TIM.TYPES.CONV_C2C) {
+        return this.conversation.userProfile.nick || this.conversation.userProfile.userID
+      }
+      if (this.conversation.type === this.TIM.TYPES.CONV_GROUP) {
+        return this.conversation.groupProfile.name || this.conversation.groupProfile.groupID
+      }
+      if (this.conversation.type === this.TIM.TYPES.CONV_SYSTEM) {
+        return '系统通知'
+      }
+      return ''
+    },
+    showGrayBadge() {
+      if (this.conversation.type !== this.TIM.TYPES.CONV_GROUP) {
+        return false
+      }
+      return (
+        this.conversation.groupProfile.selfInfo.messageRemindType ===
+        'AcceptNotNotify'
+      )
+    },
+    messageForShow() {
+      if (this.conversation.lastMessage.isRevoked) {
+        if (this.conversation.lastMessage.fromAccount === this.currentUserProfile.userID) {
+          return '你撤回了一条消息'
+        }
+        if (this.conversation.type === this.TIM.TYPES.CONV_C2C) {
+          return '对方撤回了一条消息'
+        }
+        return `${this.conversation.lastMessage.fromAccount}撤回了一条消息`
+      }
+      return this.conversation.lastMessage.messageForShow
+    },
+    ...mapState({
+      currentConversation: state => state.conversation.currentConversation,
+      currentUserProfile: state => state.user.currentUserProfile
+    }),
+    ...mapGetters(['toAccount'])
+  },
+  mounted() {
+    this.$bus.$on('new-messsage-at-me', event => {
+      if (
+        event.data.conversationID === this.conversation.conversationID &&
+        this.conversation.conversationID !==
+          this.currentConversation.conversationID
+      ) {
+        this.hasMessageAtMe = true
+      }
+    })
+  },
+  methods: {
+    selectConversation() {
+      if (this.conversation.conversationID !== this.currentConversation.conversationID) {
+        this.$store.dispatch(
+          'checkoutConversation',
+          this.conversation.conversationID
+        )
+      }
+    },
+    deleteConversation(event) {
+      // 停止冒泡，避免和点击会话的事件冲突
+      event.stopPropagation()
+      this.tim
+        .deleteConversation(this.conversation.conversationID)
+        .then(() => {
+          this.$store.commit('showMessage', {
+            message: `会话【${this.conversationName}】删除成功!`,
+            type: 'success'
+          })
+          this.popoverVisible = false
+          this.$store.commit('resetCurrentConversation')
+        })
+        .catch(error => {
+          this.$store.commit('showMessage', {
+            message: `会话【${this.conversationName}】删除失败!, error=${error.message}`,
+            type: 'error'
+          })
+          this.popoverVisible = false
+        })
+    },
+    showContextMenu() {
+      this.popoverVisible = true
+    },
+  },
+  watch: {
+    currentConversation(next) {
+      if (next.conversationID === this.conversation.conversationID) {
+        this.hasMessageAtMe = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+
+
+.conversation-item-container
+  padding 15px 20px
+  cursor pointer
+  position relative
+  overflow hidden
+  transition .2s
+  // &:first-child
+  //   padding-top 30px
+  &:hover
+    background-color $background
+    .close-btn
+      right 3px
+  .close-btn
+    position absolute
+    right -20px
+    top 3px
+    color $font-dark
+    transition: all .2s ease;
+    &:hover
+      color $danger
+  .warp
+    display flex
+  .avatar
+    width 40px
+    height 40px
+    margin-right 10px
+    border-radius 50%
+    flex-shrink 0
+  .content
+    flex 1
+    height 40px
+    overflow hidden
+    .row-1
+      display flex
+      line-height 21px
+      .name
+        color $font-light
+        flex 1
+        min-width 0px
+      .unread-count
+        padding-left 10px
+        flex-shrink 0
+        color $font-dark
+        font-size 12px
+        .badge
+          vertical-align bottom
+          background-color $danger
+          border-radius 10px
+          color #FFF
+          display inline-block
+          font-size 12px
+          height 18px
+          max-width 40px
+          line-height 18px
+          padding 0 6px
+          text-align center
+          white-space nowrap
+    .row-2
+      display flex
+      font-size 12px
+      padding-top 3px
+      .summary
+        flex 1
+        overflow hidden
+        min-width 0px
+        color: $secondary
+        .remind
+          color $danger
+      .date
+        padding-left 10px
+        flex-shrink 0
+        text-align right
+        color $font-dark
+.choose {
+  background-color: $background;
+}
+.context-menu-button {
+  padding: 10px
+  border: 2px solid $primary;
+  border-radius: 8px;
+}
+</style>

+<template>
+  <div class="list-container">
+    <div class="header-bar">
+      <button title="刷新列表" @click="handleRefresh">
+        <i class="tim-icon-refresh"></i>
+      </button>
+      <button title="创建会话" @click="handleAddButtonClick">
+        <i class="tim-icon-add"></i>
+      </button>
+    </div>
+    <div class="scroll-container">
+      <conversation-item
+        :conversation="item"
+        v-for="item in conversationList"
+        :key="item.conversationID"
+      />
+    </div>
+    <el-dialog title="快速发起会话" :visible.sync="showDialog" width="30%">
+      <el-input placeholder="请输入用户ID" v-model="userID" @keydown.enter.native="handleConfirm"/>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showDialog = false">取 消</el-button>
+        <el-button type="primary" @click="handleConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import ConversationItem from './conversation-item'
+import {mapState} from 'vuex'
+
+export default {
+  name: 'ConversationList',
+  components: { ConversationItem },
+  data() {
+    return {
+      showDialog: false,
+      userID: '',
+      isCheckouting: false, // 是否正在切换会话
+      timeout: null
+    }
+  },
+  computed: {
+    ...mapState({
+      conversationList: state => state.conversation.conversationList,
+      currentConversation: state => state.conversation.currentConversation
+    })
+  },
+  mounted() {
+    window.addEventListener('keydown', this.handleKeydown)
+  },
+  destroyed() {
+    window.removeEventListener('keydown', this.handleKeydown)
+  },
+  methods: {
+    handleRefresh() {
+      this.refreshConversation()()
+    },
+    refreshConversation() {
+      let that = this
+      return function () {
+        if (!that.timeout) {
+          that.timeout = setTimeout(() =>{
+            that.timeout = null
+            that.tim.getConversationList().then(() => {
+              that.$store.commit('showMessage', {
+                message: '刷新成功',
+                type: 'success'
+              })
+            })
+          }, 1000)
+        }
+      }
+    },
+    handleAddButtonClick() {
+      this.showDialog = true
+    },
+    handleConfirm() {
+      if (this.userID !== '@TIM#SYSTEM') {
+        this.$store
+          .dispatch('checkoutConversation', `C2C${this.userID}`)
+          .then(() => {
+            this.showDialog = false
+          }).catch(() => {
+          this.$store.commit('showMessage', {
+            message: '没有找到该用户',
+            type: 'warning'
+          })
+        })
+      } else {
+        this.$store.commit('showMessage', {
+          message: '没有找到该用户',
+          type: 'warning'
+        })
+      }
+      this.userID = ''
+    },
+    handleKeydown(event) {
+      if (event.keyCode !== 38 && event.keyCode !== 40 || this.isCheckouting) {
+        return
+      }
+      const currentIndex = this.conversationList.findIndex(
+        item => item.conversationID === this.currentConversation.conversationID
+      )
+      if (event.keyCode === 38 && currentIndex - 1 >= 0) {
+        this.checkoutPrev(currentIndex)
+      }
+      if (
+        event.keyCode === 40 &&
+        currentIndex + 1 < this.conversationList.length
+      ) {
+        this.checkoutNext(currentIndex)
+      }
+    },
+    checkoutPrev(currentIndex) {
+      this.isCheckouting = true
+      this.$store
+        .dispatch(
+          'checkoutConversation',
+          this.conversationList[currentIndex - 1].conversationID
+        )
+        .then(() => {
+          this.isCheckouting = false
+        })
+        .catch(() => {
+          this.isCheckouting = false
+        })
+    },
+    checkoutNext(currentIndex) {
+      this.isCheckouting = true
+      this.$store
+        .dispatch(
+          'checkoutConversation',
+          this.conversationList[currentIndex + 1].conversationID
+        )
+        .then(() => {
+          this.isCheckouting = false
+        })
+        .catch(() => {
+          this.isCheckouting = false
+        })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.list-container
+  height 100%
+  width 100%
+  display flex
+  flex-direction column // -reverse
+  .header-bar
+    flex-shrink 0
+    height 50px
+    border-bottom 1px solid $background-deep-dark
+    padding 10px 10px 10px 20px
+    button
+      float right
+      display: inline-block;
+      cursor: pointer;
+      background $background-deep-dark
+      border: none
+      color: $font-dark;
+      box-sizing: border-box;
+      transition: .3s;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+      margin: 0 10px 0 0
+      padding 0
+      width 30px
+      height 30px
+      line-height 34px
+      font-size: 24px;
+      text-align: center;
+      white-space: nowrap;
+      border-radius: 50%
+      outline 0
+      &:hover
+        // background $light-primary
+        // color $white
+        transform: rotate(360deg);
+        color $light-primary
+  .scroll-container
+    overflow-y scroll
+    flex 1
+.bottom-circle-btn {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+}
+
+.refresh {
+  bottom: 70px;
+}
+</style>

+<template>
+  <div class="conversation-profile-wrapper">
+    <user-profile
+      v-if="currentConversation.type === TIM.TYPES.CONV_C2C"
+      :userProfile="currentConversation.userProfile"
+    />
+    <group-profile
+      v-else-if="currentConversation.type === TIM.TYPES.CONV_GROUP"
+      :groupProfile="currentConversation.groupProfile"
+    />
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import GroupProfile from './conversationProfile/group-profile.vue'
+import UserProfile from './conversationProfile/user-profile.vue'
+export default {
+  name: 'ConversationProfile',
+  components: {
+    GroupProfile,
+    UserProfile
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapState({
+      currentConversation: state => state.conversation.currentConversation
+    })
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.conversation-profile-wrapper 
+  background-color $white
+  height 100%
+  overflow-y scroll
+
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+</style>

+<template>
+  <div>
+    <el-input v-model="userID" placeholder="输入userID后 按回车键" @keydown.enter.native="addGroupMember"></el-input>
+  </div>
+</template>
+
+<script>
+import { Input } from 'element-ui'
+import { mapState } from 'vuex'
+export default {
+  components: {
+    ElInput: Input
+  },
+  data() {
+    return {
+      userID: ''
+    }
+  },
+  computed: {
+    ...mapState({
+      currentConversation: state => state.conversation.currentConversation
+    })
+  },
+  methods: {
+    addGroupMember() {
+      const groupID = this.currentConversation.conversationID.replace('GROUP', '')
+      this.tim
+        .addGroupMember({
+          groupID,
+          userIDList: [this.userID]
+        })
+        .then((imResponse) => {
+          const {
+            successUserIDList,
+            failureUserIDList,
+            existedUserIDList
+          } = imResponse.data
+          if (successUserIDList.length > 0) {
+            this.$store.commit('showMessage', {
+              message: `群成员：${successUserIDList.join(',')}，加群成功`,
+              type: 'success'
+            })
+            this.tim.getGroupMemberProfile({groupID, userIDList: successUserIDList})
+            .then(({ data: { memberList }}) => {
+              this.$store.commit('updateCurrentMemberList', memberList)
+            })
+          }
+          if (failureUserIDList.length > 0) {
+            this.$store.commit('showMessage', {
+              message: `群成员：${failureUserIDList.join(',')}，添加失败！`,
+              type: 'error'
+            })
+          }
+          if (existedUserIDList.length > 0) {
+            this.$store.commit('showMessage', {
+              message: `群成员：${existedUserIDList.join(',')}，已在群中`
+            })
+          }
+        })
+        .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped></style>

+<template>
+  <div>
+    <div>
+      <span class="label">userID:</span>
+      {{ member.userID }}
+      <el-button v-if="showCancelBan" type="text" @click="cancelMute">取消禁言</el-button>
+      <el-popover title="禁言" v-model="popoverVisible" v-show="showBan">
+        <el-input
+          v-model="muteTime"
+          placeholder="请输入禁言时间"
+          @keydown.enter.native="setGroupMemberMuteTime"
+        />
+        <el-button slot="reference" type="text" style="color:red;">禁言</el-button>
+      </el-popover>
+    </div>
+    <div>
+      <span class="label">nick:</span>
+      {{ member.nick || '暂无' }}
+    </div>
+    <div>
+      <span class="label">nameCard:</span>
+      {{ member.nameCard || '暂无' }}
+      <el-popover title="修改群名片" v-model="nameCardPopoverVisible" v-show="showEditNameCard">
+        <el-input
+          v-model="nameCard"
+          placeholder="请输入群名片"
+          @keydown.enter.native="setGroupMemberNameCard"
+        />
+        <i
+          class="el-icon-edit"
+          title="修改群名片"
+          slot="reference"
+          style="cursor:pointer; font-size:1.6rem;"
+        ></i>
+      </el-popover>
+    </div>
+    <div>
+      <span class="label">role:</span>
+      <span class="content role" :title="changeRoleTitle">{{ member.role }}</span>
+    </div>
+    <div v-if="showMuteUntil">
+      <span class="label">禁言至:</span>
+      <span class="content">{{ muteUntil }}</span>
+    </div>
+    <el-button type="text" v-if="canChangeRole" @click="changeMemberRole">
+      {{
+      member.role === 'Admin' ? '取消管理员' : '设为管理员'
+      }}
+    </el-button>
+    <el-button type="text" v-if="showKickout" style="color:red;" @click="kickoutGroupMember">踢出群组</el-button>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { Popover } from 'element-ui'
+import { getFullDate } from '../../../utils/date'
+export default {
+  components: {
+    ElPopover: Popover
+  },
+  props: ['member'],
+  data() {
+    return {
+      muteTime: '',
+      popoverVisible: false,
+      nameCardPopoverVisible: false,
+      nameCard: this.member.nameCard
+    }
+  },
+  computed: {
+    ...mapState({
+      currentConversation: state => state.conversation.currentConversation,
+      currentUserProfile: state => state.user.currentUserProfile,
+      current: state => state.current
+    }),
+    // 是否显示踢出群成员按钮
+    showKickout() {
+      return (this.isOwner || this.isAdmin) && !this.isMine
+    },
+    isOwner() {
+      return this.currentConversation.groupProfile.selfInfo.role === 'Owner'
+    },
+    isAdmin() {
+      return this.currentConversation.groupProfile.selfInfo.role === 'Admin'
+    },
+    isMine() {
+      return this.currentUserProfile.userID === this.member.userID
+    },
+    canChangeRole() {
+      return (
+        this.isOwner &&
+        ['ChatRoom', 'Public'].includes(this.currentConversation.subType)
+      )
+    },
+    changeRoleTitle() {
+      if (!this.canChangeRole) {
+        return ''
+      }
+      return this.isOwner && this.member.role === 'Admin'
+        ? '设为：Member'
+        : '设为：Admin'
+    },
+    // 是否显示禁言时间
+    showMuteUntil() {
+      // 禁言时间小于当前时间
+      return this.member.muteUntil * 1000 > this.current
+    },
+    // 是否显示取消禁言按钮
+    showCancelBan() {
+      if (
+        this.showMuteUntil &&
+        this.currentConversation.type === this.TIM.TYPES.CONV_GROUP &&
+        !this.isMine
+      ) {
+        return this.isOwner || this.isAdmin
+      }
+      return false
+    },
+    // 是否显示禁言按钮
+    showBan() {
+      if (this.currentConversation.type === this.TIM.TYPES.CONV_GROUP) {
+        return this.isOwner || this.isAdmin
+      }
+      return false
+    },
+    // 是否显示编辑群名片按钮
+    showEditNameCard() {
+      return this.isOwner || this.isAdmin
+    },
+    // 日期格式化后的禁言时间
+    muteUntil() {
+      return getFullDate(new Date(this.member.muteUntil * 1000))
+    }
+  },
+  methods: {
+    kickoutGroupMember() {
+      this.tim
+        .deleteGroupMember({
+          groupID: this.currentConversation.groupProfile.groupID,
+          reason: '我要踢你出群',
+          userIDList: [this.member.userID]
+        })
+        .then(() => {
+          this.$store.commit('deleteGroupMemeber', this.member.userID)
+        })
+        .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+        })
+    },
+    changeMemberRole() {
+      if (!this.canChangeRole) {
+        return
+      }
+      let currentRole = this.member.role
+      this.tim
+        .setGroupMemberRole({
+          groupID: this.currentConversation.groupProfile.groupID,
+          userID: this.member.userID,
+          role: currentRole === 'Admin' ? 'Member' : 'Admin'
+        })
+        .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+        })
+    },
+    setGroupMemberMuteTime() {
+      this.tim
+        .setGroupMemberMuteTime({
+          groupID: this.currentConversation.groupProfile.groupID,
+          userID: this.member.userID,
+          muteTime: Number(this.muteTime)
+        })
+        .then(() => {
+          this.muteTime = ''
+          this.popoverVisible = false
+        })
+        .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+        })
+    },
+    // 取消禁言
+    cancelMute() {
+      this.tim
+        .setGroupMemberMuteTime({
+          groupID: this.currentConversation.groupProfile.groupID,
+          userID: this.member.userID,
+          muteTime: 0
+        })
+        .then(() => {
+          this.muteTime = ''
+        })
+        .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+        })
+    },
+    setGroupMemberNameCard() {
+      if (this.nameCard.trim().length === 0) {
+        this.$store.commit('showMessage', {
+          message: '不能设置空的群名片',
+          type: 'warning'
+        })
+        return
+      }
+      this.tim
+        .setGroupMemberNameCard({
+          groupID: this.currentConversation.groupProfile.groupID,
+          userID: this.member.userID,
+          nameCard: this.nameCard
+        })
+        .then(() => {
+          this.nameCardPopoverVisible = false
+          this.$store.commit('showMessage', {
+            message: '修改成功'
+          })
+        })
+        .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.label {
+  color: rgb(204, 200, 200);
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>

+<template>
+  <div class="group-member-list-wrapper">
+    <div class="header">
+      <span class="member-count text-ellipsis">群成员：{{currentConversation.groupProfile.memberCount}}</span>
+      <popover v-model="addGroupMemberVisible">
+        <add-group-member></add-group-member>
+        <div slot="reference" class="btn-add-member" title="添加群成员">
+          <span class="tim-icon-friend-add"></span>
+        </div>
+      </popover>
+    </div>
+    <div class="scroll-content">
+      <div class="group-member-list">
+        <div v-for="member in members" :key="member.userID">
+          <popover placement="right" :key="member.userID">
+            <group-member-info :member="member" />
+            <div slot="reference" class="group-member" @click="currentMemberID = member.userID">
+              <avatar :title=getGroupMemberAvatarText(member.role) :src="member.avatar" />
+              <div class="member-name text-ellipsis">
+                <span v-if="member.nameCard" :title=member.nameCard>{{ member.nameCard }}</span>
+                <span v-else-if="member.nick" :title=member.nick>{{ member.nick }}</span>
+                <span v-else :title=member.userID>{{ member.userID }}</span>
+              </div>
+            </div>
+          </popover>
+        </div>
+      </div>
+    </div>
+    <div class="more">
+      <el-button v-if="showLoadMore" type="text" @click="loadMore">查看更多</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Popover } from 'element-ui'
+import { mapState } from 'vuex'
+import AddGroupMember from './add-group-member.vue'
+import GroupMemberInfo from './group-member-info.vue'
+export default {
+  data() {
+    return {
+      addGroupMemberVisible: false,
+      currentMemberID: '',
+      count: 30 // 显示的群成员数量
+    }
+  },
+  props: ['groupProfile'],
+  components: {
+    Popover,
+    AddGroupMember,
+    GroupMemberInfo
+  },
+  computed: {
+    ...mapState({
+      currentConversation: state => state.conversation.currentConversation,
+      currentMemberList: state => state.group.currentMemberList
+    }),
+    showLoadMore() {
+      return this.members.length < this.groupProfile.memberCount
+    },
+    members() {
+      return this.currentMemberList.slice(0, this.count)
+    }
+  },
+  methods: {
+    getGroupMemberAvatarText(role) {
+      switch (role) {
+        case 'Owner':
+          return '群主'
+        case 'Admin':
+          return '管理员'
+        default:
+          return '群成员'
+      }
+    },
+    loadMore() {
+      this.$store
+        .dispatch('getGroupMemberList', this.groupProfile.groupID)
+        .then(() => {
+          this.count += 30
+        })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.group-member-list-wrapper
+  .header
+    height 50px
+    padding 10px 16px 10px 20px
+    border-bottom 1px solid $border-base
+    .member-count
+      display inline-block
+      max-width 130px
+      line-height 30px
+      font-size 14px
+      vertical-align bottom
+    .btn-add-member
+      width 30px
+      height 30px
+      font-size 28px
+      text-align center
+      line-height 32px
+      cursor pointer
+      float right
+      &:hover
+        color $light-primary
+  .scroll-content
+    max-height: 250px;
+    overflow-y: scroll;
+    padding 10px 15px 10px 15px
+    width 100%
+    .group-member-list
+      display flex
+      justify-content flex-start
+      flex-wrap wrap
+      width 100%
+    .group-member
+      width 40px
+      height 70px
+      display: flex;
+      justify-content center
+      align-content center
+      flex-direction: column;
+      text-align: center;
+      color: $black;
+      cursor: pointer;
+      margin: 0 20px 10px 0;
+      padding: 10px 0 0 0;
+      .avatar
+        width 40px
+        height 40px
+        border-radius 50%
+      .member-name
+        font-size 12px
+        width: 50px;
+        text-align center
+  .more
+    padding 0 20px
+    border-bottom 1px solid $border-base
+
+// .add-group-member {
+//   cursor: pointer;
+// }
+// .add-button {
+//   border: 1px solid gray;
+//   text-align: center;
+//   line-height: 30px;
+// }
+
+
+
+</style>

+<template>
+  <div class="profile-user">
+    <avatar :title=userProfile.userID :src="userProfile.avatar" />
+    <div class="nick-name text-ellipsis">
+      <span v-if="userProfile.nick" :title=userProfile.nick>
+        {{ userProfile.nick }}
+      </span>
+      <span v-else class="anonymous" title="该用户未设置昵称">
+        [Anonymous]
+      </span>
+    </div>
+    <div class="gender" v-if="genderClass">
+      <span :title="gender" class="iconfont" :class="genderClass"></span>
+    </div>
+    <el-button
+      title="将该用户加入黑名单"
+      type="text"
+      @click="addToBlackList"
+      v-if="!isInBlacklist && userProfile.userID !== myUserID"
+      class="btn-add-blacklist"
+      >加入黑名单</el-button
+    >
+    <el-button title="将该用户移出黑名单" type="text" @click="removeFromBlacklist" v-else-if="isInBlacklist">移出黑名单</el-button>
+    <!-- 拉黑 和 反拉黑 -->
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  props: {
+    userProfile: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapState({
+      blacklist: state => state.blacklist.blacklist,
+      myUserID: state => state.user.currentUserProfile.userID
+    }),
+    isInBlacklist() {
+      return this.blacklist.findIndex(item => item.userID === this.userProfile.userID) >= 0
+    },
+    gender() {
+      switch (this.userProfile.gender) {
+        case this.TIM.TYPES.GENDER_MALE:
+          return '男'
+        case this.TIM.TYPES.GENDER_FEMALE:
+          return '女'
+        default:
+          return '未设置'
+      }
+    },
+    genderClass() {
+      switch (this.userProfile.gender) {
+        case this.TIM.TYPES.GENDER_MALE:
+          return 'icon-male'
+        case this.TIM.TYPES.GENDER_FEMALE:
+          return 'icon-female'
+        default:
+          return ''
+      }
+    }
+  },
+  methods: {
+    addToBlackList() {
+      this.tim
+        .addToBlacklist({ userIDList: [this.userProfile.userID] })
+        .then(() => {
+          this.$store.dispatch('getBlacklist')
+        })
+        .catch(imError => {
+          this.$store.commit('showMessage', {
+            message: imError.message,
+            type: 'error'
+          })
+        })
+    },
+    removeFromBlacklist() {
+      this.tim.removeFromBlacklist({ userIDList: [this.userProfile.userID] }).then(() => {
+        this.$store.commit('removeFromBlacklist', this.userProfile.userID)
+      })
+      .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.profile-user
+  width 100%
+  text-align center
+  padding 0 20px
+  .avatar
+    width 160px
+    height 160px
+    border-radius 50%
+    margin 30px auto
+  .nick-name
+    width 100%
+    color $base
+    font-size 20px
+    font-weight bold
+    text-shadow $font-dark 0 0 0.1em
+    .anonymous
+      color $first
+      text-shadow none
+  .gender
+    padding 5px 0 10px 0
+    border-bottom 1px solid $border-base
+  .btn-add-blacklist
+    color $danger
+</style>

+<template>
+  <div class="current-conversation-wrapper">
+    <div class="current-conversation" @scroll="onScroll" v-if="showCurrentConversation">
+      <div class="header">
+        <div class="name">{{ name }}</div>
+        <div class="btn-more-info"
+          :class="showConversationProfile ? '' : 'left-arrow'"
+          @click="showMore"
+          v-show="!currentConversation.conversationID.includes('SYSTEM')"
+          title="查看详细信息">
+        </div>
+      </div>
+      <div class="content">
+        <div class="message-list" ref="message-list" @scroll="this.onScroll">
+          <div class="more" v-if="!isCompleted">
+            <el-button
+              type="text"
+              @click="$store.dispatch('getMessageList', currentConversation.conversationID)"
+            >查看更多</el-button>
+          </div>
+          <div class="no-more" v-else>没有更多了</div>
+          <message-item v-for="message in currentMessageList" :key="message.ID" :message="message"/>
+        </div>
+        <div v-show="isShowScrollButtomTips" class="newMessageTips" @click="scrollMessageListToButtom">回到最新位置</div>
+      </div>
+      <div class="footer" v-if="showMessageSendBox" >
+        <message-send-box/>
+      </div>
+    </div>
+    <div class="profile" v-if="showConversationProfile" >
+      <conversation-profile/>
+    </div>
+    <!-- 群成员资料组件 -->
+    <member-profile-card />
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex'
+import MessageSendBox from '../message/message-send-box'
+import MessageItem from '../message/message-item'
+import ConversationProfile from './conversation-profile.vue'
+import MemberProfileCard from '../group/member-profile-card'
+export default {
+  name: 'CurrentConversation',
+  components: {
+    MessageSendBox,
+    MessageItem,
+    ConversationProfile,
+    MemberProfileCard
+  },
+  data() {
+    return {
+      isShowScrollButtomTips: false,
+      preScrollHeight: 0,
+      showConversationProfile: false,
+      timeout: ''
+    }
+  },
+  computed: {
+    ...mapState({
+      currentConversation: state => state.conversation.currentConversation,
+      currentUnreadCount: state => state.conversation.currentConversation.unreadCount,
+      currentMessageList: state => state.conversation.currentMessageList,
+      isCompleted: state => state.conversation.isCompleted
+    }),
+    ...mapGetters(['toAccount', 'hidden']),
+    // 是否显示当前会话组件
+    showCurrentConversation() {
+      return !!this.currentConversation.conversationID
+    },
+    name() {
+      if (this.currentConversation.type === 'C2C') {
+        return this.currentConversation.userProfile.nick || this.toAccount
+      } else if (this.currentConversation.type === 'GROUP') {
+        return this.currentConversation.groupProfile.name || this.toAccount
+      } else if (this.currentConversation.conversationID === '@TIM#SYSTEM') {
+        return '系统通知'
+      }
+      return this.toAccount
+    },
+    showMessageSendBox() {
+      return this.currentConversation.type !== this.TIM.TYPES.CONV_SYSTEM
+    }
+  },
+  mounted() {
+    this.$bus.$on('image-loaded', this.onImageLoaded)
+    this.$bus.$on('scroll-bottom', this.scrollMessageListToButtom)
+    if (this.currentConversation.conversationID === '@TIM#SYSTEM') {
+      return false
+    }
+  },
+  updated() {
+    this.keepMessageListOnButtom()
+    // 1. 系统会话隐藏右侧资料组件
+    // 2. 没有当前会话时，隐藏右侧资料组件。
+    //    背景：退出群组/删除会话时，会出现一处空白区域
+    if (this.currentConversation.conversationID === '@TIM#SYSTEM' ||
+        typeof this.currentConversation.conversationID === 'undefined') {
+      this.showConversationProfile = false
+    }
+  },
+  watch: {
+    currentUnreadCount(next) {
+      if (!this.hidden && next > 0) {
+        this.tim.setMessageRead({ conversationID: this.currentConversation.conversationID })
+      }
+    },
+    hidden(next) {
+      if (!next && this.currentUnreadCount > 0) {
+        this.tim.setMessageRead({ conversationID: this.currentConversation.conversationID })
+      }
+    }
+  },
+  methods: {
+    onScroll({ target: { scrollTop } }) {
+      let messageListNode = this.$refs['message-list']
+      if (!messageListNode) {
+        return
+      }
+      if (this.preScrollHeight - messageListNode.clientHeight - scrollTop < 20) {
+        this.isShowScrollButtomTips = false
+      }
+    },
+    // 如果滚到底部就保持在底部，否则提示是否要滚到底部
+    keepMessageListOnButtom() {
+      let messageListNode = this.$refs['message-list']
+      if (!messageListNode) {
+        return
+      }
+      // 距离底部20px内强制滚到底部,否则提示有新消息
+      if (this.preScrollHeight - messageListNode.clientHeight - messageListNode.scrollTop < 20) {
+        this.$nextTick(() => {
+          messageListNode.scrollTop = messageListNode.scrollHeight
+        })
+        this.isShowScrollButtomTips = false
+      } else {
+        this.isShowScrollButtomTips = true
+      }
+      this.preScrollHeight = messageListNode.scrollHeight
+    },
+    // 直接滚到底部
+    scrollMessageListToButtom() {
+      this.$nextTick(() => {
+        let messageListNode = this.$refs['message-list']
+        if (!messageListNode) {
+          return
+        }
+        messageListNode.scrollTop = messageListNode.scrollHeight
+        this.preScrollHeight = messageListNode.scrollHeight
+        this.isShowScrollButtomTips = false
+      })
+    },
+    showMore() {
+      this.showConversationProfile = !this.showConversationProfile
+    },
+    onImageLoaded() {
+      this.keepMessageListOnButtom()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+/* 当前会话的骨架屏 */
+.current-conversation-wrapper
+  height $height
+  background-color $background-light
+  color $base
+  display flex
+  .current-conversation
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: $height;
+  .profile
+    height: $height;
+    overflow-y: scroll;
+    width 220px
+    border-left 1px solid $border-base
+    flex-shrink 0
+  .more
+    display: flex;
+    justify-content: center;
+    font-size: 12px;
+  .no-more
+    display: flex;
+    justify-content: center;
+    color: $secondary;
+    font-size: 12px;
+    padding: 10px 10px;
+
+.header
+  border-bottom 1px solid $border-base
+  height 50px
+  position relative
+  .name
+    padding 0 20px
+    color $base
+    font-size 18px
+    font-weight bold
+    line-height 50px
+    text-shadow $font-dark 0 0 0.1em
+  .btn-more-info
+    position absolute
+    top 10px
+    right -15px
+    border-radius 50%
+    width 30px
+    height 30px
+    cursor pointer
+    &::before
+      position absolute
+      right 0
+      z-index 0
+      content ""
+      width: 15px
+      height: 30px
+      border: 1px solid $border-base
+      border-radius: 0 100% 100% 0/50%
+      border-left: none
+      background-color $background-light
+    &::after
+      content ""
+      width: 8px;
+      height: 8px;
+      transition: transform 0.8s;
+      border-top: 2px solid $secondary;
+      border-right: 2px solid $secondary;
+      float:right;
+      position:relative;
+      top: 11px;
+      right: 8px;
+      transform:rotate(45deg)
+    &.left-arrow
+      transform rotate(180deg)
+      &::before
+        background-color $white
+    &:hover
+      &::after
+        border-color $light-primary
+.content
+  display: flex;
+  flex 1
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  .message-list
+    width: 100%;
+    box-sizing: border-box;
+    overflow-y: scroll;
+    padding: 0 20px;
+  .newMessageTips
+    position: absolute
+    cursor: pointer;
+    padding: 5px;
+    width: 120px;
+    margin: auto;
+    left: 0;
+    right: 0;
+    bottom: 5px;
+    font-size: 12px;
+    text-align: center;
+    border-radius: 10px;
+    border: $border-light 1px solid;
+    background-color: $white;
+    color: $primary;
+.footer
+  border-top: 1px solid $border-base;
+.show-more {
+  text-align: right;
+  padding: 10px 20px 0 0;
+}
+</style>

+<template>
+  <div>
+    <el-row class="friend-item-container">
+      <el-col :span="6">
+        <avatar :src="friend.profile.avatar"/>
+      </el-col>
+      <el-col :span="18">
+        <div class="friend-name">{{ friend.profile.nick || friend.userID }}</div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    friend: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    handleFriendClick() {
+      this.tim.getConversationProfile(`C2C${this.friend.userID}`)
+          .then(({data}) => this.$store.commit('updateCurrentConversation', data))
+          .catch(error => {
+            this.$store.commit('showMessage', {
+              type: 'error',
+              message: error.message
+            })
+          })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+</style>

+<template>
+  <!--  <div class="friend-list-container" :class="{'default': !hasFriend}">-->
+  <div class="list-container">
+
+    <el-collapse v-model="activeNames" class="friend-list-container">
+      <el-collapse-item title="用户组" name="user">
+        <friend-item v-for="friend in friendList" :key="friend.userID" :friend="friend"/>
+      </el-collapse-item>
+      <el-collapse-item title="策划组" name="scheme">
+
+      </el-collapse-item>
+      <el-collapse-item title="管理组" name="admin">
+
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+  <!--    <div v-if="hasFriend">-->
+  <!--      <friend-item v-for="friend in friendList" :key="friend.userID" :friend="friend"/>-->
+  <!--    </div>-->
+  <!--    <div style="color:gray;" v-else>暂无数据</div>-->
+  <!--  </div>-->
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import FriendItem from './friend-item.vue'
+
+
+export default {
+  components: {
+    FriendItem,
+  },
+  computed: {
+    ...mapState({
+      friendList: state => state.friend.friendList
+    }),
+    hasFriend() {
+      return this.friendList.length > 0
+    }
+  },
+  data() {
+    return {
+      activeNames: [],
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scpoed>
+.list-container
+  height 100%
+  width 100%
+  display flex
+  flex-direction column
+
+  .friend-list-container
+    margin 1px
+    border-top:unset
+    border-bottom unset
+
+
+.default {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  overflow-y: scroll;
+}
+</style>

+<template>
+  <div class="chat-footer-container">
+    <!-- <p class="gift-title">礼物列表</p> -->
+    <carousel :autoplay="false" :loop="false" :initial-index="1" indicator-position="none" arrow="always">
+      <carousel-item v-for="(item, index) in giftList" :key="`item_${index}`">
+        <template v-for="(_item, _index) in item">
+          <div class="gift-item" :key="`gift_item_${index}_${_index}`" @click="handleGiftPic(_item.index)">
+            <img class="gift-icon" :src="_item.icon" alt=""/>
+            <p class="gift-name">{{ _item.name }}</p>
+          </div>
+        </template>
+      </carousel-item>
+    </carousel>
+  </div>
+</template>
+
+<script>
+ import { Carousel , CarouselItem } from 'element-ui'
+  export default {
+    name: 'liveGift',
+    props: {},
+    data() {
+      return {
+        giftList: [
+          [
+            {
+              index: 1,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1590482989_25.png',
+              name: '火箭'
+            },
+            {
+              index: 2,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1507876726_3',
+              name: '鸡蛋'
+            },
+            {
+              index: 3,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1590482294_7.png',
+              name: '吻'
+            },
+          ],
+          [
+            {
+              index: 4,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1590482461_11.png',
+              name: '跑车'
+            },
+            {
+              index: 5,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1594714453_7.png',
+              name: '嘉年华'
+            },
+            {
+              index: 6,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1590482754_17.png',
+              name: '玫瑰'
+            }
+          ],
+          [
+            {
+              index: 7,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1594281297_11.png',
+              name: '直升机'
+            },
+            {
+              index: 8,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1507876472_1',
+              name: '点赞'
+            },
+            {
+              index: 9,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1590483038_27.png',
+              name: '比心'
+            }
+          ],
+          [
+            {
+              index: 10,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1590483168_31.png',
+              name: '冰淇淋'
+            },
+            {
+              index: 11,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1590483225_33.png',
+              name: '玩偶'
+            },
+            {
+              index: 12,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1590483278_35.png',
+              name: '蛋糕'
+            }
+          ],
+          [
+            {
+              index: 13,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1590483348_37.png',
+              name: '豪华轿车'
+            },
+            {
+              index: 14,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1590483429_39.png',
+              name: '游艇'
+            },
+            {
+              index: 15,
+              icon: 'https://8.url.cn/huayang/resource/now/new_gift/1590483505_41.png',
+              name: '翅膀'
+            }
+          ]
+        ]
+      }
+    },
+    components: {
+      Carousel,
+      CarouselItem
+    },
+    methods: {
+      handleGiftPic(index) {
+        this.$bus.$emit('group-live-send-gift', index)
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" scoped>
+ .chat-footer-container {
+   position relative
+   width 100%
+   height 50px
+   box-sizing border-box
+   border-top 1px solid #e6e6e6
+   .gift-title {
+     margin 10px 0 0 0
+     padding 0 10px
+     font-size 16px
+     font-weight 400
+     color #888585
+     border-bottom 1px solid #e6e6e6
+   }
+
+ }
+</style>
+<style>
+  .el-carousel {
+    height: 60px;
+  }
+  .el-carousel .el-carousel__container {
+    height: 100%;
+  }
+  .el-carousel__arrow {
+    top: 40%!important
+  }
+  .el-carousel__item {
+    padding: 0px 30px 0 45px;
+    box-sizing: 'border-box'
+  }
+  .el-carousel__item div {
+    float: left;
+    margin: 0 15px;
+    width: 65px;
+    height: 40px;
+    cursor: pointer;
+  }
+  .el-carousel__item div img {
+    width: 30px;
+    height: 30px;
+    margin: 0 0 0 15px;
+  }
+  .el-carousel__item div p {
+    position: relative;
+    top: -8px;
+    margin: 0;
+    text-align: center;
+    color: #888585;
+    font-size: 12px;
+  }
+</style>
\ No newline at end of file

+<template>
+  <div class="header-container">
+    <div v-show="showLiveInfo">
+      <div class="anchor-info">
+        <img class="anchor-avatar" :src="avatar">
+        <div class="anchor-other">
+          <p class="anchor-nick">{{nick}}</p>
+          <p class="online-num">在线：{{onlineMemberCount}}</p>
+        </div>
+      </div>
+      <div class="online-info">
+        <p class="room-name">直播中</p>
+        <img class="living-icon" src="../../../assets/image/living-icon.gif" />
+        <span>{{` ${pusherTime}`}}</span>
+      </div>
+    </div>
+    <div class="close-box" @click="closeLiveMask">
+      <i class="el-icon-circle-close"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+ import { mapState } from 'vuex'
+  export default {
+    name: 'liveHeader',
+    props: {
+      fr: {
+        type: String,
+        requred: true
+      },
+      isPushingStream: {
+        type: Boolean,
+        default: false
+      },
+      stopPushStream: {
+        type: Function
+      },
+      pusherTime: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        nick: '',
+        avatar: 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-2.png',
+        onlineMemberCount: 0,
+        timer: null,
+        onlineList: []
+      }
+    },
+    computed: {
+      ...mapState({
+        groupLiveInfo: state => state.groupLive.groupLiveInfo
+      }),
+      showLiveInfo() {
+        return (this.fr === 'pusher' && this.isPushingStream) || this.fr === 'player'
+      },
+      roomName() {
+        return this.groupLiveInfo.roomName || `${this.groupLiveInfo.anchorID}的直播`
+      }
+    },
+    mounted() {
+      this.getAnchorProfile()
+      if (this.fr === 'player') {
+        this.timer = setInterval(() => {
+          this.getGroupOnlineMemberCount()
+        }, 5000)
+      }
+    },
+    beforeDestroy() {
+      this.timer && clearInterval(this.timer)
+    },
+    methods: {
+      closeLiveMask() {
+        if (this.fr === 'pusher') {
+          this.stopPushStream()
+          return
+        }
+        this.$store.commit('updateGroupLiveInfo', { isNeededQuitRoom: 1 })
+        this.$bus.$emit('close-group-live')
+      },
+      async getAnchorProfile() {
+        const res = await this.tim.getUserProfile({userIDList: [this.groupLiveInfo.anchorID]})
+        if (res.code === 0) {
+          this.nick = res.data[0].nick || res.data[0].userID
+          this.avatar = res.data[0].avatar || 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-2.png'
+        }
+      },
+      async getGroupOnlineMemberCount() {
+        const res = await this.tim.getGroupOnlineMemberCount(this.groupLiveInfo.roomID)
+        if (res.code === 0 && res.data) {
+          this.onlineMemberCount = res.data.memberCount
+        }
+      }
+    },
+    watch: {
+      isPushingStream: function(val) {
+        if (val && this.fr === 'pusher') {
+          this.timer = setInterval(() => {
+            this.getGroupOnlineMemberCount()
+          }, 5000)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" scoped>
+ .header-container {
+   position absolute
+   left 0
+   top 0
+   width 100%
+   height 100%
+   box-sizing border-box
+   z-index 99
+   padding 10px 10px 10px 20px
+  .anchor-info {
+    position absolute
+    top 50%
+    transform translateY(-50%)
+    width 200px
+    height 50px
+    background rgba(255, 255 ,255 ,0.1)
+    border-radius 30px
+    display flex
+    align-items center
+    .anchor-avatar {
+      width 50px
+      height 50px
+      border-radius 50%
+      margin 0 5px
+    }
+    .anchor-other {
+      height 100%
+      flex 1
+      p {
+        margin 0
+      }
+      .anchor-nick{
+        max-width 140px
+        margin 6px 0 0 0
+        color: #ffffff
+        font-weight 500
+        word-break keep-all
+        overflow hidden
+        text-overflow ellipsis
+        white-space nowrap
+      }
+      .online-num{
+        font-size 14px
+        font-weight 400
+        color #d2cbcbad
+      }
+    }
+  }
+  .online-info {
+    position absolute
+    left 50%
+    top 50%
+    transform translate(-50%, -50%)
+    height 50px
+    color #fff
+    display flex
+    align-items center
+    .room-name{
+      display inline-block
+      max-width 160px
+      overflow hidden
+      white-space nowrap
+      text-overflow ellipsis
+      margin 0
+      padding 0 0 0 10px
+    }
+    .living-icon{
+      position relative
+      top -3px
+      margin 0 5px
+      width 25px
+    }
+    span {
+      margin 2px 0 0 0
+    }
+  }
+  .close-box {
+    position absolute
+    right 0
+    top 0px
+    width 70px
+    height 70px
+    color: #959798
+    font-size 36px
+    cursor pointer
+    display flex
+    align-items center
+    justify-content center
+  }
+ }
+</style>

+<template>
+  <div>
+    <div class="share-content"  ref="shareCon" v-show="showShareContent">
+      <p class="qrcode-tips">手机扫码观看或复制链接分享给好友</p>
+      <qrcode ref="childQrcode"/>
+      <button class="copy-link" @click="copyLink" v-clipboard="playUrl" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制链接</button>
+    </div>
+    <div class="share-btn" ref="shareBtn">
+      <img class="share-icon" src="../../../assets/image/share-icon.png" alt=""/>
+      分享直播
+    </div>
+  </div>
+</template>
+
+<script>
+import qrcode from './qrcode'
+export default {
+  name: 'liveShare',
+  data() {
+    return {
+      showShareContent: false,
+      playUrl: '',
+    }
+  },
+  computed: {},
+  components: {
+    qrcode
+  },
+  mounted() {
+    const shareCon = this.$refs.shareCon
+    const shareBtn = this.$refs.shareBtn
+    shareBtn.addEventListener('mouseover', () => {
+      this.showShareContent = true
+    })
+    shareBtn.addEventListener('mouseout', () => {
+      this.showShareContent = false
+    })
+    shareCon.addEventListener('mouseover', () => {
+      this.showShareContent = true
+    })
+    shareCon.addEventListener('mouseout', () => {
+      this.showShareContent = false
+    })
+  },
+  methods: {
+    copyLink() {
+      this.playUrl= this.$refs.childQrcode.playUrl
+    },
+    onCopySuccess() {
+      this.$store.commit('showMessage', {
+        type: 'success',
+        message: '复制成功'
+      })
+    },
+    onCopyError() {
+      this.$store.commit('showMessage', {
+        type: 'error',
+        message: '复制失败'
+      })
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+  .share-content {
+    position absolute
+    top -250px
+    left 20px
+    width 200px
+    height 250px
+    background #ffffff
+    border-radius 5px 5px 0 0
+    z-index 1
+    padding 10px
+    box-sizing border-box
+    text-align center
+    .qrcode-tips {
+      margin 0 0 0 0
+      color #a5b5c1
+      text-align center
+    }
+    .copy-link{
+      width 160px
+      height 40px
+      border hidden
+      outline-style none
+      background #5cadff
+      color #fff
+      font-size 16px
+      border-radius 25px
+      margin 20px 0
+      cursor pointer
+    }
+  }
+  .share-btn {
+    position absolute
+    bottom 0
+    line-height 55px
+    font-size 14px
+    color #8a9099
+    letter-spacing 0
+    margin 0 0 0 20px
+    box-sizing border-box
+    display flex
+    align-items center
+    cursor pointer
+    .share-icon {
+      width 20px
+      height 20px
+      margin 0 5px 2px 0
+    }
+  }
+</style>

+<template>
+  <img class="qrcode-img" v-if="qrcodeUrl" :src="qrcodeUrl"/>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import QRCode from 'qrcode'
+export default {
+  props: {
+    url: String
+  },
+  data() {
+    return {
+      qrcodeUrl: '',
+      playUrl: '',
+    }
+  },
+  computed: {
+    ...mapState({
+      user: state => state.user,
+      roomID: state => state.groupLive.groupLiveInfo.roomID,
+      anchorID: state => state.groupLive.groupLiveInfo.anchorID,
+    }),
+  },
+  async mounted() {
+    this.qrcodeUrl = await this.generateQRcode()
+  },
+  methods: {
+    generateQRcode() {
+      const streamID = `${this.user.sdkAppID}_${this.roomID}_${this.anchorID}_main`
+      const flv = `https://tuikit.qcloud.com/live/${streamID}.flv`
+      const hls = `https://tuikit.qcloud.com/live/${streamID}.m3u8` 
+      this.playUrl = `https://webim-1252463788.cos.ap-shanghai.myqcloud.com/tweblivedemo/0.3.2-cdn-player/index.html?flv=${encodeURIComponent(flv)}&hls=${encodeURIComponent(hls)}&roomid=${this.roomID}`
+      return QRCode.toDataURL(this.playUrl)
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+  .qrcode-img {
+    display block
+    width 120px
+    height  120px
+    margin 0 auto
+  }
+</style>

+<template>
+  <div class="group-live-mask" v-if="groupLiveVisible">
+        <div class="live-container">
+            <div class="video-wrap">
+              <template v-if="channel === 3 && userID !== anchorID">
+                <live-player />
+              </template>
+              <template v-else>
+                <live-pusher />
+              </template>
+            </div>
+            <div class="chat-wrap">
+              <live-chat v-if="groupLiveVisible" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import livePusher from './components/live-pusher'
+import livePlayer from './components/live-player'
+import liveChat from './components/live-chat'
+
+export default {
+  name: 'groupLive',
+  data() {
+    return {
+      groupLiveVisible: false,
+      channel: 1 // 进入直播间渠道：1 群组内直播 2 群组外直播 3 点击消息卡片
+    }
+  },
+  computed: {
+    ...mapState({
+      userID: state => state.user.userID,
+      groupID: state => state.groupLive.groupLiveInfo.groupID,
+      roomID: state => state.groupLive.groupLiveInfo.roomID,
+      anchorID: state => state.groupLive.groupLiveInfo.anchorID,
+    }),
+  },
+  mounted() {
+    this.$bus.$on('open-group-live', (options) => {
+      this.channel = options.channel
+      this.groupLiveVisible = true
+    })
+    this.$bus.$on('close-group-live', () => {
+      this.groupLiveVisible = false
+      this.$store.commit('clearAvChatRoomMessageList')
+    })
+  },
+  beforeDestroy() {
+    this.$bus.$off('open-group-live')
+    this.$bus.$off('close-group-live')
+  },
+  components: {
+      livePusher,
+      livePlayer,
+      liveChat,
+  },
+  methods: {}
+}
+</script>
+<style lang="stylus" scoped>
+    .group-live-mask{
+      position absolute
+      top 8vh
+      width 80vw
+      height 80vh
+      max-width: 1280px
+      background: #fff
+      z-index 999
+    }
+    .live-container {
+        width 100%
+        height 100%
+        display flex
+        .video-wrap {
+          position relative
+          flex 1
+          min-width 500px
+          height 100%
+          background url('../../assets/image/video-bg.png') center no-repeat
+        }
+        .chat-wrap {
+          width 375px
+          height 100%
+          background #f5f5f5
+        }
+    }
+</style>
\ No newline at end of file

+<template>
+  <div>
+    <el-form :model="form" :rules="rules" ref="createGroupForm" label-width="100px">
+      <el-form-item label="群ID">
+        <el-input v-model="form.groupID"></el-input>
+      </el-form-item>
+      <el-form-item label="群名称" prop="name">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="群类型">
+        <el-select v-model="form.type">
+          <el-option label="Work" :value="TIM.TYPES.GRP_WORK"></el-option>
+          <el-option label="Public" :value="TIM.TYPES.GRP_PUBLIC"></el-option>
+          <el-option label="Meeting" :value="TIM.TYPES.GRP_MEETING"></el-option>
+          <el-option label="AVChatRoom" :value="TIM.TYPES.GRP_AVCHATROOM"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="群头像地址">
+        <el-input v-model="form.avatar"></el-input>
+      </el-form-item>
+      <el-form-item label="群简介">
+        <el-input type="textarea" v-model="form.introduction" :maxlength="240"></el-input>
+      </el-form-item>
+      <el-form-item label="群公告">
+        <el-input type="textarea" v-model="form.notification" :maxlength="300"></el-input>
+      </el-form-item>
+      <el-form-item label="加群方式">
+        <el-radio-group v-model="form.joinOption" :disabled="joinOptionDisabled">
+          <el-radio label="FreeAccess">自由加群</el-radio>
+          <el-radio label="NeedPermission">需要验证</el-radio>
+          <el-radio label="DisableApply">禁止加群</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="群成员列表">
+        <el-select
+          v-model="form.memberList"
+          default-first-option
+          multiple
+          filterable
+          remote
+          :disabled="form.type === TIM.TYPES.GRP_AVCHATROOM"
+          :remote-method="handleSearchUser"
+          :loading="loading"
+          placeholder="请输入群成员 userID"
+        >
+          <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="primary" @click="onSubmit('createGroupForm')">立即创建</el-button>
+      <el-button @click="closeCreateGroupModel">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  Form,
+  FormItem,
+  Input,
+  Select,
+  Option,
+  Radio,
+  RadioGroup
+} from 'element-ui'
+export default {
+  components: {
+    ElForm: Form,
+    ElFormItem: FormItem,
+    ElInput: Input,
+    ElSelect: Select,
+    ElOption: Option,
+    ElRadioGroup: RadioGroup,
+    ElRadio: Radio
+  },
+  data() {
+    return {
+      form: {
+        groupID: '',
+        name: '',
+        type: this.TIM.TYPES.GRP_WORK,
+        avatar: '',
+        introduction: '',
+        notification: '',
+        joinOption: 'FreeAccess',
+        memberList: []
+      },
+      options: [],
+      loading: false,
+      rules: {
+        name: [{ required: true, message: '请输入群名称', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    joinOptionDisabled() {
+      return [
+        this.TIM.TYPES.GRP_WORK,
+        this.TIM.TYPES.GRP_MEETING,
+        this.TIM.TYPES.GRP_AVCHATROOM
+      ].includes(this.form.type)
+    }
+  },
+  methods: {
+    onSubmit(ref) {
+      this.$refs[ref].validate(valid => {
+        if (!valid) {
+          return false
+        }
+        this.createGroup()
+      })
+    },
+    closeCreateGroupModel() {
+      this.$store.commit('updateCreateGroupModelVisible', false)
+    },
+    createGroup() {
+      this.tim.createGroup(this.getOptions()).then((imResponse) => {
+         this.$store.commit('showMessage', {
+            message: `群组：【${imResponse.data.group.name}】创建成功`,
+            type: 'success'
+          })
+        this.closeCreateGroupModel()
+      })
+      .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+        })
+    },
+    getOptions() {
+      let options = {
+        ...this.form,
+        memberList: this.form.memberList.map(userID => ({ userID }))
+      }
+      if ([this.TIM.TYPES.GRP_WORK, this.TIM.TYPES.GRP_AVCHATROOM].includes(this.form.type)) {
+        delete options.joinOption
+      }
+      return options
+    },
+    handleSearchUser(userID) {
+      if (userID !== '') {
+        this.loading = true
+        this.tim.getUserProfile({ userIDList: [userID] }).then(({ data }) => {
+          this.options = data.map(item => item.userID)
+          this.loading = false
+        })
+        .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+</style>

+<template>
+  <div @click="handleGroupClick" class="scroll-container">
+    <div class="group-item">
+      <avatar :src="group.avatar" />
+      <div class="group-name text-ellipsis">{{ group.name }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['group'],
+  data() {
+    return {
+      visible: false,
+      options: [
+        {
+          text: '退出群组',
+          handler: this.quitGroup
+        }
+      ]
+    }
+  },
+  methods: {
+    handleGroupClick() {
+      const conversationID = `GROUP${this.group.groupID}`
+      this.$store.dispatch('checkoutConversation', conversationID)
+    },
+    quitGroup() {
+      this.tim.quitGroup(this.group.groupID)
+      .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.scroll-container
+  overflow-y scroll
+  flex 1
+  .group-item
+    display flex
+    padding 10px 20px
+    cursor pointer
+    position relative
+    overflow hidden
+    transition .2s
+    &:hover
+      background-color $background
+    .avatar
+      width 30px
+      height 30px
+      border-radius 50%
+      margin-right 10px
+      flex-shrink 0
+    .group-name
+      flex 1
+      color $font-light
+      line-height 30px
+</style>

+<template>
+  <div class="list-container">
+    <div class="header-bar">
+      <el-autocomplete
+        :value-key="'groupID'"
+        :debounce="500"
+        size="mini"
+        v-model="groupID"
+        placeholder="输入群ID搜索"
+        :fetch-suggestions="searchGroupByID"
+        class="group-seach-bar"
+        prefix-icon="el-icon-search"
+        :hide-loading="hideSearchLoading"
+        @input="hideSearchLoading = false"
+        @select="applyJoinGroup"
+      ></el-autocomplete>
+<!--      <button title="创建群组" @click="showCreateGroupModel">-->
+<!--        <i class="tim-icon-add"></i>-->
+<!--      </button>-->
+    </div>
+    <div class="group-container">
+      <group-item v-for="group in groupList" :key="group.groupID" :group="group" />
+      <el-dialog title="创建群组" :visible="createGroupModelVisible" @close="closeCreateGroupModel" width="30%">
+        <create-group></create-group>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { Dialog, Autocomplete } from 'element-ui'
+import CreateGroup from './create-group.vue'
+import GroupItem from './group-item.vue'
+export default {
+  data() {
+    return {
+      groupID: '',
+      hideSearchLoading: true
+    }
+  },
+  components: {
+    GroupItem,
+    ElDialog: Dialog,
+    CreateGroup,
+    ElAutocomplete: Autocomplete
+  },
+  computed: {
+    groupList: function() {
+      return this.$store.state.group.groupList
+    },
+    ...mapState({
+      createGroupModelVisible: state => {
+        return state.group.createGroupModelVisible
+      }
+    })
+  },
+  methods: {
+    onGroupUpdated(groupList) {
+      this.$store.dispatch('updateGroupList', groupList)
+    },
+    createGroup() {},
+    closeCreateGroupModel() {
+      this.$store.commit('updateCreateGroupModelVisible', false)
+    },
+    searchGroupByID(queryString, showInSearchResult) {
+      if (queryString.trim().length > 0) {
+        this.hideSearchLoading = false
+        this.tim
+          .searchGroupByID(queryString)
+          .then(({ data: { group } }) => {
+            showInSearchResult([group])
+          })
+          .catch(() => {
+            this.$store.commit('showMessage', {
+              message: '没有找到该群',
+              type: 'error'
+            })
+          })
+      } else {
+        this.hideSearchLoading = true
+      }
+    },
+    showCreateGroupModel() {
+      this.$store.commit('updateCreateGroupModelVisible', true)
+    },
+    applyJoinGroup(group) {
+      this.tim
+        .joinGroup({ groupID: group.groupID })
+        .then(async res => {
+          switch(res.data.status) {
+            case this.TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL:
+              this.$store.commit('showMessage', {
+                message: '申请成功，等待群管理员确认。',
+                type: 'info'
+              })
+              break
+            case this.TIM.TYPES.JOIN_STATUS_SUCCESS:
+              await this.$store.dispatch(
+                'checkoutConversation',
+                `GROUP${res.data.group.groupID}`
+              )
+              this.$store.commit('showMessage', {
+                message: '加群成功',
+                type: 'success'
+              })
+              break
+            case this.TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP:
+              this.$store.commit('showMessage', {
+                message: '您已经是群成员了，请勿重复加群哦！',
+                type: 'info'
+              })
+              break
+            default: break
+          }
+        })
+        .catch(error => {
+          this.$store.commit('showMessage', {
+            message: error.message,
+            type: 'error'
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.list-container
+  height 100%
+  width 100%
+  display flex
+  flex-direction column
+  .group-container
+    overflow-y scroll
+  .header-bar
+    display: flex;
+    flex-shrink 0
+    height 50px
+    border-bottom 1px solid $background-deep-dark
+    padding 10px 10px 10px 20px
+    .group-seach-bar
+      width 100%
+      margin-right 10px
+      >>> .el-input
+        input
+          color $first
+          border none
+          border-radius 30px
+          background-color $deep-background !important
+          &::placeholder
+            color $font-dark
+        .el-icon-search
+          color $font-dark
+    button
+      float right
+      display: inline-block;
+      cursor: pointer;
+      background $background-deep-dark
+      border: none
+      color: $font-dark;
+      box-sizing: border-box;
+      transition: .3s;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+      margin: 0
+      padding 0
+      width 30px
+      height 30px
+      line-height 34px
+      font-size: 24px;
+      text-align: center;
+      white-space: nowrap;
+      border-radius: 50%
+      outline 0
+      flex-shrink 0
+      &:hover
+        transform: rotate(360deg);
+        color $light-primary
+  .scroll-container
+    overflow-y scroll
+    flex 1
+
+</style>

+<template>
+  <transition name="el-fade-in">
+    <div
+      class="member-profile-card-wrapper"
+      ref="member-profile-card"
+      v-show="visible"
+      :style="{top: y + 'px', left: x + 'px'}"
+    >
+      <div class="profile">
+        <avatar :src="member.avatar" class="avatar" />
+        <div class="basic">
+          <span>ID：{{member.userID}}</span>
+          <span>昵称：{{member.nick||"暂无"}}</span>
+        </div>
+      </div>
+      <el-divider class="divider" />
+      <div class="member-profile">
+        <div class="item">
+          <span class="label">群名片</span>
+          {{member.nameCard||"暂无"}}
+        </div>
+        <div class="item">
+          <span class="label">入群时间</span>
+          {{joinTime}}
+        </div>
+        <div v-if="member.muteUntil" class="item">
+          <span class="label">禁言至</span>
+          {{muteUntil}}
+        </div>
+      </div>
+      <el-button
+        class="send-message-btn"
+        type="primary"
+        size="mini"
+        title="发消息"
+        @click="handleSendMessage"
+        icon="el-icon-message"
+        circle
+      ></el-button>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { Divider } from 'element-ui'
+import { getFullDate } from '../../utils/date'
+
+// 群成员资料卡片组件，全局共用同一个组件。
+export default {
+  name: 'MemberProfileCard',
+  components: {
+    ElDivider: Divider
+  },
+  data() {
+    return {
+      member: {},
+      x: 0, // 显示的位置 x
+      y: 0, // 显示的位置 y
+      visible: false
+    }
+  },
+  mounted() {
+    // 通过事件总线，监听 showMemebrProfile 事件
+    this.$bus.$on('showMemberProfile', this.handleShowMemberProfile, this)
+  },
+  computed: {
+    joinTime() {
+      if (this.member.joinTime) {
+        return getFullDate(new Date(this.member.joinTime * 1000))
+      }
+      return ''
+    },
+    muteUntil() {
+      if (this.member.muteUntil) {
+        return getFullDate(new Date(this.member.muteUntil * 1000))
+      }
+      return ''
+    }
+  },
+  methods: {
+    handleSendMessage() {
+      this.$store.dispatch('checkoutConversation', `C2C${this.member.userID}`)
+      this.hide()
+    },
+    handleShowMemberProfile({ event, member }) {
+      // 可以拿到 meber 和 点击事件的 event 信息
+      this.member = member || {}
+      this.x = event.x
+      this.y = event.y
+      this.show()
+    },
+    show() {
+      if (this.visible) {
+        return
+      }
+      // 显示时，监听全局点击事件，若点击区域不是当前组件，则隐藏
+      window.addEventListener('click', this.handleClick, this)
+      this.visible = true
+    },
+    hide() {
+      if (!this.visible) {
+        return
+      }
+      // 隐藏时，注销监听
+      window.removeEventListener('click', this.handleClick, this)
+      this.visible = false
+    },
+    handleClick(event) {
+      // 判断点击区域是否是当前组件，若不是，则隐藏组件
+      if (event.target !== this.$refs['member-profile-card']) {
+        this.hide()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.member-profile-card-wrapper {
+  max-width: 300px;
+  padding: 24px;
+  background: #fff;
+  border-radius: 5px;
+  position: fixed;
+  box-shadow: 0 0 10px gray;
+
+  .profile {
+    display: flex;
+
+    .avatar {
+      width: 60px;
+      height: 60px;
+      margin-right: 12px;
+    }
+
+    .basic {
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+    }
+  }
+
+  .divider {
+    margin: 12px 0;
+  }
+
+  .member-profile {
+    margin-bottom: 12px;
+
+    .item {
+      font-size: 15px;
+
+      .label {
+        display: inline-block;
+        width: 4em;
+        text-align: justify;
+        text-align-last: justify;
+        color: gray;
+      }
+    }
+  }
+  .send-message-btn {
+    float right
+  }
+}
+</style>
\ No newline at end of file

+<template>
+  <div class="side-bar-wrapper">
+    <div class="bar-left">
+      <my-profile/>
+      <div class="tab-items" @click="handleClick">
+        <div id="conversation-list"
+             class="iconfont icon-conversation"
+             :class="{ active: showConversationList }"
+             title="会话列表">
+          <sup class="unread" v-if="totalUnreadCount !== 0">
+            <template v-if="totalUnreadCount > 99">99+</template>
+            <template v-else>{{ totalUnreadCount }}</template>
+          </sup>
+        </div>
+        <div
+            id="group-list"
+            class="iconfont icon-group"
+            :class="{ active: showGroupList }"
+            title="群组列表"
+        ></div>
+        <div
+            id="friend-list"
+            class="iconfont icon-contact"
+            :class="{ active: showFriendList }"
+            title="通讯录"
+        ></div>
+        <!--        <div-->
+        <!--          id="black-list"-->
+        <!--          class="iconfont icon-blacklist"-->
+        <!--          :class="{ active: showBlackList }"-->
+        <!--          title="黑名单列表"-->
+        <!--        ></div>-->
+        <!--        <div-->
+        <!--          id="group-live"-->
+        <!--          class="group-live"-->
+        <!--          title="群直播"-->
+        <!--        ></div>-->
+      </div>
+      <div class="bottom">
+        <div class="iconfont icon-tuichu" @click="$store.dispatch('logout')" title="退出"></div>
+      </div>
+    </div>
+    <div class="bar-right">
+      <conversation-list v-show="showConversationList"/>
+      <group-list v-show="showGroupList"/>
+      <friend-list v-show="showFriendList"/>
+      <black-list v-show="showBlackList"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapGetters, mapState} from 'vuex'
+import MyProfile from '../my-profile'
+import ConversationList from '../conversation/conversation-list'
+import GroupList from '../group/group-list'
+import FriendList from '../friend/friend-list'
+import BlackList from '../blacklist/blacklist'
+
+const activeName = {
+  CONVERSATION_LIST: 'conversation-list',
+  GROUP_LIST: 'group-list',
+  FRIEND_LIST: 'friend-list',
+  BLACK_LIST: 'black-list',
+  GROUP_LIVE: 'group-live',
+}
+export default {
+  name: 'SideBar',
+  components: {
+    MyProfile,
+    ConversationList,
+    GroupList,
+    FriendList,
+    BlackList
+  },
+  data() {
+    return {
+      active: activeName.CONVERSATION_LIST,
+      activeName: activeName
+    }
+  },
+  computed: {
+    ...mapGetters(['totalUnreadCount']),
+    ...mapState({
+      userID: state => state.user.userID,
+    }),
+    showConversationList() {
+      return this.active === activeName.CONVERSATION_LIST
+    },
+    showGroupList() {
+      return this.active === activeName.GROUP_LIST
+    },
+    showFriendList() {
+      return this.active === activeName.FRIEND_LIST
+    },
+    showBlackList() {
+      return this.active === activeName.BLACK_LIST
+    },
+    showAddButton() {
+      return [activeName.CONVERSATION_LIST, activeName.GROUP_LIST].includes(
+          this.active
+      )
+    }
+  },
+  methods: {
+    checkoutActive(name) {
+      this.active = name
+    },
+    handleClick(event) {
+      switch (event.target.id) {
+        case activeName.CONVERSATION_LIST:
+          this.checkoutActive(activeName.CONVERSATION_LIST)
+          break
+        case activeName.GROUP_LIST:
+          this.checkoutActive(activeName.GROUP_LIST)
+          break
+        case activeName.FRIEND_LIST:
+          this.checkoutActive(activeName.FRIEND_LIST)
+          break
+        case activeName.BLACK_LIST:
+          this.checkoutActive(activeName.BLACK_LIST)
+          break
+        case activeName.GROUP_LIVE:
+          this.groupLive()
+          break
+      }
+    },
+    handleRefresh() {
+      switch (this.active) {
+        case activeName.CONVERSATION_LIST:
+          this.tim.getConversationList().catch(error => {
+            this.$store.commit('showMessage', {
+              type: 'error',
+              message: error.message
+            })
+          })
+          break
+        case activeName.GROUP_LIST:
+          this.getGroupList()
+          break
+        case activeName.FRIEND_LIST:
+          this.getFriendList()
+          break
+        case activeName.BLACK_LIST:
+          this.$store.dispatch('getBlacklist')
+          break
+      }
+    },
+    getGroupList() {
+      this.tim
+          .getGroupList()
+          .then(({data: groupList}) => {
+            this.$store.dispatch('updateGroupList', groupList)
+          })
+          .catch(error => {
+            this.$store.commit('showMessage', {
+              type: 'error',
+              message: error.message
+            })
+          })
+    },
+    getFriendList() {
+      this.tim
+          .getFriendList()
+          .then(({data: friendList}) => {
+            this.$store.commit('upadteFriendList', friendList)
+          })
+          .catch(error => {
+            this.$store.commit('showMessage', {
+              type: 'error',
+              message: error.message
+            })
+          })
+          .catch(error => {
+            this.$store.commit('showMessage', {
+              type: 'error',
+              message: error.message
+            })
+          })
+    },
+    groupLive() {
+      this.$store.commit('updateGroupLiveInfo', {
+        groupID: 0,
+        anchorID: this.userID,
+      })
+      this.$bus.$emit('open-group-live', {channel: 2})
+    },
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.side-bar-wrapper {
+  height: 100%;
+  color: $black;
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+
+  .bar-left {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    width: 80px;
+    height: $height;
+    background-color: $background-deep-dark;
+
+    .tab-items {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+
+      .iconfont {
+        position: relative;
+        margin: 0;
+        height: 70px;
+        line-height: 70px;
+        text-align: center;
+        font-size: 30px;
+        cursor: pointer;
+        color: $first;
+        user-select: none;
+        -moz-user-select: none;
+      }
+
+      .active {
+        color: $white;
+        background-color: $background-dark;
+
+        &::after {
+          content: ' ';
+          display: block;
+          position: absolute;
+          top: 0;
+          z-index: 0;
+          height: 70px;
+          // border-left 4px solid $border-highlight
+          border-left: 4px solid $light-primary;
+        }
+      }
+
+      .unread {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 999;
+        display: inline-block;
+        height: 18px;
+        padding: 0 6px;
+        font-size: 12px;
+        color: #FFF;
+        line-height: 18px;
+        text-align: center;
+        white-space: nowrap;
+        border-radius: 10px;
+        background-color: $danger;
+      }
+    }
+
+    .bottom {
+      height: 70px;
+
+      & > span {
+        display: block;
+      }
+
+      .btn-more {
+        width: 100%;
+        height: 70px;
+        line-height: 70px;
+        font-size: 30px;
+        color: $first;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      .iconfont {
+        height: 70px;
+        line-height: 70px;
+        text-align: center;
+        font-size: 30px;
+        cursor: pointer;
+        color: $first;
+        user-select: none;
+        -moz-user-select: none;
+      }
+
+      .iconfont:hover {
+        color: white;
+      }
+    }
+
+    .btn-more:hover {
+      color: $white;
+    }
+  }
+
+  .bar-right {
+    // flex 1
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    height: $height;
+    position: relative;
+    background-color: $background-dark;
+  }
+
+  .group-live {
+    position relative
+    top 10px
+    left 25px
+    width 30px
+    height 30px
+    background url('../../assets/image/live-icon-gray.png') center no-repeat
+    background-size cover
+    cursor pointer
+  }
+}
+</style>

+<template>
+  <div class="login-wrapper">
+    <img :src="logo" width="50" height="50" style="border-radius: 5px;margin-bottom:12px;"/>
+    <el-select v-model="userID">
+      <el-option v-for="index in 30" :key="index" :label="`user${index-1}`" :value="`user${index-1}`"></el-option>
+    </el-select>
+    <br>
+    <el-button type="primary" @click="login" style="width:100%;">登录</el-button>
+  </div>
+</template>
+
+<script>
+import { Select, Option } from 'element-ui'
+import logo from '../../assets/image/logo.png'
+export default {
+  name: 'Login',
+  components: {
+    ElSelect: Select,
+    ElOption: Option
+  },
+  data() {
+    return {
+      userID: 'user0',
+      logo: logo
+    }
+  },
+  methods: {
+    login() {
+      this.$store.dispatch('login', this.userID)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.login-wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 24px;
+  background: $white;
+  color: $black;
+  border-radius: 5px;
+  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, .3);
+}
+</style>

+<template>
+  <div class="image-previewer-wrapper" v-show="showPreviewer" @mousewheel="handleMouseWheel">
+    <div class="image-wrapper">
+      <img
+        class="image-preview"
+        :style="{transform: `scale(${zoom}) rotate(${rotate}deg)`}"
+        :src="previewUrl"
+        @click="close"
+      />
+    </div>
+    <i class="el-icon-close close-button" @click="close" />
+    <i class="el-icon-back prev-button" @click="goPrev"></i>
+    <i class="el-icon-right next-button" @click="goNext"></i>
+    <div class="actions-bar">
+      <i class="el-icon-zoom-out" @click="zoomOut"></i>
+      <i class="el-icon-zoom-in" @click="zoomIn"></i>
+      <i class="el-icon-refresh-left" @click="rotateLeft"></i>
+      <i class="el-icon-refresh-right" @click="rotateRight"></i>
+      <span class="image-counter">{{index+1}} / {{imgUrlList.length}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'ImagePreviewer',
+  data() {
+    return {
+      url: '',
+      index: 0,
+      visible: false,
+      zoom: 1,
+      rotate: 0,
+      minZoom: 0.1
+    }
+  },
+  computed: {
+    ...mapGetters(['imgUrlList']),
+    showPreviewer() {
+      return this.url.length > 0 && this.visible
+    },
+    imageStyle() {
+      return {
+        transform: `scale(${this.zoom});`
+      }
+    },
+    previewUrl() {
+      return this.formatUrl(this.imgUrlList[this.index])
+    }
+  },
+  mounted() {
+    this.$bus.$on('image-preview', this.handlePreview)
+  },
+  methods: {
+    handlePreview({ url }) {
+      this.url = url
+      this.index = this.imgUrlList.findIndex(item => item === url)
+      this.visible = true
+    },
+    handleMouseWheel(event) {
+      if (event.wheelDelta > 0) {
+        this.zoomIn()
+      } else {
+        this.zoomOut()
+      }
+    },
+    zoomIn() {
+      this.zoom += 0.1
+    },
+    zoomOut() {
+      this.zoom =
+        this.zoom - 0.1 > this.minZoom ? this.zoom - 0.1 : this.minZoom
+    },
+    close() {
+      Object.assign(this, { zoom: 1 })
+      this.visible = false
+    },
+    rotateLeft() {
+      this.rotate -= 90
+    },
+    rotateRight() {
+      this.rotate += 90
+    },
+    goNext() {
+      this.index = (this.index + 1) % this.imgUrlList.length
+    },
+    goPrev() {
+      this.index =
+        this.index - 1 >= 0 ? this.index - 1 : this.imgUrlList.length - 1
+    },
+    formatUrl(url) {
+      if (!url) {
+        return ''
+      }
+      return url.slice(0, 2) === '//' ? `https:${url}` : url
+    }
+  }
+}
+</script>
+
+<style scoped>
+.image-previewer-wrapper {
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background: rgba(14, 12, 12, 0.7);
+  z-index: 2000;
+  cursor: zoom-out;
+}
+
+.close-button {
+  cursor: pointer;
+  font-size: 28px;
+  color: #000;
+  position: fixed;
+  top: 50px;
+  right: 50px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  padding: 6px;
+}
+.image-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.image-preview {
+  transition: transform 0.1s ease 0s;
+}
+.actions-bar {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  position: fixed;
+  bottom: 50px;
+  left: 50%;
+  margin-left: -100px;
+  padding: 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.8);
+}
+.actions-bar i {
+  font-size: 24px;
+  cursor: pointer;
+  margin: 0 6px;
+}
+
+.prev-button,
+.next-button {
+  position: fixed;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  font-size: 24px;
+  padding: 12px;
+}
+.prev-button {
+  left: 0;
+  top: 50%;
+}
+.next-button {
+  right: 0;
+  top: 50%;
+}
+.image-counter {
+  background: rgba(20, 18, 20, 0.53);
+  padding: 3px;
+  border-radius: 3px;
+  color: #fff;
+}
+</style>

+<template>
+  <div class="chat-bubble" @mousedown.stop @contextmenu.prevent>
+    <el-dropdown trigger="" ref="dropdown" v-if="!message.isRevoked" @command="handleCommand">
+      <div style="display: flex">
+        <div v-if="isMine && messageReadByPeer" class="message-status">
+          <span>{{messageReadByPeer}}</span>
+        </div>
+        <div class="message-content" :class="bubbleStyle">
+          <slot></slot>
+        </div>
+      </div>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item command="revoke" v-if="isMine">撤回</el-dropdown-item>
+        <!-- <el-dropdown-item command="delete">删除</el-dropdown-item> -->
+      </el-dropdown-menu>
+    </el-dropdown>
+    <div class="group-tip-element-wrapper" v-if="message.isRevoked">
+      {{text}}
+      <el-button type="text" size="mini" class="edit-button" v-show="isEdit" @click="reEdit">&nbsp;重新编辑</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MessageBubble',
+  data() {
+    return {
+      isTimeout: false
+    }
+  },
+  props: {
+    isMine: {
+      type: Boolean
+    },
+    isNew: {
+      type: Boolean
+    },
+    message: {
+      type: Object,
+      required: true
+    }
+  },
+  created() {
+    this.isTimeoutHandler()
+  },
+  mounted() {
+    if (this.$refs.dropdown && this.$refs.dropdown.$el) {
+      this.$refs.dropdown.$el.addEventListener('mousedown', this.handleDropDownMousedown)
+    }
+  },
+  beforeDestroy() {
+    if (this.$refs.dropdown && this.$refs.dropdown.$el) {
+      this.$refs.dropdown.$el.removeEventListener('mousedown', this.handleDropDownMousedown)
+    }
+  },
+  computed: {
+    bubbleStyle() {
+      let classString = ''
+      if (this.isMine) {
+        classString += 'message-send'
+      } else {
+        classString += 'message-received'
+      }
+      if (this.isNew) {
+        classString += 'new'
+      }
+      return classString
+    },
+    text() {
+      if (this.message.conversationType === this.TIM.TYPES.CONV_C2C && !this.isMine) {
+        return '对方撤回了一条消息'
+      }
+      if (this.message.conversationType === this.TIM.TYPES.CONV_GROUP && !this.isMine) {
+        return `${this.message.from}撤回了一条消息`
+      }
+      return '你撤回了一条消息'
+    },
+    messageReadByPeer() {
+      if (this.message.status !== 'success') {
+        return false
+      }
+      if (this.message.conversationType === this.TIM.TYPES.CONV_C2C && this.message.isPeerRead) {
+        return '已读'
+      }
+      if (this.message.conversationType === this.TIM.TYPES.CONV_C2C && !this.message.isPeerRead) {
+        return '未读'
+      }
+      return ''
+    },
+    isEdit() {
+      if (!this.isMine) {
+        return false
+      }
+      if (this.message.type !== this.TIM.TYPES.MSG_TEXT) {
+        return false
+      }
+      if (this.isTimeout) {
+        return false
+      }
+      return true
+    },
+  },
+  methods: {
+    handleDropDownMousedown(e) {
+      if (!this.isMine || this.isTimeout) {
+        return
+      }
+      if (e.buttons === 2) {
+        if (this.$refs.dropdown.visible) {
+          this.$refs.dropdown.hide()
+        } else {
+          this.$refs.dropdown.show()
+        }
+      }
+    },
+    handleCommand(command) {
+      switch (command) {
+        case 'revoke':
+          this.tim.revokeMessage(this.message).then(() => {
+            this.isTimeoutHandler()
+          }).catch((err) => {
+            this.$store.commit('showMessage', {
+              message: err,
+              type: 'warning'
+            })
+          })
+          break
+        case 'delete':
+          break
+        default:
+          break
+      }
+    },
+    isTimeoutHandler() { // 从发送消息时间开始算起，两分钟内可以编辑
+      let now = new Date()
+      if (parseInt(now.getTime() / 1000) - this.message.time > 2 * 60) {
+        this.isTimeout = true
+        return
+      }
+      setTimeout(this.isTimeoutHandler, 1000)
+    },
+    reEdit() {
+      this.$bus.$emit('reEditMessage', this.message.payload.text)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.chat-bubble
+  position relative
+  .message-status
+    display: flex;
+    min-width: 25px;
+    margin-right: 10px;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    color: #6e7981;
+  .message-content
+    outline: none
+    font-size 14px
+    position relative
+    max-width 350px
+    word-wrap break-word
+    word-break break-all
+    padding 10px
+    box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
+    span
+      white-space pre-wrap
+      margin 0
+      text-shadow $regular 0 0 0.05em
+    img
+      vertical-align bottom
+    &::before
+      position: absolute
+      top: 0
+      width: 12px
+      height: 40px
+      content "\e900"
+      // content "\e906"
+      font-family 'tim' !important
+      font-size 24px // 32px 在mac上会模糊 24px正常 , window 24px模糊 28px 32px正常  36px windows mac 基本一致，但是太大
+  .message-received
+    background-color $white
+    margin-left 15px
+    border-radius 0 4px 4px 4px
+    &::before
+      left -10px
+      transform scaleX(-1)
+      color $white
+    &.new
+      transform: scale(0);
+      transform-origin: top left;
+      animation: bounce 500ms linear both;
+  .message-send
+    background-color $light-primary
+    margin-right 15px
+    border-radius 4px 0 4px 4px
+    color $white
+    &::before
+      right: -10px
+      color $light-primary
+    &.new
+      transform: scale(0);
+      transform-origin: top right;
+      animation: bounce 500ms linear both;
+  .el-dropdown {
+    vertical-align: top;
+    display flex
+  }
+  .el-dropdown + .el-dropdown {
+    margin-left: 15px;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+.group-tip-element-wrapper
+  background $white
+  padding 4px 15px
+  border-radius 3px
+  color $secondary
+  font-size 12px
+  // text-shadow $secondary 0 0 0.05em
+.edit-button
+  padding-top 4px
+  height 20px
+  font-size 10px
+@keyframes bounce {
+  0% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  4.7% { transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  9.41% { transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  14.11% { transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  18.72% { transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  24.32% { transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  29.93% { transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  35.54% { transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  41.04% { transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  52.15% { transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  63.26% { transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  85.49% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+}
+</style>

+<template>
+<message-bubble :isMine=isMine :message=message>
+  <div class="custom-element-wrapper">
+    <div class="survey"  v-if="this.payload.data === 'survey'">
+      <div class="title">对IM DEMO的评分和建议</div>
+      <el-rate
+          v-model="rate"
+          disabled
+          show-score
+          text-color="#ff9900"
+          score-template="{value}">
+      </el-rate>
+      <div class="suggestion">{{this.payload.extension}}</div>
+    </div>
+    <span class="text" title="您可以自行解析自定义消息" v-else>
+      <template v-if="text.isFromGroupLive && text.isFromGroupLive === 1">
+        <message-group-live-status :liveInfo='text' />
+      </template>
+      <template v-else>{{text}}</template>
+    </span>
+  </div>
+</message-bubble>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import MessageBubble from '../message-bubble'
+import { Rate } from 'element-ui'
+import MessageGroupLiveStatus from '../message-group-live-status'
+
+export default {
+  name: 'CustomElement',
+  props: {
+    payload: {
+      type: Object,
+      required: true
+    },
+    message: {
+      type: Object,
+      required: true
+    },
+    isMine: {
+      type: Boolean
+    }
+  },
+  components: {
+    MessageBubble,
+    ElRate: Rate,
+    MessageGroupLiveStatus
+  },
+  computed: {
+    ...mapState({
+      currentUserProfile: state => state.user.currentUserProfile
+    }),
+    text() {
+      return this.translateCustomMessage(this.payload)
+    },
+    rate() {
+      return parseInt(this.payload.description)
+    }
+  },
+  methods: {
+    translateCustomMessage(payload) {
+      let videoPayload = {}
+      try{
+        videoPayload = JSON.parse(payload.data)
+      } catch(e) {
+        videoPayload = {}
+      }
+      if (payload.data === 'group_create') {
+        return `${payload.extension}`
+      }
+      if (videoPayload.roomId) {
+        videoPayload.roomId = videoPayload.roomId.toString()
+        videoPayload.isFromGroupLive = 1
+        return videoPayload
+      }
+      if(payload.text) {
+        return payload.text
+      }else{
+        return '[自定义消息]'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.text
+  font-weight bold
+.title
+  font-size 16px
+  font-weight 600
+  padding-bottom 10px
+.survey
+  background-color white
+  color black
+  padding 20px
+  display flex
+  flex-direction column
+.suggestion
+  padding-top 10px
+  font-size 14px
+</style>

+<template>
+<message-bubble :isMine=isMine :message=message>
+  <div class="face-element-wrapper">
+    <img :src="url"/>
+  </div>
+</message-bubble>
+</template>
+
+<script>
+import MessageBubble from '../message-bubble'
+export default {
+  name: 'FaceElement',
+  props: {
+    payload: {
+      type: Object,
+      required: true
+    },
+    message: {
+      type: Object,
+      required: true
+    },
+    isMine: {
+      type: Boolean
+    }
+  },
+  components: {
+    MessageBubble,
+  },
+  computed:{
+    url() {
+      let name = ''
+      if (this.payload.data.indexOf('@2x') > 0) {
+        name = this.payload.data
+      } else {
+        name = this.payload.data + '@2x'
+      }
+      return `https://webim-1252463788.file.myqcloud.com/assets/face-elem/${name}.png`
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.face-element-wrapper
+  img
+    max-width 90px
+</style>

+<template>
+<message-bubble :isMine=isMine :message=message>  
+  <div class="file-element-wrapper" title="单击下载" @click="downloadFile">
+    <div class="header">
+      <i class="el-icon-document file-icon"></i>
+      <div class="file-element">
+        <span class="file-name">{{ fileName }}</span>
+        <span class="file-size">{{ size }}</span>
+      </div>
+    </div>
+    <el-progress
+      v-if="showProgressBar"
+      :percentage="percentage"
+      :color="percentage => (percentage === 100 ? '#67c23a' : '#409eff')"
+    />
+  </div>
+</message-bubble>
+</template>
+
+<script>
+import MessageBubble from '../message-bubble'
+import { Progress } from 'element-ui'
+export default {
+  name: 'FileElement',
+  props: {
+    payload: {
+      type: Object,
+      required: true
+    },
+    message: {
+      type: Object,
+      required: true
+    },
+    isMine: {
+      type: Boolean
+    }
+  },
+  components: {
+    MessageBubble,
+    ElProgress: Progress
+  },
+  computed: {
+    fileName() {
+      return this.payload.fileName
+    },
+    fileUrl() {
+      return this.payload.fileUrl
+    },
+    size() {
+      const size = this.payload.fileSize
+      if (size > 1024) {
+        if (size / 1024 > 1024) {
+          return `${this.toFixed(size / 1024 / 1024)} Mb`
+        }
+        return `${this.toFixed(size / 1024)} Kb`
+      }
+      return `${this.toFixed(size)}B`
+    },
+    showProgressBar() {
+      return this.$parent.message.status === 'unSend'
+    },
+    percentage() {
+      return Math.floor((this.$parent.message.progress || 0) * 100)
+    }
+  },
+  methods: {
+    toFixed(number, precision = 2) {
+      return number.toFixed(precision)
+    },
+    downloadFile() {
+      // 浏览器支持fetch则用blob下载，避免浏览器点击a标签，跳转到新页面预览的行为
+      if (window.fetch) {
+        fetch(this.fileUrl)
+          .then(res => res.blob())
+          .then(blob => {
+            let a = document.createElement('a')
+            let url = window.URL.createObjectURL(blob)
+            a.href = url
+            a.download = this.fileName
+            a.click()
+          })
+      } else {
+        let a = document.createElement('a')
+        a.href = this.fileUrl
+        a.target = '_blank'
+        a.download = this.filename
+        a.click()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.file-element-wrapper {
+  cursor pointer
+}
+.header {
+  display: flex;
+}
+.file-icon {
+  font-size: 40px !important;
+}
+.file-element {
+  display: flex;
+  flex-direction: column;
+  margin-left: 12px;
+}
+.file-size {
+  font-size: 12px;
+  padding-top 5px
+}
+</style>

+<template>
+  <message-bubble :isMine="isMine" :message=message>
+    <a class="geo-element" :href="href" target="_blank" title="点击查看详情">
+      <span class="el-icon-location-outline">{{payload.description}}</span>
+      <img :src="url" />
+    </a>
+  </message-bubble>
+</template>
+
+<script>
+import MessageBubble from '../message-bubble'
+
+export default {
+  name: 'GeoElement',
+  components: {
+    MessageBubble
+  },
+  props: {
+    payload: {
+      type: Object,
+      required: true
+    },
+    message: {
+      type: Object,
+      required: true
+    },
+    isMine: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      url: ''
+    }
+  },
+  computed: {
+    lon() {
+      return this.payload.longitude.toFixed(6)
+    },
+    lat() {
+      return this.payload.latitude.toFixed(6)
+    },
+    href() {
+      return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
+        this.lon
+      }&pointy=${this.lat}&name=${this.payload.description}`
+    }
+  },
+  mounted() {
+    this.url = `https://apis.map.qq.com/ws/staticmap/v2/?center=${this.lat},${
+      this.lon
+    }&zoom=10&size=300*150&maptype=roadmap&markers=size:large|color:0xFFCCFF|label:k|${
+      this.lat
+    },${this.lon}&key=UBNBZ-PTP3P-TE7DB-LHRTI-Y4YLE-VWBBD`
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.geo-element {
+  text-decoration: none;
+  color: #000;
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+  font-size: 18px;
+
+  img {
+    margin-top: 12px;
+  }
+}
+</style>

+<template>
+  <message-bubble :isMine="false" :message=message>
+    <div class="group-system-element-wrapper">
+      {{ text }}
+      <el-button v-if="isJoinGroupRequest" type="text" @click="showDialog = true">处理</el-button>
+      <el-dialog title="处理加群申请" :visible.sync="showDialog" width="30%">
+        <el-form ref="form" v-model="form" label-width="100px">
+          <el-form-item label="处理结果：">
+            <el-radio-group v-model="form.handleAction">
+              <el-radio label="Agree">同意</el-radio>
+              <el-radio label="Reject">拒绝</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="附言：">
+            <el-input
+              type="textarea"
+              resize="none"
+              :rows="3"
+              placeholder="请输入附言"
+              v-model="form.handleMessage"
+            />
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="showDialog = false">取 消</el-button>
+          <el-button type="primary" @click="handleGroupApplication">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </message-bubble>
+</template>
+
+<script>
+import { Dialog, Form, FormItem, RadioGroup, Radio } from 'element-ui'
+import MessageBubble from '../message-bubble'
+import { translateGroupSystemNotice } from '../../../utils/common'
+
+export default {
+  name: 'GroupSystemNoticeElement',
+  props: {
+    payload: {
+      type: Object,
+      required: true
+    },
+    message: {
+      type: Object,
+      required: false
+    }
+  },
+  components: {
+    ElDialog: Dialog,
+    ElForm: Form,
+    ElFormItem: FormItem,
+    ElRadioGroup: RadioGroup,
+    ElRadio: Radio,
+    MessageBubble
+  },
+  data() {
+    return {
+      showDialog: false,
+      form: {
+        handleAction: 'Agree',
+        handleMessage: ''
+      }
+    }
+  },
+  computed: {
+    text() {
+      return translateGroupSystemNotice(this.message)
+    },
+    title() {
+      if (this.message.type === this.TIM.TYPES.MSG_GRP_SYS_NOTICE) {
+        return '群系统通知'
+      }
+      return '系统通知'
+    },
+    isJoinGroupRequest() {
+      return this.payload.operationType === 1
+    }
+  },
+  methods: {
+    handleGroupApplication() {
+      this.tim
+        .handleGroupApplication({
+          handleAction: this.form.handleAction,
+          handleMessage: this.form.handleMessage,
+          message: this.message
+        })
+        .then(() => {
+          this.showDialog = false
+          this.$store.commit('removeMessage', this.message)
+        })
+        .catch(error => {
+          this.$store.commit('showMessage', {
+            type: 'error',
+            message: error.message
+          })
+          this.showDialog = false
+        })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.card {
+  background: #fff;
+  padding: 12px;
+  border-radius: 5px;
+  width: 300px;
+
+  .card-header {
+    font-size: 18px;
+  }
+
+  .card-content {
+    font-size: 14px;
+  }
+}
+</style>