feat: 添加会议总结测试用例和优化前端会议卡片显示
- 在后端添加 `SummaryTest` 测试类,实现会议总结功能的分步测试 - 重构前端会议卡片组件,集成进度背景和状态标签 - 优化会议卡片样式和交互体验,增加呼吸灯效果和详细信息展示dev_na
parent
35396104a0
commit
afff8a8d07
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue