mdm-im-v3 1.4.7 → 2.0.1

package/CHANGELOG.md

@@ -62,4 +62,13 @@
 ## V1.4.7 2026-08-12
 - 发布mdm-im-v3@1.4.7版本
 1. 插件样式引入不全问题修复；
-2. 打包时增加代码压缩及代码分析。
+2. 打包时增加代码压缩及代码分析。
+
+## V2.0.0 2026-08-17
+- 发布mdm-im-v3@2.0.0版本
+1. 插件引入H5版本，使用方式详见README.md文档。
+
+## V2.0.1 2026-08-17
+- 发布mdm-im-v3@2.0.1版本
+1. 修复H5组件在调用时不渲染页面问题；
+2. 补充License文件。

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 zhencanhua
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,50 @@
 # mdm-im-v3
 
-基于 OpenIM SDK 的 Vue 3 即时通讯组件库，提供会话列表、单聊/群聊消息、文件收发、入群审批等功能。
+基于 OpenIM SDK 的 Vue 3 即时通讯组件库，提供会话列表、单聊/群聊消息、文件收发、入群审批等功能。**同时支持 PC 端（Element-Plus）和 H5 移动端（Vant 4）**，打包后通过 npm 分发，由同一包提供双端组件。
 
 ## 技术栈
 
 - Node 18+（推荐 Node 20+ LTS）
