From 22eef75bf21a4b36135ef46ec344e8b97a2f4b8d Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Tue, 18 Jun 2024 16:22:37 +0800 Subject: [PATCH] style(app): adjust styles for better layout and user experience - Adjusted navbar and sidebar padding, height, and width - Modified background color and scrollbar appearance for consistency - Added input bar component for typing messages in chat - Enhanced alignment and display of navbar elements BREAKING CHANGE: Changes may affect layout and require UI adjustments. --- src/main/index.ts | 2 +- src/renderer/src/App.css | 29 ++++++-------- src/renderer/src/App.tsx | 4 +- src/renderer/src/components/app/Navbar.tsx | 3 ++ src/renderer/src/components/app/Sidebar.tsx | 6 ++- src/renderer/src/pages/home/HomePage.tsx | 20 +++++----- .../src/pages/home/components/Chat.tsx | 19 ++++++++- .../src/pages/home/components/Inputbar.tsx | 39 +++++++++++++++++++ .../src/pages/home/components/Threads.tsx | 2 +- 9 files changed, 88 insertions(+), 36 deletions(-) create mode 100644 src/renderer/src/pages/home/components/Inputbar.tsx diff --git a/src/main/index.ts b/src/main/index.ts index 87886877..fe55c472 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -22,7 +22,7 @@ function createWindow(): void { show: false, autoHideMenuBar: true, titleBarStyle: 'hiddenInset', - trafficLightPosition: { x: 10, y: 16 }, + trafficLightPosition: { x: 8, y: 8 }, ...(process.platform === 'linux' ? { icon } : {}), webPreferences: { preload: join(__dirname, '../preload/index.js'), diff --git a/src/renderer/src/App.css b/src/renderer/src/App.css index 5f626305..b8e15e2d 100644 --- a/src/renderer/src/App.css +++ b/src/renderer/src/App.css @@ -1,4 +1,4 @@ -@import 'https://at.alicdn.com/t/c/font_4563475_65n90fm9f93.css'; +@import 'https://at.alicdn.com/t/c/font_4563475_yuh5d3ftmm.css'; :root { --ev-c-white: #ffffff; @@ -24,15 +24,13 @@ --ev-button-alt-hover-text: var(--ev-c-text-1); --ev-button-alt-hover-bg: var(--ev-c-gray-2); - --navbar-height: 48px; - --sidebar-width: 64px; + --navbar-height: 40px; + --sidebar-width: 70px; --conversations-width: 240px; - --settings-width: 320px; - --status-bar-height: 48px; -} + --settings-width: 280px; + --status-bar-height: 40px; -:root { - --color-background: #1b1b1f; + --color-background: #181818; --color-background-soft: #222222; --color-background-mute: var(--ev-c-black-mute); @@ -55,10 +53,14 @@ ul { } body { + display: flex; min-height: 100vh; color: var(--color-text); background: var(--color-background); line-height: 1.6; + overflow: hidden; + background-size: cover; + user-select: none; font-family: Inter, -apple-system, @@ -77,14 +79,6 @@ body { -moz-osx-font-smoothing: grayscale; } -body { - display: flex; - overflow: hidden; - background-size: cover; - user-select: none; - background-color: #0b0a09; -} - code { font-weight: 600; padding: 3px 5px; @@ -116,6 +110,7 @@ body, flex: 1; } +/* ::-webkit-scrollbar { width: 5px; height: 5px; @@ -131,4 +126,4 @@ body, ::-webkit-scrollbar-thumb:hover { background-color: #444c51; -} +} */ diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 7d128cd8..7473a37b 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -4,7 +4,6 @@ import { Provider } from 'react-redux' import { BrowserRouter, Route, Routes } from 'react-router-dom' import { PersistGate } from 'redux-persist/integration/react' import Sidebar from './components/app/Sidebar' -import Statusbar from './components/app/Statusbar' import AppsPage from './pages/apps/AppsPage' import HomePage from './pages/home/HomePage' import SettingsPage from './pages/settings/SettingsPage' @@ -16,11 +15,10 @@ function App(): JSX.Element { - } /> + } /> } /> } /> - diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx index fcd5d9f8..760403a7 100644 --- a/src/renderer/src/components/app/Navbar.tsx +++ b/src/renderer/src/components/app/Navbar.tsx @@ -52,4 +52,7 @@ const NavbarCenterContainer = styled.div` const NavbarRightContainer = styled.div` min-width: var(--settings-width); + display: flex; + align-items: center; + padding: 0 16px; ` diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx index 45d629d0..ea79f05c 100644 --- a/src/renderer/src/components/app/Sidebar.tsx +++ b/src/renderer/src/components/app/Sidebar.tsx @@ -47,8 +47,9 @@ const Container = styled.div` min-height: 100%; border-top: 1px solid #ffffff20; border-right: 1px solid #ffffff20; - margin-top: 47px; - padding-bottom: 52px; + padding-top: 40px; + padding-bottom: 10px; + -webkit-app-region: drag !important; ` const Avatar = styled.div`` @@ -80,6 +81,7 @@ const Icon = styled.div` border-radius: 6px; margin-bottom: 5px; transition: background-color 0.2s ease; + -webkit-app-region: none; .iconfont { color: var(--color-icon); font-size: 22px; diff --git a/src/renderer/src/pages/home/HomePage.tsx b/src/renderer/src/pages/home/HomePage.tsx index 63cec426..c9818077 100644 --- a/src/renderer/src/pages/home/HomePage.tsx +++ b/src/renderer/src/pages/home/HomePage.tsx @@ -16,10 +16,8 @@ const HomePage: FC = () => { const onCreateConversation = () => { const _thread = { - // ID auto increment id: Math.random().toString(), name: 'New conversation', - // placeholder url avatar: 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y', lastMessage: 'message', lastMessageAt: 'now' @@ -36,13 +34,16 @@ const HomePage: FC = () => { - Cherry AI - + {activeThread.name} + + + + + - ) @@ -76,6 +77,9 @@ const NewButton = styled.div` .iconfont { font-size: 22px; } + .icon-showsidebarhoriz { + font-size: 18px; + } &:hover { background-color: var(--color-background-soft); cursor: pointer; @@ -83,10 +87,4 @@ const NewButton = styled.div` } ` -const Settings = styled.div` - display: flex; - height: 100%; - min-width: var(--settings-width); -` - export default HomePage diff --git a/src/renderer/src/pages/home/components/Chat.tsx b/src/renderer/src/pages/home/components/Chat.tsx index dd0b30a6..cda4d15f 100644 --- a/src/renderer/src/pages/home/components/Chat.tsx +++ b/src/renderer/src/pages/home/components/Chat.tsx @@ -1,21 +1,38 @@ import { Thread } from '@renderer/types' import { FC } from 'react' import styled from 'styled-components' +import Inputbar from './Inputbar' interface Props { activeThread?: Thread } const Chat: FC = ({ activeThread }) => { - return {activeThread?.lastMessage} + return ( + + {activeThread?.lastMessage} + + + ) } const Container = styled.div` display: flex; + flex-direction: column; height: 100%; flex: 1; border-right: 1px solid #ffffff20; +` + +const Conversations = styled.div` + display: flex; + flex-direction: column; + flex: 1; padding: 15px; + overflow-y: scroll; + &::-webkit-scrollbar { + display: none; + } ` export default Chat diff --git a/src/renderer/src/pages/home/components/Inputbar.tsx b/src/renderer/src/pages/home/components/Inputbar.tsx new file mode 100644 index 00000000..0d4aaa7a --- /dev/null +++ b/src/renderer/src/pages/home/components/Inputbar.tsx @@ -0,0 +1,39 @@ +import { FC, useState } from 'react' +import styled from 'styled-components' + +const Inputbar: FC = () => { + const [text, setText] = useState('') + + const handleKeyDown = (event) => { + if (event.key === 'Enter') { + // 当用户按下Enter键时执行的操作 + console.log('Enter key was pressed') + setText('') + } + } + + return ( +