diff --git a/README.md b/README.md
index dcb4918..ae890df 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,7 @@
 - [x] 开发webpack loader-将内联样式的px转换为rem
 - [ ] 艾特@功能
 - [ ] 抽出下拉上拉逻辑，重构pullRefresh组件
+- [ ] 目前暂时用v-html展示，考虑转义还是拆组件
 
 # 安装运行
 1. 拉取项目
diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
index 1c6dde9..1ff5e8b 100644
--- a/src/assets/styles/common.scss
+++ b/src/assets/styles/common.scss
@@ -17,4 +17,13 @@
 
 .iconfont {
   font-size: 20px;
+}
+
+.emoji-icon {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  background: url('~@/assets/images/biaoqing.png');
+  background-size: 30px auto;
+  background-repeat: no-repeat;
 }
\ No newline at end of file
diff --git a/src/components/avatar/index.vue b/src/components/avatar/index.vue
index b4469fa..7aeac44 100644
--- a/src/components/avatar/index.vue
+++ b/src/components/avatar/index.vue
@@ -2,11 +2,11 @@
  * @Description: 头像组件
  * @Author: astar
  * @Date: 2020-09-08 21:10:10
- * @LastEditTime: 2021-02-04 14:28:05
+ * @LastEditTime: 2021-04-01 17:07:53
  * @LastEditors: astar
 -->
 <template>
-  <span class="avatar-wrapper" :class="classes" :style="styles">
+  <span class="avatar-wrapper" :class="classes" :style="styles" v-press="press">
     <slot>
       <img :style="imgStyles" :src="src" :alt="alt" @error="error">
     </slot>
