重构动物认领页面和导航菜单,统一使用SVG图标并优化交互体验

This commit is contained in:
ylweng
2025-09-21 21:12:27 +08:00
parent 467a4ead10
commit 14aca938de
64 changed files with 25067 additions and 18256 deletions

323
README.md
View File

@@ -49,245 +49,166 @@
```
jiebanke/
├── 📁 backend/ # 后端服务 (Node.js + Express)
├── 📁 admin-system/ # 后台管理系统 (Vue 3 + Element Plus)
├── 📁 website/ # 官方网站 (Vue 3)
├── 📁 mini-program/ # 微信小程序矩阵 (原生小程序)
├── 📁 docs/ # 项目文档
├── 📁 scripts/ # 工具脚本
├── 📁 test/ # 测试文件目录
└── 📄 README.md # 项目说明 (当前文件)
├── README.md # 项目入口文档
├── docs/ # 项目文档目录
│ ├── 整个项目需求文档.md # 项目整体需求
│ ├── 官网需求文档.md # 官网需求
│ ├── 后端管理需求文档.md # 后端管理需求
│ ├── 管理后台需求文档.md # 管理后台需求
│ ├── 小程序app需求文档.md # 小程序需求
│ ├── 整个项目的架构文档.md # 项目整体架构
│ ├── 后端架构文档.md # 后端架构
│ ├── 小程序架构文档.md # 小程序架构
│ ├── 管理后台架构文档.md # 管理后台架构
│ ├── 数据库设计文档.md # 数据库设计
│ ├── 管理后台接口设计文档.md # 管理后台接口
│ ├── 小程序app接口设计文档.md # 小程序接口
│ ├── 后端开发文档.md # 后端开发指南
│ ├── 小程序app开发文档.md # 小程序开发指南
│ ├── 管理后台开发文档.md # 管理后台开发指南
│ ├── 后端管理开发文档.md # 后端管理开发指南
│ ├── 测试文档.md # 测试策略和规范
│ ├── 部署文档.md # 部署指南
│ ├── 运维文档.md # 运维手册
│ ├── 安全文档.md # 安全规范
│ └── 用户手册文档.md # 用户操作手册
├── admin-system/ # 管理后台目录
├── mini-program/ # 小程序app目录
├── backend/ # 后端服务目录
├── website/ # 官网目录
└── scripts/ # 脚本目录
├── database/ # 数据库脚本
├── deploy/ # 部署脚本
├── test/ # 测试脚本
└── ops/ # 运维脚本
```
## 📚 文档导航
### 需求文档
- [整个项目需求文档](./docs/整个项目需求文档.md) - 项目整体需求和功能规划
- [官网需求文档](./docs/官网需求文档.md) - 官网功能需求
- [后端管理需求文档](./docs/后端管理需求文档.md) - 后端管理系统需求
- [管理后台需求文档](./docs/管理后台需求文档.md) - 管理后台功能需求
- [小程序app需求文档](./docs/小程序app需求文档.md) - 小程序功能需求
### 架构文档
- [整个项目的架构文档](./docs/整个项目的架构文档.md) - 项目整体架构设计
- [后端架构文档](./docs/后端架构文档.md) - 后端服务架构
- [小程序架构文档](./docs/小程序架构文档.md) - 小程序架构设计
- [管理后台架构文档](./docs/管理后台架构文档.md) - 管理后台架构
### 详细设计文档
- [数据库设计文档](./docs/数据库设计文档.md) - 数据库表结构和关系设计
- [管理后台接口设计文档](./docs/管理后台接口设计文档.md) - 管理后台API接口
- [小程序app接口设计文档](./docs/小程序app接口设计文档.md) - 小程序API接口
### 开发文档
- [后端开发文档](./docs/后端开发文档.md) - 后端开发指南和任务计划
- [小程序app开发文档](./docs/小程序app开发文档.md) - 小程序开发指南和任务计划
- [管理后台开发文档](./docs/管理后台开发文档.md) - 管理后台开发指南和任务计划
- [后端管理开发文档](./docs/后端管理开发文档.md) - 后端管理开发指南和任务计划
### 运维文档
- [测试文档](./docs/测试文档.md) - 测试策略、用例和自动化测试
- [部署文档](./docs/部署文档.md) - 环境部署和配置指南
- [运维文档](./docs/运维文档.md) - 系统监控、维护和故障处理
- [安全文档](./docs/安全文档.md) - 安全策略和防护措施
- [用户手册文档](./docs/用户手册文档.md) - 用户操作指南
## 🚀 快速开始
### 环境要求
- Node.js 16.x+
- Node.js 18+
- MySQL 8.0+
- npm 8.x+
- Redis 6.0+
- Docker & Docker Compose (可选)
### 安装依赖
### 本地开发
1. **克隆项目**
```bash
# 安装后端依赖
cd backend && npm install
# 安装后台管理依赖
cd admin-system && npm install
# 安装官网依赖
cd website && npm install
# 安装小程序依赖
cd mini-program && npm install
git clone https://github.com/your-org/jiebanke.git
cd jiebanke
```
### 启动开发环境
2. **安装依赖**
```bash
# 启动后端服务
cd backend && npm run dev
# 后端服务
cd backend
npm install
# 启动后台管理 (新终端)
cd admin-system && npm run dev
# 管理后台
cd ../admin-system
npm install
# 启动官方网站 (新终端)
cd website && npm run dev
# 小程序
cd ../mini-program
npm install
```
## 📖 项目文档
所有详细文档位于 `docs/` 目录:
### 📖 快速导航
| 文档类型 | 文档名称 | 描述 | 适用人员 |
|---------|---------|------|---------|
| 🚀 快速开始 | [系统集成和部署文档](docs/系统集成和部署文档.md) | 环境搭建、部署流程 | 开发者、运维 |
| 🔧 开发指南 | [前端开发文档](docs/前端开发文档.md) | 前端开发规范和指南 | 前端开发者 |
| 🔧 开发指南 | [后端开发文档](docs/后端开发文档.md) | 后端开发规范和指南 | 后端开发者 |
| 📋 API参考 | [API接口文档](docs/API接口文档.md) | 完整的API接口文档 | 全栈开发者 |
| 🗄️ 数据设计 | [数据库设计文档](docs/数据库设计文档.md) | 数据库结构设计 | 后端开发者、DBA |
| 👨‍💼 管理功能 | [管理员后台系统API文档](docs/管理员后台系统API文档.md) | 管理后台功能说明 | 管理员、开发者 |
| 📁 文件系统 | [文件上传系统文档](docs/文件上传系统文档.md) | 文件上传和管理 | 全栈开发者 |
| 🔍 监控运维 | [错误处理和日志系统文档](docs/错误处理和日志系统文档.md) | 错误处理和日志 | 开发者、运维 |
| 🧪 质量保证 | [测试文档](docs/测试文档.md) | 测试策略、用例设计和质量保证 | 测试工程师、开发者 |
| 🔒 安全管理 | [安全和权限管理文档](docs/安全和权限管理文档.md) | 安全策略、权限控制、安全防护措施 | 安全工程师、系统管理员 |
| ⚡ 性能优化 | [性能优化文档](docs/性能优化文档.md) | 系统性能优化策略、监控方案和优化实践 | 性能工程师、运维工程师 |
| 🚀 部署运维 | [部署和运维文档](docs/部署和运维文档.md) | 系统部署流程和运维管理方案 | 运维工程师、DevOps工程师 |
| 📊 项目管理 | [项目开发进度报告](docs/项目开发进度报告.md) | 项目进度和规划 | 项目经理、开发者 |
| 📝 开发规范 | [开发规范和最佳实践](docs/开发规范和最佳实践.md) | 代码规范和标准 | 全体开发者 |
### 核心文档
- 📄 [项目概述](docs/项目概述.md) - 项目背景、目标和整体介绍
- 📄 [系统架构文档](docs/系统架构文档.md) - 系统架构设计和技术栈
- 📄 [API接口文档](docs/API接口文档.md) - 完整的API接口说明
- 📄 [数据库设计文档](docs/数据库设计文档.md) - 数据库表结构和关系设计
- 📄 [开发指南](docs/开发指南.md) - 开发环境搭建和开发规范
- 📄 [部署指南](docs/部署指南.md) - 开发、测试、生产环境部署指南
### 功能模块文档
| 文档名称 | 描述 | 链接 |
|---------|------|------|
| API接口文档 | 详细的API接口说明和使用示例 | [查看文档](./docs/API接口文档.md) |
| 管理员后台文档 | 管理员功能和操作指南 | [查看文档](./docs/管理员后台文档.md) |
| 用户认证系统文档 | 用户注册、登录、权限管理 | [查看文档](./docs/用户认证系统文档.md) |
| 动物管理系统文档 | 动物信息管理和认领流程 | [查看文档](./docs/动物管理系统文档.md) |
| 文件上传系统文档 | 文件上传、存储和管理 | [查看文档](./docs/文件上传系统文档.md) |
| 数据库设计文档 | 数据库架构、表结构和关系设计 | [查看文档](./docs/数据库设计文档.md) |
| 错误处理和日志系统文档 | 错误处理机制和日志记录 | [查看文档](./docs/错误处理和日志系统文档.md) |
| 系统集成和部署文档 | 系统部署和运维指南 | [查看文档](./docs/系统集成和部署文档.md) |
| 前端开发文档 | 前端技术架构、组件设计和开发规范 | [查看文档](./docs/前端开发文档.md) |
#### 项目管理文档
- **[项目开发进度报告](docs/项目开发进度报告.md)** - 项目进度跟踪和里程碑规划
- **[开发规范和最佳实践](docs/开发规范和最佳实践.md)** - 团队开发规范和代码标准
- **[测试文档](docs/测试文档.md)** - 测试策略、用例设计和质量保证
### 补充文档
- 📄 [变更日志](CHANGELOG.md) - 项目版本变更记录
- 📄 [贡献指南](docs/贡献指南.md) - 如何参与项目开发
- 📄 [常见问题](docs/常见问题.md) - 开发和使用中的常见问题解答
- 📄 [许可证](LICENSE.md) - 项目许可证信息
## 🛠️ 开发工具
### 脚本工具
项目提供了一些有用的开发脚本:
3. **配置环境**
```bash
# 数据库连接测试
cd backend && npm run test-db
# API接口测试
cd backend && npm run test-api
# 数据库初始化
cd backend && npm run db:reset
# 部署脚本 (Linux/Mac)
cd scripts && ./deploy.sh all
# 部署脚本 (Windows PowerShell)
cd scripts && .\deploy.ps1 all
```
### 环境配置
复制环境变量模板并配置:
```bash
# 后端环境配置
# 复制环境配置文件
cp backend/.env.example backend/.env
# 后台管理环境配置
cp admin-system/.env.example admin-system/.env
```
## ☁️ 部署
项目支持多种部署方式:
### 自动部署脚本
`scripts/` 目录中提供了自动部署脚本,支持 Linux/Mac 和 Windows 系统:
4. **启动服务**
```bash
# Linux/Mac 部署所有模块
cd scripts && chmod +x deploy.sh && ./deploy.sh all
# 启动后端服务
cd backend
npm run dev
# Windows PowerShell 部署所有模块
cd scripts && .\deploy.ps1 all
# 启动管理后台
cd admin-system
npm run dev
# 启动小程序开发工具
cd mini-program
npm run dev
```
支持的部署选项:
- `all` - 部署所有模块
- `backend` - 部署后端服务
- `admin` - 部署后台管理系统
- `website` - 部署官方网站
- `mini-program` - 构建微信小程序
### Docker 容器化部署
每个模块都提供了 Docker 配置文件,可以使用 docker-compose 进行部署:
### Docker 部署
```bash
# 启动所有服务
# 构建并启动所有服务
docker-compose up -d
# 启动指定服务
docker-compose up -d backend
# 查看服务状态
docker-compose ps
# 查看日志
docker-compose logs -f
```
### 手动部署
每个模块也可以手动部署到服务器,具体说明请参考各模块目录中的 DEPLOYMENT.md 文件。
## 📋 开发规范
## 🌐 访问地址
- **代码规范**: 遵循 ESLint + Prettier 配置
- **提交规范**: 使用 Conventional Commits 格式
- **分支策略**: Git Flow 工作流
- **测试要求**: 单元测试覆盖率 ≥ 80%
- **文档更新**: 代码变更需同步更新文档
- **后端API**: https://webapi.jiebanke.com
- **后台管理**: https://admin.jiebanke.com
- **官方网站**: https://www.jiebanke.com
- **小程序**: 使用微信开发者工具打开 `mini-program/` 目录
## 🤝 贡献指南
## 📦 依赖管理
1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request
### 主要技术栈
## 📄 许可证
**后端**:
- Node.js + Express.js
- Sequelize ORM
- JWT 认证
- MySQL 数据库
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情
**前端**:
- Vue 3 + TypeScript
- Element Plus UI
- Vite 构建工具
- Pinia 状态管理
## 📞 联系我们
**小程序**:
- 微信原生小程序
- Vant Weapp UI
- Uni-app 框架
## 🔧 开发规范
### 代码风格
- 使用 ESLint + Prettier 统一代码风格
- 遵循 Git Commit 消息规范
- 实行代码审查流程
### 分支策略
- 采用 Git Flow 工作流
- 功能分支开发
- 发布分支管理
## 🚀 部署说明
详细部署指南请参考 [DEPLOYMENT.md](docs/DEPLOYMENT.md),包含:
- 开发环境部署
- 测试环境部署
- 生产环境部署
- 容器化部署 (Docker)
- 安全配置指南
## 📞 支持与维护
### 开发团队
- 后端开发: backend@jiebanke.com
- 前端开发: frontend@jiebanke.com
- 小程序开发: miniprogram@jiebanke.com
### 运维支持
- 运维团队: ops@jiebanke.com
- 紧急联系: +86-138-0013-8000
## 📊 版本信息
- **当前版本**: v1.0.0
- **Node.js**: 16.20.2
- **Vue**: 3.3.4
- **MySQL**: 8.0.33
- 项目维护者: [团队名称]
- 邮箱: contact@jiebanke.com
- 项目地址: https://github.com/your-org/jiebanke
- 文档地址: https://docs.jiebanke.com
---
*最后更新: 2024年* 📅
**注意**: 详细的开发、部署和使用说明请参考 `docs/` 目录下的相关文档。