🌿「静心屿」冥想小程序管理后台
🎯 项目概述
这是一个专为「静心屿」冥想小程序打造的专业内容管理后台系统,采用现代化技术栈构建,致力于为运营人员提供宁静高效的管理体验。
🏗️ 技术架构
前端技术栈
- 框架: Vue 3.4 + TypeScript + Vite 5
- 状态管理: Pinia + persist-plugin
- 路由: Vue Router 4(含权限校验)
- UI组件: Element Plus 深度定制
- 图表: ECharts 5
- 构建优化: vite-plugin-compression + CDN
后端技术栈
- 框架: NestJS 10 + TypeScript
- 数据库: MySQL 8.0 + TypeORM
- 存储: 阿里云OSS + 媒体处理
- 安全: JWT + RBAC权限模型
- 部署: Docker-compose
🚀 快速启动
1. 环境准备
# 复制环境配置文件
cp .env.example .env
# 配置必要参数
# OSS_BUCKET, JWT_SECRET, DB_HOST, ADMIN_DEFAULT_PWD
2. 启动服务
# 一键启动所有服务
docker-compose up -d
# 访问地址
http://localhost:80
3. 默认登录信息
- 用户名: admin
- 密码: quiet@Admin2024
📁 项目结构
mocici-miniapp/
├── backend/ # NestJS 后端服务
│ ├── src/
│ │ ├── auth/ # 认证模块 (JWT)
│ │ ├── users/ # 用户管理
│ │ ├── courses/ # 课程管理
│ │ ├── articles/ # 文章管理
│ │ ├── common/ # 公共模块 (Guards/Filters/Decorators)
│ │ └── database/ # 迁移与种子数据
│ ├── ormconfig.ts
│ └── Dockerfile
├── frontend/ # Vue 3 前端应用
│ ├── src/
│ │ ├── api/ # API 接口封装
│ │ ├── components/ # 公共组件
│ │ ├── composables/ # 组合式函数
│ │ ├── views/ # 页面组件
│ │ ├── store/ # Pinia 状态管理
│ │ ├── router/ # 路由配置
│ │ ├── types/ # TypeScript 类型定义
│ │ ├── utils/ # 工具函数
│ │ └── styles/ # 全局样式
│ ├── vite.config.ts
│ └── Dockerfile
├── nginx/ # 反向代理配置
├── docs/ # 项目文档
├── docker-compose.yml # 容器编排
└── README.md # 项目文档
mocici-miniapp/
├── backend/ # NestJS后端服务
│ ├── src/
│ │ ├── auth/ # 认证模块
│ │ ├── courses/ # 课程管理
│ │ ├── articles/ # 文章管理
│ │ ├── users/ # 用户管理
│ │ └── common/ # 公共模块
│ └── ormconfig.ts
├── frontend/ # Vue3前端应用
│ ├── src/
│ │ ├── views/ # 页面组件
│ │ ├── components/ # 公共组件
│ │ ├── store/ # 状态管理
│ │ └── router/ # 路由配置
├── docker-compose.yml # 容器编排
└── README.md # 项目文档
## 🌸 核心功能
### 🔒 权限管理体系
- 超级管理员 / 内容编辑 / 数据查看员三级权限
- 动态菜单渲染
- 操作日志审计
### 🎧 音视频课程管理
- 拖拽上传 + OSS实时进度显示
- 自动媒体转码处理
- 场景分类与引导语速设置
- 状态流转:草稿 → 审核中 → 已发布 → 已下架
### 📖 文章内容管理
- Quill富文本编辑器定制版
- 智能摘要生成功能
- 水墨风格水印处理
### 📊 数据静观台
- 实时数据看板
- 课程播放热力图
- 用户活跃趋势分析
## 🎨 设计理念
### 色彩体系
- **主色调**: #5A8F7B(竹青)- 代表宁静与成长
- **辅助色**: #F8F9FA(雾白)- 营造纯净空间
- **警示色**: #F5A623(暖橙)- 温和提醒替代刺眼红
### 交互体验
- 呼吸式骨架屏加载动画
- 柔滑的操作反馈动效
- 防抖节流优化性能
## 🔧 开发指南
### 本地开发环境
```bash
# 后端开发
cd backend
npm install
npm run start:dev
# 前端开发
cd frontend
npm install
npm run dev
代码规范
- TypeScript 严格模式(前后端均已启用)
- ESLint + Prettier 统一代码格式
- 前后端独立 lint 配置,支持
npm run lint一键检查 - Vue 3 Composition API +
setup语法 - NestJS 模块化架构 + DTO 校验
🛡️ 安全特性
- JWT Token认证机制
- RBAC角色权限控制
- XSS攻击防护
- SQL注入防范
- 操作日志完整记录
🌿 运营心法
每日清晨发布新课程,如晨露滋养用户心灵
让技术成为宁静的容器,为运营者打造数字禅房般的管理体验。
📚 文档导航
| 文档 | 说明 |
|---|---|
| 部署指南 | Docker Compose 部署与环境配置 |
| API 文档 | RESTful API 接口说明 |
| 架构设计 | 系统架构、模块划分、数据流 |
| 数据库设计 | 表结构、字段说明、枚举值 |
| 前端开发 | 组件、工具函数、路由权限 |
| 错误码规范 | 错误码定义与处理策略 |
| 环境变量 | .env 配置项详细说明 |
| CHANGELOG | 版本变更日志 |
| CONTRIBUTING | 开发贡献指南 |
| docs/ | 全链路开发、发布、运维、运营文档 |
愿每一次内容发布,都能为用户带来内心的平静