feat(web): refactor kiosk device detection to use utility function

- Extract isKioskDevice logic from SsInputBox.vue computed property to reusable utility function
- Import isKioskDevice from useDeviceDetection utility in both HomeView.vue and SsInputBox.vue
- Remove duplicate isKioskDevice ref and detectKioskDevice function from HomeView.vue
- Update all isKioskDevice references to function calls isKioskDevice() throughout components
- Centralize device detection logic for better maintainability and consistency across the application

web/src/components/SsInputBox.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {ref, watch, computed, onMounted, nextTick, defineEmits} from 'vue'
 import {getImageUrl} from '@/utils/common'
+import {isKioskDevice} from '@/utils/useDeviceDetection'
 
 import {Top} from '@element-plus/icons-vue'
 import {useGlobalStore} from '@/stores/global'
@@ -27,16 +28,6 @@ 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
@@ -261,9 +252,9 @@ defineExpose({
 </script>
 
 <template>
-  <div class="chat-container" :class="{spread: global.spread, 'kiosk-chat': isKioskDevice && global.spread}">
+  <div class="chat-container" :class="{spread: global.spread, 'kiosk-chat': isKioskDevice() && global.spread}">
     <!-- 立式一体机模式：输入框在顶部 -->
-    <div v-if="isKioskDevice && global.spread" class="input-box input-box-top" :class="{spread: global.spread}">
+    <div v-if="isKioskDevice() && global.spread" class="input-box input-box-top" :class="{spread: global.spread}">
       <div class="input-container hover-scale scale101">
         <el-input ref="textareaRef" v-model="message" class="input-container-input" placeholder="请输入你想咨询的问题..."
                   :type="global.spread ? 'textarea' : 'text'"
@@ -300,7 +291,7 @@ defineExpose({
     </el-scrollbar>
     
     <!-- 非立式一体机模式：输入框在底部 -->
-    <div v-if="!(isKioskDevice && global.spread)" class="input-box" :class="{spread: global.spread}">
+    <div v-if="!(isKioskDevice() && global.spread)" class="input-box" :class="{spread: global.spread}">
       <div class="input-container hover-scale scale101">
         <el-input ref="textareaRef" v-model="message" class="input-container-input" placeholder="请输入你想咨询的问题..."
                   :type="global.spread ? 'textarea' : 'text'"

web/src/views/HomeView.vue

@@ -3,7 +3,7 @@ import {ref, watch, onMounted, defineAsyncComponent, computed} from 'vue'
 
 import {BasicApi} from '@/api/basic'
 import {RequestError} from '@/utils/request'
-import {isMobile} from "@/utils/useDeviceDetection.ts";
+import {isMobile, isKioskDevice} from "@/utils/useDeviceDetection.ts";
 import {useGlobalStore} from '@/stores/global'
 import {ElMessage} from 'element-plus'
 
@@ -39,12 +39,6 @@ const mainBoxFlag = ref(true)
 const timeoutFlag = ref()
 const mainContentClass = ref({})
 
-/**
- * 立式一体机设备检测
- * 检测条件：宽度 1000-1200px，高度 1700-2000px
- */
-const isKioskDevice = ref(false)
-
 /**
  * 立式一体机模式下的常见问题列表
  * 从 global.commonProblem 派生，取前 4 条用于底部展示
@@ -161,22 +155,11 @@ const getServiceClass = (index: number) => {
   }
 }
 
-/**
- * 检测是否为立式一体机设备
- * 判断依据：屏幕宽度 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()
 }
 
@@ -210,7 +193,7 @@ watch(() => global.inputLine, () => {
 <template>
   <div class="root">
     <!-- 1080x1920 立式一体机对话模式：顶部导航栏替代 Header -->
-    <div v-if="global.spread && isKioskDevice" class="kiosk-top-nav">
+    <div v-if="global.spread && isKioskDevice()" class="kiosk-top-nav">
       <div class="back-home-btn" @click="goHome">
         <span class="back-icon">←</span>
         <span>返回首页</span>
@@ -220,7 +203,7 @@ watch(() => global.inputLine, () => {
     </div>
     
     <!-- 立式一体机对话模式：服务快捷入口栏（复用原有设计） -->
-    <div v-if="global.spread && isKioskDevice" class="kiosk-service-bar">
+    <div v-if="global.spread && isKioskDevice()" class="kiosk-service-bar">
       <div class="service-bar-container">
         <div 
           v-for="(item, index) in global.categories" 
@@ -242,7 +225,7 @@ watch(() => global.inputLine, () => {
     
     <!-- 侧边栏导航：立式一体机对话模式下隐藏 -->
     <ss-navigation
-        v-if="!(global.spread && isKioskDevice)"
+        v-if="!(global.spread && isKioskDevice())"
         @open-hotline="openHotlineDialog"
         @open-opinion="openOpinionDialog"
         @quick-send="quickSend"
@@ -250,14 +233,14 @@ watch(() => global.inputLine, () => {
         @load-common-problem="loadCommonProblem"
         @loaded="componentLoaded"
     />
-    <div class="container" :class="{spread: global.spread, 'menu-close': !global.menuSwitch, 'kiosk-mode': isKioskDevice && global.spread}">
+    <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 v-if="global.spread && isKioskDevice()" class="kiosk-bottom-faq">
             <div class="faq-card">
               <div class="faq-title">热门问题</div>
               <div class="faq-list">
@@ -303,7 +286,7 @@ watch(() => global.inputLine, () => {
           </div>
         </div>
         <!-- 立式一体机对话模式下隐藏 Footer，避免与底部 FAQ 区域重叠 -->
-        <ss-footer v-if="!(global.spread && isKioskDevice)" @loaded="componentLoaded"/>
+        <ss-footer v-if="!(global.spread && isKioskDevice())" @loaded="componentLoaded"/>
       </div>
     </div>
     <ss-hotline ref="hotlineRef"/>