Update from Vibe Studio
This commit is contained in:
Vibe Studio
29
src/api/number-to-chinese.ts
Normal file
29
src/api/number-to-chinese.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 数字转中文大写转换器 API
|
||||
*/
|
||||
|
||||
/**
|
||||
* 转换数字为中文大写
|
||||
* @param number - 要转换的数字
|
||||
* @returns Promise<ReadableStream> - 流式响应
|
||||
*/
|
||||
export async function convertNumberToChinese(number: string): Promise<ReadableStream> {
|
||||
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 },
|
||||
query: '1',
|
||||
response_mode: 'streaming'
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('转换请求失败')
|
||||
}
|
||||
|
||||
return response.body!
|
||||
}
|
||||
173
src/pages/number-to-chinese/index.tsx
Normal file
173
src/pages/number-to-chinese/index.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -30,6 +30,10 @@ const router: RouteObject[] = [
|
||||
children: [
|
||||
{
|
||||
path: '/',
|
||||
element: LazyLoad(lazy(() => import('@/pages/number-to-chinese')))
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
element: LazyLoad(lazy(() => import('@/pages/home')))
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user