# CLAUDE.md This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. ## Project Overview This is a uni-app Vue 3 + TypeScript swimming timer/training application called "智能秒表" (Smart Stopwatch). It supports multiple platforms including H5, WeChat mini-program, and native apps. ## Development Commands ```bash # Development npm run dev:h5 # Run H5 development server npm run dev:mp-weixin # Run WeChat mini-program development npm run dev:app # Run app development # Build npm run build:h5 # Build for H5 npm run build:mp-weixin # Build for WeChat mini-program npm run build:app # Build for app # Type checking npm run type-check # Run TypeScript type checking ``` ## Architecture ### Directory Structure ``` src/ ├── pages/ # Main pages (index/, user/) ├── pages/userFunc/ # Sub-package for user features (timing, segmentation, project) ├── components/ # Reusable Vue components ├── Service/ # API service layer │ ├── Service.ts # Main service class (extends BaseConfig) │ └── BaseConfig.ts # Base configuration ├── common/ │ ├── Domain/ # TypeScript interfaces (Project, StudentRecord, TimingState) │ └── Unit/ # Utility classes (HttpRequest, StoreAssist, UploadAssist) ├── static/ # Static assets ├── types/ # Additional TypeScript types └── colorui/ # ColorUI CSS framework ``` ### Service Layer Pattern - `Service` class extends `BaseConfig` and provides: - API requests: `Service.Request(url, method, data)` - handles 401 token expiration automatically - Navigation: `Service.GoPage()`, `Service.GoPageTab()`, `Service.GoPageBack()`, `Service.GoPageDelse()` - Storage: `Service.SetStorageCache()`, `Service.GetStorageCache()`, `Service.DelStorageCache()` - Messages: `Service.Msg()`, `Service.Alert()` - Loading: `Service.LoadIng()`, `Service.LoadClose()` - File uploads: `Service.UpLoadMedia()`, `Service.uploadH5()` ### Pages Configuration - Pages registered in `src/pages.json` - User features in `subPackages` under `pages/userFunc/` - Tab bar with 2 tabs: "项目" (index) and "我的" (user) - Navigation style is custom for some pages (e.g., swimim page) ### Key Domain Types - `Project`: Swimming project data (id, name, createdAt) - `StudentRecord`: Student timing records - `TimingState`: Timer state management - `ResultData`: Standard API response wrapper ## Code Style - Use tabs for indentation - Single quotes for strings - PascalCase for components and classes - camelCase for variables and functions - kebab-case for CSS classes - Use `@/` path alias for imports from src/ directory - Import Vue composition API from 'vue', uni-app hooks from `@dcloudio/uni-app` ## UI Framework - **uview-plus** as primary UI component library (configured with easycom) - **ColorUI** for CSS framework and icons - Component prefix: `u-` (e.g., ``, ``) - Use `rpx` units for responsive design ## Important Notes - Automatic 401 token handling: API requests through `Service.Request()` redirect to login on token expiration - Clean up intervals in `onUnmounted()` lifecycle hook - No test framework currently configured - Platform-specific APIs prefixed with `uni.` (uni-app framework)