BizSensitiveText 敏感信息显隐

敏感字段脱敏展示标准件：按 type 自动脱敏（手机号前 3 后 4、身份证 / 银行卡前 4 后 4、邮箱保留首字符与域名、姓名保留姓氏），眼睛图标切换明文——可配 auth 权限码（无权限置灰并 deny），切换即触发 reveal / hide 审计事件；copyable 开启复制（明文或密文可选）。客户、订单、风控等隐私字段展示位通用。与 BizCopyText 分工：CopyText 管「复制」，本组件管「显隐 + 权限 + 审计」。

基础用法

手机号：138****5678

身份证：3301**********1234

银行卡：6222***********0123

邮箱：w***@example.com

姓名：欧***

五种内置脱敏类型，点击眼睛切换明文 / 密文。

<script setup lang="ts">
/** 基础用法：手机号 / 身份证 / 银行卡 / 邮箱 / 姓名 五种内置脱敏，眼睛切换明文 */
import { BizSensitiveText } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px">
    <div>手机号：<BizSensitiveText value="13812345678" type="phone" /></div>
    <div>身份证：<BizSensitiveText value="330106199001011234" type="idcard" /></div>
    <div>银行卡：<BizSensitiveText value="6222021234567890123" type="bank" /></div>
    <div>邮箱：<BizSensitiveText value="wangdayong@example.com" type="email" /></div>
    <div>姓名：<BizSensitiveText value="欧阳大明" type="name" /></div>
  </div>
</template>

显示代码

权限控制

管理员（可查明文）普通客服（无权限）

客户手机号：139****4321

auth 权限码 + authCheck 注入（真实项目走 useAuth 全局权限集合）；无权限图标置灰，点击触发 deny 便于风控告警。

<script setup lang="ts">
/** 权限控制：auth 权限码 + authCheck 注入演示；无权限置灰点击 emit deny */
import { ref } from 'vue'
import { ElMessage, ElRadioButton, ElRadioGroup } from 'element-plus'
import { BizSensitiveText } from 'vue3-ep-biz-lib'

const role = ref<'admin' | 'agent'>('admin')

const authCheck = (codes?: string | string[]): boolean => {
  if (codes === undefined) return true
  const list = Array.isArray(codes) ? codes : [codes]
  return role.value === 'admin' && list.includes('customer:phone')
}

