im-ui-mobile 0.0.82 → 0.0.84

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

@@ -0,0 +1,462 @@
+<template>
+    <view class="im-cell" :class="[
+        `im-cell--${type}`,
+        `im-cell--${size}`,
+        {
+            'im-cell--disabled': disabled,
+            'im-cell--border': border,
+            'im-cell--hover': hover && !disabled,
+            'im-cell--clickable': clickable && !disabled
+        }
+    ]" :style="cellStyle" @click="handleClick" @longpress="handleLongPress">
+        <!-- 左侧内容 -->
+        <view v-if="hasLeftContent" class="im-cell__left">
+            <!-- 图标 -->
+            <view v-if="icon || $slots.icon" class="im-cell__icon">
+                <slot name="icon">
+                    <image v-if="icon" :src="icon" class="im-cell__icon-image"
+                        :class="[`im-cell__icon--${iconPosition}`]" mode="aspectFit" />
+                </slot>
+            </view>
+
+            <!-- 头像 -->
+            <view v-if="avatar || $slots.avatar" class="im-cell__avatar">
+                <slot name="avatar">
+                    <view class="im-cell__avatar-container">
+                        <image v-if="avatar" :src="avatar" class="im-cell__avatar-image" mode="aspectFill" />
+                        <text v-else class="im-cell__avatar-fallback">
+                            {{ avatarFallback }}
+                        </text>
+                    </view>
+                </slot>
+            </view>
+
+            <!-- 标题和描述 -->
+            <view class="im-cell__content">
+                <view class="im-cell__title">
+                    <slot name="title">
+                        <text v-if="title" class="im-cell__title-text" :class="[`im-cell__title--${titleSize}`]">
+                            {{ title }}
+                        </text>
+                    </slot>
+                </view>
+
+                <view v-if="description || $slots.description" class="im-cell__description">
+                    <slot name="description">
+                        <text v-if="description" class="im-cell__description-text"
+                            :class="[`im-cell__description--${descriptionSize}`]">
+                            {{ description }}
+                        </text>
+                    </slot>
+                </view>
+            </view>
+        </view>
+
+        <!-- 右侧内容 -->
+        <view v-if="hasRightContent" class="im-cell__right">
+            <!-- 值 -->
+            <view v-if="value || $slots.value" class="im-cell__value">
+                <slot name="value">
+                    <text v-if="value" class="im-cell__value-text">
+                        {{ value }}
+                    </text>
+                </slot>
+            </view>
+
+            <!-- 标签 -->
+            <view v-if="label || $slots.label" class="im-cell__label">
+                <slot name="label">
+                    <view v-if="label" class="im-cell__label-badge">
+                        <text class="im-cell__label-text">
+                            {{ label }}
+                        </text>
+                    </view>
+                </slot>
+            </view>
+
+            <!-- 角标 -->
+            <view v-if="badge || $slots.badge" class="im-cell__badge">
+                <slot name="badge">
+                    <view v-if="badge" class="im-cell__badge-dot">
+                        <text v-if="badge !== true" class="im-cell__badge-text">
+                            {{ formatBadge(badge) }}
+                        </text>
+                    </view>
+                </slot>
+            </view>
+
+            <!-- 箭头 -->
+            <view v-if="arrow" class="im-cell__arrow">
+                <slot name="arrow">
+                    <text class="im-cell__arrow-icon">›</text>
+                </slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed, withDefaults } from 'vue'
+
+// 定义类型
+type CellType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+type CellSize = 'small' | 'medium' | 'large'
+type TitleSize = 'small' | 'medium' | 'large'
+type IconPosition = 'left' | 'right'
+
+interface Props {
+    // 基础属性
+    type?: CellType
+    size?: CellSize
+    disabled?: boolean
+    border?: boolean
+    hover?: boolean
+    clickable?: boolean
+
+    // 左侧内容
+    icon?: string
+    iconPosition?: IconPosition
+    avatar?: string
+    title?: string
+    titleSize?: TitleSize
+    description?: string
+    descriptionSize?: TitleSize
+
+    // 右侧内容
+    value?: string
+    label?: string
+    badge?: boolean | number | string
+    arrow?: boolean
+
+    // 样式
+    padding?: string
+    margin?: string
+    bgColor?: string
+    textColor?: string
+}
+
+// 定义 Emits
+interface Emits {
+    (e: 'click', event: PointerEvent): void
+    (e: 'longpress', event: TouchEvent): void
+}
+
+// Props 和 Emits
+const props = withDefaults(defineProps<Props>(), {
+    type: 'default',
+    size: 'medium',
+    disabled: false,
+    border: true,
+    hover: true,
+    clickable: true,
+    iconPosition: 'left',
+    titleSize: 'medium',
+    descriptionSize: 'small',
+    arrow: false,
+    padding: '',
+    margin: '',
+    bgColor: '',
+    textColor: ''
+})
+
+const emit = defineEmits<Emits>()
+
+// 计算属性
+const hasLeftContent = computed(() => {
+    return props.icon || props.avatar || props.title || props.description ||
+        slots.icon || slots.avatar || slots.title || slots.description
+})
+
+const hasRightContent = computed(() => {
+    return props.value || props.label || props.badge || props.arrow ||
+        slots.value || slots.label || slots.badge || slots.arrow
+})
+
+const avatarFallback = computed(() => {
+    return props.title ? props.title.charAt(0).toUpperCase() : ''
+})
+
+const cellStyle = computed(() => {
+    const style: Record<string, string> = {}
+
+    if (props.padding) style.padding = props.padding
+    if (props.margin) style.margin = props.margin
+    if (props.bgColor) style.backgroundColor = props.bgColor
+    if (props.textColor) style.color = props.textColor
+
+    return style
+})
+
+// 获取插槽
+const slots = useSlots()
+
+// 方法
+const formatBadge = (badge: boolean | number | string): string => {
+    if (typeof badge === 'boolean') return ''
+    if (typeof badge === 'number') {
+        return badge > 99 ? '99+' : badge.toString()
+    }
+    return badge
+}
+
+const handleClick = (event: PointerEvent) => {
+    if (props.disabled) return
+    emit('click', event)
+
+    // 添加点击反馈
+    if (props.clickable) {
+        // 可以在这里添加触感反馈
+        if (uni?.vibrateShort) {
+            uni.vibrateShort()
+        }
+    }
+}
+
+const handleLongPress = (event: TouchEvent) => {
+    if (props.disabled) return
+    emit('longpress', event)
+}
+</script>
+
+<style lang="scss" scoped>
+.im-cell {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #ffffff;
+    position: relative;
+    transition: all 0.3s ease;
+
+    // 尺寸
+    &--small {
+        padding: 16rpx 24rpx;
+        min-height: 80rpx;
+    }
+
+    &--medium {
+        padding: 24rpx 32rpx;
+        min-height: 96rpx;
+    }
+
+    &--large {
+        padding: 32rpx 40rpx;
+        min-height: 120rpx;
+    }
+
+    // 边框
+    &--border {
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 32rpx;
+            right: 0;
+            height: 2rpx;
+            background-color: #f0f0f0;
+            transform: scaleY(0.5);
+        }
+
+        &:last-child::after {
+            display: none;
+        }
+    }
+
+    // 悬停效果
+    &--hover:active {
+        background-color: #f5f7fa;
+    }
+
+    // 禁用状态
+    &--disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    // 类型样式
+    &--primary &__title-text {
+        color: #409eff;
+    }
+
+    &--success &__title-text {
+        color: #67c23a;
+    }
+
+    &--warning &__title-text {
+        color: #e6a23c;
+    }
+
+    &--danger &__title-text {
+        color: #f56c6c;
+    }
+
+    &--info &__title-text {
+        color: #909399;
+    }
+
+    // 左侧内容
+    &__left {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__icon {
+        margin-right: 16rpx;
+        flex-shrink: 0;
+
+        &-image {
+            width: 40rpx;
+            height: 40rpx;
+
+            &--right {
+                margin-right: 0;
+                margin-left: 16rpx;
+            }
+        }
+    }
+
+    &__avatar {
+        margin-right: 16rpx;
+        flex-shrink: 0;
+
+        &-container {
+            width: 64rpx;
+            height: 64rpx;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #409eff, #67c23a);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+
+        &-image {
+            width: 100%;
+            height: 100%;
+        }
+
+        &-fallback {
+            color: white;
+            font-size: 28rpx;
+            font-weight: bold;
+        }
+    }
+
+    &__content {
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__title {
+        margin-bottom: 4rpx;
+
+        &-text {
+            font-size: 32rpx;
+            color: #303133;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            &--small {
+                font-size: 28rpx;
+            }
+
+            &--medium {
+                font-size: 32rpx;
+            }
+
+            &--large {
+                font-size: 36rpx;
+            }
+        }
+    }
+
+    &__description {
+        &-text {
+            font-size: 24rpx;
+            color: #909399;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            &--small {
+                font-size: 20rpx;
+            }
+
+            &--medium {
+                font-size: 24rpx;
+            }
+
+            &--large {
+                font-size: 28rpx;
+            }
+        }
+    }
+
+    // 右侧内容
+    &__right {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-left: 16rpx;
+    }
+
+    &__value {
+        margin-right: 8rpx;
+
+        &-text {
+            font-size: 28rpx;
+            color: #606266;
+            white-space: nowrap;
+        }
+    }
+
+    &__label {
+        margin-right: 8rpx;
+
+        &-badge {
+            background-color: #f0f9eb;
+            border: 1rpx solid #e1f3d8;
+            border-radius: 20rpx;
+            padding: 4rpx 12rpx;
+        }
+
+        &-text {
+            font-size: 20rpx;
+            color: #67c23a;
+        }
+    }
+
+    &__badge {
+        margin-right: 8rpx;
+
+        &-dot {
+            background-color: #fa3534;
+            border-radius: 50%;
+            // min-width: 32rpx;
+            // height: 32rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rpx 4rpx;
+        }
+
+        &-text {
+            color: white;
+            font-size: 16rpx;
+            font-weight: bold;
+        }
+    }
+
+    &__arrow {
+        margin-left: 8rpx;
+
+        &-icon {
+            font-size: 64rpx;
+            color: #c0c4cc;
+            transform: scaleY(1.5);
+        }
+    }
+}
+</style>

package/components/{im-bar-group/im-bar-group.vue → im-cell-group/im-cell-group.vue}

@@ -1,17 +1,17 @@
 <template>
-	<view class="bar-group">
+	<view class="cell-group">
 		<slot></slot>
 	</view>
 </template>
 
 <script setup lang="ts">
 defineOptions({
-  name: "bar-group"
+  name: "cell-group"
 });
 </script>
 
 <style lang="scss" scoped>
-.bar-group {
-	margin: 20rpx 0;
+.cell-group {
+	margin-bottom: 20rpx;
 }
 </style>

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

@@ -0,0 +1,223 @@
+<template>
+    <ImCell :type="type" :size="size" :disabled="disabled || switchDisabled" :border="border" :hover="hover"
+        :clickable="clickable" :icon="icon" :iconPosition="iconPosition" :avatar="avatar" :title="title"
+        :titleSize="titleSize" :description="description" :descriptionSize="descriptionSize" :value="value"
+        :label="label" :badge="badge" :padding="padding" :margin="margin" :bgColor="bgColor" :textColor="textColor"
+        @click="handleCellClick" @longpress="handleLongPress">
+        <!-- 传递所有插槽 -->
+        <template v-if="$slots.icon" #icon>
+            <slot name="icon" />
+        </template>
+
+        <template v-if="$slots.avatar" #avatar>
+            <slot name="avatar" />
+        </template>
+
+        <template v-if="$slots.title" #title>
+            <slot name="title" />
+        </template>
+
+        <template v-if="$slots.description" #description>
+            <slot name="description" />
+        </template>
+
+        <template v-if="$slots.arrow" #arrow>
+            <slot name="arrow" />
+        </template>
+
+        <template v-if="$slots.label" #label>
+            <slot name="label" />
+        </template>
+
+        <template v-if="$slots.badge" #badge>
+            <slot name="badge" />
+        </template>
+
+        <!-- 自定义右侧内容，添加 Switch -->
+        <template #value>
+            <view class="im-cell-switch__wrapper">
+                <switch v-if="showSwitch" :checked="checked" :disabled="disabled || switchDisabled" :color="switchColor"
+                    :backgroundColor="switchBackgroundColor" @change="handleSwitchChange" />
+                <text v-else class="im-cell-switch__loading">加载中...</text>
+            </view>
+        </template>
+    </ImCell>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import ImCell from '../im-cell/im-cell.vue'
+
+// 定义 Props 接口
+interface Props {
+    // 继承自 ImCell 的 Props
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+    size?: 'small' | 'medium' | 'large'
+    disabled?: boolean
+    border?: boolean
+    hover?: boolean
+    clickable?: boolean
+    icon?: string
+    iconPosition?: 'left' | 'right'
+    avatar?: string
+    title?: string
+    titleSize?: 'small' | 'medium' | 'large'
+    description?: string
+    descriptionSize?: 'small' | 'medium' | 'large'
+    value?: string
+    label?: string
+    badge?: boolean | number | string
+    padding?: string
+    margin?: string
+    bgColor?: string
+    textColor?: string
+
+    // Switch 特有 Props
+    checked?: boolean
+    switchDisabled?: boolean
+    switchColor?: string
+    switchBackgroundColor?: string
+    loading?: boolean
+    async?: boolean
+    beforeChange?: (newValue: boolean) => Promise<boolean> | boolean
+}
+
+// 定义 Emits 接口
+interface Emits {
+    (e: 'update:checked', value: boolean): void
+    (e: 'change', value: boolean): void
+    (e: 'click', event: PointerEvent): void
+    (e: 'longpress', event: TouchEvent): void
+}
+
+// Props 和 Emits
+const props = withDefaults(defineProps<Props>(), {
+    type: 'default',
+    size: 'medium',
+    disabled: false,
+    border: true,
+    hover: true,
+    clickable: true,
+    iconPosition: 'left',
+    titleSize: 'medium',
+    descriptionSize: 'small',
+    switchDisabled: false,
+    switchColor: '#409EFF',
+    switchBackgroundColor: '#DCDFE6',
+    loading: false,
+    async: false
+})
+
+const emit = defineEmits<Emits>()
+
+// 响应式数据
+const isLoading = ref(false)
+const internalValue = ref(props.checked)
+
+// 计算属性
+const showSwitch = computed(() => {
+    return !props.loading && !isLoading.value
+})
+
+// 监听外部值变化
+watch(() => props.checked, (newValue) => {
+    internalValue.value = newValue
+})
+
+// 事件处理
+const handleSwitchChange = async (event: any) => {
+    const newValue = event.detail.value
+
+    // 如果设置了异步切换
+    if (props.async || props.beforeChange) {
+        await handleAsyncChange(newValue)
+    } else {
+        updateValue(newValue)
+    }
+}
+
+const handleAsyncChange = async (newValue: boolean) => {
+    isLoading.value = true
+
+    try {
+        let canChange = true
+
+        // 执行 beforeChange 回调
+        if (props.beforeChange) {
+            const result = props.beforeChange(newValue)
+            if (result instanceof Promise) {
+                canChange = await result
+            } else {
+                canChange = result
+            }
+        }
+
+        if (canChange) {
+            updateValue(newValue)
+        } else {
+            // 恢复原值
+            internalValue.value = !newValue
+        }
+    } catch (error) {
+        console.error('切换失败:', error)
+        // 恢复原值
+        internalValue.value = !newValue
+    } finally {
+        isLoading.value = false
+    }
+}
+
+const updateValue = (value: boolean) => {
+    internalValue.value = value
+    emit('update:checked', value)
+    emit('change', value)
+}
+
+const handleCellClick = (event: PointerEvent) => {
+    if (props.disabled || props.switchDisabled) return
+    emit('click', event)
+}
+
+const handleLongPress = (event: TouchEvent) => {
+    if (props.disabled || props.switchDisabled) return
+    emit('longpress', event)
+}
+</script>
+
+<style lang="scss" scoped>
+.im-cell-switch {
+    &__wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 80rpx;
+        margin-left: 8rpx;
+    }
+
+    &__loading {
+        font-size: 24rpx;
+        color: #909399;
+    }
+}
+
+// 覆盖 Switch 样式
+:deep(switch) {
+    transform: scale(0.8);
+    transform-origin: center;
+
+    &.wx-switch-input {
+        width: 80rpx;
+        height: 40rpx;
+
+        &::before {
+            width: 76rpx;
+            height: 36rpx;
+        }
+
+        &::after {
+            width: 34rpx;
+            height: 34rpx;
+        }
+    }
+}
+</style>