BizHelpCenter 帮助中心

自助支持知识库消费端：分类导航 + FAQ 手风琴 + 关键词检索（标题 / 正文命中高亮） + 有用 / 无用反馈 + 无结果空态反馈引导（与 BizFeedbackPanel 提交端成对）+ 深链接定位。articles 静态注入或 request 按分类懒加载（带缓存）。

基础用法

分类导航 + 手风琴展开即答案；条目支持浏览量与初始反馈计数。

<script setup lang="ts">
/** 基础用法：分类导航 + FAQ 手风琴，展开即答案 */
import { BizHelpCenter } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 720px">
    <BizHelpCenter
      :categories="[
        { id: 'quick', label: '快速上手', icon: '🚀' },
        { id: 'faq', label: '常见问题', icon: '💬' },
        { id: 'account', label: '账户与安全', icon: '🔐' },
      ]"
      :articles="[
        {
          id: 'q1', categoryId: 'quick', title: '如何创建第一个业务页面？',
          content: '进入工作台 → 点击「新建页面」→ 选择模板或从空白开始；页面保存后可在左侧目录树中拖拽调整层级。',
          views: 1284, helpful: 36,
        },
        {
          id: 'q2', categoryId: 'quick', title: '支持哪些数据源接入？',
          content: '内置 REST API、MySQL、PostgreSQL 三类数据源；企业版额外支持私有化数据库网关。',
          views: 962, helpful: 21,
        },
        {
          id: 'q3', categoryId: 'faq', title: '导出的报表为什么没有数据？',
          content: '请依次检查：\n1. 筛选条件是否过滤掉了全部记录；\n2. 数据源连接是否过期；\n3. 导出账号是否拥有对应资源的读取权限。',
          views: 733, helpful: 18, unhelpful: 2,
        },
        {
          id: 'q4', categoryId: 'faq', title: '页面加载缓慢如何排查？',
          content: '打开浏览器开发者工具 Network 面板，优先查看耗时最高的接口；超过 2s 的接口建议联系管理员为数据源加索引。',
          views: 641, helpful: 12,
        },
        {
          id: 'q5', categoryId: 'account', title: '如何修改登录密码？',
          content: '头像 → 个人中心 → 账号安全 → 修改密码；需验证原密码或短信验证码。',
          views: 2019, helpful: 55,
        },
        {
          id: 'q6', categoryId: 'account', title: '账号被锁定了怎么办？',
          content: '连续 5 次密码错误将锁定 15 分钟；紧急情况可联系管理员在用户管理中手动解锁。',
          views: 455, helpful: 9,
        },
      ]"
    />
  </div>
</template>

关键词检索与高亮

切换分类后在搜索框输入关键词：标题与正文命中片段高亮；结果为空时展示空态引导。

标题与正文命中片段高亮（纯文本切片渲染，免疫 XSS）；检索范围当前分类。

<script setup lang="ts">
/** 关键词检索：标题与正文命中词红色高亮，检索范围限定当前分类 */
import { BizHelpCenter } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 720px">
    <BizHelpCenter
      :categories="[
        { id: 'account', label: '账户与安全', icon: '🔐' },
        { id: 'pay', label: '支付与账单', icon: '💳' },
      ]"
      :articles="[
        { id: 'a1', categoryId: 'account', title: '忘记密码怎么办？', content: '登录页点击「忘记密码」，通过绑定手机号验证后重置密码。', views: 1820 },
        { id: 'a2', categoryId: 'account', title: '如何绑定 / 换绑手机号？', content: '个人中心 → 账号安全 → 手机号 → 更换，需先验证原手机验证码。', views: 640 },
        { id: 'a3', categoryId: 'pay', title: '发票如何开具？', content: '账单中心 → 开票记录 → 申请开票，支持增值税普通发票与专用发票。', views: 987 },
        { id: 'a4', categoryId: 'pay', title: '支持哪些支付方式？', content: '支持对公转账、支付宝、微信支付三种方式；订阅扣费失败会短信提醒。', views: 761 },
      ]"
      search-placeholder="试试搜索：密码 / 发票"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      切换分类后在搜索框输入关键词：标题与正文命中片段高亮；结果为空时展示空态引导。
    </p>
  </div>
</template>

空态反馈引导

在搜索框输入不存在的关键词（如 xyz）→ 空态出现「没解决？提交反馈」按钮；点击外抛 to-feedback 供宿主页面打开反馈面板。

