refactor(ocr): update ocr settings components to use props instead of hooks

- Remove useOcrProvider hook usage in favor of direct props passing
- Add proper type casting for updateConfig functions
- Maintain consistent state management across all OCR provider settings
This commit is contained in:
icarus 2025-10-20 09:15:41 +08:00
parent d47c3b1d63
commit ad67d2558a
5 changed files with 29 additions and 26 deletions

View File

@ -1,6 +1,4 @@
import { Flex } from '@cherrystudio/ui' import { Flex } from '@cherrystudio/ui'
import { useOcrProvider } from '@renderer/hooks/ocr/useOcrProvider'
import { BuiltinOcrProviderIdMap, isOcrOVProvider } from '@renderer/types'
import { Tag } from 'antd' import { Tag } from 'antd'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
@ -8,11 +6,6 @@ import { SettingRow, SettingRowTitle } from '..'
export const OcrOVSettings = () => { export const OcrOVSettings = () => {
const { t } = useTranslation() const { t } = useTranslation()
const { provider } = useOcrProvider(BuiltinOcrProviderIdMap.ovocr)
if (!isOcrOVProvider(provider)) {
throw new Error('Not OV OCR provider.')
}
return ( return (
<> <>

View File

@ -1,26 +1,33 @@
import { ErrorBoundary } from '@renderer/components/ErrorBoundary' import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
import { useOcrProvider } from '@renderer/hooks/ocr/useOcrProvider' import type { OcrPpocrConfig, OcrPpocrProvider, OcrProviderConfig } from '@renderer/types'
import { BuiltinOcrProviderIdMap, isOcrPpocrProvider } from '@renderer/types' import { isOcrPpocrProvider } from '@renderer/types'
import { Input } from 'antd' import { Input } from 'antd'
import { startTransition, useCallback, useState } from 'react' import { startTransition, useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { SettingHelpLink, SettingHelpText, SettingHelpTextRow, SettingRow, SettingRowTitle } from '..' import { SettingHelpLink, SettingHelpText, SettingHelpTextRow, SettingRow, SettingRowTitle } from '..'
export const OcrPpocrSettings = () => { export const OcrPpocrSettings = ({
provider,
updateConfig: _updateConfig
}: {
provider: OcrPpocrProvider
updateConfig: (config: Partial<OcrProviderConfig>) => Promise<void>
}) => {
const updateConfig = _updateConfig as (config: Partial<OcrPpocrConfig>) => Promise<void>
// Hack: Hard-coded for now // Hack: Hard-coded for now
const SERVING_DOC_URL = 'https://www.paddleocr.ai/latest/version3.x/deployment/serving.html' const SERVING_DOC_URL = 'https://www.paddleocr.ai/latest/version3.x/deployment/serving.html'
const AISTUDIO_URL = 'https://aistudio.baidu.com/pipeline/mine' const AISTUDIO_URL = 'https://aistudio.baidu.com/pipeline/mine'
const { t } = useTranslation() const { t } = useTranslation()
const { provider, config, updateConfig } = useOcrProvider(BuiltinOcrProviderIdMap.paddleocr)
if (!isOcrPpocrProvider(provider)) { if (!isOcrPpocrProvider(provider)) {
throw new Error('Not PaddleOCR provider.') throw new Error('Not PaddleOCR provider.')
} }
const [apiUrl, setApiUrl] = useState<string>(config.apiUrl || '') const [apiUrl, setApiUrl] = useState<string>(provider.config.apiUrl || '')
const [accessToken, setAccessToken] = useState<string>(config.accessToken || '') const [accessToken, setAccessToken] = useState<string>(provider.config.accessToken || '')
const onApiUrlChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { const onApiUrlChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value const value = e.target.value

View File

@ -43,10 +43,10 @@ const OcrProviderSettings = ({ provider, updateConfig }: Props) => {
return <OcrTesseractSettings provider={provider} updateConfig={updateConfig} /> return <OcrTesseractSettings provider={provider} updateConfig={updateConfig} />
} }
if (isOcrSystemProvider(provider)) { if (isOcrSystemProvider(provider)) {
return <OcrSystemSettings /> return <OcrSystemSettings provider={provider} updateConfig={updateConfig} />
} }
if (isOcrPpocrProvider(provider)) { if (isOcrPpocrProvider(provider)) {
return <OcrPpocrSettings /> return <OcrPpocrSettings provider={provider} updateConfig={updateConfig} />
} }
if (isOcrOVProvider(provider)) { if (isOcrOVProvider(provider)) {
return <OcrOVSettings /> return <OcrOVSettings />

View File

@ -3,10 +3,8 @@ import { Flex } from '@cherrystudio/ui'
import { InfoTooltip } from '@cherrystudio/ui' import { InfoTooltip } from '@cherrystudio/ui'
import { SuccessTag } from '@renderer/components/Tags/SuccessTag' import { SuccessTag } from '@renderer/components/Tags/SuccessTag'
import { isMac, isWin } from '@renderer/config/constant' import { isMac, isWin } from '@renderer/config/constant'
import { useOcrProvider } from '@renderer/hooks/ocr/useOcrProvider'
import useTranslate from '@renderer/hooks/useTranslate' import useTranslate from '@renderer/hooks/useTranslate'
import type { TranslateLanguageCode } from '@renderer/types' import type { OcrProviderConfig, OcrSystemConfig, OcrSystemProvider, TranslateLanguageCode } from '@renderer/types'
import { BuiltinOcrProviderIdMap, isOcrSystemProvider } from '@renderer/types'
import { Select } from 'antd' import { Select } from 'antd'
import { startTransition, useCallback, useMemo, useState } from 'react' import { startTransition, useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
@ -15,21 +13,24 @@ import { SettingRow, SettingRowTitle } from '..'
// const logger = loggerService.withContext('OcrSystemSettings') // const logger = loggerService.withContext('OcrSystemSettings')
export const OcrSystemSettings = () => { export const OcrSystemSettings = ({
provider,
updateConfig: _updateConfig
}: {
provider: OcrSystemProvider
updateConfig: (config: Partial<OcrProviderConfig>) => Promise<void>
}) => {
const updateConfig = _updateConfig as (config: Partial<OcrSystemConfig>) => Promise<void>
const { t } = useTranslation() const { t } = useTranslation()
// 和翻译自定义语言耦合了应该还ok // 和翻译自定义语言耦合了应该还ok
const { translateLanguages } = useTranslate() const { translateLanguages } = useTranslate()
const { provider, config, updateConfig } = useOcrProvider(BuiltinOcrProviderIdMap.system)
if (!isOcrSystemProvider(provider)) {
throw new Error('Not system provider.')
}
if (!isWin && !isMac) { if (!isWin && !isMac) {
throw new Error('Only Windows and MacOS is supported.') throw new Error('Only Windows and MacOS is supported.')
} }
const [langs, setLangs] = useState<TranslateLanguageCode[]>(config?.langs ?? []) const [langs, setLangs] = useState<TranslateLanguageCode[]>(provider.config.langs ?? [])
// currently static // currently static
const options = useMemo( const options = useMemo(

View File

@ -16,11 +16,13 @@ import { SettingRow, SettingRowTitle } from '..'
export const OcrTesseractSettings = ({ export const OcrTesseractSettings = ({
provider, provider,
updateConfig updateConfig: _updateConfig
}: { }: {
provider: OcrTesseractProvider provider: OcrTesseractProvider
updateConfig: (config: Partial<OcrProviderConfig>) => Promise<void> updateConfig: (config: Partial<OcrProviderConfig>) => Promise<void>
}) => { }) => {
const updateConfig = _updateConfig as (config: Partial<OcrTesseractConfig>) => Promise<void>
const { t } = useTranslation() const { t } = useTranslation()
const [langs, setLangs] = useState<OcrTesseractConfig['langs'] | undefined>(provider?.config.langs) const [langs, setLangs] = useState<OcrTesseractConfig['langs'] | undefined>(provider?.config.langs)