diff --git a/.ua/backlog.json b/.ua/backlog.json index 93b02a4..89bb1d0 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -3275,6 +3275,15 @@ "motivation": "badge 的手把手里明确说「点角标进消息中心应当把 badge 塞进 button 里」,但 20 条配方没有一条给出消息中心的全貌:未读数怎么单一来源、静态快照组件(list / badge)怎么接信号、已读回写怎么只写数据源,都缺示范。", "acceptance": "① recipes.md 新增配方 21(编号连续、代码块与要点齐全,ua recipes 能认出 badge / drawer / list / relativeTime / button / card 组件);② 配方与真实签名一致(badge count、drawer open 收信号、list items 静态数组、relativeTime value 收时间戳);③ npm run check 通过。", "notes": "" + }, + { + "id": "g321", + "domain": "visual", + "status": "open", + "title": "纯交互控件防误选 + 移动端点按灰闪清理", + "motivation": "按钮 / 徽标 / 页签 / 分页 / 步骤条这类控件的文案是「动作」不是「内容」:双击或拖选会把按钮文字选中变蓝,观感割裂且打断连点(现全库只有 8 处零散 user-select,交互控件基本没盖住);移动端浏览器默认点按灰闪(tap highlight)与令牌皮肤同层突兀,按下反馈应由 :active 态承担。", + "acceptance": "① ui.css 全局区新增一条控件清单式 user-select: none(button/tag/badge/fab/backtop/page-btn/tab/seg-btn/step/rate-star/checkbox/radio/switch/menu-item/crumb),内容型组件(代码块 / 表格 / 描述列表 / 链接)不入选、照常可复制;② 全站 ua- 类 -webkit-tap-highlight-color: transparent,不引入任何颜色字面量;③ audit:visual / audit:contrast / audit:surface / audit:motion 全绿,npm run check 通过。", + "notes": "" } ] } diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 68c587d..b0841c5 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -5151,6 +5151,32 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } background: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-line), transparent); /* 选区底 = 主题色 30% 淡档:文字仍直接透底可读,选中区与焦点环 / 选中底同族 */ } +/* ---- 纯交互控件防误选:这些文案是「动作」不是「内容」,双击 / 拖选把它们选中变蓝既割裂又打断连点; + 内容型组件(代码块 / 表格 / 描述列表 / 排版 / link 链接文字)不入选,照常可复制 ---- */ +.ua-btn, +.ua-tag, +.ua-badge, +.ua-fab, +.ua-backtop, +.ua-page-btn, +.ua-tab, +.ua-tab-item, +.ua-seg-btn, +.ua-step, +.ua-rate-star, +.ua-checkbox, +.ua-radio, +.ua-switch, +.ua-menu-item, +.ua-crumb-item, +.ua-crumb-link { + user-select: none; +} +[class^='ua-'], +[class*=' ua-'] { + -webkit-tap-highlight-color: transparent; /* 移动端默认点按灰闪与令牌皮肤割裂;按下反馈由 :active / :focus-visible 承担 */ +} + /* ---- 时间选择(时 / 分两列弹层) ---- */ .ua-timepicker { position: relative;