Update from Vibe Studio
This commit is contained in:
Vibe Studio
31
src/api/spell-check-tool.ts
Normal file
31
src/api/spell-check-tool.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* 错别字检测与修正工具 API
|
||||
* 调用 Dify 平台进行错别字检测与修正
|
||||
*/
|
||||
|
||||
export interface DifyRequest {
|
||||
inputs: {
|
||||
user_input: string
|
||||
}
|
||||
query: string
|
||||
response_mode: string
|
||||
}
|
||||
|
||||
export function checkSpellingWithDify(user_input: string) {
|
||||
const requestBody: DifyRequest = {
|
||||
inputs: {
|
||||
user_input
|
||||
},
|
||||
query: '1',
|
||||
response_mode: 'streaming'
|
||||
}
|
||||
|
||||
return fetch('https://copilot.sino-bridge.com/v1/chat-messages', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer app-4SnGvNq4HPxFH4Ie8C0xo7ng'
|
||||
},
|
||||
body: JSON.stringify(requestBody)
|
||||
})
|
||||
}
|
||||
316
src/pages/spell-check-tool/index.tsx
Normal file
316
src/pages/spell-check-tool/index.tsx
Normal file
@@ -0,0 +1,316 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Card, Form, Input, Space, message, Typography } from 'antd'
|
||||
import { checkSpellingWithDify } from '@/api/spell-check-tool'
|
||||
|
||||
const { TextArea } = Input
|
||||
const { Title, Text } = Typography
|
||||
|
||||
const SpellCheckTool = () => {
|
||||
const [form] = Form.useForm()
|
||||
const [inputText, setInputText] = useState('')
|
||||
const [resultText, setResultText] = useState('')
|
||||
const [isProcessing, setIsProcessing] = useState(false)
|
||||
const [viewMode, setViewMode] = useState<'original' | 'corrected'>('original')
|
||||
const maxChars = 5000
|
||||
|
||||
const handleGenerate = async () => {
|
||||
try {
|
||||
const formValues = await form.validateFields()
|
||||
|
||||
// 验证输入内容
|
||||
if (!formValues.user_input?.trim()) {
|
||||
message.warning('请输入需要检测错别字的文本')
|
||||
return
|
||||
}
|
||||
|
||||
if (formValues.user_input.length > maxChars) {
|
||||
message.warning(`输入文本不能超过${maxChars}个字符`)
|
||||
return
|
||||
}
|
||||
|
||||
setIsProcessing(true)
|
||||
setResultText('')
|
||||
setViewMode('original')
|
||||
|
||||
const response = await checkSpellingWithDify(formValues.user_input)
|
||||
|
||||
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('检测完成')
|
||||
break
|
||||
}
|
||||
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
|
||||
setResultText(fullContent)
|
||||
} else if (parsed.event === 'error') {
|
||||
throw new Error(parsed.message || 'Dify API 返回错误')
|
||||
}
|
||||
} catch (parseError) {
|
||||
console.warn('跳过无法解析的行:', trimmedLine)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
reader.releaseLock()
|
||||
}
|
||||
|
||||
if (fullContent) {
|
||||
setResultText(fullContent)
|
||||
setViewMode('corrected')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检测错误:', error)
|
||||
message.error(error instanceof Error ? error.message : '检测失败，请稍后重试')
|
||||
} finally {
|
||||
setIsProcessing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
form.resetFields()
|
||||
setInputText('')
|
||||
setResultText('')
|
||||
setIsProcessing(false)
|
||||
setViewMode('original')
|
||||
message.info('已清空内容')
|
||||
}
|
||||
|
||||
const handleCopyResult = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(resultText)
|
||||
message.success('已复制到剪贴板')
|
||||
} catch (error) {
|
||||
message.error('复制失败，请手动复制')
|
||||
}
|
||||
}
|
||||
|
||||
const renderContent = () => {
|
||||
if (isProcessing) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<div className="loading-spinner" style={{
|
||||
display: 'inline-block',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
border: '4px solid #f3f3f3',
|
||||
borderTop: '4px solid #1890ff',
|
||||
borderRadius: '50%',
|
||||
animation: 'spin 1s linear infinite'
|
||||
}} />
|
||||
</div>
|
||||
<Text type="secondary">正在检测中，请稍候...</Text>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!resultText) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', color: '#999', padding: '40px' }}>
|
||||
请输入文本后点击'开始检测'按钮
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (viewMode === 'original') {
|
||||
return (
|
||||
<div style={{
|
||||
padding: '20px',
|
||||
backgroundColor: '#fafafa',
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: '4px',
|
||||
minHeight: '200px',
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordWrap: 'break-word',
|
||||
fontSize: '14px',
|
||||
lineHeight: '1.6'
|
||||
}}>
|
||||
{inputText}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 显示修正后的文本，不同颜色标记修改内容
|
||||
return (
|
||||
<div style={{
|
||||
padding: '20px',
|
||||
backgroundColor: '#f6ffed',
|
||||
border: '1px solid #b7eb8f',
|
||||
borderRadius: '4px',
|
||||
minHeight: '200px',
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordWrap: 'break-word',
|
||||
fontSize: '14px',
|
||||
lineHeight: '1.6'
|
||||
}}>
|
||||
{resultText}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
maxWidth: '800px',
|
||||
margin: '0 auto',
|
||||
padding: '20px',
|
||||
minHeight: '100vh',
|
||||
backgroundColor: '#ffffff'
|
||||
}}>
|
||||
{/* 页面标题区 */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '40px', paddingTop: '20px' }}>
|
||||
<Title level={2} style={{ color: '#1890ff', fontSize: '28px', fontWeight: 'bold', margin: 0 }}>
|
||||
错别字检测与修正工具
|
||||
</Title>
|
||||
</div>
|
||||
|
||||
<Space direction="vertical" style={{ width: '100%' }} size="large">
|
||||
{/* 参数输入区 */}
|
||||
<Card style={{ borderRadius: '8px' }}>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item
|
||||
name="user_input"
|
||||
label={
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
输入文本
|
||||
</Text>
|
||||
}
|
||||
rules={[
|
||||
{ required: true, message: '请输入需要检测错别字的文本' },
|
||||
{ max: maxChars, message: `输入文本不能超过${maxChars}个字符` }
|
||||
]}
|
||||
>
|
||||
<TextArea
|
||||
rows={8}
|
||||
placeholder="请输入需要检测错别字的文本内容..."
|
||||
maxLength={maxChars}
|
||||
showCount
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Microsoft YaHei, -apple-system, BlinkMacSystemFont, sans-serif'
|
||||
}}
|
||||
onChange={(e) => setInputText(e.target.value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
{/* 操作按钮区 */}
|
||||
<div style={{ display: 'flex', justifyContent: 'center', gap: '16px', flexWrap: 'wrap' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={handleGenerate}
|
||||
loading={isProcessing}
|
||||
style={{
|
||||
minWidth: '120px',
|
||||
height: '40px',
|
||||
fontSize: '16px',
|
||||
fontWeight: 500
|
||||
}}
|
||||
>
|
||||
开始检测
|
||||
</Button>
|
||||
<Button
|
||||
size="large"
|
||||
onClick={handleCopyResult}
|
||||
disabled={!resultText || isProcessing}
|
||||
style={{
|
||||
minWidth: '120px',
|
||||
height: '40px',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
复制结果
|
||||
</Button>
|
||||
<Button
|
||||
size="large"
|
||||
onClick={handleReset}
|
||||
disabled={isProcessing}
|
||||
style={{
|
||||
minWidth: '120px',
|
||||
height: '40px',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
清空内容
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 内容展示区 */}
|
||||
<Card
|
||||
title={
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontWeight: 500 }}>检测结果</span>
|
||||
{resultText && !isProcessing && (
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<Button
|
||||
size="small"
|
||||
type={viewMode === 'original' ? 'primary' : 'default'}
|
||||
onClick={() => setViewMode('original')}
|
||||
style={{ fontSize: '12px', height: '28px' }}
|
||||
>
|
||||
原文
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
type={viewMode === 'corrected' ? 'primary' : 'default'}
|
||||
onClick={() => setViewMode('corrected')}
|
||||
style={{ fontSize: '12px', height: '28px' }}
|
||||
>
|
||||
修正后
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
style={{ borderRadius: '8px' }}
|
||||
>
|
||||
{renderContent()}
|
||||
</Card>
|
||||
</Space>
|
||||
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SpellCheckTool
|
||||
Reference in New Issue
Block a user