im-ui-mobile 0.1.0 → 0.1.2

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

@@ -0,0 +1,563 @@
+<template>
+    <view class="im-card" :class="[
+        `im-card--${size}`,
+        `im-card--shadow--${shadow}`,
+        `im-card--${border}`,
+        {
+            'im-card--hoverable': hoverable,
+            'im-card--disabled': disabled,
+            'im-card--loading': loading,
+            'im-card--full': full
+        }
+    ]" :style="cardStyle" @click="handleClick" @longpress="handleLongPress">
+        <!-- 加载状态 -->
+        <view v-if="loading" class="im-card__loading">
+            <im-icon :name="loadingIcon" spin />
+            <text v-if="loadingText" class="im-card__loading-text">{{ loadingText }}</text>
+        </view>
+
+        <!-- 角标 -->
+        <view v-if="badge || badgeContent" class="im-card__badge" :class="`im-card__badge--${badgePosition}`">
+            <im-badge v-if="badgeContent" :value="badgeContent" :type="badgeType" :max="badgeMax" :dot="badgeDot"
+                :custom-style="badgeStyle" />
+        </view>
+
+        <!-- 自定义顶部内容 -->
+        <slot v-if="$slots.header" name="header"></slot>
+
+        <!-- 默认顶部区域 -->
+        <view v-else-if="title || subtitle || $slots.title" class="im-card__header">
+            <view class="im-card__header-content">
+                <!-- 标题图标 -->
+                <im-icon v-if="titleIcon" :name="titleIcon" :size="titleIconSize" :color="titleIconColor"
+                    class="im-card__title-icon" />
+
+                <!-- 标题 -->
+                <view class="im-card__title-wrapper">
+                    <text v-if="title" class="im-card__title" :style="titleStyle">{{ title }}</text>
+                    <slot v-else name="title"></slot>
+
+                    <text v-if="subtitle" class="im-card__subtitle" :style="subtitleStyle">{{ subtitle }}</text>
+                </view>
+
+                <!-- 右侧操作区域 -->
+                <view v-if="extra || $slots.extra" class="im-card__extra">
+                    <slot v-if="$slots.extra" name="extra"></slot>
+                    <text v-else class="im-card__extra-text">{{ extra }}</text>
+                </view>
+            </view>
+
+            <!-- 描述信息 -->
+            <text v-if="description" class="im-card__description" :style="descriptionStyle">{{ description }}</text>
+        </view>
+
+        <!-- 图片区域 -->
+        <view v-if="coverImage || $slots.cover" class="im-card__cover" @click="handleCoverClick">
+            <slot v-if="$slots.cover" name="cover"></slot>
+            <image v-else class="im-card__cover-image" :src="coverImage" :mode="coverMode" :lazy-load="lazyLoad"
+                :show-menu-by-longpress="showMenuByLongpress" @load="handleImageLoad" @error="handleImageError" />
+
+            <!-- 图片标签 -->
+            <view v-if="coverTag || $slots.coverTag" class="im-card__cover-tag">
+                <slot v-if="$slots.coverTag" name="coverTag"></slot>
+                <text v-else class="im-card__cover-tag-text">{{ coverTag }}</text>
+            </view>
+        </view>
+
+        <!-- 主体内容 -->
+        <view class="im-card__body">
+            <slot></slot>
+        </view>
+
+        <!-- 底部区域 -->
+        <view v-if="$slots.footer || footer || actions" class="im-card__footer">
+            <slot v-if="$slots.footer" name="footer"></slot>
+
+            <template v-else>
+                <!-- 底部文字 -->
+                <text v-if="footer" class="im-card__footer-text">{{ footer }}</text>
+
+                <!-- 底部操作按钮 -->
+                <view v-if="actions && actions.length > 0" class="im-card__actions">
+                    <im-button v-for="(action, index) in actions" :key="index" :type="action.type" :size="actionSize"
+                        :plain="action.plain" :disabled="action.disabled" :loading="action.loading"
+                        @click="handleActionClick(action, index)">
+                        {{ action.text }}
+                    </im-button>
+                </view>
+            </template>
+        </view>
+    </view>
+</template>
+
+<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'
+
+// 类型定义
+interface CardAction {
+    text: string
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'default'
+    plain?: boolean
+    disabled?: boolean
+    loading?: boolean
+    data?: any
+}
+
+// Props 定义
+interface Props {
+    // 基础属性
+    title?: string
+    subtitle?: string
+    description?: string
+    extra?: string
+
+    // 显示控制
+    size?: 'small' | 'medium' | 'large'
+    shadow?: 'none' | 'small' | 'medium' | 'large' | 'hover'
+    border?: 'none' | 'solid' | 'dashed'
+    full?: boolean
+    hoverable?: boolean
+    disabled?: boolean
+
+    // 加载状态
+    loading?: boolean
+    loadingText?: string
+    loadingIcon?: string
+
+    // 角标
+    badge?: string | number
+    badgeContent?: string | number
+    badgeType?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+    badgeMax?: number
+    badgeDot?: boolean
+    badgePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+    badgeStyle?: CSSProperties
+
+    // 标题区域
+    titleIcon?: string
+    titleIconSize?: string | number
+    titleIconColor?: string
+    titleStyle?: CSSProperties
+    subtitleStyle?: CSSProperties
+    descriptionStyle?: CSSProperties
+
+    // 封面图片
+    coverImage?: string
+    coverMode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix'
+    coverTag?: string
+    lazyLoad?: boolean
+    showMenuByLongpress?: boolean
+
+    // 底部区域
+    footer?: string
+    actions?: CardAction[]
+    actionSize?: 'mini' | 'small' | 'medium' | 'large'
+
+    // 自定义样式
+    customStyle?: CSSProperties
+    radius?: string | number
+    padding?: string | number
+    margin?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: 'medium',
+    shadow: 'medium',
+    border: 'solid',
+    loadingIcon: 'loading',
+    loadingText: '加载中...',
+    badgeType: 'danger',
+    badgePosition: 'top-right',
+    coverMode: 'aspectFill',
+    lazyLoad: true,
+    showMenuByLongpress: false,
+    actionSize: 'small'
+})
+
+// Emits 定义
+const emit = defineEmits<{
+    click: [event: MouseEvent]
+    longpress: [event: TouchEvent]
+    'cover-click': [event: MouseEvent]
+    'action-click': [action: CardAction, index: number]
+    'image-load': [event: any]
+    'image-error': [event: any]
+}>()
+
+// 计算样式
+const cardStyle = computed(() => {
+    const style: CSSProperties = {}
+
+    if (props.radius) {
+        style.borderRadius = typeof props.radius === 'number' ? `${props.radius}px` : props.radius
+    }
+
+    if (props.padding) {
+        style.padding = typeof props.padding === 'number' ? `${props.padding}px` : props.padding
+    }
+
+    if (props.margin) {
+        style.margin = typeof props.margin === 'number' ? `${props.margin}px` : props.margin
+    }
+
+    if (props.customStyle) {
+        Object.assign(style, props.customStyle)
+    }
+
+    return style
+})
+
+// 事件处理
+const handleClick = (event: MouseEvent) => {
+    if (!props.disabled && !props.loading) {
+        emit('click', event)
+    }
+}
+
+const handleLongPress = (event: TouchEvent) => {
+    if (!props.disabled && !props.loading) {
+        emit('longpress', event)
+    }
+}
+
+const handleCoverClick = (event: MouseEvent) => {
+    if (!props.disabled && !props.loading) {
+        emit('cover-click', event)
+    }
+}
+
+const handleActionClick = (action: CardAction, index: number) => {
+    if (!props.disabled && !props.loading && !action.disabled) {
+        emit('action-click', action, index)
+    }
+}
+
+const handleImageLoad = (event: any) => {
+    emit('image-load', event)
+}
+
+const handleImageError = (event: any) => {
+    emit('image-error', event)
+}
+</script>
+
+<style scoped lang="scss">
+.im-card {
+    position: relative;
+    background-color: #ffffff;
+    border-radius: 12rpx;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    box-sizing: border-box;
+
+    // 尺寸变体
+    &--small {
+        padding: 20rpx;
+
+        .im-card__header,
+        .im-card__body,
+        .im-card__footer {
+            padding: 12rpx 0;
+        }
+    }
+
+    &--medium {
+        padding: 32rpx;
+
+        .im-card__header,
+        .im-card__body,
+        .im-card__footer {
+            padding: 16rpx 0;
+        }
+    }
+
+    &--large {
+        padding: 40rpx;
+
+        .im-card__header,
+        .im-card__body,
+        .im-card__footer {
+            padding: 20rpx 0;
+        }
+    }
+
+    // 阴影变体
+    &--shadow {
+        &--none {
+            box-shadow: none !important;
+            border: 1rpx solid #e4e7ed;
+        }
+
+        &--small {
+            box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1) !important;
+        }
+
+        &--medium {
+            box-shadow: 0 8rpx 18rpx rgba(0, 0, 0, 0.12);
+        }
+
+        &--large {
+            box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.16);
+        }
+
+        &--hover {
+            &:hover {
+                box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.16);
+            }
+        }
+    }
+
+    // 边框变体
+    &--solid {
+        border: 1rpx solid #e4e7ed;
+    }
+
+    &--dashed {
+        border: 1rpx dashed #dcdfe6;
+    }
+
+    &--none {
+        border: none;
+    }
+
+    // 状态类
+    &--hoverable {
+        cursor: pointer;
+
+        &:hover {
+            transform: translateY(-4rpx);
+            box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.16);
+        }
+    }
+
+    &--disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    &--loading {
+        position: relative;
+        min-height: 200rpx;
+    }
+
+    &--full {
+        width: 100%;
+    }
+}
+
+// 加载状态
+.im-card__loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 0.9);
+    z-index: 10;
+
+    &-text {
+        font-size: 28rpx;
+        color: #909399;
+    }
+}
+
+// 角标
+.im-card__badge {
+    position: absolute;
+    z-index: 2;
+
+    &--top-right {
+        top: -8rpx;
+        right: 30rpx;
+    }
+
+    &--top-left {
+        top: -8rpx;
+        left: 30rpx;
+    }
+
+    &--bottom-right {
+        bottom: 18rpx;
+        right: 30rpx;
+    }
+
+    &--bottom-left {
+        bottom: 18rpx;
+        left: 30rpx;
+    }
+}
+
+// 头部区域
+.im-card__header {
+    margin-bottom: 16rpx;
+
+    &-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8rpx;
+    }
+}
+
+.im-card__title-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0; // 防止 flex 元素溢出
+}
+
+.im-card__title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #303133;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.im-card__subtitle {
+    font-size: 26rpx;
+    color: #909399;
+    margin-top: 4rpx;
+    line-height: 1.3;
+}
+
+.im-card__title-icon {
+    margin-right: 12rpx;
+    flex-shrink: 0;
+}
+
+.im-card__extra {
+    margin-left: 16rpx;
+    flex-shrink: 0;
+
+    &-text {
+        font-size: 26rpx;
+        color: #409eff;
+    }
+}
+
+.im-card__description {
+    font-size: 26rpx;
+    color: #606266;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// 封面区域
+.im-card__cover {
+    position: relative;
+    margin: -32rpx -32rpx 24rpx;
+    overflow: hidden;
+    border-radius: 12rpx 12rpx 0 0;
+
+    .im-card--small & {
+        margin: -20rpx -20rpx 16rpx;
+    }
+
+    .im-card--large & {
+        margin: -40rpx -40rpx 28rpx;
+    }
+}
+
+.im-card__cover-image {
+    width: 100%;
+    display: block;
+    background-color: #f5f7fa;
+}
+
+.im-card__cover-tag {
+    position: absolute;
+    top: 16rpx;
+    left: 16rpx;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: #ffffff;
+    padding: 4rpx 12rpx;
+    border-radius: 4rpx;
+    font-size: 22rpx;
+    z-index: 1;
+
+    &-text {
+        font-size: 22rpx;
+        color: #ffffff;
+    }
+}
+
+// 主体内容
+.im-card__body {
+    color: #606266;
+    line-height: 1.6;
+    font-size: 28rpx;
+}
+
+// 底部区域
+.im-card__footer {
+    margin-top: 16rpx;
+    padding-top: 16rpx;
+    border-top: 1rpx solid #f0f0f0;
+
+    &-text {
+        font-size: 26rpx;
+        color: #909399;
+    }
+}
+
+.im-card__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16rpx;
+    flex-wrap: wrap;
+}
+
+// 暗色模式适配
+@media (prefers-color-scheme: dark) {
+    .im-card {
+        background-color: #1a1a1a;
+        border-color: #333;
+    }
+
+    .im-card__title {
+        color: #ffffff;
+    }
+
+    .im-card__subtitle,
+    .im-card__description,
+    .im-card__footer-text {
+        color: #aaaaaa;
+    }
+
+    .im-card__extra-text {
+        color: #66b1ff;
+    }
+
+    .im-card__body {
+        color: #cccccc;
+    }
+
+    .im-card__footer {
+        border-top-color: #333;
+    }
+
+    .im-card__loading {
+        background-color: rgba(26, 26, 26, 0.9);
+    }
+
+    .im-card__cover-image {
+        background-color: #2a2a2a;
+    }
+}
+</style>

