BizSettingItem 设置项行

设置页的行式设置单元：左侧图标（五色 soft 色板）+ 标题 + 说明文字 + 控件区（默认插槽，switch / select / input 等常驻可交互）+ 右侧操作插槽（修改 / 更换等入口）；divided 分隔线（同容器末行自动去线）、hover-action 操作降噪、compact 紧凑档。个人设置 / 账号安全 / 系统设置 / 应用偏好页的标准行件——每个后台都有的「设置页行」模式，替代手拼 Descriptions 或 Card + Flex。

与相关组件的边界：BizDescriptions 面向只读详情；BizFormDialog / BizForm 面向表单提交（确定 / 取消）；BizSettingItem 面向常驻页面的行式设置（控件即改即存，无提交按钮）。分组标题配合 BizDivideTitle 使用。

基础用法

消息推送

桌面角标

默认插槽放控件（switch / select / 按钮等），行内直接交互；divided 分隔线末行自动去线。

默认插槽放控件，行内直接交互；divided 分隔线末行自动去线。

<script setup lang="ts">
/** 场景：基础设置行——标题 + 控件（switch 常驻可交互） */
import { ref } from 'vue'
import { BizSettingItem } from 'vue3-ep-biz-lib'

const enabled = ref(true)
</script>

<template>
  <el-card shadow="never" style="width: 520px">
    <BizSettingItem title="消息推送">
      <el-switch v-model="enabled" />
    </BizSettingItem>
    <BizSettingItem title="桌面角标">
      <el-switch :model-value="false" />
    </BizSettingItem>
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      默认插槽放控件（switch / select / 按钮等），行内直接交互；divided 分隔线末行自动去线。
    </p>
  </el-card>
</template>

显示代码

带说明文字

导出水印

开启后导出的报表每页叠加「操作人 + 导出时间」水印，截图外发可溯源。

二次验证

登录及敏感操作（改绑手机、重置密码）需短信验证码二次确认。

description 说明该项的影响与口径，降低误操作（导出水印溯源、二次验证范围）。

<script setup lang="ts">
/** 场景：带说明文字——交代设置项的影响与口径，降低误操作 */
import { ref } from 'vue'
import { BizSettingItem } from 'vue3-ep-biz-lib'

const watermark = ref(true)
</script>

<template>
  <el-card shadow="never" style="width: 560px">
    <BizSettingItem
      title="导出水印"
      description="开启后导出的报表每页叠加「操作人 + 导出时间」水印，截图外发可溯源。"
    >
      <el-switch v-model="watermark" />
    </BizSettingItem>
    <BizSettingItem
      title="二次验证"
      description="登录及敏感操作（改绑手机、重置密码）需短信验证码二次确认。"
    >
      <el-switch :model-value="true" />
    </BizSettingItem>
  </el-card>
</template>

显示代码

彩色图标

安全设置

密码、二次验证与登录设备管理

通知偏好

站内、短信与邮件通知渠道开关

外观主题

浅色 / 深色 / 跟随系统

数据看板

首页默认看板与刷新频率

通用

语言、时区与操作日志留存

icon + icon-type（primary / success / warning / danger / info 五色板）区分设置域。

<script setup lang="ts">
/** 场景：彩色图标——iconType 五色板区分设置域（安全 / 通知 / 外观 / 数据 / 通用） */
import { Bell, Brush, Lock, DataAnalysis, Setting } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { BizSettingItem } from 'vue3-ep-biz-lib'

const notify = ref(true)
</script>

<template>
  <el-card shadow="never" style="width: 560px">
    <BizSettingItem title="安全设置" description="密码、二次验证与登录设备管理" :icon="Lock" icon-type="danger" />
    <BizSettingItem title="通知偏好" description="站内、短信与邮件通知渠道开关" :icon="Bell" icon-type="warning">
      <el-switch v-model="notify" />
    </BizSettingItem>
    <BizSettingItem title="外观主题" description="浅色 / 深色 / 跟随系统" :icon="Brush" icon-type="primary" />
    <BizSettingItem title="数据看板" description="首页默认看板与刷新频率" :icon="DataAnalysis" icon-type="success" />
    <BizSettingItem title="通用" description="语言、时区与操作日志留存" :icon="Setting" icon-type="info" />
  </el-card>
</template>

显示代码

控件插槽

界面语言

看板刷新频率

昵称

主页可见范围

公开团队内仅自己

默认插槽可放 select / input / radio-group 等任意控件，右对齐排布。

<script setup lang="ts">
/** 场景：控件插槽——select / input / radio-group / tag 混合排布 */
import { ref } from 'vue'
import { BizSettingItem } from 'vue3-ep-biz-lib'

const lang = ref('zh-CN')
const freq = ref('5')
const nickname = ref('张三')
const visibility = ref('team')

