背景图铺满

app/components/chat.module.scss

@@ -17,18 +17,18 @@
   background-size: cover;
   background-position: center;
   background-color: var(--white);
-  
+
   .attach-image-mask {
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: all ease 0.2s;
   }
-  
+
   .attach-image-mask:hover {
     opacity: 1;
   }
-  
+
   .delete-image {
     width: 24px;
     height: 24px;
@@ -45,7 +45,7 @@
 .chat-input-actions {
   display: flex;
   flex-wrap: wrap;
-  
+
   .chat-input-action {
     display: inline-flex;
     border-radius: 20px;
@@ -61,11 +61,11 @@
     height: 16px;
     width: var(--icon-width);
     overflow: hidden;
-    
+
     &:not(:last-child) {
       margin-right: 5px;
     }
-    
+
     .text {
       white-space: nowrap;
       padding-left: 5px;
@@ -74,19 +74,19 @@
       transition: all ease 0.3s;
       pointer-events: none;
     }
-    
+
     &:hover {
       --delay: 0.5s;
       width: var(--full-width);
       transition-delay: var(--delay);
-      
+
       .text {
         transition-delay: var(--delay);
         opacity: 1;
         transform: translate(0);
       }
     }
-    
+
     .text,
     .icon {
       display: flex;
@@ -103,7 +103,7 @@
   display: flex;
   justify-content: center;
   width: calc(100% - 40px);
-  
+
   .prompt-toast-inner {
     display: flex;
     justify-content: center;
@@ -111,14 +111,14 @@
     font-size: 12px;
     background-color: var(--white);
     color: var(--black);
-    
+
     border: var(--border-in-light);
     box-shadow: var(--card-shadow);
     padding: 10px 20px;
     border-radius: 100px;
-    
+
     animation: slide-in-from-top ease 0.3s;
-    
+
     .prompt-toast-content {
       margin-left: 10px;
     }
@@ -132,7 +132,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  
+
   .section-title-action {
     display: flex;
     align-items: center;
@@ -151,46 +151,46 @@
     border-radius: 4px;
     margin-top: 4px;
     margin-bottom: 4px;
-    
+
     &:hover {
       opacity: 1;
       background-color: rgba(0, 0, 0, 0.05);
     }
   }
-  
+
   .context-prompt-row {
     display: flex;
     justify-content: center;
     width: 100%;
-    
+
     &:hover {
       .context-drag {
         opacity: 1;
       }
     }
-    
+
     .context-drag {
       display: flex;
       align-items: center;
       opacity: 0.5;
       transition: all ease 0.3s;
     }
-    
+
     .context-role {
       margin-right: 10px;
     }
-    
+
     .context-content {
       flex: 1;
       max-width: 100%;
       text-align: left;
     }
-    
+
     .context-delete-button {
       margin-left: 10px;
     }
   }
-  
+
   .context-prompt-button {
     flex: 1;
   }
@@ -198,7 +198,7 @@
 
 .memory-prompt {
   margin: 20px 0;
-  
+
   .memory-prompt-content {
     background-color: var(--white);
     color: var(--black);
@@ -213,62 +213,62 @@
 .clear-context {
   margin: 20px 0 0 0;
   padding: 4px 0;
-  
+
   border-top: var(--border-in-light);
   border-bottom: var(--border-in-light);
   box-shadow: var(--card-shadow) inset;
-  
+
   display: flex;
   justify-content: center;
   align-items: center;
-  
+
   color: var(--black);
   transition: all ease 0.3s;
   cursor: pointer;
   overflow: hidden;
   position: relative;
   font-size: 12px;
-  
+
   animation: slide-in ease 0.3s;
-  
+
   $linear: linear-gradient(to right,
-          rgba(0, 0, 0, 0),
-          rgba(0, 0, 0, 1),
-          rgba(0, 0, 0, 0));
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 1),
+      rgba(0, 0, 0, 0));
   mask-image: $linear;
-  
+
   @mixin show {
     transform: translateY(0);
     position: relative;
     transition: all ease 0.3s;
     opacity: 1;
   }
-  
+
   @mixin hide {
     transform: translateY(-50%);
     position: absolute;
     transition: all ease 0.1s;
     opacity: 0;
   }
-  
+
   &-tips {
     @include show;
     opacity: 0.5;
   }
-  
+
   &-revert-btn {
     color: var(--primary);
     @include hide;
   }
-  
+
   &:hover {
     opacity: 1;
     border-color: var(--primary);
-    
+
     .clear-context-tips {
       @include hide;
     }
-    
+
     .clear-context-revert-btn {
       @include show;
     }
@@ -280,37 +280,26 @@
   flex-direction: column;
   position: relative;
   height: 100%;
+  background-image: url("/chat-bg.jpg");
+  /* 使背景图片按比例填充容器 */
+  background-size: cover;
+  /* 居中显示背景图片 */
+  background-position: center;
+  /* 避免重复 */
+  background-repeat: no-repeat;
 }
 
-/* 透明遮罩
-.chat-body::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.3);
-}
-*/
-
 .chat-body {
   flex: 1;
   overflow: auto;
   overflow-x: hidden;
   padding: 20px;
   padding-bottom: 40px;
-  position: relative;
-  overscroll-behavior: none;
-  background-image: url("/chat-bg.jpg");
-  background-size: cover; /* 使背景图片按比例填充容器 */
-  background-position: center; /* 居中显示背景图片 */
-  background-repeat: no-repeat; /* 避免重复 */
 }
 
 .chat-body-main-title {
   cursor: pointer;
-  
+
   &:hover {
     text-decoration: none;
   }
@@ -325,7 +314,7 @@
 .chat-message {
   display: flex;
   flex-direction: row;
-  
+
   &:last-child {
     animation: slide-in ease 0.3s;
   }
@@ -334,7 +323,7 @@
 .chat-message-user {
   display: flex;
   flex-direction: row-reverse;
-  
+
   .chat-message-header {
     flex-direction: row-reverse;
   }
@@ -344,7 +333,7 @@
   margin-top: 20px;
   display: flex;
   align-items: center;
-  
+
   .chat-message-actions {
     display: flex;
     box-sizing: border-box;
@@ -356,7 +345,7 @@
     margin: 0 10px;
     opacity: 0;
     pointer-events: none;
-    
+
     .chat-input-actions {
       display: flex;
       flex-wrap: nowrap;
@@ -369,12 +358,12 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  
+
   &:hover {
     .chat-message-edit {
       opacity: 0.9;
     }
-    
+
     .chat-message-actions {
       opacity: 1;
       pointer-events: all;
@@ -383,13 +372,13 @@
   }
 }
 
-.chat-message-user > .chat-message-container {
+.chat-message-user>.chat-message-container {
   align-items: flex-end;
 }
 
 .chat-message-avatar {
   position: relative;
-  
+
   .chat-message-edit {
     position: absolute;
     height: 100%;
@@ -400,12 +389,12 @@
     justify-content: center;
     opacity: 0;
     transition: all ease 0.3s;
-    
+
     button {
       padding: 7px;
     }
   }
-  
+
   /* Specific styles for iOS devices */
   @media screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
     @supports (-webkit-touch-callout: none) {
@@ -469,12 +458,12 @@
 
 @media only screen and (max-width: 600px) {
   $calc-image-width: calc(100vw / 3 * 2 / var(--image-count));
-  
+
   .chat-message-item-image-multi {
     width: $calc-image-width;
     height: $calc-image-width;
   }
-  
+
   .chat-message-item-image {
     max-width: calc(100vw / 3 * 2);
   }
@@ -483,14 +472,14 @@
 @media screen and (min-width: 600px) {
   $max-image-width: calc(calc(1200px - var(--sidebar-width)) / 3 * 2 / var(--image-count));
   $image-width: calc(calc(var(--window-width) - var(--sidebar-width)) / 3 * 2 / var(--image-count));
-  
+
   .chat-message-item-image-multi {
     width: $image-width;
     height: $image-width;
     max-width: $max-image-width;
     max-height: $max-image-width;
   }
-  
+
   .chat-message-item-image {
     max-width: calc(calc(1200px - var(--sidebar-width)) / 3 * 2);
   }
@@ -510,9 +499,9 @@
   z-index: 1;
 }
 
-.chat-message-user > .chat-message-container > .chat-message-item {
+.chat-message-user>.chat-message-container>.chat-message-item {
   background-color: var(--second);
-  
+
   &:hover {
     min-width: 0;
   }
@@ -527,7 +516,7 @@
   flex-direction: column;
   border-top: var(--border-in-light);
   box-shadow: var(--card-shadow);
-  
+
   .chat-input-actions {
     .chat-input-action {
       margin-bottom: 10px;
@@ -548,13 +537,13 @@
   overflow: auto;
   display: flex;
   flex-direction: column-reverse;
-  
+
   background-color: var(--white);
   border: var(--border-in-light);
   border-radius: 10px;
   margin-bottom: 10px;
   box-shadow: var(--shadow);
-  
+
   .prompt-hint {
     color: var(--black);
     padding: 6px 10px;
@@ -564,24 +553,24 @@
     border: transparent 1px solid;
     margin: 4px;
     border-radius: 8px;
-    
+
     &:not(:last-child) {
       margin-top: 0;
     }
-    
+
     .hint-title {
       font-size: 12px;
       font-weight: bolder;
-      
+
       @include single-line();
     }
-    
+
     .hint-content {
       font-size: 12px;
-      
+
       @include single-line();
     }
-    
+
     &-selected,
     &:hover {
       border-color: var(--primary);
@@ -624,7 +613,7 @@
 .chat-input-send {
   background-color: var(--primary);
   color: white;
-  
+
   position: absolute;
   right: 30px;
   bottom: 32px;
@@ -634,7 +623,7 @@
   .chat-input {
     font-size: 16px;
   }
-  
+
   .chat-input-send {
     bottom: 30px;
   }

app/components/chat.tsx

@@ -15,6 +15,7 @@ import RenameIcon from "../icons/rename.svg";
 import ExportIcon from "../icons/share.svg";
 import ReturnIcon from "../icons/return.svg";
 import CopyIcon from "../icons/copy.svg";
+import macosSrc from "../icons/macos.png";
 import LoadingIcon from "../icons/three-dots.svg";
 import LoadingButtonIcon from "../icons/loading.svg";
 import PromptIcon from "../icons/prompt.svg";
@@ -1401,16 +1402,20 @@ function _Chat() {
             </div>
           </div>
         )} */}
-
-        <div className={`window-header-title ${styles["chat-body-title"]}`}>
-          <div
-            className={`window-header-main-title ${styles["chat-body-main-title"]}`}
-          // onClickCapture={() => setIsEditingMessage(true)}
-          >
-            建科小K
+        <div style={{ display: 'flex', alignItems: 'center' }} className={`window-header-title ${styles["chat-body-title"]}`}>
+          <div>
+            <img style={{ width: 44, height: 44 }} src={macosSrc.src} />
           </div>
-          <div className="window-header-sub-title">
-            {Locale.Chat.SubTitle(session.messages.length)}
+          <div>
+            <div
+              className={`window-header-main-title ${styles["chat-body-main-title"]}`}
+            // onClickCapture={() => setIsEditingMessage(true)}
+            >
+              建科小K
+            </div>
+            <div className="window-header-sub-title">
+              {Locale.Chat.SubTitle(session.messages.length)}
+            </div>
           </div>
         </div>
         <div className="window-actions">

app/styles/window.scss

@@ -1,6 +1,6 @@
 .window-header {
   padding: 14px 20px;
-  border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
+  border-bottom: var(--border-in-light);
   position: relative;
 
   display: flex;
@@ -9,6 +9,7 @@
 }
 
 .window-header-title {
+  color: #FFFFFF;
   max-width: calc(100% - 100px);
   overflow: hidden;