11 天行程交互可视化页面 · 基于 Vue 3 + Vite 重构。
# 安装依赖
npm install # 或 yarn / pnpm install
# 启动开发服务器(默认 http://localhost:5173)
npm run dev
# 打包构建
npm run build
# 预览构建产物
npm run preview
旧的纯静态 HTML 版本已备份为
index.legacy.html,如需查看可使用npx serve .后访问。
.
├── index.html # Vite 入口 HTML(挂载 #app)
├── index.legacy.html # 旧版纯 HTML/JS 实现(备份)
├── vite.config.js # Vite 配置
├── package.json
└── src/
├── main.js # Vue 应用入口
├── App.vue # 总布局:标题/地图卡/图例/控制按钮
├── styles/
│ └── global.css # 全局 CSS 变量、body 基础样式
├── data/
│ └── itinerary.js # 行程数据 + 路径辅助函数
├── store/
│ └── useItinerary.js # 状态与播放控制(响应式 ref)
└── components/
├── MapSvg.vue # SVG 地图(路径/节点/徽章)
├── Timeline.vue # 左侧竖向时间轴胶囊
└── InfoPanel.vue # 详情面板(当天 legs/住宿/小贴士)
重置 按钮:清空所有高亮、定时器,回到初始状态修改 src/data/itinerary.js:
POINTS:节点坐标(基于 1200×720 viewBox)ITINERARY:每天的 legs / type / stay / tip / title 等