im-ui-mobile 0.0.42 → 0.0.44

package/components/im-long-press-menu/im-long-press-menu.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="long-press-menu none-pointer-events">
+		<view @longpress.prevent.stop="onLongPress($event)" @touchmove="onTouchMove" @touchend="onTouchEnd">
+			<slot></slot>
+		</view>
+		<view v-if="isShowMenu" class="menu-mask" @touchstart="onClose()" @contextmenu.prevent=""></view>
+		<view v-if="isShowMenu" class="menu" :style="menuStyle">
+			<view class="menu-item" v-for="(item) in items" :key="item.key" @click.prevent="onSelectMenu(item)">
+				<text :style="itemStyle(item)"> {{ item.name }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	items?: any[];
+}
+
+interface Emits {
+	(e: 'select', item: any): void;
+}
+
+interface TouchPoint {
+	clientX: number;
+	clientY: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const isShowMenu = ref(false);
+const isTouchMove = ref(false);
+const menuStyle = ref("");
+const menuTouch = ref<TouchPoint>({ clientX: 0, clientY: 0 });
+
+const onLongPress = (e: any) => {
+	if (isTouchMove.value) {
+		// 屏幕移动时不弹出
+		return;
+	}
+
+	uni.getSystemInfo({
+		success: (res) => {
+			const touches = e.touches[0];
+			let style = "";
+			/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
+			if (touches.clientY > (res.windowHeight / 2)) {
+				style = `bottom:${res.windowHeight - touches.clientY + 20}px;`;
+			} else {
+				style = `top:${touches.clientY + 20}px;`;
+			}
+			if (touches.clientX > (res.windowWidth / 2)) {
+				style += `right:${res.windowWidth - touches.clientX}px;`;
+			} else {
+				style += `left:${touches.clientX}px;`;
+			}
+			menuStyle.value = style;
+
+			menuTouch.value = touches;
+			isShowMenu.value = true;
+		}
+	});
+};
+
+const onTouchMove = (e: any) => {
+	isTouchMove.value = true;
+	const touches = e.touches[0];
+	// 屏幕拖动大于50px时，取消菜单
+	if (Math.abs(touches.clientX - menuTouch.value.clientX) > 50 ||
+		Math.abs(touches.clientY - menuTouch.value.clientY) > 50) {
+		onClose();
+	}
+};
+
+const onTouchEnd = () => {
+	isTouchMove.value = false;
+};
+
+const onSelectMenu = (item: any) => {
+	emit("select", item);
+	isShowMenu.value = false;
+};
+
+const onClose = () => {
+	isShowMenu.value = false;
+};
+
+const itemStyle = (item: any) => {
+	if (item.color) {
+		return `color:${item.color};`;
+	}
+	return `color:#000;`;
+};
+</script>
+
+<style lang="scss" scoped>
+.long-press-menu {
+	.menu-mask {
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 999;
+	}
+
+	.menu {
+		position: fixed;
+		border-radius: 4px;
+		overflow: hidden;
+		background-color: #fff;
+		z-index: 1000;
+		box-shadow: $im-box-shadow-dark;
+
+		.menu-item {
+			height: 28px;
+			min-width: 120rpx;
+			line-height: 28px;
+			font-size: $im-font-size-small;
+			display: flex;
+			padding: 6px 20px;
+			justify-content: flex-start;
+
+			&:hover {
+				background: $im-bg-active;
+			}
+
+			.menu-icon {
+				margin-right: 10rpx;
+			}
+		}
+	}
+}
+</style>

package/components/im-nav-bar/im-nav-bar.vue

@@ -0,0 +1,99 @@
+<template>
+	<view class="nav-bar">
+		<!-- #ifdef APP-PLUS -->
+		<view style="height: var(--status-bar-height)"></view>
+		<!-- #endif -->
+		<view class="nav-bar-content">
+			<!-- #ifndef MP-WEIXIN -->
+			<view class="back" @click="handleBackClick" v-if="back">
+				<u-icon name="arrow-left" :size="iconFontSize"></u-icon>
+			</view>
+			<!-- #endif -->
+			<view class="title" v-if="title">
+				<slot></slot>
+			</view>
+			<view class="btn">
+				<u-icon class="btn-item" v-if="search" name="search" :size="iconFontSize"
+					@click="$emit('search')"></u-icon>
+				<u-icon class="btn-item" v-if="add" name="plus" :size="iconFontSize" @click="$emit('add')"></u-icon>
+				<u-icon class="btn-item" v-if="more" name="more-dot-fill" :size="iconFontSize"
+					@click="$emit('more')"></u-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	back?: boolean;
+	title?: boolean;
+	search?: boolean;
+	add?: boolean;
+	more?: boolean;
+	iconFontSize?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	back: false,
+	title: true,
+	search: false,
+	add: false,
+	more: false,
+	iconFontSize: 24
+});
+
+const handleBackClick = () => {
+	uni.navigateBack({
+		delta: 1
+	});
+};
+</script>
+
+<style scoped lang="scss">
+.nav-bar {
+	background: $im-bg-linear;
+	position: fixed;
+	top: 0;
+	width: 100%;
+	color: $im-text-color;
+	border-bottom: 1px solid $im-border-light;
+	font-size: $im-font-size-large;
+	z-index: 99;
+
+	.nav-bar-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		height: $im-nav-bar-height;
+
+		.title {}
+
+		.back {
+			position: absolute;
+			left: 0;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			padding: 12px;
+			font-size: 22px;
+			box-sizing: border-box;
+		}
+
+		.btn {
+			position: absolute;
+			right: 0;
+			height: 100%;
+			display: flex;
+			padding: 12px;
+			align-items: center;
+			box-sizing: border-box;
+
+			.btn-item {
+				margin-left: 8px;
+			}
+		}
+	}
+
+}
+</style>

