Update from Vibe Studio
This commit is contained in:
Vibe Studio
292
src/pages/contract-review/index.tsx
Normal file
292
src/pages/contract-review/index.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
import { useState } from 'react'
|
||||
import { Button, Card, Form, Input, message, Row, Col, Divider, Typography, Space } from 'antd'
|
||||
import { FileTextOutlined, DownloadOutlined } from '@ant-design/icons'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import { submitContractReview } from '@/api/contract-review'
|
||||
|
||||
const { Title, Paragraph } = Typography
|
||||
|
||||
const { TextArea } = Input
|
||||
|
||||
const ContractReview = () => {
|
||||
const [form] = Form.useForm()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [reviewResult, setReviewResult] = useState('')
|
||||
const [currentContract, setCurrentContract] = useState('')
|
||||
const maxChars = 10000
|
||||
|
||||
const handleReview = async () => {
|
||||
try {
|
||||
const contract_text = form.getFieldValue('contract_fragment') || ''
|
||||
const knowledge_base = '通用合同审核规则' // 固定使用通用知识库
|
||||
|
||||
// 验证输入
|
||||
if (!contract_text.trim()) {
|
||||
message.warning('请输入需要审核的合同片段')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setReviewResult('')
|
||||
|
||||
const response = await submitContractReview(contract_text, knowledge_base)
|
||||
|
||||
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
|
||||
setReviewResult(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()
|
||||
setReviewResult('')
|
||||
setCurrentContract('')
|
||||
message.info('已清空内容')
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
if (!reviewResult) {
|
||||
message.warning('没有可导出的内容')
|
||||
return
|
||||
}
|
||||
|
||||
// 创建下载链接
|
||||
const element = document.createElement('a')
|
||||
const file = new Blob([reviewResult], { type: 'text/plain;charset=utf-8' })
|
||||
element.href = URL.createObjectURL(file)
|
||||
element.download = `合同审核报告_${new Date().toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
}).replace(/\//g, '-')}.txt`
|
||||
document.body.appendChild(element)
|
||||
element.click()
|
||||
document.body.removeChild(element)
|
||||
message.success('导出成功')
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '1200px', margin: '0 auto', padding: '20px' }}>
|
||||
<Space direction="vertical" size="small" style={{ marginBottom: '30px', textAlign: 'center' }}>
|
||||
<Title level={2} style={{ color: '#1890ff', marginBottom: '8px' }}>
|
||||
合同智能审核
|
||||
</Title>
|
||||
<Paragraph style={{ color: '#666', fontSize: '14px', marginBottom: 0 }}>
|
||||
AI驱动的合同智能审核工具，基于通用合同审核规则快速识别风险点并提供专业建议
|
||||
</Paragraph>
|
||||
</Space>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
||||
{/* 参数输入区 */}
|
||||
<Card title="参数输入区">
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item
|
||||
name="contract_fragment"
|
||||
label={
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
|
||||
<span>合同片段</span>
|
||||
<span style={{ color: currentContract.length > maxChars ? '#ff4d4f' : '#999' }}>
|
||||
{currentContract.length} / {maxChars}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
rules={[
|
||||
{ required: true, message: '请输入需要审核的合同片段' },
|
||||
{ max: maxChars, message: `输入内容不能超过${maxChars}个字符` }
|
||||
]}
|
||||
>
|
||||
<TextArea
|
||||
placeholder="请输入需要审核的合同片段内容（最多10000个字符）"
|
||||
rows={10}
|
||||
value={currentContract}
|
||||
onChange={(e) => setCurrentContract(e.target.value)}
|
||||
showCount
|
||||
maxLength={maxChars}
|
||||
style={{ fontSize: '14px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* 知识库选择已隐藏，默认使用通用合同审核规则 */}
|
||||
<input type="hidden" name="knowledge_base" value="通用合同审核规则" />
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
{/* 操作按钮区 */}
|
||||
<div style={{ display: 'flex', justifyContent: 'center', gap: '16px' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={handleReview}
|
||||
loading={loading}
|
||||
icon={<FileTextOutlined />}
|
||||
style={{ minWidth: '140px', height: '44px', fontSize: '16px' }}
|
||||
>
|
||||
开始审核
|
||||
</Button>
|
||||
<Button
|
||||
size="large"
|
||||
onClick={handleClear}
|
||||
disabled={loading}
|
||||
style={{ minWidth: '120px', height: '44px', fontSize: '16px' }}
|
||||
>
|
||||
清空
|
||||
</Button>
|
||||
<Button
|
||||
size="large"
|
||||
onClick={handleExport}
|
||||
disabled={!reviewResult || loading}
|
||||
icon={<DownloadOutlined />}
|
||||
style={{ minWidth: '120px', height: '44px', fontSize: '16px' }}
|
||||
>
|
||||
导出报告
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 内容展示区 */}
|
||||
<Card
|
||||
title="审核结果"
|
||||
extra={
|
||||
reviewResult && (
|
||||
<span style={{ color: '#52c41a', fontWeight: 'bold' }}>
|
||||
审核完成
|
||||
</span>
|
||||
)
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
minHeight: '300px',
|
||||
maxHeight: '600px',
|
||||
overflowY: 'auto',
|
||||
padding: '20px',
|
||||
backgroundColor: '#fafafa',
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: '6px'
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<div style={{ textAlign: 'center', color: '#999', padding: '40px' }}>
|
||||
<div style={{ fontSize: '16px', marginBottom: '8px' }}>🤖 AI 正在审核中...</div>
|
||||
<div style={{ fontSize: '12px' }}>请稍候，审核过程可能需要几分钟时间</div>
|
||||
</div>
|
||||
) : reviewResult ? (
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
// 自定义样式
|
||||
h1: ({ children }) => <h1 style={{ color: '#1890ff', fontSize: '20px', marginBottom: '16px', borderBottom: '2px solid #1890ff', paddingBottom: '8px' }}>{children}</h1>,
|
||||
h2: ({ children }) => <h2 style={{ color: '#1890ff', fontSize: '18px', marginBottom: '12px', marginTop: '20px' }}>{children}</h2>,
|
||||
h3: ({ children }) => <h3 style={{ color: '#333', fontSize: '16px', marginBottom: '10px', marginTop: '16px' }}>{children}</h3>,
|
||||
p: ({ children }) => <p style={{ marginBottom: '12px', lineHeight: '1.6', color: '#333' }}>{children}</p>,
|
||||
table: ({ children }) => (
|
||||
<div style={{ overflowX: 'auto', marginBottom: '16px' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '14px' }}>{children}</table>
|
||||
</div>
|
||||
),
|
||||
th: ({ children }) => <th style={{ border: '1px solid #d9d9d9', padding: '8px 12px', backgroundColor: '#f5f5f5', fontWeight: 'bold', textAlign: 'left' }}>{children}</th>,
|
||||
td: ({ children }) => <td style={{ border: '1px solid #d9d9d9', padding: '8px 12px' }}>{children}</td>,
|
||||
ul: ({ children }) => <ul style={{ marginBottom: '12px', paddingLeft: '20px' }}>{children}</ul>,
|
||||
ol: ({ children }) => <ol style={{ marginBottom: '12px', paddingLeft: '20px' }}>{children}</ol>,
|
||||
li: ({ children }) => <li style={{ marginBottom: '4px', lineHeight: '1.6' }}>{children}</li>,
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote style={{ borderLeft: '4px solid #1890ff', paddingLeft: '16px', marginLeft: 0, marginBottom: '12px', fontStyle: 'italic', backgroundColor: '#f0f9ff', padding: '12px 16px' }}>
|
||||
{children}
|
||||
</blockquote>
|
||||
),
|
||||
code: ({ children }) => (
|
||||
<code style={{ backgroundColor: '#f5f5f5', padding: '2px 4px', borderRadius: '3px', fontSize: '13px', fontFamily: 'Monaco, Consolas, monospace' }}>
|
||||
{children}
|
||||
</code>
|
||||
),
|
||||
pre: ({ children }) => (
|
||||
<pre style={{ backgroundColor: '#f5f5f5', padding: '12px', borderRadius: '6px', overflowX: 'auto', marginBottom: '12px' }}>
|
||||
{children}
|
||||
</pre>
|
||||
),
|
||||
strong: ({ children }) => <strong style={{ fontWeight: 'bold', color: '#1890ff' }}>{children}</strong>
|
||||
}}
|
||||
>
|
||||
{reviewResult}
|
||||
</ReactMarkdown>
|
||||
) : (
|
||||
<div style={{ textAlign: 'center', color: '#999', padding: '60px' }}>
|
||||
<FileTextOutlined style={{ fontSize: '48px', marginBottom: '16px', display: 'block' }} />
|
||||
<div>审核结果将在这里显示</div>
|
||||
<div style={{ fontSize: '12px', marginTop: '8px' }}>
|
||||
请输入合同片段，然后点击"开始审核"
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContractReview
|
||||
Reference in New Issue
Block a user