简介

AI全栈开发有两条路径，我这个项目采用的是先前端，再后端。
从事后总结来看这并不是最优选择，我应该选择自己擅长的后端开始，再进行前端开发。
AI很强大，你要想驾驭它就得给它立“规矩”，当你有一个固定的基点再去完成其他任务就会变得相对容易。

准备提示次

我的提示词：

请根据需求文档： `/d:/code/dqm/wechat/dqm-miniprogram-trae2/dqm-miniprogram/demand/demand-doc.md` 、
原型设计： `/d:/code/dqm/wechat/dqm-miniprogram-trae2/dqm-miniprogram/demand/ui/` ，完成小程序所有页面开发，并做好API文档设计，
为后续后端开发打好基础。

项目概述

经过多次调整后我生成了如下项目结构

这是一个基于 Taro + React 开发的微信小程序项目——「羽毛球助手」，主要用于记录羽毛球运动数据并提供AI分析功能。

技术栈

  • 框架: Taro 3.x (跨端小程序开发框架)
  • UI 库: React 18.x
  • 语言: TypeScript
  • 构建工具: Webpack 5
  • 状态管理: React Context API
  • API 交互: 自定义封装的 API 服务层

核心项目结构

src/
├── app.tsx                # 应用入口文件，初始化全局配置
├── app.config.ts          # 小程序配置（页面路由、tabBar、窗口样式）
├── app.scss               # 全局样式文件
├── components/            # 公共组件
│   ├── base/             # 基础UI组件
│   ├── business/         # 业务组件
│   └── layout/           # 布局组件
├── hooks/                # 自定义Hooks
│   ├── user-context.tsx  # 用户上下文管理
│   └── user-provider.tsx # 用户状态提供者
├── pages/                # 页面组件
│   ├── home/             # 首页
│   ├── record-list/      # 记录列表
│   ├── create-record/    # 创建记录
│   ├── profile/          # 个人中心
│   └── ai-analysis/      # AI分析（部分实现）
├── services/             # API服务层
│   ├── user-service.ts   # 用户相关接口
│   └── exercise-service.ts # 运动记录相关接口
├── constants/            # 常量定义
│   ├── api-status-codes.ts # API状态码
│   └── types.ts          # TypeScript类型定义
├── utils/                # 工具函数
│   ├── route-guard.ts    # 路由守卫
│   └── token-manager.ts  # Token管理
└── assets/               # 静态资源
    └── icons/            # 图标资源

核心功能模块

1. 用户管理模块

  • 功能: 登录认证、用户信息管理、资料完善引导
  • 关键文件:
    • src/hooks/user-provider.tsx: 用户状态管理核心
    • src/services/user-service.ts: 用户相关API调用
    • src/utils/token-manager.ts: Token存储与管理

2. 运动记录模块

  • 功能: 创建、查看、编辑运动记录
  • 关键文件:
    • src/services/exercise-service.ts: 运动记录API
    • src/pages/create-record/: 创建记录页面
    • src/pages/record-list/: 记录列表页面

3. 数据统计模块

  • 功能: 运动数据统计展示
  • 关键文件:
    • src/constants/types.ts: 统计数据类型定义
    • src/pages/home/index.tsx: 首页数据展示

4. AI分析模块

  • 功能: 羽毛球击球动作分析
  • 关键文件:
    • src/services/ai-analysis-service.ts: AI分析API
    • src/pages/ai-analysis/: AI分析页面