# 立式一体机对话界面优化

## 设计目标

针对 1080×1920 分辨率立式一体机，优化对话界面布局，确保所有可操作元素位于用户易触及区域（Y≤1500px）。

## 核心改动

### 1. 设备检测
- **检测条件**：宽度 1000-1200px，高度 1700-2000px
- **实现位置**：`HomeView.vue` 和 `SsInputBox.vue`
- **状态管理**：使用 `computed` 从窗口尺寸派生，无额外状态

### 2. 四段式布局（仅对话模式）

```
┌──────────────────────────────┐ Y=0
│ 顶部导航栏（100px）           │ ← 返回首页 + 标题
├──────────────────────────────┤ Y=100
│ 服务快捷栏（100px）           │ ← 四川特色、政策解读等
├──────────────────────────────┤ Y=200
│                              │
│ 中部对话区（flex: 1）         │ ← 消息列表 + 输入框
│                              │
├──────────────────────────────┤ Y≈1500
│ 底部常见问题区（420px）       │ ← 仅展示，不可点击
└──────────────────────────────┘ Y=1920
```

### 3. 统一宽度对齐

**设计原则**：所有内容区域与顶部导航栏的内容区域对齐

**对齐策略**：使用 CSS 变量定义统一的内容宽度
```css
--kiosk-content-padding: 2rem;
--kiosk-content-width: calc(100vw - var(--kiosk-content-padding) * 2);
```

**应用范围**：
- 顶部导航栏：`padding: 0 2rem`（定义内容区域边界）
- 服务快捷栏：`width: var(--kiosk-content-width)`
- 聊天消息区：`max-width: var(--kiosk-content-width)`
- 输入框：`max-width: var(--kiosk-content-width)`
- 常见问题：`width: var(--kiosk-content-width)`

**计算结果**：
- 在 1080px 宽的屏幕上：`calc(100vw - 4rem)` = 1080px - 64px = 1016px
- 所有内容区域左右边缘与"返回首页"按钮和"商小川智能助手"标题对齐

**优势**：
- 响应式设计：自动适配不同屏幕宽度
- 完美对齐：所有内容与顶部导航栏内容区域对齐
- 代码简洁：使用 CSS 变量避免重复计算

### 4. 关键特性

#### 顶部导航栏（100px）
- 固定定位，始终可见
- 包含：返回首页按钮（左）+ 应用标题（中）
- 按钮尺寸：120×60px，满足最小触控目标

#### 服务快捷栏（100px）
- **复用原有设计**：保留 `SsService` 组件的渐变背景、阴影效果
- **均匀分布**：5个服务项使用 `flex: 1` 和 `justify-content: space-between` 均匀分布
- **样式类复用**：使用与原组件相同的 `itemClass` 逻辑
- **背景色**：
  - 默认：`linear-gradient(180deg, rgba(250, 255, 253, 0.8), rgba(225, 245, 248, 0.8))`
  - 黄色：`linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(246, 240, 239, 0.7))`
  - 中心：`linear-gradient(90deg, #c2dff9, #c6e2fa)`
- **尺寸**：每项 `flex: 1`，最小宽度 140px，高度 70px，图标半透明显示

#### 中部对话区
- 使用 flexbox 自适应高度
- 包含消息滚动区域和输入框
- 输入框位置确保在 Y≤1400px 范围内（200px + 1200px）

#### 底部常见问题区（420px）
- 固定高度，仅用于信息展示
- 从 `global.commonProblem` 取前 5 条
- 不可点击，避免用户弯腰操作

### 5. 侧边栏处理
- 对话模式下通过 `v-if` 完全不渲染侧边栏
- 条件：`v-if="!(global.spread && isKioskDevice)"`

## 文件修改清单

### web/src/views/HomeView.vue
- 添加 `isKioskDevice` computed 属性（设备检测）
- 添加 `kioskFaqList` computed 属性（常见问题列表）
- 添加 `getServiceClass` 方法（复用服务项样式逻辑）
- 添加 `kiosk-top-nav` 顶部导航栏组件
- 添加 `kiosk-service-bar` 服务快捷栏（复用原有设计）
- 添加 `kiosk-bottom-faq` 底部展示区
- 添加 `.kiosk-mode` 样式规则
- 定义 `--kiosk-content-width` CSS 变量（768px）

