diff --git a/src/pages/spell-check/index.tsx b/src/pages/spell-check/index.tsx index 0a8264d9..ad31be3b 100644 --- a/src/pages/spell-check/index.tsx +++ b/src/pages/spell-check/index.tsx @@ -1,79 +1,59 @@ -import { useState } from 'react' -import { Button, Card, Form, Input, message, Space, Switch } from 'antd' -import { checkAndCorrectSpelling } from '@/api/spellCheck' +import { useState, useCallback } from 'react' +import { Button, Card, Form, Input, message, Space, Typography } from 'antd' +import { CopyOutlined, ClearOutlined, CheckCircleOutlined } from '@ant-design/icons' -interface CorrectionResult { - original: string - corrected: string - position: number - suggestions?: string[] +const { Title, Text, Paragraph } = Typography + +interface SpellCheckPageProps { + // Props definition if needed } -const SpellCheck = () => { +const SpellCheckPage: React.FC = () => { const [form] = Form.useForm() - const [isGenerating, setIsGenerating] = useState(false) - const [correctionResults, setCorrectionResults] = useState([]) - const [correctedText, setCorrectedText] = useState('') + const [isChecking, setIsChecking] = useState(false) + const [result, setResult] = useState('') + const [originalText, setOriginalText] = useState('') const maxChars = 5000 - const validateCustomVocab = (_: any, value: string) => { - if (!value) { - return Promise.resolve() - } + // 调用Dify API进行错别字校验 + const handleCheck = useCallback(async () => { try { - const parsed = JSON.parse(value) - if (!Array.isArray(parsed)) { - return Promise.reject(new Error('必须是JSON数组格式')) - } - if (!parsed.every(item => typeof item === 'string')) { - return Promise.reject(new Error('数组元素必须为字符串')) - } - return Promise.resolve() - } catch (error) { - return Promise.reject(new Error('JSON格式无效')) - } - } + const values = await form.validateFields(['text_to_check']) - const handleGenerate = async () => { - try { - const formValues = await form.validateFields() - - // 验证用户输入文本 - if (!formValues.user_input_text?.trim()) { - message.warning('请输入需要检测错别字的文本') + if (!values.text_to_check?.trim()) { + message.warning('请输入需要校验的文本内容') return } - // 验证文本长度 - if (formValues.user_input_text.length > maxChars) { + if (values.text_to_check.length > maxChars) { message.warning(`输入文本不能超过${maxChars}个字符`) return } - setIsGenerating(true) - setCorrectionResults([]) - setCorrectedText('') + setIsChecking(true) + setResult('') + setOriginalText(values.text_to_check) - let customVocabArray: string[] = [] - if (formValues.custom_vocab) { - try { - customVocabArray = JSON.parse(formValues.custom_vocab) - } catch (error) { - message.error('自定义词汇库格式错误') - setIsGenerating(false) - return - } - } + const API_URL = 'https://copilot.sino-bridge.com/v1/chat-messages' + const API_KEY = 'app-Ykwky9aKr95GBwm9FWFUg6ot' - const response = await checkAndCorrectSpelling( - formValues.user_input_text, - formValues.auto_correct || false, - customVocabArray - ) + const response = await fetch(API_URL, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${API_KEY}` + }, + body: JSON.stringify({ + inputs: { + text_to_check: values.text_to_check + }, + query: '1', + response_mode: 'streaming' + }) + }) if (!response.ok) { - const errorText = await response.text() - throw new Error(`检测请求失败: ${response.status} ${errorText}`) + throw new Error(`API请求失败: ${response.status}`) } if (!response.body) { @@ -84,7 +64,6 @@ const SpellCheck = () => { const decoder = new TextDecoder('utf-8') let buffer = '' let fullContent = '' - let results: CorrectionResult[] = [] try { while (true) { @@ -99,7 +78,7 @@ const SpellCheck = () => { const trimmedLine = line.trim() if (!trimmedLine || trimmedLine === 'data: [DONE]') { if (trimmedLine === 'data: [DONE]') { - message.success('检测完成') + message.success('校验完成') break } continue @@ -112,27 +91,12 @@ const SpellCheck = () => { if (parsed.event === 'message' && parsed.answer) { fullContent += parsed.answer - // 尝试解析JSON结果 - try { - results = JSON.parse(fullContent) - setCorrectionResults(results) - if (formValues.auto_correct) { - let corrected = formValues.user_input_text - results.forEach(item => { - if (item.corrected && item.original) { - corrected = corrected.replace(item.original, item.corrected) - } - }) - setCorrectedText(corrected) - } - } catch (e) { - // 解析失败,继续等待 - } + setResult(fullContent) } else if (parsed.event === 'error') { throw new Error(parsed.message || 'Dify API 返回错误') } } catch (parseError) { - console.warn('跳过无法解析的行:', trimmedLine) + // 跳过无法解析的行 } } } @@ -141,202 +105,156 @@ const SpellCheck = () => { reader.releaseLock() } - if (results.length === 0 && fullContent) { - try { - results = JSON.parse(fullContent) - setCorrectionResults(results) - if (formValues.auto_correct) { - let corrected = formValues.user_input_text - results.forEach(item => { - if (item.corrected && item.original) { - corrected = corrected.replace(item.original, item.corrected) - } - }) - setCorrectedText(corrected) - } - } catch (e) { - message.warning('检测完成,但结果格式异常') - } + if (!fullContent) { + message.warning('未能获取到校验结果') } } catch (error) { - console.error('检测错误:', error) - message.error(error instanceof Error ? error.message : '检测失败,请稍后重试') + console.error('校验错误:', error) + message.error(error instanceof Error ? error.message : '校验失败,请稍后重试') } finally { - setIsGenerating(false) + setIsChecking(false) } - } + }, [form]) - const handleReset = () => { + // 清空内容 + const handleClear = useCallback(() => { form.resetFields() - setCorrectionResults([]) - setCorrectedText('') - message.info('已重置表单') - } + setResult('') + setOriginalText('') + message.info('已清空内容') + }, [form]) - const renderCorrectionResults = () => { - if (isGenerating) { + // 复制结果 + const handleCopy = useCallback(async () => { + if (!result) { + message.warning('没有可复制的内容') + return + } + + try { + await navigator.clipboard.writeText(result) + message.success('已复制到剪贴板') + } catch (error) { + message.error('复制失败,请手动选择复制') + } + }, [result]) + + // 渲染校验结果 + const renderResult = () => { + if (isChecking) { return ( -
- 正在检测中,请稍候... +
+ 正在校验中,请稍候...
) } - if (correctionResults.length === 0) { + if (!result && !originalText) { return ( -
- 错别字检测结果将在这里显示 +
+ +
+ 校验结果将在这里显示
) } return ( -
- {correctionResults.map((item, index) => ( -
-
- 位置 {item.position}: -
-
- 原词:{item.original} - - 建议:{item.corrected} -
- {item.suggestions && item.suggestions.length > 0 && ( -
- 其他建议:{item.suggestions.join('、')} -
- )} -
- ))} +
+ {result || ''}
) } return ( -
+
{/* 页面标题区 */}
-

- 错别字检测与纠正系统 -

+ + 错别字校验工具 + + + 上传文档,AI将自动检测并标记错别字 +
- + + {/* 参数输入区 */} - -
+ + - - - - - - - -
- 格式要求:合法的JSON数组,元素为字符串 -
-
{/* 操作按钮区 */} -
+
+
{/* 内容展示区 */} 0 || isGenerating ? 'block' : 'none' - }} + title='校验结果' + style={{ borderRadius: 8 }} >
- {renderCorrectionResults()} + {renderResult()}
- {correctedText && ( - -
- {correctedText} -
-
- )}
) } -export default SpellCheck +export default SpellCheckPage