BizFeedbackPanel 意见反馈

意见反馈面板：类型级联（一 / 二级类型树）+ 紧急程度 + 问题描述（字数统计）+ 截图上传（复用 BizUploadFile，支持截图后 Ctrl+V 直接粘贴）+ 联系方式 / 匿名提交 + 我的反馈历史（状态流转标签 + 官方回复）。panel / dialog / drawer 三形态同体；组件零接口：提交（submit-request）、上传（upload-request）、历史（history / history-request）均由业务侧注入。后台帮助中心、门户意见箱、内测反馈收集场景。

基础用法

意见反馈

遇到问题或有建议，欢迎告诉我们

反馈类型

紧急程度

低一般紧急

问题描述

0 / 500

联系方式

提交成功进入结果页，可「继续提交」再次填写；最近提交类型：（尚未提交）

默认类型（功能异常 / 产品建议 / 体验问题 / 其他）+ 紧急程度 + 描述 + 联系方式；提交成功进入结果页，可继续提交。

<script setup lang="ts">
/** 基础面板：默认类型 + 紧急程度 + 描述 + 联系方式，提交契约注入后进入成功页 */
import { ref } from 'vue'
import { BizFeedbackPanel } from 'vue3-ep-biz-lib'
import type { BizFeedbackPayload } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const lastSubmit = ref('（尚未提交）')

/** 模拟提交接口 */
const submitRequest = (): Promise<void> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      ElMessage.success('反馈已提交（演示）')
      resolve()
    }, 600)
  })
}

const onSubmit = (payload: BizFeedbackPayload): void => {
  lastSubmit.value = payload.typeLabels.join(' / ')
}
</script>

<template>
  <div style="max-width: 520px">
    <BizFeedbackPanel subtitle="遇到问题或有建议，欢迎告诉我们" :submit-request="submitRequest" @submit="onSubmit" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      提交成功进入结果页，可「继续提交」再次填写；最近提交类型：{{ lastSubmit }}
    </p>
  </div>
</template>

显示代码

类型级联

意见反馈

反馈类型

紧急程度

低一般紧急

问题描述

0 / 500

联系方式

types 注入二级类型树，选择路径以 payload.type（value 数组）与 payload.typeLabels（label 路径）外抛。

<script setup lang="ts">
/** 类型级联：二级类型树（功能异常 / 产品建议下细分），选中路径随 payload.type 数组外抛 */
import { BizFeedbackPanel } from 'vue3-ep-biz-lib'
import type { BizFeedbackTypeNode } from 'vue3-ep-biz-lib'

const types: BizFeedbackTypeNode[] = [
  {
    value: 'bug',
    label: '功能异常',
    children: [
      { value: 'bug-page', label: '页面报错' },
      { value: 'bug-data', label: '数据不正确' },
      { value: 'bug-login', label: '登录异常' },
    ],
  },
  {
    value: 'advice',
    label: '产品建议',
    children: [
      { value: 'advice-func', label: '功能期望' },
      { value: 'advice-report', label: '报表统计' },
    ],
  },
  { value: 'ux', label: '体验问题' },
  { value: 'other', label: '其他' },
]

/** 模拟提交接口 */
const submitRequest = (): Promise<void> => Promise.resolve()
</script>

<template>
  <div style="max-width: 520px">
    <BizFeedbackPanel :types="types" :submit-request="submitRequest" />
  </div>
</template>

显示代码

截图粘贴上传

意见反馈

反馈类型

紧急程度

低一般紧急

问题描述

0 / 500

截图（可选）

支持 Ctrl + V 粘贴截图

联系方式

鼠标悬停到截图区后直接 Ctrl+V 粘贴剪贴板截图（自动命名「截图-时间戳」）；本次随单截图 0 张

upload-request 注入后展示截图区，内置 BizUploadFile 截图粘贴能力：鼠标悬停在截图区后 Ctrl+V 即可上传（自动命名「截图-时间戳」）。

