30 lines
1.7 KiB
Markdown
30 lines
1.7 KiB
Markdown
|
---
|
||
|
|
kind: design
|
||
|
|
name: 全站采用 Glassmorphism 视觉风格
|
||
|
|
source: session
|
||
|
|
category: 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 而非直接写死颜色值。
|