IM

im/src/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="app">
+    <router-view v-if="showView" />
+  </div>
+</template>
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {
+      // 用于点击当前页的router时，刷新当前页
+      showView: true,
+    }
+  },
+  methods: {
+    // 刷新当前路由方法
+    refreshView() {
+      this.showView = false
+      this.$nextTick(() => (this.showView = true))
+    },
+  },
+}
+</script>

im/src/api/chat.js

@@ -0,0 +1,109 @@
+import { post, get, upload, del } from "@/utils/request";
+
+// 获取聊天列表服务接口
+export const ServeGetTalkList = (data) => {
+  return get("/im/talk/list", data);
+};
+
+// 获取聊天列表服务接口
+export const ServeGetStoreTalkList = (data) => {
+  return get("/im/talk/store/list", data);
+};
+
+// 聊天列表创建服务接口
+export const ServeCreateTalkList = (id) => {
+  return get(`/im/talk/user/${id}`);
+};
+
+// 删除聊天列表服务接口
+export const ServeDeleteTalkList = (data) => {
+  return del("/im/talk", data);
+};
+
+// 对话列表置顶服务接口
+export const ServeTopTalkList = (data) => {
+  return post("/im/talk/top", data);
+};
+
+// 清除聊天消息未读数服务接口
+export const ServeClearTalkUnreadNum = (data) => {
+  return post("/im/talk/update-unread-num", data);
+};
+
+// 获取聊天记录服务接口
+export const ServeTalkRecords = (data) => {
+  return get("/im/message", data);
+};
+
+// 获取转发会话记录详情列表服务接口
+export const ServeGetForwardRecords = (data) => {
+  return get("/im/talk/get-forward-records", data);
+};
+
+// 对话列表置顶服务接口
+export const ServeSetNotDisturb = (data) => {
+  return post("/im/talk/disturb", data);
+};
+
+// 查找用户聊天记录服务接口
+export const ServeFindTalkRecords = (data) => {
+  return get("/im/talk/find-chat-records", data);
+};
+
+// 搜索用户聊天记录服务接口
+export const ServeSearchTalkRecords = (data) => {
+  return get("/im/talk/search-chat-records", data);
+};
+
+export const ServeGetRecordsContext = (data) => {
+  return get("/im/talk/get-records-context", data);
+};
+
+// 发送代码块消息服务接口
+export const ServeSendTalkCodeBlock = (data) => {
+  return post("/im/talk/message/code", data);
+};
+
+// 发送聊天文件服务接口
+export const ServeSendTalkFile = (data) => {
+  return post("/im/talk/message/file", data);
+};
+
+// 发送聊天图片服务接口
+export const ServeSendTalkImage = (data) => {
+  return upload("/common/common/upload/file", data);
+};
+
+// 发送表情包服务接口
+export const ServeSendEmoticon = (data) => {
+  return post("/im/talk/message/emoticon", data);
+};
+
+// 转发消息服务接口
+export const ServeForwardRecords = (data) => {
+  return post("/im/talk/message/forward", data);
+};
+
+// 撤回消息服务接口
+export const ServeRevokeRecords = (data) => {
+  return post("/im/talk/message/revoke", data);
+};
+
+// 删除消息服务接口
+export const ServeRemoveRecords = (data) => {
+  return post("/im/talk/message/delete", data);
+};
+
+// 收藏表情包服务接口
+export const ServeCollectEmoticon = (data) => {
+  return post("/im/talk/message/collect", data);
+};
+
+//投票
+export const ServeSendVote = (data) => {
+  return post("/im/talk/message/vote", data);
+};
+
+export const ServeConfirmVoteHandle = (data) => {
+  return post("/im/talk/message/vote/handle", data);
+};

im/src/api/contacts.js

@@ -0,0 +1,45 @@
+import { post, get } from '@/utils/request'
+
+// 获取好友列表服务接口
+export const ServeGetContacts = data => {
+  return get('/contacts/list', data)
+}
+
+// 解除好友关系服务接口
+export const ServeDeleteContact = data => {
+  return post('/contacts/delete', data)
+}
+
+// 修改好友备注服务接口
+export const ServeEditContactRemark = data => {
+  return post('/contacts/edit-remark', data)
+}
+
+// 搜索联系人
+export const ServeSearchContact = data => {
+  return get('/contacts/search', data)
+}
+
+// 好友申请服务接口
+export const ServeCreateContact = data => {
+  return post('/contacts/apply/create', data)
+}
+
+// 查询好友申请服务接口
+export const ServeGetContactApplyRecords = data => {
+  return get('/contacts/apply/records', data)
+}
+
+// 处理好友申请服务接口
+export const ServeApplyAccept = data => {
+  return post('/contacts/apply/accept', data)
+}
+
+export const ServeApplyDecline = data => {
+  return post('/contacts/apply/decline', data)
+}
+
+// 查询好友申请未读数量服务接口
+export const ServeFindFriendApplyNum = () => {
+  return get('/contacts/apply-unread-num')
+}

im/src/api/emoticon.js

@@ -0,0 +1,26 @@
+import { post, get, upload } from '@/utils/request'
+
+// 查询用户表情包服务接口
+export const ServeFindUserEmoticon = () => {
+  return get('/emoticon/list')
+}
+
+// 查询系统表情包服务接口
+export const ServeFindSysEmoticon = () => {
+  return get('/emoticon/system')
+}
+
+// 设置用户表情包服务接口
+export const ServeSetUserEmoticon = data => {
+  return post('/emoticon/set-user-emoticon', data)
+}
+
+// 移除收藏表情包服务接口
+export const ServeDelCollectEmoticon = data => {
+  return post('/emoticon/del-collect-emoticon', data)
+}
+
+// 上传表情包服务接口
+export const ServeUploadEmoticon = data => {
+  return upload('/emoticon/upload-emoticon', data)
+}

im/src/api/goods.js

@@ -0,0 +1,5 @@
+import { post, get, upload, del } from "@/utils/request";
+
+export const ServeGetGoodsDetail = (data) => {
+    return get(`/im/goods/goods/sku/${data.goodsId}/${data.skuId}`);
+  };

im/src/api/group.js

@@ -0,0 +1,66 @@
+import { post, get } from '@/utils/request'
+
+// 查询用户群聊服务接口
+export const ServeGetGroups = () => {
+  return get('/group/list')
+}
+
+// 获取群信息服务接口
+export const ServeGroupDetail = data => {
+  return get('/group/detail', data)
+}
+
+// 创建群聊服务接口
+export const ServeCreateGroup = data => {
+  return post('/group/create', data)
+}
+
+//  修改群信息
+export const ServeEditGroup = data => {
+  return post('/group/edit', data)
+}
+
+// 邀请好友加入群聊服务接口
+export const ServeInviteGroup = data => {
+  return post('/group/invite', data)
+}
+
+// 移除群聊成员服务接口
+export const ServeRemoveMembersGroup = data => {
+  return post('/group/remove-members', data)
+}
+
+// 管理员解散群聊服务接口
+export const ServeDismissGroup = data => {
+  return post('/group/dismiss', data)
+}
+
+// 用户退出群聊服务接口
+export const ServeSecedeGroup = data => {
+  return post('/group/secede', data)
+}
+
+// 修改群聊名片服务接口
+export const ServeUpdateGroupCard = data => {
+  return post('/group/set-group-card', data)
+}
+
+// 获取用户可邀请加入群组的好友列表
+export const ServeGetInviteFriends = data => {
+  return get('/group/invite-friends', data)
+}
+
+//  获取群组成员列表
+export const ServeGetGroupMembers = data => {
+  return get('/group/members', data)
+}
+
+//  获取群组公告列表
+export const ServeGetGroupNotices = data => {
+  return get('/group/notices', data)
+}
+
+//  编辑群公告
+export const ServeEditGroupNotice = data => {
+  return post('/group/edit-notice', data)
+}

im/src/api/upload.js

@@ -0,0 +1,16 @@
+import { post, get, upload } from '@/utils/request'
+
+// 上传头像裁剪图片服务接口
+export const ServeUploadFileStream = data => {
+  return post('/upload/file-stream', data)
+}
+
+// 查询大文件拆分信息服务接口
+export const ServeFindFileSplitInfo = (data = {}) => {
+  return get('/upload/get-file-split-info', data)
+}
+
+// 文件拆分上传服务接口
+export const ServeFileSubareaUpload = (data = {}, options = {}) => {
+  return upload('/upload/file-subarea-upload', data, options)
+}

im/src/api/user.js

@@ -0,0 +1,26 @@
+import { get } from "@/utils/request";
+
+// 获取用户相关设置信息
+export const ServeGetUserSetting = () => {
+  return get("/im/user");
+};
+
+// 获取店铺相关设置信息
+export const ServeGetStoreSetting = () => {
+  return get("/im/user/store");
+};
+
+// 获取用户相关设置信息
+export const ServeGetUserDetail = (memberId) => {
+  return get(`/im/user/${memberId}`);
+};
+
+// 获取店铺相关设置信息
+export const ServeGetStoreDetail = (storeId) => {
+  return get(`/im/user/store/${storeId}`);
+};
+
+// 获取店铺相关设置信息
+export const ServeGetFootPrint = (params) => {
+  return get(`/im/user/history`,params);
+};

im/src/assets/css/global.less

@@ -0,0 +1,238 @@
+@import './reset.css';
+
+.no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+.avatar-box {
+  height: 35px;
+  width: 35px;
+  flex-shrink: 0;
+  background-color: #508afe;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: white;
+  user-select: none;
+  transition: ease 1s;
+  position: relative;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    border-radius: 3px;
+  }
+
+  .top-mask {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(22, 25, 29, 0.6);
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: white;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+  }
+
+  &:hover .top-mask {
+    display: flex;
+  }
+}
+
+.no-border {
+  border: 0;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.border-radius0 {
+  border-radius: 0;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.talk-height {
+  height: 80%;
+  width: 80%;
+}
+
+.ov-hidden {
+  overflow: hidden;
+}
+
+// 滚动条样式
+.lum-scrollbar {
+  &::-webkit-scrollbar {
+    width: 3px;
+    background-color: #e4e4e5;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background-color: #c0bebc;
+  }
+}
+
+.larkc-tag {
+  font-size: 12px;
+  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  height: 20px;
+  border-radius: 2px;
+  cursor: default;
+  user-select: none;
+  background-color: #dee0e3;
+  transform: scale(0.83);
+  transform-origin: left;
+  flex-shrink: 0;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 自定义 dialog 样式
+// lum-dialog -- start
+.lum-dialog-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background-color: @maskBagColor;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .lum-dialog-box {
+    min-width: 200px;
+    min-height: 200px;
+    background-color: white;
+    border-radius: 3px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px 0 rgba(31, 35, 41, 0.2);
+    margin: 0 10px;
+
+    .container {
+      height: 100%;
+    }
+
+    .header {
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #f5eeee;
+
+      >p:first-child {
+        text-indent: 20px;
+      }
+
+      .tools {
+        height: 100%;
+        width: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-right: 20px;
+
+        i {
+          font-size: 20px;
+          cursor: pointer;
+          margin-left: 8px;
+        }
+      }
+    }
+
+    .main {
+      /deep/.el-input__inner {
+        border-radius: 1px !important;
+      }
+
+      .submit-btn {
+        border-radius: 2px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+// lum-dialog -- end
+
+.talk-notify {
+  .el-notification__title {
+    font-weight: 300;
+    font-size: 16px;
+    color: #f44336;
+  }
+
+  p {
+    max-height: 65px;
+    overflow: hidden;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-indent: -7px;
+    word-break: break-all;
+  }
+}
+
+.im-notify {
+  padding: 14px 26px 8px 0px;
+
+  .el-notification__closeBtn {
+    position: absolute;
+    top: 12px;
+  }
+
+  .el-notification__group {
+    margin-left: 5px;
+  }
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-2 {
+  flex: 2;
+}
+
+.flex-8 {
+  flex: 8;
+}
+
+.flex-4 {
+  flex: 4;
+}
+
+.flex-10 {
+  flex: 10;
+}

im/src/assets/css/markdown.css

@@ -0,0 +1,991 @@
+.markdown-body .octicon {
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: text-bottom;
+}
+
+.markdown-body .anchor {
+  float: left;
+  line-height: 1;
+  margin-left: -20px;
+  padding-right: 4px;
+}
+
+.markdown-body .anchor:focus {
+  outline: none;
+}
+
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+  color: #1b1f23;
+  vertical-align: middle;
+  visibility: hidden;
+}
+
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+  text-decoration: none;
+}
+
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+  visibility: visible;
+}
+
+.markdown-body h1:hover .anchor .octicon-link:before,
+.markdown-body h2:hover .anchor .octicon-link:before,
+.markdown-body h3:hover .anchor .octicon-link:before,
+.markdown-body h4:hover .anchor .octicon-link:before,
+.markdown-body h5:hover .anchor .octicon-link:before,
+.markdown-body h6:hover .anchor .octicon-link:before {
+  width: 16px;
+  height: 16px;
+  content: ' ';
+  display: inline-block;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  font-size: 16px;
+  word-wrap: break-word;
+  font-family: Content-font, Roboto, sans-serif;
+  font-weight: 400;
+  color: #3B454E;
+  line-height: 1.625;
+}
+
+.markdown-body details {
+  display: block;
+}
+
+.markdown-body summary {
+  display: list-item;
+}
+
+.markdown-body a {
+  background-color: initial;
+}
+
+.markdown-body a:active,
+.markdown-body a:hover {
+  outline-width: 0;
+}
+
+.markdown-body strong {
+  font-weight: inherit;
+  font-weight: bolder;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+  margin: .67em 0;
+}
+
+.markdown-body img {
+  border-style: none;
+}
+
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+.markdown-body hr {
+  box-sizing: initial;
+  height: 0;
+  overflow: visible;
+}
+
+.markdown-body input {
+  font: inherit;
+  margin: 0;
+}
+
+.markdown-body input {
+  overflow: visible;
+}
+
+.markdown-body [type=checkbox] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.markdown-body * {
+  box-sizing: border-box;
+}
+
+.markdown-body input {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.markdown-body a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body strong {
+  font-weight: 600;
+}
+
+.markdown-body hr {
+  height: 0;
+  margin: 15px 0;
+  overflow: hidden;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #dfe2e5;
+}
+
+.markdown-body hr:after,
+.markdown-body hr:before {
+  display: table;
+  content: "";
+}
+
+.markdown-body hr:after {
+  clear: both;
+}
+
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.markdown-body td,
+.markdown-body th {
+  padding: 0;
+}
+
+.markdown-body details summary {
+  cursor: pointer;
+}
+
+.markdown-body kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  line-height: 10px;
+  color: #444d56;
+  vertical-align: middle;
+  background-color: #fafbfc;
+  border: 1px solid #d1d5da;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #d1d5da;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body h1 {
+  font-size: 32px;
+}
+
+.markdown-body h1,
+.markdown-body h2 {
+  font-weight: 600;
+}
+
+.markdown-body h2 {
+  font-size: 24px;
+}
+
+.markdown-body h3 {
+  font-size: 20px;
+}
+
+.markdown-body h3,
+.markdown-body h4 {
+  font-weight: 600;
+}
+
+.markdown-body h4 {
+  font-size: 16px;
+}
+
+.markdown-body h5 {
+  font-size: 14px;
+}
+
+.markdown-body h5,
+.markdown-body h6 {
+  font-weight: 600;
+}
+
+.markdown-body h6 {
+  font-size: 12px;
+}
+
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.markdown-body blockquote {
+  margin: 20px 0 !important;
+  background-color: #f5f8fc;
+  padding: 1rem;
+  color: #8796a8;
+  border-left: none;
+}
+
+.markdown-body ol,
+.markdown-body ul {
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body ol ol,
+.markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ol ol ol,
+.markdown-body ol ul ol,
+.markdown-body ul ol ol,
+.markdown-body ul ul ol {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body dd {
+  margin-left: 0;
+}
+
+.markdown-body code,
+.markdown-body pre {
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-size: 12px;
+}
+
+.markdown-body pre {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body input::-webkit-inner-spin-button,
+.markdown-body input::-webkit-outer-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.markdown-body :checked+.radio-label {
+  position: relative;
+  z-index: 1;
+  border-color: #0366d6;
+}
+
+.markdown-body .border {
+  border: 1px solid #e1e4e8 !important;
+}
+
+.markdown-body .border-0 {
+  border: 0 !important;
+}
+
+.markdown-body .border-bottom {
+  border-bottom: 1px solid #e1e4e8 !important;
+}
+
+.markdown-body .rounded-1 {
+  border-radius: 3px !important;
+}
+
+.markdown-body .bg-white {
+  background-color: #fff !important;
+}
+
+.markdown-body .bg-gray-light {
+  background-color: #fafbfc !important;
+}
+
+.markdown-body .text-gray-light {
+  color: #6a737d !important;
+}
+
+.markdown-body .mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.markdown-body .my-2 {
+  margin-top: 8px !important;
+  margin-bottom: 8px !important;
+}
+
+.markdown-body .pl-0 {
+  padding-left: 0 !important;
+}
+
+.markdown-body .py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.markdown-body .pl-1 {
+  padding-left: 4px !important;
+}
+
+.markdown-body .pl-2 {
+  padding-left: 8px !important;
+}
+
+.markdown-body .py-2 {
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+}
+
+.markdown-body .pl-3,
+.markdown-body .px-3 {
+  padding-left: 16px !important;
+}
+
+.markdown-body .px-3 {
+  padding-right: 16px !important;
+}
+
+.markdown-body .pl-4 {
+  padding-left: 24px !important;
+}
+
+.markdown-body .pl-5 {
+  padding-left: 32px !important;
+}
+
+.markdown-body .pl-6 {
+  padding-left: 40px !important;
+}
+
+.markdown-body .f6 {
+  font-size: 12px !important;
+}
+
+.markdown-body .lh-condensed {
+  line-height: 1.25 !important;
+}
+
+.markdown-body .text-bold {
+  font-weight: 600 !important;
+}
+
+.markdown-body .pl-c {
+  color: #6a737d;
+}
+
+.markdown-body .pl-c1,
+.markdown-body .pl-s .pl-v {
+  color: #005cc5;
+}
+
+.markdown-body .pl-e,
+.markdown-body .pl-en {
+  color: #6f42c1;
+}
+
+.markdown-body .pl-s .pl-s1,
+.markdown-body .pl-smi {
+  color: #24292e;
+}
+
+.markdown-body .pl-ent {
+  color: #22863a;
+}
+
+.markdown-body .pl-k {
+  color: #d73a49;
+}
+
+.markdown-body .pl-pds,
+.markdown-body .pl-s,
+.markdown-body .pl-s .pl-pse .pl-s1,
+.markdown-body .pl-sr,
+.markdown-body .pl-sr .pl-cce,
+.markdown-body .pl-sr .pl-sra,
+.markdown-body .pl-sr .pl-sre {
+  color: #032f62;
+}
+
+.markdown-body .pl-smw,
+.markdown-body .pl-v {
+  color: #e36209;
+}
+
+.markdown-body .pl-bu {
+  color: #b31d28;
+}
+
+.markdown-body .pl-ii {
+  color: #fafbfc;
+  background-color: #b31d28;
+}
+
+.markdown-body .pl-c2 {
+  color: #fafbfc;
+  background-color: #d73a49;
+}
+
+.markdown-body .pl-c2:before {
+  content: "^M";
+}
+
+.markdown-body .pl-sr .pl-cce {
+  font-weight: 700;
+  color: #22863a;
+}
+
+.markdown-body .pl-ml {
+  color: #735c0f;
+}
+
+.markdown-body .pl-mh,
+.markdown-body .pl-mh .pl-en,
+.markdown-body .pl-ms {
+  font-weight: 700;
+  color: #005cc5;
+}
+
+.markdown-body .pl-mi {
+  font-style: italic;
+  color: #24292e;
+}
+
+.markdown-body .pl-mb {
+  font-weight: 700;
+  color: #24292e;
+}
+
+.markdown-body .pl-md {
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+
+.markdown-body .pl-mi1 {
+  color: #22863a;
+  background-color: #f0fff4;
+}
+
+.markdown-body .pl-mc {
+  color: #e36209;
+  background-color: #ffebda;
+}
+
+.markdown-body .pl-mi2 {
+  color: #f6f8fa;
+  background-color: #005cc5;
+}
+
+.markdown-body .pl-mdr {
+  font-weight: 700;
+  color: #6f42c1;
+}
+
+.markdown-body .pl-ba {
+  color: #586069;
+}
+
+.markdown-body .pl-sg {
+  color: #959da5;
+}
+
+.markdown-body .pl-corl {
+  text-decoration: underline;
+  color: #032f62;
+}
+
+.markdown-body .mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.markdown-body .my-2 {
+  margin-bottom: 8px !important;
+}
+
+.markdown-body .my-2 {
+  margin-top: 8px !important;
+}
+
+.markdown-body .pl-0 {
+  padding-left: 0 !important;
+}
+
+.markdown-body .py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.markdown-body .pl-1 {
+  padding-left: 4px !important;
+}
+
+.markdown-body .pl-2 {
+  padding-left: 8px !important;
+}
+
+.markdown-body .py-2 {
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+}
+
+.markdown-body .pl-3 {
+  padding-left: 16px !important;
+}
+
+.markdown-body .pl-4 {
+  padding-left: 24px !important;
+}
+
+.markdown-body .pl-5 {
+  padding-left: 32px !important;
+}
+
+.markdown-body .pl-6 {
+  padding-left: 40px !important;
+}
+
+.markdown-body .pl-7 {
+  padding-left: 48px !important;
+}
+
+.markdown-body .pl-8 {
+  padding-left: 64px !important;
+}
+
+.markdown-body .pl-9 {
+  padding-left: 80px !important;
+}
+
+.markdown-body .pl-10 {
+  padding-left: 96px !important;
+}
+
+.markdown-body .pl-11 {
+  padding-left: 112px !important;
+}
+
+.markdown-body .pl-12 {
+  padding-left: 128px !important;
+}
+
+.markdown-body hr {
+  border-bottom-color: #eee;
+}
+
+.markdown-body kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  line-height: 10px;
+  color: #444d56;
+  vertical-align: middle;
+  background-color: #fafbfc;
+  border: 1px solid #d1d5da;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #d1d5da;
+}
+
+.markdown-body:after,
+.markdown-body:before {
+  display: table;
+  content: "";
+}
+
+.markdown-body:after {
+  clear: both;
+}
+
+.markdown-body>:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body>:last-child {
+  margin-bottom: 0 !important;
+}
+
+.markdown-body a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-body blockquote,
+.markdown-body details,
+.markdown-body dl,
+.markdown-body ol,
+.markdown-body p,
+.markdown-body pre,
+.markdown-body table,
+.markdown-body ul {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body hr {
+  height: .25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: #e1e4e8;
+  border: 0;
+}
+
+.markdown-body blockquote {
+  margin: 20px 0 !important;
+  background-color: #f5f8fc;
+  padding: 1rem;
+  color: #8796a8;
+  border-left: 3px solid #03A9F4;
+}
+
+.markdown-body blockquote>:first-child {
+  margin-top: 0;
+}
+
+.markdown-body blockquote>:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+}
+
+.markdown-body h1,
+.markdown-body h2 {
+  padding-bottom: .3em;
+  /* border-bottom: 1px solid #eaecef; */
+}
+
+.markdown-body h2 {
+  font-size: 1.5em;
+}
+
+.markdown-body h3 {
+  font-size: 1.25em;
+}
+
+.markdown-body h4 {
+  font-size: 1em;
+}
+
+.markdown-body h5 {
+  font-size: .875em;
+}
+
+.markdown-body h6 {
+  font-size: .85em;
+  color: #6a737d;
+}
+
+.markdown-body ol,
+.markdown-body ul {
+  padding-left: 2em;
+}
+
+.markdown-body ol ol,
+.markdown-body ol ul,
+.markdown-body ul ol,
+.markdown-body ul ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body li {
+  word-wrap: break-all;
+}
+
+.markdown-body li>p {
+  margin-top: 16px;
+}
+
+.markdown-body li+li {
+  margin-top: .25em;
+}
+
+.markdown-body dl {
+  padding: 0;
+}
+
+.markdown-body dl dt {
+  padding: 0;
+  margin-top: 16px;
+  font-size: 1em;
+  font-style: italic;
+  font-weight: 600;
+}
+
+.markdown-body dl dd {
+  padding: 0 16px;
+  margin-bottom: 16px;
+}
+
+.markdown-body table {
+  display: block;
+  width: 100%;
+  overflow: auto;
+}
+
+.markdown-body table th {
+  font-weight: 600;
+}
+
+.markdown-body table td,
+.markdown-body table th {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
+
+.markdown-body table tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+.markdown-body img {
+  max-width: 100%;
+  box-sizing: initial;
+  background-color: #fff;
+}
+
+.markdown-body img[align=right] {
+  padding-left: 20px;
+}
+
+.markdown-body img[align=left] {
+  padding-right: 20px;
+}
+
+.markdown-body code {
+  padding: .2em .4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(27, 31, 35, .05);
+  border-radius: 3px;
+}
+
+.markdown-body pre {
+  word-wrap: normal;
+}
+
+.markdown-body pre>code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
+}
+
+.markdown-body .highlight {
+  margin-bottom: 16px;
+}
+
+.markdown-body .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+}
+
+.markdown-body pre code {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: initial;
+  border: 0;
+}
+
+.markdown-body .commit-tease-sha {
+  display: inline-block;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-size: 90%;
+  color: #444d56;
+}
+
+.markdown-body .full-commit .btn-outline:not(:disabled):hover {
+  color: #005cc5;
+  border-color: #005cc5;
+}
+
+.markdown-body .blob-wrapper {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.markdown-body .blob-wrapper-embedded {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.markdown-body .blob-num {
+  width: 1%;
+  min-width: 50px;
+  padding-right: 10px;
+  padding-left: 10px;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(27, 31, 35, .3);
+  text-align: right;
+  white-space: nowrap;
+  vertical-align: top;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.markdown-body .blob-num:hover {
+  color: rgba(27, 31, 35, .6);
+}
+
+.markdown-body .blob-num:before {
+  content: attr(data-line-number);
+}
+
+.markdown-body .blob-code {
+  position: relative;
+  padding-right: 10px;
+  padding-left: 10px;
+  line-height: 20px;
+  vertical-align: top;
+}
+
+.markdown-body .blob-code-inner {
+  overflow: visible;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-size: 12px;
+  color: #24292e;
+  word-wrap: normal;
+  white-space: pre;
+}
+
+.markdown-body .pl-token.active,
+.markdown-body .pl-token:hover {
+  cursor: pointer;
+  background: #ffea7f;
+}
+
+.markdown-body .tab-size[data-tab-size="1"] {
+  -moz-tab-size: 1;
+  tab-size: 1;
+}
+
+.markdown-body .tab-size[data-tab-size="2"] {
+  -moz-tab-size: 2;
+  tab-size: 2;
+}
+
+.markdown-body .tab-size[data-tab-size="3"] {
+  -moz-tab-size: 3;
+  tab-size: 3;
+}
+
+.markdown-body .tab-size[data-tab-size="4"] {
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+.markdown-body .tab-size[data-tab-size="5"] {
+  -moz-tab-size: 5;
+  tab-size: 5;
+}
+
+.markdown-body .tab-size[data-tab-size="6"] {
+  -moz-tab-size: 6;
+  tab-size: 6;
+}
+
+.markdown-body .tab-size[data-tab-size="7"] {
+  -moz-tab-size: 7;
+  tab-size: 7;
+}
+
+.markdown-body .tab-size[data-tab-size="8"] {
+  -moz-tab-size: 8;
+  tab-size: 8;
+}
+
+.markdown-body .tab-size[data-tab-size="9"] {
+  -moz-tab-size: 9;
+  tab-size: 9;
+}
+
+.markdown-body .tab-size[data-tab-size="10"] {
+  -moz-tab-size: 10;
+  tab-size: 10;
+}
+
+.markdown-body .tab-size[data-tab-size="11"] {
+  -moz-tab-size: 11;
+  tab-size: 11;
+}
+
+.markdown-body .tab-size[data-tab-size="12"] {
+  -moz-tab-size: 12;
+  tab-size: 12;
+}
+
+.markdown-body .task-list-item {
+  list-style-type: none;
+}
+
+.markdown-body .task-list-item+.task-list-item {
+  margin-top: 3px;
+}
+
+.markdown-body .task-list-item input {
+  margin: 0 .2em .25em -1.6em;
+  vertical-align: middle;
+}

im/src/assets/css/page/contacts.less

@@ -0,0 +1,281 @@
+.aside-box {
+  position: relative;
+  background-color: white;
+  border-right: 1px solid rgb(245, 245, 245);
+  overflow: hidden;
+  padding: 0;
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 15px;
+
+    .from {
+      flex: 1 1;
+      flex-shrink: 0;
+      height: 40px;
+
+      /deep/.el-input .el-input__inner {
+        border-radius: 20px;
+        width: 170px;
+      }
+    }
+
+    .tools {
+      flex-basis: 32px;
+      flex-shrink: 0;
+      height: 32px;
+      margin-bottom: 8px;
+      cursor: pointer;
+      line-height: 32px;
+      text-align: center;
+      position: relative;
+      user-select: none;
+
+      .tools-menu {
+        position: absolute;
+        right: 0;
+        top: 38px;
+        width: 100px;
+        min-height: 80px;
+        box-sizing: border-box;
+        background-color: rgba(31, 35, 41, 0.9);
+        border-radius: 5px;
+        z-index: 1;
+        padding: 3px 0;
+
+        .menu1-item {
+          height: 40px;
+          line-height: 40px;
+          color: white;
+          font-size: 14px;
+
+          &:hover {
+            background-color: rgba(70, 72, 73, 0.9);
+          }
+        }
+      }
+    }
+  }
+}
+
+// 右侧面板
+.panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &.border{
+      border-bottom: 1px solid #f5f5f5;
+    }
+  }
+
+  .subheader {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-top: 1px solid rgb(92, 156, 230);
+    border-bottom: 1px solid rgb(92, 156, 230);
+
+    p {
+      padding: 0 10px;
+      cursor: pointer;
+      font-size: 13px;
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &.active {
+        color: #508afe;
+      }
+    }
+  }
+
+  .panel-body {
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+
+    .preloading {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      user-select: none;
+
+      p {
+        margin-top: 20px;
+        color: #afacac;
+        font-size: 14px;
+        font-weight: 300;
+      }
+    }
+
+    .data-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      height: 60px;
+      cursor: pointer;
+      padding: 5px 15px;
+      position: relative;
+      overflow: hidden;
+      border-bottom: 1px solid #f1ebeb;
+      margin-bottom: 2px;
+
+      .avatar {
+        height: 35px;
+        width: 35px;
+        flex-basis: 35px;
+        flex-shrink: 0;
+        background-color: #508afe;
+        border-radius: 50%;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+        color: white;
+        user-select: none;
+        transition: ease 1s;
+        position: relative;
+      }
+
+      .card {
+        height: 40px;
+        display: flex;
+        align-content: center;
+        flex-direction: column;
+        flex: 1 1;
+        margin-left: 10px;
+        overflow: hidden;
+
+        .title {
+          width: 100%;
+          height: 20px;
+          display: flex;
+          align-items: center;
+
+          .name {
+            margin-right: 15px;
+            color: #1f2329;
+          }
+
+          .larkc-tag {
+            font-size: 12px;
+            font-weight: 400;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 6px;
+            height: 20px;
+            border-radius: 2px;
+            cursor: default;
+            user-select: none;
+            background-color: #dee0e3;
+            transform: scale(0.8);
+            transform-origin: left;
+            flex-shrink: 0;
+          }
+
+          .wait {
+            background: #ffb445;
+            color: white;
+          }
+
+          .agree {
+            background: #53bd53;
+            color: white;
+          }
+        }
+
+        .content {
+          font-size: 10px;
+          line-height: 18px;
+          color: #8f959e;
+          overflow: hidden;
+          margin-top: 3px;
+          font-weight: 300;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .apply-from {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+        right: -110px;
+        top: 0px;
+        height: 60px;
+        width: 100px;
+        transition: ease 0.5s 0.3s;
+        background-color: white;
+        opacity: 0;
+        button {
+          margin: 2px;
+        }
+      }
+
+      &:hover {
+        box-shadow: 0 0 8px 4px #f1f1f1;
+
+        .avatar {
+          border-radius: 2px;
+        }
+
+        .apply-from {
+          opacity: 1;
+          right: 0px;
+        }
+      }
+    }
+  }
+}
+
+.broadside-box {
+  position: absolute;
+  width: 350px;
+  height: 100%;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  animation: showBox 0.5s ease-in-out;
+  -webkit-animation: showBox 0.5s ease-in-out;
+  -moz-animation: showBox 0.5s ease-in-out;
+  -webkit-box-direction: normal;
+  background: white;
+  box-shadow: 0 0 14px #cccccc70;
+}
+
+@keyframes showBox {
+  0% {
+    transform: translateX(350px);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@-webkit-keyframes showBox {
+  0% {
+    -webkit-transform: translateX(350px);
+  }
+
+  to {
+    -webkit-transform: translateX(0);
+  }
+}

im/src/assets/css/page/login-auth.less

@@ -0,0 +1,198 @@
+/deep/.el-input__inner {
+  border-radius: 1px !important;
+}
+
+#auth-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: #f6f8fb;
+
+  #logo-name {
+    width: 200px;
+    height: 38px;
+    font-size: 34px;
+    font-family: Times New Roman, Georgia, Serif;
+    color: #2196f3;
+    margin-left: 20px;
+    margin-top: 20px;
+  }
+
+  #login-box {
+    position: absolute;
+    width: 350px;
+    min-height: 480px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: 0 0 0 #ccc;
+    box-shadow: 0 4px 14px 0 rgba(206, 207, 209, 0.5);
+    padding: 10px 20px;
+
+    .header {
+      width: 100%;
+      height: 38px;
+      font-size: 22px;
+      margin: 25px 0 20px 0;
+    }
+
+    .main {
+      width: 100%;
+
+      .links {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        a {
+          font-weight: normal !important;
+        }
+      }
+
+      .send-code-btn {
+        width: 140px;
+        height: 40px;
+        line-height: 40px;
+        display: inline-block;
+        background: #f3ecec;
+        text-align: center;
+        color: #777373;
+        cursor: pointer;
+        user-select: none;
+        margin-left: 5px;
+
+        &:active {
+          background: #e4dbdb;
+        }
+      }
+
+      .send-sms-disable {
+        cursor: not-allowed !important;
+        background: #f7f7f7 !important;
+        color: silver !important;
+      }
+
+      .submit-btn {
+        width: 100%;
+        border-radius: 2px;
+      }
+    }
+  }
+}
+
+.preview-account {
+  text-align: center;
+
+  p {
+    height: 25px;
+    line-height: 25px;
+    color: rgb(45, 44, 44);
+    font-weight: 100;
+    font-size: 12px;
+  }
+}
+
+.copyright {
+  position: absolute;
+  bottom: 30px;
+  left: 0;
+  right: 0;
+  width: 70%;
+  text-align: center;
+  margin: 0 auto;
+  font-size: 12px;
+  color: #b1a0a0;
+
+  a {
+    color: #777272;
+    font-weight: 400;
+  }
+}
+
+@media screen and (max-height: 500px) {
+  .copyright {
+    display: none;
+  }
+}
+
+.fly-box {
+  .fly {
+    pointer-events: none;
+    position: fixed;
+    z-index: 100;
+  }
+
+  .bg-fly-circle1 {
+    left: 40px;
+    top: 100px;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: linear-gradient(
+      to right,
+      rgba(100, 84, 239, 0.07) 0%,
+      rgba(48, 33, 236, 0.04) 100%
+    );
+    animation: move 2.5s linear infinite;
+  }
+
+  .bg-fly-circle2 {
+    left: 3%;
+    top: 60%;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    background: linear-gradient(
+      to right,
+      rgba(100, 84, 239, 0.08) 0%,
+      rgba(48, 33, 236, 0.04) 100%
+    );
+    animation: move 3s linear infinite;
+  }
+
+  .bg-fly-circle3 {
+    right: 2%;
+    top: 140px;
+    width: 145px;
+    height: 145px;
+    border-radius: 50%;
+    background: linear-gradient(
+      to right,
+      rgba(100, 84, 239, 0.1) 0%,
+      rgba(48, 33, 236, 0.04) 100%
+    );
+    animation: move 2.5s linear infinite;
+  }
+
+  .bg-fly-circle4 {
+    right: 5%;
+    top: 60%;
+    width: 160px;
+    height: 160px;
+    border-radius: 50%;
+    background: linear-gradient(
+      to right,
+      rgba(100, 84, 239, 0.02) 0%,
+      rgba(48, 33, 236, 0.04) 100%
+    );
+    animation: move 3.5s linear infinite;
+  }
+}
+
+@keyframes move {
+  0% {
+    transform: translateY(0px);
+  }
+
+  50% {
+    transform: translateY(25px);
+  }
+
+  100% {
+    transform: translateY(0px);
+  }
+}

im/src/assets/css/reset.css

@@ -0,0 +1,62 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body,
+html {
+    height: 100%;
+    min-width: 500px;
+    font-family: "Microsoft YaHei";
+    font-size: 16px;
+    color: #333;
+}
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+}
+
+img {
+    border: 0;
+}
+
+a,
+img {
+    -webkit-touch-callout: none
+}
+
+a {
+    text-decoration: none;
+}
+
+textarea {
+    resize: none;
+    outline: 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    border: none;
+    background: #fff;
+    font-family: "Microsoft YaHei";
+}
+
+:focus {
+    outline: none;
+}
+
+.clearfix {
+    clear: both;
+    content: "";
+    display: block;
+    overflow: hidden
+}
+
+.clear {
+    clear: both;
+}

im/src/assets/css/talk/talk-records.less

@@ -0,0 +1,50 @@
+.message-group {
+  min-height: 30px;
+  display: flex;
+  margin-bottom: 5px;
+  flex-direction: row;
+  padding: 3px 12px 3px 0;
+
+  &:first-child {
+    margin-top: 10px;
+  }
+
+  .left-box {
+    width: 50px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    user-select: none;
+    padding-top: 8px;
+
+    img {
+      height: 30px;
+      width: 30px;
+      border-radius: 3px;
+      cursor: pointer;
+    }
+  }
+
+  .right-box {
+    flex: auto;
+    overflow-x: auto;
+    padding: 0px 5px 15px 5px;
+
+    .msg-header {
+      height: 30px;
+      line-height: 30px;
+      font-size: 12px;
+      color: #a09a9a;
+      position: relative;
+      user-select: none;
+
+      .name {
+        color: #333;
+      }
+    }
+
+    /deep/.text-message {
+      border-radius: 0;
+    }
+  }
+}

im/src/assets/css/variable.less

@@ -0,0 +1,10 @@
+//主题皮肤 - 预留功能
+:root {
+    --themeBagColor: red;
+}
+
+// ------- 定义 Less 变量 -------
+@themeBagColor: var(--themeBagColor);
+
+// 遮罩层背景颜色
+@maskBagColor: rgba(31, 35, 41, .3);

im/src/components/chat/TalkCodeBlock.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="lum-dialog-mask">
+    <div class="container animated bounceInDown" :class="{ 'full-screen': isFullScreen }">
+      <el-container class="full-height">
+        <el-header class="header no-padding" height="50px">
+          <div class="tools">
+            <span>选择编程语言:&nbsp;&nbsp;</span>
+            <el-select v-model="language" size="mini" filterable placeholder="语言类型" :disabled="!editMode">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+          <i class="el-icon-close close-btn" @click="close" />
+          <i class="iconfont icon-full-screen" :class="{
+              'icon-tuichuquanping': isFullScreen,
+              'icon-quanping ': !isFullScreen,
+            }" :title="isFullScreen ? '关闭全屏模式' : '打开全屏模式'" @click="isFullScreen = !isFullScreen" />
+        </el-header>
+
+        <el-main class="main no-padding">
+          <PrismEditor class="peditor" style="border-radius: 0" :code="code" :language="language" :line-numbers="true"
+            @change="codeChanged" />
+        </el-main>
+
+        <el-footer class="footer no-padding" height="50px">
+          <div class="code-num">
+            <span>代码字数：{{ code.length }}字</span>
+            <span v-show="code.length > 10000 && editMode" class="code-warning">
+              (字数不能超过10000字)
+            </span>
+          </div>
+
+          <div class="buttom-group">
+            <el-button size="small" plain @click="close">
+              {{ editMode ? '取消编辑' : '关闭预览' }}
+            </el-button>
+
+            <el-button v-show="editMode" type="primary" size="small" @click="submit">发送代码
+            </el-button>
+          </div>
+        </el-footer>
+      </el-container>
+    </div>
+  </div>
+</template>
+<script>
+import PrismEditor from "vue-prism-editor";
+import "vue-prism-editor/dist/VuePrismEditor.css";
+import "prismjs/themes/prism-okaidia.css";
+import Vue from "vue";
+import { Select, Option } from "element-ui";
+Vue.use(Select);
+Vue.use(Option);
+
+export default {
+  name: "TalkCodeBlock",
+  components: {
+    PrismEditor,
+  },
+  props: {
+    loadCode: {
+      type: String,
+      default: "",
+    },
+    loadLang: {
+      type: String,
+      default: "",
+    },
+    editMode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      language: "",
+      code: "",
+      options: [
+        {
+          value: "css",
+          label: "css",
+        },
+        {
+          value: "less",
+          label: "less",
+        },
+        {
+          value: "javascript",
+          label: "javascript",
+        },
+        {
+          value: "json",
+          label: "json",
+        },
+        {
+          value: "bash",
+          label: "bash",
+        },
+        {
+          value: "c",
+          label: "c",
+        },
+        {
+          value: "cil",
+          label: "cil",
+        },
+        {
+          value: "docker",
+          label: "docker",
+        },
+        {
+          value: "git",
+          label: "git",
+        },
+        {
+          value: "go",
+          label: "go",
+        },
+        {
+          value: "java",
+          label: "java",
+        },
+        {
+          value: "lua",
+          label: "lua",
+        },
+        {
+          value: "nginx",
+          label: "nginx",
+        },
+        {
+          value: "objectivec",
+          label: "objectivec",
+        },
+        {
+          value: "php",
+          label: "php",
+        },
+        {
+          value: "python",
+          label: "python",
+        },
+        {
+          value: "ruby",
+          label: "ruby",
+        },
+        {
+          value: "rust",
+          label: "rust",
+        },
+        {
+          value: "sql",
+          label: "sql",
+        },
+        {
+          value: "swift",
+          label: "swift",
+        },
+        {
+          value: "vim",
+          label: "vim",
+        },
+        {
+          value: "visual-basic",
+          label: "visual-basic",
+        },
+        {
+          value: "shell",
+          label: "shell",
+        },
+      ],
+      isFullScreen: false,
+    };
+  },
+  watch: {
+    loadCode(value) {
+      this.code = value;
+    },
+    loadLang(value) {
+      this.language = value;
+    },
+  },
+  created() {
+    this.code = this.loadCode;
+    this.language = this.loadLang;
+  },
+  methods: {
+    submit() {
+      if (!this.code) {
+        this.$message.error("代码块不能为空...");
+        return false;
+      }
+
+      if (this.language == "") {
+        this.$message.error("请选择语言");
+        return false;
+      }
+
+      if (this.code.length > 10000) {
+        this.$message.error("代码字数不能超过10000字！！！");
+        return false;
+      }
+      this.$emit("confirm", {
+        language: this.language,
+        code: this.code,
+      });
+    },
+    close() {
+      this.$emit("close");
+    },
+    codeChanged(code) {
+      this.code = code;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  width: 80%;
+  max-width: 800px;
+  height: 600px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px 0 rgba(31, 35, 41, 0.2);
+  transition: 0.5s ease;
+  background: #2d2d2d;
+
+  .header {
+    position: relative;
+    background-color: white;
+
+    .close-btn {
+      position: absolute;
+      right: 12px;
+      top: 13px;
+      font-size: 24px;
+      cursor: pointer;
+    }
+
+    .icon-full-screen {
+      position: absolute;
+      right: 45px;
+      top: 13px;
+      font-size: 20px;
+      cursor: pointer;
+    }
+
+    .tools {
+      line-height: 50px;
+      padding-left: 10px;
+    }
+  }
+
+  .footer {
+    background-color: #3c3c3c;
+    padding-right: 20px;
+    line-height: 50px;
+
+    .code-num {
+      float: left;
+      color: white;
+      padding-left: 10px;
+      font-size: 14px;
+    }
+
+    .code-warning {
+      color: red;
+    }
+
+    .buttom-group {
+      float: right;
+      height: 100%;
+      line-height: 50px;
+      text-align: right;
+
+      button {
+        border-radius: 0;
+      }
+    }
+  }
+}
+
+.full-screen {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+}
+
+/deep/ .el-input__inner {
+  border-radius: 0;
+  width: 130px;
+}
+
+/deep/ pre {
+  border-radius: 0;
+}
+
+/deep/ .prism-editor-wrapper pre::-webkit-scrollbar {
+  background-color: #272822;
+}
+
+/deep/ .prism-editor-wrapper pre::-webkit-scrollbar-thumb {
+  background-color: #41413f;
+  cursor: pointer;
+}
+
+/deep/ .prism-editor-wrapper::-webkit-scrollbar {
+  background-color: #272822;
+}
+
+/deep/ .prism-editor-wrapper::-webkit-scrollbar-thumb {
+  background-color: rgb(114, 112, 112);
+  cursor: pointer;
+}
+</style>

im/src/components/chat/TalkForwardRecord.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="lum-dialog-mask" v-show="isShow">
+    <el-container class="lum-dialog-box" v-outside="close">
+      <el-header class="no-padding header" height="60px">
+        <p>会话记录 ({{ records.length }})</p>
+        <p class="tools">
+          <i class="el-icon-close" @click="close" />
+        </p>
+      </el-header>
+      <el-main class="no-padding main" v-loading="loading">
+        <el-scrollbar class="full-height" tag="section" :native="false">
+          <div v-for="record in records" :key="record.id" class="message-group">
+            <div class="left-box">
+              <el-avatar
+                fit="contain"
+                shape="square"
+                :size="30"
+                :src="record.avatar"
+              />
+            </div>
+
+            <div class="right-box">
+              <div class="msg-header">
+                <span class="name">
+                  {{
+                    record.nickname_remarks
+                      ? record.nickname_remarks
+                      : record.nickname
+                  }}
+                </span>
+                <el-divider direction="vertical" />
+                <span class="time">{{ record.created_at }}</span>
+              </div>
+
+              <!-- 文本消息 -->
+              <text-message
+                v-if="record.msg_type == 1"
+                :content="record.content"
+              />
+
+              <!-- 文件 - 图片消息 -->
+              <image-message
+                v-else-if="record.msg_type == 2 && record.file.file_type == 1"
+                :src="record.file.file_url"
+              />
+
+              <!-- 文件 - 音频消息 -->
+              <audio-message
+                v-else-if="record.msg_type == 2 && record.file.file_type == 2"
+                :src="record.file.file_url"
+              />
+
+              <!-- 文件 - 视频消息 -->
+              <video-message
+                v-else-if="record.msg_type == 2 && record.file.file_type == 3"
+              />
+
+              <!-- 文件 - 其它格式文件 -->
+              <file-message
+                v-else-if="record.msg_type == 2 && record.file.file_type == 4"
+                :file="record.file"
+                :record_id="record.id"
+              />
+
+              <!-- 代码块消息 -->
+              <code-message
+                v-else-if="record.msg_type == 4"
+                :code="record.code_block.code"
+                :lang="record.code_block.code_lang"
+              />
+
+              <div v-else class="other-message">未知消息类型</div>
+            </div>
+          </div>
+        </el-scrollbar>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script>
+import { ServeGetForwardRecords } from '@/api/chat'
+
+export default {
+  name: 'TalkForwardRecord',
+  data() {
+    return {
+      record_id: 0,
+      records: [],
+      loading: false,
+      isShow: false,
+    }
+  },
+  methods: {
+    open(record_id) {
+      if (record_id !== this.record_id) {
+        this.record_id = record_id
+        this.records = []
+        this.loadRecords()
+      }
+
+      this.isShow = true
+    },
+    close() {
+      this.isShow = false
+    },
+    loadRecords() {
+      this.loading = true
+      ServeGetForwardRecords({
+        record_id: this.record_id,
+      })
+        .then(res => {
+          if (res.code == 200) {
+            this.records = res.data.rows
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.lum-dialog-mask {
+  z-index: 99999;
+}
+
+.lum-dialog-box {
+  width: 500px;
+  max-width: 500px;
+  height: 600px;
+}
+
+/deep/.el-scrollbar__wrap {
+  overflow-x: hidden;
+}
+
+@import '~@/assets/css/talk/talk-records.less';
+</style>

im/src/components/chat/TalkSearchRecord.vue

@@ -0,0 +1,602 @@
+<template>
+  <div class="lum-dialog-mask">
+    <el-container class="lum-dialog-box" :class="{ 'full-screen': fullscreen }">
+      <el-header height="60px" class="header">
+        <p>消息管理器</p>
+        <p class="title">
+          <span>{{ query.talk_type == 1 ? "好友" : "群" }}【{{ title }}】</span>
+        </p>
+        <p class="tools">
+          <i
+            class="iconfont"
+            style="transform: scale(0.85)"
+            :class="fullscreen ? 'icon-tuichuquanping' : 'icon-quanping'"
+            @click="fullscreen = !fullscreen"
+          />
+          <i class="el-icon-close" @click="$emit('close')" />
+        </p>
+      </el-header>
+
+      <el-header height="38px" class="sub-header">
+        <i
+          class="iconfont pointer"
+          :class="{ 'icon-shouqi2': broadside, 'icon-zhankai': !broadside }"
+          @click="triggerBroadside"
+        />
+        <div class="search-box no-select">
+          <i class="el-icon-search" />
+          <input
+            v-model="search.keyword"
+            type="text"
+            maxlength="30"
+            placeholder="关键字搜索"
+            @keyup.enter="searchText($event)"
+          />
+        </div>
+      </el-header>
+
+      <el-container class="full-height ov-hidden">
+        <el-aside width="200px" class="broadside" v-show="broadside">
+          <el-container class="full-height">
+            <el-header height="40px" class="aside-header">
+              <div
+                class="item"
+                :class="{ selected: contacts.show == 'friends' }"
+                @click="contacts.show = 'friends'"
+              >
+                我的好友({{ contacts.friends.length }})
+              </div>
+              <div class="item-shuxian">|</div>
+              <div
+                class="item"
+                :class="{ selected: contacts.show == 'groups' }"
+                @click="contacts.show = 'groups'"
+              >
+                我的群组({{ contacts.groups.length }})
+              </div>
+            </el-header>
+            <el-main class="no-padding">
+              <el-scrollbar class="full-height" tag="section" :native="false">
+                <div
+                  v-for="item in contacts[contacts.show]"
+                  class="contacts-item pointer"
+                  :class="{
+                    selected:
+                      query.talk_type == item.type &&
+                      query.receiver_id == item.id,
+                  }"
+                  :key="item.id"
+                  @click="triggerMenuItem(item)"
+                >
+                  <div class="avatar">
+                    <el-avatar :size="20" :src="item.avatar">
+                      <img src="~@/assets/image/detault-avatar.jpg" />
+                    </el-avatar>
+                  </div>
+                  <div class="content" v-text="item.name"></div>
+                </div>
+              </el-scrollbar>
+            </el-main>
+          </el-container>
+        </el-aside>
+
+        <!-- 聊天记录阅览 -->
+        <el-main v-show="showBox == 0" class="no-padding">
+          <el-container class="full-height">
+            <el-header height="40px" class="type-items">
+              <span
+                v-for="tab in tabType"
+                :class="{ active: query.msg_type == tab.type }"
+                @click="triggerLoadType(tab.type)"
+                >{{ tab.name }}
+              </span>
+            </el-header>
+
+            <el-main
+              v-if="records.isEmpty"
+              class="history-record animated fadeIn"
+            >
+              <div class="empty-records">
+                <img src="~@/assets/image/chat-search-no-message.png" />
+                <p>暂无聊天记录</p>
+              </div>
+            </el-main>
+
+            <el-main v-else class="history-record">
+              <el-scrollbar class="full-height" tag="section" :native="false">
+                <div
+                  v-for="record in records.items"
+                  :key="record.id"
+                  class="message-group"
+                >
+                  <div class="left-box">
+                    <el-avatar
+                      shape="square"
+                      fit="contain"
+                      :size="30"
+                      :src="record.avatar"
+                    />
+                  </div>
+
+                  <div class="right-box">
+                    <div class="msg-header">
+                      <span class="name">
+                        {{
+                          record.nickname_remarks
+                            ? record.nickname_remarks
+                            : record.nickname
+                        }}
+                      </span>
+                      <el-divider direction="vertical" />
+                      <span class="time">{{ record.created_at }}</span>
+                    </div>
+
+                    <!-- 文本消息 -->
+                    <text-message
+                      v-if="record.msg_type == 1"
+                      :content="record.content"
+                    />
+
+                    <!-- 文件 - 图片消息 -->
+                    <image-message
+                      v-else-if="
+                        record.msg_type == 2 && record.file.file_type == 1
+                      "
+                      :src="record.file.file_url"
+                    />
+
+                    <!-- 文件 - 音频消息 -->
+                    <audio-message
+                      v-else-if="
+                        record.msg_type == 2 && record.file.file_type == 2
+                      "
+                      :src="record.file.file_url"
+                    />
+
+                    <!-- 文件 - 视频消息 -->
+                    <video-message
+                      v-else-if="
+                        record.msg_type == 2 && record.file.file_type == 3
+                      "
+                    />
+
+                    <!-- 文件 - 其它格式文件 -->
+                    <file-message
+                      v-else-if="
+                        record.msg_type == 2 && record.file.file_type == 4
+                      "
+                      :file="record.file"
+                      :record_id="record.id"
+                    />
+
+                    <!-- 会话记录消息 -->
+                    <forward-message
+                      v-else-if="record.msg_type == 3"
+                      :forward="record.forward"
+                      :record_id="record.id"
+                    />
+
+                    <!-- 代码块消息 -->
+                    <code-message
+                      v-else-if="record.msg_type == 4"
+                      :code="record.code_block.code"
+                      :lang="record.code_block.code_lang"
+                    />
+
+                    <!-- 投票消息 -->
+                    <vote-message
+                      v-else-if="record.msg_type == 5"
+                      :record_id="record.id"
+                      :vote="record.vote"
+                    />
+
+                    <div v-else class="other-message">未知消息类型</div>
+                  </div>
+                </div>
+
+                <!-- 数据加载栏 -->
+                <div v-show="records.loadStatus == 1" class="load-button blue">
+                  <i class="el-icon-loading" />
+                  <span>加载数据中...</span>
+                </div>
+                <div v-show="records.loadStatus == 0" class="load-button">
+                  <i class="el-icon-arrow-down" />
+                  <span @click="loadChatRecord">加载更多...</span>
+                </div>
+              </el-scrollbar>
+            </el-main>
+          </el-container>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<script>
+import { ServeGetContacts } from "@/api/contacts";
+import { ServeFindTalkRecords } from "@/api/chat";
+import { formatSize as renderSize, download, imgZoom } from "@/utils/functions";
+
+export default {
+  name: "TalkSearchRecord",
+  props: {
+    params: {
+      type: Object,
+      default: () => {
+        return {
+          talk_type: 0,
+          receiver_id: 0,
+          title: "",
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      fullscreen: false,
+
+      user_id: this.$store.state.user.id,
+      title: "",
+
+      // 侧边栏相关信息
+      broadside: false,
+      contacts: {
+        show: "friends",
+        friends: [],
+        groups: [],
+      },
+
+      query: {
+        talk_type: 0,
+        receiver_id: 0,
+        msg_type: 0,
+      },
+
+      // 用户聊天记录
+      records: {
+        record_id: 0,
+        items: [],
+        isEmpty: false,
+        loadStatus: 0,
+      },
+
+      showBox: 0,
+
+      tabType: [
+        { name: "全部", type: 0 },
+        { name: "文件", type: 2 },
+        { name: "会话记录", type: 3 },
+        { name: "代码块", type: 4 },
+        { name: "群投票", type: 5 },
+      ],
+
+      search: {
+        keyword: "", // 关键字查询
+        date: "", // 时间查询
+        page: 1, // 当前分页
+        totalPage: 50, // 总分页
+        items: [], // 数据列表
+        isShowDate: false,
+      },
+    };
+  },
+  mounted() {
+    this.title = this.params.title;
+    this.query = {
+      talk_type: this.params.talk_type,
+      receiver_id: this.params.receiver_id,
+      msg_type: 0,
+    };
+
+    this.loadChatRecord(0);
+  },
+  created() {
+    this.loadFriends();
+  },
+  methods: {
+    download,
+    renderSize,
+
+    // 获取图片信息
+    getImgStyle(url) {
+      return imgZoom(url, 200);
+    },
+
+    // 获取会话记录消息名称
+    getForwardTitle(item) {
+      let arr = [...new Set(item.map((v) => v.nickname))];
+      return arr.join("、") + "的会话记录";
+    },
+
+    // 获取好友列表
+    loadFriends() {
+      ServeGetContacts().then(({ code, data }) => {
+        if (code == 200) {
+          this.contacts.friends = data.map((item) => {
+            return {
+              id: item.id,
+              type: 1,
+              avatar: item.avatar,
+              name: item.friend_remark ? item.friend_remark : item.nickname,
+            };
+          });
+        }
+      });
+    },
+
+    // 左侧联系人菜单点击事件
+    triggerMenuItem(item) {
+      this.title = item.name;
+      this.query.talk_type = item.type;
+      this.query.receiver_id = item.id;
+      this.showBox = 0;
+
+      this.triggerLoadType(0);
+    },
+
+    // 加载历史记录
+    loadChatRecord() {
+      let data = {
+        talk_type: this.query.talk_type,
+        receiver_id: this.query.receiver_id,
+        record_id: this.records.record_id,
+        msg_type: this.query.msg_type,
+      };
+
+      if (this.records.loadStatus == 1) return;
+
+      this.records.loadStatus = 1;
+      ServeFindTalkRecords(data)
+        .then((res) => {
+          if (res.code != 200) return;
+
+          let records = data.record_id == 0 ? [] : this.records.items;
+
+          records.push(...res.data.rows);
+
+          this.records.items = records;
+          this.records.loadStatus =
+            res.data.rows.length < res.data.limit ? 2 : 0;
+
+          if (this.records.items.length == 0) {
+            this.records.isEmpty = true;
+          } else {
+            this.records.record_id =
+              this.records.items[this.records.items.length - 1].id;
+          }
+        })
+        .catch(() => {
+          this.records.loadStatus = 0;
+        });
+    },
+
+    triggerLoadType(type) {
+      this.records.record_id = 0;
+      this.query.msg_type = type;
+      this.records.isEmpty = false;
+      this.records.items = [];
+
+      this.loadChatRecord();
+    },
+
+    searchText() {
+      if (this.search.keyword == "") {
+        this.showBox = 0;
+        return false;
+      }
+
+      this.$notify.info({
+        title: "消息",
+        message: "查询功能正在开发中...",
+      });
+    },
+
+    triggerBroadside() {
+      this.broadside = !this.broadside;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-scrollbar__wrap {
+  overflow-x: hidden;
+}
+
+.lum-dialog-mask {
+  z-index: 1;
+}
+
+.lum-dialog-box {
+  width: 100%;
+  height: 600px;
+  max-width: 800px;
+  transition: 1s ease;
+
+  &.full-screen {
+    width: 100%;
+    height: 100%;
+    max-width: unset;
+    margin: 0;
+    border-radius: 0px;
+  }
+
+  .sub-header {
+    height: 38px;
+    line-height: 38px;
+    font-size: 12px;
+    border-bottom: 1px solid #f9f4f4;
+    margin-top: 10px;
+    padding: 0 10px;
+    position: relative;
+
+    i {
+      font-size: 22px;
+      color: #6f6a6a;
+    }
+
+    .search-box {
+      position: absolute;
+      width: 230px;
+      height: 32px;
+      top: 2px;
+      right: 10px;
+      background: #f9f4f4;
+      border-radius: 5px;
+
+      i {
+        position: absolute;
+        left: 10px;
+        top: 8px;
+        font-size: 16px;
+      }
+
+      input {
+        position: absolute;
+        left: 35px;
+        top: 3px;
+        height: 25px;
+        width: 184px;
+        color: #7d7171;
+        background: #f9f4f4;
+      }
+    }
+  }
+
+  .broadside {
+    @border: 1px solid #f9f9f9;
+    border-right: @border;
+    user-select: none;
+    transition: 3s ease;
+
+    .aside-header {
+      display: flex;
+      flex-direction: row;
+      height: 100%;
+      border-bottom: @border;
+      padding: 0;
+
+      > div {
+        text-align: center;
+        line-height: 40px;
+        font-size: 13px;
+        font-weight: 400;
+      }
+
+      .item {
+        flex: 1;
+        cursor: pointer;
+
+        &.selected {
+          color: #66b1ff;
+        }
+      }
+
+      .item-shuxian {
+        flex-basis: 1px;
+        flex-shrink: 0;
+        color: rgb(232 224 224);
+      }
+    }
+
+    .contacts-item {
+      height: 35px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding-left: 10px;
+      position: relative;
+
+      .avatar {
+        flex-basis: 40px;
+        flex-shrink: 0;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .content {
+        flex: 1 1;
+        height: 100%;
+        line-height: 35px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 13px;
+        padding-right: 10px;
+      }
+
+      &:hover,
+      &.selected {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+}
+
+/* first box */
+.type-items {
+  padding: 0 0 0 10px;
+  line-height: 40px;
+  user-select: none;
+  border-bottom: 1px solid #f9f4f4;
+
+  .active {
+    color: #03a9f4;
+    font-weight: 500;
+    font-size: 13px;
+  }
+
+  span {
+    height: 40px;
+    width: 45px;
+    text-align: center;
+    cursor: pointer;
+    margin: 0 10px;
+    font-size: 12px;
+    font-weight: 400;
+  }
+}
+
+.history-record {
+  padding: 10px 0;
+}
+
+.load-button {
+  width: 100%;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+
+  &.blue {
+    color: #51b2ff;
+  }
+
+  span {
+    margin-left: 5px;
+    font-size: 13px;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+
+.empty-records {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: #cccccc;
+  font-weight: 300;
+  font-size: 14px;
+
+  img {
+    width: 100px;
+  }
+}
+
+@import "~@/assets/css/talk/talk-records.less";
+</style>

im/src/components/chat/messaege/AudioMessage.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="audio-message">
+    <div class="videodisc">
+      <div class="disc" :class="{ play: isPlay }" @click="toPlay">
+        <i v-if="loading" class="el-icon-loading" />
+        <i v-else-if="isPlay" class="el-icon-video-pause" />
+        <i v-else class="el-icon-video-play" />
+        <audio
+          ref="audio"
+          type="audio/mp3"
+          :src="src"
+          @timeupdate="timeupdate"
+          @ended="ended"
+          @canplay="canplay"
+        ></audio>
+      </div>
+    </div>
+    <div class="detail">
+      <div class="text">
+        <i class="el-icon-service" />
+        <span>{{ getCurrDuration }} / {{ getTotalDuration }}</span>
+      </div>
+      <div class="process">
+        <el-progress :percentage="progress" :show-text="false" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+function formatSeconds(value) {
+  var theTime = parseInt(value) // 秒
+  var theTime1 = 0 // 分
+  var theTime2 = 0 // 小时
+  if (theTime > 60) {
+    theTime1 = parseInt(theTime / 60)
+    theTime = parseInt(theTime % 60)
+    if (theTime1 > 60) {
+      theTime2 = parseInt(theTime1 / 60)
+      theTime1 = parseInt(theTime1 % 60)
+    }
+  }
+
+  var result = '' + parseInt(theTime) //秒
+  if (10 > theTime > 0) {
+    result = '0' + parseInt(theTime) //秒
+  } else {
+    result = '' + parseInt(theTime) //秒
+  }
+
+  if (10 > theTime1 > 0) {
+    result = '0' + parseInt(theTime1) + ':' + result //分，不足两位数，首位补充0，
+  } else {
+    result = '' + parseInt(theTime1) + ':' + result //分
+  }
+  if (theTime2 > 0) {
+    result = '' + parseInt(theTime2) + ':' + result //时
+  }
+  return result
+}
+
+export default {
+  name: 'AudioMessage',
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      loading: true,
+      isPlay: false,
+      duration: 0,
+      currentTime: 0,
+      progress: 0,
+    }
+  },
+  computed: {
+    getTotalDuration() {
+      return formatSeconds(this.duration)
+    },
+    getCurrDuration() {
+      return formatSeconds(this.currentTime)
+    },
+  },
+  methods: {
+    toPlay() {
+      if (this.loading) {
+        return
+      }
+
+      let audio = this.$refs.audio
+      if (this.isPlay) {
+        audio.pause()
+      } else {
+        audio.play()
+      }
+      this.isPlay = !this.isPlay
+    },
+
+    // 当目前的播放位置已更改时
+    timeupdate() {
+      let audio = this.$refs.audio
+      this.currentTime = audio.currentTime
+      this.progress = (audio.currentTime / audio.duration) * 100
+    },
+
+    // 当浏览器可以播放音频/视频时
+    canplay() {
+      this.duration = this.$refs.audio.duration
+      this.loading = false
+    },
+
+    // 当目前的播放列表已结束时
+    ended() {
+      this.isPlay = false
+    },
+  },
+}
+</script>
+<style scoped lang="less">
+.audio-message {
+  width: 200px;
+  height: 60px;
+  border-radius: 5px;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  border: 1px solid #03a9f4;
+  overflow: hidden;
+
+  > div {
+    height: 100%;
+  }
+
+  .videodisc {
+    flex-basis: 60px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .disc {
+      width: 42px;
+      height: 42px;
+      background: #e9e5e5;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      cursor: pointer;
+      transition: ease 0.5;
+
+      &.play {
+        background: #ff5722;
+        box-shadow: 0 0 4px 0px #f76a3e;
+      }
+
+      i {
+        font-size: 24px;
+      }
+
+      &:active i {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .detail {
+    flex: 1 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 10px;
+
+    .text {
+      width: 90%;
+      font-size: 12px;
+      i {
+        margin-right: 5px;
+      }
+    }
+
+    .process {
+      padding-top: 10px;
+      height: 20px;
+      width: 90%;
+    }
+  }
+}
+</style>

im/src/components/chat/messaege/CodeMessage.vue

@@ -0,0 +1,148 @@
+<template>
+  <div
+    class="code-message"
+    :class="{
+      'max-height': lineNumber > 6,
+      'max-width': maxwidth,
+      'full-screen': fullscreen,
+    }"
+  >
+    <i
+      :class="
+        fullscreen ? 'el-icon-close' : 'iconfont icon-tubiao_chakangongyi'
+      "
+      @click="fullscreen = !fullscreen"
+    />
+    <pre class="lum-scrollbar" v-html="formatCode(code, lang)" />
+  </div>
+</template>
+<script>
+import Prism from 'prismjs'
+import 'prismjs/themes/prism-okaidia.css'
+
+export default {
+  name: 'CodeMessage',
+  props: {
+    code: {
+      type: [String, Number],
+      default: '',
+    },
+    lang: {
+      type: String,
+      default: '',
+    },
+    maxwidth: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      fullscreen: false,
+      lineNumber: 0,
+    }
+  },
+  created() {
+    this.lineNumber = this.code.split(/\n/).length
+  },
+  methods: {
+    formatCode(code, lang) {
+      try {
+        return Prism.highlight(code, Prism.languages[lang], lang) + '<br/>'
+      } catch (error) {
+        return code
+      }
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.code-message {
+  position: relative;
+  overflow: hidden;
+  border-radius: 5px;
+  box-sizing: border-box;
+
+  &.max-width {
+    max-width: 500px;
+  }
+
+  &.max-height {
+    height: 208px;
+  }
+
+  i {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    font-size: 16px;
+    cursor: pointer;
+    color: white;
+    display: inline-block;
+    opacity: 0;
+    width: 50px;
+    height: 30px;
+    background: #171616;
+    text-align: center;
+    line-height: 30px;
+    border-radius: 0 0 0px 8px;
+    transition: 1s ease;
+  }
+
+  &:hover {
+    i {
+      opacity: 1;
+    }
+  }
+
+  pre {
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    padding: 10px;
+    line-height: 24px;
+    background: #272822;
+    color: #d5d4d4;
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
+    font-size: 85%;
+
+    &.lum-scrollbar {
+      &::-webkit-scrollbar {
+        background-color: black;
+      }
+    }
+  }
+
+  &.full-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    max-width: unset;
+    max-height: unset;
+    border-radius: 0px;
+    background: #272822;
+    z-index: 99999999;
+
+    i {
+      position: fixed;
+      top: 15px;
+      right: 15px;
+      width: 50px;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      font-size: 24px;
+
+      &:active {
+        box-shadow: 0 0 5px 0px #ccc;
+      }
+    }
+  }
+}
+</style>

im/src/components/chat/messaege/FileMessage.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="file-message">
+    <div class="main">
+      <div class="ext">{{ ext }}</div>
+      <div class="file-box">
+        <p class="info">
+          <span class="name">{{ fileName }}</span>
+          <span class="size">({{ fileSize }})</span>
+        </p>
+        <p class="notice">文件已成功发送, 文件助手永久保存</p>
+      </div>
+    </div>
+    <div class="footer">
+      <a @click="download(record_id)">下载</a>
+      <a>在线预览</a>
+    </div>
+  </div>
+</template>
+<script>
+import { formatSize, download } from '@/utils/functions'
+export default {
+  name: 'FileMessage',
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+    record_id: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      file_id: 0,
+      ext: '',
+      fileName: '',
+      fileSize: '',
+    }
+  },
+  created() {
+    this.file_id = this.file.id
+    this.ext = this.file.file_suffix.toUpperCase()
+    this.fileName = this.file.original_name
+    this.fileSize = formatSize(this.file.file_size)
+  },
+  methods: {
+    download,
+  },
+}
+</script>
+<style lang="less" scoped>
+.file-message {
+  width: 250px;
+  height: 85px;
+  background: white;
+  box-shadow: 0 0 5px 0px #e8e4e4;
+  padding: 10px;
+  border-radius: 3px;
+  transition: all 0.5s;
+
+  &:hover {
+    box-shadow: 0 0 5px 0px #cac6c6;
+  }
+
+  .main {
+    height: 45px;
+    display: flex;
+    flex-direction: row;
+
+    .ext {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 45px;
+      height: 45px;
+      flex-shrink: 0;
+      color: #ffffff;
+      background: #49a4ff;
+      border-radius: 5px;
+      font-size: 12px;
+    }
+
+    .file-box {
+      flex: 1 1;
+      height: 45px;
+      margin-left: 10px;
+      overflow: hidden;
+
+      .info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        overflow: hidden;
+        height: 24px;
+        color: rgb(76, 76, 76);
+        font-size: 14px;
+
+        .name {
+          flex: 1 auto;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .size {
+          font-size: 12px;
+          color: #cac6c6;
+        }
+      }
+
+      .notice {
+        height: 25px;
+        line-height: 25px;
+        font-size: 12px;
+        color: #929191;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .footer {
+    height: 30px;
+    line-height: 37px;
+    color: #409eff;
+    text-align: right;
+    font-size: 12px;
+    border-top: 1px solid #eff7ef;
+    margin-top: 10px;
+
+    a {
+      margin: 0 3px;
+      user-select: none;
+      cursor: pointer;
+
+      &:hover {
+        color: royalblue;
+      }
+    }
+  }
+}
+</style>

im/src/components/chat/messaege/ForwardMessage.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div class="forward-message" @click="catForwardRecords">
+      <div class="title">{{ title }}</div>
+      <div v-for="(record, index) in records" :key="index" class="lists">
+        <p>
+          <span>{{ record.nickname }}：</span>
+          <span>{{ record.text }}</span>
+        </p>
+      </div>
+      <div class="footer">
+        <span>转发：聊天会话记录 ({{ num }}条)</span>
+      </div>
+    </div>
+
+    <!-- 会话记录查看器 -->
+    <talk-forward-record ref="forwardRecordsRef" />
+  </div>
+</template>
+<script>
+import TalkForwardRecord from '@/components/chat/TalkForwardRecord'
+export default {
+  name: 'ForwardMessage',
+  components: {
+    TalkForwardRecord,
+  },
+  props: {
+    forward: {
+      type: Object,
+      required: true,
+    },
+    record_id: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      title: '',
+      records: [],
+      num: 0,
+    }
+  },
+  methods: {
+    catForwardRecords() {
+      this.$refs.forwardRecordsRef.open(this.record_id)
+    },
+    getForwardTitle(list) {
+      let arr = [...new Set(list.map(v => v.nickname))]
+      return arr.join('、') + '的会话记录'
+    },
+  },
+  created() {
+    let forward = this.forward
+
+    this.num = forward.num
+    this.records = forward.list
+    this.title = this.getForwardTitle(this.records)
+  },
+}
+</script>
+<style lang="less" scoped>
+/* 会话记录消息 */
+.forward-message {
+  width: 250px;
+  min-height: 95px;
+  max-height: 150px;
+  border-radius: 3px;
+  background-color: white;
+  padding: 3px 10px;
+  cursor: pointer;
+  box-shadow: 0 0 5px 0px #e8e4e4;
+  text-align: left;
+  user-select: none;
+
+  .title {
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    color: #565353;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 400;
+  }
+
+  .lists p {
+    height: 18px;
+    line-height: 18px;
+    font-size: 10px;
+    color: #aaa9a9;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 100;
+  }
+
+  .footer {
+    height: 32px;
+    line-height: 35px;
+    color: #858282;
+    border-top: 1px solid #f1ebeb;
+    font-size: 12px;
+    margin-top: 12px;
+    font-weight: 300;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    box-shadow: 0 0 5px 0px #cac6c6;
+  }
+}
+</style>

im/src/components/chat/messaege/FriendApplyMessage.vue

@@ -0,0 +1,150 @@
+<template>
+  <!-- 好友申请消息 -->
+  <div class="apply-card">
+    <div class="card-header">
+      <img class="avatar" :src="avatar" />
+      <div class="nickname">No. {{ nickname }}</div>
+      <div class="datetime">{{ datetime }}</div>
+      <div class="remarks">
+        <span>备注信息：{{ remarks }}</span>
+      </div>
+    </div>
+
+    <div class="card-footer">
+      <div class="mini-button" @click="handle(1)">同意</div>
+      <el-divider direction="vertical"></el-divider>
+      <div class="mini-button" @click="handle(2)">拒绝</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FriendApplyMessage',
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      avatar:
+        'http://im-img.gzydong.club/media/images/avatar/20210602/60b6f03598ed0104301.png',
+      nickname: '独特态度',
+      datetime: '05/09 12:13 分',
+      remarks: '编辑个签，展示我的独特态度 展示我的独特态度。',
+      apply_id: 0,
+    }
+  },
+  created() {},
+  methods: {
+    handle(type) {
+      alert(type)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.apply-card {
+  position: relative;
+  width: 170px;
+  min-height: 180px;
+  border-radius: 15px;
+  overflow: hidden;
+  transition: all 0.5s;
+  box-sizing: border-box;
+  background-image: linear-gradient(-84deg, #1ab6ff 0, #1ab6ff 0, #82c1f3 100%);
+  // #028fff
+
+  &:hover {
+    transform: scale(1.02);
+  }
+
+  .card-header {
+    position: relative;
+    width: 100%;
+    height: 135px;
+
+    .avatar {
+      position: absolute;
+      top: 18px;
+      left: 8px;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: white;
+    }
+
+    .nickname {
+      position: absolute;
+      top: 15px;
+      right: 8px;
+      width: 90px;
+      height: 25px;
+      font-size: 10px;
+      text-align: center;
+      line-height: 25px;
+      color: white;
+      border-bottom: 1px dashed white;
+    }
+
+    .datetime {
+      position: absolute;
+      top: 42px;
+      right: 11.5px;
+      color: white;
+      font-size: 10px;
+      transform: scale(0.9);
+    }
+
+    .remarks {
+      position: absolute;
+      bottom: 5px;
+      color: white;
+      font-size: 10px;
+      padding: 3px 5px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+      transform: scale(0.95);
+    }
+  }
+
+  .card-footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 40px;
+    border-top: 1px solid white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+
+    /deep/.el-divider {
+      background: white;
+    }
+
+    .mini-button {
+      display: flex;
+      width: 50px;
+      height: 25px;
+      margin: 0 10px;
+      text-align: center;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      color: white;
+      cursor: pointer;
+
+      &:hover {
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

im/src/components/chat/messaege/ImageMessage.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="image-message no-select">
+    <el-image
+      fit="cover"
+      :src="src"
+      :lazy="true"
+      :style="getImgStyle(src)"
+      :preview-src-list="[src]"
+    >
+      <div slot="error" class="image-slot">图片加载失败...</div>
+      <div slot="placeholder" class="image-slot">图片加载中...</div>
+    </el-image>
+  </div>
+</template>
+<script>
+import { imgZoom } from '@/utils/functions'
+export default {
+  name: 'ImageMessage',
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    getImgStyle(url) {
+      return imgZoom(url, 200)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.image-message {
+  /deep/.el-image {
+    border-radius: 5px;
+    cursor: pointer;
+    background: #f1efef;
+
+    .image-slot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      font-size: 13px;
+      color: #908686;
+      background: #efeaea;
+    }
+  }
+}
+</style>

im/src/components/chat/messaege/InviteMessage.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="invite-message">
+    <div v-if="invite.type == 1 || invite.type == 3" class="system-msg">
+      <a @click="toUser(invite.operate_user.id)">
+        {{ invite.operate_user.nickname }}
+      </a>
+      <span>{{ invite.type == 1 ? '邀请了' : '将' }}</span>
+      <template v-for="(user, uidx) in invite.users">
+        <a @click="toUser(user.id)">{{ user.nickname }}</a>
+        <em v-show="uidx < invite.users.length - 1">、</em>
+      </template>
+      <span>{{ invite.type == 1 ? '加入了群聊' : '踢出了群聊' }}</span>
+    </div>
+
+    <div v-else-if="invite.type == 2" class="system-msg">
+      <a @click="toUser(invite.operate_user.id)">
+        {{ invite.operate_user.nickname }}
+      </a>
+      <span>退出了群聊</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'InviteMessage',
+  props: {
+    invite: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    toUser(user_id) {
+      this.$emit('cat', user_id)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.invite-message {
+  display: flex;
+  justify-content: center;
+}
+
+.system-msg {
+  margin: 10px auto;
+  background-color: #f5f5f5;
+  font-size: 11px;
+  line-height: 30px;
+  padding: 0 8px;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #979191;
+  user-select: none;
+  font-weight: 300;
+  display: inline-block;
+  border-radius: 3px;
+
+  span {
+    margin: 0 5px;
+  }
+
+  a {
+    color: #939596;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 400;
+
+    &:hover {
+      color: black;
+    }
+  }
+}
+</style>

im/src/components/chat/messaege/LoginMessage.vue

@@ -0,0 +1,101 @@
+<template>
+  <!-- 登录消息 -->
+  <div class="login-message">
+    <h4>登录操作通知</h4>
+    <p>登录时间：{{ datetime }} (CST)</p>
+    <p>IP地址：{{ ip }}</p>
+    <p>登录地点：{{ address }}</p>
+    <p>登录设备：{{ platform }}</p>
+    <p>异常原因：{{ reason }}</p>
+  </div>
+</template>
+
+<script>
+import { parseTime } from '@/utils/functions'
+
+export default {
+  name: 'LoginMessage',
+  props: {
+    detail: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      datetime: '',
+      ip: '',
+      address: '',
+      platform: '',
+      reason: '常用设备登录',
+    }
+  },
+  created() {
+    this.ip = this.detail.ip
+    this.datetime = parseTime(
+      this.detail.created_at,
+      '{y}年{m}月{d}日 {h}:{i}:{s}'
+    )
+    this.address = this.detail.address
+    this.reason = this.detail.reason
+
+    this.platform =
+      this.getExploreName(this.detail.agent) +
+      ' / ' +
+      this.getExploreOs(this.detail.agent)
+  },
+  methods: {
+    getExploreName(userAgent = '') {
+      if (userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1) {
+        return 'Opera'
+      } else if (
+        userAgent.indexOf('compatible') > -1 &&
+        userAgent.indexOf('MSIE') > -1
+      ) {
+        return 'IE'
+      } else if (userAgent.indexOf('Edge') > -1) {
+        return 'Edge'
+      } else if (userAgent.indexOf('Firefox') > -1) {
+        return 'Firefox'
+      } else if (
+        userAgent.indexOf('Safari') > -1 &&
+        userAgent.indexOf('Chrome') == -1
+      ) {
+        return 'Safari'
+      } else if (
+        userAgent.indexOf('Chrome') > -1 &&
+        userAgent.indexOf('Safari') > -1
+      ) {
+        return 'Chrome'
+      } else {
+        return 'Unkonwn'
+      }
+    },
+
+    getExploreOs(userAgent = '') {
+      if (userAgent.indexOf('Mac OS') > -1) {
+        return 'Mac OS'
+      } else {
+        return 'Windows'
+      }
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.login-message {
+  width: 300px;
+  min-height: 50px;
+  background: #f7f7f7;
+  border-radius: 5px;
+  padding: 15px;
+
+  p {
+    font-size: 13px;
+    margin: 10px 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>

im/src/components/chat/messaege/ReplyMessage.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="reply-message">这是回复的消息[预留]</div>
+</template>
+
+<script>
+export default {
+  name: 'ReplyMessage',
+  data() {
+    return {}
+  },
+  created() {},
+  methods: {},
+}
+</script>
+<style lang="less" scoped>
+.reply-message {
+  margin-top: 5px;
+  min-height: 28px;
+  background: #f7f1f1;
+  line-height: 28px;
+  font-size: 12px;
+  padding: 0 10px;
+  border-radius: 3px;
+  color: #a7a2a2;
+}
+</style>

im/src/components/chat/messaege/RevokeMessage.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="revoke-message">
+    <div class="content">
+      <span v-if="$store.state.user.id == item.user_id">
+        你撤回了一条消息 | {{ sendTime(item.created_at) }}
+      </span>
+      <span v-else-if="item.talk_type == 1">
+        对方撤回了一条消息 | {{ sendTime(item.created_at) }}
+      </span>
+      <span v-else>
+        "{{ item.nickname }}" 撤回了一条消息 | {{ sendTime(item.created_at) }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { formatTime as sendTime } from "@/utils/functions";
+
+export default {
+  name: "RevokeMessage",
+  props: {
+    item: {
+      type: Object,
+    },
+  },
+  methods: {
+    sendTime,
+  },
+};
+</script>
+<style lang="less" scoped>
+.revoke-message {
+  display: flex;
+  justify-content: center;
+
+  .content {
+    margin: 10px auto;
+    background-color: #f5f5f5;
+    font-size: 11px;
+    line-height: 30px;
+    padding: 0 8px;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: #979191;
+    user-select: none;
+    font-weight: 300;
+    display: inline-block;
+    border-radius: 3px;
+
+    span {
+      margin: 0 5px;
+    }
+
+    a {
+      color: #939596;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 400;
+
+      &:hover {
+        color: black;
+      }
+    }
+  }
+}
+</style>

im/src/components/chat/messaege/SystemTextMessage.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="system-text-message">
+    <div class="content">{{ content }}</div>
+  </div>
+</template>
+<script>
+import { formatTime as sendTime } from '@/utils/functions'
+
+export default {
+  name: 'SystemTextMessage',
+  props: {
+    content: String,
+  },
+  methods: {
+    sendTime,
+  },
+}
+</script>
+<style lang="less" scoped>
+.system-text-message {
+  display: flex;
+  justify-content: center;
+
+  .content {
+    margin: 10px auto;
+    background-color: #f5f5f5;
+    font-size: 11px;
+    line-height: 30px;
+    padding: 0 8px;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: #979191;
+    user-select: none;
+    font-weight: 300;
+    display: inline-block;
+    border-radius: 3px;
+  }
+}
+</style>

im/src/components/chat/messaege/TextMessage.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="text-message"
+    :class="{
+      left: float == 'left',
+      right: float == 'right',
+      'max-width': !fullWidth,
+    }"
+  >
+    <div v-if="arrow" class="arrow"></div>
+    <pre v-html="html" />
+  </div>
+</template>
+<script>
+import { textReplaceLink } from "@/utils/functions";
+import { textReplaceEmoji } from "@/utils/emojis";
+
+export default {
+  name: "TextMessage",
+  props: {
+    content: {
+      type: [String, Number],
+      default: "",
+    },
+    float: {
+      type: String,
+      default: "left",
+    },
+    fullWidth: {
+      type: Boolean,
+      default: true,
+    },
+    arrow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      html: "",
+    };
+  },
+  created() {
+    const text = textReplaceLink(
+      this.content,
+      this.float == "right" ? "#ffffff" : "rgb(9 149 208)"
+    );
+
+    this.html = textReplaceEmoji(text);
+  },
+};
+</script>
+<style lang="less" scoped>
+@bg-left-color: #f5f5f5;
+@bg-right-color: #1ebafc;
+
+.text-message {
+  position: relative;
+  min-width: 30px;
+  min-height: 30px;
+  border-radius: 5px;
+  padding: 5px;
+
+  .arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    font-size: 0;
+    border: 5px solid;
+    top: 6px;
+    left: -10px;
+  }
+
+  &.max-width {
+    max-width: calc(100% - 50px);
+  }
+
+  &.left {
+    color: #3a3a3a;
+    background: @bg-left-color;
+
+    .arrow {
+      border-color: transparent @bg-left-color transparent transparent;
+    }
+  }
+
+  &.right {
+    color: #fff;
+    background: @bg-right-color;
+
+    .arrow {
+      right: -10px;
+      left: unset;
+      border-color: transparent transparent transparent @bg-right-color;
+    }
+  }
+
+  pre {
+    white-space: pre-wrap;
+    overflow: hidden;
+    word-break: break-word;
+    word-wrap: break-word;
+    font-size: 15px;
+    padding: 3px 10px;
+    font-family: "Microsoft YaHei";
+    line-height: 25px;
+  }
+}
+</style>

im/src/components/chat/messaege/UserCardMessage.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- 用户卡片消息 - 预留 -->
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'UserCardMessage',
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  methods: {},
+  created() {},
+}
+</script>
+<style lang="less" scoped></style>

im/src/components/chat/messaege/VideoMessage.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="video-message">
+    视频消息
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VideoMessage',
+  components: {},
+  data() {
+    return {}
+  },
+  methods: {},
+  created() {},
+}
+</script>
+<style lang="less" scoped></style>

im/src/components/chat/messaege/VisitCardMessage.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="visit-card-message">
+    <div class="user flex-center">
+      <div class="avatar flex-center">
+        <el-avatar :size="28" :src="avatar" />
+      </div>
+      <div class="content flex-center">
+        <p class="ellipsis">{{ nickname }}</p>
+      </div>
+      <div class="tools flex-center">
+        <span class="flex-center pointer">
+          <i class="el-icon-plus" /> 加好友
+        </span>
+      </div>
+    </div>
+    <div class="sign"><span>个性签名 : </span>{{ sign }}</div>
+    <div class="share no-select ellipsis">
+      <a class="pointer" @click="openVisitCard(friendId)">你是谁?</a>
+      分享了用户名片，可点击添加好友 ...
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'VisitCardMessage',
+  data() {
+    return {
+      userId: 0,
+      friendId: 0,
+      avatar:
+        'http://im-serve0.gzydong.club/static/image/sys-head/2019012107542668696.jpg',
+      sign:
+        '这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。',
+      nickname:
+        '氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳',
+    }
+  },
+  created() {},
+  methods: {
+    openVisitCard(user_id) {
+      this.$emit('openVisitCard', user_id)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.visit-card-message {
+  min-height: 130px;
+  min-width: 100px;
+  max-width: 300px;
+  border-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+  border: 1px solid #ece5e5;
+  transition: all 0.5s;
+
+  &:hover {
+    box-shadow: 0 0 8px #e2d3d3;
+    transform: scale(1.01);
+  }
+
+  .user {
+    height: 40px;
+    overflow: hidden;
+    box-sizing: border-box;
+    > div {
+      height: inherit;
+    }
+
+    .avatar {
+      flex-basis: 30px;
+      flex-shrink: 0;
+    }
+
+    .content {
+      flex: 1 1;
+      margin: 0 10px;
+      font-size: 14px;
+      justify-content: flex-start;
+      overflow: hidden;
+    }
+
+    .tools {
+      flex-basis: 60px;
+      flex-shrink: 0;
+
+      span {
+        width: 65px;
+        height: 30px;
+        background: #409eff;
+        color: white;
+        font-size: 13px;
+        border-radius: 20px;
+        padding: 0 8px;
+        transform: scale(0.8);
+        user-select: none;
+
+        &:active {
+          background: #83b0f3;
+          transform: scale(0.83);
+        }
+      }
+    }
+  }
+
+  .sign {
+    min-height: 22px;
+    line-height: 22px;
+    border-radius: 3px;
+    padding: 5px 8px;
+    background: #f3f5f7;
+    color: #7d7d7d;
+    font-size: 12px;
+    margin: 10px 0;
+    span {
+      font-weight: bold;
+    }
+  }
+
+  .share {
+    font-size: 12px;
+    color: #7d7d7d;
+    a {
+      color: #4cabf7;
+    }
+  }
+}
+</style>

im/src/components/chat/messaege/VoiceMessage.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="voice-message"></div>
+</template>
+
+<script>
+export default {
+  name: 'VoiceMessage',
+  components: {},
+  data() {
+    return {}
+  },
+  methods: {},
+  created() {},
+}
+</script>
+<style lang="less" scoped></style>

im/src/components/chat/messaege/VoteMessage.vue

@@ -0,0 +1,299 @@
+<template>
+  <div>
+    <div class="vote-message">
+      <div class="vote-from">
+        <div class="vheader">
+          <p>
+            {{ answer_mode == 1 ? "[多选投票]" : "[单选投票]" }}
+            <i
+              v-show="is_vote"
+              class="pointer"
+              :class="{
+                'el-icon-loading': refresh,
+                'el-icon-refresh': !refresh,
+              }"
+              title="刷新投票结果"
+              @click="loadRefresh"
+            ></i>
+          </p>
+          <p>{{ title }}</p>
+        </div>
+
+        <template v-if="is_vote">
+          <div class="vbody">
+            <div class="vote-view" v-for="(option, index) in options">
+              <p class="vote-option">{{ option.value }}. {{ option.text }}</p>
+              <p class="vote-census">
+                {{ option.num }} 票 {{ option.progress }}%
+              </p>
+              <p class="vote-progress">
+                <el-progress
+                  :show-text="false"
+                  :percentage="parseInt(option.progress)"
+                />
+              </p>
+            </div>
+          </div>
+          <div class="vfooter vote-view">
+            <p>应参与人数：{{ answer_num }} 人</p>
+            <p>实际参与人数：{{ answered_num }} 人</p>
+          </div>
+        </template>
+        <template v-else>
+          <div class="vbody">
+            <p class="option" v-for="(option, index) in options">
+              <el-checkbox
+                v-model="option.is_checked"
+                @change="toSelect2(option)"
+              />
+              <span @click="toSelect(option, index)" style="margin-left: 10px">
+                {{ option.value }} 、{{ option.text }}
+              </span>
+            </p>
+          </div>
+          <div class="vfooter">
+            <el-button plain round @click="toVote">
+              {{ isUserVote ? "立即投票" : "请选择进行投票" }}
+            </el-button>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ServeConfirmVoteHandle } from "@/api/chat";
+
+export default {
+  name: "VoteMessage",
+  props: {
+    vote: {
+      type: Object,
+      required: true,
+    },
+    record_id: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      answer_mode: 0,
+      title: "啊谁叫你打开你卡沙发那,那就是看、卡收纳是你",
+      radio_value: "",
+      options: [],
+      is_vote: false,
+      answer_num: 0,
+      answered_num: 0,
+      refresh: false,
+    };
+  },
+  computed: {
+    isUserVote() {
+      return this.options.some((iten) => {
+        return iten.is_checked;
+      });
+    },
+  },
+  created() {
+    let user_id = this.$store.state.user.id;
+    let { detail, statistics, vote_users } = this.vote;
+
+    this.answer_mode = detail.answer_mode;
+    this.answer_num = detail.answer_num;
+    this.answered_num = detail.answered_num;
+
+    detail.answer_option.forEach((item) => {
+      this.options.push({
+        value: item.key,
+        text: item.value,
+        is_checked: false,
+        num: 0,
+        progress: "00.0",
+      });
+    });
+
+    this.is_vote = vote_users.some((value) => {
+      return value == user_id;
+    });
+
+    this.updateStatistics(statistics);
+  },
+  methods: {
+    loadRefresh() {
+      this.refresh = true;
+
+      setTimeout(() => {
+        this.refresh = false;
+      }, 500);
+    },
+    updateStatistics(data) {
+      let count = data.count;
+      this.options.forEach((option) => {
+        option.num = data.options[option.value];
+
+        if (count > 0) {
+          option.progress = (data.options[option.value] / count) * 100;
+        }
+      });
+    },
+
+    toSelect(option, index) {
+      if (this.answer_mode == 0) {
+        this.options.forEach((option) => {
+          option.is_checked = false;
+        });
+      }
+
+      this.options[index].is_checked = !option.is_checked;
+    },
+    toSelect2(option) {
+      if (this.answer_mode == 0) {
+        this.options.forEach((item) => {
+          if (option.value == item.value) {
+            item.is_checked = option.is_checked;
+          } else {
+            item.is_checked = false;
+          }
+        });
+      }
+    },
+    toVote() {
+      if (this.isUserVote == false) {
+        return false;
+      }
+
+      let items = [];
+      this.options.forEach((item) => {
+        if (item.is_checked) {
+          items.push(item.value);
+        }
+      });
+
+      ServeConfirmVoteHandle({
+        record_id: this.record_id,
+        options: items.join(","),
+      }).then((res) => {
+        if (res.code == 200) {
+          this.is_vote = true;
+          this.updateStatistics(res.data);
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.vote-message {
+  width: 300px;
+  min-height: 150px;
+  border: 1px solid #eceff1;
+  box-sizing: border-box;
+  border-radius: 5px;
+  overflow: hidden;
+
+  .vote-from {
+    width: 100%;
+
+    .vheader {
+      min-height: 50px;
+      background: #4e83fd;
+      padding: 8px;
+      position: relative;
+      p {
+        margin: 3px 0;
+        &:first-child {
+          color: rgb(245, 237, 237);
+          font-size: 13px;
+          margin-bottom: 8px;
+        }
+
+        &:last-child {
+          color: white;
+        }
+      }
+
+      &::before {
+        content: "投票";
+        position: absolute;
+        font-size: 60px;
+        color: white;
+        opacity: 0.1;
+        top: -5px;
+        right: 10px;
+      }
+    }
+
+    .vbody {
+      min-height: 80px;
+      width: 100%;
+      padding: 5px 15px;
+      box-sizing: border-box;
+      .option {
+        margin: 14px 0px;
+        font-size: 13px;
+        span {
+          cursor: pointer;
+          user-select: none;
+          line-height: 22px;
+        }
+
+        .el-radio {
+          margin-right: 0;
+          .el-radio__label {
+            padding-left: 5px;
+          }
+        }
+      }
+      margin-bottom: 10px;
+    }
+
+    .vfooter {
+      height: 55px;
+      text-align: center;
+      box-sizing: border-box;
+
+      .el-button {
+        width: 80%;
+        font-weight: 400;
+      }
+
+      &.vote-view {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding-left: 15px;
+
+        p {
+          border-left: 2px solid #2196f3;
+          padding-left: 5px;
+        }
+      }
+    }
+  }
+
+  .vote-view {
+    width: 100%;
+    min-height: 30px;
+    margin: 15px 0;
+    box-sizing: border-box;
+
+    > p {
+      margin: 6px 0px;
+      font-size: 13px;
+    }
+
+    .vote-option {
+      min-height: 20px;
+      line-height: 20px;
+    }
+
+    .vote-census {
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+}
+</style>

im/src/components/chat/messaege/index.js

@@ -0,0 +1,33 @@
+import AudioMessage from './AudioMessage.vue';
+import CodeMessage from './CodeMessage.vue';
+import ForwardMessage from './ForwardMessage.vue';
+import ImageMessage from './ImageMessage.vue';
+import TextMessage from './TextMessage.vue';
+import VideoMessage from './VideoMessage.vue';
+import VoiceMessage from './VoiceMessage.vue';
+import SystemTextMessage from './SystemTextMessage.vue';
+import FileMessage from './FileMessage.vue';
+import InviteMessage from './InviteMessage.vue';
+import RevokeMessage from './RevokeMessage.vue';
+import VisitCardMessage from './VisitCardMessage.vue';
+import ReplyMessage from './ReplyMessage.vue';
+import VoteMessage from './VoteMessage.vue';
+import LoginMessage from './LoginMessage.vue';
+
+export {
+    AudioMessage,
+    CodeMessage,
+    ForwardMessage,
+    ImageMessage,
+    TextMessage,
+    VideoMessage,
+    VoiceMessage,
+    SystemTextMessage,
+    FileMessage,
+    InviteMessage,
+    RevokeMessage,
+    VisitCardMessage,
+    ReplyMessage,
+    VoteMessage,
+    LoginMessage
+}

im/src/components/chat/panel/OtherLink.vue

@@ -0,0 +1,130 @@
+<template>
+    <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
+        <el-tab-pane :label="toUser.storeFlag ? '想要咨询' : '他的足迹'" name="history">
+            <div style="margin-left: 12px;" v-if="toUser.storeFlag">
+                <GoodsLink :goodsDetail="goodsDetail" v-if="toUser.userId === goodsDetail.storeId"/>
+                <FootPrint :list="footPrintList"/>
+            </div>
+            <div v-else>
+                
+            </div>
+        </el-tab-pane>
+        <el-tab-pane label="店铺信息" name="UserInfo" v-if="toUser.storeFlag">
+            <div v-if="toUser.storeFlag">
+                <StoreDetail :storeInfo="storeInfo"/>
+            </div>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+
+<script>
+import { Tabs, TabPane } from 'element-ui'
+import { ServeGetStoreDetail, ServeGetUserDetail, ServeGetFootPrint } from '@/api/user'
+import { ServeGetGoodsDetail } from '@/api/goods'
+import StoreDetail from "@/components/chat/panel/template/storeDetail.vue";
+import FootPrint from "@/components/chat/panel/template/footPrint.vue";
+import GoodsLink from "@/components/chat/panel/template/goodsLink.vue";
+export default {
+    components: {
+        "el-tabs": Tabs,
+        "el-tab-pane": TabPane,
+        StoreDetail,
+        FootPrint,
+        GoodsLink
+    },
+    props: {
+        toUser: {
+            type: Object,
+            default: null,
+        },
+        id: {
+            type: String,
+            default: '',
+        },
+        goodsParams: {
+            type: Object,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            activeName: 'history',
+            storeInfo: {}, //店铺信息
+            memberInfo: {}, //会员信息
+            footPrintParams: {
+                memberId: '',
+                storeId: '',
+            },
+            goodsDetail: {},
+            footPrintList: [],
+        }
+    },
+    mounted() {
+        console.log(this.id)
+        console.log(this.toUser)
+        if(this.toUser.storeFlag){
+            this.getStoreDetail()
+        }else{
+            this.getMemberDetail()
+        }
+        this.getFootPrint()
+        if(this.goodsParams){
+            this.getGoodsDetail()
+        }
+    },
+    methods: {
+        getStoreDetail() {
+            ServeGetStoreDetail(this.toUser.userId).then(res => {
+                if (res.success) {
+                    this.storeInfo = res.result
+                }
+            })
+        },
+        handleClick(){},
+        getMemberDetail() {
+            ServeGetUserDetail(this.toUser.userId).then(res => {
+                if (res.success) {
+                    this.memberInfo = res.result
+                }
+            })
+        },
+        getGoodsDetail(){
+            ServeGetGoodsDetail(this.goodsParams).then(res => {
+                if(res.success){
+                    this.goodsDetail = res.result.data
+                }
+            })
+        },
+        getFootPrint(){
+            if(this.toUser.storeFlag){
+                this.footPrintParams.memberId = this.id
+                this.footPrintParams.storeId = this.toUser.userId
+            }else{
+                this.footPrintParams.memberId = this.toUser.userId
+                this.footPrintParams.storeId = this.id
+            }
+            console.log(this.footPrintParams)
+            ServeGetFootPrint(this.footPrintParams).then(res => {
+                res.result.records.forEach((item,index) => {
+                   if(item.goodsId === this.goodsParams.goodsId){
+                    res.result.records.splice(index,1)
+                   }
+                });
+                this.footPrintList = res.result.records
+            })
+            //删除掉刚加入的商品
+        },
+    }
+}
+
+</script>
+
+<style scoped lang="less">
+/deep/ .el-tabs__nav {
+    height: 60px;
+    line-height: 60px;
+}
+/deep/ .el-tab-pane {
+    margin-left: 12px;
+}
+</style>

im/src/components/chat/panel/PanelHeader.vue

@@ -0,0 +1,278 @@
+<template>
+  <el-header id="panel-header">
+    <div class="module left-module">
+      <span
+        class="icon-badge"
+        v-show="params.is_robot == 0"
+        :class="{ 'red-color': params.talk_type == 1 }"
+      >
+        {{ params.talk_type == 1 ? '好友' : '群组' }}
+      </span>
+      <span class="nickname">{{ params.nickname }}</span>
+      <span v-show="params.talk_type == 2" class="num">({{ groupNum }})</span>
+    </div>
+
+    <div v-show="params.talk_type == 1 && params.is_robot == 0" class="module center-module">
+      <p class="online">
+        <span v-show="isOnline" class="online-status"></span>
+        <span>{{ isOnline ? '在线' : '离线' }}</span>
+      </p>
+      <p class="keyboard-status" v-show="isKeyboard">对方正在输入 ...</p>
+    </div>
+
+    <div class="module right-module" >
+      <el-tooltip content="历史消息" placement="top">
+        <p v-show="params.is_robot == 0">
+          <i class="el-icon-time" @click="triggerEvent('history')" />
+        </p>
+      </el-tooltip>
+      <el-tooltip content="群公告" placement="top">
+        <p v-show="params.talk_type == 2">
+          <i class="iconfont icon-gonggao2" @click="triggerEvent('notice')" />
+        </p>
+      </el-tooltip>
+      <el-tooltip content="群设置" placement="top">
+        <p v-show="params.talk_type == 2">
+          <i class="el-icon-setting" @click="triggerEvent('setting')" />
+        </p>
+      </el-tooltip>
+    </div>
+  </el-header>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          talk_type: 0,
+          receiver_id: 0,
+          params: 0,
+          nickname: '',
+        }
+      },
+    },
+    online: {
+      type: Boolean,
+      default: false,
+    },
+    keyboard: {
+      type: [Boolean, Number],
+      default: false,
+    },
+  },
+  data() {
+    return {
+      params: {
+        talk_type: 0,
+        receiver_id: 0,
+        params: 0,
+        nickname: '',
+      },
+      isOnline: false,
+      isKeyboard: false,
+      groupNum: 0,
+    }
+  },
+  created() {
+    this.setParamsData(this.data)
+    this.setOnlineStatus(this.online)
+  },
+  watch: {
+    data(value) {
+      this.setParamsData(value)
+    },
+    online(value) {
+      this.setOnlineStatus(value)
+    },
+    keyboard(value) {
+      this.isKeyboard = value
+      setTimeout(() => {
+        this.isKeyboard = false
+      }, 2000)
+    },
+  },
+  methods: {
+    setOnlineStatus(value) {
+      this.isOnline = value
+    },
+    setParamsData(object) {
+      Object.assign(this.params, object)
+    },
+    setGroupNum(value) {
+      this.groupNum = value
+    },
+    triggerEvent(event_name) {
+      this.$emit('event', event_name)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+#panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  border-bottom: 1px solid #f5eeee;
+
+  .module {
+    width: 100%/3;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .left-module {
+    padding-right: 5px;
+
+    .icon-badge {
+      background: rgb(81 139 254);
+      height: 18px;
+      line-height: 18px;
+      padding: 1px 3px;
+      font-size: 10px;
+      color: white;
+      border-radius: 3px;
+      margin-right: 8px;
+      flex-shrink: 0;
+
+      &.red-color {
+        background: #f97348;
+      }
+    }
+
+    .nickname {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .center-module {
+    flex-direction: column;
+    justify-content: center;
+
+    .online {
+      color: #cccccc;
+      font-weight: 300;
+      font-size: 15px;
+
+      &.color {
+        color: #1890ff;
+      }
+
+      .online-status {
+        position: relative;
+        top: -1px;
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        vertical-align: middle;
+        border-radius: 50%;
+        position: relative;
+        background-color: #1890ff;
+        margin-right: 5px;
+
+        &:after {
+          position: absolute;
+          top: -1px;
+          left: -1px;
+          width: 100%;
+          height: 100%;
+          border: 1px solid #1890ff;
+          border-radius: 50%;
+          -webkit-animation: antStatusProcessing 1.2s ease-in-out infinite;
+          animation: antStatusProcessing 1.2s ease-in-out infinite;
+          content: '';
+        }
+      }
+    }
+
+    .keyboard-status {
+      height: 20px;
+      line-height: 18px;
+      font-size: 10px;
+      animation: inputfade 600ms infinite;
+      -webkit-animation: inputfade 600ms infinite;
+    }
+  }
+
+  .right-module {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    p {
+      cursor: pointer;
+      margin: 0 8px;
+      font-size: 20px;
+      color: #828f95;
+      &:active i {
+        font-size: 26px;
+        transform: scale(1.3);
+        transition: ease 0.5s;
+        color: red;
+      }
+    }
+  }
+}
+
+/* css 动画 */
+@keyframes inputfade {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes inputfade {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes antStatusProcessing {
+  0% {
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+
+  to {
+    -webkit-transform: scale(2.4);
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+
+@keyframes antStatusProcessing {
+  0% {
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+
+  to {
+    -webkit-transform: scale(2.4);
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}
+</style>

im/src/components/chat/panel/PanelToolbar.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="multi-select">
+    <div class="multi-title">
+      <span>已选中：{{ value }} 条消息</span>
+    </div>
+    <div class="multi-main">
+      <div class="btn-group">
+        <div
+          class="multi-icon pointer"
+          @click="$emit('event', 'merge_forward')"
+        >
+          <i class="el-icon-position" />
+        </div>
+        <p>合并转发</p>
+      </div>
+      <div class="btn-group">
+        <div class="multi-icon pointer" @click="$emit('event', 'forward')">
+          <i class="el-icon-position" />
+        </div>
+        <p>逐条转发</p>
+      </div>
+      <div class="btn-group">
+        <div class="multi-icon pointer" @click="$emit('event', 'delete')">
+          <i class="el-icon-delete" />
+        </div>
+        <p>批量删除</p>
+      </div>
+      <div class="btn-group">
+        <div class="multi-icon pointer" @click="$emit('event', 'close')">
+          <i class="el-icon-close" />
+        </div>
+        <p>关闭</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      default: 0,
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.multi-select {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
+  .multi-title {
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    color: #878484;
+    font-weight: 300;
+    font-size: 14px;
+  }
+
+  .multi-main {
+    .btn-group {
+      display: inline-block;
+      width: 70px;
+      height: 70px;
+      margin-right: 15px;
+
+      .multi-icon {
+        width: 45px;
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #f5f5f5;
+        border-radius: 50%;
+        margin: 0 auto;
+        border: 1px solid transparent;
+
+        &:hover {
+          color: red;
+          border-color: red;
+          background: transparent;
+          font-size: 18px;
+        }
+      }
+
+      p {
+        font-size: 12px;
+        margin-top: 8px;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

im/src/components/chat/panel/template/footPrint.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        最近浏览
+        <dl>
+            <dd v-for="(item, index) in list">
+                <div class="base" @click="linkToGoods(item.goodsId,item.id)">
+                    <div>
+                        <img :src="item.thumbnail" class="image" />
+                    </div>
+                    <div style="margin-left: 13px">
+                        <a>{{ item.goodsName }}</a>
+                        <div>
+                            <span style="color: red;">￥{{ item.price }}</span>
+                        </div>
+                    </div>
+                </div>
+            </dd>
+        </dl>
+    </div>
+</template>
+
+<script>
+import { Tag, button } from 'element-ui'
+export default {
+    data() {
+        return {
+        }
+    },
+    components: {
+        "el-tag": Tag,
+        "el-button": button,
+    },
+    methods:{
+    },
+    props: {
+        list: {
+            type: Array,
+            default: [],
+        },
+    },
+}
+
+</script>
+
+<style scoped lang="less">
+.store-button {
+    background-color: white;
+    border-color: #F56C6C;
+}
+
+.base {
+    margin-top: 5px;
+    height: 120px;
+    display: flex;
+
+    div {
+        margin-top: 4px;
+    }
+
+    .image {
+        height: 100px;
+        margin-top: 3px;
+        width: 100px
+    }
+
+}
+
+.separate {
+    margin-top: 8px;
+}
+</style>

im/src/components/chat/panel/template/goodsLink.vue

@@ -0,0 +1,168 @@
+<template>
+    <div>
+        当前浏览
+        <div class="base">
+            <div>
+                <img :src="goodsDetail.thumbnail" class="image" />
+            </div>
+            <div style="margin-left: 13px">
+                <a @click="linkToGoods(goodsDetail.goodsId,goodsDetail.id)"> {{ goodsDetail.goodsName }} </a>
+                <div>
+                    <span style="color: red;">￥{{ goodsDetail.price }}</span>
+                </div>
+                <el-button class="store-button" type="danger" v-if="!sendFlag" size="mini" @click="submitSendMessage()"
+                    plain>发送</el-button>
+            </div>
+        </div>
+        <hr class="separate" />
+    </div>
+</template>
+
+<script>
+import { Tag, button } from 'element-ui'
+import { mapState, mapGetters } from "vuex";
+import SocketInstance from "@/im-server/socket-instance";
+export default {
+    data() {
+        return {
+            sendFlag: false,
+        }
+    },
+    computed: {
+        ...mapGetters(["talkItems"]),
+        ...mapState({
+            id: (state) => state.user.id,
+            index_name: (state) => state.dialogue.index_name,
+            toUser: (state) => state.user.toUser,
+        }),
+    },
+    mounted(){
+    
+    },
+    components: {
+        "el-tag": Tag,
+        "el-button": button,
+        Storage
+    },
+    methods: {
+        toGoods() {
+            alert("toGoods")
+        },
+        toMessage() {
+            alert(JSON.stringify(this.toUser))
+            alert("toMessage")
+        },
+        // 回车键发送消息回调事件
+        submitSendMessage() {
+            console.log("发送");
+            const context = this.goodsDetail
+            const record = {
+                operation_type: "MESSAGE",
+                to: this.toUser.userId,
+                from: this.id,
+                message_type: "GOODS",
+                context: context,
+                talk_id: this.toUser.id,
+            };
+            SocketInstance.emit("event_talk", record);
+
+            this.$store.commit("UPDATE_TALK_ITEM", {
+                index_name: this.index_name,
+                draft_text: "",
+            });
+
+            /**
+             * 插入数据
+             */
+            const insterChat = {
+                createTime: this.formateDateAndTimeToString(new Date()),
+                fromUser: this.id,
+                toUser: record.to,
+                isRead: false,
+                messageType: "GOODS",
+                text: context,
+                float: "right",
+            };
+
+            console.log("insterChat", insterChat);
+            // console.log("插入对话记录",'')
+            // 插入对话记录
+            this.$store.commit("PUSH_DIALOGUE", insterChat);
+            // 获取聊天面板元素节点
+            let el = document.getElementById("lumenChatPanel");
+            // 判断的滚动条是否在底部
+            let isBottom =
+                Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
+
+            if (isBottom || record.to == this.id) {
+                this.$nextTick(() => {
+                    el.scrollTop = el.scrollHeight;
+                });
+            } else {
+                this.$store.commit("SET_TLAK_UNREAD_MESSAGE", {
+                    content: content,
+                    nickname: record.name,
+                });
+            }
+        },
+
+        formateDateAndTimeToString(date) {
+            var hours = date.getHours();
+            var mins = date.getMinutes();
+            var secs = date.getSeconds();
+            var msecs = date.getMilliseconds();
+            if (hours < 10) hours = "0" + hours;
+            if (mins < 10) mins = "0" + mins;
+            if (secs < 10) secs = "0" + secs;
+            if (msecs < 10) secs = "0" + msecs;
+            return (
+                this.formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
+            );
+        },
+
+        formatDateToString(date) {
+            var year = date.getFullYear();
+            var month = date.getMonth() + 1;
+            var day = date.getDate();
+            if (month < 10) month = "0" + month;
+            if (day < 10) day = "0" + day;
+            return year + "-" + month + "-" + day;
+        },
+    },
+    props: {
+        goodsDetail: {
+            type: Object,
+            default: null,
+        },
+    },
+}
+
+</script>
+
+<style scoped lang="less">
+.store-button {
+    background-color: white;
+    border-color: #F56C6C;
+}
+
+.base {
+    margin-top: 5px;
+    height: 120px;
+    display: flex;
+
+    div {
+        margin-top: 8px;
+    }
+
+    .image {
+        height: 100px;
+        margin-top: 3px;
+        width: 100px
+    }
+
+}
+
+.separate {
+    margin-top: 8px;
+}
+</style>

im/src/components/chat/panel/template/storeDetail.vue

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <div class="base" >
+            <div> 
+                <img :src="storeInfo.storeLogo" class="image"/>
+            </div>
+            <div style="margin-left: 13px">
+                <div class="div-zoom">
+                    {{ storeInfo.storeName }}
+                    <el-tag type="danger" v-if=" storeInfo.selfOperated " size="mini">自营</el-tag>
+                </div>
+                <div>
+                    联系方式: {{ storeInfo.memberName }}
+                </div>
+                <div>
+                    <el-button class="store-button" type="danger" @click="linkToStore(storeInfo.id)" size="mini" plain >进入店铺</el-button>
+                </div>
+            </div>
+        </div>
+        <hr class="separate"/>
+        <div class="separate">店铺评分: <span>{{ storeInfo.serviceScore }}</span></div>
+        <div class="separate">服务评分: <span>{{ storeInfo.descriptionScore }}</span></div>
+        <div class="separate">物流评分: <span>{{ storeInfo.deliveryScore }}</span></div>
+    </div>
+</template>
+
+<script>
+import { Tag,button } from 'element-ui'
+export default {
+    data() {
+        return {
+        }
+    },
+    components: {
+        "el-tag": Tag,
+        "el-button": button,
+    },
+    methods:{
+    },
+    props: {
+        storeInfo: {
+            type: Object,
+            default: null,
+        },
+    },
+}
+
+</script>
+
+<style scoped lang="less">
+    .store-button{
+        background-color: white;
+        border-color: #F56C6C;
+    }
+
+    .base{
+        margin-top: 5px;
+        height: 120px;
+        display: flex;
+
+        div {
+            margin-top: 8px;
+        }
+
+        .image{
+            height: 100px; 
+            margin-top: 3px; 
+            width: 100px
+        }
+        
+    }
+    .separate{
+        margin-top: 8px;
+    }
+</style>

im/src/components/editor/MeEditor.vue

@@ -0,0 +1,506 @@
+<template>
+  <div>
+    <el-container class="editor-container">
+      <el-header class="no-padding toolbar" height="35px">
+        <ul>
+          <li v-popover:popoverEmoticon>
+            <i class="iconfont icon-icon_im_face" style="font-size: 15px" />
+            <p class="tip-title">表情符号</p>
+          </li>
+          <!-- <li @click="codeBlock.isShow = true">
+            <i class="iconfont icon-daima" />
+            <p class="tip-title">代码片段</p>
+          </li>
+          <li @click="recorder = true">
+            <i class="el-icon-headset" />
+            <p class="tip-title">语音消息</p>
+          </li> -->
+          <!-- #TODO 发图片功能暂时隐藏 此处会涉及到token过期 -->
+          <!-- <li @click="$refs.restFile.click()">
+            <i class="el-icon-picture-outline-round" />
+            <p class="tip-title">图片</p>
+          </li> -->
+          <!-- <li @click="$refs.restFile2.click()">
+            <i class="el-icon-folder" />
+            <p class="tip-title">附件</p>
+          </li>
+          <li @click="filesManager.isShow = true">
+            <i class="el-icon-folder-opened" />
+            <p class="tip-title">上传管理</p>
+          </li>
+          <li v-show="isGroupTalk" @click="vote.isShow = true">
+            <i class="el-icon-s-data" />
+            <p class="tip-title">发起投票</p>
+          </li> -->
+
+<!--          <p class="text-tips no-select">-->
+<!--            <span>按Enter发送 / Shift+Enter 换行</span>-->
+<!--            <el-popover placement="top-end" width="600" trigger="click">-->
+<!--              <div class="editor-books">-->
+<!--                <div class="books-title">编辑说明:</div>-->
+<!--                <p>-->
+<!--                  1.-->
+<!--                  支持上传QQ及微信截图，在QQ或微信中截图后使用Ctrl+v上传图片。-->
+<!--                </p>-->
+<!--                <p>-->
+<!--                  2.-->
+<!--                  支持浏览器及Word文档中的图片复制上传、复制后使用Ctrl+v上传图片。-->
+<!--                </p>-->
+<!--                <p>3. 支持图片拖拽上传。</p>-->
+<!--                <p>4. 支持文件上传 ( 文件小于100M ) 。</p>-->
+<!--                <p>5. 按Enter发送 / Shift+Enter 换行。</p>-->
+<!--                <p>-->
+<!--                  6.-->
+<!--                  注意：当文件正在上传时，请勿关闭网页或离开当前对话框，否则将导致文件停止上传或上传失败。-->
+<!--                </p>-->
+<!--              </div>-->
+<!--              <i class="el-icon-info" slot="reference" />-->
+<!--            </el-popover>-->
+<!--          </p>-->
+        </ul>
+
+        <el-popover
+          ref="popoverEmoticon"
+          placement="top-start"
+          trigger="click"
+          width="300"
+          popper-class="no-padding el-popover-em"
+        >
+          <MeEditorEmoticon ref="editorEmoticon" @selected="selecteEmoticon" />
+        </el-popover>
+
+        <form
+          enctype="multipart/form-data"
+          style="display: none"
+          ref="fileFrom"
+        >
+          <input
+            type="file"
+            ref="restFile"
+            accept="image/*"
+            @change="uploadImageChange"
+          />
+          <input type="file" ref="restFile2" @change="uploadFileChange" />
+        </form>
+      </el-header>
+      <el-main class="no-padding textarea">
+        <textarea
+          ref="textarea"
+          v-paste="pasteImage"
+          v-drag="dragPasteImage"
+          v-model.trim="editorText"
+          rows="6"
+          placeholder="你想要的聊点什么呢 ..."
+          @keydown="keydownEvent($event)"
+          @input="inputEvent($event)"
+        />
+      </el-main>
+    </el-container>
+
+    <!-- 图片查看器 -->
+    <MeEditorImageView
+      ref="imageViewer"
+      v-model="imageViewer.isShow"
+      :file="imageViewer.file"
+      @confirm="confirmUploadImage"
+    />
+
+    <MeEditorRecorder v-if="recorder" @close="recorder = false" />
+
+    <!-- 代码块编辑器 -->
+    <TalkCodeBlock
+      v-if="codeBlock.isShow"
+      :edit-mode="codeBlock.editMode"
+      @close="codeBlock.isShow = false"
+      @confirm="confirmCodeBlock"
+    />
+
+    <!-- 文件上传管理器 -->
+    <MeEditorFileManage ref="filesManager" v-model="filesManager.isShow" />
+
+    <MeEditorVote
+      v-if="vote.isShow"
+      @close="
+        () => {
+          this.vote.isShow = false;
+        }
+      "
+    />
+  </div>
+</template>
+
+<script>
+import MeEditorEmoticon from "./MeEditorEmoticon";
+import MeEditorFileManage from "./MeEditorFileManage";
+import MeEditorImageView from "./MeEditorImageView";
+import MeEditorRecorder from "./MeEditorRecorder";
+import MeEditorVote from "./MeEditorVote";
+import TalkCodeBlock from "@/components/chat/TalkCodeBlock";
+import { getPasteImgs, getDragPasteImg } from "@/utils/editor";
+import { findTalk } from "@/utils/talk";
+
+import {
+  ServeSendTalkCodeBlock,
+  ServeSendTalkImage,
+  ServeSendEmoticon,
+} from "@/api/chat";
+
+export default {
+  name: "MeEditor",
+  components: {
+    MeEditorEmoticon,
+    MeEditorFileManage,
+    MeEditorImageView,
+    TalkCodeBlock,
+    MeEditorRecorder,
+    MeEditorVote,
+  },
+  computed: {
+    talkUser() {
+      return this.$store.state.dialogue.index_name;
+    },
+    isGroupTalk() {
+      return this.$store.state.dialogue.talk_type == 2;
+    },
+  },
+  watch: {
+    talkUser(n_index_name) {
+      this.$refs.filesManager.clear();
+      this.editorText = this.getDraftText(n_index_name);
+    },
+  },
+  data() {
+    return {
+      // 当前编辑的内容
+      editorText: "",
+
+      // 图片查看器相关信息
+      imageViewer: {
+        isShow: false,
+        file: null,
+      },
+
+      codeBlock: {
+        isShow: false,
+        editMode: true,
+      },
+
+      filesManager: {
+        isShow: false,
+      },
+
+      vote: {
+        isShow: false,
+      },
+
+      // 录音器
+      recorder: false,
+
+      // 上次发送消息的时间
+      sendtime: 0,
+
+      // 发送间隔时间（默认1秒）
+      interval: 1000,
+    };
+  },
+  methods: {
+    // 读取对话编辑草稿信息 并赋值给当前富文本
+    getDraftText(index_name) {
+      console.log("findTalk(index_name)", findTalk(index_name));
+      return findTalk(index_name)?.draft_text || "";
+    },
+
+    //复制粘贴图片回调方法
+    pasteImage(e) {
+      let files = getPasteImgs(e);
+      if (files.length == 0) return;
+
+      this.openImageViewer(files[0]);
+    },
+
+    //拖拽上传图片回调方法
+    dragPasteImage(e) {
+      let files = getDragPasteImg(e);
+      if (files.length == 0) return;
+
+      this.openImageViewer(files[0]);
+    },
+
+    inputEvent(e) {
+      this.$emit("keyboard-event", e.target.value);
+    },
+
+    // 键盘按下监听事件
+    keydownEvent(e) {
+      if (e.keyCode == 13 && this.editorText == "") {
+        e.preventDefault();
+      }
+
+      // 回车发送消息
+      if (e.keyCode == 13 && e.shiftKey == false && this.editorText != "") {
+        let currentTime = new Date().getTime();
+
+        if (this.sendtime > 0) {
+          // 判断 1秒内只能发送一条消息
+          if (currentTime - this.sendtime < this.interval) {
+            e.preventDefault();
+            return false;
+          }
+        }
+
+        this.$emit("send", this.editorText);
+        this.editorText = "";
+        this.sendtime = currentTime;
+        e.preventDefault();
+      }
+    },
+
+    // 选择图片文件后回调方法
+    uploadImageChange(e) {
+      this.openImageViewer(e.target.files[0]);
+      this.$refs.restFile.value = null;
+    },
+
+    // 选择文件回调事件
+    uploadFileChange(e) {
+      let maxsize = 100 * 1024 * 1024;
+      if (e.target.files.length == 0) {
+        return false;
+      }
+
+      let file = e.target.files[0];
+      if (/\.(gif|jpg|jpeg|png|webp|GIF|JPG|PNG|WEBP)$/.test(file.name)) {
+        this.openImageViewer(file);
+        return;
+      }
+
+      if (file.size > maxsize) {
+        this.$notify.info({
+          title: "消息",
+          message: "上传文件不能大于100M",
+        });
+        return;
+      }
+
+      this.filesManager.isShow = true;
+      this.$refs.restFile2.value = null;
+      this.$refs.filesManager.upload(file);
+    },
+
+    // 打开图片查看器
+    openImageViewer(file) {
+      this.imageViewer.isShow = true;
+      this.imageViewer.file = file;
+    },
+
+    // 代码块编辑器确认完成回调事件
+    confirmCodeBlock(data) {
+      const { talk_type, receiver_id } = this.$store.state.dialogue;
+      ServeSendTalkCodeBlock({
+        talk_type,
+        receiver_id,
+        code: data.code,
+        lang: data.language,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.codeBlock.isShow = false;
+        } else {
+          this.$notify({
+            title: "友情提示",
+            message: res.message,
+            type: "warning",
+          });
+        }
+      });
+    },
+
+    // 确认上传图片消息回调事件
+    confirmUploadImage() {
+      let fileData = new FormData();
+      fileData.append("file", this.imageViewer.file);
+
+      let ref = this.$refs.imageViewer;
+
+      ServeSendTalkImage(fileData)
+        .then((res) => {
+          ref.loading = false;
+          if (res.code == 200) {
+            ref.closeBox();
+          } else {
+            this.$notify({
+              title: "友情提示",
+              message: res.message,
+              type: "warning",
+            });
+          }
+        })
+        .finally(() => {
+          ref.loading = false;
+        });
+    },
+
+    // 选中表情包回调事件
+    selecteEmoticon(data) {
+      if (data.type == 1) {
+        let value = this.editorText;
+        let el = this.$refs.textarea;
+        let startPos = el.selectionStart;
+        let endPos = el.selectionEnd;
+        let newValue =
+          value.substring(0, startPos) +
+          data.value +
+          value.substring(endPos, value.length);
+
+        this.editorText = newValue;
+
+        if (el.setSelectionRange) {
+          setTimeout(() => {
+            let index = startPos + data.value.length;
+            el.setSelectionRange(index, index);
+            el.focus();
+          }, 0);
+        }
+      } else {
+        const { talk_type, receiver_id } = this.$store.state.dialogue;
+        ServeSendEmoticon({
+          talk_type,
+          receiver_id,
+          emoticon_id: data.value,
+        });
+      }
+
+      this.$refs.popoverEmoticon.doClose();
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.editor-container {
+  height: 160px;
+  width: 100%;
+  background-color: white;
+}
+
+.editor-container .toolbar {
+  line-height: 35px;
+  border-bottom: 1px solid #f5f0f0;
+  border-top: 1px solid #f5f0f0;
+}
+
+.editor-container .toolbar li {
+  list-style: none;
+  float: left;
+  width: 35px;
+  margin-left: 3px;
+  cursor: pointer;
+  text-align: center;
+  line-height: 35px;
+  position: relative;
+  color: #8d8d8d;
+}
+
+.editor-container .toolbar li .tip-title {
+  display: none;
+  position: absolute;
+  top: 38px;
+  left: 0px;
+  height: 26px;
+  line-height: 26px;
+  background-color: rgba(31, 35, 41, 0.9);
+  color: white;
+  min-width: 30px;
+  font-size: 10px;
+  padding: 0 5px;
+  border-radius: 2px;
+  white-space: pre;
+  text-align: center;
+  user-select: none;
+  z-index: 1;
+}
+
+.editor-container .toolbar li:hover .tip-title {
+  display: block;
+}
+
+.editor-container .toolbar li:hover {
+  background-color: #f7f5f5;
+}
+
+.editor-container .toolbar .text-tips {
+  float: right;
+  margin-right: 15px;
+  font-size: 12px;
+  color: #ccc;
+}
+
+.editor-container .toolbar .text-tips i {
+  font-size: 14px;
+  cursor: pointer;
+  margin-left: 5px;
+  color: rgb(255, 181, 111);
+}
+
+.editor-container .textarea {
+  overflow: hidden;
+  position: relative;
+}
+
+textarea {
+  width: calc(100% - 10px);
+  width: -moz-calc(100% - 10px);
+  width: -webkit-calc(100% - 10px);
+  height: calc(100% - 10px);
+  height: -moz-calc(100% - 10px);
+  height: -webkit-calc(100% - 10px);
+  border: 0 none;
+  outline: none;
+  resize: none;
+  font-size: 15px;
+  overflow-y: auto;
+  color: #464545;
+  padding: 5px;
+  position: relative;
+}
+
+textarea::-webkit-scrollbar {
+  width: 4px;
+  height: 1px;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  background: #d5cfcf;
+}
+
+textarea::-webkit-scrollbar-track {
+  background: #ededed;
+}
+
+textarea::-webkit-input-placeholder {
+  color: #dccdcd;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+/* 编辑器文档说明 --- start */
+.editor-books .books-title {
+  font-size: 16px;
+  height: 30px;
+  line-height: 22px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #cbcbcb;
+  color: #726f6f;
+  font-weight: 400;
+  margin-left: 11px;
+}
+
+.editor-books p {
+  text-indent: 10px;
+  font-size: 12px;
+  height: 30px;
+  line-height: 30px;
+  color: #7f7c7c;
+}
+
+/* 编辑器文档说明 --- end */
+</style>

im/src/components/editor/MeEditorEmoticon.vue

@@ -0,0 +1,345 @@
+<template>
+  <div>
+    <el-container class="container">
+      <el-main class="no-padding main lum-scrollbar">
+        <input
+          type="file"
+          ref="fileCustomEmoji"
+          accept="image/*"
+          style="display: none"
+          @change="customUploadEmoji"
+        />
+
+        <div v-show="showEmoticonId == -1" class="emoticon">
+          <div class="title">QQ表情</div>
+          <div
+            v-for="(elImg, text) in emoji.emojis"
+            v-html="elImg"
+            :key="text"
+            class="emoticon-item"
+            @click="clickEmoticon(text)"
+          ></div>
+          <div class="clear"></div>
+          <div class="title">符号表情</div>
+          <div
+            v-for="(item, i) in emoji.symbol"
+            :key="i"
+            class="emoticon-item symbol"
+            @click="clickEmoticon(item)"
+          >
+            {{ item }}
+          </div>
+          <div class="clear"></div>
+        </div>
+
+        <div
+          v-for="item in emojiItem.slice(1)"
+          v-show="item.emoticon_id == showEmoticonId"
+          :key="item.emoticon_id"
+          class="emoji-box"
+        >
+          <div
+            v-if="item.emoticon_id == 0"
+            class="emoji-item custom-emoji"
+            @click="$refs.fileCustomEmoji.click()"
+          >
+            <i class="el-icon-picture" />
+            <span>自定义</span>
+          </div>
+          <div
+            v-for="subitem in item.list"
+            :key="subitem.src"
+            class="emoji-item"
+            @click="clickImageEmoticon(subitem)"
+          >
+            <el-image :src="subitem.src" fit="cover" />
+          </div>
+          <div class="clear"></div>
+        </div>
+      </el-main>
+      <!-- <el-footer height="40px" class="no-padding footer">
+        <div class="toolbar-items">
+          <div
+            v-show="emojiItem.length > 13"
+            class="toolbar-item prev-page"
+            @click="turnPage(1)"
+          >
+            <i class="el-icon-caret-left" />
+          </div>
+          <div
+            v-for="(item, index) in showItems"
+            :key="index"
+            class="toolbar-item"
+            @click="triggerItem(item)"
+          >
+            <img :src="item.url" />
+            <p class="title">{{ item.name }}</p>
+          </div>
+          <div
+            v-show="emojiItem.length > 13 && showItems.length == 13"
+            class="toolbar-item next-page"
+            @click="turnPage(2)"
+          >
+            <i class="el-icon-caret-right" />
+          </div>
+        </div>
+      </el-footer> -->
+    </el-container>
+
+    <MeEditorSystemEmoticon
+      v-if="systemEmojiBox"
+      @close="systemEmojiBox = false"
+    />
+  </div>
+</template>
+
+<script>
+import MeEditorSystemEmoticon from "@/components/editor/MeEditorSystemEmoticon";
+import { emojiList as emoji } from "@/utils/emojis";
+import { mapState } from "vuex";
+
+export default {
+  name: "MeEditorEmoticon",
+  components: {
+    MeEditorSystemEmoticon,
+  },
+  computed: {
+    ...mapState({
+      emojiItem: (state) => state.emoticon.items,
+    }),
+    showItems() {
+      let start = (this.page - 1) * this.pageSize;
+      let end = start + this.pageSize;
+      return this.emojiItem.slice(start, end);
+    },
+    pageTotal() {
+      return this.emojiItem.length / this.pageSize;
+    },
+  },
+  data() {
+    return {
+      emoji,
+
+      // 系统表情包套弹出窗
+      systemEmojiBox: false,
+
+      showEmoticonId: -1,
+      showTitle: "QQ表情/符号表情",
+
+      page: 1,
+      pageSize: 13,
+    };
+  },
+  created() {
+    this.$store.commit("LOAD_USER_EMOTICON");
+  },
+  methods: {
+    // 表情包导航翻页
+    turnPage(type) {
+      if (type == 1) {
+        if (this.page == 1) return false;
+        this.page--;
+      } else {
+        if (this.page >= this.pageTotal) return false;
+        this.page++;
+      }
+    },
+
+    // 点击表情包导航
+    triggerItem(item) {
+      this.showEmoticonId = item.emoticon_id;
+      this.showTitle = item.name;
+    },
+
+    // 选中表情
+    clickEmoticon(emoji) {
+      this.callback({
+        type: 1,
+        value: emoji,
+      });
+    },
+
+    // 发送图片表情包
+    clickImageEmoticon(item) {
+      this.callback({
+        type: 2,
+        value: item.media_id,
+      });
+    },
+
+    callback(data) {
+      this.$emit("selected", data);
+    },
+
+    // 自定义上传表情
+    customUploadEmoji(e) {
+      if (e.target.files.length == 0) {
+        return false;
+      }
+
+      this.$store.commit("UPLOAD_USER_EMOTICON", {
+        file: e.target.files[0],
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  height: 300px;
+  max-width: 500px;
+  background-color: white;
+
+  .header {
+    line-height: 30px;
+    font-size: 13px;
+    font-weight: 400;
+    padding-left: 5px;
+    user-select: none;
+    position: relative;
+    border-bottom: 1px solid #fbf5f5;
+
+    .addbtn {
+      position: absolute;
+      right: 10px;
+      top: 1px;
+      color: #409eff;
+      cursor: pointer;
+    }
+  }
+
+  .footer {
+    background-color: #eff1f7;
+
+    .toolbar-items {
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .toolbar-item {
+        height: 30px;
+        width: 30px;
+        margin: 0 2px;
+        background-color: #fff;
+        display: inline-block;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+
+        img {
+          width: 20px;
+          height: 20px;
+        }
+
+        .title {
+          display: none;
+          position: absolute;
+          top: -25px;
+          left: 0px;
+          height: 20px;
+          line-height: 20px;
+          background: #353434;
+          color: white;
+          min-width: 30px;
+          font-size: 10px;
+          padding-left: 5px;
+          padding-right: 5px;
+          border-radius: 2px;
+          white-space: pre;
+          text-align: center;
+        }
+
+        &:hover .title {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+.container .footer .toolbar-items .prev-page:active i,
+.container .footer .toolbar-items .next-page:active i {
+  transform: scale(1.2);
+}
+
+.emoji-box,
+.emoticon {
+  width: 100%;
+}
+
+.emoticon {
+  .title {
+    width: 50%;
+    height: 25px;
+    line-height: 25px;
+    color: #ccc;
+    font-weight: 400;
+    padding-left: 3px;
+    font-size: 12px;
+  }
+
+  .emoticon-item {
+    width: 30px;
+    height: 30px;
+    margin: 2px;
+    float: left;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      transform: scale(1.3);
+    }
+  }
+
+  .symbol {
+    font-size: 22px;
+  }
+}
+
+.emoji-box {
+  .emoji-item {
+    width: 67px;
+    height: 67px;
+    margin: 2px;
+    background-color: #eff1f7;
+    float: left;
+    cursor: pointer;
+    transition: ease-in 0.3s;
+  }
+
+  .custom-emoji {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-size: 10px;
+
+    i {
+      font-size: 30px;
+      margin-bottom: 3px;
+    }
+
+    &:active {
+      color: #409eff;
+    }
+  }
+}
+
+/deep/ .el-image {
+  width: 100%;
+  height: 100%;
+  transition: ease-in 0.3s;
+}
+
+.emoji-box .emoji-item:hover .el-image,
+.emoji-box .emoji-item:hover {
+  border-radius: 10px;
+}
+</style>

im/src/components/editor/MeEditorFileManage.vue

@@ -0,0 +1,440 @@
+<template>
+  <el-container
+    class="container animated bounceInUp"
+    v-outside="closeBox"
+    v-if="show"
+  >
+    <el-header class="no-padding header" height="50px">
+      <p>
+        上传管理 <span v-show="total">({{ successNum }}/{{ total }})</span>
+      </p>
+      <i class="close-btn el-icon-close" @click="closeBox" />
+    </el-header>
+
+    <el-main class="no-padding mian lum-scrollbar">
+      <div class="empty-data" v-show="total == 0">
+        <SvgNotData />
+        <p>暂无上传文件</p>
+      </div>
+
+      <div
+        v-for="file in items"
+        v-show="!file.isDelete"
+        :key="file.hashName"
+        class="file-item"
+      >
+        <div class="file-header">
+          <div class="type-icon">{{ file.ext }}</div>
+          <el-tooltip :content="file.filename" placement="top-start">
+            <div class="filename">{{ file.filename }}</div>
+          </el-tooltip>
+
+          <div class="status">
+            <span v-if="file.status == 0">等待上传</span>
+            <span v-else-if="file.status == 1" style="color: #66b1ff">
+              正在上传...
+            </span>
+            <span v-else-if="file.status == 2" style="color: #67c23a">
+              已完成
+            </span>
+            <span v-else style="color: red">网络异常</span>
+          </div>
+        </div>
+        <div class="file-mian">
+          <div class="progress">
+            <el-progress
+              type="dashboard"
+              :percentage="file.progress"
+              :width="50"
+              :color="colors"
+            />
+            <span class="name">上传进度</span>
+          </div>
+          <div class="detail">
+            <p>
+              文件类型：<span>{{ file.filetype }}</span>
+            </p>
+            <p>
+              文件大小：<span>{{ file.filesize }}</span>
+            </p>
+            <p>
+              上传时间：<span>{{ file.datetime }}</span>
+            </p>
+          </div>
+        </div>
+        <div v-show="file.status == 2 || file.status == 3" class="file-means">
+          <div class="btns" @click="removeFile(file.hashName)">删除</div>
+          <div
+            v-show="file.status == 3"
+            class="btns"
+            @click="triggerUpload(file.hashName)"
+          >
+            继续上传
+          </div>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import Vue from 'vue'
+import { SvgNotData } from '@/core/icons'
+import { Progress } from 'element-ui'
+Vue.use(Progress)
+
+import { ServeFindFileSplitInfo, ServeFileSubareaUpload } from '@/api/upload'
+import { formatSize, getFileExt, parseTime } from '@/utils/functions'
+import { ServeSendTalkFile } from '@/api/chat'
+
+export default {
+  name: 'MeEditorFileManage',
+  model: {
+    prop: 'show',
+    event: 'close',
+  },
+  props: {
+    show: Boolean,
+  },
+  components: {
+    SvgNotData,
+  },
+  data() {
+    return {
+      colors: [
+        {
+          color: '#f56c6c',
+          percentage: 20,
+        },
+        {
+          color: '#e6a23c',
+          percentage: 40,
+        },
+        {
+          color: '#5cb87a',
+          percentage: 60,
+        },
+        {
+          color: '#1989fa',
+          percentage: 80,
+        },
+        {
+          color: '#11ce65',
+          percentage: 100,
+        },
+      ],
+
+      items: [],
+    }
+  },
+  computed: {
+    total() {
+      return this.items.filter(item => {
+        return item.isDelete === false
+      }).length
+    },
+    successNum() {
+      return this.items.filter(item => {
+        return item.isDelete === false && item.status == 2
+      }).length
+    },
+  },
+  methods: {
+    closeBox() {
+      this.$emit('close', false)
+    },
+
+    upload(file) {
+      ServeFindFileSplitInfo({
+        file_name: file.name,
+        file_size: file.size,
+      }).then(res => {
+        if (res.code == 200) {
+          const { hash_name, split_size } = res.data
+
+          this.items.unshift({
+            hashName: hash_name,
+            originalFile: file,
+            filename: file.name,
+            status: 0, // 文件上传状态 0:等待上传 1:上传中 2:上传完成 3:网络异常
+            progress: 0,
+            filesize: formatSize(file.size),
+            filetype: file.type || '未知',
+            datetime: parseTime(new Date(), '{m}-{d} {h}:{i}'),
+            ext: getFileExt(file.name),
+            forms: this.fileSlice(file, hash_name, split_size),
+            successNum: 0,
+            isDelete: false,
+          })
+
+          this.triggerUpload(hash_name)
+        }
+      })
+    },
+
+    // 处理拆分上传文件
+    fileSlice(file, hash, eachSize) {
+      const ext = getFileExt(file.name)
+      const splitNum = Math.ceil(file.size / eachSize) // 分片总数
+      const forms = []
+
+      // 处理每个分片的上传操作
+      for (let i = 0; i < splitNum; i++) {
+        let start = i * eachSize
+        let end = Math.min(file.size, start + eachSize)
+
+        // 构建表单
+        const form = new FormData()
+        form.append('file', file.slice(start, end))
+        form.append('name', file.name)
+        form.append('hash', hash)
+        form.append('ext', ext)
+        form.append('size', file.size)
+        form.append('split_index', i)
+        form.append('split_num', splitNum)
+        forms.push(form)
+      }
+
+      return forms
+    },
+
+    // 触发上传文件
+    triggerUpload(hashName) {
+      let $index = this.getFileIndex(hashName)
+      if ($index < 0 || this.items[$index].isDelte) {
+        return
+      }
+
+      let i = this.items[$index].successNum
+      let form = this.items[$index].forms[i]
+      let length = this.items[$index].forms.length
+      this.items[$index].status = 1
+      ServeFileSubareaUpload(form)
+        .then(res => {
+          if (res.code == 200) {
+            $index = this.getFileIndex(hashName)
+            this.items[$index].successNum++
+            this.items[$index].progress = Math.floor(
+              (this.items[$index].successNum / length) * 100
+            )
+            if (this.items[$index].successNum == length) {
+              this.items[$index].status = 2
+              if (res.data.is_file_merge) {
+                ServeSendTalkFile({
+                  hash_name: res.data.hash,
+                  receiver_id: this.$store.state.dialogue.receiver_id,
+                  talk_type: this.$store.state.dialogue.talk_type,
+                })
+              }
+            } else {
+              this.triggerUpload(hashName)
+            }
+          } else {
+            this.items[$index].status = 3
+          }
+        })
+        .catch(() => {
+          $index = this.getFileIndex(hashName)
+          this.items[$index].status = 3
+        })
+    },
+
+    // 获取分片文件数组索引
+    getFileIndex(hashName) {
+      return this.items.findIndex(item => {
+        return item.hashName === hashName
+      })
+    },
+
+    removeFile(hashName) {
+      let index = this.getFileIndex(hashName)
+      this.items[index].isDelete = true
+    },
+
+    clear() {
+      this.items = []
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.container {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  width: 400px;
+  height: 600px;
+  background-color: white;
+  box-shadow: 0 0 5px #eae5e5;
+  border: 1px solid #eae5e5;
+  overflow: hidden;
+  border-radius: 3px 3px 0 0;
+
+  .header {
+    height: 50px;
+    line-height: 50px;
+    position: relative;
+    text-indent: 20px;
+    border-bottom: 1px solid #f5eeee;
+
+    i {
+      position: absolute;
+      right: 20px;
+      top: 15px;
+      font-size: 20px;
+      cursor: pointer;
+    }
+  }
+
+  .mian {
+    .empty-data {
+      width: 100%;
+      height: 80px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      margin-top: 50%;
+
+      svg {
+        font-size: 70px;
+      }
+
+      p {
+        margin-top: 30px;
+        color: #cccccc;
+        font-size: 10px;
+      }
+    }
+  }
+}
+
+.file-item {
+  width: 95%;
+  min-height: 100px;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+  margin: 15px auto;
+  box-shadow: 0 0 5px #eae5e5;
+  overflow: hidden;
+
+  .file-header {
+    height: 45px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    border-bottom: 1px solid #f7f4f4;
+
+    .type-icon {
+      height: 30px;
+      width: 30px;
+      background-color: #66b1ff;
+      border-radius: 50%;
+      margin-left: 5px;
+      font-size: 10px;
+      font-weight: 200;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      color: white;
+    }
+
+    .filename {
+      margin-left: 10px;
+      font-size: 14px;
+      width: 65%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .status {
+      position: absolute;
+      right: 14px;
+      top: 12px;
+      font-size: 13px;
+      color: #6b6868;
+      font-weight: 200;
+    }
+  }
+
+  .file-mian {
+    padding: 8px;
+    display: flex;
+    flex-direction: row;
+
+    .progress {
+      width: 80px;
+      height: 80px;
+      flex-shrink: 0;
+      background: #f9f6f6;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      cursor: pointer;
+
+      .name {
+        font-size: 12px;
+        color: #ada8a8;
+        font-weight: 300;
+      }
+    }
+
+    .detail {
+      flex: auto;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      padding-left: 20px;
+      justify-content: center;
+      align-items: flex-start;
+      font-size: 13px;
+
+      p {
+        margin: 3px;
+        color: #ada8a8;
+
+        span {
+          color: #595a5a;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .file-means {
+    width: 96.5%;
+    height: 35px;
+    border-top: 1px dashed rgb(234, 227, 227);
+    margin: 3px auto;
+    padding-top: 5px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    .btns {
+      width: 80px;
+      height: 25px;
+      border: 1px solid #e6e1e1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 3px;
+      border-radius: 15px;
+      font-size: 12px;
+      color: #635f5f;
+      cursor: pointer;
+
+      &:active {
+        box-shadow: 0 0 5px #eae5e5;
+        font-size: 13px;
+      }
+    }
+  }
+}
+</style>

im/src/components/editor/MeEditorImageView.vue

@@ -0,0 +1,133 @@
+<template>
+  <div v-if="show" class="lum-dialog-mask animated fadeIn">
+    <el-container class="lum-dialog-box" v-outside="closeBox">
+      <el-header class="no-padding header" height="50px">
+        <p>发送图片</p>
+        <p class="tools">
+          <i class="el-icon-close" @click="closeBox" />
+        </p>
+      </el-header>
+
+      <el-main class="no-padding mian">
+        <img v-show="src" :src="src" />
+        <div v-show="src">
+          <span class="filename">{{ fileName }}</span>
+          <br />
+          <span class="size">{{ fileSize }} KB</span>
+        </div>
+      </el-main>
+
+      <el-footer class="footer" height="50px">
+        <el-button
+          class="btn"
+          type="primary"
+          size="medium"
+          :loading="loading"
+          @click="uploadImage"
+          >立即发送
+        </el-button>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+<script>
+export default {
+  name: 'MeEditorImageView',
+  model: {
+    prop: 'show',
+    event: 'close',
+  },
+  props: {
+    show: Boolean,
+    file: File,
+  },
+  watch: {
+    file(file) {
+      this.loadFile(file)
+    },
+  },
+  data() {
+    return {
+      src: '',
+      fileSize: '',
+      fileName: '',
+      loading: false,
+    }
+  },
+  methods: {
+    closeBox() {
+      if (this.loading) {
+        return false
+      }
+
+      this.$emit('close', false)
+    },
+    loadFile(file) {
+      let reader = new FileReader()
+      this.fileSize = Math.ceil(file.size / 1024)
+      this.fileName = file.name
+      reader.onload = () => {
+        this.src = reader.result
+      }
+
+      reader.readAsDataURL(file)
+    },
+
+    // 确认按钮事件
+    uploadImage() {
+      this.loading = true
+      this.$emit('confirm')
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.lum-dialog-box {
+  width: 500px;
+  max-width: 500px;
+  height: 450px;
+
+  .mian {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    img {
+      max-width: 80%;
+      max-height: 80%;
+      border-radius: 3px;
+      cursor: pointer;
+      box-shadow: 0 0 8px #e0dbdb;
+    }
+
+    div {
+      margin-top: 10px;
+      text-align: center;
+      overflow: hidden;
+      max-width: 80%;
+
+      .filename {
+        font-weight: 400;
+      }
+
+      .size {
+        color: rgb(148, 140, 140);
+        font-size: 12px;
+      }
+    }
+  }
+
+  .footer {
+    height: 50px;
+    background: rgba(247, 245, 245, 0.66);
+    text-align: center;
+    line-height: 50px;
+
+    .btn {
+      width: 150px;
+      border-radius: 2px;
+    }
+  }
+}
+</style>

im/src/components/editor/MeEditorRecorder.vue

@@ -0,0 +1,517 @@
+<template>
+  <div class="lum-dialog-mask animated fadeIn">
+    <el-container class="lum-dialog-box">
+      <el-header class="no-padding header no-select" height="50px">
+        <p>语音消息</p>
+        <p class="tools"><i class="el-icon-close" @click="closeBox" /></p>
+      </el-header>
+
+      <el-main class="no-padding mian">
+        <div class="music">
+          <span class="line line1" :class="{ 'line-ani': animation }"></span>
+          <span class="line line2" :class="{ 'line-ani': animation }"></span>
+          <span class="line line3" :class="{ 'line-ani': animation }"></span>
+          <span class="line line4" :class="{ 'line-ani': animation }"></span>
+          <span class="line line5" :class="{ 'line-ani': animation }"></span>
+        </div>
+        <div style="margin-top: 35px; color: #676262; font-weight: 300">
+          <template v-if="recorderStatus == 0">
+            <p style="font-size: 13px; margin-top: 5px">
+              <span>语音消息，让聊天更简单方便 ...</span>
+            </p>
+          </template>
+          <template
+            v-else-if="
+              recorderStatus == 1 || recorderStatus == 2 || recorderStatus == 3
+            "
+          >
+            <p>{{ datetime }}</p>
+            <p style="font-size: 13px; margin-top: 5px">
+              <span v-if="recorderStatus == 1">正在录音</span>
+              <span v-else-if="recorderStatus == 2">已暂停录音</span>
+              <span v-else-if="recorderStatus == 3">录音时长</span>
+            </p>
+          </template>
+          <template
+            v-else-if="
+              recorderStatus == 4 || recorderStatus == 5 || recorderStatus == 6
+            "
+          >
+            <p>{{ formatPlayTime }}</p>
+            <p style="font-size: 13px; margin-top: 5px">
+              <span v-if="recorderStatus == 4">正在播放</span>
+              <span v-else-if="recorderStatus == 5">已暂停播放</span>
+              <span v-else-if="recorderStatus == 6">播放已结束</span>
+            </p>
+          </template>
+        </div>
+      </el-main>
+
+      <el-footer class="footer" height="50px">
+        <!-- 0:未开始录音 1:正在录音 2:暂停录音 3:结束录音 4:播放录音 5:停止播放 -->
+        <el-button
+          v-show="recorderStatus == 0"
+          type="primary"
+          size="mini"
+          round
+          icon="el-icon-microphone"
+          @click="startRecorder"
+          >开始录音
+        </el-button>
+        <el-button
+          v-show="recorderStatus == 1"
+          type="primary"
+          size="mini"
+          round
+          icon="el-icon-video-pause"
+          @click="pauseRecorder"
+          >暂停录音
+        </el-button>
+        <el-button
+          v-show="recorderStatus == 2"
+          type="primary"
+          size="mini"
+          round
+          icon="el-icon-microphone"
+          @click="resumeRecorder"
+          >继续录音
+        </el-button>
+        <el-button
+          v-show="recorderStatus == 2"
+          type="primary"
+          size="mini"
+          round
+          icon="el-icon-microphone"
+          @click="stopRecorder"
+          >结束录音
+        </el-button>
+        <el-button
+          v-show="recorderStatus == 3 || recorderStatus == 6"
+          type="primary"
+          size="mini"
+          round
+          icon="el-icon-video-play"
+          @click="playRecorder"
+          >播放录音
+        </el-button>
+
+        <el-button
+          v-show="
+            recorderStatus == 3 || recorderStatus == 5 || recorderStatus == 6
+          "
+          type="primary"
+          size="mini"
+          round
+          icon="el-icon-video-play"
+          @click="startRecorder"
+          >重新录音
+        </el-button>
+
+        <el-button
+          v-show="recorderStatus == 4"
+          type="primary"
+          size="mini"
+          round
+          icon="el-icon-video-pause"
+          @click="pausePlayRecorder"
+          >暂停播放
+        </el-button>
+        <el-button
+          v-show="recorderStatus == 5"
+          type="primary"
+          size="mini"
+          round
+          icon="el-icon-video-play"
+          @click="resumePlayRecorder"
+          >继续播放
+        </el-button>
+
+        <el-button
+          v-show="
+            recorderStatus == 3 || recorderStatus == 5 || recorderStatus == 6
+          "
+          type="primary"
+          size="mini"
+          round
+          @click="submit"
+          >立即发送
+        </el-button>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+<script>
+import Recorder from 'js-audio-recorder'
+
+export default {
+  name: 'MeEditorRecorder',
+  data() {
+    return {
+      // 录音实例
+      recorder: null,
+
+      // 录音时长
+      duration: 0,
+
+      // 播放时长
+      playTime: 0,
+
+      animation: false,
+
+      // 当前状态
+      recorderStatus: 0, //0:未开始录音 1:正在录音 2:暂停录音 3:结束录音 4:播放录音 5:停止播放 6:播放结束
+
+      playTimeout: null,
+    }
+  },
+  computed: {
+    datetime() {
+      let hour = parseInt((this.duration / 60 / 60) % 24) //小时
+      let minute = parseInt((this.duration / 60) % 60) //分钟
+      let seconds = parseInt(this.duration % 60) //秒
+
+      if (hour < 10) hour = `0${hour}`
+      if (minute < 10) minute = `0${minute}`
+      if (seconds < 10) seconds = `0${seconds}`
+
+      return `${hour}:${minute}:${seconds}`
+    },
+    formatPlayTime() {
+      let hour = parseInt((this.playTime / 60 / 60) % 24) //小时
+      let minute = parseInt((this.playTime / 60) % 60) //分钟
+      let seconds = parseInt(this.playTime % 60) //秒
+
+      if (hour < 10) hour = `0${hour}`
+      if (minute < 10) minute = `0${minute}`
+      if (seconds < 10) seconds = `0${seconds}`
+
+      return `${hour}:${minute}:${seconds}`
+    },
+  },
+  destroyed() {
+    if (this.recorder) {
+      this.destroyRecorder()
+    }
+  },
+  methods: {
+    closeBox() {
+      if (this.recorder == null) {
+        this.$emit('close', false)
+        return
+      }
+
+      if (this.recorderStatus == 1) {
+        this.stopRecorder()
+      } else if (this.recorderStatus == 4) {
+        this.pausePlayRecorder()
+      }
+
+      // 销毁录音后关闭窗口
+      this.destroyRecorder(() => {
+        this.$emit('close', false)
+      })
+    },
+
+    // 开始录音
+    startRecorder() {
+      let _this = this
+      // http://recorder.api.zhuyuntao.cn/Recorder/event.html
+      // https://blog.csdn.net/qq_41619796/article/details/107865602
+      this.recorder = new Recorder()
+      this.recorder.onprocess = duration => {
+        duration = parseInt(duration)
+        _this.duration = duration
+      }
+
+      this.recorder.start().then(
+        () => {
+          this.recorderStatus = 1
+          this.animation = true
+        },
+        error => {
+          console.log(`${error.name} : ${error.message}`)
+        }
+      )
+    },
+    // 暂停录音
+    pauseRecorder() {
+      this.recorder.pause()
+      this.recorderStatus = 2
+      this.animation = false
+    },
+    // 继续录音
+    resumeRecorder() {
+      this.recorderStatus = 1
+      this.recorder.resume()
+      this.animation = true
+    },
+    // 结束录音
+    stopRecorder() {
+      this.recorderStatus = 3
+      this.recorder.stop()
+      this.animation = false
+    },
+    // 录音播放
+    playRecorder() {
+      this.recorderStatus = 4
+      this.recorder.play()
+      this.playTimeouts()
+      this.animation = true
+    },
+    // 暂停录音播放
+    pausePlayRecorder() {
+      this.recorderStatus = 5
+      this.recorder.pausePlay()
+      clearInterval(this.playTimeout)
+      this.animation = false
+    },
+    // 恢复录音播放
+    resumePlayRecorder() {
+      this.recorderStatus = 4
+      this.recorder.resumePlay()
+      this.playTimeouts()
+      this.animation = true
+    },
+    // 销毁录音
+    destroyRecorder(callBack) {
+      this.recorder.destroy().then(() => {
+        this.recorder = null
+        if (callBack) {
+          callBack()
+        }
+      })
+    },
+    // 获取录音文件大小（单位：字节）
+    recorderSize() {
+      return this.recorder.fileSize
+    },
+
+    playTimeouts() {
+      this.playTimeout = setInterval(() => {
+        let time = parseInt(this.recorder.getPlayTime())
+        this.playTime = time
+        if (time == this.duration) {
+          clearInterval(this.playTimeout)
+          this.animation = false
+          this.recorderStatus = 6
+        }
+      }, 100)
+    },
+
+    submit() {
+      alert('功能研发中,敬请期待...')
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.lum-dialog-box {
+  width: 500px;
+  max-width: 500px;
+  height: 450px;
+
+  .mian {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .footer {
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+    border-top: 1px solid #f7f3f3;
+  }
+}
+
+.music {
+  position: relative;
+  width: 180px;
+  height: 160px;
+  border: 8px solid #bebebe;
+  border-bottom: 0px;
+  border-top-left-radius: 110px;
+  border-top-right-radius: 110px;
+}
+
+.music:before,
+.music:after {
+  content: '';
+  position: absolute;
+  bottom: -20px;
+  width: 40px;
+  height: 82px;
+  background-color: #bebebe;
+  border-radius: 15px;
+}
+
+.music:before {
+  right: -25px;
+}
+
+.music:after {
+  left: -25px;
+}
+
+.line {
+  position: absolute;
+  width: 6px;
+  min-height: 30px;
+  transition: 0.5s;
+
+  vertical-align: middle;
+  bottom: 0 !important;
+  box-shadow: inset 0px 0px 16px -2px rgba(0, 0, 0, 0.15);
+}
+
+.line-ani {
+  animation: equalize 4s 0s infinite;
+  animation-timing-function: linear;
+}
+
+.line1 {
+  left: 30%;
+  bottom: 0px;
+  animation-delay: -1.9s;
+  background-color: #ff5e50;
+}
+
+.line2 {
+  left: 40%;
+  height: 60px;
+  bottom: -15px;
+  animation-delay: -2.9s;
+  background-color: #a64de6;
+}
+
+.line3 {
+  left: 50%;
+  height: 30px;
+  bottom: -1.5px;
+  animation-delay: -3.9s;
+  background-color: #5968dc;
+}
+
+.line4 {
+  left: 60%;
+  height: 65px;
+  bottom: -16px;
+  animation-delay: -4.9s;
+  background-color: #27c8f8;
+}
+
+.line5 {
+  left: 70%;
+  height: 60px;
+  bottom: -12px;
+  animation-delay: -5.9s;
+  background-color: #cc60b5;
+}
+
+@keyframes equalize {
+  0% {
+    height: 48px;
+  }
+
+  4% {
+    height: 42px;
+  }
+
+  8% {
+    height: 40px;
+  }
+
+  12% {
+    height: 30px;
+  }
+
+  16% {
+    height: 20px;
+  }
+
+  20% {
+    height: 30px;
+  }
+
+  24% {
+    height: 40px;
+  }
+
+  28% {
+    height: 10px;
+  }
+
+  32% {
+    height: 40px;
+  }
+
+  36% {
+    height: 48px;
+  }
+
+  40% {
+    height: 20px;
+  }
+
+  44% {
+    height: 40px;
+  }
+
+  48% {
+    height: 48px;
+  }
+
+  52% {
+    height: 30px;
+  }
+
+  56% {
+    height: 10px;
+  }
+
+  60% {
+    height: 30px;
+  }
+
+  64% {
+    height: 48px;
+  }
+
+  68% {
+    height: 30px;
+  }
+
+  72% {
+    height: 48px;
+  }
+
+  76% {
+    height: 20px;
+  }
+
+  80% {
+    height: 48px;
+  }
+
+  84% {
+    height: 38px;
+  }
+
+  88% {
+    height: 48px;
+  }
+
+  92% {
+    height: 20px;
+  }
+
+  96% {
+    height: 48px;
+  }
+
+  100% {
+    height: 48px;
+  }
+}
+</style>

im/src/components/editor/MeEditorSystemEmoticon.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="lum-dialog-mask">
+    <el-container class="lum-dialog-box" v-outside="closeBox">
+      <el-header class="no-padding header" height="50px">
+        <p>系统表情</p>
+        <p class="tools">
+          <i class="el-icon-close" @click="closeBox" />
+        </p>
+      </el-header>
+
+      <el-main class="no-padding mian lum-scrollbar">
+        <ul>
+          <li v-for="(item, i) in items" :key="item.id" class="no-select">
+            <div class="pkg-avatar">
+              <el-image :src="item.icon" fit="cover" :lazy="true" />
+            </div>
+            <div class="pkg-info" v-text="item.name"></div>
+            <div class="pkg-status">
+              <button
+                :class="{
+                  'add-emoji': item.status == 0,
+                  'remove-emoji': item.status != 0,
+                }"
+                @click="setEmoticon(i, item, item.status == 0 ? 1 : 2)"
+              >
+                {{ item.status == 0 ? '添加' : '移除' }}
+              </button>
+            </div>
+          </li>
+        </ul>
+      </el-main>
+
+      <el-footer class="footer" height="50px">
+        <el-button type="primary" size="medium" class="btn" @click="closeBox">
+          关闭窗口
+        </el-button>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import { ServeFindSysEmoticon, ServeSetUserEmoticon } from '@/api/emoticon'
+
+export default {
+  name: 'MeEditorSystemEmoticon',
+  data() {
+    return {
+      items: [],
+    }
+  },
+  created() {
+    this.loadSysEmoticon()
+  },
+  methods: {
+    closeBox() {
+      this.$emit('close')
+    },
+
+    // 获取系统表情包列表
+    loadSysEmoticon() {
+      ServeFindSysEmoticon().then(res => {
+        if (res.code == 200) {
+          this.items = res.data
+        }
+      })
+    },
+
+    setEmoticon(index, item, type) {
+      ServeSetUserEmoticon({
+        emoticon_id: item.id,
+        type: type,
+      }).then(res => {
+        if (res.code == 200) {
+          if (type == 1) {
+            this.items[index].status = 1
+            this.$store.commit('APPEND_SYS_EMOTICON', res.data)
+          } else {
+            this.items[index].status = 0
+            this.$store.commit('REMOVE_SYS_EMOTICON', {
+              emoticon_id: item.id,
+            })
+          }
+        }
+      })
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.lum-dialog-box {
+  width: 350px;
+  max-width: 350px;
+  height: 500px;
+
+  .mian {
+    height: 480px;
+    overflow-y: auto;
+
+    li {
+      display: flex;
+      cursor: pointer;
+      height: 68px;
+      align-items: center;
+      border-bottom: 3px solid #fbf2fb;
+      padding-left: 5px;
+
+      .pkg-avatar {
+        flex-shrink: 0;
+
+        .el-image {
+          width: 50px;
+          height: 50px;
+          border-radius: 3px;
+        }
+      }
+
+      .pkg-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: 14px;
+        margin-right: 14px;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        width: 200px;
+        color: #615d5d;
+        font-size: 13px;
+      }
+
+      .pkg-status {
+        flex-shrink: 0;
+
+        button {
+          font-size: 12px;
+          text-align: center;
+          line-height: 28px;
+          border-radius: 20px;
+          width: 50px;
+          cursor: pointer;
+          color: white;
+        }
+
+        .add-emoji {
+          background-color: #38adff;
+        }
+
+        .remove-emoji {
+          background-color: #ff5722;
+        }
+      }
+    }
+  }
+
+  .footer {
+    height: 50px;
+    background: rgba(247, 245, 245, 0.66);
+    text-align: center;
+    line-height: 50px;
+
+    .btn {
+      width: 150px;
+      border-radius: 2px;
+    }
+  }
+}
+</style>

im/src/components/editor/MeEditorVote.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="lum-dialog-mask animated fadeIn">
+    <el-container class="lum-dialog-box">
+      <el-header class="header no-select" height="60px">
+        <p>发起投票</p>
+        <p class="tools">
+          <i class="el-icon-close" @click="$emit('close')" />
+        </p>
+      </el-header>
+      <el-main class="main no-padding vote-from">
+        <div class="vote-title">投票方式</div>
+        <div>
+          <el-radio-group v-model="mode">
+            <el-radio :label="0">单选</el-radio>
+            <el-radio :label="1">多选</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="vote-title">投票主题</div>
+        <div>
+          <el-input
+            size="medium"
+            clear="vote-input"
+            v-model.trim="title"
+            placeholder="请输入投票主题，最多50字"
+            :maxlength="50"
+          />
+        </div>
+
+        <div class="vote-title">投票选项</div>
+        <div>
+          <div class="vote-options" v-for="(option, index) in options">
+            <div class="lbox">
+              <el-input
+                size="medium"
+                clear="vote-input"
+                v-model.trim="option.value"
+                placeholder="请输入选项内容"
+                :maxlength="120"
+              >
+                <span
+                  slot="prefix"
+                  style="margin-left:7px;"
+                  v-text="String.fromCharCode(65 + index)"
+                />
+              </el-input>
+            </div>
+            <div class="rbox">
+              <i class="el-icon-close" @click="removeOption(index)"></i>
+            </div>
+          </div>
+
+          <h6 class="pointer add-option" @click="addOption">
+            <i class="el-icon-plus"></i> 添加选项
+          </h6>
+        </div>
+      </el-main>
+      <el-footer class="footer">
+        <el-button plain size="small">取消</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          :disabled="isCheck"
+          :loading="loading"
+          @click="submit"
+          >发起投票</el-button
+        >
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+<script>
+import { ServeSendVote } from '@/api/chat'
+
+export default {
+  name: 'MeEditorVote',
+  props: {
+    group_id: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      mode: 0,
+      title: '',
+      options: [
+        {
+          value: '',
+        },
+        {
+          value: '',
+        },
+        {
+          value: '',
+        },
+      ],
+    }
+  },
+  computed: {
+    isCheck() {
+      if (this.title == '') return true
+
+      return this.options.some(option => option.value == '')
+    },
+  },
+  methods: {
+    submit() {
+      let items = []
+      const { receiver_id } = this.$store.state.dialogue
+      this.options.forEach(option => {
+        items.push(option.value)
+      })
+
+      this.loading = true
+
+      ServeSendVote({
+        receiver_id,
+        mode: this.mode,
+        title: this.title,
+        options: items,
+      })
+        .then(res => {
+          if (res.code == 200) {
+            this.$emit('close')
+            this.$notify({
+              title: '友情提示',
+              message: '发起投票成功!',
+              type: 'success',
+            })
+          } else {
+            this.$notify({
+              title: '友情提示',
+              message: res.message,
+              type: 'warning',
+            })
+          }
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    addOption() {
+      if (this.options.length >= 6) {
+        return false
+      }
+
+      this.options.push({
+        value: '',
+      })
+    },
+    removeOption(index) {
+      if (this.options.length <= 2) {
+        return false
+      }
+
+      this.$delete(this.options, index)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.lum-dialog-box {
+  height: 600px;
+  max-width: 450px;
+
+  .vote-from {
+    box-sizing: border-box;
+    padding: 15px 25px;
+    overflow: hidden;
+
+    .vote-title {
+      margin: 20px 0 10px;
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    .vote-options {
+      display: flex;
+      min-height: 30px;
+      margin: 10px 0;
+
+      .lbox {
+        width: 100%;
+
+        /deep/.el-input__prefix {
+          height: 36px;
+          line-height: 36px;
+        }
+      }
+
+      .rbox {
+        flex-basis: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        i {
+          font-size: 18px;
+          cursor: pointer;
+          &:hover {
+            color: red;
+          }
+        }
+      }
+    }
+
+    .add-option {
+      margin-top: 5px;
+      font-weight: 400;
+      color: #3370ff;
+    }
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 32px;
+  }
+}
+
+/deep/.el-radio__input.is-checked + .el-radio__label {
+  color: #606266;
+}
+</style>

im/src/components/face-null.vue

@@ -0,0 +1,18 @@
+<template>
+    <img :src="'https://avatars.dicebear.com/api/initials/'+text+'.svg?fontSize=38'" alt=""/>
+</template>
+
+<script>
+    export default {
+        props:{
+            text:{
+                type:null,
+                default:''
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

im/src/components/face.vue

@@ -0,0 +1,18 @@
+<template>
+    <img :src="text" alt=""/>
+</template>
+
+<script>
+    export default {
+        props:{
+            text:{
+                type:null,
+                default:''
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

im/src/components/global/Empty.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="empty-content">
+    <div class="image">
+      <img :src="src" />
+    </div>
+    <div class="text" v-text="text" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Empty',
+  props: {
+    text: {
+      type: String,
+      default: '数据为空...',
+    },
+    src: {
+      type: String,
+      default: require('@/assets/image/no-oncall.6b776fcf.png'),
+    },
+  },
+  data() {
+    return {}
+  },
+  created() {},
+  methods: {},
+}
+</script>
+<style lang="less" scoped>
+.empty-content {
+  width: 100%;
+  height: 60%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+
+  .image {
+    width: 200px;
+    height: 200px;
+
+    img {
+      width: 100%;
+    }
+  }
+}
+</style>

im/src/components/global/Loading.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="loading-content">
+    <div class="ant-spin ant-spin-lg ant-spin-spinning">
+      <span class="ant-spin-dot ant-spin-dot-spin">
+        <i class="ant-spin-dot-item" />
+        <i class="ant-spin-dot-item" />
+        <i class="ant-spin-dot-item" />
+        <i class="ant-spin-dot-item" />
+      </span>
+    </div>
+    <p>{{ text }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Loading',
+  props: {
+    text: {
+      type: String,
+      default: '数据加载中 ...',
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.loading-content {
+  width: 100%;
+  height: 60%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  p {
+    margin-top: 10px;
+  }
+}
+
+/* ant-spin 加载动画 start */
+.ant-spin {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  -webkit-font-feature-settings: 'tnum';
+  font-feature-settings: 'tnum';
+  position: absolute;
+  display: none;
+  color: #1890ff;
+  text-align: center;
+  vertical-align: middle;
+  opacity: 0;
+  -webkit-transition: -webkit-transform 0.3s
+    cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
+    -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+
+.ant-spin-spinning {
+  position: static;
+  display: inline-block;
+  opacity: 1;
+}
+
+.ant-spin-nested-loading {
+  position: relative;
+}
+
+.ant-spin-nested-loading > div > .ant-spin {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 4;
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: 400px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -10px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  padding-top: 5px;
+  text-shadow: 0 1px 2px #fff;
+}
+
+.ant-spin-nested-loading > div > .ant-spin.ant-spin-show-text .ant-spin-dot {
+  margin-top: -20px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-dot {
+  margin: -7px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-text {
+  padding-top: 2px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-sm.ant-spin-show-text .ant-spin-dot {
+  margin-top: -17px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-dot {
+  margin: -16px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-text {
+  padding-top: 11px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin-lg.ant-spin-show-text .ant-spin-dot {
+  margin-top: -26px;
+}
+
+.ant-spin-container {
+  position: relative;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+
+.ant-spin-container::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  display: none \9;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  opacity: 0;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  content: '';
+  pointer-events: none;
+}
+
+.ant-spin-blur {
+  clear: both;
+  overflow: hidden;
+  opacity: 0.5;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+.ant-spin-blur::after {
+  opacity: 0.4;
+  pointer-events: auto;
+}
+
+.ant-spin-tip {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.ant-spin-dot {
+  position: relative;
+  display: inline-block;
+  font-size: 20px;
+  width: 1em;
+  height: 1em;
+}
+
+.ant-spin-dot-item {
+  position: absolute;
+  display: block;
+  width: 9px;
+  height: 9px;
+  background-color: #1890ff;
+  border-radius: 100%;
+  -webkit-transform: scale(0.75);
+  transform: scale(0.75);
+  -webkit-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+  opacity: 0.3;
+  -webkit-animation: antSpinMove 1s infinite linear alternate;
+  animation: antSpinMove 1s infinite linear alternate;
+}
+
+.ant-spin-dot-item:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+
+.ant-spin-dot-item:nth-child(2) {
+  top: 0;
+  right: 0;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.ant-spin-dot-item:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+
+.ant-spin-dot-item:nth-child(4) {
+  bottom: 0;
+  left: 0;
+  -webkit-animation-delay: 1.2s;
+  animation-delay: 1.2s;
+}
+
+.ant-spin-dot-spin {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  -webkit-animation: antRotate 1.2s infinite linear;
+  animation: antRotate 1.2s infinite linear;
+}
+
+.ant-spin-sm .ant-spin-dot {
+  font-size: 14px;
+}
+
+.ant-spin-sm .ant-spin-dot i {
+  width: 6px;
+  height: 6px;
+}
+
+.ant-spin-lg .ant-spin-dot {
+  font-size: 32px;
+}
+
+.ant-spin-lg .ant-spin-dot i {
+  width: 14px;
+  height: 14px;
+}
+
+.ant-spin.ant-spin-show-text .ant-spin-text {
+  display: block;
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .ant-spin-blur {
+    background: #fff;
+    opacity: 0.5;
+  }
+}
+
+@-webkit-keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+
+@keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+
+.ant-spin-rtl {
+  direction: rtl;
+}
+
+.ant-spin-rtl .ant-spin-dot-spin {
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  -webkit-animation-name: antRotateRtl;
+  animation-name: antRotateRtl;
+}
+
+@-webkit-keyframes antRotateRtl {
+  to {
+    -webkit-transform: rotate(-405deg);
+    transform: rotate(-405deg);
+  }
+}
+
+@keyframes antRotateRtl {
+  to {
+    -webkit-transform: rotate(-405deg);
+    transform: rotate(-405deg);
+  }
+}
+
+/* ant-spin 加载动画 end */
+</style>

im/src/components/layout/AbsModule.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="abs-module" v-show="isShow">
+      <div class="abs-box">
+        <i class="el-icon-circle-close" @click="close" />
+        <a href="https://www.aliyun.com/minisite/goods?userCode=kqyyppx2">
+          <img src="~@/assets/image/aliyun-abs.jpg" width="300" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      isShow: false,
+    }
+  },
+  created() {
+    if (this.getNum() <= 2) {
+      setTimeout(() => {
+        this.isShow = true
+      }, 1000 * 60 * 2)
+    }
+  },
+  methods: {
+    getNum() {
+      return parseInt(sessionStorage.getItem('ABS_BOX')) || 0
+    },
+    close() {
+      sessionStorage.setItem('ABS_BOX', this.getNum() + 1)
+      this.isShow = false
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.abs-module {
+  position: fixed;
+  width: 300px;
+  height: 163.63px;
+  right: 20px;
+  top: 20px;
+  border-radius: 5px;
+  z-index: 9999;
+  overflow: hidden;
+  transition: all 2s;
+  animation: absfade 1000ms infinite;
+
+  .abs-box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    i {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      color: white;
+      cursor: pointer;
+      font-size: 22px;
+    }
+  }
+}
+
+@keyframes absfade {
+  from {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.02);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+</style>

im/src/components/layout/AvatarCropper.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="lum-dialog-mask">
+    <el-container class="lum-dialog-box">
+      <el-header class="header" height="50px">
+        <p>选择头像</p>
+        <p class="tools">
+          <i class="el-icon-close" @click="$emit('close', 0)" />
+        </p>
+      </el-header>
+      <el-main class="main">
+        <el-container class="full-height">
+          <el-aside width="400px">
+            <div class="cropper-box">
+              <vue-cropper
+                ref="cropper"
+                mode="cover"
+                :img="option.img"
+                :output-size="option.size"
+                :output-type="option.outputType"
+                :info="true"
+                :full="option.full"
+                :fixed="fixed"
+                :fixed-number="fixedNumber"
+                :can-move="option.canMove"
+                :can-move-box="option.canMoveBox"
+                :fixed-box="option.fixedBox"
+                :original="option.original"
+                :auto-crop="option.autoCrop"
+                :auto-crop-width="option.autoCropWidth"
+                :auto-crop-height="option.autoCropHeight"
+                :center-box="option.centerBox"
+                :high="option.high"
+                @real-time="realTime"
+              />
+              <input
+                type="file"
+                id="uploads"
+                ref="fileInput"
+                accept="image/png, image/jpeg, image/jpg"
+                style="display: none"
+                @change="uploadImg($event, 1)"
+              />
+            </div>
+            <div class="tools tools-flex">
+              <el-button
+                size="small"
+                plain
+                icon="el-icon-upload"
+                @click="clickUpload"
+                >上传图片
+              </el-button>
+              <el-button
+                size="small"
+                plain
+                icon="el-icon-refresh"
+                @click="refreshCrop"
+                >刷新
+              </el-button>
+              <el-button
+                size="small"
+                plain
+                icon="el-icon-refresh-left"
+                @click="rotateLeft"
+                >左转
+              </el-button>
+              <el-button
+                size="small"
+                plain
+                icon="el-icon-refresh-right"
+                @click="rotateRight"
+                >右转
+              </el-button>
+            </div>
+          </el-aside>
+          <el-main class="no-padding">
+            <div class="cropper-box">
+              <div class="preview-img">
+                <img v-if="cusPreviewsImg" :src="cusPreviewsImg" />
+              </div>
+            </div>
+            <div class="tools">
+              <el-button type="primary" size="small" @click="uploadService">
+                保存图片
+              </el-button>
+            </div>
+          </el-main>
+        </el-container>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script>
+import { VueCropper } from 'vue-cropper'
+import { ServeUploadFileStream } from '@/api/upload'
+
+export default {
+  name: 'AvatarCropper',
+  components: {
+    VueCropper,
+  },
+  data() {
+    return {
+      cusPreviewsImg: '',
+      previews: {},
+      option: {
+        img: '',
+        size: 1,
+        full: false,
+        outputType: 'png',
+        canMove: true,
+        fixedBox: true,
+        original: false,
+        canMoveBox: true,
+        autoCrop: true,
+        // 只有自动截图开启 宽度高度才生效
+        autoCropWidth: 200,
+        autoCropHeight: 150,
+        centerBox: false,
+        high: true,
+      },
+      fixed: true,
+      fixedNumber: [1, 1],
+    }
+  },
+  methods: {
+    clickUpload() {
+      this.$refs.fileInput.click()
+    },
+    clearCrop() {
+      if (!this.cusPreviewsImg) return false
+      this.$refs.cropper.clearCrop()
+    },
+    refreshCrop() {
+      if (!this.cusPreviewsImg) return false
+      this.$refs.cropper.refresh()
+    },
+    rotateLeft() {
+      if (!this.cusPreviewsImg) return false
+      this.$refs.cropper.rotateLeft()
+    },
+    rotateRight() {
+      if (!this.cusPreviewsImg) return false
+      this.$refs.cropper.rotateRight()
+    },
+    // 实时预览函数
+    realTime() {
+      this.$refs.cropper.getCropData(img => {
+        this.cusPreviewsImg = img
+      })
+    },
+
+    // 上传回调事件
+    uploadImg(e, num) {
+      let file = e.target.files[0]
+      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
+        this.$message('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
+        return false
+      }
+
+      let reader = new FileReader()
+      reader.onload = e => {
+        let data
+        if (typeof e.target.result === 'object') {
+          // 把Array Buffer转化为blob 如果是base64不需要
+          data = window.URL.createObjectURL(new Blob([e.target.result]))
+        } else {
+          data = e.target.result
+        }
+        if (num === 1) {
+          this.option.img = data
+        } else if (num === 2) {
+          this.example2.img = data
+        }
+      }
+      // 转化为base64
+      // reader.readAsDataURL(file)
+      // 转化为blob
+      reader.readAsArrayBuffer(file)
+    },
+
+    // 上传图片到服务器
+    uploadService() {
+      if (this.cusPreviewsImg == '') return
+      ServeUploadFileStream({
+        fileStream: this.cusPreviewsImg,
+      })
+        .then(res => {
+          if (res.code == 200) {
+            this.$emit('close', 1, res.data.avatar)
+          } else {
+            this.$message('文件上传失败,请稍后再试...')
+          }
+        })
+        .catch(() => {
+          this.$message('文件上传失败,请稍后再试...')
+        })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.lum-dialog-box {
+  height: 550px;
+  max-width: 800px;
+
+  .main {
+    .cropper-box {
+      height: 400px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .preview-img {
+        width: 180px;
+        height: 180px;
+        border-radius: 50%;
+        overflow: hidden;
+        box-shadow: 0 0 4px #ccc;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .tools {
+      height: 40px;
+      margin-top: 20px;
+      text-align: center;
+
+      button {
+        border-radius: 1px;
+      }
+    }
+
+    .tools-flex {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
+</style>

im/src/components/layout/RewardModule.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div class="reward" v-show="isShow">
+      <div class="title">
+        <span>Donate</span>
+        <i class="el-icon-circle-close" @click="close" />
+      </div>
+      <div class="main">
+        <div class="pay-box">
+          <img
+            src="https://cdn.learnku.com/uploads/images/202101/30/46424/PPYHOUhCb4.jpg"
+          />
+          <p>支付宝</p>
+        </div>
+        <div class="pay-box">
+          <img
+            src="https://cdn.learnku.com/uploads/images/202101/30/46424/XLmCJjbvlQ.png"
+          />
+          <p>微信</p>
+        </div>
+      </div>
+      <div class="footer">
+        开源不易，如果你觉得项目对你有帮助，可以请作者喝杯咖啡☕️！鼓励下...
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      isShow: false,
+    }
+  },
+  created() {
+    if (this.getNum() <= 3) {
+      setTimeout(() => {
+        this.isShow = true
+      }, 1000 * 30)
+    }
+  },
+  methods: {
+    getNum() {
+      return parseInt(localStorage.getItem('REWARD_BOX')) || 0
+    },
+    close() {
+      localStorage.setItem('REWARD_BOX', this.getNum() + 1)
+      this.isShow = false
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.reward {
+  position: fixed;
+  width: 550px;
+  height: 400px;
+  right: 20px;
+  bottom: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 12px #ccc;
+  border: 1px solid rgb(228, 225, 225);
+  box-sizing: border-box;
+  overflow: hidden;
+  user-select: none;
+  z-index: 9999;
+  background: white;
+
+  .title {
+    height: 50px;
+    line-height: 50px;
+    padding-left: 20px;
+    width: 100%;
+    font-size: 16px;
+    background: #f9f7f7;
+    position: relative;
+    box-sizing: border-box;
+
+    i {
+      position: absolute;
+      right: 15px;
+      top: 18px;
+      font-size: 18px;
+      cursor: pointer;
+    }
+  }
+
+  .main {
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    .pay-box {
+      width: 200px;
+      height: 240px;
+      background: #1977ff;
+      margin: 0 10px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      border-radius: 5px;
+
+      img {
+        width: 150px;
+        height: 150px;
+      }
+
+      p {
+        margin-top: 20px;
+        color: white;
+      }
+
+      &:last-child {
+        background: #22ab38;
+      }
+    }
+  }
+
+  .footer {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    font-size: 13px;
+  }
+}
+</style>

im/src/components/layout/SkinModule.vue

@@ -0,0 +1,38 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+// 待开发
+export default {
+  data() {
+    return {
+      skins: [
+        {
+          theme: '',
+          class: 'default',
+          text: '默认',
+        },
+        {
+          theme: '',
+          class: 'red',
+          text: '红色',
+        },
+        {
+          theme: '',
+          class: 'dark',
+          text: '暗黑',
+        },
+        {
+          theme: '',
+          class: 'blue',
+          text: '浅蓝',
+        },
+      ],
+    }
+  },
+  created() {},
+  methods: {},
+}
+</script>
+<style lang="less" scoped></style>

im/src/components/layout/WelcomeModule.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="welcome-box">
+    <div class="famous-box">
+      <img src="~@/assets/image/chat.png" width="300" />
+     
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {}
+  },
+  created() {},
+  methods: {},
+}
+</script>
+<style lang="less" scoped>
+.welcome-box {
+  height: 100%;
+  width: 100%;
+
+  .famous-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    font-size: 24px;
+    user-select: none;
+
+    p {
+      width: 100%;
+      font-weight: 300;
+      text-align: center;
+      font-size: 15px;
+      color: #b9b4b4;
+      margin-top: -30px;
+    }
+  }
+}
+</style>

im/src/components/notify/FriendApplyNotify.vue

@@ -0,0 +1,103 @@
+<template>
+  <!-- 新消息提示组件 -->
+  <div class="notify-box">
+    <div class="lbox">
+      <el-avatar size="medium" :src="avatar" />
+    </div>
+    <div class="rbox">
+      <div class="xheader">
+        <p class="title">好友申请消息</p>
+        <p class="time">{{ datetime }}</p>
+      </div>
+      <div class="xbody">
+        <h4>申请备注:</h4>
+        <div>{{ content }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    params: {
+      type: Object,
+      default() {},
+    },
+  },
+  data() {
+    return {
+      avatar:
+        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+      talk_type: 1,
+      nickname: '阿萨纳斯卡',
+      content: '阿斯纳俺家你卡萨啊看看番按实际开发n',
+      datetime: '2021-06-18 23:15:12',
+    }
+  },
+  computed: {},
+  methods: {},
+  created() {},
+}
+</script>
+<style lang="less" scoped>
+.notify-box {
+  width: 300px;
+  min-height: 100px;
+  // background: rebeccapurple;
+  display: flex;
+  box-sizing: border-box;
+  padding: 5px;
+
+  .lbox {
+    flex-basis: 50px;
+    flex-shrink: 1;
+    display: flex;
+    justify-content: center;
+  }
+
+  .rbox {
+    flex: 1 auto;
+    margin-left: 5px;
+
+    .xheader {
+      height: 35px;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      .title {
+        font-size: 13px;
+        font-weight: 500;
+      }
+      .time {
+        font-size: 12px;
+      }
+    }
+
+    .xbody {
+      min-height: 60px;
+      width: 100%;
+
+      h4 {
+        font-size: 13px;
+        font-weight: 400;
+        margin-bottom: 3px;
+      }
+      div {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        overflow: hidden;
+        background: #f3f5f7;
+        font-size: 13px;
+        padding: 5px;
+        border-radius: 5px;
+      }
+    }
+  }
+}
+</style>

im/src/components/notify/NewMessageNotify.vue

@@ -0,0 +1,122 @@
+<template>
+  <!-- 新消息提示组件 -->
+  <div class="notify-box pointer">
+    <div class="lbox">
+      <el-avatar size="medium" shape="square" :src="avatar" />
+    </div>
+    <div class="rbox">
+      <div class="xheader">
+        <p class="title">
+          {{ talk_type == 1 ? '私信消息通知' : '群聊消息通知' }}
+        </p>
+        <p class="time"><i class="el-icon-time" /> {{ datetime | format }}</p>
+      </div>
+      <div class="xbody">
+        <p>@{{ nickname }}</p>
+        <div>{{ content }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { parseTime } from '@/utils/functions'
+
+export default {
+  components: {},
+  props: {
+    avatar: {
+      type: String,
+      default:
+        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+    },
+    talk_type: {
+      type: Number,
+      default: 1,
+    },
+    nickname: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    datetime: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {}
+  },
+  filters: {
+    format(datetime) {
+      datetime = datetime || new Date()
+      return parseTime(datetime, '{m}/{d} {h}:{i} 分')
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.notify-box {
+  width: 300px;
+  min-height: 100px;
+  display: flex;
+  box-sizing: border-box;
+  padding: 5px;
+
+  .lbox {
+    flex-basis: 50px;
+    flex-shrink: 1;
+    display: flex;
+    justify-content: center;
+  }
+
+  .rbox {
+    flex: 1 auto;
+    margin-left: 5px;
+
+    .xheader {
+      height: 25px;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      .title {
+        font-size: 13px;
+        font-weight: 500;
+      }
+      .time {
+        font-size: 12px;
+      }
+    }
+
+    .xbody {
+      min-height: 60px;
+      width: 100%;
+      margin-top: 5px;
+
+      p {
+        font-size: 13px;
+        font-weight: 400;
+        color: #fb4208;
+        margin-bottom: 4px;
+      }
+
+      div {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        overflow: hidden;
+        background: #f3f5f7;
+        font-size: 13px;
+        padding: 5px;
+        border-radius: 5px;
+      }
+    }
+  }
+}
+</style>

im/src/components/svg-icon/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+<script>
+export default {
+  name: 'svg-icon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true,
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+  },
+}
+</script>
+<style scoped>
+.svg-icon {
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

im/src/components/user/UserSearch.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="lum-dialog-mask" v-show="isShow">
+      <el-container class="lum-dialog-box" v-outside="close">
+        <el-header class="header" height="50px">
+          <p>添加好友</p>
+          <p class="tools">
+            <i class="el-icon-close" @click="close" />
+          </p>
+        </el-header>
+        <el-main class="main">
+          <el-input
+            v-model="mobile"
+            id="serach-mobile"
+            class="input"
+            prefix-icon="el-icon-search"
+            placeholder="请输入对方手机号(精确查找)"
+            clearable
+            @keyup.enter.native="onSubmit"
+            @input="error = false"
+          />
+          <p v-show="error" class="error">
+            无法找到该用户，请检查搜索内容并重试
+          </p>
+          <el-button
+            type="primary"
+            size="small"
+            :loading="loading"
+            @click="onSubmit"
+            >立即查找
+          </el-button>
+        </el-main>
+      </el-container>
+    </div>
+  </div>
+</template>
+<script>
+import { ServeSearchContact } from '@/api/contacts'
+
+export default {
+  name: 'UserSearch',
+  data() {
+    return {
+      loading: false,
+      isShow: false,
+      mobile: '',
+      error: false,
+    }
+  },
+  methods: {
+    // 显示窗口
+    open() {
+      this.mobile = ''
+      this.isShow = true
+      this.$nextTick(() => {
+        document.getElementById('serach-mobile').focus()
+      })
+    },
+
+    // 关闭窗口
+    close() {
+      this.isShow = false
+    },
+
+    onSubmit() {
+      let { mobile } = this
+
+      if (mobile == '') return false
+
+      this.loading = true
+      ServeSearchContact({
+        mobile,
+      })
+        .then(res => {
+          if (res.code == 200) {
+            this.$user(res.data.id)
+            this.close()
+          } else {
+            this.error = true
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.lum-dialog-box {
+  width: 450px;
+  max-width: 450px;
+  height: 250px;
+
+  .main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    .input {
+      width: 85%;
+    }
+
+    .error {
+      width: 85%;
+      color: red;
+      font-size: 12px;
+      height: 50px;
+      line-height: 50px;
+    }
+
+    button {
+      margin-top: 20px;
+      width: 100px;
+    }
+  }
+}
+</style>

im/src/components/user/user-card/UserCardDetail.vue

@@ -0,0 +1,483 @@
+<template>
+  <div class="lum-dialog-mask animated fadeIn">
+    <el-container class="container" v-outside="close">
+      <el-header class="no-padding header" height="180px">
+        <i class="close el-icon-error pointer" @click="close" />
+        <div class="img-banner">
+          <img :src="detail.bag" class="img-banner" />
+        </div>
+        <div class="user-header">
+          <div class="avatar">
+            <div class="avatar-box">
+              <img :src="detail.avatar" :onerror="$store.state.defaultAvatar" />
+            </div>
+          </div>
+          <div class="nickname">
+            <i class="iconfont icon-qianming" />
+            <span>{{ detail.nickname || "未设置昵称" }}</span>
+            <div class="share no-select">
+              <i class="iconfont icon-fenxiang3" /> <span>分享</span>
+            </div>
+          </div>
+        </div>
+      </el-header>
+      <el-main class="no-padding main">
+        <div class="user-sign">
+          <div class="sign-arrow"></div>
+          <i class="iconfont icon-bianji" />
+          <span>编辑个签，展示我的独特态度。 </span>
+        </div>
+
+        <div class="card-rows no-select">
+          <div class="card-row">
+            <label>手机</label>
+            <span>{{ detail.mobile | mobile }}</span>
+          </div>
+          <div class="card-row">
+            <label>昵称</label>
+            <span>{{ detail.nickname || "未设置昵称" }}</span>
+          </div>
+          <div class="card-row">
+            <label>性别</label>
+            <span>{{ detail.gender | gender }}</span>
+          </div>
+          <div v-show="detail.friend_status == 2" class="card-row">
+            <label>备注</label>
+            <span v-if="editRemark.isShow == false">{{
+              detail.nickname_remark ? detail.nickname_remark : "暂无备注"
+            }}</span>
+            <span v-else>
+              <input
+                v-model="editRemark.text"
+                v-focus
+                class="friend-remark"
+                type="text"
+                @keyup.enter="editRemarkSubmit"
+              />
+            </span>
+            <i
+              v-show="!editRemark.isShow"
+              class="el-icon-edit-outline"
+              @click="clickEditRemark"
+            />
+          </div>
+          <div class="card-row">
+            <label>邮箱</label>
+            <span>未设置</span>
+          </div>
+        </div>
+      </el-main>
+      <el-footer
+        v-show="detail.friend_status !== 0"
+        class="no-padding footer"
+        height="50px"
+      >
+        <el-button
+          v-if="detail.friend_status == 1 && detail.friend_apply == 0"
+          type="primary"
+          size="small"
+          icon="el-icon-circle-plus-outline"
+          @click="apply.isShow = true"
+          >添加好友
+        </el-button>
+        <el-button
+          v-else-if="detail.friend_apply == 1"
+          type="primary"
+          size="small"
+          >已发送好友申请，请耐心等待...
+        </el-button>
+        <el-button
+          v-else-if="detail.friend_status == 2"
+          type="primary"
+          size="small"
+          icon="el-icon-s-promotion"
+          @click="sendMessage(detail)"
+          >发消息
+        </el-button>
+      </el-footer>
+
+      <!-- 添加好友申请表单 -->
+      <div
+        v-outside="closeApply"
+        class="friend-from"
+        :class="{ 'friend-from-show': apply.isShow }"
+      >
+        <p>
+          <span>请填写好友申请备注：</span>
+          <span @click="closeApply">取消</span>
+        </p>
+        <div>
+          <input
+            v-model="apply.text"
+            type="text"
+            placeholder="(必填项)"
+            @keyup.enter="sendApply"
+          />
+          <el-button type="primary" size="small" @click="sendApply">
+            立即提交
+          </el-button>
+        </div>
+      </div>
+    </el-container>
+  </div>
+</template>
+<script>
+// import { ServeSearchUser } from "@/api/user";
+import { ServeCreateContact, ServeEditContactRemark } from "@/api/contacts";
+import { toTalk } from "@/utils/talk";
+
+export default {
+  name: "UserCardDetail",
+  props: {
+    user_id: {
+      type: Number,
+      default: 0,
+    },
+  },
+  filters: {
+    gender(value) {
+      let arr = ["未知", "男", "女"];
+      return arr[value] || "未知";
+    },
+    // 手机号格式化
+    mobile(value) {
+      return (
+        value.substr(0, 3) + " " + value.substr(3, 4) + " " + value.substr(7, 4)
+      );
+    },
+  },
+  data() {
+    return {
+      detail: {
+        mobile: "",
+        nickname: "",
+        avatar: "",
+        motto: "",
+        friend_status: 0,
+        friend_apply: 0,
+        nickname_remark: "",
+        bag: require("@/assets/image/default-user-banner.png"),
+        gender: 0,
+      },
+
+      // 好友备注表单
+      editRemark: {
+        isShow: false,
+        text: "",
+      },
+
+      // 好友申请表单
+      apply: {
+        isShow: false,
+        text: "",
+      },
+
+      contacts: false,
+    };
+  },
+  created() {
+    // this.loadUserDetail();
+  },
+  methods: {
+    close() {
+      if (this.contacts) return false;
+
+      this.$emit("close");
+    },
+
+    // 点击编辑备注信息
+    clickEditRemark() {
+      this.editRemark.isShow = true;
+      this.editRemark.text = this.detail.nickname_remark;
+    },
+
+    // 获取用户信息
+    // loadUserDetail() {
+    //   ServeSearchUser({
+    //     user_id: this.user_id,
+    //   }).then((res) => {
+    //     if (res.code == 200) {
+    //       this.detail.user_id = res.data.id;
+    //       Object.assign(this.detail, res.data);
+    //     }
+    //   });
+    // },
+
+    // 发送添加好友申请
+    sendApply() {
+      if (this.apply.text == "") return;
+      ServeCreateContact({
+        friend_id: this.detail.user_id,
+        remark: this.apply.text,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.apply.isShow = false;
+          this.apply.text = "";
+          this.detail.friend_apply = 1;
+        } else {
+          this.$message.error("发送好友申请失败,请稍后再试...");
+        }
+      });
+    },
+
+    // 编辑好友备注信息
+    editRemarkSubmit() {
+      let data = {
+        friend_id: this.detail.user_id,
+        remarks: this.editRemark.text,
+      };
+
+      if (data.remarks == this.detail.nickname_remark) {
+        this.editRemark.isShow = false;
+        return;
+      }
+
+      ServeEditContactRemark(data).then((res) => {
+        if (res.code == 200) {
+          this.editRemark.isShow = false;
+          this.detail.nickname_remark = data.remarks;
+          this.$emit("changeRemark", data);
+        }
+      });
+    },
+
+    // 隐藏申请表单
+    closeApply() {
+      this.apply.isShow = false;
+    },
+
+    // 发送好友消息
+    sendMessage() {
+      this.close();
+      toTalk(1, this.user_id);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  width: 350px;
+  height: 600px;
+  overflow: hidden;
+  border-radius: 3px;
+
+  .header {
+    position: relative;
+
+    .close {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      color: white;
+      transition: all 1s;
+      z-index: 1;
+      font-size: 20px;
+    }
+
+    .img-banner {
+      width: 100%;
+      height: 100%;
+      background-image: url(~@/assets/image/default-user-banner.png);
+      background-size: 100%;
+      transition: all 0.2s linear;
+      cursor: pointer;
+      overflow: hidden;
+
+      img:hover {
+        -webkit-transform: scale(1.1);
+        transform: scale(1.1);
+        -webkit-filter: contrast(130%);
+        filter: contrast(130%);
+      }
+    }
+  }
+
+  .main {
+    background-color: white;
+    padding: 45px 16px 0;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid #f5eeee;
+
+    button {
+      width: 90%;
+    }
+  }
+}
+
+.user-header {
+  width: 100%;
+  height: 80px;
+  position: absolute;
+  bottom: -40px;
+  display: flex;
+  flex-direction: row;
+
+  .avatar {
+    width: 100px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+
+    .avatar-box {
+      width: 80px;
+      height: 80px;
+      background-color: white;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        height: 70px;
+        width: 70px;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .nickname {
+    flex: auto;
+    padding-top: 50px;
+    font-size: 16px;
+    font-weight: 400;
+
+    span {
+      margin-left: 5px;
+    }
+
+    .share {
+      display: inline-flex;
+      width: 50px;
+      height: 22px;
+      background: #ff5722;
+      color: white;
+      align-items: center;
+      justify-content: center;
+      padding: 3px 8px;
+      border-radius: 20px;
+      transform: scale(0.7);
+      cursor: pointer;
+      i {
+        margin-top: 2px;
+      }
+      span {
+        font-size: 14px;
+        margin-left: 4px;
+      }
+    }
+  }
+}
+
+.user-sign {
+  min-height: 26px;
+  border-radius: 5px;
+  padding: 5px;
+  line-height: 25px;
+  background: #f3f5f7;
+  color: #7d7d7d;
+  font-size: 12px;
+  margin-bottom: 20px;
+  position: relative;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  position: relative;
+
+  .sign-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    font-size: 0;
+    border: 5px solid hsla(0, 0%, 96.9%, 0);
+    border-bottom-color: #f3f5f7;
+    left: 28px;
+    top: -9px;
+  }
+}
+
+.card-rows {
+  .card-row {
+    height: 35px;
+    line-height: 35px;
+    font-size: 14px;
+    position: relative;
+    cursor: pointer;
+    color: #736f6f;
+
+    label {
+      margin-right: 25px;
+      color: #cbc5c5;
+    }
+
+    .friend-remark {
+      border-bottom: 1px dashed #bec3d0;
+      padding-bottom: 2px;
+      color: #736f6f;
+      width: 60%;
+      padding-right: 5px;
+    }
+
+    .el-icon-edit-outline {
+      margin-left: 3px !important;
+    }
+  }
+}
+
+/* 好友申请表单 */
+.friend-from {
+  position: absolute;
+  background: #fbf6f6;
+  height: 80px;
+  z-index: 2;
+  width: 100%;
+  bottom: -80px;
+  left: 0;
+  transition: all 0.5s ease-in-out;
+
+  p {
+    height: 20px;
+    line-height: 20px;
+    padding: 7px 5px 5px 15px;
+    font-size: 13px;
+
+    span {
+      &:nth-child(2) {
+        float: right;
+        margin-right: 13px;
+        color: #32caff;
+        cursor: pointer;
+      }
+    }
+  }
+
+  div {
+    height: 31px;
+    line-height: 20px;
+    padding: 7px 5px 5px 15px;
+    font-size: 13px;
+  }
+
+  input {
+    height: 30px;
+    line-height: 30px;
+    width: 220px;
+    border-radius: 3px;
+    padding: 0 5px;
+    margin-right: 5px;
+  }
+}
+
+.friend-from-show {
+  bottom: 0;
+}
+</style>

im/src/components/user/user-card/index.js

@@ -0,0 +1,33 @@
+import UserCardDetail from './UserCardDetail'
+
+export default {
+  install(Vue) {
+    function user(user_id, options) {
+      let _vm = this
+      const el = new Vue({
+        router: _vm.$router,
+        store: _vm.$store,
+        render(h) {
+          return h(UserCardDetail, {
+            on: {
+              close: () => {
+                el.$destroy()
+                document.body.removeChild(el.$el)
+              },
+              changeRemark: data => {
+                options.editRemarkCallbak && options.editRemarkCallbak(data)
+              },
+            },
+            props: {
+              user_id,
+            },
+          })
+        },
+      }).$mount()
+
+      document.body.appendChild(el.$el)
+    }
+
+    Vue.prototype.$user = user
+  },
+}

im/src/config/config.js

@@ -0,0 +1,7 @@
+export default {
+  WEBSITE_NAME: process.env.VUE_APP_WEBSITE_NAME || "LiLi IM",
+  BASE_API_URL: process.env.VUE_APP_API_BASE_URL || "",
+  BASE_WS_URL: process.env.VUE_APP_WEB_SOCKET_URL || "",
+  BASE_COMMON: process.env.VUE_APP_COMMON || "",
+  PC_URL: process.env.VUE_APP_PC_URL || "",
+};

im/src/constants/talk.js

@@ -0,0 +1,9 @@
+/**
+ * 私聊
+ */
+const PRIVATE_CHAT = 1
+
+/**
+ * 群聊
+ */
+const GROUP_CHAT = 2

im/src/core/directives.js

@@ -0,0 +1,49 @@
+import Vue from 'vue'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
+
+// 自定义聚焦指令
+Vue.directive('focus', {
+  inserted(el) {
+    el.focus()
+  },
+})
+
+// 自定义粘贴指令
+Vue.directive('paste', {
+  bind(el, binding, vnode) {
+    el.addEventListener('paste', function(event) {
+      //这里直接监听元素的粘贴事件
+      binding.value(event)
+    })
+  },
+})
+
+// 自定义拖拽指令
+Vue.directive('drag', {
+  bind(el, binding, vnode) {
+    // 因为拖拽还包括拖动时的经过事件，离开事件，和进入事件，放下事件，
+    // 浏览器对于拖拽的默认事件的处理是打开拖进来的资源，
+    // 所以要先对这三个事件进行默认事件的禁止
+    el.addEventListener('dragenter', function(event) {
+      event.stopPropagation()
+      event.preventDefault()
+    })
+    el.addEventListener('dragover', function(event) {
+      event.stopPropagation()
+      event.preventDefault()
+    })
+    el.addEventListener('dragleave', function(event) {
+      event.stopPropagation()
+      event.preventDefault()
+    })
+    el.addEventListener('drop', function(event) {
+      // 这里阻止默认事件，并绑定事件的对象，用来在组件上返回事件对象
+      event.stopPropagation()
+      event.preventDefault()
+      binding.value(event)
+    })
+  },
+})
+
+// 点击其他地方隐藏指令
+Vue.directive('outside', Clickoutside)

im/src/core/global-component.js

@@ -0,0 +1,37 @@
+import Vue from "vue";
+import {
+  AudioMessage,
+  CodeMessage,
+  ForwardMessage,
+  ImageMessage,
+  TextMessage,
+  VideoMessage,
+  VoiceMessage,
+  SystemTextMessage,
+  FileMessage,
+  InviteMessage,
+  RevokeMessage,
+  VisitCardMessage,
+  ReplyMessage,
+  VoteMessage,
+  LoginMessage,
+} from "@/components/chat/messaege";
+
+Vue.component(AudioMessage.name, AudioMessage);
+Vue.component(CodeMessage.name, CodeMessage);
+Vue.component(ForwardMessage.name, ForwardMessage);
+Vue.component(ImageMessage.name, ImageMessage);
+Vue.component(TextMessage.name, TextMessage);
+Vue.component(VideoMessage.name, VideoMessage);
+Vue.component(VoiceMessage.name, VoiceMessage);
+Vue.component(SystemTextMessage.name, SystemTextMessage);
+Vue.component(FileMessage.name, FileMessage);
+Vue.component(InviteMessage.name, InviteMessage);
+Vue.component(RevokeMessage.name, RevokeMessage);
+Vue.component(VisitCardMessage.name, VisitCardMessage);
+Vue.component(ReplyMessage.name, ReplyMessage);
+Vue.component(VoteMessage.name, VoteMessage);
+Vue.component(LoginMessage.name, LoginMessage);
+
+import UserCard from "@/components/user/user-card/index";
+Vue.use(UserCard);

im/src/core/icons.js

@@ -0,0 +1,22 @@
+/**
+ * Custom icon list
+ * All icons are loaded here for easy management
+ *
+ * 自定义图标加载表
+ * 所有图标均从这里加载，方便管理
+ */
+import SvgMentionDown from '@/icons/svg/mention-down.svg?inline' // path to your '*.svg?inline' file.
+import SvgNotFount from '@/icons/svg/not-fount.svg?inline' // path to your '*.svg?inline' file.
+import SvgNote from '@/icons/svg/note.svg?inline' // path to your '*.svg?inline' file.
+import SvgNoteBook from '@/icons/svg/note-book.svg?inline' // path to your '*.svg?inline' file.
+import SvgNotData from '@/icons/svg/not-data.svg?inline' // path to your '*.svg?inline' file.
+import SvgZhuangFa from '@/icons/svg/zhuangfa.svg?inline' // path to your '*.svg?inline' file.
+
+export {
+  SvgMentionDown,
+  SvgNotFount,
+  SvgNote,
+  SvgNoteBook,
+  SvgNotData,
+  SvgZhuangFa,
+}

im/src/core/lazy-use.js

@@ -0,0 +1,89 @@
+import Vue from 'vue'
+import 'element-ui/lib/theme-chalk/index.css'
+
+import {
+  Notification,
+  Popover,
+  Switch,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Message,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
+  Menu,
+  Submenu,
+  MenuItem,
+  MenuItemGroup,
+  Button,
+  Image,
+  Loading,
+  Row,
+  Col,
+  MessageBox,
+  Form,
+  FormItem,
+  Input,
+  Divider,
+  Link,
+  Tooltip,
+  Autocomplete,
+  Scrollbar,
+  Avatar,
+  Radio,
+  RadioGroup,
+  Progress,
+  Dialog,
+  Checkbox,
+  Tag
+} from 'element-ui'
+
+Vue.use(Popover)
+Vue.use(Switch)
+Vue.use(Dropdown)
+Vue.use(DropdownMenu)
+Vue.use(DropdownItem)
+Vue.use(Container)
+Vue.use(Header)
+Vue.use(Aside)
+Vue.use(Main)
+Vue.use(Footer)
+Vue.use(Menu)
+Vue.use(Submenu)
+Vue.use(MenuItem)
+Vue.use(MenuItemGroup)
+Vue.use(Button)
+Vue.use(Image)
+Vue.use(Row)
+Vue.use(Col)
+Vue.use(Input)
+Vue.use(Form)
+Vue.use(FormItem)
+Vue.use(Divider)
+Vue.use(Link)
+Vue.use(Tooltip)
+Vue.use(Autocomplete)
+Vue.use(Scrollbar)
+Vue.use(Avatar)
+Vue.use(Radio)
+Vue.use(Checkbox)
+Vue.use(RadioGroup)
+Vue.use(Progress)
+Vue.use(Dialog)
+Vue.use(Tag)
+Vue.use(Loading.directive)
+
+Vue.prototype.$notify = Notification
+Vue.prototype.$message = Message
+Vue.prototype.$confirm = MessageBox.confirm
+Vue.prototype.$prompt = MessageBox.prompt
+Vue.prototype.$alert = MessageBox.alert
+
+import Contextmenu from 'vue-contextmenujs'
+Vue.use(Contextmenu)
+
+process.env.NODE_ENV !== 'production' &&
+  console.warn('[Lumen-IM] NOTICE: element-ui use lazy-load.')

im/src/directive/PreCode.js

@@ -0,0 +1,47 @@
+import { copyTextToClipboard as Clipboard } from '@/utils/functions'
+
+const copyFunc = (pre, text) => {
+  let el = document.createElement('p')
+  el.className = 'fz-btn'
+  el.innerText = '复制'
+  el.onclick = () => {
+    Clipboard(text.replace(/(^\s*)|(\s*$)/g, ''), function() {
+      el.innerText = '复制成功!'
+      setTimeout(() => {
+        el.innerText = '复制'
+      }, 1000)
+    })
+  }
+
+  pre.appendChild(el)
+}
+
+const preNmae = (pre, lang) => {
+  let el = document.createElement('p')
+  el.className = 'lang-name'
+  el.innerText = lang
+  pre.appendChild(el)
+}
+
+function updateNodes(el, binding, vnode) {
+  let preNodes = el.querySelectorAll('pre')
+  preNodes.forEach(elPre => {
+    let elCode = elPre.querySelector('code')
+    let className = elCode.className
+    let language = className.split('-')[1]
+
+    copyFunc(elPre, elCode.innerText)
+
+    if (language != undefined) {
+      preNmae(elPre, language)
+    }
+  })
+}
+
+/**
+ * 代码格式化
+ */
+export default {
+  bind: updateNodes,
+  update: updateNodes,
+}

im/src/icons/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+import SvgIcon from '@/components/svg-icon'; // svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon);
+
+const req = require.context('./svg', false, /\.svg$/);
+const requireAll = requireContext => requireContext.keys().map(requireContext);
+requireAll(req);

im/src/icons/svg/mention-down.svg

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" viewBox="0 0 1024 1024" id="icon-mention-down">
+    <path d="M661.333333 298.666667v213.333333h225.834667a21.333333 21.333333 0 0 1 12.970667 4.394667l2.112 1.856a21.333333 21.333333 0 0 1 1.770666 28.16l-1.770666 2.005333-375.168 375.168a21.333333 21.333333 0 0 1-28.16 1.770667l-2.005334-1.770667L121.749333 548.416a21.333333 21.333333 0 0 1 12.586667-36.266667L136.853333 512H362.666667L362.666667 298.666667h298.666666zM618.666667 42.666667a42.666667 42.666667 0 0 1 42.666666 42.666666v128H362.666667V85.333333a42.666667 42.666667 0 0 1 42.666666-42.666666h213.333334z"></path>
+</svg>

im/src/icons/svg/not-data.svg

@@ -0,0 +1 @@
+<svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fillRule="evenodd"><ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse><g fillRule="nonzero" stroke="#D9D9D9"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path></g></g></svg>

im/src/icons/svg/not-fount.svg

@@ -0,0 +1,309 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="423px" height="341px" viewBox="0 0 423 341" version="1.1">
+    <g  stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="404" transform="translate(-484.000000, -221.000000)">
+            <g id="Group-4" transform="translate(464.000000, 222.000000)">
+                <g id="Group-5" transform="translate(75.417348, 0.163879)" stroke="#A3B1BF" stroke-width="1.62" opacity="0.6" stroke-linejoin="round" stroke-dasharray="12.15">
+                    <path d="M169.575185,288.890375 C103.647066,288.890375 50.2010204,235.455806 50.2010204,169.540425 C50.2010204,103.625045 103.647066,50.1904762 169.575185,50.1904762 C235.50394,50.1904762 288.94935,103.625045 288.94935,169.540425 C288.94935,235.455806 235.50394,288.890375 169.575185,288.890375 Z" id="Stroke-1"/>
+                    <path d="M169.405699,338.555288 C76.0274364,338.555288 0.329411882,262.872619 0.329411882,169.513299 C0.329411882,76.1539786 76.0274364,0.471309613 169.405699,0.471309613 C262.783961,0.471309613 338.481985,76.1539786 338.481985,169.513299 C338.481985,262.872619 262.783961,338.555288 169.405699,338.555288 Z" id="Stroke-3"/>
+                </g>
+                <polygon id="Fill-6" fill="#F5F5F5" transform="translate(106.914750, 199.432805) rotate(22.000000) translate(-106.914750, -199.432805) " points="97.7112298 198.803016 116.11827 190.231152 107.544667 208.634458"/>
+                <polygon id="Stroke-7" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(106.914750, 199.432805) rotate(22.000000) translate(-106.914750, -199.432805) " points="97.7112298 198.803016 116.11827 190.231152 107.544667 208.634458"/>
+                <polygon id="Fill-8" transform="translate(58.996118, 219.767028) rotate(22.000000) translate(-58.996118, -219.767028) " points="38.8543444 215.183828 54.4119879 199.629341 79.1378915 224.350228 63.580248 239.904716"/>
+                <polygon id="Stroke-9" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(58.996118, 219.767028) rotate(22.000000) translate(-58.996118, -219.767028) " points="38.8543444 215.183828 54.4119879 199.629341 79.1378915 224.350228 63.580248 239.904716"/>
+                <polygon id="Fill-10" fill="#F5F5F5" transform="translate(71.226096, 214.577614) rotate(22.000000) translate(-71.226096, -214.577614) " points="51.4642422 198.657893 55.3028278 194.820086 90.9879502 230.497335 87.1487294 234.335141"/>
+                <polygon id="Stroke-11" stroke="#A3B1BF" stroke-width="1.62" fill="#F0F2F5" stroke-linejoin="round" transform="translate(71.226096, 214.577614) rotate(22.000000) translate(-71.226096, -214.577614) " points="51.4642422 198.657893 55.3028278 194.820086 90.9879502 230.497335 87.1487294 234.335141"/>
+                <polygon id="Fill-12" transform="translate(84.698338, 273.903349) rotate(22.000000) translate(-84.698338, -273.903349) " points="56.0769883 259.690379 70.4821667 245.288122 113.319688 288.116319 98.9145099 302.518575"/>
+                <polygon id="Stroke-13" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(84.698338, 273.903349) rotate(22.000000) translate(-84.698338, -273.903349) " points="56.0769883 259.690379 70.4821667 245.288122 113.319688 288.116319 98.9145099 302.518575"/>
+                <polygon id="Fill-14" transform="translate(75.456149, 212.782520) rotate(22.000000) translate(-75.456149, -212.782520) " points="63.8911557 203.879723 66.5512281 201.22019 87.0211429 221.685318 84.3604352 224.34485"/>
+                <polygon id="Stroke-15" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(75.456149, 212.782520) rotate(22.000000) translate(-75.456149, -212.782520) " points="63.8911557 203.879723 66.5512281 201.22019 87.0211429 221.685318 84.3604352 224.34485"/>
+                <polygon id="Fill-16" fill="#F5F5F5" transform="translate(78.176142, 202.618192) rotate(22.000000) translate(-78.176142, -202.618192) " points="74.4026766 205.006817 80.5652518 198.845492 81.9496076 200.229567 75.7870324 206.390892"/>
+                <polygon id="Stroke-17" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(78.176142, 202.618192) rotate(22.000000) translate(-78.176142, -202.618192) " points="74.4026766 205.006817 80.5652518 198.845492 81.9496076 200.229567 75.7870324 206.390892"/>
+                <polygon id="Fill-18" fill="#F5F5F5" transform="translate(84.676979, 217.928886) rotate(22.000000) translate(-84.676979, -217.928886) " points="80.9035138 220.317511 87.066089 214.156186 88.4504448 215.540261 82.2878696 221.701586"/>
+                <polygon id="Stroke-19" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(84.676979, 217.928886) rotate(22.000000) translate(-84.676979, -217.928886) " points="80.9035138 220.317511 87.066089 214.156186 88.4504448 215.540261 82.2878696 221.701586"/>
+                <polygon id="Fill-20" transform="translate(70.238421, 242.404581) rotate(22.000000) translate(-70.238421, -242.404581) " points="67.8493111 238.631881 74.0118863 244.793206 72.6275305 246.177281 66.4649553 240.015956"/>
+                <polygon id="Stroke-21" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(70.238421, 242.404581) rotate(22.000000) translate(-70.238421, -242.404581) " points="67.8493111 238.631881 74.0118863 244.793206 72.6275305 246.177281 66.4649553 240.015956"/>
+                <polygon id="Fill-22" transform="translate(48.081755, 224.398789) rotate(22.000000) translate(-48.081755, -224.398789) " points="35.1127107 220.725179 36.3242602 211.432376 61.0507992 236.153899 51.756111 237.365203"/>
+                <polygon id="Stroke-23" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(48.081755, 224.398789) rotate(22.000000) translate(-48.081755, -224.398789) " points="35.1127107 220.725179 36.3242602 211.432376 61.0507992 236.153899 51.756111 237.365203"/>
+                <polygon id="Fill-24" transform="translate(38.612968, 228.416820) rotate(22.000000) translate(-38.612968, -228.416820) " points="32.9179858 217.470622 26.2496982 216.056058 50.9762371 240.777581 49.5613861 234.110647"/>
+                <polygon id="Stroke-25" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(38.612968, 228.416820) rotate(22.000000) translate(-38.612968, -228.416820) " points="32.9179858 217.470622 26.2496982 216.056058 50.9762371 240.777581 49.5613861 234.110647"/>
+                <polygon id="Fill-26" transform="translate(31.086342, 221.523909) rotate(22.000000) translate(-31.086342, -221.523909) " points="32.6469986 217.297684 26.8592604 218.37941 34.2314793 225.750133 35.3134242 219.963569"/>
+                <polygon id="Stroke-27" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(31.086342, 221.523909) rotate(22.000000) translate(-31.086342, -221.523909) " points="32.6469986 217.297684 26.8592604 218.37941 34.2314793 225.750133 35.3134242 219.963569"/>
+                <polygon id="Fill-28" transform="translate(38.344372, 238.617819) rotate(22.000000) translate(-38.344372, -238.617819) " points="39.9050284 234.391595 34.1172902 235.47332 41.4895091 242.844044 42.571454 237.05748"/>
+                <polygon id="Stroke-29" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(38.344372, 238.617819) rotate(22.000000) translate(-38.344372, -238.617819) " points="39.9050284 234.391595 34.1172902 235.47332 41.4895091 242.844044 42.571454 237.05748"/>
+                <polygon id="Fill-30" fill="#F0F2F5" transform="translate(75.352798, 203.766862) rotate(22.000000) translate(-75.352798, -203.766862) " points="71.4417859 201.708217 73.2937351 199.856644 79.2638092 205.824871 77.4118601 207.67708"/>
+                <polygon id="Stroke-31" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(75.352798, 203.766862) rotate(22.000000) translate(-75.352798, -203.766862) " points="71.4417859 201.708217 73.2937351 199.856644 79.2638092 205.824871 77.4118601 207.67708"/>
+                <polygon id="Fill-32" fill="#F0F2F5" transform="translate(81.871541, 219.119730) rotate(22.000000) translate(-81.871541, -219.119730) " points="77.9605297 217.061085 79.8124789 215.209512 85.7825531 221.177739 83.9306039 223.029948"/>
+                <polygon id="Stroke-33" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(81.871541, 219.119730) rotate(22.000000) translate(-81.871541, -219.119730) " points="77.9605297 217.061085 79.8124789 215.209512 85.7825531 221.177739 83.9306039 223.029948"/>
+                <polygon id="Fill-34" transform="translate(68.034935, 237.215417) rotate(22.000000) translate(-68.034935, -237.215417) " points="65.1594898 237.106164 67.9256601 234.340555 70.9103796 237.324669 68.1442092 240.090278"/>
+                <polygon id="Stroke-35" stroke="#A3B1BF" stroke-width="1.62" fill="#F5F5F5" stroke-linejoin="round" transform="translate(68.034935, 237.215417) rotate(22.000000) translate(-68.034935, -237.215417) " points="65.1594898 237.106164 67.9256601 234.340555 70.9103796 237.324669 68.1442092 240.090278"/>
+                <path d="M90.2556147,213.065319 C79.2271463,202.039088 74.6433339,188.153875 78.4889079,179.512775 C79.1248602,178.084237 80.8319571,175.429786 84.5339495,179.131027 C88.2353065,182.832268 120.560237,215.150007 123.931865,218.52095 C127.303492,221.891894 125.245065,224.192545 123.817508,224.827733 C115.174655,228.675068 101.284718,224.092186 90.2556147,213.065319 Z" id="Fill-36" fill="#F5F5F5" transform="translate(101.453924, 201.708917) rotate(22.000000) translate(-101.453924, -201.708917) "/>
+                <path d="M90.2556147,213.065319 C79.2271463,202.039088 74.6433339,188.153875 78.4889079,179.512775 C79.1248602,178.084237 80.8319571,175.429786 84.5339495,179.131027 C88.2353065,182.832268 120.560237,215.150007 123.931865,218.52095 C127.303492,221.891894 125.245065,224.192545 123.817508,224.827733 C115.174655,228.675068 101.284718,224.092186 90.2556147,213.065319 Z" id="Stroke-38" stroke="#A3B1BF" stroke-width="1.62" fill="#F0F2F5" stroke-linejoin="round" transform="translate(101.453924, 201.708917) rotate(22.000000) translate(-101.453924, -201.708917) "/>
+                <polygon id="Fill-40" fill="#F0F2F5" transform="translate(86.633853, 208.038961) rotate(22.000000) translate(-86.633853, -208.038961) " points="77.9716233 201.230061 79.8235724 199.378488 95.2960835 214.84786 93.4441343 216.699433"/>
+                <polygon id="Stroke-42" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(86.633853, 208.038961) rotate(22.000000) translate(-86.633853, -208.038961) " points="77.9716233 201.230061 79.8235724 199.378488 95.2960835 214.84786 93.4441343 216.699433"/>
+                <path d="M121.635514,196.068815 C120.517356,197.186746 118.704797,197.186746 117.586639,196.068815 C116.469116,194.950884 116.469116,193.138692 117.586639,192.020761 C118.704797,190.903465 120.517356,190.903465 121.635514,192.020761 C122.753672,193.138692 122.753672,194.950884 121.635514,196.068815" id="Fill-44" fill="#A3B1BF" transform="translate(119.611315, 194.045026) rotate(22.000000) translate(-119.611315, -194.045026) "/>
+                <polygon id="Fill-46" fill-opacity="0.6" fill="#A3B1BF" transform="translate(81.250567, 248.056422) rotate(22.000000) translate(-81.250567, -248.056422) " points="81.2505672 249.672341 79.6343206 248.056422 81.2505672 246.440503 82.8668137 248.056422"/>
+                <polygon id="Stroke-48" transform="translate(81.250567, 248.056422) rotate(22.000000) translate(-81.250567, -248.056422) " points="81.2505672 249.672341 79.6343206 248.056422 81.2505672 246.440503 82.8668137 248.056422"/>
+                <polygon id="Fill-50" fill-opacity="0.6" fill="#A3B1BF" transform="translate(82.702196, 251.475282) rotate(22.000000) translate(-82.702196, -251.475282) " points="82.7021965 253.091201 81.0859499 251.475282 82.7021965 249.859363 84.318443 251.475282"/>
+                <polygon id="Stroke-52" transform="translate(82.702196, 251.475282) rotate(22.000000) translate(-82.702196, -251.475282) " points="82.7021965 253.091201 81.0859499 251.475282 82.7021965 249.859363 84.318443 251.475282"/>
+                <polygon id="Fill-54" fill-opacity="0.6" fill="#A3B1BF" transform="translate(84.153791, 254.894059) rotate(22.000000) translate(-84.153791, -254.894059) " points="84.1537906 256.509978 82.5375441 254.894059 84.1537906 253.278141 85.7700372 254.894059"/>
+                <polygon id="Stroke-56" transform="translate(84.153791, 254.894059) rotate(22.000000) translate(-84.153791, -254.894059) " points="84.1537906 256.509978 82.5375441 254.894059 84.1537906 253.278141 85.7700372 254.894059"/>
+                <polygon id="Fill-58" fill-opacity="0.6" fill="#A3B1BF" transform="translate(85.605385, 258.312837) rotate(22.000000) translate(-85.605385, -258.312837) " points="85.6053848 259.928756 83.9891383 258.312837 85.6053848 256.696918 87.2216313 258.312837"/>
+                <polygon id="Stroke-60" transform="translate(85.605385, 258.312837) rotate(22.000000) translate(-85.605385, -258.312837) " points="85.6053848 259.928756 83.9891383 258.312837 85.6053848 256.696918 87.2216313 258.312837"/>
+                <polygon id="Fill-62" fill-opacity="0.6" fill="#A3B1BF" transform="translate(78.094482, 249.395723) rotate(22.000000) translate(-78.094482, -249.395723) " points="78.0944819 251.011642 76.4782353 249.395723 78.0944819 247.779804 79.7107284 249.395723"/>
+                <polygon id="Stroke-64" transform="translate(78.094482, 249.395723) rotate(22.000000) translate(-78.094482, -249.395723) " points="78.0944819 251.011642 76.4782353 249.395723 78.0944819 247.779804 79.7107284 249.395723"/>
+                <polygon id="Fill-66" fill-opacity="0.6" fill="#A3B1BF" transform="translate(79.546052, 252.814559) rotate(22.000000) translate(-79.546052, -252.814559) " points="79.5460522 254.430478 77.9298057 252.814559 79.5460522 251.198641 81.1622988 252.814559"/>
+                <polygon id="Stroke-68" transform="translate(79.546052, 252.814559) rotate(22.000000) translate(-79.546052, -252.814559) " points="79.5460522 254.430478 77.9298057 252.814559 79.5460522 251.198641 81.1622988 252.814559"/>
+                <polygon id="Fill-70" fill-opacity="0.6" fill="#A3B1BF" transform="translate(80.997705, 256.233360) rotate(22.000000) translate(-80.997705, -256.233360) " points="80.9977053 257.849279 79.3814588 256.23336 80.9977053 254.617442 82.6139518 256.23336"/>
+                <polygon id="Stroke-72" transform="translate(80.997705, 256.233360) rotate(22.000000) translate(-80.997705, -256.233360) " points="79.3814588 256.23336 80.9977053 254.617442 82.6139518 256.23336 80.9977053 257.849279"/>
+                <polygon id="Fill-74" fill-opacity="0.6" fill="#A3B1BF" transform="translate(82.449276, 259.652197) rotate(22.000000) translate(-82.449276, -259.652197) " points="82.4492757 261.268115 80.8330292 259.652197 82.4492757 258.036278 84.0655222 259.652197"/>
+                <polygon id="Stroke-76" transform="translate(82.449276, 259.652197) rotate(22.000000) translate(-82.449276, -259.652197) " points="82.4492757 261.268115 80.8330292 259.652197 82.4492757 258.036278 84.0655222 259.652197"/>
+                <polygon id="Fill-78" fill-opacity="0.6" fill="#A3B1BF" transform="translate(74.938373, 250.735083) rotate(22.000000) translate(-74.938373, -250.735083) " points="74.9383727 252.351002 73.3221262 250.735083 74.9383727 249.119164 76.5546193 250.735083"/>
+                <polygon id="Stroke-80" transform="translate(74.938373, 250.735083) rotate(22.000000) translate(-74.938373, -250.735083) " points="74.9383727 252.351002 73.3221262 250.735083 74.9383727 249.119164 76.5546193 250.735083"/>
+                <polygon id="Fill-82" fill-opacity="0.6" fill="#A3B1BF" transform="translate(76.389967, 254.153860) rotate(22.000000) translate(-76.389967, -254.153860) " points="76.3899669 255.769779 74.7737204 254.15386 76.3899669 252.537942 78.0062134 254.15386"/>
+                <polygon id="Stroke-84" transform="translate(76.389967, 254.153860) rotate(22.000000) translate(-76.389967, -254.153860) " points="76.3899669 255.769779 74.7737204 254.15386 76.3899669 252.537942 78.0062134 254.15386"/>
+                <polygon id="Fill-86" fill-opacity="0.6" fill="#A3B1BF" transform="translate(77.841620, 257.572661) rotate(22.000000) translate(-77.841620, -257.572661) " points="77.84162 259.18858 76.2253735 257.572661 77.84162 255.956743 79.4578665 257.572661"/>
+                <polygon id="Stroke-88" transform="translate(77.841620, 257.572661) rotate(22.000000) translate(-77.841620, -257.572661) " points="77.84162 259.18858 76.2253735 257.572661 77.84162 255.956743 79.4578665 257.572661"/>
+                <polygon id="Fill-90" fill-opacity="0.6" fill="#A3B1BF" transform="translate(79.293190, 260.991498) rotate(22.000000) translate(-79.293190, -260.991498) " points="79.2931904 262.607416 77.6769438 260.991498 79.2931904 259.375579 80.9094369 260.991498"/>
+                <polygon id="Stroke-92" transform="translate(79.293190, 260.991498) rotate(22.000000) translate(-79.293190, -260.991498) " points="79.2931904 262.607416 77.6769438 260.991498 79.2931904 259.375579 80.9094369 260.991498"/>
+                <polygon id="Fill-94" fill-opacity="0.6" fill="#A3B1BF" transform="translate(71.782287, 252.074384) rotate(22.000000) translate(-71.782287, -252.074384) " points="71.7822874 253.690302 70.1660409 252.074384 71.7822874 250.458465 73.3985339 252.074384"/>
+                <polygon id="Stroke-96" transform="translate(71.782287, 252.074384) rotate(22.000000) translate(-71.782287, -252.074384) " points="71.7822874 253.690302 70.1660409 252.074384 71.7822874 250.458465 73.3985339 252.074384"/>
+                <polygon id="Fill-98" fill-opacity="0.6" fill="#A3B1BF" transform="translate(73.233882, 255.493161) rotate(22.000000) translate(-73.233882, -255.493161) " points="73.2338816 257.10908 71.6176351 255.493161 73.2338816 253.877242 74.8501281 255.493161"/>
+                <polygon id="Stroke-100" transform="translate(73.233882, 255.493161) rotate(22.000000) translate(-73.233882, -255.493161) " points="73.2338816 257.10908 71.6176351 255.493161 73.2338816 253.877242 74.8501281 255.493161"/>
+                <polygon id="Fill-102" fill-opacity="0.6" fill="#A3B1BF" transform="translate(74.685535, 258.911962) rotate(22.000000) translate(-74.685535, -258.911962) " points="74.6855347 260.527881 73.0692881 258.911962 74.6855347 257.296044 76.3017812 258.911962"/>
+                <polygon id="Stroke-104" transform="translate(74.685535, 258.911962) rotate(22.000000) translate(-74.685535, -258.911962) " points="74.6855347 260.527881 73.0692881 258.911962 74.6855347 257.296044 76.3017812 258.911962"/>
+                <polygon id="Fill-106" fill-opacity="0.6" fill="#A3B1BF" transform="translate(76.137105, 262.330799) rotate(22.000000) translate(-76.137105, -262.330799) " points="76.137105 263.946717 74.5208585 262.330799 76.137105 260.71488 77.7533516 262.330799"/>
+                <polygon id="Stroke-108" transform="translate(76.137105, 262.330799) rotate(22.000000) translate(-76.137105, -262.330799) " points="76.137105 263.946717 74.5208585 262.330799 76.137105 260.71488 77.7533516 262.330799"/>
+                <polygon id="Fill-110" fill-opacity="0.6" fill="#A3B1BF" transform="translate(68.626202, 253.413685) rotate(22.000000) translate(-68.626202, -253.413685) " points="68.6262021 255.029603 67.0099556 253.413685 68.6262021 251.797766 70.2424486 253.413685"/>
+                <polygon id="Stroke-112" transform="translate(68.626202, 253.413685) rotate(22.000000) translate(-68.626202, -253.413685) " points="68.6262021 255.029603 67.0099556 253.413685 68.6262021 251.797766 70.2424486 253.413685"/>
+                <polygon id="Fill-114" fill-opacity="0.6" fill="#A3B1BF" transform="translate(70.077796, 256.832462) rotate(22.000000) translate(-70.077796, -256.832462) " points="70.0777963 258.448381 68.4615497 256.832462 70.0777963 255.216543 71.6940428 256.832462"/>
+                <polygon id="Stroke-116" transform="translate(70.077796, 256.832462) rotate(22.000000) translate(-70.077796, -256.832462) " points="70.0777963 258.448381 68.4615497 256.832462 70.0777963 255.216543 71.6940428 256.832462"/>
+                <polygon id="Fill-118" fill-opacity="0.6" fill="#A3B1BF" transform="translate(71.529426, 260.251322) rotate(22.000000) translate(-71.529426, -260.251322) " points="71.5294256 261.867241 69.913179 260.251322 71.5294256 258.635403 73.1456721 260.251322"/>
+                <polygon id="Stroke-120" transform="translate(71.529426, 260.251322) rotate(22.000000) translate(-71.529426, -260.251322) " points="71.5294256 261.867241 69.913179 260.251322 71.5294256 258.635403 73.1456721 260.251322"/>
+                <polygon id="Fill-122" fill-opacity="0.6" fill="#A3B1BF" transform="translate(72.981020, 263.670099) rotate(22.000000) translate(-72.981020, -263.670099) " points="72.9810197 265.286018 71.3647732 263.670099 72.9810197 262.054181 74.5972663 263.670099"/>
+                <polygon id="Stroke-124" transform="translate(72.981020, 263.670099) rotate(22.000000) translate(-72.981020, -263.670099) " points="72.9810197 265.286018 71.3647732 263.670099 72.9810197 262.054181 74.5972663 263.670099"/>
+                <polygon id="Fill-126" fill-opacity="0.6" fill="#A3B1BF" transform="translate(88.852907, 265.961362) rotate(22.000000) translate(-88.852907, -265.961362) " points="88.8529067 267.577281 87.2366602 265.961362 88.8529067 264.345443 90.4691533 265.961362"/>
+                <polygon id="Stroke-128" transform="translate(88.852907, 265.961362) rotate(22.000000) translate(-88.852907, -265.961362) " points="88.8529067 267.577281 87.2366602 265.961362 88.8529067 264.345443 90.4691533 265.961362"/>
+                <polygon id="Fill-130" fill-opacity="0.6" fill="#A3B1BF" transform="translate(90.304501, 269.380139) rotate(22.000000) translate(-90.304501, -269.380139) " points="90.3045009 270.996058 88.6882544 269.380139 90.3045009 267.764221 91.9207474 269.380139"/>
+                <polygon id="Stroke-132" transform="translate(90.304501, 269.380139) rotate(22.000000) translate(-90.304501, -269.380139) " points="90.3045009 270.996058 88.6882544 269.380139 90.3045009 267.764221 91.9207474 269.380139"/>
+                <polygon id="Fill-134" fill-opacity="0.6" fill="#A3B1BF" transform="translate(91.756130, 272.798999) rotate(22.000000) translate(-91.756130, -272.798999) " points="91.7561302 274.414918 90.1398837 272.798999 91.7561302 271.183081 93.3723767 272.798999"/>
+                <polygon id="Stroke-136" transform="translate(91.756130, 272.798999) rotate(22.000000) translate(-91.756130, -272.798999) " points="91.7561302 274.414918 90.1398837 272.798999 91.7561302 271.183081 93.3723767 272.798999"/>
+                <polygon id="Fill-138" fill-opacity="0.6" fill="#A3B1BF" transform="translate(93.207724, 276.217777) rotate(22.000000) translate(-93.207724, -276.217777) " points="93.2077244 277.833695 91.5914778 276.217777 93.2077244 274.601858 94.8239709 276.217777"/>
+                <polygon id="Stroke-140" transform="translate(93.207724, 276.217777) rotate(22.000000) translate(-93.207724, -276.217777) " points="93.2077244 277.833695 91.5914778 276.217777 93.2077244 274.601858 94.8239709 276.217777"/>
+                <polygon id="Fill-142" fill-opacity="0.6" fill="#A3B1BF" transform="translate(85.696821, 267.300663) rotate(22.000000) translate(-85.696821, -267.300663) " points="85.6968214 268.916582 84.0805749 267.300663 85.6968214 265.684744 87.313068 267.300663"/>
+                <polygon id="Stroke-144" transform="translate(85.696821, 267.300663) rotate(22.000000) translate(-85.696821, -267.300663) " points="85.6968214 268.916582 84.0805749 267.300663 85.6968214 265.684744 87.313068 267.300663"/>
+                <polygon id="Fill-146" fill-opacity="0.6" fill="#A3B1BF" transform="translate(87.148416, 270.719440) rotate(22.000000) translate(-87.148416, -270.719440) " points="87.1484156 272.335359 85.5321691 270.71944 87.1484156 269.103521 88.7646621 270.71944"/>
+                <polygon id="Stroke-148" transform="translate(87.148416, 270.719440) rotate(22.000000) translate(-87.148416, -270.719440) " points="87.1484156 272.335359 85.5321691 270.71944 87.1484156 269.103521 88.7646621 270.71944"/>
+                <polygon id="Fill-150" fill-opacity="0.6" fill="#A3B1BF" transform="translate(88.599986, 274.138276) rotate(22.000000) translate(-88.599986, -274.138276) " points="88.599986 275.754195 86.9837394 274.138276 88.599986 272.522358 90.2162325 274.138276"/>
+                <polygon id="Stroke-152" transform="translate(88.599986, 274.138276) rotate(22.000000) translate(-88.599986, -274.138276) " points="88.599986 275.754195 86.9837394 274.138276 88.599986 272.522358 90.2162325 274.138276"/>
+                <polygon id="Fill-154" fill-opacity="0.6" fill="#A3B1BF" transform="translate(90.051639, 277.557078) rotate(22.000000) translate(-90.051639, -277.557078) " points="90.0516391 279.172996 88.4353925 277.557078 90.0516391 275.941159 91.6678856 277.557078"/>
+                <polygon id="Stroke-156" transform="translate(90.051639, 277.557078) rotate(22.000000) translate(-90.051639, -277.557078) " points="90.0516391 279.172996 88.4353925 277.557078 90.0516391 275.941159 91.6678856 277.557078"/>
+                <polygon id="Fill-158" fill-opacity="0.6" fill="#A3B1BF" transform="translate(82.540736, 268.639964) rotate(22.000000) translate(-82.540736, -268.639964) " points="82.5407361 270.255882 80.9244896 268.639964 82.5407361 267.024045 84.1569826 268.639964"/>
+                <polygon id="Stroke-160" transform="translate(82.540736, 268.639964) rotate(22.000000) translate(-82.540736, -268.639964) " points="82.5407361 270.255882 80.9244896 268.639964 82.5407361 267.024045 84.1569826 268.639964"/>
+                <polygon id="Fill-162" fill-opacity="0.6" fill="#A3B1BF" transform="translate(83.992306, 272.058800) rotate(22.000000) translate(-83.992306, -272.058800) " points="83.9923065 273.674719 82.3760599 272.0588 83.9923065 270.442881 85.608553 272.0588"/>
+                <polygon id="Stroke-164" transform="translate(83.992306, 272.058800) rotate(22.000000) translate(-83.992306, -272.058800) " points="83.9923065 273.674719 82.3760599 272.0588 83.9923065 270.442881 85.608553 272.0588"/>
+                <polygon id="Fill-166" fill-opacity="0.6" fill="#A3B1BF" transform="translate(85.443901, 275.477577) rotate(22.000000) translate(-85.443901, -275.477577) " points="85.4439007 277.093496 83.8276541 275.477577 85.4439007 273.861659 87.0601472 275.477577"/>
+                <polygon id="Stroke-168" transform="translate(85.443901, 275.477577) rotate(22.000000) translate(-85.443901, -275.477577) " points="85.4439007 277.093496 83.8276541 275.477577 85.4439007 273.861659 87.0601472 275.477577"/>
+                <polygon id="Fill-170" fill-opacity="0.6" fill="#A3B1BF" transform="translate(86.895554, 278.896378) rotate(22.000000) translate(-86.895554, -278.896378) " points="86.8955537 280.512297 85.2793072 278.896378 86.8955537 277.28046 88.5118003 278.896378"/>
+                <polygon id="Stroke-172" transform="translate(86.895554, 278.896378) rotate(22.000000) translate(-86.895554, -278.896378) " points="86.8955537 280.512297 85.2793072 278.896378 86.8955537 277.28046 88.5118003 278.896378"/>
+                <polygon id="Fill-174" fill-opacity="0.6" fill="#A3B1BF" transform="translate(79.384651, 269.979265) rotate(22.000000) translate(-79.384651, -269.979265) " points="79.3846508 271.595183 77.7684043 269.979265 79.3846508 268.363346 81.0008973 269.979265"/>
+                <polygon id="Stroke-176" transform="translate(79.384651, 269.979265) rotate(22.000000) translate(-79.384651, -269.979265) " points="79.3846508 271.595183 77.7684043 269.979265 79.3846508 268.363346 81.0008973 269.979265"/>
+                <polygon id="Fill-178" fill-opacity="0.6" fill="#A3B1BF" transform="translate(80.836221, 273.398101) rotate(22.000000) translate(-80.836221, -273.398101) " points="80.8362212 275.01402 79.2199746 273.398101 80.8362212 271.782182 82.4524677 273.398101"/>
+                <polygon id="Stroke-180" transform="translate(80.836221, 273.398101) rotate(22.000000) translate(-80.836221, -273.398101) " points="80.8362212 275.01402 79.2199746 273.398101 80.8362212 271.782182 82.4524677 273.398101"/>
+                <polygon id="Fill-182" fill-opacity="0.6" fill="#A3B1BF" transform="translate(82.287815, 276.816878) rotate(22.000000) translate(-82.287815, -276.816878) " points="82.2878153 278.432797 80.6715688 276.816878 82.2878153 275.20096 83.9040619 276.816878"/>
+                <polygon id="Stroke-184" transform="translate(82.287815, 276.816878) rotate(22.000000) translate(-82.287815, -276.816878) " points="82.2878153 278.432797 80.6715688 276.816878 82.2878153 275.20096 83.9040619 276.816878"/>
+                <polygon id="Fill-186" fill-opacity="0.6" fill="#A3B1BF" transform="translate(83.739445, 280.235738) rotate(22.000000) translate(-83.739445, -280.235738) " points="83.7394446 281.851657 82.1231981 280.235738 83.7394446 278.61982 85.3556912 280.235738"/>
+                <polygon id="Stroke-188" transform="translate(83.739445, 280.235738) rotate(22.000000) translate(-83.739445, -280.235738) " points="83.7394446 281.851657 82.1231981 280.235738 83.7394446 278.61982 85.3556912 280.235738"/>
+                <polygon id="Fill-190" fill-opacity="0.6" fill="#A3B1BF" transform="translate(76.228483, 271.318601) rotate(22.000000) translate(-76.228483, -271.318601) " points="76.2284828 272.934519 74.6122362 271.318601 76.2284828 269.702682 77.8447293 271.318601"/>
+                <polygon id="Stroke-192" transform="translate(76.228483, 271.318601) rotate(22.000000) translate(-76.228483, -271.318601) " points="76.2284828 272.934519 74.6122362 271.318601 76.2284828 269.702682 77.8447293 271.318601"/>
+                <polygon id="Fill-194" fill-opacity="0.6" fill="#A3B1BF" transform="translate(77.680136, 274.737402) rotate(22.000000) translate(-77.680136, -274.737402) " points="77.6801358 276.353321 76.0638893 274.737402 77.6801358 273.121483 79.2963824 274.737402"/>
+                <polygon id="Stroke-196" transform="translate(77.680136, 274.737402) rotate(22.000000) translate(-77.680136, -274.737402) " points="77.6801358 276.353321 76.0638893 274.737402 77.6801358 273.121483 79.2963824 274.737402"/>
+                <polygon id="Fill-198" fill-opacity="0.6" fill="#A3B1BF" transform="translate(79.131730, 278.156179) rotate(22.000000) translate(-79.131730, -278.156179) " points="79.13173 279.772098 77.5154835 278.156179 79.13173 276.540261 80.7479765 278.156179"/>
+                <polygon id="Stroke-200" transform="translate(79.131730, 278.156179) rotate(22.000000) translate(-79.131730, -278.156179) " points="79.13173 279.772098 77.5154835 278.156179 79.13173 276.540261 80.7479765 278.156179"/>
+                <polygon id="Fill-202" fill-opacity="0.6" fill="#A3B1BF" transform="translate(80.583359, 281.575039) rotate(22.000000) translate(-80.583359, -281.575039) " points="80.5833593 283.190958 78.9671128 281.575039 80.5833593 279.959121 82.1996058 281.575039"/>
+                <polygon id="Stroke-204" transform="translate(80.583359, 281.575039) rotate(22.000000) translate(-80.583359, -281.575039) " points="80.5833593 283.190958 78.9671128 281.575039 80.5833593 279.959121 82.1996058 281.575039"/>
+                <polygon id="Fill-206" fill-opacity="0.6" fill="#A3B1BF" transform="translate(96.455246, 283.866302) rotate(22.000000) translate(-96.455246, -283.866302) " points="96.4552463 285.48222 94.8389998 283.866302 96.4552463 282.250383 98.0714929 283.866302"/>
+                <polygon id="Stroke-208" transform="translate(96.455246, 283.866302) rotate(22.000000) translate(-96.455246, -283.866302) " points="96.4552463 285.48222 94.8389998 283.866302 96.4552463 282.250383 98.0714929 283.866302"/>
+                <polygon id="Fill-210" fill-opacity="0.6" fill="#A3B1BF" transform="translate(97.906840, 287.285079) rotate(22.000000) translate(-97.906840, -287.285079) " points="97.9068405 288.900998 96.290594 287.285079 97.9068405 285.66916 99.523087 287.285079"/>
+                <polygon id="Stroke-212" transform="translate(97.906840, 287.285079) rotate(22.000000) translate(-97.906840, -287.285079) " points="97.9068405 288.900998 96.290594 287.285079 97.9068405 285.66916 99.523087 287.285079"/>
+                <polygon id="Fill-214" fill-opacity="0.6" fill="#A3B1BF" transform="translate(99.358435, 290.703856) rotate(22.000000) translate(-99.358435, -290.703856) " points="99.3584347 292.319775 97.7421881 290.703856 99.3584347 289.087938 100.974681 290.703856"/>
+                <polygon id="Stroke-216" transform="translate(99.358435, 290.703856) rotate(22.000000) translate(-99.358435, -290.703856) " points="99.3584347 292.319775 97.7421881 290.703856 99.3584347 289.087938 100.974681 290.703856"/>
+                <polygon id="Fill-218" fill-opacity="0.6" fill="#A3B1BF" transform="translate(100.810064, 294.122716) rotate(22.000000) translate(-100.810064, -294.122716) " points="100.810064 295.738635 99.1938174 294.122716 100.810064 292.506798 102.42631 294.122716"/>
+                <polygon id="Stroke-220" transform="translate(100.810064, 294.122716) rotate(22.000000) translate(-100.810064, -294.122716) " points="100.810064 295.738635 99.1938174 294.122716 100.810064 292.506798 102.42631 294.122716"/>
+                <polygon id="Fill-222" fill-opacity="0.6" fill="#A3B1BF" transform="translate(93.299102, 285.205579) rotate(22.000000) translate(-93.299102, -285.205579) " points="93.2991021 286.821497 91.6828556 285.205579 93.2991021 283.58966 94.9153486 285.205579"/>
+                <polygon id="Stroke-224" transform="translate(93.299102, 285.205579) rotate(22.000000) translate(-93.299102, -285.205579) " points="93.2991021 286.821497 91.6828556 285.205579 93.2991021 283.58966 94.9153486 285.205579"/>
+                <polygon id="Fill-226" fill-opacity="0.6" fill="#A3B1BF" transform="translate(94.750755, 288.624380) rotate(22.000000) translate(-94.750755, -288.624380) " points="94.7507552 290.240299 93.1345086 288.62438 94.7507552 287.008461 96.3670017 288.62438"/>
+                <polygon id="Stroke-228" transform="translate(94.750755, 288.624380) rotate(22.000000) translate(-94.750755, -288.624380) " points="94.7507552 290.240299 93.1345086 288.62438 94.7507552 287.008461 96.3670017 288.62438"/>
+                <polygon id="Fill-230" fill-opacity="0.6" fill="#A3B1BF" transform="translate(96.202326, 292.043216) rotate(22.000000) translate(-96.202326, -292.043216) " points="96.2023255 293.659135 94.586079 292.043216 96.2023255 290.427297 97.8185721 292.043216"/>
+                <polygon id="Stroke-232" transform="translate(96.202326, 292.043216) rotate(22.000000) translate(-96.202326, -292.043216) " points="96.2023255 293.659135 94.586079 292.043216 96.2023255 290.427297 97.8185721 292.043216"/>
+                <polygon id="Fill-234" fill-opacity="0.6" fill="#A3B1BF" transform="translate(97.653979, 295.462017) rotate(22.000000) translate(-97.653979, -295.462017) " points="97.6539786 297.077936 96.0377321 295.462017 97.6539786 293.846099 99.2702252 295.462017"/>
+                <polygon id="Stroke-236" transform="translate(97.653979, 295.462017) rotate(22.000000) translate(-97.653979, -295.462017) " points="97.6539786 297.077936 96.0377321 295.462017 97.6539786 293.846099 99.2702252 295.462017"/>
+                <polygon id="Fill-238" fill-opacity="0.6" fill="#A3B1BF" transform="translate(90.143017, 286.544880) rotate(22.000000) translate(-90.143017, -286.544880) " points="90.1430168 288.160798 88.5267702 286.54488 90.1430168 284.928961 91.7592633 286.54488"/>
+                <polygon id="Stroke-240" transform="translate(90.143017, 286.544880) rotate(22.000000) translate(-90.143017, -286.544880) " points="90.1430168 288.160798 88.5267702 286.54488 90.1430168 284.928961 91.7592633 286.54488"/>
+                <polygon id="Fill-242" fill-opacity="0.6" fill="#A3B1BF" transform="translate(91.594670, 289.963681) rotate(22.000000) translate(-91.594670, -289.963681) " points="91.5946698 291.5796 89.9784233 289.963681 91.5946698 288.347762 93.2109164 289.963681"/>
+                <polygon id="Stroke-244" transform="translate(91.594670, 289.963681) rotate(22.000000) translate(-91.594670, -289.963681) " points="91.5946698 291.5796 89.9784233 289.963681 91.5946698 288.347762 93.2109164 289.963681"/>
+                <polygon id="Fill-246" fill-opacity="0.6" fill="#A3B1BF" transform="translate(93.046240, 293.382517) rotate(22.000000) translate(-93.046240, -293.382517) " points="93.0462402 294.998436 91.4299937 293.382517 93.0462402 291.766598 94.6624868 293.382517"/>
+                <polygon id="Stroke-248" transform="translate(93.046240, 293.382517) rotate(22.000000) translate(-93.046240, -293.382517) " points="93.0462402 294.998436 91.4299937 293.382517 93.0462402 291.766598 94.6624868 293.382517"/>
+                <polygon id="Fill-250" fill-opacity="0.6" fill="#A3B1BF" transform="translate(94.497893, 296.801318) rotate(22.000000) translate(-94.497893, -296.801318) " points="94.4978933 298.417237 92.8816468 296.801318 94.4978933 295.1854 96.1141398 296.801318"/>
+                <polygon id="Stroke-252" transform="translate(94.497893, 296.801318) rotate(22.000000) translate(-94.497893, -296.801318) " points="94.4978933 298.417237 92.8816468 296.801318 94.4978933 295.1854 96.1141398 296.801318"/>
+                <polygon id="Fill-254" fill-opacity="0.6" fill="#A3B1BF" transform="translate(86.986931, 287.884181) rotate(22.000000) translate(-86.986931, -287.884181) " points="86.9869315 289.500099 85.3706849 287.884181 86.9869315 286.268262 88.603178 287.884181"/>
+                <polygon id="Stroke-256" transform="translate(86.986931, 287.884181) rotate(22.000000) translate(-86.986931, -287.884181) " points="86.9869315 289.500099 85.3706849 287.884181 86.9869315 286.268262 88.603178 287.884181"/>
+                <polygon id="Fill-258" fill-opacity="0.6" fill="#A3B1BF" transform="translate(88.438585, 291.302982) rotate(22.000000) translate(-88.438585, -291.302982) " points="88.4385845 292.9189 86.822338 291.302982 88.4385845 289.687063 90.0548311 291.302982"/>
+                <polygon id="Stroke-260" transform="translate(88.438585, 291.302982) rotate(22.000000) translate(-88.438585, -291.302982) " points="88.4385845 292.9189 86.822338 291.302982 88.4385845 289.687063 90.0548311 291.302982"/>
+                <polygon id="Fill-262" fill-opacity="0.6" fill="#A3B1BF" transform="translate(89.890155, 294.721818) rotate(22.000000) translate(-89.890155, -294.721818) " points="89.8901549 296.337737 88.2739084 294.721818 89.8901549 293.105899 91.5064014 294.721818"/>
+                <polygon id="Stroke-264" transform="translate(89.890155, 294.721818) rotate(22.000000) translate(-89.890155, -294.721818) " points="89.8901549 296.337737 88.2739084 294.721818 89.8901549 293.105899 91.5064014 294.721818"/>
+                <polygon id="Fill-266" fill-opacity="0.6" fill="#A3B1BF" transform="translate(91.341749, 298.140595) rotate(22.000000) translate(-91.341749, -298.140595) " points="91.3417491 299.756514 89.7255025 298.140595 91.3417491 296.524677 92.9579956 298.140595"/>
+                <polygon id="Stroke-268" transform="translate(91.341749, 298.140595) rotate(22.000000) translate(-91.341749, -298.140595) " points="91.3417491 299.756514 89.7255025 298.140595 91.3417491 296.524677 92.9579956 298.140595"/>
+                <polygon id="Fill-270" fill-opacity="0.6" fill="#A3B1BF" transform="translate(83.830846, 289.223482) rotate(22.000000) translate(-83.830846, -289.223482) " points="83.8308461 290.8394 82.2145996 289.223482 83.8308461 287.607563 85.4470927 289.223482"/>
+                <polygon id="Stroke-272" transform="translate(83.830846, 289.223482) rotate(22.000000) translate(-83.830846, -289.223482) " points="82.2145996 289.223482 83.8308461 287.607563 85.4470927 289.223482 83.8308461 290.8394"/>
+                <polygon id="Fill-274" fill-opacity="0.6" fill="#A3B1BF" transform="translate(85.282417, 292.642318) rotate(22.000000) translate(-85.282417, -292.642318) " points="85.2824165 294.258236 83.66617 292.642318 85.2824165 291.026399 86.898663 292.642318"/>
+                <polygon id="Stroke-276" transform="translate(85.282417, 292.642318) rotate(22.000000) translate(-85.282417, -292.642318) " points="85.2824165 294.258236 83.66617 292.642318 85.2824165 291.026399 86.898663 292.642318"/>
+                <polygon id="Fill-278" fill-opacity="0.6" fill="#A3B1BF" transform="translate(86.734070, 296.061119) rotate(22.000000) translate(-86.734070, -296.061119) " points="86.7340696 297.677038 85.1178231 296.061119 86.7340696 294.4452 88.3503161 296.061119"/>
+                <polygon id="Stroke-280" transform="translate(86.734070, 296.061119) rotate(22.000000) translate(-86.734070, -296.061119) " points="86.7340696 297.677038 85.1178231 296.061119 86.7340696 294.4452 88.3503161 296.061119"/>
+                <polygon id="Fill-282" fill-opacity="0.6" fill="#A3B1BF" transform="translate(88.185664, 299.479896) rotate(22.000000) translate(-88.185664, -299.479896) " points="88.1856638 301.095815 86.5694172 299.479896 88.1856638 297.863978 89.8019103 299.479896"/>
+                <polygon id="Stroke-284" transform="translate(88.185664, 299.479896) rotate(22.000000) translate(-88.185664, -299.479896) " points="88.1856638 301.095815 86.5694172 299.479896 88.1856638 297.863978 89.8019103 299.479896"/>
+                <polygon id="Fill-286" transform="translate(37.779995, 163.402514) rotate(22.000000) translate(-37.779995, -163.402514) " points="51.9961666 192.018058 66.401345 177.615802 23.5644587 134.78697 9.15864501 149.189862"/>
+                <polygon id="Fill-290" transform="translate(50.400318, 195.682118) rotate(22.000000) translate(-50.400318, -195.682118) " points="54.1737837 198.070743 48.0112085 191.909418 46.6268527 193.293493 52.7894279 199.454818"/>
+                <polygon id="Stroke-292" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(50.400318, 195.682118) rotate(22.000000) translate(-50.400318, -195.682118) " points="54.1737837 198.070743 48.0112085 191.909418 46.6268527 193.293493 52.7894279 199.454818"/>
+                <polygon id="Fill-294" fill-opacity="0.8" fill="#A3B1BF" transform="translate(52.603532, 200.871447) rotate(22.000000) translate(-52.603532, -200.871447) " points="52.712807 203.746308 55.4789773 200.980699 52.4942579 197.996585 49.7280876 200.762195"/>
+                <polygon id="Stroke-296" stroke="#A3B1BF" stroke-width="1.62" fill="#FFFFFF" stroke-linejoin="round" transform="translate(52.603532, 200.871447) rotate(22.000000) translate(-52.603532, -200.871447) " points="52.712807 203.746308 55.4789773 200.980699 52.4942579 197.996585 49.7280876 200.762195"/>
+                <polygon id="Fill-298" fill-opacity="0.8" fill="#A3B1BF" transform="translate(53.983257, 183.836778) rotate(22.000000) translate(-53.983257, -183.836778) " points="52.3670108 183.836778 53.9832574 185.452697 55.5995039 183.836778 53.9832574 182.22086"/>
+                <polygon id="Stroke-300" transform="translate(53.983257, 183.836778) rotate(22.000000) translate(-53.983257, -183.836778) " points="52.3670108 183.836778 53.9832574 185.452697 55.5995039 183.836778 53.9832574 182.22086"/>
+                <polygon id="Fill-302" fill-opacity="0.8" fill="#A3B1BF" transform="translate(52.531663, 180.418001) rotate(22.000000) translate(-52.531663, -180.418001) " points="50.9154167 180.418001 52.5316632 182.03392 54.1479097 180.418001 52.5316632 178.802082"/>
+                <polygon id="Stroke-304" transform="translate(52.531663, 180.418001) rotate(22.000000) translate(-52.531663, -180.418001) " points="50.9154167 180.418001 52.5316632 182.03392 54.1479097 180.418001 52.5316632 178.802082"/>
+                <polygon id="Fill-306" fill-opacity="0.8" fill="#A3B1BF" transform="translate(51.080034, 176.999141) rotate(22.000000) translate(-51.080034, -176.999141) " points="49.4637874 176.999141 51.0800339 178.61506 52.6962805 176.999141 51.0800339 175.383222"/>
+                <polygon id="Stroke-308" transform="translate(51.080034, 176.999141) rotate(22.000000) translate(-51.080034, -176.999141) " points="49.4637874 176.999141 51.0800339 178.61506 52.6962805 176.999141 51.0800339 175.383222"/>
+                <polygon id="Fill-310" fill-opacity="0.8" fill="#A3B1BF" transform="translate(49.628440, 173.580364) rotate(22.000000) translate(-49.628440, -173.580364) " points="48.0121932 173.580364 49.6284397 175.196282 51.2446863 173.580364 49.6284397 171.964445"/>
+                <polygon id="Stroke-312" transform="translate(49.628440, 173.580364) rotate(22.000000) translate(-49.628440, -173.580364) " points="48.0121932 173.580364 49.6284397 175.196282 51.2446863 173.580364 49.6284397 171.964445"/>
+                <polygon id="Fill-314" fill-opacity="0.8" fill="#A3B1BF" transform="translate(50.827172, 185.176079) rotate(22.000000) translate(-50.827172, -185.176079) " points="49.2109255 185.176079 50.8271721 186.791998 52.4434186 185.176079 50.8271721 183.560161"/>
+                <polygon id="Stroke-316" transform="translate(50.827172, 185.176079) rotate(22.000000) translate(-50.827172, -185.176079) " points="49.2109255 185.176079 50.8271721 186.791998 52.4434186 185.176079 50.8271721 183.560161"/>
+                <polygon id="Fill-318" fill-opacity="0.8" fill="#A3B1BF" transform="translate(49.375578, 181.757302) rotate(22.000000) translate(-49.375578, -181.757302) " points="47.7593313 181.757302 49.3755779 183.373221 50.9918244 181.757302 49.3755779 180.141383"/>
+                <polygon id="Stroke-320" transform="translate(49.375578, 181.757302) rotate(22.000000) translate(-49.375578, -181.757302) " points="47.7593313 181.757302 49.3755779 183.373221 50.9918244 181.757302 49.3755779 180.141383"/>
+                <polygon id="Fill-322" fill-opacity="0.8" fill="#A3B1BF" transform="translate(47.923949, 178.338442) rotate(22.000000) translate(-47.923949, -178.338442) " points="46.3077021 178.338442 47.9239486 179.954361 49.5401951 178.338442 47.9239486 176.722523"/>
+                <polygon id="Stroke-324" transform="translate(47.923949, 178.338442) rotate(22.000000) translate(-47.923949, -178.338442) " points="46.3077021 178.338442 47.9239486 179.954361 49.5401951 178.338442 47.9239486 176.722523"/>
+                <polygon id="Fill-326" fill-opacity="0.8" fill="#A3B1BF" transform="translate(46.472354, 174.919665) rotate(22.000000) translate(-46.472354, -174.919665) " points="44.8561079 174.919665 46.4723544 176.535583 48.088601 174.919665 46.4723544 173.303746"/>
+                <polygon id="Stroke-328" transform="translate(46.472354, 174.919665) rotate(22.000000) translate(-46.472354, -174.919665) " points="44.8561079 174.919665 46.4723544 176.535583 48.088601 174.919665 46.4723544 173.303746"/>
+                <polygon id="Fill-330" fill-opacity="0.8" fill="#A3B1BF" transform="translate(47.671087, 186.515380) rotate(22.000000) translate(-47.671087, -186.515380) " points="46.0548402 186.51538 47.6710867 188.131299 49.2873333 186.51538 47.6710867 184.899461"/>
+                <polygon id="Stroke-332" transform="translate(47.671087, 186.515380) rotate(22.000000) translate(-47.671087, -186.515380) " points="46.0548402 186.51538 47.6710867 188.131299 49.2873333 186.51538 47.6710867 184.899461"/>
+                <polygon id="Fill-334" fill-opacity="0.8" fill="#A3B1BF" transform="translate(46.219493, 183.096603) rotate(22.000000) translate(-46.219493, -183.096603) " points="44.603246 183.096603 46.2194926 184.712521 47.8357391 183.096603 46.2194926 181.480684"/>
+                <polygon id="Stroke-336" transform="translate(46.219493, 183.096603) rotate(22.000000) translate(-46.219493, -183.096603) " points="44.603246 183.096603 46.2194926 184.712521 47.8357391 183.096603 46.2194926 181.480684"/>
+                <polygon id="Fill-338" fill-opacity="0.8" fill="#A3B1BF" transform="translate(44.767839, 179.677802) rotate(22.000000) translate(-44.767839, -179.677802) " points="43.1515929 179.677802 44.7678395 181.29372 46.384086 179.677802 44.7678395 178.061883"/>
+                <polygon id="Stroke-340" transform="translate(44.767839, 179.677802) rotate(22.000000) translate(-44.767839, -179.677802) " points="43.1515929 179.677802 44.7678395 181.29372 46.384086 179.677802 44.7678395 178.061883"/>
+                <polygon id="Fill-342" fill-opacity="0.8" fill="#A3B1BF" transform="translate(43.316269, 176.258965) rotate(22.000000) translate(-43.316269, -176.258965) " points="41.7000226 176.258965 43.3162691 177.874884 44.9325156 176.258965 43.3162691 174.643047"/>
+                <polygon id="Stroke-344" transform="translate(43.316269, 176.258965) rotate(22.000000) translate(-43.316269, -176.258965) " points="41.7000226 176.258965 43.3162691 177.874884 44.9325156 176.258965 43.3162691 174.643047"/>
+                <polygon id="Fill-346" fill-opacity="0.8" fill="#A3B1BF" transform="translate(44.514978, 187.854740) rotate(22.000000) translate(-44.514978, -187.854740) " points="42.8987311 187.85474 44.5149776 189.470659 46.1312242 187.85474 44.5149776 186.238821"/>
+                <polygon id="Stroke-348" transform="translate(44.514978, 187.854740) rotate(22.000000) translate(-44.514978, -187.854740) " points="42.8987311 187.85474 44.5149776 189.470659 46.1312242 187.85474 44.5149776 186.238821"/>
+                <polygon id="Fill-350" fill-opacity="0.8" fill="#A3B1BF" transform="translate(43.063348, 184.435880) rotate(22.000000) translate(-43.063348, -184.435880) " points="41.4471018 184.43588 43.0633483 186.051799 44.6795949 184.43588 43.0633483 182.819961"/>
+                <polygon id="Stroke-352" transform="translate(43.063348, 184.435880) rotate(22.000000) translate(-43.063348, -184.435880) " points="41.4471018 184.43588 43.0633483 186.051799 44.6795949 184.43588 43.0633483 182.819961"/>
+                <polygon id="Fill-354" fill-opacity="0.8" fill="#A3B1BF" transform="translate(41.611754, 181.017103) rotate(22.000000) translate(-41.611754, -181.017103) " points="39.9955076 181.017103 41.6117542 182.633021 43.2280007 181.017103 41.6117542 179.401184"/>
+                <polygon id="Stroke-356" transform="translate(41.611754, 181.017103) rotate(22.000000) translate(-41.611754, -181.017103) " points="39.9955076 181.017103 41.6117542 182.633021 43.2280007 181.017103 41.6117542 179.401184"/>
+                <polygon id="Fill-358" fill-opacity="0.8" fill="#A3B1BF" transform="translate(40.160184, 177.598266) rotate(22.000000) translate(-40.160184, -177.598266) " points="38.5439373 177.598266 40.1601838 179.214185 41.7764303 177.598266 40.1601838 175.982348"/>
+                <polygon id="Stroke-360" transform="translate(40.160184, 177.598266) rotate(22.000000) translate(-40.160184, -177.598266) " points="38.5439373 177.598266 40.1601838 179.214185 41.7764303 177.598266 40.1601838 175.982348"/>
+                <polygon id="Fill-362" fill-opacity="0.8" fill="#A3B1BF" transform="translate(41.358892, 189.194041) rotate(22.000000) translate(-41.358892, -189.194041) " points="39.7426458 189.194041 41.3588923 190.80996 42.9751388 189.194041 41.3588923 187.578122"/>
+                <polygon id="Stroke-364" transform="translate(41.358892, 189.194041) rotate(22.000000) translate(-41.358892, -189.194041) " points="39.7426458 189.194041 41.3588923 190.80996 42.9751388 189.194041 41.3588923 187.578122"/>
+                <polygon id="Fill-366" fill-opacity="0.8" fill="#A3B1BF" transform="translate(39.907263, 185.775181) rotate(22.000000) translate(-39.907263, -185.775181) " points="38.2910165 185.775181 39.907263 187.3911 41.5235095 185.775181 39.907263 184.159262"/>
+                <polygon id="Stroke-368" transform="translate(39.907263, 185.775181) rotate(22.000000) translate(-39.907263, -185.775181) " points="38.2910165 185.775181 39.907263 187.3911 41.5235095 185.775181 39.907263 184.159262"/>
+                <polygon id="Fill-370" fill-opacity="0.8" fill="#A3B1BF" transform="translate(38.455669, 182.356404) rotate(22.000000) translate(-38.455669, -182.356404) " points="36.8394223 182.356404 38.4556688 183.972322 40.0719154 182.356404 38.4556688 180.740485"/>
+                <polygon id="Stroke-372" transform="translate(38.455669, 182.356404) rotate(22.000000) translate(-38.455669, -182.356404) " points="36.8394223 182.356404 38.4556688 183.972322 40.0719154 182.356404 38.4556688 180.740485"/>
+                <polygon id="Fill-374" fill-opacity="0.8" fill="#A3B1BF" transform="translate(37.004016, 178.937602) rotate(22.000000) translate(-37.004016, -178.937602) " points="35.3877692 178.937602 37.0040158 180.553521 38.6202623 178.937602 37.0040158 177.321684"/>
+                <polygon id="Stroke-376" transform="translate(37.004016, 178.937602) rotate(22.000000) translate(-37.004016, -178.937602) " points="35.3877692 178.937602 37.0040158 180.553521 38.6202623 178.937602 37.0040158 177.321684"/>
+                <polygon id="Fill-378" fill-opacity="0.8" fill="#A3B1BF" transform="translate(46.380894, 165.931897) rotate(22.000000) translate(-46.380894, -165.931897) " points="44.7646475 165.931897 46.380894 167.547816 47.9971405 165.931897 46.380894 164.315979"/>
+                <polygon id="Stroke-380" transform="translate(46.380894, 165.931897) rotate(22.000000) translate(-46.380894, -165.931897) " points="44.7646475 165.931897 46.380894 167.547816 47.9971405 165.931897 46.380894 164.315979"/>
+                <polygon id="Fill-382" fill-opacity="0.8" fill="#A3B1BF" transform="translate(44.929324, 162.513061) rotate(22.000000) translate(-44.929324, -162.513061) " points="43.3130771 162.513061 44.9293236 164.12898 46.5455702 162.513061 44.9293236 160.897143"/>
+                <polygon id="Stroke-384" transform="translate(44.929324, 162.513061) rotate(22.000000) translate(-44.929324, -162.513061) " points="43.3130771 162.513061 44.9293236 164.12898 46.5455702 162.513061 44.9293236 160.897143"/>
+                <polygon id="Fill-386" fill-opacity="0.8" fill="#A3B1BF" transform="translate(43.477729, 159.094284) rotate(22.000000) translate(-43.477729, -159.094284) " points="41.8614829 159.094284 43.4777295 160.710203 45.093976 159.094284 43.4777295 157.478365"/>
+                <polygon id="Stroke-388" transform="translate(43.477729, 159.094284) rotate(22.000000) translate(-43.477729, -159.094284) " points="41.8614829 159.094284 43.4777295 160.710203 45.093976 159.094284 43.4777295 157.478365"/>
+                <polygon id="Fill-390" fill-opacity="0.8" fill="#A3B1BF" transform="translate(42.026100, 155.675424) rotate(22.000000) translate(-42.026100, -155.675424) " points="40.4098536 155.675424 42.0261002 157.291342 43.6423467 155.675424 42.0261002 154.059505"/>
+                <polygon id="Stroke-392" transform="translate(42.026100, 155.675424) rotate(22.000000) translate(-42.026100, -155.675424) " points="40.4098536 155.675424 42.0261002 157.291342 43.6423467 155.675424 42.0261002 154.059505"/>
+                <polygon id="Fill-394" fill-opacity="0.8" fill="#A3B1BF" transform="translate(43.224809, 167.271198) rotate(22.000000) translate(-43.224809, -167.271198) " points="41.6085622 167.271198 43.2248087 168.887117 44.8410552 167.271198 43.2248087 165.65528"/>
+                <polygon id="Stroke-396" transform="translate(43.224809, 167.271198) rotate(22.000000) translate(-43.224809, -167.271198) " points="41.6085622 167.271198 43.2248087 168.887117 44.8410552 167.271198 43.2248087 165.65528"/>
+                <polygon id="Fill-398" fill-opacity="0.8" fill="#A3B1BF" transform="translate(41.773238, 163.852362) rotate(22.000000) translate(-41.773238, -163.852362) " points="40.1569918 163.852362 41.7732383 165.468281 43.3894848 163.852362 41.7732383 162.236443"/>
+                <polygon id="Stroke-400" transform="translate(41.773238, 163.852362) rotate(22.000000) translate(-41.773238, -163.852362) " points="40.1569918 163.852362 41.7732383 165.468281 43.3894848 163.852362 41.7732383 162.236443"/>
+                <polygon id="Fill-402" fill-opacity="0.8" fill="#A3B1BF" transform="translate(40.321585, 160.433561) rotate(22.000000) translate(-40.321585, -160.433561) " points="38.7053387 160.433561 40.3215852 162.04948 41.9378318 160.433561 40.3215852 158.817642"/>
+                <polygon id="Stroke-404" transform="translate(40.321585, 160.433561) rotate(22.000000) translate(-40.321585, -160.433561) " points="38.7053387 160.433561 40.3215852 162.04948 41.9378318 160.433561 40.3215852 158.817642"/>
+                <polygon id="Fill-406" fill-opacity="0.8" fill="#A3B1BF" transform="translate(38.869991, 157.014784) rotate(22.000000) translate(-38.869991, -157.014784) " points="37.2537445 157.014784 38.8699911 158.630702 40.4862376 157.014784 38.8699911 155.398865"/>
+                <polygon id="Stroke-408" transform="translate(38.869991, 157.014784) rotate(22.000000) translate(-38.869991, -157.014784) " points="37.2537445 157.014784 38.8699911 158.630702 40.4862376 157.014784 38.8699911 155.398865"/>
+                <polygon id="Fill-410" fill-opacity="0.8" fill="#A3B1BF" transform="translate(40.068723, 168.610499) rotate(22.000000) translate(-40.068723, -168.610499) " points="38.4524768 168.610499 40.0687234 170.226418 41.6849699 168.610499 40.0687234 166.994581"/>
+                <polygon id="Stroke-412" transform="translate(40.068723, 168.610499) rotate(22.000000) translate(-40.068723, -168.610499) " points="38.4524768 168.610499 40.0687234 170.226418 41.6849699 168.610499 40.0687234 166.994581"/>
+                <polygon id="Fill-414" fill-opacity="0.8" fill="#A3B1BF" transform="translate(38.617129, 165.191722) rotate(22.000000) translate(-38.617129, -165.191722) " points="37.0008827 165.191722 38.6171292 166.807641 40.2333757 165.191722 38.6171292 163.575803"/>
+                <polygon id="Stroke-416" transform="translate(38.617129, 165.191722) rotate(22.000000) translate(-38.617129, -165.191722) " points="37.0008827 165.191722 38.6171292 166.807641 40.2333757 165.191722 38.6171292 163.575803"/>
+                <polygon id="Fill-418" fill-opacity="0.8" fill="#A3B1BF" transform="translate(37.165500, 161.772862) rotate(22.000000) translate(-37.165500, -161.772862) " points="35.5492534 161.772862 37.1654999 163.388781 38.7817464 161.772862 37.1654999 160.156943"/>
+                <polygon id="Stroke-420" transform="translate(37.165500, 161.772862) rotate(22.000000) translate(-37.165500, -161.772862) " points="35.5492534 161.772862 37.1654999 163.388781 38.7817464 161.772862 37.1654999 160.156943"/>
+                <polygon id="Fill-422" fill-opacity="0.8" fill="#A3B1BF" transform="translate(35.713906, 158.354085) rotate(22.000000) translate(-35.713906, -158.354085) " points="34.0976592 158.354085 35.7139057 159.970003 37.3301523 158.354085 35.7139057 156.738166"/>
+                <polygon id="Stroke-424" transform="translate(35.713906, 158.354085) rotate(22.000000) translate(-35.713906, -158.354085) " points="34.0976592 158.354085 35.7139057 159.970003 37.3301523 158.354085 35.7139057 156.738166"/>
+                <polygon id="Fill-426" fill-opacity="0.8" fill="#A3B1BF" transform="translate(36.912638, 169.949800) rotate(22.000000) translate(-36.912638, -169.949800) " points="35.2963915 169.9498 36.912638 171.565719 38.5288846 169.9498 36.912638 168.333882"/>
+                <polygon id="Stroke-428" transform="translate(36.912638, 169.949800) rotate(22.000000) translate(-36.912638, -169.949800) " points="35.2963915 169.9498 36.912638 171.565719 38.5288846 169.9498 36.912638 168.333882"/>
+                <polygon id="Fill-430" fill-opacity="0.8" fill="#A3B1BF" transform="translate(35.461068, 166.530964) rotate(22.000000) translate(-35.461068, -166.530964) " points="33.8448211 166.530964 35.4610677 168.146883 37.0773142 166.530964 35.4610677 164.915045"/>
+                <polygon id="Stroke-432" transform="translate(35.461068, 166.530964) rotate(22.000000) translate(-35.461068, -166.530964) " points="33.8448211 166.530964 35.4610677 168.146883 37.0773142 166.530964 35.4610677 164.915045"/>
+                <polygon id="Fill-434" fill-opacity="0.8" fill="#A3B1BF" transform="translate(34.009415, 163.112163) rotate(22.000000) translate(-34.009415, -163.112163) " points="32.3931681 163.112163 34.0094146 164.728081 35.6256611 163.112163 34.0094146 161.496244"/>
+                <polygon id="Stroke-436" transform="translate(34.009415, 163.112163) rotate(22.000000) translate(-34.009415, -163.112163) " points="32.3931681 163.112163 34.0094146 164.728081 35.6256611 163.112163 34.0094146 161.496244"/>
+                <polygon id="Fill-438" fill-opacity="0.8" fill="#A3B1BF" transform="translate(32.557820, 159.693385) rotate(22.000000) translate(-32.557820, -159.693385) " points="30.9415739 159.693385 32.5578204 161.309304 34.174067 159.693385 32.5578204 158.077467"/>
+                <polygon id="Stroke-440" transform="translate(32.557820, 159.693385) rotate(22.000000) translate(-32.557820, -159.693385) " points="30.9415739 159.693385 32.5578204 161.309304 34.174067 159.693385 32.5578204 158.077467"/>
+                <polygon id="Fill-442" fill-opacity="0.8" fill="#A3B1BF" transform="translate(33.756553, 171.289101) rotate(22.000000) translate(-33.756553, -171.289101) " points="32.1403062 171.289101 33.7565527 172.90502 35.3727993 171.289101 33.7565527 169.673182"/>
+                <polygon id="Stroke-444" transform="translate(33.756553, 171.289101) rotate(22.000000) translate(-33.756553, -171.289101) " points="32.1403062 171.289101 33.7565527 172.90502 35.3727993 171.289101 33.7565527 169.673182"/>
+                <polygon id="Fill-446" fill-opacity="0.8" fill="#A3B1BF" transform="translate(32.304959, 167.870324) rotate(22.000000) translate(-32.304959, -167.870324) " points="30.688712 167.870324 32.3049586 169.486242 33.9212051 167.870324 32.3049586 166.254405"/>
+                <polygon id="Stroke-448" transform="translate(32.304959, 167.870324) rotate(22.000000) translate(-32.304959, -167.870324) " points="30.688712 167.870324 32.3049586 169.486242 33.9212051 167.870324 32.3049586 166.254405"/>
+                <polygon id="Fill-450" fill-opacity="0.8" fill="#A3B1BF" transform="translate(30.853329, 164.451464) rotate(22.000000) translate(-30.853329, -164.451464) " points="29.2370827 164.451464 30.8533293 166.067382 32.4695758 164.451464 30.8533293 162.835545"/>
+                <polygon id="Stroke-452" transform="translate(30.853329, 164.451464) rotate(22.000000) translate(-30.853329, -164.451464) " points="29.2370827 164.451464 30.8533293 166.067382 32.4695758 164.451464 30.8533293 162.835545"/>
+                <polygon id="Fill-454" fill-opacity="0.8" fill="#A3B1BF" transform="translate(29.401735, 161.032686) rotate(22.000000) translate(-29.401735, -161.032686) " points="27.7854886 161.032686 29.4017351 162.648605 31.0179816 161.032686 29.4017351 159.416768"/>
+                <polygon id="Stroke-456" transform="translate(29.401735, 161.032686) rotate(22.000000) translate(-29.401735, -161.032686) " points="27.7854886 161.032686 29.4017351 162.648605 31.0179816 161.032686 29.4017351 159.416768"/>
+                <polygon id="Fill-458" fill-opacity="0.8" fill="#A3B1BF" transform="translate(38.778613, 148.026981) rotate(22.000000) translate(-38.778613, -148.026981) " points="37.1623668 148.026981 38.7786133 149.6429 40.3948599 148.026981 38.7786133 146.411063"/>
+                <polygon id="Stroke-460" transform="translate(38.778613, 148.026981) rotate(22.000000) translate(-38.778613, -148.026981) " points="37.1623668 148.026981 38.7786133 149.6429 40.3948599 148.026981 38.7786133 146.411063"/>
+                <polygon id="Fill-462" fill-opacity="0.8" fill="#A3B1BF" transform="translate(37.326984, 144.608121) rotate(22.000000) translate(-37.326984, -144.608121) " points="35.7107375 144.608121 37.3269841 146.22404 38.9432306 144.608121 37.3269841 142.992203"/>
+                <polygon id="Stroke-464" transform="translate(37.326984, 144.608121) rotate(22.000000) translate(-37.326984, -144.608121) " points="35.7107375 144.608121 37.3269841 146.22404 38.9432306 144.608121 37.3269841 142.992203"/>
+                <polygon id="Fill-466" fill-opacity="0.8" fill="#A3B1BF" transform="translate(35.875390, 141.189344) rotate(22.000000) translate(-35.875390, -141.189344) " points="34.2591433 141.189344 35.8753899 142.805263 37.4916364 141.189344 35.8753899 139.573425"/>
+                <polygon id="Stroke-468" transform="translate(35.875390, 141.189344) rotate(22.000000) translate(-35.875390, -141.189344) " points="34.2591433 141.189344 35.8753899 142.805263 37.4916364 141.189344 35.8753899 139.573425"/>
+                <polygon id="Fill-470" fill-opacity="0.8" fill="#A3B1BF" transform="translate(34.423796, 137.770567) rotate(22.000000) translate(-34.423796, -137.770567) " points="32.8075492 137.770567 34.4237957 139.386485 36.0400422 137.770567 34.4237957 136.154648"/>
+                <polygon id="Stroke-472" fill="#B2BECA" transform="translate(34.423796, 137.770567) rotate(22.000000) translate(-34.423796, -137.770567) " points="34.4237957 139.386485 36.0400422 137.770567 34.4237957 136.154648 32.8075492 137.770567"/>
+                <polygon id="Fill-474" fill-opacity="0.8" fill="#A3B1BF" transform="translate(35.622528, 149.366282) rotate(22.000000) translate(-35.622528, -149.366282) " points="34.0062815 149.366282 35.622528 150.982201 37.2387746 149.366282 35.622528 147.750364"/>
+                <polygon id="Stroke-476" transform="translate(35.622528, 149.366282) rotate(22.000000) translate(-35.622528, -149.366282) " points="34.0062815 149.366282 35.622528 150.982201 37.2387746 149.366282 35.622528 147.750364"/>
+                <polygon id="Fill-478" fill-opacity="0.8" fill="#A3B1BF" transform="translate(34.170875, 145.947481) rotate(22.000000) translate(-34.170875, -145.947481) " points="32.5546284 145.947481 34.1708749 147.5634 35.7871215 145.947481 34.1708749 144.331563"/>
+                <polygon id="Stroke-480" transform="translate(34.170875, 145.947481) rotate(22.000000) translate(-34.170875, -145.947481) " points="32.5546284 145.947481 34.1708749 147.5634 35.7871215 145.947481 34.1708749 144.331563"/>
+                <polygon id="Fill-482" fill-opacity="0.8" fill="#A3B1BF" transform="translate(32.719305, 142.528645) rotate(22.000000) translate(-32.719305, -142.528645) " points="31.103058 142.528645 32.7193046 144.144564 34.3355511 142.528645 32.7193046 140.912726"/>
+                <polygon id="Stroke-484" transform="translate(32.719305, 142.528645) rotate(22.000000) translate(-32.719305, -142.528645) " points="31.103058 142.528645 32.7193046 144.144564 34.3355511 142.528645 32.7193046 140.912726"/>
+                <polygon id="Fill-486" fill-opacity="0.8" fill="#A3B1BF" transform="translate(31.267651, 139.109844) rotate(22.000000) translate(-31.267651, -139.109844) " points="29.651405 139.109844 31.2676515 140.725763 32.883898 139.109844 31.2676515 137.493925"/>
+                <polygon id="Stroke-488" transform="translate(31.267651, 139.109844) rotate(22.000000) translate(-31.267651, -139.109844) " points="29.651405 139.109844 31.2676515 140.725763 32.883898 139.109844 31.2676515 137.493925"/>
+                <polygon id="Fill-490" fill-opacity="0.8" fill="#A3B1BF" transform="translate(32.466384, 150.705559) rotate(22.000000) translate(-32.466384, -150.705559) " points="30.8501373 150.705559 32.4663838 152.321478 34.0826303 150.705559 32.4663838 149.089641"/>
+                <polygon id="Stroke-492" transform="translate(32.466384, 150.705559) rotate(22.000000) translate(-32.466384, -150.705559) " points="30.8501373 150.705559 32.4663838 152.321478 34.0826303 150.705559 32.4663838 149.089641"/>
+                <polygon id="Fill-494" fill-opacity="0.8" fill="#A3B1BF" transform="translate(31.014790, 147.286782) rotate(22.000000) translate(-31.014790, -147.286782) " points="29.3985431 147.286782 31.0147896 148.902701 32.6310362 147.286782 31.0147896 145.670863"/>
+                <polygon id="Stroke-496" transform="translate(31.014790, 147.286782) rotate(22.000000) translate(-31.014790, -147.286782) " points="29.3985431 147.286782 31.0147896 148.902701 32.6310362 147.286782 31.0147896 145.670863"/>
+                <polygon id="Fill-498" fill-opacity="0.8" fill="#A3B1BF" transform="translate(29.563219, 143.867946) rotate(22.000000) translate(-29.563219, -143.867946) " points="27.9469727 143.867946 29.5632192 145.483865 31.1794658 143.867946 29.5632192 142.252027"/>
+                <polygon id="Stroke-500" transform="translate(29.563219, 143.867946) rotate(22.000000) translate(-29.563219, -143.867946) " points="27.9469727 143.867946 29.5632192 145.483865 31.1794658 143.867946 29.5632192 142.252027"/>
+                <polygon id="Fill-502" fill-opacity="0.8" fill="#A3B1BF" transform="translate(28.111566, 140.449145) rotate(22.000000) translate(-28.111566, -140.449145) " points="26.4953196 140.449145 28.1115662 142.065063 29.7278127 140.449145 28.1115662 138.833226"/>
+                <polygon id="Stroke-504" transform="translate(28.111566, 140.449145) rotate(22.000000) translate(-28.111566, -140.449145) " points="26.4953196 140.449145 28.1115662 142.065063 29.7278127 140.449145 28.1115662 138.833226"/>
+                <polygon id="Fill-506" fill-opacity="0.8" fill="#A3B1BF" transform="translate(29.310298, 152.044860) rotate(22.000000) translate(-29.310298, -152.044860) " points="27.6940519 152.04486 29.3102985 153.660779 30.926545 152.04486 29.3102985 150.428942"/>
+                <polygon id="Stroke-508" transform="translate(29.310298, 152.044860) rotate(22.000000) translate(-29.310298, -152.044860) " points="27.6940519 152.04486 29.3102985 153.660779 30.926545 152.04486 29.3102985 150.428942"/>
+                <polygon id="Fill-510" fill-opacity="0.8" fill="#A3B1BF" transform="translate(27.858704, 148.626083) rotate(22.000000) translate(-27.858704, -148.626083) " points="26.2424578 148.626083 27.8587043 150.242002 29.4749508 148.626083 27.8587043 147.010164"/>
+                <polygon id="Stroke-512" transform="translate(27.858704, 148.626083) rotate(22.000000) translate(-27.858704, -148.626083) " points="26.2424578 148.626083 27.8587043 150.242002 29.4749508 148.626083 27.8587043 147.010164"/>
+                <polygon id="Fill-514" fill-opacity="0.8" fill="#A3B1BF" transform="translate(26.407134, 145.207247) rotate(22.000000) translate(-26.407134, -145.207247) " points="24.7908874 145.207247 26.4071339 146.823166 28.0233805 145.207247 26.4071339 143.591328"/>
+                <polygon id="Stroke-516" transform="translate(26.407134, 145.207247) rotate(22.000000) translate(-26.407134, -145.207247) " points="24.7908874 145.207247 26.4071339 146.823166 28.0233805 145.207247 26.4071339 143.591328"/>
+                <polygon id="Fill-518" fill-opacity="0.8" fill="#A3B1BF" transform="translate(24.955481, 141.788446) rotate(22.000000) translate(-24.955481, -141.788446) " points="23.3392343 141.788446 24.9554808 143.404364 26.5717274 141.788446 24.9554808 140.172527"/>
+                <polygon id="Stroke-520" transform="translate(24.955481, 141.788446) rotate(22.000000) translate(-24.955481, -141.788446) " points="23.3392343 141.788446 24.9554808 143.404364 26.5717274 141.788446 24.9554808 140.172527"/>
+                <polygon id="Fill-522" fill-opacity="0.8" fill="#A3B1BF" transform="translate(26.154213, 153.384161) rotate(22.000000) translate(-26.154213, -153.384161) " points="24.5379666 153.384161 26.1542132 155.00008 27.7704597 153.384161 26.1542132 151.768243"/>
+                <polygon id="Stroke-524" transform="translate(26.154213, 153.384161) rotate(22.000000) translate(-26.154213, -153.384161) " points="24.5379666 153.384161 26.1542132 155.00008 27.7704597 153.384161 26.1542132 151.768243"/>
+                <polygon id="Fill-526" fill-opacity="0.8" fill="#A3B1BF" transform="translate(24.702619, 149.965384) rotate(22.000000) translate(-24.702619, -149.965384) " points="23.0863724 149.965384 24.702619 151.581303 26.3188655 149.965384 24.702619 148.349465"/>
+                <polygon id="Stroke-528" transform="translate(24.702619, 149.965384) rotate(22.000000) translate(-24.702619, -149.965384) " points="23.0863724 149.965384 24.702619 151.581303 26.3188655 149.965384 24.702619 148.349465"/>
+                <polygon id="Fill-530" fill-opacity="0.8" fill="#A3B1BF" transform="translate(23.250966, 146.546583) rotate(22.000000) translate(-23.250966, -146.546583) " points="21.6347194 146.546583 23.2509659 148.162502 24.8672124 146.546583 23.2509659 144.930664"/>
+                <polygon id="Stroke-532" transform="translate(23.250966, 146.546583) rotate(22.000000) translate(-23.250966, -146.546583) " points="21.6347194 146.546583 23.2509659 148.162502 24.8672124 146.546583 23.2509659 144.930664"/>
+                <polygon id="Fill-534" fill-opacity="0.8" fill="#A3B1BF" transform="translate(21.799396, 143.127747) rotate(22.000000) translate(-21.799396, -143.127747) " points="20.183149 143.127747 21.7993955 144.743665 23.4156421 143.127747 21.7993955 141.511828"/>
+                <polygon id="Stroke-536" transform="translate(21.799396, 143.127747) rotate(22.000000) translate(-21.799396, -143.127747) " points="20.183149 143.127747 21.7993955 144.743665 23.4156421 143.127747 21.7993955 141.511828"/>
+                <path d="M129.314819,189.942425 C126.372666,187.000233 124.490222,184.112668 125.110927,183.492089 C125.731631,182.87151 128.619783,184.753573 131.562571,187.695129 C134.504724,190.637321 136.387169,193.524886 135.766464,194.145465 C135.145759,194.766044 132.257608,192.883981 129.314819,189.942425 Z" id="Fill-538" fill="#F5F5F5" transform="translate(130.438695, 188.818777) rotate(22.000000) translate(-130.438695, -188.818777) "/>
+                <path d="M129.314819,189.942425 C126.372666,187.000233 124.490222,184.112668 125.110927,183.492089 C125.731631,182.87151 128.619783,184.753573 131.562571,187.695129 C134.504724,190.637321 136.387169,193.524886 135.766464,194.145465 C135.145759,194.766044 132.257608,192.883981 129.314819,189.942425 Z" id="Stroke-540" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(130.438695, 188.818777) rotate(22.000000) translate(-130.438695, -188.818777) "/>
+                <path d="M136.083433,187.715086 C130.20421,181.837055 126.443133,176.067006 127.683272,174.827118 C128.92341,173.587231 134.69463,177.347545 140.573854,183.225576 C146.453713,189.104243 150.21479,194.874292 148.974651,196.114179 C147.734513,197.354066 141.963293,193.593752 136.083433,187.715086 Z" id="Fill-542" fill="#F5F5F5" transform="translate(138.328961, 185.470648) rotate(22.000000) translate(-138.328961, -185.470648) "/>
+                <path d="M136.083433,187.715086 C130.20421,181.837055 126.443133,176.067006 127.683272,174.827118 C128.92341,173.587231 134.69463,177.347545 140.573854,183.225576 C146.453713,189.104243 150.21479,194.874292 148.974651,196.114179 C147.734513,197.354066 141.963293,193.593752 136.083433,187.715086 Z" id="Stroke-544" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(138.328961, 185.470648) rotate(22.000000) translate(-138.328961, -185.470648) "/>
+                <path d="M146.697288,183.650834 C138.818086,175.773231 133.777481,168.04045 135.43947,166.378798 C137.101459,164.717146 144.835809,169.756729 152.715011,177.634332 C160.594213,185.511936 165.634818,193.244716 163.972829,194.906369 C162.310839,196.568021 154.57649,191.528438 146.697288,183.650834 Z" id="Fill-546" fill-opacity="0.35" fill="#F5F5F5" transform="translate(149.706149, 180.642583) rotate(22.000000) translate(-149.706149, -180.642583) "/>
+                <path d="M146.697288,183.650834 C138.818086,175.773231 133.777481,168.04045 135.43947,166.378798 C137.101459,164.717146 144.835809,169.756729 152.715011,177.634332 C160.594213,185.511936 165.634818,193.244716 163.972829,194.906369 C162.310839,196.568021 154.57649,191.528438 146.697288,183.650834 Z" id="Stroke-548" stroke="#A3B1BF" stroke-width="1.62" stroke-linejoin="round" transform="translate(149.706149, 180.642583) rotate(22.000000) translate(-149.706149, -180.642583) "/>
+                <path d="M65.2279553,90.2345285 C62.4548336,90.0320836 60.4105231,89.3345405 60.4105231,88.5051511 C60.4105231,87.676673 62.4503446,86.9797514 65.2188187,86.7764428 C65.4149139,84.0068366 66.0879499,81.9659221 66.8880741,81.9659221 C67.6881984,81.9659221 68.3612344,84.0068366 68.5573295,86.7764428 C71.3258036,86.9797514 73.3656251,87.676673 73.3656251,88.5051511 C73.3656251,89.3345405 71.3213146,90.0320836 68.548193,90.2345285 C68.3410329,92.9408238 67.6762073,94.9210242 66.8880741,94.9210242 C66.0999409,94.9210242 65.4351154,92.9408238 65.2279553,90.2345285 Z" id="Oval-80-Copy-3" fill-opacity="0.4" fill="#A3B1BF" opacity="0.85" transform="translate(66.888074, 88.443473) rotate(-340.000000) translate(-66.888074, -88.443473) "/>
+                <path d="M118.775569,329.140492 L118.424988,329.526146 C117.522244,330.5192 115.985396,330.592411 114.992341,329.689667 C114.596934,329.330218 114.331035,328.850456 114.235803,328.324641 L114.143075,327.812647 L113.669257,327.599091 C112.445737,327.047635 111.900921,325.608734 112.452377,324.385214 C112.672015,323.8979 113.046204,323.496601 113.516991,323.243469 L113.97521,322.997095 L114.032158,322.478985 C114.178786,321.144967 115.379087,320.182398 116.713105,320.329026 C117.24418,320.387399 117.741214,320.61917 118.127299,320.988476 L118.503957,321.348765 L119.01334,321.242962 C120.327346,320.970031 121.613813,321.813989 121.886744,323.127995 C121.995449,323.651349 121.928561,324.195943 121.696437,324.677436 L121.470742,325.145594 L121.728812,325.597409 C122.394441,326.762759 121.989337,328.247061 120.823987,328.91269 C120.359975,329.177726 119.82154,329.282421 119.292023,329.21057 L118.775569,329.140492 Z" id="Star-1-Copy-16" fill-opacity="0.4" fill="#A3B1BF"/>
+                <path d="M432.83752,120.004816 L432.837087,120.005044 L432.837087,120.005044 C432.092472,120.396429 431.171561,120.110079 430.780176,119.365464 C430.624337,119.068978 430.570573,118.729391 430.627206,118.399266 L430.627206,118.399266 L430.627206,118.399266 L430.627206,118.399266 C430.024845,117.812233 430.01242,116.848039 430.599453,116.245678 C430.833262,116.005765 431.139652,115.849637 431.471171,115.801474 L431.471471,115.801431 L431.471471,115.801431 L431.471471,115.801431 C431.843891,115.046982 432.757399,114.737288 433.511848,115.109709 C433.812195,115.25797 434.055308,115.501083 434.20357,115.801431 L434.20357,115.801431 L434.203869,115.801474 L434.203869,115.801474 C435.036229,115.922398 435.612963,116.695187 435.492039,117.527547 C435.443876,117.859067 435.287748,118.165457 435.047835,118.399266 L435.047835,118.399266 L435.047835,118.399266 L435.047835,118.399266 C435.190066,119.228364 434.63325,120.015783 433.804152,120.158014 C433.474027,120.214647 433.134439,120.160883 432.837954,120.005044 L432.83752,120.004816 Z" id="Star-1-Copy-18" fill-opacity="0.4" fill="#A3B1BF" transform="translate(432.837619, 117.566125) rotate(-3.000000) translate(-432.837619, -117.566125) "/>
+                <path d="M99.7727703,38.762372 L99.0266308,39.1545584 L99.0266308,39.1545584 C97.8386845,39.7789675 96.36948,39.3221304 95.7450708,38.134184 C95.4964477,37.6611755 95.4106732,37.1194035 95.5010241,36.5927278 L95.6433921,35.7628333 L95.0407812,35.1755563 L95.0407812,35.1755563 C94.0796578,34.2388893 94.059832,32.7004261 94.996499,31.7393027 C95.369563,31.3564979 95.8584376,31.1073808 96.3874089,31.0305329 L97.2206742,30.9094778 L97.5937913,30.1536188 L97.5937913,30.1536188 C98.1878378,28.950202 99.6449697,28.4562097 100.848387,29.0502562 C101.327469,29.2867472 101.715258,29.6745363 101.951749,30.1536188 L102.324866,30.9094778 L103.158132,31.0305329 L103.158132,31.0305329 C104.486241,31.223478 105.406474,32.4565366 105.213529,33.7846464 C105.136681,34.3136177 104.887564,34.8024923 104.504759,35.1755563 L103.902148,35.7628333 L104.044516,36.5927278 L104.044516,36.5927278 C104.27143,37.9154575 103.383095,39.1716915 102.060366,39.398605 C101.53369,39.4889559 100.991918,39.4031814 100.51891,39.1545584 L99.7727703,38.762372 Z" id="Star-1-Copy-19" fill-opacity="0.4" fill="#A3B1BF" transform="translate(99.772928, 34.116388) rotate(19.000000) translate(-99.772928, -34.116388) "/>
+                <path d="M396.631073,305.744172 L396.098125,305.608596 C394.797498,305.277731 394.01135,303.955146 394.342215,302.654518 C394.473956,302.136643 394.772729,301.676633 395.192288,301.345694 L395.623376,301.00566 L395.587617,300.458372 C395.500116,299.119176 396.514815,297.962609 397.854012,297.875108 C398.387399,297.840257 398.917395,297.982247 399.361919,298.279089 L399.818473,298.583965 L400.329362,298.380373 C401.576068,297.883555 402.989473,298.491459 403.486291,299.738164 C403.684076,300.23448 403.712777,300.782145 403.567956,301.296416 L403.418882,301.825788 L403.76981,302.247972 C404.627682,303.280038 404.486471,304.812135 403.454406,305.670007 C403.043346,306.011688 402.531095,306.208301 401.996987,306.229395 L401.44896,306.251039 L401.15585,306.715309 C400.439401,307.850123 398.938655,308.189275 397.80384,307.472826 C397.351988,307.187555 397.006767,306.761296 396.821614,306.260029 L396.631073,305.744172 Z" id="Star-1-Copy-20" fill-opacity="0.4" fill="#A3B1BF"/>
+                <path d="M439.755536,146.347757 L439.755103,146.347984 L439.755103,146.347984 C439.010488,146.739369 438.089577,146.45302 437.698192,145.708405 C437.542353,145.411919 437.488589,145.072331 437.545222,144.742206 L437.545222,144.742206 L437.545222,144.742206 L437.545222,144.742206 C436.942861,144.155173 436.930436,143.190979 437.517469,142.588619 C437.751277,142.348705 438.057668,142.192577 438.389187,142.144415 L438.389487,142.144371 L438.389487,142.144371 L438.389487,142.144371 C438.761907,141.389923 439.675415,141.080228 440.429864,141.452649 C440.730211,141.600911 440.973324,141.844024 441.121586,142.144371 L441.121586,142.144371 L441.121885,142.144415 L441.121885,142.144415 C441.954245,142.265338 442.530978,143.038128 442.410055,143.870488 C442.361892,144.202007 442.205764,144.508398 441.965851,144.742206 L441.965851,144.742206 L441.965851,144.742206 L441.965851,144.742206 C442.108082,145.571305 441.551266,146.358723 440.722168,146.500955 C440.392043,146.557588 440.052455,146.503823 439.755969,146.347984 L439.755536,146.347757 Z" id="Star-1-Copy-21" fill-opacity="0.4" fill="#A3B1BF" transform="translate(439.755635, 143.909066) rotate(-12.000000) translate(-439.755635, -143.909066) "/>
+                <path d="M244.621971,220.61341 C277.15945,220.61341 303.536288,194.242112 303.536288,161.711467 C303.536288,129.180822 277.15945,102.809524 244.621971,102.809524 C212.084491,102.809524 185.707653,129.180822 185.707653,161.711467 C185.707653,194.242112 212.084491,220.61341 244.621971,220.61341 Z" id="Oval-8-Copy-2" fill-opacity="0.66" fill="#A3B1BF"/>
+                <path d="M245.345696,141.060063 C241.146656,141.060063 237.880736,142.342349 235.547936,144.906921 C233.215136,147.354921 232.107056,150.618921 232.107056,154.698921 L236.714336,154.698921 C236.714336,151.842921 237.355856,149.628063 238.638896,147.996063 C240.038576,146.072635 242.196416,145.140063 245.112416,145.140063 C247.561856,145.140063 249.486416,145.781206 250.827776,147.180063 C252.110816,148.462349 252.810656,150.269206 252.810656,152.600635 C252.810656,154.232635 252.227456,155.748063 251.061056,157.205206 C250.711136,157.671492 250.011296,158.370921 249.078176,159.303492 C245.928896,162.101206 244.004336,164.316063 243.187856,166.064635 C242.488016,167.521778 242.138096,169.212063 242.138096,171.135492 L242.138096,172.476063 L246.803696,172.476063 L246.803696,171.135492 C246.803696,169.561778 247.153616,168.162921 247.911776,166.880635 C248.494976,165.831492 249.369776,164.782349 250.652816,163.674921 C253.218896,161.401778 254.793536,159.886349 255.376736,159.186921 C256.834736,157.263492 257.592896,154.990349 257.592896,152.367492 C257.592896,148.870349 256.484816,146.130921 254.326976,144.149206 C252.052496,142.050921 249.078176,141.060063 245.345696,141.060063 Z M244.470896,176.556063 C243.479456,176.556063 242.662976,176.847492 241.963136,177.546921 C241.263296,178.188063 240.971696,179.004063 240.971696,179.994921 C240.971696,180.985778 241.263296,181.801778 241.963136,182.501206 C242.662976,183.142349 243.479456,183.492063 244.470896,183.492063 C245.462336,183.492063 246.278816,183.142349 246.978656,182.501206 C247.678496,181.860063 248.028416,181.044063 248.028416,179.994921 C248.028416,179.004063 247.678496,178.188063 247.036976,177.546921 C246.337136,176.847492 245.462336,176.556063 244.470896,176.556063 Z" id="？" fill="#FFFFFF"/>
+                <path d="M223.261662,133.139924 C229.077338,129.782947 239.631808,125.828273 236.274126,120.013819 C232.916444,114.199364 220.565868,115.043746 214.750193,118.400722 C208.934517,121.757699 202.729834,131.623951 206.087516,137.438405 C209.445198,143.252859 217.445986,136.4969 223.261662,133.139924" id="Oval-8-Copy-2" fill="#FAFAFA"/>
+                <path d="M249.679003,119.820589 C252.365149,119.820589 254.5427,117.643495 254.5427,114.957913 C254.5427,112.272332 252.365149,110.095238 249.679003,110.095238 C246.992857,110.095238 244.815306,112.272332 244.815306,114.957913 C244.815306,117.643495 246.992857,119.820589 249.679003,119.820589 Z" id="Oval-10-Copy" fill="#FAFAFA"/>
+                <path d="M421.5,321.5 L423,323" id="Line-2" stroke="#979797" stroke-linecap="square"/>
+            </g>
+        </g>
+    </g>
+</svg>

im/src/icons/svg/note-book.svg

@@ -0,0 +1,3 @@
+<svg focusable="false" viewBox="0 0 16 16" aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.196,5.907H2.588V6.34h3.608V5.907z M2.588,9.515h4.33V9.082h-4.33V9.515z M5.763,7.495H2.588v0.433 h3.175V7.495z M4.753,4.32H2.588v0.433h2.165V4.32z M9.515,2.588c0,0-0.627,0-0.866,0H8.505c-0.353,0-0.503,0.243-0.503,0.433 c0-0.17-0.154-0.433-0.508-0.433H7.206c-0.239,0-0.866,0-0.866,0H1v10.68h6.639c0.09,0,0.144,0.07,0.144,0.144h0.433 c0-0.079,0.062-0.144,0.144-0.144H15V2.588C15,2.588,9.515,2.588,9.515,2.588z M7.784,3.598c0,0.159,0,9.237,0,9.237H1.433V3.021 H6.34c0,0,0.706,0,0.866,0h0.289c0.159,0,0.289,0.129,0.289,0.289V3.598z M14.567,12.835H8.216c0,0,0-9.078,0-9.237V3.309 c0-0.159,0.129-0.289,0.289-0.289h0.289c0.159,0,0.722,0,0.722,0h5.052V12.835z M9.371,11.103h3.608V10.67H9.371V11.103z M9.371,6.34h2.021V4.32H9.371V6.34z M9.804,4.753h1.155v1.155H9.804V4.753z M9.371,9.515h4.33V9.082h-4.33V9.515z M9.371,7.928 h2.887V7.495H9.371V7.928z M2.588,11.103h2.165V10.67H2.588V11.103z"/>
+</svg>

im/src/icons/svg/note.svg

@@ -0,0 +1,43 @@
+<svg focusable="false" viewBox="0 0 220 220" aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <g>
+      <path fill-rule="evenodd" clip-rule="evenodd" fill="#F9FAFA" d="M187.508,86.089l-84.87-49c-4.783-2.761-10.899-1.123-13.66,3.66 c-2.761,4.783-1.123,10.899,3.66,13.66l84.87,49c4.783,2.761,10.899,1.123,13.66-3.66 C193.929,94.966,192.291,88.85,187.508,86.089z M176.56,149.05l-30.311-17.5c4.783,2.761,10.899,1.122,13.66-3.66 c2.761-4.783,1.123-10.899-3.66-13.66L116.06,91.026l38.457,22.203c4.783,2.761,10.899,1.123,13.66-3.66 c2.761-4.783,1.123-10.899-3.66-13.66l-100.459-58c-4.783-2.761-10.899-1.123-13.66,3.66c-2.761,4.783-1.123,10.899,3.66,13.66 l6.929,4c4.782,2.762,6.421,8.877,3.66,13.66c-2.761,4.783-8.877,6.422-13.66,3.66l38.971,22.5l-65.818-38 c-4.783-2.761-10.899-1.123-13.66,3.66c-2.761,4.783-1.123,10.899,3.66,13.66l25.115,14.5c4.783,2.761,6.421,8.877,3.66,13.66 c-2.761,4.783-8.877,6.422-13.66,3.66l25.548,14.75l-26.414-15.25c-4.783-2.761-10.899-1.123-13.66,3.66 c-2.761,4.783-1.123,10.899,3.66,13.66l105.655,61c4.783,2.761,10.899,1.123,13.66-3.66c2.761-4.783,1.123-10.899-3.66-13.66 l-2.598-1.5c-4.783-2.761-6.422-8.877-3.66-13.66c2.761-4.783,8.877-6.422,13.66-3.66l25.115,14.5 c4.783,2.761,10.899,1.123,13.66-3.66C182.982,157.927,181.343,151.811,176.56,149.05z"/>
+    </g>
+  </g>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M56.375,71h91v68h-91V71z"/>
+  <g>
+    <g>
+      <path fill-rule="evenodd" clip-rule="evenodd" fill="#D1D1D1" d="M201.75,85.25c-2.761,0-5,2.239-5,5s2.239,5,5,5s5-2.239,5-5 S204.511,85.25,201.75,85.25z M201.75,94.25c-2.209,0-4-1.791-4-4s1.791-4,4-4s4,1.791,4,4S203.959,94.25,201.75,94.25z M24.75,64.25c-1.657,0-3,1.343-3,3c0,1.657,1.343,3,3,3s3-1.343,3-3C27.75,65.593,26.407,64.25,24.75,64.25z M24.75,69.25 c-1.105,0-2-0.895-2-2s0.895-2,2-2s2,0.895,2,2S25.855,69.25,24.75,69.25z M196.75,144.25c-1.657,0-3,1.343-3,3 c0,1.657,1.343,3,3,3s3-1.343,3-3C199.75,145.593,198.407,144.25,196.75,144.25z M196.75,149.25c-1.105,0-2-0.895-2-2s0.895-2,2-2 s2,0.895,2,2S197.855,149.25,196.75,149.25z M186.75,173.25c-2.761,0-5,2.239-5,5s2.239,5,5,5s5-2.239,5-5 S189.511,173.25,186.75,173.25z M186.75,182.25c-2.209,0-4-1.791-4-4s1.791-4,4-4s4,1.791,4,4S188.959,182.25,186.75,182.25z"/>
+    </g>
+  </g>
+  <g opacity="0.6">
+    <g>
+      <path fill-rule="evenodd" clip-rule="evenodd" fill="#CBCBCB" d="M207.85,164.1c-0.331,0-0.6,0.269-0.6,0.6v3.8 c0,0.331,0.269,0.6,0.6,0.6c0.331,0,0.6-0.269,0.6-0.6v-3.8C208.45,164.369,208.181,164.1,207.85,164.1z M83.85,29.1 c-0.331,0-0.6,0.269-0.6,0.6v3.8c0,0.331,0.269,0.6,0.6,0.6c0.331,0,0.6-0.269,0.6-0.6v-3.8C84.45,29.369,84.181,29.1,83.85,29.1z M158.85,169.1c-0.331,0-0.6,0.269-0.6,0.6v5.8c0,0.331,0.269,0.6,0.6,0.6c0.331,0,0.6-0.269,0.6-0.6v-5.8 C159.45,169.369,159.181,169.1,158.85,169.1z"/>
+    </g>
+  </g>
+  <g opacity="0.8">
+    <g>
+      <path fill-rule="evenodd" clip-rule="evenodd" fill="#CCCCCC" d="M209.45,166.095h-3.2c-0.221,0-0.4,0.226-0.4,0.505 s0.179,0.505,0.4,0.505h3.2c0.221,0,0.4-0.226,0.4-0.505S209.671,166.095,209.45,166.095z M85.45,31.095h-3.2 c-0.221,0-0.4,0.226-0.4,0.505s0.179,0.505,0.4,0.505h3.2c0.221,0,0.4-0.226,0.4-0.505S85.671,31.095,85.45,31.095z M161.45,172.095h-5.2c-0.221,0-0.4,0.226-0.4,0.505s0.179,0.505,0.4,0.505h5.2c0.221,0,0.4-0.226,0.4-0.505 S161.671,172.095,161.45,172.095z"/>
+    </g>
+  </g>
+  <g opacity="0.5">
+    <g>
+      <path fill-rule="evenodd" clip-rule="evenodd" fill="#CBCBCB" d="M51.583,50.917h-8c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1h8 c0.552,0,1-0.448,1-1C52.583,51.364,52.136,50.917,51.583,50.917z M192.583,102.917h-8c-0.552,0-1,0.448-1,1c0,0.552,0.448,1,1,1 h8c0.552,0,1-0.448,1-1C193.583,103.364,193.136,102.917,192.583,102.917z"/>
+    </g>
+  </g>
+  <g opacity="0.5">
+    <g>
+      <path fill-rule="evenodd" clip-rule="evenodd" fill="#CBCBCB" d="M47.583,46.917c-0.552,0-1,0.448-1,1v8c0,0.552,0.448,1,1,1 s1-0.448,1-1v-8C48.583,47.364,48.136,46.917,47.583,46.917z M188.583,98.917c-0.552,0-1,0.448-1,1v8c0,0.552,0.448,1,1,1 s1-0.448,1-1v-8C189.583,99.364,189.136,98.917,188.583,98.917z"/>
+    </g>
+  </g>
+  <g>
+    <g>
+      <path fill-rule="evenodd" clip-rule="evenodd" fill="#CCCCCC" d="M89.25,91h-25v3h25V91z M64.25,116h30v-3h-30V116z M86.25,102 h-22v3h22V102z M79.25,80h-15v3h15V80z M112.25,68c0,0-4.343,0-6,0h-1c-2.447,0-3.482,1.687-3.482,3c0-1.181-1.064-3-3.518-3h-2 c-1.657,0-6,0-6,0h-37v74h46c0.625,0,1,0.483,1,1h3c0-0.544,0.428-1,1-1h46V68H112.25z M100.25,75c0,1.105,0,64,0,64h-44V71h34 c0,0,4.895,0,6,0h2c1.105,0,2,0.895,2,2V75z M147.25,139h-44c0,0,0-62.895,0-64v-2c0-1.105,0.895-2,2-2h2c1.105,0,5,0,5,0h35V139z M111.25,127h25v-3h-25V127z M111.25,94h14V80h-14V94z M114.25,83h8v8h-8V83z M111.25,116h30v-3h-30V116z M111.25,105h20v-3h-20 V105z M64.25,127h15v-3h-15V127z"/>
+    </g>
+  </g>
+  <g opacity="0.2">
+    <g>
+      <path fill-rule="evenodd" clip-rule="evenodd" fill="#CCCCCC" d="M41.333,29.083c-2.209,0-4,1.791-4,4s1.791,4,4,4s4-1.791,4-4 S43.542,29.083,41.333,29.083z M41.333,36.095c-1.663,0-3.012-1.348-3.012-3.012c0-1.663,1.349-3.012,3.012-3.012 c1.663,0,3.012,1.349,3.012,3.012C44.345,34.747,42.997,36.095,41.333,36.095z"/>
+    </g>
+  </g>
+</svg>

im/src/icons/svg/zhuangfa.svg

@@ -0,0 +1,4 @@
+<svg aria-hidden="true" viewBox="0 0 1024 1024">
+    <path d="M513.28 586.624c0 48.853333 50.986667 71.36 87.125333 38.656l263.104-237.973333a60.096 60.096 0 0 0-2.88-92.650667L599.210667 86.570667c-37.077333-29.504-85.930667-6.058667-85.930667 41.493333v91.626667C172.906667 259.413333 162.56 545.642667 170.666667 565.333333c9.322667 22.741333 38.613333 42.794667 87.189333 13.248 53.290667-32.426667 131.114667-61.312 255.424-65.834666v73.877333z m85.333333-391.466667l186.24 148.266667-186.24 168.426667V426.666667h-42.666666c-135.850667 0-236.565333 27.178667-307.306667 64 4.842667-9.194667 10.133333-24.832 16.106667-33.728C319.36 375.466667 384 311.978667 561.792 298.24l36.821333-2.688V195.157333z" fill="#333333"/>
+    <path d="M341.333333 704h554.666667v85.333333H341.333333zM128 874.666667h768v85.333333H128z" fill="#333333"/>
+</svg>

im/src/im-server/event/base.js

@@ -0,0 +1,62 @@
+import store from "@/store";
+import router from "@/router";
+import { Notification } from "element-ui";
+
+class Base {
+  /**
+   * 初始化
+   */
+  constructor() {
+    this.$notify = Notification;
+  }
+
+  getStoreInstance() {
+    return store;
+  }
+
+  /**
+   * 获取当前登录用户的ID
+   */
+  getAccountId() {
+    console.log("store.state", store.state.user);
+    return store.state.user.id;
+  }
+
+  getTalkParams() {
+    let { talk_type, receiver_id, index_name } = store.state.dialogue;
+
+    return { talk_type, receiver_id, index_name };
+  }
+
+  /**
+   * 判断消息是否来自当前对话
+   *
+   * @param {Number} talk_type 聊天消息类型[1:私信;2:群聊;]
+   * @param {Number} sender_id 发送者ID
+   * @param {Number} receiver_id 接收者ID
+   */
+  isTalk(talk_type, sender_id, receiver_id) {
+    let params = this.getTalkParams();
+
+    if (talk_type != params.talk_type) {
+      return false;
+    } else if (
+      params.receiver_id == receiver_id ||
+      params.receiver_id == sender_id
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 判断用户是否打开对话页
+   */
+  isTalkPage() {
+    let path = router.currentRoute.path;
+    return !(path != "/message" && path != "/");
+  }
+}
+
+export default Base;