vue-chat-kit 0.1.3 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +121 -54
- package/dist/vue-chat-kit.css +1 -1
- package/dist/vue-chat-kit.es.js +1990 -1062
- package/dist/vue-chat-kit.umd.js +1 -1
- package/package.json +4 -3
- package/src/components/ChatPanel.vue +2089 -0
- package/src/composables/useChat.js +17 -2
- package/src/config/index.js +6 -0
- package/src/core/api.js +3 -1
- package/src/core/request.js +15 -1
- package/src/index.js +6 -1
- package/src/style.css +23 -3
package/README.md
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
# Vue Chat Kit
|
|
2
2
|
|
|
3
|
-
一个功能完整的 Vue 3 聊天组件库，支持 WebSocket
|
|
3
|
+
一个功能完整的 Vue 3 聊天组件库，支持 WebSocket 实时通信、文件上传、好友管理等功能。**独立封装，无需任何外部 CSS 框架依赖！**
|
|
4
4
|
|
|
5
|
-
## 特性
|
|
5
|
+
## ✨ 特性
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
7
|
+
- 📦 **独立封装** - 所有样式已内置，无需 Tailwind CSS 或其他 CSS 框架
|
|
8
|
+
- 🎨 **开箱即用** - 完整的聊天界面，样式已打包
|
|
9
|
+
- 🔌 **WebSocket 实时通信**
|
|
10
|
+
- 📁 **文件上传支持**
|
|
11
|
+
- 👥 **好友管理**
|
|
12
|
+
- 📝 **消息历史记录**
|
|
13
|
+
- 🔧 **高度可配置**
|
|
14
|
+
- 🧩 **模块化设计** - 组件本身不是弹窗，可自由嵌入任何位置
|
|
14
15
|
|
|
15
|
-
## 快速开始
|
|
16
|
+
## 🚀 快速开始
|
|
16
17
|
|
|
17
18
|
### 安装
|
|
18
19
|
|
|
@@ -28,18 +29,27 @@ pnpm add vue-chat-kit
|
|
|
28
29
|
|
|
29
30
|
```vue
|
|
30
31
|
<template>
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
<div>
|
|
33
|
+
<!-- ChatPanel 是独立面板，不是弹窗，可以直接嵌入任何位置 -->
|
|
34
|
+
<ChatPanel
|
|
35
|
+
:config="chatConfig"
|
|
36
|
+
@init="onInit"
|
|
37
|
+
@message="onMessage"
|
|
38
|
+
/>
|
|
39
|
+
|
|
40
|
+
<!-- 或者你可以自己把它包裹在弹窗里 -->
|
|
41
|
+
<el-dialog v-model="showChat" width="1100px">
|
|
42
|
+
<ChatPanel :config="chatConfig" />
|
|
43
|
+
</el-dialog>
|
|
44
|
+
</div>
|
|
35
45
|
</template>
|
|
36
46
|
|
|
37
47
|
<script setup>
|
|
38
48
|
import { ref } from 'vue'
|
|
39
|
-
import {
|
|
49
|
+
import { ChatPanel, createChatConfig } from 'vue-chat-kit'
|
|
40
50
|
import 'vue-chat-kit/style'
|
|
41
51
|
|
|
42
|
-
const
|
|
52
|
+
const showChat = ref(false)
|
|
43
53
|
|
|
44
54
|
// 配置
|
|
45
55
|
const chatConfig = createChatConfig({
|
|
@@ -60,21 +70,39 @@ const chatConfig = createChatConfig({
|
|
|
60
70
|
friends: true, // 启用好友模块
|
|
61
71
|
apply: true, // 启用好友申请模块
|
|
62
72
|
settings: true, // 启用设置模块
|
|
63
|
-
fileUpload: true
|
|
73
|
+
fileUpload: true, // 启用文件上传
|
|
74
|
+
avatarCrop: true // 启用头像裁剪
|
|
64
75
|
}
|
|
65
76
|
})
|
|
77
|
+
|
|
78
|
+
const onInit = () => {
|
|
79
|
+
console.log('聊天组件初始化完成')
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const onMessage = (msg) => {
|
|
83
|
+
console.log('收到新消息:', msg)
|
|
84
|
+
}
|
|
66
85
|
</script>
|
|
67
86
|
```
|
|
68
87
|
|
|
69
|
-
## API 文档
|
|
88
|
+
## 📖 API 文档
|
|
70
89
|
|
|
71
|
-
###
|
|
90
|
+
### ChatPanel 组件
|
|
91
|
+
|
|
92
|
+
#### Props
|
|
72
93
|
|
|
73
94
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
74
95
|
|------|------|------|--------|
|
|
75
|
-
|
|
|
76
|
-
|
|
77
|
-
|
|
96
|
+
| config | 聊天组件配置对象 | ChatConfig | 必填 |
|
|
97
|
+
|
|
98
|
+
#### Events
|
|
99
|
+
|
|
100
|
+
| 事件名 | 说明 | 回调参数 |
|
|
101
|
+
|--------|------|----------|
|
|
102
|
+
| init | 组件初始化完成 | - |
|
|
103
|
+
| message | 收到新消息 | message |
|
|
104
|
+
| send | 发送消息 | { text, files } |
|
|
105
|
+
| error | 错误事件 | error |
|
|
78
106
|
|
|
79
107
|
### createChatConfig 配置项
|
|
80
108
|
|
|
@@ -84,12 +112,11 @@ const chatConfig = createChatConfig({
|
|
|
84
112
|
api: {
|
|
85
113
|
baseUrl: '',
|
|
86
114
|
websocketUrl: '',
|
|
87
|
-
// 自定义 API
|
|
115
|
+
// 自定义 API 端点（可选）
|
|
88
116
|
endpoints: {
|
|
89
117
|
getFriends: '/chart/friends',
|
|
90
118
|
getHistory: '/chart/history',
|
|
91
119
|
setRead: '/chart/read',
|
|
92
|
-
sendMessage: '',
|
|
93
120
|
uploadFile: '/chart/upload/file',
|
|
94
121
|
addFriend: '/chart/friend/add',
|
|
95
122
|
getApplyList: '/chart/friend/applyList',
|
|
@@ -122,44 +149,20 @@ const chatConfig = createChatConfig({
|
|
|
122
149
|
avatarCrop: true
|
|
123
150
|
},
|
|
124
151
|
|
|
125
|
-
// 主题配置
|
|
126
|
-
theme: {
|
|
127
|
-
primaryColor: '#07c160',
|
|
128
|
-
selfMessageBg: '#95ec69',
|
|
129
|
-
otherMessageBg: '#ffffff'
|
|
130
|
-
},
|
|
131
|
-
|
|
132
152
|
// 自定义请求头
|
|
133
153
|
headers: {
|
|
134
154
|
// 默认会自动添加 Authorization
|
|
135
|
-
// 'Authorization': 'Bearer xxx'
|
|
136
155
|
},
|
|
137
156
|
|
|
138
157
|
// WebSocket 配置
|
|
139
158
|
websocket: {
|
|
140
159
|
maxReconnectAttempts: 5,
|
|
141
160
|
reconnectDelay: 3000
|
|
142
|
-
},
|
|
143
|
-
|
|
144
|
-
// 文件配置
|
|
145
|
-
file: {
|
|
146
|
-
maxSize: 50 * 1024 * 1024, // 50MB
|
|
147
|
-
allowedTypes: ['*']
|
|
148
161
|
}
|
|
149
162
|
}
|
|
150
163
|
```
|
|
151
164
|
|
|
152
|
-
###
|
|
153
|
-
|
|
154
|
-
| 事件名 | 说明 | 回调参数 |
|
|
155
|
-
|--------|------|----------|
|
|
156
|
-
| open | 聊天窗口打开 | - |
|
|
157
|
-
| close | 聊天窗口关闭 | - |
|
|
158
|
-
| message | 收到新消息 | message |
|
|
159
|
-
| send | 发送消息 | message |
|
|
160
|
-
| error | 错误事件 | error |
|
|
161
|
-
|
|
162
|
-
### 高级用法 - 自定义 API 实现
|
|
165
|
+
### 高级用法 - 自定义 API 适配器
|
|
163
166
|
|
|
164
167
|
如果你想完全自定义 API 实现，可以传入自定义的 API 适配器：
|
|
165
168
|
|
|
@@ -171,15 +174,15 @@ const chatConfig = createChatConfig({
|
|
|
171
174
|
// 自定义适配器
|
|
172
175
|
adapter: {
|
|
173
176
|
async getFriends(currentUser) {
|
|
174
|
-
//
|
|
177
|
+
// 你的自定义实现
|
|
175
178
|
return []
|
|
176
179
|
},
|
|
177
180
|
async getHistory(fromUser, toUser) {
|
|
178
|
-
//
|
|
181
|
+
// 你的自定义实现
|
|
179
182
|
return []
|
|
180
183
|
},
|
|
181
184
|
async sendMessage(to, message, type) {
|
|
182
|
-
//
|
|
185
|
+
// 你的自定义实现
|
|
183
186
|
}
|
|
184
187
|
// ... 更多方法
|
|
185
188
|
}
|
|
@@ -187,7 +190,7 @@ const chatConfig = createChatConfig({
|
|
|
187
190
|
})
|
|
188
191
|
```
|
|
189
192
|
|
|
190
|
-
## 模块说明
|
|
193
|
+
## 📦 模块说明
|
|
191
194
|
|
|
192
195
|
### 核心模块 (Core)
|
|
193
196
|
- WebSocket 连接管理
|
|
@@ -209,6 +212,70 @@ const chatConfig = createChatConfig({
|
|
|
209
212
|
- 文件预览
|
|
210
213
|
- 文件下载
|
|
211
214
|
|
|
212
|
-
##
|
|
215
|
+
## 🎯 在项目中使用
|
|
216
|
+
|
|
217
|
+
### 1. 安装依赖
|
|
218
|
+
|
|
219
|
+
确保你的项目已安装：
|
|
220
|
+
```bash
|
|
221
|
+
npm install element-plus @element-plus/icons-vue
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
### 2. 在 main.js 配置 Element Plus
|
|
225
|
+
|
|
226
|
+
```javascript
|
|
227
|
+
import { createApp } from 'vue'
|
|
228
|
+
import ElementPlus from 'element-plus'
|
|
229
|
+
import 'element-plus/dist/index.css'
|
|
230
|
+
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
|
231
|
+
import App from './App.vue'
|
|
232
|
+
|
|
233
|
+
const app = createApp(App)
|
|
234
|
+
app.use(ElementPlus)
|
|
235
|
+
|
|
236
|
+
// 注册所有图标
|
|
237
|
+
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
|
238
|
+
app.component(key, component)
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
app.mount('#app')
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
### 3. 使用组件
|
|
245
|
+
|
|
246
|
+
参考上面的快速开始示例
|
|
247
|
+
|
|
248
|
+
## 🛠️ 开发
|
|
249
|
+
|
|
250
|
+
```bash
|
|
251
|
+
# 安装依赖
|
|
252
|
+
cd packages/vue-chat-kit
|
|
253
|
+
npm install
|
|
254
|
+
|
|
255
|
+
# 运行示例
|
|
256
|
+
npm run example
|
|
257
|
+
|
|
258
|
+
# 构建打包
|
|
259
|
+
npm run build
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
## 📝 发布到 npm
|
|
263
|
+
|
|
264
|
+
```bash
|
|
265
|
+
# 1. 构建
|
|
266
|
+
npm run build
|
|
267
|
+
|
|
268
|
+
# 2. 登录 npm
|
|
269
|
+
npm login
|
|
270
|
+
|
|
271
|
+
# 3. 发布
|
|
272
|
+
npm publish
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
## 📄 License
|
|
213
276
|
|
|
214
277
|
MIT
|
|
278
|
+
|
|
279
|
+
## 📚 更多文档
|
|
280
|
+
|
|
281
|
+
详细使用文档请查看 [docs/USAGE.md](./docs/USAGE.md)
|
package/dist/vue-chat-kit.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@tailwind base;@tailwind components;@tailwind utilities;.avatar-crop-container[data-v-4e4a992b]{display:flex;flex-direction:column;gap:20px}.crop-area[data-v-4e4a992b]{position:relative;width:100%;height:300px;overflow:hidden;background:#f5f5f5;border-radius:8px}.crop-image[data-v-4e4a992b]{position:absolute;cursor:move;-webkit-user-select:none;user-select:none;max-width:none}.crop-overlay[data-v-4e4a992b]{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.crop-box[data-v-4e4a992b]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px}.crop-border[data-v-4e4a992b]{width:100%;height:100%;border:2px solid #fff;box-shadow:0 0 0 9999px #00000080;border-radius:8px}.crop-mask[data-v-4e4a992b]{position:absolute;top:0;right:0;bottom:0;left:0;cursor:move}.zoom-controls[data-v-4e4a992b]{padding:0 20px}.chat-dialog[data-v-a76a4ef3] .el-dialog{padding:0;border-radius:12px;overflow:hidden}.chat-dialog[data-v-a76a4ef3] .el-dialog__header{display:none}.chat-dialog[data-v-a76a4ef3] .el-dialog__body{padding:0}.bubble-self[data-v-a76a4ef3]{position:relative;background-color:#95ec69!important}.bubble-self[data-v-a76a4ef3]:after{content:"";position:absolute;right:-5px;top:10px;width:10px;height:10px;background-color:#95ec69;transform:rotate(45deg);box-shadow:2px -2px 2px #0000000d}.bubble-other[data-v-a76a4ef3]{position:relative;background-color:#fff!important}.bubble-other[data-v-a76a4ef3]:after{content:"";position:absolute;left:-5px;top:10px;width:10px;height:10px;background-color:#fff;transform:rotate(45deg);box-shadow:-2px 2px 2px #0000000d}.messages-container[data-v-a76a4ef3]::-webkit-scrollbar{width:6px}.messages-container[data-v-a76a4ef3]::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.messages-container[data-v-a76a4ef3]::-webkit-scrollbar-track{background:transparent}.settings-dialog[data-v-a76a4ef3] .el-dialog{border-radius:16px;overflow:hidden}.settings-dialog[data-v-a76a4ef3] .el-dialog__header{padding:24px 24px 0;margin:0}.settings-dialog[data-v-a76a4ef3] .el-dialog__title{font-size:20px;font-weight:600;color:#1f2937}.chat-container[data-v-a76a4ef3]{display:flex;height:680px;background-color:#fff;overflow:hidden}.sidebar-nav[data-v-a76a4ef3]{width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;background-color:#f9fafb;border-right:1px solid #e5e7eb}.sidebar-avatar[data-v-a76a4ef3]{margin-top:16px;margin-bottom:16px;cursor:pointer}.avatar-img[data-v-a76a4ef3]{width:40px;height:40px;border-radius:50%;border:2px solid #e5e7eb}.nav-item[data-v-a76a4ef3]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:all .2s;position:relative}.nav-item-active[data-v-a76a4ef3]{background-color:#f0fdf4;color:#16a34a}.nav-item-inactive[data-v-a76a4ef3]{color:#6b7280}.nav-item-inactive[data-v-a76a4ef3]:hover{background-color:#f3f4f6}.nav-badge[data-v-a76a4ef3]{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background-color:#ef4444;border-radius:50%;font-size:10px;color:#fff;display:flex;align-items:center;justify-content:center}.nav-spacer[data-v-a76a4ef3]{flex:1}.content-panel[data-v-a76a4ef3]{width:288px;background-color:#f5f5f5;border-right:1px solid #e5e7eb;display:flex;flex-direction:column}.search-bar[data-v-a76a4ef3]{padding:12px}.content-scroll[data-v-a76a4ef3]{flex:1;overflow-y:auto;min-height:0}.chat-item[data-v-a76a4ef3]{display:flex;align-items:center;padding:12px;cursor:pointer;transition:background-color .2s}.chat-item[data-v-a76a4ef3]:hover{background-color:#e5e5e5}.chat-item-active[data-v-a76a4ef3]{background-color:#d6d6d6}.friend-avatar-wrapper[data-v-a76a4ef3]{position:relative;flex-shrink:0}.friend-avatar[data-v-a76a4ef3]{width:44px;height:44px;border-radius:50%;object-fit:cover}.online-indicator[data-v-a76a4ef3]{position:absolute;bottom:0;right:0;width:12px;height:12px;background-color:#22c55e;border-radius:50%;border:2px solid white}.online-indicator.offline[data-v-a76a4ef3]{background-color:#9ca3af}.friend-info[data-v-a76a4ef3]{margin-left:12px;flex:1;overflow:hidden}.friend-header[data-v-a76a4ef3]{display:flex;justify-content:space-between;align-items:center}.friend-name[data-v-a76a4ef3]{font-weight:500;color:#1f2937;font-size:14px}.last-time[data-v-a76a4ef3]{font-size:12px;color:#9ca3af}.friend-preview[data-v-a76a4ef3]{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.last-msg[data-v-a76a4ef3]{font-size:12px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;flex:1}.unread-badge[data-v-a76a4ef3]{background-color:#ef4444;color:#fff;font-size:10px;border-radius:9999px;padding:2px 6px;min-width:18px;text-align:center}.add-friend-section[data-v-a76a4ef3]{padding:12px}.add-friend-btn[data-v-a76a4ef3]{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}.add-friend-btn[data-v-a76a4ef3]:hover{background-color:#e5e5e5}.add-friend-icon[data-v-a76a4ef3]{width:44px;height:44px;background-color:#22c55e;border-radius:8px;display:flex;align-items:center;justify-content:center}.add-friend-text[data-v-a76a4ef3]{font-size:14px;color:#1f2937}.friend-request-item[data-v-a76a4ef3]{display:flex;align-items:center;justify-content:space-between;padding:12px}.friend-request-item[data-v-a76a4ef3]:hover{background-color:#e5e5e5}.request-info[data-v-a76a4ef3]{display:flex;align-items:center}.request-avatar[data-v-a76a4ef3]{width:44px;height:44px;border-radius:50%;object-fit:cover}.request-details[data-v-a76a4ef3]{margin-left:12px}.request-username[data-v-a76a4ef3]{font-weight:500;color:#1f2937;font-size:14px}.request-desc[data-v-a76a4ef3]{font-size:12px;color:#6b7280;margin-top:4px}.chat-area[data-v-a76a4ef3]{flex:1;display:flex;flex-direction:column;min-width:0;background-color:#fff}.friend-profile[data-v-a76a4ef3]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background-color:#f5f5f5}.profile-avatar[data-v-a76a4ef3]{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:24px}.profile-name[data-v-a76a4ef3]{font-size:20px;font-weight:500;color:#1f2937;margin-bottom:8px}.profile-status[data-v-a76a4ef3]{display:flex;align-items:center;gap:8px;margin-bottom:32px}.status-dot[data-v-a76a4ef3]{width:8px;height:8px;border-radius:50%}.status-online[data-v-a76a4ef3]{background-color:#22c55e}.status-offline[data-v-a76a4ef3]{background-color:#9ca3af}.start-chat-btn[data-v-a76a4ef3]{width:160px}.chat-window[data-v-a76a4ef3]{flex:1;display:flex;flex-direction:column;min-height:0}.chat-header[data-v-a76a4ef3]{height:56px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background-color:#fff}.chat-title[data-v-a76a4ef3]{display:flex;align-items:center;gap:12px}.chat-name[data-v-a76a4ef3]{font-weight:500;color:#1f2937}.status-badge[data-v-a76a4ef3]{font-size:12px;padding:2px 8px;border-radius:4px}.status-badge-online[data-v-a76a4ef3]{background-color:#dcfce7;color:#16a34a}.status-badge-offline[data-v-a76a4ef3]{background-color:#f3f4f6;color:#6b7280}.chat-actions[data-v-a76a4ef3]{display:flex;align-items:center;gap:12px;color:#6b7280}.action-icon[data-v-a76a4ef3]{cursor:pointer}.action-icon[data-v-a76a4ef3]:hover{color:#374151}.messages-container[data-v-a76a4ef3]{flex:1;overflow-y:auto;padding:16px;background-color:#f5f5f5;min-height:0}.message-wrapper[data-v-a76a4ef3]{display:flex;margin-bottom:24px;align-items:flex-start}.message-self[data-v-a76a4ef3]{flex-direction:row-reverse}.message-other[data-v-a76a4ef3]{flex-direction:row}.message-avatar[data-v-a76a4ef3]{flex-shrink:0}.avatar-sm[data-v-a76a4ef3]{width:40px;height:40px;border-radius:8px;object-fit:cover}.message-content-wrapper[data-v-a76a4ef3]{display:flex;flex-direction:column;max-width:75%}.content-self[data-v-a76a4ef3]{margin-right:12px;align-items:flex-end}.content-other[data-v-a76a4ef3]{margin-left:12px;align-items:flex-start}.sender-name[data-v-a76a4ef3]{font-size:12px;color:#6b7280;margin-bottom:4px;margin-left:4px}.message-bubble-wrapper[data-v-a76a4ef3]{position:relative}.message-bubble[data-v-a76a4ef3]{padding:8px 12px;font-size:14px;word-break:break-all;white-space:pre-wrap;border-radius:8px;box-shadow:0 1px 2px #0000000d}.image-bubble[data-v-a76a4ef3]{border-radius:8px;position:relative;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;max-width:300px}.message-image[data-v-a76a4ef3]{width:100%;height:auto;display:block}.image-size[data-v-a76a4ef3]{position:absolute;left:4px;bottom:0;color:#fff;font-size:10px}.file-bubble[data-v-a76a4ef3]{border-radius:8px;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;min-width:200px}.file-content[data-v-a76a4ef3]{display:flex;align-items:center;gap:12px;padding:12px 16px}.file-icon[data-v-a76a4ef3]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}.bubble-self .file-icon[data-v-a76a4ef3]{color:#374151}.bubble-other .file-icon[data-v-a76a4ef3]{color:#6b7280}.file-info[data-v-a76a4ef3]{flex:1;min-width:0}.file-name[data-v-a76a4ef3]{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;line-height:1.2}.bubble-self .file-name[data-v-a76a4ef3],.bubble-other .file-name[data-v-a76a4ef3]{color:#1f2937}.file-meta[data-v-a76a4ef3]{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:8px}.bubble-self .file-meta[data-v-a76a4ef3]{color:#4b5563}.bubble-other .file-meta[data-v-a76a4ef3]{color:#6b7280}.message-time[data-v-a76a4ef3]{font-size:10px;color:#9ca3af;margin-top:4px}.time-right[data-v-a76a4ef3]{text-align:right}.time-left[data-v-a76a4ef3]{text-align:left}.input-area[data-v-a76a4ef3]{background-color:#fff;border-top:1px solid #e5e7eb}.pending-files[data-v-a76a4ef3]{padding:8px 12px;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:8px}.pending-file[data-v-a76a4ef3]{position:relative}.pending-image-wrapper[data-v-a76a4ef3]{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.pending-image[data-v-a76a4ef3]{width:100%;height:100%;object-fit:cover}.pending-file-wrapper[data-v-a76a4ef3]{position:relative;width:96px;height:80px;border-radius:8px;border:1px solid #e5e7eb;background-color:#f9fafb;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px}.pending-file-icon[data-v-a76a4ef3]{color:#9ca3af;font-size:28px;margin-bottom:4px}.pending-file-name[data-v-a76a4ef3]{font-size:10px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;text-align:center;padding:0 4px}.remove-file-btn[data-v-a76a4ef3]{position:absolute;top:4px;right:4px;width:20px;height:20px;background-color:#00000080;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;font-size:14px;border:none}.remove-file-btn[data-v-a76a4ef3]:hover{background-color:#000000b3}.input-actions[data-v-a76a4ef3]{display:flex;align-items:center;padding:12px;gap:8px}.input-wrapper[data-v-a76a4ef3]{padding:0 12px 12px}.message-input[data-v-a76a4ef3]{width:100%;resize:none;border:none;outline:none;font-size:14px;height:80px}.send-btn-wrapper[data-v-a76a4ef3]{display:flex;justify-content:flex-end;padding:0 12px 12px}.send-btn[data-v-a76a4ef3]{background-color:#07c160;border:none;font-size:14px;padding:8px 24px}.send-btn[data-v-a76a4ef3]:hover{background-color:#06ad56}.hidden-file-input[data-v-a76a4ef3]{display:none}.empty-state[data-v-a76a4ef3]{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#f5f5f5}.empty-icon[data-v-a76a4ef3]{color:#d1d5db;margin-bottom:8px}.empty-text[data-v-a76a4ef3]{color:#9ca3af}.detail-panel[data-v-a76a4ef3]{width:256px;background-color:#f5f5f5;border-left:1px solid #e5e7eb;display:flex;flex-direction:column}.detail-header[data-v-a76a4ef3]{height:56px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e5e7eb;font-weight:500;color:#374151}.detail-content[data-v-a76a4ef3]{flex:1;padding:16px}.detail-profile[data-v-a76a4ef3]{display:flex;flex-direction:column;align-items:center}.detail-avatar[data-v-a76a4ef3]{width:80px;height:80px;border-radius:50%;object-fit:cover}.detail-name[data-v-a76a4ef3]{margin-top:12px;font-weight:500;color:#1f2937;font-size:18px}.detail-actions[data-v-a76a4ef3]{margin-top:24px;width:100%}.detail-action-item[data-v-a76a4ef3]{padding:12px;border-bottom:1px solid #f3f4f6;cursor:pointer;background-color:#fff}.detail-action-item[data-v-a76a4ef3]:hover{background-color:#f9fafb}.detail-action-item[data-v-a76a4ef3]:first-child{border-radius:8px 8px 0 0}.detail-action-item[data-v-a76a4ef3]:last-child{border-bottom:none;border-radius:0 0 8px 8px}.search-users-wrapper[data-v-a76a4ef3]{margin-bottom:16px}.search-users-input[data-v-a76a4ef3]{position:relative}.users-list-scroll[data-v-a76a4ef3]{max-height:400px;overflow-y:auto}.available-user-item[data-v-a76a4ef3]{display:flex;align-items:center;justify-content:space-between;padding:12px;margin-bottom:8px;border-radius:8px;transition:background-color .2s}.available-user-item[data-v-a76a4ef3]:hover{background-color:#f9fafb}.available-user-info[data-v-a76a4ef3]{display:flex;align-items:center}.available-user-avatar[data-v-a76a4ef3]{width:40px;height:40px;border-radius:50%;object-fit:cover}.available-user-name[data-v-a76a4ef3]{margin-left:12px;font-weight:500;color:#1f2937}.settings-container[data-v-a76a4ef3]{display:flex;flex-direction:column}.settings-avatar-section[data-v-a76a4ef3]{display:flex;flex-direction:column;align-items:center;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid #f3f4f6}.settings-avatar-wrapper[data-v-a76a4ef3]{position:relative;margin-bottom:16px}.settings-avatar[data-v-a76a4ef3]{width:112px;height:112px;border-radius:50%;object-fit:cover;border:4px solid white;box-shadow:0 10px 15px -3px #0000001a}.settings-avatar-edit[data-v-a76a4ef3]{position:absolute;bottom:-4px;right:-4px;width:40px;height:40px;background-color:#22c55e;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;box-shadow:0 4px 6px -1px #0000001a}.settings-avatar-edit[data-v-a76a4ef3]:hover{background-color:#16a34a}.settings-avatar-icon[data-v-a76a4ef3]{color:#fff}.hidden-avatar-input[data-v-a76a4ef3]{display:none}.settings-user-display[data-v-a76a4ef3]{text-align:center}.settings-nickname[data-v-a76a4ef3]{font-weight:600;color:#1f2937;font-size:20px}.settings-username[data-v-a76a4ef3]{font-size:14px;color:#6b7280;margin-top:4px}.settings-form-section[data-v-a76a4ef3]{gap:20px}.settings-form-header[data-v-a76a4ef3]{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.settings-form-title[data-v-a76a4ef3]{color:#374151;font-weight:600;display:flex;align-items:center;gap:8px}.settings-edit-btn[data-v-a76a4ef3]{border-radius:9999px}.settings-form[data-v-a76a4ef3]{background-color:#f9fafb;border-radius:16px;padding:24px;gap:20px;display:flex;flex-direction:column}.settings-form-item[data-v-a76a4ef3]{display:flex;flex-direction:column}.settings-form-label[data-v-a76a4ef3]{display:block;font-size:14px;color:#4b5563;margin-bottom:8px;font-weight:500}.settings-form-value[data-v-a76a4ef3]{color:#1f2937;background-color:#fff;border-radius:8px;padding:12px 16px;border:1px solid #e5e7eb}.bio-value[data-v-a76a4ef3]{min-height:80px}.settings-form-actions[data-v-a76a4ef3]{display:flex;gap:12px;justify-content:flex-end;padding-top:8px}.context-menu[data-v-a76a4ef3]{position:fixed;background-color:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;padding:4px 0;z-index:1000}.context-menu-item[data-v-a76a4ef3]{padding:8px 16px;cursor:pointer;font-size:14px}.context-menu-item[data-v-a76a4ef3]:hover{background-color:#f3f4f6}
|
|
1
|
+
*,*:before,*:after{box-sizing:border-box}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}::-webkit-scrollbar-track{background:transparent}.avatar-crop-container[data-v-4e4a992b]{display:flex;flex-direction:column;gap:20px}.crop-area[data-v-4e4a992b]{position:relative;width:100%;height:300px;overflow:hidden;background:#f5f5f5;border-radius:8px}.crop-image[data-v-4e4a992b]{position:absolute;cursor:move;-webkit-user-select:none;user-select:none;max-width:none}.crop-overlay[data-v-4e4a992b]{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.crop-box[data-v-4e4a992b]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px}.crop-border[data-v-4e4a992b]{width:100%;height:100%;border:2px solid #fff;box-shadow:0 0 0 9999px #00000080;border-radius:8px}.crop-mask[data-v-4e4a992b]{position:absolute;top:0;right:0;bottom:0;left:0;cursor:move}.zoom-controls[data-v-4e4a992b]{padding:0 20px}.chat-panel[data-v-f5908195]{display:flex;height:680px;background-color:#fff;overflow:hidden;border-radius:12px;box-shadow:0 4px 20px #0000001a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chat-sidebar[data-v-f5908195]{width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;background-color:#f9fafb;border-right:1px solid #e5e7eb}.sidebar-avatar[data-v-f5908195]{margin-top:16px;margin-bottom:16px;cursor:pointer}.sidebar-avatar-img[data-v-f5908195]{width:40px;height:40px;border-radius:50%;border:2px solid #e5e7eb;object-fit:cover}.sidebar-nav-item[data-v-f5908195]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:all .2s;position:relative}.sidebar-nav-item-active[data-v-f5908195]{background-color:#dcfce7;color:#07c160}.sidebar-nav-item-inactive[data-v-f5908195]{color:#6b7280}.sidebar-nav-item-inactive[data-v-f5908195]:hover{background-color:#f3f4f6}.sidebar-nav-badge[data-v-f5908195]{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background-color:#ef4444;border-radius:50%;font-size:10px;color:#fff;display:flex;align-items:center;justify-content:center}.sidebar-spacer[data-v-f5908195]{flex:1}.chat-content-panel[data-v-f5908195]{width:288px;background-color:#f5f5f5;border-right:1px solid #e5e7eb;display:flex;flex-direction:column}.chat-search-bar[data-v-f5908195]{padding:12px}.chat-search-input[data-v-f5908195]{width:100%}.chat-content-scroll[data-v-f5908195]{flex:1;overflow-y:auto;min-height:0}.chat-list-item[data-v-f5908195]{display:flex;align-items:center;padding:12px;cursor:pointer;transition:background-color .2s}.chat-list-item[data-v-f5908195]:hover{background-color:#e5e5e5}.chat-list-item-active[data-v-f5908195]{background-color:#d6d6d6}.chat-list-avatar-wrapper[data-v-f5908195]{position:relative;flex-shrink:0}.chat-list-avatar[data-v-f5908195]{width:44px;height:44px;border-radius:50%;object-fit:cover}.chat-list-online-indicator[data-v-f5908195]{position:absolute;bottom:0;right:0;width:12px;height:12px;background-color:#22c55e;border-radius:50%;border:2px solid white}.chat-list-online-indicator.chat-list-offline[data-v-f5908195]{background-color:#9ca3af}.chat-list-info[data-v-f5908195]{margin-left:12px;flex:1;overflow:hidden}.chat-list-header[data-v-f5908195]{display:flex;justify-content:space-between;align-items:center}.chat-list-name[data-v-f5908195]{font-weight:500;color:#1f2937;font-size:14px}.chat-list-time[data-v-f5908195]{font-size:12px;color:#9ca3af}.chat-list-preview[data-v-f5908195]{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.chat-list-last-msg[data-v-f5908195]{font-size:12px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;flex:1}.chat-list-unread[data-v-f5908195]{background-color:#ef4444;color:#fff;font-size:10px;border-radius:9999px;padding:2px 6px;min-width:18px;text-align:center}.add-friend-section[data-v-f5908195]{padding:12px}.add-friend-btn[data-v-f5908195]{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}.add-friend-btn[data-v-f5908195]:hover{background-color:#e5e5e5}.add-friend-icon[data-v-f5908195]{width:44px;height:44px;background-color:#07c160;border-radius:8px;display:flex;align-items:center;justify-content:center}.add-friend-text[data-v-f5908195]{font-size:14px;color:#1f2937}.friend-request-item[data-v-f5908195]{display:flex;align-items:center;justify-content:space-between;padding:12px}.friend-request-item[data-v-f5908195]:hover{background-color:#e5e5e5}.friend-request-info[data-v-f5908195]{display:flex;align-items:center}.friend-request-avatar[data-v-f5908195]{width:44px;height:44px;border-radius:50%;object-fit:cover}.friend-request-details[data-v-f5908195]{margin-left:12px}.friend-request-username[data-v-f5908195]{font-weight:500;color:#1f2937;font-size:14px}.friend-request-desc[data-v-f5908195]{font-size:12px;color:#6b7280;margin-top:4px}.chat-main-area[data-v-f5908195]{flex:1;display:flex;flex-direction:column;min-width:0;background-color:#fff}.friend-profile-area[data-v-f5908195]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background-color:#f5f5f5}.profile-avatar[data-v-f5908195]{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:24px}.profile-name[data-v-f5908195]{font-size:20px;font-weight:500;color:#1f2937;margin-bottom:8px}.profile-status[data-v-f5908195]{display:flex;align-items:center;gap:8px;margin-bottom:32px}.profile-status-dot[data-v-f5908195]{width:8px;height:8px;border-radius:50%}.profile-status-online[data-v-f5908195]{background-color:#22c55e}.profile-status-offline[data-v-f5908195]{background-color:#9ca3af}.profile-start-chat-btn[data-v-f5908195]{width:160px}.chat-window-area[data-v-f5908195]{flex:1;display:flex;flex-direction:column;min-height:0}.chat-window-header[data-v-f5908195]{height:56px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background-color:#fff}.chat-window-title[data-v-f5908195]{display:flex;align-items:center;gap:12px}.chat-window-name[data-v-f5908195]{font-weight:500;color:#1f2937}.chat-window-status[data-v-f5908195]{font-size:12px;padding:2px 8px;border-radius:4px}.chat-window-status-online[data-v-f5908195]{background-color:#dcfce7;color:#16a34a}.chat-window-status-offline[data-v-f5908195]{background-color:#f3f4f6;color:#6b7280}.chat-window-actions[data-v-f5908195]{display:flex;align-items:center;gap:12px;color:#6b7280}.chat-action-icon[data-v-f5908195]{cursor:pointer}.chat-action-icon[data-v-f5908195]:hover{color:#374151}.chat-messages-container[data-v-f5908195]{flex:1;overflow-y:auto;padding:16px;background-color:#f5f5f5;min-height:0}.chat-messages-container[data-v-f5908195]::-webkit-scrollbar{width:6px}.chat-messages-container[data-v-f5908195]::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.chat-messages-container[data-v-f5908195]::-webkit-scrollbar-track{background:transparent}.message-wrapper[data-v-f5908195]{display:flex;margin-bottom:24px;align-items:flex-start}.message-self[data-v-f5908195]{flex-direction:row-reverse}.message-other[data-v-f5908195]{flex-direction:row}.message-avatar[data-v-f5908195]{flex-shrink:0}.message-avatar-img[data-v-f5908195]{width:40px;height:40px;border-radius:8px;object-fit:cover}.message-content[data-v-f5908195]{display:flex;flex-direction:column;max-width:75%}.message-content-self[data-v-f5908195]{margin-right:12px;align-items:flex-end}.message-content-other[data-v-f5908195]{margin-left:12px;align-items:flex-start}.message-sender-name[data-v-f5908195]{font-size:12px;color:#6b7280;margin-bottom:4px;margin-left:4px}.message-bubble-wrapper[data-v-f5908195]{position:relative}.message-bubble[data-v-f5908195]{padding:8px 12px;font-size:14px;word-break:break-all;white-space:pre-wrap;border-radius:8px;box-shadow:0 1px 2px #0000000d}.message-bubble-self[data-v-f5908195]{background-color:#95ec69;color:#1f2937;position:relative}.message-bubble-self[data-v-f5908195]:after{content:"";position:absolute;right:-5px;top:10px;width:10px;height:10px;background-color:#95ec69;transform:rotate(45deg);box-shadow:2px -2px 2px #0000000d}.message-bubble-other[data-v-f5908195]{background-color:#fff;color:#1f2937;position:relative}.message-bubble-other[data-v-f5908195]:after{content:"";position:absolute;left:-5px;top:10px;width:10px;height:10px;background-color:#fff;transform:rotate(45deg);box-shadow:-2px 2px 2px #0000000d}.message-image-bubble[data-v-f5908195]{border-radius:8px;position:relative;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;max-width:300px;padding:0}.message-image[data-v-f5908195]{width:100%;height:auto;display:block}.message-image-size[data-v-f5908195]{position:absolute;left:4px;bottom:0;color:#fff;font-size:10px}.message-file-bubble[data-v-f5908195]{border-radius:8px;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;min-width:200px}.message-file-content[data-v-f5908195]{display:flex;align-items:center;gap:12px;padding:12px 16px}.message-file-icon[data-v-f5908195]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}.message-bubble-self .message-file-icon[data-v-f5908195]{color:#374151}.message-bubble-other .message-file-icon[data-v-f5908195]{color:#6b7280}.message-file-info[data-v-f5908195]{flex:1;min-width:0}.message-file-name[data-v-f5908195]{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;line-height:1.2}.message-bubble-self .message-file-name[data-v-f5908195],.message-bubble-other .message-file-name[data-v-f5908195]{color:#1f2937}.message-file-meta[data-v-f5908195]{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:8px}.message-bubble-self .message-file-meta[data-v-f5908195]{color:#4b5563}.message-bubble-other .message-file-meta[data-v-f5908195]{color:#6b7280}.message-time[data-v-f5908195]{font-size:10px;color:#9ca3af;margin-top:4px}.message-time-right[data-v-f5908195]{text-align:right}.message-time-left[data-v-f5908195]{text-align:left}.chat-input-area[data-v-f5908195]{background-color:#fff;border-top:1px solid #e5e7eb}.pending-files-area[data-v-f5908195]{padding:8px 12px;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:8px}.pending-file-item[data-v-f5908195]{position:relative}.pending-image-wrapper[data-v-f5908195]{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.pending-image[data-v-f5908195]{width:100%;height:100%;object-fit:cover}.pending-file-wrapper[data-v-f5908195]{position:relative;width:96px;height:80px;border-radius:8px;border:1px solid #e5e7eb;background-color:#f9fafb;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px}.pending-file-icon[data-v-f5908195]{color:#9ca3af;font-size:28px;margin-bottom:4px}.pending-file-name[data-v-f5908195]{font-size:10px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;text-align:center;padding:0 4px}.pending-file-remove-btn[data-v-f5908195]{position:absolute;top:4px;right:4px;width:20px;height:20px;background-color:#00000080;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;font-size:14px;border:none}.pending-file-remove-btn[data-v-f5908195]:hover{background-color:#000000b3}.input-toolbar[data-v-f5908195]{display:flex;align-items:center;padding:12px;gap:8px}.input-toolbar-icon[data-v-f5908195]{color:#6b7280;cursor:pointer;font-size:20px}.input-toolbar-icon[data-v-f5908195]:hover{color:#374151}.input-textarea-wrapper[data-v-f5908195]{padding:0 12px 12px}.message-input-textarea[data-v-f5908195]{width:100%;resize:none;border:none;outline:none;font-size:14px;height:80px;font-family:inherit}.input-send-wrapper[data-v-f5908195]{display:flex;justify-content:flex-end;padding:0 12px 12px}.send-message-btn[data-v-f5908195]{background-color:#07c160;border:none;font-size:14px;padding:8px 24px}.send-message-btn[data-v-f5908195]:hover{background-color:#06ad56}.hidden-file-input[data-v-f5908195]{display:none}.chat-empty-state[data-v-f5908195]{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#f5f5f5}.empty-state-icon[data-v-f5908195]{color:#d1d5db;margin-bottom:8px}.empty-state-text[data-v-f5908195]{color:#9ca3af;font-size:14px}.chat-detail-panel[data-v-f5908195]{width:256px;background-color:#f5f5f5;border-left:1px solid #e5e7eb;display:flex;flex-direction:column}.chat-detail-header[data-v-f5908195]{height:56px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e5e7eb;font-weight:500;color:#374151;font-size:14px}.chat-detail-content[data-v-f5908195]{flex:1;padding:16px}.chat-detail-profile[data-v-f5908195]{display:flex;flex-direction:column;align-items:center}.chat-detail-avatar[data-v-f5908195]{width:80px;height:80px;border-radius:50%;object-fit:cover}.chat-detail-name[data-v-f5908195]{margin-top:12px;font-weight:500;color:#1f2937;font-size:18px}.chat-detail-actions[data-v-f5908195]{margin-top:24px;width:100%}.chat-detail-action-item[data-v-f5908195]{padding:12px;border-bottom:1px solid #f3f4f6;cursor:pointer;background-color:#fff;font-size:14px;color:#374151}.chat-detail-action-item[data-v-f5908195]:hover{background-color:#f9fafb}.chat-detail-action-item[data-v-f5908195]:first-child{border-radius:8px 8px 0 0}.chat-detail-action-item[data-v-f5908195]:last-child{border-bottom:none;border-radius:0 0 8px 8px}.add-friend-search-wrapper[data-v-f5908195]{margin-bottom:16px}.add-friend-search-input[data-v-f5908195]{width:100%}.add-friend-users-list[data-v-f5908195]{max-height:400px;overflow-y:auto}.add-friend-user-item[data-v-f5908195]{display:flex;align-items:center;justify-content:space-between;padding:12px;margin-bottom:8px;border-radius:8px;transition:background-color .2s}.add-friend-user-item[data-v-f5908195]:hover{background-color:#f9fafb}.add-friend-user-info[data-v-f5908195]{display:flex;align-items:center}.add-friend-user-avatar[data-v-f5908195]{width:40px;height:40px;border-radius:50%;object-fit:cover}.add-friend-user-name[data-v-f5908195]{margin-left:12px;font-weight:500;color:#1f2937;font-size:14px}.chat-settings-dialog[data-v-f5908195] .el-dialog{border-radius:16px;overflow:hidden}.chat-settings-dialog[data-v-f5908195] .el-dialog__header{padding:24px 24px 0;margin:0}.chat-settings-dialog[data-v-f5908195] .el-dialog__title{font-size:20px;font-weight:600;color:#1f2937}.chat-settings-container[data-v-f5908195]{display:flex;flex-direction:column}.chat-settings-avatar-section[data-v-f5908195]{display:flex;flex-direction:column;align-items:center;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid #f3f4f6}.chat-settings-avatar-wrapper[data-v-f5908195]{position:relative;margin-bottom:16px}.chat-settings-avatar[data-v-f5908195]{width:112px;height:112px;border-radius:50%;object-fit:cover;border:4px solid white;box-shadow:0 10px 15px -3px #0000001a}.chat-settings-avatar-edit[data-v-f5908195]{position:absolute;bottom:-4px;right:-4px;width:40px;height:40px;background-color:#07c160;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;box-shadow:0 4px 6px -1px #0000001a}.chat-settings-avatar-edit[data-v-f5908195]:hover{background-color:#06ad56}.chat-settings-avatar-icon[data-v-f5908195]{color:#fff}.hidden-avatar-input[data-v-f5908195]{display:none}.chat-settings-user-display[data-v-f5908195]{text-align:center}.chat-settings-nickname[data-v-f5908195]{font-weight:600;color:#1f2937;font-size:20px}.chat-settings-username[data-v-f5908195]{font-size:14px;color:#6b7280;margin-top:4px}.chat-settings-form-section[data-v-f5908195]{gap:20px}.chat-settings-form-header[data-v-f5908195]{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.chat-settings-form-title[data-v-f5908195]{color:#374151;font-weight:600;display:flex;align-items:center;gap:8px;font-size:14px}.chat-settings-edit-btn[data-v-f5908195]{border-radius:9999px}.chat-settings-form[data-v-f5908195]{background-color:#f9fafb;border-radius:16px;padding:24px;gap:20px;display:flex;flex-direction:column}.chat-settings-form-item[data-v-f5908195]{display:flex;flex-direction:column}.chat-settings-form-label[data-v-f5908195]{display:block;font-size:14px;color:#4b5563;margin-bottom:8px;font-weight:500}.chat-settings-form-value[data-v-f5908195]{color:#1f2937;background-color:#fff;border-radius:8px;padding:12px 16px;border:1px solid #e5e7eb;font-size:14px}.chat-settings-form-value.bio-value[data-v-f5908195]{min-height:80px}.chat-settings-form-actions[data-v-f5908195]{display:flex;gap:12px;justify-content:flex-end;padding-top:8px}.chat-context-menu[data-v-f5908195]{position:fixed;background-color:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;padding:4px 0;z-index:1000}.chat-context-menu-item[data-v-f5908195]{padding:8px 16px;cursor:pointer;font-size:14px;color:#374151}.chat-context-menu-item[data-v-f5908195]:hover{background-color:#f3f4f6}.chat-dialog[data-v-a76a4ef3] .el-dialog{padding:0;border-radius:12px;overflow:hidden}.chat-dialog[data-v-a76a4ef3] .el-dialog__header{display:none}.chat-dialog[data-v-a76a4ef3] .el-dialog__body{padding:0}.bubble-self[data-v-a76a4ef3]{position:relative;background-color:#95ec69!important}.bubble-self[data-v-a76a4ef3]:after{content:"";position:absolute;right:-5px;top:10px;width:10px;height:10px;background-color:#95ec69;transform:rotate(45deg);box-shadow:2px -2px 2px #0000000d}.bubble-other[data-v-a76a4ef3]{position:relative;background-color:#fff!important}.bubble-other[data-v-a76a4ef3]:after{content:"";position:absolute;left:-5px;top:10px;width:10px;height:10px;background-color:#fff;transform:rotate(45deg);box-shadow:-2px 2px 2px #0000000d}.messages-container[data-v-a76a4ef3]::-webkit-scrollbar{width:6px}.messages-container[data-v-a76a4ef3]::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.messages-container[data-v-a76a4ef3]::-webkit-scrollbar-track{background:transparent}.settings-dialog[data-v-a76a4ef3] .el-dialog{border-radius:16px;overflow:hidden}.settings-dialog[data-v-a76a4ef3] .el-dialog__header{padding:24px 24px 0;margin:0}.settings-dialog[data-v-a76a4ef3] .el-dialog__title{font-size:20px;font-weight:600;color:#1f2937}.chat-container[data-v-a76a4ef3]{display:flex;height:680px;background-color:#fff;overflow:hidden}.sidebar-nav[data-v-a76a4ef3]{width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;background-color:#f9fafb;border-right:1px solid #e5e7eb}.sidebar-avatar[data-v-a76a4ef3]{margin-top:16px;margin-bottom:16px;cursor:pointer}.avatar-img[data-v-a76a4ef3]{width:40px;height:40px;border-radius:50%;border:2px solid #e5e7eb}.nav-item[data-v-a76a4ef3]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:all .2s;position:relative}.nav-item-active[data-v-a76a4ef3]{background-color:#f0fdf4;color:#16a34a}.nav-item-inactive[data-v-a76a4ef3]{color:#6b7280}.nav-item-inactive[data-v-a76a4ef3]:hover{background-color:#f3f4f6}.nav-badge[data-v-a76a4ef3]{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background-color:#ef4444;border-radius:50%;font-size:10px;color:#fff;display:flex;align-items:center;justify-content:center}.nav-spacer[data-v-a76a4ef3]{flex:1}.content-panel[data-v-a76a4ef3]{width:288px;background-color:#f5f5f5;border-right:1px solid #e5e7eb;display:flex;flex-direction:column}.search-bar[data-v-a76a4ef3]{padding:12px}.content-scroll[data-v-a76a4ef3]{flex:1;overflow-y:auto;min-height:0}.chat-item[data-v-a76a4ef3]{display:flex;align-items:center;padding:12px;cursor:pointer;transition:background-color .2s}.chat-item[data-v-a76a4ef3]:hover{background-color:#e5e5e5}.chat-item-active[data-v-a76a4ef3]{background-color:#d6d6d6}.friend-avatar-wrapper[data-v-a76a4ef3]{position:relative;flex-shrink:0}.friend-avatar[data-v-a76a4ef3]{width:44px;height:44px;border-radius:50%;object-fit:cover}.online-indicator[data-v-a76a4ef3]{position:absolute;bottom:0;right:0;width:12px;height:12px;background-color:#22c55e;border-radius:50%;border:2px solid white}.online-indicator.offline[data-v-a76a4ef3]{background-color:#9ca3af}.friend-info[data-v-a76a4ef3]{margin-left:12px;flex:1;overflow:hidden}.friend-header[data-v-a76a4ef3]{display:flex;justify-content:space-between;align-items:center}.friend-name[data-v-a76a4ef3]{font-weight:500;color:#1f2937;font-size:14px}.last-time[data-v-a76a4ef3]{font-size:12px;color:#9ca3af}.friend-preview[data-v-a76a4ef3]{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.last-msg[data-v-a76a4ef3]{font-size:12px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;flex:1}.unread-badge[data-v-a76a4ef3]{background-color:#ef4444;color:#fff;font-size:10px;border-radius:9999px;padding:2px 6px;min-width:18px;text-align:center}.add-friend-section[data-v-a76a4ef3]{padding:12px}.add-friend-btn[data-v-a76a4ef3]{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}.add-friend-btn[data-v-a76a4ef3]:hover{background-color:#e5e5e5}.add-friend-icon[data-v-a76a4ef3]{width:44px;height:44px;background-color:#22c55e;border-radius:8px;display:flex;align-items:center;justify-content:center}.add-friend-text[data-v-a76a4ef3]{font-size:14px;color:#1f2937}.friend-request-item[data-v-a76a4ef3]{display:flex;align-items:center;justify-content:space-between;padding:12px}.friend-request-item[data-v-a76a4ef3]:hover{background-color:#e5e5e5}.request-info[data-v-a76a4ef3]{display:flex;align-items:center}.request-avatar[data-v-a76a4ef3]{width:44px;height:44px;border-radius:50%;object-fit:cover}.request-details[data-v-a76a4ef3]{margin-left:12px}.request-username[data-v-a76a4ef3]{font-weight:500;color:#1f2937;font-size:14px}.request-desc[data-v-a76a4ef3]{font-size:12px;color:#6b7280;margin-top:4px}.chat-area[data-v-a76a4ef3]{flex:1;display:flex;flex-direction:column;min-width:0;background-color:#fff}.friend-profile[data-v-a76a4ef3]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background-color:#f5f5f5}.profile-avatar[data-v-a76a4ef3]{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:24px}.profile-name[data-v-a76a4ef3]{font-size:20px;font-weight:500;color:#1f2937;margin-bottom:8px}.profile-status[data-v-a76a4ef3]{display:flex;align-items:center;gap:8px;margin-bottom:32px}.status-dot[data-v-a76a4ef3]{width:8px;height:8px;border-radius:50%}.status-online[data-v-a76a4ef3]{background-color:#22c55e}.status-offline[data-v-a76a4ef3]{background-color:#9ca3af}.start-chat-btn[data-v-a76a4ef3]{width:160px}.chat-window[data-v-a76a4ef3]{flex:1;display:flex;flex-direction:column;min-height:0}.chat-header[data-v-a76a4ef3]{height:56px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background-color:#fff}.chat-title[data-v-a76a4ef3]{display:flex;align-items:center;gap:12px}.chat-name[data-v-a76a4ef3]{font-weight:500;color:#1f2937}.status-badge[data-v-a76a4ef3]{font-size:12px;padding:2px 8px;border-radius:4px}.status-badge-online[data-v-a76a4ef3]{background-color:#dcfce7;color:#16a34a}.status-badge-offline[data-v-a76a4ef3]{background-color:#f3f4f6;color:#6b7280}.chat-actions[data-v-a76a4ef3]{display:flex;align-items:center;gap:12px;color:#6b7280}.action-icon[data-v-a76a4ef3]{cursor:pointer}.action-icon[data-v-a76a4ef3]:hover{color:#374151}.messages-container[data-v-a76a4ef3]{flex:1;overflow-y:auto;padding:16px;background-color:#f5f5f5;min-height:0}.message-wrapper[data-v-a76a4ef3]{display:flex;margin-bottom:24px;align-items:flex-start}.message-self[data-v-a76a4ef3]{flex-direction:row-reverse}.message-other[data-v-a76a4ef3]{flex-direction:row}.message-avatar[data-v-a76a4ef3]{flex-shrink:0}.avatar-sm[data-v-a76a4ef3]{width:40px;height:40px;border-radius:8px;object-fit:cover}.message-content-wrapper[data-v-a76a4ef3]{display:flex;flex-direction:column;max-width:75%}.content-self[data-v-a76a4ef3]{margin-right:12px;align-items:flex-end}.content-other[data-v-a76a4ef3]{margin-left:12px;align-items:flex-start}.sender-name[data-v-a76a4ef3]{font-size:12px;color:#6b7280;margin-bottom:4px;margin-left:4px}.message-bubble-wrapper[data-v-a76a4ef3]{position:relative}.message-bubble[data-v-a76a4ef3]{padding:8px 12px;font-size:14px;word-break:break-all;white-space:pre-wrap;border-radius:8px;box-shadow:0 1px 2px #0000000d}.image-bubble[data-v-a76a4ef3]{border-radius:8px;position:relative;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;max-width:300px}.message-image[data-v-a76a4ef3]{width:100%;height:auto;display:block}.image-size[data-v-a76a4ef3]{position:absolute;left:4px;bottom:0;color:#fff;font-size:10px}.file-bubble[data-v-a76a4ef3]{border-radius:8px;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;min-width:200px}.file-content[data-v-a76a4ef3]{display:flex;align-items:center;gap:12px;padding:12px 16px}.file-icon[data-v-a76a4ef3]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}.bubble-self .file-icon[data-v-a76a4ef3]{color:#374151}.bubble-other .file-icon[data-v-a76a4ef3]{color:#6b7280}.file-info[data-v-a76a4ef3]{flex:1;min-width:0}.file-name[data-v-a76a4ef3]{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;line-height:1.2}.bubble-self .file-name[data-v-a76a4ef3],.bubble-other .file-name[data-v-a76a4ef3]{color:#1f2937}.file-meta[data-v-a76a4ef3]{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:8px}.bubble-self .file-meta[data-v-a76a4ef3]{color:#4b5563}.bubble-other .file-meta[data-v-a76a4ef3]{color:#6b7280}.message-time[data-v-a76a4ef3]{font-size:10px;color:#9ca3af;margin-top:4px}.time-right[data-v-a76a4ef3]{text-align:right}.time-left[data-v-a76a4ef3]{text-align:left}.input-area[data-v-a76a4ef3]{background-color:#fff;border-top:1px solid #e5e7eb}.pending-files[data-v-a76a4ef3]{padding:8px 12px;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:8px}.pending-file[data-v-a76a4ef3]{position:relative}.pending-image-wrapper[data-v-a76a4ef3]{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.pending-image[data-v-a76a4ef3]{width:100%;height:100%;object-fit:cover}.pending-file-wrapper[data-v-a76a4ef3]{position:relative;width:96px;height:80px;border-radius:8px;border:1px solid #e5e7eb;background-color:#f9fafb;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px}.pending-file-icon[data-v-a76a4ef3]{color:#9ca3af;font-size:28px;margin-bottom:4px}.pending-file-name[data-v-a76a4ef3]{font-size:10px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;text-align:center;padding:0 4px}.remove-file-btn[data-v-a76a4ef3]{position:absolute;top:4px;right:4px;width:20px;height:20px;background-color:#00000080;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;font-size:14px;border:none}.remove-file-btn[data-v-a76a4ef3]:hover{background-color:#000000b3}.input-actions[data-v-a76a4ef3]{display:flex;align-items:center;padding:12px;gap:8px}.input-wrapper[data-v-a76a4ef3]{padding:0 12px 12px}.message-input[data-v-a76a4ef3]{width:100%;resize:none;border:none;outline:none;font-size:14px;height:80px}.send-btn-wrapper[data-v-a76a4ef3]{display:flex;justify-content:flex-end;padding:0 12px 12px}.send-btn[data-v-a76a4ef3]{background-color:#07c160;border:none;font-size:14px;padding:8px 24px}.send-btn[data-v-a76a4ef3]:hover{background-color:#06ad56}.hidden-file-input[data-v-a76a4ef3]{display:none}.empty-state[data-v-a76a4ef3]{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#f5f5f5}.empty-icon[data-v-a76a4ef3]{color:#d1d5db;margin-bottom:8px}.empty-text[data-v-a76a4ef3]{color:#9ca3af}.detail-panel[data-v-a76a4ef3]{width:256px;background-color:#f5f5f5;border-left:1px solid #e5e7eb;display:flex;flex-direction:column}.detail-header[data-v-a76a4ef3]{height:56px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e5e7eb;font-weight:500;color:#374151}.detail-content[data-v-a76a4ef3]{flex:1;padding:16px}.detail-profile[data-v-a76a4ef3]{display:flex;flex-direction:column;align-items:center}.detail-avatar[data-v-a76a4ef3]{width:80px;height:80px;border-radius:50%;object-fit:cover}.detail-name[data-v-a76a4ef3]{margin-top:12px;font-weight:500;color:#1f2937;font-size:18px}.detail-actions[data-v-a76a4ef3]{margin-top:24px;width:100%}.detail-action-item[data-v-a76a4ef3]{padding:12px;border-bottom:1px solid #f3f4f6;cursor:pointer;background-color:#fff}.detail-action-item[data-v-a76a4ef3]:hover{background-color:#f9fafb}.detail-action-item[data-v-a76a4ef3]:first-child{border-radius:8px 8px 0 0}.detail-action-item[data-v-a76a4ef3]:last-child{border-bottom:none;border-radius:0 0 8px 8px}.search-users-wrapper[data-v-a76a4ef3]{margin-bottom:16px}.search-users-input[data-v-a76a4ef3]{position:relative}.users-list-scroll[data-v-a76a4ef3]{max-height:400px;overflow-y:auto}.available-user-item[data-v-a76a4ef3]{display:flex;align-items:center;justify-content:space-between;padding:12px;margin-bottom:8px;border-radius:8px;transition:background-color .2s}.available-user-item[data-v-a76a4ef3]:hover{background-color:#f9fafb}.available-user-info[data-v-a76a4ef3]{display:flex;align-items:center}.available-user-avatar[data-v-a76a4ef3]{width:40px;height:40px;border-radius:50%;object-fit:cover}.available-user-name[data-v-a76a4ef3]{margin-left:12px;font-weight:500;color:#1f2937}.settings-container[data-v-a76a4ef3]{display:flex;flex-direction:column}.settings-avatar-section[data-v-a76a4ef3]{display:flex;flex-direction:column;align-items:center;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid #f3f4f6}.settings-avatar-wrapper[data-v-a76a4ef3]{position:relative;margin-bottom:16px}.settings-avatar[data-v-a76a4ef3]{width:112px;height:112px;border-radius:50%;object-fit:cover;border:4px solid white;box-shadow:0 10px 15px -3px #0000001a}.settings-avatar-edit[data-v-a76a4ef3]{position:absolute;bottom:-4px;right:-4px;width:40px;height:40px;background-color:#22c55e;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;box-shadow:0 4px 6px -1px #0000001a}.settings-avatar-edit[data-v-a76a4ef3]:hover{background-color:#16a34a}.settings-avatar-icon[data-v-a76a4ef3]{color:#fff}.hidden-avatar-input[data-v-a76a4ef3]{display:none}.settings-user-display[data-v-a76a4ef3]{text-align:center}.settings-nickname[data-v-a76a4ef3]{font-weight:600;color:#1f2937;font-size:20px}.settings-username[data-v-a76a4ef3]{font-size:14px;color:#6b7280;margin-top:4px}.settings-form-section[data-v-a76a4ef3]{gap:20px}.settings-form-header[data-v-a76a4ef3]{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.settings-form-title[data-v-a76a4ef3]{color:#374151;font-weight:600;display:flex;align-items:center;gap:8px}.settings-edit-btn[data-v-a76a4ef3]{border-radius:9999px}.settings-form[data-v-a76a4ef3]{background-color:#f9fafb;border-radius:16px;padding:24px;gap:20px;display:flex;flex-direction:column}.settings-form-item[data-v-a76a4ef3]{display:flex;flex-direction:column}.settings-form-label[data-v-a76a4ef3]{display:block;font-size:14px;color:#4b5563;margin-bottom:8px;font-weight:500}.settings-form-value[data-v-a76a4ef3]{color:#1f2937;background-color:#fff;border-radius:8px;padding:12px 16px;border:1px solid #e5e7eb}.bio-value[data-v-a76a4ef3]{min-height:80px}.settings-form-actions[data-v-a76a4ef3]{display:flex;gap:12px;justify-content:flex-end;padding-top:8px}.context-menu[data-v-a76a4ef3]{position:fixed;background-color:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;padding:4px 0;z-index:1000}.context-menu-item[data-v-a76a4ef3]{padding:8px 16px;cursor:pointer;font-size:14px}.context-menu-item[data-v-a76a4ef3]:hover{background-color:#f3f4f6}
|