无结果时引导「提交反馈」——to-feedback 事件可联动 BizFeedbackPanel。

<script setup lang="ts">
/** 空态反馈引导：无结果时引导跳转意见反馈（to-feedback 事件，可与 BizFeedbackPanel 联动） */
import { BizHelpCenter } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
</script>

<template>
  <div style="max-width: 720px">
    <BizHelpCenter
      :categories="[{ id: 'faq', label: '常见问题', icon: '💬' }]"
      :articles="[
        { id: 'f1', categoryId: 'faq', title: '打印模板如何自定义？', content: '设置 → 打印模板 → 新建，支持拖拽字段与页眉页脚配置。', views: 320 },
      ]"
      @to-feedback="() => ElMessage.success('to-feedback 事件：此处可打开 BizFeedbackPanel 提交反馈')"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      在搜索框输入不存在的关键词（如 xyz）→ 空态出现「没解决？提交反馈」按钮；点击外抛 to-feedback 供宿主页面打开反馈面板。
    </p>
  </div>
</template>

有用 / 无用反馈

展开条目后点击「有用 / 无用」：计数即时变化，可互相改选（自动回退旧计数）；最近反馈：（尚未反馈）

计数即时更新、可互相改选（自动回退旧计数）；feedbackRequest 异步上报。

<script setup lang="ts">
/** 有用 / 无用反馈：计数即时更新、可改选、feedback 事件外抛，feedbackRequest 异步上报 */
import { ref } from 'vue'
import { BizHelpCenter } from 'vue3-ep-biz-lib'
import type { BizHelpFeedbackPayload } from 'vue3-ep-biz-lib'

const lastFeedback = ref('（尚未反馈）')

const feedbackRequest = (articleId: string, helpful: boolean): Promise<void> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`（演示）上报：${articleId} ${helpful ? '有用' : '无用'}`)
      resolve()
    }, 300)
  })
}

const onFeedback = (payload: BizHelpFeedbackPayload): void => {
  lastFeedback.value = `${payload.articleId} → ${payload.helpful ? '👍' : '👎'}（有用 ${payload.helpfulCount} / 无用 ${payload.unhelpfulCount}）`
}
</script>

<template>
  <div style="max-width: 720px">
    <BizHelpCenter
      :categories="[{ id: 'faq', label: '常见问题', icon: '💬' }]"
      :articles="[
        { id: 'fb1', categoryId: 'faq', title: '批量导入报「格式错误」怎么处理？', content: '下载最新模板按列填写；日期列需为 YYYY-MM-DD 格式；错误明细可在导入记录中下载。', views: 588, helpful: 25, unhelpful: 3 },
      ]"
      :feedback-request="feedbackRequest"
      @feedback="onFeedback"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      展开条目后点击「有用 / 无用」：计数即时变化，可互相改选（自动回退旧计数）；最近反馈：{{ lastFeedback }}
    </p>
  </div>
</template>

弹窗形态

任意容器可用——从页面按钮弹出帮助中心（内嵌工单 / 客服入口）。

<script setup lang="ts">
/** 弹窗形态：从页面右下角帮助按钮弹出帮助中心（内嵌工单/客服入口场景） */
import { ref } from 'vue'
import { BizHelpCenter } from 'vue3-ep-biz-lib'

const visible = ref(false)
</script>

<template>
  <div>
    <el-button type="primary" plain @click="visible = true">打开帮助中心</el-button>
    <el-dialog v-model="visible" title="帮助中心" width="min(760px, 94vw)" append-to-body>
      <BizHelpCenter
        :categories="[
          { id: 'quick', label: '快速上手', icon: '🚀' },
          { id: 'faq', label: '常见问题', icon: '💬' },
        ]"
        :articles="[
          { id: 'd1', categoryId: 'quick', title: '三分钟开通你的工作台', content: '注册 → 创建组织 → 邀请成员，三步完成初始化。', views: 4021, helpful: 96 },
          { id: 'd2', categoryId: 'faq', title: '如何联系人工客服？', content: '帮助中心右下角「提交反馈」，工作日 9:00-18:00 两小时内响应。', views: 830, helpful: 27 },
        ]"
        style="max-height: 60vh; overflow: auto"
      />
    </el-dialog>
  </div>
</template>

request 分类懒加载

该分类暂无帮助条目

首次进入某分类显示「正在加载帮助条目…」（600ms 模拟延迟）；再次切回该分类直接命中缓存；搜索在已加载条目内过滤。

