# BattlefieldExplorationSystem 右侧功能面板设计规范

## 设计概述

为BattlefieldExplorationSystem项目的右侧功能面板设计，包含战场探索、情报传输、敌情统计三大核心模块。

## 视觉设计系统

### 色彩方案（军事主题）
```css
/* 主色调 - 军事绿 */
--primary-color: #2E5D31;
--primary-hover: #245429;
--primary-active: #1a3d1d;

/* 功能色彩 */
--success-color: #4CAF50;    /* 在线/成功状态 */
--warning-color: #FF8C00;    /* 警告状态 */
--danger-color: #DC143C;     /* 危险/敌情 */
--info-color: #1E88E5;       /* 信息提示 */

/* 背景色彩 */
--panel-bg: #2A3F47;         /* 面板主背景（深蓝灰） */
--module-bg: #354A54;        /* 模块背景 */
--card-bg: #3D525E;          /* 卡片背景 */
--hover-bg: #4A6572;         /* 悬停背景 */

/* 文字色彩 */
--text-primary: #FFFFFF;     /* 主要文字 */
--text-secondary: #B0BEC5;   /* 次要文字 */
--text-muted: #78909C;       /* 提示文字 */

/* 边框色彩 */
--border-color: #546E7A;     /* 主边框 */
--border-accent: #2E5D31;    /* 强调边框 */
```

### 字体系统
```css
--font-title: 16px;          /* 模块标题 */
--font-subtitle: 14px;       /* 子标题 */
--font-body: 12px;           /* 正文 */
--font-small: 10px;          /* 小号文字 */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
```

### 间距系统
```css
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-xxl: 24px;

--panel-padding: 16px;       /* 面板内边距 */
--module-gap: 12px;          /* 模块间距 */
--card-padding: 12px;        /* 卡片内边距 */
```

## 组件设计规范

### 1. 面板容器
```css
.function-panel {
    width: 320px;
    background: var(--panel-bg);
    border-left: 2px solid var(--border-color);
    padding: var(--panel-padding);
    height: 100%;
    overflow-y: auto;
}

.panel-title {
    font-size: var(--font-title);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-sm);
}
```

### 2. 功能模块卡片
```css
.module-card {
    background: var(--module-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: var(--module-gap);
    padding: var(--card-padding);
    transition: all 0.3s ease;
}

.module-card:hover {
    border-color: var(--border-accent);
    background: var(--hover-bg);
}

.module-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.module-icon {
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-sm);
    color: var(--primary-color);
}

.module-title {
    font-size: var(--font-subtitle);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}
```

### 3. 设备控制卡片（战场探索模块）
```css
.device-controls {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.device-card {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: var(--spacing-md);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.device-card:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.device-card.active {
    border-color: var(--primary-color);
    background: rgba(46, 93, 49, 0.2);
}

.device-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto var(--spacing-xs);
    background-size: contain;
}

.device-name {
    font-size: var(--font-body);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.device-status {
    font-size: var(--font-small);
    color: var(--text-muted);
}
```

### 4. 功能按钮组
```css
.function-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.function-btn {
    background: var(--primary-color);
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.function-btn:hover {
    background: var(--primary-hover);
}

.function-btn:active {
    background: var(--primary-active);
}

.function-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

/* 不同类型按钮 */
.function-btn.warning {
    background: var(--warning-color);
}

.function-btn.danger {
    background: var(--danger-color);
}

.function-btn.info {
    background: var(--info-color);
}
```

### 5. 状态指示器
```css
.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--spacing-xs);
}

.status-online {
    background: var(--success-color);
    box-shadow: 0 0 4px var(--success-color);
}

.status-warning {
    background: var(--warning-color);
    animation: blink 1s infinite;
}

.status-offline {
    background: var(--text-muted);
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}
```

### 6. 统计信息面板
```css
.stats-panel {
    background: var(--card-bg);
    border-radius: 6px;
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-color);
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-label {
    font-size: var(--font-body);
    color: var(--text-secondary);
}

.stat-value {
    font-size: var(--font-body);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.stat-value.danger {
    color: var(--danger-color);
}

.stat-value.warning {
    color: var(--warning-color);
}

.stat-value.success {
    color: var(--success-color);
}
```

## 模块具体设计

### 战场探索模块
- **机器狗控制区域**：自主建图、导航避障功能按钮
- **无人机控制区域**：照片传输、人物识别功能按钮
- **状态显示**：设备在线状态、电池电量、信号强度

### 情报传输模块
- **通话控制**：开始通话、结束通话、静音按钮
- **频道设置**：频道选择、音量调节
- **通话状态**：当前通话状态、通话时长

### 敌情统计模块
- **统计信息**：已发现目标数量、威胁等级分布
- **快速操作**：刷新数据、导出报告、AI分析
- **可视化图表**：敌情分布图、时间趋势图

## 交互设计

### 状态反馈
- **悬停效果**：按钮和卡片悬停时边框高亮
- **点击反馈**：按钮点击时的缩放效果
- **状态指示**：不同颜色表示不同的设备和功能状态

### 响应式考虑
- **固定宽度**：320px，适合1920x1080及以上分辨率
- **滚动支持**：内容超出时支持垂直滚动
- **最小高度**：每个模块保持合适的最小高度

## 技术实现要点

### Qt实现建议
- 使用`QWidget`作为主容器
- 使用`QVBoxLayout`进行垂直布局
- 使用`QGroupBox`或自定义`QFrame`实现模块卡片
- 使用`QGridLayout`实现按钮网格布局
- 使用QSS样式表实现视觉效果

### 信号槽设计
```cpp
// 主要信号定义
signals:
    void startMapping();              // 开始建图
    void startNavigation();          // 开始导航
    void startPhotoTransmission();   // 开始照片传输
    void startPersonRecognition();   // 开始人物识别
    void startVoiceCall();           // 开始语音通话
    void refreshEnemyStats();        // 刷新敌情统计
    void requestAIAnalysis();        // 请求AI分析
```

这个设计规范确保了界面的专业性、可用性和可扩展性，同时保持了军事应用的严肃性和实用性。