<execution>
  <constraint>
    ## 布局优化技术约束
    - **Qt布局管理器限制**：必须在QHBoxLayout、QVBoxLayout、QGridLayout等标准布局内实现
    - **容器嵌套深度**：避免过深的布局嵌套影响性能和维护性
    - **响应式能力边界**：Qt原生响应式能力有限，需要合理设计适配方案
    - **控件尺寸策略**：受Qt控件的sizePolicy和sizeHint机制约束
    - **现有布局改动成本**：大幅修改现有布局结构的风险和成本考量
  </constraint>

  <rule>
    ## 布局优化强制规则
    - **网格对齐强制**：所有界面元素必须遵循统一的网格对齐系统
    - **间距规范统一**：使用标准化的间距单位，建立统一的间距规范
    - **层次结构清晰**：布局层次必须与信息层次保持一致
    - **响应式友好**：布局设计必须考虑不同窗口大小的适配
    - **代码可维护性**：布局代码必须清晰易懂，便于后续维护
  </rule>

  <guideline>
    ## 布局优化指导原则
    - **内容驱动布局**：布局服务于内容，不为布局而布局
    - **视觉引导优先**：重要内容放在视觉焦点位置
    - **操作便利性**：频繁操作的元素放在易于访问的位置
    - **空间高效利用**：在美观的前提下最大化空间利用率
    - **一致性维护**：同类功能使用相同的布局模式
  </guideline>

  <process>
    ## 🎨 布局增强系统化流程
    
    ```mermaid
    flowchart TD
        A[布局现状分析] --> B[网格系统设计]
        B --> C[组件重组规划]
        C --> D[间距规范制定]
        D --> E[响应式策略]
        E --> F[原型验证]
        F --> G[分步实施]
        G --> H[效果评估]
        H --> I{布局满意?}
        I -->|否| J[调整优化]
        I -->|是| K[布局完成]
        J --> C
    ```

    ### Step 1: 布局现状深度分析
    
    ```mermaid
    mindmap
      root((布局分析))
        空间利用
          有效空间占比
          浪费空间识别
          密度分布分析
        对齐状况
          元素对齐检查
          网格偏离统计
          视觉混乱点识别
        层次结构
          信息层次分析
          视觉权重评估
          注意力流向跟踪
        用户路径
          操作流程分析
          视线轨迹研究
          交互效率评估
    ```
    
    **分析工具和方法**：
    - **网格叠加法**：在界面上叠加网格，检查对齐情况
    - **热力图分析**：模拟用户视线热力图，识别视觉焦点
    - **空间占比统计**：计算有效内容与空白空间的比例
    - **用户路径追踪**：分析完成核心任务的操作路径长度

    ### Step 2: 网格系统设计
    
    ```mermaid
    graph LR
        A[基础单位确定] --> B[网格列数设定]
        B --> C[间距规则定义]
        C --> D[断点策略制定]
        D --> E[组件网格规范]
    ```
    
    **网格系统参数设计**：
    
    | 参数类型 | 推荐值 | 应用场景 | 说明 |
    |---------|--------|---------|------|
    | 基础单位 | 8px | 全局间距 | 所有间距都是8的倍数 |
    | 列数 | 12列 | 主要布局 | 灵活的布局分割 |
    | 最小间距 | 8px | 组件间距 | 紧密排列的最小间距 |
    | 标准间距 | 16px | 模块间距 | 常用的模块间距 |
    | 大间距 | 24px | 区域间距 | 区域间的分割间距 |
    | 超大间距 | 32px | 页面边距 | 页面边缘的安全距离 |
    
    **响应式断点设计**：
    ```mermaid
    graph TD
        A[窗口宽度] --> B{断点判断}
        B -->|< 768px| C[紧凑布局<br/>单列排列]
        B -->|768px - 1200px| D[标准布局<br/>双列排列]
        B -->|> 1200px| E[宽屏布局<br/>多列排列]
    ```

    ### Step 3: 组件重组规划
    
    ```mermaid
    flowchart TD
        A[功能分组分析] --> B[重要性排序]
        B --> C[使用频率统计]
        C --> D[关联关系梳理]
        D --> E[空间分配优化]
        E --> F[布局模式选择]
    ```
    
    **组件重组策略矩阵**：
    
    | 重要性\频率 | 高频使用 | 中频使用 | 低频使用 |
    |------------|---------|---------|---------|
    | **核心功能** | 主要区域<br/>大尺寸显示 | 次要区域<br/>标准显示 | 收纳区域<br/>图标化 |
    | **重要功能** | 便捷位置<br/>突出显示 | 标准位置<br/>清晰显示 | 二级菜单<br/>文字链接 |
    | **辅助功能** | 快捷入口<br/>小尺寸 | 工具栏<br/>图标化 | 设置菜单<br/>隐藏显示 |
    
    **BattlefieldExplorationSystem布局优化示例**：
    ```mermaid
    graph TD
        A[设备管理] --> A1[设备列表 - 左侧主区域]
        A --> A2[设备详情 - 右侧面板]
        
        B[地图显示] --> B1[地图视图 - 中心区域]
        B --> B2[地图控制 - 浮动工具栏]
        
        C[功能控制] --> C1[主要功能 - 右侧面板顶部]
        C --> C2[次要功能 - 右侧面板中部]
        C --> C3[设置功能 - 右侧面板底部]
    ```

    ### Step 4: 间距规范实施
    
    ```mermaid
    mindmap
      root((间距系统))
        垂直间距
          组件内行间距: 4px
          相关组件间: 8px
          功能模块间: 16px
          页面区域间: 24px
        水平间距
          元素内边距: 8px
          按钮间距: 12px
          列间距: 16px
          页面边距: 20px
        特殊间距
          标题下间距: 12px
          分组间距: 20px
          卡片内边距: 16px
          面板边距: 24px
    ```
    
    **间距规范的Qt实现**：
    ```cpp
    // 标准间距常量定义
    const int SPACING_TINY = 4;      // 紧密间距
    const int SPACING_SMALL = 8;     // 小间距
    const int SPACING_NORMAL = 12;   // 标准间距
    const int SPACING_MEDIUM = 16;   // 中等间距
    const int SPACING_LARGE = 20;    // 大间距
    const int SPACING_XLARGE = 24;   // 超大间距
    
    // 布局间距应用
    layout->setSpacing(SPACING_NORMAL);
    layout->setContentsMargins(SPACING_MEDIUM, SPACING_MEDIUM, 
                              SPACING_MEDIUM, SPACING_MEDIUM);
    ```

    ### Step 5: 响应式布局策略
    
    ```mermaid
    flowchart LR
        A[固定布局] --> B{窗口变化}
        B -->|宽度减少| C[收缩策略]
        B -->|宽度增加| D[扩展策略]
        
        C --> C1[隐藏次要元素]
        C --> C2[压缩间距]
        C --> C3[垂直重排]
        
        D --> D1[显示更多内容]
        D --> D2[增加列数]
        D --> D3[扩大间距]
    ```
    
    **Qt中的响应式实现方案**：
    ```cpp
    // 基于窗口宽度的布局调整
    void MainWindow::resizeEvent(QResizeEvent *event) {
        int width = event->size().width();
        
        if (width < 768) {
            // 紧凑布局
            switchToCompactLayout();
        } else if (width < 1200) {
            // 标准布局
            switchToStandardLayout();
        } else {
            // 宽屏布局
            switchToWideLayout();
        }
    }
    ```

    ### Step 6: 原型验证与测试
    
    ```mermaid
    graph TD
        A[布局原型创建] --> B[静态效果验证]
        B --> C[交互流程测试]
        C --> D[响应式测试]
        D --> E[用户反馈收集]
        E --> F{验证通过?}
        F -->|否| G[原型调整]
        F -->|是| H[进入实施阶段]
        G --> A
    ```
    
    **原型验证检查项**：
    - ✅ 信息层次清晰，重点突出
    - ✅ 操作流程顺畅，符合习惯
    - ✅ 空间利用合理，不浪费不拥挤
    - ✅ 视觉平衡美观，专业感强
    - ✅ 响应式表现良好，适配性佳

    ### Step 7: 分步实施与部署
    
    ```mermaid
    gantt
        title 布局优化实施时间表
        dateFormat  YYYY-MM-DD
        section 基础网格
        网格系统建立     :done, grid1, 2024-01-01, 2d
        间距规范统一     :done, grid2, after grid1, 3d
        section 主要区域
        左侧面板优化     :active, main1, 2024-01-06, 3d
        中心区域调整     :main2, after main1, 2d
        右侧面板重构     :main3, after main2, 3d
        section 响应式
        断点策略实施     :resp1, 2024-01-14, 2d
        适配测试验证     :resp2, after resp1, 2d
        section 细节完善
        微调优化         :detail1, 2024-01-18, 2d
        最终测试         :detail2, after detail1, 1d
    ```
    
    **实施风险控制**：
    - 每次只修改一个布局区域
    - 保留原有布局代码的备份
    - 及时进行功能回归测试
    - 分阶段收集用户使用反馈
  </process>

  <criteria>
    ## 布局优化成功标准
    
    ### 视觉效果标准
    - ✅ 所有元素严格按网格对齐
    - ✅ 间距使用规范化，视觉整齐
    - ✅ 信息层次清晰，重点突出
    - ✅ 空间利用率高，布局平衡
    
    ### 用户体验标准
    - ✅ 核心功能一眼可见，易于访问
    - ✅ 操作流程符合用户习惯
    - ✅ 相关功能就近分组，逻辑清晰
    - ✅ 界面响应速度没有下降
    
    ### 技术实现标准
    - ✅ 布局代码结构清晰，易于维护
    - ✅ 响应式适配表现良好
    - ✅ 不同分辨率下显示正常
    - ✅ 内存和CPU使用没有显著增加
    
    ### 可维护性标准
    - ✅ 布局逻辑文档化，便于交接
    - ✅ 组件复用性好，扩展性强
    - ✅ 样式与逻辑分离，职责清晰
    - ✅ 版本控制记录完整，可追溯
  </criteria>
</execution>