@cys26/zpb-comp 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @cys26/zpb-comp
 
-基于 Vue 3 的业务组件库，当前提供 **聊天文字气泡** `ChatTextBubble`，适用于 **uni-app / Vite** 等能直接编译 `node_modules` 内 `.vue` 源码的工程。
+基于 Vue 3 的业务组件库，当前提供聊天文字气泡 **`zp-chat-text-bubble`**（与 wot-ui 类似的 `zp-` 前缀目录结构），适用于 **uni-app / Vite** 等能直接编译 `node_modules` 内 `.vue` 源码的工程。
 
 ## 安装
 
@@ -12,9 +12,36 @@ npm install @cys26/zpb-comp
 
 依赖：**Vue ^3.5**（已声明为 `peerDependencies`，请在使用方项目中安装 Vue）。
 
-## 使用 ChatTextBubble
+## uni-app：easycom 自动引入（推荐）
 
-### 方式一：默认插件（全局注册 `ChatTextBubble`）
+在 **`pages.json`** 的 `easycom.custom` 中增加（将包名换成你实际安装的 scope）：
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^zp-(.*)": "@cys26/zpb-comp/src/components/zp-$1/zp-$1.vue"
+    }
+  }
+}
+```
+
+页面模板里**无需 import**，直接使用与路径一致的标签名，例如聊天气泡：
+
+```vue
+<zp-chat-text-bubble
+  role="receiver"
+  avatar-text="收"
+  text="正文内容"
+/>
+```
+
+规则说明：标签 `zp-chat-text-bubble` 对应目录 `components/zp-chat-text-bubble/zp-chat-text-bubble.vue`，与 `'^wd-(.*)': '@wot-ui/ui/components/wd-$1/wd-$1.vue'` 同一套写法。
+
+## 其他用法
+
+### 默认插件（全局注册 `ZpChatTextBubble`）
 
 ```ts
 // main.ts
@@ -28,34 +55,28 @@ export function createApp() {
 }
 ```
 
-模板中直接使用：
+模板中可使用 `<ZpChatTextBubble />` 或 `<zp-chat-text-bubble />`。
 
-```vue
-<ChatTextBubble
-  role="receiver"
-  avatar-text="收"
-  text="正文内容"
-/>
-```
-
-### 方式二：具名导出（按需 import）
+### 具名导出（按需 import）
 
 ```vue
 <script setup lang="ts">
-import { ChatTextBubble } from '@cys26/zpb-comp'
+import { ZpChatTextBubble } from '@cys26/zpb-comp'
 </script>
 
 <template>
-  <ChatTextBubble role="sender" avatar-text="我" text="发送方气泡" />
+  <ZpChatTextBubble role="sender" avatar-text="我" text="发送方气泡" />
 </template>
 ```
 
-### 方式三：深路径导入单个 SFC（便于 easycom 或路径约定）
+### 深路径导入 SFC
 
 ```ts
-import ChatTextBubble from '@cys26/zpb-comp/components/chat-text-bubble/chat-text-bubble.vue'
+import ZpChatTextBubble from '@cys26/zpb-comp/components/zp-chat-text-bubble/zp-chat-text-bubble.vue'
 ```
 
+旧路径 `components/chat-text-bubble/chat-text-bubble.vue` 在 `package.json` 的 `exports` 中仍重定向到新文件，便于渐进迁移。
+
 ## 发布说明（维护者）
 
 作用域包发布到 npm 公共仓库：

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "基于 uni-app 原生能力的业务组件库（H5 / 小程序等）",
   "type": "module",
   "engines": {
@@ -18,7 +18,8 @@
       "import": "./src/index.ts",
       "default": "./src/index.ts"
     },
-    "./components/chat-text-bubble/chat-text-bubble.vue": "./src/components/chat-text-bubble/chat-text-bubble.vue"
+    "./components/zp-chat-text-bubble/zp-chat-text-bubble.vue": "./src/components/zp-chat-text-bubble/zp-chat-text-bubble.vue",
+    "./components/chat-text-bubble/chat-text-bubble.vue": "./src/components/zp-chat-text-bubble/zp-chat-text-bubble.vue"
   },
   "files": [
     "src"

package/src/components/{chat-text-bubble/chat-text-bubble.vue → zp-chat-text-bubble/zp-chat-text-bubble.vue}

@@ -2,12 +2,12 @@
 import { computed, onUnmounted, ref, watch } from 'vue'
 
 defineOptions({
-  name: 'ChatTextBubble',
+  name: 'ZpChatTextBubble',
 })
 
 const props = withDefaults(
   defineProps<{
-    /** 发送方：右侧绿气泡；接收方：左侧白气泡 */
+    /** 发送方：右侧绿气泡；接收方：左侧白底气泡 */
     role: 'sender' | 'receiver'
     /** 头像内展示文案，通常取昵称首字 */
     avatarText?: string

package/src/index.ts

@@ -1,14 +1,11 @@
 import type { App, Plugin } from 'vue'
-import ChatTextBubble from './components/chat-text-bubble/chat-text-bubble.vue'
+import ZpChatTextBubble from './components/zp-chat-text-bubble/zp-chat-text-bubble.vue'
 
-export type { ZpChatFrom, ZpChatMessage } from './types/chat'
-export { ZP_CHAT_STREAM_END } from './types/chat'
-
-export { ChatTextBubble }
+export { ZpChatTextBubble }
 
 const plugin: Plugin = {
   install(app: App) {
-    app.component('ChatTextBubble', ChatTextBubble)
+    app.component('ZpChatTextBubble', ZpChatTextBubble)
   },
 }
 

package/src/types/chat.ts

@@ -1,14 +0,0 @@
-export type ZpChatFrom = 'self' | 'peer'
-
-/** 单条消息：流式场景用 segments 多段拼接展示 */
-export interface ZpChatMessage {
-  id: string
-  from: ZpChatFrom
-  segments: string[]
-  ts: number
-  /** 为 true 时在文本末尾显示闪烁光标（流式未结束） */
-  printing?: boolean
-}
-
-/** 与后端约定：单独一帧为该值（trim 后）表示本条流结束，不展示该帧 */
-export const ZP_CHAT_STREAM_END = 'end'