feat(web): optimize kiosk layout for 1080x1920 vertical displays

- Add comprehensive kiosk layout optimization documentation with design principles and implementation details
- Implement device detection for 1080x1920 vertical displays in HomeView and SsInputBox components
- Add four-segment layout structure: top navigation (100px) + service bar (120px) + chat area (flex) + FAQ section (420px)
- Introduce unified content width alignment using CSS variables (--kiosk-content-width) across all sections
- Add kiosk top navigation bar with back button and title, ensuring all interactive elements within Y≤1500px
- Add service quick access bar reusing original SsService component design with gradient backgrounds
- Add bottom FAQ display section showing first 5 common problems (non-interactive)
- Hide sidebar in kiosk conversation mode to maximize chat area space
- Define responsive CSS variables for consistent padding and width calculations across kiosk components
- Ensure all operable elements positioned in easily reachable area for standing kiosk users

web/KIOSK_LAYOUT_OPTIMIZATION.md

@@ -0,0 +1,190 @@
+# 立式一体机对话界面优化
+
+## 设计目标
+
+针对 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 变量定义统一的内容宽度
+```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 隔离立式一体机样式  
+✅ **视觉一致性**：保持原有的渐变背景、阴影、图标等视觉元素
+
+## 使用说明
+
+### 触发条件
+当同时满足以下条件时，自动启用立式一体机布局：
+1. 窗口宽度：1000-1200px
+2. 窗口高度：1700-2000px
+3. 用户进入对话模式（`global.spread === true`）
+
+### 退出方式
+点击顶部"返回首页"按钮，调用 `goHome()` 方法重置状态。
+
+## 可操作区域分布
+
+| 区域 | Y 坐标范围 | 高度 | 可操作性 |
+|------|-----------|------|---------|
+| 顶部导航 | 0-100px | 100px | ✅ 强烈推荐 |
+| 服务快捷栏 | 100-220px | 120px | ✅ 强烈推荐 |
+| 对话区域 | 220-1500px | ~1280px | ✅ 核心操作区 |
+| 常见问题 | 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. **服务栏滚动指示**：添加左右箭头提示可滚动查看更多服务

web/src/components/SsInputBox.vue

@@ -27,6 +27,16 @@ let scrollDirection = 'down'
 let scrollFlag = false;
 let beforeScrollTop = 0;
 
+/**
+ * 检测是否为立式一体机设备
+ * 用于应用特定的布局样式
+ */
+const isKioskDevice = computed(() => {
+  const w = window.innerWidth
+  const h = window.innerHeight
+  return (w >= 1000 && w <= 1200 && h >= 1700 && h <= 2000)
+})
+
 const sendMessageFlag = computed(() => {
   let msg = message.value.trim();
   return msg == '' || global.inReply
@@ -251,7 +261,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="chat-container" :class="{spread: global.spread}">
+  <div class="chat-container" :class="{spread: global.spread, 'kiosk-chat': isKioskDevice && global.spread}">
     <el-scrollbar ref="scrollbarRef" class="ss-chat" @scroll="handleScroll">
       <div class="ss-chat-container">
         <template v-for="(item, idx) in replyList">
@@ -486,13 +496,29 @@ defineExpose({
 /* 1080x1920 中等尺寸设备 - 输入框优化 */
 @media screen and (min-width: 751px) and (max-width: 1200px) and (min-height: 1700px) {
   .chat-container {
+    /* 定义统一的内容区域宽度：与顶部导航栏对齐 */
+    --kiosk-content-padding: 2rem;
+    --kiosk-content-width: calc(100vw - var(--kiosk-content-padding) * 2);
+
+    .ss-chat {
+      /* 聊天容器：与顶部导航栏内容区域对齐 */
+      .ss-chat-container {
+        max-width: var(--kiosk-content-width);
+        width: 100%;
+        margin: 0 auto;
+        padding: 0;
+      }
+    }
+
     .input-box {
       margin-bottom: 4rem;
-      margin-right: 1.5rem;
-      margin-left: 1.5rem;
+      margin-right: 0;
+      margin-left: 0;
 
       .input-container {
-        max-width: calc(1100px + 2rem); /* 与 main-box 宽度对齐 */
+        max-width: var(--kiosk-content-width); /* 与顶部导航栏内容区域对齐 */
+        width: 100%;
+        margin: 0 auto;
         padding: 1.75rem 1.5rem;
         box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.12);
 
@@ -528,6 +554,21 @@ defineExpose({
         }
       }
     }
+
+    /* 立式一体机对话模式：输入框固定在对话区底部 */
+    &.kiosk-chat {
+      .ss-chat {
+        flex: 1;
+        height: auto !important;
+      }
+
+      .input-box {
+        flex-shrink: 0;
+        margin-bottom: 2rem;
+        position: relative;
+        /* 确保输入框在 Y≤1400px 范围内（100px 顶部导航 + 最多 1300px 对话区） */
+      }
+    }
   }
 }
 

web/src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref, watch, onMounted, defineAsyncComponent} from 'vue'
+import {ref, watch, onMounted, defineAsyncComponent, computed} from 'vue'
 
 import {BasicApi} from '@/api/basic'
 import {RequestError} from '@/utils/request'
@@ -39,6 +39,20 @@ const mainBoxFlag = ref(true)
 const timeoutFlag = ref()
 const mainContentClass = ref({})
 
+/**
+ * 立式一体机设备检测
+ * 检测条件：宽度 1000-1200px，高度 1700-2000px
+ */
+const isKioskDevice = ref(false)
+
+/**
+ * 立式一体机模式下的常见问题列表
+ * 从 global.commonProblem 派生，取前 5 条用于底部展示
+ */
+const kioskFaqList = computed(() => {
+  return global.commonProblem.slice(0, 5)
+})
+
 const inputBox = ref<InstanceType<typeof SsInputBox> | null>(null)
 const commonProblem = ref<InstanceType<typeof SsCommonProblem> | null>(null)
 const hotlineRef = ref<InstanceType<typeof SsHotline> | null>(null)
@@ -118,11 +132,51 @@ const openPolicyFile = () => {
   }
 }
 
+/**
+ * 返回首页：重置对话状态
+ */
+const goHome = () => {
+  global.setSpread(false)
+  global.setMenuSwitch(false)
+  global.setInReply(false)
+}
+
+/**
+ * 获取服务项样式类（复用 SsService 组件逻辑）
+ */
+const getServiceClass = (index: number) => {
+  switch (index % 5) {
+    case 0:
+      return 'hover-scale'
+    case 1:
+      return 'hover-scale yellow'
+    case 2:
+      return 'center'
+    case 3:
+      return 'hover-scale yellow'
+    case 4:
+      return 'hover-scale'
+    default:
+      return ''
+  }
+}
+
+/**
+ * 检测是否为立式一体机设备
+ * 判断依据：屏幕宽度 1000-1200px，高度 1700-2000px
+ */
+const detectKioskDevice = () => {
+  const w = window.innerWidth
+  const h = window.innerHeight
+  isKioskDevice.value = (w >= 1000 && w <= 1200 && h >= 1700 && h <= 2000)
+}
+
 const initPage = () => {
   let w = window.screen.width
   if (w <= 750) {
     global.setMenuSwitch(false)
   }
+  detectKioskDevice()
   setMainContentClass()
 }
 
@@ -155,8 +209,40 @@ watch(() => global.inputLine, () => {
 
 <template>
   <div class="root">
-    <ss-header @loaded="componentLoaded"/>
+    <!-- 1080x1920 立式一体机对话模式：顶部导航栏替代 Header -->
+    <div v-if="global.spread && isKioskDevice" class="kiosk-top-nav">
+      <div class="back-home-btn" @click="goHome">
+        <span class="back-icon">←</span>
+        <span>返回首页</span>
+      </div>
+      <div class="app-title">商小川智能助手</div>
+      <div class="nav-spacer"></div>
+    </div>
+    
+    <!-- 立式一体机对话模式：服务快捷入口栏（复用原有设计） -->
+    <div v-if="global.spread && isKioskDevice" class="kiosk-service-bar">
+      <div class="service-bar-container">
+        <div 
+          v-for="(item, index) in global.categories" 
+          :key="item.id"
+          class="service-quick-item"
+          :class="getServiceClass(index)"
+          @click="loadService(item.id, item.categoryName, item.imgUrl)"
+        >
+          <div class="service-item-content">
+            <div class="service-title">{{ item.categoryName }}</div>
+          </div>
+          <el-image class="service-item-image" fit="contain" :src="getImageUrl(item.imgUrl)"/>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 默认 Header（非立式一体机模式） -->
+    <ss-header v-else @loaded="componentLoaded"/>
+    
+    <!-- 侧边栏导航：立式一体机对话模式下隐藏 -->
     <ss-navigation
+        v-if="!(global.spread && isKioskDevice)"
         @open-hotline="openHotlineDialog"
         @open-opinion="openOpinionDialog"
         @quick-send="quickSend"
@@ -164,11 +250,23 @@ watch(() => global.inputLine, () => {
         @load-common-problem="loadCommonProblem"
         @loaded="componentLoaded"
     />
-    <div class="container" :class="{spread:  global.spread, 'menu-close': !global.menuSwitch}">
+    <div class="container" :class="{spread: global.spread, 'menu-close': !global.menuSwitch, 'kiosk-mode': isKioskDevice && global.spread}">
       <div class="main">
         <div class="main-content" :class="mainContentClass">
           <ss-headline v-if="mainBoxFlag"/>
           <ss-input-box ref="inputBox" @loaded="componentLoaded"/>
+          
+          <!-- 立式一体机对话模式：底部常见问题展示区 -->
+          <div v-if="global.spread && isKioskDevice" class="kiosk-bottom-faq">
+            <div class="faq-title">热门问题</div>
+            <div class="faq-list">
+              <div v-for="(item, index) in kioskFaqList" :key="index" class="faq-item">
+                {{ item.questionContent }}
+              </div>
+            </div>
+          </div>
+          
+          <!-- 默认布局：服务导航 + 常见问题 -->
           <div v-if="mainBoxFlag" class="main-box">
             <div class="ss-row ss-row-vertical">
               <div class="ss-col ss-col-service is-mobile">
@@ -293,13 +391,17 @@ watch(() => global.inputLine, () => {
   }
 }
 
-/* 1080x1920 中等尺寸设备优化 */
+/* 1080x1920 立式一体机专用布局优化 */
 @media screen and (min-width: 751px) and (max-width: 1200px) and (min-height: 1700px) {
   .root {
+    /* 定义统一的内容区域宽度：屏幕宽度减去左右 padding */
+    --kiosk-content-padding: 2rem;
+    --kiosk-content-width: calc(100vw - var(--kiosk-content-padding) * 2);
+
     .container {
       .main {
         .main-content {
-          padding: 5rem 0 5rem 0; /* 增加底部 padding 为 Footer 留空间 */
+          padding: 5rem 0 5rem 0;
 
           .main-box {
             max-width: calc(1100px + 2rem);
@@ -342,6 +444,215 @@ watch(() => global.inputLine, () => {
           }
         }
       }
+
+      /* 立式一体机对话模式：三段式布局 */
+      &.kiosk-mode {
+        padding-left: 0 !important;
+
+        .main {
+          .main-content {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            padding: 220px 0 0 0; /* 顶部留出导航栏(100px) + 服务栏(120px)空间 */
+
+            /* 对话区域：占据主要空间 */
+            .chat-container {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              min-height: 0; /* 允许 flex 子元素收缩 */
+
+              /* 聊天消息区域：保持原有宽度（768px），无需覆盖 */
+              /* 输入框：保持原有宽度（768px），无需覆盖 */
+            }
+
+            /* 底部常见问题展示区：固定 420px，与输入框宽度对齐 */
+            .kiosk-bottom-faq {
+              flex-shrink: 0;
+              height: 420px;
+              background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
+              border-top: 1px solid #E5E7EB;
+              padding: 2rem 0;
+              overflow: hidden;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+
+              .faq-title {
+                font-size: 1.5rem;
+                font-weight: 600;
+                color: #101333;
+                margin-bottom: 1.5rem;
+                text-align: center;
+              }
+
+              .faq-list {
+                width: var(--kiosk-content-width); /* 与顶部导航栏内容区域对齐 */
+                max-width: 100%;
+                padding: 0;
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+
+                .faq-item {
+                  font-size: 1.125rem;
+                  color: #545764;
+                  line-height: 1.6;
+                  padding: 0.75rem 1rem;
+                  background: #ffffff;
+                  border-radius: 0.75rem;
+                  border: 1px solid #E5E7EB;
+                  /* 仅展示模式：不可点击 */
+                  cursor: default;
+                  transition: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    /* 立式一体机顶部导航栏：固定 100px */
+    .kiosk-top-nav {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 100px;
+      background: #ffffff;
+      border-bottom: 1px solid #E5E7EB;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 2rem;
+      z-index: 1000;
+
+      .back-home-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1.5rem;
+        background: #2942D4;
+        color: #ffffff;
+        border-radius: 0.75rem;
+        font-size: 1.125rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        min-width: 120px;
+        min-height: 60px;
+        justify-content: center;
+
+        &:hover {
+          background: #1e32a8;
+          transform: scale(1.02);
+        }
+
+        .back-icon {
+          font-size: 1.5rem;
+        }
+      }
+
+      .app-title {
+        font-size: 1.75rem;
+        font-weight: 600;
+        color: #101333;
+      }
+
+      .nav-spacer {
+        width: 120px; /* 占位，保持标题居中 */
+      }
+    }
+
+    /* 立式一体机服务快捷入口栏：紧贴顶部导航栏下方，复用原有设计 */
+    .kiosk-service-bar {
+      position: absolute;
+      top: 100px;
+      left: 0;
+      right: 0;
+      height: 120px;
+      background: #ffffff;
+      border-bottom: 1px solid #E5E7EB;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem 0;
+      z-index: 999;
+      overflow: hidden;
+
+      .service-bar-container {
+        width: var(--kiosk-content-width); /* 与顶部导航栏内容区域对齐 */
+        max-width: 100%;
+        margin: 0 auto; /* 居中对齐 */
+        display: flex;
+        gap: 1rem;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding: 0;
+
+        /* 隐藏滚动条但保持可滚动 */
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        .service-quick-item {
+          position: relative;
+          flex-shrink: 0;
+          width: 140px;
+          height: 90px;
+          border-radius: 0.75rem;
+          overflow: hidden;
+          cursor: pointer;
+          transition: transform 0.3s ease;
+          /* 复用原有渐变背景 */
+          background: linear-gradient(180deg, rgba(250, 255, 253, 0.8), rgba(225, 245, 248, 0.8));
+          box-shadow: 0 0.25rem 1.25rem 0 rgba(52, 149, 239, 0.4);
+
+          &.yellow {
+            background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(246, 240, 239, 0.7));
+          }
+
+          &.center {
+            background: linear-gradient(90deg, #c2dff9, #c6e2fa);
+          }
+
+          &.hover-scale:hover {
+            transform: scale(1.05);
+          }
+
+          .service-item-content {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 2;
+            padding: 1rem;
+            display: flex;
+            align-items: center;
+
+            .service-title {
+              color: #101333;
+              font-size: 1rem;
+              font-weight: 600;
+              line-height: 1.2;
+            }
+          }
+
+          .service-item-image {
+            position: absolute;
+            bottom: 0;
+            right: 0.5rem;
+            z-index: 1;
+            width: 4rem;
+            height: 3rem;
+            opacity: 0.2;
+          }
+        }
+      }
     }
   }
 }