fix(AudioPlayerBar): 在空状态下显示更多按钮并优化响应式布局

调整空状态容器布局，使用 space-between 和 gap 确保文本与按钮正确对齐
提取渲染更多按钮的逻辑为独立函数以减少重复代码
在移动端视图中恢复居中布局并调整按钮间距

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;
+  }
 }

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 ? (
+          {renderMoreButton()}
-            <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>