# 十一维管理后台 react代码

**Repository Path**: syf554332076/11wei-admin-react

## Basic Information

- **Project Name**: 十一维管理后台 react代码
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-12
- **Last Updated**: 2026-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

这是一个基于 Shadcn 开发的后台管理系统，专为冥想、疗愈类应用设计。

## ✨ 主要功能

系统包含以下核心模块：

### 👥 用户管理 (Users)
- **用户列表**：支持按昵称、手机号搜索，查看用户详情。
- **邀请关系**：查看用户的邀请列表及统计。
- **编辑功能**：修改用户信息，状态管理（禁用/启用）。

### 🧘‍♀️ 安心模块 (Meditations)
- **分类管理**：管理冥想音频的分类。
- **内容管理**：上传和管理冥想音频。
- **媒体支持**：集成腾讯云 COS，支持音频、封面、背景图上传，自动获取音频时长。
- **数据统计**：展示播放量、完播量、分享量、收藏量等数据。

### 🌊 音养模块 (Soundscapes)
- **分类管理**：管理音养分类。
- **内容管理**：支持音频和视频类型的音养内容。
- **媒体上传**：支持首帧图、封面图、媒体文件上传。

### 👑 大师模块 (Masters)
- **大师管理**：管理大师信息、头像、背景色。
- **课程管理**：大师所属课程管理。
- **章节管理**：课程下的章节内容管理。
- **分类管理**：大师和课程的分类体系。

### ❤️ 心能模块 (Heart Energy)
- **课程管理**：独立的能量课程体系。
- **章节管理**：课程章节音频管理。
- **分类管理**：课程分类。

## 🛠 技术栈

- **构建工具**: [Vite](https://vitejs.dev/)
- **前端框架**: [React 18](https://react.dev/)
- **语言**: [TypeScript](https://www.typescriptlang.org/)
- **路由**: [TanStack Router](https://tanstack.com/router/latest)
- **状态/数据流**: [TanStack Query (React Query)](https://tanstack.com/query/latest) + Zustand
- **UI 组件库**: [Shadcn UI](https://ui.shadcn.com) + Tailwind CSS
- **表单处理**: React Hook Form + Zod
- **云服务**: 腾讯云 COS (对象存储)

## 🚀 快速开始

### 环境要求
- Node.js >= 18
- pnpm

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm run dev
```

### 构建生产版本

```bash
pnpm run build
```

## 📂 项目结构

```
src/
├── api/                # API 接口定义与服务
├── components/         # 公共组件 (UI, Layout, etc.)
├── features/           # 业务功能模块 (Users, Meditations, etc.)
│   ├── users/          # 用户管理
│   ├── meditations/    # 安心模块
│   ├── soundscapes/    # 音养模块
│   ├── masters/        # 大师模块
│   └── heart-energy/   # 心能模块
├── hooks/              # 自定义 Hooks
├── routes/             # 路由定义 (TanStack Router)
├── stores/             # 全局状态管理
└── lib/                # 工具函数与配置
```

## ⚙️ 环境配置

### 环境变量

在项目根目录创建 `.env` 文件，配置以下环境变量：

```bash
# API 配置
VITE_API_BASE_URL=https://your-api-domain.com/api
VITE_API_TIMEOUT=30000

# 腾讯云 COS 配置
VITE_COS_BUCKET=your-bucket-name
VITE_COS_REGION=ap-guangzhou
VITE_COS_SECRET_ID=your-secret-id
VITE_COS_SECRET_KEY=your-secret-key

# 应用配置
VITE_APP_TITLE=冥想管理系统
VITE_APP_VERSION=1.0.0
```

### 开发环境配置

1. 安装推荐的 VS Code 扩展：
   - ESLint
   - Prettier
   - Tailwind CSS IntelliSense
   - TypeScript Vue Plugin (Volar)

2. 配置编辑器格式化：
   ```json
   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
   ```

## 🔧 开发规范

### 代码风格

- 使用 ESLint 和 Prettier 进行代码格式化
- 遵循 TypeScript 严格模式
- 组件使用函数式组件 + Hooks
- 使用 kebab-case 命名文件和文件夹
- 使用 PascalCase 命名组件

### Git 提交规范

遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范：

```
feat: 新功能
fix: 修复 Bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
perf: 性能优化
test: 测试相关
chore: 构建/工具链相关
```

示例：
```bash
git commit -m "feat: 添加用户批量导入功能"
git commit -m "fix: 修复音频上传进度显示问题"
```

### 分支管理

- `main`: 生产环境分支
- `develop`: 开发环境分支
- `feature/*`: 功能开发分支
- `hotfix/*`: 紧急修复分支

## 📦 构建与部署

### 构建命令

```bash
# 开发环境构建
pnpm run build:dev

# 生产环境构建
pnpm run build

# 预览构建结果
pnpm run preview
```

### 部署方式

#### 1. Nginx 部署

构建完成后，将 `dist` 目录部署到 Nginx 服务器：

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /var/www/admin-web/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://your-api-server:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

#### 2. Docker 部署

```dockerfile
FROM node:18-alpine as builder
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install
COPY . .
RUN pnpm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

构建并运行：
```bash
docker build -t admin-web .
docker run -d -p 80:80 admin-web
```

#### 3. Vercel/Netlify 部署

直接连接 Git 仓库，配置构建命令：
- Build Command: `pnpm run build`
- Output Directory: `dist`

## 🔐 权限说明

系统采用基于角色的访问控制（RBAC）：

- **超级管理员**：拥有所有权限

## 📱 功能特性

### 文件上传
- 支持音频格式：MP3, WAV, M4A
- 支持视频格式：MP4, MOV
- 支持图片格式：JPG, PNG, WEBP
- 单文件最大支持：500MB
- 自动生成缩略图和预览

### 数据统计
- 实时数据更新
- 支持自定义日期范围查询
- 可导出 Excel/CSV 格式报表

### 搜索功能
- 支持模糊搜索
- 支持多条件组合查询
- 搜索结果高亮显示

## 🐛 常见问题

### Q: 启动开发服务器失败？
**A:** 请确保：
1. Node.js 版本 >= 18
2. 已安装 pnpm：`npm install -g pnpm`
3. 已正确配置 `.env` 文件
4. 端口 5173 未被占用

### Q: 文件上传失败？
**A:** 请检查：
1. 腾讯云 COS 配置是否正确
2. SecretId 和 SecretKey 是否有效
3. Bucket 权限配置是否正确
4. 文件大小是否超过限制

### Q: 打包后页面空白？
**A:** 检查：
1. 路由模式是否正确配置
2. 静态资源路径是否正确
3. 浏览器控制台是否有错误信息

### Q: API 请求跨域问题？
**A:** 开发环境已配置代理，生产环境需要后端配置 CORS 或使用 Nginx 反向代理。