Skip to content

feat(artifact): 导出入口由带边框文字按钮改为无边框图标 - #277

Open
qwq1999 wants to merge 1 commit into
omdsh-dev:mainfrom
qwq1999:feat/issue-274-export-icon
Open

qwq1999 wants to merge 1 commit into
omdsh-dev:mainfrom
qwq1999:feat/issue-274-export-icon

Conversation

@qwq1999

@qwq1999 qwq1999 commented Oct 10, 2026

Copy link
Copy Markdown

背景

#274:完成态 GenUI 区块右下角的导出入口是回答区里唯一的文字加描边控件,与宿主自己的无边框图标按钮(复制、点赞、分享、用量…)不一致;一条回答里有多个围栏时,还会重复出现多个文字按钮。

改动

  • 入口改无边框图标:14px 描边字形(托盘 + 下箭头)表达“导出为文件”,去掉 1px 描边与底色;可访问名与悬停提示仍是「导出」/「Export」(aria-label + title 的组合与项目里 panelTpl / panelToggle 一致,旧实现靠按钮文字提供可访问名)。
  • 形状与反馈复用项目既有规则,没有新造样式:
    • 形状照 chrome 图标按钮 .panelClose:26px 命中区、6px 圆角、透明底、无边框;
    • 悬浮与键盘聚焦用区块内那条配方(--dsl-g-hover 的写法:主题文字色 4% 淡洗 + 文字色升到 label-primary),不再用只对深色主题成立的 rgba(255,255,255,…);
    • 聚焦轮廓与 .panelClose 一致(1px 主色 + outline-offset: 1px)。
  • 菜单行为不变:菜单里的「HTML」「GenUI JSON」两项的文案、位置、禁用条件(含自定义组件时禁用 HTML)与下载行为都没有动;导出入口仍然只在围栏落定后出现。
  • 顺带一行兜底:.item:hover 原本直接吃 --dsw-alias-fill-hover,宿主或第三方主题(如浅色 dream-skin)没有定义该 token 时悬浮没有任何反馈;现在写成 var(--dsw-alias-fill-hover, <同款 4% 淡洗>)——有定义时行为与当前完全一致,只在缺失时兜底。你提过这项建议单独跟踪;如果更希望拆成独立 PR,我可以把它从这次改动里去掉。

验证

  • vitest run tests/genui-export-ui.spec.tsx → 6/6 通过,其中新增一条图标契约用例:入口含 svg、没有文字节点、aria-label 与 title 仍为「导出」;单围栏 / 工具卡 / 面板 / 模板预览的既有用例不变。
  • tsc -p tsconfig.json --noEmit 通过。
  • 本机全量 vitest run:1009 passed / 17 failed。17 条失败全部是本机 Windows 环境的既有失败,与本次改动无关——tests/install-script.spec.ts 11 条需要 POSIX sh;tests/skill-md.spec.ts、tests/genui-skill-examples.spec.ts、tests/plugin-genui.spec.ts 共 6 条要求 SKILL.md 为 LF,而本机 core.autocrlf=true。改动只碰客户端导出 UI 的 3 个文件 + 1 个测试,不涉及这些路径,Linux CI 上会完整跑 pnpm run check。

影响

纯客户端渲染层改动(src/client/artifact/ArtifactExport.module.css、src/client/artifact/ExportableGenuiBlock.tsx):导出产物格式、embed 公开 API、宿主兼容性与打包产物均不变。

Closes #274

完成态 GenUI 右下角的导出入口原本是回答区里唯一的文字加描边控件,与宿主自己的
无边框图标按钮(复制、点赞、分享等)不一致;一条回答里有多个围栏时还会重复出现
多个同样的文字按钮。现改为 14px 描边图标(托盘 + 下箭头)表达“导出为文件”,
可访问名与悬停提示仍是「导出」/「Export」。

形状与反馈复用项目既有规则,没有新造样式:

- 形状照 chrome 图标按钮 .panelClose:26px 命中区、6px 圆角、透明底、无边框
- 悬浮与键盘聚焦用区块内那条配方(--dsl-g-hover 的 4% 文字色淡洗 + 文字色升到
  label-primary),不再依赖只对深色主题成立的 rgba(255,255,255,…)
- 聚焦轮廓与 .panelClose 一致

菜单里的「HTML」与「GenUI JSON」两项文案与行为不变。菜单项原本直接吃
--dsw-alias-fill-hover,宿主或第三方主题没有定义该 token 时悬浮没有任何反馈,
现在回退到同一条 4% 文字色淡洗。

tests/genui-export-ui.spec.tsx 增加图标契约用例:入口含 svg、没有文字节点、
aria-label 与 title 仍为「导出」;单围栏、工具卡、面板与模板预览的既有用例不变。

Closes omdsh-dev#274
@wang-kaopu

Copy link
Copy Markdown
Collaborator

需要解决一下冲突 <3

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.

[Feature] 导出入口建议改为无边框 SVG 图标:文字按钮与宿主图标风格不统一

2 participants