update

docker-compose.yml

@@ -3,7 +3,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: tradus-web:1.3.41
+    image: tradus-web:1.3.42
     container_name: tradus-web
     ports:
       - '6000:80'

src/App.vue

@@ -477,8 +477,8 @@ onUnmounted(() => {
     <button class="menu-button" @click="toggleMobileMenu">
       <svg
         viewBox="0 0 24 24"
-        width="24"
+        width="20"
-        height="24"
+        height="20"
         stroke="currentColor"
         stroke-width="2"
         fill="none"
@@ -1404,19 +1404,24 @@ body {
 .menu-button {
   display: none;
   position: fixed;
-  top: 1rem;
+  top: 0.75rem;
-  left: 1rem;
+  left: 0.75rem;
   z-index: 1000;
   background: none;
   border: none;
   color: var(--color-text-primary);
   cursor: pointer;
-  padding: 0.75rem;
+  padding: 0.5rem;
   border-radius: var(--border-radius);
   background-color: var(--color-bg-secondary);
   border: 1px solid rgba(0, 0, 0, 0.06);
   transition: all 0.2s ease;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .menu-button:hover {
@@ -2513,4 +2518,15 @@ html {
   border-top: 1px solid rgba(255, 255, 255, 0.15);
   background-color: rgba(255, 255, 255, 0.03);
 }
+
+/* 小屏幕优化 */
+@media (max-width: 480px) {
+  .menu-button {
+    top: 0.5rem;
+    left: 0.5rem;
+    width: 36px;
+    height: 36px;
+    padding: 0.4rem;
+  }
+}
 </style>

src/views/ChatAgentView.vue

@@ -896,7 +896,7 @@ const stopStreaming = async () => {
 }
 
 .chat-container {
-  max-width: 1000px;
+  max-width: 800px;
   margin: 0 auto;
   width: 100%;
   height: 100%;
@@ -907,33 +907,45 @@ const stopStreaming = async () => {
 }
 
 .conversation-header {
-  display: flex;
+  padding: 0.6rem 0.75rem;
-  align-items: center;
+  height: 3rem;
-  justify-content: center;
-  padding: 1rem;
-  height: 5.2rem;
-  border-bottom: 1px solid var(--color-border);
   background-color: var(--color-bg-primary);
   position: relative;
 }
 
+.conversation-header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 12px;
+  background: linear-gradient(to bottom, var(--color-bg-primary), transparent);
+  pointer-events: none;
+  z-index: 1;
+}
+
 .conversation-title-container {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: center;
+  gap: 0.25rem;
   cursor: pointer;
+  position: relative;
+  z-index: 2;
 }
 
 .conversation-title {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: 0.85rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--color-text-primary);
+  text-align: center;
 }
 
 .dropdown-icon {
-  width: 18px;
+  width: 14px;
-  height: 18px;
+  height: 14px;
   color: var(--color-text-secondary);
   transition: transform 0.3s ease;
 }
@@ -1182,7 +1194,7 @@ const stopStreaming = async () => {
 }
 
 .example-icon {
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   flex-shrink: 0;
   width: 24px;
   text-align: center;
@@ -1613,7 +1625,7 @@ const stopStreaming = async () => {
     display: flex;
     flex-direction: row;
     margin: 0 auto;
-    max-width: 1000px;
+    max-width: 800px;
   }
 
   .message-input {
@@ -1769,19 +1781,20 @@ const stopStreaming = async () => {
 
   .conversation-header {
     padding: 0.6rem 0.75rem;
+    height: 3rem;
   }
 
-  .conversation-title-container {
+  .conversation-header::after {
-    gap: 0.25rem;
+    height: 12px;
   }
 
   .conversation-title {
-    font-size: 1rem;
+    font-size: 0.85rem;
   }
 
   .dropdown-icon {
-    width: 16px;
+    width: 14px;
-    height: 16px;
+    height: 14px;
   }
 
   /* 移动端让会话操作按钮始终可见 */