vue-chat-kit 0.3.10 → 0.3.11

package/src/components/EmojiPicker.vue

@@ -121,77 +121,6 @@ const selectEmoji = (emoji) => {
 }
 </script>
 
-<style scoped>
-.emoji-picker {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  width: 320px;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-radius: 16px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  overflow: hidden;
-  z-index: 1000;
-  margin-bottom: 8px;
-}
-
-.emoji-header {
-  display: flex;
-  padding: 8px 12px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  gap: 4px;
-}
-
-.emoji-category-tab {
-  padding: 8px 12px;
-  cursor: pointer;
-  border-radius: 8px;
-  transition: all 0.2s;
-  font-size: 18px;
-  line-height: 1;
-}
-
-.emoji-category-tab:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.emoji-category-tab.active {
-  background: rgba(7, 193, 96, 0.1);
-}
-
-.emoji-body {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 4px;
-  padding: 12px;
-  max-height: 240px;
-  overflow-y: auto;
-}
-
-.emoji-body::-webkit-scrollbar {
-  width: 6px;
-}
-
-.emoji-body::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-}
-
-.emoji-item {
-  font-size: 24px;
-  padding: 8px;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 8px;
-  transition: all 0.15s;
-  line-height: 1;
-}
-
-.emoji-item:hover {
-  background: rgba(0, 0, 0, 0.08);
-  transform: scale(1.2);
-}
+<style scoped lang="scss">
+@use '../styles/components/emoji-picker';
 </style>

package/src/components/chat/ChatWindow.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="chat-window-area">
+    <!-- 顶部标题栏 -->
+    <div class="chat-window-header">
+      <div class="chat-window-title">
+        <span class="chat-window-name">{{ currentSelectGroup ? currentSelectGroup.name : currentChat.name }}</span>
+        <span
+          v-if="!currentSelectGroup"
+          :class="[
+            'chat-window-status',
+            currentChat.online ? 'chat-window-status-online' : 'chat-window-status-offline'
+          ]"
+        >
+          {{ currentChat.online ? '在线' : '离线' }}
+        </span>
+        <span v-if="currentSelectGroup" class="chat-window-status">
+          {{ groupMemberList.length }} 人
+        </span>
+      </div>
+      <div class="chat-window-actions">
+        <el-icon class="chat-action-icon"><Search /></el-icon>
+        <el-icon
+          v-if="currentSelectGroup"
+          class="chat-action-icon"
+          @click="$emit('toggle-group-sidebar')"
+        ><MoreFilled /></el-icon>
+        <el-icon
+          v-else
+          class="chat-action-icon"
+          @click="$emit('toggle-chat-detail')"
+        ><MoreFilled /></el-icon>
+      </div>
+    </div>
+
+    <!-- 聊天消息区域 -->
+    <div
+      ref="messagesContainer"
+      class="chat-messages-container"
+    >
+      <div
+        v-for="(msg, index) in messages"
+        :key="index"
+        :class="[
+          'message-wrapper',
+          msg.isSelf ? 'message-self' : 'message-other'
+        ]"
+      >
+        <!-- 头像 -->
+        <div class="message-avatar">
+          <img
+            :src="msg.avatar"
+            class="message-avatar-img"
+          />
+        </div>
+
+        <!-- 消息内容 -->
+        <div
+          :class="[
+            'message-content',
+            msg.isSelf ? 'message-content-self' : 'message-content-other'
+          ]"
+        >
+          <div v-if="!msg.isSelf" class="message-sender-name">
+            {{ currentSelectGroup ? (msg.displayName || msg.sendUsername) : currentChat.name }}
+          </div>
+
+          <div class="message-bubble-wrapper">
+            <!-- 文本消息 -->
+            <div
+              v-if="msg.type === 'text'"
+              :class="[
+                'message-bubble',
+                msg.isSelf ? 'message-bubble-self' : 'message-bubble-other'
+              ]"
+            >
+              {{ msg.text }}
+            </div>
+
+            <!-- 图片文件消息 -->
+            <div
+              v-else-if="msg.type === 'file' && msg.fileType === 'image'"
+              :class="[
+                'message-bubble',
+                'message-image-bubble',
+                msg.isSelf ? 'message-bubble-self' : 'message-bubble-other'
+              ]"
+              @click="$emit('open-file', msg.fileUrl)"
+            >
+              <img
+                :src="msg.fileUrl"
+                :alt="msg.fileName"
+                class="message-image"
+              />
+              <div v-if="msg.fileSize" class="message-image-size">{{ formatFileSize(msg.fileSize) }}</div>
+            </div>
+
+            <!-- 文档文件消息 -->
+            <div
+              v-else-if="msg.type === 'file'"
+              :class="[
+                'message-bubble',
+                'message-file-bubble',
+                msg.isSelf ? 'message-bubble-self' : 'message-bubble-other'
+              ]"
+              @click="$emit('open-file', msg.fileUrl)"
+            >
+              <div class="message-file-content">
+                <div class="message-file-icon">
+                  <el-icon :size="28"><Document /></el-icon>
+                </div>
+                <div class="message-file-info">
+                  <div class="message-file-name">{{ msg.fileName || msg.text }}</div>
+                  <div class="message-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 ? 'message-time-right' : 'message-time-left'
+              ]"
+            >
+              {{ formatTime(msg.time) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部输入区域 -->
+    <div class="chat-input-area" @click="$emit('hide-emoji')">
+      <slot name="input-area"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { Search, MoreFilled, Document, Download } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  currentChat: Object,
+  currentSelectGroup: Object,
+  groupMemberList: Array,
+  messages: Array,
+  formatTime: Function,
+  formatFileSize: Function
+})
+
+const emit = defineEmits(['toggle-group-sidebar', 'toggle-chat-detail', 'open-file', 'hide-emoji'])
+
+const messagesContainer = ref(null)
+
+const scrollToBottom = () => {
+  if (messagesContainer.value) {
+    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+  }
+}
+
+watch(() => props.messages, () => {
+  setTimeout(scrollToBottom, 50)
+}, { deep: true })
+
+onMounted(scrollToBottom)
+
+defineExpose({ scrollToBottom })
+</script>
+
+<style scoped lang="scss">
+@use '../../styles/components/chat-window';
+</style>

