# website-monorepo **Repository Path**: volatchange/website-menorepo ## Basic Information - **Project Name**: website-monorepo - **Description**: 使用monorepo 来构建个人网站 ，网页端（React 18），管理端(Vue3)和服务端(Nestjs). - **Primary Language**: TypeScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2026-01-16 - **Last Updated**: 2026-09-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Website Monorepo 一个基于 pnpm workspace 构建的现代化全栈博客系统，包含 React 前端应用、Vue 管理后台和 NestJS 后端服务。 ## 项目概述 本项目采用 monorepo 架构，使用 pnpm workspace 管理多个子包，实现了前后端代码的统一管理和复用。系统包含完整的博客功能、相册管理、留言板、动态发布、用户管理等模块。 ### 主要功能模块 - **博客文章**: 文章发布、编辑、分类、标签管理 - **相册系统**: 图片上传、相册管理、瀑布流展示 - **留言板**: 用户留言、点赞、管理员回复 - **动态发布**: 类似朋友圈的动态发布和评论 - **用户系统**: 用户注册、登录、JWT 认证、Gitee OAuth - **管理后台**: Vue3 构建的完整管理后台 - **数据统计**: 访问统计、系统监控 ## 技术栈 ### 核心框架 | 分类 | 技术 | 版本 | | -------- | ---------- | ---- | | 前端框架 | React | 19.x | | 前端框架 | Vue | 3.x | | 后端框架 | NestJS | 11.x | | 构建工具 | Vite | 7.x | | 类型系统 | TypeScript | 5.x | | 包管理器 | pnpm | 8.x | ### 前端技术栈 #### React 应用 (react-app) - **UI 框架**: Tailwind CSS 4.x + Ant Design 6.x - **状态管理**: Zustand 5.x - **路由管理**: React Router DOM v7 - **动画库**: Framer Motion - **HTTP 客户端**: Axios - **数据获取**: TanStack Query (React Query) - **Markdown 渲染**: react-markdown + remark-gfm - **代码高亮**: react-syntax-highlighter + highlight.js - **Live2D**: pixi-live2d-display + pixi.js - **测试框架**: Vitest + React Testing Library #### Vue 应用 (vue-admin) - **UI 框架**: Element Plus 2.x - **状态管理**: Pinia 3.x - **路由管理**: Vue Router 5.x - **数据获取**: TanStack Query (Vue Query) - **Markdown 编辑器**: Vditor + @kangc/v-md-editor - **图表**: ECharts 6.x + vue-echarts - **公式渲染**: KaTeX ### 后端技术栈 (nest-server) - **核心框架**: NestJS 11 - **ORM**: TypeORM 0.3.x - **数据库**: PostgreSQL - **缓存**: cache-manager - **日志**: Winston + winston-daily-rotate-file - **API 文档**: Swagger - **认证**: Passport + JWT - **文件上传**: Multer + 七牛云 - **测试框架**: Vitest ### 开发工具 - **代码检查**: ESLint 9.x - **样式检查**: Stylelint 17.x - **代码格式化**: Prettier 3.x - **Git 钩子**: Husky 9.x - **提交规范**: Commitlint - **类型检查**: TypeScript ## 环境配置 项目使用 `.env.development` 和 `.env.production` 区分开发和生产环境。 ### 后端环境变量 (nest-server) ```env # 应用配置 NODE_ENV=development APP_PORT=3000 API_PREFIX=/api/v1 APP_NAME=Nest Pnpm Demo APP_BASE_URL="http://localhost:${APP_PORT}" APP_LOCALE=zh-CN # 数据库配置 DB_HOST=localhost DB_PORT=5432 DB_USER=postgres DB_PASSWORD=your_password DB_NAME=nest-website DB_SYNCHRONIZE=true # 日志配置 LOGGER_LEVEL=verbose LOGGER_MAX_FILES=30 # Swagger 配置 SWAGGER_ENABLE=true SWAGGER_PATH=api-docs SWAGGER_VERSION=1.0 # JWT 密钥配置 JWT_SECRET=your_jwt_secret JWT_EXPIRES_IN=604800 JWT_REFRESH_SECRET=your_refresh_secret JWT_REFRESH_EXPIRES_IN=604800 ADMIN_JWT_SECRET=your_admin_jwt_secret ADMIN_JWT_EXPIRES_IN=86400 ADMIN_JWT_REFRESH_SECRET=your_admin_refresh_secret ADMIN_JWT_REFRESH_EXPIRES_IN=86400 # Gitee OAuth 配置 GITEE_CLIENT_ID=your_gitee_client_id GITEE_CLIENT_SECRET=your_gitee_client_secret GITEE_REDIRECT_URI=http://localhost:3000/api/auth/gitee/callback # 七牛云配置 QINIU_ACCESS_KEY=your_access_key QINIU_SECRET_KEY=your_secret_key QINIU_BUCKET=your_bucket QINIU_ZONE=z2 QINIU_CDN_DOMAIN=cdn.yourdomain.com QINIU_UPLOAD_PREFIX=blog ``` ### 前端环境变量 (react-app / vue-admin) ```env # API 基础 URL VITE_API_URL=http://localhost:3000/api # 高德地图配置 VITE_AMAP_KEY=your_amap_key VITE_AMAP_SECURITY_CODE=your_security_code ``` ## 快速开始 ### 环境要求 - Node.js >= 18.0.0 - pnpm >= 8.0.0 - PostgreSQL >= 14.0 ### 安装依赖 ```bash # 安装所有子包的依赖 pnpm install ``` ### 配置环境变量 1. 复制各包的 `.env.development` 为 `.env.production`（已提供） 2. 根据实际环境修改配置（数据库密码、JWT 密钥、OAuth 配置等） ### 启动开发服务器 ```bash # 启动所有服务 pnpm dev # 或单独启动某个子包 pnpm dev:react # 启动 React 应用 (http://localhost:5173) pnpm dev:vue # 启动 Vue 管理端 (http://localhost:5174) pnpm dev:nest # 启动 NestJS 服务 (http://localhost:3000) ``` ### 构建生产版本 ```bash # 构建所有子包 pnpm build # 或单独构建某个子包 pnpm build:react # 构建 React 应用 pnpm build:vue # 构建 Vue 管理端 pnpm build:nest # 构建 NestJS 服务 ``` ### 类型检查 ```bash # 检查所有子包的类型 pnpm type:check # 或单独检查某个子包 pnpm type:check:react pnpm type:check:vue pnpm type:check:nest ``` ### 代码检查 ```bash # 检查所有子包的代码 pnpm lint # 或单独检查某个子包 pnpm lint:react pnpm lint:vue pnpm lint:nest ``` ### 运行测试 ```bash # 运行所有子包的测试 pnpm test # 或单独运行某个子包的测试 pnpm test:react pnpm test:nest ``` ## 项目结构 ``` website-monorepo/ ├── .husky/ # Git 钩子配置 ├── app/ # 子包目录 │ ├── nest-server/ # NestJS 后端服务 │ │ ├── src/ │ │ │ ├── config/ # 配置文件 │ │ │ ├── constants/ # 常量定义 │ │ │ ├── enums/ # 枚举类型 │ │ │ ├── modules/ # 功能模块 │ │ │ │ ├── admin/ # 管理员模块 │ │ │ │ ├── albums/ # 相册模块 │ │ │ │ ├── articles/ # 文章模块 │ │ │ │ ├── auth/ # 认证模块 │ │ │ │ ├── blessings/ # 祝福模块 │ │ │ │ ├── columns/ # 专栏模块 │ │ │ │ ├── danmus/ # 弹幕模块 │ │ │ │ ├── guestbook/ # 留言板模块 │ │ │ │ ├── memories/ # 回忆模块 │ │ │ │ ├── messages/ # 消息模块 │ │ │ │ ├── moments/ # 动态模块 │ │ │ │ ├── navigation/# 导航模块 │ │ │ │ ├── notifications/ # 通知模块 │ │ │ │ ├── settings/ # 设置模块 │ │ │ │ ├── stats/ # 统计模块 │ │ │ │ ├── subscriptions/ # 订阅模块 │ │ │ │ ├── tags/ # 标签模块 │ │ │ │ ├── uploads/ # 上传模块 │ │ │ │ ├── users/ # 用户模块 │ │ │ │ └── wallpapers/# 壁纸模块 │ │ │ ├── shared/ # 共享模块 │ │ │ ├── types/ # 类型定义 │ │ │ └── utils/ # 工具函数 │ │ ├── .env.development # 开发环境配置 │ │ ├── .env.production # 生产环境配置 │ │ └── package.json │ ├── react-app/ # React 前端应用 │ │ ├── src/ │ │ │ ├── apis/ # API 接口 │ │ │ ├── assets/ # 静态资源 │ │ │ ├── components/ # 组件 │ │ │ ├── config/ # 配置文件 │ │ │ ├── enums/ # 枚举类型 │ │ │ ├── hooks/ # 自定义 Hooks │ │ │ ├── pages/ # 页面组件 │ │ │ ├── router/ # 路由配置 │ │ │ ├── store/ # 状态管理 │ │ │ └── utils/ # 工具函数 │ │ ├── public/ # 公共资源 │ │ │ └── live2d-models/ # Live2D 模型 │ │ ├── .env.development # 开发环境配置 │ │ ├── .env.production # 生产环境配置 │ │ └── package.json │ └── vue-admin/ # Vue 管理端应用 │ ├── src/ │ ├── .env.development # 开发环境配置 │ ├── .env.production # 生产环境配置 │ └── package.json ├── common/ # 共享代码目录 │ ├── constant/ # 常量定义 │ ├── enums/ # 枚举类型 │ ├── types/ # 类型定义 │ └── utils/ # 工具函数 │ ├── date/ # 日期工具 │ ├── http/ # HTTP 工具 │ ├── rexp/ # 正则工具 │ └── validate/ # 验证工具 ├── .gitignore # Git 忽略文件 ├── .prettierrc # Prettier 配置 ├── LICENSE # 许可证文件 ├── package.json # 根依赖和脚本 ├── pnpm-lock.yaml # pnpm 依赖锁文件 ├── pnpm-workspace.yaml # pnpm workspace 配置 ├── tsconfig.base.json # 共享 TypeScript 配置 └── README.md # 项目文档 ``` ## 子包说明 ### 1. react-app (前端应用) 基于 React 19 + TypeScript + Vite 构建的现代化前端应用。 **主要功能**: - 首页展示、博客文章列表、文章详情 - 专栏订阅、标签云、搜索功能 - 相册浏览、瀑布流展示 - 留言板、动态发布、点赞评论 - 个人中心、消息通知 - Live2D 看板娘、全屏特效（樱花/下雨/下雪） - 响应式布局、主题切换 **主要目录结构**: ``` react-app/src/ ├── apis/ # API 接口定义 │ ├── services/ # API 服务 │ └── types/ # 类型定义 ├── assets/ # 静态资源 ├── components/ # 通用组件 │ ├── ArticleCard/ # 文章卡片 │ ├── CherryBlossom/ # 樱花特效 │ ├── Live2d/ # Live2D 组件 │ ├── MomentCard/ # 动态卡片 │ └── ui/ # UI 基础组件 ├── pages/ # 页面组件 │ ├── Blog/ # 博客页面 │ ├── Article/ # 文章详情 │ ├── Memory/ # 相册页面 │ ├── Moments/ # 动态页面 │ ├── Message/ # 留言板 │ ├── PersonalInfo/ # 个人信息 │ └── Profile/ # 个人中心 ├── router/ # 路由配置 ├── store/ # 状态管理 (Zustand) └── hooks/ # 自定义 Hooks ``` ### 2. vue-admin (管理后台) 基于 Vue 3 + TypeScript + Vite + Element Plus 构建的管理后台。 **主要功能**: - 仪表盘、数据统计 - 文章管理、专栏管理、标签管理 - 相册管理、图片上传 - 用户管理、留言管理 - 动态审核、系统设置 ### 3. nest-server (后端服务) 基于 NestJS + TypeORM + PostgreSQL 构建的 RESTful API 服务。 **主要功能模块**: - **Admin**: 管理员认证、用户管理、日志记录 - **Albums**: 相册 CRUD、图片上传 - **Articles**: 文章 CRUD、分类标签 - **Auth**: 用户认证、JWT、Gitee OAuth - **Blessings**: 祝福墙功能 - **Columns**: 专栏管理、订阅 - **Danmus**: 弹幕系统 - **Guestbook**: 留言板、点赞 - **Memories**: 回忆相册 - **Messages**: 站内消息 - **Moments**: 动态发布、评论 - **Navigation**: 导航管理 - **Notifications**: 通知系统 - **Settings**: 系统设置 - **Stats**: 访问统计 - **Subscriptions**: 订阅管理 - **Tags**: 标签管理 - **Uploads**: 文件上传、七牛云存储 - **Users**: 用户管理 - **Wallpapers**: 壁纸管理 ### 4. common (共享代码) 用于存放多个子包共享的代码，包括常量、枚举、类型定义和工具函数。 **主要目录结构**: - **constant/**: 常量定义 - **enums/**: 枚举类型 - **types/**: 类型定义 - **utils/**: 工具函数 - **date/**: 日期处理工具 - **http/**: HTTP 相关工具 - **rexp/**: 正则表达式工具 - **validate/**: 数据验证工具 ## 脚本命令 ### 根目录脚本 | 命令 | 描述 | | ----------------- | ------------------------ | | `pnpm install` | 安装所有子包依赖 | | `pnpm dev` | 启动所有子包的开发服务器 | | `pnpm build` | 构建所有子包 | | `pnpm type:check` | 检查所有子包的类型 | | `pnpm lint` | 检查所有子包的代码规范 | | `pnpm test` | 运行所有子包的测试 | ### 子包脚本 | 命令 | 描述 | | ------------------ | -------------------------- | | `pnpm dev:react` | 启动 React 应用开发服务器 | | `pnpm dev:vue` | 启动 Vue 管理端开发服务器 | | `pnpm dev:nest` | 启动 NestJS 服务开发服务器 | | `pnpm build:react` | 构建 React 应用 | | `pnpm build:vue` | 构建 Vue 管理端 | | `pnpm build:nest` | 构建 NestJS 服务 | ## 代码规范 ### JavaScript/TypeScript - **检查工具**: ESLint 9.x - **格式化工具**: Prettier 3.x - **配置文件**: `eslint.config.js` ### CSS/SCSS - **检查工具**: Stylelint 17.x - **配置文件**: `stylelint.config.js` ### Git 规范 - **提交信息**: Commitlint (遵循 Conventional Commits) - **Git 钩子**: Husky + Lint-staged - **允许的 type**: feat, fix, docs, style, refactor, test, chore, revert, build, wip, types, bug, perf, ui, merge, workflow, release, deploy, ci ### 提交示例 ```bash git commit -m "feat: 添加文章搜索功能" git commit -m "fix: 修复相册上传失败的问题" git commit -m "docs: 更新 API 文档" git commit -m "style: 格式化代码" git commit -m "refactor: 重构用户认证模块" ``` ## 开发流程 1. **克隆仓库** ```bash git clone cd website-monorepo ``` 2. **安装依赖** ```bash pnpm install ``` 3. **配置环境变量** - 检查并修改各包的 `.env.development` 配置 4. **启动开发服务器** ```bash # 启动所有服务 pnpm dev # 或单独启动 pnpm dev:nest # 先启动后端 pnpm dev:react # 再启动前端 ``` 5. **开发与测试** - 编写代码 - 运行类型检查: `pnpm type:check` - 运行代码检查: `pnpm lint` - 运行测试: `pnpm test` 6. **构建生产版本** ```bash pnpm build ``` 7. **提交代码** ```bash git add . git commit -m "feat: add new feature" git push ``` ## 部署说明 ### 生产环境配置 1. 修改各包的 `.env.production` 文件 2. 将 `localhost` 替换为实际域名 3. 配置数据库连接信息 4. 配置 JWT 密钥和 OAuth 信息 ### 构建命令 ```bash # 构建所有子包 pnpm build # 构建产物位置 # nest-server: app/nest-server/dist # react-app: app/react-app/dist # vue-admin: app/vue-admin/dist ``` ### 部署方式 - **后端**: 使用 PM2 或 Docker 部署 NestJS 服务 - **前端**: 将构建产物部署到 Nginx 或 CDN ## 许可证 MIT ## 贡献 欢迎提交 Issue 和 Pull Request！ ## 联系方式 如有问题或建议，请通过以下方式联系： - 项目地址: https://gitee.com/volatchange/website-menorepo - 问题反馈: https://gitee.com/volatchange/website-menorepo/issues