# shadcn-ui-demo

**Repository Path**: gao-code/shadcn-ui-demo

## Basic Information

- **Project Name**: shadcn-ui-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-17
- **Last Updated**: 2025-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🚀 现代化后台管理系统

基于 Next.js 15 和 Shadcn/UI 构建的现代化后台管理系统，支持动态主题切换、响应式设计和完整的用户界面。

![Next.js](https://img.shields.io/badge/Next.js-15.4.2-black?style=flat-square&logo=next.js)
![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue?style=flat-square&logo=typescript)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.0-38B2AC?style=flat-square&logo=tailwind-css)
![Shadcn/UI](https://img.shields.io/badge/Shadcn_UI-Latest-000000?style=flat-square)

## ✨ 功能特性

### 🎨 动态主题系统
- **4套预设主题**: 默认紫色、蓝色、绿色、橙色主题
- **实时切换**: 无需刷新页面，主题立即生效
- **深色模式**: 支持浅色/深色模式切换
- **自动保存**: 主题选择持久化到本地存储
- **完整预览**: 详细的主题展示页面

### 📱 响应式设计
- **移动端适配**: 完美的移动端体验
- **侧边栏收起**: 智能的侧边栏收起/展开功能
- **自适应布局**: 所有页面完美适配各种屏幕尺寸

### 🏗️ 完整的管理功能
- **仪表盘**: 数据概览和统计信息
- **用户管理**: 用户列表、状态管理
- **产品管理**: 产品信息、库存管理
- **订单管理**: 订单状态、处理流程
- **内容管理**: 文章、页面管理
- **数据分析**: 图表展示、趋势分析
- **系统设置**: 配置管理、偏好设置

### 🎯 用户体验
- **平滑动画**: 优雅的过渡效果
- **直观导航**: 清晰的菜单结构
- **快速搜索**: 全局搜索功能
- **通知系统**: 实时消息提醒

## 🛠️ 技术栈

- **框架**: Next.js 15.4.2 (Turbopack)
- **语言**: TypeScript 5.0
- **样式**: Tailwind CSS 3.0
- **组件库**: Shadcn/UI
- **图标**: Lucide React
- **字体**: Inter (Google Fonts)

## 🚀 快速开始

### 环境要求
- Node.js 18.0 或更高版本
- npm 或 pnpm 包管理器

### 安装依赖
```bash
# 使用 npm
npm install

# 或使用 pnpm
pnpm install
```

### 启动开发服务器
```bash
npm run dev
# 或
pnpm dev
```

访问 [http://localhost:3000](http://localhost:3000) 查看应用。

### 构建生产版本
```bash
npm run build
npm start
```

## 📁 项目结构

```
my-shadcn-demo/
├── app/                    # Next.js App Router
│   ├── analytics/         # 数据分析页面
│   ├── content/           # 内容管理页面
│   ├── orders/            # 订单管理页面
│   ├── products/          # 产品管理页面
│   ├── settings/          # 系统设置页面
│   ├── themes/            # 主题设置页面
│   ├── users/             # 用户管理页面
│   ├── globals.css        # 全局样式和主题变量
│   ├── layout.tsx         # 根布局
│   └── page.tsx           # 首页仪表盘
├── components/            # React 组件
│   ├── ui/               # Shadcn/UI 基础组件
│   ├── layout/           # 布局组件
│   ├── theme-switcher.tsx # 主题切换器
│   └── theme-provider.tsx # 主题提供者
├── lib/                  # 工具函数和配置
│   ├── themes.ts         # 主题配置
│   └── utils.ts          # 工具函数
├── public/               # 静态资源
└── README.md            # 项目文档
```

## 🎨 主题系统

### 预设主题

| 主题 | 主色调 | 特点 | 适用场景 |
|------|--------|------|----------|
| 默认主题 | `#8b5cf6` | 经典紫色系，现代感强 | 通用管理系统 |
| 蓝色主题 | `#3b82f6` | 清新蓝色系，专业感强 | 企业级应用 |
| 绿色主题 | `#10b981` | 自然绿色系，环保感强 | 生态环保应用 |
| 橙色主题 | `#f97316` | 温暖橙色系，活力感强 | 创意活力应用 |

### 使用方法

1. **快速切换**: 点击顶部导航栏的"主题"按钮
2. **详细预览**: 访问侧边栏的"主题设置"页面
3. **模式切换**: 在主题页面切换浅色/深色模式

## 📱 页面功能

### 🏠 仪表盘
- 数据统计卡片
- 最近活动列表
- 快速操作入口
- 系统状态监控

### 👥 用户管理
- 用户列表展示
- 用户状态管理
- 搜索和筛选
- 批量操作

### 📦 产品管理
- 产品信息管理
- 库存状态监控
- 分类管理
- 价格设置

### 🛒 订单管理
- 订单状态跟踪
- 订单详情查看
- 处理流程管理
- 统计报表

### 📝 内容管理
- 文章管理
- 页面管理
- 媒体库
- 内容编辑器

### 📊 数据分析
- 销售数据图表
- 用户增长分析
- 产品销量统计
- 趋势预测

### ⚙️ 系统设置
- 系统配置
- 安全设置
- 通知设置
- 界面偏好

## 🔧 自定义配置

### 添加新主题

在 `lib/themes.ts` 中添加新主题配置：

```typescript
{
  name: "custom",
  label: "自定义主题",
  description: "自定义主题描述",
  colors: {
    light: {
      "--primary": "#your-color",
      // ... 其他颜色变量
    },
    dark: {
      "--primary": "#your-dark-color",
      // ... 其他颜色变量
    }
  }
}
```

### 修改全局样式

编辑 `app/globals.css` 中的 CSS 变量来自定义主题：

```css
:root {
  --primary: #your-primary-color;
  --background: #your-background-color;
  /* ... 其他变量 */
}
```

## 🎯 开发指南

### 添加新页面

1. 在 `app/` 目录下创建新文件夹
2. 添加 `page.tsx` 文件
3. 在侧边栏菜单中添加链接

### 添加新组件

1. 在 `components/` 目录下创建组件文件
2. 使用 TypeScript 定义接口
3. 遵循 Shadcn/UI 的设计规范

### 样式规范

- 使用 Tailwind CSS 类名
- 遵循主题变量命名规范
- 保持响应式设计原则

## 🚀 部署

### Vercel 部署

1. 将代码推送到 GitHub
2. 在 Vercel 中导入项目
3. 自动部署完成

### 其他平台

```bash
# 构建项目
npm run build

# 启动生产服务器
npm start
```

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🙏 致谢

- [Next.js](https://nextjs.org/) - React 框架
- [Shadcn/UI](https://ui.shadcn.com/) - 组件库
- [Tailwind CSS](https://tailwindcss.com/) - CSS 框架
- [Lucide](https://lucide.dev/) - 图标库

---

⭐ 如果这个项目对您有帮助，请给它一个星标！