私域管理系统 - 现代毛玻璃UI效果

项目简介

奥云私域管理系统是一个基于现代前端技术栈构建的管理系统，旨在为私域流量的管理和运营提供高效便捷的解决方案。 这是一个基于Next.js和React开发的现代化SaaS管理平台，使用最新的毛玻璃UI设计风格，提供明亮通透的用户界面体验。

项目特点

• 现代毛玻璃UI效果：采用最新流行的毛玻璃（Glassmorphism）设计风格，提供通透、现代的用户界面
• 主题切换功能：支持明亮/深色两种主题模式，满足不同用户偏好和使用场景
• 主题持久化存储：使用 zustand 管理状态，localStorage 保存主题偏好，刷新页面后仍保持设置
• 响应式设计：完全适配移动端和桌面端的各种屏幕尺寸
• 动态视觉元素：使用多种动画效果增强用户体验，包括背景气泡、渐变动画等
• 模块化组件：基于组件化思想构建，便于维护和扩展

技术栈

• 前端框架：Next.js 15.x + React 19
• 状态管理：Zustand
• 样式解决方案：Tailwind CSS 4.x
• 字体：Geist字体家族（提供现代简约风格）
• 动画：CSS原生动画
• 开发语言：TypeScript

界面预览

项目提供了多种精美的UI组件和效果：

• 毛玻璃导航栏：半透明模糊效果，随着主题变化而调整
• 功能展示卡片：带有微妙悬浮效果的信息卡片
• 数据统计面板：展示关键数据指标的可视化组件
• 主题切换开关：允许用户在明亮/深色主题间切换，并记住用户选择

状态管理

系统使用 Zustand 进行状态管理，具有以下特点：

• 轻量级：Zustand 更加简洁易用
• 持久化存储：通过 localStorage 保存用户设置
• 类型安全：完全支持 TypeScript 类型
• 主题切换：提供主题切换功能，并支持刷新后保持用户偏好

设计说明

色彩系统

项目使用了一套鲜明而和谐的色彩系统：

• 主色调：

  • 蓝色 (#2d7ff9)
  • 紫色 (#8e6bff)
  • 青色 (#06d7b2)
  • 粉色 (#ff66c2)
  • 橙色 (#ff9640)

• 明亮主题背景：明亮的淡蓝色，配合多彩渐变气泡

• 暗色主题背景：深蓝色调，带有鲜艳的强调色点缀

毛玻璃效果参数

精心调整的毛玻璃效果参数，确保最佳视觉体验：

• 背景模糊：backdrop-blur-xl确保适当的模糊程度
• 透明度：卡片背景透明度在0.25-0.6之间
• 边框：微妙的半透明边框提升层次感

许可证

MIT

项目创建命令：

PS C:\Users\29897\Desktop\TEST> npx create-next-app@latest saas2 --typescript Need to install the following packages: create-next-app@15.3.3 Ok to proceed? (y) y

√ Would you like to use ESLint? ... No √ Would you like to use Tailwind CSS? ... Yes √ Would you like your code inside a src/ directory? ... Yes √ Would you like to use App Router? (recommended) ... No √ Would you like to use Turbopack for next dev? ... No √ Would you like to customize the import alias (@/* by default)? ... Yes √ What import alias would you like configured? ... @/* Creating a new Next.js app in C:\Users\29897\Desktop\TEST\saas2.