# 界面布局更新说明

## 🎯 更新概述

QSmartAssistant的用户界面已从垂直分割器布局更新为两行两列的网格布局，提供更好的空间利用率和用户体验。

## 🔄 布局变更

### 之前的布局
- **垂直分割器**: 所有功能模块垂直排列
- **空间利用**: 需要大量垂直滚动
- **视觉效果**: 功能模块呈长条状分布

### 现在的布局
- **网格布局**: 2×2网格，四个功能模块均匀分布
- **空间利用**: 更好的水平和垂直空间利用
- **视觉效果**: 紧凑且平衡的界面设计

## 📐 新布局结构

```
┌─────────────────────┬─────────────────────┐
│   语音识别 (ASR)    │   语音合成 (TTS)    │
│                     │                     │
│ • 文件识别          │ • 文本输入          │
│ • 实时麦克风识别    │ • 说话人选择        │
│ • 识别结果显示      │ • 合成结果显示      │
├─────────────────────┼─────────────────────┤
│   麦克风录音        │   语音唤醒 (KWS)    │
│                     │                     │
│ • 录音设置          │ • 关键词检测        │
│ • 输出设置          │ • 唤醒状态监控      │
│ • 录音控制          │ • 检测结果显示      │
└─────────────────────┴─────────────────────┘
```

### 功能模块分布

#### 第一行第一列：语音识别 (ASR)
- 文件选择和识别
- 实时麦克风识别控制
- 识别结果显示区域

#### 第一行第二列：语音合成 (TTS)
- 文本输入区域
- 说话人ID设置
- 合成结果和控制

#### 第二行第一列：麦克风录音
- 录音设置（设备参数）
- 输出设置（保存格式）
- 录音控制和结果显示

#### 第二行第二列：语音唤醒 (KWS)
- 唤醒检测控制
- 实时状态监控
- 关键词检测结果

## 🎨 界面优化

### 尺寸调整
- **最小窗口尺寸**: 1200×800 像素
- **默认窗口尺寸**: 1400×900 像素
- **文本框高度**: 统一调整为80-120像素范围

### 布局参数
- **网格间距**: 10像素
- **边距**: 10像素
- **拉伸策略**: 行列均匀拉伸（拉伸因子=1）

### 视觉改进
- 更紧凑的功能模块设计
- 更好的空间利用率
- 减少垂直滚动需求
- 提升整体视觉平衡

## 🔧 技术实现

### 代码变更

#### 布局系统更新
```cpp
// 之前：垂直分割器
auto* splitter = new QSplitter(Qt::Vertical, this);
splitter->addWidget(asrGroup);
splitter->addWidget(ttsGroup);
splitter->addWidget(recordGroup);
splitter->addWidget(kwsGroup);

// 现在：网格布局
auto* gridLayout = new QGridLayout();
gridLayout->addWidget(asrGroup, 0, 0);    // 第一行第一列
gridLayout->addWidget(ttsGroup, 0, 1);    // 第一行第二列
gridLayout->addWidget(recordGroup, 1, 0); // 第二行第一列
gridLayout->addWidget(kwsGroup, 1, 1);    // 第二行第二列
```

#### 拉伸策略配置
```cpp
// 设置行列拉伸策略，让各模块均匀分配空间
gridLayout->setRowStretch(0, 1);    // 第一行拉伸因子为1
gridLayout->setRowStretch(1, 1);    // 第二行拉伸因子为1
gridLayout->setColumnStretch(0, 1); // 第一列拉伸因子为1
gridLayout->setColumnStretch(1, 1); // 第二列拉伸因子为1
```

#### 文本框高度优化
```cpp
// 统一设置文本编辑框的高度范围
textEdit->setMinimumHeight(80);
textEdit->setMaximumHeight(120);
```

### 新增头文件
```cpp
#include <QGridLayout>  // 网格布局支持
```

## 📱 响应式设计

### 窗口缩放
- **最小尺寸限制**: 确保所有功能模块可见
- **比例保持**: 网格布局自动调整模块大小
- **内容适应**: 文本框和控件自动适应容器大小

### 屏幕适配
- **高分辨率**: 更好利用宽屏显示器
- **标准分辨率**: 保持良好的可用性
- **紧凑显示**: 减少不必要的空白区域

## 🎯 用户体验提升

### 操作效率
- **并行操作**: 可同时查看多个功能模块状态
- **快速切换**: 无需滚动即可访问所有功能
- **视觉关联**: 相关功能在视觉上更接近

### 界面美观
- **平衡布局**: 四个模块形成视觉平衡
- **空间利用**: 更高效的屏幕空间使用
- **现代感**: 符合现代应用界面设计趋势

### 功能发现
- **一览无余**: 所有主要功能一屏显示
- **逻辑分组**: 相关功能就近放置
- **清晰分区**: 每个功能模块边界清晰

## 🔍 使用建议

### 最佳实践
1. **窗口大小**: 建议使用1400×900或更大尺寸
2. **功能使用**: 可同时使用多个功能模块
3. **状态监控**: 便于同时监控多个功能状态

### 工作流程
1. **语音识别**: 左上角进行文件或实时识别
2. **语音合成**: 右上角输入文本进行合成
3. **录音功能**: 左下角进行高质量录音
4. **语音唤醒**: 右下角启动关键词检测

## 🚀 未来扩展

### 布局灵活性
- 支持用户自定义模块位置
- 支持模块大小调整
- 支持模块显示/隐藏

### 多屏支持
- 支持多显示器布局
- 支持模块拖拽到其他屏幕
- 支持独立窗口模式

### 主题定制
- 支持不同的布局主题
- 支持颜色和间距自定义
- 支持紧凑/宽松布局切换

## 📊 性能影响

### 渲染性能
- **网格布局**: 比分割器布局更高效
- **重绘优化**: 减少不必要的界面重绘
- **内存使用**: 布局管理器内存占用更少

### 响应速度
- **布局计算**: 网格布局计算更快
- **窗口调整**: 响应窗口大小变化更流畅
- **控件更新**: 界面更新更及时

## ✅ 兼容性

### 系统兼容
- **macOS**: 完全支持，原生外观
- **Windows**: 支持（如需要）
- **Linux**: 支持（如需要）

### Qt版本
- **Qt 6.x**: 完全支持
- **向后兼容**: 保持API兼容性

## 📝 更新日志

### Version 2.0 - 网格布局
- ✅ 将垂直分割器替换为2×2网格布局
- ✅ 优化窗口最小和默认尺寸
- ✅ 统一文本编辑框高度设置
- ✅ 添加网格布局拉伸策略
- ✅ 提升整体用户体验

新的网格布局为QSmartAssistant带来了更现代、更高效的用户界面，提升了空间利用率和操作便利性，为用户提供了更好的语音处理工作体验。