dashboard/.qoder/repowiki/knowledge/zh/全站采用 Glassmorphism 视觉风格/全站采用 Glassmorphism 视觉风格.md

kind, name, source, category

kind	name	source	category
design	全站采用 Glassmorphism 视觉风格	session	adr

全站采用 Glassmorphism 视觉风格

来源：b9ba1d5 → 4f10cc1 提交周期内记录的编码计划——内容为规划时意图，实现可能滞后或有出入。

状态： accepted

背景

dashboard 前端需要统一视觉升级，将现有 Element Plus 默认样式替换为毛玻璃（glassmorphism）风格，涉及卡片、表格、输入框、对话框、按钮、分页、标签等大量基础组件。

决策驱动

• 统一的现代视觉风格
• 通过 CSS 变量集中管理设计 Token
• 最小化业务组件改动

备选方案

• 在 lux-theme.css 中扩展 :root 设计 Token 并覆盖 Element Plus 类名 — 优点：无需引入新 UI 库；通过 backdrop-filter + 半透明实现毛玻璃效果；CSS 变量便于后续主题切换
• 替换为第三方 glassmorphism UI 组件库 （已否决） — 优点：开箱即用；缺点：增加依赖体积；与现有 Element Plus 混用样式冲突风险高；迁移成本大

决策

在 lux-theme.css 的 :root 中新增 glass surface / blur / shadow / spacing / radius 等设计 Token，并通过重写 .el-card、.el-table、.el-input、.el-dialog、.el-button--primary、.el-pagination、.el-tag、.el-dropdown-menu、.el-message-box 等 Element Plus 类名实现全站玻璃化，同时修复 brand/index.vue、blacklist/index.vue、ota-target-device/index.vue 等页面中硬编码颜色导致的可读性问题。

影响

所有列表页和首页需配合使用新的 glass 样式类；backdrop-filter 对低端设备有性能开销；未来新增页面需遵循新的 design token 而非直接写死颜色值。