✨ feat(link): 连接器页全面对齐 wanta Connections - #43
Conversation
link 页面全面对齐 wanta Connections 的设计：Tabs→Split-view 双栏、 详情弹窗改右侧面板、移除运行记录 UI(保留数据层)、品牌 logo 分层 (lobehub 扩展 + simple-icons 新增)。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
11 个任务：logo 分层链、UI 原语、ProviderCard/Toolbar/Catalog、 ConnectDialog/AccountsList/DetailPane、LinkView Split-view 重写、 导航图标、视觉验收。含 self-review(修正详情面板/弹窗解耦 bug)。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- cardHeight 128→68 对齐 wanta 紧凑行 - 128px 大卡片重写为 68px 列表行（icon+标题+描述+状态点） - 状态光晕圆点：绿=已连接 黄=需处理 - 选中态左装饰条 + accent-soft 背景 - 新增 needsAttention/selected 可选 prop（向后兼容现有 LinkView 调用） Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
review Important #1：brief 模板遗漏显式高度，卡片内容仅撑 ~56px， 而 cardHeight=68 驱动 useVirtualizer estimateSize(68+12=80)/行， 两者不一致导致 ~12px 视觉间隙。加 h-[68px] 对齐（与原版 h-[128px] +cardHeight=128 同构）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Task 6 机械迁移：从 LinkView.tsx 内联的 ProviderDialog 抽出三处独立单元， 业务逻辑逐字不变。原 ProviderDialog 暂保留，Task 9 再删除。 - lib/link-auth.ts: credentialFields + authLabel（签名不变） - components/link/secret-field.tsx: SecretField（签名不变） - components/link/LinkConnectDialog.tsx: 原 ProviderDialog 函数体原样迁入， 仅改函数名与 import 来源；DetailPreview 一并迁入为局部函数 （actions 预览自包含） - 保留不变量：OAuth 1500ms 轮询（getLinkOAuthStatus → authorized→onSaved）、 save() oauth2/凭据双分支、cancelLinkOAuth、actions 列表（getLinkAction） Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
link 模块新组件误用未定义的 --lume-text-1/2/3，var(--undefined) 解析为 inherit 导致标题/正文/弱化文本同色。改用 index.css 已定义的 --text-1/2/3 别名（映射到 canonical --lume-text-primary/secondary/muted）。7 文件共 18 处。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
![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: 44835feca1
ℹ️ 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".
| provider={selected} | ||
| connections={connections.filter((c) => c.service === selected.service)} | ||
| oauthConfig={oauthConfigs.find((o) => o.service === selected.service)} | ||
| onConnect={() => setConnectOpen(true)} |
There was a problem hiding this comment.
After a user reconnects an existing account such as work and closes or completes the dialog, selectedConnectionName remains work; clicking the detail pane's “添加连接” action only reopens the dialog, so saving issues an upsert for work rather than starting with default or a new name and can overwrite that account's credentials. Reset the name when handling this add/connect action.
Useful? React with 👍 / 👎.
| <Button | ||
| variant="ghost" | ||
| className="lume-panel flex h-[128px] flex-col items-start justify-start overflow-hidden p-4 text-left transition-colors hover:bg-muted/40" | ||
| <button |
There was a problem hiding this comment.
This replaces the existing shared Button with a raw <button> and hand-builds its complete border, hover, focus, and selected styling in a business component. That bypasses the project's required global UI primitive and its shared interaction/accessibility behavior; render the card through apps/web/src/components/ui/button.tsx with the necessary layout overrides instead.
AGENTS.md reference: AGENTS.md:L10-L10
Useful? React with 👍 / 👎.
2 participants
概述
将连接器页（
apps/web/src/components/link/）的展示全面对齐同源上游 wanta 的Connections页：布局、图标、配置控件、状态指示、品牌 logo。主要改动
ProviderDialog→ 右侧内联面板（带滑入动画）。connectOpen解耦：selected控面板、connectOpen独立控凭据弹窗。lobehub(扩) → simple-icons → iconUrl → 首字母。simple-icons 走构建期生成的lib/generated/link-icons.ts（service→{path,hex}，204 条，控制 bundle）。> 注意：OpenConnector v1.3.3 本身零 logo（品牌版权），wanta 的 logo 靠云端后端注入、Lume 本地后端接不上，故靠 lobehub+simple-icons 自建覆盖。PlugZap→Plug（对齐 wanta）。LinkView.tsx852→179 行，拆出LinkCatalog/LinkToolbar/ProviderCard(重写)/LinkDetailPane/LinkAccountsList/LinkConnectDialog/secret-field/link-auth/SimpleIconGlyph+ UI 原语toggle-group/search-field。设计与计划
docs/superpowers/specs/2026-08-10-link-view-wanta-parity-design.mddocs/superpowers/plans/2026-08-10-link-view-wanta-parity.md验证
bun run --filter @lume/web typecheck绿apps/web全量单测绿（含 logo 四档链/归一化测试）--lume-text-N不存在 token→--text-N，18 处）已修并 re-review 闭环代码 review 看不到运行时外观（token Critical 就是 typecheck 全绿却实际失效的例证）。请在 review 时跑 app 肉眼对照 wanta：左栏紧凑卡片+状态光晕点、工具栏筛选、右栏详情滑入、品牌 logo（github/openai 走 lobehub、slack/stripe 走 simple-icons、其余首字母）。视觉问题在此分支继续改。
Follow-ups（已记入 memory，非本 PR 范围）
动态分类溢出菜单；
needsAttention信号源（当前恒 false）；若干 post-merge minor（见 worktree ledger）。🤖 Generated with Claude Code