feat: 优化会议创建表单和卡片显示

- 重构会议创建表单,增加录音上传、AI分析配置和参会人员选择
- 更新会议卡片组件,集成进度背景和状态标签,优化样式和交互体验
- 增加分页功能和多语言支持
- 修复和优化多处代码逻辑和样式问题
dev_na
chenhao 2026-03-04 20:49:32 +08:00
parent 5c47b07ec6
commit 423327c61d
5 changed files with 395 additions and 258 deletions

View File

@ -4,7 +4,7 @@
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview"
},

View File

@ -245,11 +245,6 @@ export default function Login() {
</Form.Item>
</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>*/}
</div>
</div>
</div>
</div>

View File

@ -82,13 +82,12 @@ const HotWords: React.FC = () => {
}
setEditingId(record.id);
form.setFieldsValue({
...record,
pinyinList: record.pinyinList.join(', ')
...record
});
} else {
setEditingId(null);
form.resetFields();
form.setFieldsValue({ weight: 10, status: 1, isPublic: 0 });
form.setFieldsValue({ weight: 2, status: 1, isPublic: 0 });
}
setModalVisible(true);
};
@ -197,10 +196,16 @@ const HotWords: React.FC = () => {
{canEdit ? (
<>
<Button type="link" size="small" icon={<EditOutlined />} onClick={() => handleOpenModal(record)}></Button>
<Popconfirm title="确定删除?" onConfirm={() => deleteHotWord(record.id).then(fetchData)}>
<Popconfirm
title="确定删除?"
onConfirm={() => handleDelete(record.id)}
okText={t('common.confirm')}
cancelText={t('common.cancel')}
>
<Button type="link" size="small" danger icon={<DeleteOutlined />}></Button>
</Popconfirm>
</>
) : (
<Text type="secondary" size="small"></Text>
)}
@ -274,10 +279,6 @@ const HotWords: React.FC = () => {
<Input placeholder="输入识别关键词" onBlur={handleWordBlur} />
</Form.Item>
<Form.Item name="pinyinList" label="拼音 (多音字用逗号分隔)" tooltip="留空自动生成">
<Input.TextArea placeholder="例如: chong qing, zhong qing" rows={2} />
</Form.Item>
<Row gutter={16}>
<Col span={12}>
<Form.Item name="category" label="热词分类">
@ -287,8 +288,8 @@ const HotWords: React.FC = () => {
</Form.Item>
</Col>
<Col span={12}>
<Form.Item name="weight" label="识别权重 (1-100)">
<InputNumber min={1} max={100} style={{ width: '100%' }} />
<Form.Item name="weight" label="识别权重 (1-5)" tooltip="权重越高,识别引擎越倾向于将其识别为该词">
<InputNumber min={1} max={5} precision={1} step={0.1} style={{ width: '100%' }} />
</Form.Item>
</Col>
</Row>

View File

@ -1,34 +1,53 @@
import React, { useState, useEffect } from 'react';
import { Card, Button, Input, Space, Tag, message, Popconfirm, Typography, Row, Col, List, Badge, Empty, Skeleton, Tooltip, Radio, Pagination } from 'antd';
import { Card, Button, Input, Space, Tag, message, Popconfirm, Typography, Row, Col, List, Badge, Empty, Skeleton, Tooltip, Radio, Pagination, Progress, Drawer, Form, DatePicker, Upload, Avatar, Divider, Switch, Select } from 'antd';
import {
PlusOutlined, DeleteOutlined, SearchOutlined, CheckCircleOutlined,
LoadingOutlined, UserOutlined, CalendarOutlined, PlayCircleOutlined,
TeamOutlined, ClockCircleOutlined, EditOutlined, RightOutlined,
SyncOutlined, InfoCircleOutlined
SyncOutlined, InfoCircleOutlined, CloudUploadOutlined, SettingOutlined,
QuestionCircleOutlined, FileTextOutlined, CheckOutlined, RocketOutlined,
AudioOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { getMeetingPage, deleteMeeting, MeetingVO, getMeetingProgress, MeetingProgress } from '../../api/business/meeting';
import { getMeetingPage, deleteMeeting, MeetingVO, getMeetingProgress, MeetingProgress, createMeeting, uploadAudio } from '../../api/business/meeting';
import { getAiModelPage, getAiModelDefault, AiModelVO } from '../../api/business/aimodel';
import { getPromptPage, PromptTemplateVO } from '../../api/business/prompt';
import { getHotWordPage, HotWordVO } from '../../api/business/hotword';
import { listUsers } from '../../api';
import { SysUser } from '../../types';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';
const { Text, Title } = Typography;
const { Dragger } = Upload;
const { Option } = Select;
// 状态标签组件:集成进度背景
const IntegratedStatusTag: React.FC<{ meeting: MeetingVO }> = ({ meeting }) => {
// --- 进度感知 Hook ---
const useMeetingProgress = (meeting: MeetingVO, onComplete?: () => void) => {
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);
if (res.data && res.data.data) {
setProgress(res.data.data);
// 当达到 100% 时触发完成回调
if (res.data.data.percent === 100 && onComplete) {
onComplete();
}
}
} catch (err) {}
};
fetchProgress();
const timer = setInterval(fetchProgress, 3000);
return () => clearInterval(timer);
}, [meeting.id, meeting.status]);
return progress;
};
// --- 状态标签组件 ---
const IntegratedStatusTag: React.FC<{ meeting: MeetingVO, progress: MeetingProgress | null }> = ({ meeting, progress }) => {
const statusConfig: Record<number, { text: string; color: string; bgColor: string }> = {
0: { text: '排队中', color: '#8c8c8c', bgColor: '#f5f5f5' },
1: { text: '识别中', color: '#1890ff', bgColor: '#e6f7ff' },
@ -36,42 +55,15 @@ const IntegratedStatusTag: React.FC<{ meeting: MeetingVO }> = ({ meeting }) => {
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 isProcessing = meeting.status === 1 || meeting.status === 2;
return (
<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'
}}>
<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'}`, 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
}} />
<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}
@ -81,91 +73,219 @@ const IntegratedStatusTag: React.FC<{ meeting: MeetingVO }> = ({ meeting }) => {
);
};
// 新增:提取进度信息 Hook 供卡片内部使用
const useMeetingProgress = (meeting: MeetingVO) => {
const [progress, setProgress] = useState<MeetingProgress | null>(null);
// --- 发起会议表单组件 (左侧高度占满版) ---
const MeetingCreateForm: React.FC<{
form: any,
audioUrl: string,
setAudioUrl: (url: string) => void,
uploadProgress: number,
setUploadProgress: (p: number) => void,
fileList: any[],
setFileList: (list: any[]) => void
}> = ({ form, audioUrl, setAudioUrl, uploadProgress, setUploadProgress, fileList, setFileList }) => {
const [asrModels, setAsrModels] = useState<AiModelVO[]>([]);
const [llmModels, setLlmModels] = useState<AiModelVO[]>([]);
const [prompts, setPrompts] = useState<PromptTemplateVO[]>([]);
const [hotwordList, setHotwordList] = useState<HotWordVO[]>([]);
const [userList, setUserList] = useState<SysUser[]>([]);
const watchedPromptId = Form.useWatch('promptId', form);
useEffect(() => {
if (meeting.status !== 1 && meeting.status !== 2) return;
const fetchProgress = async () => {
loadInitialData();
}, []);
const loadInitialData = async () => {
try {
const res = await getMeetingProgress(meeting.id);
if (res.data && res.data.data) setProgress(res.data.data);
const [asrRes, llmRes, promptRes, hotwordRes, users] = await Promise.all([
getAiModelPage({ current: 1, size: 100, type: 'ASR' }),
getAiModelPage({ current: 1, size: 100, type: 'LLM' }),
getPromptPage({ current: 1, size: 100 }),
getHotWordPage({ current: 1, size: 1000 }),
listUsers()
]);
setAsrModels(asrRes.data.data.records.filter(m => m.status === 1));
setLlmModels(llmRes.data.data.records.filter(m => m.status === 1));
const activePrompts = promptRes.data.data.records.filter(p => p.status === 1);
setPrompts(activePrompts);
setHotwordList(hotwordRes.data.data.records.filter(h => h.status === 1));
setUserList(users || []);
const defaultAsr = await getAiModelDefault('ASR');
const defaultLlm = await getAiModelDefault('LLM');
form.setFieldsValue({
asrModelId: defaultAsr.data.data?.id,
summaryModelId: defaultLlm.data.data?.id,
promptId: activePrompts.length > 0 ? activePrompts[0].id : undefined,
meetingTime: dayjs(),
useSpkId: 1
});
} catch (err) {}
};
fetchProgress();
const timer = setInterval(fetchProgress, 3000);
return () => clearInterval(timer);
}, [meeting.id, meeting.status]);
return progress;
const customUpload = async (options: any) => {
const { file, onSuccess: uploadSuccess, onError } = options;
setUploadProgress(0);
try {
const interval = setInterval(() => setUploadProgress(prev => (prev < 95 ? prev + 5 : prev)), 300);
const res = await uploadAudio(file);
clearInterval(interval);
setUploadProgress(100);
setAudioUrl(res.data.data);
uploadSuccess(res.data.data);
message.success('录音上传成功');
} catch (err) {
onError(err);
message.error('文件上传失败');
}
};
return (
<Form form={form} layout="vertical" style={{ height: 'calc(100vh - 220px)', display: 'flex', flexDirection: 'column' }}>
<Row gutter={24} style={{ flex: 1, minHeight: 0 }}>
<Col span={16} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
{/* 基础信息卡片 - 固定高度 */}
<Card size="small" title={<Space><InfoCircleOutlined /> </Space>} bordered={false} style={{ borderRadius: 12, boxShadow: '0 2px 8px rgba(0,0,0,0.03)', marginBottom: 20 }}>
<Form.Item name="title" label="会议标题" rules={[{ required: true }]} style={{ marginBottom: 12 }}><Input placeholder="输入会议标题" size="large" /></Form.Item>
<Row gutter={16}>
<Col span={12}><Form.Item name="meetingTime" label="会议时间" rules={[{ required: true }]} style={{ marginBottom: 12 }}><DatePicker showTime style={{ width: '100%' }} size="large" /></Form.Item></Col>
<Col span={12}><Form.Item name="tags" label="会议标签" style={{ marginBottom: 12 }}><Select mode="tags" placeholder="输入标签" size="large" /></Form.Item></Col>
</Row>
<Form.Item name="participants" label="参会人员" style={{ marginBottom: 0 }}>
<Select mode="multiple" placeholder="选择人员" showSearch optionFilterProp="children" size="large">
{userList.map(u => (<Option key={u.userId} value={u.displayName || u.username}><Space><Avatar size="small" icon={<UserOutlined />} />{u.displayName || u.username}</Space></Option>))}
</Select>
</Form.Item>
</Card>
{/* 录音上传卡片 - 占满剩余高度 */}
<Card
size="small"
title={<Space><AudioOutlined /> </Space>}
bordered={false}
style={{ borderRadius: 12, boxShadow: '0 2px 8px rgba(0,0,0,0.03)', background: '#f9fbff', flex: 1, display: 'flex', flexDirection: 'column' }}
bodyStyle={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '16px 20px' }}
>
<Dragger
accept=".mp3,.wav,.m4a"
fileList={fileList}
customRequest={customUpload}
onChange={info => setFileList(info.fileList.slice(-1))}
maxCount={1}
style={{ borderRadius: 8, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
>
<div>
<p className="ant-upload-drag-icon" style={{ marginBottom: 12 }}><CloudUploadOutlined style={{ fontSize: 48 }} /></p>
<p className="ant-upload-text" style={{ fontSize: 16, fontWeight: 500 }}></p>
<p className="ant-upload-hint" style={{ fontSize: 13, marginTop: 8 }}> .mp3, .wav, .m4a </p>
{uploadProgress > 0 && uploadProgress < 100 && (
<div style={{ width: '80%', margin: '24px auto 0' }}>
<Progress percent={uploadProgress} size="small" />
<div style={{ fontSize: 12, color: '#1890ff', marginTop: 4 }}>...</div>
</div>
)}
{audioUrl && (
<Tooltip title={audioUrl.split('/').pop()}>
<Tag
color="success"
style={{
marginTop: 20,
padding: '4px 12px',
fontSize: 13,
maxWidth: '90%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}}
size="large"
>
: {audioUrl.split('/').pop()}
</Tag>
</Tooltip>
)}
</div>
</Dragger>
</Card>
</Col>
<Col span={8} style={{ height: '100%', overflowY: 'auto', paddingRight: 4 }}>
<Card size="small" title={<Space><SettingOutlined /> AI </Space>} bordered={false} style={{ borderRadius: 12, boxShadow: '0 2px 8px rgba(0,0,0,0.03)', marginBottom: 20 }}>
<Form.Item name="asrModelId" label="语音识别 (ASR)" rules={[{ required: true }]} style={{ marginBottom: 16 }}>
<Select placeholder="选择 ASR 模型" size="small">{asrModels.map(m => (<Option key={m.id} value={m.id}>{m.modelName}</Option>))}</Select>
</Form.Item>
<Form.Item name="summaryModelId" label="内容总结 (LLM)" rules={[{ required: true }]} style={{ marginBottom: 16 }}>
<Select placeholder="选择总结模型" size="small">{llmModels.map(m => (<Option key={m.id} value={m.id}>{m.modelName}</Option>))}</Select>
</Form.Item>
<Form.Item name="promptId" label="总结模板" rules={[{ required: true }]} style={{ marginBottom: 16 }}>
{prompts.length > 15 ? (
<Select placeholder="请选择模板" showSearch optionFilterProp="children" size="small">
{prompts.map(p => <Option key={p.id} value={p.id}>{p.templateName}</Option>)}
</Select>
) : (
<div style={{ padding: '2px' }}>
<Row gutter={[6, 6]}>
{prompts.map(p => {
const isSelected = watchedPromptId === p.id;
return (
<Col span={12} key={p.id}>
<div onClick={() => form.setFieldsValue({ promptId: p.id })} style={{ padding: '6px', borderRadius: 6, border: `1.5px solid ${isSelected ? '#1890ff' : '#f0f0f0'}`, backgroundColor: isSelected ? '#f0f7ff' : '#fff', cursor: 'pointer', textAlign: 'center', position: 'relative' }}>
<div style={{ fontSize: '11px', color: isSelected ? '#1890ff' : '#434343', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.templateName}</div>
{isSelected && <div style={{ position: 'absolute', top: 0, right: 0, width: 12, height: 12, background: '#1890ff', borderRadius: '0 4px 0 4px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CheckOutlined style={{ color: '#fff', fontSize: 8 }} /></div>}
</div>
</Col>
);
})}
</Row>
</div>
)}
</Form.Item>
<Form.Item name="useSpkId" label={<span> <Tooltip title="开启后将区分不同发言人"><QuestionCircleOutlined /></Tooltip></span>} valuePropName="checked" getValueProps={(v) => ({ checked: v === 1 })} normalize={(v) => (v ? 1 : 0)} style={{ marginBottom: 20 }}>
<Switch size="small" />
</Form.Item>
</Card>
<div style={{ backgroundColor: '#f6ffed', border: '1px solid #b7eb8f', padding: '12px 16px', borderRadius: 12 }}>
<Text type="secondary" style={{ fontSize: '12px' }}><CheckCircleOutlined style={{ color: '#52c41a', marginRight: 8 }} /> + AI + </Text>
</div>
</Col>
</Row>
</Form>
);
};
const MeetingCardItem: React.FC<{ item: MeetingVO, config: any, fetchData: () => void }> = ({ item, config, fetchData }) => {
// --- 卡片项组件 ---
const MeetingCardItem: React.FC<{ item: MeetingVO, config: any, fetchData: () => void, t: any }> = ({ item, config, fetchData, t }) => {
const navigate = useNavigate();
const progress = useMeetingProgress(item);
// 注入自动刷新回调
const progress = useMeetingProgress(item, () => fetchData());
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>
<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>
<Tooltip title="编辑"><div className="icon-btn edit" onClick={() => navigate(`/meetings/${item.id}`)}><EditOutlined /></div></Tooltip>
<Popconfirm
title="确定删除?"
onConfirm={() => deleteMeeting(item.id).then(fetchData)}
okText={t('common.confirm')}
cancelText={t('common.cancel')}
>
<Tooltip title="删除"><div className="icon-btn delete"><DeleteOutlined /></div></Tooltip>
</Popconfirm>
</Space>
</div>
{/* 内容排版 */}
<div style={{ flex: 1 }}>
<div style={{ marginBottom: 12 }}>
<IntegratedStatusTag meeting={item} />
<IntegratedStatusTag meeting={item} progress={progress} />
</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>
<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' }}><CalendarOutlined style={{ marginRight: 10 }} />{dayjs(item.meetingTime).format('YYYY-MM-DD HH:mm')}</div>
{isProcessing ? (
<div style={{
fontSize: '12px',
@ -173,31 +293,37 @@ const MeetingCardItem: React.FC<{ item: MeetingVO, config: any, fetchData: () =>
display: 'flex',
alignItems: 'center',
background: item.status === 1 ? '#e6f7ff' : '#fff7e6',
padding: '4px 8px',
borderRadius: 4,
marginTop: 2
padding: '6px 12px', // 增加内边距,更聚拢
borderRadius: 6,
marginTop: 4,
width: 'calc(100% - 12px)', // 留出右侧与卡片边缘的距离
overflow: 'hidden',
boxSizing: 'border-box'
}}>
<InfoCircleOutlined style={{ marginRight: 6 }} />
<Text ellipsis style={{ color: 'inherit', fontSize: '12px' }}>
<InfoCircleOutlined style={{ marginRight: 8, flexShrink: 0 }} />
<Text
ellipsis={{ tooltip: progress?.message || '处理中...' }}
style={{
color: 'inherit',
fontSize: '12px',
flex: 1,
minWidth: 0,
fontWeight: 500
}}
>
{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>
<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 => (
<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>
))}</div>
<RightOutlined style={{ color: '#bfbfbf', fontSize: 12 }} />
</div>
</div>
@ -206,32 +332,55 @@ const MeetingCardItem: React.FC<{ item: MeetingVO, config: any, fetchData: () =>
);
};
// --- 主组件 ---
const Meetings: React.FC = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
const [data, setData] = useState<MeetingVO[]>([]);
const [total, setTotal] = useState(0);
const [current, setCurrent] = useState(1);
const [size, setSize] = useState(8);
const [searchTitle, setSearchTitle] = useState('');
const [viewType, setViewType] = useState<'all' | 'created' | 'involved'>('all');
const [createDrawerVisible, setCreateDrawerVisible] = useState(false);
useEffect(() => {
fetchData();
}, [current, size, searchTitle, viewType]);
const [audioUrl, setAudioUrl] = useState('');
const [uploadProgress, setUploadProgress] = useState(0);
const [fileList, setFileList] = useState<any[]>([]);
useEffect(() => { fetchData(); }, [current, size, searchTitle, viewType]);
const fetchData = async () => {
setLoading(true);
try {
const res = await getMeetingPage({ current, size, title: searchTitle, viewType });
if (res.data && res.data.data) {
setData(res.data.data.records);
setTotal(res.data.data.total);
if (res.data && res.data.data) { setData(res.data.data.records); setTotal(res.data.data.total); }
} catch (err) {} finally { setLoading(false); }
};
const handleCreateSubmit = async () => {
if (!audioUrl) {
message.error('请先上传录音文件');
return;
}
} catch (err) {
console.error(err);
} finally {
setLoading(false);
const values = await form.validateFields();
setSubmitLoading(true);
try {
await createMeeting({
...values,
meetingTime: values.meetingTime.format('YYYY-MM-DD HH:mm:ss'),
audioUrl,
participants: values.participants?.join(','),
tags: values.tags?.join(',')
});
message.success('会议发起成功');
setCreateDrawerVisible(false);
fetchData();
} catch (err) {} finally {
setSubmitLoading(false);
}
};
@ -244,124 +393,84 @@ const Meetings: React.FC = () => {
};
return (
<div style={{
height: 'calc(100vh - 64px)',
display: 'flex',
flexDirection: 'column',
backgroundColor: '#f4f7f9',
padding: '24px',
overflow: 'hidden'
}}>
<div style={{ height: 'calc(100vh - 64px)', display: 'flex', flexDirection: 'column', backgroundColor: '#f4f7f9', padding: '24px', overflow: 'hidden' }}>
<div style={{ maxWidth: 1600, margin: '0 auto', width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
{/* 固定头部 - 极简白卡 */}
<Card bordered={false} style={{ marginBottom: 20, borderRadius: 16, flexShrink: 0, boxShadow: '0 4px 12px rgba(0,0,0,0.03)' }} bodyStyle={{ padding: '16px 28px' }}>
<Row justify="space-between" align="middle">
<Col>
<Space size={12}>
<div style={{ width: 8, height: 24, background: '#1890ff', borderRadius: 4 }}></div>
<Title level={4} style={{ margin: 0 }}></Title>
</Space>
</Col>
<Col><Space size={12}><div style={{ width: 8, height: 24, background: '#1890ff', borderRadius: 4 }}></div><Title level={4} style={{ margin: 0 }}></Title></Space></Col>
<Col>
<Space size={16}>
<Radio.Group value={viewType} onChange={e => { setViewType(e.target.value); setCurrent(1); }} buttonStyle="solid">
<Radio.Button value="all"></Radio.Button>
<Radio.Button value="created"></Radio.Button>
<Radio.Button value="involved"></Radio.Button>
<Radio.Button value="all"></Radio.Button><Radio.Button value="created"></Radio.Button><Radio.Button value="involved"></Radio.Button>
</Radio.Group>
<Input
placeholder="搜索会议标题"
prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
allowClear
onPressEnter={(e) => { setSearchTitle((e.target as any).value); setCurrent(1); }}
style={{ width: 220, borderRadius: 8 }}
/>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => navigate('/meeting-create')}
style={{ borderRadius: 8, height: 36, fontWeight: 500 }}
>
</Button>
<Input placeholder="搜索会议标题" prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />} allowClear onPressEnter={(e) => { setSearchTitle((e.target as any).value); setCurrent(1); }} style={{ width: 220, borderRadius: 8 }} />
<Button type="primary" icon={<PlusOutlined />} onClick={() => {
form.resetFields();
setAudioUrl('');
setUploadProgress(0);
setFileList([]);
setCreateDrawerVisible(true);
}} style={{ borderRadius: 8, height: 36, fontWeight: 500 }}></Button>
</Space>
</Col>
</Row>
</Card>
{/* 列表区 */}
<div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '4px 8px 4px 4px' }}>
<Skeleton loading={loading} active paragraph={{ rows: 10 }}>
<List
grid={{ gutter: 24, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }}
dataSource={data}
renderItem={(item) => {
<List grid={{ gutter: 24, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }} dataSource={data} renderItem={(item) => {
const config = statusConfig[item.status] || statusConfig[0];
return <MeetingCardItem item={item} config={config} fetchData={fetchData} />;
}}
locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="开启您的第一场会议分析" /> }}
/>
return <MeetingCardItem item={item} config={config} fetchData={fetchData} t={t} />;
}} 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
current={current}
pageSize={size}
total={total}
onChange={(p, s) => { setCurrent(p); setSize(s); }}
showTotal={(total) => <Text type="secondary" size="small"> {total} </Text>}
size="small"
/>
<Pagination current={current} pageSize={size} total={total} onChange={(p, s) => { setCurrent(p); setSize(s); }} showTotal={(total) => <Text type="secondary" size="small"> {total} </Text>} size="small" />
</div>
)}
</div>
<Drawer
title={<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}><div style={{ width: 4, height: 18, background: '#1890ff', borderRadius: 2 }} /></div>}
width="clamp(800px, 85vw, 1100px)"
onClose={() => setCreateDrawerVisible(false)}
open={createDrawerVisible}
destroyOnClose
styles={{ body: { backgroundColor: '#f4f7f9', padding: '24px 32px' } }}
footer={
<div style={{ textAlign: 'right', padding: '12px 24px' }}>
<Space size={12}>
<Button onClick={() => setCreateDrawerVisible(false)} size="large" style={{ borderRadius: 8, minWidth: 100 }}></Button>
<Button type="primary" size="large" icon={<RocketOutlined />} loading={submitLoading} onClick={handleCreateSubmit} style={{ borderRadius: 8, minWidth: 160, fontWeight: 600, boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)' }}>
</Button>
</Space>
</div>
}
>
<MeetingCreateForm
form={form}
audioUrl={audioUrl}
setAudioUrl={setAudioUrl}
uploadProgress={uploadProgress}
setUploadProgress={setUploadProgress}
fileList={fileList}
setFileList={setFileList}
/>
</Drawer>
<style>{`
.meeting-card:hover {
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;
border-radius: 50%;
background: rgba(255,255,255,0.9);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
transition: all 0.2s;
color: #8c8c8c;
}
.icon-btn:hover {
transform: scale(1.1);
}
.icon-btn.edit:hover {
color: #1890ff;
background: #e6f7ff;
}
.icon-btn.delete:hover {
color: #ff4d4f;
background: #fff1f0;
}
.card-actions {
opacity: 0.6;
transition: opacity 0.3s;
}
.meeting-card:hover .card-actions {
opacity: 1;
}
.meeting-card:hover { 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; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: all 0.2s; color: #8c8c8c; }
.icon-btn:hover { transform: scale(1.1); }
.icon-btn.edit:hover { color: #1890ff; background: #e6f7ff; }
.icon-btn.delete:hover { color: #ff4d4f; background: #fff1f0; }
.card-actions { opacity: 0.6; transition: opacity 0.3s; }
.meeting-card:hover .card-actions { opacity: 1; }
`}</style>
</div>
);

View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Card, Button, Input, Space, Drawer, Form, Select, Tag, message, Popconfirm, Typography, Divider, Tooltip, Row, Col, List, Empty, Skeleton, Switch, Modal } from 'antd';
import { Card, Button, Input, Space, Drawer, Form, Select, Tag, message, Popconfirm, Typography, Divider, Tooltip, Row, Col, List, Empty, Skeleton, Switch, Modal, Pagination } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, CopyOutlined, SearchOutlined, SaveOutlined, StarFilled } from '@ant-design/icons';
import ReactMarkdown from 'react-markdown';
import { useDict } from '../../hooks/useDict';
@ -13,17 +13,24 @@ import {
PromptTemplateDTO
} from '../../api/business/prompt';
import { useTranslation } from 'react-i18next';
const { Option } = Select;
const { Text, Title } = Typography;
const PromptTemplates: React.FC = () => {
const { t } = useTranslation();
const [form] = Form.useForm();
const [searchForm] = Form.useForm();
const { items: categories, loading: dictLoading } = useDict('biz_prompt_category');
const { items: dictTags } = useDict('biz_prompt_tag');
const { items: promptLevels } = useDict('biz_prompt_level');
const [loading, setLoading] = useState(false);
const [data, setData] = useState<PromptTemplateVO[]>([]);
const [total, setTotal] = useState(0);
const [current, setCurrent] = useState(1);
const [pageSize, setPageSize] = useState(12);
const [drawerVisible, setDrawerVisible] = useState(false);
const [editingId, setEditingId] = useState<number | null>(null);
@ -42,20 +49,21 @@ const PromptTemplates: React.FC = () => {
useEffect(() => {
fetchData();
}, []);
}, [current, pageSize]);
const fetchData = async () => {
const values = searchForm.getFieldsValue();
setLoading(true);
try {
const res = await getPromptPage({
current: 1,
size: 1000,
current,
size: pageSize,
name: values.name,
category: values.category
});
if (res.data && res.data.data) {
setData(res.data.data.records);
setTotal(res.data.data.total);
}
} catch (err) {
console.error(err);
@ -175,16 +183,17 @@ const PromptTemplates: React.FC = () => {
const renderCard = (item: PromptTemplateVO) => {
const isSystem = item.isSystem === 1;
const isPlatformLevel = Number(item.tenantId) === 0;
const isPlatformLevel = Number(item.tenantId) === 0 && isSystem;
const isTenantLevel = Number(item.tenantId) > 0 && isSystem;
const isPersonalLevel = !isSystem;
// 权限判定逻辑 (使用 Number 强制转换防止类型不匹配)
let canEdit = false;
const currentUserId = userProfile.userId ? Number(userProfile.userId) : -1;
if (isPlatformAdmin) {
// 平台管理员管理平台 (tenantId = 0)
canEdit = isPlatformLevel;
// 平台管理员管理平台下的所有 (tenantId = 0)
canEdit = Number(item.tenantId) === 0;
} else if (isTenantAdmin) {
// 租户管理员管理本租户所有模板
canEdit = Number(item.tenantId) === activeTenantId;
@ -213,10 +222,11 @@ const PromptTemplates: React.FC = () => {
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<div style={{
width: 40, height: 40, borderRadius: 10, backgroundColor: isPlatformLevel ? '#fffbe6' : '#e6f7ff',
width: 40, height: 40, borderRadius: 10,
backgroundColor: isPlatformLevel ? '#fffbe6' : (isTenantLevel ? '#e6f7ff' : '#e6fffb'),
display: 'flex', justifyContent: 'center', alignItems: 'center'
}}>
<StarFilled style={{ fontSize: 20, color: isPlatformLevel ? '#faad14' : '#1890ff' }} />
<StarFilled style={{ fontSize: 20, color: isPlatformLevel ? '#faad14' : (isTenantLevel ? '#1890ff' : '#13c2c2') }} />
</div>
{levelTag}
</div>
@ -253,7 +263,12 @@ const PromptTemplates: React.FC = () => {
<CopyOutlined style={{ color: '#bfbfbf', cursor: 'pointer', fontSize: 16 }} onClick={() => handleOpenDrawer(item, true)} />
</Tooltip>
{canEdit && (
<Popconfirm title="确定删除?" onConfirm={() => deletePromptTemplate(item.id).then(fetchData)}>
<Popconfirm
title="确定删除?"
onConfirm={() => deletePromptTemplate(item.id).then(fetchData)}
okText={t('common.confirm')}
cancelText={t('common.cancel')}
>
<Tooltip title="删除">
<DeleteOutlined style={{ color: '#bfbfbf', cursor: 'pointer', fontSize: 16 }} />
</Tooltip>
@ -296,7 +311,8 @@ const PromptTemplates: React.FC = () => {
{Object.keys(groupedData).length === 0 ? (
<Empty description="暂无可用模板" />
) : (
Object.keys(groupedData).map(catKey => {
<>
{Object.keys(groupedData).map(catKey => {
const catLabel = categories.find(c => c.itemValue === catKey)?.itemLabel || catKey;
return (
<div key={catKey} style={{ marginBottom: 40 }}>
@ -306,7 +322,23 @@ const PromptTemplates: React.FC = () => {
</div>
</div>
);
})
})}
<div style={{ display: 'flex', justifyContent: 'center', marginTop: 40, paddingBottom: 20 }}>
<Pagination
current={current}
pageSize={pageSize}
total={total}
showSizeChanger
showQuickJumper
onChange={(page, size) => {
setCurrent(page);
setPageSize(size);
}}
showTotal={(total) => `${total} 条模板`}
/>
</div>
</>
)}
</Skeleton>
</div>