CpChat 聊天面板

完整聊天模板：消息列表 + 逐条翻译 + 可自定义功能栏 + 输入发送。功能栏内置目标语言选择与成员多选/全选，actions 插槽放业务自定义按钮；可配置 single-peer 切到「只显示当前聊天人」模式。

基础用法

基础用法

点每条消息下的「翻译」按钮，按功能栏当前目标语言翻译并展示在原文下方；切语言或重复点会取消上一次在途翻译。功能栏「成员」内置多选/全选，「@提及」是 actions 插槽自定义按钮。顶部开关切换群聊 / 单人模式。

<template>
  <div class="demo-col">
    <div class="demo-row">
      <el-switch
        v-model="singlePeer"
        active-text="只显示当前聊天人"
        inactive-text="群聊(含成员多选)"
      />
      <span class="demo-value">{{ hint }}</span>
    </div>

    <CpChat
      ref="chatRef"
      :messages="messages"
      :members="members"
      :current-user-id="me"
      :translate="translate"
      :single-peer="singlePeer"
      :peer="peer"
      title="上海—洛杉矶 拼柜群"
      :height="420"
      @send="onSend"
      @members-change="onMembersChange"
      @translate-error="(m, e) => (hint = `翻译失败: ${e}`)"
    >
      <!-- actions 插槽：业务侧自定义功能栏按钮 -->
      <template #actions="{ selectedIds }">
        <el-button
          size="small"
          :disabled="!selectedIds.length"
          @click="hint = `@ 了 ${selectedIds.length} 人`"
        >
          @提及
        </el-button>
      </template>
    </CpChat>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { ChatMember, ChatMessage } from "../../src/index";

const me = "u0";
const chatRef = ref();
const hint = ref("");
const singlePeer = ref(false);

const members: ChatMember[] = [
  { id: "u1", name: "王船务" },
  { id: "u2", name: "Mike (LA)" },
  { id: "u3", name: "李单证" },
  { id: "u4", name: "张调度" },
];

const peer: ChatMember = { id: "u2", name: "Mike (LA)" };

const messages = ref<ChatMessage[]>([
  {
    id: 1,
    senderId: "u2",
    senderName: "Mike (LA)",
    content: "The container will arrive at LA port on Monday.",
    time: "09:12",
  },
  {
    id: 2,
    senderId: "u0",
    senderName: "我",
    content: "收到，我这边安排提柜。",
    time: "09:13",
  },
  {
    id: 3,
    senderId: "u1",
    senderName: "王船务",
    content: "船公司确认舱位没问题，VGM 截止周五。",
    time: "09:15",
  },
]);

let nextId = 4;
function onSend(text: string) {
  messages.value.push({
    id: nextId++,
    senderId: me,
    senderName: "我",
    content: text,
    time: new Date().toTimeString().slice(0, 5),
  });
}

function onMembersChange(ids: (string | number)[]) {
  hint.value = `已选成员: ${ids.length}`;
}

/** 假翻译：真实项目在此接翻译服务（带 signal 可取消）。demo 做简单映射 + 延迟。 */
const DICT: Record<string, Record<string, string>> = {
  en: {
    "收到，我这边安排提柜。": "Got it, I'll arrange container pickup.",
    "船公司确认舱位没问题，VGM 截止周五。":
      "Carrier confirmed the slot; VGM cutoff is Friday.",
  },
  zh: {
    "The container will arrive at LA port on Monday.":
      "集装箱将于周一抵达洛杉矶港。",
  },
  ja: {
    "The container will arrive at LA port on Monday.":
      "コンテナは月曜日にLA港に到着します。",
    "收到，我这边安排提柜。": "了解しました、こちらでコンテナを手配します。",
  },
};

function translate(
  text: string,
  targetLang: string,
  ctx: { signal: AbortSignal },
): Promise<string> {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      resolve(DICT[targetLang]?.[text] ?? `[${targetLang}] ${text}`);
    }, 600);
    ctx.signal.addEventListener("abort", () => {
      clearTimeout(timer);
      reject(Object.assign(new Error("aborted"), { name: "AbortError" }));
    });
  });
}
</script>

显示代码 ▼

翻译契约

组件不绑翻译服务，通过 translate 透传给业务侧接入自己的翻译接口。功能栏的目标语言选择器决定翻译目标：

async function translate(
  text: string,
  targetLang: string,
  ctx: { signal: AbortSignal }, // 切语言/重复点时取消上一次
): Promise<string> {
  const { data } = await http.post("/api/translate", { text, to: targetLang }, { signal: ctx.signal });
  return data.result;
}

• 不传 translate 时不显示翻译入口
• 每条消息独立的并发守卫：切换目标语言或连点，只采纳最后一次结果
• languages 自定义目标语言选项（默认 英/中/日）

功能栏与单人模式

能力	说明
目标语言选择	translate 存在时内置，切换即 @language-change
成员多选/全选	非单人模式且 members 非空时内置，变化 @members-change
#actions 插槽	自定义按钮，作用域参数拿到 selectedIds
single-peer + peer	「只显示当前聊天人」：隐藏成员多选，顶栏显示对方

消息靠左/右由 current-user-id 与 message.senderId 是否相等决定。发送不落地——@send 抛出文本，消息追加由父级控制（受控 messages）。

API

属性 Props

属性	说明	类型	默认值
messages	消息列表（受控）	ChatMessage[]	() => []
members	成员列表（功能栏多选用）	ChatMember[]	() => []
current-user-id	当前用户 id，用于判定消息左右	string | number	—
translate	翻译实现；不传则不显示翻译入口	Function	—
languages	目标语言选项	ChatLanguage[]	() => [ { label: "英语", value: "en" }, { label: "中文…
default-lang	默认目标语言	string	—
single-peer	只显示当前聊天人：隐藏成员多选，顶栏显示 peer	boolean	—
peer	单人模式的聊天对象	ChatMember	—
title	—	string	"群聊"
placeholder	—	string	"输入消息，Enter 发送…"
disabled	—	boolean	—
height	—	number | string	460

事件 Events

事件	说明	回调参数
@send	发送消息（父级负责追加到 messages）	(string)
@members-change	功能栏成员勾选变化	(Array)
@language-change	功能栏目标语言变化	(string)
@translate-error	翻译失败	(ChatMessage)

方法 Expose

方法（ref 调用）	说明
scrollToBottom	—
getSelectedIds	当前功能栏勾选的成员 id
clearTranslations	清空所有译文

插槽 Slots

插槽	说明	作用域参数
message	—	message
actions	—	selected-ids