# 现代毛玻璃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之间
- **边框**：微妙的半透明边框提升层次感