Skip to content

Latest commit

 

History

History
218 lines (169 loc) · 17.7 KB

project-plan.md

File metadata and controls

218 lines (169 loc) · 17.7 KB

旅行记忆:实施状态与原始项目规划

更新日期:2026-11-03。站点基础和首个计划已实现,推送与部署状态以远程提交和 GitHub Actions 记录为准。本文同时保留初始分析,历史情况不代表当前代码状态。 视觉和协作规则见根目录 AGENTS.md。

已确认的方向

用户原始目标:GitHub 托管并在推送后自动发布;默认主页展示全球足迹地图;已去国家和城市以不同方式点亮;点击城市查看旅行记录;旅行包含路线、游玩地点和旅行照片;规划中行程可以持续更新;精选 1–3 张照片制作旅行票根,其余照片完整展示。

本轮用户确认:

  • 内容维护由 Codex 修改独立旅行文件并推送完成。
  • 规划中旅行默认公开目的地和概况,具体日期、住宿可以隐藏。
  • 首页使用可缩放的平面世界地图,国家淡色点亮、城市用醒目标记。
  • 网站名称为“旅行记忆”,采用“足迹 / 旅行 / 计划 / 相册”四个入口和地图主导的首页。
  • 完整迁移现有“秋日碰头”比较页,作为第一个持续更新的旅行计划。

名称、导航、首页方向和迁移方式已经确认;Astro 静态站方案已经实施,无需再次确认框架。 已录入用户提供的北京、济南两次已完成旅行、个人照片和票根;缺少内容的旅行仍使用诚实空状态。

当前实施状态

  • 技术:Astro 7.4.5、Node.js 24、Markdown/JSON 内容、原生 JavaScript 交互,静态输出到 dist/。
  • 页面:足迹首页、旅行列表、计划列表、相册、城市档案、单次旅行及其相册;计划完成后继续使用同一稳定链接。
  • 模块:content/places/ 管理城市,content/trips/ 管理独立旅行;src/features/atlas/、trips/、gallery/ 分别负责足迹、计划工具和相册,src/pages/ 组织路由,public/ 放公开素材。
  • 首个计划:autumn-meet-2026 使用 comparison 方案,保留目的地/天数/汇合方式比较、景点、行程、车次、地图、住宿区域、预算、复制下载和清单。
  • 扩展方式:普通新旅行可只添加 Markdown;需要结构化行程时,增加 type: itinerary 的 plans.json,不需要改首个比较计划。
  • 数据:北京国庆旅行与济南 2026 年 10 月 24–25 日旅行已完成,点亮中国与两座城市。北京 69 张、济南 29 张个人照片,各 1 张既有票根;泰安和绍兴仍为候选目的地。景点推荐与参考图独立保存,不作为个人记忆照片或额外足迹。
  • 足迹地图:国家列表和统计将台湾、香港、澳门统一归入中国。保留世界概览,当前全部足迹在中国时默认展开中国;34 省边界常驻、城市边界按省加载,实际到访城市使用区域填色与文字标记。城市通过行政代码关联,手机地名随缩放避让。边界为历史概览数据,来源年份与许可见 public/maps/LICENSE.md;台湾、香港、澳门暂无内部城市细分。
  • 相册大图查看器采用固定外框与弹性图片区,加载中、加载失败和横竖图切换时保持外框尺寸稳定,照片等比展示。
  • 本次地图与相册调整已通过用户本地验收,并已获准提交推送;线上发布结果以远程提交和 GitHub Actions 记录为准。
  • 公开内容:首个计划采用相对行程日和住宿大致区域;具体出发日期、具体酒店及住宿精确定位不进入新公开内容。
  • 发布流程:.github/workflows/deploy.yml 在 main 推送后测试、构建并上传 dist/,再部署 Pages;PR 仅验证构建。
  • 迁移对照:原文件已备份到 .local/legacy/2026-11-03/,旧根 index.html 已删除;旧根脚本、CSS、assets、vendor 保留为被忽略的本地对照,不参与构建。

本地构建已成功完成。运行和检查命令为 npm test、npm run build、npm run check:site;其中测试使用 --test-isolation=none,开发预览为 npm run dev,构建产物预览为 npm run preview。 本地构建与远端发布分开验证;以实际 Git 推送结果和 GitHub Actions 记录确认提交与自动部署情况。

