vue-chat-kit 0.3.7 → 0.3.9

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.
Files changed (17) hide show
  1. package/README.md +0 -4
  2. package/dist/vue-chat-kit.css +1 -1
  3. package/dist/vue-chat-kit.es.js +3392 -2122
  4. package/dist/vue-chat-kit.umd.js +1 -1
  5. package/package.json +1 -1
  6. package/src/components/ChatPanel.vue +1570 -57
  7. package/src/components/EmojiPicker.vue +197 -0
  8. package/src/composables/useChat.js +157 -613
  9. package/src/composables/useChatCore.js +207 -0
  10. package/src/composables/useFriendChat.js +423 -0
  11. package/src/composables/useGroupChat.js +748 -0
  12. package/src/config/index.js +21 -4
  13. package/src/core/adapter-example.js +90 -20
  14. package/src/core/api.js +189 -13
  15. package/src/core/websocket.js +25 -9
  16. package/src/index.js +0 -4
  17. package/src/components/ChatWindow.vue +0 -2094
package/src/components/EmojiPicker.vue ADDED
@@ -0,0 +1,197 @@
1
+ <template>
2
+ <div v-if="visible" class="emoji-picker" @click.stop>
3
+ <div class="emoji-header">
4
+ <div
5
+ v-for="(category, index) in emojiCategories"
6
+ :key="category.id"
7
+ :class="['emoji-category-tab', { active: currentCategory === index }]"
8
+ @click="currentCategory = index"
9
+ >
10
+ {{ category.icon }}
11
+ </div>
12
+ </div>
13
+ <div class="emoji-body">
14
+ <div
15
+ v-for="emoji in emojiCategories[currentCategory].emojis"
16
+ :key="emoji"
17
+ class="emoji-item"
18
+ @click="selectEmoji(emoji)"
19
+ >
20
+ {{ emoji }}
21
+ </div>
22
+ </div>
23
+ </div>
24
+ </template>
25
+
26
+ <script setup>
27
+ import { ref } from 'vue'
28
+
29
+ const props = defineProps({
30
+ visible: {
31
+ type: Boolean,
32
+ default: false
33
+ }
34
+ })
35
+
36
+ const emit = defineEmits(['select', 'close'])
37
+
38
+ const currentCategory = ref(0)
39
+
40
+ // 常用表情分类
41
+ const emojiCategories = [
42
+ {
43
+ id: 'emoticons',
44
+ icon: '😀',
45
+ name: '表情',
46
+ emojis: [
47
+ '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃',
48
+ '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😋',
49
+ '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐',
50
+ '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬', '🤥', '😌',
51
+ '😔', '😪', '🤤', '😴', '😷', '🤒', '🤕', '🤢', '🤮', '🤧',
52
+ '🥵', '🥶', '🥴', '😵', '🤯', '🤠', '🥳', '😎', '🤓', '🧐',
53
+ '😕', '😟', '🙁', '☹️', '😮', '😯', '😲', '😳', '🥺', '😦',
54
+ '😧', '😨', '😰', '😥', '😢', '😭', '😱', '😖', '😣', '😞'
55
+ ]
56
+ },
57
+ {
58
+ id: 'gestures',
59
+ icon: '👋',
60
+ name: '手势',
61
+ emojis: [
62
+ '👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤌', '🤏', '✌️', '🤞',
63
+ '🤟', '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '👍',
64
+ '👎', '✊', '👊', '🤛', '🤜', '👏', '🙌', '👐', '🤲', '🤝',
65
+ '🙏', '🤚🏻', '🖐🏻', '✋🏻', '🖖🏻', '👌🏻', '🤌🏻', '🤏🏻', '✌🏻', '🤞🏻',
66
+ '🤟🏻', '🤘🏻', '🤙🏻', '👈🏻', '👉🏻', '👆🏻', '🖕🏻', '👇🏻', '☝🏻', '👍🏻'
67
+ ]
68
+ },
69
+ {
70
+ id: 'animals',
71
+ icon: '🐶',
72
+ name: '动物',
73
+ emojis: [
74
+ '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯',
75
+ '🦁', '🐮', '🐷', '🐸', '🐵', '🙈', '🙉', '🙊', '🐒', '🐔',
76
+ '🐧', '🐦', '🐤', '🐣', '🐥', '🦆', '🦅', '🦉', '🦇', '🐺',
77
+ '🐗', '🐴', '🦄', '🐝', '🐛', '🦋', '🐌', '🐞', '🐜', '🦟',
78
+ '🦗', '🕷️', '🦂', '🐢', '🐍', '🦎', '🦖', '🦕', '🐙', '🦑'
79
+ ]
80
+ },
81
+ {
82
+ id: 'food',
83
+ icon: '🍎',
84
+ name: '食物',
85
+ emojis: [
86
+ '🍎', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑',
87
+ '🥭', '🍍', '🥥', '🥝', '🍅', '🍆', '🥑', '🥦', '🥬', '🥒',
88
+ '🌶️', '🌽', '🥕', '🧄', '🧅', '🥔', '🍠', '🥐', '🥯', '🍞',
89
+ '🥖', '🥨', '🧀', '🥚', '🍳', '🧈', '🥞', '🧇', '🥓', '🥩',
90
+ '🍗', '🍖', '🌭', '🍔', '🍟', '🍕', '🥪', '🥙', '🧆', '🌮'
91
+ ]
92
+ },
93
+ {
94
+ id: 'objects',
95
+ icon: '⌚',
96
+ name: '物品',
97
+ emojis: [
98
+ '⌚', '📱', '📲', '💻', '⌨️', '🖥️', '🖨️', '🖱️', '🖲️', '🕹️',
99
+ '🗜️', '💽', '💾', '💿', '📀', '🧮', '🎥', '🎞️', '📽️', '🎬',
100
+ '📺', '📷', '📸', '📹', '📼', '🔍', '🔎', '🕯️', '💡', '🔦',
101
+ '🏮', '📔', '📕', '📖', '📗', '📘', '📙', '📚', '📓', '📒',
102
+ '📃', '📜', '📄', '📰', '🗞️', '📑', '🔖', '🏷️', '💰', '🪙'
103
+ ]
104
+ },
105
+ {
106
+ id: 'nature',
107
+ icon: '☀️',
108
+ name: '自然',
109
+ emojis: [
110
+ '☀️', '🌤️', '⛅', '🌥️', '☁️', '🌦️', '🌧️', '⛈️', '🌩️', '🌨️',
111
+ '❄️', '☃️', '⛄', '🌬️', '💨', '🌪️', '🌫️', '🌊', '💧', '💦',
112
+ '☔', '☂️', '🌱', '🌲', '🌳', '🌴', '🌵', '🌷', '🌹', '🥀',
113
+ '🌺', '🌸', '🌼', '🌻', '🌞', '⭐', '🌟', '✨', '💫', '🌙',
114
+ '🌚', '🌛', '🌜', '🌝', '🪐', '🌍', '🌎', '🌏', '⛱️', '🏖️'
115
+ ]
116
+ }
117
+ ]
118
+
119
+ const selectEmoji = (emoji) => {
120
+ emit('select', emoji)
121
+ }
122
+ </script>
123
+
124
+ <style scoped>
125
+ .emoji-picker {
126
+ position: absolute;
127
+ bottom: 100%;
128
+ left: 0;
129
+ width: 320px;
130
+ background: rgba(255, 255, 255, 0.9);
131
+ backdrop-filter: blur(20px);
132
+ -webkit-backdrop-filter: blur(20px);
133
+ border-radius: 16px;
134
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
135
+ border: 1px solid rgba(255, 255, 255, 0.3);
136
+ overflow: hidden;
137
+ z-index: 1000;
138
+ margin-bottom: 8px;
139
+ }
140
+
141
+ .emoji-header {
142
+ display: flex;
143
+ padding: 8px 12px;
144
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08);
145
+ gap: 4px;
146
+ }
147
+
148
+ .emoji-category-tab {
149
+ padding: 8px 12px;
150
+ cursor: pointer;
151
+ border-radius: 8px;
152
+ transition: all 0.2s;
153
+ font-size: 18px;
154
+ line-height: 1;
155
+ }
156
+
157
+ .emoji-category-tab:hover {
158
+ background: rgba(0, 0, 0, 0.05);
159
+ }
160
+
161
+ .emoji-category-tab.active {
162
+ background: rgba(7, 193, 96, 0.1);
163
+ }
164
+
165
+ .emoji-body {
166
+ display: grid;
167
+ grid-template-columns: repeat(8, 1fr);
168
+ gap: 4px;
169
+ padding: 12px;
170
+ max-height: 240px;
171
+ overflow-y: auto;
172
+ }
173
+
174
+ .emoji-body::-webkit-scrollbar {
175
+ width: 6px;
176
+ }
177
+
178
+ .emoji-body::-webkit-scrollbar-thumb {
179
+ background: rgba(0, 0, 0, 0.2);
180
+ border-radius: 3px;
181
+ }
182
+
183
+ .emoji-item {
184
+ font-size: 24px;
185
+ padding: 8px;
186
+ text-align: center;
187
+ cursor: pointer;
188
+ border-radius: 8px;
189
+ transition: all 0.15s;
190
+ line-height: 1;
191
+ }
192
+
193
+ .emoji-item:hover {
194
+ background: rgba(0, 0, 0, 0.08);
195
+ transform: scale(1.2);
196
+ }
197
+ </style>