diff --git a/references/panel-ui.md b/references/panel-ui.md index 05f3d02..3eef2f5 100644 --- a/references/panel-ui.md +++ b/references/panel-ui.md @@ -301,6 +301,45 @@ export default defineConfig({ - 链接 hover 有发光反馈。 - 移动端分组堆叠,避免拥挤。 +## 6.5 绚丽增强层(Dazzle Layer,默认必做) + +在玻璃面板基座之上,必须为全站叠加一层**纯装饰性的绚丽效果**,让界面达到「绚丽」而不仅是「深色可用」。 +约束:只增强氛围,**不得改变文字颜色与对比度**,不得遮挡信息,所有动效遵循 `prefers-reduced-motion` 统一降级。 + +建议单独建立 `styles/dazzle.less`(或等效文件)在全局样式之后引入,便于维护与摘除。 + +### 必做项(逐项目落地) + +1. **动态极光背景**:`body::after` 叠加 2–3 团青/蓝/紫径向光斑,30–40 秒缓慢漂移(`translate3d` + 轻微 `scale`,`will-change: transform`);网格层可做 60 秒以上的缓慢 `background-position` 漂移,营造数据空间感。 +2. **顶栏光束**:顶栏底部一条青→紫渐变光束循环扫过(`background-size: 38%` + `background-position` 动画),品牌标题加 4 秒级呼吸辉光(仅 `text-shadow` 脉动,不改颜色)。 +3. **卡片旋转渐变描边**:用 `@property --dazzle-angle` + `conic-gradient` + `mask-composite: exclude` 做 1px 旋转霓虹描边,默认低透明度(0.2 左右),hover 时提到 1;不支持 `@property` 的浏览器自动退化为静态描边。 +4. **主按钮扫光**:`::after` 斜切高光条周期性从左向右扫过(3–4 秒一轮,60% 处停留,避免高频闪烁)。 +5. **菜单选中指示**:选中菜单项左侧 3px 青→紫渐变指示条 + 发光脉冲; hover 项有发光反馈。 +6. **表格行反馈**:hover 行除背景变化外,首列加 `inset` 霓虹左缘线;过渡 250ms 内。 +7. **霓虹滚动条**:主滚动区、表格体、消息列表统一 8px 青→紫渐变滑块 + 半透明深色轨道。 +8. **聚焦发光**:输入/选择器聚焦态在原有 `box-shadow` 环之外叠加柔和外发光。 +9. **文本选中色**:`::selection` 使用主题青色半透明。 + +### 页面级增强(按页面类型) + +- **大屏/概览**:头部横幅内嵌极光漂移 + 顶部高光线扫过;KPI 数值用**高亮纯色 + `text-shadow` 发光脉动**(禁止 `background-clip: text` 渐变文字——审计会把它误判为浅色底上的低对比文字);KPI 卡片进入交错浮起(`animation-delay` 递增 ≤0.3s);图表加 `drop-shadow` 发光滤镜;环图可 40 秒慢速旋转;列表行交错进入。 +- **登录页**:Logo 呼吸光环、标题条流光、按钮扫光、背景光斑 3 颗以上且相位错开。 +- **视频监控**:视频瓦片加霓虹描边 + hover 放大 1.01 + 外发光;**禁止**对视频内容本身加滤镜影响监控判断。 +- **AI 对话**:机器人头像呼吸光环、在线状态点脉冲、消息气泡进入动效与 hover 微光。 + +### 禁区 + +- 不得因装饰导致正文/控件对比度低于审计阈值(正文 4.5:1,大字 3:1); + 尤其禁止 `-webkit-text-fill-color: transparent` + `background-clip: text` 的渐变文字,自动审计会读取到渐变底色而误判为“外黑内白/对比度不足”。 +- 不得大面积高频闪烁、持续强旋转、多层重度模糊叠加造成卡顿。 +- 装饰元素必须 `pointer-events: none`,装饰性 DOM 必须 `aria-hidden="true"`。 +- 绚丽层不得修改业务布局尺寸、路由、交互逻辑;只加视觉。 + +### 验证 + +绚丽层落地后必须重新执行第 11 节的阻断式审计(`panel_ui_audit.py`), +并人工核对:动效流畅、无信息遮挡、`prefers-reduced-motion` 下全部静止、构建无样式错误。 + ## 7. 动效规范 推荐: @@ -360,6 +399,8 @@ export default defineConfig({ - [ ] Modal、Drawer、Select、DatePicker、Popover 等浮层没有白底黑字。 - [ ] Card、Table、Descriptions、Tabs、Pagination、Empty 没有外黑内白。 - [ ] 至少有玻璃模糊、发光边框、渐变光效和悬浮反馈中的三种效果。 +- [ ] 绚丽增强层已落地:动态极光、卡片旋转描边、按钮扫光、菜单指示条、霓虹滚动条齐备且不影响对比度。 +- [ ] 大屏/登录/监控/AI 页面均已叠加页面级绚丽效果,装饰元素 pointer-events 与 aria-hidden 处理到位。 - [ ] 主要信息没有被装饰元素遮挡。 - [ ] 深色文字、浅色文字对比度均满足阅读要求。 - [ ] 手机和平板布局正常。