原始项目分析(迁移前)

迁移前,网站是一份“秋日碰头”的交互旅行计划:北京和上海出发,比较泰安与绍兴、2/3 天、不同汇合方式。 它已经具有实景景点卡片、行程时间线、参考车次、地图与路线、住宿区选择、预算计算、行前清单、复制与下载。

风格为暖纸底的中文旅行杂志:#f8f7f2 纸色、#244b3e 森林绿、#c7643e 陶土橙,中文衬线标题、系统无衬线正文、细线、小圆角、真实照片与较充分留白。 本轮已通过本地 HTTP 打开现有页面并检查首屏,同时交叉核对三份 CSS 的级联。

当时需要解决的是内容组织方式,现已按独立旅行内容和共享模块落实:

迁移前情况 迁移目标
景点正文在 HTML,车次和行程在 app.js,路线规则在 planning.js 每次旅行有自己的内容目录,公共代码只负责展示和计算
日期、双人、北京与上海等条件写在脚本中 放入当前旅行的配置,其他旅行无需修改这些条件
当前地图展示单次行程 与全站世界足迹地图分开,分别负责路线和已去记录
仅清单保存在本浏览器 网站正式内容以仓库文件为准,浏览器选项只是个人临时偏好
当前素材是目的地参考图 旅行记忆使用真实个人照片,参考图保留来源标识
README 仍为个人资料模板 搭建时补充运行、内容更新、照片处理和发布说明

仓库 remote 指向 wickcy/wickcy.github.io。初始分析时没有 package.json、构建配置或 .github/workflows/;如今已建立这些文件,但发布链路仍待实际推送验证。 分析开始时,index.html 已修改,其他页面资源大多未被 Git 跟踪;迁移保留了本地备份和对照文件。

已采用的页面与导航

一级导航使用 足迹 / 旅行 / 计划 / 相册,保持四个简短入口。

页面 主要内容 路径
足迹首页 世界地图、国家与城市统计、最近旅程、下一次旅行概况 /
旅行列表 已完成旅行,按时间浏览,可按城市或年份筛选 /trips/
计划列表 正在准备与长期构思中的旅行,显示更新时间 /plans/
城市档案 城市介绍、到访记录、关联旅行和照片入口 /cities/{cityId}/
单次旅行 概览、路线方案、景点、旅行记忆与相册入口 /trips/{tripId}/
单次相册 本次旅行的全部公开照片,原比例瀑布流与大图浏览 /trips/{tripId}/photos/
全站相册 自动生成每次旅行的票根入口,点击进入对应相册 /photos/

计划和已完成旅行共用 /trips/{tripId}/:完成后变更状态,保留链接。 一级“旅行”是归档入口,单次旅行内部再提供“概览 / 路线与景点 / 旅行记忆”等内容导航;不把目前七个行程锚点全部变成全站一级导航。 缺少照片时可以只展示计划,完成旅行也允许暂时没有照片。

首页与地图的设计约定

  • 地图是首屏主角;桌面参考占首屏约三分之二,下方接最近旅程与下一次计划。
  • 沿用纸色背景。未到访区域淡灰,已到访国家浅鼠尾草绿,实际到访城市使用陶土橙实心点与清楚边缘。
  • “点亮国家”表示有到访记录,并不暗示走遍整个国家。
  • 点击国家缩放并筛选该国已去城市;点击城市先显示简短信息和旅行列表入口,再进入城市档案。
  • 放大后显示城市点;密集区域采用聚合或避让,手机上提供城市列表和明确的返回全球视图操作。
  • 规划中城市不计入足迹。如以后添加计划图层,应单独开关、用空心或虚线标记,不与实访统计混淆。
  • 没有真实足迹数据时,展示未点亮地图和诚实空状态,不把泰安与绍兴候选方案当成已经去过。
  • 世界边界数据与单次行程道路瓦片独立;当前足迹地图使用本地简化矢量边界,来源和许可随地图素材保存。

旅行记录与相册

一趟旅行包括“出发前怎么想”和“实际留下了什么”。规划方案与游后记忆并存,不因完成而覆盖原计划。 计划中默认突出路线;完成后可以突出回忆和照片,路线仍可查阅。

