docs: 添加项目开发文档和 Claude 配置
- 添加项目根目录 CLAUDE.md - 添加各模块 CLAUDE.md (api, store, utils) - 添加 Claude Code 本地配置 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
6 changed files
with
298 additions
and
0 deletions
.claude/settings.local.json
0 → 100644
CLAUDE.md
0 → 100644
| 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. |
src/CLAUDE.md
0 → 100644
| 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 |
src/api/CLAUDE.md
0 → 100644
| 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 |
src/store/CLAUDE.md
0 → 100644
| 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 |
src/utils/CLAUDE.md
0 → 100644
| 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 |
-
Please register or login to post a comment