im-ui-mobile 0.0.10 → 0.0.12

package/components/{chat-box → im-chat-box}/index.vue

@@ -12,7 +12,7 @@
                 <!-- 替换 uview 组件 -->
                 <view class="loading-icon">加载中...</view>
             </view>
-            <chat-message-item 
+            <im-chat-message-item 
                 v-for="(message, index) in messages" 
                 :key="message.id || index"
                 :position="message.position" 
@@ -49,12 +49,12 @@
 </template>
 
 <script>
-import ChatMessageItem from '../chat-message-item/index.vue'
+import ImChatMessageItem from '../im-chat-message-item/index.vue'
 
 export default {
-    name: 'ChatBox',
+    name: 'ImChatBox',
     components: {
-        ChatMessageItem
+        ImChatMessageItem
     },
     props: {
         title: {

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

@@ -0,0 +1,189 @@
+<template>
+    <view class="im-chat-item" :class="[`im-chat-item--${type}`]" @click="handleClick">
+        <view class="im-chat-item__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="im-chat-item__content">
+            <view class="im-chat-item__header">
+                <text class="im-chat-item__name">{{ name }}</text>
+                <text class="im-chat-item__time">{{ time }}</text>
+            </view>
+            <view class="im-chat-item__message">
+                <text class="im-chat-item__text">{{ lastMessage }}</text>
+                <view v-if="unreadCount > 0" class="badge-fallback">
+                    <text class="badge-text">{{ displayUnreadCount }}</text>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+// 设置组件名称（重要！）
+defineOptions({
+    name: 'ImChatItem'
+})
+
+interface Props {
+    type?: 'default' | 'group'
+    avatar?: string
+    name: string
+    time: string
+    lastMessage: string
+    unreadCount?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    type: 'default',
+    avatar: '',
+    unreadCount: 0
+})
+
+const emit = defineEmits<{
+    click: [event: any]
+}>()
+
+const displayName = computed(() => props.name.charAt(0))
+const displayUnreadCount = computed(() =>
+    props.unreadCount > 99 ? '99+' : props.unreadCount
+)
+
+const handleClick = (event: any) => {
+    console.log('🔍 uni 对象检查:', {
+        hasUni: typeof uni !== 'undefined',
+        hasShowToast: typeof uni?.showToast === 'function',
+        hasShowModal: typeof uni?.showModal === 'function'
+    })
+
+    try {
+        // 使用 showModal 替代 showToast 进行测试
+        uni.showModal({
+            title: '提示',
+            content: `点击了 ${props.name}`,
+            showCancel: false,
+            confirmText: '知道了'
+        })
+        console.log('✅ uni.showModal 调用成功')
+    } catch (error) {
+        console.error('❌ uni API 调用失败:', error)
+
+        // 备用方案：在开发环境显示提示
+        if (typeof document !== 'undefined') {
+            alert(`点击了 ${props.name}`)
+        }
+    }
+
+    emit('click', event)
+}
+</script>
+
+<style lang="scss" scoped>
+.im-chat-item {
+    display: flex;
+    padding: 24rpx 32rpx;
+    transition: background-color 0.3s;
+    border-bottom: 2rpx solid #f5f7fa;
+
+    &:active {
+        background-color: #f5f7fa;
+    }
+
+    &__avatar {
+        margin-right: 24rpx;
+
+        .avatar-fallback {
+            width: 80rpx;
+            height: 80rpx;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #409EFF, #67C23A);
+            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;
+            }
+        }
+    }
+
+    &__content {
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8rpx;
+    }
+
+    &__name {
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #303133;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+    }
+
+    &__time {
+        font-size: 24rpx;
+        color: #909399;
+        flex-shrink: 0;
+        margin-left: 16rpx;
+    }
+
+    &__message {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__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;
+        }
+    }
+
+    /* 群聊样式 */
+    &--group &__name::before {
+        content: "👥 ";
+    }
+}
+</style>

package/components/{chat-message-item → im-chat-message-item}/index.vue

@@ -34,7 +34,7 @@
 
 <script>
 export default {
-    name: 'ChatMessageItem',
+    name: 'ImChatMessageItem',
     props: {
         position: {
             type: String,

package/index.ts

@@ -0,0 +1,36 @@
+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'
+
+export * from './libs'
+export * from './utils'
+
+// 重要：为组件添加名称，以支持开发环境
+ImChatItem.name = 'ImChatItem'
+ImChatMessageItem.name = 'ImChatMessageItem'
+ImChatBox.name = 'ImChatBox'
+
+const components = [
+    ImChatItem,
+    ImChatMessageItem,
+    ImChatBox
+]
+
+const install = (app: App): void => {
+    components.forEach(component => {
+        app.component(component.name!, component)
+    })
+}
+
+// 导出组件
+export {
+    ImChatItem,
+    ImChatMessageItem,
+    ImChatBox,
+    install
+}
+
+export default {
+    install
+}

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "A Vue3.0 + typescript instant messaging component library for Uniapp",
-  "main": "index.js",
+  "type": "module",
+  "main": "index.ts",
   "types": "types/index.d.ts",
   "files": [
     "components",
     "libs",
     "types",
     "utils",
-    "index.js"
+    "index.ts"
   ],
   "scripts": {
     "dev": "cd examples && npm run dev:h5",

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

@@ -1,63 +1,43 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    type: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    avatar: {
-        type: StringConstructor;
-        default: string;
-    };
-    name: {
-        type: StringConstructor;
-        required: true;
-    };
-    time: {
-        type: StringConstructor;
-        required: true;
-    };
-    lastMessage: {
-        type: StringConstructor;
-        required: true;
-    };
-    unreadCount: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>, {}, {}, {
-    displayName(): string;
-    displayUnreadCount(): number | "99+";
-}, {
-    handleClick(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    type: {
-        type: StringConstructor;
-        default: string;
-        validator: (value: unknown) => boolean;
-    };
-    avatar: {
-        type: StringConstructor;
-        default: string;
-    };
-    name: {
-        type: StringConstructor;
-        required: true;
-    };
-    time: {
-        type: StringConstructor;
-        required: true;
-    };
-    lastMessage: {
-        type: StringConstructor;
-        required: true;
-    };
-    unreadCount: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>> & Readonly<{}>, {
+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-box/index.vue.d.ts

@@ -0,0 +1,129 @@
+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;
+}, {}, {
+    ImChatMessageItem: 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/im-chat-item/index.vue.d.ts

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,73 @@
+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;

package/types/index.d.ts

@@ -1,9 +1,12 @@
-declare namespace _default {
-    export { install };
-}
+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';
+export * from './libs';
+export * from './utils';
+declare const install: (app: App) => void;
+export { ImChatItem, ImChatMessageItem, ImChatBox, install };
+declare const _default: {
+    install: (app: App<any>) => void;
+};
 export default _default;
-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';
-export function install(app: any): void;
-export { ChatItem, ChatMessageItem, ChatBox };

package/components/chat-item/index.vue

@@ -1,189 +0,0 @@
-<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() {
-            // 添加更多调试信息
-            try {
-                uni.showModal({
-                    title: `点击了 ${this.name}`,
-                    icon: 'none',
-                    duration: 2000
-                })
-                console.log('✅ uni.showToast 调用成功')
-            } catch (error) {
-                console.error('❌ uni.showToast 调用失败:', error)
-            }
-            this.$emit('click')
-        },
-    }
-}
-</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/index.js

@@ -1,31 +0,0 @@
-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
-}