vue-chat-kit 0.3.7 → 0.3.8

package/src/components/ChatPanel.vue

@@ -317,7 +317,7 @@
         </div>
 
         <!-- 底部输入区域 -->
-        <div class="chat-input-area">
+        <div class="chat-input-area" @click="showEmojiPicker = false">
           <!-- 待发送文件预览 -->
           <div
             v-if="pendingFiles.length > 0"
@@ -363,7 +363,16 @@
           </div>
 
           <div v-if="config.modules.fileUpload" class="input-toolbar">
-            <el-icon class="input-toolbar-icon"><ChatDotRound /></el-icon>
+            <div class="emoji-button-wrapper">
+              <el-icon 
+                class="input-toolbar-icon" 
+                @click.stop="showEmojiPicker = !showEmojiPicker"
+              ><ChatDotRound /></el-icon>
+              <EmojiPicker 
+                :visible="showEmojiPicker" 
+                @select="selectEmoji"
+              />
+            </div>
             <el-icon
               class="input-toolbar-icon"
               @click="triggerFileSelect"
@@ -657,6 +666,7 @@ import {
 import { useChat } from '../composables/useChat.js'
 import { ElMessage } from 'element-plus'
 import AvatarCrop from './AvatarCrop.vue'
+import EmojiPicker from './EmojiPicker.vue'
 
 const props = defineProps({
   config: { type: Object, required: true }
@@ -702,8 +712,7 @@ const {
   loadFriendApplyList,
   agreeFriend,
   updateMyAvatar,
-  getUserInfo,
-  updateUserInfo
+
 } = useChat(props.config, (message) => {
   emit('message', message)
 })
@@ -738,6 +747,7 @@ const avatarImageSrc = ref('')
 const fileInputRef = ref(null)
 const pendingFiles = ref([])
 const contextMenu = ref({ visible: false, x: 0, y: 0, chat: null })
+const showEmojiPicker = ref(false)
 
 const showContextMenuFn = (e, chat) => {
   e.preventDefault()
@@ -908,6 +918,11 @@ const handleImageError = (e) => {
   console.warn('图片加载失败', e)
 }
 
+const selectEmoji = (emoji) => {
+  inputText.value += emoji
+  showEmojiPicker.value = false
+}
+
 const handleAvatarFileChange = (e) => {
   const file = e.target.files[0]
   if (!file) return
@@ -1017,10 +1032,14 @@ onUnmounted(() => {
 .chat-panel {
   display: flex;
   height: 680px;
-  background-color: white;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   overflow: hidden;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
+              0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.3);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
@@ -1031,8 +1050,10 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
   gap: 8px;
-  background-color: #f9fafb;
-  border-right: 1px solid #e5e7eb;
+  background: rgba(249, 250, 251, 0.6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-right: 1px solid rgba(229, 231, 235, 0.5);
 }
 
 .sidebar-avatar {
@@ -1096,8 +1117,10 @@ onUnmounted(() => {
 /* ========== 中间内容面板 ========== */
 .chat-content-panel {
   width: 288px;
-  background-color: #f5f5f5;
-  border-right: 1px solid #e5e7eb;
+  background: rgba(245, 245, 245, 0.5);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-right: 1px solid rgba(229, 231, 235, 0.5);
   display: flex;
   flex-direction: column;
 }
@@ -1123,14 +1146,16 @@ onUnmounted(() => {
   padding: 12px;
   cursor: pointer;
   transition: background-color 0.2s;
+  border-radius: 8px;
+  margin: 0 8px;
 }
 
 .chat-list-item:hover {
-  background-color: #e5e5e5;
+  background: rgba(229, 229, 229, 0.6);
 }
 
 .chat-list-item-active {
-  background-color: #d6d6d6;
+  background: rgba(7, 193, 96, 0.15);
 }
 
 .chat-list-avatar-wrapper {
@@ -1295,7 +1320,9 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  background-color: white;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 /* 好友信息 */
@@ -1306,7 +1333,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   padding: 32px;
-  background-color: #f5f5f5;
+  background: rgba(245, 245, 245, 0.4);
 }
 
 .profile-avatar {
@@ -1359,12 +1386,14 @@ onUnmounted(() => {
 
 .chat-window-header {
   height: 56px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
-  background-color: white;
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 .chat-window-title {
@@ -1414,7 +1443,7 @@ onUnmounted(() => {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
-  background-color: #f5f5f5;
+  background: rgba(245, 245, 245, 0.3);
   min-height: 0;
 }
 
@@ -1641,8 +1670,17 @@ onUnmounted(() => {
 
 /* 输入区域 */
 .chat-input-area {
-  background-color: white;
-  border-top: 1px solid #e5e7eb;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-top: 1px solid rgba(229, 231, 235, 0.5);
+  position: relative;
+}
+
+/* 表情按钮包装 */
+.emoji-button-wrapper {
+  position: relative;
+  display: inline-block;
 }
 
 .pending-files-area {
@@ -1800,8 +1838,10 @@ onUnmounted(() => {
 /* ========== 右侧详情面板 ========== */
 .chat-detail-panel {
   width: 256px;
-  background-color: #f5f5f5;
-  border-left: 1px solid #e5e7eb;
+  background: rgba(245, 245, 245, 0.5);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-left: 1px solid rgba(229, 231, 235, 0.5);
   display: flex;
   flex-direction: column;
 }
@@ -1811,7 +1851,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
   font-weight: 500;
   color: #374151;
   font-size: 14px;
@@ -2074,10 +2114,12 @@ onUnmounted(() => {
 /* ========== 右键菜单 ========== */
 .chat-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;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
   padding: 4px 0;
   z-index: 1000;
 }
@@ -2087,9 +2129,12 @@ onUnmounted(() => {
   cursor: pointer;
   font-size: 14px;
   color: #374151;
+  margin: 2px 4px;
+  border-radius: 8px;
+  transition: background-color 0.2s;
 }
 
 .chat-context-menu-item:hover {
-  background-color: #f3f4f6;
+  background-color: rgba(243, 244, 246, 0.8);
 }
 </style>

package/src/components/ChatWindow.vue

@@ -325,7 +325,7 @@
           </div>
 
           <!-- 底部输入区域 -->
-          <div class="input-area">
+          <div class="input-area" @click="showEmojiPicker = false">
             <!-- 待发送文件预览 -->
             <div
               v-if="pendingFiles.length > 0"
@@ -371,7 +371,16 @@
             </div>
 
             <div v-if="config.modules.fileUpload" class="input-actions">
-              <el-icon class="action-icon"><ChatDotRound /></el-icon>
+              <div class="emoji-button-wrapper">
+                <el-icon 
+                  class="action-icon" 
+                  @click.stop="showEmojiPicker = !showEmojiPicker"
+                ><ChatDotRound /></el-icon>
+                <EmojiPicker 
+                  :visible="showEmojiPicker" 
+                  @select="selectEmoji"
+                />
+              </div>
               <el-icon
                 class="action-icon"
                 @click="triggerFileSelect"
@@ -667,6 +676,7 @@ import {
 import { useChat } from '../composables/useChat.js'
 import { ElMessage } from 'element-plus'
 import AvatarCrop from './AvatarCrop.vue'
+import EmojiPicker from './EmojiPicker.vue'
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
@@ -718,8 +728,7 @@ const {
   loadFriendApplyList,
   agreeFriend,
   updateMyAvatar,
-  getUserInfo,
-  updateUserInfo
+
 } = useChat(props.config)
 
 const navTabs = computed(() => {
@@ -751,6 +760,7 @@ const avatarImageSrc = ref('')
 const fileInputRef = ref(null)
 const pendingFiles = ref([])
 const contextMenu = ref({ visible: false, x: 0, y: 0, chat: null })
+const showEmojiPicker = ref(false)
 
 const showContextMenuFn = (e, chat) => {
   e.preventDefault()
@@ -921,6 +931,11 @@ const handleImageError = (e) => {
   console.warn('图片加载失败', e)
 }
 
+const selectEmoji = (emoji) => {
+  inputText.value += emoji
+  showEmojiPicker.value = false
+}
+
 const handleAvatarFileChange = (e) => {
   const file = e.target.files[0]
   if (!file) return
@@ -1018,7 +1033,7 @@ const handleClosed = () => {
 }
 
 const handleOpen = async () => {
-  await Promise.all([getFriendList(), loadFriendApplyList(), getUserInfo()])
+  await Promise.all([getFriendList(), loadFriendApplyList()])
   initWebSocket()
   if (filteredUsers.value.length > 0) {
     selectChat(filteredUsers.value[0])
@@ -1039,8 +1054,13 @@ onUnmounted(() => {
 <style scoped>
 .chat-dialog :deep(.el-dialog) {
   padding: 0;
-  border-radius: 12px;
+  border-radius: 20px;
   overflow: hidden;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
 }
 
 .chat-dialog :deep(.el-dialog__header) {
@@ -1102,6 +1122,9 @@ onUnmounted(() => {
 .settings-dialog :deep(.el-dialog) {
   border-radius: 16px;
   overflow: hidden;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
 .settings-dialog :deep(.el-dialog__header) {
@@ -1119,7 +1142,7 @@ onUnmounted(() => {
 .chat-container {
   display: flex;
   height: 680px;
-  background-color: white;
+  background: rgba(255, 255, 255, 0.7);
   overflow: hidden;
 }
 
@@ -1130,8 +1153,10 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
   gap: 8px;
-  background-color: #f9fafb;
-  border-right: 1px solid #e5e7eb;
+  background: rgba(249, 250, 251, 0.6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-right: 1px solid rgba(229, 231, 235, 0.5);
 }
 
 .sidebar-avatar {
@@ -1194,8 +1219,10 @@ onUnmounted(() => {
 /* 内容面板 */
 .content-panel {
   width: 288px;
-  background-color: #f5f5f5;
-  border-right: 1px solid #e5e7eb;
+  background: rgba(245, 245, 245, 0.5);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-right: 1px solid rgba(229, 231, 235, 0.5);
   display: flex;
   flex-direction: column;
 }
@@ -1217,14 +1244,16 @@ onUnmounted(() => {
   padding: 12px;
   cursor: pointer;
   transition: background-color 0.2s;
+  border-radius: 8px;
+  margin: 0 8px;
 }
 
 .chat-item:hover {
-  background-color: #e5e5e5;
+  background: rgba(229, 229, 229, 0.6);
 }
 
 .chat-item-active {
-  background-color: #d6d6d6;
+  background: rgba(7, 193, 96, 0.15);
 }
 
 .friend-avatar-wrapper {
@@ -1383,7 +1412,9 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  background-color: white;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 .friend-profile {
@@ -1393,7 +1424,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   padding: 32px;
-  background-color: #f5f5f5;
+  background: rgba(245, 245, 245, 0.4);
 }
 
 .profile-avatar {
@@ -1446,12 +1477,14 @@ onUnmounted(() => {
 
 .chat-header {
   height: 56px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
-  background-color: white;
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 .chat-title {
@@ -1500,7 +1533,7 @@ onUnmounted(() => {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
-  background-color: #f5f5f5;
+  background: rgba(245, 245, 245, 0.3);
   min-height: 0;
 }
 
@@ -1675,13 +1708,22 @@ onUnmounted(() => {
 
 /* 输入区域 */
 .input-area {
-  background-color: white;
-  border-top: 1px solid #e5e7eb;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-top: 1px solid rgba(229, 231, 235, 0.5);
+  position: relative;
+}
+
+/* 表情按钮包装器 */
+.emoji-button-wrapper {
+  position: relative;
+  display: inline-block;
 }
 
 .pending-files {
   padding: 8px 12px;
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid rgba(243, 244, 246, 0.5);
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
@@ -1697,7 +1739,7 @@ onUnmounted(() => {
   height: 80px;
   border-radius: 8px;
   overflow: hidden;
-  border: 1px solid #e5e7eb;
+  border: 1px solid rgba(229, 231, 235, 0.5);
 }
 
 .pending-image {
@@ -1711,8 +1753,8 @@ onUnmounted(() => {
   width: 96px;
   height: 80px;
   border-radius: 8px;
-  border: 1px solid #e5e7eb;
-  background-color: #f9fafb;
+  border: 1px solid rgba(229, 231, 235, 0.5);
+  background: rgba(249, 250, 251, 0.6);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1777,6 +1819,7 @@ onUnmounted(() => {
   outline: none;
   font-size: 14px;
   height: 80px;
+  background: transparent;
 }
 
 .send-btn-wrapper {
@@ -1807,7 +1850,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  background-color: #f5f5f5;
+  background: rgba(245, 245, 245, 0.3);
 }
 
 .empty-icon {
@@ -1822,8 +1865,10 @@ onUnmounted(() => {
 /* 详情面板 */
 .detail-panel {
   width: 256px;
-  background-color: #f5f5f5;
-  border-left: 1px solid #e5e7eb;
+  background: rgba(245, 245, 245, 0.5);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-left: 1px solid rgba(229, 231, 235, 0.5);
   display: flex;
   flex-direction: column;
 }
@@ -1833,7 +1878,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
   font-weight: 500;
   color: #374151;
 }
@@ -2074,10 +2119,12 @@ onUnmounted(() => {
 /* 右键菜单 */
 .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;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
   padding: 4px 0;
   z-index: 1000;
 }
@@ -2086,9 +2133,12 @@ onUnmounted(() => {
   padding: 8px 16px;
   cursor: pointer;
   font-size: 14px;
+  margin: 2px 4px;
+  border-radius: 8px;
+  transition: background-color 0.2s;
 }
 
 .context-menu-item:hover {
-  background-color: #f3f4f6;
+  background: rgba(243, 244, 246, 0.8);
 }
 </style>