diff --git a/src/utils/emoji.js b/src/utils/emoji.js
new file mode 100644
index 0000000..aa206cf
--- /dev/null
+++ b/src/utils/emoji.js
@@ -0,0 +1,357 @@
+export const emojiData = [
+    //笑脸
+    {
+        type: 'smiley',
+        name: '笑脸',
+        list: [
+            '😀',
+            '😁',
+            '😂',
+            '🤣',
+            '😃',
+            '😄',
+            '😅',
+            '😆',
+            '😉',
+            '😊',
+            '😋',
+            '😎',
+            '😍',
+            '😘',
+            '😗',
+            '😙',
+            '😚',
+            '🙂',
+            '🤗',
+            '🤩',
+            '🤔',
+            '🤨',
+            '😐',
+            '😑',
+            '😶',
+            '🙄',
+            '😏',
+            '😣',
+            '😥',
+            '😮',
+            '🤐',
+            '😯',
+            '😪',
+            '😫',
+            '😴',
+            '😌',
+            '😛',
+            '😜',
+            '😝',
+            '🤤',
+            '😒',
+            '😓',
+            '😔',
+            '😕',
+            '🙃',
+            '🤑',
+            '😲',
+            '🙁',
+            '😖',
+            '😞',
+            '😟',
+            '😤',
+            '😢',
+            '😭',
+            '😦',
+            '😧',
+            '😨',
+            '😩',
+            '🤯',
+            '😬',
+            '😰',
+            '😱',
+            '😳',
+            '🤪',
+            '😵',
+            '😡',
+            '😠',
+            '🤬',
+            '😷',
+            '🤒',
+            '🤕',
+            '🤢',
+            '🤮',
+            '🤧',
+            '😇',
+            '🤠',
+            '🤡',
+            '🤥',
+            '🤫',
+            '🤭',
+            '🧐',
+            '🤓',
+            '😈',
+            '👿',
+            '👹',
+            '👺',
+            '💀',
+            '👻',
+            '👽',
+            '🤖',
+            '💩',
+        ],
+    },
+    //手势
+    {
+        type: 'gesture',
+        name: '手势',
+        list: [
+            '🤲',
+            '👐',
+            '🙌',
+            '👏',
+            '🤝',
+            '👍',
+            '👎',
+            '👊',
+            '🤛',
+            '🤜',
+            '🤞',
+            '🤟',
+            '🤘',
+            '👌',
+            '👈',
+            '👉',
+            '👆',
+            '👇',
+            '🤚',
+            '🖐',
+            '🖖',
+            '👋',
+            '🤙',
+            '💪',
+            // "🖕",
+            '🙏',
+        ],
+    },
+    //人物
+    {
+        type: 'people',
+        name: '人物',
+        list: [
+            '👦',
+            '👧',
+            '👨',
+            '👩',
+            '👴',
+            '👵',
+            '👶',
+            '👱',
+            '👮',
+            '👲',
+            '👳',
+            '👷',
+            '👸',
+            '💂',
+            '🎅',
+            '👰',
+            '👼',
+            '💆',
+            '💇',
+            '🙍',
+            '🙎',
+            '🙅',
+            '🙆',
+            '💁',
+            '🙋',
+            '🙇',
+            '🙌',
+            '🙏',
+            '👤',
+            '👥',
+            '🚶',
+            '🏃',
+            '👯',
+            '💃',
+            '👫',
+            '👬',
+            '👭',
+            '💏',
+            '💑',
+            '👪',
+        ],
+    },
+    //动物
+    {
+        type: 'animal',
+        name: '动物',
+        list: [
+            '🙈',
+            '🙉',
+            '🙊',
+            '🐵',
+            '🐒',
+            '🐶',
+            '🐕',
+            '🐩',
+            '🐺',
+            '🐱',
+            '😺',
+            '😸',
+            '😹',
+            '😻',
+            '😼',
+            '😽',
+            '🙀',
+            '😿',
+            '😾',
+            '🐈',
+            '🐯',
+            '🐅',
+            '🐆',
+            '🐴',
+            '🐎',
+            '🐮',
+            '🐂',
+            '🐃',
+            '🐄',
+            '🐷',
+            '🐖',
+            '🐗',
+            '🐽',
+            '🐏',
+            '🐑',
+            '🐐',
+            '🐪',
+            '🐫',
+            '🐘',
+            '🐭',
+            '🐁',
+            '🐀',
+            '🐹',
+            '🐰',
+            '🐇',
+            '🐻',
+            '🐨',
+            '🐼',
+            '🐾',
+            '🐔',
+            '🐓',
+            '🐣',
+            '🐤',
+            '🐥',
+            '🐦',
+            '🐧',
+            '🐸',
+            '🐊',
+            '🐢',
+            '🐍',
+            '🐲',
+            '🐉',
+            '🐳',
+            '🐋',
+            '🐬',
+            '🐟',
+            '🐠',
+            '🐡',
+            '🐙',
+            '🐚',
+            '🐌',
+            '🐛',
+            '🐜',
+            '🐝',
+            '🐞',
+            '🦋',
+            '🐁',
+            '🐂',
+            '🐅',
+            '🐇',
+            '🐉',
+            '🐍',
+            '🐎',
+            '🐐',
+            '🐒',
+            '🐓',
+            '🐕',
+            '🐖',
+        ],
+    },
+    //其他
+    {
+        type: 'other',
+        name: '其他',
+        list: [
+            '🌹',
+            '🍀',
+            '🍎',
+            '💰',
+            '📱',
+            '🌙',
+            '🍁',
+            '🍂',
+            '🍃',
+            '🌷',
+            '💎',
+            '🔪',
+            '🔫',
+            '🏀',
+            '👄',
+            '👍',
+            '🔥',
+            '💘',
+            '💓',
+            '💔',
+            '💕',
+            '💖',
+            '💗',
+            '💙',
+            '💚',
+            '💛',
+            '💜',
+            '💝',
+            '💞',
+            '💟',
+        ],
+    },
+];
+//emoji表情编码
+export function utf16toEntities(str) {
+    const patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则
+    str = str.replace(patt, (char) => {
+        let H;
+        let L;
+        let code;
+        let s;
+
+        if (char.length === 2) {
+            H = char.charCodeAt(0); // 取出高位
+            L = char.charCodeAt(1); // 取出低位
+            code = (H - 0xd800) * 0x400 + 0x10000 + L - 0xdc00; // 转换算法
+            s = `&#${code};`;
+        } else {
+            s = char;
+        }
+
+        return s;
+    });
+
+    return str;
+}
+// 表情解码
+export function entitiestoUtf16(strObj) {
+    const patt = /&#\d+;/g;
+    const arr = strObj.match(patt) || [];
+
+    let H;
+    let L;
+    let code;
+
+    for (let i = 0; i < arr.length; i += 1) {
+        code = arr[i];
+        code = code.replace('&#', '').replace(';', '');
+        // 高位
+        H = Math.floor((code - 0x10000) / 0x400) + 0xd800;
+        // 低位
+        L = ((code - 0x10000) % 0x400) + 0xdc00;
+        code = `&#${code};`;
+        const s = String.fromCharCode(H, L);
+        strObj = strObj.replace(code, s);
+    }
+    return strObj;
+}
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index f42d24a..bf1c458 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -4,8 +4,8 @@
         <div class="body">
             <div class="aside">
                 <div class="aside-header">近期会话</div>
