vue-chat-kit 0.3.6 → 0.3.8

package/src/components/EmojiPicker.vue

@@ -0,0 +1,197 @@
+<template>
+  <div v-if="visible" class="emoji-picker" @click.stop>
+    <div class="emoji-header">
+      <div 
+        v-for="(category, index) in emojiCategories" 
+        :key="category.id"
+        :class="['emoji-category-tab', { active: currentCategory === index }]"
+        @click="currentCategory = index"
+      >
+        {{ category.icon }}
+      </div>
+    </div>
+    <div class="emoji-body">
+      <div 
+        v-for="emoji in emojiCategories[currentCategory].emojis" 
+        :key="emoji"
+        class="emoji-item"
+        @click="selectEmoji(emoji)"
+      >
+        {{ emoji }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['select', 'close'])
+
+const currentCategory = ref(0)
+
+// 常用表情分类
+const emojiCategories = [
+  {
+    id: 'emoticons',
+    icon: '😀',
+    name: '表情',
+    emojis: [
+      '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃',
+      '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😋',
+      '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐',
+      '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬', '🤥', '😌',
+      '😔', '😪', '🤤', '😴', '😷', '🤒', '🤕', '🤢', '🤮', '🤧',
+      '🥵', '🥶', '🥴', '😵', '🤯', '🤠', '🥳', '😎', '🤓', '🧐',
+      '😕', '😟', '🙁', '☹️', '😮', '😯', '😲', '😳', '🥺', '😦',
+      '😧', '😨', '😰', '😥', '😢', '😭', '😱', '😖', '😣', '😞'
+    ]
+  },
+  {
+    id: 'gestures',
+    icon: '👋',
+    name: '手势',
+    emojis: [
+      '👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤌', '🤏', '✌️', '🤞',
+      '🤟', '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '👍',
+      '👎', '✊', '👊', '🤛', '🤜', '👏', '🙌', '👐', '🤲', '🤝',
+      '🙏', '🤚🏻', '🖐🏻', '✋🏻', '🖖🏻', '👌🏻', '🤌🏻', '🤏🏻', '✌🏻', '🤞🏻',
+      '🤟🏻', '🤘🏻', '🤙🏻', '👈🏻', '👉🏻', '👆🏻', '🖕🏻', '👇🏻', '☝🏻', '👍🏻'
+    ]
+  },
+  {
+    id: 'animals',
+    icon: '🐶',
+    name: '动物',
+    emojis: [
+      '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯',
+      '🦁', '🐮', '🐷', '🐸', '🐵', '🙈', '🙉', '🙊', '🐒', '🐔',
+      '🐧', '🐦', '🐤', '🐣', '🐥', '🦆', '🦅', '🦉', '🦇', '🐺',
+      '🐗', '🐴', '🦄', '🐝', '🐛', '🦋', '🐌', '🐞', '🐜', '🦟',
+      '🦗', '🕷️', '🦂', '🐢', '🐍', '🦎', '🦖', '🦕', '🐙', '🦑'
+    ]
+  },
+  {
+    id: 'food',
+    icon: '🍎',
+    name: '食物',
+    emojis: [
+      '🍎', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑',
+      '🥭', '🍍', '🥥', '🥝', '🍅', '🍆', '🥑', '🥦', '🥬', '🥒',
+      '🌶️', '🌽', '🥕', '🧄', '🧅', '🥔', '🍠', '🥐', '🥯', '🍞',
+      '🥖', '🥨', '🧀', '🥚', '🍳', '🧈', '🥞', '🧇', '🥓', '🥩',
+      '🍗', '🍖', '🌭', '🍔', '🍟', '🍕', '🥪', '🥙', '🧆', '🌮'
+    ]
+  },
+  {
+    id: 'objects',
+    icon: '⌚',
+    name: '物品',
+    emojis: [
+      '⌚', '📱', '📲', '💻', '⌨️', '🖥️', '🖨️', '🖱️', '🖲️', '🕹️',
+      '🗜️', '💽', '💾', '💿', '📀', '🧮', '🎥', '🎞️', '📽️', '🎬',
+      '📺', '📷', '📸', '📹', '📼', '🔍', '🔎', '🕯️', '💡', '🔦',
+      '🏮', '📔', '📕', '📖', '📗', '📘', '📙', '📚', '📓', '📒',
+      '📃', '📜', '📄', '📰', '🗞️', '📑', '🔖', '🏷️', '💰', '🪙'
+    ]
+  },
+  {
+    id: 'nature',
+    icon: '☀️',
+    name: '自然',
+    emojis: [
+      '☀️', '🌤️', '⛅', '🌥️', '☁️', '🌦️', '🌧️', '⛈️', '🌩️', '🌨️',
+      '❄️', '☃️', '⛄', '🌬️', '💨', '🌪️', '🌫️', '🌊', '💧', '💦',
+      '☔', '☂️', '🌱', '🌲', '🌳', '🌴', '🌵', '🌷', '🌹', '🥀',
+      '🌺', '🌸', '🌼', '🌻', '🌞', '⭐', '🌟', '✨', '💫', '🌙',
+      '🌚', '🌛', '🌜', '🌝', '🪐', '🌍', '🌎', '🌏', '⛱️', '🏖️'
+    ]
+  }
+]
+
+const selectEmoji = (emoji) => {
+  emit('select', 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>

package/src/composables/useChat.js

@@ -1,7 +1,7 @@
 /**
  * 聊天核心状态管理
  */
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, nextTick, watch } from 'vue'
 import dayjs from 'dayjs'
 import { ChatWebSocket } from '../core/websocket.js'
 import { ChatApi } from '../core/api.js'
@@ -88,10 +88,7 @@ export function useChat(config, emit) {
 
   // 过滤后的可添加用户
   const filteredAvailableUsers = computed(() => {
-    if (!addFriendSearchText.value) return availableUsers.value
-    return availableUsers.value.filter(item =>
-      item.username?.toLowerCase().includes(addFriendSearchText.value.toLowerCase())
-    )
+    return availableUsers.value
   })
 
   // 当前选中的用户
@@ -442,13 +439,20 @@ export function useChat(config, emit) {
   const openAddFriendDialog = async () => {
     addFriendDialogVisible.value = true
     addFriendSearchText.value = ''
-    await loadAvailableUsers()
+    availableUsers.value = [] // 清空列表，打开时不搜索
   }
 
-  const loadAvailableUsers = async () => {
+  const loadAvailableUsers = async (keyword = '') => {
     loadingAvailableUsers.value = true
     try {
-      const res = await api.getAvailableUsers(myUsername)
+      let res
+      if (keyword) {
+        // 使用模糊查询接口搜索用户
+        res = await api.searchUser(keyword)
+      } else {
+        // 使用获取可添加好友接口
+        res = await api.getAvailableUsers(myUsername)
+      }
       availableUsers.value = res?.data || []
     } catch (error) {
       console.error('[VueChatKit] 获取可用用户失败', error)
@@ -506,22 +510,6 @@ export function useChat(config, emit) {
     myAvatar.value = avatarUrl
   }
 
-  const getUserInfo = async () => {
-    loadingUserInfo.value = true
-    try {
-      const res = await api.getUserInfo(myUsername)
-      if (res.code === 200 && res.data) {
-        userInfo.value = {
-          ...userInfo.value,
-          ...res.data
-        }
-      }
-    } catch (error) {
-      console.error('[VueChatKit] 获取用户信息失败', error)
-    } finally {
-      loadingUserInfo.value = false
-    }
-  }
 
   const updateUserInfo = async (data) => {
     try {
@@ -551,6 +539,11 @@ export function useChat(config, emit) {
   // 初始化头像
   initUserAvatar()
 
+  // 监听添加好友搜索关键词变化，实时调用模糊查询
+  watch(addFriendSearchText, async (newKeyword) => {
+    await loadAvailableUsers(newKeyword)
+  })
+
   return {
     // 状态
     myUsername,
@@ -591,11 +584,11 @@ export function useChat(config, emit) {
     closeWebSocket,
     reset,
     openAddFriendDialog,
+    loadAvailableUsers,
     addFriend,
     loadFriendApplyList,
     agreeFriend,
     updateMyAvatar,
-    getUserInfo,
     updateUserInfo
   }
 }

package/src/config/index.js

@@ -16,8 +16,7 @@ const defaultConfig = {
       agreeFriend: '/chart/friend/agree',
       setChatStatus: '/chart/friend/chat/status',
       getAvailableUsers: '/chart/user/canAddFriend',
-      getUserInfo: '/user/info',
-      updateUserInfo: '/user/info',
+      searchUser: '/chart/user/search',
       getUserAvatar: '/user/getAvatar',
       uploadAvatar: '/user/uploadAvatar'
     },

package/src/core/adapter-example.js

@@ -145,26 +145,6 @@ export const customAdapter = {
     return { code: 200 }
   },
 
-  /**
-   * 获取用户信息
-   * @param {string} username - 用户名
-   * @returns {Promise<{code: number, data: Object}>}
-   */
-  async getUserInfo(username) {
-    console.log('getUserInfo 被调用, username:', username)
-    return { code: 200, data: { username, nickname: '', avatar: '', email: '', phone: '', bio: '' } }
-  },
-
-  /**
-   * 更新用户信息
-   * @param {string} username - 用户名
-   * @param {Object} data - 更新的数据
-   * @returns {Promise<{code: number}>}
-   */
-  async updateUserInfo(username, data) {
-    console.log('updateUserInfo 被调用', { username, data })
-    return { code: 200 }
-  },
 
   /**
    * 获取用户头像

package/src/core/api.js

@@ -55,6 +55,17 @@ export class ChatApi {
     return this.http.get(this.endpoints.getAvailableUsers, { currentUser })
   }
 
+  /**
+   * 搜索用户
+   */
+  async searchUser(keyword) {
+    return this._call('searchUser', keyword)
+  }
+
+  async _searchUser(keyword) {
+    return this.http.get(this.endpoints.searchUser, { keyword })
+  }
+
   /**
    * 添加好友
    */
@@ -138,19 +149,6 @@ export class ChatApi {
     return this.http.post(this.endpoints.uploadFile, formData)
   }
 
-  // ========== 用户相关 ==========
-  
-  /**
-   * 获取用户信息
-   */
-  async getUserInfo(username) {
-    return this._call('getUserInfo', username)
-  }
-
-  async _getUserInfo(username) {
-    return this.http.get(this.endpoints.getUserInfo, { username })
-  }
-
   /**
    * 更新用户信息
    */