@cys26/zpb-comp 0.1.0

package/README.md

@@ -0,0 +1,83 @@
+# @cys26/zpb-comp
+
+基于 Vue 3 的业务组件库，当前提供 **聊天文字气泡** `ChatTextBubble`，适用于 **uni-app / Vite** 等能直接编译 `node_modules` 内 `.vue` 源码的工程。
+
+## 安装
+
+```bash
+pnpm add @cys26/zpb-comp
+# 或
+npm install @cys26/zpb-comp
+```
+
+依赖：**Vue ^3.5**（已声明为 `peerDependencies`，请在使用方项目中安装 Vue）。
+
+## 使用 ChatTextBubble
+
+### 方式一：默认插件（全局注册 `ChatTextBubble`）
+
+```ts
+// main.ts
+import { createSSRApp } from 'vue'
+import ZpbComponents from '@cys26/zpb-comp'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  app.use(ZpbComponents)
+  return { app }
+}
+```
+
+模板中直接使用：
+
+```vue
+<ChatTextBubble
+  role="receiver"
+  avatar-text="收"
+  text="正文内容"
+/>
+```
+
+### 方式二：具名导出（按需 import）
+
+```vue
+<script setup lang="ts">
+import { ChatTextBubble } from '@cys26/zpb-comp'
+</script>
+
+<template>
+  <ChatTextBubble role="sender" avatar-text="我" text="发送方气泡" />
+</template>
+```
+
+### 方式三：深路径导入单个 SFC（便于 easycom 或路径约定）
+
+```ts
+import ChatTextBubble from '@cys26/zpb-comp/components/chat-text-bubble/chat-text-bubble.vue'
+```
+
+## 发布说明（维护者）
+
+作用域包发布到 npm 公共仓库：
+
+```bash
+pnpm publish --access public
+```
+
+若 pnpm 提示 `ERR_PNPM_GIT_UNCLEAN`，请先 `git commit`（推荐，便于与 npm 版本对应），或临时加上 `--no-git-checks`。
+
+或使用仓库脚本（已带 `--no-git-checks`，未提交也可发版；`prepublishOnly` 会先做一次 `npm pack --dry-run` 检查）：
+
+```bash
+pnpm run publish:npm
+```
+
+（若你希望脚本**不**跳过 Git 检查，可自行改回 `pnpm publish --access public` 并在发版前提交代码。）
+
+**注意：** npm 上作用域 `@cys26` 须由你的账号或组织拥有；若包名与账号不一致，请修改根目录 `package.json` 中的 `name` 字段，并同步更新本文档与业务项目里的依赖名。
+
+将 `repository.url` 填为真实 Git 地址后，npm 项目页会显示源码链接。
+
+## 许可
+
+MIT

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@cys26/zpb-comp",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "基于 uni-app 原生能力的业务组件库（H5 / 小程序等）",
+  "type": "module",
+  "engines": {
+    "pnpm": ">=9.0.0"
+  },
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "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"
+  },
+  "files": [
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.vue",
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.4.31",
+    "sass": "^1.99.0",
+    "sass-embedded": "^1.89.2",
+    "typescript": "^5.9.3",
+    "vitepress": "^1.6.4",
+    "vue": "^3.5.34"
+  },
+  "keywords": [
+    "uni-app",
+    "uniapp",
+    "components",
+    "chat",
+    "im"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "scripts": {
+    "publish:npm": "pnpm publish --access public --no-git-checks",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "play:dev": "pnpm --filter zpb-playground dev:h5",
+    "play:mp-weixin": "pnpm --filter zpb-playground dev:mp-weixin",
+    "play:build:mp-weixin": "pnpm --filter zpb-playground build:mp-weixin"
+  }
+}

package/src/components/chat-text-bubble/chat-text-bubble.vue

