style: 优化聊天窗口UI (#1881)

CherryHQ · Feb 18, 2025 · 869e56b · 869e56b
1 parent f99851f
commit 869e56b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/renderer/src/pages/home/Messages/Message.tsx b/src/renderer/src/pages/home/Messages/Message.tsx
@@ -240,6 +240,7 @@ const MessageContentContainer = styled.div`
   justify-content: space-between;
   margin-left: 46px;
   margin-top: 5px;
+  overflow-y: auto;
 `
 
 const MessageFooter = styled.div`

diff --git a/src/renderer/src/pages/home/Messages/MessageGroup.tsx b/src/renderer/src/pages/home/Messages/MessageGroup.tsx
@@ -202,7 +202,7 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
       return props.$selected ? 'block' : 'none'
     }
     if (props.$layout === 'horizontal') {
-      return 'inline-block'
+      return 'inline-flex'
     }
     return 'block'
   }};
@@ -214,7 +214,6 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
         padding: 10px;
         border-radius: 6px;
         max-height: 600px;
-        overflow-y: auto;
         margin-bottom: 10px;
       `
     }

diff --git a/src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx b/src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx
@@ -41,7 +41,7 @@ const MessageGroupMenuBar: FC<Props> = ({
           {['fold', 'vertical', 'horizontal', 'grid'].map((layout) => (
             <LayoutOption
               key={layout}
-              active={multiModelMessageStyle === layout}
+              $active={multiModelMessageStyle === layout}
               onClick={() => setMultiModelMessageStyle(layout as MultiModelMessageStyle)}>
               {layout === 'fold' ? (
                 <FolderOutlined />
@@ -100,8 +100,8 @@ const GroupMenuBar = styled.div<{ $layout: MultiModelMessageStyle }>`
   overflow: hidden;
   border: 0.5px solid var(--color-border);
   height: 40px;
-  margin-left: ${({ $layout }) => (['horizontal', 'grid'].includes($layout) ? '0' : '40px')};
   transition: all 0.3s ease;
+  background-color: var(--color-background);
 `
 
 const LayoutContainer = styled.div`
@@ -110,14 +110,14 @@ const LayoutContainer = styled.div`
   flex-direction: row;
 `
 
-const LayoutOption = styled.div<{ active: boolean }>`
+const LayoutOption = styled.div<{ $active: boolean }>`
   cursor: pointer;
   padding: 2px 10px;
   border-radius: 4px;
-  background-color: ${({ active }) => (active ? 'var(--color-background-soft)' : 'transparent')};
+  background-color: ${({ $active }) => ($active ? 'var(--color-background-soft)' : 'transparent')};
 
   &:hover {
-    background-color: ${({ active }) => (active ? 'var(--color-background-soft)' : 'var(--color-hover)')};
+    background-color: ${({ $active }) => ($active ? 'var(--color-background-soft)' : 'var(--color-hover)')};
   }
 `