im-ui-mobile 0.1.0 → 0.1.2

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

@@ -0,0 +1,762 @@
+<template>
+  <view class="im-search" :class="[
+     isFocused?'im-search--focus': '',
+     disabled?'im-search--disabled': '', 
+     `im-search--${size}` 
+     ]">
+    <!-- 搜索图标 -->
+    <view class="im-search__icon" @tap="handleIconClick">
+      <slot name="icon">
+        <!-- <text class="im-search__icon-text">🔍</text> -->
+        <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"
+    />
+    
+    <!-- 清除按钮 -->
+    <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"
+    >
+      <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">
+        <text class="im-search__history-title">搜索历史</text>
+        <view class="im-search__history-clear" @tap="clearHistory">
+          <text class="im-search__history-clear-text">清空</text>
+        </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)"
+        >
+          <text class="im-search__history-item-text">{{ item }}</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)"
+      >
+        <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'
+
+// 定义 Props
+interface Props {
+  // 值
+  modelValue?: string
+  
+  // 样式配置
+  shape?: 'square' | 'round'
+  size?: 'small' | 'medium' | 'large'
+  bgColor?: string
+  borderColor?: string
+  textColor?: string
+  placeholderColor?: string
+  
+  // 输入框配置
+  placeholder?: string
+  placeholderStyle?: string
+  inputType?: 'text' | 'number' | 'idcard' | 'digit' | 'textarea'
+  maxlength?: number
+  disabled?: boolean
+  autoFocus?: boolean
+  confirmType?: 'send' | 'search' | 'next' | 'go' | 'done'
+  adjustPosition?: boolean
+  cursorSpacing?: number
+  showConfirmBar?: boolean
+  
+  // 功能配置
+  showClear?: boolean
+  showCancel?: boolean
+  alwaysShowCancel?: boolean
+  cancelText?: string
+  showHistory?: boolean
+  showSuggestions?: boolean
+  
+  // 搜索相关
+  searchDelay?: number
+  minLength?: number
+  maxHistory?: number
+  suggestions?: any[]
+  suggestionFormatter?: (item: any) => string
+  
+  // 自定义事件
+  onSearch?: (value: string) => void
+  onClear?: () => void
+  onCancel?: () => void
+}
+
+// 定义 Emits
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+  (e: 'input', value: string): void
+  (e: 'focus', event: any): void
+  (e: 'blur', event: any): void
+  (e: 'confirm', value: string): void
+  (e: 'clear'): void
+  (e: 'cancel'): void
+  (e: 'search', value: string): void
+  (e: 'history-click', value: string): void
+  (e: 'suggestion-click', item: any): void
+  (e: 'keyboardheightchange', height: number): void
+}
+
+// 定义 Props 默认值
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  
+  shape: 'round',
+  size: 'medium',
+  bgColor: '#f5f5f5',
+  borderColor: '#e0e0e0',
+  textColor: '#333333',
+  placeholderColor: '#999999',
+  
+  placeholder: '请输入搜索内容',
+  placeholderStyle: '',
+  inputType: 'text',
+  maxlength: 100,
+  disabled: false,
+  autoFocus: false,
+  confirmType: 'search',
+  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)
+})
+
+const emit = defineEmits<Emits>()
+
+// 响应式状态
+const inputRef = ref<any>(null)
+const isFocused = ref(false)
+const historyVisible = ref(false)
+const suggestionsVisible = ref(false)
+const searchTimer = ref<any | null>(null)
+const searchResults = ref<any[]>([])
+
+// 搜索历史
+const searchHistory = ref<string[]>([])
+
+// 初始化搜索历史
+const initHistory = () => {
+  try {
+    const history = uni.getStorageSync('im_search_history')
+    if (history) {
+      searchHistory.value = JSON.parse(history)
+    }
+  } catch (error) {
+    console.error('读取搜索历史失败:', error)
+  }
+}
+
+// 保存搜索历史
+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))
+  } catch (error) {
+    console.error('保存搜索历史失败:', error)
+  }
+}
+
+// 清空搜索历史
+const clearHistory = () => {
+  searchHistory.value = []
+  try {
+    uni.removeStorageSync('im_search_history')
+  } catch (error) {
+    console.error('清除搜索历史失败:', error)
+  }
+}
+
+// 删除单个历史记录
+const deleteHistoryItem = (index: number) => {
+  searchHistory.value.splice(index, 1)
+  try {
+    uni.setStorageSync('im_search_history', JSON.stringify(searchHistory.value))
+  } catch (error) {
+    console.error('删除搜索历史失败:', error)
+  }
+}
+
+// 处理输入
+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)
+      if (props.onSearch) {
+        props.onSearch(value)
+      }
+    }
+    
+    // 显示/隐藏建议
+    suggestionsVisible.value = value.trim().length > 0 && props.showSuggestions
+    historyVisible.value = value.trim().length === 0 && props.showHistory
+  }, props.searchDelay)
+}
+
+// 处理焦点
+const handleFocus = (event: any) => {
+  isFocused.value = true
+  historyVisible.value = props.showHistory && !props.modelValue
+  suggestionsVisible.value = props.showSuggestions && props.modelValue.length > 0
+  emit('focus', event)
+}
+
+// 处理失去焦点
+const handleBlur = (event: any) => {
+  isFocused.value = false
+  historyVisible.value = false
+  suggestionsVisible.value = false
+  emit('blur', event)
+}
+
+// 处理确认
+const handleConfirm = (event: any) => {
+  const value = event.detail?.value || props.modelValue
+  if (value.trim()) {
+    saveHistory(value.trim())
+    emit('confirm', value)
+  }
+}
+
+// 处理清除
+const handleClear = () => {
+  emit('update:modelValue', '')
+  emit('input', '')
+  emit('clear')
+  historyVisible.value = props.showHistory
+  suggestionsVisible.value = false
+  
+  // 聚焦输入框
+  nextTick(() => {
+    if (inputRef.value) {
+      focus()
+    }
+  })
+}
+
+// 处理取消
+const handleCancel = () => {
+  emit('update:modelValue', '')
+  emit('input', '')
+  emit('cancel')
+  historyVisible.value = false
+  suggestionsVisible.value = false
+  isFocused.value = false
+  
+  // 失去焦点
+  if (inputRef.value) {
+    blur()
+  }
+  
+  if (props.onCancel) {
+    props.onCancel()
+  }
+}
+
+// 处理图标点击
+const handleIconClick = () => {
+  if (inputRef.value) {
+    focus()
+  }
+}
+
+// 处理历史点击
+const handleHistoryClick = (value: string) => {
+  emit('update:modelValue', value)
+  emit('input', value)
+  emit('history-click', value)
+  saveHistory(value)
+  historyVisible.value = false
+  
+  // 触发搜索
+  if (value.trim().length >= props.minLength) {
+    emit('search', value)
+    if (props.onSearch) {
+      props.onSearch(value)
+    }
+  }
+  
+  // 聚焦输入框
+  nextTick(() => {
+    if (inputRef.value) {
+      focus()
+    }
+  })
+}
+
+// 处理建议点击
+const handleSuggestionClick = (item: any) => {
+  const value = props.suggestionFormatter(item)
+  emit('update:modelValue', value)
+  emit('input', value)
+  emit('suggestion-click', item)
+  saveHistory(value)
+  suggestionsVisible.value = false
+  
+  // 触发搜索
+  if (value.trim().length >= props.minLength) {
+    emit('search', value)
+    if (props.onSearch) {
+      props.onSearch(value)
+    }
+  }
+}
+
+// 处理键盘高度变化
+const handleKeyboardHeightChange = (event: any) => {
+  emit('keyboardheightchange', event.detail.height)
+}
+
+// 格式化建议内容
+const formatSuggestion = (item: any) => {
+  return props.suggestionFormatter(item)
+}
+
+// 设置搜索结果
+const setResults = (results: any[]) => {
+  searchResults.value = results
+}
+
+// 获取焦点
+const focus = () => {
+  if (!props.disabled) {
+    isFocused.value = true
+    
+    nextTick(() => {
+      // 使用 uniapp 的选择器 API
+      uni.createSelectorQuery()
+        .select('.im-search__input')
+        .boundingClientRect()
+        .exec((res) => {
+          if (res && res[0]) {
+            // 确保输入框在可视区域内
+            uni.pageScrollTo({
+              scrollTop: res[0].top - 100,
+              duration: 300
+            })
+          }
+        })
+      
+      // 直接设置焦点（需要确保组件已渲染）
+      setTimeout(() => {
+        if (inputRef.value) {
+          // 在 uniapp 中，input 元素有原生的 focus 方法
+          inputRef.value.focus({
+            success: () => {
+              console.log('焦点设置成功')
+            },
+            fail: (err: any) => {
+              console.error('焦点设置失败:', err)
+            }
+          })
+        }
+      }, 100)
+    })
+  }
+}
+
+// 失去焦点
+const blur = () => {
+  if (inputRef.value) {
+    inputRef.value.blur()
+  }
+}
+
+// 清空输入
+const clear = () => {
+  handleClear()
+}
+
+// 初始化
+initHistory()
+
+// 暴露方法
+defineExpose({
+  focus,
+  blur,
+  clear,
+  setResults,
+  clearHistory,
+  getHistory: () => [...searchHistory.value]
+})
+</script>
+
+<style lang="scss" scoped>
+.im-search {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 24rpx;
+  background-color: v-bind('props.bgColor');
+  border: 2rpx solid v-bind('props.borderColor');
+  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;
+
+    .im-search__input {
+      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;
+      margin-right: 20rpx;
+    }
+  }
+}
+
+.im-search__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+        
+  &-text {
+    font-size: 32rpx;
+    color: v-bind('props.placeholderColor');
+  }
+}
+
+.im-search__input {
+  flex: 1;
+  height: 44rpx;
+  font-size: 28rpx;
+  color: v-bind('props.textColor');
+  background-color: transparent;
+  border: none;
+  outline: none;
+  
+  &::placeholder {
+    color: v-bind('props.placeholderColor');
+  }
+  
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.im-search__clear {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36rpx;
+  height: 36rpx;
+  margin-left: 16rpx;
+  background-color: #e0e0e0;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:active {
+    background-color: #c0c0c0;
+    transform: scale(0.95);
+  }
+  
+  &-text {
+    font-size: 20rpx;
+    color: #666666;
+    line-height: 1;
+  }
+}
+
+.im-search__cancel {
+  flex-shrink: 0;
+  margin-left: 20rpx;
+  opacity: 0;
+  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;
+    }
+  }
+}
+
+.im-search__history {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 8rpx;
+  background-color: white;
+  border-radius: 8rpx;
+  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.12);
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.im-search__history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx 32rpx 16rpx;
+  border-bottom: 2rpx solid #f5f5f5;
+}
+
+.im-search__history-title {
+  font-size: 26rpx;
+  color: #999999;
+}
+
+.im-search__history-clear {
+  padding: 8rpx 16rpx;
+  border-radius: 6rpx;
+  cursor: pointer;
+  
+  &:active {
+    background-color: #f5f5f5;
+  }
+  
+  &-text {
+    font-size: 24rpx;
+    color: #666666;
+  }
+}
+
+.im-search__history-list {
+  max-height: 400rpx;
+  overflow-y: auto;
+}
+
+.im-search__history-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx 32rpx;
+  border-bottom: 2rpx solid #f5f5f5;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &:active {
+    background-color: #f9f9f9;
+  }
+}
+
+.im-search__history-item-text {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.im-search__history-item-delete {
+  flex-shrink: 0;
+  margin-left: 24rpx;
+  padding: 8rpx;
+  font-size: 22rpx;
+  color: #999999;
+  opacity: 0;
+  transition: opacity 0.3s;
+  
+  .im-search__history-item:hover & {
+    opacity: 1;
+  }
+  
+  &:active {
+    color: #ff4d4f;
+  }
+}
+
+.im-search__suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 8rpx;
+  background-color: white;
+  border-radius: 8rpx;
+  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.12);
+  z-index: 1000;
+  max-height: 400rpx;
+  overflow-y: auto;
+}
+
+.im-search__suggestion-item {
+  padding: 24rpx 32rpx;
+  border-bottom: 2rpx solid #f5f5f5;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &:active {
+    background-color: #f9f9f9;
+  }
+}
+
+.im-search__suggestion-text {
+  font-size: 28rpx;
+  color: #333333;
+}
+</style>