feat: add audio preview functionality

2026-03-30 05:02:17 +00:00 · 2026-02-22 23:23:13 +08:00
parent 3b6af5dca3
commit 3b87d31191
12 changed files with 248 additions and 2 deletions
--- a/web/src/components/table/task-logs/TaskLogsColumnDefs.jsx
+++ b/web/src/components/table/task-logs/TaskLogsColumnDefs.jsx
@@ -240,6 +240,7 @@ export const getTaskLogsColumns = ({
  openContentModal,
  isAdminUser,
  openVideoModal,
+  openAudioModal,
 }) => {
  return [
    {
@@ -386,6 +387,26 @@ export const getTaskLogsColumns = ({
      dataIndex: 'fail_reason',
      fixed: 'right',
      render: (text, record, index) => {
+        // Suno audio preview
+        const isSunoSuccess =
+          record.platform === 'suno' &&
+          record.status === 'SUCCESS' &&
+          Array.isArray(record.data) &&
+          record.data.some((c) => c.audio_url);
+        if (isSunoSuccess) {
+          return (
+            <a
+              href='#'
+              onClick={(e) => {
+                e.preventDefault();
+                openAudioModal(record.data);
+              }}
+            >
+              {t('点击预览音乐')}
+            </a>
+          );
+        }
+
        // 视频预览：优先使用 result_url，兼容旧数据 fail_reason 中的 URL
        const isVideoTask =
          record.action === TASK_ACTION_GENERATE ||
--- a/web/src/components/table/task-logs/TaskLogsTable.jsx
+++ b/web/src/components/table/task-logs/TaskLogsTable.jsx
@@ -40,6 +40,7 @@ const TaskLogsTable = (taskLogsData) => {
    copyText,
    openContentModal,
    openVideoModal,
+    openAudioModal,
    showUserInfoFunc,
    isAdminUser,
    t,
@@ -54,10 +55,11 @@ const TaskLogsTable = (taskLogsData) => {
      copyText,
      openContentModal,
      openVideoModal,
+      openAudioModal,
      showUserInfoFunc,
      isAdminUser,
    });
-  }, [t, COLUMN_KEYS, copyText, openContentModal, openVideoModal, showUserInfoFunc, isAdminUser]);
+  }, [t, COLUMN_KEYS, copyText, openContentModal, openVideoModal, openAudioModal, showUserInfoFunc, isAdminUser]);

  // Filter columns based on visibility settings
  const getVisibleColumns = () => {
--- a/web/src/components/table/task-logs/index.jsx
+++ b/web/src/components/table/task-logs/index.jsx
@@ -25,6 +25,7 @@ import TaskLogsActions from './TaskLogsActions';
 import TaskLogsFilters from './TaskLogsFilters';
 import ColumnSelectorModal from './modals/ColumnSelectorModal';
 import ContentModal from './modals/ContentModal';
+import AudioPreviewModal from './modals/AudioPreviewModal';
 import { useTaskLogsData } from '../../../hooks/task-logs/useTaskLogsData';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';
@@ -45,6 +46,11 @@ const TaskLogsPage = () => {
        modalContent={taskLogsData.videoUrl}
        isVideo={true}
      />
+      <AudioPreviewModal
+        isModalOpen={taskLogsData.isAudioModalOpen}
+        setIsModalOpen={taskLogsData.setIsAudioModalOpen}
+        audioClips={taskLogsData.audioClips}
+      />

      <Layout>
        <CardPro
--- a/web/src/components/table/task-logs/modals/AudioPreviewModal.jsx
+++ b/web/src/components/table/task-logs/modals/AudioPreviewModal.jsx
@@ -0,0 +1,181 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Modal, Typography, Tag, Button } from '@douyinfe/semi-ui';
+import { IconExternalOpen, IconCopy } from '@douyinfe/semi-icons';
+import { useTranslation } from 'react-i18next';
+
+const { Text, Title } = Typography;
+
+const formatDuration = (seconds) => {
+  if (!seconds || seconds <= 0) return '--:--';
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+};
+
+const AudioClipCard = ({ clip }) => {
+  const { t } = useTranslation();
+  const [hasError, setHasError] = useState(false);
+  const audioRef = useRef(null);
+
+  useEffect(() => {
+    setHasError(false);
+  }, [clip.audio_url]);
+
+  const title = clip.title || t('未命名');
+  const tags = clip.tags || clip.metadata?.tags || '';
+  const duration = clip.duration || clip.metadata?.duration;
+  const imageUrl = clip.image_url || clip.image_large_url;
+  const audioUrl = clip.audio_url;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: '16px',
+        padding: '16px',
+        borderRadius: '8px',
+        border: '1px solid var(--semi-color-border)',
+        background: 'var(--semi-color-bg-1)',
+      }}
+    >
+      {imageUrl && (
+        <img
+          src={imageUrl}
+          alt={title}
+          style={{
+            width: 80,
+            height: 80,
+            borderRadius: '8px',
+            objectFit: 'cover',
+            flexShrink: 0,
+          }}
+          onError={(e) => {
+            e.target.style.display = 'none';
+          }}
+        />
+      )}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            marginBottom: '4px',
+          }}
+        >
+          <Text strong ellipsis={{ showTooltip: true }} style={{ fontSize: 15 }}>
+            {title}
+          </Text>
+          {duration > 0 && (
+            <Tag size='small' color='grey' shape='circle'>
+              {formatDuration(duration)}
+            </Tag>
+          )}
+        </div>
+
+        {tags && (
+          <div style={{ marginBottom: '8px' }}>
+            <Text
+              type='tertiary'
+              size='small'
+              ellipsis={{ showTooltip: true, rows: 1 }}
+            >
+              {tags}
+            </Text>
+          </div>
+        )}
+
+        {hasError ? (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              flexWrap: 'wrap',
+            }}
+          >
+            <Text type='warning' size='small'>
+              {t('音频无法播放')}
+            </Text>
+            <Button
+              size='small'
+              icon={<IconExternalOpen />}
+              onClick={() => window.open(audioUrl, '_blank')}
+            >
+              {t('在新标签页中打开')}
+            </Button>
+            <Button
+              size='small'
+              icon={<IconCopy />}
+              onClick={() => navigator.clipboard.writeText(audioUrl)}
+            >
+              {t('复制链接')}
+            </Button>
+          </div>
+        ) : (
+          <audio
+            ref={audioRef}
+            src={audioUrl}
+            controls
+            preload='none'
+            onError={() => setHasError(true)}
+            style={{ width: '100%', height: 36 }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const AudioPreviewModal = ({ isModalOpen, setIsModalOpen, audioClips }) => {
+  const { t } = useTranslation();
+  const clips = Array.isArray(audioClips) ? audioClips : [];
+
+  return (
+    <Modal
+      title={t('音乐预览')}
+      visible={isModalOpen}
+      onOk={() => setIsModalOpen(false)}
+      onCancel={() => setIsModalOpen(false)}
+      closable={null}
+      footer={null}
+      bodyStyle={{
+        maxHeight: '70vh',
+        overflow: 'auto',
+        padding: '16px',
+      }}
+      width={560}
+    >
+      {clips.length === 0 ? (
+        <Text type='tertiary'>{t('无')}</Text>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          {clips.map((clip, idx) => (
+            <AudioClipCard key={clip.clip_id || clip.id || idx} clip={clip} />
+          ))}
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export default AudioPreviewModal;
--- a/web/src/hooks/task-logs/useTaskLogsData.js
+++ b/web/src/hooks/task-logs/useTaskLogsData.js
@@ -72,6 +72,10 @@ export const useTaskLogsData = () => {
  const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
  const [videoUrl, setVideoUrl] = useState('');

+  // Audio preview modal state
+  const [isAudioModalOpen, setIsAudioModalOpen] = useState(false);
+  const [audioClips, setAudioClips] = useState([]);
+
  // User info modal state
  const [showUserInfo, setShowUserInfoModal] = useState(false);
  const [userInfoData, setUserInfoData] = useState(null);
@@ -277,6 +281,11 @@ export const useTaskLogsData = () => {
    setIsVideoModalOpen(true);
  };

+  const openAudioModal = (clips) => {
+    setAudioClips(clips);
+    setIsAudioModalOpen(true);
+  };
+
  // User info function
  const showUserInfoFunc = async (userId) => {
    if (!isAdminUser) {
@@ -319,6 +328,11 @@ export const useTaskLogsData = () => {
    setIsVideoModalOpen,
    videoUrl,

+    // Audio preview modal
+    isAudioModalOpen,
+    setIsAudioModalOpen,
+    audioClips,
+
    // Form state
    formApi,
    setFormApi,
@@ -351,7 +365,8 @@ export const useTaskLogsData = () => {
    refresh,
    copyText,
    openContentModal,
-    openVideoModal, // 新增
+    openVideoModal,
+    openAudioModal,
    enrichLogs,
    syncPageData,

--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1634,6 +1634,9 @@
    "点击查看差异": "Click to view differences",
    "点击此处": "click here",
    "点击预览视频": "Click to preview video",
+    "点击预览音乐": "Click to preview music",
+    "音乐预览": "Music Preview",
+    "音频无法播放": "Audio cannot be played",
    "点击验证按钮，使用您的生物特征或安全密钥": "Click the verification button and use your biometrics or security key",
    "版权所有": "All rights reserved",
    "状态": "Status",
--- a/web/src/i18n/locales/fr.json
+++ b/web/src/i18n/locales/fr.json
@@ -1646,6 +1646,9 @@
    "点击查看差异": "Cliquez pour voir les différences",
    "点击此处": "cliquez ici",
    "点击预览视频": "Cliquez pour prévisualiser la vidéo",
+    "点击预览音乐": "Cliquez pour écouter la musique",
+    "音乐预览": "Aperçu musical",
+    "音频无法播放": "Impossible de lire l'audio",
    "点击验证按钮，使用您的生物特征或安全密钥": "Cliquez sur le bouton de vérification pour utiliser vos caractéristiques biométriques ou votre clé de sécurité",
    "版权所有": "Tous droits réservés",
    "状态": "Statut",
--- a/web/src/i18n/locales/ja.json
+++ b/web/src/i18n/locales/ja.json
@@ -1631,6 +1631,9 @@
    "点击查看差异": "差分を表示",
    "点击此处": "こちらをクリック",
    "点击预览视频": "動画をプレビュー",
+    "点击预览音乐": "音楽をプレビュー",
+    "音乐预览": "音楽プレビュー",
+    "音频无法播放": "音声を再生できません",
    "点击验证按钮，使用您的生物特征或安全密钥": "認証ボタンをクリックし、生体情報またはセキュリティキーを使用してください",
    "版权所有": "All rights reserved",
    "状态": "ステータス",
--- a/web/src/i18n/locales/ru.json
+++ b/web/src/i18n/locales/ru.json
@@ -1657,6 +1657,9 @@
    "点击查看差异": "Нажмите для просмотра различий",
    "点击此处": "Нажмите здесь",
    "点击预览视频": "Нажмите для предварительного просмотра видео",
+    "点击预览音乐": "Нажмите для прослушивания музыки",
+    "音乐预览": "Предварительное прослушивание",
+    "音频无法播放": "Не удалось воспроизвести аудио",
    "点击验证按钮，使用您的生物特征或安全密钥": "Нажмите кнопку проверки, используйте ваши биометрические данные или ключ безопасности",
    "版权所有": "Все права защищены",
    "状态": "Статус",
--- a/web/src/i18n/locales/vi.json
+++ b/web/src/i18n/locales/vi.json
@@ -1773,6 +1773,9 @@
    "点击链接重置密码": "Nhấp vào liên kết để đặt lại mật khẩu",
    "点击阅读": "Nhấp để đọc",
    "点击预览视频": "Nhấp để xem trước video",
+    "点击预览音乐": "Nhấp để nghe nhạc",
+    "音乐预览": "Xem trước nhạc",
+    "音频无法播放": "Không thể phát âm thanh",
    "点击验证按钮，使用您的生物特征或安全密钥": "Nhấp vào nút xác minh và sử dụng sinh trắc học hoặc khóa bảo mật của bạn",
    "版": "Phiên bản",
    "版本": "Phiên bản",
--- a/web/src/i18n/locales/zh-CN.json
+++ b/web/src/i18n/locales/zh-CN.json
@@ -1624,6 +1624,9 @@
    "点击查看差异": "点击查看差异",
    "点击此处": "点击此处",
    "点击预览视频": "点击预览视频",
+    "点击预览音乐": "点击预览音乐",
+    "音乐预览": "音乐预览",
+    "音频无法播放": "音频无法播放",
    "点击验证按钮，使用您的生物特征或安全密钥": "点击验证按钮，使用您的生物特征或安全密钥",
    "版权所有": "版权所有",
    "状态": "状态",
--- a/web/src/i18n/locales/zh-TW.json
+++ b/web/src/i18n/locales/zh-TW.json
@@ -1628,6 +1628,9 @@
    "点击查看差异": "點擊查看差異",
    "点击此处": "點擊此處",
    "点击预览视频": "點擊預覽影片",
+    "点击预览音乐": "點擊預覽音樂",
+    "音乐预览": "音樂預覽",
+    "音频无法播放": "音訊無法播放",
    "点击验证按钮，使用您的生物特征或安全密钥": "點擊驗證按鈕，使用您的生物特徵或安全密鑰",
    "版权所有": "版權所有",
    "状态": "狀態",