首次切换拉取并缓存，二次切换瞬时展示；搜索在已加载条目内过滤。

<script setup lang="ts">
/** request 分类懒加载：首次切换拉取并缓存，二次切换瞬时展示 */
import { BizHelpCenter } from 'vue3-ep-biz-lib'
import type { BizHelpArticle } from 'vue3-ep-biz-lib'

const LIB: Record<string, BizHelpArticle[]> = {
  dev: [
    { id: 'r1', categoryId: 'dev', title: '如何获取 API 密钥？', content: '开发者中心 → 密钥管理 → 创建密钥；密钥仅创建时完整展示，请妥善保存。', views: 1220, helpful: 33 },
    { id: 'r2', categoryId: 'dev', title: 'Webhook 重试策略是怎样的？', content: '失败后按 1m / 5m / 30m 三次退避重试；连续失败 24 小时后暂停推送。', views: 514, helpful: 14 },
  ],
  ops: [
    { id: 'r3', categoryId: 'ops', title: '私有化部署的硬件基线要求？', content: '最低配置：4C8G × 2 节点 + 200GB SSD；生产环境建议 8C16G × 3 节点。', views: 660, helpful: 19 },
  ],
}

const request = (params: { categoryId: string }): Promise<BizHelpArticle[]> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(LIB[params.categoryId] ?? []), 600)
  })
}
</script>

<template>
  <div style="max-width: 720px">
    <BizHelpCenter
      :categories="[
        { id: 'dev', label: '开发者', icon: '🛠' },
        { id: 'ops', label: '运维部署', icon: '📦' },
      ]"
      :request="request"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      首次进入某分类显示「正在加载帮助条目…」（600ms 模拟延迟）；再次切回该分类直接命中缓存；搜索在已加载条目内过滤。
    </p>
  </div>
</template>

深链接定位

进入即自动切换到「常见问题」分类并展开「页面加载缓慢如何排查？」滚动定位；也可通过 expose.openArticle(id) 运行时定位。

default-article-id 进入即切分类、展开并滚动定位；expose.openArticle 运行时定位（远程模式下目标分类未加载时自动加载后再定位）。

<script setup lang="ts">
/** 深链接定位：default-article-id 进入即切到所属分类并展开滚动定位（站内信 / 工单回复引用帮助场景） */
import { BizHelpCenter } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 720px">
    <BizHelpCenter
      :categories="[
        { id: 'quick', label: '快速上手', icon: '🚀' },
        { id: 'faq', label: '常见问题', icon: '💬' },
      ]"
      :articles="[
        { id: 'q1', categoryId: 'quick', title: '如何创建第一个业务页面？', content: '工作台 → 新建页面 → 选择模板。', views: 1284 },
        { id: 'q2', categoryId: 'quick', title: '如何邀请同事加入组织？', content: '管理后台 → 成员管理 → 邀请成员，支持链接与批量导入。', views: 900 },
        { id: 'q3', categoryId: 'faq', title: '导出的报表为什么没有数据？', content: '检查筛选条件、数据源连接与账号权限。', views: 733 },
        { id: 'q4', categoryId: 'faq', title: '页面加载缓慢如何排查？', content: 'Network 面板查看耗时最高接口，超 2s 联系管理员加索引。', views: 641 },
        { id: 'q5', categoryId: 'faq', title: '如何配置消息提醒渠道？', content: '个人中心 → 通知设置，支持站内、邮件、企业微信三类渠道。', views: 380 },
      ]"
      default-article-id="q4"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      进入即自动切换到「常见问题」分类并展开「页面加载缓慢如何排查？」滚动定位；也可通过 expose.openArticle(id) 运行时定位。
    </p>
  </div>
</template>

分类自定义

category 插槽接管分类项（徽标 / 计数等）。

<script setup lang="ts">
/** 分类自定义：category 插槽接管分类项（徽标 / 计数等任意内容） */
import { BizHelpCenter } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 720px">
    <BizHelpCenter
      :categories="[
        { id: 'saas', label: 'SaaS 版' },
        { id: 'private', label: '私有化版' },
      ]"
      :articles="[
        { id: 'c1', categoryId: 'saas', title: 'SaaS 版如何升级套餐？', content: '控制台 → 订阅管理 → 变更套餐，按剩余时长折算差价。', views: 700, helpful: 22 },
        { id: 'c2', categoryId: 'private', title: '私有化版许可证到期会怎样？', content: '到期前 30 天开始告警；到期后只读 15 天，续证后恢复。', views: 433, helpful: 11 },
      ]"
    >
      <template #category="{ category, }">
        <span style="display: inline-flex; align-items: center; gap: 6px">
          <el-tag size="small" :type="category.id === 'saas' ? 'primary' : 'warning'" effect="dark">EDITION</el-tag>
          {{ category.label }}
        </span>
      </template>
    </BizHelpCenter>
  </div>
