im-ui-mobile 0.0.3 → 0.0.5

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "A Uniapp instant messaging component library based on Vue3.0+typescript",
   "main": "index.ts",
   "module": "dist/im-ui-mobile.es.js",
   "types": "dist/index.d.ts",
   "files": [
-    "index.js",
-    "index.d.ts",
-    "components/",
-    "types/",
-    "utils/"
+    "src/"
   ],
   "scripts": {
     "build": "vite build",

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

@@ -0,0 +1,167 @@
+<!-- packages/chat-box/index.vue -->
+<template>
+    <div class="u-im-chat-box">
+        <div class="u-im-chat-box__header">
+            <div class="u-im-chat-box__title">{{ title }}</div>
+            <div class="u-im-chat-box__actions">
+                <slot name="header-actions"></slot>
+            </div>
+        </div>
+
+        <div class="u-im-chat-box__messages" ref="messagesRef">
+            <div class="u-im-chat-box__loading" v-if="loading">
+                <u-loading-icon size="24" />
+            </div>
+            <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" />
+        </div>
+
+        <div class="u-im-chat-box__input">
+            <div class="u-im-chat-box__tools">
+                <slot name="input-tools"></slot>
+            </div>
+            <div class="u-im-chat-box__textarea">
+                <u-textarea v-model="inputText" :placeholder="placeholder" :maxlength="maxlength" :auto-height="true"
+                    @confirm="handleSend" />
+            </div>
+            <div class="u-im-chat-box__send">
+                <u-button type="primary" size="small" @click="handleSend">发送</u-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, watch, onMounted } from 'vue'
+import ChatMessageItem from '../chat-message-item/index.vue'
+
+interface Message {
+    id?: string | number
+    position: 'left' | 'right'
+    type: 'text' | 'image' | 'voice' | 'file'
+    content: string
+    avatar?: string
+    status?: 'sending' | 'success' | 'failed'
+    duration?: number
+    timestamp?: number
+}
+
+interface ChatBoxProps {
+    title?: string
+    messages?: Message[]
+    placeholder?: string
+    maxlength?: number
+    loading?: boolean
+}
+
+const props = withDefaults(defineProps<ChatBoxProps>(), {
+    title: '聊天',
+    messages: () => [],
+    placeholder: '请输入消息...',
+    maxlength: 1000,
+    loading: false
+})
+
+const emit = defineEmits<{
+    send: [message: string]
+    loadMore: []
+}>()
+
+const inputText = ref('')
+const messagesRef = ref<HTMLElement>()
+
+const handleSend = () => {
+    if (inputText.value.trim()) {
+        emit('send', inputText.value.trim())
+        inputText.value = ''
+    }
+}
+
+const shouldShowAvatar = (message: Message, index: number): boolean => {
+    if (index === 0) return true
+    const prevMessage = props.messages[index - 1]
+    if (prevMessage.position !== message.position ||
+        prevMessage.avatar !== message.avatar ||
+        (message.timestamp && prevMessage.timestamp &&
+            message.timestamp - prevMessage.timestamp > 300000)) // 5分钟
+    {
+        return true
+    }
+    return false
+}
+
+const scrollToBottom = () => {
+    nextTick(() => {
+        if (messagesRef.value) {
+            messagesRef.value.scrollTop = messagesRef.value.scrollHeight
+        }
+    })
+}
+
+watch(() => props.messages, () => {
+    scrollToBottom()
+}, { deep: true })
+
+onMounted(() => {
+    scrollToBottom()
+})
+</script>
+
+<style scoped>
+.u-im-chat-box {
+    display: flex;
+    flex-direction: column;
+    height: 600px;
+    border: 1px solid #e4e7ed;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.u-im-chat-box__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background-color: #f5f7fa;
+    border-bottom: 1px solid #e4e7ed;
+}
+
+.u-im-chat-box__title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #303133;
+}
+
+.u-im-chat-box__messages {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+    background-color: #fafafa;
+}
+
+.u-im-chat-box__loading {
+    display: flex;
+    justify-content: center;
+    padding: 16px;
+}
+
+.u-im-chat-box__input {
+    border-top: 1px solid #e4e7ed;
+    background-color: #fff;
+}
+
+.u-im-chat-box__tools {
+    padding: 8px 16px;
+    border-bottom: 1px solid #e4e7ed;
+}
+
+.u-im-chat-box__textarea {
+    padding: 12px 16px;
+}
+
+.u-im-chat-box__send {
+    padding: 0 16px 12px;
+    text-align: right;
+}
+</style>

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

