Bläddra i källkod

修复移动端窄屏按钮不在一行的问题

Ryuiso 5 månader sedan
förälder
incheckning
12ef48e857
2 ändrade filer med 54 tillägg och 58 borttagningar
  1. 3 1
      app/components/DeepSeekHomeChat.tsx
  2. 51 57
      app/components/chat.module.scss

+ 3 - 1
app/components/DeepSeekHomeChat.tsx

@@ -105,7 +105,9 @@ export type ChatMessage = RequestMessage & {
 
 export const BOT_HELLO: ChatMessage = createMessage({
   role: "assistant",
-  content: '你好,我是小智,很高兴见到你。我可以帮你写代码、回答问题、提供建议等等。如果你有任何问题或者需要帮助,请随时告诉我。我会尽力为你提供最好的服务。',
+  content: '你好,我是小智~\n' +
+      '我可以帮助你快速查询作业指导书、规范条文、公司信息等内容,如需获取上述内容,请点击上方导航栏中的「专业知识」或「职能管理」,选择相应的智能体进行提问。无论是现场技术,还是制度流程,我都会尽力为你解答!\n' +
+      '请注意:在这个对话框内,我只能请DeepSeek来帮忙回答常见通用问题哦!',
 });
 
 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {

+ 51 - 57
app/components/chat.module.scss

@@ -788,73 +788,41 @@
     bottom: 30px;
   }
   
-  // 移动端输入框底部按钮区域优化
-  .chat-input-bottom-bar {
-    padding: 6px 12px 12px 12px;
-    gap: 8px;
-    
-    .left-options {
-      gap: 6px;
-      flex-wrap: wrap;
-      
-      .option-item {
-        margin-right: 6px;
-        margin-bottom: 4px;
-      }
-    }
-    
-    .right-actions {
-      gap: 6px;
-      flex-shrink: 0;
-      
-      .action-icon {
-        width: 32px;
-        height: 32px;
-      }
-    }
-  }
-  
   // 移动端输入框内部优化
   .chat-input-panel-inner {
     min-height: 100px;
     max-height: 120px;
   }
   
-  // 移动端按钮样式优化
-  .chat-input-bottom-bar > div {
-    &:last-child {
-      // 确保发送按钮在最右侧且不被挤压
-      flex-shrink: 0;
-      margin-left: auto;
-    }
-  }
+
   
-  // 移动端发送按钮和上传按钮优化
-  .chat-input-bottom-bar > div:last-child > div {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    
-    // 触摸反馈
-    &:active {
-      transform: scale(0.95);
-    }
-    
-    // 发送按钮特殊样式
-    &:last-child {
-      background: #4357d2;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+  // 针对特定手机屏幕的额外优化
+  @media only screen and (max-width: 480px) {
+    // 针对DeepSeekHomeChat组件的按钮优化
+    .chat-input-panel + div[style*="display: flex"] {
+      padding: 4px 8px !important;
+      gap: 4px !important;
       
-      &:hover {
-        background: #3a4bc7;
+      > div:first-child {
+        gap: 8px !important;
+        flex-wrap: wrap !important;
+        
+        > div {
+          padding: 0 8px !important;
+          height: 26px !important;
+          font-size: 11px !important;
+          margin-right: 8px !important;
+          
+          img {
+            height: 18px !important;
+          }
+        }
       }
       
-      &:active {
-        background: #2f3da8;
+      > div:last-child {
+        width: 28px !important;
+        height: 28px !important;
+        flex-shrink: 0 !important;
       }
     }
   }
@@ -865,4 +833,30 @@
     line-height: 1.4;
     padding: 12px 16px;
   }
+  
+  // 通用移动端按钮容器优化
+  .chat-input-panel + div[style*="display: flex"] {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    flex-wrap: nowrap !important;
+    padding: 6px 12px !important;
+    gap: 8px !important;
+    
+    > div:first-child {
+      display: flex !important;
+      align-items: center !important;
+      gap: 8px !important;
+      flex-wrap: wrap !important;
+      flex: 1 !important;
+      min-width: 0 !important;
+    }
+    
+    > div:last-child {
+      flex-shrink: 0 !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+    }
+  }
 }