package/components/im-chat-item/im-chat-item.vue

@@ -3,12 +3,12 @@
 		<!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
 		<view class="mask" @tap="showChatBox()"></view>
 		<view class="left">
-			<im-avatar :url="chat.headImage" :name="chat.showName" :online="online" />
+			<im-avatar :url="chat.avatar" :title="chat.displayName" :online="online" />
 		</view>
 		<view class="chat-right">
 			<view class="chat-name">
 				<view class="chat-name-text">
-					<view>{{ chat.showName }}</view>
+					<view>{{ chat.displayName }}</view>
 				</view>
 				<view class="chat-time">{{ $datetime.toTimeText(chat.lastSendTime, true) }}</view>
 			</view>
@@ -18,7 +18,7 @@
 				<view v-if="!isTextMessage" class="chat-content-text">{{ chat.lastContent }}</view>
 				<rich-text v-else class="chat-content-text" :nodes="nodesText"></rich-text>
 				<view v-if="chat.isDnd" class="icon iconfont icon-dnd"></view>
-				<u-badge v-else-if="chat.unreadCount > 0" :max="99" :value="chat.unreadCount" />
+				<im-badge v-if="chat.unreadCount > 0" size="small" :max="99" :value="chat.unreadCount" />
 			</view>
 		</view>
 	</view>
@@ -27,6 +27,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import ImAvatar from '../im-avatar/im-avatar.vue'
+import ImBadge from '../im-badge/im-badge.vue'
 import { datetime, dom, messageType, emoji } from '../../index'
 import { MESSAGE_TYPE } from '../../index'
 
@@ -199,7 +200,7 @@ const showChatBox = () => {
 			}
 
 			.chat-content-text {
-				flex: 1;
+				flex: 0.94;
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;