@deernova/style 0.3.2 → 0.3.4

package/skill/references/components/tooltip.md

@@ -0,0 +1,145 @@
+# Tooltip 与悬停浮层
+
+指针停在一个控件上时浮出的一小段文字，用来说出只有图标的按钮叫什么、快捷键是什么，或者显示被截断的完整文字。悬停卡片是它的大号版本，用来预览链接、人名这类对象。
+
+**需要提供**：一段很短的文字（通常就是按钮的名称），可选的快捷键；悬停卡片需要标题、一两行摘要。
+
+## 什么时候用
+
+| 情况 | 用 |
+| --- | --- |
+| 只有图标的按钮，说出它的名称和快捷键 | tooltip |
+| 文字被截断，显示完整内容 | tooltip |
+| 解释一个概念、给出操作说明 | 写在界面上的说明文字，或者 [popover](sheet.md) |
+| 里面要放链接、按钮、输入框 | [popover](sheet.md) |
+| 预览一个链接、文件或人 | 悬停卡片 |
+| 必须让用户看到的信息（错误、限制、价格） | 直接写在界面上，不要藏进 tooltip |
+
+## 尺寸
+
+<!-- tokens:tooltip -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `tooltip-height` | 24 | 28 | 28 | 单行 tooltip 的高度；折成两行时随内容长高。 |
+| `tooltip-padding-x` | 8 | 10 | 10 | tooltip 左右内边距。 |
+| `tooltip-font-size` | 12 | 13 | 13 | tooltip 字号。 |
+| `tooltip-radius` | 6 | 8 | 8 | tooltip 圆角。 |
+
+| Token | 值 | 用途 |
+| --- | --- | --- |
+| `tooltip-offset` | `8px` | tooltip 和触发它的控件之间的距离。 |
+| `tooltip-max-width` | `240px` | tooltip 最大宽度，超过时折行，最多两行。 |
+| `tooltip-delay` | `500ms` | 指针停留多久后显示 tooltip 和悬停卡片。SwiftUI 的 .help() 用系统的时间。（仅网页） |
+| `tooltip-skip-window` | `300ms` | 一个 tooltip 刚关闭的这段时间里，移到相邻控件立即显示，不再等待。（仅网页） |
+<!-- /tokens -->
+
+- 外观：反色的小块，`accent` 底、`on-accent` 字（浅色主题黑底白字，深色主题白底黑字），圆角 `tooltip-radius`，阴影 `shadow-float`，叠放层级 `z-tooltip`。不加箭头，不加描边。
+- 单行高 `tooltip-height`，左右内边距 `tooltip-padding-x`，字号 `tooltip-font-size`、常规字重。超过 `tooltip-max-width` 时折行，最多两行；两行还放不下，说明内容太多，改用 popover。
+- 快捷键跟在名称后面，间距 `space-2`，颜色是 `on-accent` 的 70%，用等宽数字。
+- 文案：名词或动词短语，和按钮的无障碍名称一致，不加句号，不写「点击这里……」。
+- 悬停卡片：外观和 [popover](sheet.md) 相同（`surface-raised` 底、`line` 描边、`menu-radius`、`shadow-float`、`popover-padding`），宽度不超过 `sheet-width-sm`。
+
+## 位置
+
+- 默认在控件正下方，水平居中，间距 `tooltip-offset`；下方放不下时翻到上方。窗口底部的控件（例如 Composer 里的按钮）默认放在上方。
+- 靠近窗口边缘时往里推，离边缘至少 `space-2`，不要被裁掉。
+- 盖住旁边的控件没有关系，但不能盖住触发它的控件本身。
+
+## 显示与关闭
+
+- **指针**：停留 `tooltip-delay` 后显示。一个 tooltip 正在显示，或者刚关闭不到 `tooltip-skip-window` 时，移到相邻的控件立即显示，不再等待，这样扫过一排工具栏按钮时不会一个个卡顿。
+- **键盘**：控件获得键盘焦点（`:focus-visible`）时立即显示，失去焦点时关闭。
+- **关闭**：指针离开控件和 tooltip、按 Esc、按下或点击控件、页面滚动时关闭。指针可以从控件移到 tooltip 上而不关闭（离开后留 100ms 的余地），方便放大镜用户阅读。
+- 同一时间最多显示一个 tooltip。
+- 动效：淡入，用时 `duration-instant`；关闭时直接消失。不位移、不缩放。
+- 悬停卡片：同样停留 `tooltip-delay` 后显示；指针移到卡片上不关闭，离开控件和卡片 300ms 后关闭。卡片里的内容只是预览，点击链接本身就能看到全部，所以键盘和触屏用户不会因为看不到卡片而缺少信息。
+
+## 触控端
+
+- 触屏没有悬停，不显示 tooltip 和悬停卡片，也不要把长按改成显示 tooltip。只有图标的按钮靠清晰的图标和无障碍名称；含义不明显的操作直接带文字标签。
+- iPad 接触控板或鼠标时有指针，SwiftUI 的 `.help()` 会显示系统 tooltip。
+
+## 悬停才出现的操作
+
+列表行、消息上悬停才出现的操作按钮（复制、更多）也属于悬停浮层，规则一样：
+
+- 放在 `@media (hover: hover) and (pointer: fine)` 里才隐藏；触屏上一直显示，或者收进「更多」菜单。
+- 键盘焦点进入这一行时也要显示（`:focus-within`），隐藏时用 `opacity`，按钮仍然能被 Tab 到。
+- 显示和隐藏不改变布局，不让旁边的内容跳动。
+
+## Web
+
+- 只有图标的按钮用 `aria-label` 命名，快捷键用 `aria-keyshortcuts`；这时 tooltip 只是把名称显示出来，加 `aria-hidden="true"`，避免读屏读两遍。tooltip 补充了名称以外的信息（被截断的全文、禁用的原因）时，用 `role="tooltip"`，并在控件上用 `aria-describedby` 指向它。
+- 禁用的按钮收不到指针事件。要用 tooltip 解释禁用原因时，用 `aria-disabled="true"` 代替 `disabled`，保留焦点和悬停。
+- 不要用 `title` 属性：显示时间不能控制，键盘聚焦时不显示，样式也和界面不一致。
+- tooltip 用脚本显示和定位。要盖在弹窗之上时，给它加 `popover="manual"`（浏览器支持时用 `popover="hint"`）放到顶层。只在工具栏这类简单场景里，可以用下面的 `.dn-tooltip-anchor` 直接定位。
+
+```css
+.dn-tooltip {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: max-content;
+  max-width: min(var(--tooltip-max-width), 100vw - 2 * var(--space-2));
+  min-height: var(--tooltip-height);
+  margin: 0;
+  padding: var(--space-1) var(--tooltip-padding-x);
+  border: 0;
+  border-radius: var(--tooltip-radius);
+  background: var(--accent);
+  color: var(--on-accent);
+  box-shadow: var(--shadow-float);
+  font: var(--weight-regular) var(--tooltip-font-size)/var(--type-caption-line) var(--font-sans);
+  overflow-wrap: anywhere;
+  transition: opacity var(--duration-instant) var(--ease-standard);
+}
+.dn-tooltip[popover] { position: fixed; inset: auto; }
+@starting-style { .dn-tooltip:popover-open { opacity: 0; } }
+.dn-tooltip-shortcut { margin-inline-start: var(--space-2); color: color-mix(in srgb, var(--on-accent) 70%, transparent); font-variant-numeric: tabular-nums; }
+.dn-tooltip-anchor { position: relative; display: inline-flex; }
+.dn-tooltip-anchor > .dn-tooltip { position: absolute; top: calc(100% + var(--tooltip-offset)); left: 50%; z-index: var(--z-tooltip); translate: -50% 0; }
+```
+
+```html
+<div class="dn-row">
+  <button class="dn-icon-button" type="button" aria-label="新建笔记" aria-keyshortcuts="Meta+N"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
+  <span class="dn-tooltip-anchor">
+    <button class="dn-icon-button" type="button" aria-label="搜索" aria-keyshortcuts="Meta+K"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg></button>
+    <span class="dn-tooltip" aria-hidden="true">搜索<span class="dn-tooltip-shortcut">⌘K</span></span>
+  </span>
+  <button class="dn-icon-button" type="button" aria-label="设置"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg></button>
+</div>
+```
+
+示例里的 tooltip 画成显示状态。真实页面里由脚本按上面的时间显示和关闭。
+
+## SwiftUI
+
+在 macOS 和接了指针的 iPadOS 上，`.help()` 显示系统 tooltip，时间和位置由系统决定。iPhone 上不显示。
+
+```swift
+Button {
+    search()
+} label: {
+    Image(systemName: "magnifyingglass")
+}
+.keyboardShortcut("k")
+.accessibilityLabel("搜索")
+.help("搜索")
+
+// 被截断的文字：给出完整内容
+Text(note.title)
+    .lineLimit(1)
+    .help(note.title)
+```
+
+工具栏按钮用 `Label("搜索", systemImage: "magnifyingglass")` 写，标题会成为无障碍名称，再加 `.help()` 显示 tooltip。SwiftUI 没有悬停卡片的系统组件，不要自己做；需要预览时，用 `.contextMenu(menuItems:preview:)`（右键或长按显示）。
+
+## 不要
+
+- 用 tooltip 放必须看到的信息、长段说明，或者链接和按钮。
+- 给已经有文字标签的按钮再加一个重复的 tooltip（只补快捷键时除外）。
+- 用 `title` 属性代替 tooltip；只在悬停时显示，键盘聚焦时不显示。
+- 在触屏上用长按显示 tooltip。
+- 给 tooltip 加箭头、彩色底色或描边；一次显示多个 tooltip。
+- 指针一碰到就立即显示（扫过工具栏时满屏闪烁）；指针移到 tooltip 上它就消失。

