Parcourir la source

feat(web): optimize font sizes for 1080x1920 kiosk display

- Increase common problem header title from 1.75rem to 1.875rem
- Add header subject font size styling (1rem) in SsCommonProblem component
- Enlarge problem list item font size to 1.125rem
- Increase input box text size to 1.125rem and limit text to 1.125rem
- Boost service component title from 1.25rem to 1.375rem
- Add service subject font size styling (1rem)
- Optimize chat reply quota and source text sizes (0.88rem → 1rem range)
- Enhance markdown content font sizes (1.125rem → 1.25rem for body text)
- Increase markdown heading sizes across h1-h4 by 0.125rem increments
- Enlarge code block font sizes to 1.125rem
- Increase chat message bubble font size to 1.25rem with improved padding
- Reduce kiosk FAQ list from 5 to 4 items for better layout
- Restructure FAQ section with card wrapper for improved styling
- Hide footer in kiosk chat mode to prevent overlap with FAQ area
- Improve overall readability and visibility on vertical 1080x1920 displays
sy il y a 1 mois
Parent
commit
3ae5b7d29e

+ 6 - 1
web/src/components/SsCommonProblem.vue

@@ -170,14 +170,19 @@ onMounted(() => {
           width: calc(100% - 3.75rem);
 
           .header-title {
-            font-size: 1.75rem; /* 1.5rem → 1.75rem */
+            font-size: 1.875rem; /* 1.75rem → 1.875rem */
             margin-bottom: 0.5rem;
           }
+
+          .header-subject {
+            font-size: 1rem; /* 增大副标题字体 */
+          }
         }
       }
 
       .problem-list {
         .problem-item {
+          font-size: 1.125rem; /* 增大问题列表字体 */
           margin-bottom: 1rem;
         }
       }

+ 6 - 1
web/src/components/SsInputBox.vue

