feat(sidebar): 右侧「此页内容」目录可收起展开，并在桌面宽度即可显示 - #213
Open
lzcGeek wants to merge 1 commit into
Open
Conversation
- 新增 DesktopTocToggle.vue：右侧目录的收起/展开手柄，交互与左侧栏手柄一致，状态存 localStorage - 主题原本要 ≥1440px 才把目录放到正文右侧，现从 960px 起以固定浮窗显示，不新设断点 - 浮窗不占文档流，另给 .vp-page 预留 13.5rem 右侧槽位，避免遮挡正文或挤出横向滚动条 - 以 #toc 是否渲染为准判断页面有无目录（主题的 has-toc 在无小标题页面也会打上，会白留空槽）
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
1 participant
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.
改动
给右侧「此页内容」目录加了收起/展开手柄，并把它的显示宽度从主题默认的 1440px 降到桌面断点 960px。涉及 3 个文件：
docs/src/.vuepress/components/DesktopTocToggle.vuedocs/src/.vuepress/client.ts注册组件docs/src/.vuepress/styles/index.scss补样式1. 目录可收起/展开
交互与已有的
DesktopSidebarToggle.vue保持一致：收起时手柄贴到窗口右边缘，展开时贴回目录左侧，状态存 localStorage，刷新后记住。收起后正文会回收预留的槽位、恢复原宽。2. 显示宽度从 1440px 降到 960px
主题（vuepress-theme-hope）要窗口 ≥1440px 才把目录放到正文右侧，更窄就收成正文上方的折叠条。这里复用主题已有的桌面断点 960px（左侧栏出现的那条线），把目录做成固定在右侧的浮窗：
.vp-page预留13.5rem右内边距，保证不遮挡正文、也不出横向滚动条。注意这里不能用「收窄
--content-width」来腾地方：正文在剩余空间里是居中的，一收窄就左右对半分，右侧反而没让出来（实测会压到正文约 97px）。≥1440px 仍走主题原本的绝对定位逻辑，两条规则在 1439/1440 处窗口宽度连续，没有跳变。
3. 判断「页面有没有目录」
主题的
has-toc类在没有小标题的页面也会打上（实测/overview/hello-world.html不渲染#toc，但容器上仍有has-toc），直接拿它判断会白留一条空槽、还渲染出一个点了没反应的手柄。改成以#toc是否真的渲染出来为准，并据此挂toc-panel-desktop类控制是否留槽位。实测
本地 dev server，窗口 1199px：
320→973，目录985→1177，留 12px 间隙，无遮挡、无横向滚动条display:none，右内边距归零、正文从 653 恢复到 860，手柄移到 1170已知取舍：960~1100px 这段正文会明显变窄（960px 窗口下约 344px）。如果不合适，把媒体查询下界从
960px抬高即可。