package/skill/references/foundations/accessibility.md

@@ -21,7 +21,7 @@
 
 ## 其他
 
-- 只有图标的按钮必须有无障碍标签。
+- 只有图标的按钮必须有无障碍标签；指针端的 [tooltip](../components/tooltip.md) 在键盘聚焦时也要显示，能用 Esc 关闭，指针移上去不消失。
 - 只靠颜色传达的信息，一律补上图标或文字。
 - 键盘焦点环清楚可见（`focus-ring`，只在 `:focus-visible` 时显示）；Tab 顺序合理，Esc 能关闭弹层。
 - 开启「减弱动态效果」时只保留淡入淡出；开启「降低透明度」时玻璃换成实色纸面。

package/skill/references/foundations/color.md

@@ -45,7 +45,7 @@
 
 ## 交互底色
 
-悬停用 `fill-hover`，选中用 `fill-selected`。它们是半透明的黑或白，叠在任何纸面上都成立，所以列表行、侧边栏项、次按钮、文字按钮都用它们，而不是另选一个灰色。选中要一眼看得出来：`fill-selected` 比悬停明显得多。
+悬停用 `fill-hover`，选中用 `fill-selected`。它们是半透明的黑或白，叠在任何纸面上都成立，所以列表行、侧边栏项、次按钮、文字按钮都用它们，而不是另选一个灰色。选中要一眼看得出来：`fill-selected` 比悬停明显得多。每种元素在悬停、按下、选中时怎么变，见 [交互状态](states.md)。
 
 ## 仅网页
 

package/skill/references/foundations/elevation.md

@@ -9,6 +9,7 @@
 | 2 浮层 | Composer、弹出菜单、弹窗、浮动面板 | `shadow-float` | `z-dropdown`、`z-overlay` |
 | 玻璃 | SwiftUI 端的工具栏、标签栏、浮动按钮；官网页眉 | 系统玻璃自带；官网页眉用 `shadow-glass` | `z-sticky` |
 | 提示 | 轻提示 | 跟随玻璃 | `z-toast` |
+| Tooltip | tooltip、悬停卡片 | `shadow-float` | `z-tooltip` |
 
 - 卡片不加阴影。卡片和纸面的区分靠 `line` 线和亮度差。
 - Web 应用的顶栏是不透明的纸面，吸顶时用 `z-sticky`，底部一条 `stroke-line`，不加阴影。

