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

refactor(OcrImageSettings): simplify provider selection logic and improve UI

Browse Source 
Remove unused imports and simplify the provider filtering logic by removing platform-specific checks
Update UI styling to use Tailwind classes instead of inline styles
This commit is contained in:
icarus 2025-10-20 03:36:04 +08:00
parent 062cbcc259
commit 82b244471b
1 changed files with 22 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/renderer/src/pages/settings/DocProcessSettings/OcrImageSettings.tsx
View File

@ -1,16 +1,15 @@
import { Alert, Skeleton } from '@heroui/react' import { Skeleton } from '@cherrystudio/ui'
import { Alert } from '@heroui/react'
import { loggerService } from '@logger' import { loggerService } from '@logger'
import { ErrorTag } from '@renderer/components/Tags/ErrorTag' import { ErrorTag } from '@renderer/components/Tags/ErrorTag'
import { isMac, isWin } from '@renderer/config/constant' import { isMac, isWin } from '@renderer/config/constant'
import { useOcrImageProvider } from '@renderer/hooks/ocr/useOcrImageProvider' import { useOcrImageProvider } from '@renderer/hooks/ocr/useOcrImageProvider'
import { useOcrProviders } from '@renderer/hooks/ocr/useOcrProviders' import { useOcrProviders } from '@renderer/hooks/ocr/useOcrProviders'
import type { ImageOcrProvider } from '@renderer/types'
import { BuiltinOcrProviderIds, isImageOcrProvider } from '@renderer/types' import { BuiltinOcrProviderIds, isImageOcrProvider } from '@renderer/types'
import { getErrorMessage } from '@renderer/utils' import { getErrorMessage } from '@renderer/utils'
import { Select } from 'antd' import { Select } from 'antd'
import { useCallback, useMemo } from 'react' import { useMemo } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import useSWRImmutable from 'swr/immutable'
import { SettingRow, SettingRowTitle } from '..' import { SettingRow, SettingRowTitle } from '..'
@ -18,13 +17,8 @@ const logger = loggerService.withContext('OcrImageSettings')
const OcrImageSettings = () => { const OcrImageSettings = () => {
const { t } = useTranslation() const { t } = useTranslation()
const { providers, getOcrProviderName } = useOcrProviders() const { providers, loading, error, getOcrProviderName } = useOcrProviders()
const { imageProvider, setImageProviderId } = useOcrImageProvider() const { imageProvider, setImageProviderId } = useOcrImageProvider()
const fetcher = useCallback(() => {
return window.api.ocr.listProviders()
}, [])
const { data: validProviders, isLoading, error } = useSWRImmutable('/ocr/providers', fetcher)
const imageProviders = providers.filter((p) => isImageOcrProvider(p)) const imageProviders = providers.filter((p) => isImageOcrProvider(p))
@ -41,17 +35,11 @@ const OcrImageSettings = () => {
const platformSupport = isMac || isWin const platformSupport = isMac || isWin
const options = useMemo(() => { const options = useMemo(() => {
if (!validProviders) return [] return imageProviders.map((p) => ({
const platformFilter = platformSupport ? () => true : (p: ImageOcrProvider) => p.id !== BuiltinOcrProviderIds.system value: p.id,
const validFilter = (p: ImageOcrProvider) => validProviders.includes(p.id) label: getOcrProviderName(p)
return imageProviders }))
.filter(platformFilter) }, [getOcrProviderName, imageProviders])
.filter(validFilter)
.map((p) => ({
value: p.id,
label: getOcrProviderName(p)
}))
}, [getOcrProviderName, imageProviders, platformSupport, validProviders])
const isSystem = imageProvider?.id === BuiltinOcrProviderIds.system const isSystem = imageProvider?.id === BuiltinOcrProviderIds.system
@ -63,25 +51,20 @@ const OcrImageSettings = () => {
<> <>
<SettingRow> <SettingRow>
<SettingRowTitle>{t('settings.tool.ocr.image_provider')}</SettingRowTitle> <SettingRowTitle>{t('settings.tool.ocr.image_provider')}</SettingRowTitle>
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}> <div className="flex items-center gap-2 self-stretch">
{!platformSupport && isSystem && <ErrorTag message={t('settings.tool.ocr.error.not_system')} />} {!platformSupport && isSystem && <ErrorTag message={t('settings.tool.ocr.error.not_system')} />}
<Skeleton isLoaded={!isLoading}> {loading && <Skeleton className="h-full w-50" />}
{!error && ( {!loading && !error && (
<Select <Select
value={imageProvider.id} value={imageProvider.id}
style={{ width: '200px' }} className="w-50"
onChange={(id: string) => setImageProvider(id)} onChange={(id: string) => setImageProvider(id)}
options={options} options={options}
/> />
)} )}
{error && ( {!loading && error && (
<Alert <Alert color="danger" title={t('ocr.error.provider.get_providers')} description={getErrorMessage(error)} />
color="danger" )}
title={t('ocr.error.provider.get_providers')}
description={getErrorMessage(error)}
/>
)}
</Skeleton>
</div> </div>
</SettingRow> </SettingRow>
</> </>