Editor UI polish: toolbar mode toggle + immersive stats#116
Merged
Conversation
源码/实时切换按钮原是带边框的胶囊控件，与 md-editor 原生平铺图标 按钮视觉割裂： - 去掉容器边框和 overflow:hidden，改为无边框 inline-flex 平铺。 - 按钮圆角改 radius.xs（与原生按钮一致），hover/active 用 accentSoft 背景，与原生 toolbar button:hover 完全一致。 - 给两个按钮补 title 属性，与原生命令按钮的浏览器原生 tooltip 行为 对齐（之前只有 aria-label 无 title，hover 无提示）。
沉浸模式统计条目与写作台编辑区对齐：
- 标题输入框旁补字符限制 {titleCount}/{TITLE_LIMIT}（超限标红），并补
IME 合成事件处理（之前沉浸标题输入无 composition 处理，拼音临时字符
会计入统计）。
- footer 补全：字符 / CONTENT_LIMIT（超限标红）· 段落 · 标题数 · 阅读
时间，复用 statsValue/statsUnit/statsDot 样式，与写作台底部统计栏
完全一致。
rogerdigital
changed the title
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.
Changes
Align toolbar mode toggle style
The 源码/实时 (source/live) toggle was a bordered pill control that visually clashed with the md-editor native flat icon buttons.
overflow:hidden; switched to borderlessinline-flexflat layout.radius.xs(matching native buttons); hover/active useaccentSoftbackground, identical to native toolbar button:hover.titleattributes to both buttons to match the native command buttons' browser tooltip behavior (previously only hadaria-labelwithouttitle, so hover showed nothing).Align immersive mode stats
Immersive mode stats now match the writing desk editor area exactly.
{titleCount}/{TITLE_LIMIT}next to the title input (red when over), plus IME composition event handling (previously missing in immersive title input, so pinyin intermediate chars were counted)./ CONTENT_LIMIT(red when over) · paragraphs · headings · read time, reusing thestatsValue/statsUnit/statsDotstyles, consistent with the editor bottom stats bar.Verification
pnpm buildpassesOut of scope
The immersive mode top bar is intentionally kept clean, without 源码/实时 or 保存 buttons — immersive mode is a focused-writing context where a live split view conflicts with focus, and autosave provides a fallback.