@@ -0,0 +1,105 @@
+<!-- packages/chat-item/index.vue -->
+<template>
+    <div class="u-im-chat-item" :class="[`u-im-chat-item--${type}`]" @click="handleClick">
+        <div class="u-im-chat-item__avatar">
+            <u-avatar :src="avatar" size="40" />
+        </div>
+        <div class="u-im-chat-item__content">
+            <div class="u-im-chat-item__header">
+                <span class="u-im-chat-item__name">{{ name }}</span>
+                <span class="u-im-chat-item__time">{{ time }}</span>
+            </div>
+            <div class="u-im-chat-item__message">
+                <span class="u-im-chat-item__text">{{ lastMessage }}</span>
+                <u-badge v-if="unreadCount > 0" :value="unreadCount" max="99" class="u-im-chat-item__badge" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { withDefaults } from 'vue'
+
+interface ChatItemProps {
+    type?: 'default' | 'group'
+    avatar?: string
+    name: string
+    time: string
+    lastMessage: string
+    unreadCount?: number
+}
+
+// const props = 
+withDefaults(defineProps<ChatItemProps>(), {
+    type: 'default',
+    avatar: '',
+    unreadCount: 0
+})
+
+const emit = defineEmits<{
+    click: [event: MouseEvent]
+}>()
+
+const handleClick = (event: MouseEvent) => {
+    emit('click', event)
+}
+</script>
+
+<style scoped>
+.u-im-chat-item {
+    display: flex;
+    padding: 12px 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.u-im-chat-item:hover {
+    background-color: #f5f7fa;
+}
+
+.u-im-chat-item__avatar {
+    margin-right: 12px;
+}
+
+.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: 4px;
+}
+
+.u-im-chat-item__name {
+    font-size: 16px;
+    font-weight: 500;
+    color: #303133;
+}
+
+.u-im-chat-item__time {
+    font-size: 12px;
+    color: #909399;
+}
+
+.u-im-chat-item__message {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.u-im-chat-item__text {
+    font-size: 14px;
+    color: #606266;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+}
+
+.u-im-chat-item__badge {
+    margin-left: 8px;
+}
+</style>

package/src/components/chat-message-item/index.vue

@@ -0,0 +1,129 @@
+<!-- packages/chat-message-item/index.vue -->
+<template>
+    <div class="u-im-message-item" :class="[`u-im-message-item--${position}`]">
+        <div class="u-im-message-item__avatar" v-if="showAvatar">
+            <u-avatar :src="avatar" size="32" />
+        </div>
+        <div class="u-im-message-item__content">
+            <div class="u-im-message-item__bubble" :class="[`u-im-message-item__bubble--${type}`]">
+                <div v-if="type === 'text'" class="u-im-message-item__text">
+                    {{ content }}
+                </div>
+                <div v-else-if="type === 'image'" class="u-im-message-item__image">
+                    <u-image :src="content" width="200" height="150" mode="aspectFill" />
+                </div>
+                <div v-else-if="type === 'voice'" class="u-im-message-item__voice">
+                    <u-icon name="play-circle" size="20" />
+                    <span class="u-im-message-item__duration">{{ duration }}''</span>
+                </div>
+            </div>
+            <div class="u-im-message-item__status" v-if="position === 'right'">
+                <u-icon v-if="status === 'sending'" name="loading" size="16" color="#909399" />
+                <u-icon v-else-if="status === 'success'" name="checkmark" size="16" color="#67C23A" />
+                <u-icon v-else-if="status === 'failed'" name="close" size="16" color="#F56C6C" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { withDefaults } from 'vue'
+
+type MessageType = 'text' | 'image' | 'voice' | 'file'
+type MessagePosition = 'left' | 'right'
+type MessageStatus = 'sending' | 'success' | 'failed'
+
+interface ChatMessageItemProps {
+    position?: MessagePosition
+    type?: MessageType
+    content: string
+    avatar?: string
+    showAvatar?: boolean
+    status?: MessageStatus
+    duration?: number
+}
+
+// const props = 
+withDefaults(defineProps<ChatMessageItemProps>(), {
+    position: 'left',
+    type: 'text',
+    showAvatar: true,
+    status: 'success',
+    duration: 0
+})
+</script>
+
+<style scoped>
+.u-im-message-item {
+    display: flex;
+    margin-bottom: 16px;
+}
+
+.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 8px;
+    align-self: flex-end;
+}
+
+.u-im-message-item__content {
+    display: flex;
+    align-items: flex-end;
+    max-width: 70%;
+}
+
+.u-im-message-item__bubble {
+    padding: 8px 12px;
+    border-radius: 8px;
+    position: relative;
+}
+
+.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: 4px;
+    overflow: hidden;
+}
+
+.u-im-message-item__voice {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background-color: #f0f2f5;
+    border-radius: 16px;
+}
+
+.u-im-message-item--right .u-im-message-item__voice {
+    background-color: #409eff;
+    color: #fff;
+}
+
+.u-im-message-item__duration {
+    font-size: 12px;
+}
+
+.u-im-message-item__status {
+    margin: 0 4px;
+    display: flex;
+    align-items: center;
+}
+</style>

