1. Demo 简介
是什么： 一个单 HTML 文件的架空世界展示网站，零依赖零部署，双击即可运行。
面向谁： 世界观创作者、TRPG 主持人、奇幻设定爱好者。
主要功能：
| 功能模块 | 说明 |
|---|---|
 世界地图 |
SVG 交互式地图，支持点击国家查看详情、推镜缩放、迷雾/风暴天气效果 |
 列国志 |
15+国度的详细设定，含国家概述、地理、政体、文化、外交信息 |
 势力图谱 |
列国关系网络可视化，展示联盟、敌对、朝贡等关系 |
 历史纪元 |
完整时间线展示，记录关键历史节点 |
 人物档案馆 |
塔罗牌风格人物卡片，含人物生平与故事背景 |
 拼图模式 |
自由拖拽国家图片和标签，自定义地图版式并导出坐标 |
 西纳尔德游记 |
第一人称叙事游记，沉浸式探索世界 |
 魔法学 |
完整的魔法体系知识库 |
产品截图：
星门主菜单：
交互式世界地图：
世界地图-点击详情
拼图模式编辑器（特色）
创新点介绍：
当前 AI 在矢量国界地理还原任务中存在难以突破的固有瓶颈：原生模型无法自主识别各国国界轮廓并完成精准定位，常规方案只能将所有国家统一渲染为标准圆形；即便提前为 AI 预处理、抠取完整国界图形，模型也无法读懂复杂不规则多边形地理轮廓，最终出现国家摆放错位、尺寸比例严重失真等问题，这一行业痛点长期制约 AI 地图生成的真实度与实用性。
针对该核心难题，我提出人机协同的创新解决方案 —— 自研交互式地图编辑器。依托人工视觉与空间逻辑优势，创作者可自由拖拽调整各国版图位置、缩放匹配真实地理尺寸；编辑器会实时采集、输出全过程的坐标偏移与尺寸变换量化数据，再将标准化参数传输至 AI 模型。借助人工校准的精准空间数据引导 AI 生成，从根源解决国界定位、比例失真的技术缺陷。
本设计充分发挥人类空间判断与 AI 批量生成的各自优势，实现人机能力互补协同，为复杂地理图形的 AI 还原提供了一套高效、可落地的全新思路。
人物档案馆 - 塔罗牌（点击翻面）
剧情阅读：
2. Demo 创作思路
灵感来源： 原创世界观 “山海大陆” 已经积累了大量设定——七州五族、四大诸侯国、十多国外交关系、完整历史时间线、塔罗牌人物卡。一直想要一个能把所有设定融为一体、可交互展示的载体，而不是散落在多个文档里。
想解决的问题： 「展示」本身就是创作的一部分。当读者能在地图上点击国家就看到完整设定、在势力图谱中看清外交关系、在塔罗牌间翻阅人物故事时，这个世界的可信度和沉浸感会远远超过纯文本。
为什么做这个方向： 市面上的世界构建工具（World Anvil、Campfire等）功能强大但偏重写作辅助，且多为订阅制。我想要的是「展示优先」的轻量化方案——不需要注册登录，一个文件打开就是整个世界。
3. Demo 体验地址
体验方式：下载附件中的 ZIP 包，解压后双击 merged-showcase.html 即可在浏览器中打开。
部署到任意静态托管服务（GitHub Pages、Vercel、Netlify 等）即可获得公开访问链接。
4. TRAE 实践过程
开发流程
整个项目完全在 TRAE Work 中完成，采用单 HTML 文件架构，通过多次迭代对话逐步构建：
阶段 1：基础框架搭建
-
建立 HTML 页面骨架、CSS 设计系统（暗色学院风主题色、字体体系）
-
实现星门主菜单动画、模式切换架构
-
实现世界地图 SVG 渲染、国家数据结构
阶段 2：核心功能完善
-
列国志模块：15个国家完整设定
-
势力图谱：列国关系网络
-
历史纪元：时间线展示
-
人物档案馆：塔罗牌样式人物卡片
-
天气系统：迷雾/风暴/晴朗三种模式
-
背景音乐系统：OGG 音频循环播放
阶段 3：编辑与交互增强
-
世界地图点击国家弹出详情面板
-
拼图模式：国家图片和标签可拖拽编辑
-
大玄国内政二级菜单（七州五族等归入折叠）
阶段 4：视觉打磨与Bug修复
-
删除白色背景、优化雾气效果
-
修复天气切换亮度恢复问题
-
调整点击命中范围、优化缝隙
-
星门连线与视觉效果
关键开发截图
关键任务对话 Session ID
| 搭建基础HTML框架4421562739729434:290ea59c51f704130fdca4a8bc237abe_6a391cf25934fd3ba1dfbcde.6a391cf3d2e7fe1c450d22e7.6a391cf25934fd3ba1dfbcdf:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/22 19:40:04) | ||
|---|---|---|
制作主菜单4421562739729434:b615480fbb86ff57e4e682e1a40d617e_6a39ed36a2c43c28506e5514.6a39fb228bc77713768539fb.6a39fb22aa457c4955718b5f:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/23 11:28:49)
添加拼图模式
4421562739729434:5364c8e66786a0f781c739284ec8beb9_6a3a73ce32da7869c6bdb666.6a3b731ecbd37c13116a2e9e.6a3b731e81ec5c0038d81466:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/24 14:27:34)
TRAE 使用心得：
-
单 HTML 文件架构非常适合 TRAE 的迭代工作流，每次修改都立即可见
-
利用 Explore Agent 快速查找代码位置，效率极高
-
复杂需求（如 SVG 拖拽交互、天气效果）只需清晰描述需求，TRAE 即可生成完整可用的代码
-
建议使用 Auto 模式以获得最佳生成效果
附件
ZIP 包：
0624 v21.zip (7.0 MB)
-
（原本有bgm，但体积太大故删去QVQ）