# PetMateDiary-伴宠日记前端Vue3

**Repository Path**: ryder_ryc/pet-mate-diary-frontend

## Basic Information

- **Project Name**: PetMateDiary-伴宠日记前端Vue3
- **Description**: PetMateDiary-Frontend（伴宠日记前端） 基于 Vue3 + Vite + Arco Design Vue 构建，与后端分离开发，通过 API 交互。聚焦宠物主人需求，提供宠物档案管理（响应式表单 + 电子 ID 卡）、社交互动（卡片流动态 + 小圈子）、店铺服务（地图 / 列表双模式 + 预约）、健康管理（预警）等功能。组件化封装保障多端适配，为用户打造一站式养宠管理前端体验。
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2025-10-25
- **Last Updated**: 2026-01-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🐾 PetMateDiary - 伴宠日记前端

<div align="center">

![Vue3](https://img.shields.io/badge/Vue-3.x-brightgreen.svg)
![Vite](https://img.shields.io/badge/Vite-5.x-646CFF.svg)
![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.x-38B2AC.svg)
![License](https://img.shields.io/badge/License-MIT-blue.svg)

**守护萌宠，记录成长** 🌟

一站式智能养宠管理平台前端应用

[在线演示](https://petmate.example.com) | [后端仓库](https://gitee.com/ryder_ryc/pet-mate-diary-backend) | [问题反馈](https://gitee.com/ryder/PetMateDiary-Frontend/issues)

</div>

---

## 📖 项目介绍

**PetMateDiary-Frontend（伴宠日记前端）** 是一款基于 **Vue3 + Vite + TailwindCSS + Arco Design Vue** 构建的现代化宠物管理平台前端应用。

### ✨ 核心特性

- 🎨 **现代化 UI** - 精美的界面设计，支持亮色/暗色主题切换
- 🤖 **AI 智能体** - 24小时智能养宠助手，健康提醒、成长建议
- 📱 **响应式设计** - 完美适配桌面端和移动端
- 🔐 **完整鉴权** - JWT Token 认证，自动刷新机制
- 🎮 **游戏化体验** - 打卡奖励、成长勋章、社交互动
- 🏪 **店铺服务** - 地图/列表双模式，在线预约
- 📊 **健康管理** - 智能预警、成长轨迹可视化

### 🎯 主要功能模块

| 模块 | 功能描述 |
|------|---------|
| 🏠 产品展示页 | Landing 页面，展示产品核心价值与功能特性 |
| 👤 用户系统 | 注册、登录、个人信息管理 |
| 🐕 宠物档案 | 电子 ID 卡、成长记录、健康档案 |
| 💬 社交圈子 | 动态发布、小圈子、互动点赞 |
| 🏥 健康管理 | 疫苗提醒、体检记录、健康预警 |
| 🛒 店铺服务 | 宠物店、医院、美容院在线预约 |

---

## 🛠️ 技术栈

### 核心框架
- **Vue 3.4+** - 渐进式 JavaScript 框架
- **Vite 5.x** - 下一代前端构建工具
- **Vue Router 4.x** - 官方路由管理器
- **Pinia** - 新一代状态管理

### UI 框架
- **TailwindCSS 3.x** - 原子化 CSS 框架
- **Arco Design Vue** - 字节跳动企业级组件库
- **Lucide Vue Next** - 精美图标库

### 工具库
- **Axios** - HTTP 请求库
- **Day.js** - 轻量级日期处理
- **VueUse** - Vue 组合式 API 工具集

---

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- npm >= 9.0.0 或 pnpm >= 8.0.0

### 安装依赖

```bash
# 克隆项目
git clone https://gitee.com/ryder/pet-mate-diary-frontend.git

# 进入项目目录
cd pet-mate-diary-frontend/petmate-diary-frontend

# 安装依赖
npm install
# 或使用 pnpm
pnpm install
```

### 开发环境

```bash
# 启动开发服务器
npm run dev

# 访问 http://localhost:5173
```

### 生产构建

```bash
# 构建生产版本
npm run build

# 预览生产构建
npm run preview
```

---

## 📁 项目结构

```
petmate-diary-frontend/
├── public/                 # 静态资源
│   └── logo.svg
├── src/
│   ├── api/               # API 接口
│   │   └── auth.js
│   ├── assets/            # 资源文件
│   │   ├── images/        # 图片资源
│   │   └── styles/        # 全局样式
│   ├── components/        # 公共组件
│   │   ├── AuthModal.vue  # 登录/注册弹窗
│   │   ├── Footer.vue     # 页脚组件
│   │   └── GameButton.vue # 游戏化按钮
│   ├── composables/       # 组合式函数
│   │   └── useTheme.js    # 主题切换
│   ├── router/            # 路由配置
│   │   └── index.js
│   ├── stores/            # 状态管理
│   │   └── user.js        # 用户状态
│   ├── utils/             # 工具函数
│   │   └── request.js     # Axios 封装
│   ├── views/             # 页面组件
│   │   ├── Landing.vue    # 产品展示页
│   │   ├── Home.vue       # 用户首页
│   │   └── auth/          # 认证页面
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── .env.development       # 开发环境变量
├── .env.production        # 生产环境变量
├── vite.config.js         # Vite 配置
├── tailwind.config.js     # TailwindCSS 配置
└── package.json
```

---

## 🔧 环境配置

### 开发环境 (.env.development)

```env
VITE_APP_TITLE=伴宠日记
VITE_API_BASE_URL=
VITE_APP_PORT=5173
```

### 生产环境 (.env.production)

```env
VITE_APP_TITLE=伴宠日记
VITE_API_BASE_URL=https://api.petmate.com
```

---

## 🔐 API 接口说明

### 认证接口

| 接口 | 方法 | 说明 |
|------|------|------|
| `/ryder/auth/register` | POST | 用户注册 |
| `/ryder/auth/login` | POST | 用户登录 |
| `/ryder/auth/refresh` | POST | 刷新 Token |
| `/ryder/auth/logout` | POST | 用户登出 |

### Token 处理

- 请求头：`Authorization: ryder {accessToken}`
- 自动刷新：401 状态码触发 Token 刷新
- 存储方式：localStorage

---

## 🎨 主题系统

支持亮色/暗色主题切换，使用 CSS 变量实现：

```css
/* 亮色主题 */
--bg-primary: #ffffff;
--text-primary: #1a1a1a;

/* 暗色主题 */
--bg-primary: #0a0a0a;
--text-primary: #ffffff;
```

---

## 📝 开发规范

### 代码风格
- 使用 ESLint + Prettier 统一代码风格
- 组件命名采用 PascalCase
- 文件命名采用 kebab-case

### Git 提交规范
```
feat: 新功能
fix: 修复 bug
docs: 文档更新
style: 代码格式调整
refactor: 重构
perf: 性能优化
test: 测试相关
chore: 构建/工具链相关
```

---

## 🤝 参与贡献

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feat/AmazingFeature`)
3. 提交更改 (`git commit -m 'feat: Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feat/AmazingFeature`)
5. 提交 Pull Request

---

## 📄 开源协议

本项目采用 [MIT](LICENSE) 协议

---

## 👥 联系我们

- 项目地址：[Gitee](https://gitee.com/ryder/pet-mate-diary-frontend)
- 问题反馈：[Issues](https://gitee.com/ryder/pet-mate-diary-frontend/issues)
- 邮箱：ran.yucheng@outlook.com

---

<div align="center">

**⭐ 如果这个项目对你有帮助，请给我们一个 Star！⭐**

Made with ❤️ by PetMateDiary Team

</div>