【1024Builder作品秀】1024 楼层实况墙 · Floor Wall
1024Builder作品秀#
【一句话】
这次盖楼活动的主帖，被我做成了一块可以看的数据墙 —— 谁占了 128 楼、1024 楼预计几点到、你的那一楼在哪儿。
【为什么做这个】
我准备参加盖楼的时候，先干了件"参赛之外"的事：我先把这次盖楼本身看了一遍。
因为有个问题一直在我脑子里：官方说"盖到 128、256、512、1024 楼的朋友有奖品，如所在楼层是无效回复则顺延一楼"—— 那到底盖到哪了？哪些楼是真填了模板的、哪些是灌水的？1024 楼还差多少？
社区里没有人做过这件事（我搜了，50+ 篇作品秀里没有一篇做主帖数据）。于是我干脆自己写了一个。
【作品介绍】
▸ 楼层时间轴
横轴是时间（10-19 13:28 开帖 → 实时），纵轴是楼层号，每个点就是一层。
悬停/点击能看：作者、发布时间、正文摘要，以及这一层是"认真填了模板"还是"灌水"。
官方模板是 #我是1024Builder# 那五行 —— 我按这个判定有效层，所以图上荧光绿的是有效模板回复、灰色的是灌水，一眼能看出哪些是真参与者。
▸ 里程碑轨（128 / 256 / 512 / 1024）
四个指定楼层各一张卡：这层实际是谁占的、是不是有效回复、顺延到了第几楼，全部按官方"无效回复则顺延一楼"的规则算出来。
这里有个我一开始算错了、后来才想明白的地方，单独讲一下 —— 因为它可能是整件作品最值得看的部分：
顺延的终点，取决于"有效回复"怎么判。社区里有人把标签打成 #我是 1024Builder#（中间带空格）。
· 如果按严格字面判（正文必须含连续字面「我是1024Builder」），那 129 楼会被判无效，奖就顺延到 133 楼；
· 但官方排除的是「重复回复、灌水或与活动无关的内容」—— 不是排版格式。带空格、但四行模板都认真填了的回帖，它不是灌水、也不是与活动无关，它就是一次完整的有效参与。
所以我把两种口径都算了：主判定取宽松 → 128 楼的奖顺延到 129 楼「硬气一点」；同时在卡片里附上严格字面口径的结果（→ 133 楼「琦哈哈」），并写清楚为什么。
同一个"顺延一楼"，因为"有效"的判定口径不同，落到不同的楼层。 我把这件事摊开算给你看，而不是挑一个答案装作很确定 —— 因为这是我的判断，不该由我单方面定义。
▸ 我的楼层
输入你的社区 ID，立刻定位你在这场盖楼里的所有楼层：高亮在时间轴上的位置、你的楼层内容、你在第几层、有没有填模板。
▸ 1024 楼预测器
按最近 6 小时的真实速率外推：当前多少楼、离 1024 还差多少、预计什么时刻能到。
▸ 冲楼预测卡
选 512 或 1024，填昵称，生成一张「我的冲楼预测卡」PNG。
▸ 数据是真的
所有数据直接来自活动主帖的公开接口（forum.trae.cn/t/325833.json），一个数都没编，你可以自己点开链接对。
【关于"实时"：我把浏览器同源策略这堵墙，直接给拆了】
论坛接口不返回 Access-Control-Allow-Origin，浏览器端 fetch 必然抛 TypeError: Failed to fetch —— 这我实测过（带 Origin 头复查过响应头，Vary 里也不含 Origin）。
第一版我老老实实做成了"内置快照 + 手动粘贴 JSON"。但那有个致命问题：它不"实况" —— 一个叫实况墙的作品，数据却要人手搬，这就不对了。
所以第二版我把整件事翻了过来：既然网页读不到论坛，那就让一个不受同源策略约束的东西去读，再把结果送到网页面前。
· 我在自己的服务器上跑了一个常驻服务：它定时（每 3 分钟）分页把主帖全量楼层拉到底，整理成一份楼层数据，对外只暴露一个带 access-control-allow-origin: * 的 JSON 接口；
· 页面优先走同源的那条（从自家站点打开时，压根不涉及跨域，零成本）；即使页面被搬到别的域名，这条接口依然能跨源直取；
· 页面再按优先级依次探查多条通道，命中即止：自有服务器（同源）→ 自有服务器（跨源）→ 论坛直连（官方哪天开了 CORS 就立刻生效）→ 公共 CORS 代理 ×2 → RSS 通道 → 静态镜像备份。
· 每次探查的逐条结果都摊在页面上（哪条命中、耗时多少、失败的什么原因），你点开「探查日志」就能自己核对。
实测：同源 0.20s 命中、跨源 0.12s 命中；把 HTML 下载到本地双击打开（file://），照样能命中同一份数据 —— 全程不需要任何人复制粘贴 JSON。页面每 3 分钟自动重探一次。
手动导入我留着，但降级成了「所有自动通道都没命中」时的兜底。
这一点我想单独说：这堵墙不是"绕过去"的，是架构上正面解决的 —— 用一条我自己能控制、可审计、每 15 分钟自动更新的镜像通道，把浏览器的安全策略变成一条正常的、被设计过的数据通路。
【Demo】1024 楼层实况墙 · Floor Wall
（作品集落地页：1024 Builder 作品集 · TRAE 社区 1024 狂欢周 ；单文件版也附在帖子里，下载双击即可，不需要服务器、不需要注册、不需要联网）
【下载】
index.html (149.2 KB)
【演示】
【截图】
【TRAE 在创作中发挥的作用】
这次我基本是让 TRAE 主导实现的，我负责定规格和审结果：
· 需求拆解与实现：楼层时间轴、里程碑顺延判定、我的楼层检索、速率外推预测、Canvas 预测卡导出，全部由 TRAE 独立完成；连楼层明细的采样加载策略（首屏只拉一次拿楼层总数，明细均匀采样约 12 页，四个里程碑精确拉取）都是它自己定的。
· 它自己撞上了一堵墙并给出了解法：第一版直接 fetch 主帖 JSON，发现被同源策略拦了，于是没有把错误藏着，而是把"内置快照 + 手动同步"设计成了正式路径。我看完后提的要求很直接：“实况楼层需要自主探查，不要人工去获取” —— 它于是把限制从"设计"升级成了"工程问题"：先探查了 13 条公共 CORS 代理（实测全部限流/超时/行为不稳定），转而用 GitHub Actions 建了一条我自己可控的镜像通道，再把页面改成多通道依次探查、命中即止。我提的是一句需求，它做的是一整套架构决策。
· 我要求它用真实浏览器验收，而不是只跑逻辑测试，并且给了它一个自建的无依赖 CDP 截图/录屏工具链。结果它第一版的判定逻辑有个真问题：社区里有人把标签打成 #我是 1024Builder#（中间带空格），严格匹配会漏判 —— 连带把"128 楼顺延到 129 楼"算成了"顺延到 133 楼"。这种错误在页面上是公开点名到真实用户的，我在验收时抓到并让它改成了宽松正则。
· 视觉：配色同样取自官方 1024 海报的实测色值；"灌水/无效"用中性灰、"有效模板回复"用官方荧光绿，两种状态在时间轴上直接可分。
【三个比"我做了什么"更有意思的技术点】
- 判定口径决定事实：128 楼的归属，取决于"有效回复"怎么判。用严格字面匹配（正文须含连续字面「我是1024Builder」），奖顺延到 133 楼；用宽松口径（允许空格等写法），才顺延到 129 楼 —— 差别藏在一个空格里。公开断言点名到真人，口径必须写清楚、并且能被复核。
- 同源策略是特性，不是故障，更不是终点：接口不返回 CORS 头，浏览器端这一跳注定拉不到 —— 但这不等于"只能靠人复制粘贴"。真正的解法是换一个不受同源策略约束的执行环境去取数，再把结果变成网页可直取的静态资源。约束是真实的，绕开约束的路径也是真实存在的 —— 两者都不该被含糊掉。页面把每次探查的逐条结果摊开给你看，包括失败的那些。
- 镜像只搬数据，不下判断：抓取脚本只负责把楼层原样搬过来，"有效/无效"两套口径一律由页面现场用同一套正则算。这样镜像与页面永远不会各算各的、让 213/201/12 这些数字打架 —— 数据通道和判定逻辑，职责必须分开。
【想试试的话】
打开 Demo，先在「我的楼层」里输入你的社区 ID，看看你在这场盖楼里落在哪儿。
如果你是社区里的活跃分子，你大概率会看到自己名字后面的某一层。
【互动时间】
两个问题：
- 你想知道自己是在第几楼盖的楼吗？我把 364 层都画出来了，搜你的 ID 就能定位 —— 找到了回来留个言，我看看大家分布。
- 如果给你一面这样的墙，你最想看这次活动的哪个维度？（比如"按小时看哪段时间最卷"、“谁是最早的那 10 个人”）我挑一个做出来。