</template>

插槽扩展

article-content 富答案（列表 / 步骤 / 提示）、empty 定制空态、footer 底部信息。

<script setup lang="ts">
/** 插槽全家福：article-content 富答案、empty 定制空态、footer 底部信息 */
import { BizHelpCenter } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
</script>

<template>
  <div style="max-width: 720px">
    <BizHelpCenter
      :categories="[{ id: 'faq', label: '常见问题', icon: '💬' }]"
      :articles="[
        { id: 's1', categoryId: 'faq', title: '如何申请开通高级权限？', content: '占位正文', views: 260 },
      ]"
      @to-feedback="() => ElMessage.info('去反馈')"
    >
      <template #article-content="{ article }">
        <div class="rich-answer">
          <p style="margin: 0 0 8px">高级权限按角色申请，流程如下：</p>
          <ol style="margin: 0; padding-left: 18px; line-height: 22px">
            <li>部门负责人在权限平台发起申请；</li>
            <li>数据 Owner 审批（1 个工作日）；</li>
            <li>安全合规抽检（高风险权限）。</li>
          </ol>
          <el-alert :title="`条目 ${article.id} 的富答案由 article-content 插槽渲染`" type="info" :closable="false" style="margin-top: 8px" />
        </div>
      </template>
      <template #empty>
        <el-empty :image-size="72" description="该分类暂无内容，可稍后再来看看" />
      </template>
      <template #footer>
        帮助内容每周更新 · 意见请联系知识库管理员
      </template>
    </BizHelpCenter>
  </div>
</template>

Props

属性名	类型	默认值	说明
categories	`BizHelpCategory[]`	快速上手 / 常见问题 / 账户与安全	分类（id / label / icon 文本图标）
articles	`BizHelpArticle[]`	`[]`	本地条目（与 request 二选一）
request	`(params: { categoryId: string }) => Promise<BizHelpArticle[]>`	—	分类条目懒加载（按分类缓存）
default-category	`string`	第一项	初始选中分类
default-article-id	`string`	—	深链接：初始展开并滚动定位
search-placeholder	`string`	`'搜索问题关键词，如：密码'`	搜索占位文案
show-feedback	`boolean`	`true`	有用 / 无用反馈区
feedback-request	`(articleId: string, helpful: boolean) => Promise<void>`	—	反馈上报（未注入时仅本地计数并外抛 feedback）

Events

事件名	参数	说明
feedback	`(payload: BizHelpFeedbackPayload)`	有用 / 无用反馈（含反馈后双计数）
to-feedback	`()`	空态「提交反馈」点击
category-change	`(categoryId: string)`	分类切换
article-open	`(article: BizHelpArticle)`	条目展开

Slots

插槽名	说明
category	分类项自定义（作用域：`category`）
article-content	答案正文自定义（作用域：`article`）
empty	空态自定义
footer	底部信息区

Expose

属性/方法	说明
open-article	`(id: string) => Promise<void>` 切换分类并展开定位到指定条目；远程模式下目标分类未加载时自动逐个加载后定位（不静默失败）
refresh	`() => Promise<void>` 重新拉取当前分类条目（远程模式）

口径说明

检索：大小写不敏感的包含匹配，范围 = 当前分类已加载条目；命中片段经纯文本切片渲染（不做 HTML 注入）。
反馈计数：初始计数取条目 helpful / unhelpful，本机会话内的点选增量叠加；改选（有用 ↔ 无用）自动回退旧计数。
懒加载缓存：request 结果按分类缓存在组件实例内，重复切换不重复请求；refresh() 强制重取当前分类。

BizHelpCenter 帮助中心 ​

基础用法 ​

关键词检索与高亮 ​

空态反馈引导 ​

有用 / 无用反馈 ​

热门与更新标记 ​

弹窗形态 ​

request 分类懒加载 ​

深链接定位 ​

分类自定义 ​

插槽扩展 ​

Props ​

Events ​

Slots ​

Expose ​

口径说明 ​