174 lines
4.9 KiB
TypeScript
174 lines
4.9 KiB
TypeScript
import { useState } from 'react'
|
||
import { Form, Input, Button, Card, Typography, Space, Spin } from 'antd'
|
||
import { ArrowRightOutlined, ClearOutlined } from '@ant-design/icons'
|
||
import type { FetchStreamOptions } from '@copilotkit/react-core'
|
||
|
||
const { Title, Text } = Typography
|
||
|
||
interface DifyResponse {
|
||
message: string
|
||
}
|
||
|
||
export default function NumberToChinese() {
|
||
const [form] = Form.useForm()
|
||
const [loading, setLoading] = useState(false)
|
||
const [result, setResult] = useState('')
|
||
const [error, setError] = useState('')
|
||
|
||
const handleConvert = async (values: { number: string }) => {
|
||
setLoading(true)
|
||
setError('')
|
||
setResult('')
|
||
|
||
try {
|
||
const response = await fetch(`${import.meta.env.VITE_DIFY_API_BASE}/chat-messages`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${import.meta.env.VITE_DIFY_APP_KEY}`
|
||
},
|
||
body: JSON.stringify({
|
||
inputs: { number: values.number },
|
||
query: '1',
|
||
response_mode: 'streaming'
|
||
})
|
||
})
|
||
|
||
if (!response.ok) {
|
||
throw new Error('请求失败')
|
||
}
|
||
|
||
const reader = response.body?.getReader()
|
||
if (!reader) {
|
||
throw new Error('无法读取响应流')
|
||
}
|
||
|
||
const decoder = new TextDecoder()
|
||
let fullContent = ''
|
||
|
||
while (true) {
|
||
const { done, value } = await reader.read()
|
||
if (done) break
|
||
|
||
const chunk = decoder.decode(value)
|
||
const lines = chunk.split('\n')
|
||
|
||
for (const line of lines) {
|
||
if (line.startsWith('data: ')) {
|
||
try {
|
||
const data = JSON.parse(line.slice(6)) as DifyResponse
|
||
if (data.message) {
|
||
fullContent += data.message
|
||
setResult(fullContent)
|
||
}
|
||
} catch {
|
||
// 忽略解析错误
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : '转换失败，请稍后重试')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleReset = () => {
|
||
form.resetFields()
|
||
setResult('')
|
||
setError('')
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-white p-6">
|
||
<div className="max-w-2xl mx-auto">
|
||
{/* 页面标题区 */}
|
||
<div className="text-center mb-8">
|
||
<Title level={2} style={{ color: '#1890ff', margin: 0 }}>
|
||
数字转中文大写转换器
|
||
</Title>
|
||
</div>
|
||
|
||
{/* 参数输入区 */}
|
||
<Card className="mb-6 shadow-sm border-radius-lg">
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
onFinish={handleConvert}
|
||
autoComplete="off"
|
||
>
|
||
<Form.Item
|
||
name="number"
|
||
rules={[
|
||
{ required: true, message: '请输入数字' },
|
||
{ pattern: /^-?\d+(\.\d+)?$/, message: '请输入有效数字' }
|
||
]}
|
||
>
|
||
<Input.TextArea
|
||
placeholder="请输入要转换的数字"
|
||
rows={3}
|
||
className="text-lg"
|
||
allowClear
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item className="mb-0">
|
||
<Space className="w-full justify-center">
|
||
<Button
|
||
type="primary"
|
||
htmlType="submit"
|
||
icon={<ArrowRightOutlined />}
|
||
loading={loading}
|
||
size="large"
|
||
>
|
||
转换
|
||
</Button>
|
||
<Button
|
||
icon={<ClearOutlined />}
|
||
onClick={handleReset}
|
||
size="large"
|
||
>
|
||
重置
|
||
</Button>
|
||
</Space>
|
||
</Form.Item>
|
||
</Form>
|
||
</Card>
|
||
|
||
{/* 内容展示区 */}
|
||
<Card
|
||
className="shadow-sm"
|
||
style={{ minHeight: '150px', maxHeight: '60vh', overflow: 'auto' }}
|
||
>
|
||
{loading && (
|
||
<div className="text-center py-8">
|
||
<Spin size="large" />
|
||
<Text className="block mt-4 text-gray-400">转换中...</Text>
|
||
</div>
|
||
)}
|
||
|
||
{!loading && error && (
|
||
<div className="text-center py-8">
|
||
<Text type="danger">{error}</Text>
|
||
</div>
|
||
)}
|
||
|
||
{!loading && !error && result && (
|
||
<div>
|
||
<Text strong className="block mb-4">转换结果：</Text>
|
||
<div className="text-lg leading-relaxed whitespace-pre-wrap">{result}</div>
|
||
</div>
|
||
)}
|
||
|
||
{!loading && !error && !result && (
|
||
<div className="text-center py-8">
|
||
<Text type="secondary">输入数字后点击转换按钮，结果将显示在这里</Text>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|