本站阅读体验：视觉与引用交互方案

结论与范围复制锚点链接

本轮目标是让 UI/UX 成为文档站的特色，覆盖首页、选文、阅读、小节定位、搜索、引用与外观设置。设计与具体文章解耦：同一组中性示例驱动十套独立原型，文章数量、分组、标题与引用从示例数据派生。设计差异落在空间组织和操作路径，配色、字形、几何与动效分别配合这些路径。

当前审阅入口是本成果附件目录的 design-lab.html，其中可以切换首页、阅读和引用并看状态，再进入任意一套完整交互稿。每套支持文档与小节定位、引用查阅、全文跳转、亮暗、大字和动效开关。附件保持本地，未接入正式站、生产 MDX、公开搜索或路由。

配色依据来自 Radix 的官方色阶和用途规则，界面职责划分参考 Geist。引用、导航与定位借鉴 VS Code、Notion、Apple、Readwise Reader、Obsidian 的官方机制；动效以 Carbon token 和 Fluent 的空间指导为起点。具体组合是本次设计判断，官方资料无法证明组合在本站更美观、更舒适或更高效。Radix 色阶职责、Geist 色彩、Fluent 动效

前两版三方向稿与绑定实际专题的阅读稿保留作历史附件，推荐已撤回。本轮以十套内容无关的完整交互原型为比较对象。最终选择需要检查真实排版与操作；本轮没有执行浏览器、截图、辅助技术或真实读者验证。

十套如何不同复制锚点链接

十套删除顶部全宽进度条。当前位置使用已有导航、标签、页号或按需入口表达；滚动位置不宣称为已读程度。材料仅在引用打开后占用空间，不设空引用栏。首页和正文分别承担发现与深入阅读，文章不持续铺设装饰。

十套的配色、布局、来源、冗余删减与验收任务集中在附件 research-basis.md。详细视觉判断见视觉方案，引用行为见引用查阅，开关和生命周期见动效设计。

现状与实现能力复制锚点链接

截至本轮源码核查，本站是 Next.js 静态导出的 Fumadocs 阅读站。页尾引用由 page-relations.tsx 输出真实链接，正文链接由 createRelativeLink 解析；当前执行页面导航，没有持续的引用查阅区域。content-index.ts 从链接派生页级关系，未保存引用段落和目标章节上下文。公开 source 先过滤草稿，所有新增预览入口继续使用同一集合。

样式已经分为 tokens.css、theme.css 和 prose.css：视觉值、框架接线、正文排版各有归属。该结构可以支持多套语义配色；十套中的布局与交互差异还需要页面组件参与。next-themes 已提供亮、暗、系统模式，正式站尚无本轮原型中的风格、字号与显式动效开关。

正文与复杂组件已有表格、代码、公式、Mermaid、图片和焦点处理。正式换装需要让这些内容延续同一视觉语言，不把所有载体统一包成重复卡片。宽屏引用不能把正文压成难以阅读的窄列；窄屏采用独立材料层或原位章节，关闭后返回原文。

引用和跳转的结论复制锚点链接

普通点击站内引用先查阅来源，主文位置保留；目标含小节时定位对应位置。引用层提供一个“全文”入口，读者想深入阅读时再跳转。真实 href 继续存在，Cmd/Ctrl、中键和浏览器菜单保留直接打开能力。两种意图在出现时提供所需操作，避免每条引用同时摆放跳转、预览、并排三个按钮。

原位章节适合短核对；较长材料适合独立滚动。十套分别尝试原位、边注、侧层、材料盘、分栏与对开，最终采用哪种由任务与空间决定。引用层一次显示一个目标，选择另一引用替换当前材料；关闭或 Esc 返回有效触发点。桌面查阅保持原文可操作，窄屏需有明确的返回和焦点边界。

这些机制有成熟产品的能力证据。Notion 的 Side peek 保留左侧视图，VS Code 的 Peek 在当前位置嵌入材料，Obsidian 支持分组标签与分栏。官方机制分别来自数据库、代码和笔记场景；迁移到中文长文的收益仍待本站任务检验。Notion 页面打开方式、VS Code Peek、Obsidian 标签

实施 plan复制锚点链接

技术候选与已发现的静态导出、公开范围、iframe、客户端 MDX 边界见实现与验收。十套是选型用的完整设计空间，正式站不默认同时部署十种互相不同的操作模式；是否开放多风格与哪些风格由定稿决定。

验证边界复制锚点链接

当前附件使用原生 HTML、CSS、JavaScript，共享示例数据和偏好逻辑，没有新增生产依赖。网页资料、源码和静态检查提供可复核依据；源文件存在、语法通过、设计规则有出处均不能证明实际页面效果。本轮未操作浏览器，最终排版、动效、窄屏、键盘与引用返回仍待验收。

本轮定向文档 lint、格式、命名、JavaScript 语法与 CSS 解析通过。Node/JSDOM 对十套执行 431 个代码断言，覆盖引用竞态、模态焦点、输入法和动效中断等逻辑；WAAPI、媒体查询与滚动由测试模拟。80 对登记的平面颜色组合最低为 4.53，均属于有限静态范围。全仓代码检查在范围外的 23 个文件格式问题处停止；本站代码检查通过类型检查后，在 ESLint 插件配置错误处停止，后续测试与构建未执行。未改动这些范围外文件。页面排版、引用操作、动效与窄屏仍待授权后的浏览器验收。