校猫日记是一个结合校园流浪猫救助管理和社交分享的社区平台，通过记录和分享学校流浪猫的信息，连接爱猫人士，共同为猫猫创造更好的生活环境。帮助校园内的猫咪志愿者更好地管理和关爱流浪猫，为救助工作提供信息支持，为学校管理提供数据参考。
- 信息记录: 记录和管理流浪猫的基本信息，如照片、健康状况和活动范围
- 时间轴功能: "小猫时间轴"记录管理每个小猫发生的关键事件
- 便捷查看: 提供便捷的界面，方便用户查看信息，方便管理方记录管理
- 品种识别: 目前已实现猫猫品种的拍照识别功能
- 智能问答: AI智能问答助手，可以快速回答校猫相关问题
- 多模型支持: 基于 Dify 搭建，集成 ChatGPT 4o mini、DeepSeek-V3、DeepSeek-R1 等多种模型
- RAG 检索: 支持 RAG 检索，结合知识库优化问答效果
- 帖子发布: 用户可以发布自己的帖子，分享和查看猫咪的照片和日常故事
- 互动功能: 类似于社交平台的分享模式，增强用户之间的互动
- 评论点赞: 支持用户之间的评论点赞功能，支持给小猫、帖子进行点赞
- 领养申请: 支持用户发起领养申请
- 爱心捐赠: 提供爱心捐赠入口
- 资金管理: 提供爱心救助组织资金管理功能，包括资金数据的记录和可视化数据分析
- 位置记录: 通过地图功能跟踪和记录流浪猫的活动路径
- 用户上传: 支持用户上传跟踪记录
- 高德地图: 基于高德地图 JS SDK API 实现
- 可视化分析: 提供流浪猫数量和分布等数据的可视化分析
- 图表展示: 使用 uCharts 图表库展示数据
- 内容审核: 对用户发布的帖子和评论进行审核，只有审核通过的内容才会公开展示
- 角色管理: 多角色权限管理，不同角色拥有不同权限
- 内容搜索: 支持对平台的公开帖子和校猫进行搜索
| PIC 1 | PIC 2 | PIC 3 |
|---|---|---|
 |
 |
 |
| PIC 4 | PIC 5 |
|---|---|
 |
 |
- 框架: Vue 3.4.21 + TypeScript 5.3.3
- 跨端开发: uni-app 2.0.2 (支持 H5、小程序、APP)
- UI 组件库: uView UI 2.0.37 + uni-ui
- 状态管理: Pinia 2.1.7 + pinia-plugin-persistedstate
- 路由管理: Vue Router 4.4.3
- 图表库: uCharts (@qiun/vue-ucharts)
- 地图服务: 高德地图 JS SDK API (@amap/amap-jsapi-loader)
- HTTP 请求: Axios 1.7.7
- 工具库: JWT-decode、QRCode 生成
- 平台: 基于 Dify（生成式 AI 应用创新引擎）搭建 AI Workflow 编排
- 检索增强: 支持 RAG 检索，结合知识库优化问答效果
- 多模型支持: 集成 ChatGPT 4o mini、DeepSeek-V3、DeepSeek-R1 等多种模型 API
- 构建工具: Vite + Vue CLI Service
- 代码规范: TypeScript + ESLint
- 自动导入: unplugin-auto-import + unplugin-vue-components
- Node.js 16.0+
- npm 或 yarn 包管理器
- HBuilderX (推荐)
- 克隆项目
git clone https://github.com/vikis77/PawprintDiaries-H5.git
cd PawprintDiaries-H5- 安装依赖
npm install
# 或
yarn install- 配置环境
# 复制配置模板文件
cp src/config/index.js.template src/config/index.js
# 编辑配置文件，填入你的 API 地址等配置信息- 启动开发服务器
方式一：命令行启动
npm run dev:h5方式二：HBuilderX 启动（推荐）
- 使用 HBuilderX 打开项目
- 点击"运行" -> "运行到浏览器" -> "Chrome"
- 访问应用
http://localhost:8080
# 构建 H5 版本
npm run build:h5
# 构建产物在 unpackage/dist/build/h5 目录下PawprintDiaries-H5/
├── src/ # 源代码目录
│ ├── api/ # API 接口定义
│ ├── components/ # 全局通用组件
│ ├── config/ # 配置文件
│ ├── constant/ # 常量定义
│ └── utils/ # 工具函数
├── pages/ # 页面文件
│ ├── Home.vue # 首页
│ ├── CatManage.vue # 猫咪管理
│ ├── Post.vue # 帖子页面
│ ├── ChatBot.vue # AI 聊天
│ ├── Map.vue # 地图功能
│ └── ... # 其他页面
├── components/ # 页面组件
│ ├── BottomNav.vue # 底部导航
│ └── MyChartComponent.vue # 图表组件
├── static/ # 静态资源
├── uni_modules/ # uni-app 插件
├── store/ # 状态管理
├── router/ # 路由配置
├── types/ # TypeScript 类型定义
├── manifest.json # uni-app 配置
├── pages.json # 页面配置
├── vite.config.js # Vite 配置
└── package.json # 项目配置
项目使用 src/config/index.js 进行环境配置，支持开发环境和生产环境的不同配置：
// 开发环境配置
if (process.env.NODE_ENV === 'development') {
API_general_request_url.value = "http://localhost:8080"
pic_general_request_url.value = "你的图片服务器地址"
}API_general_request_url: 后端 API 地址pic_general_request_url: 图片资源 CDN 地址Suffix_1000/1001/1002: 图片压缩后缀配置（可以根据自己需求更改）
- ✨ 基础功能完成
- 🐱 猫咪信息管理系统
- 📝 帖子发布与评论系统
- 🤖 AI 智能问答助手
- 📍 地图位置追踪功能
- 💰 捐赠管理系统
- 🛡️ 内容审核与权限管理
本项目采用 MIT License 许可证。
- Vue.js - 渐进式 JavaScript 框架
- uni-app - 跨端开发框架
- uView UI - 全面兼容 nvue 的 uni-app 生态框架
- 高德地图 - 地图服务提供商
- Dify - 生成式 AI 应用创新引擎
- 项目地址: GitHub
- 后端项目: PawprintDiaries-SpringBoot
- 在线体验: https://pawprintdiaries.luckyiur.com
- 开发者博客: https://luckyiur.com
- 项目演示视频: Bilibili
如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！
Made with ❤️ for stray cats