Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-26 20:12:38 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor(styles): standardize padding and width across various components for improved layout consistency

Browse Source
This commit is contained in:
Teo 2025-06-12 17:37:20 +08:00
parent 73fced37b4
commit b15dac9ef4
8 changed files with 75 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/src/assets/styles/ant.scss
View File

@ -231,11 +231,11 @@
}
.ant-modal {
.ant-modal-content {
border-radius: 12px !important;
border: 0.5px solid var(--color-border) !important;
padding: 0 0 8px 0 !important;
border-radius: 12px;
border: 0.5px solid var(--color-border);
padding: 0 0 8px 0;
.ant-modal-header {
padding: 16px 16px 0 16px !important;
padding: 16px 16px 0 16px;
border-radius: 12px;
}
.ant-modal-body {

13
src/renderer/src/components/Popups/SearchPopup.tsx
View File

@ -32,16 +32,23 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
onCancel={onCancel}
afterClose={onClose}
title={null}
width="920px"
width={700}
transitionName="animation-move-down"
styles={{
content: {
borderRadius: 20,
padding: 0,
border: `1px solid var(--color-frame-border)`
overflow: 'hidden',
paddingBottom: 16
},
body: { height: '85vh' }
body: {
height: '85vh',
maxHeight: 'inherit',
padding: 0
}
}}
centered
closable={false}
footer={null}>
<HistoryPage />
</Modal>

7
src/renderer/src/components/Popups/SelectModelPopup/popup.tsx
View File

@ -388,8 +388,11 @@ const PopupContainer: React.FC<Props> = ({ model, resolve }) => {
borderRadius: 20,
padding: 0,
overflow: 'hidden',
paddingBottom: 20,
border: '1px solid var(--color-border)'
paddingBottom: 16
},
body: {
maxHeight: 'inherit',
padding: 0
}
}}
closeIcon={null}

94
src/renderer/src/pages/history/HistoryPage.tsx
View File

@ -1,11 +1,11 @@
import { ArrowLeftOutlined, EnterOutlined } from '@ant-design/icons'
import { HStack } from '@renderer/components/Layout'
import { useAppDispatch } from '@renderer/store'
import { loadTopicMessagesThunk } from '@renderer/store/thunk/messageThunk'
import { Topic } from '@renderer/types'
import type { Message } from '@renderer/types/newMessage'
import { Input, InputRef } from 'antd'
import { Divider, Input, InputRef } from 'antd'
import { last } from 'lodash'
import { Search } from 'lucide-react'
import { ChevronLeft, CornerDownLeft, Search } from 'lucide-react'
import { FC, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
@ -73,7 +73,36 @@ const TopicsPage: FC = () => {
return (
<Container>
<Header>
<HStack style={{ padding: '0 12px', marginTop: 8 }}>
<Input
prefix={
stack.length > 1 ? (
<SearchIcon className="back-icon" onClick={goBack}>
<ChevronLeft size={16} />
</SearchIcon>
) : (
<SearchIcon>
<Search size={15} />
</SearchIcon>
)
}
suffix={search.length >= 2 ? <CornerDownLeft size={16} /> : <Search size={16} />}
ref={inputRef}
placeholder={t('models.search')}
value={search}
onChange={(e) => setSearch(e.target.value.trimStart())}
allowClear
autoFocus
spellCheck={false}
style={{ paddingLeft: 0 }}
variant="borderless"
size="middle"
onPressEnter={onSearch}
/>
</HStack>
<Divider style={{ margin: 0, marginTop: 4, borderBlockStartWidth: 0.5 }} />
{/* <Header>
{stack.length > 1 && (
<HeaderLeft>
<MenuIcon onClick={goBack}>
@ -92,7 +121,7 @@ const TopicsPage: FC = () => {
suffix={search.length >= 2 ? <EnterOutlined /> : <Search size={16} />}
onPressEnter={onSearch}
/>
</Header>
</Header> */}
<TopicsHistory
keywords={search}
onClick={onTopicClick as any}
@ -118,50 +147,23 @@ const Container = styled.div`
height: 100%;
`
const Header = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 12px 0;
width: 100%;
position: relative;
background-color: var(--color-background-mute);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: 0.5px solid var(--color-frame-border);
`
const HeaderLeft = styled.div`
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
top: 12px;
left: 15px;
`
const MenuIcon = styled.div`
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 33px;
height: 33px;
const SearchIcon = styled.div`
width: 32px;
height: 32px;
border-radius: 50%;
&:hover {
background-color: var(--color-background);
.anticon {
color: var(--color-text-1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: var(--color-background-soft);
margin-right: 2px;
&.back-icon {
cursor: pointer;
transition: background-color 0.2s;
&:hover {
background-color: var(--color-background-mute);
}
}
`
const SearchInput = styled(Input)`
border-radius: 30px;
width: 800px;
height: 36px;
`
export default TopicsPage

3
src/renderer/src/pages/history/components/SearchMessage.tsx
View File

@ -76,7 +76,8 @@ const MessagesContainer = styled.div`
`
const ContainerWrapper = styled.div`
width: 800px;
width: 100%;
padding: 0 16px;
display: flex;
flex-direction: column;
.message {

3
src/renderer/src/pages/history/components/SearchResults.tsx
View File

@ -151,7 +151,8 @@ const Container = styled.div`
`
const ContainerWrapper = styled.div`
width: 800px;
width: 100%;
padding: 0 16px;
display: flex;
flex-direction: column;
`

3
src/renderer/src/pages/history/components/TopicMessages.tsx
View File

@ -88,7 +88,8 @@ const MessagesContainer = styled.div`
`
const ContainerWrapper = styled.div`
width: 800px;
width: 100%;
padding: 0 16px;
display: flex;
flex-direction: column;
.message {

3
src/renderer/src/pages/history/components/TopicsHistory.tsx
View File

@ -78,7 +78,8 @@ const TopicsHistory: React.FC<Props> = ({ keywords, onClick, onSearch, ...props
}
const ContainerWrapper = styled.div`
width: 800px;
width: 100%;
padding: 0 16px;
display: flex;
flex-direction: column;
`