vue-chat-kit 0.1.1

package/README.md

@@ -0,0 +1,214 @@
+# Vue Chat Kit
+
+一个功能完整的 Vue 3 聊天组件库，支持 WebSocket 实时通信、文件上传、好友管理等功能。
+
+## 特性
+
+- 🎨 开箱即用的聊天界面
+- 🔌 WebSocket 实时通信
+- 📁 文件上传支持
+- 👥 好友管理
+- 📝 消息历史记录
+- 🔧 高度可配置
+- 📦 模块化设计
+
+## 快速开始
+
+### 安装
+
+```bash
+npm install vue-chat-kit
+# 或
+yarn add vue-chat-kit
+# 或
+pnpm add vue-chat-kit
+```
+
+### 基础使用
+
+```vue
+<template>
+  <ChatWindow
+    v-model="visible"
+    :config="chatConfig"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ChatWindow, createChatConfig } from 'vue-chat-kit'
+import 'vue-chat-kit/style'
+
+const visible = ref(false)
+
+// 配置
+const chatConfig = createChatConfig({
+  // API 基础配置
+  api: {
+    baseUrl: 'http://your-api.com',
+    websocketUrl: 'ws://your-websocket.com'
+  },
+  
+  // 用户信息
+  user: {
+    username: 'user123',
+    avatar: 'https://example.com/avatar.jpg'
+  },
+  
+  // 模块配置
+  modules: {
+    friends: true,      // 启用好友模块
+    apply: true,        // 启用好友申请模块
+    settings: true,     // 启用设置模块
+    fileUpload: true    // 启用文件上传
+  }
+})
+</script>
+```
+
+## API 文档
+
+### ChatWindow Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| v-model | 控制弹窗显示/隐藏 | boolean | false |
+| config | 聊天组件配置对象 | ChatConfig | - |
+| width | 弹窗宽度 | string \| number | '1100px' |
+
+### createChatConfig 配置项
+
+```javascript
+{
+  // API 配置
+  api: {
+    baseUrl: '',
+    websocketUrl: '',
+    // 自定义 API 端点
+    endpoints: {
+      getFriends: '/chart/friends',
+      getHistory: '/chart/history',
+      setRead: '/chart/read',
+      sendMessage: '',
+      uploadFile: '/chart/upload/file',
+      addFriend: '/chart/friend/add',
+      getApplyList: '/chart/friend/applyList',
+      agreeFriend: '/chart/friend/agree',
+      setChatStatus: '/chart/friend/chat/status',
+      getAvailableUsers: '/chart/user/canAddFriend',
+      getUserInfo: '/user/info',
+      updateUserInfo: '/user/info',
+      getUserAvatar: '/user/getAvatar',
+      uploadAvatar: '/user/uploadAvatar'
+    }
+  },
+  
+  // 用户信息
+  user: {
+    username: '',
+    avatar: '',
+    nickname: '',
+    email: '',
+    phone: '',
+    bio: ''
+  },
+  
+  // 模块开关
+  modules: {
+    friends: true,
+    apply: true,
+    settings: true,
+    fileUpload: true,
+    avatarCrop: true
+  },
+  
+  // 主题配置
+  theme: {
+    primaryColor: '#07c160',
+    selfMessageBg: '#95ec69',
+    otherMessageBg: '#ffffff'
+  },
+  
+  // 自定义请求头
+  headers: {
+    // 默认会自动添加 Authorization
+    // 'Authorization': 'Bearer xxx'
+  },
+  
+  // WebSocket 配置
+  websocket: {
+    maxReconnectAttempts: 5,
+    reconnectDelay: 3000
+  },
+  
+  // 文件配置
+  file: {
+    maxSize: 50 * 1024 * 1024, // 50MB
+    allowedTypes: ['*']
+  }
+}
+```
+
+### 事件
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| open | 聊天窗口打开 | - |
+| close | 聊天窗口关闭 | - |
+| message | 收到新消息 | message |
+| send | 发送消息 | message |
+| error | 错误事件 | error |
+
+### 高级用法 - 自定义 API 实现
+
+如果你想完全自定义 API 实现，可以传入自定义的 API 适配器：
+
+```javascript
+const chatConfig = createChatConfig({
+  api: {
+    baseUrl: 'http://your-api.com',
+    websocketUrl: 'ws://your-websocket.com',
+    // 自定义适配器
+    adapter: {
+      async getFriends(currentUser) {
+        // 自定义实现
+        return []
+      },
+      async getHistory(fromUser, toUser) {
+        // 自定义实现
+        return []
+      },
+      async sendMessage(to, message, type) {
+        // 自定义实现
+      }
+      // ... 更多方法
+    }
+  }
+})
+```
+
+## 模块说明
+
+### 核心模块 (Core)
+- WebSocket 连接管理
+- 消息收发
+- 消息历史
+
+### 好友模块 (Friends)
+- 好友列表
+- 添加好友
+- 好友申请
+
+### 设置模块 (Settings)
+- 用户信息编辑
+- 头像上传
+- 个人设置
+
+### 文件模块 (File)
+- 文件上传
+- 文件预览
+- 文件下载
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "vue-chat-kit",
+  "version": "0.1.1",
+  "description": "一个功能完整的 Vue 3 聊天组件库，支持 WebSocket 实时通信、文件上传、好友管理等功能",
+  "type": "module",
+  "main": "dist/vue-chat-kit.umd.js",
+  "module": "dist/vue-chat-kit.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/vue-chat-kit.es.js",
+      "require": "./dist/vue-chat-kit.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "example": "vite --config vite.example.config.js",
+    "example:build": "vite build --config vite.example.config.js"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "chat",
+    "websocket",
+    "im",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.3.0",
+    "element-plus": "^2.0.0",
+    "@element-plus/icons-vue": "^2.0.0"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.0",
+    "vite": "^5.0.0",
+    "sass": "^1.69.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "directories": {
+    "doc": "docs",
+    "example": "examples"
+  }
+}

