From 13af9548c3fa7102f9fba4e11574717877ebb2f8 Mon Sep 17 00:00:00 2001
From: AlanPaine <AlanPaine@163.com>
Date: Tue, 7 Apr 2026 09:53:34 +0000
Subject: [PATCH] =?UTF-8?q?fix(AudioPlayerBar):=20=E5=9C=A8=E7=A9=BA?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E4=B8=8B=E6=98=BE=E7=A4=BA=E6=9B=B4=E5=A4=9A?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=B9=B6=E4=BC=98=E5=8C=96=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

调整空状态容器布局，使用 space-between 和 gap 确保文本与按钮正确对齐
提取渲染更多按钮的逻辑为独立函数以减少重复代码
在移动端视图中恢复居中布局并调整按钮间距
---
 frontend/src/components/AudioPlayerBar.css | 18 +++++++++++-
 frontend/src/components/AudioPlayerBar.jsx | 32 ++++++++++++++++------
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/AudioPlayerBar.css b/frontend/src/components/AudioPlayerBar.css
index 89d4218..5204504 100644
--- a/frontend/src/components/AudioPlayerBar.css
+++ b/frontend/src/components/AudioPlayerBar.css
@@ -11,7 +11,8 @@
 }
 
 .audio-player-bar.is-empty {
-  justify-content: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .audio-player-bar-audio {
@@ -157,10 +158,17 @@
 }
 
 .audio-player-bar-empty-text {
+  flex: 1;
   color: #5f7392;
   font-size: 12px;
 }
 
+.audio-player-bar-empty-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
 @media (max-width: 768px) {
   .audio-player-bar {
     gap: 8px;
@@ -176,4 +184,12 @@
   .audio-player-bar-divider {
     display: none;
   }
+
+  .audio-player-bar.is-empty {
+    justify-content: center;
+  }
+
+  .audio-player-bar-empty-actions {
+    gap: 0;
+  }
 }
diff --git a/frontend/src/components/AudioPlayerBar.jsx b/frontend/src/components/AudioPlayerBar.jsx
index 8938f30..0d7617d 100644
--- a/frontend/src/components/AudioPlayerBar.jsx
+++ b/frontend/src/components/AudioPlayerBar.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Button, Dropdown } from 'antd';
 import {
   CaretRightFilled,
@@ -120,10 +120,32 @@ const AudioPlayerBar = ({
     setCurrentTime(nextTime);
   };
 
+  const renderMoreButton = () => {
+    if (!showMoreButton) {
+      return null;
+    }
+
+    if (moreMenuItems.length > 0) {
+      return (
+        <Dropdown menu={{ items: moreMenuItems }} trigger={['click']}>
+          <Button type="text" className="audio-player-bar-control audio-player-bar-more" icon={<MoreOutlined />} />
+        </Dropdown>
+      );
+    }
+
+    return <Button type="text" disabled className="audio-player-bar-control audio-player-bar-more" icon={<MoreOutlined />} />;
+  };
+
   if (!src) {
     return (
       <div className="audio-player-bar is-empty">
         <span className="audio-player-bar-empty-text">{emptyText}</span>
+        {showMoreButton ? (
+          <span className="audio-player-bar-empty-actions">
+            <span className="audio-player-bar-divider" />
+            {renderMoreButton()}
+          </span>
+        ) : null}
       </div>
     );
   }
@@ -169,13 +191,7 @@ const AudioPlayerBar = ({
       {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 />} />
-          )}
+          {renderMoreButton()}
         </>
       ) : null}
     </div>