vue-chat-kit 0.3.7 → 0.3.9

package/src/components/ChatWindow.vue

@@ -1,2094 +0,0 @@
-<template>
-  <el-dialog
-    v-model="visible"
-    :width="width"
-    :close-on-click-modal="false"
-    class="chat-dialog"
-    append-to-body
-    @closed="handleClosed"
-    @open="handleOpen"
-  >
-    <div class="chat-container">
-      <!-- 左侧图标导航栏 -->
-      <div class="sidebar-nav">
-        <div class="sidebar-avatar" @click="handleAvatarClick">
-          <img :src="myAvatar" alt="头像" class="avatar-img" />
-        </div>
-        
-        <div
-          v-for="tab in navTabs"
-          :key="tab.id"
-          :class="[
-            'nav-item',
-            currentNavTab === tab.id ? 'nav-item-active' : 'nav-item-inactive'
-          ]"
-          @click="currentNavTab = tab.id"
-        >
-          <el-icon :size="24">
-            <component :is="tab.icon" />
-          </el-icon>
-          <span v-if="tab.badge" class="nav-badge">
-            {{ tab.badge > 99 ? '99+' : tab.badge }}
-          </span>
-        </div>
-        
-        <div class="nav-spacer"></div>
-        
-        <div
-          v-if="config.modules.settings"
-          class="nav-item nav-item-inactive"
-          @click="showSettingsDialog = true"
-          title="设置"
-        >
-          <el-icon :size="24"><Setting /></el-icon>
-        </div>
-      </div>
-
-      <!-- 中间内容栏 -->
-      <div class="content-panel">
-        <!-- 搜索栏 -->
-        <div class="search-bar">
-          <el-input
-            v-model="searchText"
-            placeholder="搜索"
-            :prefix-icon="Search"
-          />
-        </div>
-
-        <!-- 内容区域 -->
-        <div class="content-scroll">
-          <!-- 聊天列表 -->
-          <div v-if="currentNavTab === 'chat'">
-            <div
-              v-for="chat in filteredUsers"
-              :key="chat.id"
-              :class="[
-                'chat-item',
-                currentChatId === chat.id ? 'chat-item-active' : ''
-              ]"
-              @click="selectChat(chat)"
-              @contextmenu.prevent.stop="showContextMenu($event, chat)"
-            >
-              <div class="friend-avatar-wrapper">
-                <img
-                  :src="chat.avatar"
-                  :alt="chat.name"
-                  class="friend-avatar"
-                />
-                <span
-                  v-if="chat.online"
-                  class="online-indicator"
-                ></span>
-              </div>
-              <div class="friend-info">
-                <div class="friend-header">
-                  <span class="friend-name">{{ chat.name }}</span>
-                  <span class="last-time">{{ formatLastTime(chat.lastTime) }}</span>
-                </div>
-                <div class="friend-preview">
-                  <span class="last-msg">{{ chat.lastMsg }}</span>
-                  <span
-                    v-if="chat.unread > 0"
-                    class="unread-badge"
-                  >
-                    {{ chat.unread > 99 ? '99+' : chat.unread }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 好友列表 -->
-          <div v-if="currentNavTab === 'friends' && config.modules.friends">
-            <div class="add-friend-section">
-              <div
-                class="add-friend-btn"
-                @click="openAddFriendDialog"
-              >
-                <div class="add-friend-icon">
-                  <el-icon class="text-white" :size="20"><Plus /></el-icon>
-                </div>
-                <span class="add-friend-text">添加好友</span>
-              </div>
-            </div>
-            <div
-              v-for="friend in filteredFriendList"
-              :key="friend.id"
-              class="chat-item"
-              @click="selectFriend(friend)"
-            >
-              <div class="friend-avatar-wrapper">
-                <img
-                  :src="friend.avatar"
-                  :alt="friend.name"
-                  class="friend-avatar"
-                />
-                <span
-                  :class="[
-                    'online-indicator',
-                    friend.online ? 'online' : 'offline'
-                  ]"
-                ></span>
-              </div>
-              <div class="friend-info">
-                <span class="friend-name">{{ friend.name }}</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- 申请列表 -->
-          <div v-if="currentNavTab === 'apply' && config.modules.apply">
-            <el-empty v-if="loadingFriendApply" description="加载中..." />
-            <el-empty
-              v-else-if="friendApplyList.length === 0"
-              description="暂无好友申请"
-            />
-            <div
-              v-else
-              v-for="apply in friendApplyList"
-              :key="apply.applyUser || apply.id"
-              class="friend-request-item"
-            >
-              <div class="request-info">
-                <img
-                  :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${apply.applyUser}`"
-                  :alt="apply.applyUser"
-                  class="request-avatar"
-                />
-                <div class="request-details">
-                  <div class="request-username">{{ apply.applyUser }}</div>
-                  <div class="request-desc">请求添加你为好友</div>
-                </div>
-              </div>
-              <el-button
-                type="primary"
-                size="small"
-                @click="agreeFriend(apply.applyUser)"
-              >同意</el-button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 右侧聊天/详情区域 -->
-      <div class="chat-area">
-        <!-- 好友信息展示区域 -->
-        <div v-if="currentSelectedFriend && !currentChat" class="friend-profile">
-          <img
-            :src="currentSelectedFriend.avatar"
-            :alt="currentSelectedFriend.name"
-            class="profile-avatar"
-          />
-          <div class="profile-name">{{ currentSelectedFriend.name }}</div>
-          <div class="profile-status">
-            <span
-              :class="[
-                'status-dot',
-                currentSelectedFriend.online ? 'status-online' : 'status-offline'
-              ]"
-            ></span>
-            <span>{{ currentSelectedFriend.online ? '在线' : '离线' }}</span>
-          </div>
-          <el-button
-            type="primary"
-            size="large"
-            @click="handleStartChat"
-            class="start-chat-btn"
-          >
-            <el-icon><ChatDotRound /></el-icon>
-            <span>发消息</span>
-          </el-button>
-        </div>
-        
-        <!-- 聊天窗口 -->
-        <div v-if="currentChat" class="chat-window">
-          <!-- 顶部标题栏 -->
-          <div class="chat-header">
-            <div class="chat-title">
-              <span class="chat-name">{{ currentChat.name }}</span>
-              <span
-                :class="[
-                  'status-badge',
-                  currentChat.online ? 'status-badge-online' : 'status-badge-offline'
-                ]"
-              >
-                {{ currentChat.online ? '在线' : '离线' }}
-              </span>
-            </div>
-            <div class="chat-actions">
-              <el-icon class="action-icon"><Search /></el-icon>
-              <el-icon
-                class="action-icon"
-                @click="showChatDetail = !showChatDetail"
-              ><MoreFilled /></el-icon>
-            </div>
-          </div>
-
-          <!-- 聊天消息区域 -->
-          <div
-            ref="messagesContainer"
-            class="messages-container"
-          >
-            <div
-              v-for="(msg, index) in currentMessages"
-              :key="index"
-              :class="[
-                'message-wrapper',
-                msg.isSelf ? 'message-self' : 'message-other'
-              ]"
-            >
-              <!-- 头像 -->
-              <div class="message-avatar">
-                <img
-                  :src="msg.isSelf ? myAvatar : currentChat.avatar"
-                  class="avatar-sm"
-                />
-              </div>
-
-              <!-- 消息内容 -->
-              <div
-                :class="[
-                  'message-content-wrapper',
-                  msg.isSelf ? 'content-self' : 'content-other'
-                ]"
-              >
-                <div v-if="!msg.isSelf" class="sender-name">{{ currentChat.name }}</div>
-
-                <div class="message-bubble-wrapper">
-                  <!-- 文本消息 -->
-                  <div
-                    v-if="msg.type === 'text'"
-                    :class="[
-                      'message-bubble',
-                      msg.isSelf ? 'bubble-self' : 'bubble-other'
-                    ]"
-                  >
-                    {{ msg.text }}
-                  </div>
-
-                  <!-- 图片文件消息 -->
-                  <div
-                    v-else-if="msg.type === 'file' && msg.fileType === 'image'"
-                    :class="[
-                      'message-bubble',
-                      'image-bubble',
-                      msg.isSelf ? 'bubble-self' : 'bubble-other'
-                    ]"
-                    @click="openFile(msg.fileUrl)"
-                  >
-                    <img
-                      :src="msg.fileUrl"
-                      :alt="msg.fileName"
-                      class="message-image"
-                      @error="handleImageError"
-                    />
-                    <div v-if="msg.fileSize" class="image-size">{{ formatFileSize(msg.fileSize) }}</div>
-                  </div>
-
-                  <!-- 文档文件消息 -->
-                  <div
-                    v-else-if="msg.type === 'file'"
-                    :class="[
-                      'message-bubble',
-                      'file-bubble',
-                      msg.isSelf ? 'bubble-self' : 'bubble-other'
-                    ]"
-                    @click="openFile(msg.fileUrl)"
-                  >
-                    <div class="file-content">
-                      <div class="file-icon">
-                        <el-icon :size="28"><Document /></el-icon>
-                      </div>
-                      <div class="file-info">
-                        <div class="file-name">{{ msg.fileName || msg.text }}</div>
-                        <div class="file-meta">
-                          <el-icon :size="12"><Download /></el-icon>
-                          <span>点击下载</span>
-                          <span v-if="msg.fileSize">· {{ formatFileSize(msg.fileSize) }}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <!-- 时间显示在气泡下方 -->
-                  <div
-                    :class="[
-                      'message-time',
-                      msg.isSelf ? 'time-right' : 'time-left'
-                    ]"
-                  >
-                    {{ formatTime(msg.time) }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 底部输入区域 -->
-          <div class="input-area">
-            <!-- 待发送文件预览 -->
-            <div
-              v-if="pendingFiles.length > 0"
-              class="pending-files"
-            >
-              <div
-                v-for="(file, index) in pendingFiles"
-                :key="file.id"
-                class="pending-file"
-              >
-                <!-- 图片预览 -->
-                <div
-                  v-if="file.isImage"
-                  class="pending-image-wrapper"
-                >
-                  <img
-                    :src="file.previewUrl"
-                    :alt="file.name"
-                    class="pending-image"
-                  />
-                  <button
-                    @click="removePendingFile(index)"
-                    class="remove-file-btn"
-                  >
-                    ×
-                  </button>
-                </div>
-                <!-- 非图片文件预览 -->
-                <div
-                  v-else
-                  class="pending-file-wrapper"
-                >
-                  <el-icon class="pending-file-icon"><Folder /></el-icon>
-                  <span class="pending-file-name">{{ file.name }}</span>
-                  <button
-                    @click="removePendingFile(index)"
-                    class="remove-file-btn"
-                  >
-                    ×
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            <div v-if="config.modules.fileUpload" class="input-actions">
-              <el-icon class="action-icon"><ChatDotRound /></el-icon>
-              <el-icon
-                class="action-icon"
-                @click="triggerFileSelect"
-              ><Folder /></el-icon>
-              <el-icon class="action-icon"><Picture /></el-icon>
-            </div>
-            <div class="input-wrapper">
-              <textarea
-                v-model="inputText"
-                @keydown.enter.prevent="handleSend"
-                @paste="handlePaste"
-                placeholder="输入消息或粘贴文件..."
-                class="message-input"
-                rows="3"
-              />
-            </div>
-            <div class="send-btn-wrapper">
-              <el-button
-                type="primary"
-                :disabled="!inputText.trim() && pendingFiles.length === 0"
-                @click="handleSend"
-                class="send-btn"
-              >
-                发送
-              </el-button>
-            </div>
-
-            <!-- 隐藏的文件 input -->
-            <input
-              ref="fileInputRef"
-              type="file"
-              multiple
-              class="hidden-file-input"
-              @change="handleFileSelect"
-            />
-          </div>
-        </div>
-
-        <!-- 空状态 -->
-        <div
-          v-else-if="!currentSelectedFriend"
-          class="empty-state"
-        >
-          <el-icon :size="64" class="empty-icon"><ChatLineRound /></el-icon>
-          <div class="empty-text">
-            {{ currentNavTab === 'apply' ? '在左侧选择好友申请' : '在左侧选择好友开始聊天' }}
-          </div>
-        </div>
-      </div>
-
-      <!-- 右侧详情面板 -->
-      <div
-        v-if="showChatDetail"
-        class="detail-panel"
-      >
-        <div class="detail-header">聊天详情</div>
-        <div class="detail-content">
-          <div class="detail-profile">
-            <img
-              :src="currentChat?.avatar"
-              :alt="currentChat?.name"
-              class="detail-avatar"
-            />
-            <div class="detail-name">{{ currentChat?.name }}</div>
-            <div class="detail-actions">
-              <div class="detail-action-item">查找聊天记录</div>
-              <div class="detail-action-item">清空聊天记录</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 添加好友弹窗 -->
-    <el-dialog
-      v-model="addFriendDialogVisible"
-      title="添加好友"
-      width="500px"
-      append-to-body
-    >
-      <div class="search-users-wrapper">
-        <div class="search-users-input">
-          <el-input
-            v-model="addFriendSearchText"
-            placeholder="搜索用户"
-            :prefix-icon="Search"
-          />
-        </div>
-      </div>
-      <div class="users-list-scroll">
-        <el-empty v-if="loadingAvailableUsers" description="加载中..." />
-        <el-empty
-          v-else-if="filteredAvailableUsers.length === 0"
-          description="暂无用户"
-        />
-        <div
-          v-else
-          v-for="user in filteredAvailableUsers"
-          :key="user.username"
-          class="available-user-item"
-        >
-          <div class="available-user-info">
-            <img
-              :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${user.username}`"
-              :alt="user.username"
-              class="available-user-avatar"
-            />
-            <div class="available-user-name">{{ user.username }}</div>
-          </div>
-          <el-button type="primary" size="small" @click="addFriend(user)">添加</el-button>
-        </div>
-      </div>
-    </el-dialog>
-
-    <!-- 用户设置弹窗 -->
-    <el-dialog
-      v-model="showSettingsDialog"
-      title="个人设置"
-      width="560px"
-      :close-on-click-modal="false"
-      append-to-body
-      class="settings-dialog"
-    >
-      <div class="settings-container">
-        <!-- 头像设置区域 -->
-        <div class="settings-avatar-section">
-          <div class="settings-avatar-wrapper">
-            <img
-              :src="myAvatar"
-              alt="头像"
-              class="settings-avatar"
-            />
-            <div
-              v-if="config.modules.avatarCrop"
-              class="settings-avatar-edit"
-              @click="triggerAvatarUpload"
-            >
-              <el-icon :size="18" class="settings-avatar-icon"><Camera /></el-icon>
-            </div>
-            <input
-              ref="avatarInputRef"
-              type="file"
-              accept="image/*"
-              class="hidden-avatar-input"
-              @change="handleAvatarFileChange"
-            />
-          </div>
-          <div class="settings-user-display">
-            <div class="settings-nickname">{{ userInfo.nickname || myUsername }}</div>
-            <div class="settings-username">@{{ myUsername }}</div>
-          </div>
-        </div>
-
-        <!-- 用户信息表单 -->
-        <div class="settings-form-section">
-          <div class="settings-form-header">
-            <div class="settings-form-title">
-              <el-icon><UserFilled /></el-icon>
-              个人信息
-            </div>
-            <el-button
-              v-if="!isEditingUserInfo"
-              type="primary"
-              size="small"
-              @click="startEditUserInfo"
-              class="settings-edit-btn"
-            >
-              编辑
-            </el-button>
-          </div>
-
-          <div class="settings-form">
-            <!-- 昵称 -->
-            <div class="settings-form-item">
-              <label class="settings-form-label">昵称</label>
-              <el-input
-                v-if="isEditingUserInfo"
-                v-model="editingUserInfo.nickname"
-                placeholder="请输入昵称"
-                size="large"
-              />
-              <div
-                v-else
-                class="settings-form-value"
-              >
-                {{ userInfo.nickname || '未设置' }}
-              </div>
-            </div>
-
-            <!-- 邮箱 -->
-            <div class="settings-form-item">
-              <label class="settings-form-label">邮箱</label>
-              <el-input
-                v-if="isEditingUserInfo"
-                v-model="editingUserInfo.email"
-                placeholder="请输入邮箱"
-                size="large"
-              />
-              <div
-                v-else
-                class="settings-form-value"
-              >
-                {{ userInfo.email || '未设置' }}
-              </div>
-            </div>
-
-            <!-- 手机号 -->
-            <div class="settings-form-item">
-              <label class="settings-form-label">手机号</label>
-              <el-input
-                v-if="isEditingUserInfo"
-                v-model="editingUserInfo.phone"
-                placeholder="请输入手机号"
-                size="large"
-              />
-              <div
-                v-else
-                class="settings-form-value"
-              >
-                {{ userInfo.phone || '未设置' }}
-              </div>
-            </div>
-
-            <!-- 个人简介 -->
-            <div class="settings-form-item">
-              <label class="settings-form-label">个人简介</label>
-              <el-input
-                v-if="isEditingUserInfo"
-                v-model="editingUserInfo.bio"
-                type="textarea"
-                :rows="4"
-                placeholder="介绍一下自己吧..."
-                size="large"
-              />
-              <div
-                v-else
-                class="settings-form-value bio-value"
-              >
-                {{ userInfo.bio || '这个人很懒，什么都没写~' }}
-              </div>
-            </div>
-
-            <!-- 编辑按钮 -->
-            <div v-if="isEditingUserInfo" class="settings-form-actions">
-              <el-button size="default" @click="cancelEditUserInfo">取消</el-button>
-              <el-button
-                type="primary"
-                size="default"
-                :loading="savingUserInfo"
-                @click="saveUserInfo"
-              >保存更改</el-button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-
-    <!-- 头像裁剪弹窗 -->
-    <AvatarCrop
-      v-model="showAvatarEditor"
-      :src="avatarImageSrc"
-      @confirm="handleAvatarCropConfirm"
-    />
-
-    <!-- 右键菜单 -->
-    <div
-      v-if="contextMenu.visible"
-      class="context-menu"
-      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
-    >
-      <div class="context-menu-item" @click="handleRemoveChat">删除聊天</div>
-    </div>
-  </el-dialog>
-</template>
-
-<script setup>
-import { computed, watch, nextTick, ref, onMounted, onUnmounted } from 'vue'
-import {
-  Camera,
-  ChatDotRound,
-  Folder,
-  Picture,
-  ChatLineRound,
-  MoreFilled,
-  Search,
-  Plus,
-  UserFilled,
-  Bell,
-  Setting,
-  Document,
-  Download
-} from '@element-plus/icons-vue'
-import { useChat } from '../composables/useChat.js'
-import { ElMessage } from 'element-plus'
-import AvatarCrop from './AvatarCrop.vue'
-
-const props = defineProps({
-  modelValue: { type: Boolean, default: false },
-  config: { type: Object, required: true },
-  width: { type: [String, Number], default: '1100px' }
-})
-const emit = defineEmits(['update:modelValue', 'open', 'close', 'message', 'send', 'error'])
-
-const visible = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
-
-const {
-  myUsername,
-  myAvatar,
-  userInfo,
-  loadingUserInfo,
-  friendList,
-  filteredFriendList,
-  searchText,
-  inputText,
-  messagesContainer,
-  filteredUsers,
-  filteredAvailableUsers,
-  currentUser,
-  currentMessages,
-  addFriendDialogVisible,
-  addFriendSearchText,
-  availableUsers,
-  loadingAvailableUsers,
-  friendApplyList,
-  loadingFriendApply,
-  formatTime,
-  formatLastTime,
-  scrollToBottom,
-  getFriendList,
-  getChatHistory,
-  setFriendToChatStatus,
-  selectUser,
-  sendMessage,
-  sendFile,
-  sendFilesAndText,
-  initWebSocket,
-  closeWebSocket,
-  reset,
-  openAddFriendDialog,
-  addFriend,
-  loadFriendApplyList,
-  agreeFriend,
-  updateMyAvatar,
-  getUserInfo,
-  updateUserInfo
-} = useChat(props.config)
-
-const navTabs = computed(() => {
-  const tabs = [{ id: 'chat', icon: ChatDotRound, badge: 0 }]
-  
-  if (props.config.modules.friends) {
-    tabs.push({ id: 'friends', icon: UserFilled, badge: 0 })
-  }
-  
-  if (props.config.modules.apply) {
-    tabs.push({ id: 'apply', icon: Bell, badge: friendApplyList.value?.length || 0 })
-  }
-  
-  return tabs
-})
-const currentNavTab = ref('chat')
-const currentChatId = ref(null)
-const currentChat = ref(null)
-const currentSelectedFriend = ref(null)
-const showChatDetail = ref(false)
-const isEditingUserInfo = ref(false)
-const editingUserInfo = ref({ nickname: '', email: '', phone: '', bio: '' })
-const savingUserInfo = ref(false)
-const showSettingsDialog = ref(false)
-const showAvatarEditor = ref(false)
-const avatarUploading = ref(false)
-const avatarInputRef = ref(null)
-const avatarImageSrc = ref('')
-const fileInputRef = ref(null)
-const pendingFiles = ref([])
-const contextMenu = ref({ visible: false, x: 0, y: 0, chat: null })
-
-const showContextMenuFn = (e, chat) => {
-  e.preventDefault()
-  e.stopPropagation()
-  contextMenu.value = { visible: true, x: e.clientX, y: e.clientY, chat }
-}
-
-const hideContextMenu = () => {
-  contextMenu.value.visible = false
-}
-
-const handleRemoveChat = async () => {
-  if (!contextMenu.value.chat) return
-  const success = await setFriendToChatStatus(contextMenu.value.chat.id, 0)
-  if (success) {
-    if (currentChatId.value === contextMenu.value.chat.id) {
-      currentChatId.value = null
-      currentChat.value = null
-    }
-  }
-  hideContextMenu()
-}
-
-const selectChat = (chat) => {
-  currentChatId.value = chat.id
-  currentChat.value = chat
-  currentSelectedFriend.value = null
-  showChatDetail.value = false
-  selectUser({
-    id: chat.id,
-    name: chat.name,
-    avatar: chat.avatar,
-    online: chat.online
-  })
-}
-
-const selectFriend = (friend) => {
-  currentSelectedFriend.value = friend
-  currentChatId.value = null
-  currentChat.value = null
-}
-
-const handleStartChat = async () => {
-  if (!currentSelectedFriend.value) return
-  
-  const success = await setFriendToChatStatus(currentSelectedFriend.value.id)
-  if (success) {
-    currentNavTab.value = 'chat'
-    await nextTick()
-    const chatItem = filteredUsers.value.find(u => u.id === currentSelectedFriend.value.id)
-    if (chatItem) {
-      selectChat(chatItem)
-    }
-    currentSelectedFriend.value = null
-  }
-}
-
-const handleAvatarClick = () => {
-  showSettingsDialog.value = true
-}
-
-const triggerAvatarUpload = () => {
-  avatarInputRef.value?.click()
-}
-
-const triggerFileSelect = () => {
-  fileInputRef.value?.click()
-}
-
-const handleFileSelect = (e) => {
-  const files = Array.from(e.target.files || [])
-  if (files.length === 0) return
-
-  for (const file of files) {
-    if (file.size > 50 * 1024 * 1024) {
-      ElMessage.warning(`文件 ${file.name} 超过50MB，已跳过`)
-      continue
-    }
-
-    const previewUrl = URL.createObjectURL(file)
-    pendingFiles.value.push({
-      id: Date.now() + Math.random(),
-      file,
-      name: file.name,
-      size: file.size,
-      type: file.type,
-      previewUrl,
-      isImage: file.type.startsWith('image/')
-    })
-  }
-
-  if (fileInputRef.value) {
-    fileInputRef.value.value = ''
-  }
-}
-
-const removePendingFile = (index) => {
-  const file = pendingFiles.value[index]
-  if (file.previewUrl) {
-    URL.revokeObjectURL(file.previewUrl)
-  }
-  pendingFiles.value.splice(index, 1)
-}
-
-const formatFileSize = (bytes) => {
-  if (bytes === 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-}
-
-const handleSend = async () => {
-  if (!inputText.value.trim() && pendingFiles.value.length === 0) return
-
-  const filesToSend = [...pendingFiles.value]
-  const textToSend = inputText.value
-
-  inputText.value = ''
-  pendingFiles.value.forEach((file) => {
-    if (file.previewUrl) {
-      URL.revokeObjectURL(file.previewUrl)
-    }
-  })
-  pendingFiles.value = []
-
-  await sendFilesAndText(filesToSend, textToSend)
-  emit('send', { text: textToSend, files: filesToSend })
-}
-
-const handlePaste = (e) => {
-  const items = e.clipboardData?.items
-  if (!items) return
-
-  for (const item of items) {
-    if (item.kind === 'file') {
-      const file = item.getAsFile()
-      if (file) {
-        if (file.size > 50 * 1024 * 1024) {
-          ElMessage.warning(`文件 ${file.name} 超过50MB，已跳过`)
-          continue
-        }
-
-        const previewUrl = URL.createObjectURL(file)
-        pendingFiles.value.push({
-          id: Date.now() + Math.random(),
-          file,
-          name: file.name,
-          size: file.size,
-          type: file.type,
-          previewUrl,
-          isImage: file.type.startsWith('image/')
-        })
-      }
-    }
-  }
-}
-
-const openFile = (fileUrl) => {
-  if (!fileUrl) {
-    ElMessage.warning('文件地址无效')
-    return
-  }
-  window.open(fileUrl, '_blank')
-}
-
-const handleImageError = (e) => {
-  console.warn('图片加载失败', e)
-}
-
-const handleAvatarFileChange = (e) => {
-  const file = e.target.files[0]
-  if (!file) return
-
-  if (!file.type.startsWith('image/')) {
-    ElMessage.error('只能上传图片文件')
-    return
-  }
-
-  if (file.size > 5 * 1024 * 1024) {
-    ElMessage.error('图片大小不能超过 5MB')
-    return
-  }
-
-  const reader = new FileReader()
-  reader.onload = (event) => {
-    avatarImageSrc.value = event.target.result
-    showAvatarEditor.value = true
-  }
-  reader.readAsDataURL(file)
-}
-
-const handleAvatarCropConfirm = async ({ file }) => {
-  if (!file) return
-
-  avatarUploading.value = true
-  try {
-    const { ChatApi } = await import('../core/api.js')
-    const api = new ChatApi(props.config)
-    const res = await api.uploadAvatar(file, myUsername)
-    if (res.code === 200) {
-      ElMessage.success('头像上传成功')
-      updateMyAvatar(res.data)
-      resetAvatar()
-    } else {
-      ElMessage.error(res.msg || '头像上传失败')
-    }
-  } catch (error) {
-    console.error(error)
-    ElMessage.error('头像上传失败')
-  } finally {
-    avatarUploading.value = false
-  }
-}
-
-const resetAvatar = () => {
-  avatarImageSrc.value = ''
-  showAvatarEditor.value = false
-  if (avatarInputRef.value) {
-    avatarInputRef.value.value = ''
-  }
-}
-
-const startEditUserInfo = () => {
-  editingUserInfo.value = {
-    nickname: userInfo.value.nickname || '',
-    email: userInfo.value.email || '',
-    phone: userInfo.value.phone || '',
-    bio: userInfo.value.bio || ''
-  }
-  isEditingUserInfo.value = true
-}
-
-const cancelEditUserInfo = () => {
-  isEditingUserInfo.value = false
-  editingUserInfo.value = { nickname: '', email: '', phone: '', bio: '' }
-}
-
-const saveUserInfo = async () => {
-  savingUserInfo.value = true
-  try {
-    const success = await updateUserInfo(editingUserInfo.value)
-    if (success) {
-      ElMessage.success('保存成功')
-      isEditingUserInfo.value = false
-    } else {
-      ElMessage.error('保存失败')
-    }
-  } catch (error) {
-    console.error(error)
-    ElMessage.error('保存失败')
-  } finally {
-    savingUserInfo.value = false
-  }
-}
-
-const handleClosed = () => {
-  reset()
-  closeWebSocket()
-  showChatDetail.value = false
-  showSettingsDialog.value = false
-  resetAvatar()
-  isEditingUserInfo.value = false
-  emit('close')
-}
-
-const handleOpen = async () => {
-  await Promise.all([getFriendList(), loadFriendApplyList(), getUserInfo()])
-  initWebSocket()
-  if (filteredUsers.value.length > 0) {
-    selectChat(filteredUsers.value[0])
-  }
-  emit('open')
-}
-
-onMounted(() => {
-  document.addEventListener('click', hideContextMenu)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', hideContextMenu)
-  closeWebSocket()
-})
-</script>
-
-<style scoped>
-.chat-dialog :deep(.el-dialog) {
-  padding: 0;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.chat-dialog :deep(.el-dialog__header) {
-  display: none;
-}
-
-.chat-dialog :deep(.el-dialog__body) {
-  padding: 0;
-}
-
-/* 微信样式消息气泡 */
-.bubble-self {
-  position: relative;
-  background-color: #95ec69 !important;
-}
-
-.bubble-self::after {
-  content: '';
-  position: absolute;
-  right: -5px;
-  top: 10px;
-  width: 10px;
-  height: 10px;
-  background-color: #95ec69;
-  transform: rotate(45deg);
-  box-shadow: 2px -2px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-.bubble-other {
-  position: relative;
-  background-color: white !important;
-}
-
-.bubble-other::after {
-  content: '';
-  position: absolute;
-  left: -5px;
-  top: 10px;
-  width: 10px;
-  height: 10px;
-  background-color: white;
-  transform: rotate(45deg);
-  box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-/* 消息列表滚动条 */
-.messages-container::-webkit-scrollbar {
-  width: 6px;
-}
-.messages-container::-webkit-scrollbar-thumb {
-  background: #ccc;
-  border-radius: 3px;
-}
-.messages-container::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-/* 设置弹窗样式 */
-.settings-dialog :deep(.el-dialog) {
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-.settings-dialog :deep(.el-dialog__header) {
-  padding: 24px 24px 0;
-  margin: 0;
-}
-
-.settings-dialog :deep(.el-dialog__title) {
-  font-size: 20px;
-  font-weight: 600;
-  color: #1f2937;
-}
-
-/* 完整的 CSS 样式 */
-.chat-container {
-  display: flex;
-  height: 680px;
-  background-color: white;
-  overflow: hidden;
-}
-
-/* 侧边栏导航 */
-.sidebar-nav {
-  width: 64px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  background-color: #f9fafb;
-  border-right: 1px solid #e5e7eb;
-}
-
-.sidebar-avatar {
-  margin-top: 16px;
-  margin-bottom: 16px;
-  cursor: pointer;
-}
-
-.avatar-img {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 2px solid #e5e7eb;
-}
-
-.nav-item {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border-radius: 8px;
-  transition: all 0.2s;
-  position: relative;
-}
-
-.nav-item-active {
-  background-color: #f0fdf4;
-  color: #16a34a;
-}
-
-.nav-item-inactive {
-  color: #6b7280;
-}
-
-.nav-item-inactive:hover {
-  background-color: #f3f4f6;
-}
-
-.nav-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  width: 16px;
-  height: 16px;
-  background-color: #ef4444;
-  border-radius: 50%;
-  font-size: 10px;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.nav-spacer {
-  flex: 1;
-}
-
-/* 内容面板 */
-.content-panel {
-  width: 288px;
-  background-color: #f5f5f5;
-  border-right: 1px solid #e5e7eb;
-  display: flex;
-  flex-direction: column;
-}
-
-.search-bar {
-  padding: 12px;
-}
-
-.content-scroll {
-  flex: 1;
-  overflow-y: auto;
-  min-height: 0;
-}
-
-/* 聊天和好友项 */
-.chat-item {
-  display: flex;
-  align-items: center;
-  padding: 12px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.chat-item:hover {
-  background-color: #e5e5e5;
-}
-
-.chat-item-active {
-  background-color: #d6d6d6;
-}
-
-.friend-avatar-wrapper {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.friend-avatar {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.online-indicator {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 12px;
-  height: 12px;
-  background-color: #22c55e;
-  border-radius: 50%;
-  border: 2px solid white;
-}
-
-.online-indicator.offline {
-  background-color: #9ca3af;
-}
-
-.friend-info {
-  margin-left: 12px;
-  flex: 1;
-  overflow: hidden;
-}
-
-.friend-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.friend-name {
-  font-weight: 500;
-  color: #1f2937;
-  font-size: 14px;
-}
-
-.last-time {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.friend-preview {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.last-msg {
-  font-size: 12px;
-  color: #6b7280;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-right: 8px;
-  flex: 1;
-}
-
-.unread-badge {
-  background-color: #ef4444;
-  color: white;
-  font-size: 10px;
-  border-radius: 9999px;
-  padding: 2px 6px;
-  min-width: 18px;
-  text-align: center;
-}
-
-/* 添加好友 */
-.add-friend-section {
-  padding: 12px;
-}
-
-.add-friend-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.add-friend-btn:hover {
-  background-color: #e5e5e5;
-}
-
-.add-friend-icon {
-  width: 44px;
-  height: 44px;
-  background-color: #22c55e;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.add-friend-text {
-  font-size: 14px;
-  color: #1f2937;
-}
-
-/* 好友申请 */
-.friend-request-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-}
-
-.friend-request-item:hover {
-  background-color: #e5e5e5;
-}
-
-.request-info {
-  display: flex;
-  align-items: center;
-}
-
-.request-avatar {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.request-details {
-  margin-left: 12px;
-}
-
-.request-username {
-  font-weight: 500;
-  color: #1f2937;
-  font-size: 14px;
-}
-
-.request-desc {
-  font-size: 12px;
-  color: #6b7280;
-  margin-top: 4px;
-}
-
-/* 聊天区域 */
-.chat-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  background-color: white;
-}
-
-.friend-profile {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px;
-  background-color: #f5f5f5;
-}
-
-.profile-avatar {
-  width: 96px;
-  height: 96px;
-  border-radius: 50%;
-  object-fit: cover;
-  margin-bottom: 24px;
-}
-
-.profile-name {
-  font-size: 20px;
-  font-weight: 500;
-  color: #1f2937;
-  margin-bottom: 8px;
-}
-
-.profile-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 32px;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.status-online {
-  background-color: #22c55e;
-}
-
-.status-offline {
-  background-color: #9ca3af;
-}
-
-.start-chat-btn {
-  width: 160px;
-}
-
-/* 聊天窗口 */
-.chat-window {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.chat-header {
-  height: 56px;
-  border-bottom: 1px solid #e5e7eb;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-  background-color: white;
-}
-
-.chat-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.chat-name {
-  font-weight: 500;
-  color: #1f2937;
-}
-
-.status-badge {
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 4px;
-}
-
-.status-badge-online {
-  background-color: #dcfce7;
-  color: #16a34a;
-}
-
-.status-badge-offline {
-  background-color: #f3f4f6;
-  color: #6b7280;
-}
-
-.chat-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: #6b7280;
-}
-
-.action-icon {
-  cursor: pointer;
-}
-
-.action-icon:hover {
-  color: #374151;
-}
-
-.messages-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  background-color: #f5f5f5;
-  min-height: 0;
-}
-
-/* 消息样式 */
-.message-wrapper {
-  display: flex;
-  margin-bottom: 24px;
-  align-items: flex-start;
-}
-
-.message-self {
-  flex-direction: row-reverse;
-}
-
-.message-other {
-  flex-direction: row;
-}
-
-.message-avatar {
-  flex-shrink: 0;
-}
-
-.avatar-sm {
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  object-fit: cover;
-}
-
-.message-content-wrapper {
-  display: flex;
-  flex-direction: column;
-  max-width: 75%;
-}
-
-.content-self {
-  margin-right: 12px;
-  align-items: flex-end;
-}
-
-.content-other {
-  margin-left: 12px;
-  align-items: flex-start;
-}
-
-.sender-name {
-  font-size: 12px;
-  color: #6b7280;
-  margin-bottom: 4px;
-  margin-left: 4px;
-}
-
-.message-bubble-wrapper {
-  position: relative;
-}
-
-.message-bubble {
-  padding: 8px 12px;
-  font-size: 14px;
-  word-break: break-all;
-  white-space: pre-wrap;
-  border-radius: 8px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-.image-bubble {
-  border-radius: 8px;
-  position: relative;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  cursor: pointer;
-  overflow: hidden;
-  max-width: 300px;
-}
-
-.message-image {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
-.image-size {
-  position: absolute;
-  left: 4px;
-  bottom: 0;
-  color: white;
-  font-size: 10px;
-}
-
-.file-bubble {
-  border-radius: 8px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  cursor: pointer;
-  overflow: hidden;
-  min-width: 200px;
-}
-
-.file-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-}
-
-.file-icon {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  flex-shrink: 0;
-}
-
-.bubble-self .file-icon {
-  color: #374151;
-}
-
-.bubble-other .file-icon {
-  color: #6b7280;
-}
-
-.file-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.file-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-.bubble-self .file-name {
-  color: #1f2937;
-}
-
-.bubble-other .file-name {
-  color: #1f2937;
-}
-
-.file-meta {
-  font-size: 12px;
-  margin-top: 4px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.bubble-self .file-meta {
-  color: #4b5563;
-}
-
-.bubble-other .file-meta {
-  color: #6b7280;
-}
-
-.message-time {
-  font-size: 10px;
-  color: #9ca3af;
-  margin-top: 4px;
-}
-
-.time-right {
-  text-align: right;
-}
-
-.time-left {
-  text-align: left;
-}
-
-/* 输入区域 */
-.input-area {
-  background-color: white;
-  border-top: 1px solid #e5e7eb;
-}
-
-.pending-files {
-  padding: 8px 12px;
-  border-bottom: 1px solid #f3f4f6;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.pending-file {
-  position: relative;
-}
-
-.pending-image-wrapper {
-  position: relative;
-  width: 80px;
-  height: 80px;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid #e5e7eb;
-}
-
-.pending-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.pending-file-wrapper {
-  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 {
-  color: #9ca3af;
-  font-size: 28px;
-  margin-bottom: 4px;
-}
-
-.pending-file-name {
-  font-size: 10px;
-  color: #6b7280;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  text-align: center;
-  padding: 0 4px;
-}
-
-.remove-file-btn {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 20px;
-  height: 20px;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  font-size: 14px;
-  border: none;
-}
-
-.remove-file-btn:hover {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
-.input-actions {
-  display: flex;
-  align-items: center;
-  padding: 12px;
-  gap: 8px;
-}
-
-.input-wrapper {
-  padding: 0 12px 12px;
-}
-
-.message-input {
-  width: 100%;
-  resize: none;
-  border: none;
-  outline: none;
-  font-size: 14px;
-  height: 80px;
-}
-
-.send-btn-wrapper {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0 12px 12px;
-}
-
-.send-btn {
-  background-color: #07c160;
-  border: none;
-  font-size: 14px;
-  padding: 8px 24px;
-}
-
-.send-btn:hover {
-  background-color: #06ad56;
-}
-
-.hidden-file-input {
-  display: none;
-}
-
-/* 空状态 */
-.empty-state {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  background-color: #f5f5f5;
-}
-
-.empty-icon {
-  color: #d1d5db;
-  margin-bottom: 8px;
-}
-
-.empty-text {
-  color: #9ca3af;
-}
-
-/* 详情面板 */
-.detail-panel {
-  width: 256px;
-  background-color: #f5f5f5;
-  border-left: 1px solid #e5e7eb;
-  display: flex;
-  flex-direction: column;
-}
-
-.detail-header {
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-bottom: 1px solid #e5e7eb;
-  font-weight: 500;
-  color: #374151;
-}
-
-.detail-content {
-  flex: 1;
-  padding: 16px;
-}
-
-.detail-profile {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.detail-avatar {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.detail-name {
-  margin-top: 12px;
-  font-weight: 500;
-  color: #1f2937;
-  font-size: 18px;
-}
-
-.detail-actions {
-  margin-top: 24px;
-  width: 100%;
-}
-
-.detail-action-item {
-  padding: 12px;
-  border-bottom: 1px solid #f3f4f6;
-  cursor: pointer;
-  background-color: white;
-}
-
-.detail-action-item:hover {
-  background-color: #f9fafb;
-}
-
-.detail-action-item:first-child {
-  border-radius: 8px 8px 0 0;
-}
-
-.detail-action-item:last-child {
-  border-bottom: none;
-  border-radius: 0 0 8px 8px;
-}
-
-/* 搜索用户 */
-.search-users-wrapper {
-  margin-bottom: 16px;
-}
-
-.search-users-input {
-  position: relative;
-}
-
-.users-list-scroll {
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.available-user-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  margin-bottom: 8px;
-  border-radius: 8px;
-  transition: background-color 0.2s;
-}
-
-.available-user-item:hover {
-  background-color: #f9fafb;
-}
-
-.available-user-info {
-  display: flex;
-  align-items: center;
-}
-
-.available-user-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.available-user-name {
-  margin-left: 12px;
-  font-weight: 500;
-  color: #1f2937;
-}
-
-/* 设置页面 */
-.settings-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.settings-avatar-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 32px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid #f3f4f6;
-}
-
-.settings-avatar-wrapper {
-  position: relative;
-  margin-bottom: 16px;
-}
-
-.settings-avatar {
-  width: 112px;
-  height: 112px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 4px solid white;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-}
-
-.settings-avatar-edit {
-  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 0.2s;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.settings-avatar-edit:hover {
-  background-color: #16a34a;
-}
-
-.settings-avatar-icon {
-  color: white;
-}
-
-.hidden-avatar-input {
-  display: none;
-}
-
-.settings-user-display {
-  text-align: center;
-}
-
-.settings-nickname {
-  font-weight: 600;
-  color: #1f2937;
-  font-size: 20px;
-}
-
-.settings-username {
-  font-size: 14px;
-  color: #6b7280;
-  margin-top: 4px;
-}
-
-.settings-form-section {
-  gap: 20px;
-}
-
-.settings-form-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.settings-form-title {
-  color: #374151;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.settings-edit-btn {
-  border-radius: 9999px;
-}
-
-.settings-form {
-  background-color: #f9fafb;
-  border-radius: 16px;
-  padding: 24px;
-  gap: 20px;
-  display: flex;
-  flex-direction: column;
-}
-
-.settings-form-item {
-  display: flex;
-  flex-direction: column;
-}
-
-.settings-form-label {
-  display: block;
-  font-size: 14px;
-  color: #4b5563;
-  margin-bottom: 8px;
-  font-weight: 500;
-}
-
-.settings-form-value {
-  color: #1f2937;
-  background-color: white;
-  border-radius: 8px;
-  padding: 12px 16px;
-  border: 1px solid #e5e7eb;
-}
-
-.bio-value {
-  min-height: 80px;
-}
-
-.settings-form-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  padding-top: 8px;
-}
-
-/* 右键菜单 */
-.context-menu {
-  position: fixed;
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border: 1px solid #e5e7eb;
-  padding: 4px 0;
-  z-index: 1000;
-}
-
-.context-menu-item {
-  padding: 8px 16px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.context-menu-item:hover {
-  background-color: #f3f4f6;
-}
-</style>