<script setup lang="ts">
/** 截图上传：复用 BizUploadFile 截图粘贴能力，QQ/微信截图后直接 Ctrl+V 即可上传 */
import { ref } from 'vue'
import { BizFeedbackPanel } from 'vue3-ep-biz-lib'
import type { BizFeedbackPayload } from 'vue3-ep-biz-lib'

const uploaded = ref<string[]>([])

/** 模拟上传接口：resolve 文件访问地址 */
const uploadRequest = (file: File): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`https://demo.example.com/feedback/${encodeURIComponent(file.name)}`)
    }, 500)
  })
}

/** 模拟提交接口：回显截图清单 */
const submitRequest = (payload: BizFeedbackPayload): Promise<void> => {
  uploaded.value = payload.images
  return Promise.resolve()
}
</script>

<template>
  <div style="max-width: 520px">
    <BizFeedbackPanel :upload-request="uploadRequest" :submit-request="submitRequest" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      鼠标悬停到截图区后直接 Ctrl+V 粘贴剪贴板截图（自动命名「截图-时间戳」）；本次随单截图 {{ uploaded.length }} 张
    </p>
  </div>
</template>

显示代码

匿名与联系方式口径

意见反馈

反馈类型

紧急程度

低一般紧急

问题描述

0 / 500

联系方式

匿名提交（不展示且不校验联系方式）

勾选「匿名提交」后联系方式输入隐藏且不参与校验；未勾选时联系方式必填并校验手机号 / 邮箱格式

show-anonymous 开启匿名开关：勾选后联系方式隐藏且不校验；contact-required 控制实名时联系方式必填（手机号 / 邮箱格式二选一）。

<script setup lang="ts">
/** 匿名提交 + 联系方式口径：匿名时隐藏联系方式并跳过校验；实名时联系方式必填（手机号 / 邮箱二选一格式） */
import { BizFeedbackPanel } from 'vue3-ep-biz-lib'

/** 模拟提交接口 */
const submitRequest = (): Promise<void> => Promise.resolve()
</script>

<template>
  <div style="max-width: 520px">
    <BizFeedbackPanel show-anonymous contact-required :submit-request="submitRequest" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      勾选「匿名提交」后联系方式输入隐藏且不参与校验；未勾选时联系方式必填并校验手机号 / 邮箱格式
    </p>
  </div>
</template>

显示代码

弹窗形态

弹窗显隐：关闭；也可通过 ref 调用 open() / close() 程序化控制

variant="dialog" + v-model 受控显隐，内置触发按钮；也可经 expose open() / close() 程序化控制。

<script setup lang="ts">
/** 弹窗形态：内置触发按钮 + v-model 受控，适合挂在任意页面角落 */
import { ref } from 'vue'
import { BizFeedbackPanel } from 'vue3-ep-biz-lib'

const visible = ref(false)

/** 模拟提交接口 */
const submitRequest = (): Promise<void> => Promise.resolve()
</script>

<template>
  <div>
    <BizFeedbackPanel v-model="visible" variant="dialog" :submit-request="submitRequest" trigger-text="打开反馈弹窗" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      弹窗显隐：{{ visible ? '打开' : '关闭' }}；也可通过 ref 调用 open() / close() 程序化控制
    </p>
  </div>
</template>

显示代码

抽屉形态

variant="drawer" 右侧滑出，drawer-size 控制宽度，适合工作台 / 详情页侧边收集。

<script setup lang="ts">
/** 抽屉形态：右侧滑出，适合工作台 / 详情页侧边收集反馈 */
import { ref } from 'vue'
import { BizFeedbackPanel } from 'vue3-ep-biz-lib'

const visible = ref(false)

/** 模拟提交接口 */
const submitRequest = (): Promise<void> => Promise.resolve()
</script>