const langs = [
  { label: '简体中文', value: 'zh-CN' },
  { label: 'English', value: 'en-US' },
]
const freqs = [
  { label: '每 5 秒', value: '5' },
  { label: '每 30 秒', value: '30' },
  { label: '关闭', value: '0' },
]
</script>

<template>
  <el-card shadow="never" style="width: 600px">
    <BizSettingItem title="界面语言">
      <el-select v-model="lang" style="width: 140px">
        <el-option v-for="l in langs" :key="l.value" :label="l.label" :value="l.value" />
      </el-select>
    </BizSettingItem>
    <BizSettingItem title="看板刷新频率">
      <el-select v-model="freq" style="width: 140px">
        <el-option v-for="f in freqs" :key="f.value" :label="f.label" :value="f.value" />
      </el-select>
    </BizSettingItem>
    <BizSettingItem title="昵称">
      <el-input v-model="nickname" style="width: 180px" maxlength="12" />
    </BizSettingItem>
    <BizSettingItem title="主页可见范围">
      <el-radio-group v-model="visibility">
        <el-radio-button value="public">公开</el-radio-button>
        <el-radio-button value="team">团队内</el-radio-button>
        <el-radio-button value="private">仅自己</el-radio-button>
      </el-radio-group>
    </BizSettingItem>
  </el-card>
</template>

显示代码

右侧操作列

登录密码

上次修改：2026-06-18

已设置

绑定手机

138****1234 · 用于登录验证与找回密码

实名信息

张*军 · 330**********0012

已实名

action 插槽放「修改 / 更换 / 解绑」入口按钮，与状态标签并列。

<script setup lang="ts">
/** 场景：右侧操作列——action 插槽放「修改 / 更换 / 解绑」入口按钮 */
import { Key, Iphone, User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { BizSettingItem } from 'vue3-ep-biz-lib'

const onAction = (text: string): void => {
  ElMessage.info(`打开「${text}」流程`)
}
</script>

<template>
  <el-card shadow="never" style="width: 560px">
    <BizSettingItem
      title="登录密码"
      description="上次修改：2026-06-18"
      :icon="Key"
      icon-type="danger"
    >
      <el-tag type="success" effect="plain" size="small">已设置</el-tag>
      <template #action>
        <el-button text type="primary" size="small" @click="onAction('修改密码')">修改</el-button>
      </template>
    </BizSettingItem>
    <BizSettingItem
      title="绑定手机"
      description="138****1234 · 用于登录验证与找回密码"
      :icon="Iphone"
      icon-type="primary"
    >
      <template #action>
        <el-button text type="primary" size="small" @click="onAction('更换手机')">更换</el-button>
        <el-button text type="danger" size="small" @click="onAction('解绑手机')">解绑</el-button>
      </template>
    </BizSettingItem>
    <BizSettingItem
      title="实名信息"
      description="张*军 · 330**********0012"
      :icon="User"
      icon-type="success"
    >
      <el-tag type="success" effect="plain" size="small">已实名</el-tag>
    </BizSettingItem>
  </el-card>
</template>

显示代码

hover 显示操作

团队成员（悬停行显示操作）

张伟 · 管理员

加入时间 2024-03-12

李静 · 编辑

加入时间 2024-07-08

王强 · 查看

加入时间 2025-01-20

赵敏 · 编辑

加入时间 2025-09-15

hover-action 开启后操作按钮悬停行时淡入（focus-within 同样显示），长列表降噪；配合 compact 紧凑档。

<script setup lang="ts">
/** 场景：hover 显示操作——长列表降噪，鼠标悬停行时操作按钮淡入 */
import { Delete, Edit } from '@element-plus/icons-vue'
import { BizSettingItem } from 'vue3-ep-biz-lib'

const members = [
  { name: '张伟', role: '管理员', joined: '2024-03-12' },
  { name: '李静', role: '编辑', joined: '2024-07-08' },
  { name: '王强', role: '查看', joined: '2025-01-20' },
  { name: '赵敏', role: '编辑', joined: '2025-09-15' },
]
</script>

<template>
  <el-card shadow="never" style="width: 560px">
    <template #header>团队成员（悬停行显示操作）</template>
    <BizSettingItem
      v-for="m in members"
      :key="m.name"
      :title="`${m.name} · ${m.role}`"
      :description="`加入时间 ${m.joined}`"
      hover-action
      compact
    >
      <template #action>
        <el-button text type="primary" size="small" :icon="Edit">改角色</el-button>
        <el-button text type="danger" size="small" :icon="Delete">移出</el-button>
      </template>
    </BizSettingItem>
  </el-card>
</template>

显示代码

分组设置页

通知

短信通知

审批待办与超时提醒发送短信

邮件通知

每日 09:00 汇总未读消息发送邮件

安全

自动锁屏

无操作指定分钟后锁定工作台

调试

代理访问

经公司网关访问内网联调环境

BizDivideTitle 分组标题 + compact 紧凑行 + 末行去线的完整分组范式。

<script setup lang="ts">
/** 场景：分组设置页——BizDivideTitle 分组标题 + 设置行 + 紧凑模式 */
import { ref } from 'vue'
import { BizDivideTitle, BizSettingItem } from 'vue3-ep-biz-lib'

const sms = ref(false)
const mail = ref(true)
const autoLock = ref(30)
const proxy = ref(true)
</script>

<template>
  <el-card shadow="never" style="width: 600px">
    <BizDivideTitle title="通知" />
    <BizSettingItem title="短信通知" description="审批待办与超时提醒发送短信" compact>
      <el-switch v-model="sms" size="small" />
    </BizSettingItem>
    <BizSettingItem title="邮件通知" description="每日 09:00 汇总未读消息发送邮件" compact>
      <el-switch v-model="mail" size="small" />
    </BizSettingItem>

    <BizDivideTitle title="安全" style="margin-top: 20px" />
    <BizSettingItem title="自动锁屏" description="无操作指定分钟后锁定工作台" compact>
      <el-select v-model="autoLock" size="small" style="width: 110px">
        <el-option :value="15" label="15 分钟" />
        <el-option :value="30" label="30 分钟" />
        <el-option :value="60" label="60 分钟" />
        <el-option :value="0" label="从不" />
      </el-select>
    </BizSettingItem>

    <BizDivideTitle title="调试" style="margin-top: 20px" />
    <BizSettingItem title="代理访问" description="经公司网关访问内网联调环境" compact :divided="false">
      <el-switch v-model="proxy" size="small" />
    </BizSettingItem>
  </el-card>
</template>

显示代码

整页个人设置

个人设置

头像

支持 jpg / png，2M 以内

张

昵称

1-12 个字符，团队内展示

张三

绑定手机

138****1234 · 用于登录验证

登录密码

上次修改：2026-06-18

已设置

接受通知

关闭后仅保留站内红点提醒

头像 / 昵称（BizEditableText 就地改）/ 手机 / 密码 / 通知全套组装的完整设置页。

<script setup lang="ts">
/** 场景：整页个人设置组装——头像 / 昵称 / 手机 / 密码 / 通知全套联动 */
import { Bell, Iphone, Key, Picture, User } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizEditableText, BizSettingItem } from 'vue3-ep-biz-lib'

