85 lines
3.2 KiB
Markdown
85 lines
3.2 KiB
Markdown
# 私域管理系统 - 现代毛玻璃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. |