feat(markdown-editor): 表情面板支持插入论坛表情 - #69
Open
shellRaining wants to merge 3 commits into
Open
Conversation
shellRaining
force-pushed
the
feature/markdown-editor-emoji
branch
from
August 4, 2026 16:08
7c9f171 to
49c0cb6
Compare
shellRaining
force-pushed
the
feature/markdown-editor-emoji
branch
from
August 4, 2026 16:15
49c0cb6 to
5efbd50
Compare
- topBar 新增表情按钮，弹出分类表情面板（CC98 / AC娘 / 麻将脸 / 贴吧 / 雀魂 / 经典） - 点击表情在光标处插入 Markdown 图片，与 UBB→Markdown 迁移输出一致 - 表情枚举复用 packages/ubb 的 resolveUbbEmotionTag 规则并校验 - 所见即所得：插入面板当前主题版本（暗色插入 ac-dark），渲染端双向适配 ac/ac-dark - 面板为右上角弹出的小框，带动画；格子尺寸沿用原 UBB 编辑器习惯 - 新增 emoji-data 与渲染端单测
shellRaining
force-pushed
the
feature/markdown-editor-emoji
branch
from
August 4, 2026 16:22
5efbd50 to
0bc7f7a
Compare
表情的合法编号区间此前在 packages/ubb 和编辑器表情面板各存一份，面板还要 把拼出的 tag 反解一遍来校验。现在区间集中在 emotion.ts 的 FAMILY_SPECS， 对外暴露 listUbbEmotions、UBB_EMOTION_FAMILIES 和 ubbEmotionDisplayName， to-markdown 的 alt 文案也改用同一函数。 - emoji-data.ts 只保留 UI 配置：tab 顺序、文案、格子边长 - 麻将脸的三类直接作为三个 tab，去掉先合并再 filter 的派生结构 - 点击外部关闭改用 VueUse 的 onClickOutside，删掉手写 pointerdown 闩锁 - 测试改为守两个契约：面板分类与 ubb 权威列表一致、AC 娘明暗资源解析
补齐简化重构后的方案、验证与决策记录，撤销"表情数据放 website 侧"的 原非目标，计划移入 completed/ 并同步索引。
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.
背景
Markdown 编辑器（Milkdown Crepe）此前没有输入论坛表情的入口。本次在编辑器工具栏新增表情按钮，弹出分类表情面板，点击表情即在光标处插入标准 Markdown 图片，插入结果与 UBB→Markdown 迁移输出一致（如
）。顺带把表情数据的所有权理顺：表情编号区间原本只存在于
packages/ubb的解析器里，面板要用就得再抄一份，因此改为由 ubb 直接导出表情目录，前端只描述 UI 呈现。改动
packages/ubb/src/emotion.ts：编号区间集中为FAMILY_SPECS，新增导出listUbbEmotions(family)（按分类列出全部表情描述符）、UBB_EMOTION_FAMILIES、ubbEmotionDisplayName、UbbEmotionFamily。八个分类共 599 个表情：经典 92 / AC娘 149 / 雀魂 54 / CC98 37 / 贴吧 33 / 麻将动物 16 / 麻将卡通 10 / 麻将脸 208。packages/ubb/src/to-markdown.ts：删掉内部的emotionMarkdownAltswitch，改调ubbEmotionDisplayName，表情展示名从此单一来源。apps/website/src/components/markdown-editor/emoji-data.ts（新增，36 行）：只放面板 UI 配置（tab 顺序、tab 文案、格子边长）、表情按钮图标 SVG（取自heroicons:face-smile-solid）和resolveEmotionDisplaySrc。apps/website/src/components/markdown-editor/EmojiPanel.vue（新增）：分类 tab + 表情网格，右上角弹出小框带动画；AC 娘在暗色模式展示ac-dark资源；格子尺寸按各分类图片实际尺寸取。麻将脸的动物 / 卡通 / 脸直接作为三个 tab，面板只有一条渲染路径。apps/website/src/components/MarkdownEditor.vue：通过 CrepetopBar的buildTopBar钩子追加表情按钮；点击表情在光标处插入 image 节点（所见即所得：插入面板当前主题版本，暗色模式插入ac-dark）；面板关闭用 VueUse 的onClickOutside，按钮点击可开可关。apps/website/src/components/rich-content/markdown/：Markdown 渲染端对 AC 娘图片做双向主题适配（暗色ac→ac-dark、亮色ac-dark→ac），与 UBB 渲染端UbbEmotion.vue规则一致，任何主题下内容都显示正确。packages/ubb/tests/emotion.test.ts（新增）守listUbbEmotions与resolveUbbEmotionTag的一致性；apps/website/tests/markdown-editor-emoji.test.ts守面板分类列表与 ubb 权威列表一致（ubb 新增分类即失败）和 AC 娘明暗资源解析；content-renderer.test.ts补渲染端主题适配。验证
vp run ready全绿：format + lint + typecheck +check:colors+knip+vp run -r build+vp run -r test（website 296 / ubb 190 / api 21 用例）。并自动关闭面板；按钮二次点击关闭、点击面板外关闭；暗色模式下 AC 娘格子与插入结果均为/ac-dark/01.png。亮色模式面板（默认 CC98 分类）：
暗色模式 AC 娘（使用
ac-dark资源）：关联
docs/exec-plans/completed/2026-08-04-markdown-editor-emoji.md（本 PR 内归档，含决策记录与走查历史）