diff --git a/docs/superpowers/specs/2026-03-30-layout-redesign-design.md b/docs/superpowers/specs/2026-03-30-layout-redesign-design.md
new file mode 100644
index 0000000..7769de5
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-30-layout-redesign-design.md
@@ -0,0 +1,465 @@
+# Layout结构优化设计文档
+
+**日期**: 2026-03-30
+**项目**: 物业缴费管理系统后台
+**目标**: 优化现有layout布局，改为左右结构，白色主题风格
+
+## 1. 项目背景
+
+当前系统使用UmiJS + Ant Design Pro Layout，采用`mix`混合布局模式。需要优化为更现代、清晰的左右分栏布局，以白色为主色调，提升用户体验。
+
+## 2. 需求概述
+
+### 2.1 布局结构要求
+- **左侧区域**（垂直分割）：
+ - 上方：Logo区域（Logo + 项目名称）
+ - 下方：导航菜单
+
+- **右侧区域**（垂直分割）：
+ - 上方：Header（用户信息、操作按钮）
+ - 下方：页面内容区域
+
+### 2.2 功能要求
+- 侧边栏固定宽度220px，支持折叠收起（折叠至64px）
+- Logo区域智能显示：展开时显示Logo+文字，折叠时仅显示Logo
+- 白色为主色调，整体风格干净整洁
+- 保持现有菜单权限系统不变
+- 响应式设计支持
+
+## 3. 设计方案
+
+### 3.1 整体架构
+
+```
+┌─────────────────────────────────────────────────────┐
+│ Layout (side mode) │
+│ ┌──────────┬─────────────────────────────────────┐ │
+│ │ │ Header (64px, white background) │ │
+│ │ Left │ ┌───────────────────────────────┐ │ │
+│ │ Sidebar │ │ 用户信息区 + 操作按钮 │ │ │
+│ │ │ └───────────────────────────────┘ │ │
+│ │ ┌──────┐│ ┌───────────────────────────────┐ │ │
+│ │ │ Logo ││ │ │ │ │
+│ │ │+Text ││ │ 页面内容区域 │ │ │
+│ │ │64px ││ │ (children渲染) │ │ │
+│ │ ├──────┤│ │ padding: 24px │ │ │
+│ │ │ Menu ││ │ │ │ │
+│ │ │ ││ │ │ │ │
+│ │ └──────┘│ └───────────────────────────────┘ │ │
+│ └──────────┴─────────────────────────────────────┘ │
+└─────────────────────────────────────────────────────┘
+```
+
+### 3.2 侧边栏设计（左侧）
+
+#### Logo区域
+- **高度**: 64px
+- **背景色**: `#ffffff`
+- **边框**: 底部 1px solid `#f0f0f0`
+- **展开状态**: Logo图标(32px) + 项目名称文字
+- **折叠状态**: 仅显示Logo图标，居中显示
+- **动画**: 平滑过渡 200ms
+
+#### 菜单区域
+- **背景色**: `#ffffff`
+- **菜单项高度**: 40px
+- **菜单文字颜色**:
+ - 默认: `#595959`
+ - 悬停: `#1890ff`
+ - 激活: `#1890ff` (背景 `#e6f7ff`)
+- **图标颜色**: 跟随文字颜色
+- **层级缩进**: 每级 20px
+- **激活指示器**: 左侧蓝色竖线 3px宽
+
+#### 配置参数
+```typescript
+siderWidth: 220,
+collapsedWidth: 64,
+breakpoint: 'lg',
+collapsible: true
+```
+
+### 3.3 Header设计（右侧上方）
+
+#### 布局规格
+- **高度**: 64px
+- **背景色**: `#ffffff`
+- **边框**: 底部 1px solid `#f0f0f0`
+- **内边距**: 0 24px
+- **布局**: flex左右分布
+
+#### 内容区域
+
+**左侧区域**（可选）:
+- 面包屑导航或页面标题
+
+**右侧区域**:
+- 用户头像（32px圆形）
+- 用户名（悬停显示下拉菜单）
+- 下拉菜单项：
+ - 个人资料
+ - 修改密码
+ - 退出登录
+
+### 3.4 内容区域设计（右侧下方）
+
+#### 容器规格
+- **背景色**: `#f5f5f5`
+- **内边距**: 24px
+- **最小高度**: `calc(100vh - 64px)`
+
+#### 页面内容（可选包裹）
+如果需要卡片包裹：
+- **背景色**: `#ffffff`
+- **圆角**: 8px
+- **阴影**: `0 1px 2px 0 rgba(0, 0, 0, 0.03)`
+- **内边距**: 24px
+
+### 3.5 颜色主题规范
+
+#### 主色调
+- 主色: `#1890ff`
+- 成功: `#52c41a`
+- 警告: `#faad14`
+- 错误: `#ff4d4f`
+- 信息: `#1890ff`
+
+#### 中性色
+- 标题文字: `#262626`
+- 正文文字: `#595959`
+- 次要文字: `#8c8c8c`
+- 禁用文字: `#bfbfbf`
+- 边框: `#d9d9d9`
+- 分割线: `#f0f0f0`
+
+#### 背景色
+- 布局背景: `#f5f5f5`
+- 侧边栏: `#ffffff`
+- Header: `#ffffff`
+- 内容卡片: `#ffffff`
+
+### 3.6 字体规范
+- **字号**: 14px（基准）
+- **行高**: 1.5715
+- **字体族**: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial`
+
+### 3.7 交互和动画
+
+#### 侧边栏折叠
+- **动画时长**: 200ms
+- **动画曲线**: `cubic-bezier(0.645, 0.045, 0.355, 1.000)`
+- **折叠时**:
+ - Logo文字淡出
+ - 菜单文字隐藏，图标居中
+ - Tooltip显示完整菜单项文字
+- **展开时**:
+ - Logo文字淡入
+ - 菜单文字从左侧滑入
+
+#### 菜单交互
+- 悬停效果：背景色变化 0.2s
+- 子菜单展开：平滑动画
+- 激活状态：左侧蓝色竖线指示器
+
+#### Header交互
+- 下拉菜单：淡入动画
+- 按钮悬停：背景色变化
+
+## 4. 技术实现
+
+### 4.1 核心配置修改
+
+修改 `src/common/libs/umi/layoutConfig.tsx`:
+
+```typescript
+export const LayoutConfig: RuntimeConfig['layout'] = () => {
+ return {
+ // 从 'mix' 改为 'side'
+ layout: 'side',
+
+ title: '物业管理系统',
+ logo: false, // 禁用默认logo，使用自定义
+
+ // 侧边栏配置
+ siderWidth: 220,
+ collapsedWidth: 64,
+ breakpoint: 'lg',
+
+ // 主题token配置
+ token: {
+ bgLayout: '#f5f5f5',
+ header: {
+ colorBgHeader: '#ffffff',
+ colorHeaderTitle: '#262626',
+ colorTextRightActionsItem: '#595959',
+ heightLayoutHeader: 64,
+ },
+ sider: {
+ colorMenuBackground: '#ffffff',
+ colorMenuText: '#595959',
+ colorMenuTextSelected: '#1890ff',
+ colorMenuItemBgSelected: '#e6f7ff',
+ colorMenuDivider: '#f0f0f0',
+ },
+ },
+
+ // 自定义Header渲染
+ headerRender: (props) => {
+ return ;
+ },
+
+ // 自定义Logo渲染
+ logoRenderer: (collapsed) => {
+ return ;
+ },
+
+ // 菜单配置保持不变
+ menu: {
+ params: snap.session.permissions,
+ request: async () => {
+ // 现有菜单权限逻辑
+ },
+ },
+
+ // 其他配置保持不变
+ avatarProps: {
+ render: () => ,
+ },
+ };
+};
+```
+
+### 4.2 新增组件
+
+#### CustomHeader.tsx
+```typescript
+import { Layout, Dropdown, Avatar } from 'antd';
+import type { MenuProps } from 'antd';
+
+const { Header } = Layout;
+
+export const CustomHeader = (props: any) => {
+ const menuItems: MenuProps['items'] = [
+ { key: 'profile', label: '个人资料' },
+ { key: 'password', label: '修改密码' },
+ { type: 'divider' },
+ { key: 'logout', label: '退出登录' },
+ ];
+
+ return (
+
+ {/* 左侧：面包屑或页面标题 */}
+
+ {/* 可选：面包屑导航 */}
+
+
+ {/* 右侧：用户信息 */}
+
+
+ );
+};
+```
+
+#### CustomLogo.tsx
+```typescript
+import { MyIcons } from '@/common';
+
+export const CustomLogo = ({ collapsed }: { collapsed: boolean }) => {
+ return (
+
+
+ {/* Logo图标或图片 */}
+
+
+ {!collapsed && (
+
+ 物业管理系统
+
+ )}
+