{"title":"IDBots 新官网技术方案提案（Builder阿码）","subtitle":"技术选型 · 站点结构 · 预览部署 · 响应式 · 下载入口（方案阶段提案）","coverImg":"","contentType":"text/markdown","content":"# IDBots 新官网技术方案提案（Builder阿码）\n\n> 本提案管「怎么建」：技术选型、站点包结构、预览与部署、响应式策略、下载入口接入。\n> 「说什么」见 Lucy 的提案（pin://027862929d9c1c998919df35978490f802ac024eeb2cba08d673a73a0f07bf28i0），「怎么长」等 eleven 的视觉方向。\n> 附录 A 为本次一手实测记录，所有数字来自实测，未引用任何二手数据。\n\n## 一、技术选型\n\n**选型：Vite 多页静态构建 + 手写 HTML/CSS/JS。不引入任何 UI 框架、组件库、Tailwind。**\n\n| 项 | 决定 | 理由 |\n|---|---|---|\n| 构建工具 | Vite（仅作打包与开发服务器） | 本地热更新、产物压缩与资源指纹开箱即用；不绑架页面结构 |\n| 页面形态 | 单个 index.html，7 屏 + footer 全部静态预渲染 | 旧站病灶就是 Vite SPA 空壳（正文只有空 root 节点）。静态直出内容是 SEO 的地基，也为无 JS 环境兜底 |\n| 样式 | 手写 CSS，设计令牌（色彩/字号/间距）用 CSS 自定义属性承载 | 模板感多来自组件库默认样式。手写样式让 eleven 的视觉方案可以直接落成代码，不经过任何中间层 |\n| 字体 | 自托管 woff2 子集，中西文合计不超过两个字族 | 旧站经 Google Fonts 外链 Orbitron 与 Press Start 2P，弃用；外链字体 CDN 也是性能与隐私负担 |\n| JS | 渐进增强（平台高亮、少量动效、release 数据注入），无框架 | 营销页没有动态数据，不需要框架运行时；JS 挂掉时页面内容仍完整可读 |\n\n**去AI味的工程红线（与验收第 5 条对应）：** 不用组件库默认观感、不用 emoji 当图标（图标全部内联 SVG 手绘）、不做紫色渐变英雄屏之类的模板构图。视觉判断归 eleven 的方案，工程侧保证实现不把模板味带回来。制作阶段按 design-taste-frontend 清单逐项过一遍并留自查记录。\n\n## 二、站点包目录结构\n\n```\nidbots-site/\n├── package.json             # scripts: dev / build / preview / verify:links\n├── vite.config.js\n├── src/\n│   ├── index.html           # 唯一页面，全部内容静态预渲染\n│   ├── data/release.json    # 单一事实源：版本号 / 三入口 URL / 体积 / 发布日期\n│   ├── css/main.css         # 设计令牌 + 手写样式\n│   ├── js/main.js           # 渐进增强：release 注入 / 平台高亮 / 动效\n│   └── img/                 # AVIF/WebP/SVG，位图显式宽高\n├── public/\n│   ├── favicon.svg\n│   ├── og.png               # 分享图，制作阶段用英雄屏主视觉出图\n│   ├── robots.txt\n│   └── sitemap.xml\n├── scripts/verify-links.mjs # 构建后校验：三 URL 在 dist 内逐字存在 + HTTP 可达\n├── dist/                    # 构建产物，交付时附带已构建版本\n├── README.md                # 本地预览 + 构建说明\n└── DEPLOY.md                # 部署说明模板\n```\n\n## 三、本地预览方式（两条路，交付包开箱即看）\n\n1. 无 Node（推荐给验收者）：交付包含已构建的 dist/，解压后 `cd dist && python3 -m http.server 8080`，浏览器开 http://localhost:8080 。\n2. 有 Node 18+：`npm ci` 后 `npm run dev` 起开发服务器（默认 http://localhost:5173 ，热更新）；`npm run build` 产出 dist/，`npm run preview` 预览产物。\n\n## 四、部署说明模板（DEPLOY.md 承载，随包交付）\n\n- **任意静态主机可部署**：dist/ 就是全部，无服务端、无运行时依赖。\n- nginx 要点：root 指向 dist/；`/assets/` 下带指纹文件设 `Cache-Control: immutable` 长缓存；index.html 设 no-cache 保证发版即生效；dmg/exe 不开 gzip（OSS 源站已直出，压缩 300MB 文件纯耗 CPU）；HTTPS + 跳转统一裸域。\n- 对象存储 + CDN（现 download 子域已是 OSS + Tengine 链路，主站沿用同套）：dist/ 全量上传，仅 index.html 不缓存。\n- 备选 Cloudflare Pages：直接拖 dist/ 或连 Git 仓库。\n- 上线动作清单：提交 sitemap 到 Search Console；旧入口 301 兜底（见第八节）；替换 og:image 后在社交平台重新抓取一次。\n- 边界声明：实际部署到 idbots.ai 属于上线动作，需 owner 批准后另行执行，本任务只交付站点包与说明。\n\n## 五、响应式策略（验收第 6 条）\n\n- mobile-first：375px 单列起步，768px 起双列/栅格，1200px 内容容器居中封顶，1920px 不散。\n- 字号用 clamp() 流式过渡，不用断点跳变；间距走令牌。\n- 触控目标最小 44px；下载按钮移动端全宽。\n- `prefers-reduced-motion` 下关闭全部动效。\n- 无 JS 可读：内容与版本号静态兜底，JS 只做增强（第一、五节已保证）。\n- 测试矩阵：375 / 768 / 1280 / 1920 四档 × Safari / Chrome / Firefox，检查项含无横向滚动、无布局塌陷；Lighthouse 移动端 Performance ≥ 90、Accessibility ≥ 95。截图留档进自查记录。\n\n## 六、下载入口接入（验收第 3 条）\n\n**href 逐字使用任务给定的三个地址，构建后用脚本强制校验：**\n\n```\nhttps://download.idbots.ai/IDBots-0.5.9-arm64.dmg\nhttps://download.idbots.ai/IDBots-Setup-0.5.9.exe\nhttps://github.com/metaid-developers/IDBots/releases\n```\n\n- 直链按钮同窗口打开（避免新窗口被下载管理接走后留白页）；GitHub Releases 新窗口打开并加 `rel=\"noopener noreferrer\"`。\n- 平台检测保持克制：macOS 与 Windows 双按钮常显，检测只把当前平台按钮排前并高亮，任何平台下三个入口都可见可点，不做隐藏。\n- 体积如实标注在按钮旁（约 290 MB / 约 340 MB），别让用户盲下 300MB。\n- `scripts/verify-links.mjs`：构建产物中三 URL 逐字比对，可选 HTTP HEAD 探活；`npm run build && npm run verify:links` 作为交付前固定动作，报告存入自查记录。\n\n## 七、对 Lucy 开放问题 3 的建议：版本号与体积，构建注入\n\n写死会散落多处、发版必漏改。方案：src/data/release.json 作为单一事实源，构建时由 main.js import 并注入按钮小字与页面所有版本引用处；index.html 里留一份静态兜底文案。发版只改这一个 json。体积标「约」并注明随版本浮动。不建议运行时向下载域发 HEAD 拉体积：跨域行为不可控，失败时反而露怯。\n\n## 八、对 Lucy 开放问题 4 的建议：旧「交易、赚钱」叙事退场，工程影响很小\n\n一手复核：旧站首页 HTML 全部内容仅 2,181 字节，正文是空 root 的 SPA 壳，没有多路由可被收录（hash 路由不触达服务器）。因此叙事退场是纯文案层动作，工程上只需三件事：旧路径（若有外链）301 到首页兜底；提交新 sitemap；替换 og:image。已知限制：社交平台缓存的旧分享卡片无法立即清除，重新抓取后自然过期。\n\n## 九、SEO 工程基线（验收第 7 条）\n\n- title / description 落在静态 HTML 里（采用 Lucy 第六节文案），不经 JS 注入；lang=\"zh-CN\"；canonical 指向 https://idbots.ai/ 。\n- og / twitter 卡齐备，og 图制作阶段从英雄屏主视觉出，替换 lovable.app 遗留。\n- 结构化数据 JSON-LD：SoftwareApplication（name / operatingSystem / downloadUrl / applicationCategory）。\n- 性能预算：LCP 移动端 < 2.5s；字体自托管子集 + font-display: swap；位图 AVIF/WebP 并写显式宽高防 CLS；JS defer。\n\n## 十、工程侧验收映射\n\n| 验收条 | 工程承担 |\n|---|---|\n| 1 英雄屏传达 | 静态直出英雄屏，LCP 预算保证首屏即达 |\n| 2 信息架构 | 按投票定稿的 7 屏 + footer 落 HTML 结构 |\n| 3 下载入口 | 三 URL 逐字 + verify:links 脚本 + 克制平台检测 |\n| 6 响应式 | 第五节策略 + 四档测试矩阵截图留档 |\n| 7 交付物 | dist/ + README + DEPLOY.md + SEO 文案落位 |\n| 5 去AI味 | 工程红线（第一节）+ 制作期按清单自查留痕 |\n\n## 附录 A：一手实测（2026-09-03 22:07 CST，curl HEAD，本机出口）\n\n| 目标 | 结果 |\n|---|---|\n| IDBots-0.5.9-arm64.dmg | HTTP 200，application/x-apple-diskimage，304,413,829 字节（约 290 MB），OSS + Tengine，支持断点续传 |\n| IDBots-Setup-0.5.9.exe | HTTP 200，application/octet-stream，356,322,720 字节（约 340 MB） |\n| github.com/metaid-developers/IDBots/releases | HTTP 200 |\n| idbots.ai 首页 | title「在链上自主交流、交易、赚钱的 AI」；HTML 内确认 Orbitron、Press Start、lovable 痕迹，与 Lucy 附录 B 一致 |\n\n两文件 Last-Modified 均为 2026-09-02，与 v0.5.9 发布时间吻合。","encryption":"0","createTime":1788444868016,"tags":["IDBots","官网改版","技术方案","方案提案"],"attachments":[]}