Initial commit: Copilot Toolbox template project
This commit is contained in:
Evan
216
src/pages/zh-en-translator/index.tsx
Normal file
216
src/pages/zh-en-translator/index.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Card, Form, Input, message, Space } from 'antd'
|
||||
import { PageHeader } from '@ant-design/pro-components'
|
||||
import { translateChineseToEnglish } from '@/api/zh-en-translator'
|
||||
|
||||
const ZhEnTranslator = () => {
|
||||
const [form] = Form.useForm()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [translationResult, setTranslationResult] = useState('')
|
||||
const [currentInput, setCurrentInput] = useState('')
|
||||
const maxChars = 5000
|
||||
|
||||
const handleTranslate = async () => {
|
||||
try {
|
||||
const source_content = form.getFieldValue('source_content') || ''
|
||||
if (!source_content.trim()) {
|
||||
message.warning('请输入要翻译的中文内容')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setTranslationResult('')
|
||||
|
||||
const response = await translateChineseToEnglish(source_content)
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text()
|
||||
throw new Error(`翻译请求失败: ${response.status} ${errorText}`)
|
||||
}
|
||||
|
||||
if (!response.body) {
|
||||
throw new Error('响应体为空')
|
||||
}
|
||||
|
||||
const reader = response.body.getReader()
|
||||
const decoder = new TextDecoder('utf-8')
|
||||
let buffer = ''
|
||||
let fullContent = ''
|
||||
|
||||
try {
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
|
||||
buffer += decoder.decode(value, { stream: true })
|
||||
const lines = buffer.split('\n')
|
||||
buffer = lines.pop() || ''
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmedLine = line.trim()
|
||||
if (!trimmedLine || trimmedLine === 'data: [DONE]') {
|
||||
if (trimmedLine === 'data: [DONE]') {
|
||||
message.success('翻译完成')
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
continue
|
||||
}
|
||||
|
||||
if (trimmedLine.startsWith('data: ')) {
|
||||
try {
|
||||
const data = trimmedLine.slice(6)
|
||||
const parsed = JSON.parse(data)
|
||||
|
||||
if (parsed.event === 'message' && parsed.answer) {
|
||||
fullContent += parsed.answer
|
||||
setTranslationResult(fullContent)
|
||||
} else if (parsed.event === 'error') {
|
||||
throw new Error(parsed.message || 'Dify API 返回错误')
|
||||
}
|
||||
} catch (parseError) {
|
||||
console.warn('跳过无法解析的行:', trimmedLine)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
reader.releaseLock()
|
||||
}
|
||||
|
||||
if (fullContent) {
|
||||
message.success('翻译完成')
|
||||
} else {
|
||||
throw new Error('未收到翻译结果')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('翻译错误:', error)
|
||||
message.error(error instanceof Error ? error.message : '翻译失败，请稍后重试')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
form.resetFields()
|
||||
setTranslationResult('')
|
||||
setCurrentInput('')
|
||||
message.info('已清空内容')
|
||||
}
|
||||
|
||||
const handleCopy = async () => {
|
||||
if (!translationResult) {
|
||||
message.warning('没有可复制的内容')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(translationResult)
|
||||
message.success('复制成功')
|
||||
} catch (error) {
|
||||
console.error('复制失败:', error)
|
||||
message.error('复制失败，请手动复制')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '900px', margin: '0 auto', padding: '20px' }}>
|
||||
<PageHeader
|
||||
title="中文转英文翻译助手"
|
||||
subTitle="专业的中文到英文文本翻译工具，支持流式输出，翻译结果地道自然"
|
||||
style={{ marginBottom: '30px' }}
|
||||
/>
|
||||
|
||||
<Space direction="vertical" style={{ width: '100%' }} size="large">
|
||||
<Card title="参数输入区">
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item
|
||||
name="source_content"
|
||||
label={
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
|
||||
<span>中文原文</span>
|
||||
<span style={{ color: currentInput.length > maxChars ? '#ff4d4f' : '#999' }}>
|
||||
{currentInput.length} / {maxChars}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
rules={[
|
||||
{ required: true, message: '请输入要翻译的中文内容' },
|
||||
{ max: maxChars, message: `输入内容不能超过${maxChars}个字符` }
|
||||
]}
|
||||
>
|
||||
<Input.TextArea
|
||||
placeholder="请输入需要翻译的中文内容（最多5000个字符）"
|
||||
rows={8}
|
||||
value={currentInput}
|
||||
onChange={(e) => setCurrentInput(e.target.value)}
|
||||
showCount
|
||||
maxLength={maxChars}
|
||||
style={{ fontSize: '14px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<Space style={{ width: '100%', justifyContent: 'center' }} size="middle">
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={handleTranslate}
|
||||
loading={loading}
|
||||
style={{ minWidth: '120px', height: '40px', fontSize: '16px' }}
|
||||
>
|
||||
翻译
|
||||
</Button>
|
||||
<Button
|
||||
size="large"
|
||||
onClick={handleClear}
|
||||
disabled={loading}
|
||||
style={{ minWidth: '120px', height: '40px', fontSize: '16px' }}
|
||||
>
|
||||
清空
|
||||
</Button>
|
||||
</Space>
|
||||
|
||||
<Card
|
||||
title="翻译结果"
|
||||
extra={
|
||||
translationResult && (
|
||||
<Button onClick={handleCopy} size="small">
|
||||
复制
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
minHeight: '150px',
|
||||
maxHeight: '400px',
|
||||
overflowY: 'auto',
|
||||
padding: '15px',
|
||||
backgroundColor: '#fafafa',
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: '4px',
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordWrap: 'break-word',
|
||||
fontSize: '14px',
|
||||
lineHeight: '1.6'
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<div style={{ textAlign: 'center', color: '#999', padding: '20px' }}>
|
||||
正在翻译中，请稍候...
|
||||
</div>
|
||||
) : translationResult || (
|
||||
<div style={{ textAlign: 'center', color: '#999' }}>
|
||||
翻译结果将在这里显示
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</Space>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ZhEnTranslator
|
||||
Reference in New Issue
Block a user