### web/src/components/SsInputBox.vue
- 添加 `isKioskDevice` computed 属性
- 添加 `.kiosk-chat` 类名支持
- 调整 flexbox 布局以适配四段式结构
- **定义 CSS 变量**：`--kiosk-content-width: calc(100vw - 4rem)` 用于统一宽度对齐
- **修改宽度设置**：`.ss-chat-container` 和 `.input-container` 使用 `var(--kiosk-content-width)`

## 设计原则遵循

✅ **单一数据源**：设备检测通过 computed 从窗口尺寸派生，无冗余状态  
✅ **组件复用**：复用 `SsService` 的样式设计和 `SsCommonProblem` 数据  
✅ **清晰注释**：关键逻辑添加中文注释说明设计意图  
✅ **最小改动**：仅在必要位置添加条件渲染和样式  
✅ **响应式设计**：使用 media query 隔离立式一体机样式  
✅ **视觉一致性**：保持原有的渐变背景、阴影、图标等视觉元素

## 使用说明

### 触发条件
当同时满足以下条件时，自动启用立式一体机布局：
1. 窗口宽度：1000-1200px
2. 窗口高度：1700-2000px
3. 用户进入对话模式（`global.spread === true`）

### 退出方式
点击顶部"返回首页"按钮，调用 `goHome()` 方法重置状态。

## 可操作区域分布

| 区域 | Y 坐标范围 | 高度 | 可操作性 |
|------|-----------|------|---------|
| 顶部导航 | 0-100px | 100px | ✅ 强烈推荐 |
| 服务快捷栏 | 100-200px | 100px | ✅ 强烈推荐 |
| 对话区域 | 200-1500px | ~1300px | ✅ 核心操作区 |
| 常见问题 | 1500-1920px | 420px | ⚠️ 仅展示 |

## 宽度对齐说明

**核心原则**：所有内容区域与顶部导航栏的内容区域完美对齐

**实现方式**：
1. 顶部导航栏定义内容边界：`padding: 0 2rem`
2. 使用 CSS 变量计算内容宽度：
   ```css
   --kiosk-content-padding: 2rem;
   --kiosk-content-width: calc(100vw - var(--kiosk-content-padding) * 2);
   ```
3. 所有内容区域使用相同的宽度变量

**应用组件**：
- 服务快捷栏：`width: var(--kiosk-content-width)`
- 聊天消息区：`max-width: var(--kiosk-content-width)`
- 输入框：`max-width: var(--kiosk-content-width)`
- 常见问题：`width: var(--kiosk-content-width)`

**计算示例**（1080px 屏幕）：
- `100vw` = 1080px
- `var(--kiosk-content-padding) * 2` = 2rem * 2 = 4rem = 64px
- `var(--kiosk-content-width)` = 1080px - 64px = 1016px

**对齐效果**：
```
┌─────────────────────────────┐ 屏幕边缘
│  ← 返回首页  商小川智能助手  │ ← padding: 0 2rem
│  ↑                        ↑ │
│  └────────────────────────┘ │ ← 内容区域宽度 1016px
│  ┌────────────────────────┐ │
│  │    服务快捷栏 1016px    │ │
│  └────────────────────────┘ │
│  ┌────────────────────────┐ │
│  │   聊天消息区 1016px     │ │
│  │   + 输入框 1016px      │ │
│  └────────────────────────┘ │
│  ┌────────────────────────┐ │
│  │   热门问题 1016px       │ │
│  └────────────────────────┘ │
└─────────────────────────────┘
```

**优势**：
- ✅ 完美对齐：所有内容左右边缘与顶部导航栏内容对齐
- ✅ 响应式：自动适配不同屏幕宽度
- ✅ 可维护：修改 padding 时所有组件自动调整
- ✅ 语义清晰：通过 CSS 变量明确表达设计意图

## 后续优化建议

1. **超时返回**：60 秒无操作自动返回首页（保护隐私）
2. **语音输入**：在顶部导航栏添加语音输入快捷按钮
3. **字体调优**：根据实际设备测试进一步调整字号和行高
4. **无障碍支持**：添加 ARIA 标签和键盘导航支持
5. **服务栏滚动指示**：添加左右箭头提示可滚动查看更多服务