const onDeny = (): void => {
  ElMessage.warning('无查看权限，已记录本次尝试')
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <ElRadioGroup v-model="role" size="small">
      <ElRadioButton value="admin">管理员（可查明文）</ElRadioButton>
      <ElRadioButton value="agent">普通客服（无权限）</ElRadioButton>
    </ElRadioGroup>
    <div>
      客户手机号：<BizSensitiveText
        value="13987654321"
        type="phone"
        auth="customer:phone"
        :auth-check="authCheck"
        @deny="onDeny"
      />
    </div>
  </div>
</template>

显示代码

查看审计

收款人：6217***********8901 联系电话：137****1111

reveal / hide 事件携带字段类型，安全中心据此记录「谁在何时查看了什么」。

<script setup lang="ts">
/** 查看审计：reveal / hide 事件记录「何时查看了什么类型的敏感字段」，上报安全中心 */
import { ref } from 'vue'
import { BizSensitiveText } from 'vue3-ep-biz-lib'

const logs = ref<Array<{ type: string; action: string; time: string }>>([])

const onAudit = (action: string) => (payload: { type: string }): void => {
  logs.value.unshift({
    type: payload.type,
    action,
    time: new Date().toLocaleTimeString('zh-CN', { hour12: false }),
  })
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 420px">
    <div>
      收款人：<BizSensitiveText value="6217001230045678901" type="bank" @reveal="onAudit('查看明文')" @hide="onAudit('恢复脱敏')" />
      <span style="margin-left: 12px">
        联系电话：<BizSensitiveText value="13700001111" type="phone" @reveal="onAudit('查看明文')" @hide="onAudit('恢复脱敏')" />
      </span>
    </div>

    <div v-if="logs.length > 0" style="border-top: 1px dashed var(--el-border-color); padding-top: 8px">
      <div style="color: var(--el-text-color-secondary); font-size: 12px; margin-bottom: 4px">安全审计日志（上报安全中心）</div>
      <div v-for="(log, i) in logs" :key="i" style="font-size: 12px; color: var(--el-text-color-regular)">
        [{{ log.time }}] {{ log.action }} · 字段类型 {{ log.type }}
      </div>
    </div>
  </div>
</template>

显示代码

复制策略

复制明文（默认）：6222***********0123

只复制密文：138****5678

客服外发场景常用「复制密文」：给用户回读时只报脱敏号，避免明文二次泄露。

copyable 展示复制图标；copy-text="masked" 复制密文（客服回读场景，避免明文二次泄露）。

<script setup lang="ts">
/** 复制策略：copyable 开启复制图标，copy-text 决定复制明文还是密文 */
import { ElMessage } from 'element-plus'
import { BizSensitiveText } from 'vue3-ep-biz-lib'

const onCopy = (payload: { type: string; mode: 'plain' | 'masked'; ok: boolean }): void => {
  if (payload.ok) ElMessage.success(`已复制${payload.mode === 'plain' ? '明文' : '密文'}`)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 420px">
    <div>
      复制明文（默认）：<BizSensitiveText value="6222021234567890123" type="bank" copyable @copy="onCopy" />
    </div>
    <div>
      只复制密文：<BizSensitiveText value="13812345678" type="phone" copyable copy-text="masked" @copy="onCopy" />
    </div>
    <div style="color: var(--el-text-color-secondary); font-size: 12px">
      客服外发场景常用「复制密文」：给用户回读时只报脱敏号，避免明文二次泄露。
    </div>
  </div>
</template>

显示代码

自定义脱敏

车牌号（自定义）：浙***6

初始明文：440300199203054321

纯展示（revealable 关闭）：w***@example.com

type="custom" + custom-mask 完全接管脱敏逻辑（本例车牌号）；default-revealed 初始明文；revealable=false 纯展示。

<script setup lang="ts">
/** 自定义脱敏：custom-mask 完全接管（本例车牌号保留省份+位数）；default-revealed 初始明文 */
import { BizSensitiveText } from 'vue3-ep-biz-lib'

const maskPlate = (value: string): string => value.replace(/^(.).+([0-9A-Z])$/, '$1***$2')
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 420px">
    <div>
      车牌号（自定义）：<BizSensitiveText value="浙A88D66" type="custom" :custom-mask="maskPlate" />
    </div>
    <div>
      初始明文：<BizSensitiveText value="440300199203054321" type="idcard" default-revealed />
    </div>
    <div>
      纯展示（revealable 关闭）：<BizSensitiveText value="wangdayong@example.com" type="email" :revealable="false" />
    </div>
  </div>
</template>

显示代码

客户列表场景

共 3 条

• 1

前往

页

表格内姓名 / 手机号 / 身份证三列脱敏 + 手机号可复制。

<script setup lang="ts">
/** 客户列表场景：表格内姓名 / 手机号 / 身份证三列脱敏，客服按需查看明文并留痕 */
import { ref } from 'vue'
import { BizSensitiveText, BizTable } from 'vue3-ep-biz-lib'
import type { BizTableColumn } from 'vue3-ep-biz-lib'

type CustomerRow = {
  id: number
  name: string
  phone: string
  idcard: string
  level: string
}

const data = ref<CustomerRow[]>([
  { id: 1, name: '王小明', phone: '13812345678', idcard: '330106199001011234', level: 'VIP' },
  { id: 2, name: '欧阳大明', phone: '15987654321', idcard: '440300199203054321', level: '普通' },
  { id: 3, name: '李芳', phone: '18600001111', idcard: '110101198807075612', level: 'VIP' },
])

const columns: BizTableColumn<CustomerRow>[] = [
  { prop: 'name', label: '客户姓名', width: 110, slot: 'name' },
  { prop: 'phone', label: '手机号', width: 150, slot: 'phone' },
  { prop: 'idcard', label: '身份证号', minWidth: 200, slot: 'idcard' },
  { prop: 'level', label: '等级', width: 80 },
]
</script>

<template>
  <div style="height: 240px">
    <BizTable :columns="columns" :data="data" row-key="id" border>
      <template #name="{ row }">
        <BizSensitiveText :value="row.name" type="name" />
      </template>
      <template #phone="{ row }">
        <BizSensitiveText :value="row.phone" type="phone" copyable />
      </template>
      <template #idcard="{ row }">
        <BizSensitiveText :value="row.idcard" type="idcard" />
      </template>
    </BizTable>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
value	string	—（必填）	明文值
type	'phone' | 'idcard' | 'bank' | 'email' | 'name' | 'custom'	custom	脱敏类型
custom-mask	(value: string) => string	—	type=custom 的脱敏函数（缺省首尾各留 1 位）
revealable	boolean	true	允许显隐切换（眼睛图标）
default-revealed	boolean	false	初始明文展示
auth	string | string[]	—	查看明文所需权限码（任一命中放行；未配置集合默认放行）
auth-check	(codes?) => boolean	useAuth	权限判定注入
copyable	boolean	false	展示复制图标
copy-text	'plain' | 'masked'	plain	复制明文 / 密文

Events

事件名	参数	说明
reveal	(payload: { type })	切换为明文（审计）
hide	(payload: { type })	切换回密文
deny	(payload: { type })	无权限尝试查看明文
copy	(payload: { type; mode; ok })	复制完成（mode 为复制内容口径）

Slots

插槽名	说明
default	覆盖展示内容，作用域 { revealed, display }

Expose

属性/方法	说明
toggle()	切换显隐（无权限时触发 deny 不切换）
reveal()	显示明文（触发 reveal 审计）
hide()	恢复脱敏（触发 hide）