-- Vue 3 + ElementPlus
+- Vue 3 + Pinia + vue-router
 - OpenIM client-sdk（`@openim/client-sdk@0.0.18`） [技术文档](https://doc.rentsoft.cn/zh-hans/sdks/quickstart/browser)
+- PC 端：Element-Plus / H5 端：Vant 4
+
+## npm 包目录结构
+
+安装 `mdm-im-v3` 后，node_modules 中的包目录如下：
+
+```
+node_modules/mdm-im-v3/
+├── dist/                            # PC 端构建产物
+│   ├── index.es.js                  #   入口（导出 mdmImV3 组件）
+│   ├── core.es.js                   #   入口（导出 useMessage + useChatStore）
+│   ├── style/index.css              #   样式文件
+│   ├── index-*.js                   #   内部代码分割文件（Vite 自动分包）
+│   ├── wangeditor-*.js              #   富文本编辑器分包
+│   ├── vue-office-*.js              #   文档预览分包
+│   └── assets/                      #   图片/字体等资源文件
+├── dist-h5/                         # H5 端构建产物
+│   ├── index.es.js                  #   入口（导出 mdmImV3H5 组件，内部自带路由）
+│   ├── style/index-h5.css           #   样式文件
+│   ├── *H5-*.js                     #   按路由拆分的页面代码
+│   └── assets/                      #   图片/字体等资源文件
+├── package.json                     # package exports 定义导入路径映射
+└── README.md
+```
+
+### 导入路径映射
+
+`package.json` 的 `exports` 字段定义了以下导入路径，消费方使用路径名导入即可，无需关心内部目录结构：
+
+| 导入路径 | 对应文件 | 导出内容 | 用途 |
+|---------|---------|---------|------|
+| `mdm-im-v3` | `dist/index.es.js` | `mdmImV3` | PC 端主组件 |
+| `mdm-im-v3/core` | `dist/core.es.js` | `useMessage`, `useChatStore` | IM 登录/通信核心（PC/H5 通用） |
+| `mdm-im-v3/h5` | `dist-h5/index.es.js` | `mdmImV3H5` | H5 端主组件（内部自带路由） |
+| `mdm-im-v3/style/index.css` | `dist/style/index.css` | CSS | PC 端样式文件 |
+| `mdm-im-v3/style/index-h5.css` | `dist-h5/style/index-h5.css` | CSS | H5 端样式文件 |
+
+> **核心原则：** `mdm-im-v3/core` 在两端通用，PC 端额外导入 `mdm-im-v3`（组件）和 `mdm-im-v3/style/index.css`（样式），H5 端额外导入 `mdm-im-v3/h5`（组件）和 `mdm-im-v3/style/index-h5.css`（样式）。
 
 ## 安装
 
@@ -14,13 +52,29 @@
 pnpm i mdm-im-v3@latest -S
 ```
 
-本库依赖以下 peer dependencies，需在项目中自行安装：
+### 安装 peer 依赖
+
+> **PC 端** 需安装以下依赖（选择你自己的包管理器）：
 
 ```bash
 pnpm i vue@^3.5 element-plus@^2.9 @element-plus/icons-vue@^2.3 pinia@^3.0 pinia-plugin-persist@^1.0 vue-router@^4.5 axios@^1.8 sass@^1.86 -S
 ```
 
-## 快速开始
+> **H5 端** 同样需要安装 Vue 等基础依赖，但**无需安装 element-plus**，改为安装 Vant：
+
+```bash
+# H5 端需要的基础依赖（与 PC 端共享 pinia、vue-router、sass 等）
+pnpm i vue@^3.5 pinia@^3.0 pinia-plugin-persist@^1.0 vue-router@^4.5 axios@^1.8 sass@^1.86 -S
+
+# H5 端额外需要 Vant
+pnpm i vant@^4.10 -S
+```
+
+> **H5 端不需要安装** `element-plus` 和 `@element-plus/icons-vue`。
+
+---
+
+## PC 端使用
 
 ### 方式一：autoLogin（推荐）
 
@@ -62,11 +116,10 @@ const handleLogin = () => {
 3. 组件自动读取 store 中的已登录状态和 `window.imInstance`，无需重复初始化
 
 ```js
-// ========== 步骤1：core/index.js — 应用入口处登录 IM ==========
+// ========== 步骤1：应用入口处登录 IM ==========
 import { watch } from 'vue'
 import { useMessage } from 'mdm-im-v3/core'
 
-// 传入配置参数，自动保存到 store；同时解构出 loginStatus 用于监控
 const { initIMSDK, getUnReadMessageCount, loginStatus, messageStore } = useMessage({
   userID: 'your-account',        // 用户 ID，必填
   nickname: 'your-name',          // 用户昵称
@@ -85,14 +138,13 @@ await initIMSDK()
 // 监控 IM 登录状态，登录成功后获取未读数
 watch(loginStatus, status => {
   if (status === 3) {
-    // 从服务端获取未读消息总数
     getUnReadMessageCount(true)
   }
 })
 ```
 
 ```vue
-<!-- ========== 步骤2：IM 页面 — 切换菜单后渲染组件 ========== -->
+<!-- ========== 步骤2：切换菜单后渲染 PC 组件 ========== -->
 <template>
   <mdm-im-v3 ref="chatRef" theme="dark" />
 </template>
@@ -107,7 +159,204 @@ const chatRef = ref()
 </script>
 ```
 
-> **原理：** `useMessage()` 内部自动将配置存入 Pinia store（`useChatStore`），`initIMSDK()` 创建的 IM 实例挂载到 `window.imInstance`。<mdm-im-v3> 组件挂载时检测到 `loginStatus === 3`（已登录），直接复用已有的 IM 实例和会话数据，无需二次登录。</mdm-im-v3>
+> **原理：** `useMessage()` 内部自动将配置存入 Pinia store（`useChatStore`），`initIMSDK()` 创建的 IM 实例挂载到 `window.imInstance`。<mdm-im-v3> 组件挂载时检测到 `loginStatus === 3`（已登录），直接复用已有的 IM 实例和会话数据，无需二次登录。
+
+---
+
+## H5 移动端使用
+
+本库同时提供 H5 移动端组件，基于 Vant 4 UI 库构建，采用独立全屏页面路由（区别于 PC 端左右分栏布局）。H5 端从 **`mdm-im-v3/h5`** 路径导入组件，**与 PC 端一样，只需要一个入口组件，无需暴露路由**。
+
+### 前置准备
+
+H5 端需要安装 Vant 并在入口文件中注册：
+
+```bash
+pnpm i vant@^4.10 -S
+```
+
+### 入口文件（main.js）
+
+```js
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import PiniaPersist from 'pinia-plugin-persist'
+import Vant from 'vant'
+import 'vant/lib/index.css'
+import 'mdm-im-v3/style/index-h5.css'
+import { mdmImV3H5 } from 'mdm-im-v3/h5'
+
+import App from './App.vue'
+
+const app = createApp(App)
+const pinia = createPinia()
+pinia.use(PiniaPersist)
+
+app.use(pinia)
+app.use(Vant)
+app.mount('#app')
+```
+
+> **注意：** H5 路由使用 `createWebHashHistory`，共有 11 个页面路径，**全部内聚在 `mdmImV3H5` 组件内部**，消费方无需注册路由，只需在模板中放置 `<mdm-im-v3-h5>` 标签即可。
+
+### 根组件（App.vue）
+
+```vue
+<template>
+  <mdm-im-v3-h5 ref="h5Ref" theme="light" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { mdmImV3H5 } from 'mdm-im-v3/h5'
+
+const h5Ref = ref()
+</script>
+```
+
+### 方式一：autoLogin（推荐）
+
+通过组件暴露的 `autoLogin` 方法一键完成初始化、登录和会话加载，**与 PC 端完全一致**：
+
+```vue
+<template>
+  <mdm-im-v3-h5 ref="h5Ref" theme="light" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { mdmImV3H5 } from 'mdm-im-v3/h5'
+
+const h5Ref = ref()
+
+const handleLogin = () => {
+  h5Ref.value.autoLogin({
+    loginCode: 'your-account',   // 用户登录账号，必填
+    userName: 'your-name',       // 用户名
+    imToken: 'your-im-token',    // OpenIM 用户令牌，必填
+    satoken: 'your-system-token',// 系统 token（上传文件等接口使用）
+    apiUrl: 'https://your-api-url:8443',   // IM api 地址，必填
+    platformID: 5,               // IM 平台标识，可选，5-网页端
+  })
+}
+</script>
+```
+
+`autoLogin` 内部自动完成：store 写入用户信息 → 初始化 IM SDK → 登录 → 轮询登录状态 → 状态变为已登录后自动跳转到会话列表页。
+
+### 方式二：分步加载（手动控制登录流程）
+
+适用于**先登录 IM 获取未读数 → 再切换到 IM 页面展示内容**的场景，与 PC 端流程一致：
+
+```js
+// ========== 步骤1：应用入口处登录 IM ==========
+import { watch } from 'vue'
+import { useMessage } from 'mdm-im-v3/core'
+
+const { initIMSDK, getUnReadMessageCount, loginStatus } = useMessage({
+  userID: 'your-account',
+  nickname: 'your-name',
+  imToken: 'your-im-token',
+  satoken: 'your-system-token',
+  apiUrl: 'https://your-api-url:8443',
+  wsUrl: 'wss://your-ws-url:8443',
+  platformID: 5,
+})
+
+// 初始化并登录
+await initIMSDK()
+
+// 监控 IM 登录状态，登录成功后获取未读数
+watch(loginStatus, status => {
+  if (status === 3) {
+    getUnReadMessageCount(true)
+  }
+})
+```
+
+```vue
+<!-- ========== 步骤2：切换菜单后渲染 H5 组件 ========== -->
+<template>
+  <mdm-im-v3-h5 ref="h5Ref" theme="light" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { mdmImV3H5 } from 'mdm-im-v3/h5'
+// 组件会自动读取 store 和 window.imInstance，无需再次初始化
+
+const h5Ref = ref()
+</script>
+```
+
+> **原理：** `useMessage()` 内部自动将配置存入 Pinia store（`useChatStore`），`initIMSDK()` 创建的 IM 实例挂载到 `window.imInstance`。`<mdm-im-v3-h5>` 组件挂载时检测到 `loginStatus === 3`（已登录），直接复用已有的 IM 实例和会话数据，无需二次登录。
+
+### H5 内置路由表
+
+以下路由全部内聚在 `mdmImV3H5` 组件内部，消费方无需关心：
+
+| 路径 | 组件 | 说明 |
+|------|------|------|
+| `/` | 会话列表主页 | 展示会话列表，支持滑动操作 |
+| `/chat` | 聊天页 | 消息列表 + 文字/图片/文件输入 |
+| `/search` | 搜索页 | 搜索用户和本地会话 |
+| `/notice` | 群通知 | 入群申请审批列表 |
+| `/create-group` | 创建群组 | 选择成员创建群聊 |
+| `/select-members` | 选择成员 | 通用人员选择器 |
+| `/member-detail` | 人员详情 | 单聊/群成员信息卡片 |
+| `/chat-settings` | 聊天设置 | 免打扰/清聊天记录/退出群聊 |
+| `/group-announcement` | 群公告 | 查看/编辑群公告 |
+| `/chat-history` | 聊天记录 | 按日期查看历史消息 |
+| `/group-members` | 群成员列表 | 展示/管理群成员 |
+
+### H5 组件 Props
+
+| Prop | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `theme` | `String` | `'light'` | 主题：`'dark'` / `'light'` |
+| `baseConfig` | `Object` | `{}` | IM 配置对象 |
+| `groupID` | `String` | `''` | 指定群组 ID，登录后直接打开该群 |
+| `loadMessageCount` | `Number` | `50` | 每次加载的历史消息数量（10–100） |
+| `tenantID` | `String\|Number` | `'1'` | 租户 ID |
+| `onKeywordCheck` | `Boolean` | `false` | 是否启用外部敏感词校验 |
+| `outsideHandleUser` | `Boolean` | `false` | 是否由外部处理人员选择 |
+
+### H5 组件暴露的方法
+
+通过 `ref` 调用 `<mdm-im-v3-h5>`：
+
+```ts
+// autoLogin — 一键登录
+h5Ref.value.autoLogin({
+  loginCode: string    // 用户登录账号，必填
+  userName?: string    // 用户名
+  imToken: string      // OpenIM 用户令牌，必填
+  satoken?: string     // 系统 token
+  apiUrl: string       // IM API 地址，必填
+  platformID?: number  // IM 平台标识（默认 5-网页端）
+})
+
+// checkLogin() — 检测 store 中已有登录状态后跳转到会话列表页
+h5Ref.value.checkLogin()
+```
+
+### H5 端与 PC 端差异
+
+| 维度 | PC | H5 |
+|------|----|----|
+| **导入路径** | `mdm-im-v3` | `mdm-im-v3/h5` |
+| **导入内容** | `mdmImV3`（组件） | `mdmImV3H5`（组件） |
+| **核心库** | `mdm-im-v3/core` | `mdm-im-v3/core`（共享） |
+| **样式入口** | `mdm-im-v3/style/index.css` | `mdm-im-v3/style/index-h5.css` |
+| **UI 库** | Element-Plus | Vant 4 |
+| **布局** | 左右分栏（会话列表 + 聊天面板同屏） | 独立全屏页面，路由导航 |
+| **路由** | 无内置路由，消费方自行管理 | 内置路由（hash 模式，11 页面），内聚在组件内部 |
+| **消息输入** | 富文本编辑器（@wangeditor） | 纯文本 `<textarea>` |
+| **会话操作** | 右键 contextmenu 菜单 | 左滑操作 + 长按 ActionSheet |
+| **截图** | 支持 `js-web-screen-shot` | 不支持 |
+| **下拉刷新/无限滚动** | 自定义滚动事件 | `van-pull-refresh` + `van-list` |
+
+---
 
 ## 组件 Props
 
@@ -115,7 +364,7 @@ const chatRef = ref()
 |------|------|--------|------|
 | `theme` | `String` | `'dark'` | 主题：`'dark'`（深色） / `'light'`（浅色） |
 | `baseConfig` | `Object` | `{}` | IM 配置对象，见下方说明 |
-| `showConversationList` | `Boolean` | `true` | 是否显示左侧会话列表 |
+| `showConversationList` | `Boolean` | `true` | 是否显示左侧会话列表（仅 PC 端有效） |
 | `groupID` | `String` | `''` | 指定群组 ID，登录后直接打开该群会话 |
 | `loadMessageCount` | `Number` | `50` | 每次加载的历史消息数量（范围 10–100） |
 | `tenantID` | `String\|Number` | `'1'` | 租户 ID，随消息扩展字段发送 |
@@ -161,18 +410,18 @@ const chatRef = ref()
 
 无返回值。方法内部完成 store 写入、SDK 初始化、登录、轮询状态直到会话列表加载完毕。
 
-### `afterLogged()`
+### `checkLogin()`
+
+轮询检测登录状态：当 store 中 `loginStatus === 3`（已登录）且 `window.imInstance` 存在时，自动调用内部 `afterLogged()` 拉取会话列表。配合方式二（手动 `useMessage` 登录）使用；方式一（`autoLogin`）内部已自动调用。
 
-IM 登录成功后调用，拉取会话列表。配合方式二使用，方式一（`autoLogin`）内部已自动调用。
+> 注：`afterLogged()` 为组件内部方法，未通过 `defineExpose` 暴露，外部请调用 `checkLogin()` 触发会话加载。
 
 ### `sendCheckedText({ list, isReply, atUserList })`
 
 发送经过敏感词校验后的文本。与 `send-chat-text` 事件配合使用：
 
 ```js
-// 父组件中
 const handleSendChatText = ({ list, isReply, atUserList }) => {
-  // 调用外部敏感词过滤接口...
   const filteredList = keywordFilter(list)
   chatRef.value.sendCheckedText({ list: filteredList, isReply, atUserList })
 }
@@ -187,20 +436,15 @@ chatRef.value.inviteUser('group-id-xxx', ['user1', 'user2'])
 // 返回 Promise<boolean>
 ```
 
-### `openGroupApplications()`
-
-打开入群申请审批抽屉（群主/管理员审批入口）。
-
 ---
 
 ## `useMessage` API
 
-从 `mdm-im-v3/core` 导入，用于手动管理 IM 生命周期。该模块同时导出 `useMessage` 和 `useChatStore`：
+从 `mdm-im-v3/core` 导入，PC / H5 两端通用，用于手动管理 IM 生命周期：
 
 ```js
 import { useMessage, useChatStore } from 'mdm-im-v3/core'
 
-// useMessage 内部自动引入 useChatStore，无需从外部传入 store
 const { initIMSDK, clearInstance, getUnReadMessageCount, setConversationMsgAsRead, mittBus } = useMessage({
   userID: 'your-account',
   nickname: 'your-name',
@@ -315,7 +559,6 @@ const chatStore = useChatStore()
 ```js
 const { mittBus } = useMessage()
 mittBus.on('LOGOUT_NOTICE', () => {
-  // 处理被强制下线
   router.push('/login')
 })
 ```
@@ -325,11 +568,8 @@ mittBus.on('LOGOUT_NOTICE', () => {
 支持深色（`dark`）和浅色（`light`）两套主题，通过 CSS 变量驱动：
 
 ```html
-<!-- 深色主题 -->
 <mdm-im-v3 theme="dark" />
-
-<!-- 浅色主题 -->
 <mdm-im-v3 theme="light" />
 ```
 
-主题 CSS 变量定义在 `chat-dark-theme` / `chat-light-theme` 类名下，可通过覆盖 CSS 变量进行自定义。
+主题 CSS 变量定义在 `chat-dark-theme` / `chat-light-theme` 类名下，可通过覆盖 CSS 变量进行自定义。

package/dist/{FilePreview-BpaMMzaM.js → FilePreview-DdtQxMbG.js}

@@ -1,8 +1,8 @@
 import { reactive, computed, ref, watch, nextTick, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, withCtx, unref, createElementVNode, withModifiers, toDisplayString, createCommentVNode, normalizeStyle, createBlock, resolveDynamicComponent } from "vue";
 import { DocumentDelete, ZoomOut, ZoomIn } from "@element-plus/icons-vue";
-import { u as useChatStore } from "./index-CD9kb61K.js";
+import { u as useChatStore } from "./index-Bb8V05H4.js";
 import axios from "axios";
-import { _ as _export_sfc } from "./index-SS122_Ak.js";
+import { _ as _export_sfc } from "./index-Bi1CnpxN.js";
 const _hoisted_1 = { class: "file-preview-box" };
 const _hoisted_2 = {
   key: 0,
@@ -378,7 +378,7 @@ const _sfc_main = {
     };
   }
 };
-const FilePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ac8cc8b1"]]);
+const FilePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a7139ea8"]]);
 export {
   FilePreview as default
 };

package/dist/core.es.js

@@ -1,5 +1,5 @@
 import "vue";
-import { u, A } from "./index-CD9kb61K.js";
+import { u, A } from "./index-Bb8V05H4.js";
 export {
   u as useChatStore,
   A as useMessage