Skip to content

feat(ui): unify layout spacing specification across all pages#75

Merged
hrygo merged 2 commits into
mainfrom
feat/74-layout-spacing-unification
Feb 4, 2026
Merged

feat(ui): unify layout spacing specification across all pages#75
hrygo merged 2 commits into
mainfrom
feat/74-layout-spacing-unification

Conversation

@hrygo

@hrygo hrygo commented Feb 4, 2026

Copy link
Copy Markdown
Owner

概述

统一 PC 端与移动端各主模块页面的 Header 与主体内容间距规范,解决当前间距不统一问题。

变更内容

  • 创建统一间距规范常量 web/src/styles/layout.ts
  • 重构 GeneralLayout.tsx 添加标准顶部间距和最大宽度
  • AIChatLayout.tsx 添加间距偏差说明文档(全屏设计)
  • ScheduleLayout.tsx 添加侧边栏宽度说明文档(日历需要更宽空间)
  • 简化 4 个页面组件,移除冗余间距设置

关联 Issue

Resolves #74

统一规范

用途 移动端 (<768px) PC 端 (≥768px)
顶部间距 pt-4 (16px) pt-6 (24px)
底部间距 pb-8 (32px) pb-8 (32px)
水平内边距 px-4 (16px) px-6 (24px)
最大内容宽度 100% max-w-[100rem]
侧边栏宽度 N/A w-72 (288px)

测试计划

  • 本地测试通过
  • make check-all 通过
  • 手动测试各页面布局显示正常

检查清单

  • 代码遵循项目规范
  • 自我审查代码
  • 注释说明了复杂逻辑
  • 无合并冲突

Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com

hotplex-ai and others added 2 commits February 4, 2026 20:58
- Analyze current layout spacing inconsistencies across all pages
- Define unified spacing specification (mobile: pt-4, desktop: pt-6)
- Document sidebar width standardization (w-72 = 288px)
- Create implementation roadmap with file change list

Refs #74

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create unified spacing constants and apply to all Layout/Page components:

**New file:**
- web/src/styles/layout.ts - LAYOUT_SPACING constants with unified values

**Layout changes:**
- GeneralLayout: Add standard top padding (pt-4/sm:pt-6) and max-width
- AIChatLayout: Add docs explaining spacing deviation (full-screen design)
- ScheduleLayout: Add docs explaining w-80 sidebar (calendar needs space)

**Page simplifications:**
- Inboxes: Remove redundant spacing (now from Layout)
- Attachments: Remove redundant spacing (now from Layout)
- Setting: Remove redundant spacing (now from Layout)
- Review: Remove redundant spacing (now from Layout)

**Specification:**
- Mobile top padding: pt-4 (16px)
- Desktop top padding: pt-6 (24px)
- Sidebar width: w-72 (288px), Schedule w-80 (320px) exception
- Max content width: max-w-[100rem] (1600px)

Refs #74

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@hrygo hrygo force-pushed the feat/74-layout-spacing-unification branch from eaeb107 to 075dbbb Compare February 4, 2026 13:05
@hrygo hrygo merged commit 30da0f5 into main Feb 4, 2026
5 checks passed
@hrygo hrygo deleted the feat/74-layout-spacing-unification branch February 4, 2026 13:24
hrygo added a commit that referenced this pull request Feb 5, 2026
* docs(research): add layout spacing unification research report

- Analyze current layout spacing inconsistencies across all pages
- Define unified spacing specification (mobile: pt-4, desktop: pt-6)
- Document sidebar width standardization (w-72 = 288px)
- Create implementation roadmap with file change list

Refs #74

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat(ui): unify layout spacing specification across all pages

Create unified spacing constants and apply to all Layout/Page components:

**New file:**
- web/src/styles/layout.ts - LAYOUT_SPACING constants with unified values

**Layout changes:**
- GeneralLayout: Add standard top padding (pt-4/sm:pt-6) and max-width
- AIChatLayout: Add docs explaining spacing deviation (full-screen design)
- ScheduleLayout: Add docs explaining w-80 sidebar (calendar needs space)

**Page simplifications:**
- Inboxes: Remove redundant spacing (now from Layout)
- Attachments: Remove redundant spacing (now from Layout)
- Setting: Remove redundant spacing (now from Layout)
- Review: Remove redundant spacing (now from Layout)

**Specification:**
- Mobile top padding: pt-4 (16px)
- Desktop top padding: pt-6 (24px)
- Sidebar width: w-72 (288px), Schedule w-80 (320px) exception
- Max content width: max-w-[100rem] (1600px)

Refs #74

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: 黄飞虹 <aaronwong1989@gmail.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
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.

[ui] 统一 PC 端与移动端页面间距规范

2 participants