相册采用“先选旅行票根,再看这次的全部照片”:

  • 精选支持 1、2、3 张自适应排布,不做自动轮播,也不要求每次凑够三张。
  • 导航相册页只展示每次旅行的票根入口,票根保留整体比例,不铺开全部旅行照片。
  • 单次照片墙按原始横竖比例作无间隙瀑布流,说明使用底部半透明黑条与白字叠放;可打开大图按照片索引顺序前后浏览。
  • 全部照片包含精选照片的原始展示版本,避免只有票根、找不到完整照片;票根衍生图不重复计入照片数量。
  • 原始上传素材与网站展示副本分开,页面默认加载压缩缩略图,大图按需加载。
  • 没有票根成品时正常展示照片,不能让票根制作阻塞一趟旅行的发布。

用户提供的 dy-travel-ticket-poster 支持照片转旅行票根及批量统一风格,适合放在内容制作环节。 本轮仅阅读仓库说明,未安装 Skill、未生成票根。实际制作时读取对应 SKILL.md 并遵循用户选定的构图与风格。 网站只使用成品图片和元数据,不需要在访客浏览时调用生图服务。

已实施的技术与目录

当前采用 Astro 静态生成 + Markdown/JSON 内容 + 少量原生 JavaScript 交互 + GitHub Pages 发布配置。 理由是旅行内容可以独立成文件,公共模板统一外观,构建时自动生成城市索引、列表和静态 URL;交互集中于地图、筛选、预算与照片预览。 这些技术和内容分层已经落到代码中;远端部署尚未验证。

Astro 内容集合支持构建时读取和校验本地内容;官方 Pages 部署指南给出了通过 Actions 发布静态站的方式。 首期无需引入登录后台或数据库。若以后确实需要直接在网页编辑并同步,再评估独立的内容管理方案。

目录职责如下;单次旅行的 plans.json、photos.json 和个人照片目录按内容需要创建,不必为了目录完整而创建空文件:

AGENTS.md
docs/
  project-plan.md
content/
  places/
    cities.json                  # 稳定城市 ID、国家代码、地图坐标
  trips/
    autumn-meet-2026/             # 一趟旅行一个目录,ID 不随改期变化
      index.md                   # 标题、状态、关联城市、公开摘要和游记
      plans.json                 # 首计划为 comparison;普通结构化行程用 itinerary
      photos.json                # 有照片时增加:排序、说明、精选和票根路径
public/
  images/
    trips/
      autumn-meet-2026/
        photos/                  # 面向公开展示的压缩照片与缩略图
        tickets/                 # 精选票根成品
  maps/                          # 世界边界数据及许可
src/
  content.config.ts              # 自动读取旅行入口,校验内容
  layouts/                       # 全站布局和旅行页面布局
  components/                    # 导航、按钮、通用卡片
  features/
    atlas/                       # 国家填色、城市点、地图交互
    trips/                       # 旅行查询、行程、景点、预算
    gallery/                     # 票根、照片列表、大图查看
  styles/                        # 色彩变量、基础排版、公共组件
  pages/                         # 首页、列表、城市、旅行与相册路由
.github/workflows/               # 构建、检查、Pages 发布

城市资料只在出现新城市时补充;新增到已有城市的旅行无需修改城市档案页面。 三份旅行内容文件按需要增加;简单计划只需要 index.md,不强迫空照片或空预算文件。 全站相册、足迹统计和列表来自自动索引,不维护第二份 trips 总清单或照片总清单。 相册规模扩大或改用外部存储后,仅替换照片索引里的资源地址,不改变页面归属关系。

内容模型的边界

对象 关键内容
城市 稳定 ID、名称、国家代码、明确坐标系的中心坐标
旅行 稳定 ID、标题、状态、公开摘要、更新时间、城市关联、实际到访记录
方案 候选城市、每天路线、景点活动、交通、住宿区域、预算与来源
照片 稳定 ID、照片地址、缩略图、说明、城市关联、顺序、是否精选、票根地址

