diff --git a/code/link/link-backend/src/main/java/com/link/im/ImServer.java b/code/link/link-backend/src/main/java/com/link/im/ImServer.java
index bd9aede3..c4e6aed7 100644
--- a/code/link/link-backend/src/main/java/com/link/im/ImServer.java
+++ b/code/link/link-backend/src/main/java/com/link/im/ImServer.java
@@ -8,6 +8,8 @@ import io.netty.channel.socket.SocketChannel;
 import io.netty.channel.socket.nio.NioServerSocketChannel;
 import io.netty.handler.codec.http.HttpObjectAggregator;
 import io.netty.handler.codec.http.HttpServerCodec;
+import io.netty.handler.codec.http.cors.CorsConfig;
+import io.netty.handler.codec.http.cors.CorsHandler;
 import io.netty.handler.stream.ChunkedWriteHandler;
 import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;
 import io.netty.handler.timeout.IdleStateHandler;
@@ -53,18 +55,11 @@ public class ImServer {
                         protected void initChannel(SocketChannel ch) {
                             ChannelPipeline pipeline = ch.pipeline();
 
-                            // ===== HTTP 协议支持 =====
                             pipeline.addLast(new HttpServerCodec());
                             pipeline.addLast(new HttpObjectAggregator(65536));
                             pipeline.addLast(new ChunkedWriteHandler());
-
-                            // ===== 心跳检测 =====
-                            pipeline.addLast(new IdleStateHandler(60, 0, 0, TimeUnit.SECONDS));
-
-                            // ===== WebSocket 协议支持 =====
+                            pipeline.addLast(new CorsHandler(CorsConfig.withAnyOrigin().build()));
                             pipeline.addLast(new WebSocketServerProtocolHandler(websocketPath, null, true, 65536));
-
-                            // ===== 自定义消息处理 =====
                             pipeline.addLast(new ImWebSocketHandler());
                         }
                     });
diff --git a/code/link/link-backend/target/classes/com/link/im/ImServer$1.class b/code/link/link-backend/target/classes/com/link/im/ImServer$1.class
index cfba2d3b..b388fa4f 100644
Binary files a/code/link/link-backend/target/classes/com/link/im/ImServer$1.class and b/code/link/link-backend/target/classes/com/link/im/ImServer$1.class differ
diff --git a/code/link/link-backend/target/classes/com/link/im/ImServer.class b/code/link/link-backend/target/classes/com/link/im/ImServer.class
index 9a89959b..52370199 100644
Binary files a/code/link/link-backend/target/classes/com/link/im/ImServer.class and b/code/link/link-backend/target/classes/com/link/im/ImServer.class differ
diff --git a/code/link/link-frontend/src/App.vue b/code/link/link-frontend/src/App.vue
index c97b1623..b3b4000e 100644
--- a/code/link/link-frontend/src/App.vue
+++ b/code/link/link-frontend/src/App.vue
@@ -1,4 +1,16 @@
 <script setup>
+import { onBeforeUnmount, onMounted } from 'vue'
+import { useWebSocket } from './stores/websocketStore'
+
+const websocket = useWebSocket()
+
+onMounted(() => {
+  websocket.connect('ws://192.168.1.136:8090/ws')
+})
+
+onBeforeUnmount(() => {
+  websocket.disconnect()
+})
 </script>
 
 <template>
diff --git a/code/link/link-frontend/src/components/icon.vue b/code/link/link-frontend/src/components/icon.vue
index 9e340aac..6ceadc5f 100644
--- a/code/link/link-frontend/src/components/icon.vue
+++ b/code/link/link-frontend/src/components/icon.vue
@@ -41,7 +41,12 @@ const iconSize = computed(() => (props.size ? `${props.size}px` : '24px'))
   </i>
 </template>
 
