diff --git a/buyer/public/config.js b/buyer/public/config.js
index d7556570..39fb8a71 100644
--- a/buyer/public/config.js
+++ b/buyer/public/config.js
@@ -7,6 +7,10 @@ var BASE = {
       buyer: "https://buyer-api.pickmall.cn",
       seller: "https://store-api.pickmall.cn",
       manager: "https://admin-api.pickmall.cn"
+      // common: "http://192.168.0.105:8890",
+      // buyer: "http://192.168.0.105:8888",
+      // seller: "http://192.168.0.105:8889",
+      // manager: "http://192.168.0.105:8887"
     },
     API_PROD: {
       common: "https://common-api.pickmall.cn",
diff --git a/buyer/src/api/cart.js b/buyer/src/api/cart.js
index 57d99878..c8d13461 100644
--- a/buyer/src/api/cart.js
+++ b/buyer/src/api/cart.js
@@ -212,3 +212,52 @@ export function receiptSelect (params) {
     params
   });
 }
+
+/**
+ * 获取全部配送方式
+ */
+ export function shippingMethodList(params) {
+  return request({
+    url: `/buyer/trade/carts/shippingMethodList`,
+    method: Method.GET,
+    needToken: true,
+    params: params,
+  });
+}
+
+/**
+ * 获取全部配送方式
+ */
+ export function storeAddressList(params) {
+  return request({
+    url: `/buyer/store/address/shippingMethodList`,
+    method: Method.GET,
+    needToken: true,
+    params: params,
+  });
+}
+
+/**
+ * 设置自提地址ID
+ * @param addressId
+ */
+ export function setStoreAddressId(storeAddressId,way) {
+  return request({
+    url: `/buyer/trade/carts/storeAddress?storeAddressId=${storeAddressId}&way=${way}`,
+    method: Method.GET,
+    needToken: true,
+  });
+}
+
+/**
+ * 提交配送方式
+ * @param params
+ */
+ export function setShipMethod(params) {
+  return request({
+    url: "/buyer/trade/carts/shippingMethod",
+    method: Method.PUT,
+    needToken: true,
+    params,
+  });
+}
diff --git a/buyer/src/api/index.js b/buyer/src/api/index.js
index 083631d2..3fe612ff 100644
--- a/buyer/src/api/index.js
+++ b/buyer/src/api/index.js
@@ -10,6 +10,15 @@ export function indexData(params) {
   });
 }
 
+// 获取自动发券
+export function getAutoCoup(){
+  return request({
+    url: "/buyer/promotion/coupon/activity",
+    method: Method.GET,
+    needToken: true,
+  });
+}
+
 /**
  * 获取店铺楼层数据
  */
diff --git a/buyer/src/api/shopentry.js b/buyer/src/api/shopentry.js
index 96aa08f8..b1d178ae 100644
--- a/buyer/src/api/shopentry.js
+++ b/buyer/src/api/shopentry.js
@@ -75,3 +75,15 @@ export function applyStatus () {
     method: Method.GET
   })
 }
+
+/**
+ * 获取自提点信息
+ * @param storeId
+ */
+ export function getStoreAddress(storeId,params) {
+  return request({
+    url: `/buyer/store/address/page/${storeId}`,
+    method: Method.GET,
+    params
+  });
+}
diff --git a/buyer/src/pages/GoodsDetail.vue b/buyer/src/pages/GoodsDetail.vue
index da752845..14fdb13c 100644
--- a/buyer/src/pages/GoodsDetail.vue
+++ b/buyer/src/pages/GoodsDetail.vue
@@ -8,26 +8,18 @@
       <div class="shop-nav-container">
         <Breadcrumb>
           <BreadcrumbItem to="/">首页</BreadcrumbItem>
-          <BreadcrumbItem
-            v-for="(item, index) in categoryBar"
-            :to="goGoodsList(index)"
-            target="_blank"
-            :key="index"
-          >
+          <BreadcrumbItem v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">
             {{ item.name }}
           </BreadcrumbItem>
         </Breadcrumb>
         <div class="store-collect">
           <span class="mr_10" v-if="goodsMsg.data">
             <router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{
-              goodsMsg.data.storeName
-            }}</router-link>
+    goodsMsg.data.storeName
+}}</router-link>
           </span>
           <span @click="collect">
-            <Icon
-              type="ios-heart"
-              :color="storeCollected ? '#ed3f14' : '#666'"
-            />
+            <Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#666'" />
             {{ storeCollected ? "已收藏店铺" : "收藏店铺" }}
           </span>
           <span class="ml_10" @click="IMService()">联系客服</span>
@@ -36,11 +28,7 @@
     </div>
 
     <!-- 商品信息展示 -->
-    <ShowGoods
-      @handleClickSku="targetClickSku"
-      v-if="goodsMsg.data"
-      :detail="goodsMsg"
-    ></ShowGoods>
+    <ShowGoods @handleClickSku="targetClickSku" v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoods>
     <!-- 商品详细展示 -->
     <ShowGoodsDetail v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoodsDetail>
 
