From 6d713c22ed143f17b05819d3b1ae54bff5bd5449 Mon Sep 17 00:00:00 2001 From: XuJiacheng Date: Wed, 18 Mar 2026 14:29:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0Docker=E9=83=A8?= =?UTF-8?q?=E7=BD=B2=E9=85=8D=E7=BD=AE=E5=92=8C=E9=A1=B9=E7=9B=AE=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加前后端Dockerfile和docker-compose配置 创建部署脚本deploy.sh 完善项目文档结构包括前后端文档、API文档和部署文档 更新README提供项目概述和快速开始指南 文档包括详细的技术栈说明、功能模块介绍和部署指南 部署方案支持一键式容器化部署和宝塔面板集成 --- README.md | 102 +++++++++++- back-end/Dockerfile | 12 ++ deploy.sh | 21 +++ docker-compose.yml | 33 ++++ docs/api.md | 332 ++++++++++++++++++++++++++++++++++++++ docs/backend.md | 152 ++++++++++++++++++ docs/deployment.md | 372 +++++++++++++++++++++++++++++++++++++++++++ docs/frontend.md | 138 ++++++++++++++++ front-end/Dockerfile | 17 ++ 9 files changed, 1177 insertions(+), 2 deletions(-) create mode 100644 back-end/Dockerfile create mode 100644 deploy.sh create mode 100644 docker-compose.yml create mode 100644 docs/api.md create mode 100644 docs/backend.md create mode 100644 docs/deployment.md create mode 100644 docs/frontend.md create mode 100644 front-end/Dockerfile diff --git a/README.md b/README.md index 354a426..6523b5c 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,101 @@ -# Web_BAI_Manage_ApiServer +# BAI Management System -BAI（Boonlive Artificial Intelligence）平台微信API接口&管理平台 \ No newline at end of file +## 项目概述 + +BAI管理系统是一个前后端分离的系统，包含API接口和Web后台管理部分。该系统为微信小程序前端和Web后台管理提供服务支持。 + +## 系统架构 + +``` +┌───────────────┐ ┌───────────────┐ +│ 微信小程序前端 │ │ Web后台管理 │ +└───────────────┘ └───────────────┘ + │ │ + └─────────┬───────────┘ + ▼ + ┌───────────────────┐ + │ API接口服务 │ + └───────────────────┘ + │ + ┌─────────┴─────────┐ + ▼ ▼ +┌───────────────┐ ┌───────────────┐ +│ 数据库服务 │ │ AI交互服务 │ +└───────────────┘ └───────────────┘ +``` + +## 项目结构 + +``` +Web_BAI_Manage_ApiServer/ +├── back-end/ # 后端API服务 +├── front-end/ # Web后台管理前端 +├── docs/ # 项目文档 +│ ├── project.md # 项目规则文件 +│ ├── frontend.md # 前端功能文档 +│ ├── backend.md # 后端功能文档 +│ ├── api.md # API接口文档 +│ └── deployment.md # 部署文档 +└── README.md # 项目说明文档 +``` + +## 技术栈 + +### 后端 +- Node.js 22+ +- Express.js +- Pocketbase (数据库) + +### 前端 +- Vue 3.x +- Element Plus +- Vue Router +- Pinia + +## 快速开始 + +### 后端服务 + +1. 进入后端目录 +```bash +cd back-end +``` + +2. 安装依赖 +```bash +npm install +``` + +3. 启动开发服务器 +```bash +npm run dev +``` + +### 前端服务 + +1. 进入前端目录 +```bash +cd front-end +``` + +2. 安装依赖 +```bash +npm install --legacy-peer-deps +``` + +3. 启动开发服务器 +```bash +npm run serve +``` + +## 文档 + +- [项目规则](docs/project.md) +- [前端功能文档](docs/frontend.md) +- [后端功能文档](docs/backend.md) +- [API接口文档](docs/api.md) +- [部署文档](docs/deployment.md) + +## 许可证 + +ISC License \ No newline at end of file diff --git a/back-end/Dockerfile b/back-end/Dockerfile new file mode 100644 index 0000000..6ad89f6 --- /dev/null +++ b/back-end/Dockerfile @@ -0,0 +1,12 @@ +FROM node:22-alpine + +WORKDIR /app + +COPY package*.json ./ +RUN npm install + +COPY . . + +EXPOSE 3000 + +CMD ["node", "src/index.js"] \ No newline at end of file diff --git a/deploy.sh b/deploy.sh new file mode 100644 index 0000000..0a81b58 --- /dev/null +++ b/deploy.sh @@ -0,0 +1,21 @@ +#!/bin/bash + +# 部署脚本 +echo "开始部署BAI管理系统..." + +# 停止并移除旧容器 +echo "停止并移除旧容器..." +docker-compose down + +# 构建并启动新容器 +echo "构建并启动新容器..." +docker-compose up -d --build + +# 查看容器状态 +echo "查看容器状态..." +docker ps + +echo "部署完成！" +echo "前端访问地址: http://$(hostname -I | awk '{print $1}')" +echo "后端API地址: http://$(hostname -I | awk '{print $1}'):3000" +echo "Pocketbase管理地址: http://$(hostname -I | awk '{print $1}'):8080/_/" \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..852ee3c --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,33 @@ +version: '3.8' + +services: + backend: + build: + context: ./back-end + dockerfile: Dockerfile + ports: + - "3000:3000" + environment: + - NODE_ENV=production + - PORT=3000 + - DB_HOST=db + - DB_PORT=8080 + depends_on: + - db + restart: always + + frontend: + build: + context: ./front-end + dockerfile: Dockerfile + ports: + - "80:80" + restart: always + + db: + image: pocketbase/pocketbase:latest + ports: + - "8080:8080" + volumes: + - ./data:/pb_data + restart: always \ No newline at end of file diff --git a/docs/api.md b/docs/api.md new file mode 100644 index 0000000..ea14e77 --- /dev/null +++ b/docs/api.md @@ -0,0 +1,332 @@ +# API接口文档 + +## 接口概述 + +本文档定义了微信小程序前端调用的API接口，包括认证、用户、数据等相关接口。 + +## 基础信息 + +- API基础路径: `http://localhost:3000/api` +- 响应格式: JSON +- 认证方式: JWT + +## 认证接口 + +### 1. 用户登录 + +**接口地址**: `/auth/login` +**请求方式**: POST +**请求参数**: + +| 参数名 | 类型 | 必选 | 描述 | +|-------|------|------|------| +| username | string | 是 | 用户名 | +| password | string | 是 | 密码 | + +**响应示例**: + +```json +{ + "code": 200, + "message": "登录成功", + "data": { + "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", + "user": { + "id": "123", + "username": "admin", + "nickname": "管理员" + } + } +} +``` + +### 2. 用户注册 + +**接口地址**: `/auth/register` +**请求方式**: POST +**请求参数**: + +| 参数名 | 类型 | 必选 | 描述 | +|-------|------|------|------| +| username | string | 是 | 用户名 | +| password | string | 是 | 密码 | +| nickname | string | 是 | 昵称 | + +**响应示例**: + +```json +{ + "code": 200, + "message": "注册成功", + "data": { + "id": "123", + "username": "user1", + "nickname": "新用户" + } +} +``` + +## 用户接口 + +### 1. 获取用户信息 + +**接口地址**: `/user/info` +**请求方式**: GET +**请求头**: +- Authorization: Bearer {token} + +**响应示例**: + +```json +{ + "code": 200, + "message": "获取成功", + "data": { + "id": "123", + "username": "admin", + "nickname": "管理员", + "avatar": "https://example.com/avatar.jpg", + "createdAt": "2026-03-18T00:00:00Z" + } +} +``` + +### 2. 更新用户信息 + +**接口地址**: `/user/update` +**请求方式**: PUT +**请求头**: +- Authorization: Bearer {token} +**请求参数**: + +| 参数名 | 类型 | 必选 | 描述 | +|-------|------|------|------| +| nickname | string | 否 | 昵称 | +| avatar | string | 否 | 头像URL | + +**响应示例**: + +```json +{ + "code": 200, + "message": "更新成功", + "data": { + "id": "123", + "username": "admin", + "nickname": "新昵称", + "avatar": "https://example.com/new-avatar.jpg" + } +} +``` + +## 数据接口 + +### 1. 获取数据列表 + +**接口地址**: `/data/list` +**请求方式**: GET +**请求参数**: + +| 参数名 | 类型 | 必选 | 描述 | +|-------|------|------|------| +| page | number | 否 | 页码，默认1 | +| size | number | 否 | 每页条数，默认10 | +| keyword | string | 否 | 搜索关键词 | + +**响应示例**: + +```json +{ + "code": 200, + "message": "获取成功", + "data": { + "list": [ + { + "id": "1", + "title": "数据1", + "content": "内容1", + "createdAt": "2026-03-18T00:00:00Z" + } + ], + "total": 1, + "page": 1, + "size": 10 + } +} +``` + +### 2. 获取数据详情 + +**接口地址**: `/data/detail/{id}` +**请求方式**: GET +**路径参数**: +- id: 数据ID + +**响应示例**: + +```json +{ + "code": 200, + "message": "获取成功", + "data": { + "id": "1", + "title": "数据1", + "content": "内容1", + "createdAt": "2026-03-18T00:00:00Z", + "updatedAt": "2026-03-18T00:00:00Z" + } +} +``` + +## AI接口 + +### 1. 智能问答 + +**接口地址**: `/ai/chat` +**请求方式**: POST +**请求参数**: + +| 参数名 | 类型 | 必选 | 描述 | +|-------|------|------|------| +| question | string | 是 | 问题 | +| context | string | 否 | 上下文 | + +**响应示例**: + +```json +{ + "code": 200, + "message": "获取成功", + "data": { + "answer": "这是AI的回答", + "thinking": "AI的思考过程", + "tokens": 100 + } +} +``` + +## 视频接口 + +### 1. 上传视频 + +**接口地址**: `/video/upload` +**请求方式**: POST +**请求头**: +- Content-Type: multipart/form-data +**请求参数**: + +| 参数名 | 类型 | 必选 | 描述 | +|-------|------|------|------| +| video | file | 是 | 视频文件 | +| title | string | 是 | 视频标题 | + +**响应示例**: + +```json +{ + "code": 200, + "message": "上传成功", + "data": { + "id": "1", + "title": "视频标题", + "url": "https://example.com/video.mp4", + "duration": 60 + } +} +``` + +### 2. 获取视频列表 + +**接口地址**: `/video/list` +**请求方式**: GET +**请求参数**: + +| 参数名 | 类型 | 必选 | 描述 | +|-------|------|------|------| +| page | number | 否 | 页码，默认1 | +| size | number | 否 | 每页条数，默认10 | + +**响应示例**: + +```json +{ + "code": 200, + "message": "获取成功", + "data": { + "list": [ + { + "id": "1", + "title": "视频1", + "url": "https://example.com/video1.mp4", + "duration": 60, + "createdAt": "2026-03-18T00:00:00Z" + } + ], + "total": 1, + "page": 1, + "size": 10 + } +} +``` + +## 错误码说明 + +| 错误码 | 描述 | +|-------|------| +| 400 | 请求参数错误 | +| 401 | 未授权，请登录 | +| 403 | 禁止访问 | +| 404 | 资源不存在 | +| 500 | 服务器内部错误 | + +## 调用示例 + +### 使用axios调用 + +```javascript +// 登录 +axios.post('/api/auth/login', { + username: 'admin', + password: '123456' +}).then(response => { + const token = response.data.data.token; + // 存储token + localStorage.setItem('token', token); +}); + +// 带认证的请求 +axios.get('/api/user/info', { + headers: { + 'Authorization': `Bearer ${localStorage.getItem('token')}` + } +}); +``` + +### 使用fetch调用 + +```javascript +// 登录 +fetch('/api/auth/login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + username: 'admin', + password: '123456' + }) +}).then(response => response.json()) + .then(data => { + const token = data.data.token; + // 存储token + localStorage.setItem('token', token); + }); + +// 带认证的请求 +fetch('/api/user/info', { + headers: { + 'Authorization': `Bearer ${localStorage.getItem('token')}` + } +}).then(response => response.json()) + .then(data => console.log(data)); +``` \ No newline at end of file diff --git a/docs/backend.md b/docs/backend.md new file mode 100644 index 0000000..71c34f2 --- /dev/null +++ b/docs/backend.md @@ -0,0 +1,152 @@ +# 后端功能文档 + +## 项目概述 + +后端项目是基于Node.js的API接口服务，为微信小程序前端和Web后台管理提供数据交互支持。 + +## 技术栈 + +- Node.js 22+ +- Express.js +- Pocketbase (数据库) +- TypeScript +- JWT (认证) +- dotenv (环境变量管理) + +## 项目结构 + +``` +back-end/ +├── src/ +│ ├── controllers/ # 控制器 +│ ├── routes/ # 路由 +│ ├── services/ # 业务逻辑 +│ ├── models/ # 数据模型 +│ ├── middlewares/ # 中间件 +│ ├── utils/ # 工具函数 +│ └── index.js # 入口文件 +├── spec/ # OpenAPI规范 +├── tests/ # 测试文件 +├── scripts/ # 脚本文件 +├── .env # 环境变量 +└── package.json # 项目配置 +``` + +## 核心功能模块 + +### 1. 认证模块 +- 用户登录/注册 +- JWT token生成与验证 +- 权限控制 + +### 2. 用户管理 +- 用户信息管理 +- 密码重置 +- 用户状态管理 + +### 3. 数据管理 +- 数据CRUD操作 +- 数据验证 +- 数据统计 + +### 4. AI交互模块 +- 与AI网关的集成 +- RAG系统对接 +- 智能问答 + +### 5. 视频服务 +- 视频流处理 +- 视频存储 +- 视频转码 + +## 开发指南 + +### 环境搭建 + +1. 安装依赖 +```bash +npm install +``` + +2. 启动开发服务器 +```bash +npm run dev +``` + +3. 运行测试 +```bash +npm run test +``` + +### 代码规范 + +- 使用ESLint进行代码检查 +- 遵循RESTful API设计规范 +- 错误处理统一化 +- 日志记录 + +### 路由设计 + +路由配置位于 `src/routes/`，支持RESTful API设计。 + +### 数据库操作 + +使用Pocketbase作为数据库，提供轻量级的数据存储解决方案。 + +### 环境变量 + +环境变量配置位于 `.env` 文件，包括： +- 服务器端口 +- 数据库连接信息 +- JWT密钥 +- 其他配置参数 + +## API设计规范 + +### 响应格式 + +```json +{ + "code": 200, + "message": "success", + "data": {} +} +``` + +### 错误处理 + +```json +{ + "code": 400, + "message": "错误信息", + "data": null +} +``` + +### 状态码定义 + +- 200: 成功 +- 400: 请求错误 +- 401: 未授权 +- 403: 禁止访问 +- 404: 资源不存在 +- 500: 服务器内部错误 + +## 中间件 + +- 认证中间件 +- 日志中间件 +- 错误处理中间件 +- CORS中间件 + +## 安全措施 + +- JWT认证 +- 密码加密 +- 输入验证 +- 防止SQL注入 +- 防止XSS攻击 + +## 部署说明 + +详见 [部署文档](deployment.md)。 \ No newline at end of file diff --git a/docs/deployment.md b/docs/deployment.md new file mode 100644 index 0000000..3049cf6 --- /dev/null +++ b/docs/deployment.md @@ -0,0 +1,372 @@ +# 部署文档 + +## 部署环境 + +- Ubuntu 20.04 LTS+ +- 宝塔面板 7.0+ +- Docker +- Node.js 22+ + +## 部署架构 + +``` +┌───────────────┐ +│ 宝塔面板 │ +└───────────────┘ + │ + ▼ +┌───────────────────────┐ +│ Nginx (反向代理) │ +└───────────────────────┘ + │ + ├───────────────┐ + ▼ ▼ +┌───────────────┐ ┌───────────────┐ +│ 前端容器 │ │ 后端容器 │ +└───────────────┘ └───────────────┘ + │ │ + └───────────────┘ + │ + ▼ + ┌────────────────┐ + │ Pocketbase DB │ + └────────────────┘ +``` + +## 准备工作 + +### 1. 安装宝塔面板 + +```bash +# 安装宝塔面板 +wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh + +# 安装完成后，根据提示访问面板地址并设置账号密码 +``` + +### 2. 安装Docker + +在宝塔面板中： +1. 打开「软件商店」 +2. 搜索「Docker」并安装 +3. 等待安装完成 + +### 3. 安装Node.js + +在宝塔面板中： +1. 打开「软件商店」 +2. 搜索「Node.js」并安装对应版本 +3. 等待安装完成 + +## 后端部署 + +### 1. 创建Dockerfile + +在 `back-end` 目录创建 `Dockerfile` 文件： + +```dockerfile +FROM node:22-alpine + +WORKDIR /app + +COPY package*.json ./ +RUN npm install + +COPY . . + +EXPOSE 3000 + +CMD ["node", "src/index.js"] +``` + +### 2. 创建docker-compose.yml + +在项目根目录创建 `docker-compose.yml` 文件： + +```yaml +version: '3.8' + +services: + backend: + build: + context: ./back-end + dockerfile: Dockerfile + ports: + - "3000:3000" + environment: + - NODE_ENV=production + - PORT=3000 + - DB_HOST=db + - DB_PORT=8080 + depends_on: + - db + restart: always + + frontend: + build: + context: ./front-end + dockerfile: Dockerfile + ports: + - "80:80" + restart: always + + db: + image: pocketbase/pocketbase:latest + ports: + - "8080:8080" + volumes: + - ./data:/pb_data + restart: always +``` + +### 3. 前端Dockerfile + +在 `front-end` 目录创建 `Dockerfile` 文件： + +```dockerfile +FROM node:22-alpine as build + +WORKDIR /app + +COPY package*.json ./ +RUN npm install --legacy-peer-deps + +COPY . . +RUN npm run build + +FROM nginx:alpine + +COPY --from=build /app/dist /usr/share/nginx/html + +EXPOSE 80 + +CMD ["nginx", "-g", "daemon off;"] +``` + +## 一键部署脚本 + +### 1. 创建部署脚本 + +在项目根目录创建 `deploy.sh` 文件： + +```bash +#!/bin/bash + +# 部署脚本 +echo "开始部署BAI管理系统..." + +# 停止并移除旧容器 +echo "停止并移除旧容器..." +docker-compose down + +# 构建并启动新容器 +echo "构建并启动新容器..." +docker-compose up -d --build + +# 查看容器状态 +echo "查看容器状态..." +docker ps + +echo "部署完成！" +echo "前端访问地址: http://$(hostname -I | awk '{print $1}')" +echo "后端API地址: http://$(hostname -I | awk '{print $1}'):3000" +echo "Pocketbase管理地址: http://$(hostname -I | awk '{print $1}'):8080/_/" +``` + +### 2. 赋予脚本执行权限 + +```bash +chmod +x deploy.sh +``` + +### 3. 执行部署脚本 + +```bash +./deploy.sh +``` + +## 宝塔面板配置 + +### 1. 添加网站 + +1. 打开宝塔面板 +2. 点击「网站」→「添加站点」 +3. 填写域名信息（如果有域名） +4. 选择「纯静态」网站类型 +5. 点击「提交」 + +### 2. 配置反向代理 + +1. 进入网站设置 +2. 点击「反向代理」→「添加反向代理」 +3. 配置前端代理： + - 代理名称：frontend + - 目标URL：http://localhost:80 + - 发送域名：你的域名 +4. 配置后端代理： + - 代理名称：backend + - 目标URL：http://localhost:3000 + - 发送域名：你的域名 + - 路径：/api +5. 点击「保存」 + +### 3. 配置SSL证书（可选） + +1. 进入网站设置 +2. 点击「SSL」→「Let's Encrypt」 +3. 申请并安装SSL证书 +4. 开启「强制HTTPS」 + +## 环境变量配置 + +### 后端环境变量 + +在 `back-end/.env` 文件中配置： + +```env +# Server Configuration +PORT=3000 +NODE_ENV=production + +# Database Configuration +DB_HOST=db +DB_PORT=8080 +DB_NAME=bai_management + +# JWT Configuration +JWT_SECRET=your_jwt_secret_key +JWT_EXPIRES_IN=24h + +# CORS Configuration +CORS_ORIGIN=* +``` + +### 前端环境变量 + +在 `front-end/.env.production` 文件中配置： + +```env +VUE_APP_API_BASE_URL=http://your-domain.com/api +VUE_APP_TITLE=BAI管理系统 +VUE_APP_VERSION=1.0.0 +``` + +## 数据库配置 + +### Pocketbase设置 + +1. 访问 Pocketbase 管理界面：http://服务器IP:8080/_/ +2. 创建管理员账号 +3. 创建必要的集合： + - users (用户) + - data (数据) + - videos (视频) + - logs (日志) + +## 监控与维护 + +### 查看日志 + +```bash +# 查看后端日志 +docker logs -f backend + +# 查看前端日志 +docker logs -f frontend + +# 查看数据库日志 +docker logs -f db +``` + +### 备份数据 + +```bash +# 备份Pocketbase数据 +docker cp db:/pb_data ./backup + +# 恢复Pocketbase数据 +docker cp ./backup db:/pb_data +``` + +### 升级项目 + +1. 拉取最新代码 +2. 执行部署脚本：`./deploy.sh` + +## 常见问题 + +### 1. 容器启动失败 + +检查容器日志： +```bash +docker logs -f 容器名称 +``` + +### 2. 访问接口报错 + +- 检查反向代理配置 +- 检查后端服务是否正常运行 +- 检查数据库连接是否正常 + +### 3. 前端页面空白 + +- 检查前端容器是否正常运行 +- 检查Nginx配置 +- 检查API地址配置是否正确 + +### 4. 数据库连接失败 + +- 检查数据库容器是否正常运行 +- 检查数据库连接配置 +- 检查网络连接 + +## 性能优化 + +### 1. 前端优化 + +- 启用Gzip压缩 +- 静态资源缓存 +- 代码分割 +- 图片优化 + +### 2. 后端优化 + +- 使用PM2进程管理 +- 数据库索引优化 +- 缓存策略 +- 负载均衡 + +### 3. 服务器优化 + +- 调整Docker内存限制 +- 配置Nginx缓存 +- 启用HTTPS +- 定期清理日志 + +## 安全措施 + +### 1. 服务器安全 + +- 配置防火墙 +- 禁用root登录 +- 使用SSH密钥认证 +- 定期更新系统 + +### 2. 应用安全 + +- 使用HTTPS +- 密码加密存储 +- 输入验证 +- 防止SQL注入 +- 防止XSS攻击 + +### 3. 数据安全 + +- 定期备份数据 +- 数据加密 +- 访问控制 +- 审计日志 + +## 总结 + +本部署方案采用Docker容器化部署，实现了前后端分离的架构，支持一键部署和自动化管理。通过宝塔面板的反向代理功能，实现了域名访问和SSL证书配置，为系统提供了安全、稳定的运行环境。 \ No newline at end of file diff --git a/docs/frontend.md b/docs/frontend.md new file mode 100644 index 0000000..e09ff00 --- /dev/null +++ b/docs/frontend.md @@ -0,0 +1,138 @@ +# 前端功能文档 + +## 项目概述 + +前端项目是基于Vue 3.x的Web后台管理系统，使用Element Plus作为UI组件库，提供直观、高效的管理界面。 + +## 技术栈 + +- Vue 3.x +- Element Plus +- Vue Router +- Pinia (状态管理) +- TypeScript +- ECharts (数据可视化) +- WangEditor (富文本编辑器) + +## 项目结构 + +``` +front-end/ +├── src/ +│ ├── api/ # API接口定义 +│ ├── assets/ # 静态资源 +│ ├── components/ # 通用组件 +│ ├── config/ # 配置文件 +│ ├── i18n/ # 国际化 +│ ├── plugins/ # 插件 +│ ├── router/ # 路由配置 +│ ├── store/ # 状态管理 +│ ├── utils/ # 工具函数 +│ ├── views/ # 页面组件 +│ ├── App.vue # 根组件 +│ └── main.ts # 入口文件 +├── public/ # 公共静态资源 +├── mock/ # 模拟数据 +├── library/ # 自定义库 +└── scripts/ # 脚本文件 +``` + +## 核心功能模块 + +### 1. 认证与授权 +- 登录/注册功能 +- 权限管理 +- 角色控制 + +### 2. 系统管理 +- 用户管理 +- 角色管理 +- 菜单管理 +- 部门管理 +- 字典管理 + +### 3. 数据可视化 +- 仪表盘 +- 统计报表 +- 图表展示 + +### 4. 内容管理 +- 公告管理 +- 文章管理 +- 文件管理 + +### 5. 系统设置 +- 系统配置 +- 主题设置 +- 国际化设置 + +## 开发指南 + +### 环境搭建 + +1. 安装依赖 +```bash +npm install --legacy-peer-deps +``` + +2. 启动开发服务器 +```bash +npm run serve +``` + +3. 构建生产版本 +```bash +npm run build +``` + +### 代码规范 + +- 使用ESLint进行代码检查 +- 使用Prettier进行代码格式化 +- 遵循Vue 3 Composition API规范 +- 组件命名使用PascalCase +- 函数命名使用camelCase + +### 路由配置 + +路由配置位于 `src/router/index.ts`，支持动态路由和权限控制。 + +### 状态管理 + +使用Pinia进行状态管理，状态模块位于 `src/store/modules/`。 + +### API调用 + +API接口定义位于 `src/api/`，使用axios进行网络请求。 + +## 页面结构 + +### 布局结构 +- 顶部导航栏 +- 左侧菜单 +- 右侧内容区域 +- 底部版权信息 + +### 响应式设计 +- 支持PC端和移动端 +- 自适应布局 + +## 主题系统 + +支持多种主题切换，包括： +- 蓝色主题 +- 绿色主题 +- 紫色主题 +- 红色主题 + +## 国际化 + +支持中英文切换，国际化文件位于 `src/i18n/`。 + +## 模拟数据 + +开发环境下使用mock数据，位于 `mock/` 目录。 + +## 部署说明 + +详见 [部署文档](deployment.md)。 \ No newline at end of file diff --git a/front-end/Dockerfile b/front-end/Dockerfile new file mode 100644 index 0000000..1da54d6 --- /dev/null +++ b/front-end/Dockerfile @@ -0,0 +1,17 @@ +FROM node:22-alpine as build + +WORKDIR /app + +COPY package*.json ./ +RUN npm install --legacy-peer-deps + +COPY . . +RUN npm run build + +FROM nginx:alpine + +COPY --from=build /app/dist /usr/share/nginx/html + +EXPOSE 80 + +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file