vue-chat-kit 0.1.2 → 0.1.3

package/dist/vue-chat-kit.es.js

@@ -1,10 +1,10 @@
-import { ref as m, computed as oe, nextTick as Ke, watch as mt, resolveComponent as ie, createBlock as H, openBlock as i, withCtx as b, createElementVNode as t, createElementBlock as f, createCommentVNode as F, createVNode as h, createTextVNode as se, onMounted as vt, onUnmounted as gt, unref as u, Fragment as he, renderList as pe, normalizeClass as j, resolveDynamicComponent as yt, toDisplayString as w, isRef as we, withModifiers as Oe, withDirectives as xt, withKeys as bt, vModelText as _t, normalizeStyle as wt } from "vue";
-import { ChatDotRound as Me, UserFilled as Xe, Bell as kt, Setting as Ct, Search as Ee, Plus as Ut, MoreFilled as At, Document as St, Download as Vt, Folder as Ye, Picture as Ft, ChatLineRound as Rt, Camera as It } from "@element-plus/icons-vue";
-import $e from "dayjs";
-import { ElMessage as X } from "element-plus";
-class Lt {
-  constructor(e, a = {}) {
-    this.userId = e, this.wsUrl = a.wsUrl || "", this.socket = null, this.reconnectAttempts = 0, this.maxReconnectAttempts = a.maxReconnectAttempts || 5, this.reconnectDelay = a.reconnectDelay || 3e3, this.handlers = {
+import { ref as f, computed as re, nextTick as Ne, watch as yt, resolveComponent as ce, openBlock as r, createBlock as q, withCtx as b, createElementVNode as t, createElementBlock as v, createCommentVNode as I, createVNode as p, createTextVNode as ne, onMounted as _t, onUnmounted as bt, unref as u, Fragment as fe, renderList as me, normalizeClass as X, resolveDynamicComponent as Ct, toDisplayString as k, isRef as we, withModifiers as Je, withDirectives as kt, withKeys as wt, vModelText as Ut, normalizeStyle as xt } from "vue";
+import { ChatDotRound as Ee, UserFilled as Qe, Bell as At, Setting as St, Search as Ke, Plus as Vt, MoreFilled as Ft, Document as Rt, Download as It, Folder as Ze, Picture as Lt, ChatLineRound as Tt, Camera as zt } from "@element-plus/icons-vue";
+import We from "dayjs";
+import { ElMessage as Y } from "element-plus";
+class Dt {
+  constructor(e, s = {}) {
+    this.userId = e, this.wsUrl = s.wsUrl || "", this.socket = null, this.reconnectAttempts = 0, this.maxReconnectAttempts = s.maxReconnectAttempts || 5, this.reconnectDelay = s.reconnectDelay || 3e3, this.handlers = {
       message: [],
       open: [],
       close: [],
@@ -22,10 +22,10 @@ class Lt {
           console.log("[VueChatKit] WebSocket 连接成功"), this.isConnecting = !1, this.reconnectAttempts = 0, this.emit("open");
         }, this.socket.onmessage = (e) => {
           try {
-            const a = e.data;
-            this.emit("message", a);
-          } catch (a) {
-            console.error("[VueChatKit] WebSocket 消息解析失败", a);
+            const s = e.data;
+            this.emit("message", s);
+          } catch (s) {
+            console.error("[VueChatKit] WebSocket 消息解析失败", s);
           }
         }, this.socket.onclose = (e) => {
           console.log("[VueChatKit] WebSocket 连接关闭", e.code), this.isConnecting = !1, this.emit("close", e), !this.manualClose && e.code !== 1e3 && this.reconnect();
@@ -40,40 +40,40 @@ class Lt {
   /**
    * 发送消息
    */
-  send(e, a, o = "text", R = "", L = "", z = 0) {
+  send(e, s, o = "text", F = "", T = "", z = 0) {
     if (this.isConnected()) {
-      const k = JSON.stringify({
+      const w = JSON.stringify({
         to: e,
-        msg: a,
+        msg: s,
         type: o,
-        fileUrl: R,
-        fileName: L,
+        fileUrl: F,
+        fileName: T,
         fileSize: z
       });
-      return this.socket.send(k), !0;
+      return this.socket.send(w), !0;
     }
     return console.warn("[VueChatKit] WebSocket 连接未建立，无法发送消息"), !1;
   }
   /**
    * 注册事件监听
    */
-  on(e, a) {
-    this.handlers[e] && this.handlers[e].push(a);
+  on(e, s) {
+    this.handlers[e] && this.handlers[e].push(s);
   }
   /**
    * 移除事件监听
    */
-  off(e, a) {
+  off(e, s) {
     if (this.handlers[e]) {
-      const o = this.handlers[e].indexOf(a);
+      const o = this.handlers[e].indexOf(s);
       o > -1 && this.handlers[e].splice(o, 1);
     }
   }
   /**
    * 触发事件
    */
-  emit(e, ...a) {
-    this.handlers[e] && this.handlers[e].forEach((o) => o(...a));
+  emit(e, ...s) {
+    this.handlers[e] && this.handlers[e].forEach((o) => o(...s));
   }
   /**
    * 重连
@@ -99,17 +99,17 @@ class Lt {
     return this.socket && this.socket.readyState === WebSocket.OPEN;
   }
 }
-class ke extends Error {
-  constructor(e, a, o, R) {
-    super(e), this.name = "RequestError", this.status = a || 0, this.code = o || 0, this.data = R;
+class Ue extends Error {
+  constructor(e, s, o, F) {
+    super(e), this.name = "RequestError", this.status = s || 0, this.code = o || 0, this.data = F;
   }
 }
-class Tt {
+class Mt {
   constructor(e = {}) {
-    this.baseUrl = e.baseUrl || "", this.timeout = e.timeout || 1e4, this.headers = e.headers || {}, this.requestInterceptors = [], this.responseInterceptors = [], this.addRequestInterceptor((a) => (a.body instanceof FormData || (a.headers = {
+    this.baseUrl = e.baseUrl || "", this.timeout = e.timeout || 1e4, this.headers = e.headers || {}, this.requestInterceptors = [], this.responseInterceptors = [], this.addRequestInterceptor((s) => (s.body instanceof FormData || (s.headers = {
       "Content-Type": "application/json",
-      ...a.headers
-    }), a));
+      ...s.headers
+    }), s));
   }
   /**
    * 添加请求拦截器
@@ -127,79 +127,79 @@ class Tt {
    * 超时控制
    */
   timeoutPromise(e) {
-    return new Promise((a, o) => {
+    return new Promise((s, o) => {
       setTimeout(() => {
-        o(new ke("请求超时", 408, 408));
+        o(new Ue("请求超时", 408, 408));
       }, e);
     });
   }
   /**
    * 核心请求方法
    */
-  async request(e, a = {}) {
-    const { method: o = "GET", headers: R = {}, body: L, params: z } = a;
-    let k = e.startsWith("http") ? e : `${this.baseUrl}${e}`, C = {
+  async request(e, s = {}) {
+    const { method: o = "GET", headers: F = {}, body: T, params: z } = s;
+    let w = e.startsWith("http") ? e : `${this.baseUrl}${e}`, U = {
       method: o,
-      headers: { ...this.headers, ...R },
-      body: L,
+      headers: { ...this.headers, ...F },
+      body: T,
       params: z
     };
-    this.requestInterceptors.forEach((v) => {
-      C = v(C);
+    this.requestInterceptors.forEach((m) => {
+      U = m(U);
     });
     const V = {
-      method: C.method,
-      headers: C.headers,
+      method: U.method,
+      headers: U.headers,
       credentials: "include"
     };
-    if (C.body && o !== "GET" && (C.body instanceof FormData ? V.body = C.body : typeof C.body == "object" ? V.body = JSON.stringify(C.body) : V.body = C.body), C.params) {
-      const v = new URLSearchParams();
-      for (const _ in C.params)
-        C.params[_] !== void 0 && C.params[_] !== null && C.params[_] !== "" && v.append(_, C.params[_]);
-      const x = v.toString();
-      x && (k += (k.includes("?") ? "&" : "?") + x);
+    if (U.body && o !== "GET" && (U.body instanceof FormData ? V.body = U.body : typeof U.body == "object" ? V.body = JSON.stringify(U.body) : V.body = U.body), U.params) {
+      const m = new URLSearchParams();
+      for (const C in U.params)
+        U.params[C] !== void 0 && U.params[C] !== null && U.params[C] !== "" && m.append(C, U.params[C]);
+      const _ = m.toString();
+      _ && (w += (w.includes("?") ? "&" : "?") + _);
     }
     try {
-      let x = await Promise.race([
-        fetch(k, V),
+      let _ = await Promise.race([
+        fetch(w, V),
         this.timeoutPromise(this.timeout)
       ]);
-      if (this.responseInterceptors.forEach((B) => {
-        x = B(x);
-      }), !x.ok)
-        throw new ke(
-          `HTTP ${x.status}: ${x.statusText}`,
-          x.status,
-          x.status
+      if (this.responseInterceptors.forEach((N) => {
+        _ = N(_);
+      }), !_.ok)
+        throw new Ue(
+          `HTTP ${_.status}: ${_.statusText}`,
+          _.status,
+          _.status
         );
-      const _ = x.headers.get("content-type");
-      let I;
-      return _ && _.includes("application/json") ? I = await x.json() : I = await x.text(), I;
-    } catch (v) {
-      throw v instanceof ke ? v : new ke(
-        v instanceof Error ? v.message : "网络错误",
+      const C = _.headers.get("content-type");
+      let R;
+      return C && C.includes("application/json") ? R = await _.json() : R = await _.text(), R;
+    } catch (m) {
+      throw m instanceof Ue ? m : new Ue(
+        m instanceof Error ? m.message : "网络错误",
         0,
         0
       );
     }
   }
   // 便捷方法
-  get(e, a, o) {
-    return this.request(e, { ...o, method: "GET", params: a });
+  get(e, s, o) {
+    return this.request(e, { ...o, method: "GET", params: s });
   }
-  post(e, a, o) {
-    return this.request(e, { ...o, method: "POST", body: a });
+  post(e, s, o) {
+    return this.request(e, { ...o, method: "POST", body: s });
   }
-  put(e, a, o) {
-    return this.request(e, { ...o, method: "PUT", body: a });
+  put(e, s, o) {
+    return this.request(e, { ...o, method: "PUT", body: s });
   }
-  delete(e, a) {
-    return this.request(e, { ...a, method: "DELETE" });
+  delete(e, s) {
+    return this.request(e, { ...s, method: "DELETE" });
   }
 }
-class zt {
-  constructor(e, a = null) {
-    this.config = e, this.endpoints = e.api.endpoints, this.customAdapter = e.api.adapter, a ? this.http = a : this.http = new Tt({
+class Be {
+  constructor(e, s = null) {
+    this.config = e, this.endpoints = e.api.endpoints, this.customAdapter = e.api.adapter, s ? this.http = s : this.http = new Mt({
       baseUrl: e.api.baseUrl,
       headers: e.headers
     });
@@ -207,8 +207,8 @@ class zt {
   /**
    * 使用自定义适配器或默认实现
    */
-  async _call(e, ...a) {
-    return this.customAdapter && typeof this.customAdapter[e] == "function" ? this.customAdapter[e](...a) : this[`_${e}`](...a);
+  async _call(e, ...s) {
+    return this.customAdapter && typeof this.customAdapter[e] == "function" ? this.customAdapter[e](...s) : this[`_${e}`](...s);
   }
   // ========== 好友相关 ==========
   /**
@@ -232,11 +232,11 @@ class zt {
   /**
    * 添加好友
    */
-  async addFriend(e, a) {
-    return this._call("addFriend", e, a);
+  async addFriend(e, s) {
+    return this._call("addFriend", e, s);
   }
-  async _addFriend(e, a) {
-    return this.http.post(this.endpoints.addFriend, { currentUser: e, friendUser: a });
+  async _addFriend(e, s) {
+    return this.http.post(this.endpoints.addFriend, { currentUser: e, friendUser: s });
   }
   /**
    * 获取好友申请列表
@@ -250,39 +250,39 @@ class zt {
   /**
    * 同意好友申请
    */
-  async agreeFriend(e, a) {
-    return this._call("agreeFriend", e, a);
+  async agreeFriend(e, s) {
+    return this._call("agreeFriend", e, s);
   }
-  async _agreeFriend(e, a) {
-    return this.http.post(this.endpoints.agreeFriend, { applyUser: e, friendUser: a });
+  async _agreeFriend(e, s) {
+    return this.http.post(this.endpoints.agreeFriend, { applyUser: e, friendUser: s });
   }
   /**
    * 设置好友聊天状态
    */
-  async setChatStatus(e, a, o = 1) {
-    return this._call("setChatStatus", e, a, o);
+  async setChatStatus(e, s, o = 1) {
+    return this._call("setChatStatus", e, s, o);
   }
-  async _setChatStatus(e, a, o) {
-    return this.http.post(this.endpoints.setChatStatus, null, { params: { currentUser: e, friendUser: a, status: o } });
+  async _setChatStatus(e, s, o) {
+    return this.http.post(this.endpoints.setChatStatus, null, { params: { currentUser: e, friendUser: s, status: o } });
   }
   // ========== 消息相关 ==========
   /**
    * 获取聊天历史
    */
-  async getHistory(e, a) {
-    return this._call("getHistory", e, a);
+  async getHistory(e, s) {
+    return this._call("getHistory", e, s);
   }
-  async _getHistory(e, a) {
-    return this.http.get(this.endpoints.getHistory, { fromUser: e, toUser: a });
+  async _getHistory(e, s) {
+    return this.http.get(this.endpoints.getHistory, { fromUser: e, toUser: s });
   }
   /**
    * 标记消息已读
    */
-  async setRead(e, a) {
-    return this._call("setRead", e, a);
+  async setRead(e, s) {
+    return this._call("setRead", e, s);
   }
-  async _setRead(e, a) {
-    return this.http.post(this.endpoints.setRead, { currentUser: e, friendUser: a });
+  async _setRead(e, s) {
+    return this.http.post(this.endpoints.setRead, { currentUser: e, friendUser: s });
   }
   // ========== 文件相关 ==========
   /**
@@ -292,8 +292,8 @@ class zt {
     return this._call("uploadFile", e);
   }
   async _uploadFile(e) {
-    const a = new FormData();
-    return a.append("file", e), this.http.post(this.endpoints.uploadFile, a);
+    const s = new FormData();
+    return s.append("file", e), this.http.post(this.endpoints.uploadFile, s);
   }
   // ========== 用户相关 ==========
   /**
@@ -308,11 +308,11 @@ class zt {
   /**
    * 更新用户信息
    */
-  async updateUserInfo(e, a) {
-    return this._call("updateUserInfo", e, a);
+  async updateUserInfo(e, s) {
+    return this._call("updateUserInfo", e, s);
   }
-  async _updateUserInfo(e, a) {
-    return this.http.put(this.endpoints.updateUserInfo, { username: e, ...a });
+  async _updateUserInfo(e, s) {
+    return this.http.put(this.endpoints.updateUserInfo, { username: e, ...s });
   }
   /**
    * 获取用户头像
@@ -326,195 +326,209 @@ class zt {
   /**
    * 上传头像
    */
-  async uploadAvatar(e, a) {
-    return this._call("uploadAvatar", e, a);
+  async uploadAvatar(e, s) {
+    return this._call("uploadAvatar", e, s);
   }
-  async _uploadAvatar(e, a) {
+  async _uploadAvatar(e, s) {
     const o = new FormData();
-    return o.append("file", e), o.append("username", a), this.http.post(this.endpoints.uploadAvatar, o);
+    return o.append("file", e), o.append("username", s), this.http.post(this.endpoints.uploadAvatar, o);
   }
 }
-function jt(y) {
-  const e = new zt(y);
-  let a = null;
-  const o = y.user.username, R = m(y.user.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${o}`), L = m({
+const $t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ChatApi: Be,
+  default: Be
+}, Symbol.toStringTag, { value: "Module" }));
+function Et(y) {
+  const e = new Be(y);
+  let s = null;
+  const o = y.user.username, F = f(y.user.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${o}`), T = f({
     username: o,
     nickname: y.user.nickname || "",
     email: y.user.email || "",
     phone: y.user.phone || "",
     bio: y.user.bio || ""
-  }), z = m(!1), k = m([]), C = m([]), V = m([]), v = m(""), x = m(""), _ = m(""), I = m(null), B = m(!1), Y = m(""), G = m([]), J = m(!1), ae = m([]), ee = m(!1), g = oe(() => {
-    let n = C.value;
-    if (x.value) {
-      const r = x.value.toLowerCase();
-      n = n.filter(
-        (c) => c.username?.toLowerCase().includes(r)
+  }), z = f(!1), w = f([]), U = f([]), V = f([]), m = f(""), _ = f(""), C = f(""), R = f(null), N = f(!1), G = f(""), J = f([]), Q = f(!1), le = f([]), te = f(!1), g = re(() => {
+    let a = U.value;
+    if (_.value) {
+      const i = _.value.toLowerCase();
+      a = a.filter(
+        (c) => {
+          var S;
+          return (S = c.username) == null ? void 0 : S.toLowerCase().includes(i);
+        }
       );
     }
-    return n.map((r) => ({
-      id: r.username,
-      name: r.username,
-      avatar: r.avatar || R.value,
-      online: r.online,
-      lastMsg: r.lastMsg || "暂无消息",
-      lastTime: r.lastTime,
-      unread: r.unReadNum || 0
+    return a.map((i) => ({
+      id: i.username,
+      name: i.username,
+      avatar: i.avatar || F.value,
+      online: i.online,
+      lastMsg: i.lastMsg || "暂无消息",
+      lastTime: i.lastTime,
+      unread: i.unReadNum || 0
     }));
-  }), U = oe(() => {
-    let n = k.value;
-    if (x.value) {
-      const r = x.value.toLowerCase();
-      n = n.filter(
-        (c) => c.username?.toLowerCase().includes(r)
+  }), x = re(() => {
+    let a = w.value;
+    if (_.value) {
+      const i = _.value.toLowerCase();
+      a = a.filter(
+        (c) => {
+          var S;
+          return (S = c.username) == null ? void 0 : S.toLowerCase().includes(i);
+        }
       );
     }
-    return n.map((r) => ({
-      id: r.username,
-      name: r.username,
-      avatar: r.avatar || R.value,
-      online: r.online,
-      isChatting: r.isChatting
+    return a.map((i) => ({
+      id: i.username,
+      name: i.username,
+      avatar: i.avatar || F.value,
+      online: i.online,
+      isChatting: i.isChatting
     }));
-  }), A = oe(() => Y.value ? G.value.filter(
-    (n) => n.username?.toLowerCase().includes(Y.value.toLowerCase())
-  ) : G.value), E = oe(() => g.value.find((n) => n.id === v.value) || null), ne = oe(() => V.value.map((n) => {
-    const r = n.type === "file" || n.fileUrl || n.fileName, c = n.fileName || n.msgContent;
+  }), A = re(() => G.value ? J.value.filter(
+    (a) => {
+      var i;
+      return (i = a.username) == null ? void 0 : i.toLowerCase().includes(G.value.toLowerCase());
+    }
+  ) : J.value), E = re(() => g.value.find((a) => a.id === m.value) || null), ie = re(() => V.value.map((a) => {
+    const i = a.type === "file" || a.fileUrl || a.fileName, c = a.fileName || a.msgContent;
     return {
-      text: n.msgContent,
-      isSelf: n.sendUsername === o,
-      time: n.createTime,
-      sendUsername: n.sendUsername,
-      type: r ? "file" : "text",
-      fileType: ve(c) ? "image" : ye(c),
-      fileUrl: n.fileUrl || "",
+      text: a.msgContent,
+      isSelf: a.sendUsername === o,
+      time: a.createTime,
+      sendUsername: a.sendUsername,
+      type: i ? "file" : "text",
+      fileType: ge(c) ? "image" : ye(c),
+      fileUrl: a.fileUrl || "",
       fileName: c,
-      fileSize: n.fileSize || 0
+      fileSize: a.fileSize || 0
     };
-  })), P = (n) => $e(n).format("HH:mm"), me = (n) => {
-    if (!n) return "";
-    const r = $e(), c = $e(n);
-    return r.isSame(c, "day") ? c.format("HH:mm") : r.diff(c, "day") === 1 ? "昨天" : r.diff(c, "day") < 7 ? ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][c.day()] : c.format("MM/DD");
-  }, ve = (n) => {
-    if (!n) return !1;
-    const r = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"], c = n.split(".").pop().toLowerCase();
-    return r.includes(c);
-  }, ye = (n) => {
-    if (!n) return "default";
-    const r = n.split(".").pop().toLowerCase();
-    return ["xls", "xlsx"].includes(r) ? "excel" : ["pdf"].includes(r) ? "pdf" : ["doc", "docx"].includes(r) ? "docx" : "default";
-  }, q = () => {
-    Ke(() => {
-      I.value && (I.value.scrollTop = I.value.scrollHeight);
+  })), P = (a) => We(a).format("HH:mm"), he = (a) => {
+    if (!a) return "";
+    const i = We(), c = We(a);
+    return i.isSame(c, "day") ? c.format("HH:mm") : i.diff(c, "day") === 1 ? "昨天" : i.diff(c, "day") < 7 ? ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][c.day()] : c.format("MM/DD");
+  }, ge = (a) => {
+    if (!a) return !1;
+    const i = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"], c = a.split(".").pop().toLowerCase();
+    return i.includes(c);
+  }, ye = (a) => {
+    if (!a) return "default";
+    const i = a.split(".").pop().toLowerCase();
+    return ["xls", "xlsx"].includes(i) ? "excel" : ["pdf"].includes(i) ? "pdf" : ["doc", "docx"].includes(i) ? "docx" : "default";
+  }, O = () => {
+    Ne(() => {
+      R.value && (R.value.scrollTop = R.value.scrollHeight);
     });
-  }, $ = async () => {
+  }, K = async () => {
     try {
-      const r = (await e.getFriends(o)).data || [];
-      k.value = r, C.value = r.filter((c) => c.isChatting === 1);
-      for (const c of C.value)
+      const i = (await e.getFriends(o)).data || [];
+      w.value = i, U.value = i.filter((c) => c.isChatting === 1);
+      for (const c of U.value)
         try {
-          const te = (await e.getHistory(o, c.username)).data || [];
-          c.unReadNum = te.filter(
-            (Z) => Z.isRead === 0 && Z.sendUsername === c.username
+          const se = (await e.getHistory(o, c.username)).data || [];
+          c.unReadNum = se.filter(
+            (ee) => ee.isRead === 0 && ee.sendUsername === c.username
           ).length;
         } catch {
           c.unReadNum = 0;
         }
-    } catch (n) {
-      console.error("[VueChatKit] 获取好友列表失败", n);
+    } catch (a) {
+      console.error("[VueChatKit] 获取好友列表失败", a);
     }
-  }, le = async (n) => {
+  }, oe = async (a) => {
     try {
-      const r = await e.getHistory(o, n);
-      V.value = r.data || [], q();
-    } catch (r) {
-      console.error("[VueChatKit] 获取聊天历史失败", r);
+      const i = await e.getHistory(o, a);
+      V.value = i.data || [], O();
+    } catch (i) {
+      console.error("[VueChatKit] 获取聊天历史失败", i);
     }
-  }, We = async (n) => {
+  }, He = async (a) => {
     try {
-      await e.setRead(o, n), $();
-    } catch (r) {
-      console.error("[VueChatKit] 标记已读失败", r);
+      await e.setRead(o, a), K();
+    } catch (i) {
+      console.error("[VueChatKit] 标记已读失败", i);
     }
-  }, Ce = async (n) => {
-    v.value = n.id, await le(n.id), await We(n.id), q();
-  }, Ue = async (n, r = 1) => {
+  }, xe = async (a) => {
+    m.value = a.id, await oe(a.id), await He(a.id), O();
+  }, Ae = async (a, i = 1) => {
     try {
-      return await e.setChatStatus(o, n, r), await $(), !0;
+      return await e.setChatStatus(o, a, i), await K(), !0;
     } catch (c) {
       return console.error("[VueChatKit] 设置聊天状态失败", c), !1;
     }
-  }, xe = () => {
-    if (!_.value.trim() || !v.value || !a) return;
-    if (a.send(v.value, _.value.trim(), "text")) {
-      const r = {
-        msgContent: _.value.trim(),
+  }, _e = () => {
+    if (!C.value.trim() || !m.value || !s) return;
+    if (s.send(m.value, C.value.trim(), "text")) {
+      const i = {
+        msgContent: C.value.trim(),
         sendUsername: o,
-        receiveUsername: v.value,
+        receiveUsername: m.value,
         createTime: /* @__PURE__ */ new Date(),
         isRead: 0,
         type: "text"
       };
-      V.value.push(r), _.value = "", q(), setTimeout(() => {
-        le(v.value), $();
+      V.value.push(i), C.value = "", O(), setTimeout(() => {
+        oe(m.value), K();
       }, 300);
     }
-  }, be = async (n) => {
-    if (!v.value || !a) return !1;
+  }, be = async (a) => {
+    if (!m.value || !s) return !1;
     try {
-      const r = await e.uploadFile(n);
-      if (r.code === 200 && r.data) {
-        const { fileUrl: c, fileName: T } = r.data;
-        if (a.send(
-          v.value,
-          T,
+      const i = await e.uploadFile(a);
+      if (i.code === 200 && i.data) {
+        const { fileUrl: c, fileName: S } = i.data;
+        if (s.send(
+          m.value,
+          S,
           "file",
           c,
-          T,
-          n.size
+          S,
+          a.size
         )) {
-          const Z = {
-            msgContent: T,
+          const ee = {
+            msgContent: S,
             sendUsername: o,
-            receiveUsername: v.value,
+            receiveUsername: m.value,
             createTime: /* @__PURE__ */ new Date(),
             isRead: 0,
             type: "file",
             fileUrl: c,
-            fileName: T,
-            fileSize: n.size
+            fileName: S,
+            fileSize: a.size
           };
-          return V.value.push(Z), q(), !0;
+          return V.value.push(ee), O(), !0;
         }
       }
       return !1;
-    } catch (r) {
-      return console.error("[VueChatKit] 发送文件失败", r), !1;
+    } catch (i) {
+      return console.error("[VueChatKit] 发送文件失败", i), !1;
     }
-  }, _e = async (n, r) => {
-    if (!(!v.value || !a)) {
-      if (r && r.trim() && a.send(v.value, r.trim(), "text")) {
-        const T = {
-          msgContent: r.trim(),
+  }, Ce = async (a, i) => {
+    if (!(!m.value || !s)) {
+      if (i && i.trim() && s.send(m.value, i.trim(), "text")) {
+        const S = {
+          msgContent: i.trim(),
           sendUsername: o,
-          receiveUsername: v.value,
+          receiveUsername: m.value,
           createTime: /* @__PURE__ */ new Date(),
           isRead: 0,
           type: "text"
         };
-        V.value.push(T);
+        V.value.push(S);
       }
-      for (const c of n) {
-        const T = c.file || c;
-        await be(T);
+      for (const c of a) {
+        const S = c.file || c;
+        await be(S);
       }
       setTimeout(() => {
-        le(v.value), $();
+        oe(m.value), K();
       }, 300);
     }
-  }, Ae = (n) => {
+  }, Se = (a) => {
     try {
       try {
-        const c = JSON.parse(n);
+        const c = JSON.parse(a);
         if (c.to || c.msg)
           return {
             to: c.to,
@@ -526,182 +540,182 @@ function jt(y) {
           };
       } catch {
       }
-      const r = n.match(/^\[(.+?)\]：(.+)$/);
-      if (r)
+      const i = a.match(/^\[(.+?)\]：(.+)$/);
+      if (i)
         return {
-          username: r[1],
-          content: r[2],
+          username: i[1],
+          content: i[2],
           type: "text"
         };
-    } catch (r) {
-      console.error("[VueChatKit] 解析消息失败", r);
+    } catch (i) {
+      console.error("[VueChatKit] 解析消息失败", i);
     }
     return null;
-  }, Se = (n) => {
-    if (n.includes("【状态变更】")) {
-      const c = /【状态变更】(.+?) 已(上线|下线)/, T = n.match(c);
-      if (T) {
-        const te = T[1], Z = T[2] === "上线", ue = k.value.find((W) => W.username === te);
-        ue && (ue.online = Z);
+  }, Ve = (a) => {
+    if (a.includes("【状态变更】")) {
+      const c = /【状态变更】(.+?) 已(上线|下线)/, S = a.match(c);
+      if (S) {
+        const se = S[1], ee = S[2] === "上线", ve = w.value.find((B) => B.username === se);
+        ve && (ve.online = ee);
       }
       return;
     }
-    const r = Ae(n);
-    if (r) {
-      if (v.value) {
+    const i = Se(a);
+    if (i) {
+      if (m.value) {
         try {
           let c = {
-            msgContent: r.content,
-            sendUsername: r.username || v.value,
+            msgContent: i.content,
+            sendUsername: i.username || m.value,
             receiveUsername: o,
             createTime: /* @__PURE__ */ new Date(),
             isRead: 0,
-            type: r.type || "text",
-            fileUrl: r.fileUrl || "",
-            fileName: r.fileName || "",
-            fileSize: r.fileSize || 0
+            type: i.type || "text",
+            fileUrl: i.fileUrl || "",
+            fileName: i.fileName || "",
+            fileSize: i.fileSize || 0
           };
-          V.value.push(c), q();
+          V.value.push(c), O();
         } catch (c) {
           console.error("[VueChatKit] 添加临时消息失败", c);
         }
-        le(v.value);
+        oe(m.value);
       }
-      $();
+      K();
     }
-  }, Ve = () => {
-    const n = `${y.api.websocketUrl}?userId=${o}`;
-    a = new Lt(o, {
-      wsUrl: n,
+  }, Fe = () => {
+    const a = `${y.api.websocketUrl}?userId=${o}`;
+    s = new Dt(o, {
+      wsUrl: a,
       maxReconnectAttempts: y.websocket.maxReconnectAttempts,
       reconnectDelay: y.websocket.reconnectDelay
-    }), a.on("message", Se), a.connect();
-  }, Fe = () => {
-    a && (a.close(), a = null);
-  }, Re = async () => {
-    B.value = !0, Y.value = "", await Ie();
+    }), s.on("message", Ve), s.connect();
+  }, Re = () => {
+    s && (s.close(), s = null);
   }, Ie = async () => {
-    J.value = !0;
+    N.value = !0, G.value = "", await Le();
+  }, Le = async () => {
+    Q.value = !0;
     try {
-      const n = await e.getAvailableUsers(o);
-      G.value = n?.data || [];
-    } catch (n) {
-      console.error("[VueChatKit] 获取可用用户失败", n);
+      const a = await e.getAvailableUsers(o);
+      J.value = (a == null ? void 0 : a.data) || [];
+    } catch (a) {
+      console.error("[VueChatKit] 获取可用用户失败", a);
     } finally {
-      J.value = !1;
+      Q.value = !1;
     }
-  }, Le = async (n) => {
+  }, Te = async (a) => {
     try {
-      await e.addFriend(o, n.username), await $(), B.value = !1;
-    } catch (r) {
-      console.error("[VueChatKit] 添加好友失败", r);
+      await e.addFriend(o, a.username), await K(), N.value = !1;
+    } catch (i) {
+      console.error("[VueChatKit] 添加好友失败", i);
     }
-  }, Q = async () => {
-    ee.value = !0;
+  }, Z = async () => {
+    te.value = !0;
     try {
-      const n = await e.getApplyList(o);
-      ae.value = n.data || [];
-    } catch (n) {
-      console.error("[VueChatKit] 获取好友申请列表失败", n);
+      const a = await e.getApplyList(o);
+      le.value = a.data || [];
+    } catch (a) {
+      console.error("[VueChatKit] 获取好友申请列表失败", a);
     } finally {
-      ee.value = !1;
+      te.value = !1;
     }
-  }, ce = async (n) => {
+  }, de = async (a) => {
     try {
-      await e.agreeFriend(n, o), await Q(), await $();
-    } catch (r) {
-      console.error("[VueChatKit] 同意好友申请失败", r);
+      await e.agreeFriend(a, o), await Z(), await K();
+    } catch (i) {
+      console.error("[VueChatKit] 同意好友申请失败", i);
     }
   }, D = async () => {
     try {
-      const n = await e.getUserAvatar(o);
-      n.code === 200 && n.data && (R.value = n.data);
-    } catch (n) {
-      console.warn("[VueChatKit] 加载头像失败", n);
+      const a = await e.getUserAvatar(o);
+      a.code === 200 && a.data && (F.value = a.data);
+    } catch (a) {
+      console.warn("[VueChatKit] 加载头像失败", a);
     }
-  }, M = (n) => {
-    R.value = n;
-  }, de = async () => {
+  }, M = (a) => {
+    F.value = a;
+  }, ue = async () => {
     z.value = !0;
     try {
-      const n = await e.getUserInfo(o);
-      n.code === 200 && n.data && (L.value = {
-        ...L.value,
-        ...n.data
+      const a = await e.getUserInfo(o);
+      a.code === 200 && a.data && (T.value = {
+        ...T.value,
+        ...a.data
       });
-    } catch (n) {
-      console.error("[VueChatKit] 获取用户信息失败", n);
+    } catch (a) {
+      console.error("[VueChatKit] 获取用户信息失败", a);
     } finally {
       z.value = !1;
     }
-  }, N = async (n) => {
+  }, H = async (a) => {
     try {
-      return (await e.updateUserInfo(o, n)).code === 200 ? (L.value = {
-        ...L.value,
-        ...n
+      return (await e.updateUserInfo(o, a)).code === 200 ? (T.value = {
+        ...T.value,
+        ...a
       }, !0) : !1;
-    } catch (r) {
-      return console.error("[VueChatKit] 更新用户信息失败", r), !1;
+    } catch (i) {
+      return console.error("[VueChatKit] 更新用户信息失败", i), !1;
     }
-  }, K = () => {
-    v.value = "", V.value = [], _.value = "", x.value = "";
+  }, W = () => {
+    m.value = "", V.value = [], C.value = "", _.value = "";
   };
   return D(), {
     // 状态
     myUsername: o,
-    myAvatar: R,
-    userInfo: L,
+    myAvatar: F,
+    userInfo: T,
     loadingUserInfo: z,
-    friendList: k,
-    chatList: C,
-    filteredFriendList: U,
+    friendList: w,
+    chatList: U,
+    filteredFriendList: x,
     chatMsgList: V,
-    currentSelectName: v,
-    searchText: x,
-    inputText: _,
-    messagesContainer: I,
+    currentSelectName: m,
+    searchText: _,
+    inputText: C,
+    messagesContainer: R,
     filteredUsers: g,
     filteredAvailableUsers: A,
     currentUser: E,
-    currentMessages: ne,
-    addFriendDialogVisible: B,
-    addFriendSearchText: Y,
-    availableUsers: G,
-    loadingAvailableUsers: J,
-    friendApplyList: ae,
-    loadingFriendApply: ee,
+    currentMessages: ie,
+    addFriendDialogVisible: N,
+    addFriendSearchText: G,
+    availableUsers: J,
+    loadingAvailableUsers: Q,
+    friendApplyList: le,
+    loadingFriendApply: te,
     // 方法
     formatTime: P,
-    formatLastTime: me,
-    scrollToBottom: q,
-    getFriendList: $,
-    getChatHistory: le,
-    setFriendToChatStatus: Ue,
-    selectUser: Ce,
-    sendMessage: xe,
+    formatLastTime: he,
+    scrollToBottom: O,
+    getFriendList: K,
+    getChatHistory: oe,
+    setFriendToChatStatus: Ae,
+    selectUser: xe,
+    sendMessage: _e,
     sendFile: be,
-    sendFilesAndText: _e,
-    initWebSocket: Ve,
-    closeWebSocket: Fe,
-    reset: K,
-    openAddFriendDialog: Re,
-    addFriend: Le,
-    loadFriendApplyList: Q,
-    agreeFriend: ce,
+    sendFilesAndText: Ce,
+    initWebSocket: Fe,
+    closeWebSocket: Re,
+    reset: W,
+    openAddFriendDialog: Ie,
+    addFriend: Te,
+    loadFriendApplyList: Z,
+    agreeFriend: de,
     updateMyAvatar: M,
-    getUserInfo: de,
-    updateUserInfo: N
+    getUserInfo: ue,
+    updateUserInfo: H
   };
 }
-const Ge = (y, e) => {
-  const a = y.__vccOpts || y;
-  for (const [o, R] of e)
-    a[o] = R;
-  return a;
-}, Dt = { class: "avatar-crop-container" }, Mt = ["src"], Et = { class: "crop-overlay" }, $t = { class: "crop-box" }, Kt = {
+const et = (y, e) => {
+  const s = y.__vccOpts || y;
+  for (const [o, F] of e)
+    s[o] = F;
+  return s;
+}, Kt = { class: "avatar-crop-container" }, Wt = ["src"], Bt = { class: "crop-overlay" }, Nt = { class: "crop-box" }, Ht = {
   key: 0,
   class: "crop-mask"
-}, Wt = { class: "zoom-controls" }, Bt = {
+}, qt = { class: "zoom-controls" }, Pt = {
   __name: "AvatarCrop",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -709,119 +723,119 @@ const Ge = (y, e) => {
   },
   emits: ["update:modelValue", "confirm"],
   setup(y, { emit: e }) {
-    const a = y, o = e, R = oe({
-      get: () => a.modelValue,
+    const s = y, o = e, F = re({
+      get: () => s.modelValue,
       set: (g) => o("update:modelValue", g)
-    }), L = m(""), z = m(null), k = m(null), C = m(null), V = m(1), v = m({ x: 0, y: 0 }), x = m(!1), _ = m({ x: 0, y: 0 }), I = m({ width: 0, height: 0 });
-    mt(() => a.src, (g) => {
-      g && (L.value = g, V.value = 1, v.value = { x: 0, y: 0 });
+    }), T = f(""), z = f(null), w = f(null), U = f(null), V = f(1), m = f({ x: 0, y: 0 }), _ = f(!1), C = f({ x: 0, y: 0 }), R = f({ width: 0, height: 0 });
+    yt(() => s.src, (g) => {
+      g && (T.value = g, V.value = 1, m.value = { x: 0, y: 0 });
     });
-    const B = () => {
-      Ke(() => {
-        if (z.value && k.value) {
-          const g = z.value, U = k.value, A = Math.min(U.clientWidth, U.clientHeight);
-          g.naturalWidth > g.naturalHeight ? (I.value.height = A, I.value.width = g.naturalWidth / g.naturalHeight * A) : (I.value.width = A, I.value.height = g.naturalHeight / g.naturalWidth * A), v.value = {
-            x: (A - I.value.width) / 2,
-            y: (A - I.value.height) / 2
+    const N = () => {
+      Ne(() => {
+        if (z.value && w.value) {
+          const g = z.value, x = w.value, A = Math.min(x.clientWidth, x.clientHeight);
+          g.naturalWidth > g.naturalHeight ? (R.value.height = A, R.value.width = g.naturalWidth / g.naturalHeight * A) : (R.value.width = A, R.value.height = g.naturalHeight / g.naturalWidth * A), m.value = {
+            x: (A - R.value.width) / 2,
+            y: (A - R.value.height) / 2
           };
         }
       });
-    }, Y = (g) => {
-      x.value = !0;
-      const U = g.touches ? g.touches[0].clientX : g.clientX, A = g.touches ? g.touches[0].clientY : g.clientY;
-      _.value = { x: U - v.value.x, y: A - v.value.y }, document.addEventListener("mousemove", G), document.addEventListener("mouseup", J), document.addEventListener("touchmove", G), document.addEventListener("touchend", J);
     }, G = (g) => {
-      if (!x.value) return;
-      const U = g.touches ? g.touches[0].clientX : g.clientX, A = g.touches ? g.touches[0].clientY : g.clientY;
-      v.value = {
-        x: U - _.value.x,
-        y: A - _.value.y
+      _.value = !0;
+      const x = g.touches ? g.touches[0].clientX : g.clientX, A = g.touches ? g.touches[0].clientY : g.clientY;
+      C.value = { x: x - m.value.x, y: A - m.value.y }, document.addEventListener("mousemove", J), document.addEventListener("mouseup", Q), document.addEventListener("touchmove", J), document.addEventListener("touchend", Q);
+    }, J = (g) => {
+      if (!_.value) return;
+      const x = g.touches ? g.touches[0].clientX : g.clientX, A = g.touches ? g.touches[0].clientY : g.clientY;
+      m.value = {
+        x: x - C.value.x,
+        y: A - C.value.y
       };
-    }, J = () => {
-      x.value = !1, document.removeEventListener("mousemove", G), document.removeEventListener("mouseup", J), document.removeEventListener("touchmove", G), document.removeEventListener("touchend", J);
-    }, ae = () => {
-      const g = document.createElement("canvas"), U = g.getContext("2d"), A = 200;
+    }, Q = () => {
+      _.value = !1, document.removeEventListener("mousemove", J), document.removeEventListener("mouseup", Q), document.removeEventListener("touchmove", J), document.removeEventListener("touchend", Q);
+    }, le = () => {
+      const g = document.createElement("canvas"), x = g.getContext("2d"), A = 200;
       g.width = A, g.height = A;
-      const E = z.value, ne = C.value, P = k.value;
-      if (E && ne && P) {
-        const me = ne.getBoundingClientRect(), ve = P.getBoundingClientRect(), ye = (me.left - ve.left - v.value.x) / V.value, q = (me.top - ve.top - v.value.y) / V.value, $ = me.width / V.value;
-        U.drawImage(
+      const E = z.value, ie = U.value, P = w.value;
+      if (E && ie && P) {
+        const he = ie.getBoundingClientRect(), ge = P.getBoundingClientRect(), ye = (he.left - ge.left - m.value.x) / V.value, O = (he.top - ge.top - m.value.y) / V.value, K = he.width / V.value;
+        x.drawImage(
           E,
-          ye * (E.naturalWidth / I.value.width),
-          q * (E.naturalHeight / I.value.height),
-          $ * (E.naturalWidth / I.value.width),
-          $ * (E.naturalHeight / I.value.height),
+          ye * (E.naturalWidth / R.value.width),
+          O * (E.naturalHeight / R.value.height),
+          K * (E.naturalWidth / R.value.width),
+          K * (E.naturalHeight / R.value.height),
           0,
           0,
           A,
           A
-        ), g.toBlob((le) => {
-          o("confirm", { file: le, url: g.toDataURL("image/png") }), R.value = !1;
+        ), g.toBlob((oe) => {
+          o("confirm", { file: oe, url: g.toDataURL("image/png") }), F.value = !1;
         }, "image/png");
       }
-    }, ee = () => {
-      L.value = "", V.value = 1, v.value = { x: 0, y: 0 };
+    }, te = () => {
+      T.value = "", V.value = 1, m.value = { x: 0, y: 0 };
     };
-    return (g, U) => {
-      const A = ie("el-slider"), E = ie("el-button"), ne = ie("el-dialog");
-      return i(), H(ne, {
-        modelValue: R.value,
-        "onUpdate:modelValue": U[2] || (U[2] = (P) => R.value = P),
+    return (g, x) => {
+      const A = ce("el-slider"), E = ce("el-button"), ie = ce("el-dialog");
+      return r(), q(ie, {
+        modelValue: F.value,
+        "onUpdate:modelValue": x[2] || (x[2] = (P) => F.value = P),
         title: "裁剪头像",
         width: "500px",
         "close-on-click-modal": !1,
-        onClosed: ee
+        onClosed: te
       }, {
         footer: b(() => [
-          h(E, {
-            onClick: U[1] || (U[1] = (P) => R.value = !1)
+          p(E, {
+            onClick: x[1] || (x[1] = (P) => F.value = !1)
           }, {
-            default: b(() => [...U[3] || (U[3] = [
-              se("取消", -1)
+            default: b(() => [...x[3] || (x[3] = [
+              ne("取消", -1)
             ])]),
             _: 1
           }),
-          h(E, {
+          p(E, {
             type: "primary",
-            onClick: ae
+            onClick: le
           }, {
-            default: b(() => [...U[4] || (U[4] = [
-              se("确定", -1)
+            default: b(() => [...x[4] || (x[4] = [
+              ne("确定", -1)
             ])]),
             _: 1
           })
         ]),
         default: b(() => [
-          t("div", Dt, [
+          t("div", Kt, [
             t("div", {
               class: "crop-area",
               ref_key: "cropAreaRef",
-              ref: k
+              ref: w
             }, [
               t("img", {
-                src: L.value,
+                src: T.value,
                 ref_key: "imageRef",
                 ref: z,
                 class: "crop-image",
-                onLoad: B,
-                onMousedown: Y,
-                onTouchstart: Y
-              }, null, 40, Mt),
-              t("div", Et, [
-                t("div", $t, [
+                onLoad: N,
+                onMousedown: G,
+                onTouchstart: G
+              }, null, 40, Wt),
+              t("div", Bt, [
+                t("div", Nt, [
                   t("div", {
                     class: "crop-border",
                     ref_key: "cropBoxRef",
-                    ref: C
+                    ref: U
                   }, null, 512)
                 ])
               ]),
-              x.value ? (i(), f("div", Kt)) : F("", !0)
+              _.value ? (r(), v("div", Ht)) : I("", !0)
             ], 512),
-            t("div", Wt, [
-              h(A, {
+            t("div", qt, [
+              p(A, {
                 modelValue: V.value,
-                "onUpdate:modelValue": U[0] || (U[0] = (P) => V.value = P),
+                "onUpdate:modelValue": x[0] || (x[0] = (P) => V.value = P),
                 min: 0.5,
                 max: 3,
                 step: 0.1,
@@ -834,61 +848,61 @@ const Ge = (y, e) => {
       }, 8, ["modelValue"]);
     };
   }
-}, Nt = /* @__PURE__ */ Ge(Bt, [["__scopeId", "data-v-4e4a992b"]]), Ht = { class: "chat-container flex h-[680px] bg-white overflow-hidden" }, Pt = { class: "w-16 theme-white flex flex-col items-center gap-2 bg-gray-50 border-r" }, qt = ["src"], Ot = ["onClick"], Xt = {
+}, Ot = /* @__PURE__ */ et(Pt, [["__scopeId", "data-v-4e4a992b"]]), jt = { class: "chat-container" }, Xt = { class: "sidebar-nav" }, Yt = ["src"], Gt = ["onClick"], Jt = {
   key: 0,
-  class: "absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-xs text-white flex items-center justify-center"
-}, Yt = { class: "w-72 bg-[#f5f5f5] border-r border-gray-200 flex flex-col" }, Gt = { class: "p-3" }, Jt = { class: "flex-1 overflow-y-auto min-h-0" }, Qt = { key: 0 }, Zt = ["onClick", "onContextmenu"], es = { class: "relative flex-shrink-0" }, ts = ["src", "alt"], ss = {
+  class: "nav-badge"
+}, Qt = { class: "content-panel" }, Zt = { class: "search-bar" }, es = { class: "content-scroll" }, ts = { key: 0 }, ss = ["onClick", "onContextmenu"], as = { class: "friend-avatar-wrapper" }, ns = ["src", "alt"], ls = {
   key: 0,
-  class: "absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"
-}, as = { class: "ml-3 flex-1 overflow-hidden" }, ns = { class: "flex justify-between items-center" }, ls = { class: "font-medium text-gray-800 text-sm" }, rs = { class: "text-xs text-gray-400" }, os = { class: "flex justify-between items-center mt-1" }, is = { class: "text-xs text-gray-500 truncate pr-2" }, cs = {
+  class: "online-indicator"
+}, is = { class: "friend-info" }, os = { class: "friend-header" }, rs = { class: "friend-name" }, cs = { class: "last-time" }, ds = { class: "friend-preview" }, us = { class: "last-msg" }, vs = {
   key: 0,
-  class: "bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5 min-w-[18px] text-center"
-}, ds = { key: 1 }, us = { class: "p-3" }, fs = { class: "w-11 h-11 bg-green-500 rounded-lg flex items-center justify-center" }, hs = ["onClick"], ps = { class: "relative flex-shrink-0" }, ms = ["src", "alt"], vs = { class: "ml-3" }, gs = { class: "font-medium text-gray-800 text-sm" }, ys = { key: 2 }, xs = { class: "flex items-center" }, bs = ["src", "alt"], _s = { class: "ml-3" }, ws = { class: "font-medium text-gray-800 text-sm" }, ks = { class: "flex-1 flex flex-col min-w-0 bg-white" }, Cs = {
+  class: "unread-badge"
+}, ps = { key: 1 }, fs = { class: "add-friend-section" }, ms = { class: "add-friend-icon" }, hs = ["onClick"], gs = { class: "friend-avatar-wrapper" }, ys = ["src", "alt"], _s = { class: "friend-info" }, bs = { class: "friend-name" }, Cs = { key: 2 }, ks = { class: "request-info" }, ws = ["src", "alt"], Us = { class: "request-details" }, xs = { class: "request-username" }, As = { class: "chat-area" }, Ss = {
   key: 0,
-  class: "flex-1 flex flex-col min-h-0"
-}, Us = { class: "flex-1 flex flex-col items-center justify-center p-8 bg-[#f5f5f5]" }, As = ["src", "alt"], Ss = { class: "text-xl font-medium text-gray-800 mb-2" }, Vs = { class: "flex items-center gap-2 mb-8" }, Fs = { class: "text-sm text-gray-500" }, Rs = {
+  class: "friend-profile"
+}, Vs = ["src", "alt"], Fs = { class: "profile-name" }, Rs = { class: "profile-status" }, Is = {
   key: 1,
-  class: "flex-1 flex flex-col min-h-0"
-}, Is = { class: "h-14 border-b border-gray-200 flex items-center justify-between px-4 bg-white" }, Ls = { class: "flex items-center gap-3" }, Ts = { class: "font-medium text-gray-800" }, zs = { class: "flex items-center gap-3 text-gray-500" }, js = { class: "flex-shrink-0" }, Ds = ["src"], Ms = {
+  class: "chat-window"
+}, Ls = { class: "chat-header" }, Ts = { class: "chat-title" }, zs = { class: "chat-name" }, Ds = { class: "chat-actions" }, Ms = { class: "message-avatar" }, $s = ["src"], Es = {
   key: 0,
-  class: "text-xs text-gray-500 mb-1 ml-1"
-}, Es = { class: "relative group" }, $s = ["onClick"], Ks = ["src", "alt"], Ws = {
+  class: "sender-name"
+}, Ks = { class: "message-bubble-wrapper" }, Ws = ["onClick"], Bs = ["src", "alt"], Ns = {
   key: 0,
-  class: "absolute left-1 bottom-0 text-white"
-}, Bs = ["onClick"], Ns = { class: "w-10 h-10 flex items-center justify-center rounded-lg flex-shrink-0" }, Hs = { class: "flex-1 min-w-0" }, Ps = { key: 0 }, qs = { class: "bg-white border-t border-gray-200" }, Os = {
+  class: "image-size"
+}, Hs = ["onClick"], qs = { class: "file-content" }, Ps = { class: "file-icon" }, Os = { class: "file-info" }, js = { class: "file-name" }, Xs = { class: "file-meta" }, Ys = { key: 0 }, Gs = { class: "input-area" }, Js = {
   key: 0,
-  class: "px-3 py-2 border-b border-gray-100 flex flex-wrap gap-2"
-}, Xs = {
+  class: "pending-files"
+}, Qs = {
   key: 0,
-  class: "relative w-20 h-20 rounded-lg overflow-hidden border border-gray-200"
-}, Ys = ["src", "alt"], Gs = ["onClick"], Js = {
+  class: "pending-image-wrapper"
+}, Zs = ["src", "alt"], ea = ["onClick"], ta = {
   key: 1,
-  class: "relative w-24 h-20 rounded-lg border border-gray-200 bg-gray-50 flex flex-col items-center justify-center p-1"
-}, Qs = { class: "text-xs text-gray-500 truncate w-full text-center px-1" }, Zs = ["onClick"], ea = {
+  class: "pending-file-wrapper"
+}, sa = { class: "pending-file-name" }, aa = ["onClick"], na = {
   key: 1,
-  class: "flex items-center p-3 gap-2"
-}, ta = { class: "px-3 pb-3" }, sa = ["onKeydown"], aa = { class: "flex justify-end px-3 pb-3" }, na = {
+  class: "input-actions"
+}, la = { class: "input-wrapper" }, ia = ["onKeydown"], oa = { class: "send-btn-wrapper" }, ra = {
   key: 2,
-  class: "flex-1 flex items-center justify-center flex-col bg-[#f5f5f5]"
-}, la = { class: "text-gray-400" }, ra = {
+  class: "empty-state"
+}, ca = { class: "empty-text" }, da = {
   key: 0,
-  class: "w-64 bg-[#f5f5f5] border-l border-gray-200 flex flex-col"
-}, oa = { class: "flex-1 p-4" }, ia = { class: "flex flex-col items-center" }, ca = ["src", "alt"], da = { class: "mt-3 font-medium text-gray-800 text-lg" }, ua = { class: "mb-4" }, fa = { class: "relative" }, ha = { class: "max-h-[400px] overflow-y-auto" }, pa = { class: "flex items-center" }, ma = ["src", "alt"], va = { class: "ml-3" }, ga = { class: "font-medium text-gray-800" }, ya = { class: "flex flex-col" }, xa = { class: "flex flex-col items-center mb-8 pb-6 border-b border-gray-100" }, ba = { class: "relative mb-4" }, _a = ["src"], wa = { class: "text-center" }, ka = { class: "font-semibold text-gray-800 text-xl" }, Ca = { class: "text-sm text-gray-500 mt-1" }, Ua = { class: "space-y-5" }, Aa = { class: "flex items-center justify-between mb-2" }, Sa = { class: "text-gray-700 font-semibold flex items-center gap-2" }, Va = { class: "bg-gray-50 rounded-xl p-6 space-y-5" }, Fa = {
+  class: "detail-panel"
+}, ua = { class: "detail-content" }, va = { class: "detail-profile" }, pa = ["src", "alt"], fa = { class: "detail-name" }, ma = { class: "search-users-wrapper" }, ha = { class: "search-users-input" }, ga = { class: "users-list-scroll" }, ya = { class: "available-user-info" }, _a = ["src", "alt"], ba = { class: "available-user-name" }, Ca = { class: "settings-container" }, ka = { class: "settings-avatar-section" }, wa = { class: "settings-avatar-wrapper" }, Ua = ["src"], xa = { class: "settings-user-display" }, Aa = { class: "settings-nickname" }, Sa = { class: "settings-username" }, Va = { class: "settings-form-section" }, Fa = { class: "settings-form-header" }, Ra = { class: "settings-form-title" }, Ia = { class: "settings-form" }, La = { class: "settings-form-item" }, Ta = {
   key: 1,
-  class: "text-gray-800 bg-white rounded-lg px-4 py-3 border border-gray-200"
-}, Ra = {
+  class: "settings-form-value"
+}, za = { class: "settings-form-item" }, Da = {
   key: 1,
-  class: "text-gray-800 bg-white rounded-lg px-4 py-3 border border-gray-200"
-}, Ia = {
+  class: "settings-form-value"
+}, Ma = { class: "settings-form-item" }, $a = {
   key: 1,
-  class: "text-gray-800 bg-white rounded-lg px-4 py-3 border border-gray-200"
-}, La = {
+  class: "settings-form-value"
+}, Ea = { class: "settings-form-item" }, Ka = {
   key: 1,
-  class: "text-gray-800 bg-white rounded-lg px-4 py-3 border border-gray-200 min-h-[80px]"
-}, Ta = {
+  class: "settings-form-value bio-value"
+}, Wa = {
   key: 0,
-  class: "flex gap-3 justify-end pt-2"
-}, za = {
+  class: "settings-form-actions"
+}, Ba = {
   __name: "ChatWindow",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -897,406 +911,409 @@ const Ge = (y, e) => {
   },
   emits: ["update:modelValue", "open", "close", "message", "send", "error"],
   setup(y, { emit: e }) {
-    const a = y, o = e, R = oe({
-      get: () => a.modelValue,
+    const s = y, o = e, F = re({
+      get: () => s.modelValue,
       set: (d) => o("update:modelValue", d)
     }), {
-      myUsername: L,
+      myUsername: T,
       myAvatar: z,
-      userInfo: k,
-      loadingUserInfo: C,
+      userInfo: w,
+      loadingUserInfo: U,
       friendList: V,
-      filteredFriendList: v,
-      searchText: x,
-      inputText: _,
-      messagesContainer: I,
-      filteredUsers: B,
-      filteredAvailableUsers: Y,
-      currentUser: G,
-      currentMessages: J,
-      addFriendDialogVisible: ae,
-      addFriendSearchText: ee,
+      filteredFriendList: m,
+      searchText: _,
+      inputText: C,
+      messagesContainer: R,
+      filteredUsers: N,
+      filteredAvailableUsers: G,
+      currentUser: J,
+      currentMessages: Q,
+      addFriendDialogVisible: le,
+      addFriendSearchText: te,
       availableUsers: g,
-      loadingAvailableUsers: U,
+      loadingAvailableUsers: x,
       friendApplyList: A,
       loadingFriendApply: E,
-      formatTime: ne,
+      formatTime: ie,
       formatLastTime: P,
-      scrollToBottom: me,
-      getFriendList: ve,
+      scrollToBottom: he,
+      getFriendList: ge,
       getChatHistory: ye,
-      setFriendToChatStatus: q,
-      selectUser: $,
-      sendMessage: le,
-      sendFile: We,
-      sendFilesAndText: Ce,
-      initWebSocket: Ue,
-      closeWebSocket: xe,
+      setFriendToChatStatus: O,
+      selectUser: K,
+      sendMessage: oe,
+      sendFile: He,
+      sendFilesAndText: xe,
+      initWebSocket: Ae,
+      closeWebSocket: _e,
       reset: be,
-      openAddFriendDialog: _e,
-      addFriend: Ae,
-      loadFriendApplyList: Se,
-      agreeFriend: Ve,
-      updateMyAvatar: Fe,
-      getUserInfo: Re,
-      updateUserInfo: Ie
-    } = jt(a.config), Le = oe(() => {
-      const d = [{ id: "chat", icon: Me, badge: 0 }];
-      return a.config.modules.friends && d.push({ id: "friends", icon: Xe, badge: 0 }), a.config.modules.apply && d.push({ id: "apply", icon: kt, badge: A.value?.length || 0 }), d;
-    }), Q = m("chat"), ce = m(null), D = m(null), M = m(null), de = m(!1), N = m(!1), K = m({ nickname: "", email: "", phone: "", bio: "" }), n = m(!1), r = m(!1), c = m(!1), T = m(!1), te = m(null), Z = m(""), ue = m(null), W = m([]), re = m({ visible: !1, x: 0, y: 0, chat: null }), Qe = (d, l) => {
-      d.preventDefault(), d.stopPropagation(), re.value = { visible: !0, x: d.clientX, y: d.clientY, chat: l };
-    }, Te = () => {
-      re.value.visible = !1;
-    }, Ze = async () => {
-      if (!re.value.chat) return;
-      await q(re.value.chat.id, 0) && ce.value === re.value.chat.id && (ce.value = null, D.value = null), Te();
-    }, ze = (d) => {
-      ce.value = d.id, D.value = d, M.value = null, de.value = !1, $({
+      openAddFriendDialog: Ce,
+      addFriend: Se,
+      loadFriendApplyList: Ve,
+      agreeFriend: Fe,
+      updateMyAvatar: Re,
+      getUserInfo: Ie,
+      updateUserInfo: Le
+    } = Et(s.config), Te = re(() => {
+      var l;
+      const d = [{ id: "chat", icon: Ee, badge: 0 }];
+      return s.config.modules.friends && d.push({ id: "friends", icon: Qe, badge: 0 }), s.config.modules.apply && d.push({ id: "apply", icon: At, badge: ((l = A.value) == null ? void 0 : l.length) || 0 }), d;
+    }), Z = f("chat"), de = f(null), D = f(null), M = f(null), ue = f(!1), H = f(!1), W = f({ nickname: "", email: "", phone: "", bio: "" }), a = f(!1), i = f(!1), c = f(!1), S = f(!1), se = f(null), ee = f(""), ve = f(null), B = f([]), pe = f({ visible: !1, x: 0, y: 0, chat: null }), ze = () => {
+      pe.value.visible = !1;
+    }, st = async () => {
+      if (!pe.value.chat) return;
+      await O(pe.value.chat.id, 0) && de.value === pe.value.chat.id && (de.value = null, D.value = null), ze();
+    }, De = (d) => {
+      de.value = d.id, D.value = d, M.value = null, ue.value = !1, K({
         id: d.id,
         name: d.name,
         avatar: d.avatar,
         online: d.online
       });
-    }, et = (d) => {
-      M.value = d, ce.value = null, D.value = null;
-    }, tt = async () => {
+    }, at = (d) => {
+      M.value = d, de.value = null, D.value = null;
+    }, nt = async () => {
       if (!M.value) return;
-      if (await q(M.value.id)) {
-        Q.value = "chat", await Ke();
-        const l = B.value.find((p) => p.id === M.value.id);
-        l && ze(l), M.value = null;
+      if (await O(M.value.id)) {
+        Z.value = "chat", await Ne();
+        const l = N.value.find((h) => h.id === M.value.id);
+        l && De(l), M.value = null;
       }
-    }, st = () => {
-      r.value = !0;
-    }, at = () => {
-      te.value?.click();
-    }, nt = () => {
-      ue.value?.click();
-    }, lt = (d) => {
+    }, lt = () => {
+      i.value = !0;
+    }, it = () => {
+      var d;
+      (d = se.value) == null || d.click();
+    }, ot = () => {
+      var d;
+      (d = ve.value) == null || d.click();
+    }, rt = (d) => {
       const l = Array.from(d.target.files || []);
       if (l.length !== 0) {
-        for (const p of l) {
-          if (p.size > 50 * 1024 * 1024) {
-            X.warning(`文件 ${p.name} 超过50MB，已跳过`);
+        for (const h of l) {
+          if (h.size > 50 * 1024 * 1024) {
+            Y.warning(`文件 ${h.name} 超过50MB，已跳过`);
             continue;
           }
-          const S = URL.createObjectURL(p);
-          W.value.push({
+          const L = URL.createObjectURL(h);
+          B.value.push({
             id: Date.now() + Math.random(),
-            file: p,
-            name: p.name,
-            size: p.size,
-            type: p.type,
-            previewUrl: S,
-            isImage: p.type.startsWith("image/")
+            file: h,
+            name: h.name,
+            size: h.size,
+            type: h.type,
+            previewUrl: L,
+            isImage: h.type.startsWith("image/")
           });
         }
-        ue.value && (ue.value.value = "");
+        ve.value && (ve.value.value = "");
       }
-    }, Be = (d) => {
-      const l = W.value[d];
-      l.previewUrl && URL.revokeObjectURL(l.previewUrl), W.value.splice(d, 1);
-    }, Ne = (d) => {
+    }, qe = (d) => {
+      const l = B.value[d];
+      l.previewUrl && URL.revokeObjectURL(l.previewUrl), B.value.splice(d, 1);
+    }, Pe = (d) => {
       if (d === 0) return "0 B";
-      const l = 1024, p = ["B", "KB", "MB", "GB"], S = Math.floor(Math.log(d) / Math.log(l));
-      return parseFloat((d / Math.pow(l, S)).toFixed(2)) + " " + p[S];
-    }, He = async () => {
-      if (!_.value.trim() && W.value.length === 0) return;
-      const d = [...W.value], l = _.value;
-      _.value = "", W.value.forEach((p) => {
-        p.previewUrl && URL.revokeObjectURL(p.previewUrl);
-      }), W.value = [], await Ce(d, l), o("send", { text: l, files: d });
-    }, rt = (d) => {
-      const l = d.clipboardData?.items;
+      const l = 1024, h = ["B", "KB", "MB", "GB"], L = Math.floor(Math.log(d) / Math.log(l));
+      return parseFloat((d / Math.pow(l, L)).toFixed(2)) + " " + h[L];
+    }, Oe = async () => {
+      if (!C.value.trim() && B.value.length === 0) return;
+      const d = [...B.value], l = C.value;
+      C.value = "", B.value.forEach((h) => {
+        h.previewUrl && URL.revokeObjectURL(h.previewUrl);
+      }), B.value = [], await xe(d, l), o("send", { text: l, files: d });
+    }, ct = (d) => {
+      var h;
+      const l = (h = d.clipboardData) == null ? void 0 : h.items;
       if (l) {
-        for (const p of l)
-          if (p.kind === "file") {
-            const S = p.getAsFile();
-            if (S) {
-              if (S.size > 50 * 1024 * 1024) {
-                X.warning(`文件 ${S.name} 超过50MB，已跳过`);
+        for (const L of l)
+          if (L.kind === "file") {
+            const $ = L.getAsFile();
+            if ($) {
+              if ($.size > 50 * 1024 * 1024) {
+                Y.warning(`文件 ${$.name} 超过50MB，已跳过`);
                 continue;
               }
-              const ge = URL.createObjectURL(S);
-              W.value.push({
+              const ae = URL.createObjectURL($);
+              B.value.push({
                 id: Date.now() + Math.random(),
-                file: S,
-                name: S.name,
-                size: S.size,
-                type: S.type,
-                previewUrl: ge,
-                isImage: S.type.startsWith("image/")
+                file: $,
+                name: $.name,
+                size: $.size,
+                type: $.type,
+                previewUrl: ae,
+                isImage: $.type.startsWith("image/")
               });
             }
           }
       }
-    }, Pe = (d) => {
+    }, je = (d) => {
       if (!d) {
-        X.warning("文件地址无效");
+        Y.warning("文件地址无效");
         return;
       }
       window.open(d, "_blank");
-    }, ot = (d) => {
+    }, dt = (d) => {
       console.warn("图片加载失败", d);
-    }, it = (d) => {
+    }, ut = (d) => {
       const l = d.target.files[0];
       if (!l) return;
       if (!l.type.startsWith("image/")) {
-        X.error("只能上传图片文件");
+        Y.error("只能上传图片文件");
         return;
       }
       if (l.size > 5 * 1024 * 1024) {
-        X.error("图片大小不能超过 5MB");
+        Y.error("图片大小不能超过 5MB");
         return;
       }
-      const p = new FileReader();
-      p.onload = (S) => {
-        Z.value = S.target.result, c.value = !0;
-      }, p.readAsDataURL(l);
-    }, ct = async ({ file: d }) => {
+      const h = new FileReader();
+      h.onload = (L) => {
+        ee.value = L.target.result, c.value = !0;
+      }, h.readAsDataURL(l);
+    }, vt = async ({ file: d }) => {
       if (d) {
-        T.value = !0;
+        S.value = !0;
         try {
-          const p = await new (require("../core/api.js")).ChatApi(a.config).uploadAvatar(d, L);
-          p.code === 200 ? (X.success("头像上传成功"), Fe(p.data), qe()) : X.error(p.msg || "头像上传失败");
+          const { ChatApi: l } = await Promise.resolve().then(() => $t), L = await new l(s.config).uploadAvatar(d, T);
+          L.code === 200 ? (Y.success("头像上传成功"), Re(L.data), Xe()) : Y.error(L.msg || "头像上传失败");
         } catch (l) {
-          console.error(l), X.error("头像上传失败");
+          console.error(l), Y.error("头像上传失败");
         } finally {
-          T.value = !1;
+          S.value = !1;
         }
       }
-    }, qe = () => {
-      Z.value = "", c.value = !1, te.value && (te.value.value = "");
-    }, dt = () => {
-      K.value = {
-        nickname: k.value.nickname || "",
-        email: k.value.email || "",
-        phone: k.value.phone || "",
-        bio: k.value.bio || ""
-      }, N.value = !0;
-    }, ut = () => {
-      N.value = !1, K.value = { nickname: "", email: "", phone: "", bio: "" };
-    }, ft = async () => {
-      n.value = !0;
+    }, Xe = () => {
+      ee.value = "", c.value = !1, se.value && (se.value.value = "");
+    }, pt = () => {
+      W.value = {
+        nickname: w.value.nickname || "",
+        email: w.value.email || "",
+        phone: w.value.phone || "",
+        bio: w.value.bio || ""
+      }, H.value = !0;
+    }, ft = () => {
+      H.value = !1, W.value = { nickname: "", email: "", phone: "", bio: "" };
+    }, mt = async () => {
+      a.value = !0;
       try {
-        await Ie(K.value) ? (X.success("保存成功"), N.value = !1) : X.error("保存失败");
+        await Le(W.value) ? (Y.success("保存成功"), H.value = !1) : Y.error("保存失败");
       } catch (d) {
-        console.error(d), X.error("保存失败");
+        console.error(d), Y.error("保存失败");
       } finally {
-        n.value = !1;
+        a.value = !1;
       }
     }, ht = () => {
-      be(), xe(), de.value = !1, r.value = !1, qe(), N.value = !1, o("close");
-    }, pt = async () => {
-      await Promise.all([ve(), Se(), Re()]), Ue(), B.value.length > 0 && ze(B.value[0]), o("open");
+      be(), _e(), ue.value = !1, i.value = !1, Xe(), H.value = !1, o("close");
+    }, gt = async () => {
+      await Promise.all([ge(), Ve(), Ie()]), Ae(), N.value.length > 0 && De(N.value[0]), o("open");
     };
-    return vt(() => {
-      document.addEventListener("click", Te);
-    }), gt(() => {
-      document.removeEventListener("click", Te), xe();
+    return _t(() => {
+      document.addEventListener("click", ze);
+    }), bt(() => {
+      document.removeEventListener("click", ze), _e();
     }), (d, l) => {
-      const p = ie("el-icon"), S = ie("el-input"), ge = ie("el-empty"), fe = ie("el-button"), je = ie("el-dialog");
-      return i(), H(je, {
-        modelValue: R.value,
-        "onUpdate:modelValue": l[13] || (l[13] = (s) => R.value = s),
+      const h = ce("el-icon"), L = ce("el-input"), $ = ce("el-empty"), ae = ce("el-button"), Me = ce("el-dialog");
+      return r(), q(Me, {
+        modelValue: F.value,
+        "onUpdate:modelValue": l[13] || (l[13] = (ke) => F.value = ke),
         width: y.width,
         "close-on-click-modal": !1,
         class: "chat-dialog",
         "append-to-body": "",
         onClosed: ht,
-        onOpen: pt
+        onOpen: gt
       }, {
-        default: b(() => [
-          t("div", Ht, [
-            t("div", Pt, [
-              t("div", {
-                class: "mb-4 cursor-pointer mt-4",
-                onClick: st
-              }, [
-                t("img", {
-                  src: u(z),
-                  alt: "头像",
-                  class: "w-10 h-10 rounded-full border-2 border-gray-200"
-                }, null, 8, qt)
-              ]),
-              (i(!0), f(he, null, pe(Le.value, (s) => (i(), f("div", {
-                key: s.id,
-                class: j([
-                  "w-10 h-10 flex items-center justify-center cursor-pointer rounded-lg transition-all relative",
-                  Q.value === s.id ? "bg-green-50 text-green-600" : "text-gray-500 hover:bg-gray-100"
+        default: b(() => {
+          var ke, Ye, Ge;
+          return [
+            t("div", jt, [
+              t("div", Xt, [
+                t("div", {
+                  class: "sidebar-avatar",
+                  onClick: lt
+                }, [
+                  t("img", {
+                    src: u(z),
+                    alt: "头像",
+                    class: "avatar-img"
+                  }, null, 8, Yt)
                 ]),
-                onClick: (O) => Q.value = s.id
-              }, [
-                h(p, { size: 24 }, {
-                  default: b(() => [
-                    (i(), H(yt(s.icon)))
-                  ]),
-                  _: 2
-                }, 1024),
-                s.badge ? (i(), f("span", Xt, w(s.badge > 99 ? "99+" : s.badge), 1)) : F("", !0)
-              ], 10, Ot))), 128)),
-              l[14] || (l[14] = t("div", { class: "flex-1" }, null, -1)),
-              y.config.modules.settings ? (i(), f("div", {
-                key: 0,
-                class: "w-10 h-10 flex items-center justify-center cursor-pointer rounded-lg hover:bg-gray-100 transition-all mb-4 text-gray-500",
-                onClick: l[0] || (l[0] = (s) => r.value = !0),
-                title: "设置"
-              }, [
-                h(p, { size: 24 }, {
-                  default: b(() => [
-                    h(u(Ct))
+                (r(!0), v(fe, null, me(Te.value, (n) => (r(), v("div", {
+                  key: n.id,
+                  class: X([
+                    "nav-item",
+                    Z.value === n.id ? "nav-item-active" : "nav-item-inactive"
                   ]),
-                  _: 1
-                })
-              ])) : F("", !0)
-            ]),
-            t("div", Yt, [
-              t("div", Gt, [
-                h(S, {
-                  modelValue: u(x),
-                  "onUpdate:modelValue": l[1] || (l[1] = (s) => we(x) ? x.value = s : null),
-                  placeholder: "搜索",
-                  "prefix-icon": u(Ee)
-                }, null, 8, ["modelValue", "prefix-icon"])
-              ]),
-              t("div", Jt, [
-                Q.value === "chat" ? (i(), f("div", Qt, [
-                  (i(!0), f(he, null, pe(u(B), (s) => (i(), f("div", {
-                    key: s.id,
-                    class: j([
-                      "flex items-center p-3 cursor-pointer hover:bg-[#e5e5e5] transition-colors",
-                      ce.value === s.id ? "bg-[#d6d6d6]" : ""
+                  onClick: (j) => Z.value = n.id
+                }, [
+                  p(h, { size: 24 }, {
+                    default: b(() => [
+                      (r(), q(Ct(n.icon)))
                     ]),
-                    onClick: (O) => ze(s),
-                    onContextmenu: Oe((O) => Qe(O, s), ["prevent", "stop"])
-                  }, [
-                    t("div", es, [
-                      t("img", {
-                        src: s.avatar,
-                        alt: s.name,
-                        class: "w-11 h-11 rounded-full object-cover"
-                      }, null, 8, ts),
-                      s.online ? (i(), f("span", ss)) : F("", !0)
+                    _: 2
+                  }, 1024),
+                  n.badge ? (r(), v("span", Jt, k(n.badge > 99 ? "99+" : n.badge), 1)) : I("", !0)
+                ], 10, Gt))), 128)),
+                l[14] || (l[14] = t("div", { class: "nav-spacer" }, null, -1)),
+                y.config.modules.settings ? (r(), v("div", {
+                  key: 0,
+                  class: "nav-item nav-item-inactive",
+                  onClick: l[0] || (l[0] = (n) => i.value = !0),
+                  title: "设置"
+                }, [
+                  p(h, { size: 24 }, {
+                    default: b(() => [
+                      p(u(St))
                     ]),
-                    t("div", as, [
-                      t("div", ns, [
-                        t("span", ls, w(s.name), 1),
-                        t("span", rs, w(u(P)(s.lastTime)), 1)
+                    _: 1
+                  })
+                ])) : I("", !0)
+              ]),
+              t("div", Qt, [
+                t("div", Zt, [
+                  p(L, {
+                    modelValue: u(_),
+                    "onUpdate:modelValue": l[1] || (l[1] = (n) => we(_) ? _.value = n : null),
+                    placeholder: "搜索",
+                    "prefix-icon": u(Ke)
+                  }, null, 8, ["modelValue", "prefix-icon"])
+                ]),
+                t("div", es, [
+                  Z.value === "chat" ? (r(), v("div", ts, [
+                    (r(!0), v(fe, null, me(u(N), (n) => (r(), v("div", {
+                      key: n.id,
+                      class: X([
+                        "chat-item",
+                        de.value === n.id ? "chat-item-active" : ""
                       ]),
-                      t("div", os, [
-                        t("span", is, w(s.lastMsg), 1),
-                        s.unread > 0 ? (i(), f("span", cs, w(s.unread > 99 ? "99+" : s.unread), 1)) : F("", !0)
-                      ])
-                    ])
-                  ], 42, Zt))), 128))
-                ])) : F("", !0),
-                Q.value === "friends" && y.config.modules.friends ? (i(), f("div", ds, [
-                  t("div", us, [
-                    t("div", {
-                      class: "flex items-center gap-2 p-2 rounded-lg cursor-pointer hover:bg-[#e5e5e5]",
-                      onClick: l[2] || (l[2] = (...s) => u(_e) && u(_e)(...s))
+                      onClick: (j) => De(n),
+                      onContextmenu: Je((j) => d.showContextMenu(j, n), ["prevent", "stop"])
                     }, [
-                      t("div", fs, [
-                        h(p, {
-                          class: "text-white",
-                          size: 20
-                        }, {
-                          default: b(() => [
-                            h(u(Ut))
-                          ]),
-                          _: 1
-                        })
+                      t("div", as, [
+                        t("img", {
+                          src: n.avatar,
+                          alt: n.name,
+                          class: "friend-avatar"
+                        }, null, 8, ns),
+                        n.online ? (r(), v("span", ls)) : I("", !0)
                       ]),
-                      l[15] || (l[15] = t("span", { class: "text-sm text-gray-800" }, "添加好友", -1))
-                    ])
-                  ]),
-                  (i(!0), f(he, null, pe(u(v), (s) => (i(), f("div", {
-                    key: s.id,
-                    class: "flex items-center p-3 cursor-pointer hover:bg-[#e5e5e5] transition-colors",
-                    onClick: (O) => et(s)
-                  }, [
-                    t("div", ps, [
-                      t("img", {
-                        src: s.avatar,
-                        alt: s.name,
-                        class: "w-11 h-11 rounded-full object-cover"
-                      }, null, 8, ms),
-                      t("span", {
-                        class: j([
-                          "absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-white",
-                          s.online ? "bg-green-500" : "bg-gray-400"
+                      t("div", is, [
+                        t("div", os, [
+                          t("span", rs, k(n.name), 1),
+                          t("span", cs, k(u(P)(n.lastTime)), 1)
+                        ]),
+                        t("div", ds, [
+                          t("span", us, k(n.lastMsg), 1),
+                          n.unread > 0 ? (r(), v("span", vs, k(n.unread > 99 ? "99+" : n.unread), 1)) : I("", !0)
                         ])
-                      }, null, 2)
+                      ])
+                    ], 42, ss))), 128))
+                  ])) : I("", !0),
+                  Z.value === "friends" && y.config.modules.friends ? (r(), v("div", ps, [
+                    t("div", fs, [
+                      t("div", {
+                        class: "add-friend-btn",
+                        onClick: l[2] || (l[2] = (...n) => u(Ce) && u(Ce)(...n))
+                      }, [
+                        t("div", ms, [
+                          p(h, {
+                            class: "text-white",
+                            size: 20
+                          }, {
+                            default: b(() => [
+                              p(u(Vt))
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        l[15] || (l[15] = t("span", { class: "add-friend-text" }, "添加好友", -1))
+                      ])
                     ]),
-                    t("div", vs, [
-                      t("span", gs, w(s.name), 1)
-                    ])
-                  ], 8, hs))), 128))
-                ])) : F("", !0),
-                Q.value === "apply" && y.config.modules.apply ? (i(), f("div", ys, [
-                  u(E) ? (i(), H(ge, {
-                    key: 0,
-                    description: "加载中..."
-                  })) : u(A).length === 0 ? (i(), H(ge, {
-                    key: 1,
-                    description: "暂无好友申请"
-                  })) : (i(!0), f(he, { key: 2 }, pe(u(A), (s) => (i(), f("div", {
-                    key: s.applyUser || s.id,
-                    class: "flex items-center justify-between p-3 hover:bg-[#e5e5e5]"
-                  }, [
-                    t("div", xs, [
-                      t("img", {
-                        src: `https://api.dicebear.com/7.x/avataaars/svg?seed=${s.applyUser}`,
-                        alt: s.applyUser,
-                        class: "w-11 h-11 rounded-full object-cover"
-                      }, null, 8, bs),
+                    (r(!0), v(fe, null, me(u(m), (n) => (r(), v("div", {
+                      key: n.id,
+                      class: "chat-item",
+                      onClick: (j) => at(n)
+                    }, [
+                      t("div", gs, [
+                        t("img", {
+                          src: n.avatar,
+                          alt: n.name,
+                          class: "friend-avatar"
+                        }, null, 8, ys),
+                        t("span", {
+                          class: X([
+                            "online-indicator",
+                            n.online ? "online" : "offline"
+                          ])
+                        }, null, 2)
+                      ]),
                       t("div", _s, [
-                        t("div", ws, w(s.applyUser), 1),
-                        l[16] || (l[16] = t("div", { class: "text-xs text-gray-500 mt-1" }, "请求添加你为好友", -1))
+                        t("span", bs, k(n.name), 1)
                       ])
-                    ]),
-                    h(fe, {
-                      type: "primary",
-                      size: "small",
-                      onClick: (O) => u(Ve)(s.applyUser)
-                    }, {
-                      default: b(() => [...l[17] || (l[17] = [
-                        se("同意", -1)
-                      ])]),
-                      _: 1
-                    }, 8, ["onClick"])
-                  ]))), 128))
-                ])) : F("", !0)
-              ])
-            ]),
-            t("div", ks, [
-              M.value && !D.value ? (i(), f("div", Cs, [
-                t("div", Us, [
+                    ], 8, hs))), 128))
+                  ])) : I("", !0),
+                  Z.value === "apply" && y.config.modules.apply ? (r(), v("div", Cs, [
+                    u(E) ? (r(), q($, {
+                      key: 0,
+                      description: "加载中..."
+                    })) : u(A).length === 0 ? (r(), q($, {
+                      key: 1,
+                      description: "暂无好友申请"
+                    })) : (r(!0), v(fe, { key: 2 }, me(u(A), (n) => (r(), v("div", {
+                      key: n.applyUser || n.id,
+                      class: "friend-request-item"
+                    }, [
+                      t("div", ks, [
+                        t("img", {
+                          src: `https://api.dicebear.com/7.x/avataaars/svg?seed=${n.applyUser}`,
+                          alt: n.applyUser,
+                          class: "request-avatar"
+                        }, null, 8, ws),
+                        t("div", Us, [
+                          t("div", xs, k(n.applyUser), 1),
+                          l[16] || (l[16] = t("div", { class: "request-desc" }, "请求添加你为好友", -1))
+                        ])
+                      ]),
+                      p(ae, {
+                        type: "primary",
+                        size: "small",
+                        onClick: (j) => u(Fe)(n.applyUser)
+                      }, {
+                        default: b(() => [...l[17] || (l[17] = [
+                          ne("同意", -1)
+                        ])]),
+                        _: 1
+                      }, 8, ["onClick"])
+                    ]))), 128))
+                  ])) : I("", !0)
+                ])
+              ]),
+              t("div", As, [
+                M.value && !D.value ? (r(), v("div", Ss, [
                   t("img", {
                     src: M.value.avatar,
                     alt: M.value.name,
-                    class: "w-24 h-24 rounded-full object-cover mb-6"
-                  }, null, 8, As),
-                  t("div", Ss, w(M.value.name), 1),
-                  t("div", Vs, [
+                    class: "profile-avatar"
+                  }, null, 8, Vs),
+                  t("div", Fs, k(M.value.name), 1),
+                  t("div", Rs, [
                     t("span", {
-                      class: j([
-                        "w-2 h-2 rounded-full",
-                        M.value.online ? "bg-green-500" : "bg-gray-400"
+                      class: X([
+                        "status-dot",
+                        M.value.online ? "status-online" : "status-offline"
                       ])
                     }, null, 2),
-                    t("span", Fs, w(M.value.online ? "在线" : "离线"), 1)
+                    t("span", null, k(M.value.online ? "在线" : "离线"), 1)
                   ]),
-                  h(fe, {
+                  p(ae, {
                     type: "primary",
                     size: "large",
-                    onClick: tt,
-                    class: "w-40"
+                    onClick: nt,
+                    class: "start-chat-btn"
                   }, {
                     default: b(() => [
-                      h(p, null, {
+                      p(h, null, {
                         default: b(() => [
-                          h(u(Me))
+                          p(u(Ee))
                         ]),
                         _: 1
                       }),
@@ -1304,496 +1321,463 @@ const Ge = (y, e) => {
                     ]),
                     _: 1
                   })
-                ])
-              ])) : F("", !0),
-              D.value ? (i(), f("div", Rs, [
-                t("div", Is, [
+                ])) : I("", !0),
+                D.value ? (r(), v("div", Is, [
                   t("div", Ls, [
-                    t("span", Ts, w(D.value.name), 1),
-                    t("span", {
-                      class: j([
-                        "text-xs px-2 py-0.5 rounded",
-                        D.value.online ? "bg-green-100 text-green-600" : "bg-gray-100 text-gray-500"
-                      ])
-                    }, w(D.value.online ? "在线" : "离线"), 3)
-                  ]),
-                  t("div", zs, [
-                    h(p, { class: "cursor-pointer hover:text-gray-700" }, {
-                      default: b(() => [
-                        h(u(Ee))
-                      ]),
-                      _: 1
-                    }),
-                    h(p, {
-                      class: "cursor-pointer hover:text-gray-700",
-                      onClick: l[3] || (l[3] = (s) => de.value = !de.value)
-                    }, {
-                      default: b(() => [
-                        h(u(At))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ]),
-                t("div", {
-                  ref_key: "messagesContainer",
-                  ref: I,
-                  class: "flex-1 overflow-y-auto p-4 bg-[#f5f5f5] min-h-0 message-list"
-                }, [
-                  (i(!0), f(he, null, pe(u(J), (s, O) => (i(), f("div", {
-                    key: O,
-                    class: j([
-                      "flex mb-6 items-start",
-                      s.isSelf ? "flex-row-reverse" : "flex-row"
+                    t("div", Ts, [
+                      t("span", zs, k(D.value.name), 1),
+                      t("span", {
+                        class: X([
+                          "status-badge",
+                          D.value.online ? "status-badge-online" : "status-badge-offline"
+                        ])
+                      }, k(D.value.online ? "在线" : "离线"), 3)
+                    ]),
+                    t("div", Ds, [
+                      p(h, { class: "action-icon" }, {
+                        default: b(() => [
+                          p(u(Ke))
+                        ]),
+                        _: 1
+                      }),
+                      p(h, {
+                        class: "action-icon",
+                        onClick: l[3] || (l[3] = (n) => ue.value = !ue.value)
+                      }, {
+                        default: b(() => [
+                          p(u(Ft))
+                        ]),
+                        _: 1
+                      })
                     ])
+                  ]),
+                  t("div", {
+                    ref_key: "messagesContainer",
+                    ref: R,
+                    class: "messages-container"
                   }, [
-                    t("div", js, [
-                      t("img", {
-                        src: s.isSelf ? u(z) : D.value.avatar,
-                        class: "w-10 h-10 rounded-lg object-cover"
-                      }, null, 8, Ds)
-                    ]),
-                    t("div", {
-                      class: j([
-                        "flex flex-col max-w-[75%]",
-                        s.isSelf ? "mr-3 items-end" : "ml-3 items-start"
+                    (r(!0), v(fe, null, me(u(Q), (n, j) => (r(), v("div", {
+                      key: j,
+                      class: X([
+                        "message-wrapper",
+                        n.isSelf ? "message-self" : "message-other"
                       ])
                     }, [
-                      s.isSelf ? F("", !0) : (i(), f("div", Ms, w(D.value.name), 1)),
-                      t("div", Es, [
-                        s.type === "text" ? (i(), f("div", {
-                          key: 0,
-                          class: j([
-                            "px-3 py-2 text-sm break-all whitespace-pre-wrap rounded-lg shadow-sm",
-                            s.isSelf ? "bg-[#95ec69] text-gray-800 self-end message-bubble-self" : "bg-white text-gray-800 message-bubble-other"
-                          ])
-                        }, w(s.text), 3)) : s.type === "file" && s.fileType === "image" ? (i(), f("div", {
-                          key: 1,
-                          class: j([
-                            "rounded-lg relative shadow-sm cursor-pointer overflow-hidden max-w-[300px]",
-                            s.isSelf ? "self-end" : "self-start"
-                          ]),
-                          onClick: (De) => Pe(s.fileUrl)
-                        }, [
-                          t("img", {
-                            src: s.fileUrl,
-                            alt: s.fileName,
-                            class: "w-full h-auto block",
-                            onError: ot
-                          }, null, 40, Ks),
-                          s.fileName || s.fileSize ? (i(), f("div", {
+                      t("div", Ms, [
+                        t("img", {
+                          src: n.isSelf ? u(z) : D.value.avatar,
+                          class: "avatar-sm"
+                        }, null, 8, $s)
+                      ]),
+                      t("div", {
+                        class: X([
+                          "message-content-wrapper",
+                          n.isSelf ? "content-self" : "content-other"
+                        ])
+                      }, [
+                        n.isSelf ? I("", !0) : (r(), v("div", Es, k(D.value.name), 1)),
+                        t("div", Ks, [
+                          n.type === "text" ? (r(), v("div", {
                             key: 0,
-                            class: j([
-                              s.isSelf ? "bg-[#95ec69] text-gray-700" : "bg-white text-gray-500"
-                            ])
-                          }, [
-                            s.fileSize ? (i(), f("div", Ws, w(Ne(s.fileSize)), 1)) : F("", !0)
-                          ], 2)) : F("", !0)
-                        ], 10, $s)) : s.type === "file" ? (i(), f("div", {
-                          key: 2,
-                          class: j([
-                            "rounded-lg shadow-sm cursor-pointer overflow-hidden min-w-[200px]",
-                            s.isSelf ? "self-end message-bubble-self" : "message-bubble-other"
-                          ]),
-                          onClick: (De) => Pe(s.fileUrl)
-                        }, [
-                          t("div", {
-                            class: j([
-                              "flex items-center gap-3 px-4 py-3",
-                              s.isSelf ? "bg-[#95ec69]" : "bg-white"
+                            class: X([
+                              "message-bubble",
+                              n.isSelf ? "bubble-self" : "bubble-other"
                             ])
+                          }, k(n.text), 3)) : n.type === "file" && n.fileType === "image" ? (r(), v("div", {
+                            key: 1,
+                            class: X([
+                              "message-bubble",
+                              "image-bubble",
+                              n.isSelf ? "bubble-self" : "bubble-other"
+                            ]),
+                            onClick: ($e) => je(n.fileUrl)
                           }, [
-                            t("div", Ns, [
-                              h(p, {
-                                size: 28,
-                                class: j(s.isSelf ? "text-gray-700" : "text-gray-500")
-                              }, {
-                                default: b(() => [
-                                  h(u(St))
-                                ]),
-                                _: 1
-                              }, 8, ["class"])
+                            t("img", {
+                              src: n.fileUrl,
+                              alt: n.fileName,
+                              class: "message-image",
+                              onError: dt
+                            }, null, 40, Bs),
+                            n.fileSize ? (r(), v("div", Ns, k(Pe(n.fileSize)), 1)) : I("", !0)
+                          ], 10, Ws)) : n.type === "file" ? (r(), v("div", {
+                            key: 2,
+                            class: X([
+                              "message-bubble",
+                              "file-bubble",
+                              n.isSelf ? "bubble-self" : "bubble-other"
                             ]),
-                            t("div", Hs, [
-                              t("div", {
-                                class: j([
-                                  "truncate text-sm font-medium leading-tight",
-                                  (s.isSelf, "text-gray-800")
-                                ])
-                              }, w(s.fileName || s.text), 3),
-                              t("div", {
-                                class: j([
-                                  "text-xs mt-1 flex items-center gap-2",
-                                  s.isSelf ? "text-gray-600" : "text-gray-500"
-                                ])
-                              }, [
-                                h(p, { size: 12 }, {
+                            onClick: ($e) => je(n.fileUrl)
+                          }, [
+                            t("div", qs, [
+                              t("div", Ps, [
+                                p(h, { size: 28 }, {
                                   default: b(() => [
-                                    h(u(Vt))
+                                    p(u(Rt))
                                   ]),
                                   _: 1
-                                }),
-                                l[19] || (l[19] = t("span", null, "点击下载", -1)),
-                                s.fileSize ? (i(), f("span", Ps, "· " + w(Ne(s.fileSize)), 1)) : F("", !0)
-                              ], 2)
+                                })
+                              ]),
+                              t("div", Os, [
+                                t("div", js, k(n.fileName || n.text), 1),
+                                t("div", Xs, [
+                                  p(h, { size: 12 }, {
+                                    default: b(() => [
+                                      p(u(It))
+                                    ]),
+                                    _: 1
+                                  }),
+                                  l[19] || (l[19] = t("span", null, "点击下载", -1)),
+                                  n.fileSize ? (r(), v("span", Ys, "· " + k(Pe(n.fileSize)), 1)) : I("", !0)
+                                ])
+                              ])
                             ])
-                          ], 2)
-                        ], 10, Bs)) : F("", !0),
-                        t("div", {
-                          class: j([
-                            "text-[10px] text-gray-400 mt-1",
-                            s.isSelf ? "text-right" : "text-left"
-                          ])
-                        }, w(u(ne)(s.time)), 3)
-                      ])
-                    ], 2)
-                  ], 2))), 128))
-                ], 512),
-                t("div", qs, [
-                  W.value.length > 0 ? (i(), f("div", Os, [
-                    (i(!0), f(he, null, pe(W.value, (s, O) => (i(), f("div", {
-                      key: s.id,
-                      class: "relative group"
-                    }, [
-                      s.isImage ? (i(), f("div", Xs, [
-                        t("img", {
-                          src: s.previewUrl,
-                          alt: s.name,
-                          class: "w-full h-full object-cover"
-                        }, null, 8, Ys),
-                        t("button", {
-                          onClick: (De) => Be(O),
-                          class: "absolute top-1 right-1 w-5 h-5 bg-black/50 text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-colors text-xs"
-                        }, " × ", 8, Gs)
-                      ])) : (i(), f("div", Js, [
-                        h(p, { class: "text-gray-400 text-2xl mb-1" }, {
-                          default: b(() => [
-                            h(u(Ye))
-                          ]),
-                          _: 1
-                        }),
-                        t("span", Qs, w(s.name), 1),
-                        t("button", {
-                          onClick: (De) => Be(O),
-                          class: "absolute top-1 right-1 w-5 h-5 bg-black/50 text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-colors text-xs"
-                        }, " × ", 8, Zs)
-                      ]))
-                    ]))), 128))
-                  ])) : F("", !0),
-                  y.config.modules.fileUpload ? (i(), f("div", ea, [
-                    h(p, { class: "text-gray-500 cursor-pointer hover:text-gray-700" }, {
-                      default: b(() => [
-                        h(u(Me))
-                      ]),
-                      _: 1
-                    }),
-                    h(p, {
-                      class: "text-gray-500 cursor-pointer hover:text-gray-700",
-                      onClick: nt
-                    }, {
-                      default: b(() => [
-                        h(u(Ye))
-                      ]),
-                      _: 1
-                    }),
-                    h(p, { class: "text-gray-500 cursor-pointer hover:text-gray-700" }, {
-                      default: b(() => [
-                        h(u(Ft))
-                      ]),
-                      _: 1
-                    })
-                  ])) : F("", !0),
-                  t("div", ta, [
-                    xt(t("textarea", {
-                      "onUpdate:modelValue": l[4] || (l[4] = (s) => we(_) ? _.value = s : null),
-                      onKeydown: bt(Oe(He, ["prevent"]), ["enter"]),
-                      onPaste: rt,
-                      placeholder: "输入消息或粘贴文件...",
-                      class: "w-full resize-none border-0 outline-none text-sm h-[80px]",
-                      rows: "3"
-                    }, null, 40, sa), [
-                      [_t, u(_)]
-                    ])
-                  ]),
-                  t("div", aa, [
-                    h(fe, {
-                      type: "primary",
-                      disabled: !u(_).trim() && W.value.length === 0,
-                      onClick: He,
-                      class: "bg-[#07c160] hover:bg-[#06ad56] border-0 text-sm px-6"
-                    }, {
-                      default: b(() => [...l[20] || (l[20] = [
-                        se(" 发送 ", -1)
-                      ])]),
-                      _: 1
-                    }, 8, ["disabled"])
-                  ]),
-                  t("input", {
-                    ref_key: "fileInputRef",
-                    ref: ue,
-                    type: "file",
-                    multiple: "",
-                    class: "hidden",
-                    onChange: lt
-                  }, null, 544)
-                ])
-              ])) : M.value ? F("", !0) : (i(), f("div", na, [
-                h(p, {
-                  size: 64,
-                  class: "text-gray-300 mb-2"
-                }, {
-                  default: b(() => [
-                    h(u(Rt))
-                  ]),
-                  _: 1
-                }),
-                t("div", la, w(Q.value === "apply" ? "在左侧选择好友申请" : "在左侧选择好友开始聊天"), 1)
-              ]))
-            ]),
-            de.value ? (i(), f("div", ra, [
-              l[22] || (l[22] = t("div", { class: "h-14 flex items-center justify-center border-b border-gray-200" }, [
-                t("span", { class: "font-medium text-gray-700" }, "聊天详情")
-              ], -1)),
-              t("div", oa, [
-                t("div", ia, [
-                  t("img", {
-                    src: D.value?.avatar,
-                    alt: D.value?.name,
-                    class: "w-20 h-20 rounded-full object-cover"
-                  }, null, 8, ca),
-                  t("div", da, w(D.value?.name), 1),
-                  l[21] || (l[21] = t("div", { class: "mt-6 w-full" }, [
-                    t("div", { class: "bg-white rounded-lg" }, [
-                      t("div", { class: "p-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50" }, [
-                        t("span", { class: "text-sm text-gray-700" }, "查找聊天记录")
-                      ]),
-                      t("div", { class: "p-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50" }, [
-                        t("span", { class: "text-sm text-gray-700" }, "清空聊天记录")
-                      ])
-                    ])
-                  ], -1))
-                ])
-              ])
-            ])) : F("", !0)
-          ]),
-          h(je, {
-            modelValue: u(ae),
-            "onUpdate:modelValue": l[6] || (l[6] = (s) => we(ae) ? ae.value = s : null),
-            title: "添加好友",
-            width: "500px",
-            "append-to-body": ""
-          }, {
-            default: b(() => [
-              t("div", ua, [
-                t("div", fa, [
-                  h(S, {
-                    modelValue: u(ee),
-                    "onUpdate:modelValue": l[5] || (l[5] = (s) => we(ee) ? ee.value = s : null),
-                    placeholder: "搜索用户",
-                    "prefix-icon": u(Ee)
-                  }, null, 8, ["modelValue", "prefix-icon"])
-                ])
-              ]),
-              t("div", ha, [
-                u(U) ? (i(), H(ge, {
-                  key: 0,
-                  description: "加载中..."
-                })) : u(Y).length === 0 ? (i(), H(ge, {
-                  key: 1,
-                  description: "暂无用户"
-                })) : (i(!0), f(he, { key: 2 }, pe(u(Y), (s) => (i(), f("div", {
-                  key: s.username,
-                  class: "flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg mb-2 transition-colors"
-                }, [
-                  t("div", pa, [
-                    t("img", {
-                      src: `https://api.dicebear.com/7.x/avataaars/svg?seed=${s.username}`,
-                      alt: s.username,
-                      class: "w-10 h-10 rounded-full object-cover"
-                    }, null, 8, ma),
-                    t("div", va, [
-                      t("div", ga, w(s.username), 1)
-                    ])
-                  ]),
-                  h(fe, {
-                    type: "primary",
-                    size: "small",
-                    onClick: (O) => u(Ae)(s)
-                  }, {
-                    default: b(() => [...l[23] || (l[23] = [
-                      se("添加", -1)
-                    ])]),
-                    _: 1
-                  }, 8, ["onClick"])
-                ]))), 128))
-              ])
-            ]),
-            _: 1
-          }, 8, ["modelValue"]),
-          h(je, {
-            modelValue: r.value,
-            "onUpdate:modelValue": l[11] || (l[11] = (s) => r.value = s),
-            title: "个人设置",
-            width: "560px",
-            "close-on-click-modal": !1,
-            "append-to-body": "",
-            class: "settings-dialog"
-          }, {
-            default: b(() => [
-              t("div", ya, [
-                t("div", xa, [
-                  t("div", ba, [
-                    t("img", {
-                      src: u(z),
-                      alt: "头像",
-                      class: "w-28 h-28 rounded-full object-cover border-4 border-white shadow-lg"
-                    }, null, 8, _a),
-                    y.config.modules.avatarCrop ? (i(), f("div", {
-                      key: 0,
-                      class: "absolute -bottom-1 -right-1 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center cursor-pointer hover:bg-green-600 transition-all shadow-md",
-                      onClick: at
-                    }, [
-                      h(p, {
-                        size: 18,
-                        class: "text-white"
+                          ], 10, Hs)) : I("", !0),
+                          t("div", {
+                            class: X([
+                              "message-time",
+                              n.isSelf ? "time-right" : "time-left"
+                            ])
+                          }, k(u(ie)(n.time)), 3)
+                        ])
+                      ], 2)
+                    ], 2))), 128))
+                  ], 512),
+                  t("div", Gs, [
+                    B.value.length > 0 ? (r(), v("div", Js, [
+                      (r(!0), v(fe, null, me(B.value, (n, j) => (r(), v("div", {
+                        key: n.id,
+                        class: "pending-file"
+                      }, [
+                        n.isImage ? (r(), v("div", Qs, [
+                          t("img", {
+                            src: n.previewUrl,
+                            alt: n.name,
+                            class: "pending-image"
+                          }, null, 8, Zs),
+                          t("button", {
+                            onClick: ($e) => qe(j),
+                            class: "remove-file-btn"
+                          }, " × ", 8, ea)
+                        ])) : (r(), v("div", ta, [
+                          p(h, { class: "pending-file-icon" }, {
+                            default: b(() => [
+                              p(u(Ze))
+                            ]),
+                            _: 1
+                          }),
+                          t("span", sa, k(n.name), 1),
+                          t("button", {
+                            onClick: ($e) => qe(j),
+                            class: "remove-file-btn"
+                          }, " × ", 8, aa)
+                        ]))
+                      ]))), 128))
+                    ])) : I("", !0),
+                    y.config.modules.fileUpload ? (r(), v("div", na, [
+                      p(h, { class: "action-icon" }, {
+                        default: b(() => [
+                          p(u(Ee))
+                        ]),
+                        _: 1
+                      }),
+                      p(h, {
+                        class: "action-icon",
+                        onClick: ot
                       }, {
                         default: b(() => [
-                          h(u(It))
+                          p(u(Ze))
+                        ]),
+                        _: 1
+                      }),
+                      p(h, { class: "action-icon" }, {
+                        default: b(() => [
+                          p(u(Lt))
                         ]),
                         _: 1
                       })
-                    ])) : F("", !0),
+                    ])) : I("", !0),
+                    t("div", la, [
+                      kt(t("textarea", {
+                        "onUpdate:modelValue": l[4] || (l[4] = (n) => we(C) ? C.value = n : null),
+                        onKeydown: wt(Je(Oe, ["prevent"]), ["enter"]),
+                        onPaste: ct,
+                        placeholder: "输入消息或粘贴文件...",
+                        class: "message-input",
+                        rows: "3"
+                      }, null, 40, ia), [
+                        [Ut, u(C)]
+                      ])
+                    ]),
+                    t("div", oa, [
+                      p(ae, {
+                        type: "primary",
+                        disabled: !u(C).trim() && B.value.length === 0,
+                        onClick: Oe,
+                        class: "send-btn"
+                      }, {
+                        default: b(() => [...l[20] || (l[20] = [
+                          ne(" 发送 ", -1)
+                        ])]),
+                        _: 1
+                      }, 8, ["disabled"])
+                    ]),
                     t("input", {
-                      ref_key: "avatarInputRef",
-                      ref: te,
+                      ref_key: "fileInputRef",
+                      ref: ve,
                       type: "file",
-                      accept: "image/*",
-                      class: "hidden",
-                      onChange: it
+                      multiple: "",
+                      class: "hidden-file-input",
+                      onChange: rt
                     }, null, 544)
-                  ]),
-                  t("div", wa, [
-                    t("div", ka, w(u(k).nickname || u(L)), 1),
-                    t("div", Ca, "@" + w(u(L)), 1)
+                  ])
+                ])) : M.value ? I("", !0) : (r(), v("div", ra, [
+                  p(h, {
+                    size: 64,
+                    class: "empty-icon"
+                  }, {
+                    default: b(() => [
+                      p(u(Tt))
+                    ]),
+                    _: 1
+                  }),
+                  t("div", ca, k(Z.value === "apply" ? "在左侧选择好友申请" : "在左侧选择好友开始聊天"), 1)
+                ]))
+              ]),
+              ue.value ? (r(), v("div", da, [
+                l[22] || (l[22] = t("div", { class: "detail-header" }, "聊天详情", -1)),
+                t("div", ua, [
+                  t("div", va, [
+                    t("img", {
+                      src: (ke = D.value) == null ? void 0 : ke.avatar,
+                      alt: (Ye = D.value) == null ? void 0 : Ye.name,
+                      class: "detail-avatar"
+                    }, null, 8, pa),
+                    t("div", fa, k((Ge = D.value) == null ? void 0 : Ge.name), 1),
+                    l[21] || (l[21] = t("div", { class: "detail-actions" }, [
+                      t("div", { class: "detail-action-item" }, "查找聊天记录"),
+                      t("div", { class: "detail-action-item" }, "清空聊天记录")
+                    ], -1))
+                  ])
+                ])
+              ])) : I("", !0)
+            ]),
+            p(Me, {
+              modelValue: u(le),
+              "onUpdate:modelValue": l[6] || (l[6] = (n) => we(le) ? le.value = n : null),
+              title: "添加好友",
+              width: "500px",
+              "append-to-body": ""
+            }, {
+              default: b(() => [
+                t("div", ma, [
+                  t("div", ha, [
+                    p(L, {
+                      modelValue: u(te),
+                      "onUpdate:modelValue": l[5] || (l[5] = (n) => we(te) ? te.value = n : null),
+                      placeholder: "搜索用户",
+                      "prefix-icon": u(Ke)
+                    }, null, 8, ["modelValue", "prefix-icon"])
                   ])
                 ]),
-                t("div", Ua, [
-                  t("div", Aa, [
-                    t("div", Sa, [
-                      h(p, null, {
-                        default: b(() => [
-                          h(u(Xe))
-                        ]),
-                        _: 1
-                      }),
-                      l[24] || (l[24] = se(" 个人信息 ", -1))
+                t("div", ga, [
+                  u(x) ? (r(), q($, {
+                    key: 0,
+                    description: "加载中..."
+                  })) : u(G).length === 0 ? (r(), q($, {
+                    key: 1,
+                    description: "暂无用户"
+                  })) : (r(!0), v(fe, { key: 2 }, me(u(G), (n) => (r(), v("div", {
+                    key: n.username,
+                    class: "available-user-item"
+                  }, [
+                    t("div", ya, [
+                      t("img", {
+                        src: `https://api.dicebear.com/7.x/avataaars/svg?seed=${n.username}`,
+                        alt: n.username,
+                        class: "available-user-avatar"
+                      }, null, 8, _a),
+                      t("div", ba, k(n.username), 1)
                     ]),
-                    N.value ? F("", !0) : (i(), H(fe, {
-                      key: 0,
+                    p(ae, {
                       type: "primary",
                       size: "small",
-                      onClick: dt,
-                      class: "rounded-full"
+                      onClick: (j) => u(Se)(n)
                     }, {
-                      default: b(() => [...l[25] || (l[25] = [
-                        se(" 编辑 ", -1)
+                      default: b(() => [...l[23] || (l[23] = [
+                        ne("添加", -1)
                       ])]),
                       _: 1
-                    }))
-                  ]),
-                  t("div", Va, [
-                    t("div", null, [
-                      l[26] || (l[26] = t("label", { class: "block text-sm text-gray-600 mb-2 font-medium" }, "昵称", -1)),
-                      N.value ? (i(), H(S, {
-                        key: 0,
-                        modelValue: K.value.nickname,
-                        "onUpdate:modelValue": l[7] || (l[7] = (s) => K.value.nickname = s),
-                        placeholder: "请输入昵称",
-                        size: "large"
-                      }, null, 8, ["modelValue"])) : (i(), f("div", Fa, w(u(k).nickname || "未设置"), 1))
-                    ]),
-                    t("div", null, [
-                      l[27] || (l[27] = t("label", { class: "block text-sm text-gray-600 mb-2 font-medium" }, "邮箱", -1)),
-                      N.value ? (i(), H(S, {
-                        key: 0,
-                        modelValue: K.value.email,
-                        "onUpdate:modelValue": l[8] || (l[8] = (s) => K.value.email = s),
-                        placeholder: "请输入邮箱",
-                        size: "large"
-                      }, null, 8, ["modelValue"])) : (i(), f("div", Ra, w(u(k).email || "未设置"), 1))
-                    ]),
-                    t("div", null, [
-                      l[28] || (l[28] = t("label", { class: "block text-sm text-gray-600 mb-2 font-medium" }, "手机号", -1)),
-                      N.value ? (i(), H(S, {
+                    }, 8, ["onClick"])
+                  ]))), 128))
+                ])
+              ]),
+              _: 1
+            }, 8, ["modelValue"]),
+            p(Me, {
+              modelValue: i.value,
+              "onUpdate:modelValue": l[11] || (l[11] = (n) => i.value = n),
+              title: "个人设置",
+              width: "560px",
+              "close-on-click-modal": !1,
+              "append-to-body": "",
+              class: "settings-dialog"
+            }, {
+              default: b(() => [
+                t("div", Ca, [
+                  t("div", ka, [
+                    t("div", wa, [
+                      t("img", {
+                        src: u(z),
+                        alt: "头像",
+                        class: "settings-avatar"
+                      }, null, 8, Ua),
+                      y.config.modules.avatarCrop ? (r(), v("div", {
                         key: 0,
-                        modelValue: K.value.phone,
-                        "onUpdate:modelValue": l[9] || (l[9] = (s) => K.value.phone = s),
-                        placeholder: "请输入手机号",
-                        size: "large"
-                      }, null, 8, ["modelValue"])) : (i(), f("div", Ia, w(u(k).phone || "未设置"), 1))
+                        class: "settings-avatar-edit",
+                        onClick: it
+                      }, [
+                        p(h, {
+                          size: 18,
+                          class: "settings-avatar-icon"
+                        }, {
+                          default: b(() => [
+                            p(u(zt))
+                          ]),
+                          _: 1
+                        })
+                      ])) : I("", !0),
+                      t("input", {
+                        ref_key: "avatarInputRef",
+                        ref: se,
+                        type: "file",
+                        accept: "image/*",
+                        class: "hidden-avatar-input",
+                        onChange: ut
+                      }, null, 544)
                     ]),
-                    t("div", null, [
-                      l[29] || (l[29] = t("label", { class: "block text-sm text-gray-600 mb-2 font-medium" }, "个人简介", -1)),
-                      N.value ? (i(), H(S, {
+                    t("div", xa, [
+                      t("div", Aa, k(u(w).nickname || u(T)), 1),
+                      t("div", Sa, "@" + k(u(T)), 1)
+                    ])
+                  ]),
+                  t("div", Va, [
+                    t("div", Fa, [
+                      t("div", Ra, [
+                        p(h, null, {
+                          default: b(() => [
+                            p(u(Qe))
+                          ]),
+                          _: 1
+                        }),
+                        l[24] || (l[24] = ne(" 个人信息 ", -1))
+                      ]),
+                      H.value ? I("", !0) : (r(), q(ae, {
                         key: 0,
-                        modelValue: K.value.bio,
-                        "onUpdate:modelValue": l[10] || (l[10] = (s) => K.value.bio = s),
-                        type: "textarea",
-                        rows: 4,
-                        placeholder: "介绍一下自己吧...",
-                        size: "large"
-                      }, null, 8, ["modelValue"])) : (i(), f("div", La, w(u(k).bio || "这个人很懒，什么都没写~"), 1))
-                    ]),
-                    N.value ? (i(), f("div", Ta, [
-                      h(fe, {
-                        size: "default",
-                        onClick: ut
-                      }, {
-                        default: b(() => [...l[30] || (l[30] = [
-                          se("取消", -1)
-                        ])]),
-                        _: 1
-                      }),
-                      h(fe, {
                         type: "primary",
-                        size: "default",
-                        loading: n.value,
-                        onClick: ft
+                        size: "small",
+                        onClick: pt,
+                        class: "settings-edit-btn"
                       }, {
-                        default: b(() => [...l[31] || (l[31] = [
-                          se("保存更改", -1)
+                        default: b(() => [...l[25] || (l[25] = [
+                          ne(" 编辑 ", -1)
                         ])]),
                         _: 1
-                      }, 8, ["loading"])
-                    ])) : F("", !0)
+                      }))
+                    ]),
+                    t("div", Ia, [
+                      t("div", La, [
+                        l[26] || (l[26] = t("label", { class: "settings-form-label" }, "昵称", -1)),
+                        H.value ? (r(), q(L, {
+                          key: 0,
+                          modelValue: W.value.nickname,
+                          "onUpdate:modelValue": l[7] || (l[7] = (n) => W.value.nickname = n),
+                          placeholder: "请输入昵称",
+                          size: "large"
+                        }, null, 8, ["modelValue"])) : (r(), v("div", Ta, k(u(w).nickname || "未设置"), 1))
+                      ]),
+                      t("div", za, [
+                        l[27] || (l[27] = t("label", { class: "settings-form-label" }, "邮箱", -1)),
+                        H.value ? (r(), q(L, {
+                          key: 0,
+                          modelValue: W.value.email,
+                          "onUpdate:modelValue": l[8] || (l[8] = (n) => W.value.email = n),
+                          placeholder: "请输入邮箱",
+                          size: "large"
+                        }, null, 8, ["modelValue"])) : (r(), v("div", Da, k(u(w).email || "未设置"), 1))
+                      ]),
+                      t("div", Ma, [
+                        l[28] || (l[28] = t("label", { class: "settings-form-label" }, "手机号", -1)),
+                        H.value ? (r(), q(L, {
+                          key: 0,
+                          modelValue: W.value.phone,
+                          "onUpdate:modelValue": l[9] || (l[9] = (n) => W.value.phone = n),
+                          placeholder: "请输入手机号",
+                          size: "large"
+                        }, null, 8, ["modelValue"])) : (r(), v("div", $a, k(u(w).phone || "未设置"), 1))
+                      ]),
+                      t("div", Ea, [
+                        l[29] || (l[29] = t("label", { class: "settings-form-label" }, "个人简介", -1)),
+                        H.value ? (r(), q(L, {
+                          key: 0,
+                          modelValue: W.value.bio,
+                          "onUpdate:modelValue": l[10] || (l[10] = (n) => W.value.bio = n),
+                          type: "textarea",
+                          rows: 4,
+                          placeholder: "介绍一下自己吧...",
+                          size: "large"
+                        }, null, 8, ["modelValue"])) : (r(), v("div", Ka, k(u(w).bio || "这个人很懒，什么都没写~"), 1))
+                      ]),
+                      H.value ? (r(), v("div", Wa, [
+                        p(ae, {
+                          size: "default",
+                          onClick: ft
+                        }, {
+                          default: b(() => [...l[30] || (l[30] = [
+                            ne("取消", -1)
+                          ])]),
+                          _: 1
+                        }),
+                        p(ae, {
+                          type: "primary",
+                          size: "default",
+                          loading: a.value,
+                          onClick: mt
+                        }, {
+                          default: b(() => [...l[31] || (l[31] = [
+                            ne("保存更改", -1)
+                          ])]),
+                          _: 1
+                        }, 8, ["loading"])
+                      ])) : I("", !0)
+                    ])
                   ])
                 ])
-              ])
-            ]),
-            _: 1
-          }, 8, ["modelValue"]),
-          h(Nt, {
-            modelValue: c.value,
-            "onUpdate:modelValue": l[12] || (l[12] = (s) => c.value = s),
-            src: Z.value,
-            onConfirm: ct
-          }, null, 8, ["modelValue", "src"]),
-          re.value.visible ? (i(), f("div", {
-            key: 0,
-            class: "context-menu fixed bg-white rounded-lg shadow-lg border py-1 z-50",
-            style: wt({ left: re.value.x + "px", top: re.value.y + "px" })
-          }, [
-            t("div", {
-              class: "px-4 py-2 hover:bg-gray-100 cursor-pointer",
-              onClick: Ze
-            }, "删除聊天")
-          ], 4)) : F("", !0)
-        ]),
+              ]),
+              _: 1
+            }, 8, ["modelValue"]),
+            p(Ot, {
+              modelValue: c.value,
+              "onUpdate:modelValue": l[12] || (l[12] = (n) => c.value = n),
+              src: ee.value,
+              onConfirm: vt
+            }, null, 8, ["modelValue", "src"]),
+            pe.value.visible ? (r(), v("div", {
+              key: 0,
+              class: "context-menu",
+              style: xt({ left: pe.value.x + "px", top: pe.value.y + "px" })
+            }, [
+              t("div", {
+                class: "context-menu-item",
+                onClick: st
+              }, "删除聊天")
+            ], 4)) : I("", !0)
+          ];
+        }),
         _: 1
       }, 8, ["modelValue", "width"]);
     };
   }
-}, Ka = /* @__PURE__ */ Ge(za, [["__scopeId", "data-v-fc6ab10a"]]), ja = {
+}, ja = /* @__PURE__ */ et(Ba, [["__scopeId", "data-v-a76a4ef3"]]), Na = {
   // API 配置
   api: {
     baseUrl: "",
@@ -1852,29 +1836,29 @@ const Ge = (y, e) => {
     allowedTypes: ["*"]
   }
 };
-function Wa(y = {}) {
-  const e = Je(ja, y);
+function Xa(y = {}) {
+  const e = tt(Na, y);
   return e.api.baseUrl || console.warn("[VueChatKit] 请配置 api.baseUrl"), e.api.websocketUrl || console.warn("[VueChatKit] 请配置 api.websocketUrl"), e.user.username || console.warn("[VueChatKit] 请配置 user.username"), e;
 }
-function Je(y, e) {
-  const a = { ...y };
+function tt(y, e) {
+  const s = { ...y };
   for (const o in e)
-    e[o] && typeof e[o] == "object" && !Array.isArray(e[o]) ? a[o] = Je(y[o] || {}, e[o]) : a[o] = e[o];
-  return a;
+    e[o] && typeof e[o] == "object" && !Array.isArray(e[o]) ? s[o] = tt(y[o] || {}, e[o]) : s[o] = e[o];
+  return s;
 }
-const Ba = {
+const Ya = {
   install(y) {
     y.component("ChatWindow", ChatWindow), y.component("AvatarCrop", AvatarCrop);
   }
 };
 export {
-  Nt as AvatarCrop,
-  zt as ChatApi,
-  Lt as ChatWebSocket,
-  Ka as ChatWindow,
-  Tt as HttpClient,
-  Ba as VueChatKit,
-  Wa as createChatConfig,
-  Ba as default,
-  jt as useChat
+  Ot as AvatarCrop,
+  Be as ChatApi,
+  Dt as ChatWebSocket,
+  ja as ChatWindow,
+  Mt as HttpClient,
+  Ya as VueChatKit,
+  Xa as createChatConfig,
+  Ya as default,
+  Et as useChat
 };