package/components/im-switch-bar/im-switch-bar.vue

@@ -0,0 +1,60 @@
+<template>
+	<view class="switch-bar">
+		<text class="title">{{ title }}</text>
+		<switch class="switch" :checked="checked" color="#18bc37" @change="onChange"></switch>
+	</view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	title: string;
+	checked?: boolean;
+}
+
+interface Emits {
+	(e: 'change', value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	checked: false
+});
+
+const emit = defineEmits<Emits>();
+
+const value = ref(props.checked);
+
+watch(() => props.checked, (newVal) => {
+	value.value = newVal;
+});
+
+const onChange = (e: any) => {
+	value.value = true;
+	setTimeout(() => {
+		value.value = false;
+	}, 100);
+
+	emit('change', e);
+};
+</script>F
+
+<style lang="scss" scoped>
+.switch-bar {
+	width: 100%;
+	height: 100rpx;
+	font-size: 34rpx;
+	color: black;
+	margin-top: 5rpx;
+	background-color: white;
+	line-height: 100rpx;
+	display: flex;
+
+	.title {
+		flex: 1;
+		margin-left: 40rpx;
+	}
+
+	.switch {
+		margin-right: 40rpx;
+	}
+}
+</style>

package/components/im-virtual-scroller/im-virtual-scroller.vue

@@ -0,0 +1,52 @@
+<template>
+	<scroll-view scroll-y="true" :style="{ height: height }" upper-threshold="200" @scrolltolower="onScrollToBottom"
+		scroll-with-animation="true">
+		<view class="virtual-scroller" v-for="(item, idx) in showItems" :key="idx">
+			<slot :item="item">
+			</slot>
+		</view>
+	</scroll-view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	height?: string;
+	items?: any[];
+	size?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	height: '60vh',
+	items: () => [],
+	size: 30
+});
+
+const page = ref(1);
+const isInitEvent = ref(false);
+const lockTip = ref(false);
+
+const onScrollToBottom = (e: any) => {
+	if (showMaxIdx.value >= props.items.length) {
+		showTip();
+	} else {
+		page.value++;
+	}
+};
+
+const showTip = () => {
+	uni.showToast({
+		title: "已滚动至底部",
+		icon: 'none'
+	});
+};
+
+const showMaxIdx = computed(() => {
+	return Math.min(page.value * props.size, props.items.length);
+});
+
+const showItems = computed(() => {
+	return props.items.slice(0, showMaxIdx.value);
+});
+</script>
+
+<style scoped></style>

package/index.js

@@ -1,43 +1,53 @@
+import { Pinia } from './plugins/pinia.js'
 import { UViewPlusPlugin } from './plugins/uview-plus.js'
-import ImSample from './components/im-sample/im-sample.vue'
+// import ImSample from './components/im-sample/im-sample.vue'
 
-// 重要：为组件添加名称，以支持开发环境
-ImSample.name = 'ImSample'
+// // 重要：为组件添加名称，以支持开发环境
+// ImSample.name = 'ImSample'
 
-const components = [
-    ImSample
-]
+// const components = [
+//     ImSample
+// ]
 
-// const importFn = import.meta.glob('./components/im-*/im-*.vue', { eager: true })
-// const components = [];
+const importFn = import.meta.glob('./components/im-*/im-*.vue', { eager: true })
+const components = [];
 
-// for (const key in importFn) {
-//     const component = importFn[key].default;
-    
-//     // 1. 从文件路径中提取组件名（更可靠的方法）
-//     const fileName = key.split('/').pop(); // 获取文件名，如 im-button.vue
-//     const componentName = fileName
-//         .replace('.vue', '') // 去掉 .vue 后缀
-//         .replace(/\b\w/g, l => l.toUpperCase()) // 首字母大写，如 ImButton
-        
-//     // 2. 添加到组件列表
-//     if (component) {
-//         // 如果组件本身没有 name，给它设置一个
-//         if (!component.name) {
-//             component.name = componentName;
-//         }
+for (const key in importFn) {
+    const component = importFn[key].default;
 
-//         components.push(component);
-//     }
-// }
+    // 1. 从文件路径中提取组件名（更可靠的方法）
+    const fileName = key.split('/').pop(); // 获取文件名，如 im-button.vue
+    const componentName = fileName
+        .replace('.vue', '') // 去掉 .vue 后缀
+        .replace(/\b\w/g, l => l.toUpperCase()) // 首字母大写，如 ImButton
+
+    // 2. 添加到组件列表
+    if (component) {
+        // 如果组件本身没有 name，给它设置一个
+        if (!component.name) {
+            component.name = componentName;
+        }
+
+        components.push(component);
+    }
+}
+
+const install = (app, options = {}) => {
+    // 安装pinia插件
+    if (options.usePinia !== false) {
+        app.use(Pinia, options.piniaOptions)
+    }
 
-const install = (app) => {
     // 安装 uview-plus
     app.use(UViewPlusPlugin)
 
+    // 注册组件
     components.forEach(component => {
         app.component(component.name || '', component)
     })
+
+    // 提供全局配置
+    app.provide('im-config', options.config || {})
 }
 
 import eventBus from "./utils/eventBus.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "description": "A Vue3.0 + typescript instant messaging component library for Uniapp",
   "type": "module",
   "main": "index.js",
@@ -36,7 +36,13 @@
   "peerDependencies": {
     "@dcloudio/uni-app": "3.0.0-4070520250711001",
     "uview-plus": "^3.1.0",
-    "vue": "^3.3.0"
+    "vue": "^3.3.0",
+    "pinia": "^2.1.7"
+  },
+  "peerDependenciesMeta": {
+    "pinia": {
+      "optional": true
+    }
   },
   "keywords": [
     "vue3",

package/plugins/pinia.js

@@ -0,0 +1,19 @@
+import { createPinia } from 'pinia'
+
+export const Pinia = {
+  install(app, options = {}) {
+    // 创建pinia实例
+    const pinia = createPinia()
+    
+    // 可选：添加插件
+    if (options.persist) {
+      pinia.use(piniaPluginPersistedstate)
+    }
+    
+    // 注册pinia
+    app.use(pinia)
+
+    // 提供injection key
+    app.provide('imPinia', pinia)
+  }
+}

package/types/components/arrow-bar.d.ts

@@ -0,0 +1,14 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface ArrowBarProps {
+  title: string
+  icon?: string
+}
+
+declare interface _ArrowBar {
+  new(): {
+    $props: AllowedComponentProps & VNodeProps & ArrowBarProps
+  }
+}
+
+export declare const ArrowBar: _ArrowBar

package/types/components/bar-group.d.ts

@@ -0,0 +1,14 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface BarGroupSlots {
+    default?: () => any
+}
+
+declare interface _BarGroup {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps
+        $slots: BarGroupSlots
+    }
+}
+
+export declare const BarGroup: _BarGroup

package/types/components/btn-bar.d.ts

@@ -0,0 +1,16 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface BtnBarProps {
+    title: string
+    icon?: string
+    type?: 'normal' | 'danger' | 'primary'
+    color?: string
+}
+
+declare interface _BtnBar {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & BtnBarProps
+    }
+}
+
+export declare const BtnBar: _BtnBar

