From 25980988762a41605eec047ad7e0407b64a757c4 Mon Sep 17 00:00:00 2001
From: ZhangAo <hi_itao@163.com>
Date: Mon, 13 Oct 2025 17:32:02 +0800
Subject: [PATCH] u

---
 .../src/main/java/com/link/im/ImServer.java   |  11 +-
 .../classes/com/link/im/ImServer$1.class      | Bin 2099 -> 2289 bytes
 .../target/classes/com/link/im/ImServer.class | Bin 4370 -> 4370 bytes
 code/link/link-frontend/src/App.vue           |  12 +
 .../link-frontend/src/components/icon.vue     |   7 +-
 .../src/stores/websocketStore.js              | 100 ++++
 .../link/link-frontend/src/views/im/index.vue | 559 ++++++++++++++++--
 .../src/pages/im/components/right/index.vue   |   2 -
 8 files changed, 646 insertions(+), 45 deletions(-)
 create mode 100644 code/link/link-frontend/src/stores/websocketStore.js

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 cfba2d3b237f0c5553f53b0b65b6e014459ea407..b388fa4f9723bb6c65297ff776fa60c6b573fad5 100644
GIT binary patch
delta 876
zcmZ{j%TE(g6vlsdrtQ$7NI|FwMG=dX7HqZhP+sy<R1^gj>l*=~2`NcIjjNilcj0Vg
z;U7UziWrS<-S}U)H^#)cFrEt)OcN)Wd(Y#$-}&a;Gi&~DW!cZaH$MO;nDkObtIdAe
ziV4te(P44Y#;yHRbXs(oD6lD_+oH#&m^O=Eo742!^fO>n!l1>FO@cEvWt_DbwyDst
zbGERbx42+2qVO!ur4~bRMPPOLu~HYEU+Q_~B_E?)_EAlZkD#`ixZ=Dr#yn#_#<}YJ
zFj~zZ*PIqJu9}^nMld|JkXeik$TB>co}Qn{SX}opLDJ%;k6YZ<Ja-gB8tkl@(W1ND
z)3N)`S99EK;K*8+E2NxHMr~||YG5J#Fg2?vd6HV1>q|c!&7@{iX@%AQC^bJllToyX
zn?^KaO~IK^9?_{t=zPO}@(T9@&83LtnJNpA!VnK{)hI2<IA7fJ*($jtP=3Gel~|^{
zL25BLAXbm;hU|7E`UVxrVXTU0a8Oo{zCl{4lQpo7;t+?$(-*7R6d|$Qit1;6Tu6@u
zrfI(mKo?qxI-8!c>;`+*Db3*@e~V=>(d>GUD`~!?EE#!?+Mryy%Dp-E7UnCGIV$tP
zU19YyRnUPYqZXu7Ca8;Hx|x#CS*DklGG%pwsN2>+_OI#{8VQSPix)C45fPi$-w6Ie
z(I1r)T7N=Px-H&F^do_F_U#t`w<|v35>UP?&0@PG(z3(q*MXzNbVp;vC2w$y<6F3d
U{6_U+l}oHjcK!5=@Edsl00#t=egFUf

delta 830
zcmah{TW=CU6#j-?nC_M~TLcOsiWL=Tb<tkXQfsxK6l<$)FH)Nrf}0dmA;Mzf6Mga3
z#B382`4zQ|c!|bm|BDZO&`0ALB-Qw!lg!My%=zX!m;HfVt@-80`%eJIu&yA82^EKt
z>ct=~a9re=RN)kQ8dDsXBrrfl52iUTtLR0FW5!9*VofQyf~zX}Fw2oq2{Eg}gKHeu
zRrtiyoJv2;apXB}Fu1IZay=?18T>Y5zMbtNWApZR_B?RYjRh>a5yBBS!a_>m7Q-?7
zz8tXk94XgrH}1f&_Z{O>7)y3sN~YrFs$MZI>#4p`tUTB>Yr0i_WL6uNK1Z5i6)iLO
z%fYei#tK#i^j*6p<$DTP6UsgNt7N!N;WRONvE|)ellxdR{IK|>s5h+gre3O6N{w30
ztXTRIVJ}z876Ui3vx^HEgXqow^J$vlWGtW0|L0YFg+VQrN@l$tO(v7}OV@fRNIe0V
zriqG>B+(AzC>&Ihejdt2NOy_WU=+vc^pi*QX$Voeg(TwWf0CUHp)CzEC{F=Erf<|T
z0ok%2bED}+zoNW`*2aMG4%~s&5&0wJg7g8NLShf>Ee<i+qqO1u+wUv1;qMxE2+)BD
zokKJ)zyxTXh{YsvOe2SBm^3cWkijctJFFue63x~D?G|E)6K#%d8h~Mf>n0Ebv<xLM
zLJ=Z?QF4ilmBjF848B3&_ve3>#oZ~9(#1bR0Ww+69-wN%5ZB4>KoaLV_jv*r<}r-p
M1W77I1nH*r6CDML5dZ)H

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 9a89959b17fe3829ca878973ba0b58209572fee3..52370199aa8d47848640bbca9b000c3a6d39bc94 100644
GIT binary patch
delta 146
zcmbQFG)Za0eO^ZC$q#tFSTz`g7&JHQ^BFV7>M-yy=rV{i7%<2)7y?;F43-SW3~mf2
z3?U4r3=s^@3~3B541GY6`3yb`iy3?wmNB?9ENAdwSPSHD1oF2qcrt8d@M72r<nIOY
o4*=<-K>9d?-{k%L3weVW1Q~)Elz`@GF@#Re6$k=4;($O90F_-IkN^Mx

delta 146
zcmbQFG)Za0eO^Y%$q#tFSk)MW7}PiG^BFV7YBBIIXfud2=rPDM=riat7%*5e7&5pq
z7%_w}7&AmLcrc_fcrx@ccr(mr2xM5y5X7*I!G~cvgD=BcAb%r}zlFh%VJm|_!%iT7
qFOYu#NFN2##~Fer@8@608_pmIG)IXcl0l0hYI3eX5YQ0^1cCscOCQ_-

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;