Marker 标记

一行弱色的小字说明，插在对话流、列表、时间线之间标出一个节点 —— 「今天」「已切换到 GPT-4o」「以下为新消息」「3 条已折叠」这类不属于任何一条内容的提示。

三种外观

default 只有文字；separator 文字居中、两侧细线延伸到边缘；border 文字下方一条底边。都是 14 / 20 弱色、满宽。

<div style="display: flex; flex-direction: column; gap: 20px; max-width: 420px">
  <pt-marker>已切换到 GPT-4o 模型</pt-marker>
  <pt-marker variant="separator">今天</pt-marker>
  <pt-marker variant="border">以下为新消息</pt-marker>
</div>

图标

slot="icon" 放一个 16px 图标，对读屏隐藏；没放图标时图标位连同间距一起收起。

<div style="display: flex; flex-direction: column; gap: 20px; max-width: 420px">
  <pt-marker>
    <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M12 6v6l4 2"></path>
      <circle cx="12" cy="12" r="10"></circle>
    </svg>
    已切换到 GPT-4o 模型
  </pt-marker>
  <pt-marker variant="separator">
    <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M12 6v6l4 2"></path>
      <circle cx="12" cy="12" r="10"></circle>
    </svg>
    今天 14:32
  </pt-marker>
</div>

链接

给了 href 整行渲染成链接（下划线、悬停变深、焦点环）；只想让几个字可点时把 <a> 直接写进默认插槽，颜色随正文。

<div style="display: flex; flex-direction: column; gap: 20px; max-width: 420px">
  <pt-marker variant="separator" href="#marker-link">查看更早的 12 条消息</pt-marker>
  <pt-marker>
    对话已被管理员归档，
    <a href="#marker-link">查看归档规则</a>
  </pt-marker>
</div>

外观

variant	样子	典型用途
default（默认）	只有文字，起始侧对齐	模型切换、系统操作提示
separator	文字居中，两侧各一条细线延伸到边缘（线与文字之间 12px）	日期分隔、「以下为新消息」
border	文字下方一条贯通的底边（文字与底边之间 8px）	分组标题

三种外观都是 14 / 20 弱色、满宽、最小高 16px。separator 的文字不参与伸缩，放不下时在容器宽度内折行，两条线收成 0 宽。

图标

slot="icon" 放一个图标，排在文字之前、间距 8px。插槽里的 svg 默认 16px；整个图标位对读屏隐藏（aria-hidden）， 图标只是装饰，要表达的意思写在文字里。

没放图标时图标位整块不渲染，连同它后面的间距一起收起，文字不会被推开 8px。后加或移除图标（包括框架里条件渲染的）会跟着变。

链接

• 整行是一个链接：给 href，内部渲染成 <a> —— 下划线（offset 4px）、悬停时文字变深、键盘 Tab 到时出焦点环， 触屏下命中区外扩到 44px 高。target="_blank" 且没给 rel 时自动补 noreferrer noopener。
• 只有几个字可点：不要给 href，把 <a> 直接写进默认插槽，它会得到同样的下划线与悬停色，颜色随正文。 这条样式经 ::slotted(a) 下发，只到插槽的直接子元素：包在 <span> 等元素里的链接不受影响，由使用方自己写样式。

无障碍

标记没有 role，读屏把它当普通文字念。separator 外观的两条线是装饰元素，不暴露给读屏 —— 它不是 role="separator"（那个角色的子内容按纯展示处理，中间的文字会被读屏吞掉）。

定制

各部分都开放了 part：

• base：外层容器（链接形态下就是那个 <a>），改字号、颜色、border 外观的底边写 pt-marker::part(base)。
• icon：图标位（16px 方块）。
• content：文字容器。
• line：separator 外观两侧的细线，两条都是这个 part；改颜色写 pt-marker::part(line) { background: … }。

API

属性

属性	Attribute	类型	默认值	说明
href	href	string | undefined	—	给了就渲染成 `<a>`，整行是一个链接。空串也算给了（指向当前文档，与原生 `<a href="">` 一致）
rel	rel	string | undefined	—	仅在 href 存在时有效；target="_blank" 时若未指定会自动补 noreferrer noopener
target	target	"_blank" | "_parent" | "_self" | "_top" | undefined	—	仅在 href 存在时有效
variant	variant	"border" | "default" | "separator"	'default'	外观。`default` 只有文字；`separator` 文字居中、两侧细线；`border` 文字下方一条底边

插槽

名称	说明
（默认）	文字内容
icon	文字前的图标（svg 默认 16px，对读屏隐藏）

可定制的内部元素（::part()）

part	说明
base	外层容器（链接形态下就是那个 `<a>`）
content	文字容器
icon	图标容器
line	`separator` 外观两侧的细线（两条都是这个 part）