im-ui-mobile 0.0.13 → 0.0.15

package/index.ts

@@ -1,20 +1,20 @@
 import { App } from 'vue'
-import ImChatItem from './components/im-chat-item/index.vue'
-import ImChatMessageItem from './components/im-chat-message-item/index.vue'
-import ImChatBox from './components/im-chat-box/index.vue'
+import ImChat from './components/im-chat/im-chat.vue'
+// import ImChatMessageItem from './components/im-chat-message-item/im-chat-message-item.vue'
+// import ImChatBox from './components/im-chat-box/im-chat-box.vue'
 
 export * from './libs'
 export * from './utils'
 
 // 重要：为组件添加名称，以支持开发环境
-ImChatItem.name = 'ImChatItem'
-ImChatMessageItem.name = 'ImChatMessageItem'
-ImChatBox.name = 'ImChatBox'
+ImChat.name = 'ImChatItem'
+// ImChatMessageItem.name = 'ImChatMessageItem'
+// ImChatBox.name = 'ImChatBox'
 
 const components = [
-    ImChatItem,
-    ImChatMessageItem,
-    ImChatBox
+    ImChat,
+    // ImChatMessageItem,
+    // ImChatBox
 ]
 
 const install = (app: App): void => {
@@ -25,9 +25,9 @@ const install = (app: App): void => {
 
 // 导出组件
 export {
-    ImChatItem,
-    ImChatMessageItem,
-    ImChatBox,
+    ImChat as ImChatItem,
+    // ImChatMessageItem,
+    // ImChatBox,
     install
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "A Vue3.0 + typescript instant messaging component library for Uniapp",
   "type": "module",
   "main": "index.ts",
@@ -13,7 +13,7 @@
     "index.ts"
   ],
   "scripts": {
-    "dev": "cd examples && npm run dev:h5",
+    "dev": "cd examples && npm run dev:mp-weixin",
     "build": "npm run build:types",
     "build:types": "vue-tsc -p tsconfig.build.json",
     "clean:types": "rmdir /s /q src/types 2>nul # '删除 types 目录'",

package/types/components/im-chat/im-chat.vue.d.ts

@@ -0,0 +1,18 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    $emit: (event: "click", ...args: any[]) => void;
+    name: string;
+    type: string;
+    avatar: string;
+    time: string;
+    lastMessage: string;
+    unreadCount: number;
+    $props: {
+        readonly name?: string | undefined;
+        readonly type?: string | undefined;
+        readonly avatar?: string | undefined;
+        readonly time?: string | undefined;
+        readonly lastMessage?: string | undefined;
+        readonly unreadCount?: number | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/types/index.d.ts

@@ -1,11 +1,9 @@
 import { App } from 'vue';
-import ImChatItem from './components/im-chat-item/index.vue';
-import ImChatMessageItem from './components/im-chat-message-item/index.vue';
-import ImChatBox from './components/im-chat-box/index.vue';
+import ImChat from './components/im-chat/im-chat.vue';
 export * from './libs';
 export * from './utils';
 declare const install: (app: App) => void;
-export { ImChatItem, ImChatMessageItem, ImChatBox, install };
+export { ImChat as ImChatItem, install };
 declare const _default: {
     install: (app: App<any>) => void;
 };

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

@@ -1,203 +0,0 @@
-<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>
-            <im-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 ImChatMessageItem from '../im-chat-message-item/index.vue'
-
-export default {
-    name: 'ImChatBox',
-    components: {
-        ImChatMessageItem
-    },
-    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/components/im-chat-message-item/index.vue

@@ -1,205 +0,0 @@
-<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: 'ImChatMessageItem',
-    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/types/components/chat-box/index.vue.d.ts

@@ -1,129 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    messages: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    maxlength: {
-        type: NumberConstructor;
-        default: number;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {
-    inputText: string;
-}, {}, {
-    handleSend(): void;
-    shouldShowAvatar(message: any, index: any): any;
-    scrollToBottom(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    messages: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    maxlength: {
-        type: NumberConstructor;
-        default: number;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    title: string;
-    messages: unknown[];
-    placeholder: string;
-    maxlength: number;
-    loading: boolean;
-}, {}, {
-    ChatMessageItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        position: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        type: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        content: {
-            type: StringConstructor;
-            required: true;
-        };
-        avatar: {
-            type: StringConstructor;
-            default: string;
-        };
-        showAvatar: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        status: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        duration: {
-            type: NumberConstructor;
-            default: number;
-        };
-    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        position: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        type: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        content: {
-            type: StringConstructor;
-            required: true;
-        };
-        avatar: {
-            type: StringConstructor;
-            default: string;
-        };
-        showAvatar: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        status: {
-            type: StringConstructor;
-            default: string;
-            validator: (value: unknown) => boolean;
-        };
-        duration: {
-            type: NumberConstructor;
-            default: number;
-        };
-    }>> & Readonly<{}>, {
-        position: string;
-        type: string;
-        avatar: string;
-        showAvatar: boolean;
-        status: string;
-        duration: number;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/types/components/chat-item/index.vue.d.ts

@@ -1,43 +0,0 @@
-interface Props {
-    type?: 'default' | 'group';
-    avatar?: string;
-    name: string;
-    time: string;
-    lastMessage: string;
-    unreadCount?: number;
-}
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    type: string;
-    avatar: string;
-    unreadCount: number;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (event: any) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    type: string;
-    avatar: string;
-    unreadCount: number;
-}>>> & Readonly<{
-    onClick?: ((event: any) => any) | undefined;
-}>, {
-    type: "default" | "group";
-    avatar: string;
-    unreadCount: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/types/components/im-chat-message-item/index.vue.d.ts

@@ -1,73 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    position: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    content: {
-        type: StringConstructor;
-        required: true;
-    };
-    avatar: {
-        type: StringConstructor;
-        default: string;
-    };
-    showAvatar: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    status: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    duration: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    position: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    content: {
-        type: StringConstructor;
-        required: true;
-    };
-    avatar: {
-        type: StringConstructor;
-        default: string;
-    };
-    showAvatar: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    status: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    duration: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>> & Readonly<{}>, {
-    position: string;
-    type: string;
-    avatar: string;
-    showAvatar: boolean;
-    status: string;
-    duration: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;