package/src/components/AvatarCrop.vue

@@ -0,0 +1,229 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="裁剪头像"
+    width="500px"
+    :close-on-click-modal="false"
+    @closed="handleClosed"
+  >
+    <div class="avatar-crop-container">
+      <div class="crop-area" ref="cropAreaRef">
+        <img
+          :src="imageSrc"
+          ref="imageRef"
+          class="crop-image"
+          @load="onImageLoad"
+          @mousedown="startDrag"
+          @touchstart="startDrag"
+        />
+        <div class="crop-overlay">
+          <div class="crop-box">
+            <div class="crop-border" ref="cropBoxRef"></div>
+          </div>
+        </div>
+        <div v-if="isDragging" class="crop-mask"></div>
+      </div>
+      <div class="zoom-controls">
+        <el-slider
+          v-model="scale"
+          :min="0.5"
+          :max="3"
+          :step="0.1"
+          :show-tooltip="false"
+        />
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  src: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm'])
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const imageSrc = ref('')
+const imageRef = ref(null)
+const cropAreaRef = ref(null)
+const cropBoxRef = ref(null)
+const scale = ref(1)
+const position = ref({ x: 0, y: 0 })
+const isDragging = ref(false)
+const startPos = ref({ x: 0, y: 0 })
+const imageSize = ref({ width: 0, height: 0 })
+
+watch(() => props.src, (val) => {
+  if (val) {
+    imageSrc.value = val
+    scale.value = 1
+    position.value = { x: 0, y: 0 }
+  }
+})
+
+const onImageLoad = () => {
+  nextTick(() => {
+    if (imageRef.value && cropAreaRef.value) {
+      const img = imageRef.value
+      const area = cropAreaRef.value
+      const minSide = Math.min(area.clientWidth, area.clientHeight)
+      
+      if (img.naturalWidth > img.naturalHeight) {
+        imageSize.value.height = minSide
+        imageSize.value.width = (img.naturalWidth / img.naturalHeight) * minSide
+      } else {
+        imageSize.value.width = minSide
+        imageSize.value.height = (img.naturalHeight / img.naturalWidth) * minSide
+      }
+      
+      position.value = {
+        x: (minSide - imageSize.value.width) / 2,
+        y: (minSide - imageSize.value.height) / 2
+      }
+    }
+  })
+}
+
+const startDrag = (e) => {
+  isDragging.value = true
+  const clientX = e.touches ? e.touches[0].clientX : e.clientX
+  const clientY = e.touches ? e.touches[0].clientY : e.clientY
+  startPos.value = { x: clientX - position.value.x, y: clientY - position.value.y }
+  
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+  document.addEventListener('touchmove', onDrag)
+  document.addEventListener('touchend', stopDrag)
+}
+
+const onDrag = (e) => {
+  if (!isDragging.value) return
+  const clientX = e.touches ? e.touches[0].clientX : e.clientX
+  const clientY = e.touches ? e.touches[0].clientY : e.clientY
+  position.value = {
+    x: clientX - startPos.value.x,
+    y: clientY - startPos.value.y
+  }
+}
+
+const stopDrag = () => {
+  isDragging.value = false
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+  document.removeEventListener('touchmove', onDrag)
+  document.removeEventListener('touchend', stopDrag)
+}
+
+const handleConfirm = () => {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+  const size = 200
+  canvas.width = size
+  canvas.height = size
+  
+  const img = imageRef.value
+  const cropBox = cropBoxRef.value
+  const area = cropAreaRef.value
+  
+  if (img && cropBox && area) {
+    const boxRect = cropBox.getBoundingClientRect()
+    const areaRect = area.getBoundingClientRect()
+    
+    const cropX = (boxRect.left - areaRect.left - position.value.x) / scale.value
+    const cropY = (boxRect.top - areaRect.top - position.value.y) / scale.value
+    const cropSize = boxRect.width / scale.value
+    
+    ctx.drawImage(
+      img,
+      cropX * (img.naturalWidth / imageSize.value.width),
+      cropY * (img.naturalHeight / imageSize.value.height),
+      cropSize * (img.naturalWidth / imageSize.value.width),
+      cropSize * (img.naturalHeight / imageSize.value.height),
+      0,
+      0,
+      size,
+      size
+    )
+    
+    canvas.toBlob((blob) => {
+      emit('confirm', { file: blob, url: canvas.toDataURL('image/png') })
+      dialogVisible.value = false
+    }, 'image/png')
+  }
+}
+
+const handleClosed = () => {
+  imageSrc.value = ''
+  scale.value = 1
+  position.value = { x: 0, y: 0 }
+}
+</script>
+
+<style scoped>
+.avatar-crop-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.crop-area {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+
+.crop-image {
+  position: absolute;
+  cursor: move;
+  user-select: none;
+  max-width: none;
+}
+
+.crop-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.crop-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 200px;
+  height: 200px;
+}
+
+.crop-border {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+  border-radius: 8px;
+}
+
+.crop-mask {
+  position: absolute;
+  inset: 0;
+  cursor: move;
+}
+
+.zoom-controls {
+  padding: 0 20px;
+}
+</style>