vue-chat-kit 0.3.9 → 0.3.11

package/src/composables/useMessageBox.js

@@ -0,0 +1,98 @@
+import { createApp, ref, render, h, nextTick } from 'vue'
+import MessageBox from '../components/ui/MessageBox.vue'
+
+const createMessageBox = (options) => {
+  const {
+    title = '提示',
+    message = '',
+    showCancelButton = true,
+    showConfirmButton = true,
+    cancelButtonText = '取消',
+    confirmButtonText = '确定',
+    closeOnClickModal = true,
+    width = '420px'
+  } = options
+
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+
+  const vnode = h(MessageBox, {
+    title,
+    message,
+    showCancelButton,
+    showConfirmButton,
+    cancelButtonText,
+    confirmButtonText,
+    closeOnClickModal,
+    width,
+    modelValue: false,
+    onConfirm: () => {},
+    onCancel: () => {},
+    onClose: () => {}
+  })
+
+  render(vnode, container)
+
+  const instance = vnode.component
+
+  const close = () => {
+    if (instance.exposed) {
+      instance.exposed.close()
+    }
+    setTimeout(() => {
+      render(null, container)
+      document.body.removeChild(container)
+    }, 300)
+  }
+
+  return new Promise((resolve, reject) => {
+    instance.props.onConfirm = () => {
+      resolve('confirm')
+      close()
+    }
+
+    instance.props.onCancel = () => {
+      reject('cancel')
+      close()
+    }
+
+    instance.props.onClose = () => {
+      reject('close')
+      close()
+    }
+
+    nextTick(() => {
+      if (instance.exposed) {
+        instance.exposed.open().catch((e) => {
+          if (e !== 'cancel' && e !== 'close') {
+            console.error(e)
+          }
+        })
+      }
+    })
+  })
+}
+
+export const useMessageBox = () => ({
+  alert: (message, title = '提示') => createMessageBox({ 
+    message, 
+    title, 
+    showCancelButton: false 
+  }),
+  confirm: (message, title = '提示', options = {}) => createMessageBox({
+    message,
+    title,
+    ...options
+  }),
+  prompt: (message, title = '提示', options = {}) => createMessageBox({
+    message,
+    title,
+    ...options
+  })
+})
+
+export const ElMessage = {
+  alert: (message, title) => useMessageBox().alert(message, title),
+  confirm: (message, title, options) => useMessageBox().confirm(message, title, options),
+  prompt: (message, title, options) => useMessageBox().prompt(message, title, options)
+}

package/src/composables/useTheme.js

@@ -0,0 +1,140 @@
+// ==========================================
+// 主题管理 Composable
+// ==========================================
+
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { THEMES, DEFAULT_THEME, THEME_STORAGE_KEY } from '../const/theme.js'
+
+/**
+ * 获取系统主题
+ * @returns {string} 'light' | 'dark'
+ */
+function getSystemTheme() {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? THEMES.DARK
+      : THEMES.LIGHT
+  }
+  return DEFAULT_THEME
+}
+
+/**
+ * 应用主题到 DOM
+ * @param {string} theme 主题名称
+ */
+function applyThemeToDOM(theme) {
+  if (typeof document !== 'undefined') {
+    const root = document.documentElement
+    root.setAttribute('data-theme', theme)
+  }
+}
+
+/**
+ * 保存主题到本地存储
+ * @param {string} theme 主题名称
+ */
+function saveThemeToStorage(theme) {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem(THEME_STORAGE_KEY, theme)
+  }
+}
+
+/**
+ * 从本地存储获取主题
+ * @returns {string | null}
+ */
+function getThemeFromStorage() {
+  if (typeof localStorage !== 'undefined') {
+    return localStorage.getItem(THEME_STORAGE_KEY)
+  }
+  return null
+}
+
+export function useTheme() {
+  // 当前用户选择的主题
+  const currentTheme = ref(DEFAULT_THEME)
+  
+  // 实际应用的主题（考虑 auto 模式）
+  const appliedTheme = ref(DEFAULT_THEME)
+
+  // 是否是浅色主题
+  const isLight = computed(() => appliedTheme.value === THEMES.LIGHT)
+
+  // 是否是深色主题
+  const isDark = computed(() => appliedTheme.value === THEMES.DARK)
+
+  // 系统主题变化监听器
+  let mediaQueryList = null
+
+  /**
+   * 设置主题
+   * @param {string} theme 主题名称
+   */
+  function setTheme(theme) {
+    // 验证主题有效性
+    const validTheme = Object.values(THEMES).includes(theme) ? theme : DEFAULT_THEME
+    currentTheme.value = validTheme
+    
+    // 计算实际应用的主题
+    if (validTheme === THEMES.AUTO) {
+      appliedTheme.value = getSystemTheme()
+    } else {
+      appliedTheme.value = validTheme
+    }
+
+    // 应用到 DOM
+    applyThemeToDOM(appliedTheme.value)
+    
+    // 保存到存储
+    saveThemeToStorage(validTheme)
+  }
+
+  /**
+   * 系统主题变化处理
+   */
+  function handleSystemThemeChange(e) {
+    if (currentTheme.value === THEMES.AUTO) {
+      appliedTheme.value = e.matches ? THEMES.DARK : THEMES.LIGHT
+      applyThemeToDOM(appliedTheme.value)
+    }
+  }
+
+  /**
+   * 初始化主题
+   */
+  function initTheme() {
+    // 从存储获取主题
+    const savedTheme = getThemeFromStorage()
+    if (savedTheme) {
+      setTheme(savedTheme)
+    } else {
+      setTheme(DEFAULT_THEME)
+    }
+
+    // 监听系统主题变化
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
+      mediaQueryList.addEventListener('change', handleSystemThemeChange)
+    }
+  }
+
+  // 生命周期
+  onMounted(() => {
+    initTheme()
+  })
+
+  onUnmounted(() => {
+    if (mediaQueryList) {
+      mediaQueryList.removeEventListener('change', handleSystemThemeChange)
+    }
+  })
+
+  return {
+    currentTheme,
+    appliedTheme,
+    isLight,
+    isDark,
+    setTheme,
+    THEMES
+  }
+}

