im-ui-mobile 0.1.0 → 0.1.2

package/components/im-voice-input/im-voice-input.vue

@@ -16,7 +16,7 @@
 			</view>
 			<view class="rc-tip">{{ recordTip }}</view>
 			<view class="cancel-btn" @click="onCancel">
-				<u-icon name="close" :color="moveToCancel ? 'red' : 'black'" :size="moveToCancel ? 45 : 40"></u-icon>
+				<im-icon name="close" :color="moveToCancel ? 'red' : 'black'" :size="moveToCancel ? 45 : 40" />
 			</view>
 			<view class="opt-tip" :class="moveToCancel ? 'red' : 'black'">{{ moveToCancel ? '松手取消' : '松手发送,上划取消' }}
 			</view>

package/index.js

@@ -1,5 +1,4 @@
 import { nextTick } from 'vue';
-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";
@@ -13,6 +12,7 @@ import { useDynamicRefs } from "./utils/useDynamicRefs.js";
 import WebSocket from "./utils/websocket.js";
 import { MESSAGE_TYPE, RTC_STATE, TERMINAL_TYPE, MESSAGE_STATUS } from "./utils/enums.js";
 import { configManager } from './utils/config.js'
+import validator from './utils/validator.js'
 
 const importComponents = import.meta.glob('./components/im-*/im-*.vue', { eager: true })
 const components = [];
