DEVLOG · TECH-DOC EDITION

开发进度 v0.8.2

落地页从单页扩为四页；玻璃面全面换成四层柔光结构 + 真折射；开发日志建立模板体系，每版独有排版。

DATE 2026-10-18RUNTIME react + react-domGZIP ≈93KBEDITION techdoc / 6 templates

01本版要点

落地页从单页扩为四页：首页 / 设计理念（原理 + 全部可交互演示）/ 功能导览 / 开发进度索引，共享 assets/ 样式与真折射引擎
落地页玻璃面重做为四层柔光结构：环境色底（hsla 全锚定 --hue 216）/ 克制 blur + 补偿 saturate / 1px 透光边 + 菲涅尔 inset 高光 / 环境色投影；悬停「呼吸」由 @property 注册的变量迁移平滑插值
真折射引擎移植到落地页（assets/glass.js，与 src/lib/liquid-glass.ts 同源）：圆角矩形 SDF → RG 位移图 → feDisplacementMap，玻璃中心清晰、边缘把背景真实挤弯；Chromium 全效，Safari / Firefox 自动降级纯模糊
画布加清新蓝柔光色池（fixed 径向渐变）——纯色背景上折射不可见，现在玻璃滚动时边缘能真实折射出色彩
开发进度页建立模板体系：6 套截然不同的排版（面板/时间线/深色技术文档/杂志/便当格/终端），版本号与模板一一映射，v0.8.1 重排为时间线、v0.8.2 用深色技术文档
应用内玻璃引擎同步支持「呼吸」：backdrop-filter 改由 --lg-filter / --lg-blur / --lg-sat 驱动，hover 时变量迁移产生平滑过渡（点按有光）

02截图

◆ 落地页（本次新增）

**落地页 · 首页**Hero 大玻璃卡压在清新蓝柔光色池上：真折射在卡片边缘把色池「挤弯」，四层柔光结构（环境色底/柔化/透光边/环境色投影）完整可读；数据丸与卡片网格均为玻璃面，悬停有呼吸与指针跟随高光。

**落地页 · 设计理念（原理页）**研究 HyperOS 4 柔光玻璃与 iOS 27 液态玻璃后的落地实现讲解：双体系对比、四层结构逐层演示（只有底色 → +柔化 → +边缘 → +投影）、色相切换、blur/saturate 三档对比、真折射管线与呼吸交互——全部为实时可交互演示。

**落地页 · 功能导览**八个模块按「做什么 / 怎么做 / 为什么」展开，顶部一条十一环流水线。

**落地页 · 开发进度索引**每个版本一份自包含开发日志，且每版排版不同（徽章标注版式）；新版本自动取用未用过的模板。

◆ 应用界面

**登录 / 注册**清新蓝玻璃登录卡；演示账号 admin / admin123，口令加密存储；游客只读体验入口。

**字体下拉 · 边缘真折射**菜单叠在说明文字上：玻璃边缘把背后的文字平滑「挤弯」，中心区清晰可读——液态玻璃与「整块磨砂」的本质差别。

**波形 + 快捷操作（特写）**快捷操作规整网格：播放 + 时间码一行、设起点 / 设终点一行、快捷键独立一区。

03验证

项目	结果
构建	PASS npm run build 通过，零新运行时依赖
体积	PASS gzip ≈ 93 KB（JS 86.2 + CSS 6.9），运行时仅 react + react-dom
引擎	PASS assets/glass.js 与 src/lib/liquid-glass.ts 同管线；Chromium 截图可见边缘折射
断言	PASS tools/verify-glass.mjs 17 项全过（含落地页玻璃/portal/网格/占位/术语）
链接	PASS 应用内「官网 / 落地页」→ 公开发布地址；落地页四页互通
兼容	PASS Safari / Firefox 回退纯模糊（四层柔光结构仍完整）；prefers-reduced-transparency 半透纯色

04发布命令

git tag v0.8.2 && git push origin master --tags
curl -X POST https://gitee.com/api/v5/repos/1530564211/zxsub/releases \
  -H "Authorization: token $TOKEN" -d '{"tag_name":"v0.8.2", ...}'

注意：Gitee releases API 必须传 target_commitish，否则报 missing；令牌经 git credential fill 取用，不写入 remote 配置。

本页为版本化开发进度记录（techdoc 版式 · 6 套模板之一），截图均为真实运行界面。更完整的变更见仓库 CHANGELOG.md 与应用内「更新日志」。返回开发进度索引。