毛玻璃设计系统

概述

本博客前端采用了一套完整的毛玻璃（Glassmorphism）设计系统，覆盖所有可交互卡片的视觉风格。这套系统经过多次迭代，形成了以 CSS 变量驱动的统一样式管理体系。

设计层级

整个设计系统分为四个玻璃层级，按视觉重量从重到轻排列：

主卡片 `.glass`

最重的玻璃变体，应用于主要内容区域：

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(14px);
border-radius: 30px;

使用范围： 个人名片卡片、文章卡片、文章标题卡片、网盘表单/结果卡片、网盘密码验证卡片、关于页卡片、友情链接外卡、碎念列表项。

透明卡片 `.glass-t`

透明度更高，模糊更轻，适用于次要信息层级：

background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);

使用范围： 文章摘要卡片、分类页文件夹卡片、友情链接内项。

轻量卡片 `.glass-l`

近乎透明的轻量级玻璃，适用于密集型小控件：

background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(5px);

使用范围： 分页按钮、返回按钮。

无边框浮层 `.glass-bare`

无边框的纯模糊背景，适用于浮动覆盖层：

background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);

使用范围： 弹窗背景遮罩。

四种玻璃变体共享相同的圆角值（border-radius），保持视觉一致性。

交互体系

所有可交互的玻璃元素通过一个统一的交互类控制：

悬停效果 `.glass-hover:hover`

鼠标悬停时，卡片会上浮并轻微放大：

transform: translateY(-6px) scale(1.03);
filter: brightness(1.12) saturate(1.15);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);

过渡曲线使用了弹性贝塞尔曲线 cubic-bezier(0.175, 0.885, 0.32, 1.4)，营造出类似物理弹性的手感。

按下效果 `.glass-hover:active`

点击时，卡片会下沉并略微缩小，提供按下反馈：

transform: translateY(2px) scale(0.98);

CSS 变量驱动

为了支持后台可视化调节，所有硬编码的样式值均被替换为 CSS 自定义属性（Custom Properties）：

:root {
  --card-bg-opacity: 0.2;
  --card-blur: 14px;
  --card-radius: 30px;
  --card-border-opacity: 0.5;
  --card-padding: 1.5rem;
  --card-shadow: 0.25;
  --card-hover-y: 6px;
  --card-hover-scale: 1.03;
  --card-active-y: 2px;
  --card-active-scale: 0.98;
  /* ... 透明卡片、轻量卡片、浮层、导航按钮等 */
}

前台页面启动时通过 /api/card-styles 接口获取当前参数值，动态注入到 :root 中，实现全站样式统一更新。

后台可视化管理器

在后台站点设置中集成了卡片样式管理面板，支持实时预览和参数调节：

• 6 组折叠参数：主卡片、悬停交互、透明卡片、轻量卡片、导航按钮、按下交互
• 可视化滑块：每个参数配有滑动条，调值即见效果
• 实时预览：预览区域使用站点背景图，模拟前台真实显示效果
• 重置默认：一键恢复出厂样式

参数一览

分组	参数数	控制内容
主卡片	7	背景透明度、模糊强度、圆角、边框、内边距、阴影
悬停交互	2	上浮距离、放大倍数
透明卡片	5	背景透明度、模糊、边框、阴影
轻量卡片	4	背景透明度、模糊、边框
浮层	3	背景透明度、模糊
导航按钮	3	水平/垂直内边距、圆角
按下交互	2	下沉距离、缩小比例

导航按钮

桌面端导航栏的链接按钮采用独立的样式控制：

.nav-btn {
  padding: var(--nav-padding-y) var(--nav-padding-x);
  border-radius: var(--nav-radius);
}

配合 glass-hover 类实现悬停弹跳效果，与卡片体系保持一致的交互语言。

技术架构

数据库 CardStyle 表（26 行键值对）
    ↓
后台 API（JWT 鉴权读写）
    ↓
公开 API /api/card-styles（匿名可读）
    ↓
前台 default.vue（注入 CSS 变量到 :root）
    ↓
main.css var() 引用 → 全站卡片同步更新

总结

这套毛玻璃设计系统的核心优势：

1. 统一性 — 所有卡片共用同一套视觉语言
2. 可配置性 — 无需修改 CSS 文件，后台可视化调节
3. 分层清晰 — 四个玻璃层级覆盖从主内容到轻量控件的全部场景
4. 交互一致 — 悬停和按下效果统一定义，全局生效