hookehuyr

docs: 添加项目开发文档和 Claude 配置

- 添加项目根目录 CLAUDE.md
- 添加各模块 CLAUDE.md (api, store, utils)
- 添加 Claude Code 本地配置

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 +{
2 + "enableAllProjectMcpServers": true,
3 + "enabledMcpjsonServers": [
4 + "chrome-devtools"
5 + ],
6 + "permissions": {
7 + "allow": [
8 + "Bash(git add:*)"
9 + ]
10 + }
11 +}
1 +# CLAUDE.md
2 +
3 +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4 +
5 +## Project Overview
6 +
7 +This is a Vue 3 + Vite map demo application for interactive maps with integrated audio guides, QR code scanning, and WeChat integration. The project supports multiple deployment targets (dev/oa/walk/xys) and includes features like VR panorama viewing, check-in systems, and audio background playback.
8 +
9 +**Tech Stack:**
10 +- Vue 3.2.36 with Composition API
11 +- Vite 2.9.9 for build tooling
12 +- Pinia for state management
13 +- Vue Router 4 with Hash mode
14 +- Vant 4.9.6 (mobile UI components)
15 +- Element Plus (additional UI components)
16 +- AMap (高德地图) integration
17 +- WeChat JS-SDK integration
18 +
19 +## Development Commands
20 +
21 +### Local Development
22 +```bash
23 +npm run dev # Start dev server (localhost:8006)
24 +npm run start # Start with network access (0.0.0.0:8006)
25 +```
26 +
27 +### Build & Deploy
28 +```bash
29 +npm run build # Production build
30 +npm run build-watch # Build with file watch
31 +npm run build_ts # Build with TypeScript checking
32 +npm run serve # Preview production build
33 +```
34 +
35 +### Deployment Scripts (automated pipelines)
36 +```bash
37 +npm run dev_upload # Build & deploy to dev server
38 +npm run oa_upload # Build & deploy to OA server
39 +npm run walk_upload # Build & deploy to walk server
40 +npm run xys_upload # Build & deploy to xys server (SSH port 12101)
41 +```
42 +
43 +Each upload script:
44 +1. Builds the project
45 +2. Creates `dist.tar.gz` archive
46 +3. SCPs to target server
47 +4. Extracts on remote server
48 +5. Cleans up local files
49 +
50 +### Testing
51 +```bash
52 +npm run cypress:open # Open Cypress E2E test runner
53 +```
54 +
55 +## Project Architecture
56 +
57 +### Directory Structure
58 +```
59 +src/
60 +├── api/ # API endpoint definitions organized by feature
61 +│ ├── B/ # B-side (business) APIs
62 +│ ├── C/ # C-side (customer) APIs
63 +│ ├── common.js # Shared APIs (SMS, upload, tokens)
64 +│ ├── map.js # Map data APIs
65 +│ └── fn.js # API wrapper with error handling
66 +├── components/ # Reusable Vue components
67 +│ ├── Floor/ # Interactive floor plan component
68 +│ ├── VRViewer/ # 360° panorama viewer
69 +│ └── InfoWindow*.vue # Various map info window styles
70 +├── views/ # Page components
71 +│ ├── bieyuan/ # Villa (别院) map views
72 +│ ├── by/ # BY area views
73 +│ ├── checkin/ # Check-in system views
74 +│ └── xys/ # XYS area views
75 +├── store/ # Pinia state management
76 +│ └── index.js # Main store with keep-alive page cache
77 +├── router/ # Vue Router configuration
78 +│ ├── routes/ # Route modules
79 +│ └── methods/ # Router utility functions
80 +├── utils/ # Utility functions
81 +│ ├── axios.js # Axios instance with interceptors
82 +│ └── tools.js # Common helper functions
83 +├── common/ # Shared constants and mixins
84 +├── hooks/ # Vue composables
85 +└── packages/ # Multi-page app entries (mono1, mono2)
86 +```
87 +
88 +### Key Architectural Patterns
89 +
90 +**API Layer Pattern:**
91 +All API calls follow a consistent pattern using `fn()` wrapper from `@/api/fn.js`:
92 +
93 +```javascript
94 +import { fn, fetch } from '@/api/fn';
95 +
96 +export const mapAPI = (params) => fn(fetch.get('/srv/?a=map', params));
97 +```
98 +
99 +The `fn()` wrapper handles:
100 +- Response validation
101 +- Error handling
102 +- Loading states
103 +- Data transformation
104 +
105 +**State Management Pattern:**
106 +Pinia store (`mainStore`) manages:
107 +- `keepPages`: Array of page names to cache with `<keep-alive>`
108 +- Audio player state (single & playlist modes)
109 +- Scroll position restoration for multiple views
110 +- Authentication state
111 +
112 +**Routing Pattern:**
113 +- Uses `createWebHashHistory('/index.html')` - all URLs include `#/index.html`
114 +- Dynamic route generation via `generateRoutes()` utility
115 +- Route modules auto-imported from `@/router/routes/modules/**/*.js`
116 +- 404 page used as intermediate for dynamic route injection
117 +
118 +**Component Auto-Import:**
119 +Vant and Element Plus components are auto-imported via `unplugin-vue-components`. No manual imports needed.
120 +
121 +## Important Configuration
122 +
123 +### Path Aliases (configured in vite.config.js)
124 +```javascript
125 +@/ src/
126 +@components/ src/components/
127 +@composables/ src/composables/
128 +@utils/ src/utils/
129 +@images/ images/
130 +@css/ src/assets/css/
131 +@mock/ src/assets/mock/
132 +common/ src/common/
133 +```
134 +
135 +### Environment Variables
136 +Key variables in `.env` and `.env.development`:
137 +- `VITE_PORT`: Dev server port (default: 8006)
138 +- `VITE_PROXY_TARGET`: Backend API proxy target
139 +- `VITE_PROXY_PREFIX`: API request prefix (`/srv/`)
140 +- `VITE_OUTDIR`: Build output directory name (`map`)
141 +- `VITE_APPID`: WeChat app ID
142 +- `VITE_OPENID`: Test WeChat open ID
143 +
144 +### Axios Interceptors (src/utils/axios.js)
145 +**Request interceptor:**
146 +- Adds default param `f: 'tools'`
147 +- Adds timestamp to GET requests (cache busting)
148 +- Serializes POST data with `qs.stringify()` (except upload endpoints)
149 +- Merges URL params with config params
150 +
151 +**Response interceptor:**
152 +- Handles authentication failures
153 +- Redirects to login on 401/403
154 +- Global error handling
155 +
156 +## Key Features & Components
157 +
158 +### Map Integration
159 +- **AMap (高德地图)**: Primary map provider
160 +- **Custom Info Windows**: Multiple styles (Lite, Warn, Yard, Popup)
161 +- **Floor Plans**: Interactive SVG floor plans (`components/Floor/`)
162 +- **Coordinate System**: Uses grid-based coordinates (see README.md for examples)
163 +
164 +### Audio System
165 +Dual-mode audio player managed in Pinia store:
166 +- **Single Mode**: Background audio for individual locations
167 +- **Playlist Mode**: Audio lists for tours
168 +- Components: `audioBackground.vue`, `audioBackground1.vue`, `audioList.vue`
169 +- State: `audio_entity`, `audio_status`, `audio_list_entity`, `audio_list_status`
170 +
171 +### VR Panorama
172 +- **Library**: `@photo-sphere-viewer/*` plugins
173 +- **Component**: `components/VRViewer/index.vue`
174 +- Features: Markers, gyroscope, gallery, stereo, virtual tour
175 +
176 +### QR Code Scanning
177 +- **Library**: `@zxing/library`
178 +- **Views**: `scan.vue` in bieyuan/, by/, checkin/
179 +
180 +### Check-in System
181 +- **Views**: `checkin/index.vue`, `checkin/scan.vue`, `checkin/info_w.vue`
182 +- **API**: `@/api/checkin.js`
183 +
184 +## Common Patterns
185 +
186 +### Creating New API Endpoints
187 +```javascript
188 +// src/api/feature.js
189 +import { fn, fetch } from '@/api/fn';
190 +
191 +const Api = {
192 + FEATURE: '/srv/?a=feature',
193 +};
194 +
195 +export const featureAPI = (params) => fn(fetch.get(Api.FEATURE, params));
196 +```
197 +
198 +### Creating New Views
199 +1. Create view file in `src/views/feature/`
200 +2. Add route module in `src/router/routes/modules/feature/index.js`
201 +3. Add to keep-alive cache if needed: `store.keepThisPage()`
202 +
203 +### Using Map Data
204 +```javascript
205 +import { mapAPI } from '@/api/map.js';
206 +
207 +const { data } = await mapAPI({ id: locationId });
208 +// Process map data (coordinates, markers, etc.)
209 +```
210 +
211 +### WeChat Integration
212 +- **Config**: `src/api/wx/config.js`
213 +- **JS API List**: `src/api/wx/jsApiList.js`
214 +- **Payment**: `src/api/wx/pay.js`
215 +- Initialized in `App.vue` onMounted
216 +
217 +## Code Style Notes
218 +
219 +- **Vue Setup**: Uses `<script setup>` syntax
220 +- **Component Names**: Uses `DefineOptions()` plugin to support `name` option in setup scripts
221 +- **Less Preprocessor**: Global styles imported via `additionalData` in vite.config.js
222 +- **Auto-imports**: Vue, VueRouter APIs auto-imported (see `src/auto-imports.d.ts`)
223 +- **Legacy Support**: Uses `@vitejs/plugin-legacy` for older browser support (commented out in current config)
224 +
225 +## Known Issues & Considerations
226 +
227 +### Keep-Alive Cache Quirk
228 +From `src/store/index.js:25`:
229 +```javascript
230 +keepPages: ['default'], // 很坑爹,空值全部都缓存
231 +```
232 +Empty array causes all pages to cache. Must include at least `'default'` as placeholder.
233 +
234 +### Route Hash Mode
235 +All routes include `#/index.html` prefix:
236 +- Full URL example: `http://localhost:8006/index.html#/index.html/views/page`
237 +- When generating routes or links, must include this prefix
238 +
239 +### Dynamic Route Generation
240 +Routes loaded asynchronously via mock data (`src/mock/routes.js`) and processed through `generateRoutes()` utility. 404 page acts as intermediate to avoid white screen on refresh.
241 +
242 +### Multi-Page Architecture (commented out)
243 +Project structure supports multiple entry points (`src/packages/mono1/`, `src/packages/mono2/`), but currently using single-page setup with `index.html` as only entry.
1 +<claude-mem-context>
2 +# Recent Activity
3 +
4 +<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
5 +
6 +### Feb 9, 2026
7 +
8 +| ID | Time | T | Title | Read |
9 +|----|------|---|-------|------|
10 +| #3942 | 11:03 AM | ✅ | Created comprehensive project documentation | ~900 |
11 +</claude-mem-context>
...\ No newline at end of file ...\ No newline at end of file
1 +<claude-mem-context>
2 +# Recent Activity
3 +
4 +<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
5 +
6 +### Feb 9, 2026
7 +
8 +| ID | Time | T | Title | Read |
9 +|----|------|---|-------|------|
10 +| #3942 | 11:03 AM | ✅ | Created comprehensive project documentation | ~900 |
11 +</claude-mem-context>
...\ No newline at end of file ...\ No newline at end of file
1 +<claude-mem-context>
2 +# Recent Activity
3 +
4 +<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
5 +
6 +### Feb 9, 2026
7 +
8 +| ID | Time | T | Title | Read |
9 +|----|------|---|-------|------|
10 +| #3942 | 11:03 AM | ✅ | Created comprehensive project documentation | ~900 |
11 +</claude-mem-context>
...\ No newline at end of file ...\ No newline at end of file
1 +<claude-mem-context>
2 +# Recent Activity
3 +
4 +<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
5 +
6 +### Feb 9, 2026
7 +
8 +| ID | Time | T | Title | Read |
9 +|----|------|---|-------|------|
10 +| #3942 | 11:03 AM | ✅ | Created comprehensive project documentation | ~900 |
11 +</claude-mem-context>
...\ No newline at end of file ...\ No newline at end of file