Skip to content

refactor: 通用 Modal 壳 + SettingsModal 拆分 + PR 评审面板归入 features/pr/#75

Merged
huhamhire merged 14 commits into
devfrom
refactor/settings-modal
Jun 18, 2026
Merged

refactor: 通用 Modal 壳 + SettingsModal 拆分 + PR 评审面板归入 features/pr/#75
huhamhire merged 14 commits into
devfrom
refactor/settings-modal

Conversation

@huhamhire

Copy link
Copy Markdown
Owner

背景

延续 milestone「代码质量重构」。SettingsModal.tsx 单文件 1222 行(主组件 773 行内联 9 个 section + 共享草稿/保存状态机 + 3 个嵌套编辑器),且各处模态脚手架手写重复。

改动(两个 commit)

1. 通用 Modal 壳(全局) — 新增 common/Modal.tsx:统一 backdrop(点外关闭 + 嵌套防冒泡)、dialog 容器、可选 header(标题 + 关闭键 icon/text)、modal-body 包裹、可选 footer 区,支持 portal / nested / size 变体。ConfirmModalRulePreviewModal 改用之。

2. SettingsModal 拆分 — 1222 → 容器 175 行:

features/settings/
├── SettingsModal.tsx          # 容器:Modal 壳 + 装配分区 + 底栏保存
├── hooks/useSettingsDraft.ts  # 草稿 → 整体保存状态机(语义化 state/setter)
├── sections/                  # 9 个独立分区,可独立维护
│   ├── Language · Connections · Poller · Llm · Proxy
│   └── AgentDir · WorkDir · CacheDir · Runtime
├── editors/                   # 连接 / 代理 / LLM 编辑器弹窗(用 Modal 壳)
├── elements/UpdateCheckButton # 小部件
└── utils.ts                   # formatBytes + 轮询档位

验证

  • lint--max-warnings=0)/ typecheck / build 全绿。
  • 纯结构拆分,逻辑逐字保留;对外接口(SettingsModal props)与界面 / 交互行为不变。

🤖 Generated with Claude Code

huhamhire and others added 2 commits June 18, 2026 14:09
新增 common/Modal.tsx 统一模态脚手架:backdrop(点外关闭 + 嵌套防冒泡)、
dialog 容器、可选 header(标题 + 关闭键 icon/text)、modal-body 包裹、可选
footer 区、portal / nested / size 变体。键盘交互仍由调用方自管。

ConfirmModal、RulePreviewModal 改用 Modal 壳,消除手写 backdrop/容器/header
重复。视觉与行为不变。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1222 行单文件 SettingsModal 按职责拆开(容器 175 行):
- hooks/useSettingsDraft —— 草稿 → 整体保存状态机(连接 / LLM / 代理 / 轮询 /
  目录 / 语言),暴露各分区所需的语义化 state 与 setter(编辑即标脏)
- sections/ —— 九个独立分区(语言 / 连接 / 轮询 / LLM / 代理 / Agent 目录 /
  工作目录 / 缓存目录 / 运行环境),各自成文件、可独立维护
- editors/ —— 连接 / 代理 / LLM 编辑器弹窗,统一改用 common/Modal 壳
- elements/UpdateCheckButton —— 「检查更新」小部件
- utils —— formatBytes + 轮询档位(POLLER_TIERS / nearestPollerIdx)

容器只做布局编排 + 装配分区 + 底栏保存。对外接口与界面行为不变。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@qodo-code-review

Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

@huhamhire huhamhire added the enhancement New feature or request label Jun 18, 2026
@huhamhire huhamhire added this to the 代码质量重构 milestone Jun 18, 2026
diff / comments / drafts 仅在 PR 详情视图内渲染,属 PR 作用域子领域,迁入
features/pr/ 下,使 pr/ 成为「PR 评审工作区」的统一归属(与 PrItem /
PrInfoView / CommitsPanel 同处)。chat / onboarding / settings 仍在 features/
顶层。纯目录迁移 + import 路径改写(git 识别为 rename),无逻辑/界面变更。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@huhamhire huhamhire changed the title refactor(settings): 通用 Modal 壳 + SettingsModal 按分区/编辑器/hook 拆分 refactor: 通用 Modal 壳 + SettingsModal 拆分 + PR 评审面板归入 features/pr/ Jun 18, 2026
@huhamhire

Copy link
Copy Markdown
Owner Author

追加第 3 个 commit(94c14b2):把 PR 作用域的评审面板 diff / comments / drafts 收归 features/pr/ 之下,使 pr/ 成为「PR 评审工作区」的统一归属。chat / onboarding / settings 仍在 features/ 顶层。纯目录迁移 + import 改写,typecheck / lint / build 全绿。

features/
├── pr/   { PrItem · PrInfoView · CommitsPanel · diff/ · comments/ · drafts/ }
├── chat/ · onboarding/ · settings/

huhamhire and others added 11 commits June 18, 2026 14:52
StatusBar 内部杂乱、各 chip 自带逻辑、无公共 chip 组件,重构:
- 新增 common/StatusChip 通用 chip 壳(span/button + ok/err 色调 + 专属类名)
- 各业务 chip 按归属下沉到所属 feature 的 statusbar/:
  · settings: LlmChip · UserChip
  · chat: PrAgentActiveChip(+QueuePopover) · AutopilotChip
  · pr: LastSyncChip · RepoSyncChip · PrsCountChip