package/src/config/index.js

@@ -26,6 +26,7 @@ const defaultConfig = {
       addGroupMember: '/chart/group/member/add',
       getGroupMembers: '/chart/group/member/list',
       quitGroup: '/chart/group/member/quit',
+      getGroupChatStatus: '/chart/group/status',
       getGroupHistory: '/chart/group/history',
       getGroupUnreadCount: '/chart/group/unread/count',
       getMsgReadUserList: '/chart/group/msg/read/list',

package/src/const/index.js

@@ -0,0 +1 @@
+export { themeColorMap, elPlusVars, DEFAULT_THEME } from './theme.js';

package/src/const/theme.js

@@ -0,0 +1,19 @@
+// ==========================================
+// 主题常量配置
+// ==========================================
+
+export const THEMES = {
+  LIGHT: 'light',
+  DARK: 'dark',
+  AUTO: 'auto'
+}
+
+export const DEFAULT_THEME = THEMES.LIGHT
+
+export const THEME_OPTIONS = [
+  { value: THEMES.LIGHT, label: '浅色', icon: 'sun' },
+  { value: THEMES.DARK, label: '深色', icon: 'moon' },
+  { value: THEMES.AUTO, label: '跟随系统', icon: 'monitor' }
+]
+
+export const THEME_STORAGE_KEY = 'vck-theme'

package/src/core/api.js

@@ -73,8 +73,8 @@ export class ChatApi {
     return this._call('addFriend', currentUser, friendUser)
   }
 
-  async _addFriend(currentUser, friendUser) {
-    return this.http.post(this.endpoints.addFriend, { currentUser, friendUser })
+  async _addFriend(applyUser, friendUser) {
+    return this.http.post(this.endpoints.addFriend, { applyUser, friendUser })
   }
 
   /**
@@ -373,6 +373,17 @@ export class ChatApi {
   async _readAllGroupMsg(groupId, currentUser) {
     return this.http.post(this.endpoints.readAllGroupMsg, { groupId, currentUser })
   }
+
+  /**
+   * 设置群聊聊天状态
+   */
+  async setGroupChatStatus(groupId, currentUser, status = 1) {
+    return this._call('setGroupChatStatus', groupId, currentUser, status)
+  }
+
+  async _setGroupChatStatus(groupId, currentUser, status) {
+    return this.http.post(this.endpoints.getGroupChatStatus, null, { params: { groupId, currentUser, status } })
+  }
 }
 
 export default ChatApi

package/src/index.js

@@ -1,5 +1,5 @@
 // 导入样式
-import './style.css'
+import './styles/index.scss'
 
 // 先导入组件用于 Vue 插件
 import ChatPanel from './components/ChatPanel.vue'
@@ -8,11 +8,14 @@ import AvatarCrop from './components/AvatarCrop.vue'
 // 导出组件 - 新的独立面板组件（推荐使用）
 export { ChatPanel }
 
-
 export { AvatarCrop }
 
 // 导出 composables
 export { useChat } from './composables/useChat.js'
+export { useTheme } from './composables/useTheme.js'
+
+// 导出主题常量
+export { THEMES, DEFAULT_THEME, THEME_OPTIONS, THEME_STORAGE_KEY } from './const/theme.js'
 
 // 导出配置
 export { createChatConfig } from './config/index.js'
@@ -22,9 +25,6 @@ export { ChatWebSocket } from './core/websocket.js'
 export { ChatApi } from './core/api.js'
 export { HttpClient } from './core/request.js'
 
-// 导出类型（如果使用 TypeScript 的话）
-// export * from './types/index.d.ts'
-
 // 安装函数，用于 Vue 插件安装
 export const VueChatKit = {
   install(app) {

package/src/styles/_base.scss

@@ -0,0 +1,38 @@
+// ==========================================
+// 基础样式
+// ==========================================
+
+// 引入主题系统
+@use './themes/index';
+
+// 重置样式
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--vck-scrollbar);
+  border-radius: 3px;
+  transition: var(--vck-transition-fast);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--vck-scrollbar-hover);
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+// 通用的过渡效果
+.vck-transition {
+  transition: var(--vck-transition);
+}

package/src/styles/_variables.scss

@@ -0,0 +1,43 @@
+// ==================== 颜色变量 ====================
+$vck-primary: #07c160;
+$vck-primary-hover: #06ad56;
+$vck-success: #10b981;
+$vck-danger: #ef4444;
+$vck-warning: #f59e0b;
+
+// 背景色
+$vck-bg-color: #ffffff;
+$vck-bg-panel: #f9fafb;
+$vck-bg-sidebar: #f5f5f5;
+$vck-bg-chat: #fafafa;
+$vck-bg-bubble-self: #95ec69;
+$vck-bg-bubble-other: #ffffff;
+
+// 文字颜色
+$vck-text-primary: #1f2937;
+$vck-text-secondary: #6b7280;
+$vck-text-muted: #9ca3af;
+$vck-text-white: #ffffff;
+
+// 边框颜色
+$vck-border: #e5e7eb;
+$vck-border-light: #f3f4f6;
+$vck-avatar-border: #e5e7eb;
+
+// 滚动条
+$vck-scrollbar: #ccc;
+
+// 阴影
+$vck-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 12px rgba(0, 0, 0, 0.08);
+$vck-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+// ==================== 尺寸变量 ====================
+$vck-border-radius-sm: 6px;
+$vck-border-radius: 8px;
+$vck-border-radius-md: 12px;
+$vck-border-radius-lg: 16px;
+$vck-border-radius-xl: 20px;
+$vck-border-radius-full: 9999px;
+
+$vck-transition: all 0.3s ease;
+$vck-transition-fast: all 0.2s ease;

package/src/styles/components/_add-friend-dialog.scss

@@ -0,0 +1,45 @@
+// ==========================================
+// AddFriendDialog 组件样式
+// ==========================================
+
+.add-friend-search-wrapper {
+  margin-bottom: 16px;
+}
+
+.add-friend-users-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.add-friend-user-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  margin-bottom: 8px;
+  border-radius: var(--vck-radius);
+  transition: var(--vck-transition-fast);
+}
+
+.add-friend-user-item:hover {
+  background-color: var(--vck-bg-panel);
+}
+
+.add-friend-user-info {
+  display: flex;
+  align-items: center;
+}
+
+.add-friend-user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.add-friend-user-name {
+  margin-left: 12px;
+  font-weight: 500;
+  color: var(--vck-text-primary);
+  font-size: 14px;
+}

package/src/styles/components/_avatar-crop.scss

@@ -0,0 +1,120 @@
+// ==========================================
+// AvatarCrop 组件样式
+// ==========================================
+
+.avatar-crop-container {
+  min-height: 200px;
+}
+
+.crop-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.crop-area {
+  position: relative;
+  overflow: hidden;
+  background: var(--vck-bg-panel);
+  border-radius: var(--vck-radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--vck-border);
+}
+
+.crop-box {
+  position: absolute;
+  border: 2px solid var(--vck-primary);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+  cursor: move;
+  box-sizing: border-box;
+}
+
+.crop-handle {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  background: var(--vck-primary);
+  border: 3px solid var(--vck-text-white);
+  border-radius: 50%;
+  box-shadow: var(--vck-shadow-sm);
+}
+
+.crop-handle.nw {
+  top: -7px;
+  left: -7px;
+  cursor: nw-resize;
+}
+.crop-handle.n {
+  top: -7px;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: n-resize;
+}
+.crop-handle.ne {
+  top: -7px;
+  right: -7px;
+  cursor: ne-resize;
+}
+.crop-handle.e {
+  right: -7px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: e-resize;
+}
+.crop-handle.se {
+  bottom: -7px;
+  right: -7px;
+  cursor: se-resize;
+}
+.crop-handle.s {
+  bottom: -7px;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: s-resize;
+}
+.crop-handle.sw {
+  bottom: -7px;
+  left: -7px;
+  cursor: sw-resize;
+}
+.crop-handle.w {
+  left: -7px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: w-resize;
+}
+
+.preview-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.preview-label {
+  font-size: 14px;
+  color: var(--vck-text-secondary);
+  font-weight: 500;
+}
+
+.preview-box {
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid var(--vck-border);
+  background: var(--vck-bg);
+  box-shadow: var(--vck-shadow-sm);
+}
+
+.preview-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}