im-ui-mobile 0.1.7 → 0.1.9

package/README.md

@@ -1,16 +1,39 @@
-# im-ui-mobile
+# im-ui-mobile 移动端组件库
 
-一个基于 Vue 3 + TypeScript 的即时通信 Uniapp 组件库
+<p align="center">
+  <img src="https://img.shields.io/badge/version-1.0.0-blue.svg" alt="version">
+  <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="license">
+  <img src="https://img.shields.io/badge/uni--app-3.0+-orange.svg" alt="uniapp">
+  <img src="https://img.shields.io/badge/vue-3.0+-brightgreen.svg" alt="vue">
+</p>
 
-## 安装
+<p align="center">
+  <strong>一个基于 Vue 3 + TypeScript 的即时通信 Uniapp 组件库</strong>
+</p>
+
+## ✨ 特性
+
+- 🚀 **基于 Vue 3 Composition API** - 现代化的组件开发方式
+- 📱 **uniapp 多端支持** - 一套代码，多端运行
+- 🎨 **TypeScript 支持** - 完整的类型定义，开发更友好
+- 🎯 **主题定制** - 支持自定义主题和样式
+- 📦 **按需引入** - 支持组件按需加载，减小包体积
+- 📖 **完整文档** - 详细的文档和示例
+- 🎮 **流畅动画** - 精心设计的交互动画
+
+## 📦 安装
+
+### NPM 安装
 
 ```bash
-npm install im-ui-mobile
+npm install im-ui-mobile --save
+# 或
+yarn add im-ui-mobile
 ```
 
 ## 演示
 
-微信扫码，查看演示。
+微信扫码，查看演示
 
 ![微信小程序码](https://fdm-shop-25.oss-cn-shenzhen.aliyuncs.com/fdm26010502453644377ae6e77.jpg)
 

package/components/im-button/im-button.vue

@@ -20,12 +20,6 @@
 		@chooseavatar="onChooseAvatar">
 		<!-- 加载状态 -->
 		<view v-if="loading && showLoading" class="im-button__loading">
-			<!-- <view class="im-button__loading-spinner" :style="loadingStyle">
-				<view v-for="n in loadingDotCount" :key="n" class="im-button__loading-dot" :style="{
-					animationDelay: `${(n - 1) * 0.15}s`,
-					backgroundColor: loadingColor
-				}" />
-			</view> -->
 			<text v-if="loadingText" class="im-button__loading-text">
 				{{ loadingText }}
 			</text>
@@ -63,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
+import { computed } from 'vue'
 import { validator } from '../../index'
 
 // 定义类型
