Repository navigation
fix(editor): 居中工具栏下拉菜单的图标与文字 - #1898
Conversation
🦋 Changeset detectedLatest commit: 409fd08 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
cherry-markdown
@cherry-markdown/miniprogram
commit: |
🔌 VSCode Plugin 构建产物
|
🌐 Playground 预览
|
感谢贡献，不过尝试了下，在Windows下，Edge和Chrome 浏览器下依然没有对齐。。。 |
|
@sunsonliu 感谢复核，已正常推送补充修复 44cb7c3。 感谢截图，我在 Windows Chrome 上确认了“对齐”菜单中图标字形仍比文字高。此前只检查 flex 属性、图标盒与文本 Range 的中心，确实漏掉了实际字形的位置。 剩余偏移来自生成的 ch-icon 字体：hhea ascent/descent 是 1000/0，但 OS/2 的 typo 度量是 812/-212、Windows 度量是 812/212。在当前 Windows Chrome 中，14px 图标的实际字形 ascent/descent 是14/0px，字体行框却是11/3px；所以即使 flex 已生效，字形仍偏上。补充修复在字体生成器中统一这两套度量，保留菜单 DOM，没有增加固定像素位移。 验证环境为真实 Windows Chrome 155.0.8059.40、浏览器100%缩放、DPR1.75，中文实际字体 Microsoft YaHei。在真实“对齐”菜单七项中，可见像素边界中心差由约2.5–3.5 CSS px降到±0.3px以内；这是截图像素边界测量，不代表所有字形的主观视觉中心都相同。也检查了中英文标题/插入菜单、英文换行项，并实际点击标题和居中菜单确认 Markdown 更新。 新增回归运行实际生成器并检查 TTF/WOFF/WOFF2/EOT 的字体度量；精确原 head 17c65d5 上失败，修复后通过。全部121个映射图标的轮廓、宽度和边界未变；重复生成两次结果语义一致；真实 Chrome 在14/28px同一 alphabetic baseline 的全部图标逐像素绘制对照没有变化。 本地核心130files/2224tests、小程序2files/23tests、两包类型检查通过；lint为0errors，既有3469warnings；全部18项workspace构建通过。构建产物检查仍为6pass/1fail：原 ES5 检查在 Windows 把反斜杠路径当glob，精确原head的同一检查也失败；相同基线/修复UMD使用正斜杠路径直接ES-Check通过，没有将替代命令当作原测试通过。 Windows Edge 和 macOS Chrome 目前没有完成真实验证。当前控制接口只支持本机Chrome，虽然EdgeCore已安装，Edge不在可控制浏览器列表；也没有macOS环境。字体度量影响全部ch-icon使用处，因此还需要在这两个平台复核菜单及其他图标场景的对齐和裁切，不能声称全平台已解决。请在 PR 新版本构建完成后再帮忙确认原截图场景，谢谢。 今天再次运行字体度量与原 CSS 回归，2 files / 2 tests 通过。目前该精确 SHA 对应的7项 GitHub Actions 均显示 |
3 participants
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通过；构建改写的客户端版本文件已恢复，不包含构建产物或无关版本变化。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。