问题描述

DivineSense 各主模块页面的 Header 与主体内容间距不统一，导致视觉体验不一致。

当前问题

1. 顶部间距不统一

   • MemoLayout: md:pt-6 ✅
   • AIChatLayout: 无 pt 间距 ❌
   • ScheduleLayout: 无 pt 间距 ❌
   • GeneralLayout: 无 pt 间距 ❌

2. 侧边栏宽度不统一

   • MemoLayout: md:w-56, lg:w-72
   • AIChatLayout: w-72
   • ScheduleLayout: w-80 (320px) ❌

3. 侧边栏内边距不统一

   • MemoLayout: px-3 py-6
   • AIChatLayout: pt-2
   • ScheduleLayout: py-4 px-3

4. 移动端 Header 高度/样式不统一

   • AIChat/Schedule: h-14 (固定)
   • GeneralLayout: py-3 h-14 (有 padding)
   • MemoLayout: MobileHeader (高度未指定)

5. 响应式断点不统一

   • MemoLayout: md, lg
   • AIChatLayout: lg
   • ScheduleLayout: lg
   • GeneralLayout: sm ❌

字符图示

【PC 端顶部间距对比】
MemoLayout:    ████ pt-6 (24px) ✅
AIChatLayout:  (无间距) ❌
ScheduleLayout: (无间距) ❌
GeneralLayout: (无间距，各页面自行管理) ❌

【侧边栏宽度对比】
MemoLayout:    ║288px (lg) ║
AIChatLayout:  ║288px      ║
ScheduleLayout: ║320px     ║ ❌

解决方案

功能范围

包含：

• 统一所有 Layout 组件的间距规范
• 统一 Mobile Header 高度样式
• 创建间距规范常量便于维护
• 更新文档说明间距规范

不包含：

• AIChat 沉浸模式（保持全屏体验）
• ScheduleLayout 侧边栏宽度（保持 320px 以容纳日历）

技术方案

前端 (TypeScript/Tailwind CSS):

1. 创建间距规范常量 (web/src/styles/layout.ts)

export const LAYOUT_SPACING = {
  sidebarWidth: "w-72",        // 288px
  sidebarPadding: "px-3 py-6",
  mobileHeaderHeight: "h-14",  // 56px
  paddingTopMobile: "pt-4",    // 16px
  paddingTopDesktop: "pt-6",   // 24px
  paddingBottom: "pb-8",        // 32px
  paddingXMobile: "px-4",      // 16px
  paddingXDesktop: "sm:px-6",  // 24px
  maxWidth: "max-w-[100rem]",  // 1600px
} as const;

2. 修改文件清单

   • web/src/layouts/GeneralLayout.tsx - 按规范重构
   • web/src/layouts/AIChatLayout.tsx - 添加注释说明
   • web/src/layouts/ScheduleLayout.tsx - 添加注释说明
   • web/src/pages/Inboxes.tsx - 移除页面内冗余间距
   • web/src/pages/Attachments.tsx - 移除页面内冗余间距
   • web/src/pages/Setting.tsx - 移除页面内冗余间距
   • web/src/pages/Review.tsx - 移除页面内冗余间距

3. 统一规范 Token

风险与缓解

复杂度

• 工作量: 0.5 人周
• 风险: 低

验收标准

• make check-all 通过
• 所有 Layout 组件遵循统一间距规范
• PC 端顶部间距统一为 pt-6（除特殊场景）
• 移动端顶部间距统一为 pt-4
• 侧边栏宽度统一为 w-72（Schedule 例外）
• 更新 docs/dev-guides/FRONTEND.md 文档

调研时间: 2026-02-04 | 版本: v1.0