feat: 添加会议总结测试用例和优化前端会议卡片显示

- 在后端添加 `SummaryTest` 测试类,实现会议总结功能的分步测试
- 重构前端会议卡片组件,集成进度背景和状态标签
- 优化会议卡片样式和交互体验,增加呼吸灯效果和详细信息展示
dev_na
chenhao 2026-03-04 19:25:21 +08:00
parent 35396104a0
commit afff8a8d07
4 changed files with 340 additions and 112 deletions

View File

@ -0,0 +1,152 @@
package com.imeeting.biz;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.imeeting.entity.biz.AiModel;
import com.imeeting.entity.biz.Meeting;
import com.imeeting.entity.biz.MeetingTranscript;
import com.imeeting.mapper.biz.MeetingMapper;
import com.imeeting.mapper.biz.MeetingTranscriptMapper;
import com.imeeting.service.biz.AiModelService;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.time.Duration;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
/**
* -
*/
@SpringBootTest
public class SummaryTest {
@Autowired
private MeetingMapper meetingMapper;
@Autowired
private MeetingTranscriptMapper transcriptMapper;
@Autowired
private AiModelService aiModelService;
@Autowired
private ObjectMapper objectMapper;
@Test
public void testManualSummary() throws Exception {
// --- 步骤 1: 准备测试数据 ---
// 请替换为您数据库中真实的 meetingId
Long testMeetingId = 3L;
Meeting meeting = meetingMapper.selectById(testMeetingId);
if (meeting == null) {
System.out.println("❌ 错误:未找到 ID 为 " + testMeetingId + " 的会议记录");
return;
}
// 获取真实的 ASR 转录数据
List<MeetingTranscript> transcripts = transcriptMapper.selectList(
new LambdaQueryWrapper<MeetingTranscript>()
.eq(MeetingTranscript::getMeetingId, testMeetingId)
.orderByAsc(MeetingTranscript::getStartTime)
);
if (transcripts.isEmpty()) {
System.out.println("⚠️ 警告:该会议暂无转录明细数据 (MeetingTranscript)");
// 如果没明细,您可以选择是否继续,或者手动造一点
// return;
}
String realAsrText = transcripts.stream()
.map(t -> (t.getSpeakerName() != null ? t.getSpeakerName() : t.getSpeakerId()) + ": " + t.getContent())
.collect(Collectors.joining("\n"));
System.out.println("\n--- [DEBUG] 提取到的真实转录文本 ---");
System.out.println(realAsrText);
AiModel llmModel = aiModelService.getById(meeting.getSummaryModelId());
if (llmModel == null) {
System.out.println("❌ 错误:该会议未绑定总结模型配置");
return;
}
System.out.println("\n✅ 基础数据加载成功");
System.out.println(" 模型名称: " + llmModel.getModelName());
System.out.println(" 提示词模板快照: " + (meeting.getPromptContent() != null && meeting.getPromptContent().length() > 50
? meeting.getPromptContent().substring(0, 50) + "..."
: meeting.getPromptContent()));
// --- 步骤 2: 构造请求 Payload ---
Map<String, Object> req = new HashMap<>();
req.put("model", llmModel.getModelCode());
req.put("temperature", llmModel.getTemperature());
List<Map<String, String>> messages = new ArrayList<>();
// 系统角色注入 Prompt
messages.add(Map.of("role", "system", "content", meeting.getPromptContent() != null ? meeting.getPromptContent() : "请总结以下会议内容"));
// 用户角色注入 真实的 ASR 文本
messages.add(Map.of("role", "user", "content", "以下是会议转录全文:\n" + realAsrText));
req.put("messages", messages);
String jsonPayload = objectMapper.writerWithDefaultPrettyPrinter().writeValueAsString(req);
System.out.println("\n--- [DEBUG] 发送给 AI 的请求 JSON ---");
System.out.println(jsonPayload);
// --- 步骤 3: 发起网络请求 ---
String url = llmModel.getBaseUrl() + (llmModel.getApiPath() != null ? llmModel.getApiPath() : "/v1/chat/completions");
System.out.println("\n--- [DEBUG] 目标 URL: " + url);
HttpClient client = HttpClient.newBuilder()
.connectTimeout(Duration.ofSeconds(10))
.build();
HttpRequest request = HttpRequest.newBuilder()
.uri(URI.create(url))
.header("Content-Type", "application/json")
.header("Authorization", "Bearer " + llmModel.getApiKey())
.POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
.build();
System.out.println("⏳ 正在请求第三方 AI 接口...");
try {
HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
System.out.println("\n--- [DEBUG] 接口返回状态码: " + response.statusCode());
System.out.println("--- [DEBUG] 接口返回 Raw Body ---");
System.out.println(response.body());
// --- 步骤 4: 解析结果 ---
if (response.statusCode() == 200) {
JsonNode respNode = objectMapper.readTree(response.body());
if (respNode.has("choices")) {
String finalContent = respNode.get("choices").get(0).get("message").get("content").asText();
System.out.println("\n✨ 总结生成成功!结果如下:");
System.out.println("------------------------------------");
System.out.println(finalContent);
System.out.println("------------------------------------");
// 可选:将结果更新回数据库以便前端查看
// meeting.setSummaryContent(finalContent);
// meetingMapper.updateById(meeting);
} else {
System.out.println("❌ 错误:返回结果中不包含 'choices' 字段,请检查厂商 API 适配。");
}
} else {
System.out.println("❌ 接口请求失败,请检查 BaseUrl 和 ApiKey 是否正确。");
}
} catch (Exception e) {
System.out.println("❌ 网络异常:" + e.getMessage());
e.printStackTrace();
}
}
}

