Skip to content

feat(ui): Textarea 增加原位编辑与品牌色底选项,新增 InfoHint - #38

Open
qqqqqf-q wants to merge 4 commits into
mainfrom
feat/memoh-222-textarea-engage-info-hint
Open

qqqqqf-q wants to merge 4 commits into
mainfrom
feat/memoh-222-textarea-engage-info-hint

Conversation

@qqqqqf-q

@qqqqqf-q qqqqqf-q commented Oct 23, 2026 •

Copy link
Copy Markdown
Member

Summary

让聊天里「原位编辑提问」的输入框高亮和说明图标走组件库契约,不再由 Memoh 手写:

  • Textarea rest="bare":未聚焦时不画边框,原位编辑框在聚焦前与被替换的内容渲染得完全一样;聚焦和报错仍照常显示边框,悬停不改变任何东西。其余输入框保持默认 rest="edge"(静止时的淡细边)。
  • Textarea surface="brand-tint" + token --field-edge-brand-tint:声明输入框画在品牌色底上,激活边框改用这个 token:浅色为近黑(与 --field-edge-solid 相同,品牌色边框在浅色淡紫底上发闷),深色为 --brand(中性灰边会糊在深紫底上)。静止与报错状态不变,底色仍由调用方负责。
  • InfoHint:只负责解释的 ⓘ,灰色,不是按钮,Tooltip 默认向上。悬停、键盘聚焦和触屏轻点都能打开(reka Tooltip 本身忽略触屏,这里用受控 open 在轻点时切换);点别处、失焦或滚动关闭。图标 14px:细线圆圈在同样高度下看起来比实心文字小,所以比文字档(12px)高一档,以视觉上与旁边文字等高为准,而不是对齐大写字母高度。触控区域用 ::after 向外扩 6px,达到 26px。
  • 文档:AGENTS.md(交互模型里的两个例外、品牌色稀缺清单、InfoHint 一节);showcase(Textarea 增加 rest / surface 控件,surface 为 brand-tint 时垫一块 bg-brand-soft 便于对照;新增 InfoHint 规格);skills/ui-owners 登记 InfoHint。

起因:Memoh 把用户消息改成原位编辑(MEMOH-214),之前在 Memoh 侧用自定义紫色边框和手写 Tooltip 实现,不符合组件库契约。

影响面

默认行为不变:rest 默认 edge,surface 默认 plain,现有 Textarea 渲染不变;新 token 只在 surface="brand-tint" 时生效。InfoHint 是新组件,暂时只有 Memoh 的编辑行使用。

Related

Validation

  • vue-tsc --build:在 Memoh 仓库内(packages/ui 指向本分支)通过。单独的 ui worktree 中有 4 条 @memohai/icon/ui 没有导出 ErrorIcon 的报错,来自未改动的文件和那边的依赖版本,与本 PR 无关
  • 改动文件 eslint 无错误;Memoh scripts/check-ui-contract.mjs 通过
  • Memoh 本地开发环境中实际渲染(agent 用浏览器操作,不是 Human QA):浅色悬停/聚焦边框 oklch(0 0 0 / 0.78),深色 oklch(0.72 0.16 290)(即 --brand),静止状态不变;InfoHint 鼠标悬停和 Tab 聚焦都向上弹出,图标 12×12
  • 上述浏览器结果来自改动前的版本(悬停描边、12px ⓘ)。之后的 rest="bare"、ⓘ 14px 与触屏轻点打开只跑了 typecheck 和 eslint,尚未在浏览器或真机上看过,等 Human QA
  • showcase 页面未打开查看;未新增守卫检查(rest="bare" 的使用范围目前只靠文档约束)

Screenshots

浅色:聚焦时的编辑框与 InfoHint

浅色编辑框聚焦
InfoHint 向上弹出说明

以上截图来自旧版本(ⓘ 为 12px);悬停描边已删除,对应截图已移除。

Human QA

  • Human QA passed

- Textarea engage="hover":悬停也显示激活边框,仅用于外观与原内容一致的原位编辑框
- Textarea surface="brand-tint" 与 --field-edge-brand-tint:画在品牌色底上的输入框,激活边框浅色为近黑、深色为 --brand
- InfoHint:只负责解释的 12px ⓘ,非按钮、可键盘聚焦,Tooltip 默认向上
- AGENTS.md 与 showcase 同步记录

Refs: MEMOH-222
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 23, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-23T14:51:54.462095Z 7e452ba PR opened
ℹ️ 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" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@qqqqqf-q

Copy link
Copy Markdown
Member Author

配套 Memoh PR:felinics/Memoh#1665(packages/ui 指针指向本分支提交 7e452ba,本 PR 合并后需改指合并后的提交)。

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7e452bacc3

ℹ️ 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".

data-slot="info-hint"
tabindex="0"
role="img"
:aria-label="props.text"

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Avoid announcing the hint text twice

When a screen-reader user focuses this trigger, Reka's TooltipTrigger adds an aria-describedby reference to TooltipContent; assigning the identical text as aria-label therefore exposes the sentence as both the accessible name and description, which can cause it to be announced twice. Keep the required accessible name, but prevent the tooltip body from redundantly describing the trigger or provide separate label and explanation values.

AGENTS.md reference: AGENTS.md:L233-L234

Useful? React with 👍 / 👎.

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