54 lines
2.1 KiB
Markdown
54 lines
2.1 KiB
Markdown
|
# 现代毛玻璃UI效果
|
|||
|
|
|
|||
|
|
一个基于Next.js和React开发的现代化SaaS管理平台，使用最新的毛玻璃UI设计风格，提供明亮通透的用户界面体验。
|
|||
|
|
|
|||
|
|
## 项目特点
|
|||
|
|
|
|||
|
|
- **现代毛玻璃UI效果**：采用最新流行的毛玻璃（Glassmorphism）设计风格，提供通透、现代的用户界面
|
|||
|
|
- **主题切换功能**：支持明亮/深色两种主题模式，满足不同用户偏好和使用场景
|
|||
|
|
- **主题持久化存储**：使用 zustand 管理状态，localStorage 保存主题偏好，刷新页面后仍保持设置
|
|||
|
|
- **响应式设计**：完全适配移动端和桌面端的各种屏幕尺寸
|
|||
|
|
- **动态视觉元素**：使用多种动画效果增强用户体验，包括背景气泡、渐变动画等
|
|||
|
|
- **模块化组件**：基于组件化思想构建，便于维护和扩展
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **前端框架**：Next.js 15.x + React 19
|
|||
|
|
- **状态管理**：Zustand
|
|||
|
|
- **样式解决方案**：Tailwind CSS 4.x（准备弃用）改为antd5.X
|
|||
|
|
- **字体**：Geist字体家族（提供现代简约风格）
|
|||
|
|
- **动画**：CSS原生动画
|
|||
|
|
- **开发语言**：TypeScript
|
|||
|
|
|
|||
|
|
## 界面预览
|
|||
|
|
|
|||
|
|
项目提供了多种精美的UI组件和效果：
|
|||
|
|
|
|||
|
|
- **毛玻璃导航栏**：半透明模糊效果，随着主题变化而调整
|
|||
|
|
- **功能展示卡片**：带有微妙悬浮效果的信息卡片
|
|||
|
|
- **数据统计面板**：展示关键数据指标的可视化组件
|
|||
|
|
- **主题切换开关**：允许用户在明亮/深色主题间切换，并记住用户选择
|
|||
|
|
|
|||
|
|
## 设计说明
|
|||
|
|
|
|||
|
|
### 色彩系统
|
|||
|
|
|
|||
|
|
项目使用了一套鲜明而和谐的色彩系统：
|
|||
|
|
|
|||
|
|
- **主色调**：
|
|||
|
|
- 蓝色 (#2d7ff9)
|
|||
|
|
- 紫色 (#8e6bff)
|
|||
|
|
- 青色 (#06d7b2)
|
|||
|
|
- 粉色 (#ff66c2)
|
|||
|
|
- 橙色 (#ff9640)
|
|||
|
|
|
|||
|
|
- **明亮主题背景**：明亮的淡蓝色，配合多彩渐变气泡
|
|||
|
|
- **暗色主题背景**：深蓝色调，带有鲜艳的强调色点缀
|
|||
|
|
|
|||
|
|
### 毛玻璃效果参数
|
|||
|
|
|
|||
|
|
精心调整的毛玻璃效果参数，确保最佳视觉体验：
|
|||
|
|
|
|||
|
|
- **背景模糊**：`backdrop-blur-xl`确保适当的模糊程度
|
|||
|
|
- **透明度**：卡片背景透明度在0.25-0.6之间
|
|||
|
|
- **边框**：微妙的半透明边框提升层次感
|