im-ui-mobile 0.0.6 → 0.0.8

package/package.json

@@ -1,27 +1,31 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.0.6",
-  "description": "A Uniapp instant messaging component library based on Vue3.0+typescript",
-  "main": "index.ts",
-  "module": "dist/im-ui-mobile.es.js",
-  "types": "dist/index.d.ts",
+  "version": "0.0.8",
+  "description": "A Vue3.0 + typescript instant messaging component library for Uniapp",
+  "main": "index.js",
+  "types": "types/index.d.ts",
   "files": [
     "src/components",
+    "src/libs",
     "src/types",
     "src/utils",
-    "src/index.ts"
+    "index.js"
   ],
   "scripts": {
-    "build": "vite build",
-    "preview": "vite preview"
+    "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",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^4.0.0",
-    "typescript": "^5.0.0",
+    "typescript": "~5.4.5",
     "vite": "^4.0.0",
     "vite-plugin-dts": "^3.0.0",
     "vue-tsc": "^1.0.0"

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

@@ -1,120 +1,132 @@
-<!-- packages/chat-box/index.vue -->
 <template>
-    <div class="u-im-chat-box">
-        <div class="u-im-chat-box__header">
-            <div class="u-im-chat-box__title">{{ title }}</div>
-            <div class="u-im-chat-box__actions">
+    <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>
-            </div>
-        </div>
-
-        <div class="u-im-chat-box__messages" ref="messagesRef">
-            <div class="u-im-chat-box__loading" v-if="loading">
-                <u-loading-icon size="24" />
-            </div>
-            <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" />
-        </div>
-
-        <div class="u-im-chat-box__input">
-            <div class="u-im-chat-box__tools">
+            </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>
-            </div>
-            <div class="u-im-chat-box__textarea">
-                <u-textarea v-model="inputText" :placeholder="placeholder" :maxlength="maxlength" :auto-height="true"
-                    @confirm="handleSend" />
-            </div>
-            <div class="u-im-chat-box__send">
-                <u-button type="primary" size="small" @click="handleSend">发送</u-button>
-            </div>
-        </div>
-    </div>
+            </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 setup lang="ts">
-import { ref, nextTick, watch, onMounted } from 'vue'
+<script>
 import ChatMessageItem from '../chat-message-item/index.vue'
 
-interface Message {
-    id?: string | number
-    position: 'left' | 'right'
-    type: 'text' | 'image' | 'voice' | 'file'
-    content: string
-    avatar?: string
-    status?: 'sending' | 'success' | 'failed'
-    duration?: number
-    timestamp?: number
-}
-
-interface ChatBoxProps {
-    title?: string
-    messages?: Message[]
-    placeholder?: string
-    maxlength?: number
-    loading?: boolean
-}
-
-const props = withDefaults(defineProps<ChatBoxProps>(), {
-    title: '聊天',
-    messages: () => [],
-    placeholder: '请输入消息...',
-    maxlength: 1000,
-    loading: false
-})
-
-const emit = defineEmits<{
-    send: [message: string]
-    loadMore: []
-}>()
-
-const inputText = ref('')
-const messagesRef = ref<HTMLElement>()
-
-const handleSend = () => {
-    if (inputText.value.trim()) {
-        emit('send', inputText.value.trim())
-        inputText.value = ''
-    }
-}
-
-const shouldShowAvatar = (message: Message, index: number): boolean => {
-    if (index === 0) return true
-    const prevMessage = props.messages[index - 1]
-    if (prevMessage.position !== message.position ||
-        prevMessage.avatar !== message.avatar ||
-        (message.timestamp && prevMessage.timestamp &&
-            message.timestamp - prevMessage.timestamp > 300000)) // 5分钟
-    {
-        return true
-    }
-    return false
-}
-
-const scrollToBottom = () => {
-    nextTick(() => {
-        if (messagesRef.value) {
-            messagesRef.value.scrollTop = messagesRef.value.scrollHeight
+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
+                }
+            })
+        }
+    }
 }
-
-watch(() => props.messages, () => {
-    scrollToBottom()
-}, { deep: true })
-
-onMounted(() => {
-    scrollToBottom()
-})
 </script>
 
 <style scoped>
 .u-im-chat-box {
     display: flex;
     flex-direction: column;
-    height: 600px;
-    border: 1px solid #e4e7ed;
-    border-radius: 8px;
+    height: 1200rpx;
+    border: 2rpx solid #e4e7ed;
+    border-radius: 16rpx;
     overflow: hidden;
 }
 
@@ -122,20 +134,20 @@ onMounted(() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 16px;
+    padding: 24rpx 32rpx;
     background-color: #f5f7fa;
-    border-bottom: 1px solid #e4e7ed;
+    border-bottom: 2rpx solid #e4e7ed;
 }
 
 .u-im-chat-box__title {
-    font-size: 16px;
+    font-size: 32rpx;
     font-weight: 500;
     color: #303133;
 }
 
 .u-im-chat-box__messages {
     flex: 1;
-    padding: 16px;
+    padding: 32rpx;
     overflow-y: auto;
     background-color: #fafafa;
 }
@@ -143,25 +155,49 @@ onMounted(() => {
 .u-im-chat-box__loading {
     display: flex;
     justify-content: center;
-    padding: 16px;
+    padding: 32rpx;
+}
+
+.loading-icon {
+    font-size: 28rpx;
+    color: #909399;
 }
 
 .u-im-chat-box__input {
-    border-top: 1px solid #e4e7ed;
+    border-top: 2rpx solid #e4e7ed;
     background-color: #fff;
 }
 
 .u-im-chat-box__tools {
-    padding: 8px 16px;
-    border-bottom: 1px solid #e4e7ed;
+    padding: 16rpx 32rpx;
+    border-bottom: 2rpx solid #e4e7ed;
 }
 
 .u-im-chat-box__textarea {
-    padding: 12px 16px;
+    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 16px 12px;
+    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

@@ -1,64 +1,119 @@
-<!-- packages/chat-item/index.vue -->
 <template>
-    <div class="u-im-chat-item" :class="[`u-im-chat-item--${type}`]" @click="handleClick">
-        <div class="u-im-chat-item__avatar">
-            <u-avatar :src="avatar" size="40" />
-        </div>
-        <div class="u-im-chat-item__content">
-            <div class="u-im-chat-item__header">
-                <span class="u-im-chat-item__name">{{ name }}</span>
-                <span class="u-im-chat-item__time">{{ time }}</span>
-            </div>
-            <div class="u-im-chat-item__message">
-                <span class="u-im-chat-item__text">{{ lastMessage }}</span>
-                <u-badge v-if="unreadCount > 0" :value="unreadCount" max="99" class="u-im-chat-item__badge" />
-            </div>
-        </div>
-    </div>
+    <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 setup lang="ts">
-import { withDefaults } from 'vue'
-
-interface ChatItemProps {
-    type?: 'default' | 'group'
-    avatar?: string
-    name: string
-    time: string
-    lastMessage: string
-    unreadCount?: number
-}
-
-// const props = 
-withDefaults(defineProps<ChatItemProps>(), {
-    type: 'default',
-    avatar: '',
-    unreadCount: 0
-})
-
-const emit = defineEmits<{
-    click: [event: MouseEvent]
-}>()
-
-const handleClick = (event: MouseEvent) => {
-    emit('click', event)
+<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: 12px 16px;
-    cursor: pointer;
+    padding: 24rpx 32rpx;
     transition: background-color 0.3s;
+    border-bottom: 2rpx solid #f5f7fa;
 }
 
-.u-im-chat-item:hover {
+.u-im-chat-item:active {
     background-color: #f5f7fa;
 }
 
 .u-im-chat-item__avatar {
-    margin-right: 12px;
+    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 {
@@ -70,18 +125,24 @@ const handleClick = (event: MouseEvent) => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 4px;
+    margin-bottom: 8rpx;
 }
 
 .u-im-chat-item__name {
-    font-size: 16px;
+    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: 12px;
+    font-size: 24rpx;
     color: #909399;
+    flex-shrink: 0;
+    margin-left: 16rpx;
 }
 
 .u-im-chat-item__message {
@@ -91,7 +152,7 @@ const handleClick = (event: MouseEvent) => {
 }
 
 .u-im-chat-item__text {
-    font-size: 14px;
+    font-size: 28rpx;
     color: #606266;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -99,7 +160,26 @@ const handleClick = (event: MouseEvent) => {
     flex: 1;
 }
 
-.u-im-chat-item__badge {
-    margin-left: 8px;
+.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>