-<style>
+<style scoped>
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .icon-spin {
   display: inline-block;
   animation: icon-spin 1s linear infinite;
diff --git a/code/link/link-frontend/src/stores/websocketStore.js b/code/link/link-frontend/src/stores/websocketStore.js
new file mode 100644
index 00000000..3b39b4f4
--- /dev/null
+++ b/code/link/link-frontend/src/stores/websocketStore.js
@@ -0,0 +1,100 @@
+import { ElNotification } from 'element-plus'
+import { onScopeDispose, ref } from 'vue'
+
+export function useWebSocket() {
+  const socket = ref(null)
+  const isConnected = ref(false)
+  const listeners = ref(new Set())
+
+  let reconnecting = false
+  let reconnectNotification = null
+
+  function connect(url) {
+    if (isConnected.value)
+      return
+    if (socket.value)
+      disconnect()
+
+    const ws = new WebSocket(url)
+    socket.value = ws
+
+    ws.onopen = () => {
+      isConnected.value = true
+      reconnecting = false
+      // 关闭重连提示
+      if (reconnectNotification) {
+        reconnectNotification.close()
+        reconnectNotification = null
+      }
+      console.log('WebSocket 已连接')
+      ElNotification({
+        title: '成功',
+        message: 'WebSocket 已连接',
+        type: 'success',
+        showClose: false,
+        duration: 2000,
+      })
+    }
+
+    ws.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data)
+        notifyListeners(message)
+      }
+      catch (err) {
+        console.error('消息解析失败:', err)
+        notifyListeners({ type: 'ERROR', data: '消息解析失败' })
+      }
+    }
+
+    ws.onclose = () => scheduleReconnect(url)
+    ws.onerror = () => scheduleReconnect(url)
+  }
+
+  function disconnect() {
+    socket.value?.close()
+    isConnected.value = false
+  }
+
+  function sendMessage(type, data) {
+    if (isConnected.value && socket.value) {
+      socket.value.send(JSON.stringify({ type, data }))
+    }
+  }
+
+  function onMessage(callback) {
+    listeners.value.add(callback)
+    return () => listeners.value.delete(callback)
+  }
+
+  function notifyListeners(message) {
+    listeners.value.forEach(cb => cb(message))
+  }
+
+  function scheduleReconnect(url) {
+    if (!reconnecting) {
+      reconnecting = true
+      reconnectNotification = ElNotification({
+        title: '提示',
+        message: 'WebSocket 连接断开，正在重连...',
+        type: 'warning',
+        showClose: false,
+        duration: 0,
+      })
+    }
+    console.log('WebSocket 即将重连...')
+    setTimeout(() => {
+      connect(url)
+    }, 3000) // 固定延迟重连，可按需改
+  }
+
+  onScopeDispose(() => disconnect())
+
+  return {
+    isConnected,
+    connect,
+    disconnect,
+    sendMessage,
+    onMessage,
+  }
+}
diff --git a/code/link/link-frontend/src/views/im/index.vue b/code/link/link-frontend/src/views/im/index.vue
index bf64b831..6662c4e2 100644
--- a/code/link/link-frontend/src/views/im/index.vue
+++ b/code/link/link-frontend/src/views/im/index.vue
@@ -36,26 +36,48 @@ import Icon from '@/components/icon.vue'
       </div>
       <div class="im__body">
         <div class="im__list">
-          <div class="im__list-input">
+          <div class="im__list-search">
             <el-input placeholder="请根据名称搜索" :prefix-icon="Search" />
           </div>
           <div class="im__list-item">
             <div class="im__list-header">
-              单聊
+              <Icon icon="tabler:message-circle" :size="16" />
+              <span class="im__list-header-title">
+                单聊
+              </span>
             </div>
             <div class="im__list-body">
