Repository navigation
feat: 新增 CodePanel 代码块与 CopyButton 复制按钮 - #36
Conversation
把宿主聊天代码块的外框与复制按钮收进组件库，供聊天代码块和 「连接电脑」对话框共用： - CodePanel：只读代码 + 复制按钮，menu-shell 圆角（与 SettingsSection / SurfaceCard 同档），width=fit|full，wrap 折行长命令 - CopyButton：宿主 copy-action-button 原样搬入，文案改为 props - ui-owners skill 登记 CodePanel
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
配套 Memoh PR：felinics/Memoh#1577（ |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 950fa9c2f3
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <template> | ||
| <div | ||
| data-slot="code-panel" | ||
| class="flex max-w-full items-start gap-1.5 overflow-hidden rounded-menu-shell border bg-card py-1 pl-3.5 pr-1.5" |
There was a problem hiding this comment.
When CodePanel is rendered in dark mode, the unconditional border bg-card retains a structural edge, unlike the other card-colored surfaces, producing the stacked chrome this shared owner is intended to eliminate. Compose surfaceEdgeClass(bordered) and expose the corresponding bordered option rather than owning the border locally.
AGENTS.md reference: AGENTS.md:L503-L510
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
已修（ccc5e30）。CodePanel 改为组合 surfaceEdgeClass，新增 bordered：嵌在弹窗这类卡片色表面内时保留边框，聊天代码块深色下无边框。
另外发现 markstream-vue 自带不分层的 .markstream-vue .border { border-width: 1px }，会在 Markdown 内把 dark:border-0 盖回去，所以 surfaceEdgeClass 改用等值的 border-1。实测聊天代码块深色 0px、对话框命令块 1px、设置页卡片 0px 不变。
| :copied-label="copiedLabel" | ||
| :failed-message="copyFailedMessage" | ||
| icon-class="size-3.5" | ||
| class="shrink-0 text-muted-foreground focus-visible:ring-0 hover:text-foreground" |
There was a problem hiding this comment.
For keyboard users who tab to this icon-only copy action, focus-visible:ring-0 cancels the base Button's only visible focus indicator. CopyButton is not one of the controls that deliberately suppresses focus styling, so remove this override and use the existing muted-tone API or shared interaction styling for the color change.
AGENTS.md reference: AGENTS.md:L371-L375
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
已修（ccc5e30）。去掉了 focus-visible:ring-0，Tab 到复制按钮时显示 Button 自带的焦点环。这个覆盖是从宿主原聊天代码块带过来的。
| iconClass?: string | ||
| }>(), { iconClass: 'size-4.5' }) |
There was a problem hiding this comment.
The generic 32px icon-sm button defaults its glyph to size-4.5 (18px), which is outside the shared 16/14/12px icon ladder, while the public free-text iconClass prop lets every caller invent another size; CodePanel already has to override it to 14px. Replace this escape hatch with an enumerated size mapped to the supported rungs and use the standard 16px default.
AGENTS.md reference: AGENTS.md:L590-L597
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
这条不改。iconClass 有意保留：同一个复制按钮在不同位置是不同的视觉层级，消息操作栏和旁边的重试、更多按钮统一为 18px，代码块里是 14px，不应该强制成一个枚举档位。默认值 size-4.5 等于宿主 #1497 原有的 size-[18px]，本 PR 只是原样搬入，不改变任何调用方的尺寸。
- CodePanel 改用 surfaceEdgeClass，新增 bordered 供嵌在卡片表面内时保留边框 - surfaceEdgeClass 改用 border-1，避免 markstream-vue 的 .border 规则在 markdown 内重新加回深色边框 - 去掉复制按钮的 focus-visible:ring-0，保留键盘焦点提示
* fix(web): 连接电脑对话框改用共享代码块，精简引导文案 - 命令块改用 @felinic/ui 新增的 CodePanel（wrap 折行），圆角与上方 SettingsSection 同档，复制按钮与聊天代码块一致 - 等待提示改为 CalloutBanner neutral，替换手写的灰点卡片 - 对话框说明、覆盖开关文案缩到一行，保留前置条件与操作引导 - 聊天代码块改用 CodePanel；copy-action-button 改为 CopyButton 的 i18n 适配层，删除两份重复图标 - 组件墙增加 CodePanel 示例；packages/ui 指向 CodePanel 提交 * fix(web): 连接电脑命令框保留边框，补全英日文重新复制引导 - 弹窗内 CodePanel 传 bordered，深色下仍与弹窗表面区分 - en/ja replaceDescription 明确要求开启后重新复制命令 - packages/ui 指向 ccc5e30 * chore(ui): packages/ui 指向 felinics/ui#36 合并提交 f69402a
Summary
新增两个组件，给「只读代码 + 复制」这一形状一个统一实现：
width="fit" | "full"：fit 贴合代码（聊天代码块），full 撑满一行（对话框里的命令）wrap：长的单行命令折行而不是横向滚动，带不可断的 key 也不会把宿主撑宽bordered：边框规则沿用surfaceEdgeClass，深色下默认无边框；嵌在另一层卡片色表面里（如对话框）时传bordered保留codeapps/web/src/pages/home/components/copy-action-button.vue（#1497 引入）原样搬入，包括复制后打勾的动效。按组件库的文案走 props 规则，改为label/copiedLabel/failedMessage三个 props；默认图标尺寸size-[18px]改为等值的size-4.5。surfaceEdgeClass由border改为等值的border-1：markstream-vue 自带不分层的.markstream-vue .border { border-width: 1px }，会在 Markdown 内把深色模式去掉的边框加回来。生成的 CSS 不变，其他使用它的卡片渲染结果不变skills/ui-owners/SKILL.md登记 CodePanel，避免再手写pre+ 绝对定位的复制按钮。起因：Memoh 「连接电脑」对话框里的命令块是手写的，圆角（10px）、复制按钮都和旁边的设置卡片（12px）、聊天代码块对不上；聊天代码块本身也只存在于宿主的聊天目录里，别处没法复用。
影响面
新增两个组件；现有组件只有
surfaceEdgeClass换了等值 class 名，渲染不变。配套 Memoh PR 把聊天代码块和「连接电脑」对话框改为使用这两个组件。Related
packages/ui指针指向本分支提交ccc5e30，本 PR 合并后需改指合并后的提交）Validation
vue-tsc --build通过（本地）scripts/check-ui-contract.mjs通过，无新增违规ccc5e30上实测：聊天代码块深色边框 0px（之前被 markstream 样式盖回 1px），对话框命令块深色 1px，设置页卡片深色 0px 不变Screenshots
聊天代码块（深色，左：之前 / 右：之后）
Human QA