@@ -0,0 +1,246 @@
+<script lang="ts" setup>
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+defineOptions({
+  name: 'ChatTextBubble',
+})
+
+const props = withDefaults(
+  defineProps<{
+    /** 发送方：右侧绿气泡；接收方：左侧白气泡 */
+    role: 'sender' | 'receiver'
+    /** 头像内展示文案，通常取昵称首字 */
+    avatarText?: string
+    /** 完整正文；流式时父组件追加本字段，由本组件逐字展示 */
+    text: string
+    /** 为 true 时按 msPerChar 从 0 追上 text 长度 */
+    typing?: boolean
+    /** 流式结束（如收到 end）；为 true 且已展示至末尾时触发 stream-complete */
+    streamClosed?: boolean
+    msPerChar?: number
+    selectable?: boolean
+  }>(),
+  {
+    avatarText: '',
+    typing: false,
+    streamClosed: true,
+    msPerChar: 45,
+    selectable: true,
+  },
+)
+
+const emit = defineEmits<{
+  typed: []
+  'stream-complete': []
+}>()
+
+const visibleLength = ref(0)
+let timeoutId: ReturnType<typeof setTimeout> | null = null
+let completeEmitted = false
+
+function clearTimer() {
+  if (timeoutId !== null) {
+    clearTimeout(timeoutId)
+    timeoutId = null
+  }
+}
+
+function tryEmitStreamComplete() {
+  if (completeEmitted || !props.typing || !props.streamClosed)
+    return
+  if (props.text.length === 0)
+    return
+  if (visibleLength.value < props.text.length)
+    return
+  completeEmitted = true
+  emit('stream-complete')
+}
+
+function scheduleTypewriterStep() {
+  const delay = Math.max(8, props.msPerChar)
+  timeoutId = setTimeout(() => {
+    timeoutId = null
+    if (!props.typing)
+      return
+    const v = visibleLength.value
+    const len = props.text.length
+    if (v < len) {
+      visibleLength.value = v + 1
+      emit('typed')
+      scheduleTypewriterStep()
+    }
+    else if (props.streamClosed) {
+      tryEmitStreamComplete()
+    }
+  }, delay)
+}
+
+function ensureTypewriter() {
+  if (!props.typing || timeoutId !== null)
+    return
+  if (visibleLength.value < props.text.length)
+    scheduleTypewriterStep()
+}
+
+function syncFromProps() {
+  clearTimer()
+  if (!props.typing) {
+    visibleLength.value = props.text.length
+    completeEmitted = false
+    return
+  }
+  if (visibleLength.value > props.text.length)
+    visibleLength.value = props.text.length
+
+  if (visibleLength.value < props.text.length) {
+    completeEmitted = false
+    ensureTypewriter()
+  }
+  else if (props.streamClosed && props.text.length > 0) {
+    tryEmitStreamComplete()
+  }
+  else if (props.streamClosed && props.text.length === 0) {
+    completeEmitted = false
+  }
+}
+
+watch(
+  () => [props.typing, props.text, props.streamClosed, props.msPerChar] as const,
+  () => syncFromProps(),
+  { immediate: true },
+)
+
+onUnmounted(() => {
+  clearTimer()
+})
+
+const displayText = computed(() => {
+  if (!props.typing)
+    return props.text
+  return props.text.slice(0, visibleLength.value)
+})
+
+const showCaret = computed(() => {
+  if (!props.typing)
+    return false
+  return !props.streamClosed || visibleLength.value < props.text.length
+})
+
+const avatarShow = computed(() => {
+  if (props.avatarText && props.avatarText.length > 0)
+    return props.avatarText.slice(0, 1)
+  return props.role === 'sender' ? '我' : '对'
+})
+</script>
+
+<template>
+  <view
+    class="row"
+    :class="role === 'sender' ? 'row-self' : 'row-peer'"
+  >
+    <view v-if="role === 'receiver'" class="avatar avatar-peer">
+      <text class="avatar-text">{{ avatarShow }}</text>
+    </view>
+    <view class="bubble-wrap">
+      <view class="bubble" :class="role === 'sender' ? 'bubble-self' : 'bubble-peer'">
+        <text class="bubble-text" :selectable="selectable">{{ displayText }}</text>
+        <text v-if="showCaret" class="caret">▍</text>
+      </view>
+    </view>
+    <view v-if="role === 'sender'" class="avatar avatar-self">
+      <text class="avatar-text">{{ avatarShow }}</text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin-bottom: 28rpx;
+}
+
+.row-peer {
+  justify-content: flex-start;
+}
+
+.row-self {
+  justify-content: flex-end;
+}
+
+.avatar {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 8rpx;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.avatar-peer {
+  margin-right: 16rpx;
+  background: #d0d0d0;
+}
+
+.avatar-self {
+  margin-left: 16rpx;
+  background: #07c160;
+}
+
+.avatar-text {
+  font-size: 26rpx;
+  color: #fff;
+}
+
+.avatar-peer .avatar-text {
+  color: #333;
+}
+
+.bubble-wrap {
+  max-width: 70%;
+}
+
+.bubble {
+  position: relative;
+  padding: 18rpx 22rpx;
+  border-radius: 8rpx;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.bubble-peer {
+  background: #fff;
+  box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.04);
+}
+
+.bubble-self {
+  background: #95ec69;
+}
+
+.bubble-text {
+  font-size: 30rpx;
+  color: #111;
+  vertical-align: middle;
+}
+
+.bubble-self .bubble-text {
+  color: #000;
+}
+
+.caret {
+  font-size: 28rpx;
+  color: #333;
+  margin-left: 4rpx;
+  vertical-align: middle;
+  animation: blink 0.9s step-end infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+</style>

package/src/index.ts

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

package/src/types/chat.ts

@@ -0,0 +1,14 @@
+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'