package/skill/references/foundations/layout.md

@@ -0,0 +1,245 @@
+# 布局与对齐
+
+页面怎么分栏、内容多宽、元素怎么对齐、哪里滚动。间距刻度见 [间距](spacing.md)，数值见 [设计变量](../tokens.md) 的「布局」。
+
+## 页面结构
+
+| 页面 | 结构 | 内容宽度 |
+| --- | --- | --- |
+| 对话、编辑器 | 侧边栏、顶栏、居中的内容栏、底部 Composer，右边可以开侧面板 | 内容栏不超过 `content-max` |
+| 列表加详情（笔记、邮件、任务） | 侧边栏、列表栏（`pane-width`）、详情 | 详情里的正文不超过 `content-max` |
+| 设置页、表单页 | 单栏居中，分组列表或表单 | 不超过 `form-max` |
+| 表格、看板、数据页 | 顶部一行筛选和操作，下面是表格或卡片网格 | 不超过 `wide-max`，表格比它宽时在表格内部横向滚动 |
+| 文档、长文 | 左侧目录（`sidebar-width`），正文栏居中 | 正文不超过 `content-max` |
+| 官网 | 12 栏网格，栏间距 `grid-gutter` | 不超过 `wide-max` |
+
+- 对话栏：消息左右各留 44，Composer 左右各留 32，宽度不超过 `content-max`。
+- 一屏只有一个主内容区。侧边栏、列表栏、侧面板是辅助栏，宽度固定或可以拖动，主内容区占剩下的空间。
+- 侧边栏可以在 `sidebar-width-min` 和 `sidebar-width-max` 之间拖动，双击分隔线恢复默认宽度 `sidebar-width`。
+- 内容比可用宽度窄时，在主内容区里水平居中，两边留白；不要把文字拉满宽屏。左右至少留 `page-margin`。
+- 各平台的具体骨架见场景说明：[Web 应用](../scenes/web.md)、[官网与文档](../scenes/web-marketing.md)、[macOS](../scenes/macos.md)、[iPadOS](../scenes/ipados.md)。
+
+## 网格
+
+- 官网和文档用 12 栏网格，栏间距 `grid-gutter`，左右边距 `page-margin`；窄于 `breakpoint-md` 时变成 6 栏，窄于 `breakpoint-sm` 时变成单栏。
+- 应用界面不用栏网格，用 flex 和 grid 加间距 token 排版。卡片网格按可用宽度自动增减列数，见 [卡片](../components/card.md)。
+
+## 水平对齐
+
+- 文字左对齐，标题也是。只有空状态、加载状态、官网首屏标题居中；系统 Alert 的排法交给系统。
+- 同一栏里的标题、正文、表单和列表共用一条左边线，也就是容器的内边距。分组标题和它下面的行左边缘对齐。
+- 行尾的元素（计数、快捷键、开关、箭头、按钮）用 `margin-left: auto` 推到最右边，不要用空格或固定宽度去凑。
+- 表格里的数字、金额、时间右对齐，并用等宽数字（`tabular-nums`）；文字列左对齐，表头和本列的内容对齐方式一致。
+- 弹窗和表单底部的按钮靠右，主按钮在最右边；页面级的操作放在顶栏右侧，或者内容区顶部的右侧。
+
+## 垂直对齐
+
+按内容选一种，不要混用：
+
+1. **单行控件和行：在固定高度里垂直居中。** 按钮、输入框、列表行、菜单项、标签、顶栏都用 `height`（或 `min-height`）加 `display: flex; align-items: center`，文字行高为 1。不要用上下内边距撑，也不要用 `padding-top`、`top: 1px` 微调。
+2. **图标和文字：按中线对齐。** 同一行的图标和文字用 `align-items: center`，不按基线，也不用 `vertical-align: middle`。图标尺寸跟着字号：12–13 号字配 `icon-size-sm`，14–15 号配 `icon-size-md`，更大的配 `icon-size-lg`。
+3. **不同字号的文字并排：按基线对齐。** 标题旁边的计数、单位、时间（例如 18 号标题旁边 13 号的「128 条」）用 `align-items: baseline`；按中线对齐时小字看起来会往上飘。
+4. **两行条目（标题加一行说明）：整行居中。** 设置项、列表行、横幅里，前导图标和尾部的开关、箭头、按钮都在整行里垂直居中。
+5. **长内容（三行以上，或者高度不固定）：对齐第一行。** 消息、任务说明、多行横幅里，前导的图标、头像、复选框和第一行文字的中线对齐，不跟着整块内容居中。写法是 `align-items: flex-start`，图标的上外边距等于（行高 − 图标高）÷ 2。尾部只有一个短按钮时可以在整块里居中（横幅）；内容很长时，尾部操作也对齐第一行，或者放到内容下方。
+6. **标签和控件左右并排：中线对齐。** 设置项、筛选条里的标签和控件中线对齐；控件是多行文本框时，标签对齐它的第一行。
+7. **表格：** 单行的单元格垂直居中；有单元格会折行时，整行改成顶部对齐。
+8. **卡片网格：** 同一行的卡片顶部对齐，高度由内容决定。
+9. **空状态、加载、整页提示：视觉居中。** 在可用区域里水平居中，垂直方向放在略高于正中的位置：上方留白和下方留白大约是 2 : 3。正好放在几何中心看起来会偏下，贴顶又像没加载完。
+10. **光学修正：** 播放、发送这类不对称的图标，在圆形按钮里按视觉重心居中，可以偏移 1px；这是唯一允许手动微调的情况。
+
+同一行的控件用同一个高度档位；必须混用时（输入框旁边一个小按钮），按中线对齐。大号标题和图标并排时，支持 `text-box: trim-both cap alphabetic` 的浏览器可以用它去掉字体上下的留白，让字的可见部分居中。
+
+## 滚动与固定
+
+- 应用里页面本身不滚动：侧边栏、列表栏、内容区、侧面板各自是一个纵向滚动区域，互不带动。文档和官网整页滚动，页眉吸顶。
+- 顶栏、侧面板的标签头、表头固定，内容从下面滚过去。Composer 固定在内容区底部，内容区底部留出它的高度。
+- 同一方向不要嵌套两个滚动区域。表格横向滚动只发生在表格内部，页面不能横向滚动。
+- 弹出层和面板内部滚动时加 `overscroll-behavior: contain`，不带动后面的页面。
+- 跳到页面锚点时，用 `scroll-padding-top` 留出吸顶元素的高度。
+
+## 滚动条
+
+- **Web 统一用一种细滚动条。** 所有滚动区域，包括页面本身，都用同一种：占 `scrollbar-size`（10px），中间是 `scrollbar-thumb-size`（6px）粗的胶囊滑块，`line-control` 色，悬停和拖动时变 `ink-tertiary`；轨道透明，没有两端的箭头按钮。滑块颜色来自 token，深色主题自动跟着换。
+- **在全局样式里写一次。** 用下面的 CSS：Chrome、Edge、Safari 用 `::-webkit-scrollbar` 画，Firefox 用 `scrollbar-width: thin` 加 `scrollbar-color`。Chrome 里一个元素只要设置了 `scrollbar-width` 或 `scrollbar-color`，`::-webkit-scrollbar` 对它就失效，所以除了隐藏滚动条，组件里不要再写这两个属性，也不要给某个组件单独写一套滚动条或用脚本模拟。
+- **SwiftUI 用系统滚动条。** 原生端的滚动指示条跟随用户的系统设置，不要改。
+- **预留位置，不让内容跳动。** 整页滚动的页面（文档、官网）在 `html` 上设 `scrollbar-gutter: stable`；内容居中的主滚动区域（对话栏）也一样。这样内容从不满一屏变成超出一屏、或者弹窗打开锁住页面滚动时，滚动条出现和消失不会让内容左右跳。应用里页面本身不滚动，不要在 `html` 上预留。
+- **内容别被压住。** 滚动区域的内边距写在滚动容器里面，右侧至少留 `space-2`，滚动时才浮现的滚动条不会盖住文字。
+- **能隐藏的只有横向滑动条。** 标签、筛选项、卡片排成一行横向滑动时，可以隐藏滚动条（`scrollbar-width: none`），但必须有提示：末端渐隐、露出半张卡片，或者左右翻页按钮；滚到底时去掉渐隐。纵向的滚动区域一律不隐藏滚动条。
+- **键盘也能滚。** 滚动区域里没有可以聚焦的内容时，给容器加 `tabindex="0"`、`role="region"` 和 `aria-label`，键盘用户才能用方向键滚动它，读屏也能读出它是什么。
+- **把宽度算进去。** 细滚动条在 Chrome、Edge、Safari 里一直显示，占 `scrollbar-size`，在 Mac 上也不再是滚动时才浮现；Firefox 跟随系统设置。栏宽、居中和右侧留白按占位的情况检查：内容不被挤窄，没有多出来的横向滚动条。
+- **滚动不加戏。** 不接管滚轮和触控板，不改滚动速度和惯性；`scroll-behavior: smooth` 只用于页内锚点跳转，开启「减弱动态效果」时去掉；吸附滚动（`scroll-snap`）只用于横向卡片条。
+- **提示还有内容，用线不用阴影。** 顶栏、表头本来就有 1px 底线；弹窗、面板这类平时没有分隔线的区域，内容能滚动时才加上（见[弹窗](../components/sheet.md)）。不在内容边缘加阴影或渐变遮罩，横向滑动条的末端渐隐除外。
+
+## 响应式
+
+- `breakpoint-sm`（760）以下侧边栏收起成抽屉，多栏变单栏；`breakpoint-md`（960）以下侧面板变成抽屉，目录这类次要栏收起；`breakpoint-lg`（1280）以上内容不再变宽，两侧留白。断点只能写在媒体查询里，没有对应的 CSS 变量。
+- 页面骨架跟着窗口宽度变（媒体查询）；组件跟着自己容器的宽度变（`@container`），同一张卡片放在主内容区和侧面板里都能排好。
+- 任何宽度、200% 缩放下都不能横向滚动。
+- 手机网页里固定在边缘的元素（底部操作条、轻提示）要让出安全区：`env(safe-area-inset-bottom)`，页面的 viewport 加 `viewport-fit=cover`。
+
+## Web
+
+```css
+.dn-column { box-sizing: border-box; width: min(100%, var(--content-max) + 2 * var(--page-margin)); margin-inline: auto; padding-inline: var(--page-margin); }
+.dn-column.is-form { width: min(100%, var(--form-max) + 2 * var(--page-margin)); }
+.dn-column.is-wide { width: min(100%, var(--wide-max) + 2 * var(--page-margin)); }
+.dn-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+.dn-scroll.is-stable { scrollbar-gutter: stable; }
+.dn-scroll-x { display: flex; gap: var(--gap-inline); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
+.dn-scroll-x::-webkit-scrollbar { display: none; }
+.dn-scroll-x > * { flex: none; scroll-snap-align: start; }
+.dn-scroll-x:not(.is-end) { mask-image: linear-gradient(to left, transparent, var(--ink) var(--space-8)); }
+.dn-baseline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
+.dn-baseline-title { margin: 0; font: var(--type-title); }
+.dn-baseline-meta { color: var(--ink-tertiary); font: var(--type-footnote); font-variant-numeric: tabular-nums; }
+.dn-item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
+.dn-item > .dn-icon { color: var(--ink-secondary); }
+.dn-item-text { flex: 1; min-width: 0; }
+.dn-item-title { margin: 0; color: var(--ink); font: var(--weight-medium) var(--type-body-size)/var(--type-body-line) var(--font-sans); }
+.dn-item-detail { margin: 0; color: var(--ink-secondary); font: var(--type-callout); }
+.dn-item-end { flex: none; margin-left: auto; }
+.dn-item.is-top { align-items: flex-start; }
+.dn-item.is-top > .dn-icon { margin-top: calc((var(--type-body-line) - var(--icon-size-md)) / 2); }
+.dn-item.is-top > .dn-item-end { margin-top: calc((var(--type-body-line) - var(--button-height-sm)) / 2); }
+.dn-centered { display: grid; grid-template-rows: 2fr auto 3fr; justify-items: center; min-height: 100%; text-align: center; }
+.dn-centered > * { grid-row: 2; }
+@supports selector(::-webkit-scrollbar) {
+  ::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
+  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
+  ::-webkit-scrollbar-thumb { border: calc((var(--scrollbar-size) - var(--scrollbar-thumb-size)) / 2) solid transparent; border-radius: var(--radius-full); background: var(--line-control) padding-box; }
+  ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--ink-tertiary); }
+  ::-webkit-scrollbar-button { display: none; }
+}
+@supports not selector(::-webkit-scrollbar) {
+  * { scrollbar-width: thin; scrollbar-color: var(--line-control) transparent; }
+}
+```
+
+不同字号并排，按基线对齐：
+
+```html
+<div class="dn-baseline">
+  <h3 class="dn-baseline-title">笔记</h3>
+  <span class="dn-baseline-meta">128 条</span>
+</div>
+```
+
+两行条目，图标和尾部按钮在整行里居中：
+
+```html
+<div class="dn-item">
+  <svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 18h10a4 4 0 0 0 .5-8 6 6 0 0 0-11.5 1.5A3.5 3.5 0 0 0 7 18z"/></svg>
+  <div class="dn-item-text">
+    <p class="dn-item-title">iCloud 同步</p>
+    <p class="dn-item-detail">在登录同一账户的设备之间保持一致。</p>
+  </div>
+  <button class="dn-button is-sm dn-item-end" type="button">管理</button>
+</div>
+```
+
+长内容，图标和按钮对齐第一行：
+
+```html
+<div class="dn-item is-top">
+  <svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg>
+  <div class="dn-item-text">
+    <p class="dn-item-title">会议纪要已整理</p>
+    <p class="dn-item-detail">按议题分成了三段，待办事项单独列在最后，负责人和截止日期都已经补上。原始录音的转写保留在附件里，需要核对时可以打开对照。</p>
+  </div>
+  <button class="dn-button is-sm dn-item-end" type="button">打开</button>
+</div>
+```
+
+空状态在可用区域里视觉居中（上下留白约 2 : 3）：
+
+```html
+<div class="dn-centered">
+  <div class="dn-empty">
+    <svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5"/></svg>
+    <p class="dn-empty-title">还没有笔记</p>
+    <p class="dn-empty-body">点右上角的加号新建一条。</p>
+  </div>
+</div>
+```
+
+滚动区域用细滚动条；横向滑动条隐藏滚动条、末端渐隐：
+
+```html
+<div class="dn-scroll" tabindex="0" role="region" aria-label="最近的会话">
+  <p class="dn-item-title">整理周会记录</p>
+  <p class="dn-item-title">修复登录页的焦点顺序</p>
+  <p class="dn-item-title">起草发布说明</p>
+  <p class="dn-item-title">对比三种排版方案</p>
+  <p class="dn-item-title">检查深色主题的对比度</p>
+  <p class="dn-item-title">补全弹窗的键盘操作</p>
+  <p class="dn-item-title">写 tooltip 的测试</p>
+  <p class="dn-item-title">更新安装说明</p>
+  <p class="dn-item-title">导出图标</p>
+</div>
+<div class="dn-scroll-x" tabindex="0" role="region" aria-label="筛选">
+  <span class="dn-tag">全部</span><span class="dn-tag">今天</span><span class="dn-tag">本周</span><span class="dn-tag">已完成</span><span class="dn-tag">进行中</span><span class="dn-tag">有附件</span><span class="dn-tag">我创建的</span><span class="dn-tag">共享给我</span><span class="dn-tag">已归档</span><span class="dn-tag">草稿</span>
+</div>
+```
+
+## SwiftUI
+
+`Form`、`List`、`NavigationSplitView` 自带对齐和滚动，不要改；滚动指示条保持系统默认，跟随用户的系统设置。只有横向卡片条可以用 `.scrollIndicators(.hidden)`，并露出半张卡片提示还能滑动。自己排的内容按下面写：
+
+```swift
+// 图标和文字：用 Label，图标会对齐到第一行文字
+Label("同步", systemImage: "arrow.triangle.2.circlepath")
+
+// 不同字号并排：按基线
+HStack(alignment: .firstTextBaseline, spacing: Deernova.space2) {
+    Text("笔记").font(.deernovaTitle)
+    Text("128 条").font(.footnote).monospacedDigit().foregroundStyle(.inkTertiary)
+}
+
+// 两行条目：整行居中
+HStack(spacing: Deernova.space3) {
+    Label {
+        VStack(alignment: .leading, spacing: 2) {
+            Text("iCloud 同步")
+            Text("在登录同一账户的设备之间保持一致。").font(.footnote).foregroundStyle(.inkSecondary)
+        }
+    } icon: {
+        Image(systemName: "icloud")
+    }
+    Spacer()
+    Toggle("iCloud 同步", isOn: $sync).labelsHidden()
+}
+
+// 内容栏限宽并居中
+ScrollView {
+    content
+        .frame(maxWidth: Deernova.contentMax, alignment: .leading)
+        .padding(.horizontal, Deernova.pageMargin)
+        .frame(maxWidth: .infinity)
+}
+
+// 横向卡片条：隐藏滚动条，按卡片吸附，露出下一张的一部分
+ScrollView(.horizontal) {
+    LazyHStack(spacing: Deernova.cardGap) {
+        ForEach(notes) { NoteCard(note: $0).frame(width: 240) }
+    }
+    .scrollTargetLayout()
+}
+.scrollIndicators(.hidden)
+.scrollTargetBehavior(.viewAligned)
+.contentMargins(.horizontal, Deernova.pageMargin)
+
+// 空状态：系统组件已经处理了视觉居中
+ContentUnavailableView("还没有笔记", systemImage: "doc", description: Text("点右上角的加号新建一条。"))
+```
+
+## 不要
+
+- 用 `padding-top`、`margin-top`、`position: relative; top: 1px` 去凑垂直居中（第一行对齐的公式和图标的 1px 光学修正除外）。
+- 用和高度相等的 `line-height` 让单行文字居中：文字一折行就会溢出。用 flex 居中。
+- 用 `vertical-align: middle` 对齐图标和文字。
+- 不同字号并排时按中线对齐；多行内容里让图标、头像跟着整块内容居中。
+- 把空状态贴在顶部，或者正好放在几何中心。
+- 把正文拉满宽屏；正文和普通标题居中排版。
+- 页面和里面的栏同时滚动；同一方向嵌套滚动；页面出现横向滚动。
+- 给单个组件另写一套滚动条，或者用脚本模拟滚动条；隐藏纵向滚动区域的滚动条；接管滚轮或改滚动速度；在应用的 `html` 上预留滚动条位置。
+- 按设备型号写死布局；用可用宽度和尺寸类别判断。