-                <el-scrollbar class="session-list">
-                    <div v-for="(item, index) in sessionList" :key="index" class="session-item">
+                <el-scrollbar class="session-list" tag="ul">
+                    <li v-for="(item, index) in sessionList" :key="index" class="session-item">
                         <el-badge class="session-count" :hidden="item.count === 0" :max="99" :value="item.count">
                             <el-avatar circle :src="item.avatar" />
                         </el-badge>
@@ -18,7 +18,7 @@
                                 <div class="session-content">{{ item.content }}</div>
                             </div>
                         </div>
-                    </div>
+                    </li>
                 </el-scrollbar>
             </div>
             <div class="content">
@@ -34,10 +34,15 @@
                     </div>
                 </div>
                 <el-scrollbar class="message-list">
-                    <MessageItem v-for="(item, index) in sessionMessageList" :key="index" :message="item" />
+                    <message-item v-for="(item, index) in sessionMessageList" :key="index" :message="item" />
                 </el-scrollbar>
                 <div class="operation-bar">
-                    <el-button type="text">
+                    <el-scrollbar v-show="emojiVisible" class="emoji-panel" tag="ul">
+                        <li v-for="(item, index) in emojiList" :key="index" @click="handleAddEmoji(item)">
+                            {{ entitiestoUtf16(item) }}
+                        </li>
+                    </el-scrollbar>
+                    <el-button type="text" @click="emojiVisible = !emojiVisible">
                         <el-icon name="chat-smile-3-fill" size="24" />
                     </el-button>
                     <el-button type="text">
@@ -59,6 +64,7 @@
 </template>
 
 <script setup>
+    import { emojiData, entitiestoUtf16 } from '@/utils/emoji.js';
     import MessageItem from './message.vue';
     const sessionList = reactive([
         {
@@ -166,6 +172,14 @@
             name: '小可爱',
         },
     ]);
+
+    const emojiVisible = ref(false);
+    const emojiList = computed(() => emojiData.map((item) => item.list).flat());
+    const handleAddEmoji = (data) => {
+        let str = ' ' + entitiestoUtf16(data) + ' ';
+        state.message += str;
+        emojiVisible.value = false;
+    };
 </script>
 
 <style lang="less" scoped>
@@ -280,6 +294,29 @@
                 padding: @layout-space;
                 border-top: 1px solid #eee;
                 border-bottom: 1px solid #eee;
+                position: relative;
+                .emoji-panel {
+                    position: absolute;
+                    z-index: 9999;
+                    border-radius: 8px;
+                    overflow: auto;
+                    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+                    bottom: 52px;
+                    width: 300px;
+                    height: 200px;
+                    padding: 10px 6px 10px 10px;
+                    background: #eee;
+                    font-size: 20px;
+                    text-align: center;
+                    :deep(ul) {
+                        display: grid;
+                        grid-template-columns: repeat(auto-fill, 30px);
+                        column-gap: auto;
+                        li {
+                            cursor: pointer;
+                        }
+                    }
+                }
             }
             .input {
                 height: 100px;