feat: new navbar style

.gitignore

@@ -34,6 +34,9 @@ npm/*/*
 !.yarn/sdks
 !.yarn/versions
 
+# Windows
+Thumbs.db
+
 # Project
 node_modules
 dist

electron-builder.yml

@@ -56,6 +56,5 @@ electronDownload:
 afterSign: scripts/notarize.js
 releaseInfo:
   releaseNotes: |
-    支持设置模型 Temperature 参数
+    支持配置网络代理
-    支持设置上下文数量
+    支持隐藏左侧智能体
-    输入框增加 Token 消耗预估

src/renderer/src/assets/styles/index.scss

@@ -114,7 +114,6 @@ body,
 
 ::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.2);
-  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {

src/renderer/src/components/app/Navbar.tsx

@@ -25,16 +25,16 @@ const NavbarContainer = styled.div`
   flex-direction: row;
   min-height: var(--navbar-height);
   max-height: var(--navbar-height);
-  border-bottom: 0.5px solid var(--color-border);
   -webkit-app-region: drag;
   background-color: #1f1f1f;
   margin-left: calc(var(--sidebar-width) * -1);
   padding-left: var(--sidebar-width);
+  border-bottom: 0.5px solid var(--color-border);
+  border-top: 0.5px solid var(--color-border);
 `
 
 const NavbarLeftContainer = styled.div`
   min-width: var(--assistants-width);
-  border-right: 1px solid var(--color-border);
   padding: 0 10px;
   display: flex;
   flex-direction: row;
@@ -48,7 +48,6 @@ const NavbarCenterContainer = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
-  border-right: 1px solid var(--color-border);
   padding: 0 20px;
   font-size: 14px;
   font-weight: bold;

src/renderer/src/components/app/Sidebar.tsx

@@ -3,6 +3,7 @@ import Logo from '@renderer/assets/images/logo.png'
 import styled from 'styled-components'
 import { Link, useLocation } from 'react-router-dom'
 import useAvatar from '@renderer/hooks/useAvatar'
+import { isMac, isWindows } from '@renderer/config/constant'
 
 const Sidebar: FC = () => {
   const { pathname } = useLocation()
@@ -11,7 +12,8 @@ const Sidebar: FC = () => {
   const isRoute = (path: string): string => (pathname === path ? 'active' : '')
 
   return (
-    <Container>
+    <Container style={isWindows ? { paddingTop: 0 } : {}}>
+      {isMac && <PlaceholderBorder />}
       <StyledLink to="/">
         <AvatarImg src={avatar || Logo} draggable={false} />
       </StyledLink>
@@ -50,7 +52,9 @@ const Container = styled.div`
   -webkit-app-region: drag !important;
   background-color: #1f1f1f;
   border-right: 0.5px solid var(--color-border);
+  border-top: 0.5px solid var(--color-border);
   padding-top: var(--navbar-height);
+  position: relative;
 `
 
 const AvatarImg = styled.img`
@@ -59,7 +63,7 @@ const AvatarImg = styled.img`
   height: 28px;
   background-color: var(--color-background-soft);
   margin: 5px 0;
-  margin-top: 12px;
+  margin-top: ${isMac ? '16px' : '7px'};
 `
 const MainMenus = styled.div`
   display: flex;
@@ -111,4 +115,14 @@ const StyledLink = styled(Link)`
   }
 `
 
+const PlaceholderBorder = styled.div`
+  width: var(--sidebar-width);
+  height: var(--navbar-height);
+  border-right: 1px solid #1f1f1f;
+  border-bottom: 0.5px solid var(--color-border);
+  position: absolute;
+  top: -0.5px;
+  left: 0.5px;
+`
+
 export default Sidebar

src/renderer/src/config/constant.ts

@@ -1,2 +1,5 @@
 export const DEFAULT_TEMPERATURE = 0.7
 export const DEFAULT_CONEXTCOUNT = 5
+export const platform = window.electron?.process?.platform === 'darwin' ? 'macos' : 'windows'
+export const isMac = platform === 'macos'
+export const isWindows = platform === 'windows'

src/renderer/src/pages/home/HomePage.tsx

@@ -7,9 +7,10 @@ import Assistants from './components/Assistants'
 import { uuid } from '@renderer/utils'
 import { useShowAssistants, useShowRightSidebar } from '@renderer/hooks/useStore'
 import { Tooltip } from 'antd'
-import Navigation from './components/Navigation'
+import Navigation from './components/NavigationCenter'
 import { useTranslation } from 'react-i18next'
 import { PlusCircleOutlined } from '@ant-design/icons'
+import { isMac } from '@renderer/config/constant'
 
 const HomePage: FC = () => {
   const { assistants, addAssistant } = useAssistants()
@@ -30,7 +31,7 @@ const HomePage: FC = () => {
       <Navbar>
         {showAssistants && (
           <NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: '0 8px' }}>
-            <NewButton onClick={toggleShowAssistants} style={{ marginLeft: 8 }}>
+            <NewButton onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}>
               <i className="iconfont icon-hidesidebarhoriz" />
             </NewButton>
             <NewButton onClick={onCreateAssistant}>

src/renderer/src/pages/home/components/NavigationCenter.tsx

@@ -10,12 +10,13 @@ import styled from 'styled-components'
 import { NewButton } from '../HomePage'
 import { useShowAssistants } from '@renderer/hooks/useStore'
 import { capitalizeFirstLetter } from '@renderer/utils'
+import { isMac } from '@renderer/config/constant'
 
 interface Props {
   activeAssistant: Assistant
 }
 
-const Navigation: FC<Props> = ({ activeAssistant }) => {
+const NavigationCenter: FC<Props> = ({ activeAssistant }) => {
   const { assistant } = useAssistant(activeAssistant.id)
   const { model, setModel } = useAssistant(activeAssistant.id)
   const { providers } = useProviders()
@@ -37,7 +38,7 @@ const Navigation: FC<Props> = ({ activeAssistant }) => {
     }))
 
   return (
-    <NavbarCenter style={{ border: 'none', paddingLeft: showAssistants ? 8 : 16 }}>
+    <NavbarCenter style={{ paddingLeft: isMac ? 16 : 8 }}>
       {!showAssistants && (
         <NewButton onClick={toggleShowAssistants} style={{ marginRight: 8 }}>
           <i className="iconfont icon-showsidebarhoriz" />
@@ -69,4 +70,4 @@ const DropdownButton = styled(Button)`
   padding: 0 8px;
 `
 
-export default Navigation
+export default NavigationCenter