package/skill/references/foundations/spacing.md

@@ -1,6 +1,6 @@
-# 间距与布局
+# 间距
 
-4pt 网格，整体偏紧凑。层次靠间距建立，不靠加更多的线和框。数值见 [设计变量](../tokens.md) 的「间距」和「布局」。
+4pt 网格，整体偏紧凑。层次靠间距建立，不靠加更多的线和框。数值见 [设计变量](../tokens.md) 的「间距」。
 
 ## 刻度和语义间距
 
@@ -26,12 +26,7 @@
 
 ## 布局
 
-- 对话栏和长文阅读栏的宽度不超过 `content-max`（680）。
-- 侧边栏默认宽 `sidebar-width`（桌面 288），用户可以拖动调整。iPhone 没有侧边栏。
-- Web 应用的顶栏高 `toolbar-height`（44），侧面板的标签头和它对齐。
-- 对话栏：内容左右各留 44，Composer 左右各留 32，宽度不超过 `content-max`。
-- 断点：`breakpoint-sm`（760）以下侧边栏收起、多栏变单栏；`breakpoint-md`（960）以下收起目录这类次要栏；`breakpoint-lg`（1280）以上内容不再变宽。断点只能写在媒体查询里，所以没有对应的 CSS 变量。
-- 窄屏下重新排列，不能出现横向滚动。
+分栏、内容宽度、对齐（包括垂直居中）、滚动和断点，见 [布局与对齐](layout.md)。
 
 ## 触控端比指针端大是有意的
 