@@ -66,14 +54,14 @@ import { getIMDetail } from "@/api/common";
 import Storage from "../plugins/storage";
 export default {
   name: "GoodsDetail",
-  beforeRouteEnter(to, from, next) {
+  beforeRouteEnter (to, from, next) {
     window.scrollTo(0, 0);
     next();
   },
-  created() {
+  created () {
     this.getGoodsDetail();
   },
-  data() {
+  data () {
     return {
       goodsMsg: {}, // 商品信息
       isLoading: false, // 加载状态
@@ -85,7 +73,7 @@ export default {
   },
   methods: {
     // 跳转im客服
-    async IMService() {
+    async IMService () {
       // 获取访问Token
       let accessToken = Storage.getItem("accessToken");
       await this.getIMDetailMethods();
@@ -95,25 +83,29 @@ export default {
       }
       window.open(
         this.IMLink +
-          "?token=" +
-          accessToken +
-          "&id=" +
-          this.goodsMsg.data.storeId
+        "?token=" +
+        accessToken +
+        "&id=" +
+        this.goodsMsg.data.storeId +
+        "&goodsId=" +
+        this.goodsMsg.data.goodsId +
+        "&skuId=" +
+        this.goodsMsg.data.id
       );
     },
     // 获取im信息
-    async getIMDetailMethods() {
+    async getIMDetailMethods () {
       let res = await getIMDetail();
       if (res.success) {
         this.IMLink = res.result;
       }
     },
     // 点击规格
-    targetClickSku(val) {
+    targetClickSku (val) {
       this.getGoodsDetail(val);
     },
     // 获取商品详情
-    getGoodsDetail(val) {
+    getGoodsDetail (val) {
       this.isLoading = true;
       const params = val || this.$route.query;
 
@@ -179,7 +171,7 @@ export default {
           this.$router.push("/");
         });
     },
-    goGoodsList(currIndex) {
+    goGoodsList (currIndex) {
       // 跳转商品列表
       const arr = [];
       this.categoryBar.forEach((e, index) => {
@@ -189,7 +181,7 @@ export default {
       });
       return location.origin + "/goodsList?categoryId=" + arr.toString();
     },
-    async collect() {
+    async collect () {
       // 收藏店铺
       if (this.storeCollected) {
         let cancel = await cancelCollect("STORE", this.goodsMsg.data.storeId);
diff --git a/buyer/src/pages/Index.vue b/buyer/src/pages/Index.vue
index 0cba5835..0a8b1c5a 100644
--- a/buyer/src/pages/Index.vue
+++ b/buyer/src/pages/Index.vue
@@ -1,5 +1,27 @@
 <template>
   <div class="container">
+    <Modal v-model="showCpmodel" width="350">
+            <template #header>
+                <p style="color:black;text-align:left">
+                    <!-- <Icon type="ios-information-circle"></Icon> -->
+                    <span>活动优惠券</span>
+                </p>
+            </template>
+              <template>
+                  <Scroll :on-reach-bottom="handleReachBottom">
+                      <Card dis-hover v-for="(item, index) in autoCoupList" :key="index" style="margin: 10px 15px">
+                            <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color" style="font-size: 15px;">￥<span class="price">{{item.price | unitPrice}}</span></span>
+                            <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color" style="font-size: 15px;"><span class="price">{{item.discount}}</span>折</span>
+                            <span class="describe" style="font-size: 15px;margin-left: 5px;">满{{item.consumeThreshold}}元可用</span>
+                            <p style="font-size: 10px;">使用范围：{{useScope(item.scopeType, item.storeName)}}</p>
+                            <p style="font-size: 10px;">有效期：{{item.endTime}}</p>
+                      </Card>
+                  </Scroll>
+              </template>
+            <template #footer>
+                <Button type="error" @click="showCpmodel=false">确定</Button>
+            </template>
+        </Modal>
     <drawer></drawer>
     <!-- 固定头部 -->
     <hover-search class="hover-search" :class="{show: topSearchShow}"></hover-search>
@@ -22,8 +44,8 @@
 import Search from '@/components/Search';
 import ModelForm from '@/components/indexDecorate/ModelForm';
 import HoverSearch from '@/components/header/hoverSearch';
-import storage from '@/plugins/storage';
-import { indexData } from '@/api/index.js';
+import storage from "@/plugins/storage";
+import { indexData,getAutoCoup } from '@/api/index.js';
 import {seckillByDay} from '@/api/promotion'
 export default {
   name: 'Index',
@@ -38,9 +60,14 @@ export default {
         that.topSearchShow = false;
       }
     };
+    if(storage.getItem('userInfo')){
+      this.getAutoCoup()
+    }
   },
   data () {
     return {
+      autoCoupList:[],
+      showCpmodel:false,
       modelForm: { list: [] }, // 楼层装修数据
       topAdvert: {}, // 顶部广告
       showNav: false, // 是否展示分类栏
@@ -49,7 +76,73 @@ export default {
       carouselOpacity: false // 不同轮播分类样式
     };
   },
+  // created(){
+   
+  // },
   methods: {
+    // 优惠券可用范围
+    useScope (type, storeName) {
+      let shop = '平台';
+      let goods = '全部商品'
+      if (storeName !== 'platform') shop = storeName
+      switch (type) {
+        case 'ALL':
+          goods = '全部商品'
+          break;
+        case 'PORTION_GOODS':
+          goods = '部分商品'
+          break;
+        case 'PORTION_GOODS_CATEGORY':
+          goods = '部分分类商品'
+          break;
+      }
+      return `${shop}${goods}可用`
+    },
+    getAutoCoup(){
+      let data = new Date()
+      let datas = data.getDate()
+      let hours = data.getHours()
+      let flagCoup = storage.getItem('getTimes') //缓存
+      if(flagCoup && flagCoup != undefined && flagCoup != null){  //判断当前是否有缓存
+        if(Number(datas) > Number(flagCoup)){ //判断缓存是否小于当前天数
+          if(Number(hours) >= 6){//超过或等于6时清楚缓存
+            storage.setItem('getTimes',datas)//存储缓存
+            this.getcps()
+          }
+        }
+      }else{
+        // window.localStorage.setItem('getTimes',datas)//存储缓存
+        this.getcps()
+      }
+    },  
+    getcps(){
+      console.log(123123)
+      let data = new Date()
+      let datas = data.getDate()
+      getAutoCoup().then(res=>{ //调用自动发券
+            if(res.success){
+              this.autoCoupList.push(...res.result);
+              let objs = {};
+              this.autoCoupList = this.autoCoupList.reduce((cur, next) => {
+                //对象去重
+                if (next.id != undefined) {
+                  objs[next.id]
+                    ? ""
+                    : (objs[next.id] = true && cur.push(next));
+                }
+                return cur;
+              }, []);
+              if(this.autoCoupList != '' && this.autoCoupList.length > 0){
+                console.log(1231232132)
+                this.showCpmodel = true;
+              }
+              storage.setItem('getTimes',datas)//存储缓存
+            }
+      })
+    }, 
+    handleReachBottom(){
+      console.log(111)
+    } , 
     getIndexData () {
       // 获取首页装修数据
       indexData({ clientType: 'PC' }).then(async (res) => {
@@ -94,6 +187,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+ @import '../assets/styles/coupon.scss';
 .container {
   @include sub_background_color($light_background_color);
 }
diff --git a/buyer/src/pages/Login.vue b/buyer/src/pages/Login.vue
index ff5b69fa..5b120474 100644
--- a/buyer/src/pages/Login.vue
+++ b/buyer/src/pages/Login.vue
@@ -235,6 +235,7 @@ export default {
                 this.$Message.success("登录成功");
                 storage.setItem("accessToken", res.result.accessToken);
                 storage.setItem("refreshToken", res.result.refreshToken);
+                storage.setItem('getTimes',0)
                 apiLogin.getMemberMsg().then((res) => {
                   if (res.success) {
                     storage.setItem("userInfo", res.result);
diff --git a/buyer/src/pages/home/enumeration.js b/buyer/src/pages/home/enumeration.js
index ee39e556..60a6f82f 100644
--- a/buyer/src/pages/home/enumeration.js
+++ b/buyer/src/pages/home/enumeration.js
@@ -32,6 +32,10 @@ export const orderStatusList = [
   {
     name: '已取消',
     status: 'CANCELLED'
+  },
+  {
+    name: '待提货',
+    status: 'STAY_PICKED_UP'
   }
 ]
 // 订单售后状态
diff --git a/buyer/src/pages/home/orderCenter/OrderDetail.vue b/buyer/src/pages/home/orderCenter/OrderDetail.vue
index e33472f6..13ba38be 100644
--- a/buyer/src/pages/home/orderCenter/OrderDetail.vue
+++ b/buyer/src/pages/home/orderCenter/OrderDetail.vue
@@ -53,7 +53,7 @@
         ></Step>
       </Steps>
     </div>
-    <div class="order-card">
+    <div class="order-card" v-if="order.order.deliveryMethod == 'LOGISTICS'">
       <h3>收货人信息</h3>
       <p>收货人：{{ order.order.consigneeName }}</p>
       <p>手机号码：{{ order.order.consigneeMobile | secrecyMobile }}</p>
@@ -62,6 +62,11 @@
         {{ order.order.consigneeDetail }}
       </p>
     </div>
+    <div class="order-card" v-if="order.order.deliveryMethod == 'SELF_PICK_UP'">
+      <h3>自提点信息</h3>
+      <p>自提点名称：{{ order.order.storeAddressPath }}</p>
+      <p>联系方式：{{ order.order.storeAddressMobile }}</p>
+    </div>
     <div class="order-card">
       <h3>付款信息</h3>
       <p>支付方式：{{ order.paymentMethodValue }}</p>
@@ -70,7 +75,7 @@
     <div class="order-card" v-if="!order.order.verificationCode">
       <h3>配送信息</h3>
       <p>配送方式：{{ order.deliveryMethodValue }}</p>
-      <p>配送状态：{{ order.deliverStatusValue }}</p>
+      <p v-if="order.order.deliveryMethod === 'LOGISTICS'">配送状态：{{ order.deliverStatusValue }}</p>
       <p v-if="logistics">
         物流信息：{{ logistics.shipper || "暂无物流信息" }}
       </p>
@@ -270,6 +275,9 @@ export default {
         if (res.success) {
           this.order = res.result;
           this.progressList = res.result.orderLogs;
+          if (this.order.order.deliveryMethod === 'LOGISTICS') {
+            this.traces();
+          }
         }
       });
     },
@@ -336,7 +344,6 @@ export default {
   },
   mounted() {
     this.getDetail();
-    this.traces();
   },
 };
 </script>
diff --git a/buyer/src/pages/payment/Pay.vue b/buyer/src/pages/payment/Pay.vue
index 35fbec7b..60cea477 100644
--- a/buyer/src/pages/payment/Pay.vue
+++ b/buyer/src/pages/payment/Pay.vue
@@ -9,42 +9,29 @@
       </div>
       <div class="cart-steps">
         <span :class="stepIndex == 1 ? 'active' : ''">1.我的购物车</span>
-        <Icon
-          :class="stepIndex == 1 ? 'active-arrow' : ''"
-          custom="icomoon icon-next"
-        ></Icon>
+        <Icon :class="stepIndex == 1 ? 'active-arrow' : ''" custom="icomoon icon-next"></Icon>
         <span :class="stepIndex == 1 ? 'active' : ''">2.填写订单信息</span>
-        <Icon
-          :class="stepIndex == 1 ? 'active-arrow' : ''"
-          custom="icomoon icon-next"
-        ></Icon>
+        <Icon :class="stepIndex == 1 ? 'active-arrow' : ''" custom="icomoon icon-next"></Icon>
         <span :class="stepIndex == 2 ? 'active' : ''">3.成功提交订单</span>
       </div>
     </div>
     <Divider />
     <div class="content width_1200">
       <!-- 收货地址 -->
-      <div class="address">
+      <div class="address" v-if="selectedDeliverMethod === 'LOGISTICS'">
         <div class="card-head">
           <span>收货人信息</span>
           <span @click="goAddressManage">管理收货人地址</span>
         </div>
         <div class="address-manage">
-          <div
-            class="address-item"
-            v-show="moreAddr ? true : index < 3"
-            :class="selectedAddress.id === item.id ? 'border-red' : ''"
-            @mouseenter="showEditBtn = index"
-            @mouseleave="showEditBtn = ''"
-            @click="selectAddress(item)"
-            v-for="(item, index) in addressList"
-            :key="index"
-          >
+          <div class="address-item" v-show="moreAddr ? true : index < 3"
+            :class="selectedAddress.id === item.id ? 'border-red' : ''" @mouseenter="showEditBtn = index"
+            @mouseleave="showEditBtn = ''" @click="selectAddress(item)" v-for="(item, index) in addressList"
+            :key="index">
             <div>
               <span>{{ item.name }}</span>
               <Tag class="ml_10" v-if="item.isDefault" color="red">默认</Tag>
-              <Tag class="ml_10" v-if="item.alias" color="warning"
-                >{{ item.alias }}
+              <Tag class="ml_10" v-if="item.alias" color="warning">{{ item.alias }}
               </Tag>
             </div>
             <div>{{ item.mobile }}</div>
@@ -53,12 +40,7 @@
             </div>
             <div class="edit-btn" v-show="showEditBtn === index">
               <span @click.stop="editAddress(item.id)">修改</span>
-              <span
-                class="ml_10"
-                v-if="!item.isDefault"
-                @click.stop="delAddress(item)"
-                >删除</span
-              >
+              <span class="ml_10" v-if="!item.isDefault" @click.stop="delAddress(item)">删除</span>
             </div>
             <div class="corner-icon" v-show="selectedAddress.id === item.id">
               <div></div>
@@ -70,75 +52,99 @@
             <div>添加新地址</div>
           </div>
         </div>
-
-        <div
-          class="more-addr"
-          @click="moreAddr = !moreAddr"
-          v-if="addressList.length > 3"
-        >
+        <div class="more-addr" @click="moreAddr = !moreAddr" v-if="addressList.length > 3">
           {{ moreAddr ? "收起地址" : "更多地址" }}
           <Icon v-show="!moreAddr" type="md-arrow-dropdown" />
           <Icon v-show="moreAddr" type="md-arrow-dropup" />
         </div>
       </div>
+
+      <div class="address" v-if="selectedDeliverMethod === 'SELF_PICK_UP'">
+        <div class="card-head">
+          <span>自提点信息</span>
+        </div>
+        <div class="address-manage">
+          <div class="address-item" v-show="storeMoreAddr ? true : index < 3"
+            :class="selectedAddress.id === item.id ? 'border-red' : ''" @mouseenter="showEditBtn = index"
+            @mouseleave="showEditBtn = ''" @click="selectStoreAddress(item)" v-for="(item, index) in storeAddressList"
+            :key="index">
+            <div>
+              <span>{{ item.addressName }}</span>
+            </div>
+            <div>{{ item.mobile }}</div>
+            <div>
+              {{ item.address | unitAddress }} {{ item.detail }}
+            </div>
+            <div class="corner-icon" v-show="selectedStoreAddress.id === item.id">
+              <div></div>
+              <Icon type="md-checkmark" />
+            </div>
+          </div>
+        </div>
+        <div class="more-addr" @click="storeMoreAddr = !storeMoreAddr" v-if="addressList.length > 3">
+          {{ storeMoreAddr ? "收起地址" : "更多地址" }}
+          <Icon v-show="!storeMoreAddr" type="md-arrow-dropdown" />
+          <Icon v-show="storeMoreAddr" type="md-arrow-dropup" />
+        </div>
+      </div>
+      <div>
+      </div>
+      <div class="goods-content">
+        <div class="card-head mt_20 mb_20">
+          <span>配送方式</span>
+        </div>
+        <div class="delivery-method">
+
+          <div class="method-item" v-show="moreAddr ? true : index < 3"
+            :class="selectedDeliverMethod === item.value ? 'border-red' : ''" @mouseenter="showEditBtn = item.value"
+            @mouseleave="showEditBtn = ''" @click="selectDeliverMethod(item)" v-for="(item, index) in shippingMethod"
+            :key="index">
+            <div>{{ item.label }}</div>
+            <div class="corner-icon" v-show="selectedDeliverMethod === item.value">
+              <div></div>
+              <Icon type="md-checkmark" />
+            </div>
+          </div>
+        </div>
+      </div>
       <!-- 商品信息 -->
       <div class="goods-content">
         <div class="card-head mt_20 mb_20">
           <span>商品信息</span>
           <span @click="$router.push('/cart')">返回购物车</span>
         </div>
-        <div
-          class="goods-msg"
-          v-for="(shop, shopIndex) in goodsList"
-          :key="shopIndex"
-        >
+        <div class="goods-msg" v-for="(shop, shopIndex) in goodsList" :key="shopIndex">
           <div v-if="shop.checked">
             <div class="shop-name">
               <span>
                 <span class="hover-color" @click="goShopPage(shop.storeId)">{{
-                  shop.storeName
-                }}</span
-                >&nbsp;&nbsp;
+                    shop.storeName
+                }}</span>&nbsp;&nbsp;
               </span>
             </div>
             <div class="goods-list">
-              <div
-                class="goods-item"
-                v-for="(goods, goodsIndex) in shop.checkedSkuList"
-                :key="goodsIndex"
-              >
-                <span
-                  class="hover-color"
-                  @click="
-                    goGoodsDetail(goods.goodsSku.id, goods.goodsSku.goodsId)
-                  "
-                >
+              <div class="goods-item" v-for="(goods, goodsIndex) in shop.checkedSkuList" :key="goodsIndex">
+                <span class="hover-color" @click="
+                  goGoodsDetail(goods.goodsSku.id, goods.goodsSku.goodsId)
+                ">
                   <img :src="goods.goodsSku.thumbnail" alt="" />
                   <span style="vertical-align: top">{{
-                    goods.goodsSku.goodsName
+                      goods.goodsSku.goodsName
                   }}</span>
                 </span>
                 <span class="goods-price">{{
-                  goods.purchasePrice | unitPrice("￥")
+                    goods.purchasePrice | unitPrice("￥")
                 }}</span>
                 <span>x{{ goods.num }}</span>
                 <span>{{ goods.goodsSku.quantity > 0 ? "有货" : "无货" }}</span>
                 <span class="goods-price">{{
-                  goods.subTotal | unitPrice("￥")
+                    goods.subTotal | unitPrice("￥")
                 }}</span>
               </div>
             </div>
             <div class="order-mark">
-              <Input
-                type="textarea"
-                maxlength="60"
-                v-model="shop.remark"
-                show-word-limit
-                placeholder="订单备注"
-              />
-              <span style="font-size: 12px; color: #999"
-                >提示：请勿填写有关支付、收货、发票方面的信息</span
-              >
+              <Input type="textarea" maxlength="60" v-model="shop.remark" show-word-limit placeholder="订单备注" />
+              <span style="font-size: 12px; color: #999">提示：请勿填写有关支付、收货、发票方面的信息</span>
             </div>
           </div>
         </div>
@@ -146,13 +152,9 @@
       <!-- 发票信息 -->
       <div class="invoice">
         <div class="card-head mt_20 mb_20">
-          <span class="relative"
-            >发票信息<span class="inv-tips">
-              <Icon
-                type="ios-alert-outline"
-              />开企业抬头发票须填写纳税人识别号，以免影响报销
-            </span></span
-          >
+          <span class="relative">发票信息<span class="inv-tips">
+              <Icon type="ios-alert-outline" />开企业抬头发票须填写纳税人识别号，以免影响报销
+            </span></span>
         </div>
         <div class="inovice-content">
           <span>{{ invoiceData.receiptTitle }}</span>
@@ -167,47 +169,24 @@
         </div>
         <div v-if="couponList.length === 0">无可用优惠券</div>
         <ul v-else class="coupon-list">
-          <li
-            v-for="(item, index) in couponList"
-            class="coupon-item"
-            :key="index"
-          >
+          <li v-for="(item, index) in couponList" class="coupon-item" :key="index">
             <div class="c-left">
               <div>
-                <span
-                  v-if="item.couponType === 'PRICE'"
-                  class="fontsize_12 global_color"
-                  >￥<span class="price">{{
+                <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{
                     item.price | unitPrice
-                  }}</span></span
-                >
-                <span
-                  v-if="item.couponType === 'DISCOUNT'"
-                  class="fontsize_12 global_color"
-                  ><span class="price">{{ item.discount }}</span
-                  >折</span
-                >
-                <span class="describe"
-                  >满{{ item.consumeThreshold }}元可用</span
-                >
+                }}</span></span>
+                <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{
+                    item.discount
+                }}</span>折</span>
+                <span class="describe">满{{ item.consumeThreshold }}元可用</span>
               </div>
               <p>使用范围：{{ useScope(item.scopeType) }}</p>
               <p>有效期：{{ item.endTime }}</p>
             </div>
-            <img
-              class="used"
-              v-if="usedCouponId.includes(item.id)"
-              src="../../assets/images/geted.png"
-              alt=""
-            />
+            <img class="used" v-if="usedCouponId.includes(item.id)" src="../../assets/images/geted.png" alt="" />
             <b></b>
             <a class="c-right" @click="useCoupon(item.id, true)">立即使用</a>
-            <a
-              class="c-right"
-              v-if="usedCouponId.includes(item.id)"
-              @click="useCoupon(item.id, false)"
-              >放弃优惠</a
-            >
+            <a class="c-right" v-if="usedCouponId.includes(item.id)" @click="useCoupon(item.id, false)">放弃优惠</a>
             <i class="circle-top"></i>
             <i class="circle-bottom"></i>
           </li>
@@ -216,30 +195,24 @@
       <!-- 订单价格 -->
       <div class="order-price">
         <div>
-          <span>{{ totalNum }}件商品，总商品金额：</span
-          ><span>{{ priceDetailDTO.goodsPrice | unitPrice("￥") }}</span>
+          <span>{{ totalNum }}件商品，总商品金额：</span><span>{{ priceDetailDTO.goodsPrice | unitPrice("￥") }}</span>
         </div>
         <div v-if="priceDetailDTO.freightPrice > 0">
-          <span>运费：</span
-          ><span>{{ priceDetailDTO.freightPrice | unitPrice("￥") }}</span>
+          <span>运费：</span><span>{{ priceDetailDTO.freightPrice | unitPrice("￥") }}</span>
         </div>
         <div v-if="priceDetailDTO.discountPrice > 0">
-          <span>优惠金额：</span
-          ><span>-{{ priceDetailDTO.discountPrice | unitPrice("￥") }}</span>
+          <span>优惠金额：</span><span>-{{ priceDetailDTO.discountPrice | unitPrice("￥") }}</span>
         </div>
         <div v-if="priceDetailDTO.couponPrice > 0">
-          <span>优惠券金额：</span
-          ><span>-{{ priceDetailDTO.couponPrice | unitPrice("￥") }}</span>
+          <span>优惠券金额：</span><span>-{{ priceDetailDTO.couponPrice | unitPrice("￥") }}</span>
         </div>
 
         <div v-if="$route.query.way === 'POINTS'">
-          <span>应付积分：</span
-          ><span class="actrual-price">{{ priceDetailDTO.payPoint }}</span>
+          <span>应付积分：</span><span class="actrual-price">{{ priceDetailDTO.payPoint }}</span>
         </div>
         <div v-else>
-          <span>应付金额：</span
-          ><span class="actrual-price">{{
-            priceDetailDTO.flowPrice | unitPrice("￥")
+          <span>应付金额：</span><span class="actrual-price">{{
+              priceDetailDTO.flowPrice | unitPrice("￥")
           }}</span>
         </div>
       </div>
@@ -250,23 +223,15 @@
       <div class="pay-address" v-if="addressList.length">
         配送至：{{ selectedAddress.consigneeAddressPath | unitAddress }}
         {{ selectedAddress.detail }}&nbsp;&nbsp;收货人：{{
-          selectedAddress.name
+            selectedAddress.name
         }}&nbsp;&nbsp;{{ selectedAddress.mobile }}
       </div>
     </div>
     <BaseFooter></BaseFooter>
     <!-- 添加发票模态框 -->
-    <invoice-modal
-      ref="invModal"
-      :invoiceData="invoiceData"
-      @change="getInvMsg"
-    />
+    <invoice-modal ref="invModal" :invoiceData="invoiceData" @change="getInvMsg" />
     <!-- 选择地址模态框 -->
-    <address-manage
-      ref="address"
-      :id="addrId"
-      @change="addrChange"
-    ></address-manage>
+    <address-manage ref="address" :id="addrId" @change="addrChange"></address-manage>
   </div>
 </template>
 
@@ -279,8 +244,12 @@ import {
   createTrade,
   selectAddr,
   selectCoupon,
+  setShipMethod,
+  setStoreAddressId,
+  shippingMethodList,
   couponNum,
 } from "@/api/cart";
+import { getStoreAddress } from "@/api/shopentry.js"
 import { canUseCouponList } from "@/api/member.js";
 
 export default {
@@ -288,15 +257,35 @@ export default {
   components: { invoiceModal, addressManage },
   data() {
     return {
+      selectedStoreAddress: 'm',
+      selectMethod: '',
       stepIndex: 1, // 顶部步骤条状态
       invoiceAvailable: false, // 发票编辑按钮
       showEditBtn: "", // 鼠标移入显示编辑按钮
       orderMark: "", // 订单备注
+      storeMoreAddr: false,
       invoiceData: {
         // 发票数据
         receiptTitle: "个人",
         receiptContent: "不开发票",
       },
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 100
+      },
+      shippingMethod: [],
+      storeAddressList: [],
+      shippingWay: [
+        {
+          value: "LOGISTICS",
+          label: "物流",
+        },
+        {
+          value: "SELF_PICK_UP",
+          label: "自提",
+        },
+      ],
+      selectedDeliverMethod: 'LOGISTICS',
       addressList: [], // 地址列表
       selectedAddress: {}, // 所选地址
       goodsList: [], // 商品列表
@@ -308,6 +297,7 @@ export default {
       couponList: [], // 可用优惠券列表
       usedCouponId: [], // 已使用优惠券id
       selectedCoupon: {}, // 已选优惠券对象
+      storeId: '', //店铺Id
     };
   },
   mounted() {
@@ -317,6 +307,7 @@ export default {
     // 初始化数据
     init() {
       this.getGoodsDetail();
+      this.getDistribution();
     },
     goAddressManage() {
       // 跳转地址管理页面
@@ -324,7 +315,7 @@ export default {
     },
     getAddress() {
       // 获取收货地址列表
-      memberAddress().then((res) => {
+      memberAddress(this.searchForm).then((res) => {
         if (res.success) {
           this.addressList = res.result.records;
           this.addressList.forEach((e, index) => {
@@ -335,6 +326,38 @@ export default {
         }
       });
     },
+    // 获取配送方式列表
+    async getDistribution() {
+      let shopRes = await shippingMethodList({ way: this.$route.query.way });
+      let shopList;
+      if (shopRes.success) {
+        shopList = shopRes.result;
+        let way = [];
+        console.log(shopList)
+        this.shippingWay.forEach((item) => {
+          shopList.forEach((child) => {
+            if (item.value == child) {
+              way.push(item);
+            }
+          });
+        });
+        this.shippingMethod = way;
+        console.log(this.shippingMethod)
+      }
+    },
+
+    async getStoreAddressList() {
+      getStoreAddress(this.storeId,this.searchForm).then(res => {
+        if (res.success) {
+          this.storeAddressList = res.result.records
+          this.storeAddressList.forEach((e, index) => {
+            if (e.id === this.selectedAddress.id && index > 2) {
+              this.storeMoreAddr = true;
+            }
+          });
+        }
+      })
+    },
     getGoodsDetail() {
       // 订单商品详情
       this.$Spin.show();
@@ -364,7 +387,7 @@ export default {
             this.goodsList = res.result.cartList;
             this.priceDetailDTO = res.result.priceDetailDTO;
             this.skuList = res.result.skuList;
-
+            this.storeId = this.goodsList[0].storeId
             if (res.result.receiptVO) {
               this.invoiceData = res.result.receiptVO;
             }
@@ -401,6 +424,7 @@ export default {
               this.selectedAddress = res.result.memberAddress;
             }
             this.getAddress();
+            this.getStoreAddressList();
             this.totalNum = 0;
             for (let i = 0; i < this.skuList.length; i++) {
               this.totalNum += this.skuList[i].num;
@@ -475,8 +499,32 @@ export default {
       };
       selectAddr(params).then((res) => {
         if (res.success) {
-          this.$Message.success("选择收货地址成功");
-          this.selectedAddress = item;
+          this.$Message.success("选择配送方式成功");
+          this.selectMethod = item;
+          this.getGoodsDetail();
+        }
+      });
+    },
+    selectStoreAddress(item) {
+      console.log(item.id)
+      console.log(this.$route.query.way)
+      // 选择自提地址
+      setStoreAddressId(item.id,this.$route.query.way).then((res) => {
+        if (res.success) {
+          this.$Message.success("选择自提地址成功");
+          this.selectedStoreAddress = item;
+          this.getGoodsDetail();
+        }
+      });
+    },
+    selectDeliverMethod(item) {
+      let params = {
+        way: this.$route.query.way,
+        shippingMethod: item.value,
+      };
+      setShipMethod(params).then((res) => {
+        if (res.success) {
+          this.selectedDeliverMethod = item.value;
           this.getGoodsDetail();
         }
       });
@@ -503,7 +551,7 @@ export default {
             }
           });
         },
-        onCancel: () => {},
+        onCancel: () => { },
       });
     },
     goGoodsDetail(skuId, goodsId) {
@@ -605,9 +653,11 @@ export default {
 
 <style scoped lang="scss">
 @import "../../assets/styles/coupon.scss";
+
 .goods-msg {
   overflow: hidden;
 }
+
 /** logo start */
 .logo {
   height: 40px;
@@ -680,12 +730,82 @@ export default {
   padding: 15px 25px;
 }
 
+.delivery-method {
+  display: flex;
+  flex-wrap: wrap;
+
+  >div {
+    border: 1px dotted #949494;
+    width: 50px;
+    height: 40px;
+    margin: 20px 20px 0 0;
+    padding: 10px;
+    cursor: pointer;
+    color: #999;
+  }
+
+  .method-item {
+    position: relative;
+    font-size: 12px;
+
+    >div:nth-child(1) {
+      margin-bottom: 10px;
+
+      span {
+        margin-right: 10px;
+      }
+
+      >span:nth-child(1) {
+        color: #000000;
+        font-size: 14px;
+      }
+    }
+
+    .edit-btn {
+      font-size: 12px;
+      position: absolute;
+      top: 15px;
+      right: 20px;
+      color: $theme_color;
+
+      span:hover {
+        border-bottom: 1px solid $theme_color;
+      }
+    }
+
+    .corner-icon {
+      position: absolute;
+      right: -1px;
+      bottom: -1px;
+
+      div {
+        width: 0;
+        border-top: 20px solid transparent;
+        border-right: 20px solid $theme_color;
+      }
+
+      .ivu-icon {
+        font-size: 12px;
+        position: absolute;
+        bottom: 0;
+        right: 1px;
+        transform: rotate(-15deg);
+        color: #fff;
+      }
+    }
+  }
+
+  .border-red {
+    border-color: $theme_color;
+  }
+}
+
 /** 地址管理 */
 .address-manage {
   display: flex;
   flex-wrap: wrap;
 
-  > div {
+  >div {
     border: 1px dotted #949494;
     width: 265px;
     height: 120px;
@@ -704,20 +824,21 @@ export default {
     .ivu-icon {
       font-size: 24px;
     }
+
   }
 
   .address-item {
     position: relative;
     font-size: 12px;
 
-    > div:nth-child(1) {
+    >div:nth-child(1) {
       margin-bottom: 10px;
 
       span {
         margin-right: 10px;
       }
 
-      > span:nth-child(1) {
+      >span:nth-child(1) {
         color: #000000;
         font-size: 14px;
       }
@@ -767,7 +888,7 @@ export default {
   display: flex;
   justify-content: space-between;
 
-  > span:nth-child(1) {
+  >span:nth-child(1) {
     font-weight: bold;
 
     .ivu-icon {
@@ -779,7 +900,7 @@ export default {
     }
   }
 
-  > span:nth-child(2) {
+  >span:nth-child(2) {
     color: #999;
     position: relative;
     display: flex;
@@ -833,22 +954,23 @@ export default {
       height: 48px;
     }
 
-    > span {
+    >span {
       text-align: center;
       width: 100px;
     }
 
-    > span:nth-child(1) {
+    >span:nth-child(1) {
       font-size: 12px;
 
       flex: 1;
       text-align: left;
-      > span {
+
+      >span {
         margin-left: 10px;
       }
     }
 
-    > span:last-child {
+    >span:last-child {
       color: $theme_color;
       font-weight: bold;
     }
@@ -895,11 +1017,11 @@ export default {
   }
 
   .inovice-content {
-    > span {
+    >span {
       margin-right: 10px;
     }
 
-    > span:last-child {
+    >span:last-child {
       color: $theme_color;
       cursor: pointer;
 
@@ -919,7 +1041,7 @@ export default {
   font-size: 16px;
   color: #999;
 
-  > div > span:nth-child(2) {
+  >div>span:nth-child(2) {
     width: 130px;
     text-align: right;
     display: inline-block;
diff --git a/im/.env b/im/.env
new file mode 100644
index 00000000..38ee6b50
--- /dev/null
+++ b/im/.env
@@ -0,0 +1,7 @@
+NODE_ENV=production
+VUE_APP_PREVIEW=false
+VUE_APP_API_BASE_URL=https://im-api.pickmall.cn
+VUE_APP_WEB_SOCKET_URL=wss://im-api.pickmall.cn/lili/webSocket
+VUE_APP_COMMON=https://common-api.pickmall.cn
+VUE_APP_WEBSITE_NAME="LiLi IM"
+VUE_APP_PC_ORDER_URL=https://store-b2b2c.pickmall.cn
diff --git a/im/.env.development b/im/.env.development
new file mode 100644
index 00000000..d6973c53
--- /dev/null
+++ b/im/.env.development
@@ -0,0 +1,7 @@
+NODE_ENV=development
+VUE_APP_PREVIEW=true
+VUE_APP_API_BASE_URL=http://192.168.0.113:8885
+VUE_APP_WEB_SOCKET_URL=ws://192.168.0.113:8885/lili/webSocket
+VUE_APP_COMMON=http://192.168.0.113:8890
+VUE_APP_PC_URL="http://192.168.0.113:10001"
+VUE_APP_WEBSITE_NAME="LiLi IM"
diff --git a/im/.gitignore b/im/.gitignore
new file mode 100644
index 00000000..403adbc1
--- /dev/null
+++ b/im/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/im/LICENSE b/im/LICENSE
new file mode 100644
index 00000000..dbcbe685
--- /dev/null
+++ b/im/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 YuanDong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/im/README.md b/im/README.md
new file mode 100644
index 00000000..6ac928fc
--- /dev/null
+++ b/im/README.md
@@ -0,0 +1,71 @@
+# Springboot-websocket
+
+过渡阶段IM
+
+前端仓库：https://gitee.com/beijing_hongye_huicheng/im
+
+后端仓库：https://gitee.com/beijing_hongye_huicheng/springboot-websocket
+
+部署方式：
+1、导入数据库，配置resource目录下application.yml的数据库以及redis配置文件。
+
+2、maven打包
+
+3、启动jar包即可。
+
+4、前端程序运行，测试环境需配置根目录 .env.development文件，正式环境需配置 .env 文件。
+
+# 参考项目
+项目前端参考：https://gitee.com/gzydong/LumenIM.git  功能更丰富，大家可以去学习一波
+
+
+# IM体验
+浏览器1打开地址：http://127.0.0.1:8000/message?token=eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyQ29udGV4dCI6IntcInVzZXJuYW1lXCI6XCIxMzAxMTExMTExMVwiLFwibmlja05hbWVcIjpcIuW8oOS4ieWTiOWTiOWTiFwiLFwiZmFjZVwiOlwiaHR0cHM6Ly9saWxpc2hvcC1vc3Mub3NzLWNuLWJlaWppbmcuYWxpeXVuY3MuY29tLzQ1ZDUyOGYwMjRjZTQyMzI4NzYxNjFhZmQxN2Y0ZWExLmpwZ1wiLFwiaWRcIjpcIjEzNzY0MTc2ODQxNDAzMjY5MTJcIixcImxvbmdUZXJtXCI6ZmFsc2UsXCJyb2xlXCI6XCJTVE9SRVwiLFwic3RvcmVJZFwiOlwiMTM3NjQzMzU2NTI0NzQ3MTYxNlwiLFwic3RvcmVOYW1lXCI6XCLlrrblrrbkuZBcIixcImlzU3VwZXJcIjpmYWxzZX0iLCJzdWIiOiIxMzAxMTExMTExMSIsImV4cCI6MTY0NTQ2OTk1M30.fXpCZ2YiFYqACpmxVvKjIpXovfPRDJavHjftpQzdEps
+
+浏览器2打开地址：http://127.0.0.1:8000/message?token=eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyQ29udGV4dCI6IntcInVzZXJuYW1lXCI6XCIxMzAxMTExMTExMVwiLFwibmlja05hbWVcIjpcIuW8oOS4ieWTiOWTiOWTiFwiLFwiZmFjZVwiOlwiaHR0cHM6Ly9saWxpc2hvcC1vc3Mub3NzLWNuLWJlaWppbmcuYWxpeXVuY3MuY29tLzk2N2UzMzU1Yzg0NTRiNGFhMTk1N2M1NTQ5ZTZiNzIwLnBuZ1wiLFwiaWRcIjpcIjEzNzY0MTc2ODQxNDAzMjY5MTJcIixcImxvbmdUZXJtXCI6ZmFsc2UsXCJyb2xlXCI6XCJNRU1CRVJcIixcImlzU3VwZXJcIjpmYWxzZX0iLCJzdWIiOiIxMzAxMTExMTExMSIsImV4cCI6MTY0NTQ2OTAyNn0.GEkGpKRKF3rqzHRhaPCFilPpWe37cIXTT4KnwWR4Bt0&id=1376433565247471616
+
+即可进行聊天。
+
+# NGINX配置事例
+线上NGINX配置在测试阶段出现问题，这里吧相关的配置贴出来供大家参考。
+````
+    server {
+        listen       443 ssl;
+        ssl_certificate "/etc/nginx/ssl/pickmall.cn.pem";
+        ssl_certificate_key "/etc/nginx/ssl/pickmall.cn.key";
+        ssl_session_cache shared:SSL:1m;
+        ssl_session_timeout  10m;
+        ssl_ciphers HIGH:!aNULL:!MD5;
+        ssl_prefer_server_ciphers on;
+        include /etc/nginx/default.d/*.conf;
+
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+
+        server_name  im-api.pickmall.cn;
+        location / {
+            proxy_pass http://127.0.0.1:8088;
+        }
+    }
+
+    server {
+        listen       443 ssl;
+        ssl_certificate "/etc/nginx/ssl/pickmall.cn.pem";
+        ssl_certificate_key "/etc/nginx/ssl/pickmall.cn.key";
+        ssl_session_cache shared:SSL:1m;
+        ssl_session_timeout  10m;
+        ssl_ciphers HIGH:!aNULL:!MD5;
+        ssl_prefer_server_ciphers on;
+        include /etc/nginx/default.d/*.conf;
+
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header REMOTE-HOST $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+            server_name  im.pickmall.cn;
+        try_files $uri $uri/ /index.html;
+        root         /home/im/im/dist;
+    }
+````
\ No newline at end of file
diff --git a/im/babel.config.js b/im/babel.config.js
new file mode 100644
index 00000000..74f3c443
--- /dev/null
+++ b/im/babel.config.js
@@ -0,0 +1,51 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    [
+      "import",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ],
+    [
+      "prismjs",
+      {
+        "languages": [
+          "html",
+          "css",
+          "less",
+          "javascript",
+          "typescript",
+          "json",
+          "xml",
+          "bash",
+          "nginx",
+          "sql",
+          "docker",
+          "php",
+          "java",
+          "go",
+          "python",
+          "ruby",
+          "rust",
+          "objectivec",
+          "c",
+          "csharp",
+          "cpp",
+          "lua",
+          "shell",
+          "vim",
+          "yaml",
+          "yml",
+          "md",
+          "erlang",
+          "ini"
+        ],
+        "theme": "okaidia"
+      }
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/im/jsconfig.json b/im/jsconfig.json
new file mode 100644
index 00000000..09ea7562
--- /dev/null
+++ b/im/jsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "src/*"
+            ]
+        }
+    },
+    "exclude": [
+        "node_modules",
+        "dist"
+    ],
+    "include": [
+        "src/**/*"
+    ]
+}
\ No newline at end of file
diff --git a/im/package.json b/im/package.json
new file mode 100644
index 00000000..a74d93d4
--- /dev/null
+++ b/im/package.json
@@ -0,0 +1,67 @@
+{
+  "name": "LiLi-IM",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.21.4",
+    "babel-plugin-prismjs": "^2.0.1",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.14.1",
+    "js-audio-recorder": "^1.0.6",
+    "js-base64": "^2.5.1",
+    "mavon-editor": "^2.10.4",
+    "nprogress": "^0.2.0",
+    "prismjs": "^1.29.0",
+    "svg-sprite-loader": "^5.0.0",
+    "vue": "^2.6.11",
+    "vue-contextmenujs": "^1.3.13",
+    "vue-cropper": "^0.5.5",
+    "vue-prism-editor": "^0.5.1",
+    "vue-router": "^3.4.9",
+    "vuex": "^3.5.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-import": "^1.13.1",
+    "compression-webpack-plugin": "^5.0.0",
+    "eslint": "^8.28.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "postcss": "^8.4.20",
+    "style-resources-loader": "^1.4.1",
+    "vue-cli-plugin-style-resources-loader": "^0.1.4",
+    "vue-svg-component-runtime": "^1.0.1",
+    "vue-svg-icon-loader": "^2.1.1",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^5.75.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
diff --git a/im/public/favicon.ico b/im/public/favicon.ico
new file mode 100644
index 00000000..5d8e506a
Binary files /dev/null and b/im/public/favicon.ico differ
diff --git a/im/public/index.html b/im/public/index.html
new file mode 100644
index 00000000..1dd7f3d8
--- /dev/null
+++ b/im/public/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="zh-cmn-Hans">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
+    <link rel="icon" href="favicon.ico">
+    <title>LiLi IM</title>
+    <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
+    <!-- require cdn assets css -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
+    <% } %>
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1425251_3v0kq1by4iq.css">
+    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app">
+      <div class="first-loading-wrp">
+        <div class="loading-wrp">
+          <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+        </div>
+      </div>
+    </div>
+    <!-- require cdn assets js -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    <% } %>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/im/src/App.vue b/im/src/App.vue
new file mode 100644
index 00000000..172d870b
--- /dev/null
+++ b/im/src/App.vue
@@ -0,0 +1,47 @@
+<template>
+  <div id="app">
+    <router-view v-if="showView" />
+  </div>
+</template>
+<script>
+export default {
+  name: 'App',
+  data () {
+    return {
+      // 用于点击当前页的router时，刷新当前页
+      showView: true,
+      beforeUnload: '',
+      Handler: ''
+    }
+  },
+  methods: {
+    // 刷新当前路由方法
+    refreshView () {
+      this.showView = false
+      this.$nextTick(() => (this.showView = true))
+    },
+    beforeunloadHandler () {
+      this.beforeUnload = new Date().getTime();
+    },
+    // 页面关闭后 重置btnHide
+    unloadHandler (e) {
+      this.Handler = new Date().getTime() - this.beforeUnload;
+      if (this.Handler <= 5) {
+        var storage = window.localStorage;
+        storage.clear()
+        localStorage.setItem('btnHide', 1)
+      }
+    },
+  },
+
+  mounted () {
+    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
+    window.addEventListener('unload', e => this.unloadHandler(e))
+  },
+  destroyed () {
+    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
+    window.removeEventListener('unload', e => this.unloadHandler(e))
+  },
+
+}
+</script>
diff --git a/im/src/api/chat.js b/im/src/api/chat.js
new file mode 100644
index 00000000..25d077c0
--- /dev/null
+++ b/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);
+};
diff --git a/im/src/api/contacts.js b/im/src/api/contacts.js
new file mode 100644
index 00000000..653242d3
--- /dev/null
+++ b/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')
+}
diff --git a/im/src/api/emoticon.js b/im/src/api/emoticon.js
new file mode 100644
index 00000000..d287fe30
--- /dev/null
+++ b/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)
+}
diff --git a/im/src/api/goods.js b/im/src/api/goods.js
new file mode 100644
index 00000000..0ddde395
--- /dev/null
+++ b/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}`);
+  };
diff --git a/im/src/api/group.js b/im/src/api/group.js
new file mode 100644
index 00000000..3e271672
--- /dev/null
+++ b/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)
+}
diff --git a/im/src/api/upload.js b/im/src/api/upload.js
new file mode 100644
index 00000000..afbbb580
--- /dev/null
+++ b/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)
+}
diff --git a/im/src/api/user.js b/im/src/api/user.js
new file mode 100644
index 00000000..fb13624d
--- /dev/null
+++ b/im/src/api/user.js
@@ -0,0 +1,30 @@
+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);
+};
+// 获取订单列表信息
+export const ServeGetOrderPrint = (params) => {
+  return get(`/im/orders/orders`,params);
+};
diff --git a/im/src/assets/css/global.less b/im/src/assets/css/global.less
new file mode 100644
index 00000000..c1353b95
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/im/src/assets/css/markdown.css b/im/src/assets/css/markdown.css
new file mode 100644
index 00000000..02615f34
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/im/src/assets/css/page/contacts.less b/im/src/assets/css/page/contacts.less
new file mode 100644
index 00000000..8b158ca1
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/im/src/assets/css/page/login-auth.less b/im/src/assets/css/page/login-auth.less
new file mode 100644
index 00000000..075dcf2c
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/im/src/assets/css/reset.css b/im/src/assets/css/reset.css
new file mode 100644
index 00000000..929e8500
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/im/src/assets/css/talk/talk-records.less b/im/src/assets/css/talk/talk-records.less
new file mode 100644
index 00000000..c852598a
--- /dev/null
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/im/src/assets/css/variable.less b/im/src/assets/css/variable.less
new file mode 100644
index 00000000..631f08e7
--- /dev/null
+++ b/im/src/assets/css/variable.less
@@ -0,0 +1,10 @@
+//主题皮肤 - 预留功能
+:root {
+    --themeBagColor: red;
+}
+
+// ------- 定义 Less 变量 -------
+@themeBagColor: var(--themeBagColor);
+
+// 遮罩层背景颜色
+@maskBagColor: rgba(31, 35, 41, .3);
\ No newline at end of file
diff --git a/im/src/assets/image/1701.mp3 b/im/src/assets/image/1701.mp3
new file mode 100644
index 00000000..2f50c05a
Binary files /dev/null and b/im/src/assets/image/1701.mp3 differ
diff --git a/im/src/assets/image/59y888piCn92.mp3 b/im/src/assets/image/59y888piCn92.mp3
new file mode 100644
index 00000000..86150d8d
Binary files /dev/null and b/im/src/assets/image/59y888piCn92.mp3 differ
diff --git a/im/src/assets/image/RaJik9TWDi.png b/im/src/assets/image/RaJik9TWDi.png
new file mode 100644
index 00000000..63fc88fd
Binary files /dev/null and b/im/src/assets/image/RaJik9TWDi.png differ
diff --git a/im/src/assets/image/aliyun-abs.jpg b/im/src/assets/image/aliyun-abs.jpg
new file mode 100644
index 00000000..6c178b7e
Binary files /dev/null and b/im/src/assets/image/aliyun-abs.jpg differ
diff --git a/im/src/assets/image/background/001.jpg b/im/src/assets/image/background/001.jpg
new file mode 100644
index 00000000..1d1a75b7
Binary files /dev/null and b/im/src/assets/image/background/001.jpg differ
diff --git a/im/src/assets/image/background/002.jpg b/im/src/assets/image/background/002.jpg
new file mode 100644
index 00000000..2375e686
Binary files /dev/null and b/im/src/assets/image/background/002.jpg differ
diff --git a/im/src/assets/image/background/003.jpg b/im/src/assets/image/background/003.jpg
new file mode 100644
index 00000000..2257eee2
Binary files /dev/null and b/im/src/assets/image/background/003.jpg differ
diff --git a/im/src/assets/image/background/004.jpg b/im/src/assets/image/background/004.jpg
new file mode 100644
index 00000000..1d928773
Binary files /dev/null and b/im/src/assets/image/background/004.jpg differ
diff --git a/im/src/assets/image/background/005.png b/im/src/assets/image/background/005.png
new file mode 100644
index 00000000..675c74b3
Binary files /dev/null and b/im/src/assets/image/background/005.png differ
diff --git a/im/src/assets/image/chat-search-no-message.png b/im/src/assets/image/chat-search-no-message.png
new file mode 100644
index 00000000..d0fcea45
Binary files /dev/null and b/im/src/assets/image/chat-search-no-message.png differ
diff --git a/im/src/assets/image/chat.png b/im/src/assets/image/chat.png
new file mode 100644
index 00000000..1ca3cbb6
Binary files /dev/null and b/im/src/assets/image/chat.png differ
diff --git a/im/src/assets/image/default-user-banner.png b/im/src/assets/image/default-user-banner.png
new file mode 100644
index 00000000..55ba3569
Binary files /dev/null and b/im/src/assets/image/default-user-banner.png differ
diff --git a/im/src/assets/image/detault-avatar.jpg b/im/src/assets/image/detault-avatar.jpg
new file mode 100644
index 00000000..0de65dc2
Binary files /dev/null and b/im/src/assets/image/detault-avatar.jpg differ
diff --git a/im/src/assets/image/gitee-avatar.jpg b/im/src/assets/image/gitee-avatar.jpg
new file mode 100644
index 00000000..5dcfbd96
Binary files /dev/null and b/im/src/assets/image/gitee-avatar.jpg differ
diff --git a/im/src/assets/image/github-avatar.jpg b/im/src/assets/image/github-avatar.jpg
new file mode 100644
index 00000000..7d8316ef
Binary files /dev/null and b/im/src/assets/image/github-avatar.jpg differ
diff --git a/im/src/assets/image/icon_face.png b/im/src/assets/image/icon_face.png
new file mode 100644
index 00000000..38b6ece0
Binary files /dev/null and b/im/src/assets/image/icon_face.png differ
diff --git a/im/src/assets/image/icon_heart.png b/im/src/assets/image/icon_heart.png
new file mode 100644
index 00000000..ee141915
Binary files /dev/null and b/im/src/assets/image/icon_heart.png differ
diff --git a/im/src/assets/image/no-oncall.6b776fcf.png b/im/src/assets/image/no-oncall.6b776fcf.png
new file mode 100644
index 00000000..fb531dbd
Binary files /dev/null and b/im/src/assets/image/no-oncall.6b776fcf.png differ
diff --git a/im/src/assets/image/obj_w5zD.mp3 b/im/src/assets/image/obj_w5zD.mp3
new file mode 100644
index 00000000..887331fa
Binary files /dev/null and b/im/src/assets/image/obj_w5zD.mp3 differ
diff --git a/im/src/components/chat/TalkCodeBlock.vue b/im/src/components/chat/TalkCodeBlock.vue
new file mode 100644
index 00000000..44340101
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/TalkForwardRecord.vue b/im/src/components/chat/TalkForwardRecord.vue
new file mode 100644
index 00000000..276ea90f
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/TalkSearchRecord.vue b/im/src/components/chat/TalkSearchRecord.vue
new file mode 100644
index 00000000..98cc487b
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/AudioMessage.vue b/im/src/components/chat/messaege/AudioMessage.vue
new file mode 100644
index 00000000..04153ad9
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/CodeMessage.vue b/im/src/components/chat/messaege/CodeMessage.vue
new file mode 100644
index 00000000..7eae1cba
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/FileMessage.vue b/im/src/components/chat/messaege/FileMessage.vue
new file mode 100644
index 00000000..968e2885
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/ForwardMessage.vue b/im/src/components/chat/messaege/ForwardMessage.vue
new file mode 100644
index 00000000..3243cd54
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/FriendApplyMessage.vue b/im/src/components/chat/messaege/FriendApplyMessage.vue
new file mode 100644
index 00000000..5df0dc4f
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/ImageMessage.vue b/im/src/components/chat/messaege/ImageMessage.vue
new file mode 100644
index 00000000..309e07d1
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/InviteMessage.vue b/im/src/components/chat/messaege/InviteMessage.vue
new file mode 100644
index 00000000..476b3eb1
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/LoginMessage.vue b/im/src/components/chat/messaege/LoginMessage.vue
new file mode 100644
index 00000000..3226b643
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/ReplyMessage.vue b/im/src/components/chat/messaege/ReplyMessage.vue
new file mode 100644
index 00000000..d8fb65fc
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/RevokeMessage.vue b/im/src/components/chat/messaege/RevokeMessage.vue
new file mode 100644
index 00000000..281bb6ca
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/SystemTextMessage.vue b/im/src/components/chat/messaege/SystemTextMessage.vue
new file mode 100644
index 00000000..dc31d4fc
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/TextMessage.vue b/im/src/components/chat/messaege/TextMessage.vue
new file mode 100644
index 00000000..80008d26
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/UserCardMessage.vue b/im/src/components/chat/messaege/UserCardMessage.vue
new file mode 100644
index 00000000..740f7e08
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/VideoMessage.vue b/im/src/components/chat/messaege/VideoMessage.vue
new file mode 100644
index 00000000..c8d78dd0
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/VisitCardMessage.vue b/im/src/components/chat/messaege/VisitCardMessage.vue
new file mode 100644
index 00000000..81a62f52
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/VoiceMessage.vue b/im/src/components/chat/messaege/VoiceMessage.vue
new file mode 100644
index 00000000..fb3feb6f
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/VoteMessage.vue b/im/src/components/chat/messaege/VoteMessage.vue
new file mode 100644
index 00000000..eb713468
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/messaege/index.js b/im/src/components/chat/messaege/index.js
new file mode 100644
index 00000000..64a30484
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/im/src/components/chat/panel/OtherLink.vue b/im/src/components/chat/panel/OtherLink.vue
new file mode 100644
index 00000000..d82a70c7
--- /dev/null
+++ b/im/src/components/chat/panel/OtherLink.vue
@@ -0,0 +1,226 @@
+<template>
+  <el-tabs v-model="activeName" @tab-click="handleClick" type="card" :stretch=true>
+    <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"
+          @sendMessage="submitSendMessage" />
+        <FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" :orderList="orderPrintList"
+          @sendMessage="submitSendMessage" />
+      </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, ServeGetOrderPrint } 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";
+import SocketInstance from "@/im-server/socket-instance";
+import { mapState, mapGetters } from "vuex";
+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,
+    },
+  },
+  computed: {
+    ...mapGetters(["talkItems"]),
+    ...mapState({
+      index_name: (state) => state.dialogue.index_name,
+    }),
+  },
+  data () {
+    return {
+      activeName: 'history',
+      storeInfo: {}, //店铺信息
+      memberInfo: {}, //会员信息
+      footPrintParams: {
+        pageSize: 10,
+        pageNumber: 1,
+        memberId: '',
+        storeId: '',
+      },
+      goodsDetail: {},
+      footPrintList: [], // 商品
+      orderPrintList: []// 订单
+    }
+  },
+  mounted () {
+    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
+        }
+      })
+    },
+    loadMoreFootPrint (e) {
+      //触底再次调接口
+      this.footPrintParams.pageNumber++
+      this.getFootPrint()
+    },
+    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
+      }
+      ServeGetFootPrint(this.footPrintParams).then(res => {
+        res.result.records.forEach((item, index) => {
+          if (localStorage.getItem(item.goodsId)) {
+            item.btnHide = 0
+          } else {
+            item.btnHide = 1
+          }
+          if (item.goodsId === this.goodsParams.goodsId) {
+            res.result.records.splice(index, 1)
+          }
+        });
+        this.footPrintList.push(...res.result.records)
+      })
+      // 订单列表
+      ServeGetOrderPrint(this.footPrintParams).then((res) => {
+        if (res.code == 200) {
+          res.result.records.forEach((item) => {
+            this.orderPrintList.push({
+              ...item,
+              btnHide: 1
+            })
+          })
+          // this.orderPrintList.push(...res.result.records)
+        }
+      })
+    },
+
+    // 发送消息回调事件
+    submitSendMessage (record, context, messageType) {
+      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: messageType,
+        text: context,
+        float: "right",
+      };
+
+      // 插入对话记录
+      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;
+    },
+  }
+}
+
+</script>
+
+<style scoped lang="less">
+// /deep/ .el-tabs__nav.is-top {
+// }
+
+/deep/ .el-tabs__nav {
+  height: 60px;
+  line-height: 60px;
+}
+
+/deep/ .el-tab-pane {
+  margin-left: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/im/src/components/chat/panel/PanelHeader.vue b/im/src/components/chat/panel/PanelHeader.vue
new file mode 100644
index 00000000..dedceddc
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/panel/PanelToolbar.vue b/im/src/components/chat/panel/PanelToolbar.vue
new file mode 100644
index 00000000..e55d6b20
--- /dev/null
+++ b/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>
diff --git a/im/src/components/chat/panel/TalkPanel.vue b/im/src/components/chat/panel/TalkPanel.vue
new file mode 100644
index 00000000..10e04e35
--- /dev/null
+++ b/im/src/components/chat/panel/TalkPanel.vue
@@ -0,0 +1,1158 @@
+<template>
+  <div class="flex">
+    <el-container class="ov-hidden flex-10 full-height ">
+      <PanelHeader ref="panelHeader" :data="params" :online="isOnline" :keyboard="inputEvent"
+        @event="handleHeaderEvent" />
+      <!-- 主体信息 -->
+      <el-main class="main-box no-padding">
+        <div id="lumenChatPanel" class="talks-container lum-scrollbar" @scroll="talkPanelScroll($event)">
+          <!-- 数据加载状态栏 -->
+          <div class="loading-toolbar">
+            <span v-if="loadRecord.status == 0" class="color-blue">
+              <i class="el-icon-loading" /> 正在加载数据中...
+            </span>
+            <span v-if="loadRecord.status == 1" class="pointer color-blue" @click="loadChatRecords">
+              <i class="el-icon-bottom" /> 查看更多消息...
+            </span>
+            <span v-if="loadRecord.status == 2"> 没有更多消息了... </span>
+          </div>
+
+          <!-- 消息主体 -->
+          <div v-for="(item, idx) in records" :key="idx">
+            <!-- 群消息 -->
+            <div v-if="item.messageType == 9" class="message-box">
+              <invite-message @cat="catFriendDetail" :invite="item.invite" />
+            </div>
+
+            <!-- 撤回消息 -->
+            <div v-else-if="item.is_revoke == 1" class="message-box">
+              <revoke-message :item="item" />
+            </div>
+
+            <div v-else-if="item.messageType == 0" class="message-box">
+              <system-text-message :content="item.content" />
+            </div>
+
+            <!-- 其它对话消息 -->
+            <div v-else class="message-box record-box" :class="{
+  'direction-rt': item.float == 'right',
+  'checkbox-border': multiSelect.isOpen === true,
+}">
+              <aside v-show="multiSelect.isOpen" class="checkbox-column">
+                <i class="el-icon-success" :class="{ selected: verifyMultiSelect(item.id) }"
+                  @click="triggerMultiSelect(item.id)" />
+              </aside>
+              <aside class="avatar-column">
+                <div class="avatar-box" v-if="item.float == 'right'">
+                  <face :text="face" v-if="face"></face>
+                  <face-null :text="name" v-else></face-null>
+                </div>
+                <div class="avatar-box" v-if="item.float == 'left'">
+                  <face :text="toUser.face" v-if="toUser.face"></face>
+                  <face-null :text="toUser.name" v-else></face-null>
+                </div>
+              </aside>
+              <main class="main-column">
+                <div class="talk-content">
+                  <span class="nickname">
+                    {{ item.float == "right" ? name : toUser.name }} |
+                    {{ unixToDate(item.createTime, "MM月dd日 hh:mm") }}
+                  </span>
+                  <!-- 文本消息 -->
+                  <div v-if="item.messageType == 'MESSAGE'" class="text-message" :class="{
+  left: item.float == 'left',
+  right: item.float == 'right',
+}">
+                    <div class="arrow"></div>
+
+                    <pre v-html="item.text" />
+                  </div>
+
+                  <div v-if="item.messageType == 'GOODS' && item.text != null" class="text-message" :class="{
+  left: item.float == 'left',
+  right: item.float == 'right',
+}">
+                    <div class="base" @click="linkToGoods(item.text.goodsId, item.text.id)">
+                      <div>
+                        <img :src="item.text.thumbnail" class="image" />
+                      </div>
+                      <div style="margin-left: 13px">
+                        <a> {{ item.text.goodsName }} </a>
+                        <div>
+                          <span style="color: red;">￥{{ item.text.price }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div v-if="item.messageType == 'ORDER' && item.text != null" class="text-message" :class="{
+  left: item.float == 'left',
+  right: item.float == 'right',
+}">
+                    <a> 订单号:{{ item.text.sn }} </a>
+                    <div class="baseTwo">
+                      <img :src="item.text.groupImages" style="height: 100px;width: 100px;margin-top: 10px;" />
+                      <span class="orderGoodsName" @click="linkToOrders(item.text.sn)">{{ item.text.groupName }}</span>
+                      <span class="orderGoodsTime">{{ item.text.paymentTime }}</span>
+                    </div>
+                  </div>
+                  <!-- 图片消息 -->
+                  <!-- <image-message
+                    v-else-if="item.messageType == 2 && item.file.file_type == 1"
+                    :src="item.file.file_url"
+                    @contextmenu.native="onCopy(idx, item, $event)"
+                  /> -->
+                </div>
+              </main>
+            </div>
+
+            <!-- 消息时间 -->
+            <div v-show="compareTime(idx, item.createTime)" class="datetime no-select"
+              v-text="sendTime(unixToDate(item.createTime, 'yyyy-MM-dd hh:mm'))" />
+          </div>
+        </div>
+
+        <!-- 置底按钮 -->
+        <transition name="el-fade-in-linear">
+          <div v-show="tipsBoard" class="tips-board pointer" @click="talkPanelScrollBottom">
+            <!-- <SvgMentionDown class="svg" /> -->
+            <span>回到底部</span>
+          </div>
+        </transition>
+
+        <!-- 新消息气泡 -->
+        <div v-show="tipsBoard && unreadMessage.num" class="talk-bubble pointer no-select"
+          @click="talkPanelScrollBottom">
+          <i class="el-icon-chat-dot-round" />
+          <span>新消息({{ unreadMessage.num }}条)</span>
+          <span>
+            &nbsp;#{{ unreadMessage.nickname }}#
+            {{ unreadMessage.content }}
+          </span>
+        </div>
+      </el-main>
+
+      <!-- 页脚信息 -->
+      <el-footer class="footer-box" height="180">
+        <template v-if="multiSelect.isOpen === false">
+          <MeEditor @send="submitSendMessage" @keyboard-event="onKeyboardEvent" />
+        </template>
+        <template v-else>
+          <PanelToolbar v-model="multiSelect.items.length" @event="handleMultiMode" />
+        </template>
+      </el-footer>
+      <el-aside width="200px">
+
+      </el-aside>
+
+    </el-container>
+
+    <!-- 消息管理器 -->
+    <transition name="el-fade-in-linear">
+      <TalkSearchRecord v-if="findChatRecord" :params="{
+  talk_type: params.talk_type,
+  receiver_id: params.receiver_id,
+  title: params.nickname,
+}" @close="findChatRecord = false" />
+    </transition>
+
+    <!-- 链接信息 -->
+    <OtherLink :toUser="toUser" :id="id" :goodsParams="goodsParams" class="flex-4" />
+  </div>
+</template>
+<script>
+import { textReplaceLink } from "@/utils/functions";
+import { textReplaceEmoji } from "@/utils/emojis";
+import OtherLink from "@/components/chat/panel/OtherLink.vue";
+import { mapState, mapGetters } from "vuex";
+import TalkSearchRecord from "@/components/chat/TalkSearchRecord";
+import MeEditor from "@/components/editor/MeEditor";
+import PanelHeader from "./PanelHeader";
+import PanelToolbar from "./PanelToolbar";
+import SocketInstance from "@/im-server/socket-instance";
+import { SvgMentionDown } from "@/core/icons";
+import { formatTime, parseTime, copyTextToClipboard } from "@/utils/functions";
+
+import {
+  ServeTalkRecords,
+  ServeForwardRecords,
+  ServeRemoveRecords,
+  ServeRevokeRecords,
+} from "@/api/chat";
+
+export default {
+  name: "TalkEditorPanel",
+  components: {
+    MeEditor,
+    OtherLink,
+    TalkSearchRecord,
+    SvgMentionDown,
+    PanelToolbar,
+    PanelHeader,
+  },
+  props: {
+    // 对话相关参数
+    params: {
+      type: Object,
+      default: function () {
+        return {
+          // 消息来源（1：好友私信 2:群聊）
+          talk_type: 0,
+          // 消息接收者ID（好友ID或者群聊ID）
+          receiver_id: 0,
+          nickname: "",
+        };
+      },
+    },
+    goodsParams: {
+      type: Object,
+      default: null,
+    },
+
+    // 用户是否在线
+    isOnline: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+      // 记录加载相关参数
+      textReplaceEmoji,
+      textReplaceLink,
+      loadRecord: {
+        status: 0,
+        minRecord: 0,
+        pageSize: 10,
+        pageNumber: 0,
+      },
+
+      // 多选相关操作
+      multiSelect: {
+        isOpen: false,
+        items: [],
+        mode: 0,
+      },
+
+      // 群组Box
+      group: {
+        panel: false,
+        notice: false,
+      },
+
+      // 键盘输入事件
+      keyboardEvent: {
+        isShow: false,
+        time: 0,
+      },
+
+      // 聊天记录管理器数据
+      findChatRecord: false,
+
+      // 置底按钮是否显示
+      tipsBoard: false,
+    };
+  },
+
+  computed: {
+    ...mapGetters(["talkItems"]),
+    ...mapState({
+      name: (state) => state.user.name,
+      face: (state) => state.user.face,
+      unreadMessage: (state) => state.talks.unreadMessage,
+      inputEvent: (state) => state.notify.inputEvent,
+      id: (state) => state.user.id,
+      records: (state) => state.dialogue.records,
+      index_name: (state) => state.dialogue.index_name,
+      toUser: (state) => state.user.toUser,
+    }),
+  },
+  watch: {
+    // 监听面板传递参数
+    params () {
+      this.loadRecord.minRecord = 0;
+      this.tipsBoard = false;
+      this.multiSelect = {
+        isOpen: false,
+        items: [],
+        mode: 0,
+      };
+      this.loadChatRecords();
+    },
+  },
+  mounted () {
+    this.loadChatRecords();
+  },
+  methods: {
+    parseTime,
+    sendTime: formatTime,
+
+    // 处理 Header 组件事件
+    handleHeaderEvent (event_name) {
+      switch (event_name) {
+        case "history":
+          this.findChatRecord = true;
+          break;
+        case "notice":
+          this.group.notice = true;
+          break;
+        case "setting":
+          this.group.panel = true;
+          break;
+      }
+    },
+    // linkTo(type,val){
+    //   if(type === 'GOODS'){
+    //     let routeUrl = this.$router.resolve({
+    //       path: '/goodsDetail',
+    //       query: { skuId:val.id, goodsId:val.goodsId }
+    //     });
+    //   window.open(routeUrl.href, '_blank');
+    //   }
+    // },
+    // #TODO 冗余代码
+
+    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;
+    },
+
+    /**
+     * 将unix时间戳转换为指定格式
+     * @param unix   时间戳【秒】
+     * @param format 转换格式
+     * @returns {*|string}
+     */
+    unixToDate (unix, format) {
+      if (!unix) return unix;
+      let _format = format || "yyyy-MM-dd hh:mm:ss";
+      const d = new Date(unix);
+      const o = {
+        "M+": d.getMonth() + 1,
+        "d+": d.getDate(),
+        "h+": d.getHours(),
+        "m+": d.getMinutes(),
+        "s+": d.getSeconds(),
+        "q+": Math.floor((d.getMonth() + 3) / 3),
+        S: d.getMilliseconds(),
+      };
+      if (/(y+)/.test(_format))
+        _format = _format.replace(
+          RegExp.$1,
+          (d.getFullYear() + "").substr(4 - RegExp.$1.length)
+        );
+      for (const k in o)
+        if (new RegExp("(" + k + ")").test(_format))
+          _format = _format.replace(
+            RegExp.$1,
+            RegExp.$1.length === 1
+              ? o[k]
+              : ("00" + o[k]).substr(("" + o[k]).length)
+          );
+      return _format;
+    },
+
+    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
+      );
+    },
+    // #冗余代码结束
+
+    // 回车键发送消息回调事件
+    submitSendMessage (content) {
+      console.log("发送", content);
+      const record = {
+        operation_type: "MESSAGE",
+        to: this.params.receiver_id,
+        from: this.id,
+        message_type: "MESSAGE",
+        context: content,
+        talk_id: this.params.talkId,
+      };
+      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: "MESSAGE",
+        text: content,
+        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,
+        });
+      }
+    },
+
+    // 推送编辑事件消息
+    onKeyboardEvent (text) {
+      this.$store.commit("UPDATE_TALK_ITEM", {
+        index_name: this.index_name,
+        draft_text: text,
+      });
+
+      // 判断当前对话是否属于私聊信息
+      if (this.params.talk_type == 2 || !this.isOnline) return;
+
+      // 判断是否推送键盘输入事件消息
+      if (!this.$store.state.settings.keyboardEventNotify) {
+        return false;
+      }
+
+      let time = new Date().getTime();
+      // 判断在两秒内是否已推送事件
+      if (this.keyboardEvent.time != 0 && time - this.keyboardEvent.time < 2000)
+        return;
+
+      this.keyboardEvent.time = time;
+
+      // 调用父类Websocket组件发送消息
+      SocketInstance.emit("event_keyboard", {
+        sender_id: this.id,
+        receiver_id: this.params.receiver_id,
+      });
+    },
+
+
+
+    // 加载用户聊天详情信息
+    loadChatRecords () {
+      console.log(this.records.length, 'this.records.length ')
+      if (this.loadRecord.pageNumber === 0 || this.params.clickFlag) {
+        this.loadRecord.pageNumber = 1
+        this.params.clickFlag = false
+      } else {
+        this.loadRecord.pageNumber = this.loadRecord.pageNumber + 1
+      }
+      const user_id = this.id;
+      const data = {
+        pageNumber: this.loadRecord.pageNumber,
+        pageSize: this.loadChatRecords.pageSize,
+        talkId: this.params.talkId,
+      };
+      this.loadRecord.status = 0;
+
+      let el = document.getElementById('lumenChatPanel')
+      let scrollHeight = el.scrollHeight
+      ServeTalkRecords(data).then((res) => {
+        // 防止点击切换过快消息返回延迟，导致信息错误
+        // console.log("读取历史数据", res);
+        const records = res.result.map((item) => {
+          let key = new Date().getTime();
+          item.float = "center";
+          if (item.toUser > 0) {
+            item.float = item.fromUser == user_id ? "right" : "left";
+          }
+          if (item.messageType == 'GOODS') {
+            item.text = JSON.parse(item.text)
+          }
+          if (item.messageType == 'ORDER') {
+            item.text = JSON.parse(item.text)
+          }
+          return { ...item, [key]: key };
+        });
+        this.$store.commit("UNSHIFT_DIALOGUE", records);
+        records.length
+          ? (this.loadRecord.status = 1)
+          : (this.loadRecord.status = 2);
+        this.$nextTick(() => {
+          if (data.record_id == 0 || !data.record_id) {
+            el.scrollTop = el.scrollHeight
+          } else {
+            el.scrollTop = el.scrollHeight - scrollHeight
+          }
+        })
+      });
+    },
+
+    // 多选处理方式
+    handleMultiMode (value) {
+      if (value == "close") {
+        this.closeMultiSelect();
+        return false;
+      }
+
+      if (this.multiSelect.items.length <= 1) {
+        return false;
+      }
+
+      if (value == "forward" || value == "merge_forward") {
+        this.multiSelect.mode = value == "forward" ? 1 : 2;
+        if (this.verifyMultiSelectType(3)) {
+          this.$notify({
+            title: "消息转发",
+            message: "会话记录不支持合并转发",
+          });
+          return false;
+        }
+
+        this.$contacts({
+          confirm: this.confirmSelectContacts,
+        });
+      } else if (value == "delete") {
+        this.multiSelect.mode = 3;
+
+        // 批量删除
+        let ids = this.multiSelect.items;
+        ServeRemoveRecords({
+          talk_type: this.params.talk_type,
+          receiver_id: this.params.receiver_id,
+          record_id: ids.join(","),
+        }).then((res) => {
+          if (res.code == 200) {
+            this.delRecords(ids).closeMultiSelect();
+          }
+        });
+      }
+    },
+
+    // 确认消息转发联系人事件
+    confirmSelectContacts (data) {
+      let user_ids = [];
+      let group_ids = [];
+      data.forEach((item) => {
+        if (item.type == 1) {
+          user_ids.push(item.id);
+        } else {
+          group_ids.push(item.id);
+        }
+      });
+
+      ServeForwardRecords({
+        forward_mode: this.multiSelect.mode,
+        talk_type: this.params.talk_type,
+        receiver_id: this.params.receiver_id,
+        records_ids: this.multiSelect.items,
+        receive_user_ids: user_ids,
+        receive_group_ids: group_ids,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.closeMultiSelect();
+          this.$notify({
+            title: "消息转发",
+            message: "消息转发成功...",
+            type: "success",
+          });
+        }
+      });
+    },
+
+    // 处理消息时间是否显示
+    compareTime (index, datetime) {
+      if (datetime == undefined) {
+        return false;
+      }
+      if (typeof datetime == "number") {
+        datetime = this.unixToDate(datetime, "yyyy-MM-dd hh:mm");
+      }
+
+      if (this.records[index].is_revoke == 1) {
+        return false;
+      }
+
+      datetime = datetime.replace(/-/g, "/");
+      let time = Math.floor(Date.parse(datetime) / 1000);
+      let currTime = Math.floor(new Date().getTime() / 1000);
+
+      // 当前时间5分钟内时间不显示
+      if (currTime - time < 300) return false;
+
+      // 判断是否是最后一条消息,最后一条消息默认显示时间
+      if (index == this.records.length - 1) {
+        return true;
+      }
+
+      let nextDate = this.records[index + 1].createTime.replace(/-/g, "/");
+
+      return !(
+        parseTime(new Date(datetime), "{y}-{m}-{d} {h}:{i}") ==
+        parseTime(new Date(nextDate), "{y}-{m}-{d} {h}:{i}")
+      );
+    },
+
+    // 查看好友用户信息
+    catFriendDetail (value) {
+      this.$user(value);
+    },
+
+    // 撤回消息
+    revokeRecords (index, item) {
+      ServeRevokeRecords({
+        record_id: item.id,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.$store.commit("UPDATE_DIALOGUE", { id: item.id, is_revoke: 1 });
+        }
+      });
+    },
+
+    // 删除消息
+    removeRecords (index, item) {
+      let receiver_id = item.receiver_id;
+      if (item.talk_type == 1 && item.user_id != this.id) {
+        receiver_id = item.user_id;
+      }
+
+      ServeRemoveRecords({
+        talk_type: item.talk_type,
+        receiver_id: receiver_id,
+        record_id: item.id.toString(),
+      }).then((res) => {
+        if (res.code == 200) {
+          this.$store.commit("DELETE_DIALOGUE", index);
+        }
+      });
+    },
+
+    // 从列表中删除记录
+    delRecords (arr) {
+      this.$store.commit("BATCH_DELETE_DIALOGUE", arr);
+      return this;
+    },
+
+    // 开启多选模式
+    openMultiSelect () {
+      this.multiSelect.isOpen = true;
+    },
+
+    // 关闭多选模式
+    closeMultiSelect () {
+      this.multiSelect.isOpen = false;
+      this.multiSelect.items = [];
+    },
+
+    // 判断记录是否选中
+    verifyMultiSelect (records_id) {
+      return this.multiSelect.items.indexOf(records_id) >= 0;
+    },
+
+    // 触发多选事件
+    triggerMultiSelect (records_id) {
+      let i = this.multiSelect.items.indexOf(records_id);
+      if (i >= 0) {
+        this.multiSelect.items.splice(i, 1);
+      } else {
+        if (this.multiSelect.items.length >= 30) {
+          this.$notify({
+            title: "温馨提示",
+            message: "批量操作最大支持30条数据...",
+          });
+          return false;
+        }
+        this.multiSelect.items.push(records_id);
+      }
+    },
+
+    // 验证是否存在选择的指定类型的消息
+    verifyMultiSelectType (type) {
+      return this.records.some((item) => {
+        return this.verifyMultiSelect(item.id) && item.messageType == type;
+      });
+    },
+
+    // 消息点击右键触发自定义菜单
+    onCopy (idx, item, event) {
+      let menus = [];
+      let content = "";
+      if (document.getElementById("copy_class_" + item.id)) {
+        content = document.getElementById("copy_class_" + item.id).innerText;
+      }
+
+      if (content) {
+        menus.push({
+          label: "复制",
+          icon: "el-icon-document-copy",
+          customClass: "cus-contextmenu-item",
+          onClick: () => {
+            copyTextToClipboard(content);
+          },
+        });
+      }
+
+      if (item.user_id == this.id) {
+        let time =
+          new Date().getTime() - Date.parse(item.createTime.replace(/-/g, "/"));
+        if (Math.floor(time / 1000 / 60) < 2) {
+          menus.push({
+            label: "撤回",
+            icon: "el-icon-s-flag",
+            customClass: "cus-contextmenu-item",
+            onClick: () => {
+              this.revokeRecords(idx, item);
+            },
+          });
+        }
+      }
+
+      menus.push({
+        label: "删除",
+        icon: "el-icon-delete",
+        customClass: "cus-contextmenu-item",
+        onClick: () => {
+          this.removeRecords(idx, item);
+        },
+      });
+
+      menus.push({
+        label: "引用",
+        icon: "el-icon-connection",
+        customClass: "cus-contextmenu-item",
+        onClick: () => { },
+      });
+
+      menus.push({
+        label: "多选",
+        icon: "el-icon-finished",
+        customClass: "cus-contextmenu-item",
+        onClick: () => {
+          this.openMultiSelect();
+        },
+      });
+
+      // 判断是否是图片消息
+      if (item.messageType == 2 && item.file.file_type == 1) {
+        menus.push({
+          label: "收藏",
+          icon: "el-icon-picture",
+          customClass: "cus-contextmenu-item",
+          onClick: () => {
+            this.$store.commit("SAVE_USER_EMOTICON", {
+              record_id: item.id,
+            });
+          },
+        });
+      }
+
+      this.$contextmenu({
+        items: menus,
+        event,
+        customClass: "cus-contextmenu",
+        zIndex: 3,
+        minWidth: 120,
+      });
+
+      this.closeMultiSelect();
+      event.preventDefault();
+    },
+
+    hideChatGroup () {
+      this.group.panel = false;
+    },
+
+    // 修改群聊免打扰状态
+    disturbChange (detail) {
+      this.$store.commit("UPDATE_TALK_ITEM", {
+        index_name: `2_${this.params.receiver_id}`,
+        is_disturb: parseInt(detail.status),
+      });
+    },
+
+    // 退出群聊回调事件
+    quitGroupSuccess () {
+      this.$emit("close-talk");
+    },
+
+    // 同步群信息
+    syncGroupInfo (groupInfo) {
+      this.$refs.panelHeader.setGroupNum(groupInfo.members_num);
+    },
+
+    // 对话面板滚动事件
+    talkPanelScroll (e) {
+      if (e.target.scrollTop == 0 && this.loadRecord.status == 1) {
+        this.loadChatRecords();
+        return;
+      }
+
+      const height = e.target.scrollTop + e.target.clientHeight + 5;
+      this.tipsBoard = height < e.target.scrollHeight;
+      if (this.tipsBoard == false && this.unreadMessage.num > 0) {
+        this.$store.commit("CLEAR_TLAK_UNREAD_MESSAGE");
+      }
+    },
+
+    // 聊天版本滚动到底部
+    talkPanelScrollBottom () {
+      let el = document.getElementById("lumenChatPanel");
+      el.scrollTop = el.scrollHeight;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.orderSn {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.orderGoodsName {
+  width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: absolute;
+  margin-top: 10px;
+  margin-left: 10px;
+}
+
+.orderGoodsTime {
+  margin-left: 10px;
+  color: red;
+  position: absolute;
+  margin-top: 35px;
+}
+
+.main-box {
+  position: relative;
+}
+
+/* 面板页脚 */
+.footer-box {
+  height: 160px !important;
+  padding: 0;
+  border-top: 1px solid #f5f5f5;
+}
+
+/* 侧边栏css */
+.sidebar-box {
+  position: absolute;
+  width: 350px;
+  height: 100%;
+  top: 0px;
+  right: -350px;
+  z-index: 1;
+  background: white;
+  transition: all 0.5s ease-in-out;
+  -moz-transition: all 0.5s ease-in-out;
+  -webkit-transition: all 0.5s ease-in-out;
+  -o-transition: all 0.5s ease-in-out;
+
+  &.show {
+    right: 0;
+    box-shadow: 0 0 14px #e2e1e1;
+  }
+}
+
+.tips-board {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  bottom: 20px;
+  height: 30px;
+  width: 100px;
+  border-radius: 20px;
+  font-size: 12px;
+  background-color: #fff;
+  box-shadow: 0 2.5px 10px 0 rgba(31, 35, 41, 0.1);
+  color: #1f2329;
+
+  span {
+    margin-left: 5px;
+    margin-top: -2px;
+  }
+
+  .svg {
+    width: 10px;
+    height: 10px;
+    color: black;
+  }
+}
+
+
+.base {
+  margin-top: 5px;
+  height: 120px;
+  display: flex;
+
+  div {
+    width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 8px;
+    white-space: nowrap;
+  }
+
+  .image {
+    height: 100px;
+    margin-top: 3px;
+    width: 100px
+  }
+
+}
+
+.talk-bubble {
+  position: absolute;
+  left: 0px;
+  bottom: 20px;
+  max-width: 300px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 0 20px 20px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: white;
+  padding: 0 15px 0 30px;
+  font-size: 13px;
+  background: #409eff;
+
+  i {
+    font-size: 22px;
+    position: absolute;
+    left: 5px;
+    top: 9px;
+  }
+}
+
+.talks-container {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 15px 30px;
+  overflow-y: auto;
+
+  .message-box {
+    width: 100%;
+    min-height: 30px;
+    margin-bottom: 5px;
+  }
+
+  .loading-toolbar {
+    height: 30px;
+    line-height: 30px;
+    margin: 5px 0;
+    text-align: center;
+    user-select: none;
+    font-size: 13px;
+    color: #cec4c4;
+
+    .color-blue {
+      color: #409eff;
+    }
+  }
+
+  .datetime {
+    height: 30px;
+    line-height: 30px;
+    color: #ccc9c9;
+    font-size: 12px;
+    text-align: center;
+    margin: 5px 0;
+  }
+
+  .record-box {
+    display: flex;
+    flex-direction: row;
+    transition: 0.5s ease;
+
+    .checkbox-column {
+      display: flex;
+      justify-content: center;
+      flex-basis: 40px;
+      flex-shrink: 0;
+      order: 1;
+      user-select: none;
+      padding-top: 25px;
+
+      i {
+        color: #ccc;
+        cursor: pointer;
+        font-size: 22px;
+
+        &.selected {
+          color: #409eff !important;
+        }
+      }
+    }
+
+    .avatar-column {
+      width: 40px;
+      flex-basis: 40px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      order: 2;
+      user-select: none;
+      padding-top: 22px;
+      flex-direction: column;
+    }
+
+    .main-column {
+      flex: 1 auto;
+      order: 3;
+      position: relative;
+      box-sizing: border-box;
+      padding: 5px;
+      overflow: hidden;
+
+      .talk-title {
+        display: flex;
+        align-items: center;
+        height: 15px;
+        margin-bottom: 2px;
+        font-size: 10px;
+        user-select: none;
+        color: #a7a0a0;
+        opacity: 0;
+        transition: 0.5s ease;
+
+        &.show {
+          opacity: 1 !important;
+        }
+
+        span {
+          transform: scale(0.9);
+        }
+      }
+
+      .talk-content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        box-sizing: border-box;
+        width: 100%;
+
+        .nickname {
+          font-size: 12px;
+          color: #a7a0a0;
+          margin: -4px 0 4px -8px;
+          transform: scale(0.9);
+        }
+      }
+
+      &:hover {
+        .talk-title {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.direction-rt {
+      .avatar-column {
+        order: 3;
+      }
+
+      .main-column {
+        order: 2;
+
+        .talk-title {
+          justify-content: flex-end;
+        }
+
+        .talk-content {
+          align-items: flex-end;
+        }
+      }
+    }
+
+    &.checkbox-border {
+      border: 1px dashed #c4c4ec;
+
+      &:hover {
+        border-color: #409eff;
+      }
+    }
+  }
+}
+
+@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>
diff --git a/im/src/components/chat/panel/template/footPrint.vue b/im/src/components/chat/panel/template/footPrint.vue
new file mode 100644
index 00000000..5bc8f98b
--- /dev/null
+++ b/im/src/components/chat/panel/template/footPrint.vue
@@ -0,0 +1,239 @@
+<template>
+  <div class="box" @scroll="scrollBottom">
+    <div class="tab">
+      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
+        <el-tab-pane label="最近浏览" name="goods">
+          <dl>
+            <dd v-for="item in list" v-infinite-scroll="loadMore">
+              <div class="base">
+                <div>
+                  <img :src="item.thumbnail" class="image" />
+                </div>
+                <div style="margin-left: 13px">
+                  <a class="goods_name" @click="linkToGoods(item.goodsId, item.id)">{{ item.goodsName }}</a>
+                  <div style="margin-top: 8px;">
+                    <span style="color: red;">￥{{ item.price }}</span>
+                  </div>
+                  <div>
+                    <el-button class="store-button" type="danger" v-if="item.btnHide == 1" size="mini"
+                      @click="submitSendGoodsMessage(item)" plain>发送</el-button>
+                  </div>
+                </div>
+              </div>
+            </dd>
+          </dl>
+        </el-tab-pane>
+        <el-tab-pane label="订单列表" name="orders">
+          <dl>
+            <dd v-for="(item, index) in orderList" v-infinite-scroll="loadMore" :key="index">
+              <div style="margin-bottom: 20px;">
+                <span class="orderSn">订单号：{{ item.sn }}</span>
+                <img :src="item.groupImages" alt=""
+                  style="height: 100px; width: 100px;margin-top: 10px; vertical-align: middle; ">
+                <span class="orderGoodsName" @click="linkToOrders(item.sn)"> {{ item.groupName }}</span>
+                <span style="margin-left: 10px; color: red;">{{ item.paymentTime }}</span>
+                <div class="orderBtn">
+                  <el-button type="danger" class="store-button" v-if="item.btnHide == 1" size="mini"
+                    @click="submitSendOrderMessage(item, index)" plain>发送</el-button>
+                </div>
+              </div>
+
+            </dd>
+          </dl>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Tag, button, Tabs, TabPane, InfiniteScroll } from 'element-ui'
+import { mapState, mapGetters } from "vuex";
+export default {
+  directives: {
+    "infinite-scroll": InfiniteScroll,
+  },
+  data () {
+    return {
+      activeName: 'goods',
+      btnHide: undefined,
+      hide: true
+    }
+  },
+  computed: {
+    ...mapGetters(["talkItems"]),
+    ...mapState({
+      id: (state) => state.user.id,
+
+      toUser: (state) => state.user.toUser,
+    }),
+  },
+  components: {
+    "el-tag": Tag,
+    "el-button": button,
+    "el-tabs": Tabs,
+    "el-tab-pane": TabPane,
+  },
+  methods: {
+    //跳转订单列表
+
+    scrollBottom (e) {
+      const { scrollTop, scrollHeight, clientHeight } = e.srcElement
+      if (scrollTop + clientHeight >= scrollHeight) {
+        this.$emit('loadMore')
+      }
+    },
+    loadMore () {
+
+    },
+    // 发送消息回调事件
+    submitSendGoodsMessage (item) {
+      const context = {
+        id: item.id,
+        goodsId: item.goodsId,
+        thumbnail: item.thumbnail,
+        price: item.price,
+        goodsName: item.goodsName
+      }
+      const record = {
+        operation_type: "MESSAGE",
+        to: this.toUser.userId,
+        from: this.id,
+        message_type: "GOODS",
+        context: context,
+        talk_id: this.toUser.id,
+      };
+      this.$emit('sendMessage', record, context, 'GOODS');
+      localStorage.setItem(item.goodsId, 0)
+      item.btnHide = 0
+    },
+    // 发送订单列表
+    submitSendOrderMessage (item, index) {
+      const context = {
+        sn: item.sn,
+        groupImages: item.groupImages,
+        paymentTime: item.paymentTime,
+        groupName: item.groupName,
+      }
+      const record = {
+        operation_type: "MESSAGE",
+        to: this.toUser.userId,
+        from: this.id,
+        message_type: "ORDER",
+        context: context,
+        talk_id: this.toUser.id,
+      };
+      this.$emit('sendMessage', record, context, 'ORDER');
+      localStorage.setItem(item.goodsId, 0)
+      item.btnHide = 0
+    },
+    handleClick (tab, event) {
+      console.log(tab, event);
+    }
+  },
+  props: {
+    list: {
+      type: Array,
+      default: [],
+    },
+    orderList: {
+      type: Array,
+      default: []
+    }
+  },
+  mounted () {
+    console.log(this.orderList, 'orderList');
+    this.btnHide = localStorage.getItem('btnHide')
+  }
+}
+
+</script>
+
+<style scoped lang="less">
+.orderGoodsName {
+  width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: absolute;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
+.orderSn {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.orderBtn {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 15px;
+  position: relative;
+  bottom: 30px;
+}
+
+.goods_name {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+
+}
+
+/deep/ .el-tabs__item.is-top:last-child {
+  color: black;
+}
+
+/deep/.el-tabs__active-bar {
+  background-color: #f23030;
+}
+
+/deep/ .el-tabs__nav.is-top {
+  height: 50px;
+}
+
+.tab {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.box {
+  height: 500px;
+  overflow: auto;
+  width: 350px;
+}
+
+.store-button {
+  background-color: white;
+  border-color: #F56C6C;
+  margin-top: 10px;
+}
+
+.base {
+  margin-top: 5px;
+  height: 120px;
+  display: flex;
+
+  .price {
+    color: red;
+    margin-top: 15px;
+  }
+
+  .image {
+    height: 100px;
+    margin-top: 3px;
+    width: 100px;
+  }
+
+}
+
+.separate {
+  margin-top: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/im/src/components/chat/panel/template/goodsLink.vue b/im/src/components/chat/panel/template/goodsLink.vue
new file mode 100644
index 00000000..570f0c3f
--- /dev/null
+++ b/im/src/components/chat/panel/template/goodsLink.vue
@@ -0,0 +1,186 @@
+<template>
+  <div style="width: 350px;">
+    当前浏览
+    <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>
+        <div v-if="hide">
+          <el-button class="store-button" type="danger" v-if="!sendFlag && btnHide == 1" size="mini"
+            @click="submitSendMessage()" plain>发送</el-button>
+        </div>
+      </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,
+      btnHide: undefined,
+      hide: true
+    }
+  },
+  computed: {
+    ...mapGetters(["talkItems"]),
+    ...mapState({
+      id: (state) => state.user.id,
+      index_name: (state) => state.dialogue.index_name,
+      toUser: (state) => state.user.toUser,
+    }),
+  },
+  mounted () {
+    this.btnHide = localStorage.getItem('btnHide')
+  },
+  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,
+        });
+      }
+      // 发送后隐藏按钮  0：隐藏 1：显示
+      localStorage.setItem('btnHide', 0)
+      this.hide = false
+    },
+
+    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 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 8px;
+    white-space: nowrap;
+    margin-top: 8px;
+  }
+
+  .image {
+    height: 100px;
+    margin-top: 3px;
+    width: 100px
+  }
+
+}
+
+.click-button {
+  margin-top: 8px;
+  background-color: white;
+  border-color: #F56C6C;
+}
+
+.separate {
+  margin-top: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/im/src/components/chat/panel/template/storeDetail.vue b/im/src/components/chat/panel/template/storeDetail.vue
new file mode 100644
index 00000000..d1034fd7
--- /dev/null
+++ b/im/src/components/chat/panel/template/storeDetail.vue
@@ -0,0 +1,77 @@
+<template>
+  <div style="width: 362px;">
+    <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>
\ No newline at end of file
diff --git a/im/src/components/editor/MeEditor.vue b/im/src/components/editor/MeEditor.vue
new file mode 100644
index 00000000..cc0605c0
--- /dev/null
+++ b/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>
diff --git a/im/src/components/editor/MeEditorEmoticon.vue b/im/src/components/editor/MeEditorEmoticon.vue
new file mode 100644
index 00000000..d5614241
--- /dev/null
+++ b/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>
diff --git a/im/src/components/editor/MeEditorFileManage.vue b/im/src/components/editor/MeEditorFileManage.vue
new file mode 100644
index 00000000..65b89846
--- /dev/null
+++ b/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>
diff --git a/im/src/components/editor/MeEditorImageView.vue b/im/src/components/editor/MeEditorImageView.vue
new file mode 100644
index 00000000..cad37b14
--- /dev/null
+++ b/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>
diff --git a/im/src/components/editor/MeEditorRecorder.vue b/im/src/components/editor/MeEditorRecorder.vue
new file mode 100644
index 00000000..3e2c79ec
--- /dev/null
+++ b/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>
diff --git a/im/src/components/editor/MeEditorSystemEmoticon.vue b/im/src/components/editor/MeEditorSystemEmoticon.vue
new file mode 100644
index 00000000..c7028bd7
--- /dev/null
+++ b/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>
diff --git a/im/src/components/editor/MeEditorVote.vue b/im/src/components/editor/MeEditorVote.vue
new file mode 100644
index 00000000..7819fa7d
--- /dev/null
+++ b/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>
diff --git a/im/src/components/face-null.vue b/im/src/components/face-null.vue
new file mode 100644
index 00000000..f041cb81
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/im/src/components/face.vue b/im/src/components/face.vue
new file mode 100644
index 00000000..9f4d6709
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/im/src/components/global/Empty.vue b/im/src/components/global/Empty.vue
new file mode 100644
index 00000000..a4cb33a6
--- /dev/null
+++ b/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>
diff --git a/im/src/components/global/Loading.vue b/im/src/components/global/Loading.vue
new file mode 100644
index 00000000..2cb1def5
--- /dev/null
+++ b/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>
diff --git a/im/src/components/layout/AbsModule.vue b/im/src/components/layout/AbsModule.vue
new file mode 100644
index 00000000..7768db15
--- /dev/null
+++ b/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>
diff --git a/im/src/components/layout/AvatarCropper.vue b/im/src/components/layout/AvatarCropper.vue
new file mode 100644
index 00000000..0f9883f4
--- /dev/null
+++ b/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>
diff --git a/im/src/components/layout/RewardModule.vue b/im/src/components/layout/RewardModule.vue
new file mode 100644
index 00000000..6fdff64d
--- /dev/null
+++ b/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>
diff --git a/im/src/components/layout/SkinModule.vue b/im/src/components/layout/SkinModule.vue
new file mode 100644
index 00000000..f25b6ff0
--- /dev/null
+++ b/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>
diff --git a/im/src/components/layout/WelcomeModule.vue b/im/src/components/layout/WelcomeModule.vue
new file mode 100644
index 00000000..7d2fa6c0
--- /dev/null
+++ b/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>
diff --git a/im/src/components/notify/FriendApplyNotify.vue b/im/src/components/notify/FriendApplyNotify.vue
new file mode 100644
index 00000000..db61840e
--- /dev/null
+++ b/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>
diff --git a/im/src/components/notify/NewMessageNotify.vue b/im/src/components/notify/NewMessageNotify.vue
new file mode 100644
index 00000000..6bb63a6a
--- /dev/null
+++ b/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>
diff --git a/im/src/components/svg-icon/index.vue b/im/src/components/svg-icon/index.vue
new file mode 100644
index 00000000..7ba6cfdc
--- /dev/null
+++ b/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>
diff --git a/im/src/components/user/UserSearch.vue b/im/src/components/user/UserSearch.vue
new file mode 100644
index 00000000..97bfcab2
--- /dev/null
+++ b/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>
diff --git a/im/src/components/user/user-card/UserCardDetail.vue b/im/src/components/user/user-card/UserCardDetail.vue
new file mode 100644
index 00000000..93ed30c7
--- /dev/null
+++ b/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>
diff --git a/im/src/components/user/user-card/index.js b/im/src/components/user/user-card/index.js
new file mode 100644
index 00000000..578b394c
--- /dev/null
+++ b/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
+  },
+}
diff --git a/im/src/config/config.js b/im/src/config/config.js
new file mode 100644
index 00000000..a5dd35ba
--- /dev/null
+++ b/im/src/config/config.js
@@ -0,0 +1,8 @@
+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 || "",
+  STORE_URL:process.env.VUE_APP_PC_ORDER_URL || "http://192.168.0.139:10002",
+};
diff --git a/im/src/constants/talk.js b/im/src/constants/talk.js
new file mode 100644
index 00000000..adc2a17e
--- /dev/null
+++ b/im/src/constants/talk.js
@@ -0,0 +1,9 @@
+/**
+ * 私聊
+ */
+const PRIVATE_CHAT = 1
+
+/**
+ * 群聊
+ */
+const GROUP_CHAT = 2
diff --git a/im/src/core/directives.js b/im/src/core/directives.js
new file mode 100644
index 00000000..a1162a0e
--- /dev/null
+++ b/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)
diff --git a/im/src/core/filter.js b/im/src/core/filter.js
new file mode 100644
index 00000000..e69de29b
diff --git a/im/src/core/global-component.js b/im/src/core/global-component.js
new file mode 100644
index 00000000..d4166261
--- /dev/null
+++ b/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);
diff --git a/im/src/core/icons.js b/im/src/core/icons.js
new file mode 100644
index 00000000..dfe7eceb
--- /dev/null
+++ b/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,
+}
diff --git a/im/src/core/lazy-use.js b/im/src/core/lazy-use.js
new file mode 100644
index 00000000..43a07afd
--- /dev/null
+++ b/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.')
diff --git a/im/src/directive/PreCode.js b/im/src/directive/PreCode.js
new file mode 100644
index 00000000..7c881422
--- /dev/null
+++ b/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,
+}
diff --git a/im/src/icons/index.js b/im/src/icons/index.js
new file mode 100644
index 00000000..75da57f0
--- /dev/null
+++ b/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);
diff --git a/im/src/icons/svg/mention-down.svg b/im/src/icons/svg/mention-down.svg
new file mode 100644
index 00000000..354a96a9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/im/src/icons/svg/not-data.svg b/im/src/icons/svg/not-data.svg
new file mode 100644
index 00000000..fab577c3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/im/src/icons/svg/not-fount.svg b/im/src/icons/svg/not-fount.svg
new file mode 100644
index 00000000..88ad63f8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/im/src/icons/svg/note-book.svg b/im/src/icons/svg/note-book.svg
new file mode 100644
index 00000000..ab37847a
--- /dev/null
+++ b/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>
diff --git a/im/src/icons/svg/note.svg b/im/src/icons/svg/note.svg
new file mode 100644
index 00000000..f95a7a0c
--- /dev/null
+++ b/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>
diff --git a/im/src/icons/svg/zhuangfa.svg b/im/src/icons/svg/zhuangfa.svg
new file mode 100644
index 00000000..37935f77
--- /dev/null
+++ b/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>
diff --git a/im/src/im-server/event/base.js b/im/src/im-server/event/base.js
new file mode 100644
index 00000000..cf9f0dc4
--- /dev/null
+++ b/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;
diff --git a/im/src/im-server/event/friend-apply.js b/im/src/im-server/event/friend-apply.js
new file mode 100644
index 00000000..50028e61
--- /dev/null
+++ b/im/src/im-server/event/friend-apply.js
@@ -0,0 +1,47 @@
+import Base from './base'
+import store from '@/store'
+import router from '@/router'
+
+/**
+ * 好友邀请消息处理
+ */
+class FriendApply extends Base {
+  /**
+   * @var resource 资源
+   */
+  resource
+
+  /**
+   * 初始化构造方法
+   *
+   * @param {Object} resource Socket消息
+   */
+  constructor(resource) {
+    super()
+
+    this.resource = resource
+  }
+
+  handle() {
+    store.commit('INCR_APPLY_NUM')
+
+    this.$notify({
+      title: '好友申请',
+      dangerouslyUseHTMLString: true,
+      message: `<p style="color:red;margin-top:10px;">您有一条好友申请消息,请注意查收...</p>`,
+      duration: 0,
+      type: 'info',
+      customClass: 'pointer',
+      onClick: function() {
+        store.commit('SET_APPLY_NUM', 0)
+        router.push({
+          path: '/contacts/apply',
+          query: { t: new Date().getTime() },
+        })
+        this.close()
+      },
+    })
+  }
+}
+
+export default FriendApply
diff --git a/im/src/im-server/event/group-join.js b/im/src/im-server/event/group-join.js
new file mode 100644
index 00000000..702a19e2
--- /dev/null
+++ b/im/src/im-server/event/group-join.js
@@ -0,0 +1,31 @@
+import Base from './base'
+
+/**
+ * 好友邀请消息处理
+ */
+class GroupJoin extends Base {
+  /**
+   * @var resource 资源
+   */
+  resource
+
+  /**
+   * 初始化构造方法
+   *
+   * @param {Object} resource Socket消息
+   */
+  constructor(resource) {
+    super()
+
+    this.resource = resource
+  }
+
+  handle() {
+    this.$notify({
+      message: '您有一条入群消息通知,请注意查收...',
+      duration: 5000,
+    })
+  }
+}
+
+export default GroupJoin
diff --git a/im/src/im-server/event/keyboard.js b/im/src/im-server/event/keyboard.js
new file mode 100644
index 00000000..257c2606
--- /dev/null
+++ b/im/src/im-server/event/keyboard.js
@@ -0,0 +1,47 @@
+import Base from './base'
+
+/**
+ * 键盘输入事件
+ */
+class Keyboard extends Base {
+  /**
+   * @var resource 资源
+   */
+  resource
+
+  /**
+   * 初始化构造方法
+   *
+   * @param {Object} resource Socket消息
+   */
+  constructor(resource) {
+    super()
+
+    this.resource = resource
+  }
+
+  handle() {
+    let params = this.getTalkParams()
+
+    // 判断当前是否正在对话
+    if (params.index_name === null) {
+      return false
+    }
+
+    // 判断是否是私信
+    if (params.talk_type != 1) {
+      return false
+    }
+
+    // 判断消息是否来当前对话
+    if (params.receiver_id != this.resource.sender_id) {
+      return false
+    }
+
+    let store = this.getStoreInstance()
+
+    store.commit('UPDATE_KEYBOARD_EVENT')
+  }
+}
+
+export default Keyboard
diff --git a/im/src/im-server/event/login.js b/im/src/im-server/event/login.js
new file mode 100644
index 00000000..59191839
--- /dev/null
+++ b/im/src/im-server/event/login.js
@@ -0,0 +1,31 @@
+import Base from './base'
+
+/**
+ * 好友状态事件
+ */
+class Login extends Base {
+  /**
+   * @var resource 资源
+   */
+  resource
+
+  /**
+   * 初始化构造方法
+   *
+   * @param {Object} resource Socket消息
+   */
+  constructor(resource) {
+    super()
+
+    this.resource = resource
+  }
+
+  handle() {
+    this.getStoreInstance().dispatch('ACT_UPDATE_FRIEND_STATUS', {
+      status: this.resource.status,
+      friend_id: parseInt(this.resource.user_id),
+    })
+  }
+}
+
+export default Login
diff --git a/im/src/im-server/event/revoke.js b/im/src/im-server/event/revoke.js
new file mode 100644
index 00000000..037dcfdd
--- /dev/null
+++ b/im/src/im-server/event/revoke.js
@@ -0,0 +1,42 @@
+import Base from './base'
+import store from '@/store'
+
+/**
+ * 好友邀请消息处理
+ */
+class Revoke extends Base {
+  /**
+   * @var resource 资源
+   */
+  resource
+
+  /**
+   * 初始化构造方法
+   *
+   * @param {Object} resource Socket消息
+   */
+  constructor(resource) {
+    super()
+
+    this.resource = resource
+  }
+
+  handle() {
+    if (
+      !this.isTalk(
+        this.resource.talk_type,
+        this.resource.receiver_id,
+        this.resource.sender_id
+      )
+    ) {
+      return false
+    }
+
+    store.commit('UPDATE_DIALOGUE', {
+      id: this.resource.record_id,
+      is_revoke: 1,
+    })
+  }
+}
+
+export default Revoke
diff --git a/im/src/im-server/event/talk.js b/im/src/im-server/event/talk.js
new file mode 100644
index 00000000..ddc61385
--- /dev/null
+++ b/im/src/im-server/event/talk.js
@@ -0,0 +1,254 @@
+import Base from "./base";
+import Vue from "vue";
+import router from "@/router";
+import vm from "@/main";
+import NewMessageNotify from "@/components/notify/NewMessageNotify";
+import { ServeClearTalkUnreadNum, ServeCreateTalkList } from "@/api/chat";
+import { formatTalkItem, findTalkIndex, toTalk } from "@/utils/talk";
+import { parseTime } from "@/utils/functions";
+
+import mixin from '@/mixins/main-mixin'
+/**
+ * 好友状态事件
+ */
+class Talk extends Base {
+  /**
+   * @var resource 资源
+   */
+  resource;
+
+  /**
+   * 发送者ID
+   */
+  sender_id = 0;
+
+  /**
+   * 接收者ID
+   */
+  receiver_id = 0;
+
+  /**
+   * 聊天类型[1:私聊;2:群聊;]
+   */
+  talk_type = 0;
+
+  /**
+   * 初始化构造方法
+   *
+   * @param {Object} resource Socket消息
+   */
+  constructor(resource) {
+    super();
+    this.sender_id = resource.fromUser; //发送
+    this.receiver_id = resource.toUser; //接收
+    this.talk_type = resource.messageType; //类型
+
+    this.resource = resource;
+
+    // 判断发送者消息是否在当前用户列表中 
+    if(this.sender_id && !vm.$store.state.talks.items.find(item=>{
+      return item.userId == this.sender_id
+    })){
+      // 没有当前用户，未在当前列表 进行重新加载
+      vm.loadUserSetting('update')
+    }
+  }
+
+  /**
+   * 判断消息发送者是否来自于我
+   * @returns
+   */
+  isCurrSender() {
+    // console.log("sender_id", this.sender_id);
+    return this.sender_id == this.getAccountId();
+  }
+
+  /**
+   * 获取对话索引
+   *
+   * @return String
+   */
+  getIndexName() {
+    if (this.talk_type == 2) {
+      return `${this.talk_type}_${this.receiver_id}`;
+    }
+
+    let receiver_id = this.isCurrSender() ? this.receiver_id : this.sender_id;
+
+    return `${this.talk_type}_${receiver_id}`;
+  }
+
+  /**
+   * 消息浮动方式
+   *
+   * @returns
+   */
+  getFloatType() {
+    let userId = this.resource.userId;
+
+    if (userId == 0) return "center";
+
+    return userId == this.getAccountId() ? "right" : "left";
+  }
+
+  /**
+   * 获取聊天列表左侧的对话信息
+   */
+  getTalkText() {
+    let text = this.resource.content || this.resource.text;
+    switch (this.resource.msg_type) {
+      case 'GOODS':
+        text = "[商品链接]";
+        break;
+    }
+
+    return text;
+  }
+
+  handle() {
+    let store = this.getStoreInstance();
+    // console.log("触发handle");
+    // 判断当前是否在聊天页面
+    if (!this.isTalkPage()) {
+      store.commit("INCR_UNREAD_NUM");
+
+      // 判断消息是否来自于我自己，否则会提示消息通知
+      return !this.isCurrSender() && this.showMessageNocice();
+    }
+    // console.log("this.receiver_id", this.receiver_id);
+    // console.log("this.sender_id", this.sender_id);
+    let isTrue = this.isTalk(1, this.receiver_id, this.sender_id);
+    // console.log("判断当前是否正在和好友对话", isTrue);
+    // 判断当前是否正在和好友对话
+    if (isTrue) {
+      this.insertTalkRecord();
+    } else {
+      this.updateTalkItem();
+    }
+  }
+
+  /**
+   * 显示消息提示
+   * @returns
+   */
+  showMessageNocice() {
+    let avatar = this.resource.avatar;
+    let nickname = this.resource.nickname;
+    let talk_type = this.resource.talk_type;
+    let receiver_id = this.receiver_id;
+
+    if (talk_type == 2) {
+      avatar = this.resource.group_avatar;
+      nickname += `【 ${this.resource.group_name} 】`;
+    } else {
+      receiver_id = this.sender_id;
+    }
+
+    this.$notify({
+      message: vm.$createElement(NewMessageNotify, {
+        props: {
+          avatar,
+          talk_type,
+          nickname,
+          content: this.getTalkText(),
+          datetime: this.resource.created_at,
+        },
+      }),
+      customClass: "im-notify",
+      duration: 3000,
+      position: "top-right",
+      onClick: function () {
+        this.close();
+        toTalk(talk_type, receiver_id);
+      },
+    });
+  }
+
+  /**
+   * 加载对接节点
+   */
+  addTalkItem() {
+    let receiver_id = this.sender_id;
+    let talk_type = this.talk_type;
+
+    if (talk_type == 1 && this.receiver_id != this.getAccountId()) {
+      receiver_id = this.receiver_id;
+    } else if (talk_type == 2) {
+      receiver_id = this.receiver_id;
+    }
+    // console.log("加载对接节点", this.resource);
+
+    ServeCreateTalkList(receiver_id).then(({ code, data }) => {
+      if (code == 200) {
+        this.getStoreInstance().commit("PUSH_TALK_ITEM", formatTalkItem(data));
+      }
+    });
+  }
+
+  /**
+   * 插入对话记录
+   */
+  insertTalkRecord() {
+    let store = this.getStoreInstance();
+    let record = this.resource;
+    // console.log("插入谈话记录", record);
+
+    record.float = this.getFloatType();
+
+    store.commit("PUSH_DIALOGUE", record);
+
+    // 获取聊天面板元素节点
+    let el = document.getElementById("lumenChatPanel");
+
+    // 判断的滚动条是否在底部
+    let isBottom = Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
+
+    if (
+      isBottom ||
+      record.userId == this.getAccountId() ||
+      record.fromUser == this.getAccountId()
+    ) {
+      Vue.nextTick(() => {
+        el.scrollTop = el.scrollHeight;
+      });
+    } else {
+      // console.log("%c SET_TLAK_UNREAD_MESSAGE %c", "color:red");
+      store.commit("SET_TLAK_UNREAD_MESSAGE", {
+        content: this.getTalkText(),
+        nickname: record.name,
+      });
+    }
+    // console.log("%c 准备更新...UPDATE_TALK_ITEM ", "color:red");
+
+    store.commit("UPDATE_TALK_ITEM", {
+      index_name: this.getIndexName(),
+      msg_text: this.getTalkText() || record.text,
+      updated_at: parseTime(new Date()),
+    });
+
+    if (this.talk_type == 1 && this.getAccountId() !== this.sender_id) {
+      // console.log("%c 清除 未读数...ServeClearTalkUnreadNum ", "color:blue");
+      ServeClearTalkUnreadNum({
+        talk_type: 1,
+        receiver_id: this.sender_id,
+      });
+    }
+  }
+
+  /**
+   * 更新对话列表记录
+   */
+  updateTalkItem() {
+    let store = this.getStoreInstance();
+
+    store.commit("INCR_UNREAD_NUM");
+
+    store.commit("UPDATE_TALK_MESSAGE", {
+      index_name: this.getIndexName(),
+      msg_text: this.getTalkText(),
+      updated_at: parseTime(new Date()),
+    });
+  }
+}
+
+export default Talk;
diff --git a/im/src/im-server/socket-instance.js b/im/src/im-server/socket-instance.js
new file mode 100644
index 00000000..bd7ce4a3
--- /dev/null
+++ b/im/src/im-server/socket-instance.js
@@ -0,0 +1,117 @@
+import store from "@/store";
+import config from "@/config/config";
+import WsSocket from "@/plugins/ws-socket";
+import { getToken } from "@/utils/auth";
+import { Notification } from "element-ui";
+
+// 引入消息处理类
+import KeyboardEvent from "@/im-server/event/keyboard";
+import LoginEvent from "@/im-server/event/login";
+import TalkEvent from "@/im-server/event/talk";
+import RevokeEvent from "@/im-server/event/revoke";
+import GroupJoinEvent from "@/im-server/event/group-join";
+import FriendApplyEvent from "@/im-server/event/friend-apply";
+
+/**
+ * SocketInstance 连接实例
+ *
+ * 注释: 所有 WebSocket 消息接收处理在此实例中处理
+ */
+class SocketInstance {
+  /**
+   * WsSocket 实例
+   */
+  socket;
+
+  /**
+   * SocketInstance 初始化实例
+   */
+  constructor() {
+    this.socket = new WsSocket(
+      () => {
+        return `${config.BASE_WS_URL}/` + getToken();
+      },
+      {
+        onError: (evt) => {
+          console.log("Websocket 连接失败回调方法");
+        },
+        // Websocket 连接成功回调方法
+        onOpen: (evt) => {
+          this.updateSocketStatus(true);
+        },
+        // Websocket 断开连接回调方法
+        onClose: (evt) => {
+          this.updateSocketStatus(false);
+        },
+      }
+    );
+
+    this.registerEvents();
+  }
+
+  // 连接 WebSocket 服务
+  connect () {
+    console.log("🔗连接 WebSocket");
+    this.socket.connection();
+  }
+
+  /**
+   * 注册回调消息处理事件
+   */
+  registerEvents () {
+    this.socket.on("event_talk", (data) => {
+      console.log("接收到消息,event_talk", data);
+      new TalkEvent(data).handle();
+    });
+
+    this.socket.on("event_online_status", (data) => {
+      new LoginEvent(data).handle();
+    });
+
+    this.socket.on("event_keyboard", (data) => {
+      console.log("推送", data);
+      new KeyboardEvent(data).handle();
+    });
+
+    this.socket.on("event_revoke_talk", (data) => {
+      new RevokeEvent(data).handle();
+    });
+
+    this.socket.on("event_friend_apply", (data) => {
+      new FriendApplyEvent(data).handle();
+    });
+
+    this.socket.on("join_group", (data) => {
+      new GroupJoinEvent(data).handle();
+    });
+
+    this.socket.on("event_error", (data) => {
+      Notification({
+        title: "友情提示",
+        message: data.message,
+        type: "warning",
+      });
+    });
+  }
+
+  /**
+   * 更新 WebSocket 连接状态
+   *
+   * @param {Boolean} status 连接状态
+   */
+  updateSocketStatus (status) {
+    store.commit("UPDATE_SOCKET_STATUS", status);
+  }
+
+  /**
+   * 推送消息
+   *
+   * @param {String} event 事件名
+   * @param {Object} data 数据
+   */
+  emit (event, data) {
+    this.socket.emit(event, data);
+  }
+}
+
+export default new SocketInstance();
diff --git a/im/src/im-server/util.js b/im/src/im-server/util.js
new file mode 100644
index 00000000..7ec6a9a6
--- /dev/null
+++ b/im/src/im-server/util.js
@@ -0,0 +1 @@
+// IM 助手
\ No newline at end of file
diff --git a/im/src/main.js b/im/src/main.js
new file mode 100644
index 00000000..7ceab5ac
--- /dev/null
+++ b/im/src/main.js
@@ -0,0 +1,45 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
+import Vue from 'vue'
+import App from '@/App'
+import store from '@/store'
+import router from '@/router'
+import MainMixin from './mixins/main-mixin'
+import face from '@/components/face'
+import faceNull from '@/components/face-null'
+import config from "@/config/config";
+import './core/lazy-use'
+import './core/global-component'
+import './core/filter'
+import './core/directives'
+import '@/permission'
+import '@/icons'
+
+// 引入自定义全局css
+import '@/assets/css/global.less'
+
+Vue.config.productionTip = false
+Vue.mixin(MainMixin)  // 引入mixins
+Vue.component('face', face)
+Vue.component('face-null', faceNull)
+
+Vue.prototype.linkToGoods = function (goodsId, skuId) {  // 跳转买家端商品
+  console.log(`${config.PC_URL}/goodsDetail?skuId=${skuId}&goodsId=${goodsId}`)
+  window.open(`${config.PC_URL}/goodsDetail?skuId=${skuId}&goodsId=${goodsId}`, '_blank')
+};
+Vue.prototype.linkToStore = function (storeId) {  // 跳转买家端商品
+  console.log(`${config.PC_URL}/Merchant?id=${storeId}`)
+  window.open(`${config.PC_URL}/Merchant?id=${storeId}`, '_blank')
+};
+// 订单跳转商家订单页面
+Vue.prototype.linkToOrders = function (sn) {  // 跳转买家端订单
+  window.open(`${config.STORE_URL}/order-detail?sn=${sn}`, '_blank')
+};
+const Instance = new Vue({
+  router,
+  store,
+  mixins: [MainMixin],
+  render: h => h(App),
+}).$mount('#app')
+export default Instance
diff --git a/im/src/mixins/main-mixin.js b/im/src/mixins/main-mixin.js
new file mode 100644
index 00000000..5e2f3aba
--- /dev/null
+++ b/im/src/mixins/main-mixin.js
@@ -0,0 +1,125 @@
+import SocketInstance from "@/im-server/socket-instance";
+import { ServeGetUserSetting,ServeGetStoreSetting } from "@/api/user";
+import store from "@/store";
+import { ServeGetTalkList,ServeGetStoreTalkList } from "@/api/chat";
+import { formatTalkItem } from "@/utils/talk";
+export default {
+  
+  created() {
+    // 判断用户是否登录
+    
+  },
+  methods: {
+    // 页面初始化设置
+    initialize() {
+      SocketInstance.connect();
+    },
+
+    // 加载用户相关设置信息，更新本地缓存
+    loadUserSetting() {
+      //标识没有值,获取用户信息
+
+      if(this.$route.query.id){
+        ServeGetUserSetting().then(async ({ code, result }) => {
+          // 如果result有值说明用户创建成功
+          if (result) {
+            store.commit("UPDATE_USER_INFO", {
+              id: result.id,
+              face: result.face,
+              name: result.nickName,
+            });
+            console.log(result.nickName)
+            /**
+             * 用户像商家进行聊天，商家进行刷新好友列表
+             */
+            // 判断如果是有id说明是 用户像商家进行聊天。
+            if (this.$route.query.id) {
+              await this.createTalk(this.$route.query.id);
+            }
+            if(this.$route.query.goodsId && this.$route.query.skuId){
+              this.goodsParams.goodsId = this.$route.query.goodsId
+              this.goodsParams.skuId = this.$route.query.skuId
+            }
+          } else if (code === 200 && !result) {
+            setTimeout(() => {
+              this.loadUserSetting();
+            }, 2000);
+          }
+        });
+      }else{
+        //标识有值代表是店铺
+        ServeGetStoreSetting().then(async ({ code, result }) => {
+          if (result) {
+            store.commit("UPDATE_USER_INFO", {
+              id: result.id,
+              face: result.storeLogo,
+              name: result.storeName,
+            });
+            //获取店铺聊天列表
+            await this.loadStoreChatList()
+          }else if (code === 200 && !result) {
+            setTimeout(() => {
+              this.loadUserSetting();
+            }, 2000);
+          }
+        })
+      }
+    },
+
+
+     // 获取用户对话列表
+     loadChatListInJs() {
+    
+      ServeGetTalkList()
+        .then(({ code, result }) => {
+          if (code !== 200) return false;
+          store.commit("SET_UNREAD_NUM", 0);
+          store.commit("SET_TALK_ITEMS", {
+            items: result.map((item) => formatTalkItem(item)),
+          });
+          let index_name = sessionStorage.getItem("send_message_index_name");
+          if (index_name) {
+            sessionStorage.removeItem("send_message_index_name");
+          }
+        })
+        .finally(() => {
+         
+        });
+    },
+
+    
+    //获取商家聊天记录
+    loadStoreChatList() {
+      this.loadStatus = this.talkNum == 0 ? 0 : 1;
+      ServeGetStoreTalkList().then(({ code, result }) => {
+        if (code !== 200) return false;
+        this.$store.commit("SET_UNREAD_NUM", 0);
+        this.$store.commit("SET_TALK_ITEMS", {
+          items: result.map((item) => formatTalkItem(item)),
+        });
+
+        // 判断
+        if (this.$route.query.id) {
+          let takeData, takeIndex;
+          console.log(result)
+          result.forEach((take, index) => {
+            if (take.id == this.$route.query.id) {
+              takeData = take;
+              takeIndex = index;
+            }
+          });
+          this.$nextTick(() =>
+            this.clickTab(this.$route.query.id, takeData, takeIndex)
+          );
+        }
+      }).finally(() => {
+        this.loadStatus = 1;
+      });
+    },
+
+
+    reload() {
+      this.$root.$children[0].refreshView();
+    },
+  },
+};
diff --git a/im/src/permission.js b/im/src/permission.js
new file mode 100644
index 00000000..d34eda34
--- /dev/null
+++ b/im/src/permission.js
@@ -0,0 +1,26 @@
+import router from '@/router'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import config from '@/config/config'
+
+
+NProgress.configure({
+  showSpinner: false,
+})
+
+const WEBSITE_NAME = config.WEBSITE_NAME
+
+
+router.beforeEach((to, from, next) => {
+  document.title = to.meta.title
+    ? `${WEBSITE_NAME} | ${to.meta.title}`
+    : WEBSITE_NAME
+
+ 
+  NProgress.start()
+  next()
+})
+
+router.afterEach(() => {
+  NProgress.done()
+})
diff --git a/im/src/plugins/recorder/record-sdk.js b/im/src/plugins/recorder/record-sdk.js
new file mode 100644
index 00000000..45cb23dd
--- /dev/null
+++ b/im/src/plugins/recorder/record-sdk.js
@@ -0,0 +1,45 @@
+import Recorder from './recorder'
+
+export default class Record {
+  startRecord(param) {
+    let self = this
+    try {
+      Recorder.get(rec => {
+        if (rec.error) return param.error(rec.error)
+        self.recorder = rec
+        self.recorder.start()
+        param.success('开始录音')
+      })
+    } catch (e) {
+      param.error('开始录音失败' + e)
+    }
+  }
+
+  stopRecord(param) {
+    let self = this
+    try {
+      let blobData = self.recorder.getBlob()
+      param.success(blobData)
+    } catch (e) {
+      param.error('结束录音失败' + e)
+    }
+  }
+
+  play(audio) {
+    let self = this
+    try {
+      self.recorder.play(audio)
+    } catch (e) {
+      console.error('录音播放失败' + e)
+    }
+  }
+
+  clear(audio) {
+    let self = this
+    try {
+      self.recorder.clear(audio)
+    } catch (e) {
+      console.error('清空录音失败' + e)
+    }
+  }
+}
diff --git a/im/src/plugins/recorder/recorder.js b/im/src/plugins/recorder/recorder.js
new file mode 100644
index 00000000..0b1b1418
--- /dev/null
+++ b/im/src/plugins/recorder/recorder.js
@@ -0,0 +1,239 @@
+export default class Recorder {
+  constructor(stream, config) {
+    //兼容
+    window.URL = window.URL || window.webkitURL
+    navigator.getUserMedia =
+      navigator.getUserMedia ||
+      navigator.webkitGetUserMedia ||
+      navigator.mozGetUserMedia ||
+      navigator.msGetUserMedia
+
+    config = config || {}
+    config.sampleBits = config.sampleBits || 16 //采样数位 8, 16
+    config.sampleRate = config.sampleRate || 8000 //采样率(1/6 44100)
+
+    this.context = new (window.webkitAudioContext || window.AudioContext)()
+    this.audioInput = this.context.createMediaStreamSource(stream)
+    this.createScript =
+      this.context.createScriptProcessor || this.context.createJavaScriptNode
+    this.recorder = this.createScript.apply(this.context, [4096, 1, 1])
+
+    this.audioData = {
+      size: 0, //录音文件长度
+      buffer: [], //录音缓存
+      inputSampleRate: this.context.sampleRate, //输入采样率
+      inputSampleBits: 16, //输入采样数位 8, 16
+      outputSampleRate: config.sampleRate, //输出采样率
+      oututSampleBits: config.sampleBits, //输出采样数位 8, 16
+      input: function(data) {
+        this.buffer.push(new Float32Array(data))
+        this.size += data.length
+      },
+      compress: function() {
+        //合并压缩
+        //合并
+        let data = new Float32Array(this.size)
+        let offset = 0
+        for (let i = 0; i < this.buffer.length; i++) {
+          data.set(this.buffer[i], offset)
+          offset += this.buffer[i].length
+        }
+        //压缩
+        let compression = parseInt(this.inputSampleRate / this.outputSampleRate)
+        let length = data.length / compression
+        let result = new Float32Array(length)
+        let index = 0,
+          j = 0
+        while (index < length) {
+          result[index] = data[j]
+          j += compression
+          index++
+        }
+        return result
+      },
+      encodeWAV: function() {
+        let sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate)
+        let sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits)
+        let bytes = this.compress()
+        let dataLength = bytes.length * (sampleBits / 8)
+        let buffer = new ArrayBuffer(44 + dataLength)
+        let data = new DataView(buffer)
+
+        let channelCount = 1 //单声道
+        let offset = 0
+
+        let writeString = function(str) {
+          for (let i = 0; i < str.length; i++) {
+            data.setUint8(offset + i, str.charCodeAt(i))
+          }
+        }
+
+        // 资源交换文件标识符
+        writeString('RIFF')
+        offset += 4
+        // 下个地址开始到文件尾总字节数,即文件大小-8
+        data.setUint32(offset, 36 + dataLength, true)
+        offset += 4
+        // WAV文件标志
+        writeString('WAVE')
+        offset += 4
+        // 波形格式标志
+        writeString('fmt ')
+        offset += 4
+        // 过滤字节,一般为 0x10 = 16
+        data.setUint32(offset, 16, true)
+        offset += 4
+        // 格式类别 (PCM形式采样数据)
+        data.setUint16(offset, 1, true)
+        offset += 2
+        // 通道数
+        data.setUint16(offset, channelCount, true)
+        offset += 2
+        // 采样率,每秒样本数,表示每个通道的播放速度
+        data.setUint32(offset, sampleRate, true)
+        offset += 4
+        // 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8
+        data.setUint32(
+          offset,
+          channelCount * sampleRate * (sampleBits / 8),
+          true
+        )
+        offset += 4
+        // 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8
+        data.setUint16(offset, channelCount * (sampleBits / 8), true)
+        offset += 2
+        // 每样本数据位数
+        data.setUint16(offset, sampleBits, true)
+        offset += 2
+        // 数据标识符
+        writeString('data')
+        offset += 4
+        // 采样数据总数,即数据总大小-44
+        data.setUint32(offset, dataLength, true)
+        offset += 4
+        // 写入采样数据
+        if (sampleBits === 8) {
+          for (let i = 0; i < bytes.length; i++, offset++) {
+            let s = Math.max(-1, Math.min(1, bytes[i]))
+            let val = s < 0 ? s * 0x8000 : s * 0x7fff
+            val = parseInt(255 / (65535 / (val + 32768)))
+            data.setInt8(offset, val, true)
+          }
+        } else {
+          for (let i = 0; i < bytes.length; i++, offset += 2) {
+            let s = Math.max(-1, Math.min(1, bytes[i]))
+            data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true)
+          }
+        }
+        return new Blob([data], {
+          type: 'audio/wav',
+        })
+      },
+    }
+  }
+
+  //开始录音
+  start() {
+    this.audioInput.connect(this.recorder)
+    this.recorder.connect(this.context.destination)
+
+    //音频采集
+    let self = this
+    this.recorder.onaudioprocess = function(e) {
+      self.audioData.input(e.inputBuffer.getChannelData(0))
+    }
+  }
+
+  //停止
+  stop() {
+    this.recorder.disconnect()
+  }
+
+  //获取音频文件
+  getBlob() {
+    this.stop()
+    return this.audioData.encodeWAV()
+  }
+
+  //回放
+  play(audio) {
+    audio.src = window.URL.createObjectURL(this.getBlob())
+  }
+
+  //清理缓存的录音数据
+  clear(audio) {
+    this.audioData.buffer = []
+    this.audioData.size = 0
+    audio.src = ''
+  }
+
+  static checkError(e) {
+    const { name } = e
+    let errorMsg = ''
+    switch (name) {
+      case 'AbortError':
+        errorMsg = '录音设备无法被使用'
+        break
+      case 'NotAllowedError':
+        errorMsg = '用户已禁止网页调用录音设备'
+        break
+      case 'PermissionDeniedError':
+        errorMsg = '用户已禁止网页调用录音设备'
+        break // 用户拒绝
+      case 'NotFoundError':
+        errorMsg = '录音设备未找到'
+        break
+      case 'DevicesNotFoundError':
+        errorMsg = '录音设备未找到'
+        break
+      case 'NotReadableError':
+        errorMsg = '录音设备无法使用'
+        break
+      case 'NotSupportedError':
+        errorMsg = '不支持录音功能'
+        break
+      case 'MandatoryUnsatisfiedError':
+        errorMsg = '无法发现指定的硬件设备'
+        break
+      default:
+        errorMsg = '录音调用错误'
+        break
+    }
+    return {
+      error: errorMsg,
+    }
+  }
+
+  static get(callback, config) {
+    if (callback) {
+      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+        navigator.mediaDevices
+          .getUserMedia({
+            audio: true,
+            video: false,
+          })
+          .then(stream => {
+            let rec = new Recorder(stream, config)
+            callback(rec)
+          })
+          .catch(e => {
+            callback(Recorder.checkError(e))
+          })
+      } else {
+        navigator
+          .getUserMedia({
+            audio: true,
+            video: false,
+          })
+          .then(stream => {
+            let rec = new Recorder(stream, config)
+            callback(rec)
+          })
+          .catch(e => {
+            // Recorder.checkError(e)
+            callback(Recorder.checkError(e))
+          })
+      }
+    }
+  }
+}
diff --git a/im/src/plugins/sms-lock.js b/im/src/plugins/sms-lock.js
new file mode 100644
index 00000000..13febcf0
--- /dev/null
+++ b/im/src/plugins/sms-lock.js
@@ -0,0 +1,76 @@
+/**
+ * 短信倒计时锁
+ */
+class SmsLock {
+  // 发送倒计时默认60秒
+  time = null
+
+  // 计时器
+  timer = null
+
+  // 倒计时默认60秒
+  lockTime = 60
+
+  // 锁标记名称
+  lockName = ''
+
+  /**
+   * 实例化构造方法
+   *
+   * @param {String} purpose 唯一标识
+   * @param {Number} time
+   */
+  constructor(purpose, lockTime = 60) {
+    this.lockTime = lockTime
+    this.lockName = `SMSLOCK_${purpose}`
+
+    this.init()
+  }
+
+  // 开始计时
+  start(time = null) {
+    this.time = time == null || time >= this.lockTime ? this.lockTime : time
+
+    this.clearInterval()
+
+    this.timer = setInterval(() => {
+      if (this.time == 0) {
+        this.clearInterval()
+        this.time = null
+        localStorage.removeItem(this.lockName)
+        return
+      }
+
+      this.time--
+
+      // 设置本地缓存
+      localStorage.setItem(this.lockName, this.getTime() + this.time)
+    }, 1000)
+  }
+
+  // 页面刷新初始化
+  init() {
+    let result = localStorage.getItem(this.lockName)
+
+    if (result == null) return
+
+    let time = result - this.getTime()
+    if (time > 0) {
+      this.start(time)
+    } else {
+      localStorage.removeItem(this.lockName)
+    }
+  }
+
+  // 获取当前时间
+  getTime() {
+    return Math.floor(new Date().getTime() / 1000)
+  }
+
+  // 清除计时器
+  clearInterval() {
+    clearInterval(this.timer)
+  }
+}
+
+export default SmsLock
diff --git a/im/src/plugins/ws-socket.js b/im/src/plugins/ws-socket.js
new file mode 100644
index 00000000..802d0b17
--- /dev/null
+++ b/im/src/plugins/ws-socket.js
@@ -0,0 +1,278 @@
+class WsSocket {
+  /**
+   * Websocket 连接
+   *
+   * @var Websocket
+   */
+  connect;
+
+  /**
+   * 服务器连接地址
+   */
+  url;
+
+  /**
+   * 配置信息
+   *
+   * @var Object
+   */
+  config = {
+    heartbeat: {
+      enabled: false, // 是否发送心跳包
+      time: 10000, // 心跳包发送间隔时长
+      setInterval: null, // 心跳包计时器
+    },
+    reconnect: {
+      lockReconnect: false,
+      setTimeout: null, // 计时器对象
+      time: 5000, // 重连间隔时间
+      number: 1000, // 重连次数
+    },
+  };
+
+  /**
+   * 自定义绑定消息事件
+   *
+   * @var Array
+   */
+  onCallBacks = [];
+
+  /**
+   * 创建 WsSocket 的实例
+   *
+   * @param {Function} urlCallBack url闭包函数
+   * @param {Object} events 原生 WebSocket 绑定事件
+   */
+  constructor(urlCallBack, events) {
+    this.urlCallBack = urlCallBack;
+
+    // 定义 WebSocket 原生方法
+    this.events = Object.assign(
+      {
+        onError: (evt) => { },
+        onOpen: (evt) => { },
+        onClose: (evt) => { },
+      },
+      events
+    );
+  }
+
+  /**
+   * 事件绑定
+   *
+   * @param {String} event 事件名
+   * @param {Function} callBack 回调方法
+   */
+  on (event, callBack) {
+    // 对应 socket-instance.js
+    console.log("事件绑定", event, callBack);
+    this.onCallBacks[event] = callBack;
+    return this;
+  }
+
+  /**
+   * 加载 WebSocket
+   */
+  loadSocket () {
+    // 判断当前是否已经连接
+    if (this.connect != null) {
+      this.connect.close();
+      this.connect = null;
+    }
+
+    this.url = this.urlCallBack();
+    const connect = new WebSocket(this.url);
+    connect.onerror = this.onError.bind(this);
+    connect.onopen = this.onOpen.bind(this);
+    connect.onmessage = this.onMessage.bind(this);
+    connect.onclose = this.onClose.bind(this);
+
+    this.connect = connect;
+  }
+
+  /**
+   * 连接 Websocket
+   */
+  connection () {
+    this.loadSocket();
+  }
+
+  /**
+   * 掉线重连 Websocket
+   */
+  reconnect () {
+    console.log("掉线重连接");
+    let reconnect = this.config.reconnect;
+    if (reconnect.lockReconnect || reconnect.number == 0) {
+      return;
+    }
+
+    this.config.reconnect.lockReconnect = true;
+
+    // 没连接上会一直重连，设置延迟避免请求过多
+    reconnect.setTimeout && clearTimeout(reconnect.setTimeout);
+
+    this.config.reconnect.setTimeout = setTimeout(() => {
+      this.connection();
+
+      this.config.reconnect.lockReconnect = false;
+      this.config.reconnect.number--;
+
+      console.log(
+        `网络连接已断开，正在尝试重新连接(${this.config.reconnect.number})...`
+      );
+    }, reconnect.time);
+  }
+
+  /**
+   * 解析接受的消息
+   *
+   * @param {Object} evt Websocket 消息
+   */
+  onParse (evt) {
+
+    const res = JSON.parse(evt.data).result;
+
+    //如果创建时间是时间戳类型则转换为 日期类型，否则新压入栈的消息的创建时间和从数据库读取出来的创建时间格式对不上，处理的时候会出异常。
+    if (typeof res.createTime == "number") {
+      res.createTime = this.unixToDate(res.createTime, "yyyy-MM-dd hh:mm");
+    }
+    return res;
+  }
+
+  /**
+   * 将unix时间戳转换为指定格式
+   * @param unix   时间戳【秒】
+   * @param format 转换格式
+   * @returns {*|string}
+   */
+  unixToDate (unix, format) {
+    if (!unix) return unix;
+    let _format = format || "yyyy-MM-dd hh:mm:ss";
+    const d = new Date(unix);
+    const o = {
+      "M+": d.getMonth() + 1,
+      "d+": d.getDate(),
+      "h+": d.getHours(),
+      "m+": d.getMinutes(),
+      "s+": d.getSeconds(),
+      "q+": Math.floor((d.getMonth() + 3) / 3),
+      S: d.getMilliseconds(),
+    };
+    if (/(y+)/.test(_format))
+      _format = _format.replace(
+        RegExp.$1,
+        (d.getFullYear() + "").substr(4 - RegExp.$1.length)
+      );
+    for (const k in o)
+      if (new RegExp("(" + k + ")").test(_format))
+        _format = _format.replace(
+          RegExp.$1,
+          RegExp.$1.length === 1
+            ? o[k]
+            : ("00" + o[k]).substr(("" + o[k]).length)
+        );
+    return _format;
+  }
+
+  /**
+   * 打开连接
+   *
+   * @param {Object} evt Websocket 消息
+   */
+  onOpen (evt) {
+    this.events.onOpen(evt);
+
+    if (this.config.heartbeat.enabled) {
+      this.heartbeat();
+    }
+  }
+
+  /**
+   * 关闭连接
+   *
+   * @param {Object} evt Websocket 消息
+   */
+  onClose (evt) {
+    console.log("关闭连接", evt);
+    if (this.config.heartbeat.enabled) {
+      clearInterval(this.config.heartbeat.setInterval);
+    }
+    console.log("evt", evt);
+
+    if (evt.code == 1006) {
+      this.reconnect();
+    }
+
+    // this.events.onClose(evt);
+  }
+
+  /**
+   * 连接错误
+   *
+   * @param {Object} evt Websocket 消息
+   */
+  onError (evt) {
+    this.events.onError(evt);
+  }
+
+  /**
+   * 接收消息
+   *
+   * @param {Object} evt Websocket 消息
+   */
+  onMessage (evt) {
+    let result = this.onParse(evt);
+    console.log("接收消息", result, "color:red");
+    // 判断消息事件是否被绑定
+    // event_talk;
+    let params = {
+      ...this.onParse(evt),
+      text: JSON.parse(this.onParse(evt).text)
+    }
+    // 指定推送消息
+    this.onCallBacks["event_talk"](params);
+  }
+
+  /**
+   * WebSocket心跳检测
+   */
+  heartbeat () {
+    console.log("WebSocket心跳检测");
+    this.config.heartbeat.setInterval = setInterval(() => {
+      this.connect.send("PING");
+    }, this.config.heartbeat.time);
+  }
+
+  /**
+   * 聊天发送数据
+   *
+   * @param {Object} message
+   */
+  send (message) {
+    this.connect.send(JSON.stringify(message));
+  }
+
+  /**
+   * 关闭连接
+   */
+  close () {
+    this.connect.close();
+  }
+
+  /**
+   * 推送消息
+   *
+   * @param {String} event 事件名
+   * @param {Object} data 数据
+   */
+  emit (event, data) {
+    if (this.connect && this.connect.readyState === 1) {
+      this.connect.send(JSON.stringify(data));
+    } else {
+      console.error("WebSocket 连接已关闭...", this.connect);
+    }
+  }
+}
+
+export default WsSocket;
diff --git a/im/src/router/contacts.js b/im/src/router/contacts.js
new file mode 100644
index 00000000..38d2f1c5
--- /dev/null
+++ b/im/src/router/contacts.js
@@ -0,0 +1,24 @@
+export default {
+  path: '/contacts',
+  name: 'contacts',
+  redirect: '/contacts/apply',
+  component: () => import('@/views/contacts/layout'),
+  children: [
+    {
+      path: '/contacts/apply',
+      meta: {
+        title: '我的联系人',
+        needLogin: true,
+      },
+      component: () => import('@/views/contacts/apply'),
+    },
+    {
+      path: '/contacts/friends',
+      meta: {
+        title: '我的好友',
+        needLogin: true,
+      },
+      component: () => import('@/views/contacts/friends'),
+    },
+  ],
+}
diff --git a/im/src/router/index.js b/im/src/router/index.js
new file mode 100644
index 00000000..930be40b
--- /dev/null
+++ b/im/src/router/index.js
@@ -0,0 +1,44 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+const RouteView = {
+    name: 'RouteView',
+    render: h => h('router-view'),
+}
+
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: () => import('@/views/message/index'),
+        meta: {
+            title: '',
+            needLogin: true,
+        },
+    },
+    {
+        path: '/message',
+        name: 'message',
+        component: () => import('@/views/message/index'),
+        meta: {
+            title: '消息通知',
+            needLogin: true,
+        },
+    },
+    {
+        path: '*',
+        name: '404 NotFound',
+        component: () => import('@/views/other/404'),
+        meta: {
+            title: '404 NotFound',
+            needLogin: false,
+        },
+    },
+]
+
+export default new Router({
+    routes,
+    mode: 'history',
+})
diff --git a/im/src/router/settings.js b/im/src/router/settings.js
new file mode 100644
index 00000000..4c0525ad
--- /dev/null
+++ b/im/src/router/settings.js
@@ -0,0 +1,52 @@
+export default {
+  path: "/settings",
+  name: "settings",
+  meta: {
+    title: "个人设置",
+    needLogin: true,
+  },
+  redirect: "/settings/detail",
+  component: () => import("@/views/settings/layout"),
+  children: [
+    {
+      path: "/settings/detail",
+      meta: {
+        title: "个人信息",
+        needLogin: true,
+      },
+      component: () => import("@/views/settings/detail"),
+    },
+    {
+      path: "/settings/security",
+      meta: {
+        title: "安全设置",
+        needLogin: true,
+      },
+      component: () => import("@/views/settings/security"),
+    },
+    {
+      path: "/settings/binding",
+      meta: {
+        title: "账户绑定",
+        needLogin: true,
+      },
+      component: () => import("@/views/settings/binding"),
+    },
+    {
+      path: "/settings/personalize",
+      meta: {
+        title: "个性化设置",
+        needLogin: true,
+      },
+      component: () => import("@/views/settings/personalize"),
+    },
+    {
+      path: "/settings/notification",
+      meta: {
+        title: "消息设置",
+        needLogin: true,
+      },
+      component: () => import("@/views/settings/notification"),
+    },
+  ],
+};
diff --git a/im/src/store/getters.js b/im/src/store/getters.js
new file mode 100644
index 00000000..c912f3bd
--- /dev/null
+++ b/im/src/store/getters.js
@@ -0,0 +1,9 @@
+const getters = {
+  // 用户登录状态
+  loginStatus: state => state.user.loginStatus,
+
+  // socket 连接状态
+  socketStatus: state => state.socketStatus,
+}
+
+export default getters
diff --git a/im/src/store/index.js b/im/src/store/index.js
new file mode 100644
index 00000000..b4995740
--- /dev/null
+++ b/im/src/store/index.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import user from './modules/user'
+import talks from './modules/talk'
+import notify from './modules/notify'
+import settings from './modules/settings'
+import emoticon from './modules/emoticon'
+import dialogue from './modules/dialogue'
+import note from './modules/note'
+
+import state from './state'
+import getters from './getters'
+import mutations from './mutations'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    user,
+    notify,
+    talks,
+    settings,
+    emoticon,
+    dialogue,
+    note,
+  },
+  state,
+  getters,
+  mutations,
+})
+
+export default store
diff --git a/im/src/store/modules/dialogue.js b/im/src/store/modules/dialogue.js
new file mode 100644
index 00000000..8876b364
--- /dev/null
+++ b/im/src/store/modules/dialogue.js
@@ -0,0 +1,89 @@
+export default {
+  state: {
+    // 对话来源[1:私聊;2:群聊]
+    talk_type: 0,
+
+    // 接收者ID
+    receiver_id: 0,
+
+    is_robot: 0,
+
+    // 聊天记录
+    records: [
+      {
+        id: "",
+        createTime: "",
+        toUser: "",
+        isRead: false,
+        messageType: "",
+        talkId: "",
+        text: "",
+        float: "",
+      },
+    ],
+
+    // 对话索引（聊天对话的唯一索引）
+    index_name: null,
+  },
+  mutations: {
+    // 更新对话
+    UPDATE_DIALOGUE_MESSAGE (state, resource) {
+      state.records = [];
+      state.talk_type = parseInt(resource.talk_type);
+      state.receiver_id = parseInt(resource.receiver_id);
+      state.is_robot = parseInt(resource.is_robot);
+
+      /**
+       * receiver_id 就是 好友id
+       * 比如 a 和 b 聊天  receiver_id = b的id
+       */
+      state.index_name = (resource.talk_type || 1) + "_" + resource.receiver_id;
+    },
+
+    // 数组头部压入对话记录1494593861786271744 1494593778193793024
+    UNSHIFT_DIALOGUE (state, records) {
+      // console.log("%c 数组头部压入对话记录", "color:green");
+      // console.log("state", state);
+      // console.log("records", records);
+      if (state.records.length > 0) {
+        state.records.unshift(...records);
+      } else {
+        state.records.push(...records);
+      }
+
+      // console.log("最后的数据",state.records)
+    },
+
+    // 推送对话记录
+    PUSH_DIALOGUE (state, record) {
+      state.records.push(record);
+    },
+
+    // 更新对话记录
+    UPDATE_DIALOGUE (state, resource) {
+      for (let i in state.records) {
+        if (state.records[i].id === resource.id) {
+          Object.assign(state.records[i], resource);
+          break;
+        }
+      }
+    },
+
+    // 删除对话记录
+    DELETE_DIALOGUE (state, index) {
+      state.records.splice(index, 1);
+    },
+
+    BATCH_DELETE_DIALOGUE (state, ids) {
+      ids.forEach((record_id) => {
+        let index = state.records.findIndex((item) => item.id == record_id);
+        if (index >= 0) state.records.splice(index, 1);
+      });
+    },
+
+    // 数组头部压入对话记录
+    SET_DIALOGUE (state, records) {
+      state.records = records;
+    },
+  },
+};
diff --git a/im/src/store/modules/emoticon.js b/im/src/store/modules/emoticon.js
new file mode 100644
index 00000000..f4a841fc
--- /dev/null
+++ b/im/src/store/modules/emoticon.js
@@ -0,0 +1,91 @@
+import { ServeFindUserEmoticon, ServeUploadEmoticon } from "@/api/emoticon";
+
+import { ServeCollectEmoticon } from "@/api/chat";
+
+import { Notification } from "element-ui";
+
+export default {
+  state: {
+    items: [
+    ],
+  },
+  mutations: {
+    // 加载用户表情包
+    LOAD_USER_EMOTICON(state) {
+      // TODO 隐藏
+      return;
+      ServeFindUserEmoticon().then((res) => {
+        if (res.code == 200) {
+          const { collect_emoticon, sys_emoticon } = res.data;
+
+          state.items = state.items.slice(0, 2);
+
+          // 用户收藏的系统表情包
+          state.items[1].list = collect_emoticon;
+
+          // 用户添加的系统表情包
+          state.items.push(...sys_emoticon);
+        }
+      });
+    },
+
+    // 收藏用户表情包
+    SAVE_USER_EMOTICON(state, resoure) {
+      ServeCollectEmoticon({
+        record_id: resoure.record_id,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            Notification({
+              title: "收藏提示",
+              message: "表情包收藏成功...",
+              type: "success",
+            });
+
+            this.commit("LOAD_USER_EMOTICON");
+          }
+        })
+        .catch(() => {
+          Notification({
+            title: "收藏提示",
+            message: "表情包收藏失败...",
+            type: "warning",
+          });
+        });
+    },
+
+    // 自定义上传用户表情包
+    UPLOAD_USER_EMOTICON(state, resoure) {
+      let fileData = new FormData();
+      fileData.append("emoticon", resoure.file);
+      ServeUploadEmoticon(fileData)
+        .then((res) => {
+          if (res.code == 200) {
+            state.items[1].list.push(res.data);
+          }
+        })
+        .catch(() => {
+          Notification({
+            message: "网络异常请稍后再试...",
+            type: "error",
+            duration: 3000,
+          });
+        });
+    },
+
+    // 添加系统表情包
+    APPEND_SYS_EMOTICON(state, resoure) {
+      state.items.push(resoure);
+    },
+
+    // 移除系统表情包
+    REMOVE_SYS_EMOTICON(state, resoure) {
+      for (let i in state.items) {
+        if (state.items[i].emoticon_id === resoure.emoticon_id) {
+          state.items.splice(i, 1);
+          break;
+        }
+      }
+    },
+  },
+};
diff --git a/im/src/store/modules/note.js b/im/src/store/modules/note.js
new file mode 100644
index 00000000..cd9ee769
--- /dev/null
+++ b/im/src/store/modules/note.js
@@ -0,0 +1,18 @@
+const Note = {
+  state: {
+    tags: [],
+    class: [],
+  },
+  getters: {},
+  mutations: {
+    SET_NOTE_TAGS(state, tags) {
+      state.tags = tags
+    },
+
+    PUSH_NOTE_TAG(state, tag) {
+      state.tags.unshift(tag)
+    },
+  },
+}
+
+export default Note
diff --git a/im/src/store/modules/notify.js b/im/src/store/modules/notify.js
new file mode 100644
index 00000000..6fb769b0
--- /dev/null
+++ b/im/src/store/modules/notify.js
@@ -0,0 +1,62 @@
+export default {
+  state: {
+    // 聊天消息未读数
+    unreadNum: 0,
+
+    // 好友申请未读数
+    applyNum: 0,
+
+    // 好友键盘事件监听
+    inputEvent: 0,
+
+    // 好友登录状态监听
+    friendStatus: {
+      // 登录状态[0:下线;1:在线;]
+      status: 0,
+      // 好友ID
+      friend_id: 0,
+    },
+  },
+  mutations: {
+    // 消息未读数自增
+    INCR_UNREAD_NUM(state) {
+      console.log("触发消息未读")
+      state.unreadNum++
+    },
+
+    // 好友申请事件监听
+    INCR_APPLY_NUM(state) {
+      state.applyNum++
+    },
+
+    // 设置消息未读数
+    SET_UNREAD_NUM(state, value) {
+      state.unreadNum = value
+    },
+
+    // 好友申请事件监听
+    SET_APPLY_NUM(state, value) {
+      state.applyNum = value
+    },
+
+    // 自增好友键盘输入事件
+    UPDATE_KEYBOARD_EVENT(state) {
+      state.inputEvent++
+    },
+
+    // 更新好友登录状态
+    UPDATE_FRIEND_STATUS(state, value) {
+      state.friendStatus = value
+    },
+  },
+  actions: {
+    ACT_UPDATE_FRIEND_STATUS({ commit }, value) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          commit('UPDATE_FRIEND_STATUS', value)
+          resolve()
+        }, 0)
+      })
+    },
+  },
+}
diff --git a/im/src/store/modules/settings.js b/im/src/store/modules/settings.js
new file mode 100644
index 00000000..49c120fd
--- /dev/null
+++ b/im/src/store/modules/settings.js
@@ -0,0 +1,66 @@
+import {
+  getToken,
+  getUserSettingCache,
+  setUserSettingCache,
+} from '@/utils/auth'
+
+let state = {
+  // 主题模式 true:全屏模式 false:居中模式
+  themeMode: true,
+
+  // 主题模式为居中模式下，body 的背景图片
+  themeBagImg: 'bag003',
+
+  // 主题颜色
+  themeColor: '',
+
+  // 消息提示音
+  notifyCueTone: true,
+
+  // 键盘输入事件消息推送开关
+  keyboardEventNotify: true,
+}
+
+if (getToken()) {
+  Object.assign(state, getUserSettingCache())
+}
+
+/**
+ * 用户相关设置
+ */
+const Settings = {
+  state,
+  mutations: {
+    // 设置主题模式
+    SET_THEME_MODE(state, mode) {
+      state.themeMode = mode
+      setUserSettingCache(state)
+    },
+
+    // 设置主题的背景图片
+    SET_THEME_BAGIMG(state, bagName) {
+      state.themeBagImg = bagName
+      setUserSettingCache(state)
+    },
+
+    // 主题颜色
+    SET_THEME_COLOR(state, color) {
+      state.themeColor = color
+      setUserSettingCache(state)
+    },
+
+    // 设置消息提示音状态
+    SET_NOTIFY_CUE_TONE(state, isTrue) {
+      state.notifyCueTone = isTrue
+      setUserSettingCache(state)
+    },
+
+    // 设置键盘输入事件消息推送状态
+    SET_KEYBOARD_EVENT_NOTIFY(state, isTrue) {
+      state.keyboardEventNotify = isTrue
+      setUserSettingCache(state)
+    },
+  },
+}
+
+export default Settings
diff --git a/im/src/store/modules/talk.js b/im/src/store/modules/talk.js
new file mode 100644
index 00000000..10882241
--- /dev/null
+++ b/im/src/store/modules/talk.js
@@ -0,0 +1,131 @@
+import { getSort, getMutipSort } from "@/utils/functions";
+import { formatTalkItem } from "@/utils/talk";
+import { ServeGetTalkList } from "@/api/chat";
+import store from '@/store/index.js'
+import Vue from 'vue'
+const Talk = {
+  state: {
+    // 用户对话列表
+    items: [],
+
+    // 最后一条消息
+    unreadMessage: {
+      num: 0,
+      nickname: "未知",
+      content: "...",
+    },
+
+    // 对话列表重载状态
+    heavyLoad: false,
+  },
+  getters: {
+    // 过滤所有置顶对话列表
+    topItems: (state) => {
+      console.log(state.items, 'state.items');
+      return state.items.filter((item) => item.is_top == 1);
+    },
+    talkItems: (state) => {
+      return state.items.sort(
+        getMutipSort([getSort((a, b) => a.lastTalkTime > b.lastTalkTime)])
+      );
+    },
+    // 消息未读数总计
+    unreadNum: (state) => {
+      return state.items.reduce((total, item) => {
+        return total + parseInt(item.unread);
+      }, 0);
+    },
+    talkNum: (state) => state.items.length,
+  },
+  mutations: {
+    // 设置对话列表
+    SET_TALK_ITEMS (state, resource) {
+      console.log("设置对话列表", resource.items);
+      Vue.set(state, 'items', resource.items)
+    },
+
+    // 更新对话节点
+    UPDATE_TALK_ITEM (state, resource) {
+      // console.log("%c 更新对话节点", "color:#32c");
+      // console.log("state", state);
+      // console.log("resource", resource);
+
+      // console.log("%c 更新对话节点结束", "color:#32c",state.items);
+      let index = state.items.findIndex(
+        (item) => item.userId === resource.index_name.split("_")[1]
+      );
+      if (index >= 0) {
+        Object.assign(state.items[index], resource);
+      }
+    },
+
+    // 新增对话节点
+    PUSH_TALK_ITEM (state, resource) {
+      // console.log(state)
+      state.items.push(resource);
+    },
+
+    // 移除对话节点
+    REMOVE_TALK_ITEM (state, index_name) {
+      for (let i in state.items) {
+        if (state.items[i].index_name === index_name) {
+          state.items.splice(i, 1);
+          break;
+        }
+      }
+    },
+
+    // async getTalkList() {
+    //   let { code, result } = ServeGetTalkList();
+    //   if (code !== 200) return false;
+
+    //   store.commit("SET_TALK_ITEMS", {
+    //     items: result.map((item) => formatTalkItem(item)),
+    //   });
+    // },
+
+    // 更新对话消息
+    UPDATE_TALK_MESSAGE (state, resource) {
+      // console.log("%c 更新对话消息", "color:green");
+      // console.log("state", state);
+      // console.log("resource", resource);
+      // console.log("%c 更新对话结束", "color:green",state.items);
+
+      let enableGetTalkList = true
+      state.items.forEach(item => {
+        if (item.userId == resource.index_name.split("_")[1]) {
+          item.unread++;
+          item.msg_text = resource.msg_text;
+          item.lastTalkTime = resource.updated_at;
+          item.lastTalkMessage = resource.msg_text;
+          item.updated_at = resource.updated_at;
+          enableGetTalkList = false
+        }
+      })
+      // 循环如果当前用户不在对话记录列表中 就重新请求对话列表接口
+      enableGetTalkList ? this.commit('getTalkList') : ''
+    },
+
+    // 触发对话列表重新加载
+    TRIGGER_TALK_ITEMS_LOAD (state, status = false) {
+      state.heavyLoad = status;
+    },
+
+    SET_TLAK_UNREAD_MESSAGE (state, resource) {
+      state.unreadMessage.num++;
+      state.unreadMessage.nickname = resource.nickname;
+      state.unreadMessage.content = resource.content;
+    },
+
+    // 清除最后一条未读消息
+    CLEAR_TLAK_UNREAD_MESSAGE (state) {
+      state.unreadMessage = {
+        num: 0,
+        nickname: "未知",
+        content: "...",
+      };
+    },
+  },
+};
+
+export default Talk;
diff --git a/im/src/store/modules/user.js b/im/src/store/modules/user.js
new file mode 100644
index 00000000..995c4566
--- /dev/null
+++ b/im/src/store/modules/user.js
@@ -0,0 +1,73 @@
+import { setUserInfo, getUserInfo, getToken } from "@/utils/auth";
+
+// import { ServeLogout } from "@/api/user";
+
+let state = {
+  // 用户ID
+  id: 0,
+  // 用户昵称
+  name: "",
+  // 个性头像
+  face: require("@/assets/image/detault-avatar.jpg"),
+  // 名片背景
+  visitCardBag: require("@/assets/image/default-user-banner.png"),
+  // 当前登录状态
+  loginStatus: false,
+  toUser:""
+};
+
+// 判断用户是否登录
+if (getToken()) {
+  let userInfo = getUserInfo();
+  console.error(userInfo)
+  state.name = userInfo.name;
+  state.id = userInfo.id;
+  state.face = userInfo.face ? userInfo.face : state.avatar;
+  state.loginStatus = true;
+}
+
+const User = {
+  state,
+  mutations: {
+    // 用户退出登录
+    USER_LOGOUT(state) {
+      state.id = 0;
+      state.face = "";
+      state.name = "";
+      state.loginStatus = false;
+    },
+
+    // 设置用户登录状态
+    UPDATE_LOGIN_STATUS(state) {
+      state.loginStatus = true;
+    },
+
+    // 更新用户信息
+    UPDATE_USER_INFO(state, data) {
+      for (const key in data) {
+        if (state.hasOwnProperty(key)) {
+          state[key] = data[key];
+        }
+      }
+
+      // 保存用户信息到缓存
+      setUserInfo({
+        id: state.id,
+        face: state.face,
+        name: state.name,
+      });
+    },
+  },
+  actions: {
+    // 退出登录处理操作
+    ACT_USER_LOGOUT({ commit }) {
+      commit("USER_LOGOUT");
+      // ServeLogout().finally(() => {
+      //   removeAll();
+      //   location.reload();
+      // });
+    },
+  },
+};
+
+export default User;
diff --git a/im/src/store/mutations.js b/im/src/store/mutations.js
new file mode 100644
index 00000000..fac40256
--- /dev/null
+++ b/im/src/store/mutations.js
@@ -0,0 +1,9 @@
+// 根级别的 mutation
+const mutations = {
+  // 更新socket 连接状态
+  UPDATE_SOCKET_STATUS(state, status) {
+    state.socketStatus = status
+  },
+}
+
+export default mutations
diff --git a/im/src/store/state.js b/im/src/store/state.js
new file mode 100644
index 00000000..e571ecaf
--- /dev/null
+++ b/im/src/store/state.js
@@ -0,0 +1,13 @@
+const defaultAvatar = require('@/assets/image/detault-avatar.jpg')
+
+// 根级别的 state
+const state = {
+  socketStatus: false,
+  website_name: process.env.VUE_APP_WEBSITE_NAME,
+  copyright: `©2020 - 2021 ${process.env.VUE_APP_WEBSITE_NAME} 在线聊天 <a href="https://github.com/gzydong/LumenIM" style="color: #777272;font-weight: 400;" target="_blank">Github源码</a>`,
+
+  // 头像加载失败后的默认头像
+  defaultAvatar: "this.src='" + defaultAvatar + "'",
+}
+
+export default state
diff --git a/im/src/utils/auth.js b/im/src/utils/auth.js
new file mode 100644
index 00000000..487f40f0
--- /dev/null
+++ b/im/src/utils/auth.js
@@ -0,0 +1,67 @@
+import JsBase64 from 'js-base64'
+
+const USER_TOKEN = 'LILI-TOKEN'
+const USER_INFO = 'LILI-USERINFO'
+const USER_SETTING = 'LILI-SETTING'
+
+/**
+ * 设置用户授权token
+ *
+ * @param {String} token
+ */
+export function setToken(token) {
+    return localStorage.setItem(
+        USER_TOKEN,
+        token
+    )
+}
+
+/**
+ * 获取授权token
+ */
+export function getToken() {
+    return localStorage.getItem(USER_TOKEN)
+}
+
+/**
+ * 设置用户信息
+ *
+ * @param {Object} data
+ */
+export function setUserInfo(data) {
+    localStorage.setItem(USER_INFO, JsBase64.Base64.encode(JSON.stringify(data)))
+}
+
+/**
+ * 获取用户信息
+ */
+export function getUserInfo() {
+    const data = JsBase64.Base64.decode(localStorage.getItem(USER_INFO) || '')
+    return data ? JSON.parse(data) : {}
+}
+
+/**
+ * 获取用户本地缓存的设置信息
+ */
+export function getUserSettingCache() {
+    const data = localStorage.getItem(USER_SETTING)
+    return data ? JSON.parse(data) : {}
+}
+
+/**
+ * 用户设置保存到浏览器缓存中
+ *
+ * @param {Object} state 用户设置相关信息
+ */
+export function setUserSettingCache(state) {
+    localStorage.setItem(USER_SETTING, JSON.stringify(state))
+}
+
+/**
+ * 删除用户相关缓存信息
+ */
+export function removeAll() {
+    localStorage.removeItem(USER_TOKEN)
+    localStorage.removeItem(USER_INFO)
+    localStorage.removeItem(USER_SETTING)
+}
diff --git a/im/src/utils/date.js b/im/src/utils/date.js
new file mode 100644
index 00000000..c85b7893
--- /dev/null
+++ b/im/src/utils/date.js
@@ -0,0 +1,144 @@
+/**
+ * 对Date的扩展，将 Date 转化为指定格式的String。
+ *
+ *  月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
+ *  年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)。
+ *
+ *  【示例】：
+ *  formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss.S') ==> 2006-07-02 08:09:04.423
+ *  formatDate(new Date(), 'yyyy-M-d h:m:s.S')      ==> 2006-7-2 8:9:4.18
+ *  formatDate(new Date(), 'hh:mm:ss.S')            ==> 08:09:04.423
+ */
+export function formatDate(date, fmt) {
+  const o = {
+    'M+': date.getMonth() + 1, //月份
+    'd+': date.getDate(), //日
+    'h+': date.getHours(), //小时
+    'm+': date.getMinutes(), //分
+    's+': date.getSeconds(), //秒
+    'q+': Math.floor((date.getMonth() + 3) / 3), //季度
+    S: date.getMilliseconds(), //毫秒
+  }
+
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(
+      RegExp.$1,
+      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+    )
+  }
+
+  for (let k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      let value =
+        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
+      fmt = fmt.replace(RegExp.$1, value)
+    }
+  }
+
+  return fmt
+}
+
+/**
+ * 仿照微信中的消息时间显示逻辑，将时间戳（单位：毫秒）转换为友好的显示格式.
+ *
+ * 1）7天之内的日期显示逻辑是：今天、昨天(-1d)、前天(-2d)、星期？（只显示总计7天之内的星期数，即<=-4d）；
+ * 2）7天之外（即>7天）的逻辑：直接显示完整日期时间。
+ *
+ * @param {[long]} timestamp 时间戳（单位：毫秒），形如：1550789954260
+ * @param {boolean} mustIncludeTime true表示输出的格式里一定会包含“时间:分钟”
+ * ，否则不包含（参考微信，不包含时分的情况，用于首页“消息”中显示时）
+ *
+ * @return {string} 输出格式形如：“刚刚”、“10:30”、“昨天 12:04”、“前天 20:51”、“星期二”、“2019/2/21 12:09”等形式
+ */
+export function formatDateShort(timestamp, mustIncludeTime) {
+  // 当前时间
+  let currentDate = new Date()
+  // 目标判断时间
+  let srcDate = new Date(parseInt(timestamp))
+
+  let currentYear = currentDate.getFullYear()
+  let currentMonth = currentDate.getMonth() + 1
+  let currentDateD = currentDate.getDate()
+
+  let srcYear = srcDate.getFullYear()
+  let srcMonth = srcDate.getMonth() + 1
+  let srcDateD = srcDate.getDate()
+
+  let ret = ''
+
+  // 要额外显示的时间分钟
+  let timeExtraStr = mustIncludeTime ? ' ' + formatDate(srcDate, 'hh:mm') : ''
+
+  // 当年
+  if (currentYear == srcYear) {
+    let currentTimestamp = currentDate.getTime()
+    let srcTimestamp = timestamp
+    // 相差时间（单位：毫秒）
+    let deltaTime = currentTimestamp - srcTimestamp
+
+    // 当天（月份和日期一致才是）
+    if (currentMonth == srcMonth && currentDateD == srcDateD) {
+      // 时间相差60秒以内
+      if (deltaTime < 60 * 1000) ret = '刚刚'
+      // 否则当天其它时间段的，直接显示“时:分”的形式
+      else ret = formatDate(srcDate, 'hh:mm')
+    }
+    // 当年 && 当天之外的时间（即昨天及以前的时间）
+    else {
+      // 昨天（以“现在”的时候为基准-1天）
+      let yesterdayDate = new Date()
+      yesterdayDate.setDate(yesterdayDate.getDate() - 1)
+
+      // 前天（以“现在”的时候为基准-2天）
+      let beforeYesterdayDate = new Date()
+      beforeYesterdayDate.setDate(beforeYesterdayDate.getDate() - 2)
+
+      // 用目标日期的“月”和“天”跟上方计算出来的“昨天”进行比较，是最为准确的（如果用时间戳差值
+      // 的形式，是不准确的，比如：现在时刻是2019年02月22日1:00、而srcDate是2019年02月21日23:00，
+      // 这两者间只相差2小时，直接用“deltaTime/(3600 * 1000)” > 24小时来判断是否昨天，就完全是扯蛋的逻辑了）
+      if (
+        srcMonth == yesterdayDate.getMonth() + 1 &&
+        srcDateD == yesterdayDate.getDate()
+      )
+        ret = '昨天' + timeExtraStr
+      // -1d
+      // “前天”判断逻辑同上
+      else if (
+        srcMonth == beforeYesterdayDate.getMonth() + 1 &&
+        srcDateD == beforeYesterdayDate.getDate()
+      )
+        ret = '前天' + timeExtraStr
+      // -2d
+      else {
+        // 跟当前时间相差的小时数
+        let deltaHour = deltaTime / (3600 * 1000)
+
+        // 如果小于或等 7*24小时就显示星期几
+        if (deltaHour <= 7 * 24) {
+          let weekday = new Array(7)
+          weekday[0] = '星期日'
+          weekday[1] = '星期一'
+          weekday[2] = '星期二'
+          weekday[3] = '星期三'
+          weekday[4] = '星期四'
+          weekday[5] = '星期五'
+          weekday[6] = '星期六'
+
+          // 取出当前是星期几
+          let weedayDesc = weekday[srcDate.getDay()]
+          ret = weedayDesc + timeExtraStr
+        }
+        // 否则直接显示完整日期时间
+        else {
+          ret = formatDate(srcDate, 'yyyy/M/d') + timeExtraStr
+        }
+      }
+    }
+  }
+  // 往年
+  else {
+    ret = formatDate(srcDate, 'yyyy/M/d') + timeExtraStr
+  }
+
+  return ret
+}
diff --git a/im/src/utils/editor.js b/im/src/utils/editor.js
new file mode 100644
index 00000000..e07d7203
--- /dev/null
+++ b/im/src/utils/editor.js
@@ -0,0 +1,180 @@
+/**
+ * 遍历对象
+ *
+ * @param {Object} obj
+ * @param {Object} fn
+ */
+export function objForEach(obj, fn) {
+  let key = void 0,
+    result = void 0
+  for (key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      result = fn.call(obj, key, obj[key])
+      if (result === false) {
+        break
+      }
+    }
+  }
+}
+
+/**
+ * 遍历类数组
+ *
+ * @param {Object} fakeArr
+ * @param {Object} fn
+ */
+export function arrForEach(fakeArr, fn) {
+  let i = void 0,
+    item = void 0,
+    result = void 0
+  let length = fakeArr.length || 0
+  for (i = 0; i < length; i++) {
+    item = fakeArr[i]
+    result = fn.call(fakeArr, item, i)
+    if (result === false) {
+      break
+    }
+  }
+}
+
+/**
+ * 替换 html 特殊字符
+ *
+ * @param {Object} html
+ */
+export function replaceHtmlSymbol(html) {
+  if (html == null) {
+    return ''
+  }
+  return html
+    .replace(/</gm, '&lt;')
+    .replace(/>/gm, '&gt;')
+    .replace(/"/gm, '&quot;')
+    .replace(/(\r\n|\r|\n)/g, '<br/>')
+}
+
+/**
+ * 获取粘贴的纯文本
+ *
+ * @param {Object} e
+ */
+export function getPasteText(e) {
+  let clipboardData =
+    e.clipboardData || (e.originalEvent && e.originalEvent.clipboardData)
+  let pasteText = void 0
+  if (clipboardData == null) {
+    pasteText = window.clipboardData && window.clipboardData.getData('text')
+  } else {
+    pasteText = clipboardData.getData('text/plain')
+  }
+
+  return replaceHtmlSymbol(pasteText)
+}
+
+/**
+ * 获取粘贴的html
+ *
+ * @param {Object} e
+ * @param {Object} filterStyle
+ * @param {Object} ignoreImg
+ */
+export function getPasteHtml(e, filterStyle, ignoreImg) {
+  let clipboardData =
+    e.clipboardData || (e.originalEvent && e.originalEvent.clipboardData)
+  let pasteText = void 0,
+    pasteHtml = void 0
+  if (clipboardData == null) {
+    pasteText = window.clipboardData && window.clipboardData.getData('text')
+  } else {
+    pasteText = clipboardData.getData('text/plain')
+    pasteHtml = clipboardData.getData('text/html')
+  }
+  if (!pasteHtml && pasteText) {
+    pasteHtml = '<p>' + replaceHtmlSymbol(pasteText) + '</p>'
+  }
+  if (!pasteHtml) {
+    return
+  }
+
+  // 过滤word中状态过来的无用字符
+  let docSplitHtml = pasteHtml.split('</html>')
+  if (docSplitHtml.length === 2) {
+    pasteHtml = docSplitHtml[0]
+  }
+
+  // 过滤无用标签
+  pasteHtml = pasteHtml.replace(/<(meta|script|link).+?>/gim, '')
+  // 去掉注释
+  pasteHtml = pasteHtml.replace(/<!--.*?-->/gm, '')
+  // 过滤 data-xxx 属性
+  pasteHtml = pasteHtml.replace(/\s?data-.+?=('|").+?('|")/gim, '')
+
+  if (ignoreImg) {
+    // 忽略图片
+    pasteHtml = pasteHtml.replace(/<img.+?>/gim, '')
+  }
+
+  if (filterStyle) {
+    // 过滤样式
+    pasteHtml = pasteHtml.replace(/\s?(class|style)=('|").*?('|")/gim, '')
+  } else {
+    // 保留样式
+    pasteHtml = pasteHtml.replace(/\s?class=('|").*?('|")/gim, '')
+  }
+
+  return pasteHtml
+}
+
+/**
+ * 获取粘贴的图片文件
+ *
+ * @param {Object} e
+ */
+export function getPasteImgs(e) {
+  let result = []
+  let txt = getPasteText(e)
+  if (txt) {
+    // 有文字，就忽略图片
+    return result
+  }
+
+  let clipboardData =
+    e.clipboardData || (e.originalEvent && e.originalEvent.clipboardData) || {}
+  let items = clipboardData.items
+  if (!items) {
+    return result
+  }
+
+  objForEach(items, function(key, value) {
+    let type = value.type
+    if (/image/i.test(type)) {
+      result.push(value.getAsFile())
+    }
+  })
+
+  return result
+}
+
+/**
+ * 获取拖拽的图片
+ *
+ * @param {Object} e
+ */
+export function getDragPasteImg(e) {
+  let result = []
+  let dataTransfer =
+    e.dataTransfer || (e.originalEvent && e.originalEvent.dataTransfer) || {}
+  let items = dataTransfer.items
+  if (!items) {
+    return result
+  }
+
+  objForEach(items, function(key, value) {
+    let type = value.type
+    if (/image/i.test(type)) {
+      result.push(value.getAsFile())
+    }
+  })
+
+  return result
+}
diff --git a/im/src/utils/emojis.js b/im/src/utils/emojis.js
new file mode 100644
index 00000000..030fda59
--- /dev/null
+++ b/im/src/utils/emojis.js
@@ -0,0 +1,144 @@
+/**
+ * 动态表情
+ */
+const emojis = {
+    "[微笑]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif'>",
+    "[撇嘴]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/1.gif'>",
+    "[色]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/2.gif'>",
+    "[发呆]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/3.gif'>",
+    "[得意]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/4.gif'>",
+    "[流泪]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/5.gif'>",
+    "[害羞]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/6.gif'>",
+    "[闭嘴]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/7.gif'>",
+    "[睡]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/8.gif'>",
+    "[大哭]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/9.gif'>",
+    "[尴尬]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/10.gif'>",
+    "[发怒]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/11.gif'>",
+    "[调皮]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/12.gif'>",
+    "[呲牙]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/13.gif'>",
+    "[惊讶]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/14.gif'>",
+    "[难过]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/15.gif'>",
+    "[酷]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/16.gif'>",
+    "[冷汗]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/17.gif'>",
+    "[抓狂]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/18.gif'>",
+    "[吐]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/19.gif'>",
+    "[偷笑]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/20.gif'>",
+    "[可爱]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/21.gif'>",
+    "[白眼]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/22.gif'>",
+    "[傲慢]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/23.gif'>",
+    "[饥饿]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/24.gif'>",
+    "[困]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/25.gif'>",
+    "[惊恐]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/26.gif'>",
+    "[流汗]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/27.gif'>",
+    "[憨笑]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/28.gif'>",
+    "[大兵]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/29.gif'>",
+    "[奋斗]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/30.gif'>",
+    "[咒骂]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/31.gif'>",
+    "[疑问]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/32.gif'>",
+    "[嘘]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/33.gif'>",
+    "[晕]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/34.gif'>",
+    "[折磨]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/35.gif'>",
+    "[衰]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/36.gif'>",
+    "[骷髅]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/37.gif'>",
+    "[敲打]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/38.gif'>",
+    "[再见]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/39.gif'>",
+    "[擦汗]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/40.gif'>",
+    "[抠鼻]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/41.gif'>",
+    "[鼓掌]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/42.gif'>",
+    "[糗大了]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/43.gif'>",
+    "[坏笑]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/44.gif'>",
+    "[左哼哼]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/45.gif'>",
+    "[右哼哼]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/46.gif'>",
+    "[哈欠]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/47.gif'>",
+    "[鄙视]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/48.gif'>",
+    "[委屈]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/49.gif'>",
+    "[快哭了]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/50.gif'>",
+    "[阴险]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/51.gif'>",
+    "[亲亲]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/52.gif'>",
+    "[吓]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/53.gif'>",
+    "[可怜]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/54.gif'>",
+    "[菜刀]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/55.gif'>",
+    "[西瓜]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/56.gif'>",
+    "[啤酒]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/57.gif'>",
+    "[篮球]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/58.gif'>",
+    "[乒乓]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/59.gif'>",
+    "[咖啡]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/60.gif'>",
+    "[饭]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/61.gif'>",
+    "[猪头]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/62.gif'>",
+    "[玫瑰]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/63.gif'>",
+    "[凋谢]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/64.gif'>",
+    "[示爱]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/65.gif'>",
+    "[爱心]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/66.gif'>",
+    "[心碎]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/67.gif'>",
+    "[蛋糕]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/68.gif'>",
+    "[闪电]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/69.gif'>",
+    "[炸弹]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/70.gif'>",
+    "[刀]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/71.gif'>",
+    "[足球]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/72.gif'>",
+    "[瓢虫]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/73.gif'>",
+    "[便便]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/74.gif'>",
+    "[月亮]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/75.gif'>",
+    "[太阳]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/76.gif'>",
+    "[礼物]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/77.gif'>",
+    "[拥抱]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/78.gif'>",
+    "[强]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/79.gif'>",
+    "[弱]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/80.gif'>",
+    "[握手]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/81.gif'>",
+    "[胜利]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/82.gif'>",
+    "[抱拳]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/83.gif'>",
+    "[勾引]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/84.gif'>",
+    "[拳头]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/85.gif'>",
+    "[差劲]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/86.gif'>",
+    "[爱你]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/87.gif'>",
+    "[NO]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/88.gif'>",
+    "[OK]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/89.gif'>",
+    "[爱情]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/90.gif'>",
+    "[飞吻]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/91.gif'>",
+    "[跳跳]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/92.gif'>",
+    "[发抖]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/93.gif'>",
+    "[怄火]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/94.gif'>",
+    "[转圈]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/95.gif'>",
+    "[磕头]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/96.gif'>",
+    "[回头]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/97.gif'>",
+    "[跳绳]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/98.gif'>",
+    "[挥手]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/99.gif'>",
+    "[激动]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/100.gif'>",
+    "[街舞]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/101.gif'>",
+    "[献吻]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/102.gif'>",
+    "[左太极]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/103.gif'>",
+    "[右太极]": "<img src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/104.gif'>",
+};
+
+/**
+ * 符号表情
+ */
+const symbol = [
+    "😠", "😩", "😲", "😞", "😵", "😰", "😒", "😍", "😤", "😜", "😝", "😋", "😘", "😚", "😷",
+    "😳", "😃", "😅", "😆", "😁", "😂", "😊", "☺", "😄", "😢",
+    "😭", "😨", "😣", "😡", "😌", "😖", "😔", "😱", "😪", "😏", "😓", "😥", "😫", "😉",
+    "✊", "✋", "✌", "👊", "👍", "☝", "👆", "👇", "👈", "👉",
+    "👋", "👏", "👌", "👎"
+];
+
+const emojisKeys = Object.keys(emojis);
+
+export const emojiList = {
+    symbol,
+    emojis
+}
+
+const regEmoji = emojisKeys.map((value) => '|\\' + value).join('').replace('|', '')
+
+/**
+ * 替换表情文字
+ * 
+ * @param {String} content 需要替换的字符串
+ */
+export function textReplaceEmoji(content) {
+    if(!content){
+        return ""
+    }
+    return content.replace(new RegExp(`(${regEmoji})`, 'gi'), ($0, $1) => {
+        return emojis[$1];
+    });
+}
\ No newline at end of file
diff --git a/im/src/utils/functions.js b/im/src/utils/functions.js
new file mode 100644
index 00000000..9e39260e
--- /dev/null
+++ b/im/src/utils/functions.js
@@ -0,0 +1,524 @@
+/** 公共方法类 */
+import { getToken } from "@/utils/auth";
+import config from "@/config/config";
+
+/**
+ * 人性化时间显示
+ *
+ * @param {Object} datetime
+ */
+export function formatTime(datetime) {
+  if (datetime == null) return "";
+
+  datetime = datetime.replace(/-/g, "/");
+
+  let time = new Date();
+  let outTime = new Date(datetime);
+  if (/^[1-9]\d*$/.test(datetime)) {
+    outTime = new Date(parseInt(datetime) * 1000);
+  }
+
+  if (
+    time.getTime() < outTime.getTime() ||
+    time.getFullYear() != outTime.getFullYear()
+  ) {
+    return parseTime(outTime, "{y}-{m}-{d} {h}:{i}");
+  }
+
+  if (time.getMonth() != outTime.getMonth()) {
+    return parseTime(outTime, "{m}-{d} {h}:{i}");
+  }
+
+  if (time.getDate() != outTime.getDate()) {
+    let day = outTime.getDate() - time.getDate();
+    if (day == -1) {
+      return parseTime(outTime, "昨天 {h}:{i}");
+    }
+
+    if (day == -2) {
+      return parseTime(outTime, "前天 {h}:{i}");
+    }
+
+    return parseTime(outTime, "{m}-{d} {h}:{i}");
+  }
+
+  if (time.getHours() != outTime.getHours()) {
+    return parseTime(outTime, "{h}:{i}");
+  }
+
+  let minutes = outTime.getMinutes() - time.getMinutes();
+  if (minutes == 0) {
+    return "刚刚";
+  }
+
+  minutes = Math.abs(minutes);
+  return `${minutes}分钟前`;
+}
+
+/**
+ * 格式化文件大小
+ *
+ * @param {String} value 文件大小(字节)
+ */
+export function formatSize(value) {
+  if (null == value || value == "") {
+    return "0";
+  }
+  let unitArr = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  let index = 0;
+  let srcsize = parseFloat(value);
+  index = Math.floor(Math.log(srcsize) / Math.log(1024));
+  let size = srcsize / Math.pow(1024, index);
+  size = size.toFixed(2); //保留的小数位数
+  return size + unitArr[index];
+}
+/**
+ * 获取文件后缀名
+ *
+ * @param {String} fileName
+ */
+export function getFileExt(fileName) {
+  let ext = fileName.split(".");
+  ext = ext[ext.length - 1]; // 获取文件后缀名
+  return ext;
+}
+
+/**
+ * 根据图片url下载图片
+ * @param {String} imgsrc
+ * @param {String} name
+ */
+export function downloadIamge(imgsrc, name) {
+  //下载图片地址和图片名
+  let image = new Image();
+  // 解决跨域 Canvas 污染问题
+  image.setAttribute("crossOrigin", "anonymous");
+  image.onload = function () {
+    let canvas = document.createElement("canvas");
+    canvas.width = image.width;
+    canvas.height = image.height;
+    let context = canvas.getContext("2d");
+    context.drawImage(image, 0, 0, image.width, image.height);
+    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
+    let a = document.createElement("a"); // 生成一个a元素
+    let event = new MouseEvent("click"); // 创建一个单击事件
+    a.download = name || "photo"; // 设置图片名称
+    a.href = url; // 将生成的URL设置为a.href属性
+    a.dispatchEvent(event); // 触发a的单击事件
+  };
+  image.src = imgsrc;
+}
+
+/**
+ * 通过图片url获取图片大小
+ *
+ * @param {String} imgsrc 例如图片名： D8x5f13a53dbc4b9_350x345.png
+ */
+export function getImageInfo(imgsrc) {
+  let data = {
+    width: 0,
+    height: 0,
+  };
+
+  let arr = imgsrc.split("_");
+  if (arr.length == 1) return data;
+
+  let info = arr[arr.length - 1].match(/\d+x\d+/g);
+  if (info == null) return data;
+
+  info = info[0].split("x");
+  return {
+    width: parseInt(info[0]),
+    height: parseInt(info[1]),
+  };
+}
+
+/**
+ * 文件下载方法
+ *
+ * @param {Number} cr_id
+ */
+export function download(cr_id) {
+  let api = config.BASE_API_URL;
+  let token = getToken();
+  try {
+    let link = document.createElement("a");
+    link.href = `${api}/download/user-chat-file?cr_id=${cr_id}&token=${token}`;
+    link.click();
+  } catch (e) {}
+}
+
+/**
+ * 时间格式化方法
+ *
+ * @param {(Object|string|number)} time
+ * @param {String} cFormat
+ * @returns {String | null}
+ */
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null;
+  }
+
+  let date;
+  const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
+
+  if (typeof time === "object") {
+    date = time;
+  } else {
+    if (typeof time === "string" && /^[0-9]+$/.test(time)) {
+      time = parseInt(time);
+    }
+    if (typeof time === "number" && time.toString().length === 10) {
+      time = time * 1000;
+      console.log("时间判断为number");
+    }
+
+    date = new Date(time.replace(/-/g, "/"));
+  }
+
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay(),
+  };
+
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    const value = formatObj[key];
+    // Note: getDay() returns 0 on Sunday
+    if (key === "a") {
+      return ["日", "一", "二", "三", "四", "五", "六"][value];
+    }
+
+    return value.toString().padStart(2, "0");
+  });
+
+  return time_str;
+}
+
+/**
+ * 去除字符串控制
+ *
+ * @param {String} str
+ */
+export function trim(str, type = null) {
+  if (type) {
+    return str.replace(/(^\s*)|(\s*$)/g, "");
+  } else if (type == "l") {
+    return str.replace(/(^\s*)/g, "");
+  } else {
+    return str.replace(/(\s*$)/g, "");
+  }
+}
+
+/**
+ * 解析url中参数
+ *
+ * @param {String} url
+ * @returns {Object}
+ */
+export function param2Obj(url) {
+  const search = url.split("?")[1];
+
+  if (!search) return {};
+
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"')
+        .replace(/\+/g, " ") +
+      '"}'
+  );
+}
+
+/**
+ * @param {Object} json
+ * @returns {Array}
+ */
+export function param(json) {
+  if (!json) return "";
+  return cleanArray(
+    Object.keys(json).map((key) => {
+      if (json[key] === undefined) return "";
+
+      return encodeURIComponent(key) + "=" + encodeURIComponent(json[key]);
+    })
+  ).join("&");
+}
+
+/**
+ * @param {Array} actual
+ * @returns {Array}
+ */
+export function cleanArray(actual) {
+  const newArray = [];
+  for (let i = 0; i < actual.length; i++) {
+    if (actual[i]) {
+      newArray.push(actual[i]);
+    }
+  }
+
+  return newArray;
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {String} className
+ */
+export function toggleClass(element, className) {
+  if (!element || !className) {
+    return;
+  }
+
+  let classString = element.className;
+  let nameIndex = classString.indexOf(className);
+  if (nameIndex === -1) {
+    classString += "" + className;
+  } else {
+    classString =
+      classString.substr(0, nameIndex) +
+      classString.substr(nameIndex + className.length);
+  }
+  element.className = classString;
+}
+
+/**
+ * Check if an element has a class
+ *
+ * @param {HTMLElement} elm
+ * @param {String} cls
+ * @returns {Boolean}
+ */
+export function hasClass(ele, cls) {
+  return !!ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
+}
+
+/**
+ * Add class to element
+ *
+ * @param {HTMLElement} elm
+ * @param {String} cls
+ */
+export function addClass(ele, cls) {
+  if (!hasClass(ele, cls)) ele.className += " " + cls;
+}
+
+/**
+ * Remove class from element
+ *
+ * @param {HTMLElement} elm
+ * @param {String} cls
+ */
+export function removeClass(ele, cls) {
+  if (hasClass(ele, cls)) {
+    const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
+    ele.className = ele.className.replace(reg, " ");
+  }
+}
+
+/**
+ * 通过图片Url获取图片等比例缩放的宽度和高度信息
+ *
+ * @param {String} src
+ * @param {Number} width
+ */
+export function imgZoom(src, width = 200) {
+  const info = getImageInfo(src);
+
+  if (info.width < width) {
+    return {
+      width: `${info.width}px`,
+      height: `${info.height}px`,
+    };
+  }
+
+  return {
+    width: width + "px",
+    height: parseInt(info.height / (info.width / width)) + "px",
+  };
+}
+
+/**
+ * 获取浏览器光标选中内容
+ *
+ * @export
+ * @returns
+ */
+export function getSelection() {
+  return window.getSelection
+    ? window.getSelection().toString()
+    : document.selection.createRange().text;
+}
+
+/**
+ * 剪贴板复制功能
+ *
+ * @param {String} value 复制内容
+ * @param {Function} callback 复制成功回调方法
+ */
+export const copyTextToClipboard = (value, callback) => {
+  let textArea = document.createElement("textarea");
+  textArea.style.background = "transparent";
+  textArea.value = value;
+
+  document.body.appendChild(textArea);
+
+  textArea.select();
+
+  try {
+    document.execCommand("copy");
+    if (callback) callback();
+  } catch (err) {
+    this.$message.error("Oops, unable to copy");
+  }
+
+  document.body.removeChild(textArea);
+};
+
+/**
+ * 隐藏用户手机号中间四位
+ *
+ * @param {String} phone  手机号
+ */
+export function hidePhone(phone) {
+  return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
+}
+
+/**
+ * 人性化显示时间
+ *
+ * @param {Object} datetime
+ */
+export function beautifyTime(datetime = "") {
+  if (datetime == null) {
+    return "";
+  }
+
+  datetime = datetime.replace(/-/g, "/");
+
+  let time = new Date();
+  let outTime = new Date(datetime);
+  if (/^[1-9]\d*$/.test(datetime)) {
+    outTime = new Date(parseInt(datetime) * 1000);
+  }
+
+  if (time.getTime() < outTime.getTime()) {
+    return parseTime(outTime, "{y}/{m}/{d}");
+  }
+
+  if (time.getFullYear() != outTime.getFullYear()) {
+    return parseTime(outTime, "{y}/{m}/{d}");
+  }
+
+  if (time.getMonth() != outTime.getMonth()) {
+    return parseTime(outTime, "{m}/{d}");
+  }
+
+  if (time.getDate() != outTime.getDate()) {
+    let day = outTime.getDate() - time.getDate();
+    if (day == -1) {
+      return parseTime(outTime, "昨天 {h}:{i}");
+    }
+
+    if (day == -2) {
+      return parseTime(outTime, "前天 {h}:{i}");
+    }
+
+    return parseTime(outTime, "{m}-{d}");
+  }
+
+  if (time.getHours() != outTime.getHours()) {
+    return parseTime(outTime, "{h}:{i}");
+  }
+
+  let minutes = outTime.getMinutes() - time.getMinutes();
+  if (minutes == 0) {
+    return "刚刚";
+  }
+
+  minutes = Math.abs(minutes);
+  return `${minutes}分钟前`;
+}
+
+export function getSort(fn) {
+  return function (a, b) {
+    let ret = 0;
+
+    if (fn.call(this, a, b)) {
+      ret = -1;
+    } else if (fn.call(this, b, a)) {
+      ret = 1;
+    }
+
+    return ret;
+  };
+}
+
+/**
+ * 批量排序
+ *
+ * @param {*} arr
+ */
+export function getMutipSort(arr) {
+  return function (a, b) {
+    let tmp;
+    let i = 0;
+
+    do {
+      tmp = arr[i++](a, b);
+    } while (tmp == 0 && i < arr.length);
+
+    return tmp;
+  };
+}
+
+/**
+ * Url 替换超链接
+ *
+ * @param {String} text 文本
+ * @param {String} color 超链接颜色
+ */
+export function textReplaceLink(text, color = "#409eff") {
+  let exp =
+    /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
+  return text.replace(
+    exp,
+    `<a href='$1' target="_blank" style="color:${color};text-decoration: revert;">$1</a >`
+  );
+}
+
+/**
+ * 防抖
+ *
+ * @param {*} func
+ * @param {*} wait
+ * @param {*} immediate
+ * @returns
+ */
+export function debounce(func, wait, immediate) {
+  let timeout;
+
+  return function () {
+    let context = this;
+    let args = arguments;
+
+    if (timeout) clearTimeout(timeout); // timeout 不为null
+    if (immediate) {
+      let callNow = !timeout; // 第一次会立即执行，以后只有事件执行后才会再次触发
+      timeout = setTimeout(function () {
+        timeout = null;
+      }, wait);
+      if (callNow) func.apply(context, args);
+    } else {
+      timeout = setTimeout(function () {
+        func.apply(context, args);
+      }, wait);
+    }
+  };
+}
diff --git a/im/src/utils/request.js b/im/src/utils/request.js
new file mode 100644
index 00000000..f035c2af
--- /dev/null
+++ b/im/src/utils/request.js
@@ -0,0 +1,120 @@
+import axios from "axios";
+import config from "@/config/config";
+import { getToken, removeAll } from "@/utils/auth";
+
+import { Notification } from "element-ui";
+import qs from "qs";
+
+// 创建 axios 实例
+const request = axios.create({
+  // API 请求的默认前缀
+  baseURL: config.BASE_API_URL,
+
+  // 请求超时时间
+  timeout: 20000,
+});
+
+/**
+ * 异常拦截处理器
+ *
+ * @param {*} error
+ */
+const errorHandler = (error) => {
+  // 判断是否是响应错误信息
+  if (error.response) {
+    if (error.response.status == 401) {
+      removeAll();
+      location.reload();
+    } else {
+      Notification({
+        message: "网络异常,请稍后再试...",
+        position: "top-right",
+      });
+    }
+  }
+
+  return Promise.reject(error);
+};
+
+// 请求拦截器
+request.interceptors.request.use((config) => {
+  const token = getToken();
+  if (token) {
+    config.headers["accessToken"] = `${token}`;
+    return config;
+  }
+}, errorHandler);
+
+// 响应拦截器
+request.interceptors.response.use((response) => {
+  return response.data;
+}, errorHandler);
+
+/**
+ * GET 请求
+ *
+ * @param {String} url
+ * @param {Object} data
+ * @param {Object} options
+ * @returns {Promise<any>}
+ */
+export const get = (url, data = {}, options = {}) => {
+  return request({
+    url,
+    params: data,
+    method: "get",
+    ...options,
+  });
+};
+
+/**
+ * POST 请求
+ *
+ * @param {String} url
+ * @param {Object} data
+ * @param {Object} options
+ * @returns {Promise<any>}
+ */
+export const post = (url, data = {}, options = {}) => {
+  return request({
+    url,
+    method: "post",
+    data: qs.stringify(data),
+    ...options,
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+  });
+};
+
+/**
+ * del 请求
+ *
+ * @param {String} url
+ * @param {Object} data
+ * @param {Object} options
+ * @returns {Promise<any>}
+ */
+export const del = (url, data = {}, options = {}) => {
+  return request({
+    url,
+    method: "delete",
+    data: data,
+    ...options,
+  });
+};
+
+/**
+ * 上传文件 POST 请求
+ *
+ * @param {String} url
+ * @param {Object} data
+ * @param {Object} options
+ * @returns {Promise<any>}
+ */
+export const upload = (url, data = {}, options = {}) => {
+  return request({
+    url: config.BASE_COMMON + url,
+    method: "post",
+    data: data,
+    ...options,
+  });
+};
diff --git a/im/src/utils/talk.js b/im/src/utils/talk.js
new file mode 100644
index 00000000..2322882d
--- /dev/null
+++ b/im/src/utils/talk.js
@@ -0,0 +1,88 @@
+import store from "@/store";
+import router from "@/router";
+import { parseTime } from "@/utils/functions";
+import { ServeCreateTalkList } from "@/api/chat";
+
+const KEY_INDEX_NAME = "send_message_index_name";
+
+/**
+ * 通过对话索引查找对话列表下标
+ *
+ * @param {String} index_name
+ */
+export function findTalkIndex(index_name) {
+  return store.state.talks.items.findIndex(
+    (item) => item.index_name == index_name
+  );
+}
+
+/**
+ * 通过对话索引查找对话列表
+ *
+ * @param {String} index_name
+ */
+export function findTalk(index_name) {
+  return store.state.talks.items.find((item) => item.index_name == index_name);
+}
+
+/**
+ * 格式化聊天对话列表数据
+ *
+ * @param {Object} params
+ */
+export function formatTalkItem(params) {
+  console.log(params);
+  let options = {
+    id: "",
+    disable: false,
+    face: "",
+    lastTalkTime: "",
+    name: "",
+    top: false,
+    unread: 0, //未读消息
+    is_online: 0, //是否在线
+    draft_text: "", //草稿
+    msg_text: "", //存储的消息
+    userId: "",
+  };
+
+  Object.assign(options, params);
+  options.index_name = `${options.talk_type}_${options.receiver_id}`;
+
+  return options;
+}
+
+/**
+ * 打开指定对话窗口
+ *
+ * @param {Integer} talk_type 对话类型[1:私聊;2:群聊;]
+ * @param {Integer} receiver_id 接收者ID
+ */
+export function toTalk(talk_type, receiver_id) {
+  ServeCreateTalkList(receiver_id).then(({ code, data }) => {
+    console.log("ServeCreateTalkList", data);
+    if (code == 200) {
+      sessionStorage.setItem(KEY_INDEX_NAME, `${talk_type}_${receiver_id}`);
+      router.push({
+        path: "/message",
+        query: {
+          v: new Date().getTime(),
+        },
+      });
+    }
+  });
+}
+
+/**
+ * 获取需要打开的对话索引值
+ *
+ * @returns
+ */
+export function getCacheIndexName() {
+  let index_name = sessionStorage.getItem(KEY_INDEX_NAME);
+  if (index_name) {
+    sessionStorage.removeItem(KEY_INDEX_NAME);
+  }
+
+  return index_name;
+}
diff --git a/im/src/utils/validate.js b/im/src/utils/validate.js
new file mode 100644
index 00000000..3f2be534
--- /dev/null
+++ b/im/src/utils/validate.js
@@ -0,0 +1,54 @@
+/**
+ * 检测是否是字邮箱地址
+ *
+ * @param {String} value
+ */
+export const isEmail = value => {
+  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(
+    value
+  )
+}
+
+/**
+ * 检测是否是手机号
+ *
+ * @param {String} value
+ */
+export const isMobile = value => {
+  return /^1[0-9]{10}$/.test(value)
+}
+
+/**
+ * 检测是否为url
+ *
+ * @param {String} value
+ */
+export const isURL = value => {
+  return /^http[s]?:\/\/.*/.test(value)
+}
+
+/**
+ * 检测是否为数字类型
+ *
+ * @param {*} value
+ */
+export const isNumber = value => {
+  return Object.prototype.toString.call(value).slice(8, -1) === 'Number'
+}
+
+/**
+ * 检测是否为 Booleanl 类型
+ *
+ * @param {*} value
+ */
+export const isBoolean = value => {
+  return Object.prototype.toString.call(value).slice(8, -1) === 'Boolean'
+}
+
+/**
+ * 检测是非是微信浏览器
+ */
+export const isWeiXin = () => {
+  let ua = navigator.userAgent.toLowerCase()
+  return ua.match(/microMessenger/i) == 'micromessenger'
+}
diff --git a/im/src/views/layout/MainLayout.vue b/im/src/views/layout/MainLayout.vue
new file mode 100644
index 00000000..0406c1a8
--- /dev/null
+++ b/im/src/views/layout/MainLayout.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="body-bag" :class="themeBagImg">
+    <el-container class="main-layout" :class="{ 'full-mode': themeMode }">
+      <!-- <el-aside width="70px" class="side-edge">
+        <el-container class="full-height">
+          <el-header height="118px" class="logo-header">
+            <div class="user-login" v-popover:usercard>
+              <div class="user-box">
+                <face :text="face"></face>
+              </div>
+            </div>
+            <p class="user-status">
+              <span v-if="name">{{ name }}</span>
+              <span v-else>用户名称</span>
+            </p>
+          </el-header>
+          <el-main class="sidebar-menu">
+            <el-tooltip content="我的消息" placement="right" :visible-arrow="false">
+              <router-link to="/message">
+                <div class="menu-items" :class="{ active: idx == 0 }">
+                  <i class="el-icon-chat-line-round" />
+                  <span v-show="unreadNum" class="notify"></span>
+                </div>
+              </router-link>
+            </el-tooltip>
+          </el-main>
+          <el-footer height="60px" class="fixed-sidebar">
+            <div class="menu-items" @click="logout">
+              <span class="logout">退出</span>
+            </div>
+          </el-footer>
+        </el-container>
+      </el-aside> -->
+
+      <el-main class="no-padding" style="background: white">
+        <slot name="container"></slot>
+      </el-main>
+    </el-container>
+
+    <!-- 语音消息提示 -->
+    <audio id="audio" preload="auto">
+      <source src="~@/assets/image/1701.mp3" type="audio/mp3" />
+    </audio>
+  </div>
+</template>
+<script>
+import Face from '../../components/face'
+import { mapState } from "vuex";
+import { ServeFindFriendApplyNum } from "@/api/contacts";
+
+export default {
+  components: { Face },
+  name: "MainLayout",
+  props: {
+    idx: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    ...mapState({
+      face: (state) => state.user.face,
+      name: (state) => state.user.name,
+      id: (state) => state.user.id,
+      defaultAvatar: (state) => state.defaultAvatar,
+      socketStatus: (state) => state.socketStatus,
+      unreadNum: (state) => state.notify.unreadNum,
+      applyNum: (state) => state.notify.applyNum,
+      notifyCueTone: (state) => state.settings.notifyCueTone,
+      themeMode: (state) => state.settings.themeMode,
+      themeBagImg: (state) => state.settings.themeBagImg,
+    }),
+  },
+  watch: {
+    unreadNum(n, o) {
+      if (n > 0 && n > o && this.notifyCueTone) {
+        this.play();
+      }
+    },
+  },
+  created() {
+    this.setApplyNum();
+  },
+  methods: {
+    play() {
+      document
+        .querySelector("#audio")
+        .play()
+        .catch(() => {
+          console.error("消息提示音播放异常");
+        });
+    },
+    logout() {
+      this.$store.dispatch("ACT_USER_LOGOUT");
+    },
+    setApplyNum() {
+      // TODO 暂且return
+      return;
+      ServeFindFriendApplyNum().then((res) => {
+        if (res.code == 200 && res.data.unread > 0) {
+          this.$store.commit("INCR_APPLY_NUM");
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="less" >
+.main-layout {
+  position: fixed;
+  width: 75%;
+  height: 80%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  overflow: hidden;
+  transition: ease 0.5s;
+  border-radius: 5px;
+
+  &.full-mode {
+    width: 70%;
+    height: 85%;
+    border-radius: 0;
+  }
+
+  .side-edge {
+    display: block;
+    user-select: none;
+    background-color: #fff;
+    box-sizing: border-box;
+    border-right: 1px solid #ededed;
+
+    .logo-header {
+      padding: 0;
+
+      .user-status {
+        text-align: center;
+        margin-top: 10px;
+        color: #ccc9c9;
+        font-size: 13px;
+        font-weight: 300;
+
+        .online {
+          color: #0d710d;
+        }
+      }
+    }
+  }
+
+  .sidebar-menu {
+    width: 60px;
+    margin: 0 auto;
+    text-align: center;
+    padding: 0;
+    overflow: hidden;
+
+    a {
+      text-decoration: none;
+    }
+
+    .menu-items {
+      cursor: pointer;
+      color: #706d6d;
+      position: relative;
+      width: 45px;
+      height: 45px;
+      margin: 6px auto 0;
+      line-height: 45px;
+      text-align: center;
+
+      i {
+        font-size: 20px;
+
+        &:hover {
+          transform: scale(1.3);
+        }
+      }
+
+      .notify {
+        width: 5px;
+        height: 5px;
+        background: #ff1e1e;
+        display: inline-block;
+        border-radius: 5px;
+        position: absolute;
+        right: 5px;
+        top: 9px;
+        animation: notifymove 3s infinite;
+        animation-direction: alternate;
+        -webkit-animation: notifymove 3s infinite;
+      }
+
+      &.active {
+        color: #416641 !important;
+      }
+    }
+  }
+}
+
+.fixed-sidebar {
+  padding: 0;
+
+  .menu-items {
+    height: 25px;
+    line-height: 25px;
+    padding: 10px 5px;
+    cursor: pointer;
+    box-shadow: 0 0 0 0 #ccc9c9;
+    text-align: center;
+    color: #afabab;
+
+    i {
+      font-size: 20px;
+    }
+
+    .logout {
+      font-weight: 300;
+      font-size: 15px;
+      color: #9e9e9e;
+      transition: ease 0.5;
+
+      &:hover {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+/* 主题背景图片 */
+.body-bag {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  background-color: #121212;
+  transition: ease-in 0.5s;
+
+  &.bag001 {
+    background: url(~@/assets/image/background/001.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  &.bag002 {
+    background: url(~@/assets/image/background/002.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  &.bag003 {
+    background: url(~@/assets/image/background/003.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  &.bag004 {
+    background: url(~@/assets/image/background/005.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+@keyframes notifymove {
+  0% {
+    background: #ff1e1e;
+  }
+
+  25% {
+    background: #2e3238;
+  }
+
+  50% {
+    background: #ff1e1e;
+  }
+
+  75% {
+    background: #2e3238;
+  }
+
+  100% {
+    background: #ff1e1e;
+  }
+}
+
+@-webkit-keyframes notifymove {
+  0% {
+    background: #ff1e1e;
+  }
+
+  25% {
+    background: #2e3238;
+  }
+
+  50% {
+    background: #ff1e1e;
+  }
+
+  75% {
+    background: #2e3238;
+  }
+
+  100% {
+    background: #ff1e1e;
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .main-layout {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+  }
+}
+
+// iphone
+@media screen and (max-width: 767px) {
+  .side-edge {
+    display: none !important;
+  }
+}
+
+.user-box {
+  margin: 20px auto 10px auto;
+  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;
+  }
+}
+</style>
diff --git a/im/src/views/message/index.vue b/im/src/views/message/index.vue
new file mode 100644
index 00000000..f56f8eba
--- /dev/null
+++ b/im/src/views/message/index.vue
@@ -0,0 +1,993 @@
+<template>
+  <div class="wrapper">
+    <MainLayout :idx="0" ref="mainLayout">
+      <el-container slot="container" class="full-height">
+        <!-- 左侧侧边栏 -->
+        <el-aside width="320px" class="aside-box">
+          <el-container class="full-height" direction="vertical">
+            <!-- 搜索栏 -->
+            <el-header height="60px" class="header">
+              <div class="user-login" v-popover:usercard>
+                <div class="user-box">
+                  <face :text="face" class="user-face"></face>
+                </div>
+              </div>
+              <p class="user-status">
+                <span v-if="name">{{ name }}</span>
+                <span v-else>用户名称</span>
+              </p>
+            </el-header>
+            <el-header height="60px" class="header">
+              <div class="from-search">
+                <el-input v-model="input" prefix-icon="el-icon-search" placeholder="搜索好友" size="small" />
+              </div>
+            </el-header>
+            <!-- <el-header height="118px" class="logo-header">
+
+          </el-header> -->
+            <!-- 置顶栏 -->
+            <el-header v-show="loadStatus == 1 && topItems.length > 0" class="subheader"
+              :class="{ shadow: subHeaderShadow }" :height="subHeaderPx">
+              <div v-for="item in topItems" :key="item.index_name" class="top-item" @click="clickTab(item.index_name)"
+                @contextmenu.prevent="topItemsMenu(item, $event)">
+                <el-tooltip effect="dark" placement="top-start" :content="item.name ? item.name : item.name">
+                  <div class="avatar">
+                    <span v-show="!item.face">
+                      {{ (item.name ? item.name : item.name).substr(0, 1) }}
+                    </span>
+                    <img v-show="item.face" :src="item.face" :onerror="$store.state.defaultAvatar" v-if="item.face" />
+                    <face-null :text="item.name" v-else></face-null>
+                  </div>
+                </el-tooltip>
+
+                <div class="name" :class="{ active: index_name === item.id }">
+                  {{ item.name ? item.name : item.name }}
+                </div>
+              </div>
+            </el-header>
+
+            <!-- 对话列表栏 -->
+            <el-scrollbar tag="section" ref="menusScrollbar" class="full-height" :native="false">
+              <el-main class="main">
+                <p v-show="loadStatus === 0" class="empty-data">
+                  <i class="el-icon-loading" /> 数据加载中...
+                </p>
+
+                <p v-show="loadStatus === 1 && talkNum === 0" class="empty-data">
+                  暂无聊天消息
+                </p>
+
+                <p v-show="loadStatus === 1 && talkNum > 0" class="main-menu">
+                  <span class="title">对话记录({{ talkNum }})</span>
+
+                  <!-- <el-tag size="mini" type="danger" v-if="myUnreadNum"
+                    >未读：{{ myUnreadNum }}</el-tag
+                  > -->
+                </p>
+                <!-- 对话列表 -->
+                <template v-if="loadStatus === 1">
+                  <div v-for="(item, index) in userTalkItem" :key="item.id" class="talk-item pointer"
+                    :class="{ active: activeIndex == index }" @click="clickTab(item.userId, item, index)">
+                    <div class="avatar-box">
+                      <face :text="item.face" v-if="item.face"></face>
+                      <face-null :text="item.name" v-else></face-null>
+                      <div v-show="item.is_top == 0" class="top-mask" @click.stop="topChatItem(item)">
+                        <i class="el-icon-top" />
+                      </div>
+                    </div>
+                    <div class="card-box">
+                      <div class="title">
+                        <div class="card-name">
+                          <p class="nickname">
+                            {{
+    item.remark_name ? item.remark_name : item.name
+}}
+                          </p>
+                          <div v-show="item.unread" class="larkc-tag">
+                            {{ item.unread }}条未读
+                          </div>
+                          <div v-show="item.is_top" class="larkc-tag top">
+                            TOP
+                          </div>
+
+                          <div v-show="item.is_robot" class="larkc-tag top">
+                            BOT
+                          </div>
+
+                          <div v-show="item.talk_type == 2" class="larkc-tag group">
+                            群组
+                          </div>
+                          <div v-show="item.is_disturb" class="larkc-tag disturb">
+                            <i class="iconfont icon-xiaoximiandarao" />
+                          </div>
+                        </div>
+                        <div class="card-time">
+                          {{ beautifyTime(item.lastTalkTime) }}
+                        </div>
+                      </div>
+                      <div class="talk-message">
+                        <span v-if="item.lastMessageType === 'MESSAGE'">{{ item.lastTalkMessage }}</span>
+                        <span v-if="item.lastMessageType === 'GOODS'">[商品链接]</span>
+                        <span v-if="item.lastMessageType === 'ORDER'">[订单链接]</span>
+                      </div>
+                      <div class="content">
+                        <template v-if="
+  index_name != item.index_name && item.draft_text
+">
+                          <span class="draft-color">[草稿]</span>
+                          <span>{{ item.draft_text }}</span>
+                        </template>
+                        <template v-else>
+                          <template v-if="item.is_robot == 0">
+                            <span v-if="item.talk_type == 1" :class="{ 'online-color': item.is_online == 1 }">
+                              [{{ item.is_online == 1 ? "在线" : "离线" }}]
+                            </span>
+                            <span v-else>[群消息]</span>
+                          </template>
+
+                          <span>{{ item.msg_text }}</span>
+                        </template>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </el-main>
+            </el-scrollbar>
+          </el-container>
+        </el-aside>
+
+        <!-- 聊天面板容器 -->
+        <el-main class="main-box ov-hidden full-height no-padding flex">
+          <WelcomeModule class="flex-8" v-if="index_name == null" />
+          <TalkPanel v-else class="full-height flex-8" :params="params" :goodsParams="goodsParams"
+            :is-online="isFriendOnline" @change-talk="changeTalk" @close-talk="closeTalk" />
+          <!-- <OtherLink :toUser="toUser" :goodsParams="goodsParams" :id="id" class="flex-4"/> -->
+        </el-main>
+      </el-container>
+    </MainLayout>
+
+    <!-- 用户查询组件 -->
+    <UserSearch ref="searchUsers" />
+  </div>
+</template>
+<script>
+import { mapGetters, mapState } from "vuex";
+import MainLayout from "@/views/layout/MainLayout";
+import WelcomeModule from "@/components/layout/WelcomeModule";
+import TalkPanel from "@/components/chat/panel/TalkPanel";
+import UserSearch from "@/components/user/UserSearch";
+import OtherLink from "@/components/chat/panel/OtherLink.vue";
+import {
+  ServeGetTalkList,
+  ServeDeleteTalkList,
+  ServeTopTalkList,
+  ServeSetNotDisturb,
+  ServeCreateTalkList,
+} from "@/api/chat";
+import { ServeDeleteContact, ServeEditContactRemark } from "@/api/contacts";
+import { beautifyTime } from "@/utils/functions";
+import { formatTalkItem, findTalkIndex, getCacheIndexName } from "@/utils/talk";
+import { setToken } from "@/utils/auth";
+
+const title = document.title;
+
+export default {
+  name: "MessagePage",
+  components: {
+    MainLayout,
+    TalkPanel,
+    UserSearch,
+    OtherLink,
+    WelcomeModule,
+  },
+  data () {
+    return {
+      activeIndex: 9999999, //默认样式索引
+      subHeaderShadow: false,
+      launchGroupShow: false,
+
+      // 对话面板的传递参数
+      params: {
+        talk_type: 0,
+        receiver_id: 0,
+        nickname: "",
+        clickFlag: true,
+      },
+
+      goodsParams: {
+        goodsId: '',
+        skuId: '',
+      },
+
+      // 查询关键词
+      input: "",
+
+      // header 工具菜单
+      subMenu: false,
+
+      // 对话消息列表加载状态[0:加载中;1:加载完成;2:加载失败;]
+      loadStatus: 0,
+
+      // 消息未读数计时器
+      interval: null,
+      userTalkItem: [],
+    };
+  },
+  computed: {
+    ...mapGetters(["topItems", "talkItems", "unreadNum", "talkNum"]),
+    ...mapState({
+      face: (state) => state.user.face,
+      name: (state) => state.user.name,
+      talks: (state) => state.talks.items,
+      id: (state) => state.user.id,
+      index_name: (state) => state.dialogue.index_name,
+      monitorFriendsStatus: (state) => state.notify.friendStatus,
+      myUnreadNum: (state) => state.notify.unreadNum,
+      toUser: (state) => state.user.toUser,
+    }),
+    // 计算置顶栏目的高度
+    subHeaderPx () {
+      const n = 7; // 一排能显示的用户数
+      const num = this.topItems.length;
+      let len = 60;
+
+      if (num > n) {
+        len = (Math.floor(num / n) + (num % n > 0 ? 1 : 0)) * len;
+      }
+
+      return `${len}px`;
+    },
+
+    // 当前对话好友在线状态
+    isFriendOnline () {
+      let index = findTalkIndex(this.index_name);
+      return index >= 0 && this.talks[index].is_online == 1;
+    },
+  },
+  watch: {
+    talkItems (val) {
+      val ? this.$set(this, "userTalkItem", val) : "";
+    },
+    // 搜索用户的时候 根据当前用户表进行模糊搜索
+    input (val, oldVal) {
+      console.log(val, oldVal);
+      if (val) {
+        let str = ["", ...val, ""].join(".*");
+        let reg = new RegExp(str);
+        this.userTalkItem = this.talkItems.filter((item) =>
+          reg.test(item.name)
+        );
+      } else {
+        this.userTalkItem = this.talkItems;
+      }
+    },
+    unreadNum (value) {
+      clearInterval(this.interval);
+      console.log("%c 更新未读消息", "color:#32ccbc");
+      this.$store.commit("SET_UNREAD_NUM", value);
+
+      if (value > 0) {
+        this.interval = setInterval(() => {
+          document.title =
+            document.title == title ? `【新消息】${title}` : title;
+        }, 2000);
+      } else {
+        document.title = title;
+      }
+    },
+
+    // 监听好友在线状态
+    monitorFriendsStatus (value) {
+      this.$store.commit("UPDATE_TALK_ITEM", {
+        index_name: `1_${value.friend_id}`,
+        is_online: value.status,
+      });
+    },
+  },
+
+  beforeRouteUpdate (to, from, next) {
+    let index_name = getCacheIndexName();
+    if (index_name) this.clickTab(index_name);
+    next();
+  },
+  beforeCreate () {
+    setToken(this.$route.query.token);
+  },
+  async created () {
+    await this.initialize();
+    await this.loadUserSetting();
+    /**
+     * 如果说有id 说明是用户点击 “联系客服” 进入的该页面
+     * 所以创建会话 并请求用户列表
+     * 如果没有id说明当前商家登录 直接请求用户列表
+     */
+
+  },
+
+  mounted () {
+    this.scrollEvent();
+  },
+  destroyed () {
+    document.title = title;
+    clearInterval(this.interval);
+    this.clearTalk();
+  },
+  methods: {
+    // 美化时间格式
+    beautifyTime,
+
+    //创建会话
+    async createTalk (id) {
+      await ServeCreateTalkList(id);
+
+      await this.loadChatList();
+    },
+    // header 功能栏隐藏事件
+    closeSubMenu () {
+      this.subMenu = false;
+    },
+
+    // 清除当前对话
+    clearTalk () {
+      this.params = {
+        talk_type: 0,
+        receiver_id: 0,
+        nickname: "",
+        clickFlag: true
+      };
+
+      this.$store.commit("UPDATE_DIALOGUE_MESSAGE", {
+        talk_type: 0,
+        receiver_id: 0,
+        is_robot: 0,
+      });
+    },
+
+    // 工具栏事件
+    triggerSubMenu (type) {
+      this.closeSubMenu();
+
+      if (type == 1) {
+        this.launchGroupShow = true;
+      } else {
+        this.$refs.searchUsers.open();
+      }
+    },
+
+    // 监听自定义滚动条事件
+    scrollEvent () {
+      let scrollbarEl = this.$refs.menusScrollbar.wrap;
+      scrollbarEl.onscroll = () => {
+        this.subHeaderShadow = scrollbarEl.scrollTop > 0;
+      };
+    },
+    // 获取用户对话列表
+    loadChatList () {
+      this.loadStatus = this.talkNum == 0 ? 0 : 1;
+
+      ServeGetTalkList()
+        .then(({ code, result }) => {
+          if (code !== 200) return false;
+          this.$store.commit("SET_UNREAD_NUM", 0);
+          this.$store.commit("SET_TALK_ITEMS", {
+            items: result.map((item) => formatTalkItem(item)),
+          });
+
+          // 判断
+          if (this.$route.query.id) {
+            let takeData, takeIndex;
+            console.log("用户result", result)
+            this.talkItems.forEach((take, index) => {
+              if (take.userId == this.$route.query.id) {
+                takeData = take;
+                takeIndex = index;
+              }
+            });
+            this.$nextTick(() =>
+              this.clickTab(this.$route.query.id, takeData, takeIndex)
+            );
+          }
+        })
+        .finally(() => {
+          this.loadStatus = 1;
+        });
+    },
+
+    // 切换聊天栏目
+    clickTab (id, val, index) {
+      if (!id) return;
+      this.activeIndex = index;
+      let item =
+        this.talks.find((item) => {
+          return item.userId == id;
+        }) || {};
+      // 点击当前栏目存储当前用户的信息
+      this.$store.state.user.toUser = val;
+
+      let nickname = item.name;
+
+      this.params = {
+        talk_type: 1,
+        receiver_id: item.userId,
+        nickname,
+        is_robot: item.is_robot,
+        talkId: item.id, //聊天对话的id
+        clickFlag: true
+      };
+
+      // 更新信息
+      this.$store.commit("UPDATE_DIALOGUE_MESSAGE", {
+        talk_type: 1,
+        receiver_id: item.userId,
+        is_robot: item.is_robot,
+      });
+
+      this.$nextTick(() => {
+        if (id == this.index_name.split("_")[1]) {
+          console.log("已读");
+          this.$store.commit("UPDATE_TALK_ITEM", {
+            userId: id,
+            index_name: "MESSAGE_" + this.index_name.split("_")[1],
+            unread: 0,
+          });
+        }
+      });
+    },
+    // 修改当前对话
+    changeTalk (index_name) {
+      console.log("修改当前对话", index_name);
+      sessionStorage.setItem("send_message_index_name", index_name);
+      this.loadChatList();
+    },
+    // 关闭当前对话及刷新对话列表
+    closeTalk () {
+      this.$store.commit("UPDATE_DIALOGUE_MESSAGE", {
+        talk_type: 0,
+        receiver_id: 0,
+        is_robot: 0,
+      });
+
+      this.loadChatList();
+    },
+    // 对话列表的右键自定义菜单
+    talkItemsMenu (item, event) {
+      let items = {
+        items: [
+          {
+            label: "好友信息",
+            icon: "el-icon-user",
+            disabled: item.talk_type == 2 || item.is_robot == 1,
+            onClick: () => {
+              this.$user(item.receiver_id);
+            },
+          },
+          {
+            label: "修改备注",
+            icon: "el-icon-edit-outline",
+            disabled: item.talk_type == 2 || item.is_robot == 1,
+            onClick: () => {
+              this.editFriendRemarks(item);
+            },
+          },
+          {
+            label: item.is_top == 0 ? "会话置顶" : "取消置顶",
+            icon: "el-icon-top",
+            onClick: () => {
+              this.topChatItem(item);
+            },
+          },
+          {
+            label: item.is_disturb == 0 ? "消息免打扰" : "开启消息提示",
+            icon:
+              item.is_disturb == 0
+                ? "el-icon-close-notification"
+                : "el-icon-bell",
+            disabled: item.is_robot == 1,
+            onClick: () => {
+              this.setNotDisturb(item);
+            },
+          },
+          {
+            label: "移除会话",
+            icon: "el-icon-remove-outline",
+            divided: true,
+            onClick: () => {
+              this.delChatItem(item);
+            },
+          },
+          {
+            label: item.talk_type == 1 ? "删除好友" : "退出群聊",
+            icon: "el-icon-delete",
+            disabled: item.is_robot == 1,
+            onClick: () => {
+              let title = item.talk_type == 1 ? "删除好友" : "退出群聊";
+              this.$confirm(
+                `此操作将 <span style="color:red;font-size:16px;">${title}</span>, 是否继续?`,
+                "提示",
+                {
+                  confirmButtonText: "确定",
+                  cancelButtonText: "取消",
+                  type: "warning",
+                  center: true,
+                  dangerouslyUseHTMLString: true,
+                }
+              ).then(() => {
+                if (item.talk_type == 1) {
+                  this.removeFriend(item);
+                }
+              });
+            },
+          },
+        ],
+        event: event,
+        zIndex: 3,
+      };
+
+      this.$contextmenu(items);
+      return false;
+    },
+    // 置顶栏右键菜单栏
+    topItemsMenu (item, event) {
+      this.$contextmenu({
+        items: [
+          {
+            label: item.is_top == 0 ? "会话置顶" : "取消置顶",
+            icon: "el-icon-top",
+            onClick: () => {
+              this.topChatItem(item);
+            },
+          },
+        ],
+        event: event,
+        zIndex: 3,
+      });
+
+      return false;
+    },
+    // 会话列表置顶
+    topChatItem (item) {
+      ServeTopTalkList({
+        list_id: item.id,
+        type: item.is_top == 0 ? 1 : 2,
+      }).then(({ code }) => {
+        if (code == 200) {
+          this.$store.commit("UPDATE_TALK_ITEM", {
+            index_name: item.index_name,
+            is_top: item.is_top == 0 ? 1 : 0,
+          });
+        }
+      });
+    },
+    // 设置消息免打扰
+    setNotDisturb (item) {
+      ServeSetNotDisturb({
+        talk_type: item.talk_type,
+        receiver_id: item.receiver_id,
+        is_disturb: item.is_disturb == 0 ? 1 : 0,
+      }).then(({ code }) => {
+        if (code == 200) {
+          this.$store.commit("UPDATE_TALK_ITEM", {
+            index_name: item.index_name,
+            is_disturb: item.is_disturb == 0 ? 1 : 0,
+          });
+        }
+      });
+    },
+    // 移除会话列表
+    delChatItem (item) {
+      ServeDeleteTalkList({
+        list_id: item.id,
+      }).then(({ code }) => {
+        if (code == 200) {
+          this.clearTalk();
+          this.$store.commit("REMOVE_TALK_ITEM", item.index_name);
+        }
+      });
+    },
+    // 解除好友关系
+    removeFriend (item) {
+      ServeDeleteContact({
+        friend_id: item.receiver_id,
+      }).then(({ code }) => {
+        if (code == 200) {
+          if (this.index_name == item.index_name) {
+            this.clearTalk();
+          }
+
+          this.$store.commit("REMOVE_TALK_ITEM", item.index_name);
+        }
+      });
+    },
+    // 修改好友备注信息
+    editFriendRemarks (item) {
+      let title = `您正在设置【${item.name}】好友的备注信息`;
+
+      if (item.remark_name) {
+        title += `，当前备注为【${item.remark_name}】`;
+      }
+
+      this.$prompt(title, "修改备注", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        customClass: "border-radius0",
+        inputPlaceholder: "请设置好友备注信息",
+        inputValue: item.remark_name ? item.remark_name : item.name,
+        inputValidator (val) {
+          return val == null || val == "" ? "好友备注不能为空" : true;
+        },
+      })
+        .then(({ value }) => {
+          if (value == item.remark_name) {
+            return false;
+          }
+
+          ServeEditContactRemark({
+            friend_id: item.receiver_id,
+            remarks: value,
+          }).then((res) => {
+            if (res.code == 200) {
+              this.$store.commit("UPDATE_TALK_ITEM", {
+                index_name: item.index_name,
+                remark_name: value,
+              });
+
+              this.$notify({
+                title: "成功",
+                message: "好友备注修改成功...",
+                type: "success",
+              });
+            } else {
+              this.$notify({
+                title: "消息",
+                message: "好友备注修改失败，请稍后再试...",
+                type: "warning",
+              });
+            }
+          });
+        })
+        .catch(() => { });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/ .el-scrollbar__wrap {
+  overflow-x: hidden;
+}
+
+.aside-box {
+  position: relative;
+  border-right: 1px solid rgb(245, 245, 245);
+  overflow: hidden;
+  padding: 0;
+  transition: width 0.3s;
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 15px;
+
+    .from-search {
+      flex: 1 1;
+      flex-shrink: 0;
+      height: 40px;
+
+      /deep/ .el-input .el-input__inner {
+        border-radius: 20px;
+      }
+    }
+
+    .tools {
+      flex-basis: 32px;
+      flex-shrink: 0;
+      height: 32px;
+      margin-bottom: 8px;
+      margin-left: 15px;
+      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;
+
+        .menu-item {
+          height: 40px;
+          line-height: 40px;
+          color: white;
+          font-size: 14px;
+
+          &:hover {
+            background-color: rgba(70, 72, 73, 0.9);
+          }
+        }
+      }
+    }
+  }
+
+  .subheader {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 3px 8px 10px;
+    overflow: hidden;
+    flex-shrink: 0;
+
+    .top-item {
+      flex-basis: 41px;
+      flex-shrink: 0;
+      height: 50px;
+      margin: 0 1px 6px 1px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+
+      .avatar {
+        flex-basis: 32px;
+        width: 32px;
+        height: 32px;
+        background-color: #508afe;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 10px;
+        color: white;
+        flex-shrink: 0;
+        overflow: hidden;
+        user-select: none;
+
+        img {
+          width: 100%;
+          height: 100%;
+          background-color: white;
+        }
+      }
+
+      .name {
+        font-size: 12px;
+        text-align: center;
+        color: #8f959e;
+        transform: scale(0.84);
+        text-align: center;
+        line-height: 20px;
+        word-break: break-all;
+        overflow: hidden;
+
+        &.active {
+          color: #508afe;
+        }
+      }
+    }
+
+    &.shadow {
+      box-shadow: 0 2px 6px 0 rgba(31, 35, 41, 0.05);
+    }
+  }
+}
+
+.aside-box .main {
+  overflow: hidden;
+  padding: 0;
+
+  .empty-data {
+    text-align: center;
+    padding-top: 40px;
+    color: #ccc;
+  }
+
+  .main-menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 3px 10px 3px 10px;
+    align-items: center;
+    user-select: none;
+
+    .title {
+      font-size: 12px;
+      font-weight: 600;
+      color: #1f2329;
+    }
+
+    .icon {
+      cursor: pointer;
+    }
+  }
+
+  .talk-item {
+    padding: 8px 10px;
+    height: 50px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-left: 3px solid transparent;
+    transition: 0.2s ease-in;
+
+    .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;
+      }
+    }
+
+    .card-box {
+      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;
+
+        .card-name {
+          color: #1f2329;
+          font-size: 14px;
+          line-height: 20px;
+          flex: 1 1;
+          display: -webkit-flex;
+          display: -ms-flexbox;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+
+          .nickname {
+            font-weight: 400;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-right: 3px;
+          }
+
+          .top {
+            color: #dc9b04 !important;
+            background-color: #faf1d1 !important;
+          }
+
+          .group {
+            color: #3370ff !important;
+            background-color: #e1eaff !important;
+            font-size: 13px;
+          }
+
+          .disturb {
+            color: #98999c !important;
+            background-color: #ecedf1 !important;
+
+            i {
+              font-size: 12px;
+            }
+          }
+        }
+      }
+
+      .card-time {
+        color: #8f959e;
+        font-size: 12px;
+        margin-left: 10px;
+        user-select: none;
+      }
+
+      .content {
+        font-size: 13px;
+        line-height: 18px;
+        color: #8f959e;
+        margin-top: 3px;
+        font-weight: 300;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        span:first-child {
+          margin-right: 5px;
+        }
+
+        .online-color {
+          color: #4aa71c;
+          font-weight: 300;
+        }
+
+        .draft-color {
+          color: red;
+          font-weight: 300;
+        }
+      }
+    }
+
+    &:hover {
+      background-color: #eff0f1;
+    }
+
+    &.active {
+      border-color: #3370ff;
+      background-color: #eff0f1;
+    }
+  }
+}
+
+// iphone
+@media screen and (max-width: 767px) {
+
+  .side-edge,
+  .from-search,
+  .card-box {
+    display: none !important;
+  }
+
+  .aside-box {
+    width: 66px !important;
+
+    .subheader {
+      display: none;
+    }
+
+    .card-box .larkc-tag {
+      display: none;
+    }
+  }
+}
+
+.talk-message {
+  font-size: 12px;
+  color: #8f959e;
+}
+
+.user-face {
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/im/src/views/other/404.vue b/im/src/views/other/404.vue
new file mode 100644
index 00000000..01daddfd
--- /dev/null
+++ b/im/src/views/other/404.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="not-found">
+      <div class="not-found-left">
+        <SvgNotFount class="svg-notfount" />
+      </div>
+      <div class="not-found-right">
+        <h1>404</h1>
+        <p>抱歉，你访问的页面不存在或仍在开发中...</p>
+        <div>
+          <el-button type="primary" size="small" @click="toHome">
+            返回首页 ({{ second }}S)
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { SvgNotFount } from '@/core/icons'
+
+export default {
+  name: 'NotFoundPage',
+  components: {
+    SvgNotFount,
+  },
+  data() {
+    return {
+      second: 10,
+      setInterval: null,
+    }
+  },
+  created() {
+    this.setInterval = setInterval(() => {
+      this.second--
+      if (this.second == 0) {
+        clearInterval(this.setInterval)
+        this.toHome()
+      }
+    }, 1000)
+  },
+  destroyed() {
+    clearInterval(this.setInterval)
+  },
+  methods: {
+    toHome() {
+      this.$router.push({
+        path: '/',
+      })
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.not-found {
+  position: fixed;
+  width: 600px;
+  height: 300px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  .not-found-left {
+    width: 300px;
+    height: 300px;
+    float: left;
+
+    .svg-notfount {
+      width: 300px;
+      height: 300px;
+    }
+  }
+
+  .not-found-right {
+    width: 300px;
+    height: 300px;
+    float: left;
+
+    h1 {
+      margin-bottom: 24px;
+      color: #434e59;
+      font-weight: 600;
+      font-size: 72px;
+      line-height: 72px;
+      padding-left: 30px;
+      margin-top: 50px;
+    }
+
+    p {
+      padding-left: 30px;
+      margin-bottom: 16px;
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 20px;
+      line-height: 28px;
+    }
+
+    div {
+      padding-left: 30px;
+      margin-top: 20px;
+    }
+  }
+}
+</style>
diff --git a/im/vue.config.js b/im/vue.config.js
new file mode 100644
index 00000000..e30c983c
--- /dev/null
+++ b/im/vue.config.js
@@ -0,0 +1,125 @@
+const path = require('path')
+
+// compression-webpack-plugin，添加压缩文件类型
+const CompressionWebpackPlugin = require('compression-webpack-plugin')
+const productionGzipExtensions = ['js', 'css']
+const isProd = process.env.NODE_ENV === 'production'
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+const assetsCDN = {
+  externals: {
+    vue: 'Vue',
+    'vue-router': 'VueRouter',
+    vuex: 'Vuex',
+    axios: 'axios',
+  },
+  css: [],
+  js: [
+    'https://unpkg.com/vue@2.6.11/dist/vue.min.js',
+    'https://unpkg.com/vue-router@3.4.9/dist/vue-router.min.js',
+    'https://unpkg.com/vuex@3.5.1/dist/vuex.min.js',
+    'https://unpkg.com/axios@0.21.0/dist/axios.min.js',
+  ],
+}
+
+// vue.config.js
+const vueConfig = {
+  // 公共路径(必须有的)
+  publicPath: '/',
+  // 输出文件目录
+  outputDir: 'dist',
+  // 静态资源存放的文件夹(相对于ouputDir)
+  assetsDir: 'static',
+  runtimeCompiler: false,
+  devServer: {
+    port: 8000,
+    // proxy: {
+    //   //配置跨域
+    //   '/api': {
+    //     target: 'http://api.xxxx.com', // 后台接口域名
+    //     ws: false, //如果要代理 websockets，配置这个参数
+    //     secure: false, // 如果是https接口，需要配置这个参数
+    //     changeOrigin: true, //是否跨域
+    //     pathRewrite: {
+    //       '^/api': '/api',
+    //     },
+    //   },
+    // },
+  },
+  configureWebpack: {
+    // webpack plugins
+    plugins: [
+      // 配置大文件压缩相关参数
+      new CompressionWebpackPlugin({
+        filename: '[path][base].gz',
+        algorithm: 'gzip',
+        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+        threshold: 10240,
+        minRatio: 0.8,
+      }),
+    ],
+
+    // if prod, add externals
+    externals: isProd ? assetsCDN.externals : {},
+  },
+
+  chainWebpack: config => {
+    config.resolve.alias.set('@', resolve('src'))
+
+    const svgRule = config.module.rule('svg')
+    svgRule.uses.clear()
+    svgRule
+      .oneOf('inline')
+      .resourceQuery(/inline/)
+      .use('vue-svg-icon-loader')
+      .loader('vue-svg-icon-loader')
+      .end()
+      .end()
+      .oneOf('external')
+      .use('file-loader')
+      .loader('file-loader')
+      .options({
+        name: 'assets/[name].[hash:8].[ext]',
+      })
+
+    // if prod is on
+    // assets require on cdn
+    if (isProd) {
+      config.plugin('html').tap(args => {
+        args[0].cdn = assetsCDN
+        return args
+      })
+    }
+  },
+  pluginOptions: {
+    'style-resources-loader': {
+      preProcessor: 'less',
+      patterns: [
+        //全局加载 less 变量
+        path.resolve(__dirname, './src/assets/css/variable.less'),
+      ],
+    },
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        lessOptions: {
+          modifyVars: {},
+          javascriptEnabled: true,
+        },
+      },
+    },
+  },
+
+  // 是否为生产环境构建生成 source map？
+  productionSourceMap: false,
+  // lintOnSave: undefined,
+  lintOnSave: false,
+  // babel-loader no-ignore node_modules/*
+  transpileDependencies: [],
+}
+
+module.exports = vueConfig
diff --git a/manager/public/config.js b/manager/public/config.js
index ada826fc..7ef1cf91 100644
--- a/manager/public/config.js
+++ b/manager/public/config.js
@@ -3,10 +3,10 @@ var BASE = {
      * @description api请求基础路径
      */
     API_DEV: {
-      common: "https://common-api.pickmall.cn",
-      buyer: "https://buyer-api.pickmall.cn",
-      seller: "https://store-api.pickmall.cn",
-      manager: "https://admin-api.pickmall.cn"
+      common: "http://192.168.0.113:8890",
+      buyer: "http://192.168.0.113:8888",
+      seller: "http://192.168.0.113:8889",
+      manager: "http://192.168.0.113:8887"
     },
     API_PROD: {
       common: "https://common-api.pickmall.cn",
diff --git a/manager/src/App.vue b/manager/src/App.vue
index 2be269f4..6b1eaa1c 100644
--- a/manager/src/App.vue
+++ b/manager/src/App.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script>
-import {getCategoryTree} from '@/api/goods.js'
+import { getCategoryTree } from '@/api/goods.js'
 export default {
-  updated() {
+  updated () {
     if (!localStorage.getItem('category') && this.$route.path !== '/login') {
       getCategoryTree(0).then(res => {
         if (res.success) {
@@ -49,7 +49,8 @@ body {
 .ivu-tag {
   cursor: pointer;
 }
-.tox-notifications-container{
+
+.tox-notifications-container {
   display: none !important;
 }
 </style>
diff --git a/manager/src/views/order/order/orderDetail.vue b/manager/src/views/order/order/orderDetail.vue
index c8cafcbd..2df88231 100644
--- a/manager/src/views/order/order/orderDetail.vue
+++ b/manager/src/views/order/order/orderDetail.vue
@@ -274,6 +274,42 @@
                 {{ orderInfo.order.priceDetailDTO.couponPrice | unitPrice("￥") }}
               </span>
             </li>
+            <li v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">      
+            <div class="label">
+              <Poptip trigger="hover" placement="left" width="200">
+                <Icon v-if="typeList.length > 0"  type="ios-alert-outline" size="17" @click="getOrderPrice" color="#cc0000"/>
+              <template #content>
+                <div class="api" style="text-align:left;">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>优惠详情：</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr  v-for="(item,index) in typeList" :key="index">
+                            <td>{{item.promotionName}}：</td>
+                            <td>¥{{ item.discountPrice | unitPrice }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+              </template>
+            </Poptip>
+            <span>优惠详情：</span>
+            </div>
+            </li>
+             <!-- <li v-if="showPrices">
+                <span class="label" style="color: #cc0000;font-size: 14px;" v-if="typeList.length > 0" >优惠详情：</span>
+              </li> -->
+              <!-- <li v-if="showPrices"  v-for="(item,index) in typeList" :key="index"> 
+                <span class="label" v-if="index == 1 && typeList.length > 1" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
+                <span class="txt" style="border-bottom: 1px dashed;font-size:10px !important;" v-if="index == 1 &&  typeList.length > 1">¥{{ item.discountPrice | unitPrice }}</span>
+                <span class="label" v-if="index == 0 &&  typeList.length > 1" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
+                <span class="txt" style="border-top: 1px dashed;font-size:10px !important;" v-if="index == 0 && typeList.length > 1">¥{{ item.discountPrice | unitPrice }}</span>
+                <span class="label" v-if="typeList.length == 1 && index == 0" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
+                <span class="txt"  v-if="typeList.length == 1 && index == 0" style="border-top: 1px dashed;border-bottom: 1px dashed;font-size:10px !important;">¥{{ item.discountPrice | unitPrice }}</span>
+              </li> -->
             <li>
               <span class="label">运费：</span>
               <span class="txt">{{
@@ -515,6 +551,8 @@ export default {
   },
   data() {
     return {
+      typeList:[],
+      showPrices:false,
       printHiddenFlag:false,//隐藏信息
       printInfoObj:{
         id: "printInfo",//要打印的id名 无#号
@@ -699,6 +737,9 @@ export default {
     },
   },
   methods: {
+    gotoHomes(){
+      return false
+    },  
     //修改地址
     regionClick() {
       this.showRegion = true;
@@ -722,6 +763,28 @@ export default {
         },
       });
     },
+    getOrderPrice(){
+      if(this.showPrices){
+        this.showPrices = false
+      }else if(!this.showPrices){
+        this.showPrices = true
+      }
+    },
+    getContentPrice(){
+          for (let i = 0; i < this.typeList.length; i++) {
+          for (let j = i + 1; j < this.typeList.length; j++) {
+            if (this.typeList[i].promotionId === this.typeList[j].promotionId) {
+              this.typeList[i].discountPrice = this.typeList[i].discountPrice + this.typeList[j].discountPrice
+              this.typeList.splice(j, 1)
+            }
+          }
+        }
+        console.log(this.typeList)
+        if(this.typeList.length >= 3){
+          console.log(123123)
+          this.getContentPrice()
+        }
+    },  
     // 获取订单详情
     getDataList() {
       this.loading = true;
@@ -731,6 +794,9 @@ export default {
           this.orderInfo = res.result;
           this.allowOperation = res.result.allowOperationVO;
           this.data = res.result.orderItems;
+          this.typeList = JSON.parse(JSON.stringify(res.result.order.priceDetailDTO.discountPriceDetail));
+          this.getContentPrice()
+          this.getOrderPrice()
         }
       });
     },
@@ -899,7 +965,7 @@ export default {
 
   .goods-total {
     padding: 20px;
-    height: 150px;
+    height: 220px;
     width: 100%;
 
     ul {
@@ -916,11 +982,13 @@ export default {
     .label {
       float: left;
       width: 500px;
+      font-size: 14px;
       text-align: right;
     }
 
     .txt {
       float: left;
+      font-size: 14px;
       width: 130px;
       text-align: right;
       font-family: verdana;
diff --git a/manager/src/views/promotions/coupon-activity/coupon-info.vue b/manager/src/views/promotions/coupon-activity/coupon-info.vue
index 3a88246d..1eb755c6 100644
--- a/manager/src/views/promotions/coupon-activity/coupon-info.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon-info.vue
@@ -12,11 +12,19 @@
               <span v-if="couponActivity.couponActivityType === 'REGISTERED'"
                 >新人发券</span
               >
+              <span v-else-if="couponActivity.couponActivityType === 'AUTO_COUPON'">自动发券</span>
               <spin v-else>精确发券</spin>
             </FormItem>
+            <FormItem label="领取频率" v-if="couponActivity.couponFrequencyEnum != '' && couponActivity.couponFrequencyEnum != null && couponActivity.couponFrequencyEnum != undefined">
+              <span v-if="couponActivity.couponFrequencyEnum === 'DAY'"
+                >每日</span
+              >
+              <span v-else-if="couponActivity.couponFrequencyEnum === 'WEEK'">每周一次</span>
+              <span v-else>每月一次</span>
+            </FormItem>
             <FormItem
               label="活动范围"
-              v-if="couponActivity.couponActivityType === 'SPECIFY'"
+              v-if="couponActivity.couponActivityType === 'SPECIFY' || couponActivity.couponActivityType === 'AUTO_COUPON'"
             >
               <span v-if="couponActivity.activityScope === 'ALL'">全部会员</span>
               <spin v-else>指定会员</spin>
diff --git a/manager/src/views/promotions/coupon-activity/coupon-publish.vue b/manager/src/views/promotions/coupon-activity/coupon-publish.vue
index c497c058..a123e3fb 100644
--- a/manager/src/views/promotions/coupon-activity/coupon-publish.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon-publish.vue
@@ -34,6 +34,22 @@
               >
                 <Radio label="REGISTERED">新人发券</Radio>
                 <Radio label="SPECIFY">精确发券</Radio>
+                <Radio label="INVITE_NEW">邀新赠券</Radio>
+                <Radio label="AUTO_COUPON">自动赠券</Radio>
+              </RadioGroup>
+            </FormItem>
+            <FormItem
+              label="领取频率"
+              v-if="form.couponActivityType === 'AUTO_COUPON'"
+            >
+            <RadioGroup
+                type="button"
+                button-style="solid"
+                v-model="form.couponFrequencyEnum"
+              >
+                <Radio label="DAY">每日一次</Radio>
+                <Radio label="WEEK">每周一次</Radio>
+                <Radio label="MONTH">每月一次</Radio>
               </RadioGroup>
             </FormItem>
             <FormItem
@@ -161,6 +177,7 @@ export default {
         endTime: "", //结束时间
         memberDTOS: [], //指定会员范围
         couponActivityItems: [], //优惠券列表
+        couponFrequencyEnum:"", //选择周期
       },
       submitLoading: false, // 添加或编辑提交状态
       selectCouponList: [], //选择的优惠券列表
@@ -323,7 +340,7 @@ export default {
       // 清空原有数据
       this.form.couponActivityItems = this.selectCouponList.map((item) => {
         return {
-          num: 0,
+          num: 1,
           couponId: item.id,
         };
       });
@@ -341,6 +358,33 @@ export default {
     },
     /** 保存平台优惠券 */
     handleSubmit() {
+      if(this.form.couponFrequencyEnum !== ''){
+        console.log(this.activityScope)
+        if(this.form.activityScope == 'ALL'){
+          this.form.startTime = this.$options.filters.unixToDate(this.rangeTime[0] / 1000);
+          this.form.endTime = this.$options.filters.unixToDate(this.rangeTime[1] / 1000);
+
+          this.$refs.form.validate((valid) => {
+            if (valid) {
+              const params = JSON.parse(JSON.stringify(this.form));
+              this.submitLoading = true;
+              // 添加 避免编辑后传入id等数据 记得删除
+              delete params.id;
+              saveActivityCoupon(params).then((res) => {
+                this.submitLoading = false;
+                if (res.success) {
+                  this.$Message.success("优惠券活动创建成功");
+                  this.closeCurrentPage();
+                }
+              });
+            }
+          });
+        }else {
+          this.$Message.info('自动发券只能全用户发送')
+          this.form.couponActivityType = 'SPECIFY'
+          this.form.activityScope = 'ALL'
+        }
+      }else{
       this.form.startTime = this.$options.filters.unixToDate(this.rangeTime[0] / 1000);
       this.form.endTime = this.$options.filters.unixToDate(this.rangeTime[1] / 1000);
 
@@ -359,6 +403,8 @@ export default {
           });
         }
       });
+      }
+    
     },
     // 关闭当前页面
     closeCurrentPage() {
diff --git a/manager/src/views/promotions/coupon-activity/coupon.vue b/manager/src/views/promotions/coupon-activity/coupon.vue
index f69f30b6..6e8b5dd5 100644
--- a/manager/src/views/promotions/coupon-activity/coupon.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon.vue
@@ -92,7 +92,9 @@ export default {
           render: (h, params) => {
             if (params.row.couponActivityType === "REGISTERED") {
               return h("div", ["注册赠券"]);
-            } else {
+            }else if(params.row.couponActivityType === 'AUTO_COUPON'){
+              return h("div", ["自动发券"]);
+            }else {
               return h("div", ["精确发券"]);
             }
           },
@@ -111,6 +113,25 @@ export default {
             return h("div", [text]);
           },
         },
+        {
+          title: "领取频率",
+          key: "couponFrequencyEnum",
+          minWidth: 120,
+          render: (h, params) => {
+            console.log(params)
+            let text = ''
+            if (params.row.couponFrequencyEnum === "DAY") {
+              text = "每日";
+            } else if(params.row.couponFrequencyEnum === "WEEK") {
+              text = "每周";
+            } else if(params.row.couponFrequencyEnum === 'MONTH'){
+              text = '每月'
+            } else {
+              text = '/'
+            }
+            return h("div", [text]);
+          },
+        },
         {
           title: "活动时间",
           minWidth: 150,
@@ -121,6 +142,8 @@ export default {
                   innerHTML: params.row.startTime + "<br/>" + params.row.endTime,
                 },
               });
+            }else{
+              return h("div", '/');
             }
           },
         },
diff --git a/manager/src/views/promotions/coupon/coupon-publish.vue b/manager/src/views/promotions/coupon/coupon-publish.vue
index 4753775e..87c076a4 100644
--- a/manager/src/views/promotions/coupon/coupon-publish.vue
+++ b/manager/src/views/promotions/coupon/coupon-publish.vue
@@ -125,7 +125,7 @@
             <FormItem label="有效期" prop="rangeTime">
               <div v-if="form.getType == 'ACTIVITY'">
                 <RadioGroup v-model="rangeTimeType">
-                  <Radio :disabled="disabled" :label="1">起止时间</Radio>
+                  <Radio :disabled="disabled" :label="1" v-if="form.getType !== 'ACTIVITY'">起止时间</Radio>
                   <Radio :disabled="disabled" :label="0">固定时间</Radio>
                 </RadioGroup>
               </div>
@@ -144,6 +144,7 @@
               <div class="effectiveDays" v-if="rangeTimeType == 0">
                 领取当天开始
                 <InputNumber
+                  :disabled="disabled"
                   v-model="form.effectiveDays"
                   :min="1"
                   style="width: 100px"
@@ -242,6 +243,11 @@ export default {
       handler(val) {
         if (val == "FREE") {
           this.rangeTimeType = 1;
+        }else{
+          this.rangeTimeType = 0;
+        }
+        if(this.rangeTimeType == 0){
+          delete this.formRule.rangeTime
         }
       },
       deep: true,
@@ -301,6 +307,7 @@ export default {
         promotionGoodsList: [],
         scopeIdGoods: [],
         rangeDayType: "",
+        effectiveDays:1,
       },
       id: this.$route.query.id, // 优惠券id
       submitLoading: false, // 添加或编辑提交状态
diff --git a/seller/public/config.js b/seller/public/config.js
index 69441029..8e0e70ba 100644
--- a/seller/public/config.js
+++ b/seller/public/config.js
@@ -3,10 +3,10 @@ var BASE = {
    * @description api请求基础路径
    */
   API_DEV: {
-    common: "https://common-api.pickmall.cn",
-    buyer: "https://buyer-api.pickmall.cn",
-    seller: "https://store-api.pickmall.cn",
-    manager: "https://admin-api.pickmall.cn"
+    common: "http://192.168.0.113:8890",
+    buyer: "http://192.168.0.113:8888",
+    seller: "http://192.168.0.113:8889",
+    manager: "http://192.168.0.113:8887"
   },
   API_PROD: {
     common: "https://common-api.pickmall.cn",
diff --git a/seller/src/views/home/home.vue b/seller/src/views/home/home.vue
index 79bd70f3..36f03b44 100644
--- a/seller/src/views/home/home.vue
+++ b/seller/src/views/home/home.vue
@@ -10,15 +10,15 @@
       <div class="box-left">
         <div class="card shop flex">
           <div>
-            <h4>Hi,<span style="margin-left:5px;">{{userData.nickName}}</span></h4>
+            <h4>Hi,<span style="margin-left:5px;">{{ userData.nickName }}</span></h4>
             <img class="shop-logo" :src="userData.storeLogo || require('@/assets/logo1.png')" alt="">
           </div>
           <div class="shop-box">
             <div class="box-item">
-              <div>店铺名称：{{userData.storeName || '暂无'}}</div>
+              <div>店铺名称：{{ userData.storeName || '暂无' }}</div>
             </div>
             <div class="box-item">
-              <div>店铺状态：{{userData.storeDisable=='OPEN' ? '开启中' : '关闭'}}</div>
+              <div>店铺状态：{{ userData.storeDisable == 'OPEN' ? '开启中' : '关闭' }}</div>
             </div>
             <div class="box-item" @click="im()">
               <Button type="info">点击登录客服</Button>
@@ -27,27 +27,30 @@
 
           <div class="rate-box">
             <div>
-              <i-circle :size="120" stroke-color="#fecb89" :trail-width="4" :stroke-width="5" :percent="(userData.serviceScore  *  20)" stroke-linecap="square">
+              <i-circle :size="120" stroke-color="#fecb89" :trail-width="4" :stroke-width="5"
+                :percent="(userData.serviceScore * 20)" stroke-linecap="square">
                 <div class="demo-Circle-custom">
 
-                  <p class="bold">{{userData.serviceScore}}分</p>
+                  <p class="bold">{{ userData.serviceScore }}分</p>
                 </div>
               </i-circle>
               <h5>服务得分</h5>
             </div>
             <div>
-              <i-circle :size="120" stroke-color="#a7c5eb" :trail-width="4" :stroke-width="5" :percent="(userData.deliveryScore  *  20)" stroke-linecap="square">
+              <i-circle :size="120" stroke-color="#a7c5eb" :trail-width="4" :stroke-width="5"
+                :percent="(userData.deliveryScore * 20)" stroke-linecap="square">
                 <div>
 
-                  <p class="bold">{{userData.deliveryScore}}分</p>
+                  <p class="bold">{{ userData.deliveryScore }}分</p>
                 </div>
               </i-circle>
               <h5>交货得分</h5>
             </div>
             <div>
-              <i-circle :size="120" stroke-color="#848ccf" :trail-width="4" :stroke-width="5" :percent="(userData.descriptionScore  *  20)" stroke-linecap="square">
+              <i-circle :size="120" stroke-color="#848ccf" :trail-width="4" :stroke-width="5"
+                :percent="(userData.descriptionScore * 20)" stroke-linecap="square">
                 <div>
-                  <p class="bold">{{userData.descriptionScore}}分</p>
+                  <p class="bold">{{ userData.descriptionScore }}分</p>
                 </div>
               </i-circle>
               <h5>评价得分</h5>
@@ -60,7 +63,7 @@
           <div class="detail-list">
             <div class="detail-item" @click="navigateTo('orderList')">
               <div>
-                <span>{{homeData.unPaidOrder || 0}}</span>
+                <span>{{ homeData.unPaidOrder || 0 }}</span>
                 <div>待付款</div>
               </div>
               <div class="detail-title">
@@ -70,11 +73,11 @@
 
             <div class="detail-item" @click="navigateTo('orderList')">
               <div>
-                <span>{{homeData.unDeliveredOrder || 0}}</span>
+                <span>{{ homeData.unDeliveredOrder || 0 }}</span>
                 <div>待发货</div>
               </div>
               <div>
-                <span>{{homeData.deliveredOrder || 0}}</span>
+                <span>{{ homeData.deliveredOrder || 0 }}</span>
                 <div>待收货</div>
               </div>
               <div class="detail-title">
@@ -83,15 +86,15 @@
             </div>
             <div class="detail-item">
               <div @click="navigateTo('returnMoneyOrder')">
-                <span>{{homeData.returnMoney || 0}}</span>
+                <span>{{ homeData.returnMoney || 0 }}</span>
                 <div>退款</div>
               </div>
               <div @click="navigateTo('returnGoodsOrder')">
-                <span>{{homeData.returnGoods || 0}}</span>
+                <span>{{ homeData.returnGoods || 0 }}</span>
                 <div>退货</div>
               </div>
               <div @click="navigateTo('memberComment')">
-                <span>{{homeData.memberEvaluation || 0}}</span>
+                <span>{{ homeData.memberEvaluation || 0 }}</span>
                 <div>待评价</div>
               </div>
               <div class="detail-title">
@@ -100,7 +103,7 @@
             </div>
             <div class="detail-item" @click="navigateTo('orderComplaint')">
               <div>
-                <span>{{homeData.complaint || 0}}</span>
+                <span>{{ homeData.complaint || 0 }}</span>
                 <div>待处理</div>
               </div>
 
@@ -110,11 +113,11 @@
             </div>
             <div class="detail-item" @click="navigateTo('goods')">
               <div>
-                <span>{{homeData.waitUpper || 0}}</span>
+                <span>{{ homeData.waitUpper || 0 }}</span>
                 <div>待上架</div>
               </div>
               <div>
-                <span>{{homeData.waitAuth || 0}}</span>
+                <span>{{ homeData.waitAuth || 0 }}</span>
                 <div>审核中</div>
               </div>
               <div class="detail-title">
@@ -124,11 +127,11 @@
 
             <div class="detail-item">
               <div @click="navigateTo('seckill')">
-                <span>{{homeData.seckillNum || 0}}</span>
+                <span>{{ homeData.seckillNum || 0 }}</span>
                 <div>秒杀活动</div>
               </div>
               <div @click="navigateTo('accountStatementBill')">
-                <span>{{homeData.waitPayBill || 0}}</span>
+                <span>{{ homeData.waitPayBill || 0 }}</span>
                 <div>等待对账</div>
               </div>
               <div class="detail-title">
@@ -143,8 +146,8 @@
       <div class="card box-right">
         <h4>平台公告</h4>
         <div>
-          <div class="notice-title" v-for="(item,index) in notices" :key="index">
-            <a @click="clickLinkNotices(item)">{{item.title}}</a>
+          <div class="notice-title" v-for="(item, index) in notices" :key="index">
+            <a @click="clickLinkNotices(item)">{{ item.title }}</a>
           </div>
         </div>
       </div>
@@ -158,7 +161,7 @@
             <Icon class="icon" size="31" type="md-photos" />
           </div>
           <div>
-            <div class="counts">{{homeData.goodsNum ||0}}</div>
+            <div class="counts">{{ homeData.goodsNum || 0 }}</div>
             <div>商品数量</div>
           </div>
 
@@ -168,7 +171,7 @@
             <Icon class="icon" size="31" type="ios-card" />
           </div>
           <div>
-            <div class="counts">{{homeData.orderPrice || 0 | unitPrice('￥')}}</div>
+            <div class="counts">{{ homeData.orderPrice || 0 | unitPrice('￥') }}</div>
             <div>订单总额</div>
           </div>
 
@@ -179,7 +182,7 @@
             <Icon class="icon" size="31" type="md-list" />
           </div>
           <div>
-            <div class="counts">{{homeData.orderNum ||0}}</div>
+            <div class="counts">{{ homeData.orderNum || 0 }}</div>
             <div>订单数量</div>
           </div>
 
@@ -189,7 +192,7 @@
             <Icon class="icon" size="31" type="md-person" />
           </div>
           <div>
-            <div class="counts">{{homeData.storeUV ||0}}</div>
+            <div class="counts">{{ homeData.storeUV || 0 }}</div>
             <div>访客数量</div>
           </div>
 
@@ -207,7 +210,7 @@ import Cookies from "js-cookie";
 
 export default {
   name: "home",
-  data() {
+  data () {
     return {
       noticeFlage: false, // 控制平台公告显隐
 
@@ -217,18 +220,18 @@ export default {
       noticesDetail: { // 平台公告详情
         title: "",
       },
-      IMLink:"",
+      IMLink: "",
     };
   },
   methods: {
     // 跳转页面
-    navigateTo(name) {
+    navigateTo (name) {
       this.$router.push({
         name,
       });
     },
     // 初始化数据
-    async init() {
+    async init () {
       let userInfo = JSON.parse(Cookies.get("userInfoSeller"));
 
       this.userData = userInfo;
@@ -239,40 +242,41 @@ export default {
       }
     },
     // 跳转文章页
-    async clickLinkNotices(val) {
+    async clickLinkNotices (val) {
       let res = await seeArticle(val.id);
       if (res.success) {
         this.noticesDetail = res.result;
         this.noticeFlage = true;
       }
     },
-    async im() {
+    async im () {
       // 获取访问Token
       let accessToken = this.getStore("accessToken");
       await this.getIMDetailMethods();
+      let res = await getIMDetail();
       if (!accessToken) {
         this.$Message.error("请登录后再联系客服");
         return;
       }
-      window.open(this.IMLink + "?token=" + accessToken);
+      window.open(`${res.result}?token=` + accessToken);
     },
 
     // 获取im信息
-    async getIMDetailMethods() {
+    async getIMDetailMethods () {
       let res = await getIMDetail();
       if (res.success) {
         this.IMLink = res.result;
       }
     },
     // 获取首页数据
-    async getHomeData() {
+    async getHomeData () {
       let res = await getSellerHomeData();
       if (res.success) {
         this.homeData = res.result;
       }
     },
   },
-  mounted() {
+  mounted () {
     this.init();
     this.getHomeData();
   },
diff --git a/seller/src/views/order/order/orderDetail.vue b/seller/src/views/order/order/orderDetail.vue
index a1215072..5fd939fb 100644
--- a/seller/src/views/order/order/orderDetail.vue
+++ b/seller/src/views/order/order/orderDetail.vue
@@ -228,6 +228,31 @@
             <span class="label">优惠券金额：</span>
             <span class="txt"> {{ orderInfo.order.priceDetailDTO.couponPrice | unitPrice('￥') }} </span>
           </li>
+          <li v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">      
+            <div class="label">
+              <Poptip trigger="hover" placement="left" width="200">
+                <Icon v-if="typeList.length > 0"  type="ios-alert-outline" size="17" @click="getOrderPrice" color="#cc0000"/>
+              <template #content>
+                <div class="api" style="text-align:left;">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>优惠详情：</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr  v-for="(item,index) in typeList" :key="index">
+                            <td>{{item.promotionName}}：</td>
+                            <td>¥{{ item.discountPrice | unitPrice }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+              </template>
+            </Poptip>
+            <span>优惠详情：</span>
+            </div>
+            </li>
           <li>
             <span class="label">运费：</span>
             <span class="txt">{{
@@ -238,18 +263,31 @@
               <span class="label">修改金额：</span>
               <span class="txt theme_color">¥{{ orderInfo.order.priceDetailDTO.updatePrice | unitPrice }}</span>
             </li>
+            <!-- <li v-if="showPrices"  v-for="(item,index) in typeList" :key="index" > 
+            <hr style="border:1px dashed black;">
+              <span class="label" v-if="index == 1 && typeList.length > 1" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
+              <span class="txt" style="border-bottom: 1px dashed;font-size:10px !important;" v-if="index == 1 &&  typeList.length > 1">¥{{ item.discountPrice | unitPrice }}</span>
+              <span class="label" v-if="index == 0 &&  typeList.length > 1" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
+              <span class="txt" style="border-top: 1px dashed;font-size:10px !important;" v-if="index == 0 && typeList.length > 1">¥{{ item.discountPrice | unitPrice }}</span>
+              <span class="label" v-if="typeList.length == 1 && index == 0" style="font-size:10px !important;"><a  @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
+              <span class="txt"  v-if="typeList.length == 1 && index == 0" style="border-top: 1px dashed;border-bottom: 1px dashed;font-size:10px !important;">¥{{ item.discountPrice | unitPrice }}</span>
+            </li> -->
           <li v-if="orderInfo.order.priceDetailDTO.payPoint != 0">
             <span class="label">使用积分：</span>
             <span class="txt">{{
               orderInfo.order.priceDetailDTO.payPoint
             }}</span>
           </li>
-
           <li>
             <span class="label">应付金额：</span>
             <span class="txt flowPrice"
               >¥{{ orderInfo.order.flowPrice | unitPrice }}</span
             >
+            <!-- <template v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
+                <Space style="height:20px;float: right;text-align: center;margin-left:30px;margin-right:53px;">
+                      <Button type="primary" ghost size="small" @click="getOrderPrice()">优惠详情</Button>
+                </Space>
+            </template> -->
           </li>
         </ul>
       </div>
@@ -568,6 +606,8 @@ export default {
   },
   data() {
     return {
+      typeList:[],
+      showPrices:false,
       printHiddenFlag:false,//隐藏信息
       printInfoObj:{
         id: "printInfo",//要打印的id名 无#号
@@ -804,6 +844,28 @@ export default {
         }
       });
     },
+    getOrderPrice(){
+      if(this.showPrices){
+        this.showPrices = false
+      }else if(!this.showPrices){
+        this.showPrices = true
+      }
+    },
+    getContentPrice(){
+          for (let i = 0; i < this.typeList.length; i++) {
+          for (let j = i + 1; j < this.typeList.length; j++) {
+            if (this.typeList[i].promotionId === this.typeList[j].promotionId) {
+              this.typeList[i].discountPrice = this.typeList[i].discountPrice + this.typeList[j].discountPrice
+              this.typeList.splice(j, 1)
+            }
+          }
+        }
+        console.log(this.typeList)
+        if(this.typeList.length >= 3){
+          console.log(123123)
+          this.getContentPrice()
+        }
+    },  
     //获取订单详细信息
     getDataDetail() {
       this.loading = true;
@@ -814,6 +876,9 @@ export default {
           this.allowOperation = res.result.allowOperationVO;
           this.data = res.result.orderItems;
           this.orderLogData = res.result.orderLogs;
+          this.typeList = JSON.parse(JSON.stringify(res.result.order.priceDetailDTO.discountPriceDetail));
+          this.getContentPrice()
+          this.getOrderPrice()
         }
       });
     },
@@ -1055,7 +1120,7 @@ dl dt {
 
   .goods-total {
     padding: 20px;
-    height: 150px;
+    height: 220px;
     width: 100%;
 
     ul {
@@ -1069,12 +1134,14 @@ dl dt {
     .label {
       float: left;
       width: 500px;
+      font-size: 14px;
       text-align: right;
     }
 
     .txt {
       float: left;
       width: 130px;
+      font-size: 14px;
       text-align: right;
       font-family: verdana;
     }
diff --git a/seller/src/views/shop/shopSetting.vue b/seller/src/views/shop/shopSetting.vue
index a68fb68d..1cbad7b6 100644
--- a/seller/src/views/shop/shopSetting.vue
+++ b/seller/src/views/shop/shopSetting.vue
@@ -50,6 +50,9 @@
             <FormItem label="店铺楼层" prop="content" class="wangEditor">
               <i-switch v-model="form.pageShow" @on-change="pageShow"></i-switch>
             </FormItem>
+            <FormItem label="开启自提" prop="content" class="wangEditor">
+              <i-switch v-model="form.selfPickFlag" @on-change="changeSelfPickFlag"></i-switch>
+            </FormItem>
             <Form-item>
               <Button
                 @click="handleSubmit"
@@ -332,7 +335,8 @@ export default {
         storeAddressDetail: "", //详细地址
         storeAddressIdPath: "", //地址
         storeDesc: "", // 店铺描述
-        pageShow:false,
+        pageShow: false,
+        selfPickFlag: false,
       },
 
       // 表单验证规则
@@ -462,6 +466,11 @@ export default {
     pageShow(type) {
       this.form.pageShow = type
     },
+    changeSelfPickFlag(item){
+      if(item){
+        this.form.selfPickFlag = item
+      }
+    },
     getDeliverAddress(){
       API_Shop.getDeliverAddress().then(res=>{
         if(res.success){