Skip to content

fix(editor): 居中工具栏下拉菜单的图标与文字 - #1898

Open
dvd233 wants to merge 1 commit into
Tencent:devfrom
dvd233:fix/toolbar-icon-alignment
Open

dvd233 wants to merge 1 commit into
Tencent:devfrom
dvd233:fix/toolbar-icon-alignment

Conversation

@dvd233

@dvd233 dvd233 commented Oct 1, 2026

Copy link
Copy Markdown
Contributor

Closes #1876

问题与修改

工具栏下拉菜单把字体图标与文字按 inline baseline 对齐,字体度量及文字换行会影响它们的垂直位置。将菜单项改为 flex 居中,并让字体图标内部居中、不收缩;保留原尺寸、间距、菜单点击逻辑和其他图标类型。新增 patch changeset 与编译后 CSS 的结构回归。

实际 examples/index.html 验证了标题、插入菜单,以及点击“二级标题”更新 Markdown。以当前 dev 原样式作对照,在 Windows Chromium 中测量 Arial、Times New Roman、Segoe UI、serif、monospace × 12/14/20px × 五行标题:75 组的中心最大偏差从 14.66px(包含换行情形)降到 0.88px,未发生横向溢出。12/14px 未换行组的原最大偏差为 2px。测量比较的是图标盒和文本 Range,不能据此声称所有字体字形的光学中心完全一致。

验证

  • yarn lint:0 errors;已有第三方示例共 3,469 warnings。
  • yarn typecheck:核心与小程序通过。
  • yarn test:核心 129 files / 2,223 tests、小程序 2 files / 23 tests 全通过。
  • yarn build:全部 workspace 构建通过,包括核心、小程序、demo、客户端和 VS Code 插件。
  • vp run -F cherry-markdown test:artifacts:6 passed / 1 failed。失败是 ES5 检查把 Windows 反斜杠绝对路径当 glob,报“Did not find any files”。相同真实 UMD 产物用正斜杠绝对路径和相对路径直接运行 ES-Check 均通过;没有修改检查脚本或跳过断言。
  • git diff --check 通过;构建改写的客户端版本文件已恢复,不包含构建产物或无关版本变化。
  • 真实示例浏览器控制台 0 errors;默认字体修改前后已截图检查。截图/几何依据来自实际页面与实际主线 SCSS,未合成替代 UI。

macOS 原生 Chrome、Windows Edge、屏幕阅读器和自定义图片/SVG 图标尚未验证;本次证据限定为 Windows Chromium 和上述真实菜单。菜单 DOM 内容及顺序未改变。

复核与贡献边界

从最新 dev 的 d9cbd13ba7bb25bddc83f28acf785bff72904cf9 准备,Issue 当前 assigned to dvd233。已检查 Issue timeline、问题关键词及全部开放 PR changed-files:#1829 是此前已合并的 inline 对齐方案;#1673 是 design-token 重构,未提供本项 flex 修复;#1840 的 MenuBase 改动是 Milkdown 桥接,不覆盖本问题。

本 PR 使用了 AI 辅助实现、自动代码审核和验证,作者为 dvd233。

@changeset-bot

changeset-bot Bot commented Oct 1, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 17c65d5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
cherry-markdown Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

工具栏图标和文字没有对齐

1 participant