1、增加调用 AI 视频生成能力和虚拟素材库管理的对外api

2、增加后台apikkey管理
3、增加apikey单独的模型定价
4、增加apikey调用情况
5、完善所有数据的注释增加

video-gen-admin/src/App.tsx

@@ -39,6 +39,9 @@ import AdminPreTestTemplates from './pages/AdminPreTestTemplates';
 import AdminOAuthList from './pages/AdminOAuthList';
 import AdminMaterialList from './pages/AdminMaterialList';
 import AdminPrivatePortraitProjects from './pages/AdminPrivatePortraitProjects';
+import AdminApiKeys from './pages/AdminApiKeys';
+import AdminApiModelPricings from './pages/AdminApiModelPricings';
+import AdminApiUsage from './pages/AdminApiUsage';
 
 import { useAdminStore } from './store';
 
@@ -100,6 +103,9 @@ const App = () => {
               <Route path="settings" element={<AdminSettings />} />
               <Route path="video-prompt-schema-config" element={<AdminVideoPromptSchemaConfig />} />
               <Route path="video-upscale" element={<AdminVideoUpscale />} />
+              <Route path="api-keys" element={<AdminApiKeys />} />
+              <Route path="api-model-pricings" element={<AdminApiModelPricings />} />
+              <Route path="api-usage" element={<AdminApiUsage />} />
               <Route path="notifications" element={<AdminNotificationManager />} />
               <Route path="oauthapp-list" element={<AdminOauthAppList />} />
               <Route path="operation-logs" element={<AdminOperationLogs />} />

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

@@ -390,6 +390,108 @@ export async function deleteCreditRatio(id: string): Promise<void> {
   await api.delete(`/admin/credit-ratios/${id}`);
 }
 
+// === API 模型价格管理 ===
+
+export async function getApiModelPricings(): Promise<any[]> {
+  return api.get('/admin/api-model-pricings');
+}
+
+export async function saveApiModelPricing(pricing: any): Promise<any> {
+  if (pricing.id) return api.put(`/admin/api-model-pricings/${pricing.id}`, pricing);
+  return api.post('/admin/api-model-pricings', pricing);
+}
+
+export async function deleteApiModelPricing(id: string): Promise<void> {
+  await api.delete(`/admin/api-model-pricings/${id}`);
+}
+
+// === API Key 管理 ===
+
+export async function getApiKeys(params?: {
+  skip?: number;
+  limit?: number;
+  companyName?: string;
+  isActive?: boolean;
+}): Promise<any> {
+  const query = new URLSearchParams();
+  if (params?.skip !== undefined) query.set('skip', String(params.skip));
+  if (params?.limit !== undefined) query.set('limit', String(params.limit));
+  if (params?.companyName) query.set('company_name', params.companyName);
+  if (params?.isActive !== undefined) query.set('is_active', String(params.isActive));
+  const qs = query.toString();
+  return api.get(`/admin/api-keys${qs ? '?' + qs : ''}`);
+}
+
+export async function getApiKeyDetail(id: string): Promise<any> {
+  return api.get(`/admin/api-keys/${id}`);
+}
+
+export async function createApiKey(data: any): Promise<any> {
+  return api.post('/admin/api-keys', data);
+}
+
+export async function updateApiKey(id: string, data: any): Promise<any> {
+  return api.put(`/admin/api-keys/${id}`, data);
+}
+
+export async function deleteApiKey(id: string): Promise<void> {
+  await api.delete(`/admin/api-keys/${id}`);
+}
+
+export async function getApiKeyUsage(id: string, days?: number): Promise<any> {
+  const qs = days ? `?days=${days}` : '';
+  return api.get(`/admin/api-keys/${id}/usage${qs}`);
+}
+
+export async function getApiKeyUpscaleConfig(id: string): Promise<any> {
+  return api.get(`/admin/api-keys/${id}/upscale`);
+}
+
+export async function saveApiKeyUpscaleConfig(id: string, data: any): Promise<any> {
+  return api.put(`/admin/api-keys/${id}/upscale`, data);
+}
+
+// === V3 虚拟素材库配额 ===
+export async function getApiKeyVpV3Quota(id: string): Promise<any> {
+  return api.get(`/admin/api-keys/${id}/vp-v3-quota`);
+}
+
+export async function saveApiKeyVpV3Quota(id: string, data: { projectLimit: number; assetLimit: number; storageMbLimit: number; remark?: string | null }): Promise<any> {
+  return api.post(`/admin/api-keys/${id}/vp-v3-quota`, {
+    project_limit: data.projectLimit,
+    asset_limit: data.assetLimit,
+    storage_mb_limit: data.storageMbLimit,
+    remark: data.remark,
+  });
+}
+
+export async function revealApiKey(id: string): Promise<any> {
+  return api.get(`/admin/api-keys/${id}/reveal`);
+}
+
+// === 整体消耗列表 ===
+
+export async function getApiUsageAll(params?: {
+  skip?: number;
+  limit?: number;
+  apiKeyId?: string;
+  genType?: string;
+  status?: string;
+  startDate?: string;
+  endDate?: string;
+}): Promise<any> {
+  const query = new URLSearchParams();
+  if (params?.skip !== undefined) query.set('skip', String(params.skip));
+  if (params?.limit !== undefined) query.set('limit', String(params.limit));
+  if (params?.apiKeyId) query.set('api_key_id', params.apiKeyId);
+  if (params?.genType) query.set('gen_type', params.genType);
+  if (params?.status) query.set('status', params.status);
+  if (params?.startDate) query.set('start_date', params.startDate);
+  if (params?.endDate) query.set('end_date', params.endDate);
+  const qs = query.toString();
+  return api.get(`/admin/api-keys/usage/all${qs ? '?' + qs : ''}`);
+}
+
 export async function getPaymentConfigs(): Promise<any[]> {
   return api.get('/admin/payment-configs');
 }

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

@@ -0,0 +1,605 @@
+import React, { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import {
+  Button, Card, DatePicker, Divider, Form, Input, InputNumber, message, Modal, Popconfirm, Progress, Select, Space, Switch, Table, Tag, Typography,
+} from 'antd';
+import {
+  PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, EyeOutlined, KeyOutlined, CopyOutlined,
+} from '@ant-design/icons';
+import {
+  getApiKeys, createApiKey, updateApiKey, deleteApiKey, getApiKeyUsage, getGenerationAiEngines, revealApiKey, getApiKeyUpscaleConfig, saveApiKeyUpscaleConfig,
+  getApiKeyVpV3Quota, saveApiKeyVpV3Quota,
+} from '../api';
+import type { GenerationAiEngineOption } from '../types';
+
+interface EngineOption {
+  id: string;
+  name: string;
+  modelName: string;
+  genType: 'video' | 'image';
+}
+
+interface ApiKey {
+  id: string;
+  companyName: string;
+  apiKeyPrefix: string;
+  description: string | null;
+  callableModels?: Array<{ engineId: string; engineType: string; modelName: string }>;
+  quotaLimit: number | null;
+  quotaCycle: string | null;
+  quotaUsed: number;
+  validFrom: string | null;
+  validUntil: string | null;
+  maxConcurrentVideoTasks: number | null;
+  isActive: boolean;
+  lastUsedAt: string | null;
+  createdAt: string;
+}
+
+interface UpscaleRule {
+  targetResolution: string;
+  providerGenerationResolution: string;
+  processorKey: string;
+}
+
+const AdminApiKeys: React.FC = () => {
+  const [keys, setKeys] = useState<ApiKey[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [total, setTotal] = useState(0);
+  const [modal, setModal] = useState<{ open: boolean; key: ApiKey | null }>({ open: false, key: null });
+  const [usageModal, setUsageModal] = useState<{ open: boolean; key: ApiKey | null; usage: any }>({ open: false, key: null, usage: null });
+  const [form] = Form.useForm();
+  const [engines, setEngines] = useState<EngineOption[]>([]);
+  const [upscaleRules, setUpscaleRules] = useState<UpscaleRule[]>([]);
+  const [upscaleEnabled, setUpscaleEnabled] = useState(false);
+  const [deleteSource, setDeleteSource] = useState(false);
+
+  // V3 虚拟素材库配额（编辑时加载）
+  const [vpV3Quota, setVpV3Quota] = useState<{
+    projectLimit: number; assetLimit: number; storageMbLimit: number;
+    projectUsed: number; assetUsed: number; storageMbUsed: number;
+    enabled: boolean; remark?: string | null;
+  }>({
+    projectLimit: 0, assetLimit: 0, storageMbLimit: 0,
+    projectUsed: 0, assetUsed: 0, storageMbUsed: 0,
+    enabled: false, remark: null,
+  });
+
+  const load = async () => {
+    setLoading(true);
+    try {
+      const [keysData, enginesData] = await Promise.all([
+        getApiKeys({ limit: 100 }),
+        getGenerationAiEngines(),
+      ]);
+      setKeys(keysData?.items || keysData || []);
+      setTotal(keysData?.total || (keysData?.length || 0));
+      const allEngines: EngineOption[] = [
+        ...(enginesData?.engine?.image || []).map((e: any) => ({
+          id: e.id,
+          name: e.name || e.modelName,
+          modelName: e.modelName,
+          genType: 'image' as const,
+        })),
+        ...(enginesData?.engine?.video || []).map((e: any) => ({
+          id: e.id,
+          name: e.name || e.modelName,
+          modelName: e.modelName,
+          genType: 'video' as const,
+        })),
+      ];
+      setEngines(allEngines);
+    } catch {
+      message.error('加载失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(); }, []);
+
+  const openEdit = async (key: ApiKey | null = null) => {
+    if (key) {
+      // 将 callableModels 转换为引擎 ID 数组用于 Select
+      const selectedEngineIds = (key.callableModels || []).map((m: any) => m.engineId || m.engine_id);
+      form.setFieldsValue({
+        companyName: key.companyName || '',
+        description: key.description || '',
+        quotaLimit: key.quotaLimit || null,
+        quotaCycle: key.quotaCycle || 'monthly',
+        validUntil: key.validUntil ? dayjs(key.validUntil) : null,
+        maxConcurrentVideoTasks: key.maxConcurrentVideoTasks || null,
+        engineIds: selectedEngineIds,
+      });
+      // 并行加载：超分配置 + 虚拟素材库配额
+      await Promise.all([
+        loadUpscaleConfig(key.id),
+        (async () => {
+          try {
+            const quota = await getApiKeyVpV3Quota(key.id);
+            setVpV3Quota({
+              projectLimit: quota?.projectLimit ?? quota?.project_limit ?? 0,
+              assetLimit: quota?.assetLimit ?? quota?.asset_limit ?? 0,
+              storageMbLimit: quota?.storageMbLimit ?? quota?.storage_mb_limit ?? 0,
+              projectUsed: quota?.projectUsed ?? quota?.project_used ?? 0,
+              assetUsed: quota?.assetUsed ?? quota?.asset_used ?? 0,
+              storageMbUsed: quota?.storageMbUsed ?? quota?.storage_mb_used ?? 0,
+              enabled: !!quota?.enabled,
+              remark: quota?.remark ?? null,
+            });
+          } catch {
+            setVpV3Quota({
+              projectLimit: 0, assetLimit: 0, storageMbLimit: 0,
+              projectUsed: 0, assetUsed: 0, storageMbUsed: 0,
+              enabled: false, remark: null,
+            });
+          }
+        })(),
+      ]);
+    } else {
+      form.resetFields();
+      form.setFieldsValue({ quotaCycle: 'monthly', quotaLimit: 100, engineIds: [] });
+      setUpscaleEnabled(false);
+      setDeleteSource(false);
+      setUpscaleRules([]);
+      setVpV3Quota({
+        projectLimit: 0, assetLimit: 0, storageMbLimit: 0,
+        projectUsed: 0, assetUsed: 0, storageMbUsed: 0,
+        enabled: false, remark: null,
+      });
+    }
+    setModal({ open: true, key });
+  };
+
+  const handleSave = async () => {
+    try {
+      const values = await form.validateFields();
+      // 将选中的引擎 ID 转换为 callableModels 格式
+      const callableModels = (values.engineIds || []).map((id: string) => {
+        const engine = engines.find(e => e.id === id);
+        return {
+          engineId: id,
+          engineType: engine?.genType || 'video',
+          modelName: engine?.modelName || '',
+        };
+      });
+      const payload = {
+        companyName: values.companyName,
+        description: values.description || null,
+        quotaLimit: values.quotaLimit || null,
+        quotaCycle: values.quotaCycle || null,
+        validUntil: values.validUntil ? (values.validUntil.toISOString ? values.validUntil.toISOString() : values.validUntil) : null,
+        maxConcurrentVideoTasks: values.maxConcurrentVideoTasks || null,
+        callableModels,
+      };
+      console.log('API Key payload:', JSON.stringify(payload, null, 2));
+      if (modal.key?.id) {
+        await updateApiKey(modal.key.id, payload);
+      } else {
+        const result = await createApiKey(payload);
+        if (result?.apiKey) {
+          Modal.success({
+            title: 'API Key 创建成功',
+            content: (
+              <div>
+                <p>请妥善保存以下 API Key，此信息仅显示一次：</p>
+                <Typography.Paragraph copyable style={{ background: '#f5f5f5', padding: 12, borderRadius: 8, fontFamily: 'monospace' }}>
+                  {result.apiKey}
+                </Typography.Paragraph>
+              </div>
+            ),
+          });
+        }
+      }
+      // 保存超分配置
+      if (modal.key?.id) {
+        await saveUpscaleConfig(modal.key.id);
+        // 保存 V3 虚拟素材库配额（编辑模式才需要，因为新建时还没有 id）
+        try {
+          await saveApiKeyVpV3Quota(modal.key.id, {
+            projectLimit: vpV3Quota.projectLimit || 0,
+            assetLimit: vpV3Quota.assetLimit || 0,
+            storageMbLimit: vpV3Quota.storageMbLimit || 0,
+            remark: vpV3Quota.remark ?? null,
+          });
+        } catch (qErr: any) {
+          message.warning(qErr?.response?.data?.detail || '虚拟素材库配额保存失败');
+        }
+      }
+
+      message.success('保存成功');
+      setModal({ open: false, key: null });
+      form.resetFields();
+      load();
+    } catch (e: any) {
+      if (e?.errorFields) return;
+      message.error('保存失败');
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteApiKey(id);
+      message.success('已删除');
+      load();
+    } catch {
+      message.error('删除失败');
+    }
+  };
+
+  const handleCopyKey = async (key: ApiKey) => {
+    try {
+      const result = await revealApiKey(key.id);
+      if (result?.apiKey) {
+        await navigator.clipboard.writeText(result.apiKey);
+        message.success('API Key 已复制到剪贴板');
+      } else {
+        message.error('获取 API Key 失败');
+      }
+    } catch (e: any) {
+      const msg = e?.response?.data?.detail || '复制失败';
+      message.error(msg);
+    }
+  };
+
+  const viewUsage = async (key: ApiKey) => {
+    try {
+      const usage = await getApiKeyUsage(key.id, 30);
+      setUsageModal({ open: true, key, usage });
+    } catch {
+      message.error('加载使用统计失败');
+    }
+  };
+
+  // ── 超分配置处理 ──
+  const handleAddUpscaleRule = () => {
+    setUpscaleRules([...upscaleRules, { targetResolution: '1080p', providerGenerationResolution: '720p', processorKey: 'volc_large_model_v1' }]);
+  };
+
+  const handleRemoveUpscaleRule = (idx: number) => {
+    setUpscaleRules(upscaleRules.filter((_, i) => i !== idx));
+  };
+
+  const handleUpscaleRuleChange = (idx: number, field: keyof UpscaleRule, value: string) => {
+    const newRules = [...upscaleRules];
+    newRules[idx] = { ...newRules[idx], [field]: value };
+    setUpscaleRules(newRules);
+  };
+
+  const loadUpscaleConfig = async (keyId: string) => {
+    try {
+      const config = await getApiKeyUpscaleConfig(keyId);
+      setUpscaleEnabled(config?.data?.enabled || false);
+      setDeleteSource(config?.data?.deleteSourceAfterSuccess || false);
+      setUpscaleRules(config?.data?.rules || []);
+    } catch {
+      setUpscaleEnabled(false);
+      setDeleteSource(false);
+      setUpscaleRules([]);
+    }
+  };
+
+  const saveUpscaleConfig = async (keyId: string) => {
+    try {
+      await saveApiKeyUpscaleConfig(keyId, {
+        data: {
+          enabled: upscaleEnabled,
+          deleteSourceAfterSuccess: deleteSource,
+          rules: upscaleRules,
+        },
+      });
+      message.success('超分配置已保存');
+    } catch {
+      message.error('保存超分配置失败');
+    }
+  };
+
+  const cycleLabel = (cycle: string | null) => {
+    const map: Record<string, string> = { daily: '每日', monthly: '每月', one_time: '一次性' };
+    return cycle ? map[cycle] || cycle : '无限';
+  };
+
+  const columns = [
+    { title: '公司', dataIndex: 'companyName', width: 120, ellipsis: true },
+    {
+      title: 'Key 前缀',
+      dataIndex: 'apiKeyPrefix',
+      width: 110,
+      render: (v: string) => <code style={{ background: '#f5f5f5', padding: '2px 6px', borderRadius: 4 }}>{v}****</code>,
+    },
+    {
+      title: '配额(元)',
+      dataIndex: 'quotaLimit',
+      width: 130,
+      render: (_v: number, r: ApiKey) => {
+        if (!r.quotaLimit) return <Tag>无限</Tag>;
+        const used = r.quotaUsed || 0;
+        const limit = r.quotaLimit || 1;
+        const pct = Math.min(100, Math.round((used / limit) * 100));
+        return (
+          <div style={{ width: 110 }}>
+            <Progress percent={pct} size="small" format={() => `${used.toFixed(1)}/${limit}`} />
+          </div>
+        );
+      },
+    },
+    {
+      title: '周期',
+      dataIndex: 'quotaCycle',
+      width: 70,
+      render: (v: string | null) => <Tag>{cycleLabel(v)}</Tag>,
+    },
+    {
+      title: '状态',
+      dataIndex: 'isActive',
+      width: 70,
+      render: (v: boolean) => <Tag color={v ? 'green' : 'default'}>{v ? '启用' : '停用'}</Tag>,
+    },
+    {
+      title: '有效期',
+      dataIndex: 'validUntil',
+      width: 100,
+      render: (v: string | null) => v ? new Date(v).toLocaleDateString() : '永久',
+    },
+    {
+      title: '最后使用',
+      dataIndex: 'lastUsedAt',
+      width: 150,
+      render: (v: string | null) => v ? new Date(v).toLocaleString() : '-',
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      fixed: 'right',
+      width: 260,
+      render: (_: any, r: ApiKey) => (
+        <Space size={0}>
+          <Button type="link" size="small" icon={<CopyOutlined />} onClick={() => handleCopyKey(r)}>复制</Button>
+          <Button type="link" size="small" icon={<EyeOutlined />} onClick={() => viewUsage(r)}>统计</Button>
+          <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEdit(r)}>编辑</Button>
+          <Popconfirm title="确定删除？" onConfirm={() => handleDelete(r.id)}>
+            <Button type="link" size="small" danger icon={<DeleteOutlined />}>删除</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Space direction="vertical" size="large" style={{ width: '100%' }}>
+      <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Space>
+            <div style={{ width: 36, height: 36, borderRadius: 8, background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <ApiOutlined style={{ color: '#fff', fontSize: 18 }} />
+            </div>
+            <Typography.Text strong style={{ fontSize: 16 }}>API Key 管理</Typography.Text>
+            <Tag color="purple">{total} 个</Tag>
+          </Space>
+          <Button type="primary" icon={<PlusOutlined />} onClick={() => openEdit()}>创建 Key</Button>
+        </div>
+      </Card>
+
+      <Card variant="outlined" style={{ borderRadius: 12 }}>
+        <Table columns={columns} dataSource={keys} rowKey="id" loading={loading} pagination={false} scroll={{ x: 1100 }} />
+      </Card>
+
+      {/* 创建/编辑弹窗 */}
+      <Modal
+        title={modal.key ? '编辑 API Key' : '创建 API Key'}
+        open={modal.open}
+        onOk={handleSave}
+        onCancel={() => { setModal({ open: false, key: null }); form.resetFields(); }}
+        okText="保存" cancelText="取消" width={760}
+      >
+        <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
+          <Form.Item name="companyName" label="公司名称" rules={[{ required: true, message: '请输入公司名称' }]}>
+            <Input placeholder="公司名称" />
+          </Form.Item>
+          <Form.Item name="description" label="备注">
+            <Input.TextArea placeholder="备注信息" rows={2} />
+          </Form.Item>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="quotaLimit" label="配额总额(元)" style={{ flex: 1 }}>
+              <InputNumber min={0} step={10} style={{ width: '100%' }} placeholder="留空=无限" />
+            </Form.Item>
+            <Form.Item name="quotaCycle" label="配额周期" style={{ flex: 1 }}>
+              <Select>
+                <Select.Option value="daily">每日</Select.Option>
+                <Select.Option value="monthly">每月</Select.Option>
+                <Select.Option value="one_time">一次性</Select.Option>
+              </Select>
+            </Form.Item>
+          </div>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="validUntil" label="有效期至" style={{ flex: 1 }}>
+              <DatePicker style={{ width: '100%' }} placeholder="留空=永久" />
+            </Form.Item>
+            <Form.Item name="maxConcurrentVideoTasks" label="最大并发视频任务" style={{ flex: 1 }}>
+              <InputNumber min={1} style={{ width: '100%' }} placeholder="留空=无限" />
+            </Form.Item>
+          </div>
+          <Form.Item name="engineIds" label="可调用模型">
+            <Select
+              mode="multiple"
+              placeholder="选择该 Key 可调用的模型（留空=允许所有已定价模型）"
+              allowClear
+              showSearch
+              optionFilterProp="label"
+              style={{ width: '100%' }}
+              options={(engines || []).map(e => ({
+                label: `[${e.genType === 'video' ? '视频' : '图片'}] ${e.name || e.modelName || e.id}`,
+                value: e.id,
+              }))}
+              notFoundContent={engines.length === 0 ? '暂无可用引擎' : null}
+            />
+          </Form.Item>
+        </Form>
+
+        {/* 超分配置（独立面板） */}
+        <Divider />
+        <Typography.Text strong style={{ fontSize: 14 }}>🎬 超分配置</Typography.Text>
+        <div style={{ marginTop: 16 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
+            <Typography.Text>启用超分：</Typography.Text>
+            <Switch checked={upscaleEnabled} onChange={setUpscaleEnabled} checkedChildren="启用" unCheckedChildren="关闭" />
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
+            <Typography.Text>成功后删除源文件：</Typography.Text>
+            <Switch checked={deleteSource} onChange={setDeleteSource} checkedChildren="是" unCheckedChildren="否" />
+          </div>
+          <Typography.Text type="secondary" style={{ fontSize: 12 }}>超分规则：</Typography.Text>
+          <div style={{ marginTop: 8 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              {(upscaleRules || []).map((rule, idx) => (
+                <Card key={idx} size="small" style={{ background: '#f8f9fc' }}>
+                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                    <Select
+                      value={rule.targetResolution}
+                      onChange={v => handleUpscaleRuleChange(idx, 'targetResolution', v)}
+                      style={{ width: 100 }}
+                      options={['480p', '720p', '1080p', '2K', '4K'].map(r => ({ label: r, value: r }))}
+                    />
+                    <span>→</span>
+                    <Select
+                      value={rule.providerGenerationResolution}
+                      onChange={v => handleUpscaleRuleChange(idx, 'providerGenerationResolution', v)}
+                      style={{ width: 100 }}
+                      options={['480p', '720p', '1080p'].map(r => ({ label: r, value: r }))}
+                    />
+                    <Select
+                      value={rule.processorKey}
+                      onChange={v => handleUpscaleRuleChange(idx, 'processorKey', v)}
+                      style={{ width: 140 }}
+                      options={[
+                        { label: '本地FFmpeg', value: 'local_ffmpeg_crop_v1' },
+                        { label: '火山标准版', value: 'volc_standard_v1' },
+                        { label: '火山专业版', value: 'volc_professional_v1' },
+                        { label: '火山大模型', value: 'volc_large_model_v1' },
+                      ]}
+                    />
+                    <Popconfirm title="确定删除此规则？" onConfirm={() => handleRemoveUpscaleRule(idx)}>
+                      <Button type="link" danger size="small" icon={<DeleteOutlined />} />
+                    </Popconfirm>
+                  </div>
+                </Card>
+              ))}
+              <Button type="dashed" size="small" icon={<PlusOutlined />} onClick={handleAddUpscaleRule}>
+                添加规则
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* 虚拟素材库配额（仅编辑模式显示，新建时没ID） */}
+        {modal.key?.id && (
+          <>
+            <Divider />
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
+              <Typography.Text strong style={{ fontSize: 14 }}>🧩 V3 虚拟素材库配额</Typography.Text>
+              <Tag color={vpV3Quota.enabled ? 'green' : 'default'}>
+                {vpV3Quota.enabled ? '已启用' : '未启用（全0=不可用）'}
+              </Tag>
+            </div>
+            <div style={{ padding: '12px 16px', backgroundColor: '#f6ffed', borderRadius: 8, border: '1px solid #b7eb8f' }}>
+              <Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginBottom: 12 }}>
+                默认 0 = 该 API Key 不可使用虚拟素材库功能。项目数或素材数任一上限 &gt; 0 即启用（存储空间不再设置上限）。
+              </Typography.Text>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+                <div>
+                  <div style={{ marginBottom: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <Typography.Text strong>项目数上限</Typography.Text>
+                    <Tag color="blue">已使用 {vpV3Quota.projectUsed || 0} / {vpV3Quota.projectLimit || 0}</Tag>
+                  </div>
+                  <InputNumber
+                    min={0}
+                    max={10000}
+                    style={{ width: '100%' }}
+                    value={vpV3Quota.projectLimit}
+                    onChange={(v) => setVpV3Quota(q => ({ ...q, projectLimit: Number(v) || 0 }))}
+                    addonBefore="上限" addonAfter="个"
+                  />
+                  <Progress
+                    percent={vpV3Quota.projectLimit > 0 ? Math.min(100, Math.round((vpV3Quota.projectUsed || 0) * 100 / (vpV3Quota.projectLimit || 1))) : 0}
+                    size="small"
+                    style={{ marginTop: 6 }}
+                    strokeColor={vpV3Quota.projectLimit > 0 && (vpV3Quota.projectUsed || 0) >= vpV3Quota.projectLimit ? '#ff4d4f' : '#1677ff'}
+                  />
+                </div>
+                <div>
+                  <div style={{ marginBottom: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <Typography.Text strong>素材数上限</Typography.Text>
+                    <Tag color="blue">已使用 {vpV3Quota.assetUsed || 0} / {vpV3Quota.assetLimit || 0}</Tag>
+                  </div>
+                  <InputNumber
+                    min={0}
+                    max={1000000}
+                    style={{ width: '100%' }}
+                    value={vpV3Quota.assetLimit}
+                    onChange={(v) => setVpV3Quota(q => ({ ...q, assetLimit: Number(v) || 0 }))}
+                    addonBefore="上限" addonAfter="张"
+                  />
+                  <Progress
+                    percent={vpV3Quota.assetLimit > 0 ? Math.min(100, Math.round((vpV3Quota.assetUsed || 0) * 100 / (vpV3Quota.assetLimit || 1))) : 0}
+                    size="small"
+                    style={{ marginTop: 6 }}
+                    strokeColor={vpV3Quota.assetLimit > 0 && (vpV3Quota.assetUsed || 0) >= vpV3Quota.assetLimit ? '#ff4d4f' : '#1677ff'}
+                  />
+                </div>
+              </div>
+              {vpV3Quota.storageMbUsed > 0 && (
+                <div style={{ marginTop: 12, padding: '8px 12px', background: '#f0f5ff', borderRadius: 6, fontSize: 12, color: '#475569' }}>
+                  已使用存储空间：<strong style={{ color: '#1e40af' }}>{Number(vpV3Quota.storageMbUsed || 0).toFixed(2)} MB</strong>（无上限限制，仅供参考）
+                </div>
+              )}
+              <div style={{ marginTop: 12 }}>
+                <Typography.Text type="secondary" style={{ fontSize: 12 }}>备注（仅后台可见）：</Typography.Text>
+                <Input.TextArea
+                  rows={2}
+                  maxLength={500}
+                  placeholder="可选：配额配置说明"
+                  value={vpV3Quota.remark ?? ''}
+                  onChange={(e) => setVpV3Quota(q => ({ ...q, remark: e.target.value || null }))}
+                  style={{ marginTop: 4 }}
+                />
+              </div>
+            </div>
+          </>
+        )}
+      </Modal>
+
+      {/* 使用统计弹窗 */}
+      <Modal
+        title={`使用统计 - ${usageModal.key?.companyName || ''}`}
+        open={usageModal.open}
+        onCancel={() => setUsageModal({ open: false, key: null, usage: null })}
+        footer={null} width={640}
+      >
+        {usageModal.usage && (
+          <div>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 24 }}>
+              <Card><Typography.Text type="secondary">总请求数</Typography.Text><Typography.Title level={3} style={{ margin: 0 }}>{usageModal.usage.totalRequests}</Typography.Title></Card>
+              <Card><Typography.Text type="secondary">总消耗(元)</Typography.Text><Typography.Title level={3} style={{ margin: 0 }}>{usageModal.usage.totalCreditsCost?.toFixed(2)}</Typography.Title></Card>
+              <Card><Typography.Text type="secondary">成功率</Typography.Text><Typography.Title level={3} style={{ margin: 0 }}>{usageModal.usage.totalRequests ? ((usageModal.usage.successCount / usageModal.usage.totalRequests) * 100).toFixed(1) : 0}%</Typography.Title></Card>
+            </div>
+            <Table
+              columns={[
+                { title: '时间', dataIndex: 'createdAt', render: (v: string) => new Date(v).toLocaleString() },
+                { title: '类型', dataIndex: 'requestType' },
+                { title: '模型', dataIndex: 'modelName' },
+                { title: '消耗(元)', dataIndex: 'creditsCost' },
+                { title: '状态', dataIndex: 'status', render: (v: string) => <Tag color={v === 'success' ? 'green' : 'red'}>{v}</Tag> },
+              ]}
+              dataSource={usageModal.usage.items || []}
+              rowKey="id"
+              pagination={false}
+              size="small"
+            />
+          </div>
+        )}
+      </Modal>
+    </Space>
+  );
+};
+
+export default AdminApiKeys;

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

@@ -0,0 +1,296 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button, Card, Form, InputNumber, message, Modal, Popconfirm, Select, Space, Table, Tag, Typography,
+} from 'antd';
+import {
+  PlusOutlined, EditOutlined, DeleteOutlined, DollarOutlined,
+} from '@ant-design/icons';
+import {
+  getApiModelPricings, saveApiModelPricing, deleteApiModelPricing, getGenerationAiEngines,
+} from '../api';
+import type { GenerationAiEngineOption } from '../types';
+
+type PricingGenType = 'image' | 'video';
+
+interface ApiModelPricing {
+  id: string;
+  modelConfigId: string;
+  genType: PricingGenType | string;
+  resolution: string;
+  priceRatio: number;
+  basePrice: number;
+  perSecondPrice: number;
+  inputVideoRatio: number;
+  inputVideoBasePrice: number;
+  inputVideoPerSecondPrice: number;
+  inputImageRatio: number;
+  inputImageBasePrice: number;
+  inputImagePerImagePrice: number;
+}
+
+const DEFAULT_IMAGE_SIZES = ['2K', '4K'];
+const DEFAULT_VIDEO_RESOLUTIONS = ['480p', '720p', '1080p'];
+
+const AdminApiModelPricings: React.FC = () => {
+  const [pricings, setPricings] = useState<ApiModelPricing[]>([]);
+  const [engines, setEngines] = useState<GenerationAiEngineOption[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [modal, setModal] = useState<{ open: boolean; pricing: ApiModelPricing | null }>({ open: false, pricing: null });
+  const [form] = Form.useForm();
+  const genType = Form.useWatch('genType', form) || 'video';
+  const selectedEngineId = Form.useWatch('modelConfigId', form);
+
+  const load = async () => {
+    setLoading(true);
+    try {
+      const [pricingData, enginesData] = await Promise.all([
+        getApiModelPricings(),
+        getGenerationAiEngines(),
+      ]);
+      setPricings(pricingData);
+
+      const imageEngines: GenerationAiEngineOption[] = (enginesData?.engine?.image || []).map(engine => ({
+        ...engine,
+        genType: 'image' as const,
+      }));
+      const videoEngines: GenerationAiEngineOption[] = (enginesData?.engine?.video || []).map(engine => ({
+        ...engine,
+        genType: 'video' as const,
+      }));
+      setEngines([...imageEngines, ...videoEngines]);
+    } catch {
+      message.error('加载失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(); }, []);
+
+  const filteredEngines = engines.filter(e => e.genType === genType);
+  const selectedEngine = engines.find(e => e.id === selectedEngineId);
+  const resolutions = genType === 'video'
+    ? (selectedEngine?.supportedResolutions?.length ? selectedEngine.supportedResolutions : DEFAULT_VIDEO_RESOLUTIONS)
+    : (selectedEngine?.supportedSizes?.length ? selectedEngine.supportedSizes : DEFAULT_IMAGE_SIZES);
+
+  const openEdit = (pricing: ApiModelPricing | null = null) => {
+    if (pricing) {
+      form.setFieldsValue({
+        modelConfigId: pricing.modelConfigId,
+        genType: pricing.genType,
+        resolution: pricing.resolution,
+        priceRatio: pricing.priceRatio,
+        basePrice: pricing.basePrice,
+        perSecondPrice: pricing.perSecondPrice,
+        inputVideoRatio: pricing.inputVideoRatio,
+        inputVideoBasePrice: pricing.inputVideoBasePrice,
+        inputVideoPerSecondPrice: pricing.inputVideoPerSecondPrice,
+        inputImageRatio: pricing.inputImageRatio,
+        inputImageBasePrice: pricing.inputImageBasePrice,
+        inputImagePerImagePrice: pricing.inputImagePerImagePrice,
+      });
+    } else {
+      form.resetFields();
+      form.setFieldsValue({
+        genType: 'video',
+        priceRatio: 1.0,
+        basePrice: 0.0,
+        perSecondPrice: 0.00,
+        inputVideoRatio: 1.0,
+        inputVideoBasePrice: 0,
+        inputVideoPerSecondPrice: 0,
+        inputImageRatio: 1.0,
+        inputImageBasePrice: 0,
+        inputImagePerImagePrice: 0,
+      });
+    }
+    setModal({ open: true, pricing });
+  };
+
+  const handleSave = async () => {
+    try {
+      const values = await form.validateFields();
+      const payload = {
+        ...(modal.pricing?.id ? { id: modal.pricing.id } : {}),
+        modelConfigId: values.modelConfigId,
+        genType: values.genType,
+        resolution: values.resolution,
+        priceRatio: values.priceRatio,
+        basePrice: values.basePrice,
+        perSecondPrice: values.perSecondPrice || 0,
+        inputVideoRatio: values.inputVideoRatio || 1.0,
+        inputVideoBasePrice: values.inputVideoBasePrice || 0,
+        inputVideoPerSecondPrice: values.inputVideoPerSecondPrice || 0,
+        inputImageRatio: values.inputImageRatio || 1.0,
+        inputImageBasePrice: values.inputImageBasePrice || 0,
+        inputImagePerImagePrice: values.inputImagePerImagePrice || 0,
+      };
+      await saveApiModelPricing(payload);
+      message.success('保存成功');
+      setModal({ open: false, pricing: null });
+      form.resetFields();
+      load();
+    } catch (e: any) {
+      if (e?.errorFields) return;
+      message.error('保存失败');
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteApiModelPricing(id);
+      message.success('已删除');
+      load();
+    } catch {
+      message.error('删除失败');
+    }
+  };
+
+  const columns = [
+    {
+      title: '类型',
+      dataIndex: 'genType',
+      width: 80,
+      render: (v: string) => <Tag color={v === 'video' ? 'blue' : 'green'}>{v === 'video' ? '视频' : '图片'}</Tag>,
+    },
+    {
+      title: '引擎',
+      dataIndex: 'modelConfigId',
+      width: 160,
+      render: (v: string) => {
+        const engine = engines.find(e => e.id === v);
+        return engine?.name || v;
+      },
+    },
+    {
+      title: '分辨率',
+      dataIndex: 'resolution',
+      width: 80,
+    },
+    {
+      title: '价格系数',
+      dataIndex: 'priceRatio',
+      width: 90,
+      render: (v: number) => <span style={{ color: v >= 2 ? '#f5222d' : v >= 1.5 ? '#faad14' : '#52c41a' }}>{v}</span>,
+    },
+    {
+      title: '基础价格(元)',
+      dataIndex: 'basePrice',
+      width: 110,
+    },
+    {
+      title: '每秒价格(元)',
+      dataIndex: 'perSecondPrice',
+      width: 120,
+    },
+    {
+      title: '传入视频(元)/每秒',
+      dataIndex: 'inputVideoBasePrice',
+      width: 120,
+    },
+    {
+      title: '传入图片(元)/每张',
+      dataIndex: 'inputImageBasePrice',
+      width: 120,
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      fixed: 'right',
+      width: 150,
+      render: (_: any, r: ApiModelPricing) => (
+        <Space>
+          <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEdit(r)}>编辑</Button>
+          <Popconfirm title="确定删除？" onConfirm={() => handleDelete(r.id)}>
+            <Button type="link" size="small" danger icon={<DeleteOutlined />}>删除</Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Space direction="vertical" size="large" style={{ width: '100%' }}>
+      <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Space>
+            <div style={{ width: 36, height: 36, borderRadius: 8, background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <DollarOutlined style={{ color: '#fff', fontSize: 18 }} />
+            </div>
+            <Typography.Text strong style={{ fontSize: 16 }}>API 模型价格配置</Typography.Text>
+            <Tag color="purple">{pricings.length} 条</Tag>
+          </Space>
+          <Button type="primary" icon={<PlusOutlined />} onClick={() => openEdit()}>添加价格</Button>
+        </div>
+      </Card>
+
+      <Card variant="outlined" style={{ borderRadius: 12 }}>
+        <Table
+          columns={columns}
+          dataSource={pricings}
+          rowKey="id"
+          loading={loading}
+          pagination={false}
+          scroll={{ x: 1100 }}
+        />
+      </Card>
+
+      <Modal
+        title={modal.pricing ? '编辑价格' : '添加价格'}
+        open={modal.open}
+        onOk={handleSave}
+        onCancel={() => { setModal({ open: false, pricing: null }); form.resetFields(); }}
+        okText="保存" cancelText="取消" width={560}
+      >
+        <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="genType" label="引擎类型" rules={[{ required: true }]} style={{ flex: 1 }}>
+              <Select onChange={() => { form.setFieldsValue({ modelConfigId: undefined, resolution: undefined }); }}>
+                <Select.Option value="video">视频</Select.Option>
+                <Select.Option value="image">图片</Select.Option>
+              </Select>
+            </Form.Item>
+            <Form.Item name="modelConfigId" label="引擎" rules={[{ required: true }]} style={{ flex: 1 }}>
+              <Select placeholder="选择引擎" showSearch optionFilterProp="label">
+                {filteredEngines.map(e => (
+                  <Select.Option key={e.id} value={e.id} label={e.name}>{e.name}</Select.Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </div>
+          <Form.Item name="resolution" label="分辨率" rules={[{ required: true }]}>
+            <Select placeholder="选择分辨率">
+              {resolutions.map(r => (
+                <Select.Option key={r} value={r}>{r}</Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <div style={{ display: 'flex', gap: 16 }}>
+            <Form.Item name="priceRatio" label="价格系数" rules={[{ required: true }]} style={{ flex: 1 }}>
+              <InputNumber min={0.01} step={0.1} style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name="basePrice" label="基础价格(元)" rules={[{ required: true }]} style={{ flex: 1 }}>
+              <InputNumber min={0} step={0.1} style={{ width: '100%' }} />
+            </Form.Item>
+          </div>
+          {genType === 'video' && (
+            <Form.Item name="perSecondPrice" label="每秒价格(元)">
+              <InputNumber min={0} step={0.01} style={{ width: '100%' }} />
+            </Form.Item>
+          )}
+          <Typography.Text type="secondary" style={{ fontSize: 12 }}>传入媒体附加费</Typography.Text>
+          <div style={{ display: 'flex', gap: 16, marginTop: 8 }}>
+            <Form.Item name="inputVideoBasePrice" label="传入视频(元)/每秒" style={{ flex: 1 }}>
+              <InputNumber min={0} step={0.1} style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item name="inputImageBasePrice" label="传入图片(元)/每张" style={{ flex: 1 }}>
+              <InputNumber min={0} step={0.1} style={{ width: '100%' }} />
+            </Form.Item>
+          </div>
+        </Form>
+      </Modal>
+    </Space>
+  );
+};
+
+export default AdminApiModelPricings;

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

@@ -0,0 +1,210 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button, Card, DatePicker, Input, Select, Space, Table, Tag, Typography,
+} from 'antd';
+import {
+  TableOutlined, ReloadOutlined,
+} from '@ant-design/icons';
+import { getApiUsageAll } from '../api';
+import dayjs from 'dayjs';
+
+interface UsageItem {
+  id: string;
+  apiKeyId: string;
+  companyName: string;
+  apiKeyPrefix: string | null;
+  taskId: string | null;
+  requestType: string;
+  modelName: string;
+  genType: string;
+  creditsCost: number;
+  tokensUsed: number;
+  requestDurationMs: number;
+  status: string;
+  errorMessage: string | null;
+  errorCode: string | null;
+  createdAt: string | null;
+}
+
+const AdminApiUsage: React.FC = () => {
+  const [items, setItems] = useState<UsageItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(50);
+  const [searchCompany, setSearchCompany] = useState('');
+  const [filterGenType, setFilterGenType] = useState<string | undefined>(undefined);
+  const [filterStatus, setFilterStatus] = useState<string | undefined>(undefined);
+  const [dateRange, setDateRange] = useState<[dayjs.Dayjs | null, dayjs.Dayjs | null]>([null, null]);
+
+  const load = async () => {
+    setLoading(true);
+    try {
+      const params: any = {
+        skip: (page - 1) * pageSize,
+        limit: pageSize,
+      };
+      if (filterGenType) params.genType = filterGenType;
+      if (filterStatus) params.status = filterStatus;
+      if (dateRange[0]) params.startDate = dateRange[0].startOf('day').toISOString();
+      if (dateRange[1]) params.endDate = dateRange[1].endOf('day').toISOString();
+
+      const data = await getApiUsageAll(params);
+      setItems(data?.items || []);
+      setTotal(data?.total || 0);
+    } catch {
+      message.error('加载失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(); }, [page, pageSize, filterGenType, filterStatus, dateRange]);
+
+  const handleSearch = () => {
+    setPage(1);
+    load();
+  };
+
+  const columns = [
+    {
+      title: '时间',
+      dataIndex: 'createdAt',
+      width: 160,
+      render: (v: string) => v ? new Date(v).toLocaleString() : '-',
+    },
+    {
+      title: '公司',
+      dataIndex: 'companyName',
+      width: 120,
+      render: (v: string) => v || '-',
+    },
+    {
+      title: 'Key 前缀',
+      dataIndex: 'apiKeyPrefix',
+      width: 110,
+      render: (v: string) => v ? <code style={{ background: '#f5f5f5', padding: '2px 6px', borderRadius: 4 }}>{v}</code> : '-',
+    },
+    {
+      title: '类型',
+      dataIndex: 'genType',
+      width: 70,
+      render: (v: string) => <Tag color={v === 'video' ? 'blue' : 'green'}>{v === 'video' ? '视频' : '图片'}</Tag>,
+    },
+    {
+      title: '模型',
+      dataIndex: 'modelName',
+      width: 160,
+      ellipsis: true,
+    },
+    {
+      title: '消耗(元)',
+      dataIndex: 'creditsCost',
+      width: 90,
+      render: (v: number) => <span style={{ color: v > 0 ? '#f5222d' : '#52c41a', fontWeight: 500 }}>{v?.toFixed(2) || '0.00'}</span>,
+    },
+    {
+      title: 'Token',
+      dataIndex: 'tokensUsed',
+      width: 80,
+      render: (v: number) => v || '-',
+    },
+    {
+      title: '耗时(ms)',
+      dataIndex: 'requestDurationMs',
+      width: 90,
+      render: (v: number) => v || '-',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 80,
+      render: (v: string) => <Tag color={v === 'success' ? 'green' : 'red'}>{v === 'success' ? '成功' : '失败'}</Tag>,
+    },
+    {
+      title: '错误信息',
+      dataIndex: 'errorMessage',
+      width: 200,
+      ellipsis: true,
+      render: (v: string) => v ? <span style={{ color: '#f5222d' }}>{v}</span> : '-',
+    },
+  ];
+
+  // 统计
+  const totalCost = items.reduce((sum, item) => sum + (item.creditsCost || 0), 0);
+  const successCount = items.filter(i => i.status === 'success').length;
+  const failedCount = items.filter(i => i.status === 'failed').length;
+
+  return (
+    <Space direction="vertical" size="large" style={{ width: '100%' }}>
+      <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Space>
+            <div style={{ width: 36, height: 36, borderRadius: 8, background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <TableOutlined style={{ color: '#fff', fontSize: 18 }} />
+            </div>
+            <Typography.Text strong style={{ fontSize: 16 }}>API 消耗列表</Typography.Text>
+            <Tag color="purple">{total} 条</Tag>
+          </Space>
+          <Space>
+            <Tag color="blue">本页消耗: {totalCost.toFixed(2)} 元</Tag>
+            <Tag color="green">成功: {successCount}</Tag>
+            <Tag color="red">失败: {failedCount}</Tag>
+            <Button icon={<ReloadOutlined />} onClick={handleSearch}>刷新</Button>
+          </Space>
+        </div>
+      </Card>
+
+      {/* 筛选栏 */}
+      <Card variant="outlined" style={{ borderRadius: 12 }}>
+        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Select
+            placeholder="类型"
+            value={filterGenType}
+            onChange={v => { setFilterGenType(v); setPage(1); }}
+            allowClear
+            style={{ width: 100 }}
+          >
+            <Select.Option value="video">视频</Select.Option>
+            <Select.Option value="image">图片</Select.Option>
+          </Select>
+          <Select
+            placeholder="状态"
+            value={filterStatus}
+            onChange={v => { setFilterStatus(v); setPage(1); }}
+            allowClear
+            style={{ width: 100 }}
+          >
+            <Select.Option value="success">成功</Select.Option>
+            <Select.Option value="failed">失败</Select.Option>
+          </Select>
+          <DatePicker.RangePicker
+            value={dateRange}
+            onChange={(dates) => { setDateRange(dates as [dayjs.Dayjs | null, dayjs.Dayjs | null]); setPage(1); }}
+          />
+          <Button type="primary" onClick={handleSearch}>筛选</Button>
+        </div>
+      </Card>
+
+      <Card variant="outlined" style={{ borderRadius: 12 }}>
+        <Table
+          columns={columns}
+          dataSource={items}
+          rowKey="id"
+          loading={loading}
+          pagination={{
+            current: page,
+            pageSize,
+            total,
+            onChange: (p, ps) => { setPage(p); setPageSize(ps || 50); },
+            showSizeChanger: true,
+            showTotal: (t) => `共 ${t} 条`,
+          }}
+          scroll={{ x: 1300 }}
+        />
+      </Card>
+    </Space>
+  );
+};
+
+export default AdminApiUsage;

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

@@ -121,7 +121,7 @@ const AdminVideoEngines: React.FC = () => {
       form.setFieldsValue({
           isActive: true, priority: 0,
           multiGenerationEnabled: false, maxGenerationCount: 1,
-          maxDuration: 30,
+          maxDuration: 15,
           maxImageCount: 2,
           maxVideoCount: 0,
           maxAudioCount: 0,
@@ -286,7 +286,7 @@ const AdminVideoEngines: React.FC = () => {
             </Form.Item>
             <Form.Item name="supportedDurations" label="支持时长(秒)" style={{ flex: 1 }}>
               <Select mode="multiple" size="large" options={
-                Array.from({ length: 12 }, (_, i) => ({ value: i + 4, label: `${i + 4}秒` }))
+                Array.from({ length: 27 }, (_, i) => ({ value: i + 4, label: `${i + 4}秒` }))
               } />
             </Form.Item>
           </div>