1

2026-07-16 09:33:13 +08:00
parent 085e85967a
commit 01c55721ca
5 changed files with 34 additions and 24 deletions
@@ -28,7 +28,7 @@
        }
      })();
    </script>
-    <script type="module" crossorigin src="/assets/index-DFGenJw5.js"></script>
+    <script type="module" crossorigin src="/assets/index-Dx7ckEm9.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-D7ShJUt4.css">
  </head>
  <body>
@@ -345,7 +345,7 @@ const AdminSettings: React.FC = () => {
                    </Button>
                  )}
                  <Upload
-                    accept="video/mp4,video/webm,video/mov"
+                    accept="video/*,image/gif,image/webp"
                    showUploadList={false}
                    beforeUpload={handleLoginVideoUpload}
                  >
@@ -355,20 +355,32 @@ const AdminSettings: React.FC = () => {
                  </Upload>
                </Space>
              </div>
-              {form.getFieldValue('login_bg_video') ? (
-                <video
-                  src={form.getFieldValue('login_bg_video')}
-                  controls
-                  muted
-                  style={{ width: '100%', maxHeight: 200, borderRadius: 8, background: '#000' }}
-                />
-              ) : (
+              {(() => {
+                const url = form.getFieldValue('login_bg_video');
+                if (!url) {
+                  return (
                    <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                      未设置，前台将默认使用 backimage.png
                    </Typography.Text>
-              )}
+                  );
+                }
+                const isGif = url.toLowerCase().endsWith('.gif');
+                return isGif ? (
+                  <img src={url} alt="预览" style={{ width: '100%', maxHeight: 200, borderRadius: 8, background: '#f0f0f5', objectFit: 'contain' }} />
+                ) : (
+                  <video
+                    src={url}
+                    controls
+                    muted
+                    autoPlay
+                    loop
+                    playsInline
+                    style={{ width: '100%', maxHeight: 200, borderRadius: 8, background: '#000' }}
+                  />
+                );
+              })()}
              <Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 6 }}>
-                支持 MP4、WebM、MOV，最大 50MB
+                支持 MP4、WebM、MOV、GIF、WebP，最大 50MB
              </Typography.Text>
            </div>
          </div>
@@ -2287,16 +2287,12 @@ async def upload_login_video(
    admin: User = Depends(get_admin_user),
    db: AsyncSession = Depends(get_db),
 ):
-    """上传登录页背景视频，保存 URL 到 system config login_bg_video。"""
+    """上传登录页背景视频/动图，保存 URL 到 system config login_bg_video。"""
    from app.config import settings

    if not file.filename:
        raise HTTPException(status_code=400, detail="请选择文件")

-    allowed_extensions = ('.mp4', '.webm', '.mov')
-    if not file.filename.lower().endswith(allowed_extensions):
-        raise HTTPException(status_code=400, detail="仅支持 MP4、WebM、MOV 视频格式")
-
    content = await file.read()
    if len(content) > 50 * 1024 * 1024:
        raise HTTPException(status_code=400, detail="文件大小不能超过50MB")
@@ -288,12 +288,14 @@ const LoginPage: React.FC = () => {

  return (
    <div className="login-page">
-      {/* 视频背景全屏铺满 */}
-      {loginBgVideo && (
+      {/* 背景视频/动图全屏铺满 */}
+      {loginBgVideo && (loginBgVideo.toLowerCase().endsWith('.gif') || loginBgVideo.toLowerCase().endsWith('.webp')) ? (
+        <img className="login-bg-video" src={loginBgVideo} alt="" />
+      ) : loginBgVideo ? (
        <video className="login-bg-video" autoPlay loop muted playsInline preload="auto">
          <source src={loginBgVideo} type={loginBgVideo.endsWith('.webm') ? 'video/webm' : loginBgVideo.endsWith('.mov') ? 'video/quicktime' : 'video/mp4'} />
        </video>
-      )}
+      ) : null}
      <div className="login-bg-overlay" />

      {/* 左上角 slogan */}