im-ui-mobile 0.0.7 → 0.0.9

package/package.json

@@ -1,22 +1,25 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "A Vue3.0 + typescript instant messaging component library for Uniapp",
   "main": "index.js",
   "types": "types/index.d.ts",
   "files": [
-    "components",
-    "types",
-    "utils",
-    "index.js"
+    "/src/components",
+    "/src/libs",
+    "/src/types",
+    "/src/utils",
+    "/src/index.js"
   ],
   "scripts": {
-    "dev": "vite",
-    "build": "npm run build:types",
+    "dev": "cd examples && npm run dev:h5",
+    "build": "npm run build:types", 
     "build:types": "vue-tsc -p tsconfig.build.json",
+    "clean:types": "rmdir /s /q src/types 2>nul # '删除 types 目录'",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
+    "@dcloudio/uni-app": "3.0.0-4070520250711001",
     "@dcloudio/types": "^3.4.8",
     "@dcloudio/uni-cli-shared": "3.0.0-4070520250711001",
     "@dcloudio/vite-plugin-uni": "3.0.0-4070520250711001",

package/src/components/chat-box/index.vue

@@ -0,0 +1,203 @@
+<template>
+    <view class="u-im-chat-box">
+        <view class="u-im-chat-box__header">
+            <view class="u-im-chat-box__title">{{ title }}</view>
+            <view class="u-im-chat-box__actions">
+                <slot name="header-actions"></slot>
+            </view>
+        </view>
+
+        <view class="u-im-chat-box__messages" ref="messagesRef">
+            <view class="u-im-chat-box__loading" v-if="loading">
+                <!-- 替换 uview 组件 -->
+                <view class="loading-icon">加载中...</view>
+            </view>
+            <chat-message-item 
+                v-for="(message, index) in messages" 
+                :key="message.id || index"
+                :position="message.position" 
+                :type="message.type" 
+                :content="message.content" 
+                :avatar="message.avatar"
+                :show-avatar="shouldShowAvatar(message, index)" 
+                :status="message.status" 
+                :duration="message.duration" 
+            />
+        </view>
+
+        <view class="u-im-chat-box__input">
+            <view class="u-im-chat-box__tools">
+                <slot name="input-tools"></slot>
+            </view>
+            <view class="u-im-chat-box__textarea">
+                <!-- 替换 u-textarea -->
+                <textarea 
+                    v-model="inputText" 
+                    :placeholder="placeholder" 
+                    :maxlength="maxlength" 
+                    :auto-height="true"
+                    @confirm="handleSend"
+                    class="chat-textarea"
+                />
+            </view>
+            <view class="u-im-chat-box__send">
+                <!-- 替换 u-button -->
+                <button type="primary" size="mini" @click="handleSend" class="send-button">发送</button>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import ChatMessageItem from '../chat-message-item/index.vue'
+
+export default {
+    name: 'ChatBox',
+    components: {
+        ChatMessageItem
+    },
+    props: {
+        title: {
+            type: String,
+            default: '聊天'
+        },
+        messages: {
+            type: Array,
+            default: () => []
+        },
+        placeholder: {
+            type: String,
+            default: '请输入消息...'
+        },
+        maxlength: {
+            type: Number,
+            default: 1000
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            inputText: ''
+        }
+    },
+    watch: {
+        messages: {
+            handler() {
+                this.scrollToBottom()
+            },
+            deep: true
+        }
+    },
+    mounted() {
+        this.scrollToBottom()
+    },
+    methods: {
+        handleSend() {
+            if (this.inputText.trim()) {
+                this.$emit('send', this.inputText.trim())
+                this.inputText = ''
+            }
+        },
+        shouldShowAvatar(message, index) {
+            if (index === 0) return true
+            const prevMessage = this.messages[index - 1]
+            return prevMessage.position !== message.position || 
+                   prevMessage.avatar !== message.avatar ||
+                   (message.timestamp && prevMessage.timestamp && 
+                    message.timestamp - prevMessage.timestamp > 300000) // 5分钟
+        },
+        scrollToBottom() {
+            this.$nextTick(() => {
+                if (this.$refs.messagesRef) {
+                    this.$refs.messagesRef.scrollTop = this.$refs.messagesRef.scrollHeight
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+.u-im-chat-box {
+    display: flex;
+    flex-direction: column;
+    height: 1200rpx;
+    border: 2rpx solid #e4e7ed;
+    border-radius: 16rpx;
+    overflow: hidden;
+}
+
+.u-im-chat-box__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx 32rpx;
+    background-color: #f5f7fa;
+    border-bottom: 2rpx solid #e4e7ed;
+}
+
+.u-im-chat-box__title {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #303133;
+}
+
+.u-im-chat-box__messages {
+    flex: 1;
+    padding: 32rpx;
+    overflow-y: auto;
+    background-color: #fafafa;
+}
+
+.u-im-chat-box__loading {
+    display: flex;
+    justify-content: center;
+    padding: 32rpx;
+}
+
+.loading-icon {
+    font-size: 28rpx;
+    color: #909399;
+}
+
+.u-im-chat-box__input {
+    border-top: 2rpx solid #e4e7ed;
+    background-color: #fff;
+}
+
+.u-im-chat-box__tools {
+    padding: 16rpx 32rpx;
+    border-bottom: 2rpx solid #e4e7ed;
+}
+
+.u-im-chat-box__textarea {
+    padding: 24rpx 32rpx;
+}
+
+.chat-textarea {
+    width: 100%;
+    min-height: 80rpx;
+    padding: 16rpx;
+    border: 2rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    background-color: #fff;
+}
+
+.u-im-chat-box__send {
+    padding: 0 32rpx 24rpx;
+    text-align: right;
+}
+
+.send-button {
+    background-color: #409EFF;
+    color: #fff;
+    border: none;
+    border-radius: 8rpx;
+    padding: 16rpx 32rpx;
+    font-size: 28rpx;
+}
+</style>

package/src/components/chat-item/index.vue

@@ -0,0 +1,185 @@
+<template>
+    <view class="u-im-chat-item" :class="[`u-im-chat-item--${type}`]" @click="handleClick">
+        <view class="u-im-chat-item__avatar">
+            <!-- 替换 u-avatar -->
+            <view class="avatar-fallback">
+                <image v-if="avatar" :src="avatar" class="avatar-image" mode="aspectFill" />
+                <text v-else class="avatar-text">{{ displayName }}</text>
+            </view>
+        </view>
+        <view class="u-im-chat-item__content">
+            <view class="u-im-chat-item__header">
+                <text class="u-im-chat-item__name">{{ name }}</text>
+                <text class="u-im-chat-item__time">{{ time }}</text>
+            </view>
+            <view class="u-im-chat-item__message">
+                <text class="u-im-chat-item__text">{{ lastMessage }}</text>
+                <!-- 替换 u-badge -->
+                <view v-if="unreadCount > 0" class="badge-fallback">
+                    <text class="badge-text">{{ displayUnreadCount }}</text>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'ChatItem',
+    props: {
+        type: {
+            type: String,
+            default: 'default',
+            validator: function (value) {
+                return ['default', 'group'].includes(value)
+            }
+        },
+        avatar: {
+            type: String,
+            default: ''
+        },
+        name: {
+            type: String,
+            required: true
+        },
+        time: {
+            type: String,
+            required: true
+        },
+        lastMessage: {
+            type: String,
+            required: true
+        },
+        unreadCount: {
+            type: Number,
+            default: 0
+        }
+    },
+    computed: {
+        displayName() {
+            return this.name ? this.name.charAt(0) : ''
+        },
+        displayUnreadCount() {
+            return this.unreadCount > 99 ? '99+' : this.unreadCount
+        }
+    },
+    methods: {
+        handleClick() {
+            this.showToast('恭喜发财')
+            this.$emit('click')
+        },
+        showToast(message) {
+            uni.showToast({
+                title: message,
+                icon: 'none'
+            })
+        },
+    }
+}
+</script>
+
+<style scoped>
+.u-im-chat-item {
+    display: flex;
+    padding: 24rpx 32rpx;
+    transition: background-color 0.3s;
+    border-bottom: 2rpx solid #f5f7fa;
+}
+
+.u-im-chat-item:active {
+    background-color: #f5f7fa;
+}
+
+.u-im-chat-item__avatar {
+    margin-right: 24rpx;
+}
+
+.avatar-fallback {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    background-color: #409EFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.avatar-image {
+    width: 100%;
+    height: 100%;
+}
+
+.avatar-text {
+    color: white;
+    font-size: 32rpx;
+    font-weight: bold;
+}
+
+.u-im-chat-item__content {
+    flex: 1;
+    min-width: 0;
+}
+
+.u-im-chat-item__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8rpx;
+}
+
+.u-im-chat-item__name {
+    font-size: 32rpx;
+    font-weight: 500;
+    color: #303133;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+}
+
+.u-im-chat-item__time {
+    font-size: 24rpx;
+    color: #909399;
+    flex-shrink: 0;
+    margin-left: 16rpx;
+}
+
+.u-im-chat-item__message {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.u-im-chat-item__text {
+    font-size: 28rpx;
+    color: #606266;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+}
+
+.badge-fallback {
+    background-color: #FA3534;
+    border-radius: 40rpx;
+    min-width: 36rpx;
+    height: 36rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 16rpx;
+}
+
+.badge-text {
+    color: white;
+    font-size: 20rpx;
+    font-weight: bold;
+    padding: 0 8rpx;
+}
+
+/* 群聊样式 */
+.u-im-chat-item--group .u-im-chat-item__name::before {
+    content: "👥 ";
+}
+</style>

package/src/components/chat-message-item/index.vue

@@ -0,0 +1,205 @@
+<template>
+    <view class="u-im-message-item" :class="[`u-im-message-item--${position}`]">
+        <view class="u-im-message-item__avatar" v-if="showAvatar">
+            <!-- 替换 u-avatar -->
+            <view class="avatar-fallback">
+                <image v-if="avatar" :src="avatar" class="avatar-image" mode="aspectFill" />
+                <text v-else class="avatar-text">U</text>
+            </view>
+        </view>
+        <view class="u-im-message-item__content">
+            <view class="u-im-message-item__bubble" :class="[`u-im-message-item__bubble--${type}`]">
+                <text v-if="type === 'text'" class="u-im-message-item__text">
+                    {{ content }}
+                </text>
+                <view v-else-if="type === 'image'" class="u-im-message-item__image">
+                    <!-- 替换 u-image -->
+                    <image :src="content" class="image-fallback" mode="aspectFill" />
+                </view>
+                <view v-else-if="type === 'voice'" class="u-im-message-item__voice">
+                    <!-- 替换 u-icon -->
+                    <text class="voice-icon">▶</text>
+                    <text class="u-im-message-item__duration">{{ duration }}''</text>
+                </view>
+            </view>
+            <view class="u-im-message-item__status" v-if="position === 'right'">
+                <!-- 替换 u-icon -->
+                <text v-if="status === 'sending'" class="status-icon sending">⏳</text>
+                <text v-else-if="status === 'success'" class="status-icon success">✓</text>
+                <text v-else-if="status === 'failed'" class="status-icon failed">✗</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'ChatMessageItem',
+    props: {
+        position: {
+            type: String,
+            default: 'left',
+            validator: function (value) {
+                return ['left', 'right'].includes(value)
+            }
+        },
+        type: {
+            type: String,
+            default: 'text',
+            validator: function (value) {
+                return ['text', 'image', 'voice', 'file'].includes(value)
+            }
+        },
+        content: {
+            type: String,
+            required: true
+        },
+        avatar: {
+            type: String,
+            default: ''
+        },
+        showAvatar: {
+            type: Boolean,
+            default: true
+        },
+        status: {
+            type: String,
+            default: 'success',
+            validator: function (value) {
+                return ['sending', 'success', 'failed'].includes(value)
+            }
+        },
+        duration: {
+            type: Number,
+            default: 0
+        }
+    }
+}
+</script>
+
+<style scoped>
+.u-im-message-item {
+    display: flex;
+    margin-bottom: 32rpx;
+}
+
+.u-im-message-item--left {
+    justify-content: flex-start;
+}
+
+.u-im-message-item--right {
+    justify-content: flex-end;
+}
+
+.u-im-message-item--right .u-im-message-item__content {
+    flex-direction: row-reverse;
+}
+
+.u-im-message-item__avatar {
+    margin: 0 16rpx;
+    align-self: flex-end;
+}
+
+.avatar-fallback {
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: 50%;
+    background-color: #67C23A;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.avatar-image {
+    width: 100%;
+    height: 100%;
+}
+
+.avatar-text {
+    color: white;
+    font-size: 24rpx;
+}
+
+.u-im-message-item__content {
+    display: flex;
+    align-items: flex-end;
+    max-width: 70%;
+}
+
+.u-im-message-item__bubble {
+    padding: 16rpx 24rpx;
+    border-radius: 16rpx;
+    position: relative;
+    max-width: 100%;
+}
+
+.u-im-message-item__bubble--text {
+    background-color: #f0f2f5;
+    color: #303133;
+}
+
+.u-im-message-item--right .u-im-message-item__bubble--text {
+    background-color: #409eff;
+    color: #fff;
+}
+
+.u-im-message-item__image {
+    border-radius: 8rpx;
+    overflow: hidden;
+}
+
+.image-fallback {
+    width: 400rpx;
+    height: 300rpx;
+}
+
+.u-im-message-item__voice {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    padding: 16rpx 32rpx;
+    background-color: #f0f2f5;
+    border-radius: 32rpx;
+}
+
+.u-im-message-item--right .u-im-message-item__voice {
+    background-color: #409eff;
+    color: #fff;
+}
+
+.u-im-message-item__text {
+    word-break: break-word;
+    line-height: 1.4;
+}
+
+.voice-icon {
+    font-size: 32rpx;
+}
+
+.u-im-message-item__duration {
+    font-size: 24rpx;
+}
+
+.u-im-message-item__status {
+    margin: 0 8rpx;
+    display: flex;
+    align-items: center;
+}
+
+.status-icon {
+    font-size: 28rpx;
+}
+
+.status-icon.sending {
+    color: #909399;
+}
+
+.status-icon.success {
+    color: #67C23A;
+}
+
+.status-icon.failed {
+    color: #F56C6C;
+}
+</style>

package/src/index.js

@@ -0,0 +1,31 @@
+import ChatItem from './components/chat-item/index.vue'
+import ChatMessageItem from './components/chat-message-item/index.vue'
+import ChatBox from './components/chat-box/index.vue'
+
+// 重要：为组件添加名称，以支持开发环境
+ChatItem.name = 'ChatItem'
+ChatMessageItem.name = 'ChatMessageItem' 
+ChatBox.name = 'ChatBox'
+
+const components = [
+    ChatItem,
+    ChatMessageItem,
+    ChatBox
+]
+
+const install = (app) => {
+    components.forEach(component => {
+        app.component(component.name || '', component)
+    })
+}
+
+export {
+    ChatItem,
+    ChatMessageItem,
+    ChatBox,
+    install
+}
+
+export default {
+    install
+}