hookehuyr

docs: 添加 CLAUDE.md 项目开发指南文档

添加详细的开发指南文档,涵盖项目架构、核心命令、技术栈说明、关键实现模式(如认证流程、离线/弱网支持、API 层架构、导航系统)以及开发工作流。此文档旨在为开发者提供全面的项目上下文和开发指引,确保代码修改符合现有架构规范。
Showing 1 changed file with 226 additions and 0 deletions
1 +# CLAUDE.md
2 +
3 +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4 +
5 +## Development Commands
6 +
7 +### Core Commands
8 +- `pnpm dev:weapp` - Start WeChat mini-program development server
9 +- `pnpm dev:h5` - Start H5 development server
10 +- `pnpm build:weapp` - Build for production (WeChat mini-program)
11 +- `pnpm lint` - Run ESLint
12 +
13 +### Other Platform Builds
14 +- `pnpm dev:alipay` - Alipay mini-program development
15 +- `pnpm dev:swan` - Baidu mini-program development
16 +- `pnpm dev:tt` - ByteDance mini-program development
17 +
18 +## Project Architecture
19 +
20 +This is a **Taro 4 + Vue 3 + NutUI** WeChat mini-program template with built-in authentication, offline support, and weak network handling.
21 +
22 +### Technology Stack
23 +- **Framework**: Taro 4.x (multi-platform mini-program framework)
24 +- **UI**: Vue 3 + NutUI 4.x (JD.com's UI library)
25 +- **State Management**: Pinia
26 +- **HTTP Client**: axios-miniprogram
27 +- **Styling**: Less + TailwindCSS (dual design width system)
28 +- **Build Tool**: Webpack 5
29 +
30 +### Dual Design Width System
31 +The project uses **two different design widths** configured in `config/index.js:16-23`:
32 +- **NutUI components**: 375px base width
33 +- **All other pages**: 750px base width
34 +
35 +When working with styles, always check if you're using NutUI components or custom components to determine which width to reference.
36 +
37 +### Key Architectural Patterns
38 +
39 +#### 1. Authentication Flow (Required)
40 +The project has a sophisticated authentication system with automatic session management:
41 +
42 +**Startup Flow** (`src/app.js:26-214`):
43 +1. App saves launch path for auth callback
44 +2. Checks network status and handles weak network scenarios
45 +3. Attempts silent auth if not authenticated
46 +4. On auth success, enables offline booking cache polling
47 +
48 +**Core Files**:
49 +- `src/utils/authRedirect.js` - All auth logic (silent refresh, navigation, state)
50 +- `src/utils/request.js` - HTTP client with 401 auto-refresh interceptor
51 +- `src/pages/auth/index.vue` - Auth page (must be preserved)
52 +
53 +**How 401 Auto-Refresh Works** (`src/utils/request.js:241-276`):
54 +1. API returns 401
55 +2. Interceptor saves current page path
56 +3. Calls `refreshSession()` to get new session via WeChat login
57 +4. Retries original request with new session
58 +5. If refresh fails, redirects to auth page
59 +
60 +**Important**: The backend MUST provide `/srv/?a=openid_wxapp` endpoint for WeChat login.
61 +
62 +#### 2. Offline/Weak Network Support
63 +The app gracefully handles network issues through multiple mechanisms:
64 +
65 +**Network Detection** (`src/utils/network.js`):
66 +- Monitors network status changes
67 +- Detects weak network conditions
68 +- Provides offline caching capabilities
69 +
70 +**Offline Booking Cache** (`src/composables/useOfflineBookingCache.js`):
71 +- Caches booking data for offline access
72 +- Supports reading/writing cached data
73 +- Used when network is unavailable
74 +
75 +**Cache Polling** (`src/composables/useOfflineBookingCachePolling.js`):
76 +- Background polling to refresh cached data
77 +- Reference-counted enable/disable mechanism
78 +- Only runs when network is available
79 +
80 +**Weak Network UI** (`src/utils/uiText.js`):
81 +- Centralized copy management for weak network scenarios
82 +- Provides modal options for user interaction
83 +
84 +**Fallback Flow** (`src/utils/request.js:143-168`):
85 +1. Request times out or fails
86 +2. Checks if offline cache exists
87 +3. If yes, redirects to offline booking list
88 +4. If no, shows weak network modal
89 +
90 +#### 3. API Layer Architecture
91 +
92 +**API Definition Pattern** (`src/api/index.js`):
93 +```javascript
94 +export const yourAPI = (params) => {
95 + return buildApiUrl('your_action', params)
96 +}
97 +```
98 +
99 +**Request Wrapper** (`src/api/fn.js`):
100 +- All API calls go through this wrapper
101 +- Handles common error scenarios
102 +- Provides consistent interface
103 +
104 +**URL Building** (`src/utils/tools.js`):
105 +- `buildApiUrl(action, params)` - Constructs full API URL
106 +- Automatically merges default parameters from `src/utils/config.js`
107 +
108 +#### 4. Navigation System
109 +
110 +**Enhanced Navigation Hook** (`src/hooks/useGo.js`):
111 +```javascript
112 +import { useGo } from '@/hooks/useGo'
113 +const go = useGo()
114 +
115 +go('/page-name') // Auto-completes path
116 +go('/page', { id: 123 }) // With query params
117 +```
118 +
119 +**Route Storage** (`src/stores/router.js`):
120 +- Maintains stack of visited routes
121 +- Used for auth callback navigation
122 +- Automatically managed by auth flow
123 +
124 +### Path Aliases
125 +All configured in `config/index.js:30-38`:
126 +```javascript
127 +@/utils src/utils
128 +@/components src/components
129 +@/images src/assets/images
130 +@/assets src/assets
131 +@/composables src/composables
132 +@/api src/api
133 +@/stores src/stores
134 +@/hooks src/hooks
135 +```
136 +
137 +### Configuration Management
138 +
139 +**Environment Config** (`src/utils/config.js`):
140 +**⚠️ MUST BE MODIFIED before use**:
141 +- `BASE_URL` - Set development/production domain
142 +- `REQUEST_DEFAULT_PARAMS.f` - Set business module identifier
143 +- `REQUEST_DEFAULT_PARAMS.client_name` - Set application name
144 +
145 +**Build Config** (`config/index.js`):
146 +- Path aliases
147 +- Design width rules
148 +- NutUI auto-import
149 +- Platform-specific settings
150 +
151 +## Important Implementation Details
152 +
153 +### Session Management
154 +- Session ID stored in `localStorage` with key `sessionid`
155 +- Set by `authRedirect.refreshSession()` after successful WeChat login
156 +- Automatically injected into request headers by `request.js` interceptor
157 +- Cleared on logout or explicit manual intervention
158 +
159 +### Promise Single-Pattern
160 +The auth system uses Promise singletons to prevent concurrent login attempts:
161 +- `auth_promise` in `authRedirect.js` ensures only one refresh at a time
162 +- All concurrent 401s share the same refresh Promise
163 +- `.finally()` ensures cleanup regardless of success/failure
164 +
165 +### Request Timeout Handling
166 +- Default timeout: 5 seconds (`src/utils/request.js:79`)
167 +- Timeout detection via `is_timeout_error()` helper
168 +- Network error detection via `is_network_error()` helper
169 +- Both trigger weak network fallback flow
170 +
171 +### NutUI Auto-Import
172 +NutUI components are auto-imported via unplugin-vue-components (`config/index.js:91-93`). No manual imports needed.
173 +
174 +### TailwindCSS Integration
175 +- Preflight disabled for mini-program compatibility
176 +- `rem2rpx` conversion enabled
177 +- Content paths configured in `tailwind.config.js`
178 +
179 +## Optional Features
180 +These features can be removed if not needed:
181 +- **WeChat Pay**: `src/utils/wechatPay.js`, `src/api/wx/`
182 +- **QR Code**: `src/components/qrCode.vue`, `src/components/qrCodeSearch.vue`
183 +- **Poster Builder**: `src/components/PosterBuilder/`
184 +- **Time Picker**: `src/components/time-picker-data/`
185 +- **Offline Cache**: Entire offline booking cache system
186 +
187 +## Critical Files Summary
188 +
189 +### Must Understand Before Modifying
190 +1. **`src/utils/authRedirect.js`** - Complete auth flow logic
191 +2. **`src/utils/request.js`** - HTTP client with interceptors
192 +3. **`src/app.js`** - App startup sequence and network handling
193 +4. **`src/utils/config.js`** - Server configuration (requires modification)
194 +
195 +### Key Business Logic
196 +1. **`src/api/index.js`** - API definitions
197 +2. **`src/api/fn.js`** - Request wrapper
198 +3. **`src/stores/main.js`** - Primary state management
199 +4. **`src/stores/router.js`** - Route state for auth callbacks
200 +
201 +### UI/UX
202 +1. **`src/utils/uiText.js`** - Centralized copy management
203 +2. **`src/utils/network.js`** - Network status utilities
204 +3. **`src/composables/`** - Reusable composition API hooks
205 +
206 +## Development Workflow
207 +
208 +When adding new features:
209 +1. Define API in `src/api/index.js` using `buildApiUrl()`
210 +2. Create page in `src/pages/your-page/`
211 +3. Add route to `src/app.config.js`
212 +4. Use `useGo()` hook for navigation
213 +5. Leverage Pinia stores for state management
214 +6. Follow dual design width rules (375px for NutUI, 750px for custom)
215 +
216 +When modifying auth/network behavior:
217 +- Always read both `authRedirect.js` and `request.js` together
218 +- Test 401 refresh flow thoroughly
219 +- Verify weak network fallback scenarios
220 +- Check offline cache interactions
221 +
222 +When debugging:
223 +- Check `src/utils/config.js` for correct BASE_URL
224 +- Verify sessionid in localStorage
225 +- Enable verbose logging in request interceptor
226 +- Use Taro's built-in network status monitoring