im-ui-mobile 0.1.19 → 0.1.22

package/components/im-avatar/im-avatar.vue

@@ -2,15 +2,16 @@
 	<view class="avatar  none-pointer-events" @click="showUserInfo" :title="title">
 		<image v-if="url" class="avatar-image" :src="url" :style="avatarImageStyle" lazy-load="true"
 			mode="aspectFill" />
-		<view v-else class="avatar-text" :style="avatarTextStyle">
+		<view v-else-if="title" class="avatar-text" :style="avatarTextStyle">
 			{{ title?.substring(0, 1).toUpperCase() }}
 		</view>
 		<view v-if="online" class="online" title="用户当前在线" />
+		<slot />
 	</view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, useSlots } from 'vue'
+import { computed } from 'vue'
 
 interface Props {
 	id?: number;

package/components/im-icon/im-icon.vue

@@ -57,6 +57,7 @@
         customClass
     ]" :style="[
         iconStyles,
+        colorStyle,
         customStyle
     ]" @click="handleClick">
         <slot>
@@ -336,11 +337,12 @@ const iconStyles = computed(() => {
         styles.width = sizeValue.value
         styles.height = sizeValue.value
     } else if (props.type === 'custom') {
-        styles.width = sizeValue.value
-        styles.height = sizeValue.value
-        styles.display = 'flex'
-        styles.alignItems = 'center'
-        styles.justifyContent = 'center'
+        // styles.width = sizeValue.value
+        // styles.height = sizeValue.value
+        // styles.display = 'flex'
+        // styles.alignItems = 'center'
+        // styles.justifyContent = 'center'
+        styles.fontSize = fontSizeValue.value
     }
 
     if (props.disabled) {

package/components/im-upload/im-upload.vue

@@ -8,7 +8,7 @@
       { 'im-upload__area--drag-over': dragOver }
     ]" @tap="handleUploadTap" @touchmove="handleDragOver" @touchend="handleDragLeave">
       <!-- 按钮类型 -->
-      <template v-if="type === 'button'">
+      <template v-if="type === 'button' && maxCount !== fileList.length">
         <im-button :type="buttonType" :size="buttonSize" :disabled="disabled" :loading="uploading">
           <!-- <view>  -->
           <text v-if="!uploading" class="im-upload__icon">+</text>
@@ -18,7 +18,7 @@
       </template>
 
       <!-- 卡片类型 -->
-      <template v-else-if="type === 'card'">
+      <template v-else-if="type === 'card' && maxCount !== fileList.length">
         <view class="im-upload__card">
           <text class="im-upload__card-icon">+</text>
           <text class="im-upload__card-text">{{ cardText }}</text>
@@ -28,14 +28,16 @@
 
       <!-- 头像类型 -->
       <template v-else-if="type === 'avatar'">
-        <view class="im-upload__avatar">
+        <view class="im-upload__avatar" :style="{ width: avatarSize + 'rpx' }">
           <im-avatar :url="fileList[0]?.url" :size="avatarSize" :radius="avatarRadius">
             <template v-if="!fileList[0]?.url">
-              <im-icon name="plus" size="40" color="#8c939d" />
+              <im-icon name="user" :size="avatarSize" color="#8c939d" />
             </template>
           </im-avatar>
-          <text class="im-upload__avatar-text">{{ avatarText }}</text>
+          <text v-if="avatarText" class="im-upload__avatar-text">{{ avatarText }}</text>
         </view>
+        <im-icon v-if="showAvatarCamera && !avatarText" name="camera" :color="avatarCameraColor" size="36"
+          style="position: absolute; top: calc(-1 * var(0px, 0px));right: calc(-1 * var(0px, 0px));transform: translate(200%, -100%);" />
       </template>
 
       <!-- 拖拽区域类型 -->
@@ -51,9 +53,9 @@
     </view>
 
     <!-- 文件列表 -->
-    <view v-if="showList && fileList.length > 0" class="im-upload__list">
-      <view v-for="(file, index) in fileList" :key="file.uid" class="im-upload__item"
-        :class="`im-upload__item--${listType}`">
+    <view class="im-upload__list">
+      <view v-if="innerShowList && fileList.length > 0" v-for="(file, index) in fileList" :key="file.uid"
+        class="im-upload__item" :class="`im-upload__item--${listType}`">
         <!-- 图片列表 -->
         <template v-if="listType === 'picture'">
           <view class="im-upload__item-preview">
@@ -121,6 +123,11 @@
           </view>
         </template>
       </view>
+
+      <!-- 上传区域（默认类型） -->
+      <view v-if="!type && maxCount !== fileList.length" class="im-upload__default" @tap="handleUploadTap">
+        <im-icon customClass="im-upload__default-icon" :size="100" color="#dcdfe6" type="custom" name="+" />
+      </view>
     </view>
 
     <!-- 上传提示 -->
@@ -189,6 +196,8 @@ interface Props {
   avatarText?: string
   avatarSize?: number | string
   avatarRadius?: string
+  showAvatarCamera?: boolean
+  avatarCameraColor?: string
 
   // 拖拽配置
   dragText?: string
@@ -235,21 +244,6 @@ interface Props {
   customRequest?: (file: Object, onProgress: (percent: number) => void) => Promise<any>
 }
 
-// 定义 Emits
-interface Emits {
-  (e: 'update:modelValue', files: string | UploadFile[]): void
-  (e: 'change', files: string | UploadFile[]): void
-  (e: 'select', file: Object): void
-  (e: 'success', file: UploadFile): void
-  (e: 'error', error: Error, file: UploadFile): void
-  (e: 'progress', percent: number, file: UploadFile): void
-  (e: 'remove', file: UploadFile, index: number): void
-  (e: 'preview', file: UploadFile): void
-  (e: 'exceed', files: Object[]): void
-  (e: 'uploading', file: UploadFile): void
-  (e: 'uploaded', file: UploadFile): void
-}
-
 // 定义 Props 默认值
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => [],
@@ -262,9 +256,11 @@ const props = withDefaults(defineProps<Props>(), {
 
   cardText: '点击上传',
 
-  avatarText: '上传头像',
+  avatarText: '',
   avatarSize: 120,
   avatarRadius: '50%',
+  showAvatarCamera: true,
+  avatarCameraColor: 'rgb(208 208 208)',
 
   dragText: '将文件拖到此处，或点击上传',
 
@@ -297,7 +293,7 @@ const props = withDefaults(defineProps<Props>(), {
     }
   },
 
-  showList: false,
+  showList: true,
   listType: 'picture',
   removable: true,
   previewable: true,
@@ -306,6 +302,21 @@ const props = withDefaults(defineProps<Props>(), {
   readonly: false
 })
 
+// 定义 Emits
+interface Emits {
+  (e: 'update:modelValue', files: string | UploadFile[]): void
+  (e: 'change', files: string | UploadFile[]): void
+  (e: 'select', file: Object): void
+  (e: 'success', file: UploadFile): void
+  (e: 'error', error: Error, file: UploadFile): void
+  (e: 'progress', percent: number, file: UploadFile): void
+  (e: 'remove', file: UploadFile, index: number): void
+  (e: 'preview', file: UploadFile): void
+  (e: 'exceed', files: Object[]): void
+  (e: 'uploading', file: UploadFile): void
+  (e: 'uploaded', file: UploadFile): void
+}
+
 const emit = defineEmits<Emits>()
 
 // 响应式状态
@@ -335,6 +346,13 @@ watch(() => props.modelValue, (val) => {
 }, { deep: true })
 
 // 计算属性
+const innerShowList = computed(() => {
+  if (props.type === 'avatar') {
+    return false
+  }
+  return props.showList
+})
+
 const uploading = computed(() => {
   return fileList.value.some(file => file.status === 'uploading')
 })
@@ -383,6 +401,7 @@ const handleUploadTap = async () => {
   if (props.type === 'avatar') {
     accept = 'image'
     maxSelectable = 1
+
   }
 
   if (maxSelectable <= 0) {
@@ -751,6 +770,23 @@ defineExpose({
   font-size: 28rpx;
 }
 
+.im-upload__default {
+  margin-top: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 180rpx;
+  height: 180rpx;
+  border: 4rpx dashed #dcdfe6;
+  border-radius: 20rpx;
+  background-color: #fafafa;
+  transition: all 0.3s;
+
+  &-icon {
+    color: inherit;
+  }
+}
+
 .im-upload__card {
   display: flex;
   flex-direction: column;
@@ -856,8 +892,8 @@ defineExpose({
 
 .im-upload__item-preview {
   position: relative;
-  width: 200rpx;
-  height: 200rpx;
+  width: 184rpx;
+  height: 184rpx;
   border-radius: 8rpx;
   overflow: hidden;
   border: 1rpx solid #ebeef5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.1.19",
+  "version": "0.1.22",
   "description": "A Vue3.0 + Typescript instant messaging component library for Uniapp",
   "type": "module",
   "main": "index.js",

package/types/components/upload.d.ts

@@ -39,6 +39,8 @@ declare interface UploadProps {
     avatarText?: string
     avatarSize?: number | string
     avatarRadius?: string
+    showAvatarCamera?: boolean
+    avatarCameraColor?: string
 
     // 拖拽配置
     dragText?: string

package/types/index.d.ts

@@ -13,7 +13,6 @@ import * as url from "./utils/url.d.ts";
 import { useDynamicRefs } from "./utils/useDynamicRefs.d.ts";
 import { webSocket, type WebSocket } from "./utils/websocket.d.ts";
 import type {
-    // 类型常量
     RtcMode,
     RtcInfo,
     Chat,
@@ -50,6 +49,13 @@ import validator, {
 } from './utils/validator.d.ts'
 import { EmojiType, EmojiCategoryType } from './components/emoji-picker'
 import * as base64 from "./utils/base64.d.ts"
+import {
+    Upload,
+    UploadFile,
+    UploadFileStatus,
+    UploadProps,
+    UploadMethods
+} from './components/upload'
 
 declare module 'im-ui-mobile' {
     export function install(): void
@@ -90,7 +96,13 @@ declare module 'im-ui-mobile' {
         RecorderFile,
         UserInfo,
         Response,
-        WebSocket
+        WebSocket,
+
+        Upload,
+        UploadFile,
+        UploadFileStatus,
+        UploadProps,
+        UploadMethods
     }
 
     // 导出函数/实例
@@ -124,6 +136,5 @@ declare module 'im-ui-mobile' {
         MESSAGE_STATUS,
     }
 
-    export * from './components/sku.d.ts'
-    
+
 }