package/src/components/chat/ContentList.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="chat-content-panel">
+    <!-- 搜索栏 -->
+    <div class="chat-search-bar">
+      <Input
+        :model-value="searchText"
+        @update:model-value="$emit('update:searchText', $event)"
+        placeholder="搜索"
+        class="chat-search-input"
+      >
+        <template #prefix>
+          <Search />
+        </template>
+      </Input>
+      <div class="search-actions">
+        <Button
+          v-if="config.modules.friends"
+          type="primary"
+          size="small"
+          @click="$emit('add-friend')"
+          title="添加好友"
+        >
+          <template #icon>
+            <User />
+          </template>
+        </Button>
+        <Button
+          v-if="config.modules.groups"
+          type="primary"
+          size="small"
+          @click="$emit('create-group')"
+          title="创建群聊"
+        >
+          <template #icon>
+            <UserFilled />
+          </template>
+        </Button>
+      </div>
+    </div>
+
+    <!-- 内容区域 -->
+    <div class="chat-content-scroll">
+      <!-- 聊天列表（好友+群聊合并） -->
+      <div v-if="currentNavTab === 'chat'">
+        <div
+          v-for="chat in combinedChatList"
+          :key="chat.type + '_' + (chat.id || chat.groupId)"
+          :class="[
+            'chat-list-item',
+            isChatActive(chat) ? 'chat-list-item-active' : ''
+          ]"
+          @click="handleChatClick(chat)"
+          @contextmenu.prevent.stop="$emit('contextmenu', $event, chat)"
+        >
+          <div class="chat-list-avatar-wrapper">
+            <!-- 群聊头像：多方格 -->
+            <div v-if="chat.type === 'group' && chat.memberAvatars && chat.memberAvatars.length > 0" class="group-avatar-grid">
+              <div 
+                v-for="(member, index) in chat.memberAvatars.slice(0, 4)" 
+                :key="member.username || index"
+                class="group-avatar-item"
+              >
+                <img
+                  :src="member.avatar"
+                  :alt="member.username"
+                  class="group-avatar-img"
+                  @error="handleAvatarError"
+                />
+              </div>
+            </div>
+            <!-- 单头像 -->
+            <img
+              v-else
+              :src="chat.avatar"
+              :alt="chat.name"
+              class="chat-list-avatar"
+            />
+            <span
+              v-if="chat.type === 'friend' && chat.online"
+              class="chat-list-online-indicator"
+            ></span>
+          </div>
+          <div class="chat-list-info">
+            <div class="chat-list-header">
+              <span class="chat-list-name">{{ chat.name }}</span>
+              <span class="chat-list-time">{{ formatLastTime(chat.lastTime) }}</span>
+            </div>
+            <div class="chat-list-preview">
+              <span class="chat-list-last-msg">
+                {{ chat.type === 'group' && chat.lastMsgSender ? chat.lastMsgSender + ': ' : '' }}{{ chat.lastMsg }}
+              </span>
+              <span
+                v-if="chat.unread > 0"
+                class="chat-list-unread"
+              >
+                {{ chat.unread > 99 ? '99+' : chat.unread }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 好友和群聊列表（合并） -->
+      <div v-if="currentNavTab === 'contacts'">
+        <!-- 好友分组 -->
+        <div v-if="config.modules.friends">
+          <div class="list-section-title" @click="friendsCollapsed = !friendsCollapsed">
+            <span :class="['collapse-icon', friendsCollapsed ? 'collapsed' : '']">
+              <ArrowDown />
+            </span>
+            <span>好友</span>
+          </div>
+          <div v-show="!friendsCollapsed" class="list-content">
+            <div
+              v-for="friend in filteredFriendList"
+              :key="friend.id"
+              class="chat-list-item"
+              @click="$emit('select-friend', friend)"
+            >
+              <div class="chat-list-avatar-wrapper">
+                <img
+                  :src="friend.avatar"
+                  :alt="friend.name"
+                  class="chat-list-avatar"
+                />
+                <span
+                  :class="[
+                    'chat-list-online-indicator',
+                    friend.online ? 'chat-list-online' : 'chat-list-offline'
+                  ]"
+                ></span>
+              </div>
+              <div class="chat-list-info">
+                <span class="chat-list-name">{{ friend.name }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 群聊分组 -->
+        <div v-if="config.modules.groups">
+          <div class="list-section-title" @click="groupsCollapsed = !groupsCollapsed">
+            <span :class="['collapse-icon', groupsCollapsed ? 'collapsed' : '']">
+              <ArrowDown />
+            </span>
+            <span>群聊</span>
+          </div>
+          <div v-show="!groupsCollapsed" class="list-content">
+            <div
+              v-for="group in filteredGroupList"
+              :key="group.groupId"
+              :class="[
+                'chat-list-item',
+                currentSelectedGroup?.groupId === group.groupId ? 'chat-list-item-active' : ''
+              ]"
+              @click="$emit('select-group', group)"
+            >
+              <div class="chat-list-avatar-wrapper">
+                <!-- 多方格群聊头像 -->
+                <div v-if="group.memberAvatars && group.memberAvatars.length > 0" class="group-avatar-grid">
+                  <div 
+                    v-for="(member, index) in group.memberAvatars.slice(0, 4)" 
+                    :key="member.username || index"
+                    class="group-avatar-item"
+                  >
+                    <img
+                      :src="member.avatar"
+                      :alt="member.username"
+                      class="group-avatar-img"
+                      @error="handleAvatarError"
+                    />
+                  </div>
+                </div>
+                <!-- 单个头像作为后备 -->
+                <img
+                  v-else
+                  :src="group.avatar"
+                  :alt="group.name"
+                  class="chat-list-avatar"
+                />
+              </div>
+              <div class="chat-list-info">
+                <div class="chat-list-header">
+                  <span class="chat-list-name">{{ group.name }}</span>
+                  <span class="chat-list-time">{{ formatLastTime(group.lastTime) }}</span>
+                </div>
+                <div class="chat-list-preview">
+                  <span class="chat-list-last-msg">
+                    {{ group.lastMsgSender ? group.lastMsgSender + ': ' : '' }}{{ group.lastMsg || '暂无消息' }}
+                  </span>
+                  <span
+                    v-if="group.unread > 0"
+                    class="chat-list-unread"
+                  >
+                    {{ group.unread > 99 ? '99+' : group.unread }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 申请列表 -->
+      <div v-if="currentNavTab === 'apply' && config.modules.apply">
+        <Empty v-if="loadingFriendApply" description="加载中..." />
+        <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="friend-request-info">
+            <img
+              :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${apply.applyUser}`"
+              :alt="apply.applyUser"
+              class="friend-request-avatar"
+            />
+            <div class="friend-request-details">
+              <div class="friend-request-username">{{ apply.applyUser }}</div>
+              <div class="friend-request-desc">请求添加你为好友</div>
+            </div>
+          </div>
+          <Button
+            type="primary"
+            size="small"
+            @click="$emit('agree-friend', apply.applyUser)"
+          >同意</Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Search, User, UserFilled, ArrowDown } from '../ui/icons/index.js'
+import { Button, Input, Empty } from '../ui/index.js'
+
+const props = defineProps({
+  searchText: String,
+  currentNavTab: String,
+  config: Object,
+  combinedChatList: Array,
+  filteredFriendList: Array,
+  filteredGroupList: Array,
+  currentChatId: [String, Number],
+  currentSelectGroup: Object,
+  currentSelectedGroup: Object,
+  loadingFriendApply: Boolean,
+  friendApplyList: Array,
+  formatLastTime: Function
+})
+
+const emit = defineEmits([
+  'update:searchText', 
+  'add-friend', 
+  'create-group', 
+  'select-chat', 
+  'select-group-chat', 
+  'select-friend', 
+  'select-group', 
+  'agree-friend',
+  'contextmenu'
+])
+
+const friendsCollapsed = ref(false)
+const groupsCollapsed = ref(false)
+
+const isChatActive = (chat) => {
+  if (chat.type === 'friend') {
+    return props.currentChatId === chat.id
+  }
+  return props.currentSelectGroup?.groupId === chat.groupId
+}
+
+const handleChatClick = (chat) => {
+  if (chat.type === 'friend') {
+    emit('select-chat', chat)
+  } else {
+    emit('select-group-chat', chat)
+  }
+}
+
+// 处理头像加载错误
+const handleAvatarError = (e) => {
+  const img = e.target
+  // 头像加载失败时，显示默认背景色
+  img.style.display = 'none'
+  img.parentElement.style.backgroundColor = '#e0e0e0'
+}
+</script>
+
+<style scoped lang="scss">
+@use '../../styles/components/content-list';
+</style>

package/src/components/chat/ContextMenu.vue

@@ -0,0 +1,32 @@
+<template>
+  <Teleport to="body">
+    <div 
+      v-if="visible"
+      class="context-menu"
+      :style="{ left: x + 'px', top: y + 'px' }"
+    >
+      <slot></slot>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  x: {
+    type: Number,
+    default: 0
+  },
+  y: {
+    type: Number,
+    default: 0
+  }
+})
+</script>
+
+<style scoped lang="scss">
+@use '../../styles/components/context-menu';
+</style>