77 lines
2.9 KiB
Markdown
77 lines
2.9 KiB
Markdown
# CLAUDE.md
|
||
|
||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||
|
||
## Project Overview
|
||
|
||
A novel visualization map for "大唐双龙传" (The Twin Dragons of Tang Dynasty), showing faction territories, character routes, and key events across 40 volumes. Built with Vue 3 + Vite + Leaflet.
|
||
|
||
## Commands
|
||
|
||
All commands run from the `frontend/` directory:
|
||
|
||
```bash
|
||
npm run dev # Dev server at http://localhost:5173
|
||
npm run build # Production build → ../dist
|
||
npm run preview # Preview production build
|
||
```
|
||
|
||
No test or lint tooling is configured. Before adding either, propose the approach (Vitest for unit tests, Playwright for E2E).
|
||
|
||
## Architecture
|
||
|
||
### Data Flow
|
||
|
||
1. `frontend/App.vue` loads all `data/vol01.json`–`data/vol40.json` in parallel on mount
|
||
2. A volume slider (1–40) drives reactive computed properties that **merge** data from vol01 up to the selected volume
|
||
3. Leaflet layers redraw whenever merged data or the current volume changes
|
||
|
||
The Vite dev server has custom middleware (`vite.config.js`) to serve `/data` from `../data/`. The build also copies the data directory to `../dist`.
|
||
|
||
### Key Files
|
||
|
||
- `frontend/App.vue` — 875-line single-component app; handles all map state, data loading, and visualization logic
|
||
- `frontend/vite.config.js` — custom middleware for `/data` serving; build output to `../dist`
|
||
- `data/volXX.json` — structured data extracted from the novel (40 files)
|
||
- `content/卷XX.txt` — original novel source text (read-only, used only for data extraction)
|
||
|
||
### Data Schema (`data/volXX.json`)
|
||
|
||
```json
|
||
{
|
||
"volume": "卷X",
|
||
"chapters": ["第01章 标题", "..."],
|
||
"locations": [{"id", "name", "type", "lat", "lng", "description"}],
|
||
"factions": [{"id", "name", "type", "color", "leader", "territory"}],
|
||
"character_routes": [{"character", "color", "route": [...]}],
|
||
"key_events": [{"chapter", "location", "event"}]
|
||
}
|
||
```
|
||
|
||
### Special Logic in App.vue
|
||
|
||
- **Volumes 1–20**: Character routes for 寇仲 and 徐子陵 are merged into a single "寇仲 & 徐子陵" route
|
||
- **Volumes 21+**: Their routes are shown separately
|
||
- Faction territories, locations, and routes are cumulatively merged across all volumes up to `currentVol`
|
||
|
||
### Leaflet Setup
|
||
|
||
- Basemap: CartoDB Dark Matter
|
||
- Layer groups: territories, locations, routes, events
|
||
- Custom `div` icons for markers and labels
|
||
- Map interactions: click on markers to fly to location
|
||
|
||
## Code Style
|
||
|
||
- Vue 3 Composition API with `<script setup>` syntax
|
||
- Named imports only (no default imports except Vue/Leaflet internals)
|
||
- `camelCase` for functions, `UPPER_SNAKE_CASE` for constants, `kebab-case` for filenames
|
||
- Dark theme UI with `#c9a96e` gold accents
|
||
|
||
## Agents
|
||
|
||
Two sub-agents are defined in `.claude/agents/`:
|
||
|
||
- **novel-extractor** (Haiku): Reads `content/卷XX.txt`, extracts structured data, writes `data/volXX.json`
|
||
- **frontend-engineer** (Sonnet): Maintains the Vue 3 + Vite + Leaflet frontend
|