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
|