design - “筑迹”
导航栏总览
┌─────────────────────────────────────────────────────────┐
│ │
│ 筑迹 星图 寻迹 溯源 题壁 珍藏 🎵 │
│ │
└─────────────────────────────────────────────────────────┘
| 路由 | 路径 | 一句话定位 |
|---|---|---|
| 星图 | /galaxy |
仰望建筑的星空，发现万千关联 |
| 寻迹 | /trace |
用脚步丈量历史，用镜头解锁坐标 |
| 溯源 | /origin |
拨动时间的齿轮，听见建筑的呼吸 |
| 题壁 | /inscribe |
和古人对诗，与历史同框 |
| 珍藏 | /collection |
你走过的路，都变成了收藏 |
一、星图 /galaxy
"每座建筑是一颗星，星与星之间皆有引力"
/galaxy
├── 默认视图: 星云关系图谱（3D星空力导向图）
│ · 每颗星 = 一座建筑
│ · 连线 = 渊源关系（同朝代/同建造者/同风格…）
│ · 悬停星星 → 建筑名+缩略图
│ · 点击星星 → 进入建筑详情
│ · 筛选器: 按朝代/类型/地区 过滤
│
├── /galaxy/map （切换视图: 地图模式）
│ · 中国地图上的建筑分布
│ · 古风水墨地图样式
│ · 聚合/散开切换
│
└── /galaxy/[buildingId] （建筑详情页）
· 3D建筑模型（360°旋转/缩放/剖面/部件点击）
· 建筑档案（朝代/结构/文化价值）
· 关联建筑推荐
· 入口跳转 → 溯源 / 题壁 / 寻迹
二、寻迹 /trace
"你和历史站在了同一个坐标"
/trace
├── 默认视图: 我的足迹地图
│ · 上传图片 → AI识别建筑
│ · 识别结果 + 置信度
│ · 确认打卡 → 地图点亮
│
├── /trace/spacetime/[buildingId] （时空对照）
│ · 识别后自动触发
│ · 展示该坐标的历史事件时间线
│ · "你的脚下，踩着600年历史"
│
└── /trace/footprint （我的足迹地图）
· 个人打卡地图（已打卡点亮/未打卡灰色）
· 旅行路线连线
· 推荐路线（"梁思成之路""丝路古建"…）
· 打卡统计（省份/朝代/类型 覆盖率）
三、溯源 /origin
"拨动时间的齿轮，听见建筑的呼吸"
/origin
├── 默认视图: 建筑选择列表（卡片瀑布流）
│
└── /origin/[buildingId] （沉浸式体验页）
│
├── 🕐 时间轴（Tab 1）
│ · 拖动滑块：建筑由新变旧/由旧变新
│ · 3D模型 Morph 或 图片序列过渡
│ · 关键年份事件标注
│ · 文保提示："它可能站不了下一个100年"
│
├── 🏚️ 如果还在（Tab 2，仅限遗址类建筑）
│ · [残垣] ◉━━━━━━━━━━ [全盛]
│ · 废墟 → 全盛 视觉渐变
│ · 情感文案随滑块变化
│ · 碎片"回溯"飞回建筑的粒子特效
│
├── 🎧 听建筑（Tab 3）
│ · 该建筑的专属声景
│ · 多轨混音器（风声/雨声/钟声/鸟鸣…）
│ · 可独立使用的白噪音模式
│ · 声波可视化 + 建筑剪影
│
└── 🧑🏫 问匠师（Tab 4）
· AI数字人对话
· 角色: 鲁班/梁思成/李诫
· 文字对话 / 语音对话 / 数字人视频
· 可追问建筑结构/历史/工艺
· 对话中可弹出3D部件演示
实现有一定难度 待考虑可行性
四、题壁 /inscribe
"崔颢题诗在上头，你也可以"
/inscribe
├── 默认视图: 选择建筑 → 进入创作
│
├── /inscribe/poem/[buildingId] （对诗共创）
│ │
│ ├── 模式一: "即兴对诗"（人机轮流写）
│ │ · 用户说感受 → AI引导格律
│ │ · 用户写句 → AI接句（标注平仄/韵部）
│ │ · 最终合诗 + 格律报告 + 赏析
│ │
│ ├── 模式二: "一键题诗"（输入心情，AI生成3首备选）
│ │
│ ├── 模式三: "和古人"（与崔颢/李白的诗对和）
│ │
│ └── 完成后 → 生成诗词卡片（书法+水墨背景）→ 分享
│
└── /inscribe/video/[buildingId] （穿越入画）
· 上传自拍 → 选角色（王之涣/李白/朱棣…）
· 选场景 + 选台词/诗句
· AI合成视频（换装+场景+吟诵）
· 2-5分钟异步生成 → 推送通知
· 预览 → 下载/分享
五、珍藏 /collection
"你走过的路，都变成了收藏"
/collection
├── 默认视图: 个人主页总览
│ · 用户信息 / 等级 / 积分
│ · 数据概览: 打卡N座 / 诗作N首 / 手办N个
│
├── /collection/shelf （手办收藏架）
│ · 3D博古架场景
│ · 已解锁手办陈列（可旋转查看）
│ · 未解锁显示为灰色轮廓+解锁条件
│ · 系列收集进度（唐风/宋韵/紫禁城…）
│ · 点击手办 → 建筑信息 + 解锁故事
│
├── /collection/poems （我的诗墙）
│ · 瀑布流展示所有创作的诗词卡片
│ · 获赞数 / 被收藏数
│ · 可重新编辑/分享
│
├── /collection/videos （我的视频）
│ · 穿越视频作品列表
│
├── /collection/achievements （成就勋章）
│ · 已解锁/未解锁成就展示
│ · "五岳朝圣" "唐风宋韵" "梁思成之路"…
│
└── /collection/plaza （作品广场，公共区域）
· 全站用户优秀诗作/视频
· 排行榜（打卡/诗作/收藏）
· 点赞/评论/收藏
五路由 × 子功能
五条路径，一条故事线：发现 → 探访 → 沉浸 → 创作 → 珍藏。
src/
├── app/
│ ├── layout.tsx # 根布局（导航栏+全局音频）
│ ├── page.tsx # 首页（星空动画入口）
│ │
│ ├── galaxy/ # ⭐ 星图
│ │ ├── page.tsx # 星云图谱（默认）
│ │ ├── map/page.tsx # 地图模式
│ │ └── [buildingId]/
│ │ └── page.tsx # 建筑详情（3D）
│ │
│ ├── trace/ # 👣 寻迹
│ │ ├── page.tsx # 拍照打卡（默认）
│ │ ├── spacetime/
│ │ │ └── [buildingId]/page.tsx # 时空对照
│ │ └── footprint/page.tsx # 足迹地图
│ │
│ ├── origin/ # 🕐 溯源
│ │ ├── page.tsx # 建筑选择列表
│ │ └── [buildingId]/
│ │ └── page.tsx # 沉浸体验页
│ │ (内含 tabs: 时间轴/如果还在/听建筑/问匠师)
│ │
│ ├── inscribe/ # ✍️ 题壁
│ │ ├── page.tsx # 选建筑→创作入口
│ │ ├── poem/
│ │ │ └── [buildingId]/page.tsx # 对诗
│ │ └── video/
│ │ └── [buildingId]/page.tsx # 穿越视频
│ │
│ ├── collection/ # 🏺 珍藏
│ │ ├── page.tsx # 个人主页
│ │ ├── shelf/page.tsx # 手办架
│ │ ├── poems/page.tsx # 诗墙
│ │ ├── videos/page.tsx # 视频
│ │ ├── achievements/page.tsx # 成就
│ │ └── plaza/page.tsx # 作品广场
│ │
│ └── (auth)/
│ └── login/page.tsx
│
├── components/
│ ├── layout/
│ │ ├── Navbar.tsx # 五大路由导航
│ │ └── AudioPlayer.tsx # 全局浮动播放器
│ ├── galaxy/ # 星图专用组件
│ ├── trace/ # 寻迹专用组件
│ ├── origin/ # 溯源专用组件
│ ├── inscribe/ # 题壁专用组件
│ ├── collection/ # 珍藏专用组件
│ └── shared/ # 共享组件
│
├── hooks/
├── stores/
├── lib/
└── types/
💬 评论