Link
跳转页面、位置或外部资源。中文惯用名：链接。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.link |
| 名称 | Link |
| 二级分类 | 通用（general） |
| 用途 | 跳转页面、位置或外部资源 |
| 描述 | 中文惯用名：链接。 |
预览
静态结构：渲染为原生 <a data-slot="link">（保留 href 原生语义，样式 text-primary underline-offset-4 hover:underline）；内容取 text ?? children；target="_blank" 时自动补 rel="noreferrer"；站内路径（/ 开头）的普通左键点击被拦截并走渲染上下文路由（route.navigate，嵌入模式可注入宿主路由），外链 / 锚点 / 修饰键点击 / 显式 target 保持浏览器自然跳转。本条目复用预览文件 LINK_NODE：Flex gap 16 内并列「站内链接（SPA 导航）」与「外部链接（新窗口）」。
DSL 结构
{
"type": "Link",
"props": {
"href": "https://example.com/docs",
"text": "查看文档",
"target": "_blank"
}
}何时用
何时使用
- 跳转页面、位置或外部资源：站内路由、文档外链、邮件 / 电话等协议链接。
- 需要保留原生链接能力：可复制地址、右键新窗口打开、悬停显示目标地址。
- 正文中的引用式跳转：段落里指向其他页面或章节的关键词。
何时不用
- 触发即时动作（提交、删除、开关）：使用 Button，Link 不做状态变更。
- 页面级 / 模块级导航：使用 Menu、NavigationMenu、Breadcrumb、Tabs 等导航组件。
- 需要按钮外观的跳转入口：使用 Button（点击后由动作执行跳转），而不是给 Link 加按钮样式。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 站内链接 | 主题色文字，hover 下划线 | 路由跳转（/ 开头路径走渲染上下文路由） |
| 外链（_blank） | 同上，新窗口打开并补 rel="noreferrer" | 指向外部站点、第三方文档 |
| 正文内联 | 与其他文本共行，仅主题色区分 | 段落中的引用式跳转 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
href | string | — | 链接地址（可含表达式）；站内路径（/ 开头）左键点击走 SPA 路由 |
text | string | — | 链接文本；也可用 children |
target | `'_blank' | '_self' | '_parent' |
children | DslNode[] | — | 链接内容（DSL 子树；与 text 二选一，text 优先） |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 文案描述目标（「查看订单详情」）而非「点击这里」，读屏按链接文本跳读也能理解。
- 外链一律 target="_blank"（组件自动补 rel="noreferrer"），站内跳转不加 target，交路由接管。
- 同一段落内的链接不超过两处，避免正文被切碎。
- 站内路径写法与路由表一致（/ 开头），锚点用 #id 交给浏览器原生定位。
正例
- ✓ 列表页脚注：Link href="/components/button" text="查看 Button 用法"。
- ✓ 文档外链：Link 指向外部规范站点并 target="_blank"。
反例
- ✕ 用 Link 承载「删除」等即时动作（应使用 Button + 二次确认）。
- ✕ 给 Link 加按钮样式伪装成主操作（选型与可访问性都会失真）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。