@@ -39,7 +39,7 @@ for (const key in importComponents) {
 
 // 全局配置对象
 let config = {}
-let emoji = null
+let emoji = {}
 
 const install = (app, upuiParams = '') => {
     // 初始化自定义配置
@@ -52,9 +52,6 @@ const install = (app, upuiParams = '') => {
         }
     }
 
-    // 安装插件
-    app.use(UViewPlusPlugin)
-
     // 注册组件
     components.forEach(component => {
         app.component(component.name || '', component)
@@ -83,6 +80,7 @@ export {
     useDynamicRefs,
     WebSocket,
     webSocket,
+    validator,
 
     // Enums
     MESSAGE_TYPE,

package/index.scss

@@ -3,3 +3,22 @@
 @import "./styles/button.scss";
 
 @import "./styles/emoji.scss";
+
+:root {
+    --button-height: 40rpx;
+}
+
+:global(.im-parse-link) {
+    color: #007AFF !important;
+    text-decoration: underline !important;
+}
+
+:global(.im-parse-email) {
+    color: #007AFF !important;
+    text-decoration: underline !important;
+}
+
+:global(.im-parse-phone) {
+    color: #007AFF !important;
+    text-decoration: underline !important;
+}

package/libs/emoji-data.ts

@@ -0,0 +1,229 @@
+import { EmojiType as Emoji, EmojiCategoryType as EmojiCategory } from '../types/components/emoji-picker'
+
+// 表情数据工具类
+export class EmojiData {
+    private static instance: EmojiData
+    private emojiMap: Map<string, Emoji> = new Map()
+    private categoryMap: Map<string, EmojiCategory> = new Map()
+
+    // 常用表情分类
+    public static readonly CATEGORIES: EmojiCategory[] = [
+        { id: 'recent', name: '最近', icon: '🕒', order: 0 },
+        { id: 'smileys', name: '表情', icon: '😀', order: 1 },
+        { id: 'people', name: '人物', icon: '👨', order: 2 },
+        { id: 'gestures', name: '手势', icon: '👋', order: 3 },
+        { id: 'objects', name: '物品', icon: '💡', order: 4 },
+        { id: 'nature', name: '自然', icon: '🌳', order: 5 },
+        { id: 'food', name: '食物', icon: '🍎', order: 6 },
+        { id: 'activities', name: '活动', icon: '⚽', order: 7 },
+        { id: 'travel', name: '旅行', icon: '🚗', order: 8 },
+        { id: 'symbols', name: '符号', icon: '💖', order: 9 },
+        { id: 'flags', name: '旗帜', icon: '🇨🇳', order: 10 }
+    ]
+
+    // 默认表情数据
+    public static readonly DEFAULT_EMOJIS: Emoji[] = [
+        // 笑脸和情感
+        { key: 'grinning', char: '😀', name: '大笑', category: 'smileys', type: 'unicode', keywords: ['笑', '开心', '大笑'] },
+        { key: 'smiley', char: '😃', name: '微笑', category: 'smileys', type: 'unicode', keywords: ['微笑', '开心'] },
+        { key: 'smile', char: '😄', name: '开心', category: 'smileys', type: 'unicode', keywords: ['开心', '笑'] },
+        { key: 'grin', char: '😁', name: '咧嘴笑', category: 'smileys', type: 'unicode', keywords: ['咧嘴', '笑'] },
+        { key: 'laughing', char: '😆', name: '大笑', category: 'smileys', type: 'unicode', keywords: ['大笑', '哈哈'] },
+        { key: 'wink', char: '😉', name: '眨眼', category: 'smileys', type: 'unicode', keywords: ['眨眼', '调皮'] },
+        { key: 'blush', char: '😊', name: '害羞', category: 'smileys', type: 'unicode', keywords: ['害羞', '脸红'] },
+        { key: 'heart_eyes', char: '😍', name: '爱心眼', category: 'smileys', type: 'unicode', keywords: ['爱', '喜欢', '爱心'] },
+        { key: 'kissing_heart', char: '😘', name: '飞吻', category: 'smileys', type: 'unicode', keywords: ['飞吻', '亲'] },
+        { key: 'kissing', char: '😗', name: '亲吻', category: 'smileys', type: 'unicode', keywords: ['亲吻'] },
+
+        // 手势
+        { key: 'thumbsup', char: '👍', name: '点赞', category: 'gestures', type: 'unicode', keywords: ['赞', '好', '同意'] },
+        { key: 'thumbsdown', char: '👎', name: '点踩', category: 'gestures', type: 'unicode', keywords: ['踩', '不好', '反对'] },
+        { key: 'clap', char: '👏', name: '鼓掌', category: 'gestures', type: 'unicode', keywords: ['鼓掌', '表扬', '赞'] },
+        { key: 'pray', char: '🙏', name: '祈祷', category: 'gestures', type: 'unicode', keywords: ['祈祷', '拜托', '感谢'] },
+        { key: 'handshake', char: '🤝', name: '握手', category: 'gestures', type: 'unicode', keywords: ['握手', '合作', '协议'] },
+        { key: 'victory', char: '✌️', name: '胜利', category: 'gestures', type: 'unicode', keywords: ['胜利', '耶', '和平'] },
+        { key: 'ok_hand', char: '👌', name: 'OK', category: 'gestures', type: 'unicode', keywords: ['OK', '好的', '同意'] },
+        { key: 'v', char: '✌', name: '剪刀手', category: 'gestures', type: 'unicode', keywords: ['剪刀手', '耶'] },
+
+        // 物品
+        { key: 'heart', char: '❤️', name: '红心', category: 'symbols', type: 'unicode', keywords: ['心', '爱', '喜欢'] },
+        { key: 'star', char: '⭐', name: '星星', category: 'symbols', type: 'unicode', keywords: ['星星', '收藏'] },
+        { key: 'fire', char: '🔥', name: '火焰', category: 'symbols', type: 'unicode', keywords: ['火', '热', '厉害'] },
+        { key: 'rocket', char: '🚀', name: '火箭', category: 'travel', type: 'unicode', keywords: ['火箭', '快', '发射'] },
+        { key: 'bulb', char: '💡', name: '灯泡', category: 'objects', type: 'unicode', keywords: ['灯泡', '想法', '主意'] },
+        { key: 'gift', char: '🎁', name: '礼物', category: 'objects', type: 'unicode', keywords: ['礼物', '惊喜'] },
+        { key: 'bell', char: '🔔', name: '铃铛', category: 'objects', type: 'unicode', keywords: ['铃铛', '通知'] },
+        { key: 'lock', char: '🔒', name: '锁', category: 'objects', type: 'unicode', keywords: ['锁', '安全', '保密'] },
+
+        // 自然
+        { key: 'sun', char: '☀️', name: '太阳', category: 'nature', type: 'unicode', keywords: ['太阳', '晴天', '热'] },
+        { key: 'moon', char: '🌙', name: '月亮', category: 'nature', type: 'unicode', keywords: ['月亮', '夜晚'] },
+        { key: 'star2', char: '🌟', name: '闪星', category: 'nature', type: 'unicode', keywords: ['星星', '闪', '亮'] },
+        { key: 'cloud', char: '☁️', name: '云', category: 'nature', type: 'unicode', keywords: ['云', '天气'] },
+        { key: 'rainbow', char: '🌈', name: '彩虹', category: 'nature', type: 'unicode', keywords: ['彩虹', '希望', '美好'] },
+        { key: 'flower', char: '🌹', name: '玫瑰', category: 'nature', type: 'unicode', keywords: ['玫瑰', '花', '爱情'] },
+        { key: 'tree', char: '🌳', name: '树', category: 'nature', type: 'unicode', keywords: ['树', '自然'] },
+
+        // 食物
+        { key: 'pizza', char: '🍕', name: '披萨', category: 'food', type: 'unicode', keywords: ['披萨', '美食'] },
+        { key: 'hamburger', char: '🍔', name: '汉堡', category: 'food', type: 'unicode', keywords: ['汉堡', '快餐'] },
+        { key: 'coffee', char: '☕', name: '咖啡', category: 'food', type: 'unicode', keywords: ['咖啡', '提神'] },
+        { key: 'beer', char: '🍺', name: '啤酒', category: 'food', type: 'unicode', keywords: ['啤酒', '喝酒'] },
+        { key: 'cake', char: '🎂', name: '蛋糕', category: 'food', type: 'unicode', keywords: ['蛋糕', '生日', '庆祝'] },
+        { key: 'icecream', char: '🍦', name: '冰淇淋', category: 'food', type: 'unicode', keywords: ['冰淇淋', '冷饮'] },
+
+        // 活动
+        { key: 'soccer', char: '⚽', name: '足球', category: 'activities', type: 'unicode', keywords: ['足球', '运动'] },
+        { key: 'basketball', char: '🏀', name: '篮球', category: 'activities', type: 'unicode', keywords: ['篮球', '运动'] },
+        { key: 'tennis', char: '🎾', name: '网球', category: 'activities', type: 'unicode', keywords: ['网球', '运动'] },
+        { key: 'music', char: '🎵', name: '音乐', category: 'activities', type: 'unicode', keywords: ['音乐', '音符'] },
+        { key: 'movie', char: '🎬', name: '电影', category: 'activities', type: 'unicode', keywords: ['电影', '导演'] },
+
+        // 自定义表情（图片类型）
+        { key: 'custom_001', char: '', name: '自定义1', category: 'custom', type: 'image', url: '/static/emoji/custom/001.png' },
+        { key: 'custom_002', char: '', name: '自定义2', category: 'custom', type: 'image', url: '/static/emoji/custom/002.png' }
+    ]
+
+    private constructor() {
+        this.initData()
+    }
+
+    public static getInstance(): EmojiData {
+        if (!EmojiData.instance) {
+            EmojiData.instance = new EmojiData()
+        }
+        return EmojiData.instance
+    }
+
+    private initData(): void {
+        // 初始化分类
+        EmojiData.CATEGORIES.forEach(category => {
+            this.categoryMap.set(category.id, category)
+        })
+
+        // 初始化表情
+        EmojiData.DEFAULT_EMOJIS.forEach(emoji => {
+            this.emojiMap.set(emoji.key, emoji)
+        })
+    }
+
+    // 获取所有表情
+    public getAllEmojis(): Emoji[] {
+        return Array.from(this.emojiMap.values())
+    }
+
+    // 获取所有分类
+    public getAllCategories(): EmojiCategory[] {
+        return Array.from(this.categoryMap.values())
+    }
+
+    // 根据分类获取表情
+    public getEmojisByCategory(categoryId: string): Emoji[] {
+        return this.getAllEmojis().filter(emoji => emoji.category === categoryId)
+    }
+
+    // 搜索表情
+    public searchEmojis(keyword: string): Emoji[] {
+        const kw = keyword.toLowerCase().trim()
+        if (!kw) return []
+
+        return this.getAllEmojis().filter(emoji => {
+            // 搜索名称
+            if (emoji.name.toLowerCase().includes(kw)) return true
+
+            // 搜索关键词
+            if (emoji.keywords?.some(k => k.toLowerCase().includes(kw))) return true
+
+            // 搜索 key
+            if (emoji.key.toLowerCase().includes(kw)) return true
+
+            // 搜索字符
+            if (emoji.char.includes(kw)) return true
+
+            return false
+        })
+    }
+
+    // 根据key获取表情
+    public getEmojiByKey(key: string): Emoji | undefined {
+        return this.emojiMap.get(key)
+    }
+
+    // 根据字符获取表情
+    public getEmojiByChar(char: string): Emoji | undefined {
+        return this.getAllEmojis().find(emoji => emoji.char === char)
+    }
+
+    // 添加自定义表情
+    public addCustomEmoji(emoji: Emoji): void {
+        if (!emoji.category) {
+            emoji.category = 'custom'
+        }
+        this.emojiMap.set(emoji.key, emoji)
+    }
+
+    // 移除表情
+    public removeEmoji(key: string): boolean {
+        return this.emojiMap.delete(key)
+    }
+
+    // 获取最近使用的表情（从本地存储）
+    public getRecentEmojis(maxCount: number = 36): Emoji[] {
+        try {
+            const data = uni.getStorageSync('im_emoji_recent')
+            if (data) {
+                const keys = JSON.parse(data) as string[]
+                const emojis = keys
+                    .map(key => this.getEmojiByKey(key))
+                    .filter(Boolean) as Emoji[]
+                return emojis.slice(0, maxCount)
+            }
+        } catch (error) {
+            console.error('获取最近表情失败:', error)
+        }
+        return []
+    }
+
+    // 添加到最近使用
+    public addToRecent(key: string): void {
+        try {
+            const data = uni.getStorageSync('im_emoji_recent')
+            let recentKeys: string[] = []
+
+            if (data) {
+                recentKeys = JSON.parse(data) as string[]
+            }
+
+            // 移除重复项
+            const index = recentKeys.indexOf(key)
+            if (index > -1) {
+                recentKeys.splice(index, 1)
+            }
+
+            // 添加到开头
+            recentKeys.unshift(key)
+
+            // 限制数量
+            if (recentKeys.length > 50) {
+                recentKeys = recentKeys.slice(0, 50)
+            }
+
+            uni.setStorageSync('im_emoji_recent', JSON.stringify(recentKeys))
+        } catch (error) {
+            console.error('保存最近表情失败:', error)
+        }
+    }
+
+    // 清空最近使用
+    public clearRecentEmojis(): void {
+        try {
+            uni.removeStorageSync('im_emoji_recent')
+        } catch (error) {
+            console.error('清空最近表情失败:', error)
+        }
+    }
+}
+
+// 导出单例和类型
+export const emojiData = EmojiData.getInstance()
+export type { Emoji, EmojiCategory }

package/libs/index.ts

@@ -1,4 +1,4 @@
-import type { RTC_STATE, MESSAGE_TYPE } from '../types/utils/enums.d.ts'
+import type { RTC_STATE, MESSAGE_TYPE, MESSAGE_STATUS } from '../types/utils/enums.d.ts'
 
 /**
  * 通话模式类型
@@ -22,8 +22,8 @@ export interface Chat {
   id?: string | number
   targetId: number
   type: 'PRIVATE' | 'GROUP'
-  showName: string
-  headImage: string
+  displayName: string
+  avatar: string
   isDnd: boolean
   lastContent: string
   lastSendTime?: number
@@ -49,15 +49,15 @@ export interface Message {
   content: string
   sendTime?: number
   selfSend?: boolean
-  status?: number
+  status?: MESSAGE_STATUS
   sendNickName?: string
   atUserIds?: number[]
   sendId?: number
-  recvId?: number
+  receiveId?: number
   groupId?: number
   receipt?: boolean
   receiptOk?: boolean
-  readedCount?: number
+  readCount?: number
   quoteMessage?: Message
   fileId?: string
 }
@@ -68,7 +68,7 @@ export interface Message {
 export interface Friend {
   id: number
   nickName: string
-  headImage?: string
+  avatar?: string
   online: boolean
   onlineWeb: boolean
   onlineApp: boolean
@@ -112,7 +112,7 @@ export interface GroupMember {
   id?: number
   userId: number
   showNickName: string
-  headImage?: string
+  avatar?: string
   quit?: boolean
   [key: string]: any
 }
@@ -126,14 +126,14 @@ export interface Group {
   isBanned?: boolean
   reason?: string
   name: string
-  headImage: string
+  avatar: string
   isDnd: boolean
   quit?: boolean
   topMessage?: string
   memberCount?: number
   createTime?: number
   showGroupName: string
-  headImageThumb?: string
+  avatarThumb?: string
   remarkGroupName?: string
   remarkNickName?: string
   notice?: string
@@ -206,8 +206,8 @@ export interface RecorderFile {
 export interface UserInfo {
   id: number
   nickName: string
-  headImage: string
-  headImageThumb?: string
+  avatar: string
+  avatarThumb?: string
   email?: string
   phone?: string
   gender?: number
@@ -221,9 +221,9 @@ export interface UserInfo {
 }
 
 export interface Response<T> {
-    code: number
-    message: string
-    result: T
-    success: boolean
+  code: number
+  message: string
+  result: T
+  success: boolean
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A Vue3.0 + Typescript instant messaging component library for Uniapp",
   "type": "module",
   "main": "index.js",
@@ -38,7 +38,6 @@
   },
   "peerDependencies": {
     "@dcloudio/uni-app": "3.0.0-4070520250711001",
-    "uview-plus": "^3.1.0",
     "vue": "^3.3.0",
     "pinia": "^2.1.7"
   },

package/styles/button.scss

@@ -1,39 +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-small !important;
-}
+// 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-small !important;
+// }
 
 // #endif
 
-.button-hover[type='primary'] {
-	color: #fff !important;
-	background-color: $im-color-primary-dark-1 !important;
-}
+// .button-hover[type='primary'] {
+// 	color: #fff !important;
+// 	background-color: $im-color-primary-dark-1 !important;
+// }

package/theme.scss

@@ -1,5 +1,5 @@
 // 颜色
-$im-color-primary: #3e45d7;
+$im-color-primary: rgb(134 4 155);
 $im-color-primary-light-1: mix(#fff, $im-color-primary, 10%);
 $im-color-primary-light-2: mix(#fff, $im-color-primary, 20%);
 $im-color-primary-light-3: mix(#fff, $im-color-primary, 30%);
@@ -58,4 +58,4 @@ $im-title-size: 26px;
 $im-title-size-1: 22px;
 $im-title-size-2: 18px;
 
-$im-nav-bar-height: 50px;
+$im-nav-bar-height: 50px;

package/types/components/badge.d.ts

@@ -0,0 +1,42 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+declare interface BadgeProps {
+  /** 徽标显示的值，可以是数字或字符串 */
+  value?: string | number
+  /** 最大值，超过会显示 {max}+，为0时不做限制 */
+  max?: number
+  /** 是否显示为小圆点 */
+  isDot?: boolean
+  /** 是否隐藏徽标 */
+  hidden?: boolean
+  /** 徽标类型 */
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  /** 自定义背景色 */
+  bgColor?: string
+  /** 自定义文字颜色 */
+  textColor?: string
+  /** 徽标尺寸 */
+  size?: 'small' | 'medium' | 'large'
+  /** 徽标形状 */
+  shape?: 'circle' | 'square' | 'rounded'
+  /** 是否绝对定位（需要子元素时生效） */
+  absolute?: boolean
+  /** 绝对定位的偏移量 [x, y] */
+  offset?: [number, number]
+  /** 当value为0时是否显示徽标 */
+  showZero?: boolean
+}
+
+declare interface _Badge {
+  new(): {
+    $props: AllowedComponentProps & VNodeProps & BadgeProps
+    $emit: {
+      /** 点击事件 */
+      click: (event: MouseEvent) => void
+    }
+  }
+  /** 获取当前值 */
+  getValue: () => string | number
+}
+
+export declare const Badge: _Badge

package/types/components/button.d.ts

@@ -3,7 +3,7 @@ import { AllowedComponentProps, VNodeProps } from 'vue'
 declare interface ButtonProps {
     // 基础属性
     text?: string
-    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'  // 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
     size?: 'mini' | 'small' | 'medium' | 'large'
     shape?: 'square' | 'round' | 'circle'
     disabled?: boolean
@@ -26,6 +26,7 @@ declare interface ButtonProps {
     color?: string
     bgColor?: string
     borderColor?: string
+    border: boolean
     textColor?: string
     textSize?: 'small' | 'medium' | 'large'
     width?: string