package/skill/references/foundations/states.md

@@ -0,0 +1,98 @@
+# 交互状态
+
+悬停、按下、选中、焦点、禁用分别怎么表现。颜色只有两个半透明的底色：悬停 `fill-hover`，按下和选中 `fill-selected`，数值见 [设计变量](../tokens.md) 的「颜色」。
+
+## 各元素的状态
+
+| 元素 | 悬停 | 按下 | 选中（当前项） |
+| --- | --- | --- | --- |
+| 文字按钮、图标按钮、工具栏按钮 | `fill-hover` 底，文字和图标从 `ink-secondary` 变 `ink` | `fill-selected` 底 | `fill-selected` 底、`ink`（`aria-pressed`） |
+| 次按钮（灰底） | 在 `fill-selected` 上再叠一层 `fill-hover` | 再叠一层 `fill-selected` | — |
+| 主按钮、实色危险按钮 | 不透明度 `opacity-solid-hover` | 同悬停 | — |
+| 浅底危险按钮 | 在 `danger-soft` 上叠一层 `fill-hover` | 叠一层 `fill-selected` | — |
+| 列表行、侧边栏项、菜单项、步骤行 | `fill-hover` 底 | `fill-selected` 底 | `fill-selected` 底，字重不变；选中项悬停时保持 `fill-selected`，不再叠加 |
+| 可点的卡片 | 描边从 `line` 变 `line-control`，底色不变 | 同悬停 | 描边 `ink`，宽 `stroke-control` |
+| 分段控件、标签页、折叠标题 | 文字从 `ink-secondary` 变 `ink`，不加底色 | — | 分段控件的选中块；标签页 `fill-selected` 底 |
+| 本身是 `ink` 的文字链接（字标、页眉的产品名） | 变 `ink-secondary` | — | — |
+| 正文里的链接 | 下划线从 `line-control` 变成文字颜色 | — | — |
+| 输入框 | 不变 | — | 聚焦：边框 `focus-ring`，外圈 3px `accent-soft` |
+| 玻璃按钮 | 比命中区小一圈的 `fill-hover` | `fill-selected` | `fill-selected`，图标 `ink` |
+
+## 规则
+
+- **悬停底色只用 `fill-hover`。** 它是半透明的黑（深色主题是白），叠在 `canvas`、`surface`、`surface-raised` 和玻璃上都成立。不要另选一个实色灰（比如 `#f2f2f2`），换一张纸面或换到深色主题就不对了。
+- **三档，不叠加。** 悬停最轻，按下和选中一样深。选中项被悬停时保持选中的底色；按下时用 `fill-selected` 换掉 `fill-hover`，不是两层叠在一起。次按钮本身就是灰底，悬停和按下在它上面叠一层，这是唯一的叠加。
+- **反馈只改颜色。** 悬停和按下只改底色、文字颜色或描边颜色（三者可以一起变，比如图标按钮底色和图标颜色一起变），不加阴影，不上浮，不缩放，不改字重和尺寸。
+- **底色的形状和元素一样。** 悬停底色和元素同样大、同样的圆角（`row-radius`、`button-radius`、`menu-radius` 减内边距）。列表行在容器里左右缩进，不铺满整栏；命中区比可见尺寸大时，底色只画在可见范围里。
+- **只在能悬停的设备上。** `:hover` 一律写在 `@media (hover: hover)` 里，触屏上不会停在悬停状态。触屏没有悬停，按下时（`:active`）立即给 `fill-selected` 反馈。
+- **过渡要快。** 底色、文字颜色、描边在 `duration-instant` 内变化，进入和离开一样快，不加延迟。
+- **焦点不靠悬停底色。** 键盘焦点用焦点环（`stroke-focus` 宽的 `focus-ring`，只在 `:focus-visible` 时出现）。列表和菜单里用方向键移动的高亮，用 `fill-hover` 加内描边焦点环，见 [菜单](../components/menu.md)。
+- **禁用没有反馈。** 禁用的元素整体降到 `opacity-disabled`，没有悬停和按下的变化，光标恢复默认；不要隐藏，保持在原位。
+- **光标。** 可以点的元素（按钮、行、标签、卡片、链接）用 `cursor: pointer`；文字输入用 `text`；可以拖动的用 `grab`，拖动中用 `grabbing`。
+- **拖放。** 拖起来的元素用 `shadow-float` 浮起；可以放下的位置用 `fill-selected` 底，或者 `line-style-dropzone` 的虚线框。
+
+## Web
+
+下面的 `.dn-state` 是通用写法，适合行、文字按钮这类「透明底、悬停出底色」的元素。按钮、卡片、分段控件的写法见各自的组件说明。示例里的 `.is-hover`、`.is-active` 只用来在文档里把状态画出来。
+
+```css
+.dn-state { cursor: pointer; transition: background-color var(--duration-instant) var(--ease-standard), color var(--duration-instant) var(--ease-standard); }
+@media (hover: hover) { .dn-state:hover { background-color: var(--fill-hover); color: var(--ink); } }
+.dn-state:active, .dn-state.is-active { background-color: var(--fill-selected); }
+.dn-state.is-hover { background-color: var(--fill-hover); color: var(--ink); }
+.dn-state:is([aria-selected="true"], [aria-current="page"], [aria-current="true"], [aria-pressed="true"]) { background-color: var(--fill-selected); color: var(--ink); }
+.dn-state:is(:disabled, [aria-disabled="true"]) { background-color: transparent; opacity: var(--opacity-disabled); cursor: default; }
+.dn-state-row { display: flex; align-items: center; height: var(--row-height); padding: 0 var(--row-padding-x); border-radius: var(--row-radius); color: var(--ink-secondary); font: var(--weight-regular) var(--type-callout-size)/1 var(--font-sans); }
+```
+
+同一组状态放在 `canvas` 和卡片的 `surface` 上，半透明的底色在两种纸面上都成立：
+
+```html
+<div class="dn-row is-top">
+  <div class="dn-state-list">
+    <div class="dn-state dn-state-row">默认</div>
+    <div class="dn-state dn-state-row is-hover">悬停 · fill-hover</div>
+    <div class="dn-state dn-state-row is-active">按下 · fill-selected</div>
+    <div class="dn-state dn-state-row" aria-current="true">选中 · fill-selected</div>
+    <div class="dn-state dn-state-row" aria-disabled="true">禁用 · opacity-disabled</div>
+  </div>
+  <div class="dn-card dn-state-list">
+    <div class="dn-state dn-state-row">默认</div>
+    <div class="dn-state dn-state-row is-hover">悬停 · fill-hover</div>
+    <div class="dn-state dn-state-row is-active">按下 · fill-selected</div>
+    <div class="dn-state dn-state-row" aria-current="true">选中 · fill-selected</div>
+    <div class="dn-state dn-state-row" aria-disabled="true">禁用 · opacity-disabled</div>
+  </div>
+</div>
+```
+
+## SwiftUI
+
+系统控件（`Button`、`List`、`Menu`、工具栏）自带悬停、按下和选中的效果，不要覆盖。自己画的可点区域：
+
+```swift
+struct RowButtonStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .frame(maxWidth: .infinity, minHeight: Deernova.rowHeight, alignment: .leading)
+            .padding(.horizontal, Deernova.rowPaddingX)
+            .background(configuration.isPressed ? Color.fillSelected : .clear,
+                        in: .rect(cornerRadius: Deernova.rowRadius))
+            .contentShape(.rect)
+    }
+}
+
+Button(action: open) { Label("周会记录", systemImage: "doc") }
+    .buttonStyle(RowButtonStyle())
+    .hoverEffect(.highlight)   // iPadOS 接触控板时和系统一致
+```
+
+macOS 上自己画的行需要悬停底色时，用 `.onHover` 记下状态，再铺 `fillHover`；iPhone 没有悬停。
+
+## 不要
+
+- 用实色灰做悬停底色；悬停和选中用同一个底色，分不出当前在哪。
+- 悬停时加阴影、上浮、放大、加粗，或者改变尺寸让布局跳动。
+- 把 `:hover` 写在 `@media (hover: hover)` 外面，让触屏停在悬停状态。
+- 选中项悬停时再叠一层变得更深；一个元素同时出现两种底色。
+- 用悬停底色代替键盘焦点环；禁用的元素还有悬停效果。

