feat(ocr): 添加OCR服务设置界面及提供商选择功能

实现OCR服务设置界面,包含图片OCR提供商的选择功能
修复ocr.ts中imageProvider的类型定义
添加相关国际化文本
This commit is contained in:
icarus 2025-08-22 16:41:16 +08:00
parent e79bfcee77
commit 6a467ceca4
5 changed files with 97 additions and 1 deletions

View File

@ -3483,6 +3483,16 @@
},
"title": "设置",
"tool": {
"ocr": {
"image": {
"error": {
"provider_not_found": "该提供商不存在"
},
"title": "图片"
},
"image_provider": "OCR 服务提供商",
"title": "OCR 服务"
},
"preprocess": {
"provider": "文档处理服务商",
"provider_placeholder": "选择一个文档处理服务商",

View File

@ -0,0 +1,51 @@
import { loggerService } from '@logger'
import { useAppSelector } from '@renderer/store'
import { setImageOcrProvider } from '@renderer/store/ocr'
import { isImageOcrProvider } from '@renderer/types'
import { Select } from 'antd'
import { useTranslation } from 'react-i18next'
import { useDispatch } from 'react-redux'
import { SettingRow, SettingRowTitle } from '..'
const logger = loggerService.withContext('OcrImageProviderSettings')
const OcrImageProviderSettings = () => {
const { t } = useTranslation()
const providers = useAppSelector((state) => state.ocr.providers)
const imageProvider = useAppSelector((state) => state.ocr.imageProvider)
const imageProviders = providers.filter((p) => isImageOcrProvider(p))
const dispatch = useDispatch()
const updateImageProvider = (id: string) => {
const provider = imageProviders.find((p) => p.id === id)
if (!provider) {
logger.error(`Failed to find image provider by id: ${id}`)
window.message.error(t('settings.tool.ocr.image.error.provider_not_found'))
return
}
dispatch(setImageOcrProvider(provider))
}
return (
<>
<SettingRow>
<SettingRowTitle>{t('settings.tool.ocr.image_provider')}</SettingRowTitle>
<div style={{ display: 'flex', gap: '8px' }}>
<Select
value={imageProvider.id}
style={{ width: '200px' }}
onChange={(id: string) => updateImageProvider(id)}
options={imageProviders.map((p) => ({
value: p.id,
label: p.name
}))}
/>
</div>
</SettingRow>
</>
)
}
export default OcrImageProviderSettings

View File

@ -0,0 +1,33 @@
import { PictureOutlined } from '@ant-design/icons'
import { useTheme } from '@renderer/context/ThemeProvider'
import { Tabs, TabsProps } from 'antd'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { SettingDivider, SettingGroup, SettingTitle } from '..'
import OcrImageProviderSettings from './OcrImageProviderSettings'
const OcrSettings: FC = () => {
const { t } = useTranslation()
const { theme: themeMode } = useTheme()
const tabs: TabsProps['items'] = [
{
key: 'image',
label: t('settings.tool.ocr.image.title'),
icon: <PictureOutlined />,
children: <OcrImageProviderSettings />
}
]
return (
<>
<SettingGroup theme={themeMode}>
<SettingTitle>{t('settings.tool.ocr.title')}</SettingTitle>
<SettingDivider />
<Tabs defaultActiveKey="image" items={tabs} />
</SettingGroup>
</>
)
}
export default OcrSettings

View File

@ -2,6 +2,7 @@ import { useTheme } from '@renderer/context/ThemeProvider'
import { FC } from 'react'
import { SettingContainer } from '..'
import OcrSettings from './OcrSettings'
import PreprocessSettings from './PreprocessSettings'
const DocProcessSettings: FC = () => {
@ -9,6 +10,7 @@ const DocProcessSettings: FC = () => {
return (
<SettingContainer theme={themeMode}>
<OcrSettings />
<PreprocessSettings />
</SettingContainer>
)

View File

@ -4,7 +4,7 @@ import { ImageOcrProvider, OcrProvider } from '@renderer/types'
export interface OcrState {
providers: OcrProvider[]
imageProvider: OcrProvider
imageProvider: ImageOcrProvider
}
const initialState: OcrState = {