Repository navigation
refactor: 设置卡片缩进归外壳、行节奏归列表 - #44
Merged
Merged
Conversation
卡片内的左右 16px 缩进原先写在每一行上（SettingsRow、ExpandableSettingsRow、 InlineLoadingRow card-row、ModelListRow 各自带 mx-4），卡片本身不留边。行一旦 放到卡片之外（例如弹窗正文）就多缩进一截；调用方用 mx-0 覆盖也不生效，因为 Tailwind v4 按样式表顺序而不是 class 顺序决定冲突结果。 职责重新划分： - SettingsSection 卡片以新 token --settings-inset（16px）统一提供左右留白； - 行节奏（行高、上下内边距、行间细线）由列表提供，规则写在 style.css 的 @layer components，按 [data-settings-list] [data-settings-row] 挂载； - 行只声明 data-settings-row，只排内容； - 新增 SettingsList：卡片之外的一组行，只提供行节奏； - 新增 SettingsBleed：卡片内需要贴边的内容（整行点击目标、表格、画布、 满宽分页条）以同一个 token 反向拉出。 同时修正 SettingsSection #actions：组件把工具区包成一个靠右的按钮组。原先 多个按钮会被 justify-between 摊开，无标题时单个按钮靠左。 文档同步：AGENTS.md 归属表与例外说明，ui-owners 的 SettingsRow 几何、新原语 与选型表，ui-patterns 的间距阶梯、分割线、折叠行示例与降级对照表。 Linear: MEMOH-269
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. |
2 of 6 tasks
- 行节奏对卡片内任意层级的行生效，不限于直接子元素。 - ModelListRow 的整行按钮经 SettingsBleed 贴边，只能放在设置卡片里。 - 宿主侧的转发文件已不存在，来源路径改为 formerly。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
设置卡片里的左右 16px 缩进原先写在每一行上：
SettingsRow、ExpandableSettingsRow、InlineLoadingRow card-row、ModelListRow各自带mx-4，卡片本身不留边。因此：mx-0覆盖也不生效。Tailwind v4 按样式表顺序而不是 class 顺序决定冲突结果，mx-0排在mx-4之前，会被静默覆盖。px-4，宿主页面里有约 30 处这样的写法。本 PR 按层重新划分职责：
SettingsSection）--settings-inset（16px）SettingsList）style.css的@layer components，按[data-settings-list] [data-settings-row]挂载SettingsRow等）data-settings-row，只排内容SettingsBleed）改动明细：
SettingsSection：卡片加px-(--settings-inset)和data-settings-list；#footer细线不再自带mx-4。SettingsSection #actions：组件把工具区包成一个靠右的gap-2按钮组。原先多个按钮会被justify-between摊开，例如 Import Models 漂在标题和 Add Model 中间；无标题时单个按钮会靠左。SettingsRow、ExpandableSettingsRow、InlineLoadingRow surface="card-row"：去掉mx-4、border-b、行高，改为声明data-settings-row；:divider="false"通过data-divider="false"交给列表规则处理。ModelListRow：按钮包进SettingsBleed，悬停底色仍横跨整卡；文字用px-(--settings-inset)补回对齐。因为贴边依赖卡片提供的缩进，它只能放在设置卡片里，文档与注释已注明。DetailPane骨架屏随之去掉手写缩进；SurfaceCard只更新了padding的说明。SettingsList、SettingsBleed，从 settings barrel 导出。AGENTS.md归属表补充行节奏的例外说明；skills/ui-owners更新SettingsRow几何、新原语与选型表；skills/ui-patterns更新间距阶梯、分割线、折叠行示例与降级对照表。宿主侧的迁移在 Memoh PR（见下），本 PR 需要先合并。
Related
Validation
以下为 Agent 自检，不是真人 QA。
pnpm type-check（vue-tsc --build）通过。scripts/check-ui-contract.mjs通过，3 条警告改动前就已存在。SettingsPageExample与ControlsPanel只组合SettingsSection+SettingsRow，与宿主中已验证的组合相同，未单独启动 showcase 截图。Screenshots
外观 Advanced 弹窗（左为 main，右为本 PR）：
宿主组件墙上的两个新原语（浅色、深色）：
Human QA