im-ui-mobile 0.1.0 → 0.1.2

package/components/im-popup/im-popup.vue

@@ -0,0 +1,467 @@
+<template>
+    <!-- 遮罩层 -->
+    <view v-if="showOverlay" class="im-popup__overlay" :class="[overlayClass, { 'im-popup__overlay--show': visible }]"
+        :style="overlayStyle" @tap="handleOverlayTap" @touchmove.stop.prevent="handleTouchMove" />
+
+    <!-- 弹窗内容 -->
+    <view class="im-popup" :class="[
+        `im-popup--${position}`,
+        `im-popup--${animation}`,
+        customClass,
+        { 'im-popup--hide': !visible },
+        { 'im-popup--show': !!visible },
+        { 'im-popup--safe-area': safeAreaInsetBottom }
+    ]" :style="popupStyle" @tap.stop>
+        <!-- 关闭按钮 -->
+        <view v-if="showClose" class="im-popup__close" :class="`im-popup__close--${closePosition}`" @tap="handleClose">
+            <slot name="close-icon">
+                <text class="im-popup__close-icon">×</text>
+            </slot>
+        </view>
+
+        <!-- 弹窗内容 -->
+        <view class="im-popup__content">
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { validator } from '../../index'
+
+// 定义 Props
+interface Props {
+    // 显示控制
+    show?: boolean
+    modelValue?: boolean
+
+    // 位置和动画
+    position?: 'center' | 'top' | 'bottom' | 'left' | 'right'
+    animation?: 'fade' | 'slide' | 'zoom' | 'none'
+    duration?: number
+
+    // 遮罩层
+    showOverlay?: boolean
+    overlayColor?: string
+    overlayOpacity?: number
+    closeOnClickOverlay?: boolean
+    overlayClass?: string
+
+    // 样式
+    width?: string
+    height?: string
+    backgroundColor?: string
+    borderRadius?: number | string
+    zIndex?: number
+
+    // 行为
+    lockScroll?: boolean
+    showClose?: boolean
+    closePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+    safeAreaInsetBottom?: boolean
+
+    // 自定义类名
+    customClass?: string
+}
+
+// 定义 Emits
+interface Emits {
+    (e: 'update:show', value: boolean): void
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'open'): void
+    (e: 'opened'): void
+    (e: 'close'): void
+    (e: 'closed'): void
+    (e: 'click-overlay'): void
+    (e: 'before-enter'): void
+    (e: 'after-enter'): void
+    (e: 'before-leave'): void
+    (e: 'after-leave'): void
+}
+
+// 定义 Props 默认值
+const props = withDefaults(defineProps<Props>(), {
+    show: false,
+    modelValue: false,
+
+    position: 'center',
+    animation: 'fade',
+    duration: 300,
+
+    showOverlay: true,
+    overlayColor: '#000',
+    overlayOpacity: 0.5,
+    closeOnClickOverlay: true,
+    overlayClass: '',
+
+    width: '600rpx',
+    height: 'auto',
+    backgroundColor: '#fff',
+    borderRadius: '20rpx',
+    zIndex: 1000,
+
+    lockScroll: true,
+    showClose: false,
+    closePosition: 'top-right',
+    safeAreaInsetBottom: true,
+
+    customClass: ''
+})
+
+const emit = defineEmits<Emits>()
+
+// 内部状态
+const internalShow = ref(false)
+
+// 使用外部传入的 show 状态
+const visible = computed(() => props.show || props.modelValue || internalShow.value)
+
+// 动画状态
+const animating = ref(false)
+
+// 计算样式
+const overlayStyle = computed(() => {
+    return {
+        backgroundColor: props.overlayColor,
+        opacity: visible.value ? props.overlayOpacity : 0,
+        transitionDuration: `${props.duration}ms`,
+        zIndex: props.zIndex
+    }
+})
+
+const popupStyle = computed(() => {
+    let borderRadius = props.borderRadius
+
+    if (validator.isNumber(borderRadius)) {
+        borderRadius = `${borderRadius}rpx`
+    }
+
+    const style: any = {
+        transitionDuration: `${props.duration}ms`,
+        zIndex: (props.zIndex || 1000) + 1,
+        backgroundColor: props.backgroundColor,
+        borderRadius: borderRadius,
+        borderTopLeftRadius: borderRadius,
+        borderTopRightRadius: borderRadius,
+        borderBottomLeftRadius: borderRadius,
+        borderBottomRightRadius: borderRadius
+    }
+
+    // 根据位置设置不同的尺寸
+    if (props.position === 'center') {
+        style.width = props.width
+        style.height = props.height
+    } else if (props.position === 'top' || props.position === 'bottom') {
+        style.width = '100%'
+        style.height = props.height
+    } else {
+        style.width = props.width
+        style.height = '100%'
+    }
+
+
+    // 圆角
+    switch (props.position) {
+        case 'top':
+            style.borderTopLeftRadius = '0'
+            style.borderTopRightRadius = '0'
+            break
+        case 'right':
+            style.borderTopRightRadius = '0'
+            style.borderBottomRightRadius = '0'
+            break
+        case 'bottom':
+            style.borderBottomLeftRadius = '0'
+            style.borderBottomRightRadius = '0'
+            break
+        case 'left':
+            style.borderTopLeftRadius = '0'
+            style.borderBottomLeftRadius = '0'
+            break
+    }
+
+    return style
+})
+
+// 处理方法
+const handleOverlayTap = () => {
+    emit('click-overlay')
+    if (props.closeOnClickOverlay) {
+        closePopup()
+    }
+}
+
+const handleClose = () => {
+    closePopup()
+}
+
+const handleTouchMove = (e: Event) => {
+    e.preventDefault()
+}
+
+// 打开弹窗
+const openPopup = () => {
+    if (animating.value) return
+
+    emit('open')
+    emit('before-enter')
+
+    if (props.lockScroll) {
+        lockScroll()
+    }
+
+    setTimeout(() => {
+        emit('after-enter')
+        emit('opened')
+    }, 50)
+}
+
+// 关闭弹窗
+const closePopup = () => {
+    if (animating.value) return
+
+    emit('close')
+    emit('before-leave')
+    animating.value = true
+
+    internalShow.value = false
+    // 直接更新外部状态
+    emit('update:show', false)
+    emit('update:modelValue', false)
+
+    setTimeout(() => {
+        emit('after-leave')
+        emit('closed')
+        animating.value = false
+
+        if (props.lockScroll) {
+            unlockScroll()
+        }
+    }, props.duration)
+}
+
+// 滚动锁定
+const lockScroll = () => {
+    if (typeof document !== 'undefined') {
+        const body = document.body || document.documentElement
+        body.style.overflow = 'hidden'
+    }
+}
+
+const unlockScroll = () => {
+    if (typeof document !== 'undefined') {
+        const body = document.body || document.documentElement
+        body.style.overflow = ''
+    }
+}
+
+// 监听 Props 变化
+watch(visible, (val, oldVal) => {
+    if (val && !oldVal) {
+        // 从 false 变为 true，打开弹窗
+        openPopup()
+    } else if (!val && oldVal) {
+        // 从 true 变为 false，关闭弹窗
+        animating.value = true
+        emit('close')
+        emit('before-leave')
+
+        setTimeout(() => {
+            emit('after-leave')
+            emit('closed')
+            animating.value = false
+
+            if (props.lockScroll) {
+                unlockScroll()
+            }
+        }, props.duration)
+    }
+}, { immediate: true })
+
+// 生命周期
+onMounted(() => {
+    // 初始状态处理
+    if (visible.value) {
+        openPopup()
+    }
+})
+
+onUnmounted(() => {
+    unlockScroll()
+})
+
+// 暴露方法
+defineExpose({
+    open: () => {
+        internalShow.value = true
+        emit('update:show', true)
+        emit('update:modelValue', true)
+    },
+    close: closePopup,
+    toggle: () => {
+        if (visible.value) {
+            closePopup()
+        } else {
+            internalShow.value = true
+            emit('update:show', true)
+            emit('update:modelValue', true)
+        }
+    },
+    state: internalShow.value
+})
+</script>
+
+<style lang="scss" scoped>
+.im-popup {
+    position: fixed;
+    box-sizing: border-box;
+    transition-property: transform, opacity, width, height;
+    transition-timing-function: ease-out;
+    overflow: hidden;
+
+    // 位置样式
+    &--center {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(0.8);
+        opacity: 0;
+    }
+
+    &--top {
+        top: 0;
+        left: 0;
+        right: 0;
+        transform: translateY(-100%);
+    }
+
+    &--bottom {
+        bottom: 0;
+        left: 0;
+        right: 0;
+        transform: translateY(100%);
+    }
+
+    &--left {
+        top: 0;
+        left: 0;
+        bottom: 0;
+        transform: translateX(-100%);
+    }
+
+    &--right {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        transform: translateX(100%);
+    }
+
+    // 显示状态
+
+    &--hide {
+        display: none;
+    }
+
+    &--show {
+        &.im-popup--center {
+            transform: translate(-50%, -50%) scale(1);
+            opacity: 1;
+        }
+
+        &.im-popup--top {
+            transform: translateY(0);
+        }
+
+        &.im-popup--bottom {
+            transform: translateY(0);
+        }
+
+        &.im-popup--left {
+            transform: translateX(0);
+        }
+
+        &.im-popup--right {
+            transform: translateX(0);
+        }
+    }
+
+    // 动画类型
+    &--fade {
+        transition-property: opacity;
+    }
+
+    &--slide {
+        transition-property: transform;
+    }
+
+    &--zoom {
+        transition-property: transform, opacity;
+    }
+
+    // 内容容器
+    &__content {
+        width: 100%;
+        height: 100%;
+    }
+
+    // 安全区域适配
+    &--safe-area {
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    // 关闭按钮
+    &__close {
+        position: absolute;
+        width: 60rpx;
+        height: 60rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+
+        &--top-right {
+            top: 20rpx;
+            right: 20rpx;
+        }
+
+        &--top-left {
+            top: 20rpx;
+            left: 20rpx;
+        }
+
+        &--bottom-right {
+            bottom: 20rpx;
+            right: 20rpx;
+        }
+
+        &--bottom-left {
+            bottom: 20rpx;
+            left: 20rpx;
+        }
+
+        &-icon {
+            font-size: 40rpx;
+            color: #999;
+            line-height: 1;
+            font-weight: 300;
+        }
+    }
+}
+
+// 遮罩层
+.im-popup__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: opacity 0.3s ease;
+    opacity: 0;
+    pointer-events: none;
+
+    &--show {
+        pointer-events: auto;
+    }
+}
+</style>

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

@@ -1,15 +1,15 @@
 <template>
-	<u-popup ref="popup" mode="bottom">
+	<im-popup ref="popup" position="bottom">
 		<view class="read-receipt">
 			<view class="uni-padding-wrap uni-common-mt">
-				<u-tabs :current="current" :list="items" :show-bar="false" @change="onClickItem"></u-tabs>
+				<im-tabs :current="current" :items="items" :show-bar="false" @change="onClickItem" />
 			</view>
 			<view class="content">
 				<view v-if="current === 0">
 					<im-virtual-list :data="readedMembers">
 						<template v-slot="{ item }">
 							<view class="member-item">
-								<im-avatar :name="item.showNickName" :online="item.online" :url="item.headImage"
+								<im-avatar :title="item.showNickName" :online="item.online" :url="item.avatar"
 									:size="90" />
 								<view class="member-name">{{ item.showNickName }}</view>
 							</view>
@@ -20,7 +20,7 @@
 					<im-virtual-list :data="unreadMembers">
 						<template v-slot="{ item }">
 							<view class="member-item">
-								<im-avatar :name="item.showNickName" :online="item.online" :url="item.headImage"
+								<im-avatar :title="item.showNickName" :online="item.online" :url="item.avatar"
 									:size="90" />
 								<view class="member-name">{{ item.showNickName }}</view>
 							</view>
@@ -29,7 +29,7 @@
 				</view>
 			</view>
 		</view>
-	</u-popup>
+	</im-popup>
 </template>
 
 <script setup lang="ts">
@@ -44,7 +44,7 @@ interface Props {
 		id: number;
 		sendId: number;
 	};
-	groupMembers: any[];
+	groupMembers?: any[];
 }
 
 interface Member {
@@ -54,7 +54,7 @@ interface Member {
 
 const props = defineProps<Props>();
 
-const items = ref([{ name: '已读' }, { name: '未读' }]);
+const items = ref([{ title: '已读' }, { title: '未读' }]);
 const current = ref(0);
 const readedMembers = ref<Member[]>([]);
 const unreadMembers = ref<Member[]>([]);
@@ -102,8 +102,8 @@ const loadReadedUser = async (userIds: number[]) => {
 		const chatInfo: Chat = {
 			type: 'GROUP',
 			targetId: props.msgInfo.groupId,
-			showName: '',
-			headImage: '',
+			displayName: '',
+			avatar: '',
 			isDnd: false,
 			lastContent: '',
 			unreadCount: 0,
@@ -119,7 +119,7 @@ const loadReadedUser = async (userIds: number[]) => {
 		const msgInfo: Message = {
 			id: props.msgInfo.id,
 			groupId: props.msgInfo.groupId,
-			readedCount: readedMembers.value.length,
+			readCount: readedMembers.value.length,
 			type: 0,
 			content: ''
 		};

package/components/im-row/im-row.vue

@@ -0,0 +1,189 @@
+<template>
+  <view 
+    class="im-row"
+    :class="[
+      `im-row--align-${align}`,
+      `im-row--justify-${justify}`,
+      { 'im-row--wrap': wrap },
+      { 'im-row--gutter': hasGutter }
+    ]"
+    :style="rowStyle"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots, provide, reactive, watchEffect } from 'vue'
+
+// 定义 Props
+interface Props {
+  // 布局配置
+  gutter?: number | string
+  align?: 'top' | 'middle' | 'bottom' | 'stretch'
+  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between'
+  wrap?: boolean
+  
+  // 样式配置
+  width?: string
+  height?: string
+  margin?: string
+  padding?: string
+  bgColor?: string
+  borderColor?: string
+  borderRadius?: string
+  shadow?: boolean
+  
+  // 间距配置
+  rowGap?: number | string
+  columnGap?: number | string
+}
+
+// 定义 Emits
+interface Emits {
+  (e: 'click', event: any): void
+}
+
+// 定义 Props 默认值
+const props = withDefaults(defineProps<Props>(), {
+  gutter: 0,
+  align: 'top',
+  justify: 'start',
+  wrap: false,
+  
+  width: 'auto',
+  height: 'auto',
+  margin: '0',
+  padding: '0',
+  bgColor: 'transparent',
+  borderColor: 'transparent',
+  borderRadius: '0',
+  shadow: false,
+  
+  rowGap: 0,
+  columnGap: 0
+})
+
+const emit = defineEmits<Emits>()
+
+// 获取插槽
+const slots = useSlots()
+
+// 计算样式
+const rowStyle = computed(() => {
+  const style: any = {
+    width: props.width,
+    height: props.height,
+    margin: props.margin,
+    padding: props.padding,
+    backgroundColor: props.bgColor,
+    borderColor: props.borderColor,
+    borderRadius: props.borderRadius
+  }
+  
+  // 设置阴影
+  if (props.shadow) {
+    style.boxShadow = '0 4rpx 12rpx rgba(0, 0, 0, 0.08)'
+  }
+  
+  // 设置间距
+  if (props.rowGap || props.columnGap) {
+    const rowGap = typeof props.rowGap === 'number' ? `${props.rowGap}rpx` : props.rowGap
+    const columnGap = typeof props.columnGap === 'number' ? `${props.columnGap}rpx` : props.columnGap
+    
+    if (props.wrap) {
+      style.gap = `${rowGap} ${columnGap}`
+    } else {
+      style.rowGap = rowGap
+      style.columnGap = columnGap
+    }
+  }
+  
+  // 设置边框
+  if (props.borderColor !== 'transparent') {
+    style.borderWidth = '2rpx'
+    style.borderStyle = 'solid'
+  }
+  
+  return style
+})
+
+// 计算是否有 gutter
+const hasGutter = computed(() => {
+  return Number(props.gutter) > 0
+})
+
+// 提供 context 给子组件
+const rowContext = reactive({
+  gutter: props.gutter
+})
+
+provide('imRowContext', rowContext)
+
+// 监听 gutter 变化
+watchEffect(() => {
+  rowContext.gutter = props.gutter
+})
+
+// 点击事件
+const handleClick = (event: any) => {
+  emit('click', event)
+}
+</script>
+
+<style lang="scss" scoped>
+.im-row {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  
+  // 垂直对齐方式
+  &--align-top {
+    align-items: flex-start;
+  }
+  
+  &--align-middle {
+    align-items: center;
+  }
+  
+  &--align-bottom {
+    align-items: flex-end;
+  }
+  
+  &--align-stretch {
+    align-items: stretch;
+  }
+  
+  // 水平对齐方式
+  &--justify-start {
+    justify-content: flex-start;
+  }
+  
+  &--justify-end {
+    justify-content: flex-end;
+  }
+  
+  &--justify-center {
+    justify-content: center;
+  }
+  
+  &--justify-space-around {
+    justify-content: space-around;
+  }
+  
+  &--justify-space-between {
+    justify-content: space-between;
+  }
+  
+  // 换行
+  &--wrap {
+    flex-wrap: wrap;
+  }
+  
+  // 间距
+  &--gutter {
+    margin-left: calc(var(--im-row-gutter, 0rpx) / -2);
+    margin-right: calc(var(--im-row-gutter, 0rpx) / -2);
+  }
+}
+</style>