修改了音频播放器

frontend/src/components/AudioPlayerBar.css

@@ -0,0 +1,179 @@
+.audio-player-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 42px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  border: 1px solid #e3ebf6;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f7faff 100%);
+  box-shadow: 0 8px 18px rgba(40, 72, 120, 0.06);
+}
+
+.audio-player-bar.is-empty {
+  justify-content: center;
+}
+
+.audio-player-bar-audio {
+  display: none;
+}
+
+.audio-player-bar-play {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #5f7392;
+  box-shadow: none;
+}
+
+.audio-player-bar-play.ant-btn:hover,
+.audio-player-bar-play.ant-btn:focus {
+  background: rgba(233, 241, 251, 0.7) !important;
+  color: #355171 !important;
+}
+
+.audio-player-bar-play.ant-btn:disabled {
+  background: transparent !important;
+  color: #a8b7ca !important;
+}
+
+.audio-player-bar-time {
+  flex: 0 0 auto;
+  min-width: 102px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #5f7392;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+
+.audio-player-bar-progress {
+  position: relative;
+  flex: 1;
+  height: 5px;
+  border: 0;
+  border-radius: 999px;
+  background: #edf2fa;
+  cursor: pointer;
+  appearance: none;
+  outline: none;
+}
+
+.audio-player-bar-progress::-webkit-slider-runnable-track {
+  height: 5px;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    #bfd1e8 0%,
+    #bfd1e8 var(--progress, 0%),
+    #edf2fa var(--progress, 0%),
+    #edf2fa 100%
+  );
+}
+
+.audio-player-bar-progress::-webkit-slider-thumb {
+  appearance: none;
+  width: 10px;
+  height: 10px;
+  margin-top: -2.5px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  background: #b9cde7;
+  box-shadow: 0 2px 5px rgba(79, 111, 157, 0.12);
+}
+
+.audio-player-bar-progress::-moz-range-track {
+  height: 5px;
+  border-radius: 999px;
+  background: #edf2fa;
+}
+
+.audio-player-bar-progress::-moz-range-progress {
+  height: 5px;
+  border-radius: 999px;
+  background: #bfd1e8;
+}
+
+.audio-player-bar-progress::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  background: #b9cde7;
+  box-shadow: 0 2px 5px rgba(79, 111, 157, 0.12);
+}
+
+.audio-player-bar-volume {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #5f7392;
+  font-size: 14px;
+}
+
+.audio-player-bar-divider {
+  width: 1px;
+  height: 16px;
+  background: #e4ebf5;
+}
+
+.audio-player-bar-control.ant-btn {
+  height: 24px;
+  min-height: 24px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #5f7392;
+  box-shadow: none;
+  font-size: 11px;
+}
+
+.audio-player-bar-control.ant-btn:hover,
+.audio-player-bar-control.ant-btn:focus {
+  background: rgba(240, 245, 252, 0.75) !important;
+  color: #355171 !important;
+}
+
+.audio-player-bar-control.ant-btn:disabled {
+  background: #f8fafc !important;
+  color: #a8b7ca !important;
+}
+
+.audio-player-bar-rate.ant-btn {
+  min-width: 46px;
+  font-weight: 700;
+}
+
+.audio-player-bar-more.ant-btn {
+  width: 24px;
+  min-width: 24px;
+  padding: 0;
+  border-radius: 999px;
+}
+
+.audio-player-bar-empty-text {
+  color: #5f7392;
+  font-size: 12px;
+}
+
+@media (max-width: 768px) {
+  .audio-player-bar {
+    gap: 8px;
+    padding: 4px 9px;
+  }
+
+  .audio-player-bar-time {
+    min-width: 78px;
+    font-size: 12px;
+  }
+
+  .audio-player-bar-volume,
+  .audio-player-bar-divider {
+    display: none;
+  }
+}

frontend/src/components/AudioPlayerBar.jsx

