Design Spec

整站扩展设计方案（评审稿）

在「边际漫谈」现有骨架上新增科普视频与测算小工具两个板块，并整合微信关注入口。本页与原型的每个界面一一对应，供逐条评审。

一、信息架构

边际漫谈
├─ 首页            保留现有 hero，新增「三个板块」错落导览 + 跨板块「最近更新」
├─ 博客  /blog     现状不动，文章详情沿用现有版式
├─ 科普视频 /videos 【新增】系列制视频库（S1 第一季 / S2 第二季）
│   └─ /videos/:集  播放页：正片位 + 讲稿纲要 + 参考与口径 + 系列逐集列表
├─ 小工具  /tools  【新增】测算工具索引（状态：可用 / 规划中+锁定原因）
│   ├─ T.01 容量电价分摊测算（可交互 demo）
│   ├─ T.02 储能价差收益快算（可交互 demo）
│   ├─ T.03 有效容量(ELCC)速查（规划中，明示锁定原因）
│   └─ T.04 代理购电价格模拟（规划中，明示锁定原因）
└─ 关注  /connect  由原「联系」页升级：公众号 / 视频号二维码矩阵 + RSS 等渠道说明

原型采用 hash 路由（#/videos 等）便于评审逐屏检查；本站为静态站点，等价界面以目录式路由呈现（/videos/、/tools/capacity/ 等），界面内容一一对应。

二、关键设计决策

• 嵌入既有骨架，不另起一套：沿用现有配色令牌（米白底 #fff8ed / 深海军蓝 #07162b / 琥珀 #f0a72f / 青 #18b8aa / 珊瑚 #df6d4f）、面板样式与导航结构，新板块看起来「本来就是这个站的」。
• 封面即原理：视频卡片封面为代码绘制的动态原理图（供需曲线、容量充裕度柱状、结算瀑布），与正片动画风格同源，hover 时才出现播放按钮，静止态不喧哗。
• 编号索引 + 状态诚实：视频 E01–E08、工具 T.01–T.05、文章 A.01– 统一编号；未上线条目以「制作中 / 规划中」灰色纯文本呈现，不伪装成可点链接，规划中的工具必须写出锁定原因。
• 口径随结果走：每个工具结果页附「口径与假设」折叠区，示例数据打标；数字一律等宽字体右对齐。
• 内容互链：首页混排最近更新；视频详情页挂同系列逐集列表；工具与视频/文章互链由内容集合维护（按系列/编号关联），形成「看懂 → 算一遍」的闭环。
• 微信接入的现实约束：公众号主页与视频号主页均无稳定站外外链，故采用「二维码矩阵 + 账号名」的通行做法，集中在关注页并在页脚常驻；公众号历史文章可在视频详情页以普通链接引用。

三、交互说明

路由方式

静态目录路由，每个界面可直达（/videos/、/tools/capacity/…），便于评审逐屏检查

视频筛选

系列 chips 过滤，卡片与下方索引同步

工具计算

滑杆即时重算，结果区大数字 + 明细行 + 占比条三级呈现

动效

仅原理图 SVG 动效（曲线平移、边际点脉动、柱体生长），无装饰性滚动动效

移动端

断点按内容收栏：72rem 收双栏大区块、64rem 收三栏错落、40rem 手机单列；触屏常驻播放键、取消浮起；表单控件 ≥16px 防 iOS 聚焦放大；网格轨一律 minmax(0,1fr) 防横向溢出

四、落地路径（Astro 现状适配）

• 视频与工具各建一个 Astro Content Collection（videos / tools），编号、状态、系列为字段，列表页自动生成，状态≠live 的条目渲染为纯文本。
• 工具为独立 .astro 页面 + 原生 JS（本站无框架依赖，保持轻量）；公式注释与「口径与假设」同文维护。
• 视频正片托管：微信视频号首发，站内经 B 站 iframe 嵌入播放（已定稿：投稿 B 站 → 元数据填 BV 号即自动嵌入）；封面 SVG 组件化复用。
• 二维码图片放 /public，关注页与页脚引用同一资源，换码只改一处。