package/src/index.ts

@@ -0,0 +1,38 @@
+import { App } from 'vue'
+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 * from './types'
+
+// 导出工具函数
+export * from './utils'
+
+// 重要：为组件添加名称，以支持开发环境
+ChatItem.name = 'ChatItem'
+ChatMessageItem.name = 'ChatMessageItem'
+ChatBox.name = 'ChatBox'
+
+const components = [
+    ChatItem,
+    ChatMessageItem,
+    ChatBox
+]
+
+const install = (app: App): void => {
+    components.forEach(component => {
+        app.component(component.name || '', component)
+    })
+}
+
+export {
+    ChatItem,
+    ChatMessageItem,
+    ChatBox,
+    install
+}
+
+export default {
+    install
+}

package/src/types/index.ts

@@ -0,0 +1,183 @@
+import type { RTC_STATE, MESSAGE_TYPE } from '../utils/enums'
+
+export * from './user'
+export * from './recorder'
+
+/**
+ * 通话模式类型
+ */
+export type RtcMode = 'audio' | 'video' | 'voice'
+
+/**
+ * RTC 信息接口
+ */
+export interface RtcInfo {
+  friend: Friend
+  mode: RtcMode
+  state: RTC_STATE
+  isHost?: boolean
+}
+
+/**
+ * 聊天
+*/
+export interface Chat {
+  id?: string | number
+  targetId: number
+  type: 'PRIVATE' | 'GROUP'
+  showName: string
+  headImage: string
+  isDnd: boolean
+  lastContent: string
+  lastSendTime?: number
+  unreadCount: number
+  hotMinIdx: number
+  readedMessageIdx: number
+  messages: Message[]
+  atMe: boolean
+  atAll: boolean
+  stored: boolean
+  delete: boolean
+  lastTimeTip?: number
+  sendNickName?: string
+}
+
+/**
+ * 消息
+*/
+export interface Message {
+  id?: number
+  tmpId?: number
+  type: number
+  content: string
+  sendTime?: number
+  selfSend?: boolean
+  status?: number
+  sendNickName?: string
+  atUserIds?: number[]
+  sendId?: number
+  recvId?: number
+  groupId?: number
+  receipt?: boolean
+  receiptOk?: boolean
+  readedCount?: number
+  quoteMessage?: Message
+  fileId?: string
+}
+
+/**
+ * 好友信息接口
+ */
+export interface Friend {
+  id: number
+  nickName: string
+  headImage?: string
+  online: boolean
+  onlineWeb: boolean
+  onlineApp: boolean
+  isDnd: boolean
+  deleted?: boolean
+  remarkName?: string
+  gender?: number
+  signature?: string
+  remarkNickName?: string
+  showNickName?: string
+  [key: string]: any
+}
+
+/**
+ * 在线终端信息接口
+ */
+export interface OnlineTerminal {
+  userId: string | number
+  terminals: number[]
+}
+
+/**
+ * 菜单项
+*/
+export interface MenuItem {
+  key: string
+  name: string
+  icon?: string
+  color?: string
+  [key: string]: any
+}
+
+export interface WebRTCMessage {
+  type: number
+  content: string
+  sendId: number
+  selfSend?: boolean
+}
+
+export interface GroupMember {
+  id?: number
+  userId: number
+  showNickName: string
+  headImage?: string
+  quit?: boolean
+  [key: string]: any
+}
+
+/**
+ * 群组信息接口
+ */
+export interface Group {
+  id: number
+  ownerId: number
+  isBanned?: boolean
+  reason?: string
+  name: string
+  headImage: string
+  isDnd: boolean
+  quit?: boolean
+  topMessage?: string
+  memberCount?: number
+  createTime?: number
+  showGroupName: string
+  headImageThumb?: string
+  remarkGroupName?: string
+  remarkNickName?: string
+  notice?: string
+  [key: string]: any
+}
+
+/**
+ * 上传图片相应数据
+ */
+export interface UploadImageResponse {
+  originUrl: string
+  thumbUrl: string
+  [key: string]: any
+}
+
+/**
+ * 发送消息项
+ */
+export interface SubmitItem {
+  type: MESSAGE_TYPE // 'text' | 'image' | 'file'
+  content: string | ImageItem | FileItem
+  atUserIds?: number[]
+}
+
+export interface ImageItem {
+  fileId: number
+  file: File
+  url: string
+}
+
+export interface FileItem {
+  fileId: number
+  file: File
+}
+
+export interface ApiResponse<T = any> {
+  data?: T
+  code?: number
+  message?: string
+  success?: boolean
+  timestamp?: number
+  path?: string
+}
+