- pr-agent 运行时 chip 与更新 chip(app 运行时级)留 layout
- StatusBar 退化为薄壳(610→146 行),只做组合与布局
- 时长 / 相对时间格式化统一抽到 utils/time(formatElapsed 带 compact
  选项、formatRelative),消除与 chat 的重复实现(DRY)

无逻辑 / 界面变更。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
layout/MainPane 原含整个 PR 评审工作区(头部 / tab 栏 / tab 内容 + 全部 PR
详情状态),与「布局壳」职责混淆。剥离:
- features/pr/PrPanel —— PR 工作区容器:tab / diff 视图选项 / 评论 + 提交计数 /
  草稿池 / 发布弹窗状态 + tab 内容装配
- features/pr/PrHeader —— 标题 / 元信息 + 动作区(浏览器 / 提交评论 / 合并 / 审批)
- features/pr/PrTabs —— tab 栏 + diff 工具条(空白 / blame / 并排-内联)
- layout/MainPane 退化为薄壳(503→96 行):仅主区 + 「未选 PR」空态,选中时挂 PrPanel

对外 props 接口不变,纯结构剥离,无逻辑/界面变更。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
MainPane 原持有 pr 及一众 PR 专属 props、空态分支、「面板 vs 空态」决策,
作为 layout 壳却深度感知 PR 业务,不利于后续扩展非 PR 的主区内容。改为:
- layout/MainPane —— 仅提供语义化 <main> 槽位(children),不感知任何领域
- features/pr/PrEmpty —— PR 工作区空态(未选 PR / 无连接引导)下沉到 pr 领域
- 由 App(组合根)决定槽位内容:selected ? <PrPanel> : <PrEmpty>

后续要加非 PR 主区业务,只需往 MainPane 槽里塞别的面板,无需改 layout。
无逻辑/界面变更。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
features/pr/ 根目录混了工作区外壳、tab 导航、各 tab 内容、列表项、状态栏 chip。
把 tab 相关(PrTabs 导航 + diff / comments / drafts / CommitsPanel / PrInfoView
五个 tab 内容)收进 pr/tabs/ 子目录,根目录只剩工作区外壳(PrPanel / PrHeader /
PrEmpty / PrItem)+ statusbar/。纯目录迁移 + import 改写,无逻辑/界面变更。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
App 主入口承载了大量 PR 领域业务(prs 列表 + 选中、reloadPrs / triggerRefresh、
审批决断 setSelectedPrStatus、合并 mergeSelectedPr、focus 刷新),与「组合根」职责
混淆。抽到 features/pr/hooks/usePullRequests:领域内聚地管列表生命周期 + 选中态 +
详情动作;App 仅注入连接摘要与就绪态,bootstrap / 向导完成时经 setPrs 注入初始列表、
poll tick 时调 reloadPrs。无逻辑/界面变更。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
把分散的多条结构重构条目(ChatPane / SettingsModal / 目录重组 / Modal /
StatusBar / MainPane …)收敛为一条主线描述,次要整理一笔带过,保持简洁。
关键点以 tasklist 形式落到 milestone「代码质量重构」描述。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
createSplash + resolveSplashLogo(自包含、不耦合 index 模块状态)从 640 行的
main/index.ts 抽到 main/splash.ts,index 只 import createSplash。启动流程与
界面不变。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
styles/ 下扁平的 17 个 scss 分区按职责归并(比 components 粗一档、不再下分领域):
全局基础(_tokens / base / markdown)留根,modal → common/,应用骨架(titlebar /
statusbar / sidebar / main-pane)→ layout/,其余领域样式 → features/。各分区对
tokens 的引用与 App.scss 聚合路径同步改写。无样式产物变化。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
renderer/src 根目录的三个第三方渲染/编辑器集成初始化文件(monaco-setup /
markdown / editor-font)收进 lib/,根目录只剩入口与 api/errors。纯文件位置调整
+ import 路径改写,无行为变更。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
App.tsx(465→217 行)只剩「hook 调用 + 少量派生 + 渲染」。抽出 hooks/:
- useBootstrap   启动加载 / 语言 / poll·focus 刷新 / 向导完成 / 连接热生效(持 boot)
- usePanelLayout 左右两栏宽度+折叠+持久化
- useUpdateNotice 版本更新提示(水合/订阅/调试)
- useToast       操作级 toast + 自动消失
- useAppStores   三个全局 store 接线
- useExternalLinkGuard 全局外链跳转防护
usePullRequests 去掉 boot 耦合(selectedConn 派生回 App、focus 刷新移入 useBootstrap)。
无逻辑/界面变更。

CHANGELOG 前端重构条目改为「标题 + 嵌套子列表」呈现重点。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ding)

为三个 feature 域各加 index.ts,暴露跨域公共 API(chat 已有先例):
- pr: PrPanel / PrEmpty / PrItem / usePullRequests
- settings: SettingsModal + ConnectionForm / LlmProfileForm 等表单(onboarding 复用)
- onboarding: OnboardingWizard + OnboardingResult
外部消费者(App / Sidebar / StatusBar 邻近、onboarding→settings、useBootstrap)改走 barrel。
纪律:域内模块互引仍走相对路径、statusbar chip 走子路径,避免循环依赖 / barrel 杂糅。
common / layout 不加 barrel(扁平基础件 / 仅 App 引,收益低)。无行为变更。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@huhamhire huhamhire merged commit cba5a57 into dev Jun 18, 2026
1 check passed
@huhamhire huhamhire deleted the refactor/settings-modal branch June 18, 2026 07:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant