Merge branch 'main' of https://gitee.com/wg123/video-gen

video-gen-admin/src/api/index.ts

@@ -237,6 +237,10 @@ export async function updateSystemConfig(id: string, value: string): Promise<voi
   await api.put(`/admin/system-configs/${id}`, { value });
 }
 
+export async function createSystemConfig(key: string, value: string, description?: string): Promise<SystemConfig> {
+  return api.post('/admin/system-configs', { key, value, description });
+}
+
 export async function getGlobalResourceCapacity(): Promise<ResourceCapacityConfigOut> {
   return api.get('/admin/resource-capacity/global');
 }
@@ -289,6 +293,22 @@ export async function uploadLogo(file: File): Promise<{ url: string }> {
   return { url: res.url };
 }
 
+export async function uploadLoginVideo(file: File): Promise<{ url: string }> {
+  const form = new FormData();
+  form.append('file', file);
+  const token = localStorage.getItem('auth_token');
+  const res = await fetch(`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}/api/admin/upload-login-video`, {
+    method: 'POST',
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+    body: form,
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err?.detail || '上传失败');
+  }
+  return res.json();
+}
+
 function setMaybe(params: URLSearchParams, key: string, value: unknown): void {
   if (value !== undefined && value !== null && String(value) !== '') params.set(key, String(value));
 }

video-gen-admin/src/pages/AdminSettings.tsx

@@ -1,17 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Button, Card, Form, Input, InputNumber, message, Select, Space, Switch, Typography, Upload,
+  Button, Card, Form, Input, InputNumber, message, Select, Space, Switch, Tabs, Typography, Upload,
 } from 'antd';
 import {
-  SettingOutlined, SaveOutlined, UploadOutlined, FilePdfOutlined, EyeOutlined, DatabaseOutlined,
+  SettingOutlined, SaveOutlined, UploadOutlined, FilePdfOutlined, EyeOutlined, DatabaseOutlined, VideoCameraOutlined, RobotOutlined,
 } from '@ant-design/icons';
 import {
+  createSystemConfig,
   getGlobalResourceCapacity,
   getSystemConfigs,
   saveGlobalResourceCapacity,
   updateSystemConfig,
   uploadLogo,
   uploadPdf,
+  uploadLoginVideo,
 } from '../api';
 import type { ResourceCapacityUnit, SystemConfig } from '../types';
 
@@ -39,6 +41,10 @@ const AdminSettings: React.FC = () => {
         getSystemConfigs(),
         getGlobalResourceCapacity(),
       ]);
+      // 确保 llm_media_as_base64 配置存在
+      if (!data.some(c => c.key === 'llm_media_as_base64')) {
+        data.push({ id: 'cfg_llm_media_as_base64', key: 'llm_media_as_base64', value: 'true', description: '文字模型请求时图片/视频使用 base64 编码' });
+      }
       setConfigs(data);
       const formValues: Record<string, any> = {};
       data.forEach(c => { formValues[c.key] = c.value; });
@@ -118,6 +124,55 @@ const AdminSettings: React.FC = () => {
     return false;
   };
 
+  const handleLoginVideoUpload = async (file: File) => {
+    setUploading('login_bg_video');
+    try {
+      const res = await uploadLoginVideo(file);
+      setConfigs(prev => prev.map(c => c.key === 'login_bg_video' ? { ...c, value: res.url } : c));
+      form.setFieldsValue({ login_bg_video: res.url });
+      const config = configs.find(c => c.key === 'login_bg_video');
+      if (config) {
+        await updateSystemConfig(config.id, res.url);
+      }
+      message.success('登录背景视频上传成功并已保存');
+    } catch (e: any) {
+      message.error(e?.message || '上传失败');
+    } finally {
+      setUploading('');
+    }
+    return false;
+  };
+
+  const handleRemoveLoginVideo = async () => {
+    setConfigs(prev => prev.map(c => c.key === 'login_bg_video' ? { ...c, value: '' } : c));
+    form.setFieldsValue({ login_bg_video: '' });
+    const config = configs.find(c => c.key === 'login_bg_video');
+    if (config) {
+      await updateSystemConfig(config.id, '');
+    }
+    message.success('已移除登录背景视频');
+  };
+
+  const handleToggleBase64 = async (checked: boolean) => {
+    try {
+      let config = configs.find(c => c.key === 'llm_media_as_base64');
+      if (config && config.id && !config.id.startsWith('cfg_')) {
+        await updateSystemConfig(config.id, checked ? 'true' : 'false');
+      } else {
+        const res = await createSystemConfig('llm_media_as_base64', checked ? 'true' : 'false', '文字模型请求时图片/视频使用 base64 编码');
+        config = res;
+      }
+      setConfigs(prev => {
+        const exists = prev.some(c => c.key === 'llm_media_as_base64');
+        if (exists) return prev.map(c => c.key === 'llm_media_as_base64' ? { ...c, value: checked ? 'true' : 'false', id: config!.id } : c);
+        return [...prev, config!];
+      });
+      message.success(`已${checked ? '开启' : '关闭'}文字模型媒体 base64 编码`);
+    } catch (e: any) {
+      message.error(e?.message || '操作失败');
+    }
+  };
+
   const groupedConfigs: Record<string, SystemConfig[]> = {
     '站点信息': configs.filter(c => c.key.startsWith('site_')),
     '协议配置': configs.filter(c => c.key === 'user_agreement_privacy_url'),
@@ -278,6 +333,170 @@ const AdminSettings: React.FC = () => {
     return <Card loading variant="outlined" style={{ borderRadius: 12 }} />;
   }
 
+  const tabItems = [
+    {
+      key: 'basic',
+      label: '网站基础设置',
+      children: (
+        <Form form={form} layout="vertical">
+          {['站点信息', '协议配置', 'SEO 设置'].map(group => (
+            <div key={group} style={{ marginBottom: 24 }}>
+              <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
+                {group}
+              </Typography.Text>
+              {group === '协议配置' ? (
+                groupedConfigs[group]?.map(config => (
+                  <PdfUploadField key={config.id} config={config} />
+                ))
+              ) : (
+                groupedConfigs[group]?.map(config => (
+                  <Form.Item
+                    key={config.id}
+                    name={config.key}
+                    label={<span style={{ fontWeight: 500 }}>{config.description}</span>}
+                    extra={getFieldDescription(config)}
+                  >
+                    {getFieldComponent(config)}
+                  </Form.Item>
+                ))
+              )}
+            </div>
+          ))}
+        </Form>
+      ),
+    },
+    {
+      key: 'credits',
+      label: '用户积分配置',
+      children: (
+        <Form form={form} layout="vertical">
+          <div style={{ marginBottom: 24 }}>
+            <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
+              用户积分配置
+            </Typography.Text>
+            {groupedConfigs['用户积分配置']?.map(config => (
+              <Form.Item
+                key={config.id}
+                name={config.key}
+                label={<span style={{ fontWeight: 500 }}>{config.description}</span>}
+                extra={getFieldDescription(config)}
+              >
+                {getFieldComponent(config)}
+              </Form.Item>
+            ))}
+          </div>
+        </Form>
+      ),
+    },
+    {
+      key: 'other',
+      label: '其他配置',
+      children: (
+        <Form form={form} layout="vertical">
+          <div style={{ marginBottom: 24 }}>
+            <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
+              其他配置
+            </Typography.Text>
+            {groupedConfigs['其他配置']?.map(config => (
+              <Form.Item
+                key={config.id}
+                name={config.key}
+                label={<span style={{ fontWeight: 500 }}>{config.description}</span>}
+                extra={getFieldDescription(config)}
+              >
+                {getFieldComponent(config)}
+              </Form.Item>
+            ))}
+          </div>
+
+          {/* 登录背景视频 */}
+          <div style={{ marginBottom: 24 }}>
+            <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
+              登录背景视频
+            </Typography.Text>
+            <div style={{ padding: 16, borderRadius: 10, border: '1px solid #f0f0f5', background: '#fafbfc' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                <Space>
+                  <VideoCameraOutlined style={{ color: '#6366f1', fontSize: 18 }} />
+                  <Typography.Text strong>背景视频</Typography.Text>
+                </Space>
+                <Space>
+                  {form.getFieldValue('login_bg_video') && (
+                    <Button size="small" danger onClick={handleRemoveLoginVideo}>
+                      移除
+                    </Button>
+                  )}
+                  <Upload
+                    accept="video/*,image/gif,image/webp"
+                    showUploadList={false}
+                    beforeUpload={handleLoginVideoUpload}
+                  >
+                    <Button size="small" type="primary" icon={<UploadOutlined />} loading={uploading === 'login_bg_video'}>
+                      上传视频
+                    </Button>
+                  </Upload>
+                </Space>
+              </div>
+              {(() => {
+                const url = form.getFieldValue('login_bg_video');
+                if (!url) {
+                  return (
+                    <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+                      未设置，前台将默认使用 backimage.png
+                    </Typography.Text>
+                  );
+                }
+                const fullUrl = url.startsWith('http') ? url : `${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${url}`;
+                const isGif = url.toLowerCase().endsWith('.gif');
+                return isGif ? (
+                  <img src={fullUrl} alt="预览" style={{ width: '100%', maxHeight: 200, borderRadius: 8, background: '#f0f0f5', objectFit: 'contain' }} />
+                ) : (
+                  <video
+                    src={fullUrl}
+                    controls
+                    muted
+                    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、GIF、WebP，最大 50MB
+              </Typography.Text>
+            </div>
+          </div>
+
+          {/* 文字模型媒体编码 */}
+          <div style={{ marginBottom: 24 }}>
+            <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
+              文字模型媒体编码
+            </Typography.Text>
+            <div style={{ padding: 16, borderRadius: 10, border: '1px solid #f0f0f5', background: '#fafbfc' }}>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <Space>
+                  <RobotOutlined style={{ color: '#6366f1', fontSize: 18 }} />
+                  <div>
+                    <Typography.Text strong>图片/视频 base64 编码</Typography.Text>
+                    <div style={{ color: '#64748b', fontSize: 12, marginTop: 2 }}>
+                      开启后文字模型请求时将媒体转 base64 发送，而非 URL 链接
+                    </div>
+                  </div>
+                </Space>
+                <Switch
+                  checked={(configs.find(c => c.key === 'llm_media_as_base64') || {}).value === 'true'}
+                  onChange={handleToggleBase64}
+                  checkedChildren="base64"
+                  unCheckedChildren="链接"
+                />
+              </div>
+            </div>
+          </div>
+        </Form>
+      ),
+    },
+  ];
+
   return (
     <div style={{ maxWidth: 720 }}>
       <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5', marginBottom: 16 }}>
@@ -292,78 +511,11 @@ const AdminSettings: React.FC = () => {
           </div>
           <div>
             <Typography.Title level={4} style={{ margin: 0 }}>系统设置</Typography.Title>
-            <Typography.Text type="secondary">管理站点基础信息、协议文件和SEO配置</Typography.Text>
+            <Typography.Text type="secondary">管理站点基础信息、用户积分和系统配置</Typography.Text>
           </div>
         </div>
 
-        <Form form={form} layout="vertical">
-          {Object.entries(groupedConfigs).map(([group, items]) => (
-            <div key={group} style={{ marginBottom: 24 }}>
-              <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
-                {group}
-              </Typography.Text>
-              {group === '协议配置' ? (
-                items.map(config => (
-                  <PdfUploadField key={config.id} config={config} />
-                ))
-              ) : (
-                items.map(config => (
-                  <Form.Item
-                    key={config.id}
-                    name={config.key}
-                    label={<span style={{ fontWeight: 500 }}>{config.description}</span>}
-                    extra={getFieldDescription(config)}
-                  >
-                    {getFieldComponent(config)}
-                  </Form.Item>
-                ))
-              )}
-            </div>
-          ))}
-
-          <div style={{ marginBottom: 4 }}>
-            <Typography.Text strong style={{ fontSize: 14, display: 'block', marginBottom: 12, paddingBottom: 8, borderBottom: '1px solid #f0f0f5' }}>
-              资源空间管控
-            </Typography.Text>
-            <div style={{ padding: 16, border: '1px solid #f0f0f5', borderRadius: 10, background: '#fafbfc' }}>
-              <Space align="start" style={{ marginBottom: 16 }}>
-                <DatabaseOutlined style={{ color: '#6366f1', fontSize: 18, marginTop: 2 }} />
-                <div>
-                  <Typography.Text strong>全局生成资源容量上限</Typography.Text>
-                  <div style={{ color: '#64748b', fontSize: 13, marginTop: 4 }}>
-                    开启后会按用户当前有效资源占用量进行提交前拦截；用户个人配置存在时优先级高于全局配置。
-                  </div>
-                </div>
-              </Space>
-              <Form.Item
-                name="resource_capacity_enabled"
-                label="启用全局容量管控"
-                valuePropName="checked"
-                extra="关闭时全局不限制；若用户设置了个人配置，则仍按用户个人配置优先判断。"
-              >
-                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
-              </Form.Item>
-              <div style={{ display: 'grid', gridTemplateColumns: '1fr 180px', gap: 16 }}>
-                <Form.Item
-                  name="resource_capacity_limit_value"
-                  label="容量数值"
-                  extra="最小为1，不能为负数，最多支持3位小数。"
-                  rules={[{ required: true, message: '请输入容量数值' }]}
-                >
-                  <InputNumber min={1} precision={3} style={{ width: '100%' }} size="large" placeholder="例如 10.500" />
-                </Form.Item>
-                <Form.Item
-                  name="resource_capacity_limit_unit"
-                  label="容量单位"
-                  extra="MB / GB / TB 固定枚举"
-                  rules={[{ required: true, message: '请选择容量单位' }]}
-                >
-                  <Select size="large" options={capacityUnitOptions} />
-                </Form.Item>
-              </div>
-            </div>
-          </div>
-        </Form>
+          <Tabs items={tabItems} defaultActiveKey="basic" />
       </Card>
 
       <div style={{ display: 'flex', justifyContent: 'flex-end' }}>