From 5a5f71d465736a8352d7e64cd2d349a8c8c8c735 Mon Sep 17 00:00:00 2001
From: alanpaine <alanpaine@163.com>
Date: Thu, 16 Apr 2026 13:05:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BC=9A=E8=AE=AE=E9=A2=84=E8=A7=88):=20?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E5=88=86=E4=BA=AB=E5=BC=B9=E7=AA=97=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=B9=B6=E6=B7=BB=E5=8A=A0=E9=9F=B3=E9=A2=91=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为会议分享弹窗添加渐变背景和卡片样式
- 在会议预览页面添加自定义音频播放器，支持播放/暂停、进度控制和倍速切换
- 优化转录文本的显示布局，将发言人头像和时间信息整合到内容区域
- 更新免责声明文本，明确AI生成内容的性质
- 调整会议详情页的关键词选择交互，使用勾选图标替代复选框
- 统一多个页面的配色方案，使用主色调变量
---
 frontend/src/index.css                        | 126 ++++-
 frontend/src/pages/business/MeetingDetail.tsx | 245 ++++----
 .../src/pages/business/MeetingPreview.css     | 527 +++++++++++-------
 .../src/pages/business/MeetingPreview.tsx     | 154 ++++-
 4 files changed, 717 insertions(+), 335 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 60f50a1..7e2722f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -873,7 +873,131 @@ body::after {
   margin-inline-start: 12px;
 }
 