<template>
  <div>
    <BizFeedbackPanel v-model="visible" variant="drawer" drawer-size="520px" :submit-request="submitRequest" trigger-text="侧边反馈" />
  </div>
</template>

显示代码

我的反馈（受控历史）

意见反馈

提交反馈

我的反馈3

反馈类型

紧急程度

低一般紧急

问题描述

0 / 500

联系方式

history 传入记录数组即出现「提交反馈 / 我的反馈」页签：待处理 / 处理中 / 已回复 / 已关闭状态标签 + 官方回复块。

<script setup lang="ts">
/** 我的反馈（受控历史）：状态流转标签 + 官方回复块，面板内页签切换 */
import { BizFeedbackPanel } from 'vue3-ep-biz-lib'
import type { BizFeedbackRecord } from 'vue3-ep-biz-lib'

const history: BizFeedbackRecord[] = [
  {
    id: 'fb-0012',
    typeLabel: '功能异常 / 页面报错',
    description: '订单列表导出时偶发 500，重试后恢复，麻烦排查一下导出服务的稳定性。',
    urgency: 'urgent',
    status: 'replied',
    createdAt: '2026-10-18 14:22',
    reply: '已定位为导出服务连接池耗尽，10-18 20:00 已扩容并上线监控告警，感谢反馈。',
    replyAt: '2026-10-18 21:05',
    replier: '平台支持组',
  },
  {
    id: 'fb-0009',
    typeLabel: '产品建议',
    description: '希望报表支持自定义列宽并记忆配置，每次导出前都要重新调。',
    status: 'processing',
    createdAt: '2026-10-12 09:41',
  },
  {
    id: 'fb-0004',
    typeLabel: '体验问题',
    description: '移动端筛选栏在低端机型上滑动卡顿，建议做虚拟滚动。',
    status: 'closed',
    createdAt: '2026-09-30 16:10',
    reply: '已在 v1.2.0 优化移动端渲染策略，本条反馈关闭。',
    replyAt: '2026-10-08 11:20',
    replier: '前端组',
  },
]

/** 模拟提交接口 */
const submitRequest = (): Promise<void> => Promise.resolve()
</script>

<template>
  <div style="max-width: 560px">
    <BizFeedbackPanel :history="history" :submit-request="submitRequest" />
  </div>
</template>

显示代码

我的反馈（服务端懒加载）

意见反馈

提交反馈

我的反馈

反馈类型

紧急程度

低一般紧急

问题描述

0 / 500

联系方式

首次切到「我的反馈」自动拉取；提交成功后这里演示主动刷新一次

history-request 首次切页签时拉取；刷新按钮与 expose refreshHistory() 均可重新拉取。

<script setup lang="ts">
/** 我的反馈（服务端懒加载）：首次切页签拉取，支持 expose refreshHistory / 刷新按钮 */
import { ref } from 'vue'
import { BizFeedbackPanel } from 'vue3-ep-biz-lib'
import type { BizFeedbackPanelInstance, BizFeedbackRecord } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const panelRef = ref<BizFeedbackPanelInstance>()

/** 模拟历史接口：每次拉取附加最新一条，演示刷新效果 */
let seq = 0
const historyRequest = (): Promise<BizFeedbackRecord[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      seq += 1
      resolve([
        {
          id: `fb-live-${seq}`,
          typeLabel: '功能异常 / 数据不正确',
          description: `第 ${seq} 次拉取到的最新反馈：库存汇总页合计与明细不一致。`,
          urgency: 'normal',
          status: 'pending',
          createdAt: '2026-10-24 10:00',
        },
        {
          id: 'fb-old-1',
          typeLabel: '产品建议 / 报表统计',
          description: '报表支持定时邮件推送。',
          status: 'replied',
          createdAt: '2026-10-15 08:30',
          reply: '已排入下版本迭代计划。',
          replyAt: '2026-10-16 09:12',
          replier: '产品组',
        },
      ])
    }, 500)
  })
}