@@ -522,11 +522,16 @@ defineExpose({
         padding: 1.75rem 1.5rem;
         box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.12);
 
+        /* 增大输入框文字大小 */
+        .input-container-input {
+          font-size: 1.125rem;
+        }
+
         .input-buttons {
           font-size: 1.5rem;
 
           .input-buttons-limit {
-            font-size: 1rem;
+            font-size: 1.125rem; /* 1rem → 1.125rem */
           }
 
           .input-buttons-right {

+ 5 - 1
web/src/components/SsService.vue

@@ -246,9 +246,13 @@ onMounted(() => {
           width: calc(100% - 3.5rem);
 
           .title {
-            font-size: 1.25rem; /* 1.125rem → 1.25rem */
+            font-size: 1.375rem; /* 1.25rem → 1.375rem */
             margin-bottom: 0.5rem;
           }
+
+          .subject {
+            font-size: 1rem; /* 增大副标题字体 */
+          }
         }
       }
 

+ 41 - 0
web/src/components/ss_chat/components/SsChatReply.vue

@@ -453,4 +453,45 @@ const refreshProblem = () => {
     }
   }
 }
+
+/* 1080x1920 立式一体机 - 聊天消息字体优化 */
+@media screen and (min-width: 751px) and (max-width: 1200px) and (min-height: 1700px) {
+  .ss-chat-reply {
+    .quota {
+      .quota-intro {
+        .quota-small {
+          .quota-title {
+            font-size: 1rem; /* 0.88rem → 1rem */
+          }
+        }
+
+        .quota-detail {
+          .quota-line {
+            .line-title {
+              font-size: 1rem; /* 0.88rem → 1rem */
+            }
+
+            .line-content {
+              .search-text {
+                font-size: 1rem; /* 0.88rem → 1rem */
+              }
+
+              .source-list {
+                .source-item {
+                  .source-title {
+                    font-size: 1.0625rem; /* 0.94rem → 1.0625rem */
+                  }
+
+                  .source-content {
+                    font-size: 1rem; /* 0.88rem → 1rem */
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

+ 43 - 0
web/src/components/ss_chat/components/SsChatReplyMarkdown.vue

@@ -610,4 +610,47 @@ watch(() => props.content, (newVal, oldVal) => {
 
 
 }
+
+/* 1080x1920 立式一体机 - Markdown 内容字体优化 */
+@media screen and (min-width: 751px) and (max-width: 1200px) and (min-height: 1700px) {
+  .markdown {
+    .content {
+      font-size: 1.25rem; /* 1.125rem → 1.25rem */
+
+      p {
+        font-size: 1.25rem; /* 1.125rem → 1.25rem */
+        line-height: 1.8;
+      }
+
+      li {
+        font-size: 1.25rem; /* 1.125rem → 1.25rem */
+        line-height: 1.8;
+      }
+
+      h1 {
+        font-size: 2.125rem; /* 2rem → 2.125rem */
+      }
+
+      h2 {
+        font-size: 1.875rem; /* 1.75rem → 1.875rem */
+      }
+
+      h3 {
+        font-size: 1.625rem; /* 1.5rem → 1.625rem */
+      }
+
+      h4 {
+        font-size: 1.375rem; /* 1.25rem → 1.375rem */
+      }
+
+      code {
+        font-size: 1.125rem; /* 1rem → 1.125rem */
+      }
+
+      pre code {
+        font-size: 1.125rem; /* 1rem → 1.125rem */
+      }
+    }
+  }
+}
 </style>

+ 13 - 0
web/src/components/ss_chat/components/SsChatSendMessage.vue

@@ -77,4 +77,17 @@ const editMessage = () => {
     }
   }
 }
+
+/* 1080x1920 立式一体机 - 发送消息字体优化 */
+@media screen and (min-width: 751px) and (max-width: 1200px) and (min-height: 1700px) {
+  .ss-chat-send-message {
+    .message {
+      .bubble {
+        font-size: 1.25rem; /* 1.125rem → 1.25rem */
+        line-height: 1.6;
+        padding: 1.25rem 1.875rem;
+      }
+    }
+  }
+}
 </style>

+ 72 - 47
web/src/views/HomeView.vue

@@ -47,10 +47,10 @@ const isKioskDevice = ref(false)
 
 /**
  * 立式一体机模式下的常见问题列表
- * 从 global.commonProblem 派生,取前 5 条用于底部展示
+ * 从 global.commonProblem 派生,取前 4 条用于底部展示
  */
 const kioskFaqList = computed(() => {
-  return global.commonProblem.slice(0, 5)
+  return global.commonProblem.slice(0, 4)
 })
 
 const inputBox = ref<InstanceType<typeof SsInputBox> | null>(null)
@@ -258,10 +258,12 @@ watch(() => global.inputLine, () => {
           
           <!-- 立式一体机对话模式:底部常见问题展示区 -->
           <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 class="faq-card">
+              <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>
@@ -295,7 +297,8 @@ watch(() => global.inputLine, () => {
             </div>
           </div>
         </div>
-        <ss-footer @loaded="componentLoaded"/>
+        <!-- 立式一体机对话模式下隐藏 Footer,避免与底部 FAQ 区域重叠 -->
+        <ss-footer v-if="!(global.spread && isKioskDevice)" @loaded="componentLoaded"/>
       </div>
     </div>
     <ss-hotline ref="hotlineRef"/>
@@ -471,41 +474,45 @@ watch(() => global.inputLine, () => {
             .kiosk-bottom-faq {
               flex-shrink: 0;
               height: 420px;
-              background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
-              border-top: 1px solid #E5E7EB;
-              padding: 2rem 0;
+              background: transparent;
+              padding: 0;
+              margin-top: -2rem;
               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 {
+              .faq-card {
                 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;
+                padding: 2rem;
+                background: #ffffff; /* 白色卡片背景 */
+
+                .faq-title {
+                  font-size: 1.75rem;
+                  font-weight: 600;
+                  color: #101333;
+                  margin-bottom: 1.5rem;
+                  text-align: left; /* 左对齐 */
+                }
+
+                .faq-list {
+                  display: flex;
+                  flex-direction: column;
+                  gap: 1rem;
+
+                  .faq-item {
+                    font-size: 1.25rem;
+                    color: #545764;
+                    line-height: 1.6;
+                    padding: 0.75rem 1rem;
+                    background: #ffffff;
+                    border-radius: 0.75rem;
+                    border: 1px solid #D5D6D8;
+                    /* 仅展示模式:不可点击 */
+                    cursor: default;
+                    transition: none;
+                  }
                 }
               }
             }
@@ -533,25 +540,44 @@ watch(() => global.inputLine, () => {
         display: flex;
         align-items: center;
         gap: 0.5rem;
-        padding: 0.75rem 1.5rem;
-        background: #2942D4;
-        color: #ffffff;
-        border-radius: 0.75rem;
+        padding: 0.875rem 2.5rem;
+        border-radius: 3.125rem; /* 胶囊形状 */
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        background: linear-gradient(145deg, #d4ebf7, #b8daf0);
+        box-shadow: 
+          -10px -10px 20px rgba(255, 255, 255, 0.8),
+          10px 10px 20px rgba(176, 210, 232, 0.6),
+          inset 1px 1px 0px rgba(255, 255, 255, 1);
+        color: #5a8fb5;
         font-size: 1.125rem;
-        font-weight: 500;
+        font-weight: 400;
+        letter-spacing: 0.125rem;
         cursor: pointer;
         transition: all 0.3s ease;
-        min-width: 120px;
-        min-height: 60px;
+        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
+        min-width: 100px;
+        min-height: 50px;
         justify-content: center;
 
         &:hover {
-          background: #1e32a8;
-          transform: scale(1.02);
+          transform: translateY(-2px);
+          box-shadow: 
+            -12px -12px 24px rgba(255, 255, 255, 0.9),
+            12px 12px 24px rgba(176, 210, 232, 0.7),
+            inset 1px 1px 0px rgba(255, 255, 255, 1);
+        }
+
+        &:active {
+          transform: translateY(0);
+          background: #b8daf0;
+          box-shadow: 
+            inset 6px 6px 12px rgba(176, 210, 232, 0.6),
+            inset -6px -6px 12px rgba(255, 255, 255, 0.8);
+          border: 1px solid transparent;
         }
 
         .back-icon {
-          font-size: 1.5rem;
+          font-size: 1.25rem;
         }
       }
 
@@ -574,7 +600,6 @@ watch(() => global.inputLine, () => {
       right: 0;
       height: 100px; /* 从 120px 减小到 100px */
       background: #ffffff;
-      border-bottom: 1px solid #E5E7EB;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -630,7 +655,7 @@ watch(() => global.inputLine, () => {
 
             .service-title {
               color: #101333;
-              font-size: 1rem;
+              font-size: 1.125rem; /* 1rem → 1.125rem */
               font-weight: 600;
               line-height: 1.2;
             }