旅行与城市多对多;实际到访集合独立于候选集合。 状态使用 planning(规划中)、completed(已完成)、cancelled(已取消),发布与否由独立字段控制。 未发布旅行不生成页面,且统一排除于旅行列表、城市关联、相册、足迹与统计;所有派生页面使用相同的发布过滤。 状态不根据日期自动改变。只有明确实际去过的城市才参与地图和统计;也允许后续补录只有城市、没有长游记的历史足迹。 完成旅行的实际路线可逐步补充,不因仍有候选方案就认定所有候选城市都到访。

不要把 published: false 或私密字段误当作公开仓库的访问控制。 如果用户希望隐藏日期或住宿,公开源文件和构建产物都不应包含这些私密值;可以只存“大致季节”“第 1 天”等公开版本。 公开计划应显式记录最后更新时间;完整私有计划如有需要,在仓库之外维护,不能通过隐藏 UI 实现保密。 public/ 中的文件可被直接访问,只用于已允许公开的素材;未发布图片不能只靠旅行的 published 字段保护。

新增旅行的操作方式

用户只需告诉 Codex:“新增一次某地旅行,这是计划/记录和照片。”

  1. 新建旅行目录和 index.md;需要详细路线时增加 plans.json。
  2. 首次涉及新城市时补充 cities.json,已有城市直接复用稳定 ID。
  3. 有照片时添加公开展示副本与 photos.json,选择 1–3 张制作票根后补充成品路径。
  4. 构建自动更新列表、城市档案、足迹、相册和统计,无需编辑旧旅行内容。
  5. 检查内容引用、构建结果和代表页面;推送后自动发布。

修改老旅行时通常只改它自己的目录。 公共组件的改动仍会作用于所有旅行,因此需要对既有内容做针对性回归,不能承诺共享模板完全不会影响旧页面。

原始迁移顺序与后续验收

  1. 确认体验(已完成):全站名称、四导航、地图首页和比较计划迁移均已确认。
  2. 建最小基础(已实现):统一色彩和基础组件,建立静态构建、内容模型、路由与 Pages 发布配置。
  3. 迁移首个计划(已实现):将“秋日碰头”作为一趟旅行,泰安/绍兴保留为候选方案,迁移行程、车次、地图、住宿区域与预算工具。
  4. 接足迹与城市档案(模块已实现):待用户提供真实记录后录入,无须为展示而编造到访。
  5. 接旅行记忆(模块已实现):照片索引、精选票根、全部照片与预览已接入,当前没有个人照片或生成的票根。
  6. 验证扩展和发布:检查独立新旅行内容的读取、代表页面与发布产物,再验证实际推送发布链路。

迁移已保留原页面备份和本地对照,根目录旧 index.html 不再作为站点入口。 “完整保留”指现有功能;迁移时仍需按用户的公开选择处理现有精确日期与住宿文本,覆盖正文、复制下载、路线与预算说明、照片票根等输出。 旧版未作为另一个公开页面发布,以免原样公开具体行程信息或形成多套长期维护依赖。

验收重点是:新增旅行隔离、计划不误点亮、重复到访不重复统计城市、同城多旅程/跨城单旅程正确、直接访问和刷新子页面可用、照片与地图失败时仍有可读内容、公开产物不含已要求隐藏的信息。 当前预算和路线功能迁移时,额外比对现有不同目的地/天数/汇合方式的代表组合,确保保留计算与无效组合提示。

后续内容准备

  • 真实记录:由用户提供实际去过的城市,以及希望关联的旅行,不把候选方案转成到访记录。
  • 照片与票根:由用户提供选择公开的照片和说明,再选 1–3 张制作票根。
  • 照片规模:每次大约几十张、几百张还是更多照片,决定后续是否改用独立图片存储;不影响当前无照片站点的运行。

照片存储建议少量时先用仓库内的公开压缩副本;若预计持续发布大量高清照片,再单独选择图片存储服务。 这里的“其余全部展示”指所有选择公开的旅行照片,不建议直接发布相机原始文件。

发布事实与资料

GitHub Pages提供静态托管,适合本方案。 自动发布可以由指定分支或 Actions 驱动,见发布源设置。 当前已提供 main 分支的 Actions 发布流程。实际推送时核对仓库 Pages 发布源与 Actions 结果,发布成功后再更新部署状态。