const nickname = ref('张三')
const phone = ref('138****1234')
const notify = ref(true)

const onChange = (field: string, value: string): void => {
  ElMessage.success(`${field}已更新：${value}`)
}
</script>

<template>
  <el-card shadow="never" style="width: 620px">
    <template #header>个人设置</template>

    <BizSettingItem title="头像" description="支持 jpg / png，2M 以内" :icon="Picture" icon-type="primary">
      <el-avatar :size="44">张</el-avatar>
      <template #action>
        <el-button text type="primary" size="small" @click="onChange('头像', '新头像')">更换</el-button>
      </template>
    </BizSettingItem>

    <BizSettingItem title="昵称" description="1-12 个字符，团队内展示" :icon="User" icon-type="success">
      <BizEditableText v-model="nickname" style="min-width: 140px" @change="(v) => onChange('昵称', v)" />
    </BizSettingItem>

    <BizSettingItem title="绑定手机" :description="`${phone} · 用于登录验证`" :icon="Iphone" icon-type="warning">
      <template #action>
        <el-button text type="primary" size="small" @click="onChange('手机', '更换流程')">更换</el-button>
      </template>
    </BizSettingItem>

    <BizSettingItem title="登录密码" description="上次修改：2026-06-18" :icon="Key" icon-type="danger">
      <el-tag type="success" effect="plain" size="small">已设置</el-tag>
      <template #action>
        <el-button text type="primary" size="small" @click="onChange('密码', '修改流程')">修改</el-button>
      </template>
    </BizSettingItem>

    <BizSettingItem title="接受通知" description="关闭后仅保留站内红点提醒" :icon="Bell" icon-type="info" :divided="false">
      <el-switch v-model="notify" />
    </BizSettingItem>
  </el-card>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	''	设置项标题（title 插槽优先）
description	string	—	说明文字（标题下方弱化说明；description 插槽优先）
icon	Component	—	左侧图标（EP 图标组件）
icon-type	'primary' | 'success' | 'warning' | 'danger' | 'info'	'info'	图标底色主题（soft 色板）
divided	boolean	true	底部分隔线（同容器末行经 :last-child 自动去线）
hover-action	boolean	false	hover 时右侧操作区才显示（focus-within 同样显示；触屏环境建议关闭）
compact	boolean	false	紧凑模式（行距与说明字号收窄）

Slots

插槽名	说明
default	控件区（右对齐，flex 布局可放多个控件并列）
action	右侧操作区（修改 / 更换等入口按钮；hover-action 开启时悬停显示）
title	标题内容接管
description	说明内容接管