@@ -0,0 +1,185 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Button, Dropdown } from 'antd';
+import {
+  CaretRightFilled,
+  DownOutlined,
+  MoreOutlined,
+  PauseOutlined,
+  SoundOutlined,
+} from '@ant-design/icons';
+import tools from '../utils/tools';
+import './AudioPlayerBar.css';
+
+const DEFAULT_RATE_OPTIONS = [0.75, 1, 1.25, 1.5, 2];
+
+const AudioPlayerBar = ({
+  audioRef,
+  src,
+  playbackRate = 1,
+  onPlaybackRateChange,
+  onTimeUpdate,
+  onLoadedMetadata,
+  moreMenuItems = [],
+  emptyText = '暂无音频',
+  showMoreButton = true,
+  rateOptions = DEFAULT_RATE_OPTIONS,
+}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+
+  useEffect(() => {
+    const audio = audioRef?.current;
+    if (!audio) {
+      return undefined;
+    }
+
+    const syncState = () => {
+      setCurrentTime(audio.currentTime || 0);
+      setDuration(audio.duration || 0);
+      setIsPlaying(!audio.paused && !audio.ended);
+    };
+
+    const handleMeta = (event) => {
+      syncState();
+      onLoadedMetadata?.(event);
+    };
+
+    const handleTime = (event) => {
+      syncState();
+      onTimeUpdate?.(event);
+    };
+
+    const handlePlay = () => setIsPlaying(true);
+    const handlePause = () => setIsPlaying(false);
+    const handleEnded = () => {
+      setIsPlaying(false);
+      setCurrentTime(audio.duration || 0);
+    };
+
+    syncState();
+    audio.addEventListener('loadedmetadata', handleMeta);
+    audio.addEventListener('durationchange', syncState);
+    audio.addEventListener('timeupdate', handleTime);
+    audio.addEventListener('play', handlePlay);
+    audio.addEventListener('pause', handlePause);
+    audio.addEventListener('ended', handleEnded);
+
+    return () => {
+      audio.removeEventListener('loadedmetadata', handleMeta);
+      audio.removeEventListener('durationchange', syncState);
+      audio.removeEventListener('timeupdate', handleTime);
+      audio.removeEventListener('play', handlePlay);
+      audio.removeEventListener('pause', handlePause);
+      audio.removeEventListener('ended', handleEnded);
+    };
+  }, [audioRef, onLoadedMetadata, onTimeUpdate, src]);
+
+  useEffect(() => {
+    if (audioRef?.current) {
+      audioRef.current.playbackRate = playbackRate;
+    }
+  }, [audioRef, playbackRate]);
+
+  const rateMenuItems = useMemo(
+    () => rateOptions.map((rate) => ({
+      key: String(rate),
+      label: `${rate.toFixed(rate % 1 === 0 ? 1 : 2)}x`,
+      onClick: () => onPlaybackRateChange?.(rate),
+    })),
+    [onPlaybackRateChange, rateOptions],
+  );
+
+  const progress = duration > 0 ? Math.min((currentTime / duration) * 100, 100) : 0;
+
+  const togglePlay = async () => {
+    const audio = audioRef?.current;
+    if (!audio || !src) {
+      return;
+    }
+
+    if (audio.paused || audio.ended) {
+      try {
+        await audio.play();
+      } catch {
+        setIsPlaying(false);
+      }
+    } else {
+      audio.pause();
+    }
+  };
+
+  const handleSeek = (event) => {
+    const audio = audioRef?.current;
+    if (!audio || !src) {
+      return;
+    }
+
+    const nextTime = Number(event.target.value);
+    audio.currentTime = nextTime;
+    setCurrentTime(nextTime);
+  };
+
+  if (!src) {
+    return (
+      <div className="audio-player-bar is-empty">
+        <span className="audio-player-bar-empty-text">{emptyText}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="audio-player-bar">
+      <audio ref={audioRef} className="audio-player-bar-audio" src={src} preload="metadata" />
+
+      <Button
+        type="text"
+        className="audio-player-bar-play"
+        icon={isPlaying ? <PauseOutlined /> : <CaretRightFilled />}
+        onClick={togglePlay}
+      />
+
+      <div className="audio-player-bar-time">
+        {tools.formatDuration(currentTime)} / {tools.formatDuration(duration)}
+      </div>
+
+      <input
+        className="audio-player-bar-progress"
+        type="range"
+        min={0}
+        max={duration || 0}
+        step={0.1}
+        value={Math.min(currentTime, duration || 0)}
+        onChange={handleSeek}
+        style={{ '--progress': `${progress}%` }}
+      />
+
+      <span className="audio-player-bar-volume">
+        <SoundOutlined />
+      </span>
+      <span className="audio-player-bar-divider" />
+
+      <Dropdown menu={{ items: rateMenuItems, selectable: true, selectedKeys: [String(playbackRate)] }} trigger={['click']}>
+        <Button type="text" className="audio-player-bar-control audio-player-bar-rate">
+          <span>{playbackRate.toFixed(playbackRate % 1 === 0 ? 1 : 2)}x</span>
+          <DownOutlined />
+        </Button>
+      </Dropdown>
+
+      {showMoreButton ? (
+        <>
+          <span className="audio-player-bar-divider" />
+          {moreMenuItems.length > 0 ? (
+            <Dropdown menu={{ items: moreMenuItems }} trigger={['click']}>
+              <Button type="text" className="audio-player-bar-control audio-player-bar-more" icon={<MoreOutlined />} />
+            </Dropdown>
+          ) : (
+            <Button type="text" disabled className="audio-player-bar-control audio-player-bar-more" icon={<MoreOutlined />} />
+          )}
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+export default AudioPlayerBar;

frontend/src/components/MindMap.jsx

@@ -6,9 +6,16 @@ import { FullscreenOutlined, ZoomInOutlined, ZoomOutOutlined, SyncOutlined } fro
 
 const transformer = new Transformer();
 
+const hasRenderableSize = (element) => {
+  if (!element) return false;
+  const rect = element.getBoundingClientRect();
+  return Number.isFinite(rect.width) && Number.isFinite(rect.height) && rect.width > 0 && rect.height > 0;
+};
+
 const MindMap = ({ content, title }) => {
   const svgRef = useRef(null);
   const markmapRef = useRef(null);
+  const latestRootRef = useRef(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -17,16 +24,22 @@ const MindMap = ({ content, title }) => {
     setLoading(true);
     try {
       const { root } = transformer.transform(content);
-      
+      latestRootRef.current = root;
+
       if (markmapRef.current) {
         markmapRef.current.setData(root);
-        markmapRef.current.fit();
       } else {
         markmapRef.current = Markmap.create(svgRef.current, {
-          autoFit: true,
+          autoFit: false,
           duration: 500,
         }, root);
       }
+
+      requestAnimationFrame(() => {
+        if (svgRef.current && hasRenderableSize(svgRef.current)) {
+          markmapRef.current?.fit();
+        }
+      });
     } catch (error) {
       console.error('Markmap error:', error);
     } finally {
@@ -34,6 +47,33 @@ const MindMap = ({ content, title }) => {
     }
   }, [content]);
 
+  useEffect(() => {
+    const svgElement = svgRef.current;
+    if (!svgElement || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(() => {
+      if (!hasRenderableSize(svgElement)) {
+        return;
+      }
+
+      if (!markmapRef.current && latestRootRef.current) {
+        markmapRef.current = Markmap.create(svgElement, {
+          autoFit: false,
+          duration: 500,
+        }, latestRootRef.current);
+      }
+
+      requestAnimationFrame(() => {
+        markmapRef.current?.fit();
+      });
+    });
+
+    observer.observe(svgElement);
+    return () => observer.disconnect();
+  }, []);
+
   const handleFit = () => markmapRef.current?.fit();
   const handleZoomIn = () => markmapRef.current?.rescale(1.2);
   const handleZoomOut = () => markmapRef.current?.rescale(0.8);

frontend/src/components/TranscriptTimeline.css

@@ -0,0 +1,118 @@
+.transcript-scroll-panel {
+  overflow-y: auto;
+  padding: 12px 12px 12px 4px;
+}
+
+.transcript-scroll-panel-fill {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+.transcript-loading {
+  display: flex;
+  justify-content: center;
+  padding-top: 120px;
+}
+
+.transcript-entry {
+  margin-left: -4px;
+  padding: 10px 12px;
+  border: 1px solid transparent;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.82);
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.transcript-entry:hover {
+  background: #f8fbff;
+  border-color: #d9e8fb;
+}
+
+.transcript-entry.is-active {
+  background: linear-gradient(180deg, #eef6ff 0%, #e2f0ff 100%);
+  border-color: #bfd8fb;
+  box-shadow: 0 10px 22px rgba(29, 78, 216, 0.12);
+}
+
+.transcript-entry-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--speaker-color, #1677ff);
+  box-shadow: none;
+  transition: box-shadow 0.2s ease;
+}
+
+.transcript-entry-dot.is-active {
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.16);
+}
+
+.transcript-entry-time.ant-typography {
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.transcript-entry-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.transcript-entry-speaker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.transcript-entry-avatar.ant-avatar {
+  flex-shrink: 0;
+}
+
+.transcript-entry-speaker-label.ant-typography {
+  margin: 0 !important;
+  font-size: 13px;
+  font-weight: 700;
+  color: #1677ff;
+}
+
+.transcript-entry-speaker-label.is-editable {
+  cursor: pointer;
+}
+
+.transcript-entry-speaker-edit {
+  font-size: 11px;
+  margin-left: 3px;
+}
+
+.transcript-entry-content {
+  color: #334155;
+  font-size: 14px;
+  line-height: 1.72;
+}
+
+.transcript-entry-content.ant-typography {
+  margin: 0 !important;
+}
+
+.transcript-render-hint {
+  text-align: center;
+  padding: 8px 0 20px;
+}
+
+@media (max-width: 768px) {
+  .transcript-scroll-panel {
+    padding-right: 6px;
+  }
+
+  .transcript-entry {
+    padding: 9px 10px;
+  }
+
+  .transcript-entry-content {
+    font-size: 13px;
+  }
+}

frontend/src/components/TranscriptTimeline.jsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import {
+  Avatar,
+  Button,
+  Empty,
+  Input,
+  Space,
+  Spin,
+  Timeline,
+  Typography,
+} from 'antd';
+import {
+  CheckOutlined,
+  CloseOutlined,
+  EditOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+import tools from '../utils/tools';
+import './TranscriptTimeline.css';
+
+const { Text } = Typography;
+
+const TranscriptTimeline = ({
+  transcript = [],
+  loading = false,
+  visibleCount,
+  currentHighlightIndex = -1,
+  onJumpToTime,
+  onScroll,
+  transcriptRefs,
+  getSpeakerColor,
+  emptyDescription = '暂无对话数据',
+  loadingTip = '正在加载转录内容...',
+  showRenderHint = false,
+  fillHeight = false,
+  maxHeight = null,
+  editable = false,
+  isMeetingOwner = false,
+  editing = {},
+}) => {
+  const {
+    inlineSpeakerEdit = null,
+    inlineSpeakerEditSegmentId = null,
+    inlineSpeakerValue = '',
+    setInlineSpeakerValue,
+    startInlineSpeakerEdit,
+    saveInlineSpeakerEdit,
+    cancelInlineSpeakerEdit,
+    inlineSegmentEditId = null,
+    inlineSegmentValue = '',
+    setInlineSegmentValue,
+    startInlineSegmentEdit,
+    saveInlineSegmentEdit,
+    cancelInlineSegmentEdit,
+    savingInlineEdit = false,
+  } = editing;
+
+  const renderCount = Math.min(visibleCount ?? transcript.length, transcript.length);
+
+  if (loading) {
+    return (
+      <div
+        className={`transcript-scroll-panel${fillHeight ? ' transcript-scroll-panel-fill' : ''}`}
+        onScroll={onScroll}
+        style={maxHeight ? { maxHeight } : undefined}
+      >
+        <div className="transcript-loading">
+          <Spin size="large" tip={loadingTip} />
+        </div>
+      </div>
+    );
+  }
+
+  if (!transcript.length) {
+    return (
+      <div
+        className={`transcript-scroll-panel${fillHeight ? ' transcript-scroll-panel-fill' : ''}`}
+        onScroll={onScroll}
+        style={maxHeight ? { maxHeight } : undefined}
+      >
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={emptyDescription} style={{ marginTop: 80 }} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`transcript-scroll-panel${fillHeight ? ' transcript-scroll-panel-fill' : ''}`}
+      onScroll={onScroll}
+      style={maxHeight ? { maxHeight } : undefined}
+    >
+      <Timeline
+        mode="left"
+        className="transcript-timeline"
+        items={transcript.slice(0, renderCount).map((item, index) => {
+          const isActive = currentHighlightIndex === index;
+          const speakerColor = getSpeakerColor(item.speaker_id);
+          const speakerEditKey = `speaker-${item.speaker_id}-${item.segment_id}`;
+
+          return {
+            label: (
+              <Text type="secondary" className="transcript-entry-time">
+                {tools.formatDuration(item.start_time_ms / 1000)}
+              </Text>
+            ),
+            dot: (
+              <span
+                className={`transcript-entry-dot${isActive ? ' is-active' : ''}`}
+                style={{ '--speaker-color': speakerColor }}
+              />
+            ),
+            children: (
+              <div
+                ref={(el) => {
+                  if (transcriptRefs?.current) {
+                    transcriptRefs.current[index] = el;
+                  }
+                }}
+                className={`transcript-entry${isActive ? ' is-active' : ''}`}
+                onClick={() => onJumpToTime?.(item.start_time_ms)}
+              >
+                <div className="transcript-entry-header">
+                  <div className="transcript-entry-speaker">
+                    <Avatar
+                      size={24}
+                      icon={<UserOutlined />}
+                      className="transcript-entry-avatar"
+                      style={{ backgroundColor: speakerColor }}
+                    />
+                    {editable && inlineSpeakerEdit === item.speaker_id && inlineSpeakerEditSegmentId === speakerEditKey ? (
+                      <Space.Compact onClick={(event) => event.stopPropagation()}>
+                        <Input
+                          size="small"
+                          autoFocus
+                          value={inlineSpeakerValue}
+                          onChange={(event) => setInlineSpeakerValue?.(event.target.value)}
+                          onPressEnter={saveInlineSpeakerEdit}
+                          style={{ width: 180 }}
+                        />
+                        <Button
+                          size="small"
+                          type="text"
+                          icon={<CheckOutlined />}
+                          loading={savingInlineEdit}
+                          onClick={saveInlineSpeakerEdit}
+                        />
+                        <Button
+                          size="small"
+                          type="text"
+                          icon={<CloseOutlined />}
+                          disabled={savingInlineEdit}
+                          onClick={cancelInlineSpeakerEdit}
+                        />
+                      </Space.Compact>
+                    ) : (
+                      <Text
+                        className={`transcript-entry-speaker-label${editable && isMeetingOwner ? ' is-editable' : ''}`}
+                        onClick={editable && isMeetingOwner ? (event) => {
+                          event.stopPropagation();
+                          startInlineSpeakerEdit?.(item.speaker_id, item.speaker_tag, item.segment_id);
+                        } : undefined}
+                      >
+                        {item.speaker_tag || `发言人 ${item.speaker_id}`}
+                        {editable && isMeetingOwner ? <EditOutlined className="transcript-entry-speaker-edit" /> : null}
+                      </Text>
+                    )}
+                  </div>
+                </div>
+
+                {editable && inlineSegmentEditId === item.segment_id ? (
+                  <div onClick={(event) => event.stopPropagation()}>
+                    <Input.TextArea
+                      autoFocus
+                      autoSize={{ minRows: 2, maxRows: 6 }}
+                      value={inlineSegmentValue}
+                      onChange={(event) => setInlineSegmentValue?.(event.target.value)}
+                      onPressEnter={(event) => {
+                        if (event.ctrlKey || event.metaKey) {
+                          saveInlineSegmentEdit?.();
+                        }
+                      }}
+                    />
+                    <Space style={{ marginTop: 8 }}>
+                      <Button size="small" type="primary" icon={<CheckOutlined />} loading={savingInlineEdit} onClick={saveInlineSegmentEdit}>
+                        保存
+                      </Button>
+                      <Button size="small" icon={<CloseOutlined />} disabled={savingInlineEdit} onClick={cancelInlineSegmentEdit}>
+                        取消
+                      </Button>
+                    </Space>
+                  </div>
+                ) : (
+                  <Text
+                    className="transcript-entry-content"
+                    onDoubleClick={editable && isMeetingOwner ? (event) => {
+                      event.stopPropagation();
+                      startInlineSegmentEdit?.(item);
+                    } : undefined}
+                  >
+                    {item.text_content}
+                  </Text>
+                )}
+              </div>
+            ),
+          };
+        })}
+      />
+      {showRenderHint && renderCount < transcript.length ? (
+        <div className="transcript-render-hint">
+          <Text type="secondary">
+            已渲染 {renderCount} / {transcript.length} 条转录，继续向下滚动将自动加载更多
+          </Text>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default TranscriptTimeline;

frontend/src/pages/MeetingDetails.jsx

@@ -3,7 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import {
   Card, Row, Col, Button, Space, Typography, Tag, Avatar,
   Tooltip, Progress, Spin, App, Dropdown,
-  Divider, List, Timeline, Tabs, Input, Upload, Empty, Drawer, Select, Switch
+  Divider, List, Tabs, Input, Upload, Empty, Drawer, Select, Switch
 } from 'antd';
 import {
   ClockCircleOutlined, UserOutlined, TeamOutlined,
@@ -13,13 +13,15 @@ import {
   EyeOutlined, FileTextOutlined, PartitionOutlined,
   SaveOutlined, CloseOutlined,
   StarFilled, RobotOutlined, DownloadOutlined,
-  DownOutlined, CheckOutlined,
+  CheckOutlined,
   MoreOutlined, AudioOutlined, CopyOutlined
 } from '@ant-design/icons';
 import MarkdownRenderer from '../components/MarkdownRenderer';
 import MarkdownEditor from '../components/MarkdownEditor';
 import MindMap from '../components/MindMap';
 import ActionButton from '../components/ActionButton';
+import AudioPlayerBar from '../components/AudioPlayerBar';
+import TranscriptTimeline from '../components/TranscriptTimeline';
 import apiClient from '../utils/apiClient';
 import tools from '../utils/tools';
 import { buildApiUrl, API_ENDPOINTS } from '../config/api';
@@ -731,14 +733,6 @@ const MeetingDetails = ({ user }) => {
     { key: 'upload', icon: <UploadOutlined />, label: isUploading ? '上传中...' : '上传音频', disabled: isUploading, onClick: openAudioUploadPicker },
   ];
 
-  const playbackRateMenuItems = [
-    { key: '0.75', label: '0.75x', onClick: () => changePlaybackRate(0.75) },
-    { key: '1', label: '1.0x', onClick: () => changePlaybackRate(1) },
-    { key: '1.25', label: '1.25x', onClick: () => changePlaybackRate(1.25) },
-    { key: '1.5', label: '1.5x', onClick: () => changePlaybackRate(1.5) },
-    { key: '2', label: '2.0x', onClick: () => changePlaybackRate(2) },
-  ];
-
   /* ══════════════════ 渲染 ══════════════════ */
 
   if (loading) return <div style={{ textAlign: 'center', padding: '100px' }}><Spin size="large" tip="正在加载..." /></div>;
@@ -842,188 +836,54 @@ const MeetingDetails = ({ user }) => {
 
             {/* 音频播放器 */}
             <div style={{ padding: '8px 20px 0' }}>
-              <div className="meeting-audio-toolbar">
+              <AudioPlayerBar
-                <div className="meeting-audio-toolbar-player">
+                audioRef={audioRef}
-                  {audioUrl ? (
+                src={audioUrl}
-                    <audio
+                playbackRate={playbackRate}
-                      className="meeting-audio-toolbar-native"
+                onPlaybackRateChange={changePlaybackRate}
-                      ref={audioRef}
+                onTimeUpdate={handleTimeUpdate}
-                      src={audioUrl}
+                onLoadedMetadata={() => {
-                      controls
+                  if (audioRef.current) {
-                      controlsList="nodownload noplaybackrate"
+                    audioRef.current.playbackRate = playbackRate;
-                      onLoadedMetadata={() => {
+                  }
-                        if (audioRef.current) {
+                }}
-                          audioRef.current.playbackRate = playbackRate;
+                moreMenuItems={audioMoreMenuItems}
-                        }
+                emptyText="暂无音频，可通过右侧更多操作上传音频"
-                      }}
+              />
-                      onTimeUpdate={handleTimeUpdate}
-                      style={{ width: '100%', height: 36 }}
-                    />
-                  ) : (
-                    <div className="meeting-audio-toolbar-empty">
-                      <Text type="secondary">暂无音频，可通过右侧更多操作上传音频</Text>
-                    </div>
-                  )}
-                </div>
-                <div className="meeting-audio-toolbar-actions">
-                  <Dropdown
-                    menu={{ items: playbackRateMenuItems, selectable: true, selectedKeys: [String(playbackRate)] }}
-                    trigger={['click']}
-                  >
-                    <Button
-                      className="meeting-audio-toolbar-button meeting-audio-toolbar-rate btn-pill-secondary"
-                      disabled={!audioUrl}
-                    >
-                      <span>{playbackRate.toFixed(playbackRate % 1 === 0 ? 1 : 2)}x</span>
-                      <DownOutlined />
-                    </Button>
-                  </Dropdown>
-                  <Dropdown menu={{ items: audioMoreMenuItems }} trigger={['click']}>
-                    <Button
-                      className="meeting-audio-toolbar-button meeting-audio-toolbar-more btn-pill-secondary"
-                      icon={<MoreOutlined />}
-                    />
-                  </Dropdown>
-                </div>
-              </div>
             </div>
 
             {/* 转录时间轴 */}
-            <div
+            <div style={{ flex: 1, overflow: 'hidden', display: 'flex', minHeight: 0 }}>
-              style={{ flex: 1, overflowY: 'auto', padding: '12px 12px 12px 4px' }}
+              <TranscriptTimeline
-              onScroll={handleTranscriptScroll}
+                transcript={transcript}
-            >
+                loading={transcriptLoading}
-              {transcriptLoading ? (
+                visibleCount={transcriptVisibleCount}
-                <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 120 }}>
+                currentHighlightIndex={currentHighlightIndex}
-                  <Spin size="large" tip="正在加载转录内容..." />
+                onJumpToTime={jumpToTime}
-                </div>
+                onScroll={handleTranscriptScroll}
-              ) : transcript.length > 0 ? (
+                transcriptRefs={transcriptRefs}
-                <>
+                getSpeakerColor={getSpeakerColor}
-                  <Timeline
+                showRenderHint
-                    mode="left"
+                fillHeight
-                    className="transcript-timeline"
+                editable
-                    items={transcript.slice(0, transcriptVisibleCount).map((item, index) => {
+                isMeetingOwner={isMeetingOwner}
-                      const isActive = currentHighlightIndex === index;
+                editing={{
-                      return {
+                  inlineSpeakerEdit,
-                        label: (
+                  inlineSpeakerEditSegmentId,
-                          <Text type="secondary" style={{ fontSize: 12, whiteSpace: 'nowrap' }}>
+                  inlineSpeakerValue,
-                            {tools.formatDuration(item.start_time_ms / 1000)}
+                  setInlineSpeakerValue,
-                          </Text>
+                  startInlineSpeakerEdit,
-                        ),
+                  saveInlineSpeakerEdit,
-                        dot: (
+                  cancelInlineSpeakerEdit,
-                          <div style={{
+                  inlineSegmentEditId,
-                            width: 10, height: 10, borderRadius: '50%',
+                  inlineSegmentValue,
-                            background: getSpeakerColor(item.speaker_id),
+                  setInlineSegmentValue,
-                            boxShadow: isActive ? `0 0 0 3px ${getSpeakerColor(item.speaker_id)}33` : 'none',
+                  startInlineSegmentEdit,
-                          }} />
+                  saveInlineSegmentEdit,
-                        ),
+                  cancelInlineSegmentEdit,
-                        children: (
+                  savingInlineEdit,
-                          <div
+                }}
-                            ref={el => transcriptRefs.current[index] = el}
+              />
-                            style={{
-                              padding: '6px 10px',
-                              borderRadius: 8,
-                              background: isActive ? '#e6f4ff' : 'transparent',
-                              cursor: 'pointer',
-                              transition: 'background 0.2s',
-                              marginLeft: -4,
-                            }}
-                            onClick={() => jumpToTime(item.start_time_ms)}
-                          >
-                            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
-                              <Avatar
-                                size={24}
-                                icon={<UserOutlined />}
-                                style={{ backgroundColor: getSpeakerColor(item.speaker_id), flexShrink: 0 }}
-                              />
-                              {inlineSpeakerEdit === item.speaker_id && inlineSpeakerEditSegmentId === `speaker-${item.speaker_id}-${item.segment_id}` ? (
-                                <Space.Compact onClick={(e) => e.stopPropagation()}>
-                                  <Input
-                                    size="small"
-                                    autoFocus
-                                    value={inlineSpeakerValue}
-                                    onChange={(e) => setInlineSpeakerValue(e.target.value)}
-                                    onPressEnter={saveInlineSpeakerEdit}
-                                    style={{ width: 180 }}
-                                  />
-                                  <Button
-                                    size="small"
-                                    type="text"
-                                    icon={<CheckOutlined />}
-                                    loading={savingInlineEdit}
-                                    onClick={saveInlineSpeakerEdit}
-                                  />
-                                  <Button
-                                    size="small"
-                                    type="text"
-                                    icon={<CloseOutlined />}
-                                    disabled={savingInlineEdit}
-                                    onClick={cancelInlineSpeakerEdit}
-                                  />
-                                </Space.Compact>
-                              ) : (
-                                <Text
-                                  strong
-                                  style={{ color: '#1677ff', cursor: isMeetingOwner ? 'pointer' : 'default', fontSize: 13 }}
-                                  onClick={isMeetingOwner ? (e) => {
-                                    e.stopPropagation();
-                                    startInlineSpeakerEdit(item.speaker_id, item.speaker_tag, item.segment_id);
-                                  } : undefined}
-                                >
-                                  {item.speaker_tag || `发言人 ${item.speaker_id}`}
-                                  {isMeetingOwner ? <EditOutlined style={{ fontSize: 11, marginLeft: 3 }} /> : null}
-                                </Text>
-                              )}
-                            </div>
-                            {inlineSegmentEditId === item.segment_id ? (
-                              <div onClick={(e) => e.stopPropagation()}>
-                                <Input.TextArea
-                                  autoFocus
-                                  autoSize={{ minRows: 2, maxRows: 6 }}
-                                  value={inlineSegmentValue}
-                                  onChange={(e) => setInlineSegmentValue(e.target.value)}
-                                  onPressEnter={(e) => {
-                                    if (e.ctrlKey || e.metaKey) {
-                                      saveInlineSegmentEdit();
-                                    }
-                                  }}
-                                />
-                                <Space style={{ marginTop: 8 }}>
-                                  <Button size="small" type="primary" icon={<CheckOutlined />} loading={savingInlineEdit} onClick={saveInlineSegmentEdit}>
-                                    保存
-                                  </Button>
-                                  <Button size="small" icon={<CloseOutlined />} disabled={savingInlineEdit} onClick={cancelInlineSegmentEdit}>
-                                    取消
-                                  </Button>
-                                </Space>
-                              </div>
-                            ) : (
-                              <Text
-                                style={{ fontSize: 14, lineHeight: 1.7, color: '#333', cursor: isMeetingOwner ? 'text' : 'default' }}
-                                onDoubleClick={isMeetingOwner ? (e) => {
-                                  e.stopPropagation();
-                                  startInlineSegmentEdit(item);
-                                } : undefined}
-                              >
-                                {item.text_content}
-                              </Text>
-                            )}
-                          </div>
-                        ),
-                      };
-                    })}
-                  />
-                  {transcriptVisibleCount < transcript.length ? (
-                    <div style={{ textAlign: 'center', padding: '8px 0 20px' }}>
-                      <Text type="secondary">
-                        已渲染 {transcriptVisibleCount} / {transcript.length} 条转录，继续向下滚动将自动加载更多
-                      </Text>
-                    </div>
-                  ) : null}
-                </>
-              ) : (
-                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无对话数据" style={{ marginTop: 80 }} />
-              )}
             </div>
           </Card>
         </Col>

frontend/src/pages/MeetingPreview.css

@@ -591,9 +591,14 @@
    ======================================== */
 
 .transcript-wrapper {
+  display: block;
   padding: 20px 0;
 }
 
+.preview-audio-toolbar {
+  padding: 0;
+}
+
 .preview-audio-player {
   background: linear-gradient(135deg, #667eea, #764ba2);
   border-radius: 12px;
@@ -823,34 +828,4 @@
     font-size: 15px;
   }
 
-  /* 预览页面播放器移动端优化 */
-  .preview-audio-player {
-    padding: 16px;
-  }
-
-  .preview-player-controls {
-    gap: 12px;
-  }
-
-  .preview-progress-wrapper {
-    width: 100%;
-  }
-
-  .preview-current-time {
-    font-size: 11px;
-    padding: 4px 8px;
-  }
-
-  .preview-current-time::after {
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 4px solid white;
-    bottom: -3px;
-  }
-
-  .preview-slider-thumb::after {
-    width: 14px;
-    height: 14px;
-    border-width: 2px;
-  }
 }

frontend/src/pages/MeetingPreview.jsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { Layout, Space, Button, App, Empty, Input, Tabs } from 'antd';
-import { LockOutlined, EyeOutlined, CopyOutlined, ShareAltOutlined, HomeOutlined, UserOutlined, FileTextOutlined, PartitionOutlined, AudioOutlined } from '@ant-design/icons';
+import { LockOutlined, EyeOutlined, CopyOutlined, ShareAltOutlined, HomeOutlined, FileTextOutlined, PartitionOutlined, AudioOutlined } from '@ant-design/icons';
 import apiClient from '../utils/apiClient';
 import { buildApiUrl, API_ENDPOINTS } from '../config/api';
 import MarkdownRenderer from '../components/MarkdownRenderer';
 import MindMap from '../components/MindMap';
+import AudioPlayerBar from '../components/AudioPlayerBar';
+import TranscriptTimeline from '../components/TranscriptTimeline';
 import tools from '../utils/tools';
 import configService, { DEFAULT_BRANDING_CONFIG } from '../utils/configService';
 import './MeetingPreview.css';
@@ -16,6 +18,7 @@ const MeetingPreview = () => {
   const { meeting_id } = useParams();
   const { message } = App.useApp();
   const audioRef = useRef(null);
+  const transcriptRefs = useRef([]);
   const [meeting, setMeeting] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -27,6 +30,7 @@ const MeetingPreview = () => {
   const [transcript, setTranscript] = useState([]);
   const [audioUrl, setAudioUrl] = useState('');
   const [activeSegmentIndex, setActiveSegmentIndex] = useState(-1);
+  const [playbackRate, setPlaybackRate] = useState(1);
 
   useEffect(() => {
     configService.getBrandingConfig().then(setBranding).catch(() => {});
@@ -35,8 +39,10 @@ const MeetingPreview = () => {
   useEffect(() => {
     setMeeting(null);
     setTranscript([]);
+    transcriptRefs.current = [];
     setAudioUrl('');
     setActiveSegmentIndex(-1);
+    setPlaybackRate(1);
     setError(null);
     setPassword('');
     setPasswordError('');
@@ -132,6 +138,14 @@ const MeetingPreview = () => {
     audioRef.current.play().catch(() => {});
   };
 
+  useEffect(() => {
+    if (activeSegmentIndex < 0) {
+      return;
+    }
+
+    transcriptRefs.current[activeSegmentIndex]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }, [activeSegmentIndex]);
+
   const handleVerify = () => {
     if (!password) {
       message.warning('请输入访问密码');
@@ -274,39 +288,28 @@ const MeetingPreview = () => {
                   children: (
                     <div className="transcript-wrapper">
                       {audioUrl ? (
-                        <div className="preview-audio-player">
+                        <AudioPlayerBar
-                          <audio
+                          audioRef={audioRef}
-                            ref={audioRef}
+                          src={audioUrl}
-                            src={audioUrl}
+                          playbackRate={playbackRate}
-                            controls
+                          onPlaybackRateChange={setPlaybackRate}
-                            controlsList="nodownload noplaybackrate"
+                          onTimeUpdate={handleTimeUpdate}
-                            onTimeUpdate={handleTimeUpdate}
+                          showMoreButton={false}
-                            style={{ width: '100%' }}
+                        />
-                          />
-                        </div>
                       ) : null}
-                      {transcript.length ? (
+                      <TranscriptTimeline
-                        <div className="transcript-list">
+                        transcript={transcript}
-                          {transcript.map((segment, index) => (
+                        visibleCount={transcript.length}
-                            <div
+                        currentHighlightIndex={activeSegmentIndex}
-                              key={segment.segment_id}
+                        onJumpToTime={(timeMs) => jumpToSegment({ start_time_ms: timeMs })}
-                              className={`transcript-segment${activeSegmentIndex === index ? ' active' : ''}`}
+                        transcriptRefs={transcriptRefs}
-                              onClick={() => jumpToSegment(segment)}
+                        maxHeight="520px"
-                            >
+                        getSpeakerColor={(speakerId) => {
-                              <div className="segment-header">
+                          const palette = ['#1677ff', '#52c41a', '#fa8c16', '#eb2f96', '#722ed1', '#13c2c2', '#2f54eb', '#faad14'];
-                                <span className="speaker-name">
+                          return palette[(speakerId ?? 0) % palette.length];
-                                  <UserOutlined style={{ marginRight: 6 }} />
+                        }}
-                                  {segment.speaker_tag || `发言人 ${segment.speaker_id}`}
+                        emptyDescription="暂无转录内容"
-                                </span>
+                      />
-                                <span className="segment-time">{tools.formatDuration((segment.start_time_ms || 0) / 1000)}</span>
-                              </div>
-                              <div className="segment-text">{segment.text_content}</div>
-                            </div>
-                          ))}
-                        </div>
-                      ) : (
-                        <div className="empty-transcript">暂无转录内容</div>
-                      )}
                     </div>
                   ),
                 }

frontend/src/styles/console-theme.css

@@ -439,110 +439,6 @@ body {
   width: calc(100% - 96px) !important;
 }
 
-.meeting-audio-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0;
-}
-
-.meeting-audio-toolbar-player {
-  flex: 1;
-  min-width: 0;
-}
-
-.meeting-audio-toolbar-native {
-  width: 100%;
-  height: 40px;
-  border-radius: 999px;
-  background: #f5f7fb;
-}
-
-.meeting-audio-toolbar-native::-webkit-media-controls-panel {
-  background: #f5f7fb;
-}
-
-.meeting-audio-toolbar-empty {
-  height: 40px;
-  display: flex;
-  align-items: center;
-  padding: 0 14px;
-  border-radius: 999px;
-  background: #f5f7fb;
-}
-
-.meeting-audio-toolbar-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0;
-}
-
-.meeting-audio-toolbar-button.ant-btn {
-  height: 32px;
-  padding: 0 10px;
-  border: 1px solid #dbe3ef;
-  border-radius: 999px;
-  background: #fff;
-  color: #526581;
-  font-size: 12px;
-  font-weight: 600;
-  box-shadow: none;
-}
-
-.meeting-audio-toolbar-button.ant-btn:hover,
-.meeting-audio-toolbar-button.ant-btn:focus {
-  color: #355171;
-  border-color: #c7d4e4;
-  background: #f8fafc !important;
-  box-shadow: none;
-}
-
-.meeting-audio-toolbar-button.ant-btn:disabled {
-  color: #a1b1c4;
-  border-color: #e3e8f0;
-  background: #f8fafc !important;
-  box-shadow: none;
-}
-
-.meeting-audio-toolbar-rate.ant-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  min-width: 68px;
-  justify-content: center;
-  font-weight: 700;
-}
-
-.meeting-audio-toolbar-button .anticon {
-  font-size: 11px;
-}
-
-.meeting-audio-toolbar-rate .anticon {
-  font-size: 9px;
-}
-
-.meeting-audio-toolbar-more.ant-btn {
-  width: 32px;
-  min-width: 32px;
-  padding-inline: 0;
-  padding: 0;
-  border-color: #c9ddfb;
-  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
-  color: #1d4ed8;
-}
-
-.meeting-audio-toolbar-more.ant-btn:hover,
-.meeting-audio-toolbar-more.ant-btn:focus {
-  border-color: #a9c9fa;
-  background: linear-gradient(180deg, #f2f8ff 0%, #e7f0ff 100%) !important;
-  color: #1d4ed8;
-}
-
-.meeting-audio-toolbar-more.ant-btn .anticon {
-  font-size: 12px;
-}
-
 .console-tab-toolbar {
   display: flex;
   justify-content: space-between;