package/src/types/recorder.ts

@@ -0,0 +1,21 @@
+// -----------------------------
+// Recorder
+// -----------------------------
+export interface RecorderError {
+  errMsg: string;
+}
+
+export interface UploadRecorderFileResponse {
+  code: number;
+  data: string;
+  message?: string;
+}
+
+export interface UploadRecorderFileResult {
+  duration: number;
+  url: string;
+}
+
+export interface RecorderFile {
+  tempFilePath: string;
+}

package/src/types/user.ts

@@ -0,0 +1,19 @@
+/**
+ * 用户信息接口
+ */
+export interface UserInfo {
+  id: number
+  nickName: string
+  headImage: string
+  headImageThumb?: string
+  email?: string
+  phone?: string
+  gender?: number
+  signature?: string
+  isBanned?: boolean
+  reason?: string
+  userName?: string
+  sex?: number
+  online?: boolean
+  [key: string]: any
+}

package/src/utils/auth.ts

@@ -0,0 +1,32 @@
+export const setToken = (value: string) => {
+  uni.setStorageSync("accessToken", value);
+};
+
+export const getToken = (): string => {
+  return uni.getStorageSync("accessToken") || "";
+};
+
+export const setRefreshToken = (value: string) => {
+  uni.setStorageSync("refreshToken", value);
+};
+
+export const getRefreshToken = (): string => {
+  return uni.getStorageSync("refreshToken") || "";
+};
+
+export const clearToken = () => {
+  uni.removeStorageSync("accessToken");
+  uni.removeStorageSync("refreshToken");
+};
+
+export const setAuth = (data: any) => {
+  setToken(data.accessToken)
+  setRefreshToken(data.refreshToken)
+  uni.setStorageSync('expired', +new Date() + Number(data.expiresIn) * 60 * 60)
+}
+
+export const isAuthed = () => {
+  const expired = uni.getStorageSync('expired')
+  const token = getToken()
+  return !(!expired || expired < +new Date() || !token)
+}