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

wip

Browse Source
This commit is contained in:
kangfenmao 2025-11-01 19:16:58 +08:00
parent 1bf5104f97
commit 37bdf9e508
1 changed files with 78 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
src/renderer/src/components/Popups/ExportToPhoneLanPopup.tsx
View File

@ -1,11 +1,8 @@
import { Button } from '@heroui/button'
import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@heroui/modal'
import { Progress } from '@heroui/progress'
import { Spinner } from '@heroui/spinner'
import { loggerService } from '@logger' import { loggerService } from '@logger'
import { AppLogo } from '@renderer/config/env' import { AppLogo } from '@renderer/config/env'
import { SettingHelpText, SettingRow } from '@renderer/pages/settings' import { SettingHelpText, SettingRow } from '@renderer/pages/settings'
import type { WebSocketCandidatesResponse } from '@shared/config/types' import type { WebSocketCandidatesResponse } from '@shared/config/types'
import { Button, Modal, Progress, Spin } from 'antd'
import { QRCodeSVG } from 'qrcode.react' import { QRCodeSVG } from 'qrcode.react'
import { useCallback, useEffect, useMemo, useState } from 'react' import { useCallback, useEffect, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
@ -25,7 +22,7 @@ const LoadingQRCode: React.FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' }}> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' }}>
<Spinner /> <Spin />
<span style={{ fontSize: '14px', color: 'var(--color-text-2)' }}> <span style={{ fontSize: '14px', color: 'var(--color-text-2)' }}>
{t('settings.data.export_to_phone.lan.generating_qr')} {t('settings.data.export_to_phone.lan.generating_qr')}
</span> </span>
@ -72,7 +69,7 @@ const ConnectingAnimation: React.FC = () => {
borderRadius: '12px', borderRadius: '12px',
backgroundColor: 'var(--color-status-warning)' backgroundColor: 'var(--color-status-warning)'
}}> }}>
<Spinner size="lg" color="warning" /> <Spin size="large" />
<span style={{ fontSize: '14px', color: 'var(--color-text)', marginTop: '12px' }}> <span style={{ fontSize: '14px', color: 'var(--color-text)', marginTop: '12px' }}>
{t('settings.data.export_to_phone.lan.status.connecting')} {t('settings.data.export_to_phone.lan.status.connecting')}
</span> </span>
@ -441,11 +438,9 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
</div> </div>
<Progress <Progress
value={Math.round(sendProgress)} percent={Math.round(sendProgress)}
size="md" status={transferPhase === 'completed' ? 'success' : 'active'}
color={transferPhase === 'completed' ? 'success' : 'primary'} showInfo={false}
showValueLabel={false}
aria-label="Send progress"
/> />
</div> </div>
</div> </div>
@ -488,95 +483,83 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
return ( return (
<Modal <Modal
isOpen={isOpen} open={isOpen}
onOpenChange={(open) => { onCancel={handleCancel}
if (!open) { afterClose={handleClose}
handleCancel() title={t('settings.data.export_to_phone.lan.title')}
} centered
}} closable={!isSending}
isDismissable={false} maskClosable={false}
isKeyboardDismissDisabled={false} keyboard={true}
placement="center" footer={
onClose={handleClose}> showCloseConfirm ? (
<ModalContent> <div
{() => ( style={{
<> display: 'flex',
<ModalHeader>{t('settings.data.export_to_phone.lan.title')}</ModalHeader> flexDirection: 'column',
<ModalBody> width: '100%',
<SettingRow> gap: '12px',
<StatusIndicator /> padding: '8px',
</SettingRow> borderRadius: '8px',
backgroundColor: 'var(--color-status-warning)',
border: '1px solid var(--color-status-warning)'
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<span style={{ fontSize: '20px' }}>⚠️</span>
<span style={{ fontSize: '14px', color: 'var(--color-text)', fontWeight: '500' }}>
{t('settings.data.export_to_phone.lan.confirm_close_title')}
</span>
</div>
<span style={{ fontSize: '13px', color: 'var(--color-text-2)', marginLeft: '28px' }}>
{t('settings.data.export_to_phone.lan.confirm_close_message')}
</span>
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '4px' }}>
<Button size="small" onClick={handleCancelClose}>
{t('common.cancel')}
</Button>
<Button size="small" danger onClick={handleForceClose}>
{t('settings.data.export_to_phone.lan.force_close')}
</Button>
</div>
</div>
) : null
}>
<SettingRow>
<StatusIndicator />
</SettingRow>
<SettingRow> <SettingRow>
<div>{t('settings.data.export_to_phone.lan.content')}</div> <div>{t('settings.data.export_to_phone.lan.content')}</div>
</SettingRow> </SettingRow>
<SettingRow style={{ display: 'flex', justifyContent: 'center', minHeight: '180px' }}> <SettingRow style={{ display: 'flex', justifyContent: 'center', minHeight: '180px' }}>
<QRCodeDisplay /> <QRCodeDisplay />
</SettingRow> </SettingRow>
<SettingRow style={{ display: 'flex', alignItems: 'center' }}> <SettingRow style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ display: 'flex', gap: 10, justifyContent: 'center', width: '100%' }}> <div style={{ display: 'flex', gap: 10, justifyContent: 'center', width: '100%' }}>
<Button color="default" variant="flat" onPress={handleSelectZip} isDisabled={isSending}> <Button onClick={handleSelectZip} disabled={isSending}>
{t('settings.data.export_to_phone.lan.selectZip')} {t('settings.data.export_to_phone.lan.selectZip')}
</Button> </Button>
<Button color="primary" onPress={handleSendZip} isDisabled={!canSend} isLoading={isSending}> <Button type="primary" onClick={handleSendZip} disabled={!canSend} loading={isSending}>
{transferStatusText || t('settings.data.export_to_phone.lan.sendZip')} {transferStatusText || t('settings.data.export_to_phone.lan.sendZip')}
</Button> </Button>
</div> </div>
</SettingRow> </SettingRow>
<SettingHelpText <SettingHelpText
style={{ style={{
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
textAlign: 'center' textAlign: 'center'
}}> }}>
{selectedFolderPath || t('settings.data.export_to_phone.lan.noZipSelected')} {selectedFolderPath || t('settings.data.export_to_phone.lan.noZipSelected')}
</SettingHelpText> </SettingHelpText>
<TransferProgress /> <TransferProgress />
<AutoCloseCountdown /> <AutoCloseCountdown />
<ErrorDisplay /> <ErrorDisplay />
</ModalBody>
{showCloseConfirm && (
<ModalFooter>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
gap: '12px',
padding: '8px',
borderRadius: '8px',
backgroundColor: 'var(--color-status-warning)',
border: '1px solid var(--color-status-warning)'
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<span style={{ fontSize: '20px' }}>⚠️</span>
<span style={{ fontSize: '14px', color: 'var(--color-text)', fontWeight: '500' }}>
{t('settings.data.export_to_phone.lan.confirm_close_title')}
</span>
</div>
<span style={{ fontSize: '13px', color: 'var(--color-text-2)', marginLeft: '28px' }}>
{t('settings.data.export_to_phone.lan.confirm_close_message')}
</span>
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '4px' }}>
<Button size="sm" color="default" variant="flat" onPress={handleCancelClose}>
{t('common.cancel')}
</Button>
<Button size="sm" color="danger" onPress={handleForceClose}>
{t('settings.data.export_to_phone.lan.force_close')}
</Button>
</div>
</div>
</ModalFooter>
)}
</>
)}
</ModalContent>
</Modal> </Modal>
) )
} }