package/skill/references/review.md

@@ -13,10 +13,11 @@
 - **线条与阴影**：分组靠 1px 线和间距；卡片没有阴影；阴影只出现在菜单、弹窗、浮动面板和 Composer 上；虚线只用在拖放区和占位块上。
 - **字体**：界面文字和 AI 回答是无衬线；衬线只出现在大标题、空状态标题、官网和文章类长文；代码是等宽；字号来自角色变量（`--type-*`、`.deernovaX`）；iOS 用文本样式，没有写死字号；对齐的数字用等宽数字。
 - **字重**：粗体只出现在真正的标题上；分组标题、会话名、顶栏标题、说明是常规字重，靠灰度区分。
+- **对齐**：单行控件在固定高度里垂直居中，没有用内边距、`top` 或等高行高去凑；图标和文字按中线，不同字号按基线；三行以上的内容图标对齐第一行；表格数字右对齐；空状态略高于正中；内容栏限宽居中，页面没有横向滚动，每一栏各自滚动。
 - **间距与圆角**：间距在 4pt 网格上；组与组之间至少是组内的 2 倍；圆角来自组件的 `*-radius` token，嵌套圆角同心；阅读栏宽不超过 `content-max`。
-- **交互**：一屏最多一个主按钮；按钮文字以动词开头；有悬停、按下、选中、禁用、加载、空、错误这些需要的状态；禁用和加载时布局不跳动；键盘焦点清楚；菜单和下拉点击才打开，Esc、点外面、选中一项都能关闭，焦点回到触发器，方向键能走完所有项；弹窗打开时背景不能操作也不滚动，关闭后焦点回到原处，危险确认默认聚焦「取消」。
+- **交互**：一屏最多一个主按钮；按钮文字以动词开头；有悬停、按下、选中、禁用、加载、空、错误这些需要的状态，悬停底色是 `fill-hover`、选中和按下是 `fill-selected`，选中项悬停不加深，悬停没有阴影和位移，`:hover` 都在 `@media (hover: hover)` 里；禁用和加载时布局不跳动；键盘焦点清楚；菜单和下拉点击才打开，Esc、点外面、选中一项都能关闭，焦点回到触发器，方向键能走完所有项；弹窗打开时背景不能操作也不滚动，关闭后焦点回到原处，危险确认默认聚焦「取消」。
 - **动效**：时长来自 `duration-*`；动效说明因果；没有无目的的循环；减弱动态效果时只剩淡入淡出；切换内容时阅读位置不跳。
