805 lines
24 KiB
TypeScript
805 lines
24 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|||
|
|
import {
|
|||
|
|
Card,
|
|||
|
|
Descriptions,
|
|||
|
|
Button,
|
|||
|
|
Tag,
|
|||
|
|
Typography,
|
|||
|
|
Space,
|
|||
|
|
Modal,
|
|||
|
|
Input,
|
|||
|
|
message,
|
|||
|
|
Spin,
|
|||
|
|
Timeline,
|
|||
|
|
Tabs,
|
|||
|
|
Avatar,
|
|||
|
|
Progress,
|
|||
|
|
Select,
|
|||
|
|
Form,
|
|||
|
|
Switch,
|
|||
|
|
Divider,
|
|||
|
|
Alert,
|
|||
|
|
Table,
|
|||
|
|
Rate,
|
|||
|
|
Statistic,
|
|||
|
|
Row,
|
|||
|
|
Col,
|
|||
|
|
} from 'antd';
|
|||
|
|
import {
|
|||
|
|
ArrowLeftOutlined,
|
|||
|
|
PlayCircleOutlined,
|
|||
|
|
PauseCircleOutlined,
|
|||
|
|
DownloadOutlined,
|
|||
|
|
StarOutlined,
|
|||
|
|
PhoneOutlined,
|
|||
|
|
ClockCircleOutlined,
|
|||
|
|
DollarOutlined,
|
|||
|
|
UserOutlined,
|
|||
|
|
SoundOutlined,
|
|||
|
|
FileTextOutlined,
|
|||
|
|
TranslationOutlined,
|
|||
|
|
EditOutlined,
|
|||
|
|
DeleteOutlined,
|
|||
|
|
CheckCircleOutlined,
|
|||
|
|
ExclamationCircleOutlined,
|
|||
|
|
AuditOutlined,
|
|||
|
|
SettingOutlined,
|
|||
|
|
MessageOutlined,
|
|||
|
|
} from '@ant-design/icons';
|
|||
|
|
import { TranslationCall } from '../../types';
|
|||
|
|
import { database } from '../../utils/database';
|
|||
|
|
import { api } from '../../utils/api';
|
|||
|
|
|
|||
|
|
const { Title, Text, Paragraph } = Typography;
|
|||
|
|
const { TextArea } = Input;
|
|||
|
|
const { TabPane } = Tabs;
|
|||
|
|
const { Option } = Select;
|
|||
|
|
|
|||
|
|
interface CallDetailProps {}
|
|||
|
|
|
|||
|
|
const CallDetail: React.FC<CallDetailProps> = () => {
|
|||
|
|
const { id } = useParams<{ id: string }>();
|
|||
|
|
const navigate = useNavigate();
|
|||
|
|
|
|||
|
|
const [call, setCall] = useState<TranslationCall | null>(null);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|||
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|||
|
|
const [duration, setDuration] = useState(0);
|
|||
|
|
const [editModalVisible, setEditModalVisible] = useState(false);
|
|||
|
|
const [statusModalVisible, setStatusModalVisible] = useState(false);
|
|||
|
|
const [refundModalVisible, setRefundModalVisible] = useState(false);
|
|||
|
|
const [adminNoteModalVisible, setAdminNoteModalVisible] = useState(false);
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
const [statusForm] = Form.useForm();
|
|||
|
|
const [refundForm] = Form.useForm();
|
|||
|
|
const [noteForm] = Form.useForm();
|
|||
|
|
|
|||
|
|
// 模拟音频播放状态
|
|||
|
|
const [audioProgress, setAudioProgress] = useState(0);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (id) {
|
|||
|
|
loadCallDetails();
|
|||
|
|
}
|
|||
|
|
}, [id]);
|
|||
|
|
|
|||
|
|
const loadCallDetails = async () => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
await database.connect();
|
|||
|
|
|
|||
|
|
// 模拟获取通话详情（管理员视角）
|
|||
|
|
const mockCall: TranslationCall = {
|
|||
|
|
id: id!,
|
|||
|
|
userId: 'user_1',
|
|||
|
|
callId: `CA${Date.now()}`,
|
|||
|
|
clientName: '张先生',
|
|||
|
|
clientPhone: '+86 138 0013 8000',
|
|||
|
|
type: 'human',
|
|||
|
|
status: 'completed',
|
|||
|
|
sourceLanguage: 'zh-CN',
|
|||
|
|
targetLanguage: 'en-US',
|
|||
|
|
startTime: '2024-01-15T10:30:00Z',
|
|||
|
|
endTime: '2024-01-15T10:45:00Z',
|
|||
|
|
duration: 900,
|
|||
|
|
cost: 45.00,
|
|||
|
|
rating: 5,
|
|||
|
|
feedback: '翻译非常专业，沟通顺畅，非常满意！',
|
|||
|
|
translatorId: 'translator_1',
|
|||
|
|
translatorName: '李翻译',
|
|||
|
|
translatorPhone: '+86 138 0013 8001',
|
|||
|
|
recordingUrl: '/recordings/call_123456.mp3',
|
|||
|
|
transcription: '用户: 您好，我想了解一下贵公司的产品服务。\n翻译: Hello, I would like to learn about your company\'s products and services.\n客户: Thank you for your interest. Let me introduce our main products...\n翻译: 感谢您的关注。让我为您介绍我们的主要产品...',
|
|||
|
|
translation: '这是一次关于产品咨询的商务通话，客户询问了公司的主要产品和服务，我们提供了详细的介绍和说明。',
|
|||
|
|
// 管理员相关字段
|
|||
|
|
adminNotes: '通话质量良好，客户满意度高',
|
|||
|
|
paymentStatus: 'paid',
|
|||
|
|
refundAmount: 0,
|
|||
|
|
qualityScore: 95,
|
|||
|
|
issues: [],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
setCall(mockCall);
|
|||
|
|
setDuration(mockCall.duration || 0);
|
|||
|
|
|
|||
|
|
// 填充表单数据
|
|||
|
|
form.setFieldsValue({
|
|||
|
|
clientName: mockCall.clientName,
|
|||
|
|
clientPhone: mockCall.clientPhone,
|
|||
|
|
translatorName: mockCall.translatorName,
|
|||
|
|
cost: mockCall.cost,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
statusForm.setFieldsValue({
|
|||
|
|
status: mockCall.status,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载通话详情失败:', error);
|
|||
|
|
message.error('加载通话详情失败');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handlePlayPause = () => {
|
|||
|
|
setIsPlaying(!isPlaying);
|
|||
|
|
|
|||
|
|
if (!isPlaying) {
|
|||
|
|
// 模拟音频播放
|
|||
|
|
const interval = setInterval(() => {
|
|||
|
|
setCurrentTime(prev => {
|
|||
|
|
const newTime = prev + 1;
|
|||
|
|
setAudioProgress((newTime / duration) * 100);
|
|||
|
|
|
|||
|
|
if (newTime >= duration) {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
setIsPlaying(false);
|
|||
|
|
setCurrentTime(0);
|
|||
|
|
setAudioProgress(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return newTime;
|
|||
|
|
});
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleEdit = async (values: any) => {
|
|||
|
|
if (!call) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const updatedCall = {
|
|||
|
|
...call,
|
|||
|
|
...values,
|
|||
|
|
updatedAt: new Date().toISOString(),
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
setCall(updatedCall);
|
|||
|
|
setEditModalVisible(false);
|
|||
|
|
message.success('通话信息更新成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('更新通话信息失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleStatusChange = async (values: any) => {
|
|||
|
|
if (!call) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const updatedCall = {
|
|||
|
|
...call,
|
|||
|
|
status: values.status,
|
|||
|
|
updatedAt: new Date().toISOString(),
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
setCall(updatedCall);
|
|||
|
|
setStatusModalVisible(false);
|
|||
|
|
message.success('状态更新成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('更新状态失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleRefund = async (values: any) => {
|
|||
|
|
if (!call) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const refundAmount = values.amount || call.cost;
|
|||
|
|
|
|||
|
|
// 模拟退款API调用
|
|||
|
|
await api.refundPayment(`payment_${call.id}`, refundAmount);
|
|||
|
|
|
|||
|
|
const updatedCall = {
|
|||
|
|
...call,
|
|||
|
|
refundAmount: refundAmount,
|
|||
|
|
paymentStatus: 'refunded' as const,
|
|||
|
|
updatedAt: new Date().toISOString(),
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
setCall(updatedCall);
|
|||
|
|
setRefundModalVisible(false);
|
|||
|
|
message.success('退款处理成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('退款处理失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddAdminNote = async (values: any) => {
|
|||
|
|
if (!call) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const updatedCall = {
|
|||
|
|
...call,
|
|||
|
|
adminNotes: values.note,
|
|||
|
|
updatedAt: new Date().toISOString(),
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
setCall(updatedCall);
|
|||
|
|
setAdminNoteModalVisible(false);
|
|||
|
|
message.success('管理员备注添加成功');
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('添加备注失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formatTime = (seconds: number) => {
|
|||
|
|
const mins = Math.floor(seconds / 60);
|
|||
|
|
const secs = seconds % 60;
|
|||
|
|
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getStatusColor = (status: string) => {
|
|||
|
|
const colors = {
|
|||
|
|
pending: 'orange',
|
|||
|
|
active: 'blue',
|
|||
|
|
completed: 'green',
|
|||
|
|
cancelled: 'red',
|
|||
|
|
refunded: 'purple',
|
|||
|
|
};
|
|||
|
|
return colors[status as keyof typeof colors] || 'default';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getStatusText = (status: string) => {
|
|||
|
|
const texts = {
|
|||
|
|
pending: '等待中',
|
|||
|
|
active: '通话中',
|
|||
|
|
completed: '已完成',
|
|||
|
|
cancelled: '已取消',
|
|||
|
|
refunded: '已退款',
|
|||
|
|
};
|
|||
|
|
return texts[status as keyof typeof texts] || status;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getPaymentStatusColor = (status: string) => {
|
|||
|
|
const colors = {
|
|||
|
|
pending: 'orange',
|
|||
|
|
paid: 'green',
|
|||
|
|
refunded: 'purple',
|
|||
|
|
failed: 'red',
|
|||
|
|
};
|
|||
|
|
return colors[status as keyof typeof colors] || 'default';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getPaymentStatusText = (status: string) => {
|
|||
|
|
const texts = {
|
|||
|
|
pending: '待支付',
|
|||
|
|
paid: '已支付',
|
|||
|
|
refunded: '已退款',
|
|||
|
|
failed: '支付失败',
|
|||
|
|
};
|
|||
|
|
return texts[status as keyof typeof texts] || status;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ textAlign: 'center', padding: '50px' }}>
|
|||
|
|
<Spin size="large" />
|
|||
|
|
<div style={{ marginTop: '16px' }}>加载通话详情...</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!call) {
|
|||
|
|
return (
|
|||
|
|
<div style={{ textAlign: 'center', padding: '50px' }}>
|
|||
|
|
<div>通话记录不存在</div>
|
|||
|
|
<Button type="primary" onClick={() => navigate('/calls')} style={{ marginTop: '16px' }}>
|
|||
|
|
返回通话列表
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ padding: '24px' }}>
|
|||
|
|
{/* 头部导航 */}
|
|||
|
|
<div style={{ marginBottom: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|||
|
|
<div>
|
|||
|
|
<Button
|
|||
|
|
icon={<ArrowLeftOutlined />}
|
|||
|
|
onClick={() => navigate('/calls')}
|
|||
|
|
style={{ marginRight: '16px' }}
|
|||
|
|
>
|
|||
|
|
返回
|
|||
|
|
</Button>
|
|||
|
|
<Title level={2} style={{ display: 'inline-block', margin: 0 }}>
|
|||
|
|
通话详情 #{call.id}
|
|||
|
|
</Title>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 管理员操作按钮 */}
|
|||
|
|
<Space>
|
|||
|
|
<Button
|
|||
|
|
icon={<EditOutlined />}
|
|||
|
|
onClick={() => setEditModalVisible(true)}
|
|||
|
|
>
|
|||
|
|
编辑信息
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
icon={<SettingOutlined />}
|
|||
|
|
onClick={() => setStatusModalVisible(true)}
|
|||
|
|
>
|
|||
|
|
更改状态
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
icon={<DollarOutlined />}
|
|||
|
|
onClick={() => setRefundModalVisible(true)}
|
|||
|
|
disabled={call.paymentStatus !== 'paid'}
|
|||
|
|
>
|
|||
|
|
处理退款
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
icon={<MessageOutlined />}
|
|||
|
|
onClick={() => setAdminNoteModalVisible(true)}
|
|||
|
|
>
|
|||
|
|
添加备注
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 系统状态提醒 */}
|
|||
|
|
{call.issues && call.issues.length > 0 && (
|
|||
|
|
<Alert
|
|||
|
|
message="系统检测到问题"
|
|||
|
|
description={call.issues.join(', ')}
|
|||
|
|
type="warning"
|
|||
|
|
showIcon
|
|||
|
|
style={{ marginBottom: '24px' }}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 基本信息卡片 */}
|
|||
|
|
<Card title="通话信息" style={{ marginBottom: '24px' }}>
|
|||
|
|
<Descriptions column={3} bordered>
|
|||
|
|
<Descriptions.Item label="通话ID" span={1}>
|
|||
|
|
{call.callId}
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="状态" span={1}>
|
|||
|
|
<Tag color={getStatusColor(call.status)}>
|
|||
|
|
{getStatusText(call.status)}
|
|||
|
|
</Tag>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="支付状态" span={1}>
|
|||
|
|
<Tag color={getPaymentStatusColor(call.paymentStatus)}>
|
|||
|
|
{getPaymentStatusText(call.paymentStatus)}
|
|||
|
|
</Tag>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="客户姓名" span={1}>
|
|||
|
|
<Space>
|
|||
|
|
<UserOutlined />
|
|||
|
|
{call.clientName}
|
|||
|
|
</Space>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="客户电话" span={1}>
|
|||
|
|
<Space>
|
|||
|
|
<PhoneOutlined />
|
|||
|
|
{call.clientPhone}
|
|||
|
|
</Space>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="译员" span={1}>
|
|||
|
|
<Space>
|
|||
|
|
<Avatar size="small" icon={<UserOutlined />} />
|
|||
|
|
{call.translatorName}
|
|||
|
|
</Space>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="开始时间" span={1}>
|
|||
|
|
<Space>
|
|||
|
|
<ClockCircleOutlined />
|
|||
|
|
{new Date(call.startTime).toLocaleString()}
|
|||
|
|
</Space>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="结束时间" span={1}>
|
|||
|
|
<Space>
|
|||
|
|
<ClockCircleOutlined />
|
|||
|
|
{call.endTime ? new Date(call.endTime).toLocaleString() : '-'}
|
|||
|
|
</Space>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="通话时长" span={1}>
|
|||
|
|
<Space>
|
|||
|
|
<PhoneOutlined />
|
|||
|
|
{formatTime(call.duration || 0)}
|
|||
|
|
</Space>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="费用" span={1}>
|
|||
|
|
<Space>
|
|||
|
|
<DollarOutlined />
|
|||
|
|
<Text strong>¥{call.cost.toFixed(2)}</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="退款金额" span={1}>
|
|||
|
|
<Space>
|
|||
|
|
<DollarOutlined />
|
|||
|
|
<Text type={call.refundAmount > 0 ? 'danger' : 'secondary'}>
|
|||
|
|
¥{call.refundAmount.toFixed(2)}
|
|||
|
|
</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="质量评分" span={1}>
|
|||
|
|
<Space>
|
|||
|
|
<AuditOutlined />
|
|||
|
|
<Text strong style={{ color: call.qualityScore >= 90 ? '#52c41a' : call.qualityScore >= 70 ? '#faad14' : '#ff4d4f' }}>
|
|||
|
|
{call.qualityScore}/100
|
|||
|
|
</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
</Descriptions>
|
|||
|
|
|
|||
|
|
{call.adminNotes && (
|
|||
|
|
<div style={{ marginTop: '16px' }}>
|
|||
|
|
<Text strong>管理员备注：</Text>
|
|||
|
|
<Paragraph style={{ marginTop: '8px', background: '#f6f6f6', padding: '12px', borderRadius: '6px' }}>
|
|||
|
|
{call.adminNotes}
|
|||
|
|
</Paragraph>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 录音播放器 */}
|
|||
|
|
{call.recordingUrl && (
|
|||
|
|
<Card
|
|||
|
|
title={
|
|||
|
|
<Space>
|
|||
|
|
<SoundOutlined />
|
|||
|
|
录音播放
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
style={{ marginBottom: '24px' }}
|
|||
|
|
>
|
|||
|
|
<div style={{ textAlign: 'center', padding: '20px' }}>
|
|||
|
|
<div style={{ marginBottom: '20px' }}>
|
|||
|
|
<Button
|
|||
|
|
type="primary"
|
|||
|
|
size="large"
|
|||
|
|
icon={isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
|
|||
|
|
onClick={handlePlayPause}
|
|||
|
|
style={{ marginRight: '16px' }}
|
|||
|
|
>
|
|||
|
|
{isPlaying ? '暂停' : '播放'}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
icon={<DownloadOutlined />}
|
|||
|
|
onClick={() => message.success('录音下载中...')}
|
|||
|
|
>
|
|||
|
|
下载录音
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ margin: '20px 0' }}>
|
|||
|
|
<Progress
|
|||
|
|
percent={audioProgress}
|
|||
|
|
showInfo={false}
|
|||
|
|
strokeColor="#1890ff"
|
|||
|
|
/>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '8px' }}>
|
|||
|
|
<Text type="secondary">{formatTime(currentTime)}</Text>
|
|||
|
|
<Text type="secondary">{formatTime(duration)}</Text>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 详细内容标签页 */}
|
|||
|
|
<Card>
|
|||
|
|
<Tabs defaultActiveKey="transcription">
|
|||
|
|
<TabPane
|
|||
|
|
tab={
|
|||
|
|
<Space>
|
|||
|
|
<FileTextOutlined />
|
|||
|
|
转录内容
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
key="transcription"
|
|||
|
|
>
|
|||
|
|
<div style={{ minHeight: '200px' }}>
|
|||
|
|
{call.transcription ? (
|
|||
|
|
<Paragraph>
|
|||
|
|
<pre style={{ whiteSpace: 'pre-wrap', fontFamily: 'inherit' }}>
|
|||
|
|
{call.transcription}
|
|||
|
|
</pre>
|
|||
|
|
</Paragraph>
|
|||
|
|
) : (
|
|||
|
|
<div style={{ textAlign: 'center', color: '#999', padding: '50px' }}>
|
|||
|
|
暂无转录内容
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</TabPane>
|
|||
|
|
|
|||
|
|
<TabPane
|
|||
|
|
tab={
|
|||
|
|
<Space>
|
|||
|
|
<TranslationOutlined />
|
|||
|
|
翻译摘要
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
key="translation"
|
|||
|
|
>
|
|||
|
|
<div style={{ minHeight: '200px' }}>
|
|||
|
|
{call.translation ? (
|
|||
|
|
<Paragraph>{call.translation}</Paragraph>
|
|||
|
|
) : (
|
|||
|
|
<div style={{ textAlign: 'center', color: '#999', padding: '50px' }}>
|
|||
|
|
暂无翻译摘要
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</TabPane>
|
|||
|
|
|
|||
|
|
<TabPane
|
|||
|
|
tab={
|
|||
|
|
<Space>
|
|||
|
|
<StarOutlined />
|
|||
|
|
用户评价
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
key="rating"
|
|||
|
|
>
|
|||
|
|
<div style={{ minHeight: '200px', padding: '20px' }}>
|
|||
|
|
<div style={{ marginBottom: '20px' }}>
|
|||
|
|
<Text strong>服务评分：</Text>
|
|||
|
|
<Rate disabled value={call.rating} style={{ marginLeft: '8px' }} />
|
|||
|
|
{call.rating && (
|
|||
|
|
<Text style={{ marginLeft: '8px' }}>
|
|||
|
|
({call.rating}/5 分)
|
|||
|
|
</Text>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{call.feedback && (
|
|||
|
|
<div>
|
|||
|
|
<Text strong>用户反馈：</Text>
|
|||
|
|
<Paragraph style={{ marginTop: '8px' }}>
|
|||
|
|
{call.feedback}
|
|||
|
|
</Paragraph>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</TabPane>
|
|||
|
|
|
|||
|
|
<TabPane
|
|||
|
|
tab={
|
|||
|
|
<Space>
|
|||
|
|
<AuditOutlined />
|
|||
|
|
质量分析
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
key="quality"
|
|||
|
|
>
|
|||
|
|
<div style={{ padding: '20px' }}>
|
|||
|
|
<Descriptions column={2}>
|
|||
|
|
<Descriptions.Item label="质量评分">
|
|||
|
|
<Progress
|
|||
|
|
type="circle"
|
|||
|
|
percent={call.qualityScore}
|
|||
|
|
width={80}
|
|||
|
|
strokeColor={call.qualityScore >= 90 ? '#52c41a' : call.qualityScore >= 70 ? '#faad14' : '#ff4d4f'}
|
|||
|
|
/>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="系统检测">
|
|||
|
|
{call.issues && call.issues.length > 0 ? (
|
|||
|
|
<div>
|
|||
|
|
{call.issues.map((issue, index) => (
|
|||
|
|
<Tag key={index} color="red" style={{ marginBottom: '4px' }}>
|
|||
|
|
{issue}
|
|||
|
|
</Tag>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<Tag color="green">无异常</Tag>
|
|||
|
|
)}
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
</Descriptions>
|
|||
|
|
</div>
|
|||
|
|
</TabPane>
|
|||
|
|
</Tabs>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 编辑信息弹窗 */}
|
|||
|
|
<Modal
|
|||
|
|
title="编辑通话信息"
|
|||
|
|
visible={editModalVisible}
|
|||
|
|
onCancel={() => setEditModalVisible(false)}
|
|||
|
|
footer={null}
|
|||
|
|
width={600}
|
|||
|
|
>
|
|||
|
|
<Form
|
|||
|
|
form={form}
|
|||
|
|
layout="vertical"
|
|||
|
|
onFinish={handleEdit}
|
|||
|
|
>
|
|||
|
|
<Form.Item
|
|||
|
|
name="clientName"
|
|||
|
|
label="客户姓名"
|
|||
|
|
rules={[{ required: true, message: '请输入客户姓名' }]}
|
|||
|
|
>
|
|||
|
|
<Input />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
name="clientPhone"
|
|||
|
|
label="客户电话"
|
|||
|
|
rules={[{ required: true, message: '请输入客户电话' }]}
|
|||
|
|
>
|
|||
|
|
<Input />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
name="translatorName"
|
|||
|
|
label="译员姓名"
|
|||
|
|
>
|
|||
|
|
<Input />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
name="cost"
|
|||
|
|
label="费用"
|
|||
|
|
rules={[{ required: true, message: '请输入费用' }]}
|
|||
|
|
>
|
|||
|
|
<Input type="number" addonAfter="元" />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
|||
|
|
<Space>
|
|||
|
|
<Button onClick={() => setEditModalVisible(false)}>
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
<Button type="primary" htmlType="submit">
|
|||
|
|
保存
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Modal>
|
|||
|
|
|
|||
|
|
{/* 更改状态弹窗 */}
|
|||
|
|
<Modal
|
|||
|
|
title="更改通话状态"
|
|||
|
|
visible={statusModalVisible}
|
|||
|
|
onCancel={() => setStatusModalVisible(false)}
|
|||
|
|
footer={null}
|
|||
|
|
>
|
|||
|
|
<Form
|
|||
|
|
form={statusForm}
|
|||
|
|
layout="vertical"
|
|||
|
|
onFinish={handleStatusChange}
|
|||
|
|
>
|
|||
|
|
<Form.Item
|
|||
|
|
name="status"
|
|||
|
|
label="新状态"
|
|||
|
|
rules={[{ required: true, message: '请选择状态' }]}
|
|||
|
|
>
|
|||
|
|
<Select>
|
|||
|
|
<Option value="pending">等待中</Option>
|
|||
|
|
<Option value="active">通话中</Option>
|
|||
|
|
<Option value="completed">已完成</Option>
|
|||
|
|
<Option value="cancelled">已取消</Option>
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
|||
|
|
<Space>
|
|||
|
|
<Button onClick={() => setStatusModalVisible(false)}>
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
<Button type="primary" htmlType="submit">
|
|||
|
|
更新状态
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Modal>
|
|||
|
|
|
|||
|
|
{/* 退款处理弹窗 */}
|
|||
|
|
<Modal
|
|||
|
|
title="处理退款"
|
|||
|
|
visible={refundModalVisible}
|
|||
|
|
onCancel={() => setRefundModalVisible(false)}
|
|||
|
|
footer={null}
|
|||
|
|
>
|
|||
|
|
<Form
|
|||
|
|
form={refundForm}
|
|||
|
|
layout="vertical"
|
|||
|
|
onFinish={handleRefund}
|
|||
|
|
initialValues={{ amount: call.cost }}
|
|||
|
|
>
|
|||
|
|
<Alert
|
|||
|
|
message="退款提醒"
|
|||
|
|
description={`原支付金额：¥${call.cost.toFixed(2)}`}
|
|||
|
|
type="info"
|
|||
|
|
style={{ marginBottom: '16px' }}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
name="amount"
|
|||
|
|
label="退款金额"
|
|||
|
|
rules={[
|
|||
|
|
{ required: true, message: '请输入退款金额' },
|
|||
|
|
{ type: 'number', min: 0, max: call.cost, message: `退款金额不能超过¥${call.cost.toFixed(2)}` }
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
<Input type="number" addonAfter="元" />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
name="reason"
|
|||
|
|
label="退款原因"
|
|||
|
|
rules={[{ required: true, message: '请输入退款原因' }]}
|
|||
|
|
>
|
|||
|
|
<TextArea rows={3} placeholder="请输入退款原因..." />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
|||
|
|
<Space>
|
|||
|
|
<Button onClick={() => setRefundModalVisible(false)}>
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
<Button type="primary" danger htmlType="submit">
|
|||
|
|
确认退款
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Modal>
|
|||
|
|
|
|||
|
|
{/* 添加管理员备注弹窗 */}
|
|||
|
|
<Modal
|
|||
|
|
title="添加管理员备注"
|
|||
|
|
visible={adminNoteModalVisible}
|
|||
|
|
onCancel={() => setAdminNoteModalVisible(false)}
|
|||
|
|
footer={null}
|
|||
|
|
>
|
|||
|
|
<Form
|
|||
|
|
form={noteForm}
|
|||
|
|
layout="vertical"
|
|||
|
|
onFinish={handleAddAdminNote}
|
|||
|
|
initialValues={{ note: call.adminNotes }}
|
|||
|
|
>
|
|||
|
|
<Form.Item
|
|||
|
|
name="note"
|
|||
|
|
label="备注内容"
|
|||
|
|
rules={[{ required: true, message: '请输入备注内容' }]}
|
|||
|
|
>
|
|||
|
|
<TextArea rows={4} placeholder="请输入管理员备注..." />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
|||
|
|
<Space>
|
|||
|
|
<Button onClick={() => setAdminNoteModalVisible(false)}>
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
<Button type="primary" htmlType="submit">
|
|||
|
|
保存备注
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Modal>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default CallDetail;
|