XtfSectionTitle

组件说明

xtf-section-title 是页面分区标题组件，适用于列表、看板和表单分组，支持眉题、说明、强调条和右侧操作。与普通文本相比，它提供统一的分节布局和语义主题。

---

基础用法

1. 基础标题

<template><xtf-section-title title="今日经营" desc="订单与成交数据实时更新。" /></template>
<script>
export default {}
</script>

2. 右侧操作

<template>
  <xtf-section-title
    eyebrow="REPORT"
    title="门店日报"
    action-text="查看全部"
    show-arrow
    @action="viewAll"
  />
</template>
<script>
export default {
  methods: {
    viewAll() {
      uni.showToast({ title: '查看全部', icon: 'none' })
    }
  }
}
</script>

3. 卡片和插槽

默认插槽扩展内容，right 插槽替换右侧操作。

<template>
  <xtf-section-title title="权益配置" variant="card" theme="success">
    <xtf-tag size="xs" theme="success" variant="soft" label="已启用" /><template #right
      ><xtf-button size="xs" label="新建" @click="create"
    /></template>
  </xtf-section-title>
</template>
<script>
export default {
  methods: {
    create() {
      console.log('create benefit')
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
title	String	''	主标题	所有分节
desc	String	''	标题说明	需要补充上下文时
eyebrow	String	''	标题上方辅助文案	看板、报表分组
actionText	String	''	右侧操作文案	使用默认右侧操作时
theme	String	'primary'	强调条和图标主题	primary/success/warning/danger/info
variant	String	'plain'	plain/card/soft 视觉变体	区分页面层级
size	String	'md'	sm/md/lg 最小高度	紧凑或重点区域
accent	Boolean	true	是否显示左侧强调条	不需要强调时关闭
accentColor	String	''	覆盖强调条颜色	品牌色场景
showArrow	Boolean	false	显示右侧箭头	右侧可进入详情时
arrowIcon	String	'chevron_right'	右侧箭头图标	showArrow 为真时
customClass	String	''	根节点类名	局部定制
customStyle	String | Object	''	根节点样式	局部定制

---

事件

事件名称	触发时机	回调参数	参数说明
action	点击右侧操作区域时	(event: Event)	点击事件对象；需有 actionText、showArrow 或 right 插槽

事件使用示例

<template><xtf-section-title title="商品管理" action-text="管理" @action="manage" /></template>
<script>
export default {
  methods: {
    manage(event) {
      console.log('section action', event)
    }
  }
}
</script>

---

主题说明

• 强调条使用 --xtf-color-primary、--xtf-color-success、--xtf-color-warning、--xtf-color-danger 或 --xtf-color-info。
• card 和 soft 使用 var(--xtf-color-surface)、var(--xtf-color-surface-muted)、var(--xtf-color-border)。
• 在 xtf-config-provider 覆盖这些变量，或通过 accentColor 单独调整强调色。