Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-10 23:59:45 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: improve translate history style (#8060)

Browse Source
This commit is contained in:
Konv Suu 2025-07-13 21:11:15 +08:00 committed by GitHub
parent 1f9850c04d
commit e5956d4039
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/renderer/src/pages/translate/TranslatePage.tsx
View File

@ -302,7 +302,15 @@ const TranslatePage: FC = () => {
const { providers } = useProviders() const { providers } = useProviders()
const allModels = useMemo(() => providers.map((p) => p.models).flat(), [providers]) const allModels = useMemo(() => providers.map((p) => p.models).flat(), [providers])
const translateHistory = useLiveQuery(() => db.translate_history.orderBy('createdAt').reverse().toArray(), []) const _translateHistory = useLiveQuery(() => db.translate_history.orderBy('createdAt').reverse().toArray(), [])
const translateHistory = useMemo(() => {
return _translateHistory?.map((item) => ({
...item,
_sourceLanguage: getLanguageByLangcode(item.sourceLanguage),
_targetLanguage: getLanguageByLangcode(item.targetLanguage)
}))
}, [_translateHistory])
_text = text _text = text
_result = result _result = result
@ -441,10 +449,10 @@ const TranslatePage: FC = () => {
setTimeout(() => setCopied(false), 2000) setTimeout(() => setCopied(false), 2000)
} }
const onHistoryItemClick = (history: TranslateHistory) => { const onHistoryItemClick = (history: TranslateHistory & { _sourceLanguage: Language; _targetLanguage: Language }) => {
setText(history.sourceText) setText(history.sourceText)
setResult(history.targetText) setResult(history.targetText)
setTargetLanguage(getLanguageByLangcode(history.targetLanguage)) setTargetLanguage(history._targetLanguage)
} }
useEffect(() => { useEffect(() => {
@ -579,7 +587,7 @@ const TranslatePage: FC = () => {
</NavbarCenter> </NavbarCenter>
</Navbar> </Navbar>
<ContentContainer id="content-container" ref={contentContainerRef} $historyDrawerVisible={historyDrawerVisible}> <ContentContainer id="content-container" ref={contentContainerRef} $historyDrawerVisible={historyDrawerVisible}>
<HistoryContainner $historyDrawerVisible={historyDrawerVisible}> <HistoryContainer $historyDrawerVisible={historyDrawerVisible}>
<OperationBar> <OperationBar>
<span style={{ fontSize: 16 }}>{t('translate.history.title')}</span> <span style={{ fontSize: 16 }}>{t('translate.history.title')}</span>
{!isEmpty(translateHistory) && ( {!isEmpty(translateHistory) && (
@ -612,9 +620,22 @@ const TranslatePage: FC = () => {
}}> }}>
<HistoryListItem onClick={() => onHistoryItemClick(item)}> <HistoryListItem onClick={() => onHistoryItemClick(item)}>
<Flex justify="space-between" vertical gap={4} style={{ width: '100%' }}> <Flex justify="space-between" vertical gap={4} style={{ width: '100%' }}>
<Flex align="center" justify="space-between" style={{ flex: 1 }}>
<Flex align="center" gap={6}>
<span>
{item._sourceLanguage.emoji} {item._sourceLanguage.label()}
</span>
→
<span>
{item._targetLanguage.emoji} {item._targetLanguage.label()}
</span>
</Flex>
<HistoryListItemDate>{dayjs(item.createdAt).format('MM/DD HH:mm')}</HistoryListItemDate>
</Flex>
<HistoryListItemTitle>{item.sourceText}</HistoryListItemTitle> <HistoryListItemTitle>{item.sourceText}</HistoryListItemTitle>
<HistoryListItemTitle>{item.targetText}</HistoryListItemTitle> <HistoryListItemTitle style={{ color: 'var(--color-text-2)' }}>
<HistoryListItemDate>{dayjs(item.createdAt).format('MM/DD HH:mm')}</HistoryListItemDate> {item.targetText}
</HistoryListItemTitle>
</Flex> </Flex>
</HistoryListItem> </HistoryListItem>
</Dropdown> </Dropdown>
@ -625,7 +646,7 @@ const TranslatePage: FC = () => {
<Empty description={t('translate.history.empty')} /> <Empty description={t('translate.history.empty')} />
</Flex> </Flex>
)} )}
</HistoryContainner> </HistoryContainer>
<InputContainer> <InputContainer>
<OperationBar> <OperationBar>
@ -840,7 +861,7 @@ const BidirectionalLanguageDisplay = styled.div`
text-align: center; text-align: center;
` `
const HistoryContainner = styled.div<{ $historyDrawerVisible: boolean }>` const HistoryContainer = styled.div<{ $historyDrawerVisible: boolean }>`
width: ${({ $historyDrawerVisible }) => ($historyDrawerVisible ? '300px' : '0')}; width: ${({ $historyDrawerVisible }) => ($historyDrawerVisible ? '300px' : '0')};
height: calc(100vh - var(--navbar-height) - 40px); height: calc(100vh - var(--navbar-height) - 40px);
transition: transition:
@ -868,15 +889,12 @@ const HistoryList = styled.div`
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px;
overflow-y: auto; overflow-y: auto;
padding: 0 5px;
` `
const HistoryListItem = styled.div` const HistoryListItem = styled.div`
width: 100%; width: 100%;
padding: 5px 10px; padding: 5px 10px;
border-radius: var(--list-item-border-radius);
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
position: relative; position: relative;
@ -893,15 +911,10 @@ const HistoryListItem = styled.div`
} }
} }
&:not(:last-child)::after { border-top: 1px dashed var(--color-border-soft);
content: '';
display: block; &:last-child {
width: 100%;
height: 1px;
border-bottom: 1px dashed var(--color-border-soft); border-bottom: 1px dashed var(--color-border-soft);
position: absolute;
bottom: -8px;
left: 0;
} }
` `