vue-chat-kit 0.3.4 → 0.3.6
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 +169 -119
- package/dist/vue-chat-kit.css +1 -1
- package/dist/vue-chat-kit.es.js +1524 -1389
- package/dist/vue-chat-kit.umd.js +1 -1
- package/package.json +1 -1
- package/src/components/AvatarCrop.vue +475 -170
- package/src/components/ChatPanel.vue +7 -1
- package/src/core/adapter-example.js +189 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Vue Chat Kit
|
|
2
2
|
|
|
3
|
-
一个功能完整的 Vue 3 聊天组件库，支持 WebSocket
|
|
3
|
+
一个功能完整的 Vue 3 聊天组件库，支持 WebSocket 实时通信、文件上传、好友管理等功能。**独立封装，无需额外 CSS 框架依赖！**
|
|
4
4
|
|
|
5
5
|
## ✨ 特性
|
|
6
6
|
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
- 👥 **好友管理**
|
|
12
12
|
- 📝 **消息历史记录**
|
|
13
13
|
- 🔧 **高度可配置**
|
|
14
|
+
- 🔌 **完全可定制的 API** - 支持自定义适配器来适配你的后端
|
|
14
15
|
- 🧩 **模块化设计** - 组件本身不是弹窗，可自由嵌入任何位置
|
|
15
16
|
|
|
16
17
|
## 🚀 快速开始
|
|
@@ -85,6 +86,162 @@ const onMessage = (msg) => {
|
|
|
85
86
|
</script>
|
|
86
87
|
```
|
|
87
88
|
|
|
89
|
+
## 🔌 自定义 API 适配器（推荐）
|
|
90
|
+
|
|
91
|
+
如果你的后端接口路径不一样，你可以完全自定义 API 实现！
|
|
92
|
+
|
|
93
|
+
### 方式 1：使用自定义适配器（最灵活）
|
|
94
|
+
|
|
95
|
+
```vue
|
|
96
|
+
<script setup>
|
|
97
|
+
import { ChatPanel, createChatConfig } from 'vue-chat-kit'
|
|
98
|
+
import 'vue-chat-kit/style'
|
|
99
|
+
|
|
100
|
+
// 自定义适配器 - 所有接口都在这里定义
|
|
101
|
+
const customAdapter = {
|
|
102
|
+
// 获取好友列表
|
|
103
|
+
async getFriends(currentUser) {
|
|
104
|
+
// 你的后端接口调用
|
|
105
|
+
const res = await fetch(`/your-api/friends?user=${currentUser}`).then(r => r.json())
|
|
106
|
+
return res
|
|
107
|
+
},
|
|
108
|
+
|
|
109
|
+
// 获取聊天历史
|
|
110
|
+
async getHistory(fromUser, toUser) {
|
|
111
|
+
const res = await fetch(`/your-api/messages?from=${fromUser}&to=${toUser}`).then(r => r.json())
|
|
112
|
+
return res
|
|
113
|
+
},
|
|
114
|
+
|
|
115
|
+
// 发送消息（可选 - 如果是通过 WebSocket 发送可以不实现）
|
|
116
|
+
// async sendMessage(to, content, type) { ... }
|
|
117
|
+
|
|
118
|
+
// 标记已读
|
|
119
|
+
async setRead(currentUser, friendUser) {
|
|
120
|
+
const res = await fetch('/your-api/mark-read', {
|
|
121
|
+
method: 'POST',
|
|
122
|
+
body: JSON.stringify({ currentUser, friendUser })
|
|
123
|
+
}).then(r => r.json())
|
|
124
|
+
return res
|
|
125
|
+
},
|
|
126
|
+
|
|
127
|
+
// 上传文件
|
|
128
|
+
async uploadFile(file) {
|
|
129
|
+
const formData = new FormData()
|
|
130
|
+
formData.append('file', file)
|
|
131
|
+
const res = await fetch('/your-api/upload', {
|
|
132
|
+
method: 'POST',
|
|
133
|
+
body: formData
|
|
134
|
+
}).then(r => r.json())
|
|
135
|
+
return res
|
|
136
|
+
},
|
|
137
|
+
|
|
138
|
+
// ... 其他接口（完整列表见下方）
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
const chatConfig = createChatConfig({
|
|
142
|
+
api: {
|
|
143
|
+
baseUrl: 'http://your-api.com',
|
|
144
|
+
websocketUrl: 'ws://your-websocket.com',
|
|
145
|
+
adapter: customAdapter // 使用自定义适配器！
|
|
146
|
+
},
|
|
147
|
+
user: { username: 'user123' }
|
|
148
|
+
})
|
|
149
|
+
</script>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### 方式 2：仅修改接口路径
|
|
153
|
+
|
|
154
|
+
如果你只是想改一下接口路径，可以这样：
|
|
155
|
+
|
|
156
|
+
```javascript
|
|
157
|
+
const chatConfig = createChatConfig({
|
|
158
|
+
api: {
|
|
159
|
+
baseUrl: 'http://your-api.com',
|
|
160
|
+
websocketUrl: 'ws://your-websocket.com',
|
|
161
|
+
endpoints: {
|
|
162
|
+
getFriends: '/your-custom-path/friends',
|
|
163
|
+
getHistory: '/your-custom-path/messages',
|
|
164
|
+
setRead: '/your-custom-path/mark-read',
|
|
165
|
+
uploadFile: '/your-custom-path/upload',
|
|
166
|
+
addFriend: '/your-custom-path/add-friend',
|
|
167
|
+
getApplyList: '/your-custom-path/applications',
|
|
168
|
+
agreeFriend: '/your-custom-path/agree',
|
|
169
|
+
setChatStatus: '/your-custom-path/chat-status',
|
|
170
|
+
getAvailableUsers: '/your-custom-path/available-users',
|
|
171
|
+
getUserInfo: '/your-custom-path/user-info',
|
|
172
|
+
updateUserInfo: '/your-custom-path/update-info',
|
|
173
|
+
getUserAvatar: '/your-custom-path/avatar',
|
|
174
|
+
uploadAvatar: '/your-custom-path/avatar-upload'
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
user: { username: 'user123' }
|
|
178
|
+
})
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## 📋 完整适配器接口列表
|
|
182
|
+
|
|
183
|
+
```javascript
|
|
184
|
+
const customAdapter = {
|
|
185
|
+
// ==================== 聊天相关 ====================
|
|
186
|
+
async getFriends(currentUser) { /* ... */ },
|
|
187
|
+
async getHistory(fromUser, toUser) { /* ... */ },
|
|
188
|
+
async setRead(currentUser, friendUser) { /* ... */ },
|
|
189
|
+
|
|
190
|
+
// ==================== 文件相关 ====================
|
|
191
|
+
async uploadFile(file) { /* ... */ },
|
|
192
|
+
|
|
193
|
+
// ==================== 好友相关 ====================
|
|
194
|
+
async getAvailableUsers(currentUser) { /* ... */ },
|
|
195
|
+
async addFriend(currentUser, friendUser) { /* ... */ },
|
|
196
|
+
async getApplyList(currentUser) { /* ... */ },
|
|
197
|
+
async agreeFriend(applyUser, friendUser) { /* ... */ },
|
|
198
|
+
async setChatStatus(currentUser, friendUser, status) { /* ... */ },
|
|
199
|
+
|
|
200
|
+
// ==================== 用户相关 ====================
|
|
201
|
+
async getUserInfo(username) { /* ... */ },
|
|
202
|
+
async updateUserInfo(username, data) { /* ... */ },
|
|
203
|
+
async getUserAvatar(username) { /* ... */ },
|
|
204
|
+
async uploadAvatar(file, username) { /* ... */ },
|
|
205
|
+
}
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
详细的示例可以参考：[adapter-example.js](src/core/adapter-example.js)
|
|
209
|
+
|
|
210
|
+
## 🎟️ 添加 Token 认证
|
|
211
|
+
|
|
212
|
+
你可以在配置中添加请求拦截器：
|
|
213
|
+
|
|
214
|
+
```javascript
|
|
215
|
+
const chatConfig = createChatConfig({
|
|
216
|
+
// 方式 1：简单的请求头配置
|
|
217
|
+
headers: {
|
|
218
|
+
'Authorization': 'Bearer your-token-here'
|
|
219
|
+
},
|
|
220
|
+
|
|
221
|
+
// 方式 2：更强大的请求拦截器（推荐）
|
|
222
|
+
requestInterceptors: [
|
|
223
|
+
(config) => {
|
|
224
|
+
const token = localStorage.getItem('token')
|
|
225
|
+
if (token) {
|
|
226
|
+
config.headers = {
|
|
227
|
+
...config.headers,
|
|
228
|
+
'Authorization': `Bearer ${token}`
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
return config
|
|
232
|
+
}
|
|
233
|
+
],
|
|
234
|
+
|
|
235
|
+
// 响应拦截器
|
|
236
|
+
responseInterceptors: [
|
|
237
|
+
(response) => {
|
|
238
|
+
// 可以在这里处理 401 等响应
|
|
239
|
+
return response
|
|
240
|
+
}
|
|
241
|
+
]
|
|
242
|
+
})
|
|
243
|
+
```
|
|
244
|
+
|
|
88
245
|
## 📖 API 文档
|
|
89
246
|
|
|
90
247
|
### ChatPanel 组件
|
|
@@ -112,22 +269,10 @@ const onMessage = (msg) => {
|
|
|
112
269
|
api: {
|
|
113
270
|
baseUrl: '',
|
|
114
271
|
websocketUrl: '',
|
|
115
|
-
//
|
|
116
|
-
endpoints: {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
setRead: '/chart/read',
|
|
120
|
-
uploadFile: '/chart/upload/file',
|
|
121
|
-
addFriend: '/chart/friend/add',
|
|
122
|
-
getApplyList: '/chart/friend/applyList',
|
|
123
|
-
agreeFriend: '/chart/friend/agree',
|
|
124
|
-
setChatStatus: '/chart/friend/chat/status',
|
|
125
|
-
getAvailableUsers: '/chart/user/canAddFriend',
|
|
126
|
-
getUserInfo: '/user/info',
|
|
127
|
-
updateUserInfo: '/user/info',
|
|
128
|
-
getUserAvatar: '/user/getAvatar',
|
|
129
|
-
uploadAvatar: '/user/uploadAvatar'
|
|
130
|
-
}
|
|
272
|
+
// 自定义接口路径（可选）
|
|
273
|
+
endpoints: { /* ... */ },
|
|
274
|
+
// 自定义 API 适配器（可选，推荐）
|
|
275
|
+
adapter: { /* ... */ }
|
|
131
276
|
},
|
|
132
277
|
|
|
133
278
|
// 用户信息
|
|
@@ -150,9 +295,11 @@ const onMessage = (msg) => {
|
|
|
150
295
|
},
|
|
151
296
|
|
|
152
297
|
// 自定义请求头
|
|
153
|
-
headers: {
|
|
154
|
-
|
|
155
|
-
|
|
298
|
+
headers: {},
|
|
299
|
+
|
|
300
|
+
// 请求和响应拦截器（可选）
|
|
301
|
+
requestInterceptors: [],
|
|
302
|
+
responseInterceptors: [],
|
|
156
303
|
|
|
157
304
|
// WebSocket 配置
|
|
158
305
|
websocket: {
|
|
@@ -162,120 +309,23 @@ const onMessage = (msg) => {
|
|
|
162
309
|
}
|
|
163
310
|
```
|
|
164
311
|
|
|
165
|
-
### 高级用法 - 自定义 API 适配器
|
|
166
|
-
|
|
167
|
-
如果你想完全自定义 API 实现，可以传入自定义的 API 适配器：
|
|
168
|
-
|
|
169
|
-
```javascript
|
|
170
|
-
const chatConfig = createChatConfig({
|
|
171
|
-
api: {
|
|
172
|
-
baseUrl: 'http://your-api.com',
|
|
173
|
-
websocketUrl: 'ws://your-websocket.com',
|
|
174
|
-
// 自定义适配器
|
|
175
|
-
adapter: {
|
|
176
|
-
async getFriends(currentUser) {
|
|
177
|
-
// 你的自定义实现
|
|
178
|
-
return []
|
|
179
|
-
},
|
|
180
|
-
async getHistory(fromUser, toUser) {
|
|
181
|
-
// 你的自定义实现
|
|
182
|
-
return []
|
|
183
|
-
},
|
|
184
|
-
async sendMessage(to, message, type) {
|
|
185
|
-
// 你的自定义实现
|
|
186
|
-
}
|
|
187
|
-
// ... 更多方法
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
})
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
## 📦 模块说明
|
|
194
|
-
|
|
195
|
-
### 核心模块 (Core)
|
|
196
|
-
- WebSocket 连接管理
|
|
197
|
-
- 消息收发
|
|
198
|
-
- 消息历史
|
|
199
|
-
|
|
200
|
-
### 好友模块 (Friends)
|
|
201
|
-
- 好友列表
|
|
202
|
-
- 添加好友
|
|
203
|
-
- 好友申请
|
|
204
|
-
|
|
205
|
-
### 设置模块 (Settings)
|
|
206
|
-
- 用户信息编辑
|
|
207
|
-
- 头像上传
|
|
208
|
-
- 个人设置
|
|
209
|
-
|
|
210
|
-
### 文件模块 (File)
|
|
211
|
-
- 文件上传
|
|
212
|
-
- 文件预览
|
|
213
|
-
- 文件下载
|
|
214
|
-
|
|
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
312
|
## 🛠️ 开发
|
|
249
313
|
|
|
250
314
|
```bash
|
|
251
|
-
# 安装依赖
|
|
252
315
|
cd packages/vue-chat-kit
|
|
253
316
|
npm install
|
|
254
|
-
|
|
255
|
-
#
|
|
256
|
-
npm run example
|
|
257
|
-
|
|
258
|
-
# 构建打包
|
|
259
|
-
npm run build
|
|
317
|
+
npm run example # 运行示例
|
|
318
|
+
npm run build # 构建打包
|
|
260
319
|
```
|
|
261
320
|
|
|
262
321
|
## 📝 发布到 npm
|
|
263
322
|
|
|
264
323
|
```bash
|
|
265
|
-
# 1. 构建
|
|
266
324
|
npm run build
|
|
267
|
-
|
|
268
|
-
# 2. 登录 npm
|
|
269
325
|
npm login
|
|
270
|
-
|
|
271
|
-
# 3. 发布
|
|
272
326
|
npm publish
|
|
273
327
|
```
|
|
274
328
|
|
|
275
329
|
## 📄 License
|
|
276
330
|
|
|
277
331
|
MIT
|
|
278
|
-
|
|
279
|
-
## 📚 更多文档
|
|
280
|
-
|
|
281
|
-
详细使用文档请查看 [docs/USAGE.md](./docs/USAGE.md)
|
package/dist/vue-chat-kit.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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}
|
|
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-594eeaf3]{min-height:200px}.crop-wrapper[data-v-594eeaf3]{display:flex;flex-direction:column;gap:16px}.crop-area[data-v-594eeaf3]{position:relative;overflow:hidden;background:#f5f7fa;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid #e4e7ed}.crop-box[data-v-594eeaf3]{position:absolute;border:2px solid #409eff;box-shadow:0 0 0 9999px #00000080;cursor:move;box-sizing:border-box}.crop-handle[data-v-594eeaf3]{position:absolute;width:14px;height:14px;background:#409eff;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0003}.crop-handle.nw[data-v-594eeaf3]{top:-7px;left:-7px;cursor:nw-resize}.crop-handle.n[data-v-594eeaf3]{top:-7px;left:50%;transform:translate(-50%);cursor:n-resize}.crop-handle.ne[data-v-594eeaf3]{top:-7px;right:-7px;cursor:ne-resize}.crop-handle.e[data-v-594eeaf3]{right:-7px;top:50%;transform:translateY(-50%);cursor:e-resize}.crop-handle.se[data-v-594eeaf3]{bottom:-7px;right:-7px;cursor:se-resize}.crop-handle.s[data-v-594eeaf3]{bottom:-7px;left:50%;transform:translate(-50%);cursor:s-resize}.crop-handle.sw[data-v-594eeaf3]{bottom:-7px;left:-7px;cursor:sw-resize}.crop-handle.w[data-v-594eeaf3]{left:-7px;top:50%;transform:translateY(-50%);cursor:w-resize}.preview-wrapper[data-v-594eeaf3]{display:flex;align-items:center;justify-content:center;gap:16px}.preview-label[data-v-594eeaf3]{font-size:14px;color:#606266;font-weight:500}.preview-box[data-v-594eeaf3]{border-radius:50%;overflow:hidden;border:3px solid #e4e7ed;background:#fff;box-shadow:0 2px 8px #0000001a}.preview-canvas[data-v-594eeaf3]{display:block;width:100%;height:100%}.dialog-footer[data-v-594eeaf3]{display:flex;justify-content:center;gap:12px}.chat-panel[data-v-c08932e1]{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-c08932e1]{width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;background-color:#f9fafb;border-right:1px solid #e5e7eb}.sidebar-avatar[data-v-c08932e1]{margin-top:16px;margin-bottom:16px;cursor:pointer}.sidebar-avatar-img[data-v-c08932e1]{width:40px;height:40px;border-radius:50%;border:2px solid #e5e7eb;object-fit:cover}.sidebar-nav-item[data-v-c08932e1]{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-c08932e1]{background-color:#dcfce7;color:#07c160}.sidebar-nav-item-inactive[data-v-c08932e1]{color:#6b7280}.sidebar-nav-item-inactive[data-v-c08932e1]:hover{background-color:#f3f4f6}.sidebar-nav-badge[data-v-c08932e1]{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-c08932e1]{flex:1}.chat-content-panel[data-v-c08932e1]{width:288px;background-color:#f5f5f5;border-right:1px solid #e5e7eb;display:flex;flex-direction:column}.chat-search-bar[data-v-c08932e1]{padding:12px}.chat-search-input[data-v-c08932e1]{width:100%}.chat-content-scroll[data-v-c08932e1]{flex:1;overflow-y:auto;min-height:0}.chat-list-item[data-v-c08932e1]{display:flex;align-items:center;padding:12px;cursor:pointer;transition:background-color .2s}.chat-list-item[data-v-c08932e1]:hover{background-color:#e5e5e5}.chat-list-item-active[data-v-c08932e1]{background-color:#d6d6d6}.chat-list-avatar-wrapper[data-v-c08932e1]{position:relative;flex-shrink:0}.chat-list-avatar[data-v-c08932e1]{width:44px;height:44px;border-radius:50%;object-fit:cover}.chat-list-online-indicator[data-v-c08932e1]{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-c08932e1]{background-color:#9ca3af}.chat-list-info[data-v-c08932e1]{margin-left:12px;flex:1;overflow:hidden}.chat-list-header[data-v-c08932e1]{display:flex;justify-content:space-between;align-items:center}.chat-list-name[data-v-c08932e1]{font-weight:500;color:#1f2937;font-size:14px}.chat-list-time[data-v-c08932e1]{font-size:12px;color:#9ca3af}.chat-list-preview[data-v-c08932e1]{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.chat-list-last-msg[data-v-c08932e1]{font-size:12px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;flex:1}.chat-list-unread[data-v-c08932e1]{background-color:#ef4444;color:#fff;font-size:10px;border-radius:9999px;padding:2px 6px;min-width:18px;min-height:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1}.add-friend-section[data-v-c08932e1]{padding:12px}.add-friend-btn[data-v-c08932e1]{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}.add-friend-btn[data-v-c08932e1]:hover{background-color:#e5e5e5}.add-friend-icon[data-v-c08932e1]{width:44px;height:44px;background-color:#07c160;border-radius:8px;display:flex;align-items:center;justify-content:center}.add-friend-text[data-v-c08932e1]{font-size:14px;color:#1f2937}.friend-request-item[data-v-c08932e1]{display:flex;align-items:center;justify-content:space-between;padding:12px}.friend-request-item[data-v-c08932e1]:hover{background-color:#e5e5e5}.friend-request-info[data-v-c08932e1]{display:flex;align-items:center}.friend-request-avatar[data-v-c08932e1]{width:44px;height:44px;border-radius:50%;object-fit:cover}.friend-request-details[data-v-c08932e1]{margin-left:12px}.friend-request-username[data-v-c08932e1]{font-weight:500;color:#1f2937;font-size:14px}.friend-request-desc[data-v-c08932e1]{font-size:12px;color:#6b7280;margin-top:4px}.chat-main-area[data-v-c08932e1]{flex:1;display:flex;flex-direction:column;min-width:0;background-color:#fff}.friend-profile-area[data-v-c08932e1]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background-color:#f5f5f5}.profile-avatar[data-v-c08932e1]{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:24px}.profile-name[data-v-c08932e1]{font-size:20px;font-weight:500;color:#1f2937;margin-bottom:8px}.profile-status[data-v-c08932e1]{display:flex;align-items:center;gap:8px;margin-bottom:32px}.profile-status-dot[data-v-c08932e1]{width:8px;height:8px;border-radius:50%}.profile-status-online[data-v-c08932e1]{background-color:#22c55e}.profile-status-offline[data-v-c08932e1]{background-color:#9ca3af}.profile-start-chat-btn[data-v-c08932e1]{width:160px}.chat-window-area[data-v-c08932e1]{flex:1;display:flex;flex-direction:column;min-height:0}.chat-window-header[data-v-c08932e1]{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-c08932e1]{display:flex;align-items:center;gap:12px}.chat-window-name[data-v-c08932e1]{font-weight:500;color:#1f2937}.chat-window-status[data-v-c08932e1]{font-size:12px;padding:2px 8px;border-radius:4px}.chat-window-status-online[data-v-c08932e1]{background-color:#dcfce7;color:#16a34a}.chat-window-status-offline[data-v-c08932e1]{background-color:#f3f4f6;color:#6b7280}.chat-window-actions[data-v-c08932e1]{display:flex;align-items:center;gap:12px;color:#6b7280}.chat-action-icon[data-v-c08932e1]{cursor:pointer}.chat-action-icon[data-v-c08932e1]:hover{color:#374151}.chat-messages-container[data-v-c08932e1]{flex:1;overflow-y:auto;padding:16px;background-color:#f5f5f5;min-height:0}.chat-messages-container[data-v-c08932e1]::-webkit-scrollbar{width:6px}.chat-messages-container[data-v-c08932e1]::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.chat-messages-container[data-v-c08932e1]::-webkit-scrollbar-track{background:transparent}.message-wrapper[data-v-c08932e1]{display:flex;margin-bottom:24px;align-items:flex-start}.message-self[data-v-c08932e1]{flex-direction:row-reverse}.message-other[data-v-c08932e1]{flex-direction:row}.message-avatar[data-v-c08932e1]{flex-shrink:0}.message-avatar-img[data-v-c08932e1]{width:40px;height:40px;border-radius:8px;object-fit:cover}.message-content[data-v-c08932e1]{display:flex;flex-direction:column;max-width:75%}.message-content-self[data-v-c08932e1]{margin-right:12px;align-items:flex-end}.message-content-other[data-v-c08932e1]{margin-left:12px;align-items:flex-start}.message-sender-name[data-v-c08932e1]{font-size:12px;color:#6b7280;margin-bottom:4px;margin-left:4px}.message-bubble-wrapper[data-v-c08932e1]{position:relative}.message-bubble[data-v-c08932e1]{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-c08932e1]{background-color:#95ec69;color:#1f2937;position:relative}.message-bubble-self[data-v-c08932e1]: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-c08932e1]{background-color:#fff;color:#1f2937;position:relative}.message-bubble-other[data-v-c08932e1]: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-c08932e1]{border-radius:8px;position:relative;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;max-width:300px;padding:0}.message-image[data-v-c08932e1]{width:100%;height:auto;display:block}.message-image-size[data-v-c08932e1]{position:absolute;left:4px;bottom:0;color:#fff;font-size:10px}.message-file-bubble[data-v-c08932e1]{border-radius:8px;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;min-width:200px}.message-file-content[data-v-c08932e1]{display:flex;align-items:center;gap:12px;padding:12px 16px}.message-file-icon[data-v-c08932e1]{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-c08932e1]{color:#374151}.message-bubble-other .message-file-icon[data-v-c08932e1]{color:#6b7280}.message-file-info[data-v-c08932e1]{flex:1;min-width:0}.message-file-name[data-v-c08932e1]{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;line-height:1.2}.message-bubble-self .message-file-name[data-v-c08932e1],.message-bubble-other .message-file-name[data-v-c08932e1]{color:#1f2937}.message-file-meta[data-v-c08932e1]{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:8px}.message-bubble-self .message-file-meta[data-v-c08932e1]{color:#4b5563}.message-bubble-other .message-file-meta[data-v-c08932e1]{color:#6b7280}.message-time[data-v-c08932e1]{font-size:10px;color:#9ca3af;margin-top:4px}.message-time-right[data-v-c08932e1]{text-align:right}.message-time-left[data-v-c08932e1]{text-align:left}.chat-input-area[data-v-c08932e1]{background-color:#fff;border-top:1px solid #e5e7eb}.pending-files-area[data-v-c08932e1]{padding:8px 12px;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:8px}.pending-file-item[data-v-c08932e1]{position:relative}.pending-image-wrapper[data-v-c08932e1]{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.pending-image[data-v-c08932e1]{width:100%;height:100%;object-fit:cover}.pending-file-wrapper[data-v-c08932e1]{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-c08932e1]{color:#9ca3af;font-size:28px;margin-bottom:4px}.pending-file-name[data-v-c08932e1]{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-c08932e1]{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-c08932e1]:hover{background-color:#000000b3}.input-toolbar[data-v-c08932e1]{display:flex;align-items:center;padding:12px;gap:8px}.input-toolbar-icon[data-v-c08932e1]{color:#6b7280;cursor:pointer;font-size:20px}.input-toolbar-icon[data-v-c08932e1]:hover{color:#374151}.input-textarea-wrapper[data-v-c08932e1]{padding:0 12px 12px}.message-input-textarea[data-v-c08932e1]{width:100%;resize:none;border:none;outline:none;font-size:14px;height:80px;font-family:inherit}.input-send-wrapper[data-v-c08932e1]{display:flex;justify-content:flex-end;padding:0 12px 12px}.send-message-btn[data-v-c08932e1]{background-color:#07c160;border:none;font-size:14px;padding:8px 24px}.send-message-btn[data-v-c08932e1]:hover{background-color:#06ad56}.hidden-file-input[data-v-c08932e1]{display:none}.chat-empty-state[data-v-c08932e1]{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#f5f5f5}.empty-state-icon[data-v-c08932e1]{color:#d1d5db;margin-bottom:8px}.empty-state-text[data-v-c08932e1]{color:#9ca3af;font-size:14px}.chat-detail-panel[data-v-c08932e1]{width:256px;background-color:#f5f5f5;border-left:1px solid #e5e7eb;display:flex;flex-direction:column}.chat-detail-header[data-v-c08932e1]{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-c08932e1]{flex:1;padding:16px}.chat-detail-profile[data-v-c08932e1]{display:flex;flex-direction:column;align-items:center}.chat-detail-avatar[data-v-c08932e1]{width:80px;height:80px;border-radius:50%;object-fit:cover}.chat-detail-name[data-v-c08932e1]{margin-top:12px;font-weight:500;color:#1f2937;font-size:18px}.chat-detail-actions[data-v-c08932e1]{margin-top:24px;width:100%}.chat-detail-action-item[data-v-c08932e1]{padding:12px;border-bottom:1px solid #f3f4f6;cursor:pointer;background-color:#fff;font-size:14px;color:#374151}.chat-detail-action-item[data-v-c08932e1]:hover{background-color:#f9fafb}.chat-detail-action-item[data-v-c08932e1]:first-child{border-radius:8px 8px 0 0}.chat-detail-action-item[data-v-c08932e1]:last-child{border-bottom:none;border-radius:0 0 8px 8px}.add-friend-search-wrapper[data-v-c08932e1]{margin-bottom:16px}.add-friend-search-input[data-v-c08932e1]{width:100%}.add-friend-users-list[data-v-c08932e1]{max-height:400px;overflow-y:auto}.add-friend-user-item[data-v-c08932e1]{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-c08932e1]:hover{background-color:#f9fafb}.add-friend-user-info[data-v-c08932e1]{display:flex;align-items:center}.add-friend-user-avatar[data-v-c08932e1]{width:40px;height:40px;border-radius:50%;object-fit:cover}.add-friend-user-name[data-v-c08932e1]{margin-left:12px;font-weight:500;color:#1f2937;font-size:14px}.chat-settings-dialog[data-v-c08932e1] .el-dialog{border-radius:16px;overflow:hidden}.chat-settings-dialog[data-v-c08932e1] .el-dialog__header{padding:24px 24px 0;margin:0}.chat-settings-dialog[data-v-c08932e1] .el-dialog__title{font-size:20px;font-weight:600;color:#1f2937}.chat-settings-container[data-v-c08932e1]{display:flex;flex-direction:column}.chat-settings-avatar-section[data-v-c08932e1]{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-c08932e1]{position:relative;margin-bottom:16px}.chat-settings-avatar[data-v-c08932e1]{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-c08932e1]{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-c08932e1]:hover{background-color:#06ad56}.chat-settings-avatar-icon[data-v-c08932e1]{color:#fff}.hidden-avatar-input[data-v-c08932e1]{display:none}.chat-settings-user-display[data-v-c08932e1]{text-align:center}.chat-settings-nickname[data-v-c08932e1]{font-weight:600;color:#1f2937;font-size:20px}.chat-settings-username[data-v-c08932e1]{font-size:14px;color:#6b7280;margin-top:4px}.chat-settings-form-section[data-v-c08932e1]{gap:20px}.chat-settings-form-header[data-v-c08932e1]{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.chat-settings-form-title[data-v-c08932e1]{color:#374151;font-weight:600;display:flex;align-items:center;gap:8px;font-size:14px}.chat-settings-edit-btn[data-v-c08932e1]{border-radius:9999px}.chat-settings-form[data-v-c08932e1]{background-color:#f9fafb;border-radius:16px;padding:24px;gap:20px;display:flex;flex-direction:column}.chat-settings-form-item[data-v-c08932e1]{display:flex;flex-direction:column}.chat-settings-form-label[data-v-c08932e1]{display:block;font-size:14px;color:#4b5563;margin-bottom:8px;font-weight:500}.chat-settings-form-value[data-v-c08932e1]{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-c08932e1]{min-height:80px}.chat-settings-form-actions[data-v-c08932e1]{display:flex;gap:12px;justify-content:flex-end;padding-top:8px}.chat-context-menu[data-v-c08932e1]{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-c08932e1]{padding:8px 16px;cursor:pointer;font-size:14px;color:#374151}.chat-context-menu-item[data-v-c08932e1]: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}
|