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

- 重构会议创建表单，增加录音上传、AI分析配置和参会人员选择
- 更新会议卡片组件，集成进度背景和状态标签，优化样式和交互体验
- 增加分页功能和多语言支持
- 修复和优化多处代码逻辑和样式问题

frontend/package.json

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

frontend/src/pages/Login.tsx

@@ -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>

frontend/src/pages/business/HotWords.tsx

@@ -82,13 +82,12 @@ const HotWords: React.FC = () => {
       }
       setEditingId(record.id);
       form.setFieldsValue({
-        ...record,
+        ...record
-        pinyinList: record.pinyinList.join(', ')
       });
     } 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)">
+              <Form.Item name="weight" label="识别权重 (1-5)" tooltip="权重越高，识别引擎越倾向于将其识别为该词">
-                <InputNumber min={1} max={100} style={{ width: '100%' }} />
+                <InputNumber min={1} max={5} precision={1} step={0.1} style={{ width: '100%' }} />
               </Form.Item>
             </Col>
           </Row>

frontend/src/pages/business/Meetings.tsx

@@ -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;
 
-// 状态标签组件：集成进度背景
+// --- 进度感知 Hook ---
-const IntegratedStatusTag: React.FC<{ meeting: MeetingVO }> = ({ meeting }) => {
+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={{
+    <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' }}>
-      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={{
+        <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 }} />
-          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 MeetingCreateForm: React.FC<{ 
-  const [progress, setProgress] = useState<MeetingProgress | null>(null);
+  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;
+    loadInitialData();
-    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 loadInitialData = async () => {
+    try {
+      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) {}
+  };
+
+  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 
+      <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%' }}>
-        hoverable
+        <div className={isProcessing ? 'status-bar-active' : ''} style={{ width: 6, backgroundColor: config.color, borderRadius: '16px 0 0 16px' }}></div>
-        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="编辑">
+              <Tooltip title="编辑"><div className="icon-btn edit" onClick={() => navigate(`/meetings/${item.id}`)}><EditOutlined /></div></Tooltip>
-                <div className="icon-btn edit" onClick={() => navigate(`/meetings/${item.id}`)}>
+              <Popconfirm 
-                  <EditOutlined />
+                title="确定删除？" 
-                </div>
+                onConfirm={() => deleteMeeting(item.id).then(fetchData)}
-              </Tooltip>
+                okText={t('common.confirm')}
-              <Popconfirm title="确定删除？" onConfirm={() => deleteMeeting(item.id).then(fetchData)}>
+                cancelText={t('common.cancel')}
-                <Tooltip title="删除">
+              >
-                  <div className="icon-btn delete">
+                <Tooltip title="删除"><div className="icon-btn delete"><DeleteOutlined /></div></Tooltip>
-                    <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' }}>
+              <div style={{ fontSize: '13px', color: '#8c8c8c', display: 'flex', alignItems: 'center' }}><CalendarOutlined style={{ marginRight: 10 }} />{dayjs(item.meetingTime).format('YYYY-MM-DD HH:mm')}</div>
-                <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',
+                  padding: '6px 12px', // 增加内边距，更聚拢
-                  borderRadius: 4,
+                  borderRadius: 6,
-                  marginTop: 2
+                  marginTop: 4,
+                  width: 'calc(100% - 12px)', // 留出右侧与卡片边缘的距离
+                  overflow: 'hidden',
+                  boxSizing: 'border-box'
                 }}>
-                  <InfoCircleOutlined style={{ marginRight: 6 }} />
+                  <InfoCircleOutlined style={{ marginRight: 8, flexShrink: 0 }} />
-                  <Text ellipsis style={{ color: 'inherit', fontSize: '12px' }}>
+                  <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 }} />
+                <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>
-                  <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 }}>
+            <div style={{ display: 'flex', gap: 4 }}>{item.tags?.split(',').slice(0, 2).map(t => (
-              {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>
-                <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(() => {
+  const [audioUrl, setAudioUrl] = useState('');
-    fetchData();
+  const [uploadProgress, setUploadProgress] = useState(0);
-  }, [current, size, searchTitle, viewType]);
+  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) {
+      if (res.data && res.data.data) { setData(res.data.data.records); setTotal(res.data.data.total); }
-        setData(res.data.data.records);
+    } catch (err) {} finally { setLoading(false); }
-        setTotal(res.data.data.total);
+  };
-      }
+
-    } catch (err) {
+  const handleCreateSubmit = async () => {
-      console.error(err);
+    if (!audioUrl) {
-    } finally {
+      message.error('请先上传录音文件');
-      setLoading(false);
+      return;
+    }
+    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={{ 
+    <div style={{ height: 'calc(100vh - 64px)', display: 'flex', flexDirection: 'column', backgroundColor: '#f4f7f9', padding: '24px', overflow: 'hidden' }}>
-      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>
+            <Col><Space size={12}><div style={{ width: 8, height: 24, background: '#1890ff', borderRadius: 4 }}></div><Title level={4} style={{ margin: 0 }}>会议中心</Title></Space></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="all">全部</Radio.Button><Radio.Button value="created">我发起</Radio.Button><Radio.Button value="involved">我参与</Radio.Button>
-                  <Radio.Button value="created">我发起</Radio.Button>
-                  <Radio.Button value="involved">我参与</Radio.Button>
                 </Radio.Group>
-                <Input 
+                <Input placeholder="搜索会议标题" prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />} allowClear onPressEnter={(e) => { setSearchTitle((e.target as any).value); setCurrent(1); }} style={{ width: 220, borderRadius: 8 }} />
-                  placeholder="搜索会议标题" 
+                <Button type="primary" icon={<PlusOutlined />} onClick={() => {
-                  prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />} 
+                  form.resetFields();
-                  allowClear 
+                  setAudioUrl('');
-                  onPressEnter={(e) => { setSearchTitle((e.target as any).value); setCurrent(1); }} 
+                  setUploadProgress(0);
-                  style={{ width: 220, borderRadius: 8 }} 
+                  setFileList([]);
-                />
+                  setCreateDrawerVisible(true);
-                <Button 
+                }} style={{ borderRadius: 8, height: 36, fontWeight: 500 }}>新会议</Button>
-                  type="primary" 
-                  icon={<PlusOutlined />} 
-                  onClick={() => navigate('/meeting-create')}
-                  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
+            <List grid={{ gutter: 24, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }} dataSource={data} renderItem={(item) => {
-              grid={{ gutter: 24, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }}
+              const config = statusConfig[item.status] || statusConfig[0];
-              dataSource={data}
+              return <MeetingCardItem item={item} config={config} fetchData={fetchData} t={t} />;
-              renderItem={(item) => {
+            }} locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="开启您的第一场会议分析" /> }} />
-                const config = statusConfig[item.status] || statusConfig[0];
-                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
+            <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" />
-              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 {
+        .meeting-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important; }
-          transform: translateY(-4px);
+        .status-bar-active { animation: statusBreathing 2s infinite ease-in-out; }
-          box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
+        @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; }
-        .status-bar-active {
+        .icon-btn:hover { transform: scale(1.1); }
-          animation: statusBreathing 2s infinite ease-in-out;
+        .icon-btn.edit:hover { color: #1890ff; background: #e6f7ff; }
-        }
+        .icon-btn.delete:hover { color: #ff4d4f; background: #fff1f0; }
-        @keyframes statusBreathing {
+        .card-actions { opacity: 0.6; transition: opacity 0.3s; }
-          0% { opacity: 1; }
+        .meeting-card:hover .card-actions { 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>
   );

frontend/src/pages/business/PromptTemplates.tsx

@@ -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, 
+        current, 
-        size: 1000, 
+        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)
+      // 平台管理员管理平台下的所有 (tenantId = 0)
-      canEdit = isPlatformLevel;
+      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,17 +311,34 @@ const PromptTemplates: React.FC = () => {
           {Object.keys(groupedData).length === 0 ? (
             <Empty description="暂无可用模板" />
           ) : (
-            Object.keys(groupedData).map(catKey => {
+            <>
-              const catLabel = categories.find(c => c.itemValue === catKey)?.itemLabel || catKey;
+              {Object.keys(groupedData).map(catKey => {
-              return (
+                const catLabel = categories.find(c => c.itemValue === catKey)?.itemLabel || catKey;
-                <div key={catKey} style={{ marginBottom: 40 }}>
+                return (
-                  <Title level={4} style={{ marginBottom: 24, paddingLeft: 8, borderLeft: '4px solid #1890ff' }}>{catLabel}</Title>
+                  <div key={catKey} style={{ marginBottom: 40 }}>
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24 }}>
+                    <Title level={4} style={{ marginBottom: 24, paddingLeft: 8, borderLeft: '4px solid #1890ff' }}>{catLabel}</Title>
-                    {groupedData[catKey].map(renderCard)}
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24 }}>
+                      {groupedData[catKey].map(renderCard)}
+                    </div>
                   </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>