1

2026-07-01 19:15:39 +08:00
parent 288c0ea1cc
commit 5e70064751
1 changed files with 37 additions and 4 deletions
@@ -242,6 +242,7 @@ const AIChatPage: React.FC = () => {
  const [attachmentPreviewUrl, setAttachmentPreviewUrl] = useState<string>('');
  const [attachmentPreviewType, setAttachmentPreviewType] = useState<'image' | 'video'>('image');
  const [attachmentPreviewName, setAttachmentPreviewName] = useState<string>('');
+  const attachmentPreviewVideoRef = useRef<HTMLVideoElement>(null);

  // 附件详情悬浮窗状态
  const [attachmentPopupVisible, setAttachmentPopupVisible] = useState<boolean>(false);
@@ -1459,7 +1460,7 @@ const AIChatPage: React.FC = () => {
                                    <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'rgba(254, 226, 226, 0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                      <WarningOutlined style={{ color: '#ef4444', fontSize: 22 }} />
                                    </div>
-                                    <span style={{ fontSize: 14, color: '#94a3b8' }}>生成失败（积分已退）</span>
+                                    <span style={{ fontSize: 14, color: '#ef4444' }}>生成失败（积分已退）</span>
                                    {msg.errorMessage && (
                                      <span style={{ fontSize: 13, color: '#ef4444', textAlign: 'center', padding: '0 8px', lineHeight: 1.5 }}>{msg.errorMessage}</span>
                                    )}
@@ -1645,12 +1646,25 @@ const AIChatPage: React.FC = () => {
                      <img
                        src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${media.url}`}
                        alt={media.name}
-                        style={{ width: '100%', height: 80, objectFit: 'cover', borderRadius: 8 }}
+                        onClick={() => {
+                          setAttachmentPreviewUrl(media.url);
+                          setAttachmentPreviewType('image');
+                          setAttachmentPreviewName(media.name);
+                          setAttachmentPreviewVisible(true);
+                        }}
+                        style={{ width: '100%', height: 80, objectFit: 'cover', borderRadius: 8, cursor: 'pointer' }}
                      />
                    ) : (
                      <video
                        src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${media.url}`}
-                        style={{ width: '100%', height: 80, objectFit: 'cover', borderRadius: 8 }}
+                        muted
+                        onClick={() => {
+                          setAttachmentPreviewUrl(media.url);
+                          setAttachmentPreviewType('video');
+                          setAttachmentPreviewName(media.name);
+                          setAttachmentPreviewVisible(true);
+                        }}
+                        style={{ width: '100%', height: 80, objectFit: 'cover', borderRadius: 8, cursor: 'pointer' }}
                      />
                    )}
                    <span style={{ fontSize: 11, color: '#64748b', fontWeight: 500 }}>
@@ -2647,7 +2661,25 @@ const AIChatPage: React.FC = () => {
            </span>
          </div>
        }
-        onCancel={() => setAttachmentPreviewVisible(false)}
+        onCancel={() => {
+          // 关闭前强制停止视频播放，避免关闭后仍有声音
+          if (attachmentPreviewVideoRef.current) {
+            const v = attachmentPreviewVideoRef.current;
+            v.pause();
+            v.muted = true;
+            v.removeAttribute('src');
+            v.load();
+          }
+          setAttachmentPreviewVisible(false);
+        }}
+        afterClose={() => {
+          // Modal 完全关闭后再次确保视频被停止
+          if (attachmentPreviewVideoRef.current) {
+            const v = attachmentPreviewVideoRef.current;
+            v.pause();
+            v.muted = true;
+          }
+        }}
        width={800}
        footer={
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(99, 102, 241, 0.08)' }}>
@@ -2690,6 +2722,7 @@ const AIChatPage: React.FC = () => {
            />
          ) : (
            <video
+              ref={attachmentPreviewVideoRef}
              src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${attachmentPreviewUrl}`}
              controls
              style={{ maxWidth: '100%', maxHeight: '400px' }}