View File

@ -246,9 +246,9 @@ export default function Login() {
</Form>
<div className="login-footer">
<Text type="secondary">
{t('login.demoAccount')}<Text strong className="tabular-nums">admin</Text> / {t('login.password')}<Text strong className="tabular-nums">123456</Text>
</Text>
{/*<Text type="secondary">*/}
{/* {t('login.demoAccount')}<Text strong className="tabular-nums">admin</Text> / {t('login.password')}<Text strong className="tabular-nums">123456</Text>*/}
{/*</Text>*/}
</div>
</div>
</div>

View File

@ -1,10 +1,10 @@
import React, { useState, useEffect, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, Row, Col, Typography, Tag, Space, Divider, Button, Skeleton, Empty, List, Avatar, Breadcrumb, Popover, Input, Select, message, Drawer, Form, Modal } from 'antd';
import { Card, Row, Col, Typography, Tag, Space, Divider, Button, Skeleton, Empty, List, Avatar, Breadcrumb, Popover, Input, Select, message, Drawer, Form, Modal, Progress } from 'antd';
import { LeftOutlined, UserOutlined, ClockCircleOutlined, AudioOutlined, RobotOutlined, LoadingOutlined, EditOutlined, SyncOutlined, SettingOutlined } from '@ant-design/icons';
import ReactMarkdown from 'react-markdown';
import dayjs from 'dayjs';
import { getMeetingDetail, getTranscripts, updateSpeakerInfo, reSummary, updateMeeting, MeetingVO, MeetingTranscriptVO } from '../../api/business/meeting';
import { getMeetingDetail, getTranscripts, updateSpeakerInfo, reSummary, updateMeeting, MeetingVO, MeetingTranscriptVO, getMeetingProgress, MeetingProgress } from '../../api/business/meeting';
import { getAiModelPage, getAiModelDefault, AiModelVO } from '../../api/business/aimodel';
import { getPromptPage, PromptTemplateVO } from '../../api/business/prompt';
import { useDict } from '../../hooks/useDict';

View File

@ -3,17 +3,17 @@ import { Card, Button, Input, Space, Tag, message, Popconfirm, Typography, Row,
import {
PlusOutlined, DeleteOutlined, SearchOutlined, CheckCircleOutlined,
LoadingOutlined, UserOutlined, CalendarOutlined, PlayCircleOutlined,
TeamOutlined, ClockCircleOutlined, EditOutlined, RightOutlined
TeamOutlined, ClockCircleOutlined, EditOutlined, RightOutlined,
SyncOutlined, InfoCircleOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { getMeetingPage, deleteMeeting, MeetingVO, getMeetingProgress, MeetingProgress } from '../../api/business/meeting';
import dayjs from 'dayjs';
import { Progress } from 'antd';
const { Text, Title } = Typography;
// 进度显示组件
const MeetingProgressDisplay: React.FC<{ meeting: MeetingVO }> = ({ meeting }) => {
// 状态标签组件:集成进度背景
const IntegratedStatusTag: React.FC<{ meeting: MeetingVO }> = ({ meeting }) => {
const [progress, setProgress] = useState<MeetingProgress | null>(null);
useEffect(() => {
@ -29,31 +29,183 @@ const MeetingProgressDisplay: React.FC<{ meeting: MeetingVO }> = ({ meeting }) =
return () => clearInterval(timer);
}, [meeting.id, meeting.status]);
if (meeting.status !== 1 && meeting.status !== 2) return null;
const statusConfig: Record<number, { text: string; color: string; bgColor: string }> = {
0: { text: '排队中', color: '#8c8c8c', bgColor: '#f5f5f5' },
1: { text: '识别中', color: '#1890ff', bgColor: '#e6f7ff' },
2: { text: '总结中', color: '#faad14', bgColor: '#fff7e6' },
3: { text: '已完成', color: '#52c41a', bgColor: '#f6ffed' },
4: { text: '失败', color: '#ff4d4f', bgColor: '#fff1f0' }
};
const config = statusConfig[meeting.status] || statusConfig[0];
const percent = progress?.percent || 0;
const isError = percent < 0;
const isProcessing = meeting.status === 1 || meeting.status === 2;
return (
<div style={{ padding: '0 24px 12px 24px', marginTop: -8 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
<Text type="secondary" style={{ fontSize: 11 }}>
{progress?.message || '处理中...'}
</Text>
{!isError && <Text strong style={{ color: '#1890ff', fontSize: 11 }}>{percent}%</Text>}
</div>
<Progress
percent={isError ? 100 : percent}
size="small"
status={isError ? 'exception' : 'active'}
showInfo={false}
strokeColor={isError ? '#ff4d4f' : '#1890ff'}
style={{ margin: 0 }}
/>
<div style={{
display: 'inline-flex',
alignItems: 'center',
padding: '2px 10px',
borderRadius: 6,
fontSize: 11,
fontWeight: 600,
color: config.color,
background: config.bgColor,
position: 'relative',
overflow: 'hidden',
border: `1px solid ${isProcessing ? 'transparent' : '#eee'}`,
cursor: 'default',
minWidth: 80,
justifyContent: 'center'
}}>
{/* 进度填充背景 */}
{isProcessing && percent > 0 && (
<div style={{
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
width: `${percent}%`,
background: meeting.status === 1 ? 'rgba(24, 144, 255, 0.2)' : 'rgba(250, 173, 20, 0.2)',
transition: 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
zIndex: 0
}} />
)}
<span style={{ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', gap: 4 }}>
{isProcessing ? <SyncOutlined spin style={{ fontSize: 10 }} /> : null}
{config.text}
{isProcessing && <span style={{ fontFamily: 'monospace', marginLeft: 4 }}>{percent}%</span>}
</span>
</div>
);
};
// 新增:提取进度信息 Hook 供卡片内部使用
const useMeetingProgress = (meeting: MeetingVO) => {
const [progress, setProgress] = useState<MeetingProgress | null>(null);
useEffect(() => {
if (meeting.status !== 1 && meeting.status !== 2) return;
const fetchProgress = async () => {
try {
const res = await getMeetingProgress(meeting.id);
if (res.data && res.data.data) setProgress(res.data.data);
} catch (err) {}
};
fetchProgress();
const timer = setInterval(fetchProgress, 3000);
return () => clearInterval(timer);
}, [meeting.id, meeting.status]);
return progress;
};
const MeetingCardItem: React.FC<{ item: MeetingVO, config: any, fetchData: () => void }> = ({ item, config, fetchData }) => {
const navigate = useNavigate();
const progress = useMeetingProgress(item);
const isProcessing = item.status === 1 || item.status === 2;
return (
<List.Item style={{ marginBottom: 24 }}>
<Card
hoverable
onClick={() => navigate(`/meetings/${item.id}`)}
className="meeting-card"
style={{
borderRadius: 16,
border: 'none',
height: '220px',
position: 'relative',
boxShadow: '0 6px 16px rgba(0,0,0,0.04)',
transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)'
}}
bodyStyle={{ padding: 0, display: 'flex', height: '100%' }}
>
{/* 左侧状态装饰条 - 增加分析中的呼吸灯效果 */}
<div
className={isProcessing ? 'status-bar-active' : ''}
style={{ width: 6, backgroundColor: config.color, borderRadius: '16px 0 0 16px' }}
></div>
<div style={{ flex: 1, padding: '20px 24px', position: 'relative', display: 'flex', flexDirection: 'column' }}>
{/* 右上角醒目图标 */}
<div className="card-actions" style={{ position: 'absolute', top: 16, right: 16, zIndex: 10 }} onClick={e => e.stopPropagation()}>
<Space size={8}>
<Tooltip title="编辑">
<div className="icon-btn edit" onClick={() => navigate(`/meetings/${item.id}`)}>
<EditOutlined />
</div>
</Tooltip>
<Popconfirm title="确定删除?" onConfirm={() => deleteMeeting(item.id).then(fetchData)}>
<Tooltip title="删除">
<div className="icon-btn delete">
<DeleteOutlined />
</div>
</Tooltip>
</Popconfirm>
</Space>
</div>
{/* 内容排版 */}
<div style={{ flex: 1 }}>
<div style={{ marginBottom: 12 }}>
<IntegratedStatusTag meeting={item} />
</div>
<div style={{ marginBottom: 16, paddingRight: 40, height: '44px', overflow: 'hidden' }}>
<Text strong style={{ fontSize: 16, color: '#262626', lineHeight: '22px' }} ellipsis={{ tooltip: item.title }}>
{item.title}
</Text>
</div>
<Space direction="vertical" size={10} style={{ width: '100%' }}>
<div style={{ fontSize: '13px', color: '#8c8c8c', display: 'flex', alignItems: 'center' }}>
<CalendarOutlined style={{ marginRight: 10 }} />
{dayjs(item.meetingTime).format('YYYY-MM-DD HH:mm')}
</div>
{isProcessing ? (
<div style={{
fontSize: '12px',
color: item.status === 1 ? '#1890ff' : '#faad14',
display: 'flex',
alignItems: 'center',
background: item.status === 1 ? '#e6f7ff' : '#fff7e6',
padding: '4px 8px',
borderRadius: 4,
marginTop: 2
}}>
<InfoCircleOutlined style={{ marginRight: 6 }} />
<Text ellipsis style={{ color: 'inherit', fontSize: '12px' }}>
{progress?.message || '等待引擎调度...'}
</Text>
</div>
) : (
<div style={{ fontSize: '13px', color: '#8c8c8c', display: 'flex', alignItems: 'center' }}>
<TeamOutlined style={{ marginRight: 10 }} />
<Text type="secondary" ellipsis style={{ maxWidth: '85%' }}>{item.participants || '无参与人员'}</Text>
</div>
)}
</Space>
</div>
{/* 底部详情提示 */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
<div style={{ display: 'flex', gap: 4 }}>
{item.tags?.split(',').slice(0, 2).map(t => (
<Tag key={t} style={{ border: '1px solid #f0f0f0', backgroundColor: '#fff', fontSize: 10, margin: 0, borderRadius: 4 }}>{t}</Tag>
))}
</div>
<RightOutlined style={{ color: '#bfbfbf', fontSize: 12 }} />
</div>
</div>
</Card>
</List.Item>
);
};
const Meetings: React.FC = () => {
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
@ -146,98 +298,14 @@ const Meetings: React.FC = () => {
dataSource={data}
renderItem={(item) => {
const config = statusConfig[item.status] || statusConfig[0];
return (
<List.Item style={{ marginBottom: 24 }}>
<Card
hoverable
onClick={() => navigate(`/meetings/${item.id}`)}
className="meeting-card"
style={{
borderRadius: 16,
border: 'none',
height: 'auto',
minHeight: '220px',
position: 'relative',
boxShadow: '0 6px 16px rgba(0,0,0,0.04)',
transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)'
}}
bodyStyle={{ padding: 0, display: 'flex', flexDirection: 'column' }}
>
<div style={{ display: 'flex', flex: 1 }}>
{/* 左侧状态装饰条 */}
<div style={{ width: 6, backgroundColor: config.color, borderRadius: '16px 0 0 16px' }}></div>
<div style={{ flex: 1, padding: '20px 24px', position: 'relative', display: 'flex', flexDirection: 'column' }}>
{/* 右上角醒目图标 */}
<div className="card-actions" style={{ position: 'absolute', top: 16, right: 16, zIndex: 10 }} onClick={e => e.stopPropagation()}>
<Space size={8}>
<Tooltip title="编辑">
<div className="icon-btn edit" onClick={() => navigate(`/meetings/${item.id}`)}>
<EditOutlined />
</div>
</Tooltip>
<Popconfirm title="确定删除?" onConfirm={() => deleteMeeting(item.id).then(fetchData)}>
<Tooltip title="删除">
<div className="icon-btn delete">
<DeleteOutlined />
</div>
</Tooltip>
</Popconfirm>
</Space>
</div>
{/* 内容排版 */}
<div style={{ flex: 1 }}>
<div style={{ marginBottom: 12 }}>
<Tag color={config.bgColor} style={{ color: config.color, border: 'none', borderRadius: 4, fontWeight: 600, fontSize: 11 }}>
{item.status === 1 || item.status === 2 ? <LoadingOutlined spin style={{ marginRight: 4 }} /> : null}
{config.text}
</Tag>
</div>
<div style={{ marginBottom: 16, paddingRight: 40, height: '44px', overflow: 'hidden' }}>
<Text strong style={{ fontSize: 16, color: '#262626', lineHeight: '22px' }} ellipsis={{ tooltip: item.title }}>
{item.title}
</Text>
</div>
<Space direction="vertical" size={10} style={{ width: '100%' }}>
<div style={{ fontSize: '13px', color: '#8c8c8c', display: 'flex', alignItems: 'center' }}>
<CalendarOutlined style={{ marginRight: 10 }} />
{dayjs(item.meetingTime).format('YYYY-MM-DD HH:mm')}
</div>
<div style={{ fontSize: '13px', color: '#8c8c8c', display: 'flex', alignItems: 'center' }}>
<TeamOutlined style={{ marginRight: 10 }} />
<Text type="secondary" ellipsis style={{ maxWidth: '85%' }}>{item.participants || '无参与人员'}</Text>
</div>
</Space>
</div>
{/* 底部详情提示 */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
<div style={{ display: 'flex', gap: 4 }}>
{item.tags?.split(',').slice(0, 2).map(t => (
<Tag key={t} style={{ border: '1px solid #f0f0f0', backgroundColor: '#fff', fontSize: 10, margin: 0, borderRadius: 4 }}>{t}</Tag>
))}
</div>
<RightOutlined style={{ color: '#bfbfbf', fontSize: 12 }} />
</div>
</div>
</div>
{/* 进度条显示 */}
<MeetingProgressDisplay meeting={item} />
</Card>
</List.Item>
);
return <MeetingCardItem item={item} config={config} fetchData={fetchData} />;
}}
locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="开启您的第一场会议分析" /> }}
/>
</Skeleton>
</div>
{/* 精美底部分页 */}
{/* 分页 */}
{total > 0 && (
<div style={{ flexShrink: 0, display: 'flex', justifyContent: 'center', padding: '16px 0 8px 0' }}>
<Pagination
@ -256,6 +324,14 @@ const Meetings: React.FC = () => {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
}
.status-bar-active {
animation: statusBreathing 2s infinite ease-in-out;
}
@keyframes statusBreathing {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
.icon-btn {
width: 32px;
height: 32px;