package/types/components/chat-at-box.d.ts

@@ -0,0 +1,22 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+import { GroupMember } from '../../libs'
+
+declare interface ChatAtBoxProps {
+    ownerId?: number
+    members?: any[]
+}
+
+declare interface ChatAtBoxEmits {
+    (e: 'complete', userIds: number[]): void
+}
+
+declare interface _ChatAtBox {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & ChatAtBoxProps
+        $emit: ChatAtBoxEmits
+    }
+    init: (userId: number, atUserIds: number[]) => void
+    open: () => void
+}
+
+export declare const ChatAtBox: _ChatAtBox

package/types/components/chat-group-readed.d.ts

@@ -0,0 +1,30 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+import { Chat, Message } from '../../libs'
+
+declare interface ChatGroupReadedProps {
+    msgInfo: {
+        groupId: number
+        id: number
+        sendId: number
+    }
+    groupMembers: any[]
+}
+
+declare interface ChatGroupReadedEmits {
+    (e: 'loaded', chatInfo: Chat, msgInfo: Message): void
+}
+
+declare interface Member {
+    userId: number
+    quit?: boolean
+}
+
+declare interface _ChatGroupReaded {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & ChatGroupReadedProps
+        $emit: ChatGroupReadedEmits
+    }
+    open: (userIds: number[]) => void
+}
+
+export declare const ChatGroupReaded: _ChatGroupReaded

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

@@ -0,0 +1,21 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface ChatItemProps {
+    chat?: any
+    index?: number
+    active?: boolean
+    online: boolean
+}
+
+declare interface ChatItemEmits {
+    (e: 'click', targetId: number): void
+}
+
+declare interface _ChatItem {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & ChatItemProps
+        $emit: ChatItemEmits
+    }
+}
+
+export declare const ChatItem: _ChatItem

package/types/components/chat-message-item.d.ts

@@ -0,0 +1,28 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface ChatMessageItemProps {
+    avatar?: string
+    showName: string
+    msgInfo: any
+    groupMembers?: any[]
+}
+
+declare interface ChatMessageItemEmits {
+    (e: 'call'): void
+    (e: 'longPressHead'): void
+    (e: 'resend', msgInfo: any): void
+    (e: 'audioStateChange', state: string, msgInfo: any): void
+    (e: 'copy', msgInfo: any): void
+    (e: 'recall', msgInfo: any): void
+    (e: 'delete', msgInfo: any): void
+    (e: 'download', msgInfo: any): void
+}
+
+declare interface _ChatMessageItem {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & ChatMessageItemProps
+        $emit: ChatMessageItemEmits
+    }
+}
+
+export declare const ChatMessageItem: _ChatMessageItem

package/types/components/chat-record.d.ts

@@ -0,0 +1,14 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface ChatRecordEmits {
+    (e: 'send', data: any): void
+}
+
+declare interface _ChatRecord {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps
+        $emit: ChatRecordEmits
+    }
+}
+
+export declare const ChatRecord: _ChatRecord