SAAS/README-UI.md

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