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:

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

frontend/App.vue loads all data/vol01.json–data/vol40.json in parallel on mount
A volume slider (1–40) drives reactive computed properties that merge data from vol01 up to the selected volume
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`)

{
  "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

2.9 KiB Raw Permalink Blame History Unescape Escape