-/* 智能会议专属全局加载动画 */
+.meeting-share-popover .ant-popover-inner {
+  padding: 0;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.meeting-share-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 320px;
+  padding: 20px;
+  border-radius: 16px;
+  box-shadow: none;
+  border: none;
+  background: var(--app-bg-main);
+  overflow: hidden;
+  z-index: 1;
+}
+.meeting-share-card::before {
+  content: "";
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(22, 119, 255, 0.15) 0%, transparent 70%);
+  z-index: -1;
+  pointer-events: none;
+}
+.meeting-share-card::after {
+  content: "";
+  position: absolute;
+  bottom: -40px;
+  left: -40px;
+  width: 100px;
+  height: 100px;
+  border-radius: 30%;
+  background: radial-gradient(circle, rgba(54, 207, 201, 0.15) 0%, transparent 70%);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.meeting-share-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-bottom: 16px;
+  border-bottom: 1px dashed var(--app-border-color);
+}
+
+.meeting-share-settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.meeting-share-settings-copy {
+  display: flex;
+  flex-direction: column;
+  font-size: 13px;
+}
+
+.meeting-share-settings-copy strong {
+  color: var(--app-text-main);
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.meeting-share-settings-copy span {
+  color: var(--app-text-secondary);
+  font-size: 12px;
+}
+
+.meeting-share-settings-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.meeting-share-qr-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #ffffff;
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px solid var(--app-border-color);
+}
+
+.meeting-share-caption {
+  font-size: 12px;
+  color: var(--app-text-secondary);
+  text-align: center;
+  line-height: 1.5;
+}
+
+.meeting-share-link-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  background: var(--app-bg-surface);
+  border-radius: 8px;
+  border: 1px solid var(--app-border-color);
+  font-size: 12px;
+  color: var(--app-text-main);
+}
+
+.meeting-share-link-box span {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meeting-share-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.meeting-share-actions .ant-btn {
+  flex: 1;
+}
 .ai-meeting-loader {
   position: fixed;
   inset: 0;
diff --git a/frontend/src/pages/business/MeetingDetail.tsx b/frontend/src/pages/business/MeetingDetail.tsx
index 18d67f7..500b4f3 100644
--- a/frontend/src/pages/business/MeetingDetail.tsx
+++ b/frontend/src/pages/business/MeetingDetail.tsx
@@ -17,6 +17,8 @@ import {
   RobotOutlined,
   SyncOutlined,
   UserOutlined,
+  PlusOutlined,
+  CheckCircleFilled,
 } from '@ant-design/icons';
 import dayjs from 'dayjs';
 import ReactMarkdown from 'react-markdown';
@@ -473,60 +475,62 @@ const ActiveTranscriptRow = React.memo<ActiveTranscriptRowProps>(({
   return (
     <List.Item className="transcript-row" onClick={() => onSeek(item.startTime)}>
       <div className="transcript-entry">
-        <div className="transcript-meta">
-          <Avatar icon={<UserOutlined />} className="transcript-avatar" />
-          {isOwner ? (
-            <Popover
-              content={(
-                <SpeakerEditor
-                  meetingId={meetingId}
-                  speakerId={item.speakerId}
-                  initialName={item.speakerName}
-                  initialLabel={item.speakerLabel}
-                  onSuccess={onSpeakerUpdated}
-                />
-              )}
-              title="编辑发言人"
-              trigger="click"
+        <Avatar icon={<UserOutlined />} className="transcript-avatar" />
+        <div className="transcript-content-wrap">
+          <div className="transcript-meta">
+            {isOwner ? (
+              <Popover
+                content={(
+                  <SpeakerEditor
+                    meetingId={meetingId}
+                    speakerId={item.speakerId}
+                    initialName={item.speakerName}
+                    initialLabel={item.speakerLabel}
+                    onSuccess={onSpeakerUpdated}
+                  />
+                )}
+                title="编辑发言人"
+                trigger="click"
+              >
+                <span className="transcript-speaker editable" onClick={(event) => event.stopPropagation()}>
+                  {item.speakerName || item.speakerId || '发言人'} <EditOutlined style={{ fontSize: 12 }} />
+                </span>
+              </Popover>
+            ) : (
+              <span className="transcript-speaker">{item.speakerName || item.speakerId || '发言人'}</span>
+            )}
+            <Text type="secondary">{formatTime(item.startTime)}</Text>
+            {speakerTagLabel && <Tag color="blue">{speakerTagLabel}</Tag>}
+          </div>
+          {isEditing ? (
+            <div
+              className={`transcript-bubble transcript-bubble-editing ${isSaving ? 'is-saving' : ''}`}
+              onClick={(event) => event.stopPropagation()}
             >
-              <span className="transcript-speaker editable" onClick={(event) => event.stopPropagation()}>
-                {item.speakerName || item.speakerId || '发言人'} <EditOutlined style={{ fontSize: 12 }} />
-              </span>
-            </Popover>
+              <Input.TextArea
+                autoFocus
+                value={draftValue}
+                style={{ width: '100%' }}
+                onChange={(event) => setDraftValue(event.target.value)}
+                onKeyDown={(event) => onDraftKeyDown(item, draftValue, event)}
+                onBlur={(event) => {
+                  event.stopPropagation();
+                  onDraftBlur(item, draftValue);
+                }}
+                autoSize={{ minRows: 1, maxRows: 8 }}
+                className="transcript-bubble-input"
+                bordered={false}
+              />
+            </div>
           ) : (
-            <span className="transcript-speaker">{item.speakerName || item.speakerId || '发言人'}</span>
+            <div
+              className={`transcript-bubble ${isOwner ? 'editable' : ''}`}
+              onDoubleClick={isOwner ? (event) => onStartEdit(item, event) : undefined}
+            >
+              {item.content}
+            </div>
           )}
-          <Text type="secondary">{formatTime(item.startTime)}</Text>
-          {speakerTagLabel && <Tag color="blue">{speakerTagLabel}</Tag>}
         </div>
-        {isEditing ? (
-          <div
-            className={`transcript-bubble transcript-bubble-editing ${isSaving ? 'is-saving' : ''}`}
-            onClick={(event) => event.stopPropagation()}
-          >
-            <Input.TextArea
-              autoFocus
-              value={draftValue}
-              style={{ width: '100%' }}
-              onChange={(event) => setDraftValue(event.target.value)}
-              onKeyDown={(event) => onDraftKeyDown(item, draftValue, event)}
-              onBlur={(event) => {
-                event.stopPropagation();
-                onDraftBlur(item, draftValue);
-              }}
-              autoSize={{ minRows: 1, maxRows: 8 }}
-              className="transcript-bubble-input"
-              bordered={false}
-            />
-          </div>
-        ) : (
-          <div
-            className={`transcript-bubble ${isOwner ? 'editable' : ''}`}
-            onDoubleClick={isOwner ? (event) => onStartEdit(item, event) : undefined}
-          >
-            {item.content}
-          </div>
-        )}
       </div>
     </List.Item>
   );
@@ -1118,8 +1122,8 @@ const MeetingDetail: React.FC = () => {
           value={sharePreviewUrl}
           type="svg"
           size={172}
-          color="#315f8b"
-          bgColor="#fffaf4"
+          color="#1677ff"
+          bgColor="transparent"
           errorLevel="H"
           bordered={false}
         />
@@ -1254,18 +1258,6 @@ const MeetingDetail: React.FC = () => {
                     <div className="summary-title">
                       <RobotOutlined />
                       <span>智能速览</span>
-                      {isOwner && analysis.keywords.length > 0 && (
-                        <Button
-                          size="small"
-                          type="primary"
-                          ghost
-                          disabled={!selectedKeywords.length}
-                          loading={addingHotwords}
-                          onClick={handleAddSelectedHotwords}
-                        >
-                          一键加入热词
-                        </Button>
-                      )}
                     </div>
                     <div className="summary-actions">
                         <span className={`status-pill ${hasAnalysis ? 'success' : 'warning'}`}>{hasAnalysis ? '已生成' : '待生成'}</span>
@@ -1275,18 +1267,36 @@ const MeetingDetail: React.FC = () => {
                   <div className="summary-block">
                     <div className="summary-section-head">
                       <span>关键词</span>
+                      {isOwner && analysis.keywords.length > 0 && (
+                        <Button
+                          size="small"
+                          type="primary"
+                          shape="round"
+                          icon={<PlusOutlined />}
+                          disabled={!selectedKeywords.length}
+                          loading={addingHotwords}
+                          onClick={handleAddSelectedHotwords}
+                        >
+                          加入热词 {selectedKeywords.length > 0 ? `(${selectedKeywords.length})` : ''}
+                        </Button>
+                      )}
                     </div>
                     {analysis.keywords.length ? (
                       <>
                         <div className="record-tags">
-                          {visibleKeywords.map((tag) => (
-                            <label key={tag} className={`tag selectable-tag ${selectedKeywords.includes(tag) ? 'selected' : ''}`}>
-                              {isOwner && (
-                                <Checkbox checked={selectedKeywords.includes(tag)} onChange={(event) => handleKeywordToggle(tag, event.target.checked)} />
-                              )}
-                              <span>{tag}</span>
-                            </label>
-                          ))}
+                          {visibleKeywords.map((tag) => {
+                            const isSelected = selectedKeywords.includes(tag);
+                            return (
+                              <div
+                                key={tag}
+                                className={`tag selectable-tag ${isSelected ? 'selected' : ''}`}
+                                onClick={() => isOwner && handleKeywordToggle(tag, !isSelected)}
+                              >
+                                <span>{tag}</span>
+                                {isOwner && isSelected && <CheckCircleFilled style={{ fontSize: 12 }} />}
+                              </div>
+                            );
+                          })}
                         </div>
                         {analysis.keywords.length > 9 && (
                           <button type="button" className="summary-link" onClick={() => setExpandKeywords((value) => !value)}>
@@ -1765,23 +1775,33 @@ const MeetingDetail: React.FC = () => {
           display: inline-flex;
           align-items: center;
           gap: 6px;
-          padding: 6px 12px;
-          border-radius: 10px;
-          background: rgba(107, 115, 255, 0.08);
-          color: #6a72ff;
+          padding: 6px 14px;
+          border-radius: 999px;
+          background: rgba(22, 119, 255, 0.06);
+          color: var(--app-primary-color);
+          border: 1px solid rgba(22, 119, 255, 0.15);
           font-size: 13px;
-          font-weight: 600;
+          font-weight: 500;
         }
         .selectable-tag {
-          border: 1px solid transparent;
           cursor: pointer;
+          transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        }
+        .selectable-tag:hover {
+          background: rgba(22, 119, 255, 0.12);
+          border-color: rgba(22, 119, 255, 0.3);
+          transform: translateY(-1px);
         }
         .selectable-tag.selected {
-          border-color: rgba(106, 114, 255, 0.28);
-          background: rgba(107, 115, 255, 0.14);
+          background: linear-gradient(135deg, var(--app-primary-color), #36cfc9);
+          color: #ffffff;
+          border-color: transparent;
+          font-weight: 600;
+          box-shadow: 0 4px 12px rgba(22, 119, 255, 0.24);
         }
-        .selectable-tag .ant-checkbox {
-          margin-inline-end: 2px;
+        .selectable-tag.selected:hover {
+          box-shadow: 0 6px 16px rgba(22, 119, 255, 0.35);
+          transform: translateY(-2px);
         }
         .summary-copy {
           color: #465072;
@@ -1859,8 +1879,7 @@ const MeetingDetail: React.FC = () => {
           padding-top: 12px;
         }
         .chapter-item {
-          display: grid;
-          grid-template-columns: 64px minmax(0, 1fr);
+          display: flex;
           gap: 14px;
           align-items: flex-start;
         }
@@ -1870,6 +1889,8 @@ const MeetingDetail: React.FC = () => {
           color: #58627f;
           font-size: 14px;
           font-weight: 700;
+          flex-shrink: 0;
+          width: 64px;
         }
         .chapter-time::after {
           content: "";
@@ -1942,14 +1963,14 @@ const MeetingDetail: React.FC = () => {
           font-size: 12px;
         }
         .keypoint-card {
-          display: grid;
-          grid-template-columns: 48px minmax(0, 1fr);
+          display: flex;
           gap: 14px;
           align-items: start;
         }
         .keypoint-badge {
           width: 36px;
           height: 36px;
+          flex-shrink: 0;
           border-radius: 12px;
           background: rgba(107, 115, 255, 0.12);
           color: #5c64ff;
@@ -2012,12 +2033,18 @@ const MeetingDetail: React.FC = () => {
           justify-self: start;
           text-align: left;
           display: flex;
-          flex-direction: column;
-          align-items: stretch;
-          gap: 10px;
+          align-items: flex-start;
+          gap: 16px;
           width: 100%;
           min-width: 0;
         }
+        .transcript-content-wrap {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          min-width: 0;
+        }
         .transcript-meta {
           display: flex;
           align-items: center;
@@ -2026,14 +2053,17 @@ const MeetingDetail: React.FC = () => {
           color: #8e98b8;
         }
         .transcript-avatar {
-          background: linear-gradient(135deg, #7a84ff, #9363ff) !important;
+          flex-shrink: 0;
+          background: linear-gradient(135deg, #1677ff, #36cfc9) !important;
+          margin-top: 4px;
         }
         .transcript-speaker {
-          color: #5e698d;
+          color: var(--app-text-main);
           font-weight: 700;
+          font-size: 14px;
         }
         .transcript-speaker.editable {
-          color: #6470ff;
+          color: var(--app-primary-color);
           cursor: pointer;
         }
         .transcript-bubble {
@@ -2043,13 +2073,18 @@ const MeetingDetail: React.FC = () => {
           max-width: 100%;
           box-sizing: border-box;
           padding: 14px 18px;
-          border-radius: 16px;
-          background: #ffffff;
-          border: 1px solid rgba(234, 238, 248, 1);
-          box-shadow: 0 12px 28px rgba(137, 149, 193, 0.08);
-          color: #3f496a;
-          line-height: 1.86;
+          border-radius: 4px 16px 16px 16px;
+          background: var(--app-bg-surface);
+          border: 1px solid var(--app-border-color);
+          color: var(--app-text-main);
+          line-height: 1.6;
+          font-size: 15px;
           white-space: pre-wrap;
+          transition: all 0.3s ease;
+        }
+        .transcript-bubble:hover {
+          border-color: var(--app-primary-color);
+          box-shadow: 0 4px 12px rgba(22, 119, 255, 0.05);
         }
         .transcript-bubble.editable {
           cursor: text;
@@ -2113,9 +2148,9 @@ const MeetingDetail: React.FC = () => {
           margin-top: 18px;
           padding: 14px 16px;
           border-radius: 18px;
-          background: linear-gradient(180deg, rgba(249, 250, 255, 0.98), rgba(239, 242, 255, 0.98));
-          border: 1px solid rgba(224, 229, 247, 0.98);
-          box-shadow: 0 14px 30px rgba(145, 158, 212, 0.18);
+          background: var(--app-bg-surface);
+          border: 1px solid var(--app-border-color);
+          box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
           backdrop-filter: blur(14px);
         }
         .player-main-btn,
@@ -2130,18 +2165,18 @@ const MeetingDetail: React.FC = () => {
           width: 44px;
           height: 44px;
           border-radius: 50%;
-          background: linear-gradient(135deg, #6e75ff, #8268ff);
+          background: linear-gradient(135deg, var(--app-primary-color), #36cfc9);
           color: #fff;
           font-size: 18px;
-          box-shadow: 0 12px 24px rgba(108, 117, 255, 0.28);
+          box-shadow: 0 4px 12px rgba(22, 119, 255, 0.2);
         }
         .player-ghost-btn {
           gap: 6px;
           padding: 0 12px;
           height: 38px;
           border-radius: 12px;
-          background: rgba(107, 115, 255, 0.08);
-          color: #5e67ff;
+          background: var(--app-bg-surface-soft);
+          color: var(--app-primary-color);
           font-weight: 700;
         }
         .player-progress-shell {
diff --git a/frontend/src/pages/business/MeetingPreview.css b/frontend/src/pages/business/MeetingPreview.css
index 245e140..5bec877 100644
--- a/frontend/src/pages/business/MeetingPreview.css
+++ b/frontend/src/pages/business/MeetingPreview.css
@@ -1,17 +1,14 @@
 .meeting-preview-page {
-  --preview-bg:
-    radial-gradient(circle at top left, rgba(252, 208, 157, 0.24), transparent 32%),
-    radial-gradient(circle at top right, rgba(82, 164, 255, 0.18), transparent 28%),
-    linear-gradient(180deg, #fffaf4 0%, #f8f1e7 52%, #efe6da 100%);
-  --preview-ink: #33261c;
-  --preview-muted: rgba(72, 53, 39, 0.72);
-  --preview-line: rgba(84, 57, 31, 0.12);
-  --preview-card: rgba(255, 250, 244, 0.74);
-  --preview-card-strong: rgba(255, 252, 247, 0.88);
-  --preview-shadow: 0 24px 64px rgba(105, 72, 40, 0.12);
-  --preview-accent: #b86432;
-  --preview-accent-soft: rgba(184, 100, 50, 0.14);
-  --preview-cool: #315f8b;
+  --preview-bg: var(--app-bg-main);
+  --preview-ink: var(--app-text-main);
+  --preview-muted: var(--app-text-secondary);
+  --preview-line: var(--app-border-color);
+  --preview-card: var(--app-bg-card);
+  --preview-card-strong: var(--app-bg-surface-soft);
+  --preview-shadow: var(--app-shadow-lg);
+  --preview-accent: var(--app-primary-color);
+  --preview-accent-soft: rgba(22, 119, 255, 0.1);
+  --preview-cool: #1677ff;
   position: relative;
   min-height: 100vh;
   padding: 24px 16px 40px;
@@ -36,7 +33,7 @@
   border-radius: 50%;
   background:
     radial-gradient(circle, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0) 72%),
-    radial-gradient(circle at 36% 36%, rgba(184, 100, 50, 0.18), rgba(184, 100, 50, 0) 56%);
+    radial-gradient(circle at 36% 36%, rgba(22, 119, 255, 0.18), rgba(22, 119, 255, 0) 56%);
   filter: blur(2px);
 }
 
@@ -46,9 +43,9 @@
   width: 160px;
   height: 160px;
   border-radius: 32px;
-  border: 1px solid rgba(49, 95, 139, 0.14);
+  border: 1px solid rgba(22, 119, 255, 0.14);
   background:
-    linear-gradient(135deg, rgba(49, 95, 139, 0.12), rgba(49, 95, 139, 0)),
+    linear-gradient(135deg, rgba(22, 119, 255, 0.12), rgba(22, 119, 255, 0)),
     rgba(255, 255, 255, 0.32);
   transform: rotate(16deg);
 }
@@ -70,19 +67,9 @@
   position: relative;
   overflow: hidden;
   border: 1px solid var(--preview-line);
-  border-radius: 28px;
+  border-radius: 24px;
   background: var(--preview-card);
   box-shadow: var(--preview-shadow);
-  backdrop-filter: blur(18px);
-}
-
-.meeting-preview-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(120deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.1) 42%, transparent 70%);
-  opacity: 0.8;
-  pointer-events: none;
 }
 
 .meeting-preview-hero,
@@ -110,8 +97,8 @@
   gap: 8px;
   padding: 8px 12px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.62);
-  border: 1px solid rgba(84, 57, 31, 0.08);
+  background: var(--app-bg-surface);
+  border: 1px solid var(--preview-line);
   color: var(--preview-muted);
   font-size: 12px;
   letter-spacing: 0.12em;
@@ -129,18 +116,18 @@
 }
 
 .meeting-preview-status.is-complete {
-  background: rgba(59, 130, 89, 0.12);
-  color: #1f6a43;
+  background: rgba(82, 196, 26, 0.12);
+  color: #52c41a;
 }
 
 .meeting-preview-status.is-processing {
-  background: rgba(49, 95, 139, 0.12);
-  color: var(--preview-cool);
+  background: rgba(22, 119, 255, 0.12);
+  color: #1677ff;
 }
 
 .meeting-preview-status.is-warning {
-  background: rgba(184, 100, 50, 0.12);
-  color: var(--preview-accent);
+  background: rgba(250, 173, 20, 0.12);
+  color: #faad14;
 }
 
 .meeting-preview-title {
@@ -186,7 +173,7 @@
   padding: 14px 14px 12px;
   border-radius: 18px;
   background: var(--preview-card-strong);
-  border: 1px solid rgba(84, 57, 31, 0.08);
+  border: 1px solid var(--preview-line);
 }
 
 .meeting-preview-metric-label {
@@ -228,13 +215,63 @@
 }
 
 .meeting-preview-password-gate {
-  display: grid;
-  gap: 18px;
+  max-width: 480px;
+  margin: 10vh auto;
+  padding: 40px 32px;
+  text-align: center;
+  border-radius: 24px;
+  background: var(--preview-card);
+  border: 1px solid var(--preview-line);
+  box-shadow: var(--preview-shadow);
+  backdrop-filter: blur(24px);
+}
+
+.meeting-preview-password-gate .meeting-preview-section-header {
+  justify-content: center;
+  margin-bottom: 12px;
+}
+
+.meeting-preview-password-gate .meeting-preview-section-kicker {
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.meeting-preview-password-gate .meeting-preview-section-title {
+  font-size: 28px;
 }
 
 .meeting-preview-password-form {
-  display: grid;
-  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 28px;
+  margin-bottom: 24px;
+}
+
+.meeting-preview-password-form .ant-input-affix-wrapper {
+  padding: 10px 16px;
+  border-radius: 12px;
+  background: var(--app-bg-surface-soft);
+  border-color: var(--preview-line);
+}
+
+.meeting-preview-password-form .ant-input-affix-wrapper-focused {
+  border-color: var(--preview-accent);
+  box-shadow: 0 0 0 2px var(--preview-accent-soft);
+  background: var(--app-bg-surface);
+}
+
+.meeting-preview-password-form .ant-input {
+  background: transparent;
+  font-size: 16px;
+  letter-spacing: 2px;
+}
+
+.meeting-preview-password-form .ant-btn {
+  height: 48px;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .meeting-preview-section-header {
@@ -284,7 +321,7 @@
   padding: 8px 12px;
   border-radius: 999px;
   background: var(--preview-card-strong);
-  border: 1px solid rgba(84, 57, 31, 0.08);
+  border: 1px solid var(--preview-line);
   color: var(--preview-ink);
   font-size: 13px;
 }
@@ -293,18 +330,19 @@
   margin-top: 16px;
   padding: 18px;
   border-radius: 22px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.4)),
-    rgba(255, 255, 255, 0.32);
-  border: 1px solid rgba(84, 57, 31, 0.08);
+  background: var(--app-bg-surface-soft);
+  border: 1px solid var(--preview-line);
 }
 
-.meeting-preview-overview-label {
-  margin-bottom: 8px;
-  color: var(--preview-muted);
-  font-size: 12px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+.meeting-preview-disclaimer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 32px;
+  padding: 16px;
+  color: var(--app-text-secondary);
+  font-size: 13px;
+  text-align: center;
 }
 
 .meeting-preview-overview-copy {
@@ -323,7 +361,7 @@
   width: 100%;
   padding: 5px;
   border-radius: 16px;
-  background: rgba(255, 255, 255, 0.5);
+  background: var(--app-bg-surface-soft);
 }
 
 .meeting-preview-analysis-tabs .ant-segmented-item {
@@ -344,30 +382,32 @@
 .meeting-preview-keypoint,
 .meeting-preview-speaker-card,
 .meeting-preview-todo {
-  border: 1px solid rgba(84, 57, 31, 0.08);
+  border: 1px solid var(--preview-line);
   background: var(--preview-card-strong);
   border-radius: 22px;
 }
 
 .meeting-preview-chapter,
 .meeting-preview-keypoint {
-  display: grid;
-  grid-template-columns: 70px minmax(0, 1fr);
-  gap: 12px;
-  padding: 14px;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 20px;
 }
 
 .meeting-preview-chapter-time,
 .meeting-preview-keypoint-index {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: center;
-  padding: 10px 8px;
-  border-radius: 16px;
+  width: 52px;
+  height: 52px;
+  flex-shrink: 0;
+  border-radius: 14px;
   background: var(--preview-accent-soft);
   color: var(--preview-accent);
   font-weight: 700;
-  font-size: 13px;
+  font-size: 16px;
 }
 
 .meeting-preview-item-title {
@@ -397,8 +437,8 @@
   align-items: center;
   padding: 6px 10px;
   border-radius: 999px;
-  background: rgba(49, 95, 139, 0.1);
-  color: var(--preview-cool);
+  background: var(--preview-accent-soft);
+  color: var(--preview-accent);
   font-size: 12px;
 }
 
@@ -414,222 +454,307 @@
 }
 
 .meeting-preview-speaker-avatar {
-  display: grid;
-  place-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 42px;
   height: 42px;
-  border-radius: 50%;
-  background: rgba(49, 95, 139, 0.14);
-  color: var(--preview-cool);
+  border-radius: 12px;
+  background: var(--preview-accent-soft);
+  color: var(--preview-accent);
   font-weight: 700;
+  font-size: 16px;
 }
 
 .meeting-preview-speaker-name {
-  font-size: 15px;
   font-weight: 700;
+  font-size: 15px;
+  margin-bottom: 4px;
 }
 
 .meeting-preview-speaker-role {
-  margin-top: 2px;
   color: var(--preview-muted);
   font-size: 12px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
 }
 
 .meeting-preview-todo {
   display: flex;
-  gap: 12px;
   align-items: flex-start;
-  padding: 14px 16px;
+  gap: 12px;
+  padding: 16px;
 }
 
 .meeting-preview-todo-dot {
-  flex: none;
+  flex-shrink: 0;
   width: 10px;
   height: 10px;
-  margin-top: 8px;
+  margin-top: 6px;
   border-radius: 50%;
-  background: var(--preview-accent);
-  box-shadow: 0 0 0 6px rgba(184, 100, 50, 0.12);
+  border: 2px solid var(--preview-accent);
+  box-shadow: 0 0 0 6px var(--preview-accent-soft);
 }
 
 .meeting-preview-markdown {
-  padding: 4px 0 0;
-}
-
-.meeting-preview-markdown .ant-empty {
-  padding: 24px 0 8px;
+  font-size: 15px;
+  line-height: 1.8;
+  color: var(--preview-ink);
 }
 
 .meeting-preview-markdown h1,
 .meeting-preview-markdown h2,
-.meeting-preview-markdown h3,
-.meeting-preview-markdown h4 {
-  margin-top: 1.4em;
-  margin-bottom: 0.7em;
-  font-family: Georgia, "Times New Roman", "Songti SC", serif;
-  line-height: 1.2;
-  letter-spacing: -0.03em;
+.meeting-preview-markdown h3 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: 700;
+  color: var(--preview-ink);
 }
 
-.meeting-preview-markdown p,
-.meeting-preview-markdown li {
-  color: var(--preview-ink);
-  font-size: 15px;
-  line-height: 1.92;
+.meeting-preview-markdown p {
+  margin-bottom: 1em;
+}
+
+.meeting-preview-markdown ul,
+.meeting-preview-markdown ol {
+  margin-bottom: 1em;
+  padding-left: 20px;
 }
 
 .meeting-preview-markdown blockquote {
-  margin: 18px 0;
-  padding: 12px 16px;
-  border-left: 3px solid rgba(184, 100, 50, 0.4);
-  border-radius: 0 16px 16px 0;
-  background: rgba(184, 100, 50, 0.06);
-}
-
-.meeting-preview-markdown pre {
-  overflow: auto;
-  padding: 14px;
-  border-radius: 18px;
-  background: rgba(51, 38, 28, 0.92);
-}
-
-.meeting-preview-markdown code {
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-}
-
-.meeting-preview-transcript-audio {
-  width: 100%;
-  margin-bottom: 16px;
+  margin: 0 0 1em;
+  padding: 10px 16px;
+  border-left: 3px solid var(--preview-accent);
+  border-radius: 0 8px 8px 0;
+  background: var(--preview-accent-soft);
 }
 
 .meeting-preview-transcript-list {
-  display: grid;
-  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .meeting-preview-transcript-item {
-  width: 100%;
-  padding: 14px;
-  border: 1px solid rgba(84, 57, 31, 0.08);
-  border-radius: 22px;
-  background: var(--preview-card-strong);
-  text-align: left;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: 16px;
+  border: 1px solid transparent;
+  transition: all 0.3s ease;
   cursor: pointer;
-  transition:
-    transform 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease,
-    background 0.2s ease;
 }
 
 .meeting-preview-transcript-item:hover {
-  transform: translateY(-2px);
-  border-color: rgba(184, 100, 50, 0.22);
-  box-shadow: 0 12px 26px rgba(105, 72, 40, 0.08);
+  background: var(--app-bg-surface-soft);
+  border-color: var(--preview-line);
 }
 
 .meeting-preview-transcript-item.is-active {
-  transform: translateY(-2px);
-  border-color: rgba(184, 100, 50, 0.28);
-  box-shadow: 0 12px 26px rgba(105, 72, 40, 0.08);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 244, 235, 0.92));
-}
-
-.meeting-preview-transcript-item.is-active .meeting-preview-transcript-copy {
-  color: #5a3113;
-  font-weight: 600;
-}
-
-.meeting-preview-transcript-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
-}
-
-.meeting-preview-transcript-speaker {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
+  background: var(--app-bg-surface);
+  border-color: var(--preview-accent);
+  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.08);
 }
 
 .meeting-preview-transcript-avatar {
-  display: grid;
-  place-items: center;
-  width: 34px;
-  height: 34px;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  font-size: 13px;
-  font-weight: 700;
+  background: linear-gradient(135deg, #1677ff, #36cfc9);
   color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 16px;
 }
 
-.meeting-preview-transcript-name {
+.meeting-preview-transcript-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
   min-width: 0;
-  font-size: 14px;
+}
+
+.meeting-preview-transcript-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.meeting-preview-transcript-speaker {
   font-weight: 700;
+  font-size: 14px;
+  color: var(--app-text-main);
 }
 
 .meeting-preview-transcript-time {
-  flex: none;
-  color: var(--preview-muted);
   font-size: 12px;
+  color: var(--app-text-secondary);
 }
 
-.meeting-preview-transcript-copy {
-  color: var(--preview-ink);
-  font-size: 14px;
-  line-height: 1.82;
+.meeting-preview-transcript-text {
+  padding: 14px 18px;
+  border-radius: 4px 16px 16px 16px;
+  background: var(--app-bg-surface);
+  border: 1px solid var(--app-border-color);
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--app-text-main);
   white-space: pre-wrap;
 }
 
-.meeting-preview-disclaimer {
-  margin-top: 18px;
-  padding: 0 8px;
-  color: rgba(72, 53, 39, 0.64);
+.meeting-preview-transcript-item.is-active .meeting-preview-transcript-text {
+  border-color: var(--preview-accent-soft);
+  background: #f0f5ff;
+}
+
+.meeting-preview-transcript-text mark {
+  background: var(--preview-accent-soft);
+  color: var(--preview-accent);
+  border-radius: 4px;
+  padding: 0 4px;
+}
+
+.meeting-preview-page .transcript-player {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(calc(100% - 32px), 860px);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: var(--app-bg-surface);
+  border: 1px solid var(--app-border-color);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(24px);
+}
+.player-main-btn,
+.player-ghost-btn {
+  border: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.player-main-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--app-primary-color), #36cfc9);
+  color: #fff;
+  font-size: 18px;
+  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.2);
+}
+.player-ghost-btn {
+  gap: 6px;
+  padding: 0 12px;
+  height: 38px;
+  border-radius: 12px;
+  background: var(--app-bg-surface-soft);
+  color: var(--app-primary-color);
+  font-weight: 700;
+}
+.player-progress-shell {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.player-time-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--app-text-secondary);
   font-size: 12px;
-  line-height: 1.8;
-  text-align: center;
+  font-weight: 700;
+}
+.player-range {
+  width: 100%;
+  appearance: none;
+  height: 6px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--app-primary-color), var(--app-primary-color)) 0/0% 100% no-repeat,
+    var(--app-bg-surface-soft);
+  outline: none;
+}
+.player-range::-webkit-slider-thumb {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  border: 3px solid var(--app-primary-color);
+  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.24);
+  cursor: pointer;
+}
+.player-range::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  border: 3px solid var(--app-primary-color);
+  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.24);
+  cursor: pointer;
 }
 
 @keyframes preview-rise {
-  from {
-    opacity: 0;
-    transform: translateY(18px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  0% { transform: translateY(30px); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
 }
 
-@media (min-width: 768px) {
+@media (max-width: 768px) {
   .meeting-preview-page {
-    padding: 36px 28px 56px;
+    padding: 16px 12px 32px;
   }
 
-  .meeting-preview-hero,
-  .meeting-preview-section {
-    padding-left: 24px;
-    padding-right: 24px;
+  .meeting-preview-hero {
+    padding: 20px 16px;
+  }
+
+  .meeting-preview-title {
+    font-size: 28px;
   }
 
   .meeting-preview-metrics {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .meeting-preview-panels {
-    gap: 22px;
-  }
-}
-
-@media (max-width: 767px) {
-  .meeting-preview-hero-actions {
-    display: grid;
     grid-template-columns: 1fr;
   }
+
+  .meeting-preview-chapter,
+  .meeting-preview-keypoint {
+    flex-direction: column;
+    padding: 16px;
+    gap: 12px;
+  }
+
+  .meeting-preview-chapter-time,
+  .meeting-preview-keypoint-index {
+    width: auto;
+    height: 36px;
+    padding: 0 12px;
+    font-size: 14px;
+    border-radius: 8px;
+  }
+
+  .meeting-preview-transcript-item {
+    gap: 8px;
+  }
+  
+  .meeting-preview-audio-player {
+    flex-direction: column;
+    align-items: stretch;
+    border-radius: 16px;
+    padding: 16px;
+  }
+  
+  .meeting-preview-download-btn {
+    width: 100%;
+    border-radius: 8px;
+  }
 }
diff --git a/frontend/src/pages/business/MeetingPreview.tsx b/frontend/src/pages/business/MeetingPreview.tsx
index 313725f..5f1cac0 100644
--- a/frontend/src/pages/business/MeetingPreview.tsx
+++ b/frontend/src/pages/business/MeetingPreview.tsx
@@ -4,10 +4,13 @@ import { useParams, useSearchParams } from "react-router-dom";
 import {
   AudioOutlined,
   CalendarOutlined,
+  CaretRightFilled,
   ClockCircleOutlined,
   CopyOutlined,
+  FastForwardOutlined,
   FileTextOutlined,
   LockOutlined,
+  PauseOutlined,
   RobotOutlined,
   ShareAltOutlined,
   TeamOutlined,
@@ -98,7 +101,7 @@ const TEXT = {
   audioUnavailable: "\u97f3\u9891\u6587\u4ef6\u4e0d\u53ef\u7528\uff0c\u4ec5\u5c55\u793a\u8f6c\u5f55\u5185\u5bb9\u3002",
   noTranscript: "\u6682\u65e0\u8f6c\u5f55\u5185\u5bb9",
   unknownSpeaker: "\u672a\u77e5\u53d1\u8a00\u4eba",
-  disclaimer: "\u8be5\u9875\u9762\u4e3a\u4f1a\u8bae\u5206\u4eab\u9884\u89c8\u9875\uff0c\u672a\u5f00\u653e\u7f16\u8f91\u3001\u5bfc\u51fa\u548c\u5176\u4ed6\u53d7\u4fdd\u62a4\u64cd\u4f5c\u3002",
+  disclaimer: "智能内容由用户会议内容 + AI 模型生成，我们不对内容准确性和完整性做任何保证，亦不代表我们的观点或态度",
   shareText: "\u6211\u5411\u4f60\u5206\u4eab\u4e86\u4e00\u4e2a\u4f1a\u8bae\u9884\u89c8\u94fe\u63a5",
   audioSaved: "\u5df2\u4fdd\u5b58",
   audioSaveFailed: "\u4fdd\u5b58\u5931\u8d25",
@@ -170,6 +173,10 @@ export default function MeetingPreview() {
   const [passwordVerified, setPasswordVerified] = useState(false);
   const [accessPassword, setAccessPassword] = useState("");
   const [passwordError, setPasswordError] = useState("");
+  const [audioPlaying, setAudioPlaying] = useState(false);
+  const [audioCurrentTime, setAudioCurrentTime] = useState(0);
+  const [audioDuration, setAudioDuration] = useState(0);
+  const [audioPlaybackRate, setAudioPlaybackRate] = useState(1);
   const [isMobile, setIsMobile] = useState(() =>
     typeof window !== "undefined" ? window.matchMedia("(max-width: 767px)").matches : false,
   );
@@ -309,6 +316,14 @@ export default function MeetingPreview() {
   const participantCountValue =
     isMobile && transcriptSpeakers.length > 0 ? transcriptSpeakers.length : participants.length;
 
+  const meetingDuration = useMemo(() => {
+    if (transcripts.length > 0) {
+      const last = transcripts[transcripts.length - 1];
+      return last.endTime || 0;
+    }
+    return 0;
+  }, [transcripts]);
+
   useEffect(() => {
     if (!activeTranscriptId) {
       return;
@@ -331,12 +346,49 @@ export default function MeetingPreview() {
     audioRef.current.play().catch(() => {});
   };
 
+  const toggleAudioPlayback = () => {
+    if (!audioRef.current) return;
+    if (audioPlaying) {
+      audioRef.current.pause();
+    } else {
+      audioRef.current.play().catch(() => {});
+    }
+  };
+
+  const handleAudioProgressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!audioRef.current) return;
+    const time = parseFloat(e.target.value);
+    audioRef.current.currentTime = time;
+    setAudioCurrentTime(time);
+  };
+
+  const cyclePlaybackRate = () => {
+    if (!audioRef.current) return;
+    const nextRate = audioPlaybackRate === 1 ? 1.5 : audioPlaybackRate === 1.5 ? 2 : 1;
+    audioRef.current.playbackRate = nextRate;
+    setAudioPlaybackRate(nextRate);
+  };
+
+  const formatPlayerTime = (seconds: number) => {
+    if (!seconds || isNaN(seconds)) return '00:00';
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+  };
+
   const handleAudioTimeUpdate = () => {
-    if (!audioRef.current || transcripts.length === 0) {
-      return;
+    if (!audioRef.current) return;
+    const currentSeconds = audioRef.current.currentTime;
+    setAudioCurrentTime(currentSeconds);
+    
+    // Also update duration if it's available now
+    if (audioRef.current.duration && audioDuration !== audioRef.current.duration) {
+      setAudioDuration(audioRef.current.duration);
     }
 
-    const currentMs = audioRef.current.currentTime * 1000;
+    if (transcripts.length === 0) return;
+
+    const currentMs = currentSeconds * 1000;
     const currentItem = transcripts.find(
       (item) => currentMs >= (item.startTime || 0) && currentMs <= (item.endTime || 0),
     );
@@ -344,6 +396,18 @@ export default function MeetingPreview() {
     setActiveTranscriptId(currentItem?.id || null);
   };
 
+  const handleAudioEnded = () => {
+    setAudioPlaying(false);
+  };
+
+  const handleAudioPlay = () => setAudioPlaying(true);
+  const handleAudioPause = () => setAudioPlaying(false);
+  const handleAudioLoadedMetadata = () => {
+    if (audioRef.current) {
+      setAudioDuration(audioRef.current.duration);
+    }
+  };
+
   const renderMeetingTitle = (title?: string) => {
     const safeTitle = title || TEXT.untitledMeeting;
     return safeTitle.split(/(\d+)/).map((part, index) =>
@@ -700,7 +764,7 @@ export default function MeetingPreview() {
           </div>
           <div className="meeting-preview-section-extra">
             <ClockCircleOutlined style={{ marginRight: 6 }} />
-            {meeting.duration ? formatDurationRange(0, meeting.duration) : TEXT.noDuration}
+            {meetingDuration > 0 ? formatDurationRange(0, meetingDuration) : TEXT.noDuration}
           </div>
         </div>
 
@@ -713,21 +777,10 @@ export default function MeetingPreview() {
           />
         ) : null}
 
-        {meeting.audioUrl ? (
-          <audio
-            ref={audioRef}
-            className="meeting-preview-transcript-audio"
-            controls
-            src={meeting.audioUrl}
-            onTimeUpdate={handleAudioTimeUpdate}
-          />
-        ) : null}
-
         <div className="meeting-preview-transcript-list">
           {transcripts.length > 0 ? (
             transcripts.map((item) => {
               const speakerKey = item.speakerName || item.speakerLabel || item.speakerId || "speaker";
-              const avatarColor = transcriptColorSeed(speakerKey);
               return (
                 <div
                   key={item.id}
@@ -737,20 +790,20 @@ export default function MeetingPreview() {
                   className={`meeting-preview-transcript-item ${activeTranscriptId === item.id ? "is-active" : ""}`}
                   onClick={() => handleTranscriptSeek(item)}
                 >
-                  <div className="meeting-preview-transcript-head">
-                    <div className="meeting-preview-transcript-speaker">
-                      <div className="meeting-preview-transcript-avatar" style={{ backgroundColor: avatarColor }}>
-                        {(speakerKey || "S").slice(0, 1)}
-                      </div>
-                      <div className="meeting-preview-transcript-name">
-                        {item.speakerName || item.speakerLabel || item.speakerId || TEXT.unknownSpeaker}
-                      </div>
+                  <div className="meeting-preview-transcript-avatar">
+                    {(speakerKey || "S").slice(0, 1)}
+                  </div>
+                  <div className="meeting-preview-transcript-content">
+                    <div className="meeting-preview-transcript-meta">
+                      <span className="meeting-preview-transcript-speaker">{speakerKey}</span>
+                      <span className="meeting-preview-transcript-time">
+                        {formatDurationRange(item.startTime, item.endTime)}
+                      </span>
                     </div>
-                    <div className="meeting-preview-transcript-time">
-                      {formatDurationRange(item.startTime, item.endTime)}
+                    <div className="meeting-preview-transcript-text">
+                      {item.content || TEXT.noTranscript}
                     </div>
                   </div>
-                  <div className="meeting-preview-transcript-copy">{item.content || TEXT.noTranscript}</div>
                 </div>
               );
             })
@@ -826,10 +879,55 @@ export default function MeetingPreview() {
         </div>
 
         <div className="meeting-preview-disclaimer">
-          <UserOutlined style={{ marginRight: 8 }} />
+          <RobotOutlined style={{ marginRight: 8 }} />
           {TEXT.disclaimer}
         </div>
       </div>
+
+      {meeting.audioUrl && (
+        <audio
+          ref={audioRef}
+          src={meeting.audioUrl}
+          onTimeUpdate={handleAudioTimeUpdate}
+          onPlay={handleAudioPlay}
+          onPause={handleAudioPause}
+          onEnded={handleAudioEnded}
+          onLoadedMetadata={handleAudioLoadedMetadata}
+          style={{ display: 'none' }}
+          preload="metadata"
+        />
+      )}
+
+      {meeting.audioUrl && pageTab === 'transcript' ? (
+        <>
+          <div style={{ height: 100, flexShrink: 0, pointerEvents: 'none' }} />
+          <div className="transcript-player">
+            <button type="button" className="player-main-btn" onClick={toggleAudioPlayback} aria-label="toggle-audio">
+              {audioPlaying ? <PauseOutlined /> : <CaretRightFilled />}
+            </button>
+            <div className="player-progress-shell">
+              <div className="player-time-row">
+                <span>{formatPlayerTime(audioCurrentTime)}</span>
+                <span>{formatPlayerTime(audioDuration)}</span>
+              </div>
+              <input
+                className="player-range"
+                type="range"
+                min={0}
+                max={audioDuration || 0}
+                step={0.1}
+                value={Math.min(audioCurrentTime, audioDuration || 0)}
+                onChange={handleAudioProgressChange}
+                style={{ backgroundSize: `${audioDuration ? (audioCurrentTime / audioDuration) * 100 : 0}% 100%` }}
+              />
+            </div>
+            <button type="button" className="player-ghost-btn" onClick={cyclePlaybackRate}>
+              <FastForwardOutlined />
+              {audioPlaybackRate}x
+            </button>
+          </div>
+        </>
+      ) : null}
     </div>
   );
 }