@@ -109,7 +103,7 @@ interface Props {
 	color?: string
 	bgColor?: string
 	borderColor?: string
-	border: boolean
+	border?: boolean
 	textColor?: string
 	textSize?: TextSize
 	width?: string
@@ -377,7 +371,7 @@ uni-button:after {
 			left: 0;
 			right: 0;
 			bottom: 0;
-			border: 1rpx solid currentColor;//
+			border: 1rpx solid currentColor; //
 			border-radius: inherit;
 			pointer-events: none;
 			transform: scale(0.5);

package/components/im-card/im-card.vue

@@ -93,8 +93,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { CSSProperties } from 'vue'
-import ImIcon from '../im-icon/im-icon.vue'
-import ImBadge from '../im-badge/im-badge.vue'
+import ImButton from '../im-button/im-button.vue'
 
 // 类型定义
 interface CardAction {

package/components/im-cell/im-cell.vue

@@ -96,7 +96,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, withDefaults, useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 
 // 定义类型
 type CellType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'

package/components/im-dialog/im-dialog.vue

@@ -98,6 +98,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick } from 'vue'
 import type { Modal as ModalType } from 'im-ui-mobile'
+import ImModal from '../im-modal/im-modal.vue'
 
 // 定义对话框类型
 type DialogType = 'alert' | 'confirm' | 'prompt' | 'success' | 'error' | 'warning' | 'info' | 'html' | 'custom'

package/components/im-emoji-picker/im-emoji-picker.vue

@@ -179,6 +179,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue'
+import ImButton from '../im-button/im-button.vue'
 
 // 类型定义
 interface Emoji {

package/components/im-group-member-selector/im-group-member-selector.vue

@@ -40,8 +40,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import ImAvatar from '../im-avatar/im-avatar.vue'
-import ImVirtualList from '../im-virtual-list/im-virtual-list.vue'
+import ImPopup from '../im-popup/im-popup.vue'
 
 interface Props {
 	group?: any;

package/components/im-group-rtc-join/im-group-rtc-join.vue

@@ -23,6 +23,8 @@
 
 <script setup lang="ts">
 import ImAvatar from '../im-avatar/im-avatar.vue'
+import ImPopup from '../im-popup/im-popup.vue'
+import ImModal from '../im-modal/im-modal.vue'
 import { ref } from 'vue';
 import { UserInfo } from '../../libs';
 

package/components/im-link/im-link.vue

@@ -113,6 +113,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import ImBadge from '../im-badge/im-badge.vue'
 
 // 定义 Props
 interface Props {

package/components/im-loading/im-loading.vue

@@ -10,6 +10,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import ImIcon from '../im-icon/im-icon.vue'
 
 interface Props {
 	size?: number;

package/components/im-mention-picker/im-mention-picker.vue

@@ -36,9 +36,11 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { GroupMember } from '../../libs';
+import ImPopup from '../im-popup/im-popup.vue'
 import ImAvatar from '../im-avatar/im-avatar.vue'
+import ImSearch from '../im-search/im-search.vue'
 import ImVirtualList from '../im-virtual-list/im-virtual-list.vue'
-import { GroupMember } from '../../libs';
 
 interface Props {
 	ownerId?: number;

package/components/im-message-action/im-message-action.vue

@@ -63,6 +63,8 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick } from 'vue'
+import ImIcon from '../im-icon/im-icon.vue'
+import ImBadge from '../im-badge/im-badge.vue'
 
 // 类型定义
 interface MessageAction {

package/components/im-message-list/im-message-list.vue

@@ -117,7 +117,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { useDynamicRefs, datetime } from 'im-ui-mobile'
-import { MESSAGE_TYPE, MESSAGE_STATUS } from '../..'
+import type { MESSAGE_TYPE, MESSAGE_STATUS } from 'im-ui-mobile'
 import { Message, GroupMember } from '../../libs'
 
 // 使用动态引用

package/components/im-modal/im-modal.vue

@@ -1,29 +1,11 @@
 <template>
-  <im-popup
-    v-model:show="visible"
-    ref="popupRef"
-    :position="position"
-    :animation="animation"
-    :duration="duration"
-    :show-overlay="showOverlay"
-    :overlay-color="overlayColor"
-    :overlay-opacity="overlayOpacity"
-    :close-on-click-overlay="closeOnClickOverlay"
-    :lock-scroll="lockScroll"
-    :width="computedWidth"
-    :border-radius="borderRadius"
-    :background-color="backgroundColor"
-    :z-index="zIndex"
-    :show-close="showClose && showHeader"
-    :close-position="closePosition"
-    :safe-area-inset-bottom="safeAreaInsetBottom"
-    :custom-class="customClass"
-    @open="handleOpen"
-    @opened="handleOpened"
-    @close="handleClose"
-    @closed="handleClosed"
-    @click-overlay="handleClickOverlay"
-  >
+  <im-popup v-model:show="visible" ref="popupRef" :position="position" :animation="animation" :duration="duration"
+    :show-overlay="showOverlay" :overlay-color="overlayColor" :overlay-opacity="overlayOpacity"
+    :close-on-click-overlay="closeOnClickOverlay" :lock-scroll="lockScroll" :width="computedWidth"
+    :border-radius="borderRadius" :background-color="backgroundColor" :z-index="zIndex"
+    :show-close="showClose && showHeader" :close-position="closePosition" :safe-area-inset-bottom="safeAreaInsetBottom"
+    :custom-class="customClass" @open="handleOpen" @opened="handleOpened" @close="handleClose" @closed="handleClosed"
+    @click-overlay="handleClickOverlay">
     <!-- 头部 -->
     <view v-if="showHeader" class="im-modal__header">
       <slot name="header">
@@ -48,30 +30,14 @@
       <slot name="footer">
         <view class="im-modal__footer-buttons">
           <!-- 取消按钮 -->
-          <im-button
-            v-if="showCancel"
-            class="im-modal__button"
-            :type="cancelType"
-            :size="buttonSize"
-            :plain="cancelPlain"
-            :disabled="cancelDisabled"
-            :loading="cancelLoading"
-            @click="handleCancel"
-          >
+          <im-button v-if="showCancel" class="im-modal__button" :type="cancelType" :size="buttonSize"
+            :plain="cancelPlain" :disabled="cancelDisabled" :loading="cancelLoading" @click="handleCancel">
             {{ cancelText }}
           </im-button>
 
           <!-- 确认按钮 -->
-          <im-button
-            v-if="showConfirm"
-            class="im-modal__button"
-            :type="confirmType"
-            :size="buttonSize"
-            :plain="confirmPlain"
-            :disabled="confirmDisabled"
-            :loading="confirmLoading"
-            @click="handleConfirm"
-          >
+          <im-button v-if="showConfirm" class="im-modal__button" :type="confirmType" :size="buttonSize"
+            :plain="confirmPlain" :disabled="confirmDisabled" :loading="confirmLoading" @click="handleConfirm">
             {{ confirmText }}
           </im-button>
         </view>
@@ -83,25 +49,27 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import type { Popup as PopupType } from 'im-ui-mobile'
+import ImPopup from '../im-popup/im-popup.vue'
+import ImButton from '../im-button/im-button.vue'
 
 // 定义 Props
 interface Props {
   // 显示控制
   show?: boolean
   modelValue?: boolean
-  
+
   // 标题和内容
   title?: string
   subtitle?: string
   content?: string
-  
+
   // 头部配置
   showHeader?: boolean
   showSubtitle?: boolean
-  
+
   // 内容配置
   bodyStyle?: Record<string, string>
-  
+
   // 底部按钮配置
   showFooter?: boolean
   showCancel?: boolean
@@ -117,7 +85,7 @@ interface Props {
   cancelLoading?: boolean
   confirmLoading?: boolean
   buttonSize?: 'small' | 'medium' | 'large'
-  
+
   // 弹窗配置（传递给 im-popup）
   position?: 'center' | 'top' | 'bottom' | 'left' | 'right'
   animation?: 'fade' | 'slide' | 'zoom' | 'none'
@@ -137,7 +105,7 @@ interface Props {
   closePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
   safeAreaInsetBottom?: boolean
   customClass?: string
-  
+
   // 行为控制
   closeOnClickAction?: boolean
   showCloseAfterConfirm?: boolean
@@ -165,16 +133,16 @@ interface Emits {
 const props = withDefaults(defineProps<Props>(), {
   show: false,
   modelValue: false,
-  
+
   title: '提示',
   subtitle: '',
   content: '',
-  
+
   showHeader: true,
   showSubtitle: true,
-  
+
   bodyStyle: () => ({}),
-  
+
   showFooter: true,
   showCancel: true,
   showConfirm: true,
@@ -189,7 +157,7 @@ const props = withDefaults(defineProps<Props>(), {
   cancelLoading: false,
   confirmLoading: false,
   buttonSize: 'medium',
-  
+
   position: 'center',
   animation: 'zoom',
   duration: 300,
@@ -208,7 +176,7 @@ const props = withDefaults(defineProps<Props>(), {
   closePosition: 'top-right',
   safeAreaInsetBottom: true,
   customClass: '',
-  
+
   closeOnClickAction: true,
   showCloseAfterConfirm: true,
   showCloseAfterCancel: true
@@ -231,17 +199,17 @@ const visible = computed({
 // 计算宽度
 const computedWidth = computed(() => {
   let width = props.width
-  
+
   // 添加最大宽度限制
   if (props.maxWidth) {
     width = `min(${props.width}, ${props.maxWidth})`
   }
-  
+
   // 添加最小宽度限制
   if (props.minWidth) {
     width = `max(${width}, ${props.minWidth})`
   }
-  
+
   return width
 })
 
@@ -292,7 +260,7 @@ const handleCancel = () => {
 
 // 打开模态框
 const open = () => {
-    popupRef.value.open()
+  popupRef.value.open()
 }
 
 // 关闭模态框
@@ -318,12 +286,12 @@ defineExpose({
   &__header {
     padding: 40rpx 40rpx 20rpx;
     border-bottom: 2rpx solid #f5f5f5;
-    
+
     &-content {
       text-align: center;
     }
   }
-  
+
   &__title {
     display: block;
     font-size: 36rpx;
@@ -331,17 +299,17 @@ defineExpose({
     color: #333;
     line-height: 1.4;
   }
-  
+
   &__subtitle {
     margin-top: 12rpx;
-    
+
     text {
       font-size: 28rpx;
       color: #999;
       line-height: 1.4;
     }
   }
-  
+
   &__body {
     padding: 40rpx;
     font-size: 30rpx;
@@ -350,22 +318,22 @@ defineExpose({
     overflow-y: auto;
     max-height: 60vh;
   }
-  
+
   &__content {
     display: block;
     text-align: center;
   }
-  
+
   &__footer {
     padding: 20rpx 40rpx 40rpx;
-    
+
     &-buttons {
       display: flex;
       gap: 20rpx;
       justify-content: center;
     }
   }
-  
+
   &__button {
     flex: 1;
   }

package/components/im-nav-bar/im-nav-bar.vue

@@ -99,6 +99,7 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
 import type { IconType } from '../../types/components/icon'
+import ImIcon from '../im-icon/im-icon.vue'
 
 // 类型定义
 interface NavBarAction {

package/components/im-read-receipt/im-read-receipt.vue

@@ -34,9 +34,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { Chat, Message } from '../../libs';
 import ImAvatar from '../im-avatar/im-avatar.vue'
 import ImVirtualList from '../im-virtual-list/im-virtual-list.vue'
-import { Chat, Message } from '../../libs';
+import ImTabs from '../im-tabs/im-tabs.vue'
+import ImPopup from '../im-popup/im-popup.vue'
 
 interface Props {
 	msgInfo: {

package/components/im-search/im-search.vue

@@ -1,9 +1,9 @@
 <template>
   <view class="im-search" :class="[
-     isFocused?'im-search--focus': '',
-     disabled?'im-search--disabled': '', 
-     `im-search--${size}` 
-     ]">
+    isFocused ? 'im-search--focus' : '',
+    disabled ? 'im-search--disabled' : '',
+    `im-search--${size}`
+  ]">
     <!-- 搜索图标 -->
     <view class="im-search__icon" @tap="handleIconClick">
       <slot name="icon">
@@ -11,52 +11,29 @@
         <im-icon size="38" name="search" />
       </slot>
     </view>
-    
+
     <!-- 搜索输入框 -->
-    <input
-      ref="inputRef"
-      class="im-search__input"
-      :type="inputType"
-      :value="modelValue"
-      :placeholder="placeholder"
-      :placeholder-style="placeholderStyle"
-      :maxlength="maxlength"
-      :disabled="disabled"
-      :focus="autoFocus"
-      :confirm-type="confirmType"
-      :adjust-position="adjustPosition"
-      :cursor-spacing="cursorSpacing"
-      :show-confirm-bar="showConfirmBar"
-      @input="handleInput"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @confirm="handleConfirm"
-      @keyboardheightchange="handleKeyboardHeightChange"
-    />
-    
+    <input ref="inputRef" class="im-search__input" :type="inputType" :value="modelValue" :placeholder="placeholder"
+      :placeholder-style="placeholderStyle" :maxlength="maxlength" :disabled="disabled" :focus="autoFocus"
+      :confirm-type="confirmType" :adjust-position="adjustPosition" :cursor-spacing="cursorSpacing"
+      :show-confirm-bar="showConfirmBar" @input="handleInput" @focus="handleFocus" @blur="handleBlur"
+      @confirm="handleConfirm" @keyboardheightchange="handleKeyboardHeightChange" />
+
     <!-- 清除按钮 -->
-    <view 
-      v-if="showClear && modelValue && !disabled"
-      class="im-search__clear"
-      @tap="handleClear"
-    >
+    <view v-if="showClear && modelValue && !disabled" class="im-search__clear" @tap="handleClear">
       <slot name="clear-icon">
         <text class="im-search__clear-text">✕</text>
       </slot>
     </view>
-    
+
     <!-- 取消按钮 -->
-    <view 
-      v-if="showCancel"
-      class="im-search__cancel"
-      :class="{ 'im-search__cancel--show': modelValue || isFocused || alwaysShowCancel }"
-      @tap="handleCancel"
-    >
+    <view v-if="showCancel" class="im-search__cancel"
+      :class="{ 'im-search__cancel--show': modelValue || isFocused || alwaysShowCancel }" @tap="handleCancel">
       <slot name="cancel-text">
         <text class="im-search__cancel-text">{{ cancelText }}</text>
       </slot>
     </view>
-    
+
     <!-- 搜索历史 -->
     <view v-if="showHistory && historyVisible && searchHistory.length > 0" class="im-search__history">
       <view class="im-search__history-header">
@@ -66,48 +43,38 @@
         </view>
       </view>
       <view class="im-search__history-list">
-        <view 
-          v-for="(item, index) in searchHistory"
-          :key="index"
-          class="im-search__history-item"
-          @tap="handleHistoryClick(item)"
-        >
+        <view v-for="(item, index) in searchHistory" :key="index" class="im-search__history-item"
+          @tap="handleHistoryClick(item)">
           <text class="im-search__history-item-text">{{ item }}</text>
-          <text 
-            class="im-search__history-item-delete"
-            @tap.stop="deleteHistoryItem(index)"
-          >✕</text>
+          <text class="im-search__history-item-delete" @tap.stop="deleteHistoryItem(index)">✕</text>
         </view>
       </view>
     </view>
-    
+
     <!-- 搜索建议 -->
     <view v-if="showSuggestions && suggestionsVisible && suggestions.length > 0" class="im-search__suggestions">
-      <view 
-        v-for="(item, index) in suggestions"
-        :key="index"
-        class="im-search__suggestion-item"
-        @tap="handleSuggestionClick(item)"
-      >
+      <view v-for="(item, index) in suggestions" :key="index" class="im-search__suggestion-item"
+        @tap="handleSuggestionClick(item)">
         <slot name="suggestion" :item="item" :index="index">
           <text class="im-search__suggestion-text">{{ formatSuggestion(item) }}</text>
         </slot>
       </view>
     </view>
-    
+
     <!-- 搜索结果 -->
     <slot name="results" :results="searchResults"></slot>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, nextTick } from 'vue'
+import ImIcon from '../im-icon/im-icon.vue'
 
 // 定义 Props
 interface Props {
   // 值
   modelValue?: string
-  
+
   // 样式配置
   shape?: 'square' | 'round'
   size?: 'small' | 'medium' | 'large'
@@ -115,7 +82,7 @@ interface Props {
   borderColor?: string
   textColor?: string
   placeholderColor?: string
-  
+
   // 输入框配置
   placeholder?: string
   placeholderStyle?: string
@@ -127,7 +94,7 @@ interface Props {
   adjustPosition?: boolean
   cursorSpacing?: number
   showConfirmBar?: boolean
-  
+
   // 功能配置
   showClear?: boolean
   showCancel?: boolean
@@ -135,14 +102,14 @@ interface Props {
   cancelText?: string
   showHistory?: boolean
   showSuggestions?: boolean
-  
+
   // 搜索相关
   searchDelay?: number
   minLength?: number
   maxHistory?: number
   suggestions?: any[]
   suggestionFormatter?: (item: any) => string
-  
+
   // 自定义事件
   onSearch?: (value: string) => void
   onClear?: () => void
@@ -167,14 +134,14 @@ interface Emits {
 // 定义 Props 默认值
 const props = withDefaults(defineProps<Props>(), {
   modelValue: '',
-  
+
   shape: 'round',
   size: 'medium',
   bgColor: '#f5f5f5',
   borderColor: '#e0e0e0',
   textColor: '#333333',
   placeholderColor: '#999999',
-  
+
   placeholder: '请输入搜索内容',
   placeholderStyle: '',
   inputType: 'text',
@@ -185,19 +152,19 @@ const props = withDefaults(defineProps<Props>(), {
   adjustPosition: true,
   cursorSpacing: 0,
   showConfirmBar: true,
-  
+
   showClear: true,
   showCancel: true,
   alwaysShowCancel: false,
   cancelText: '取消',
   showHistory: true,
   showSuggestions: false,
-  
+
   searchDelay: 300,
   minLength: 1,
   maxHistory: 10,
   suggestions: () => [],
-  suggestionFormatter: (item:any) => typeof item === 'string' ? item : item.text || item.name || JSON.stringify(item)
+  suggestionFormatter: (item: any) => typeof item === 'string' ? item : item.text || item.name || JSON.stringify(item)
 })
 
 const emit = defineEmits<Emits>()
@@ -228,21 +195,21 @@ const initHistory = () => {
 // 保存搜索历史
 const saveHistory = (value: string) => {
   if (!value.trim()) return
-  
+
   // 移除重复项
   const index = searchHistory.value.indexOf(value)
   if (index > -1) {
     searchHistory.value.splice(index, 1)
   }
-  
+
   // 添加到开头
   searchHistory.value.unshift(value)
-  
+
   // 限制历史记录数量
   if (searchHistory.value.length > props.maxHistory) {
     searchHistory.value = searchHistory.value.slice(0, props.maxHistory)
   }
-  
+
   // 保存到本地存储
   try {
     uni.setStorageSync('im_search_history', JSON.stringify(searchHistory.value))
@@ -276,12 +243,12 @@ const handleInput = (event: any) => {
   const value = event.detail?.value || ''
   emit('update:modelValue', value)
   emit('input', value)
-  
+
   // 防抖搜索
   if (searchTimer.value) {
     clearTimeout(searchTimer.value)
   }
-  
+
   searchTimer.value = setTimeout(() => {
     if (value.trim().length >= props.minLength) {
       emit('search', value)
@@ -289,7 +256,7 @@ const handleInput = (event: any) => {
         props.onSearch(value)
       }
     }
-    
+
     // 显示/隐藏建议
     suggestionsVisible.value = value.trim().length > 0 && props.showSuggestions
     historyVisible.value = value.trim().length === 0 && props.showHistory
@@ -328,7 +295,7 @@ const handleClear = () => {
   emit('clear')
   historyVisible.value = props.showHistory
   suggestionsVisible.value = false
-  
+
   // 聚焦输入框
   nextTick(() => {
     if (inputRef.value) {
@@ -345,12 +312,12 @@ const handleCancel = () => {
   historyVisible.value = false
   suggestionsVisible.value = false
   isFocused.value = false
-  
+
   // 失去焦点
   if (inputRef.value) {
     blur()
   }
-  
+
   if (props.onCancel) {
     props.onCancel()
   }
@@ -370,7 +337,7 @@ const handleHistoryClick = (value: string) => {
   emit('history-click', value)
   saveHistory(value)
   historyVisible.value = false
-  
+
   // 触发搜索
   if (value.trim().length >= props.minLength) {
     emit('search', value)
@@ -378,7 +345,7 @@ const handleHistoryClick = (value: string) => {
       props.onSearch(value)
     }
   }
-  
+
   // 聚焦输入框
   nextTick(() => {
     if (inputRef.value) {
@@ -395,7 +362,7 @@ const handleSuggestionClick = (item: any) => {
   emit('suggestion-click', item)
   saveHistory(value)
   suggestionsVisible.value = false
-  
+
   // 触发搜索
   if (value.trim().length >= props.minLength) {
     emit('search', value)
@@ -424,7 +391,7 @@ const setResults = (results: any[]) => {
 const focus = () => {
   if (!props.disabled) {
     isFocused.value = true
-    
+
     nextTick(() => {
       // 使用 uniapp 的选择器 API
       uni.createSelectorQuery()
@@ -439,7 +406,7 @@ const focus = () => {
             })
           }
         })
-      
+
       // 直接设置焦点（需要确保组件已渲染）
       setTimeout(() => {
         if (inputRef.value) {
@@ -494,23 +461,23 @@ defineExpose({
   border-radius: 8rpx;
   transition: all 0.3s ease;
   position: relative;
-  
+
   &--focus {
     border-color: #409eff;
     background-color: #ffffff;
     box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.1);
   }
-  
+
   &--disabled {
     opacity: 0.6;
     cursor: not-allowed;
   }
-  
+
   // 圆角样式
   &--round {
     border-radius: 100rpx;
   }
-  
+
   // 尺寸样式
   &--small {
     padding: 12rpx 20rpx;
@@ -519,32 +486,37 @@ defineExpose({
       font-size: 26rpx;
       height: 40rpx;
     }
+
     .im-search__icon {
       width: 36rpx;
       height: 36rpx;
       margin-right: 12rpx;
     }
   }
-  
+
   &--medium {
     padding: 16rpx 24rpx;
+
     .im-search__input {
       font-size: 28rpx;
       height: 44rpx;
     }
+
     .im-search__icon {
       width: 40rpx;
       height: 40rpx;
       margin-right: 16rpx;
     }
   }
-  
+
   &--large {
     padding: 20rpx 28rpx;
+
     .im-search__input {
       font-size: 32rpx;
       height: 48rpx;
     }
+
     .im-search__icon {
       width: 44rpx;
       height: 44rpx;
@@ -559,7 +531,7 @@ defineExpose({
   align-items: center;
   justify-content: center;
   cursor: pointer;
-        
+
   &-text {
     font-size: 32rpx;
     color: v-bind('props.placeholderColor');
@@ -574,11 +546,11 @@ defineExpose({
   background-color: transparent;
   border: none;
   outline: none;
-  
+
   &::placeholder {
     color: v-bind('props.placeholderColor');
   }
-  
+
   &:disabled {
     cursor: not-allowed;
   }
@@ -596,12 +568,12 @@ defineExpose({
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.3s;
-  
+
   &:active {
     background-color: #c0c0c0;
     transform: scale(0.95);
   }
-  
+
   &-text {
     font-size: 20rpx;
     color: #666666;
@@ -616,19 +588,19 @@ defineExpose({
   transform: translateX(20rpx);
   transition: all 0.3s ease;
   pointer-events: none;
-  
+
   &--show {
     opacity: 1;
     transform: translateX(0);
     pointer-events: auto;
   }
-  
+
   &-text {
     font-size: 28rpx;
     color: #409eff;
     cursor: pointer;
     white-space: nowrap;
-    
+
     &:active {
       opacity: 0.8;
     }
@@ -665,11 +637,11 @@ defineExpose({
   padding: 8rpx 16rpx;
   border-radius: 6rpx;
   cursor: pointer;
-  
+
   &:active {
     background-color: #f5f5f5;
   }
-  
+
   &-text {
     font-size: 24rpx;
     color: #666666;
@@ -689,11 +661,11 @@ defineExpose({
   border-bottom: 2rpx solid #f5f5f5;
   cursor: pointer;
   transition: background-color 0.2s;
-  
+
   &:last-child {
     border-bottom: none;
   }
-  
+
   &:active {
     background-color: #f9f9f9;
   }
@@ -716,11 +688,11 @@ defineExpose({
   color: #999999;
   opacity: 0;
   transition: opacity 0.3s;
-  
+
   .im-search__history-item:hover & {
     opacity: 1;
   }
-  
+
   &:active {
     color: #ff4d4f;
   }
@@ -745,11 +717,11 @@ defineExpose({
   border-bottom: 2rpx solid #f5f5f5;
   cursor: pointer;
   transition: background-color 0.2s;
-  
+
   &:last-child {
     border-bottom: none;
   }
-  
+
   &:active {
     background-color: #f9f9f9;
   }

package/components/im-sku/im-sku.vue

@@ -147,6 +147,8 @@ import type {
     SkuEmits,
     SelectedSku
 } from '../../types/components/sku'
+import ImPopup from '../im-popup/im-popup.vue'
+import ImIcon from '../im-icon/im-icon.vue'
 
 const props = withDefaults(defineProps<SkuProps>(), {
     current: undefined,

package/components/im-stepper/im-stepper.vue

@@ -58,6 +58,7 @@
 
 <script lang="ts" setup>
 import type { StepperProps, StepperEmits } from '../../types/components/stepper'
+import ImIcon from '../im-icon/im-icon.vue'
 
 const props = withDefaults(defineProps<StepperProps>(), {
     modelValue: 0,

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

@@ -211,6 +211,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import ImButton from '../im-button/im-button.vue'
 
 // 定义文件类型
 interface UploadFile {

package/components/im-virtual-list/im-virtual-list.vue

@@ -50,6 +50,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onUnmounted, getCurrentInstance } from 'vue'
+import ImLoading from '../im-loading/im-loading.vue'
 
 // 定义类型
 export interface VirtualListItem<T = any> {

package/components/im-voice-input/im-voice-input.vue

@@ -28,6 +28,7 @@
 <script setup lang="ts">
 import { ref, computed, onUnmounted } from 'vue'
 import { RecorderApp, RecorderH5 } from '../../index'
+import ImIcon from '../im-icon/im-icon.vue'
 
 const recording = ref(false);
 const moveToCancel = ref(false);

package/package.json

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

package/types/components/button.d.ts

@@ -26,7 +26,7 @@ declare interface ButtonProps {
     color?: string
     bgColor?: string
     borderColor?: string
-    border: boolean
+    border?: boolean
     textColor?: string
     textSize?: 'small' | 'medium' | 'large'
     width?: string