-              <div class="im__chat-user">
-                <Avatar name="A" />
-
-                <div class="im__chat-user-info">
-                  <div class="im__chat-user-main">
-                    <div class="im__chat-user-name">张三</div>
-                    <div class="im__chat-user-last-time">聊天时间</div>
+              <div
+                v-for="i in 10" :key="i" class="im__chat-item im__chat-item"
+                :class="[{ 'im__chat-item--selected': i === 1 }]"
+              >
+                <el-badge
+                  is-dot
+                  color="#24e68a"
+                  :badge-style="{
+                    width: '12px',
+                    height: '12px',
+                  }"
+                  :offset="[-4, 34]"
+                >
+                  <!-- 未登录：b3b7c2 -->
+                  <Avatar name="A" class="im__chat-item-avatar" />
+                </el-badge>
+                <div class="im__chat-item-info">
+                  <div class="im__chat-item-main">
+                    <div class="im__chat-item-name">
+                      张三张三张三张三张三张三张三张三张三张三
+                    </div>
+                    <div class="im__chat-item-last-time">
+                      10:20
+                    </div>
                   </div>
 
-                  <div class="im__chat-user-message">
-                    <div class="im__chat-user-last-message">下周一起吃个饭</div>
-                    <div class="im__chat-user-unread-count">2</div>
+                  <div class="im__chat-item-message">
+                    <div class="im__chat-item-last-message">
+                      下周下周下周下周下周下周下周下周下周下周
+                    </div>
+                    <el-badge :value="100" :max="10" class="im__chat-item-unread-count" />
                   </div>
                 </div>
               </div>
@@ -63,23 +85,160 @@ import Icon from '@/components/icon.vue'
           </div>
           <div class="im__list-item">
             <div class="im__list-header">
-              群聊
+              <Icon icon="bi:people" :size="16" />
+              <span class="im__list-header-title">
+                群聊
+              </span>
             </div>
             <div class="im__list-body">
-              <div>
-                Operation feedback: enable the users to clearly perceive their
-                operations by style updates and interactive effects;
-              </div>
-              <div>
-                Visual feedback: reflect current state by updating or rearranging
-                elements of the page.
+              <div v-for="i in 10" :key="i" class="im__chat-item">
+                <Avatar name="#" class="im__chat-item-avatar" bg-color="#574b90" />
+                <div class="im__chat-item-info">
+                  <div class="im__chat-item-main">
+                    <div class="im__chat-item-name">
+                      张三张三张三张三张三张三张三张三张三张三
+                    </div>
+                    <div class="im__chat-item-last-time">
+                      10:20
+                    </div>
+                  </div>
+
+                  <div class="im__chat-item-message">
+                    <div class="im__chat-item-last-message">
+                      下周下周下周下周下周下周下周下周下周下周
+                    </div>
+                    <el-badge :value="100" :max="10" class="im__chat-item-unread-count" />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
 
         <div class="im__window">
