修改弹窗的关闭图标和整体样式，增加素材云的浮动下载

2026-06-30 16:46:18 +08:00
parent a3e70b5d49
commit 0541fc0046
5 changed files with 212 additions and 245 deletions
@@ -44,6 +44,7 @@ import {
  SettingOutlined,
  LayoutOutlined,
  ArrowUpOutlined,
+  DownloadOutlined,

 } from '@ant-design/icons';

@@ -2297,46 +2298,30 @@ const AIChatPage: React.FC = () => {
      {/* 图片/视频预览弹窗 */}
      <Modal
        open={previewVisible}
-        onCancel={handleClosePreview}
-        footer={[
-          <Button key="download" type="primary" onClick={handleDownload} style={{ background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 10, border: 'none' }}>
-            下载
-          </Button>,
-        ]}
-        width={800}
-        centered
-        closeIcon={
-          <button
-            onClick={handleClosePreview}
-            style={{
-              width: 32,
-              height: 32,
-              borderRadius: '50%',
-              border: 'none',
-              background: 'rgba(99, 102, 241, 0.1)',
-              cursor: 'pointer',
-              fontSize: 16,
-              color: '#6366f1',
-              fontWeight: 'bold',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              transition: 'all 0.2s',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
-              e.currentTarget.style.color = '#ef4444';
-              e.currentTarget.style.transform = 'scale(1.1)';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.background = 'rgba(99, 102, 241, 0.1)';
-              e.currentTarget.style.color = '#6366f1';
-              e.currentTarget.style.transform = 'scale(1)';
-            }}
-          >
-            ×
-          </button>
+        title={
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 2 }} />
+            <span style={{ fontSize: 16, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
+              预览
+            </span>
+          </div>
        }
+        onCancel={handleClosePreview}
+        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)' }}>
+            <Button
+              type="primary"
+              icon={<DownloadOutlined />}
+              onClick={handleDownload}
+              style={{ borderRadius: 8, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', border: 'none', boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)' }}
+              disabled={isMediaExpired(previewUrl)}
+            >
+              {isMediaExpired(previewUrl) ? '资源已过期' : '下载'}
+            </Button>
+          </div>
+        }
+        centered
        style={{ borderRadius: 16 }}
        styles={{
          body: {
@@ -2345,21 +2330,13 @@ const AIChatPage: React.FC = () => {
            justifyContent: 'center',
            minHeight: '400px',
          },
+          header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(99, 102, 241, 0.08)', padding: '16px 24px' },
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
          {isMediaExpired(previewUrl) ? (
            <div style={{ textAlign: 'center', padding: '40px' }}>
-              {/* <div style={{ fontSize: 48, marginBottom: 16 }}>⚠️</div> */}
              <p style={{ fontSize: 16, color: '#ff4d4f', marginBottom: 16 }}>图片/视频资源已过期，请刷新重新加载～</p>
-              {/* <Button
-                type="primary"
-                onClick={() => {
-                  window.location.reload();
-                }}
-              >
-                刷新页面重新加载
-              </Button> */}
            </div>
          ) : previewType === 'image' ? (
            <img
@@ -2381,54 +2358,37 @@ const AIChatPage: React.FC = () => {
      {/* 附件预览弹窗（独立弹窗） */}
      <Modal
        open={attachmentPreviewVisible}
-        onCancel={() => setAttachmentPreviewVisible(false)}
-        footer={[
-          <Button key="download" type="primary" onClick={() => {
-            if (!attachmentPreviewUrl) return;
-            const link = document.createElement('a');
-            link.href = `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${attachmentPreviewUrl}&download=1`;
-            link.download = attachmentPreviewName || (attachmentPreviewType === 'image' ? 'image.png' : 'video.mp4');
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-          }} style={{ background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 10, border: 'none' }}>
-            下载
-          </Button>,
-        ]}
-        width={800}
-        centered
-        closeIcon={
-          <button
-            onClick={() => setAttachmentPreviewVisible(false)}
-            style={{
-              width: 32,
-              height: 32,
-              borderRadius: '50%',
-              border: 'none',
-              background: 'rgba(99, 102, 241, 0.1)',
-              cursor: 'pointer',
-              fontSize: 16,
-              color: '#6366f1',
-              fontWeight: 'bold',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              transition: 'all 0.2s',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
-              e.currentTarget.style.color = '#ef4444';
-              e.currentTarget.style.transform = 'scale(1.1)';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.background = 'rgba(99, 102, 241, 0.1)';
-              e.currentTarget.style.color = '#6366f1';
-              e.currentTarget.style.transform = 'scale(1)';
-            }}
-          >
-            ×
-          </button>
+        title={
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: 2 }} />
+            <span style={{ fontSize: 16, fontWeight: 700, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
+              附件预览
+            </span>
+          </div>
        }
+        onCancel={() => setAttachmentPreviewVisible(false)}
+        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)' }}>
+            <Button
+              type="primary"
+              icon={<DownloadOutlined />}
+              onClick={() => {
+                if (!attachmentPreviewUrl) return;
+                const link = document.createElement('a');
+                link.href = `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${attachmentPreviewUrl}&download=1`;
+                link.download = attachmentPreviewName || (attachmentPreviewType === 'image' ? 'image.png' : 'video.mp4');
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+              }}
+              style={{ borderRadius: 8, background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)', border: 'none', boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)' }}
+            >
+              下载
+            </Button>
+          </div>
+        }
+        centered
        style={{ borderRadius: 16 }}
        styles={{
          body: {
@@ -2437,6 +2397,7 @@ const AIChatPage: React.FC = () => {
            justifyContent: 'center',
            minHeight: '400px',
          },
+          header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(99, 102, 241, 0.08)', padding: '16px 24px' },
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>