-- **无障碍**：两套主题都看过；最大字号或 200% 缩放下不截断；只有图标的按钮有标签；降低透明度时玻璃变成实色。
+- **无障碍**：两套主题都看过；最大字号或 200% 缩放下不截断；只有图标的按钮有标签，指针端有 tooltip（不是 `title` 属性），键盘聚焦时也显示；降低透明度时玻璃变成实色。
 - **文案**：用“你”；没有感叹号和 emoji；完成态用「已保存」；错误说明原因和解决办法；中文与英文、数字之间有半角空格。
 
 ## 怎么汇报

package/skill/references/scenes/ipados.md

@@ -15,7 +15,7 @@ iPad 应用和 iPhone 一样用**触控**密度（`touch`），导航结构用
 ```swift
 NavigationSplitView {
     SidebarView()
-        .navigationSplitViewColumnWidth(min: 260, ideal: Deernova.sidebarWidth, max: 400)
+        .navigationSplitViewColumnWidth(min: Deernova.sidebarWidthMin, ideal: Deernova.sidebarWidth, max: Deernova.sidebarWidthMax)
 } detail: {
     ScrollView { ThreadView().frame(maxWidth: Deernova.contentMax) }
         .safeAreaInset(edge: .bottom) { Composer().frame(maxWidth: Deernova.contentMax).padding(Deernova.pageMargin) }

package/skill/references/scenes/macos.md

@@ -19,7 +19,7 @@ SwiftUI 的通用写法见 [SwiftUI 共用](swiftui.md)。
 ```swift
 NavigationSplitView {
     SidebarView()
-        .navigationSplitViewColumnWidth(min: 180, ideal: Deernova.sidebarWidth, max: 300)
+        .navigationSplitViewColumnWidth(min: Deernova.sidebarWidthMin, ideal: Deernova.sidebarWidth, max: Deernova.sidebarWidthMax)
 } detail: {
     ScrollView { ThreadView().frame(maxWidth: Deernova.contentMax) }
         .safeAreaInset(edge: .bottom) { Composer().padding(Deernova.pageMargin) }

package/skill/references/scenes/web-marketing.md

@@ -13,7 +13,7 @@
 - 大标题用 `type-display`（衬线）。首屏标题可以再放大，用 `clamp()` 跟随视口，例如 `font-size: clamp(40px, 6vw, 88px)`，但每页只有一个。
 - 正文 `type-body`，长文 `type-prose`，栏宽不超过 `content-max`。
 - 章节之间 `gap-group`（48），首屏上下留白 `space-16`。
-- 一页只用一套网格；左右边距 `page-margin`，宽屏时内容不超过 `breakpoint-lg` 宽，两侧留白。
+- 一页只用一套 12 栏网格，栏间距 `grid-gutter`；左右边距 `page-margin`，内容不超过 `wide-max`，两侧留白。见 [布局与对齐](../foundations/layout.md)。
 
 ## 控件
 

package/skill/references/scenes/web.md

@@ -60,6 +60,7 @@ Web 上按钮“上下特别宽”几乎都是同一个原因：用内边距和
 - **底部**：[Composer](../components/composer.md) 悬浮在内容之上，上面可以贴一条提示，下面是模型和权限的信息行；内容区底部留出它的高度。
 - **侧面板**：右边可以并排打开终端、预览等面板，标签头和顶栏同高。
 - 窄于 `breakpoint-md`（960）时侧面板变成抽屉；窄于 `breakpoint-sm`（760）时侧边栏也收起成抽屉，顶栏左侧放菜单按钮。不能出现横向滚动。
+- 页面本身不滚动，侧边栏、内容区、侧面板各自滚动。其他页面类型（列表加详情、设置页、表格）的宽度，以及对齐规则，见 [布局与对齐](../foundations/layout.md)。
 
 ## 字体
 
@@ -67,13 +68,13 @@ Web 上按钮“上下特别宽”几乎都是同一个原因：用内边距和
 
 ## 控件
 
-- 用原生元素：`<button>`、`<a>`、`<input>`、`<select>`、`<dialog>`、`<details>`。只有图标的按钮加 `aria-label`。
+- 用原生元素：`<button>`、`<a>`、`<input>`、`<select>`、`<dialog>`、`<details>`。只有图标的按钮加 `aria-label`，并用 [tooltip](../components/tooltip.md) 显示名称，不用 `title` 属性。
 - 焦点环：`outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset);`，只在 `:focus-visible` 时显示。
 - 细线：`border: var(--stroke-line) solid var(--line);`。
 - 分段控件、开关这类有状态的控件，用 `aria-pressed`、`role="switch"` 或 `role="tab"` 标出当前状态。
 - 弹窗用 `<dialog>` 的 `showModal()`，自带焦点管理和 Esc 关闭；popover 用 `popover` 属性。打开、关闭和焦点规则见 [弹窗与 popover](../components/sheet.md)。
 - 菜单和下拉：选值优先用原生 `<select>`，命令菜单和链接列表按 [菜单与下拉](../components/menu.md) 选语义、处理键盘。
-- 悬停效果放在 `@media (hover: hover)` 里，触屏上不会卡在悬停状态。
+- 悬停效果放在 `@media (hover: hover)` 里，触屏上不会卡在悬停状态。各元素的悬停、按下、选中见 [交互状态](../foundations/states.md)。
 
 ## 验证