-          chat
+          <div class="im__window-header">
+            <div class="im__window-peer">
+              <div class="im__window-peer-avatar">
+                <Avatar name="A" />
+              </div>
+              <div class="im__window-peer-info">
+                <div class="im__window-peer-name">
+                  张三
+                </div>
+                <div class="im__window-peer-desc">
+                  <div class="im__window-peer-status im__window-peer-status--online">
+                    <span>[ </span>
+                    <div class="im__window-peer-status-dot" />
+                    <span>在线</span>
+                    <span> ]</span>
+                  </div>
+                  <span>
+                    公司描述等等等...
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="im__window-actions" />
+          </div>
+          <div class="im__window-body">
+            <el-splitter layout="vertical">
+              <el-splitter-panel>
+                <div class="im__chat-main">
+                  <div class="im__chat-message im__chat-message--from">
+                    <div class="im__chat-message-avatar">
+                      <Avatar name="A" />
+                    </div>
+                    <div class="im__chat-message-body">
+                      <div class="im__chat-message-name">
+                        张三
+                      </div>
+                      <div class="im__chat-message-content">
+                        <div class="im__chat-message-content--text">
+                          这是一条文本消息这是一条文本消息这是一条文本消息这是一条文本消息这是一条文本消息这是一条文本消息这是一条文本消息这是一条文本消息
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="im__chat-message im__chat-message--to">
+                    <Avatar name="B" />
+                    <div class="im__chat-message-body">
+                      <div class="im__chat-message-name">
+                        张三
+                      </div>
+                      <div class="im__chat-message-content">
+                        <div class="im__chat-message-content--text">
+                          这是一条文本消息
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </el-splitter-panel>
+              <el-splitter-panel :min="100" :max="300" :size="150">
+                <div class="im__chat-footer">
+                  <div class="im__chat-toolbar">
+                    <Icon icon="proicons:emoji" />
+
+                    <div class="im__chat-toolbar-right">
+                      <Icon
+                        icon="solar:history-broken"
+                      />
+                    </div>
+                  </div>
+                  <div class="im__chat-editor">
+                    <div
+                      class="im__chat-editor-input"
+                      contenteditable="true"
+                    />
+                  </div>
+                  <div class="im__chat-sendarea">
+                    <el-button type="primary" size="small" class="im__chat-send">
+                      发送（回车）
+                    </el-button>
+                  </div>
+                </div>
+              </el-splitter-panel>
+            </el-splitter>
+            <div class="im__chat-group">
+              <div class="im__group-section-header">
+                <!-- <el-input placeholder="请根据名称搜索" :prefix-icon="Search" /> -->
+                <div class="im__group-section-header-title">
+                  <Icon icon="bi:people" :size="18" color="#666666" />
+                  <span class="im__group-section-header-text">群成员(222)</span>
+                </div>
+                <div class="im__group-section-header-extra">
+                  <div class="im__group-section-header--search">
+                    <Icon icon="lucide:search" :size="16" />
+                  </div>
+                </div>
+              </div>
+
+              <div class="im__group-section-body">
+                <div v-for="i in 20" :key="i" class="im__group-item">
+                  <el-badge
+                    is-dot
+                    color="#24e68a"
+                    :badge-style="{
+                      width: '12px',
+                      height: '12px',
+                    }"
+                    :offset="[-4, 34]"
+                  >
+                    <!-- 未登录：b3b7c2 -->
+                    <Avatar name="A" />
+                  </el-badge>
+                  <div class="im__group-item-info">
+                    <div class="im__group-item-name">
+                      name
+                    </div>
+                    <div class="im__group-item-desc">
+                      desc
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -96,23 +255,23 @@ import Icon from '@/components/icon.vue'
   background-color: #f5f6fa;
 
   & *::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
   }
 
   & *::-webkit-scrollbar-track {
-    background-color: #f1f1f1;
-    border-radius: 10px;
+    background-color: #fff;
+    border-radius: 3px;
   }
 
   & *::-webkit-scrollbar-thumb {
-    background-color: #888;
-    border-radius: 10px;
-    border: 2px solid #f1f1f1;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
   }
 
   & *::-webkit-scrollbar-thumb:hover {
-    background-color: #555;
+    background-color: rgba(0, 0, 0, 0.4);
   }
 
   .im__container {
@@ -208,9 +367,9 @@ import Icon from '@/components/icon.vue'
     flex-direction: column;
     min-height: 0;
 
-    .im__list-input {
+    .im__list-search {
       padding: 10px;
-      background-color: #1553f1;
+      border-bottom: 1px solid #e6e9ef;
     }
 
     .im__list-item {
@@ -218,26 +377,104 @@ import Icon from '@/components/icon.vue'
       flex-direction: column;
       flex: 1;
       min-height: 0;
+      transition: background-color 0.25s ease;
+
       .im__list-header {
         font-size: 14px;
         padding: 8px 10px;
         background-color: #f8f9fc;
         flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        .im__list-header-title {
+          margin-left: 4px;
+        }
       }
       .im__list-body {
         overflow-y: auto;
         flex: 1;
         min-height: 0;
-        .im__chat-user {
+        .im__chat-item {
           display: flex;
           align-items: center;
           height: 56px;
           width: 100%;
           padding: 0 10px;
+          overflow-x: hidden;
           &:hover {
             background-color: #f5f7fa;
             cursor: pointer;
           }
+
+          .im__chat-item-avatar {
+            flex-shrink: 0;
+          }
+
+          .im__chat-item-info {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            margin-left: 10px;
+            min-width: 0;
+
+            .im__chat-item-main,
+            .im__chat-item-message {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              width: 100%;
+            }
+            .im__chat-item-message {
+              margin-top: 4px;
+            }
+
+            .im__chat-item-name {
+              font-size: 14px;
+              font-weight: 500;
+            }
+            .im__chat-item-last-time,
+            .im__chat-item-last-message {
+              flex-shrink: 0;
+              color: #666;
+              font-size: 12px;
+            }
+
+            .im__chat-item-last-message,
+            .im__chat-item-name {
+              flex: 1;
+              min-width: 0;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+
+            .im__chat-item-last-time {
+              margin-left: 8px;
+            }
+
+            .im__chat-item-unread-count {
+              display: flex;
+              margin-left: 8px;
+            }
+          }
+        }
+
+        .im__chat-item--selected {
+          position: relative;
+          background-color: #f0f6ff;
+          transition: background-color 0.25s ease;
+
+          &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 4px;
+            bottom: 4px;
+            width: 3px;
+            background-color: #3b82f6;
+            border-radius: 2px;
+            box-shadow: 0 0 4px rgba(59, 130, 246, 0.4);
+          }
         }
       }
     }
@@ -246,8 +483,262 @@ import Icon from '@/components/icon.vue'
   .im__window {
     flex: 1;
     background-color: #fff;
-    padding: 10px;
-    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+
+    .im__window-header {
+      height: 64px;
+      border-bottom: 1px solid #e6e9ef;
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      .im__window-peer {
+        display: flex;
+        align-items: center;
+        padding: 0px 12px;
+
+        .im__window-peer-info {
+          margin-left: 8px;
+          .im__window-peer-name {
+            font-size: 16px;
+            line-height: 1;
+          }
+          .im__window-peer-desc {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            line-height: 1;
+            margin-top: 6px;
+            color: #666;
+            height: 12px;
+
+            .im__window-peer-status {
+              display: flex;
+              align-items: center;
+              margin-right: 4px;
+
+              .im__window-peer-status-dot {
+                width: 12px;
+                height: 12px;
+                border-radius: 50%;
+                margin: 0px 4px;
+              }
+            }
+            .im__window-peer-status--online {
+              .im__window-peer-status-dot {
+                background-color: #24e68a;
+              }
+            }
+            .im__window-peer-status--offline {
+              .im__window-peer-status-dot {
+                background-color: #b3b7c2;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .im__window-body {
+      flex: 1;
+      display: flex;
+      min-height: 0;
+
+      :deep(.el-splitter-panel) {
+        scrollbar-width: auto;
+      }
+      .im__chat-main {
+        padding: 16px 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        width: 100%;
+        scrollbar-gutter: stable both-edges;
+        overflow-y: auto;
+        min-width: 0;
+        background-color: #f8fafc;
+        height: 100%;
+
+        .im__chat-message {
+          display: flex;
+          width: fit-content;
+          max-width: 70%;
+          .im__chat-message-avatar {
+            flex-shrink: 0;
+          }
+          .im__chat-message-body {
+            .im__chat-message-name {
+              font-size: 14px;
+              line-height: 1;
+            }
+            .im__chat-message-content {
+              display: inline-flex;
+              flex-direction: column;
+              margin-top: 8px;
+            }
+
+            .im__chat-message-content--text {
+              background-color: #ffffff;
+              color: #000000;
+              word-break: break-all;
+              padding: 6px 12px;
+              border-radius: 4px;
+            }
+          }
+        }
+        .im__chat-message--from {
+          align-items: flex-start;
+          .im__chat-message-body {
+            margin-left: 8px;
+          }
+        }
+        .im__chat-message--to {
+          align-self: flex-end;
+          flex-direction: row-reverse;
+          .im__chat-message-body {
+            margin-right: 8px;
+            .im__chat-message-content--text {
+              background-color: #3c73ff;
+              color: #fff;
+            }
+            .im__chat-message-name {
+              text-align: right;
+            }
+          }
+        }
+      }
+
+      .im__chat-group {
+        width: 300px;
+        border-left: 1px solid #e6e9ef;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+
+        .im__group-section-header {
+          height: 46px;
+          border-bottom: 1px solid #e6e9ef;
+          display: flex;
+          align-items: center;
+          padding: 0px 8px;
+          justify-content: space-between;
+          .im__group-section-header-title {
+            display: flex;
+            align-items: center;
+          }
+          .im__group-section-header-text {
+            margin-left: 4px;
+            line-height: 1;
+            font-size: 14px;
+          }
+
+          .im__group-section-header--search {
+            cursor: pointer;
+            color: #666666;
+            &:hover {
+              color: #1553f1 !important;
+            }
+          }
+        }
+
+        .im__group-section-body {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          overflow-y: auto;
+          min-height: 0;
+
+          .im__group-item {
+            height: 56px;
+            padding: 0 10px;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            flex-shrink: 0;
+            &:hover {
+              background-color: #f5f7fa;
+            }
+
+            .im__group-item-info {
+              margin-left: 8px;
+              .im__group-item-name {
+                line-height: 1;
+                font-size: 14px;
+              }
+              .im__group-item-desc {
+                margin-top: 6px;
+                font-size: 12px;
+                color: #666;
+              }
+            }
+          }
+        }
+      }
+
+      .im__chat-footer {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        width: 100%;
+        height: 100%;
+
+        .im__chat-toolbar {
+          height: 36px;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          padding: 0px 8px;
+          gap: 8px;
+          .im__chat-toolbar-right {
+            margin-left: auto;
+          }
+        }
+
+        .im__chat-editor {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          overflow-y: auto;
+          flex: 1;
+          min-height: 0;
+          width: 100%;
+          scrollbar-gutter: stable both-edges;
+
+          .im__chat-editor-input {
+            padding: 4px;
+            flex: 1;
+            // overflow-y: auto;
+            box-sizing: border-box;
+            border: none;
+            resize: none;
+            background-color: transparent;
+            outline: none;
+
+            word-wrap: break-word;
+            word-break: break-all;
+            white-space: pre-wrap;
+
+            -webkit-user-select: text;
+            -moz-user-select: text;
+            user-select: text;
+            cursor: text;
+          }
+        }
+
+        .im__chat-sendarea {
+          height: 36px;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          margin-left: auto;
+          padding: 0px 16px;
+          .im__chat-send {
+            background-color: #1553f1;
+          }
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/code/sllog/Sllog-User-Ui/src/pages/im/components/right/index.vue b/code/sllog/Sllog-User-Ui/src/pages/im/components/right/index.vue
index cabf0ef4..90598e3c 100644
--- a/code/sllog/Sllog-User-Ui/src/pages/im/components/right/index.vue
+++ b/code/sllog/Sllog-User-Ui/src/pages/im/components/right/index.vue
@@ -490,7 +490,6 @@ function getRollbackContent(data: GetHistoryResult) {
 }
 .chat-center-item-left {
   display: flex;
-  align-items: flex-start;
   width: fit-content;
   max-width: 70%;
   flex-direction: row;
@@ -498,7 +497,6 @@ function getRollbackContent(data: GetHistoryResult) {
 }
 .chat-center-item-right {
   display: flex;
-  align-items: flex-start;
   width: fit-content;
   max-width: 70%;
   flex-direction: row-reverse;