/** 模拟提交接口 */
const submitRequest = (): Promise<void> => Promise.resolve()

const onSubmitted = (): void => {
  ElMessage.info('提交成功，可切到「我的反馈」查看（受控场景由业务侧把新记录并入 history）')
  panelRef.value?.refreshHistory()
}
</script>

<template>
  <div style="max-width: 560px">
    <BizFeedbackPanel ref="panelRef" :history-request="historyRequest" :submit-request="submitRequest" @submitted="onSubmitted" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      首次切到「我的反馈」自动拉取；提交成功后这里演示主动刷新一次
    </p>
  </div>
</template>

显示代码

校验与防重

模拟服务繁忙（提交失败）

意见反馈

反馈类型

紧急程度

低一般紧急

问题描述

0 / 500

联系方式

直接点「提交反馈」可看必填拦截；开启开关后提交展示失败停留，关闭后重试成功

未选类型 / 空描述 / 联系方式格式会被拦截；提交期间按钮 loading 防重复，失败停留可重试。

<script setup lang="ts">
/** 校验与防重：未选类型 / 空描述 / 联系方式格式拦截，提交期间按钮 loading 防重复 */
import { ref } from 'vue'
import { BizFeedbackPanel } from 'vue3-ep-biz-lib'
import type { BizFeedbackPayload } from 'vue3-ep-biz-lib'

const failMode = ref(false)

/** 模拟提交接口：failMode 开启时持续 reject，演示失败停留与重试 */
const submitRequest = (payload: BizFeedbackPayload): Promise<void> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (failMode.value) {
        reject(new Error(`提交失败：${payload.typeLabels.join('/')} 服务繁忙`))
        return
      }
      resolve()
    }, 800)
  })
}
</script>

<template>
  <div style="max-width: 520px">
    <div style="margin-bottom: 8px">
      <el-switch v-model="failMode" active-text="模拟服务繁忙（提交失败）" />
    </div>
    <BizFeedbackPanel contact-required :submit-request="submitRequest" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      直接点「提交反馈」可看必填拦截；开启开关后提交展示失败停留，关闭后重试成功
    </p>
  </div>
</template>

显示代码

插槽自定义

意见反馈

工单热线：400-000-0000（工作日 9:00-18:00）

提交反馈

我的反馈1

反馈类型

紧急程度

低一般紧急

问题描述

0 / 500

联系方式

header-extra 头部补充、history-item 记录卡整体替换（scope：record / index）、success-extra 成功页补充说明。

<script setup lang="ts">
/** 插槽自定义：header-extra 头部补充、history-item 记录卡整体替换、success-extra 成功页补充 */
import { BizFeedbackPanel } from 'vue3-ep-biz-lib'
import type { BizFeedbackRecord } from 'vue3-ep-biz-lib'

const history: BizFeedbackRecord[] = [
  {
    id: 'fb-0031',
    typeLabel: '功能异常 / 登录异常',
    description: '企业微信扫码登录偶发回调超时。',
    status: 'processing',
    createdAt: '2026-10-22 18:03',
  },
]

/** 模拟提交接口 */
const submitRequest = (): Promise<void> => Promise.resolve()
</script>

<template>
  <div style="max-width: 560px">
    <BizFeedbackPanel :history="history" :submit-request="submitRequest">
      <template #header-extra>
        <span style="font-size: 12px; color: var(--el-text-color-secondary)">工单热线：400-000-0000（工作日 9:00-18:00）</span>
      </template>
      <template #history-item="{ record }">
        <div style="display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px">
          <el-tag size="small" type="warning" effect="plain">{{ record.status }}</el-tag>
          <span style="font-size: 13px; font-weight: 600">{{ record.typeLabel }}</span>
          <span style="margin-left: auto; font-size: 12px; color: var(--el-text-color-secondary)">{{ record.createdAt }}</span>
          <span style="flex-basis: 100%; font-size: 13px; color: var(--el-text-color-regular)">{{ record.description }}</span>
        </div>
      </template>
      <template #success-extra>
        反馈编号将同步发送至你的站内信，可在「我的反馈」跟踪处理进度
      </template>
    </BizFeedbackPanel>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
