im-ui-mobile 0.0.66 → 0.0.68

package/components/{im-btn-bar/im-btn-bar.vue → im-button/im-button.vue}

@@ -1,5 +1,5 @@
 <template>
-	<view class="btn-bar" :style="style">
+	<view class="button" :style="style">
 		<text v-if="icon" class="icon iconfont" :class="icon"></text>
 		<text class="title">{{ title }}</text>
 	</view>
@@ -38,7 +38,7 @@ const style = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.btn-bar {
+.button {
 	width: 100%;
 	height: 100rpx;
 	margin-top: 5rpx;

package/index.js

@@ -1,5 +1,19 @@
 // import { PiniaPlugin } from './plugins/pinia.js'
 import { UViewPlusPlugin } from './plugins/uview-plus.js'
+import eventBus from "./utils/eventBus.js";
+import datetime from "./utils/datetime.js";
+import Emoji from "./utils/emoji.js";
+import { emoji } from "./utils/emoji.js";
+import dom from "./utils/dom.js";
+import messageType from "./utils/messageType.js";
+import RecorderApp from "./utils/recorderApp.js";
+import RecorderH5 from "./utils/recorderH5.js";
+import Requester from "./utils/requester.js";
+import url from "./utils/url.js";
+import { useDynamicRefs } from "./utils/useDynamicRefs.js";
+import WebSocket from "./utils/websocket.js";
+import { webSocket } from "./utils/websocket.js";
+import { MESSAGE_TYPE, RTC_STATE, TERMINAL_TYPE, MESSAGE_STATUS } from "./utils/enums.js";
 
 const importFn = import.meta.glob('./components/im-*/im-*.vue', { eager: true })
 const components = [];
@@ -24,7 +38,35 @@ for (const key in importFn) {
     }
 }
 
-const install = (app, options = {}) => {
+// 全局配置对象
+let globalConfig = {
+    emojiUrl: '',
+};
+
+const install = (app, upuiParams = '') => {
+    // 合并配置
+    globalConfig = { ...globalConfig, ...options };
+
+    // 配置 Emoji
+    if (globalConfig.emojiUrl) {
+        emoji.setEmojiUrl(globalConfig.emojiUrl);
+    }
+
+    // 配置
+    if (upuiParams) {
+        uni.upuiParams = upuiParams
+        const temp = upuiParams()
+        if (temp.options) {
+            setConfig(temp.options)
+        }
+    }
+
+    // 提供全局配置
+    app.provide('im-config', options.config || {})
+
+
+    // 安装插件
+
     // // 安装pinia插件
     // if (options.usePinia !== false) {
     //     app.use(PiniaPlugin, options.piniaOptions)
@@ -37,29 +79,25 @@ const install = (app, options = {}) => {
     components.forEach(component => {
         app.component(component.name || '', component)
     })
-
-    // 提供全局配置
-    app.provide('im-config', options.config || {})
 }
 
-import eventBus from "./utils/eventBus.js";
-import datetime from "./utils/datetime.js";
-import { emoji, Emoji } from "./utils/emoji.js";
-import dom from "./utils/dom.js";
-import messageType from "./utils/messageType.js";
-import RecorderApp from "./utils/recorderApp.js";
-import RecorderH5 from "./utils/recorderH5.js";
-import Requester from "./utils/requester.js";
-import url from "./utils/url.js";
-import { useDynamicRefs } from "./utils/useDynamicRefs.js";
-import { webSocketManager, WebSocketManager } from "./utils/websocket.js";
-import { MESSAGE_TYPE, RTC_STATE, TERMINAL_TYPE, MESSAGE_STATUS } from "./utils/enums.js";
+// 导出安装函数和配置方法
+const setConfig = (options) => {
+    Object.assign(globalConfig, options);
+    if (options.emoji && options.emoji.baseUrl) {
+        emoji.setEmojiUrl(options.emoji.baseUrl);
+    }
+};
+
+const getConfig = () => ({ ...globalConfig });
 
 export {
+    setConfig,
+    getConfig,
     eventBus,
     datetime,
-    emoji,
     Emoji,
+    emoji,
     dom,
     messageType,
     RecorderApp as recorderApp,
@@ -67,16 +105,14 @@ export {
     Requester,
     url,
     useDynamicRefs,
-    webSocketManager,
-    WebSocketManager,
+    WebSocket,
+    webSocket,
 
     // Enums
     MESSAGE_TYPE,
     RTC_STATE,
     TERMINAL_TYPE,
     MESSAGE_STATUS
-
-    // 类型常量
 }
 
 export default {

package/index.scss

@@ -1,17 +1,5 @@
-.emoji-large {
-    width: 64rpx !important;
-    height: 64rpx !important;
-    vertical-align: bottom !important;
-}
+@import "./styles/common.scss";
 
-.emoji-normal {
-    width: 54rpx !important;
-    height: 54rpx !important;
-    vertical-align: bottom !important;
-}
+@import "./styles/button.scss";
 
-.emoji-small {
-    width: 36rpx !important;
-    height: 36rpx !important;
-    vertical-align: bottom !important;
-}
+@import "./styles/emoji.scss";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "description": "A Vue3.0 + typescript instant messaging component library for Uniapp",
   "type": "module",
   "main": "index.js",
@@ -12,6 +12,7 @@
     "utils",
     "plugins",
     "index.js",
+    "styles",
     "theme.scss",
     "index.scss"
   ],

package/styles/button.scss

@@ -0,0 +1,39 @@
+
+// #ifdef MP-WEIXIN
+// wx小程序只有button,没有uni-botton
+button {
+	font-size: $im-font-size !important;
+}
+
+button[type='primary'] {
+	color: #fff !important;
+	background: linear-gradient(135deg, $im-color-primary, lighten($im-color-primary, 15%)) !important;
+}
+
+button[type='primary'][plain] {
+	color: $im-color-primary !important;
+	border: 2px solid $im-color-primary;
+	background: transparent;
+}
+
+button[type='warn'] {
+	color: #fff !important;
+	background: linear-gradient(135deg, $im-color-danger, lighten($im-color-danger, 15%)) !important;
+}
+
+button[type='warn'][plain] {
+	color: $im-color-danger !important;
+	border: 1px solid $im-color-danger !important;
+	background: transparent !important;
+}
+
+button[size='mini'] {
+	font-size: $im-font-size-smaller !important;
+}
+
+// #endif
+
+.button-hover[type='primary'] {
+	color: #fff !important;
+	background-color: $im-color-primary-dark-1 !important;
+}

package/styles/common.scss

@@ -0,0 +1,9 @@
+.none-pointer-events {
+    uni-image img {
+        // 阻止微信默认长按菜单
+        pointer-events: none;
+        -webkit-pointer-events: none;
+        -ms-pointer-events: none;
+        -moz-pointer-events: none;
+    }
+}

package/styles/emoji.scss

@@ -0,0 +1,17 @@
+.emoji-large {
+    width: 64rpx !important;
+    height: 64rpx !important;
+    vertical-align: bottom !important;
+}
+
+.emoji-normal {
+    width: 54rpx !important;
+    height: 54rpx !important;
+    vertical-align: bottom !important;
+}
+
+.emoji-small {
+    width: 36rpx !important;
+    height: 36rpx !important;
+    vertical-align: bottom !important;
+}

package/theme.scss

@@ -59,100 +59,4 @@ $im-title-size: 26px;
 $im-title-size-1: 22px;
 $im-title-size-2: 18px;
 
-// $font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
-
 $im-nav-bar-height: 50px;
-
-
-// // #ifdef MP-WEIXIN
-// // wx小程序只有button,没有uni-botton
-// button {
-// 	font-size: $im-font-size !important;
-// }
-
-// button[type='primary'] {
-// 	color: #fff !important;
-// 	background: linear-gradient(135deg, $im-color-primary, lighten($im-color-primary, 15%)) !important;
-// }
-
-// button[type='primary'][plain] {
-// 	color: $im-color-primary !important;
-// 	border: 2px solid $im-color-primary;
-// 	background: transparent;
-// }
-
-// button[type='warn'] {
-// 	color: #fff !important;
-// 	background: linear-gradient(135deg, $im-color-danger, lighten($im-color-danger, 15%)) !important;
-// }
-
-// button[type='warn'][plain] {
-// 	color: $im-color-danger !important;
-// 	border: 1px solid $im-color-danger !important;
-// 	background: transparent !important;
-// }
-
-// button[size='mini'] {
-// 	font-size: $im-font-size-smaller !important;
-// }
-
-// // #endif
-
-// .button-hover[type='primary'] {
-// 	color: #fff !important;
-// 	background-color: $im-color-primary-dark-1 !important;
-// }
-
-// .nav-bar {
-// 	height: 100rpx;
-// 	padding: 0 20rpx;
-// 	display: flex;
-// 	align-items: center;
-// 	border-bottom: 1rpx solid $im-border;
-
-// 	.nav-search {
-// 		flex: 1;
-// 	}
-
-// 	.nav-add {
-// 		cursor: pointer;
-// 	}
-// }
-
-
-// .bottom-btn {
-// 	margin: 40rpx 40rpx;
-// }
-
-// .emoji-large {
-// 	width: 64rpx !important;
-// 	height: 64rpx !important;
-// 	vertical-align: bottom !important;
-// }
-
-// .emoji-normal {
-// 	width: 54rpx !important;
-// 	height: 54rpx !important;
-// 	vertical-align: bottom !important;
-// }
-
-// .emoji-small {
-// 	width: 36rpx !important;
-// 	height: 36rpx !important;
-// 	vertical-align: bottom !important;
-// }
-
-// .none-pointer-events {
-// 	uni-image img {
-// 		// 阻止微信默认长按菜单
-// 		pointer-events: none;
-// 		-webkit-pointer-events: none;
-// 		-ms-pointer-events: none;
-// 		-moz-pointer-events: none;
-// 	}
-// }
-
-// p {
-// 	margin-block-start: 1em;
-// 	margin-block-end: 1em;
-// }

package/types/components/{btn-bar.d.ts → button.d.ts}

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

package/types/components.d.ts

@@ -2,7 +2,7 @@ declare module 'vue' {
     export interface GlobalComponents {
         ['im-arrow-bar']: typeof import('./components/arrow-bar')['ArrowBar']
         ['im-bar-group']: typeof import('./components/bar-group')['BarGroup']
-        ['im-btn-bar']: typeof import('./components/btn-bar')['BtnBar']
+        ['im-button']: typeof import('./components/button')['Button']
         ['im-chat-at-box']: typeof import('./components/chat-at-box')['ChatAtBox']
         ['im-chat-group-readed']: typeof import('./components/chat-group-readed')['ChatGroupReaded']
         ['im-chat-item']: typeof import('./components/chat-item')['ChatItem']

package/types/index.d.ts

@@ -3,6 +3,7 @@
 import eventBus from "./utils/eventBus.d.ts";
 import datetime from "./utils/datetime.d.ts";
 import Emoji from "./utils/emoji.d.ts";
+import { emoji } from "./utils/emoji.d.ts";
 import { MESSAGE_TYPE, RTC_STATE, TERMINAL_TYPE, MESSAGE_STATUS } from "./utils/enums.d.ts";
 import * as dom from "./utils/dom.d.ts";
 import messageType from "./utils/messageType.d.ts";
@@ -11,7 +12,8 @@ import * as recorderH5 from "./utils/recorderH5.d.ts";
 import Requester from "./utils/requester.d.ts";
 import * as url from "./utils/url.d.ts";
 import { useDynamicRefs } from "./utils/useDynamicRefs.d.ts";
-import webSocketManager from "./utils/websocket.d.ts";
+import WebSocket from "./utils/websocket.d.ts";
+import { webSocket } from "./utils/websocket.d.ts";
 import type {
     // 类型常量
     RtcMode,
@@ -40,16 +42,29 @@ import type {
 declare module 'im-ui-mobile' {
     export function install(): void
 
+    interface EmojiConfig {
+        baseUrl: string;
+    }
+
+    interface GlobalConfig {
+        emoji: Partial<EmojiConfig>;
+    }
+
+    export function setConfig(config: Partial<GlobalConfig>): void;
+
     export {
+        ImUiConfig,
         eventBus,
         datetime,
         Emoji,
+        emoji,
         dom,
         messageType,
         Requester,
         url,
         useDynamicRefs,
-        webSocketManager,
+        WebSocket,
+        webSocket,
 
         // 枚举类型
         RTC_STATE,

package/types/utils/emoji.d.ts

@@ -1,8 +1,12 @@
-declare const _default: {
+declare class Emoji {
+    setEmojiUrl: (url: string) => void;
+    getEmojiUrl: (F) => string;
     containEmoji: (content: string) => boolean;
     emoTextList: string[];
     transform: (content: string, extClass?: string) => string;
     textToPath: (emoText: string) => string;
     pathToText: (path: string) => string;
 };
-export default _default;
+declare const emoji: Emoji;
+export { emoji, Emoji };
+export default emoji;

package/types/utils/websocket.d.ts

@@ -1,7 +1,7 @@
 type MessageCallback = (cmd: number, data: any) => void;
 type CloseCallback = (res: any) => void;
 type ConnectCallback = () => void;
-declare class WebSocketManager {
+declare class WebSocket {
     private messageCallBack;
     private closeCallBack;
     private connectCallBack;
@@ -30,6 +30,6 @@ declare class WebSocketManager {
     setHeartCheckTimeout(timeout: number): void;
     destroy(): void;
 }
-declare const webSocketManager: WebSocketManager;
-export { webSocketManager, WebSocketManager };
-export default webSocketManager;
+declare const webSocket: WebSocket;
+export { webSocket, WebSocket };
+export default webSocket;

package/utils/websocket.js

@@ -1,4 +1,4 @@
-class WebSocketManager {
+class WebSocket {
     constructor() {
         // 私有属性
         this.messageCallBack = null;
@@ -223,8 +223,8 @@ class WebSocketManager {
 }
 
 // 创建单例实例
-const webSocketManager = new WebSocketManager();
+const webSocket = new WebSocket();
 
 // 导出单例和类
-export { webSocketManager, WebSocketManager };
-export default webSocketManager;
+export { webSocket, WebSocket };
+export default webSocket;