一、技术架构与核心实现

1.1 技术选型

本项目采用 Vue3 生态最新技术栈，从开发效率、构建速度、可维护性三个维度进行技术选型：

• 开发框架：Vue 3 + <script setup> 组合式API，使用 Composition API 组织业务逻辑，提升代码复用性与可读性。

• 构建工具：Vite，基于 ESBuild 实现极速热更新，比传统 Webpack 开发效率提升 50% 以上。 • 路由管理：vue-router 4.x，实现页面路由守卫、懒加载、权限控制。

• 样式方案：原生 CSS + 响应式布局 + 自定义变量，保证多端适配与主题统一性。

• 核心依赖：第三方音频处理 SDK + 大语言模型 API，实现宠物声音采集、特征提取、健康评估。 • 状态管理：前期使用组件内状态管理，后期规划接入 Pinia 实现全局状态统一管理。

技术栈优势：

• 轻量化、无冗余依赖

• 组件化高内聚低耦合

• 适合快速迭代 + 后续扩展

1.2 项目结构

二、核心功能模块实现

2.1 登录与鉴权

实现要点：

• 登录 / 注册双模式切换
• 邮箱格式校验、密码长度≥6 位校验
• 密码框暗文显示（*），邮箱明文显示
• 模拟接口调用，登录成功跳转首页
• 统一 UI 风格：卡片面板、蓝白渐变、柔和圆角

关键代码：

图1 登录注册页面：

2.2 首页（主页面）

首页是产品入口，我设计了以下核心区域：

• 顶部导航栏：首页、声音检测、健康报告、宠物档案、帮助中心
• Banner 区：AI 驱动・宠物健康守护
• 快捷功能入口：音频检测、宠物档案、历史记录
• 页面风格统一：蓝色主调、卡片排版、响应式适配

页面交互：

• 点击 “立即检测” 跳转音频上传页
• 导航栏路由跳转流畅
• 所有按钮 hover 动效统一

图2 首页：

2.3 宠物档案管理模块

实现要点：

• 卡片列表展示宠物信息：名称、品种、年龄、性别、头像
• 支持宠物添加、编辑、删除
• 单用户可绑定多只宠物
• 数据与用户唯一绑定，前端模拟权限隔离

关键代码：

图3 宠物档案页面

图四 新增宠物页面

2.4 音频上传与检测模块

这是项目核心功能入口，实现：

• 宠物选择下拉框
• 音频上传：支持 MP3/WAV 格式
• 文件大小≤50MB，前端自动校验
• 音频预览、播放、移除
• 点击 “开始检测” 跳转到结果页

技术难点与解决方案：

• 文件格式 / 大小校验：通过 type 与 size 判断
• 音频预览：使用 URL.createObjectURL
• 防止重复上传：上传前清空已有文件

关键代码：

图5 音频检测页面

2.5 情绪识别与健康评估模块

页面展示内容：

• 宠物信息、检测时间、检测方式
• 情绪识别结果：兴奋 / 焦虑 / 痛苦 / 应激 + 置信度
• 健康评估：心理状态 + 身体状态分析
• 3–5 条个性化养护建议
• 返回、查看历史按钮

UI 特点：

• 报告卡片化展示
• 情绪标签高亮区分
• 结构清晰、阅读友好

关键代码：

图6 检测报告页面

2.6 历史记录模块

功能：

• 检测记录按时间倒序展示
• 支持近 7 天 / 30 天筛选
• 单条记录可查看详情、删除
• 数据仅当前用户可见（前端模拟）

图7 历史记录页面

2.7 帮助中心模块

内容：

• 使用指南
• 常见问题 FAQ
• 音频检测说明
• 反馈入口
• 免责声明

关键代码：

图8 帮助中心页面

三、路由配置

三、页面搭建与 UI 总结

本周搭建页面，完成了7 个核心页面的开发与样式统一。

中间遇到了一些问题：

• 输入框不显示文字：由 CSS 透明、层级遮挡导致，已修复 z-index 与文字颜色
• 密码框不显示星号：改为 type="password" 并强制光标可见
• 页面风格不统一：统一导航栏、色值、圆角、阴影、间距
• 音频上传校验：需同时判断格式与大小，避免非法文件上传

下一步计划：

• 接入音频 SDK 与大模型接口
• 完成前后端联调
• 优化加载速度与交互体验
• 开展小范围用户测试并整改问题