model-value / v-model	boolean	false	dialog / drawer 形态显隐（panel 形态忽略）
variant	'panel' | 'dialog' | 'drawer'	'panel'	形态：panel 卡片内嵌 / dialog 弹窗 / drawer 抽屉
title	string	'意见反馈'	标题（dialog / drawer 弹层标题同步）
subtitle	string	''	标题下说明文案，留空不渲染
types	BizFeedbackTypeNode[]	内置四类	反馈类型（带 children 时按级联选择）
show-urgency	boolean	true	紧急程度选择（低 / 一般 / 紧急）
show-upload	boolean	true	截图上传区（需同时注入 upload-request）
upload-request	(file: File) => Promise<string>	—	截图上传实现（BizUploadFile 契约，开启截图粘贴）
upload-limit	number	9	截图数量上限
show-contact	boolean	true	联系方式输入
contact-required	boolean	false	联系方式必填（匿名提交时跳过）
show-anonymous	boolean	false	匿名提交开关
history	BizFeedbackRecord[]	—	我的反馈记录（受控；传入后出现历史页签）
history-request	() => Promise<BizFeedbackRecord[]>	—	历史懒加载（首次切页签 / refreshHistory 调用）
submit-request	(payload: BizFeedbackPayload) => Promise<void>	—	提交实现：resolve 进成功页并外抛 submitted；reject 失败停留；未配置仅外抛 submit 事件
trigger-text	string	'意见反馈'	dialog / drawer 内置触发按钮文案
dialog-width	string | number	'min(560px, 94vw)'	dialog 宽度
drawer-size	string | number	'480px'	drawer 宽度
description-length	number	500	问题描述字数上限
description-placeholder	string	见说明	问题描述占位文案
success-text	string	'我们会尽快处理并向你反馈处理进展'	提交成功副文案

BizFeedbackTypeNode

属性	类型	说明
value	string	类型标识（全树唯一）
label	string	类型名称
children	BizFeedbackTypeNode[]	二级类型
desc	string	补充说明

BizFeedbackPayload

属性	类型	说明
type	string[]	类型路径 value 数组（单层类型长度 1）
typeLabels	string[]	类型路径 label 数组
description	string	问题描述（已 trim）
urgency	'low' | 'normal' | 'urgent'	紧急程度
images	string[]	已上传截图地址
contact	string	联系方式（匿名时空串）
anonymous	boolean	是否匿名

BizFeedbackRecord

属性	类型	说明
id	string	记录 id
typeLabel	string	类型展示文案
description	string	问题描述
urgency	BizFeedbackUrgency	紧急程度（urgent 时记录卡加红色标）
status	'pending' | 'processing' | 'replied' | 'closed'	处理状态
createdAt	string	提交时间（展示字符串）
reply / replyAt / replier	string	官方回复内容 / 时间 / 回复人

Events

事件名	参数	说明
submit	(payload: BizFeedbackPayload)	校验通过点击提交时外抛（无 request 场景自管）
submitted	(payload: BizFeedbackPayload)	submit-request resolve 后外抛（已进入成功页）
update:model-value	(value: boolean)	dialog / drawer 显隐变化

Slots

插槽名	说明
header-extra	卡片头部补充（热线 / 服务时间等）
history-item	记录卡整体替换，scope：{ record, index }
success-extra	成功结果页补充说明

Expose

名称	说明
open() / close()	打开 / 关闭（dialog / drawer 形态）
reset()	重置表单并回到编辑态
refreshHistory()	重新拉取历史（history-request 场景）
switchTab(tab)	切换页签：'submit' | 'history'