@@ -46,6 +46,9 @@ export default {
   methods: {
     error(e) {
       this.$emit('error', e)
+    },
+    press () {
+      this.$emit('press')
     }
   },
   computed: {
diff --git a/src/directives/index.js b/src/directives/index.js
index ce146ef..8bedae4 100644
--- a/src/directives/index.js
+++ b/src/directives/index.js
@@ -2,7 +2,7 @@
  * @Author: astar
  * @Date: 2021-01-28 18:26:05
  * @LastEditors: astar
- * @LastEditTime: 2021-04-01 11:32:29
+ * @LastEditTime: 2021-04-01 14:31:49
  * @Description: 文件描述
  * @FilePath: \vue-chat\src\directives\index.js
  */
@@ -48,8 +48,8 @@ export const debounceDirective = (Vue) => {
 export const press = (Vue) => {
   Vue.directive('press', {
     bind: function (el, binding) {
-      if (!Array.isArray(binding.value)) return;
-      let [callback, delay = 650] = binding.value;
+      let delay = 650;
+      let callback = binding.value;
       let startTime = null;
       let timer = null;
       let startP = null;
@@ -66,7 +66,6 @@ export const press = (Vue) => {
       }
       if ('ontouchstart' in window) {
         el.addEventListener('touchstart', (event) => {
-          console.time()
           start(event);
           startP = event.touches[0];
         });
diff --git a/src/utils/editor.js b/src/utils/editor.js
new file mode 100644
index 0000000..3969161
--- /dev/null
+++ b/src/utils/editor.js
@@ -0,0 +1,65 @@
+/*
+ * @Author: astar
+ * @Date: 2021-04-01 16:02:08
+ * @LastEditors: astar
+ * @LastEditTime: 2021-04-01 18:37:07
+ * @Description: 文件描述
+ * @FilePath: \vue-chat\src\utils\editor.js
+ */
+export const KINDS = {
+  TEXT: 'TEXT',
+  AT: 'AT',
+  EMOJI: 'EMOJI'
+}
+export const EMOJIS = [
+  '呵呵', '哈哈', '吐舌', '啊', '酷', '怒', '开心', '汗', '泪', '黑线',
+  '鄙视', '不高兴', '真棒', '钱', '疑问', '阴险', '吐', '咦', '委屈', '花心',
+  '呼', '笑眼', '冷', '太开心', '滑稽', '勉强', '狂汗', '乖', '睡觉', '惊哭',
+  '升起', '惊讶', '喷', '爱心', '心碎', '玫瑰', '礼物', '星星月亮', '太阳', '音乐',
+  '灯泡', '蛋糕', '彩虹', '钱币', '咖啡', 'haha', '胜利', '大拇指', '弱', 'ok',
+]
+/**
+ * 将json解析为html
+ * @author astar
+ * @date 2021-04-01 16:02
+ * @param {Object} data - 包含kind和value属性值
+ * @returns {DOM String}
+ */
+export function getHTMLFromJSON (data) {
+  switch (data.kind) {
+    // case KINDS.TEXT:
+    //   return `<span contenteditable="false">${data.value}</span>`;
+    case KINDS.AT:
+      return `<span data-kind="${KINDS.AT}" data-value="${data.value}" contenteditable="false">@${data.value} </span>`;
+    case KINDS.EMOJI:
+      return `<i class="emoji-icon" data-kind="${KINDS.EMOJI}" data-value="${data.value}" contenteditable="false" style="background-position: left 0 top ${EMOJIS.indexOf(data.value) * 100 / (EMOJIS.length - 1)}%"></i>`;
+    default:
+      return null;
+  }
+}
+
+/**
+ * 将HTML转换为JSON格式数据
+ * @author astar
+ * @date 2021-02-02 18:02
+ */
+export function getJSONFromInput ($ele) {
+  const $children = $ele.childNodes
+  let result = []
+  $children.forEach(child => {
+    let nodeType = child.nodeType
+    if (nodeType === 3 && child.textContent) { // 普通文本
+      result.push({
+        kind: KINDS.TEXT,
+        value: child.textContent // 还需转义,到时候再说吧
+      })
+    } else if (nodeType === 1) { // 元素节点, 目前只有emoji类型，后期考虑其他
+      let options = child.dataset
+      result.push({
+        kind: options.kind,
+        value: options.value
+      })
+    }
+  })
+  return result
+}
\ No newline at end of file
diff --git a/src/views/chat/components/emojiPopup/index.vue b/src/views/chat/components/emojiPopup/index.vue
new file mode 100644
index 0000000..3ad30d4
--- /dev/null
+++ b/src/views/chat/components/emojiPopup/index.vue
@@ -0,0 +1,42 @@
+<!--
+ * @Author: astar
+ * @Date: 2021-01-30 14:59:41
+ * @LastEditors: astar
+ * @LastEditTime: 2021-04-01 18:07:26
+ * @Description: 表情包popup
+ * @FilePath: \vue-chat\src\views\chat\components\emojiPopup\index.vue
+-->
+<template>
+<div class="expression" @click="selectExpression" v-html="renderEMOJIS()">
+</div>
+</template>
+<script>
+import { EMOJIS, getHTMLFromJSON, KINDS } from '@/utils/editor.js'
+
+export default {
+  data () {
+    return {
+      EMOJIS
+    }
+  },
+  props: {
+    onSelectExpression: {
+      required: true,
+      type: Function
+    }
+  },
+  methods: {
+    getHTMLFromJSON,
+    renderEMOJIS () {
+      return this.EMOJIS.map(item => {
+        return getHTMLFromJSON({ kind: KINDS.EMOJI, value: item })
+      }).join('')
+    },
+    selectExpression ({ target }) {
+      if (target.dataset.kind === KINDS.EMOJI) {
+        this.onSelectExpression({ kind: KINDS.EMOJI, value: target.dataset.value })
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/chat/components/expression/config.js b/src/views/chat/components/expression/config.js
deleted file mode 100644
index 33163a3..0000000
--- a/src/views/chat/components/expression/config.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * @Author: astar
- * @Date: 2021-01-30 14:43:25
- * @LastEditors: astar
- * @LastEditTime: 2021-01-30 18:14:53
- * @Description: 表情包描述
- * @FilePath: \vue-chat\src\views\chat\components\expressions.js
- */
-export default [
-    '呵呵', '哈哈', '吐舌', '啊', '酷', '怒', '开心', '汗', '泪', '黑线',
-    '鄙视', '不高兴', '真棒', '钱', '疑问', '阴险', '吐', '咦', '委屈', '花心',
-    '呼', '笑眼', '冷', '太开心', '滑稽', '勉强', '狂汗', '乖', '睡觉', '惊哭',
-    '升起', '惊讶', '喷', '爱心', '心碎', '玫瑰', '礼物', '星星月亮', '太阳', '音乐',
-    '灯泡', '蛋糕', '彩虹', '钱币', '咖啡', 'haha', '胜利', '大拇指', '弱', 'ok',
-]
diff --git a/src/views/chat/components/expression/expressionItem.vue b/src/views/chat/components/expression/expressionItem.vue
deleted file mode 100644
index 5df3754..0000000
--- a/src/views/chat/components/expression/expressionItem.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
- * @Author: astar
- * @Date: 2021-03-04 10:11:57
- * @LastEditors: astar
- * @LastEditTime: 2021-04-01 14:48:05
- * @Description: 单个表情渲染
- * @FilePath: \vue-chat\src\views\chat\components\expression\expressionItem.vue
--->
-<template>
-  <i
-    contenteditable="false"
-    class="emoji-icon"
-    :data-name="iconName"
-    :style="{ 'background-position': `0 ${-30 * index}px` }"
-  ></i>
-</template>
-<script>
-import expressions from './config.js';
-export default {
-  props: {
-    value: {
-      type: String,
-      required: true
-    }
-  },
-  computed: {
-    index () {
-      return expressions.findIndex(item => item === this.value)
-    },
-    iconName () {
-      return `emoji-${this.value}`
-    }
-  }
-}
-</script>
-<style lang="scss">
-.emoji-icon {
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  background: url('~@/assets/images/biaoqing.png');
-  background-size: 30px auto;
-  background-repeat: no-repeat;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/chat/components/expression/index.vue b/src/views/chat/components/expression/index.vue
deleted file mode 100644
index b7b1267..0000000
--- a/src/views/chat/components/expression/index.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
- * @Author: astar
- * @Date: 2021-01-30 14:59:41
- * @LastEditors: cmx
- * @LastEditTime: 2021-04-01 14:52:30
- * @Description: 表情包popup
- * @FilePath: \vue-chat\src\views\chat\components\expression\index.vue
--->
-<template>
-<div class="expression" @click="selectExpression">
-  <expression-item
-    v-for="(item, index) in expressions"
-    :key="index"
-    :value="item"
-  ></expression-item>
-</div>
-</template>
-<script>
-import expressions from './config.js';
-import expressionItem from './expressionItem';
-
-export default {
-  data () {
-    return {
-      expressions
-    }
-  },
-  props: {
-    onSelectExpression: {
-      required: true,
-      type: Function
-    }
-  },
-  methods: {
-    selectExpression ({ target }) {
-      if (target.nodeName.toLowerCase() === 'i' && target.dataset.name) {
-        this.onSelectExpression(target.outerHTML)
-      }
-    }
-  },
-  components: {
-    expressionItem
-  }
-}
-</script>
\ No newline at end of file
diff --git a/src/views/chat/components/inputBox.vue b/src/views/chat/components/inputBox.vue
index 0c2e274..a27ba17 100644
--- a/src/views/chat/components/inputBox.vue
+++ b/src/views/chat/components/inputBox.vue
@@ -2,7 +2,7 @@
  * @Author: astar
  * @Date: 2021-01-30 15:21:05
  * @LastEditors: astar
- * @LastEditTime: 2021-04-01 14:50:21
+ * @LastEditTime: 2021-04-01 17:13:20
  * @Description: 聊天输入框
  * @FilePath: \vue-chat\src\views\chat\components\inputBox.vue
 -->
@@ -19,13 +19,15 @@
     placeholder="按Enter发送"
   />
   <s-popup class="expression-popup" v-model="showExpression" place="bottom" :x="pos.x" :y="pos.y" height="110px" :width="popupWidth">
-    <expression :onSelectExpression="onSelectExpression"></expression>
+    <emoji-popup :onSelectExpression="onSelectExpression"></emoji-popup>
   </s-popup>
 </div>
 </template>
 <script>
-import expression from './expression';
+import emojiPopup from './emojiPopup';
 import { getElementPagePosition } from '@/utils';
+import { getHTMLFromJSON, getJSONFromInput } from '@/utils/editor.js';
+
 export default {
   data () {
     return {
@@ -54,10 +56,20 @@ export default {
     })
   },
   methods: {
+    /**
+     * 计算emoji popup的位置
+     * @author astar
+     * @date 2021-04-01 15:07
+     */
     computePopupStyle () {
       this.popupWidth = window.getComputedStyle(this.$refs.inputbox).width;
       this.pos = getElementPagePosition(this.$refs.inputbox);
     },
+    /**
+     * 展示或取消展示emoji popup
+     * @author astar
+     * @date 2021-04-01 15:08
+     */
     toggleShowExpression () {
       this.showExpression = !this.showExpression
       if (this.showExpression) { // 点击表情包，输入框不失去焦点
@@ -94,7 +106,7 @@ export default {
      */
     sendMessage (e) {
       e.preventDefault();
-      this.$emit('send', this.getJSONFromInput());
+      this.$emit('send', getJSONFromInput(this.$refs.input));
       e.target.innerHTML = null;
       this.showExpression = false;
     },
@@ -136,46 +148,17 @@ export default {
      * @param {*}
      * @returns {*}
      */
-    onSelectExpression (expression) {
+    onSelectExpression (data) {
       // this.showExpression = false
-      this.insertAtCursor && this.insertAtCursor(expression)
-    },
-    /**
-     * 将输入框内容转换为JSON格式数据
-     * @author astar
-     * @date 2021-02-02 18:02
-     */
-    getJSONFromInput () {
-      const $ele = this.$refs.input
-      const $children = $ele.childNodes
-      let result = []
-      $children.forEach(child => {
-        let nodeType = child.nodeType
-        console.log(nodeType)
-        if (nodeType === 3 && child.textContent) { // 普通文本
-          result.push({
-            kind: 'text',
-            value: child.textContent // 还需转义,到时候再说吧
-          })
-          console.log(child.textContent)
-        } else if (nodeType === 1) { // 元素节点, 目前只有emoji类型，后期考虑其他
-          if ((new RegExp(/^emoji-.*/)).test(child.dataset.name)) {
-            result.push({
-              kind: 'emoji',
-              value: child.dataset.name.replace(/^emoji-/, '')
-            })
-            console.log(child.dataset.name)
-          }
-        }
-      })
-      return result
+      console.log(data)
+      this.insertAtCursor && this.insertAtCursor(getHTMLFromJSON(data))
     }
   },
   beforeDestroy () {
     window.removeEventListener("resize", this.computePopupStyle);
   },
   components: {
-    expression
+    emojiPopup
   }
 }
 </script>
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index b1bcfa8..cac09e3 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -23,17 +23,17 @@
           </div>
           <pull-refresh :refreshNext="refreshNext">
             <div slot="main" class="chat-box__item" :class="item.userId === userInfo._id ? 'reverse' : 'normal'" v-for="item in chatRecord" :key="item._id">
-              <s-avatar class="chat-box__item_avatar" :src="item.avatar" size="medium"/>
+              <s-avatar class="chat-box__item_avatar" :src="item.avatar" size="medium" v-press="atSomeone(item)"/>
               <div class="chat-box__item_content">
                 <template v-for="(ele, idx) in item.content">
-                  <span v-if="ele.kind==='text'" :key="idx">{{ele.value}}</span>
-                  <expression-item v-if="ele.kind==='emoji'" :key="idx" :value="ele.value"></expression-item>
+                  <span v-if="ele.kind === 'TEXT'" :key="idx">{{ele.value}}</span>
+                  <span v-else v-html="getHTMLFromJSON(ele)" :key="idx"></span>
                 </template>
               </div>
             </div>
           </pull-refresh>
         </div>
-        <input-box @send="sendMessage" class="input-box"></input-box>
+        <input-box ref="inputBox" @send="sendMessage" class="input-box"></input-box>
       </main>
     </div>
   </div>
@@ -44,11 +44,10 @@ import { io } from 'socket.io-client';
 import { mapGetters } from 'vuex';
 import { getAuthorization } from '@/utils';
 import inputBox from './components/inputBox';
-import expressions from './components/expression/config';
-import expressionItem from './components/expression/expressionItem';
 import { removeToken } from '@/utils/token';
 import { getHistoryChatByCount } from '@/request';
 import { getDpr } from '@/utils/setRem';
+import { getHTMLFromJSON } from '@/utils/editor.js';
 
 export default {
   name: "chat",
@@ -56,7 +55,6 @@ export default {
     return {
       pageSize: 20,
       totalDone: false,
-      expressions,
       socket: null, // socket
       reConnectCount: 10,
       reConnectId: null,
@@ -79,6 +77,24 @@ export default {
     });
   },
   methods: {
+    getHTMLFromJSON,
+    /**
+     * 长按艾特@
+     * @author astar
+     * @date 2021-04-01 17:01
+     * @param {Object} item - 艾特某人
+     * @returns {*}
+     */
+    atSomeone (item) {
+      const _this = this;
+      return function () {
+        console.log(item)
+        _this.$refs.inputBox.onSelectExpression({
+          kind: 'AT',
+          value: item.name
+        })
+      }
+    },
     refreshNext () {
       return new Promise((resolve, reject) => {
         if (!this.totalDone) {
@@ -135,7 +151,7 @@ export default {
         }
         if (this.reConnectCount) {
           this.reConnectId = setTimeout(() => {
-            console.log('重新连接');
+            console.warn('[socket] - reconnect');
             this.reConnectCount--;
             this.socket.connect();
           }, 1000);
@@ -152,7 +168,7 @@ export default {
         }
         this.socket.emit('message', message);
       } else {
-        console.log('socket 还未初始化');
+        console.warn('[socket] - socket not initialized yet');
       }
     }
   },
@@ -185,8 +201,7 @@ export default {
     }
   },
   components: {
-    inputBox,
-    expressionItem
+    inputBox
   }
 }
 </script>