Repository navigation
docs: 手机端排版优化，长内容改为折叠、横滑和本页目录 - #4
Merged
Merged
Conversation
- 配色改为近黑底 + 紫青渐变，默认深色，浅色仍可切换；token 全部通过 WCAG AA 检查 - 样式重做：玻璃质感卡片、首屏极光与网格背景、渐变标题、终端窗口栏、鼠标跟随高光 - 新增 js/motion.js：Lenis 平滑滚动、首屏逐行/逐字入场、插画分层拼装与连线流动、 滚动入场、条形图生长与数字滚动、终端逐行打出、卡片 3D 倾斜、按钮磁吸、导航滑块、 阅读进度条、页眉滚动收起、页脚大字标 - 主题切换用 View Transitions 圆形展开；同站跳转加跨页面转场 - GSAP 3.15.1 与 Lenis 1.3.27 放在 docs/js/vendor 本地加载，由 sync_docs_chrome.py 写入各页 - 无脚本、脚本加载失败、减少动态效果时都退回静态页面，内容不会被藏住 - check_design_layer.py 放宽为：@Keyframes 内与白名单里的装饰伪元素可以用 opacity， 静态内容仍然不允许 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SdLhesahBsuQSbGntwoQFN
- 表格在 48rem 以下每行变成一张卡片，行标题在上，值前面补列名（main.js 把表头写进 data-label）， 不再把说明列挤成几个字宽，徽标也不再被裁掉 - .rows-wide 特性列表改为带 01/02 编号的卡片网格：桌面两列，手机一列 - 中文排版：text-autospace、text-spacing-trim、line-break: strict，段落 text-wrap: pretty 避免末行孤字 - 行内代码缩小一号并用 box-decoration-break: clone，折行时两段都保留完整圆角 - 配置要求页左侧图标标题与其他页的小节标题一样吸顶 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SdLhesahBsuQSbGntwoQFN
…his branch Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SdLhesahBsuQSbGntwoQFN
- 小节多的页面在首屏下方加吸顶的本页目录，滚动时高亮当前小节，页眉收起时贴顶 - 特性卡片：电脑上先显示 4 张，其余用「展开其余 N 项」按钮展开； 手机上改为横向滑动的卡片带，下方有进度条和「当前 / 总数」 - 超过 5 行的表格先显示 4 行；配置要求页的表格标了 data-nofold，不折叠 - 手机表格卡片：状态徽标和数字列挪到标题右边，说明列不再重复显示列名 - 窄屏代码块的复制按钮移到代码上方，不再压住长命令 - 全部是渐进增强：没有脚本时内容全部平铺 - 手机上 PySpOS 页从约 10.7 屏缩到 7.6 屏，SpaceOS 8 页从 16.3 屏缩到 11.7 屏 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SdLhesahBsuQSbGntwoQFN
JiTianYu391
pushed a commit
that referenced
this pull request
Nov 8, 2026
…his branch Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SdLhesahBsuQSbGntwoQFN
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
改了什么
接着 #3，解决官网在手机上"文字太长、太挤"的问题。没有删任何文案，只改呈现方式。
手机端排版
main.js把表头写进data-label）。原来三列表格把说明列挤到五六个字宽、徽标被裁掉的问题没有了.rows-wide特性列表改为带 01 / 02 编号的卡片网格（电脑两列）text-autospace、text-spacing-trim、line-break: strict，段落text-wrap: pretty避免末行孤字box-decoration-break: clone；窄屏代码块的复制按钮移到代码上方，不再压住长命令长内容
data-nofold，不折叠（硬件要求必须直接看到）motion.js依次浮现效果（手机，按屏数计）
兜底
验证
check_tokens_contrast.py、check_design_layer.py、check_docs_html.py、check_ota_manifest.py、sync_docs_chrome.py --check、ruff check tools/全部通过注：分支上有一个
-s ours合并提交，用来接上 #3 squash 合并前的旧分支头，不带来任何文件改动。Generated by Claude Code