立式一体机对话界面优化

设计目标

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

核心改动

1. 设备检测

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

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

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

3. 统一宽度对齐

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

对齐策略：使用 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，满足最小触控目标

服务快捷栏（120px）

复用原有设计：保留 SsService 组件的渐变背景、阴影效果
横向排列：5个服务项横向滚动显示
样式类复用：使用与原组件相同的 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)
尺寸：每项 140×90px，图标半透明显示

中部对话区

使用 flexbox 自适应高度
包含消息滚动区域和输入框
输入框位置确保在 Y≤1440px 范围内（220px + 1220px）

底部常见问题区（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 隔离立式一体机样式
✅ 视觉一致性：保持原有的渐变背景、阴影、图标等视觉元素

使用说明

触发条件

当同时满足以下条件时，自动启用立式一体机布局：

窗口宽度：1000-1200px
窗口高度：1700-2000px
用户进入对话模式（global.spread === true）

退出方式

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

可操作区域分布

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

宽度对齐说明

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

实现方式：

顶部导航栏定义内容边界：padding: 0 2rem

使用 CSS 变量计算内容宽度：

--kiosk-content-padding: 2rem;
--kiosk-content-width: calc(100vw - var(--kiosk-content-padding) * 2);

所有内容区域使用相同的宽度变量

应用组件：

服务快捷栏：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 变量明确表达设计意图

后续优化建议

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

KIOSK_LAYOUT_OPTIMIZATION.md 8.1 KB 文件历史 原始文件