vue-chat-kit 0.3.9 → 0.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chat-kit",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "一个功能完整的 Vue 3 聊天组件库，支持 WebSocket 实时通信、文件上传、好友管理等功能。独立封装，无需额外 CSS 框架依赖。",
   "type": "module",
   "main": "dist/vue-chat-kit.umd.js",

package/src/components/AvatarCrop.vue

@@ -1,10 +1,10 @@
 <template>
-  <el-dialog
-    v-model="visible"
+  <Dialog
+    :model-value="visible"
+    @update:model-value="val => visible = val"
     title="调整头像"
     :width="dialogWidth"
     :close-on-click-modal="false"
-    :append-to-body="appendToBody"
     @closed="handleClosed"
   >
     <div class="avatar-crop-container">
@@ -44,22 +44,22 @@
           </div>
         </div>
       </div>
-      <el-empty v-else description="请上传图片" />
+      <Empty v-else description="请上传图片" />
     </div>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" :loading="loading" :disabled="!imageSrc" @click="handleConfirm">
+        <Button @click="handleCancel">取消</Button>
+        <Button type="primary" :loading="loading" :disabled="!imageSrc" @click="handleConfirm">
           确认
-        </el-button>
+        </Button>
       </div>
     </template>
-  </el-dialog>
+  </Dialog>
 </template>
 
 <script setup>
 import { ref, computed, nextTick, watch } from "vue";
-import { ElMessage } from "element-plus";
+import { Dialog, Button, Empty } from './ui/index.js';
 
 const props = defineProps({
   modelValue: Boolean,
@@ -70,11 +70,15 @@ const props = defineProps({
   outputSize: { type: Number, default: 400 },
   outputType: { type: String, default: "image/jpeg" },
   outputQuality: { type: Number, default: 0.9 },
-  appendToBody: { type: Boolean, default: true },
   aspectRatio: { type: Number, default: 1 },
   minSize: { type: Number, default: 50 },
 });
 
+// 简单的消息提示函数
+const ElMessage = {
+  error: (msg) => console.error(msg)
+};
+
 const emit = defineEmits(["update:modelValue", "confirm", "cancel", "closed"]);
 
 const visible = computed({
@@ -414,121 +418,6 @@ defineExpose({
 });
 </script>
 
-<style scoped>
-.avatar-crop-container {
-  min-height: 200px;
-}
-
-.crop-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.crop-area {
-  position: relative;
-  overflow: hidden;
-  background: #f5f7fa;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #e4e7ed;
-}
-
-.crop-box {
-  position: absolute;
-  border: 2px solid #409eff;
-  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: #409eff;
-  border: 3px solid #fff;
-  border-radius: 50%;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.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: #606266;
-  font-weight: 500;
-}
-
-.preview-box {
-  border-radius: 50%;
-  overflow: hidden;
-  border: 3px solid #e4e7ed;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.preview-canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-}
+<style scoped lang="scss">
+@use '../styles/components/avatar-crop';
 </style>