Highlight 文本高亮
标出一段文本中命中关键词的片段。
用法
命中关键词的片段渲染为 <mark>，其余是纯文本；整段文本可原样拼接还原
组件结构
加粗的是必需部件。
data-scope="highlight"：root · mark
示例
一组关键词
传入数组即可；同一位置多个关键词都命中时取最长的一个，重叠只切出一段
区分大小写
默认不区分，开启 case-sensitive 后按写法比较
跟随输入高亮
关键词逐字符比对、不拼入正则，输入 . * ( 等字符也只作为普通字符查找
颜色
tone 决定命中片段使用哪族颜色，未命中的文本不受影响
曦寒 UI 是一套框架无关的设计系统运行时，组件的行为与皮肤各走各的。
曦寒 UI 是一套框架无关的设计系统运行时，组件的行为与皮肤各走各的。
曦寒 UI 是一套框架无关的设计系统运行时，组件的行为与皮肤各走各的。
曦寒 UI 是一套框架无关的设计系统运行时，组件的行为与皮肤各走各的。
曦寒 UI 是一套框架无关的设计系统运行时，组件的行为与皮肤各走各的。
曦寒 UI 是一套框架无关的设计系统运行时，组件的行为与皮肤各走各的。
设计指引
何时使用
- 在搜索结果、候选列表中标出命中原因。
何时不用
特性
text接受单个词或一组词。caseSensitive决定是否区分大小写。- 命中片段落在
mark部件上，样式归皮肤。 tone决定命中片段的颜色族，落在root上：一段内有多个命中，语气是整段的属性。
组合
最佳实践
- 高亮只用底色，不同时改字色与字重，避免一句话中出现过多重音。
- 关键词很短（一两个字符）时考虑不高亮，命中会过于分散。
反模式
- 用它做正文重点标注：那属于内容，不是检索反馈。
API 参考
产物
| 层 | 值 |
|---|---|
| 自定义元素 | <xh-highlight> |
| Vue 组件 | XhHighlight |
| 状态机 | 无，connect 直接由 props 算属性 |
| 皮肤 | @xihan-ui/styles/highlight.css |
Props
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
caseSensitive | boolean | 区分大小写，默认不区分。 | |
keyword | string | readonly string[] | 关键词，一个或一组。空串会被丢弃。 | |
text | string | 要显示的整段文本。命中位置按该串逐字符计算。 | |
tone | Tone | 语气：brand / neutral / success / warning / danger / info，决定命中片段使用哪族颜色。 |
connect API
getXxxProps() 返回对应部件的宿主属性。
| 成员 | 类型 | 说明 |
|---|---|---|
text | string | 解析后的文本；未提供时为空串。 |
segments | readonly HighlightSegment[] | 切分后的片段，依次拼接恒等于 text。 |
getRootProps | () => T['element'] | |
getMarkProps | () => T['element'] | 铺到每个命中片段上的属性；每段相同，命中的是哪个关键词不写入 DOM。 |
无障碍
键盘
规格出处：W3C APG
无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。
样式参考
皮肤
@xihan-ui/styles/highlight.css 使用 [data-scope="highlight"][data-part="root"] 部件选择器，位于 xihan.components 层。覆盖样式使用 xihan.overrides。
数据属性
由 connect 生成；条件不成立时不输出无值属性。
| 部件 | 属性 | 值 |
|---|---|---|
root | data-case-sensitive | ''（条件成立时才出现） |
root | data-tone | props.tone |
CSS 变量
本组件公开覆盖槽由独立皮肤的实际消费位生成；默认来源、作用部件和状态均与 CSS 同源。
| 变量 | 部件 | CSS 属性 | 状态 | 默认来源 | 说明 |
|---|---|---|---|---|---|
--xh-highlight-mark-bg | markroot | background | defaulttone | --xh-_tone-subtle--xh-bg-brand-subtle | highlight 的 mark、root 部件 background 覆盖槽。 |
--xh-highlight-mark-fg | markroot | color | defaulttone | --xh-_tone-fg--xh-fg-brand-strong | highlight 的 mark、root 部件 color 覆盖槽。 |
--xh-highlight-mark-font-weight | mark | font-weight | default | --xh-font-weight-medium | highlight 的 mark 部件 font-weight 覆盖槽。 |
--xh-highlight-mark-px | mark | padding-inline | default | --xh-space-0_5 | highlight 的 mark 部件 padding-inline 覆盖槽。 |
--xh-highlight-mark-radius | mark | border-radius | default | --xh-shape-inset | highlight 的 mark 部件 border-radius 覆盖槽。 |
动效
本组件皮肤不含过渡与关键帧，也没有脚本驱动的动效：状态一变，外观立即到位。
RTL
皮肤用逻辑属性排布（inline-start 一族），dir="rtl" 下自动镜像。