([]);
+ const [uploadOpen, setUploadOpen] = useState(false);
+ const [reloadKey, setReloadKey] = useState(0);
+
+ const loadBase = async () => {
+ const [catRes, wmRes] = await Promise.all([
+ getHomeMaterialCategories({ page: 1, pageSize: 200 }),
+ getHomeMaterialWatermarks({ page: 1, pageSize: 200, isActive: true }),
+ ]);
+ setCategories(catRes.items);
+ setWatermarks(wmRes.items);
+ };
+
+ const loadConfig = async () => {
+ setConfigLoading(true);
+ try {
+ const cfg = await getHomeMaterialConfig();
+ form.setFieldsValue(cfg);
+ } finally {
+ setConfigLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadConfig();
+ loadBase();
+ }, []);
+
+ const saveConfig = async () => {
+ const values = await form.validateFields();
+ await saveHomeMaterialConfig(values);
+ message.success('配置已保存');
+ };
+
+ const refreshAll = async () => {
+ await loadBase();
+ setReloadKey(k => k + 1);
+ };
+
+ return (
+
+
+
+
+
+
+
+ } onClick={() => setUploadOpen(true)}>上传素材
+
+ )}
+ >
+ ,
+ },
+ {
+ key: 'categories',
+ label: '行业类别',
+ children: ,
+ },
+ {
+ key: 'watermarks',
+ label: '水印库',
+ children: ,
+ },
+ ]}
+ />
+
+
+ setUploadOpen(false)}
+ categories={categories}
+ watermarks={watermarks}
+ onSuccess={refreshAll}
+ />
+
+ );
+};
+
+export default AdminHomeMaterials;
diff --git a/video-gen-admin/src/pages/homeMaterials/HomeMaterialAssetTable.tsx b/video-gen-admin/src/pages/homeMaterials/HomeMaterialAssetTable.tsx
new file mode 100644
index 00000000..8dd8caa9
--- /dev/null
+++ b/video-gen-admin/src/pages/homeMaterials/HomeMaterialAssetTable.tsx
@@ -0,0 +1,333 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Dropdown, Image, Modal, Select, Space, Table, Tag, message } from 'antd';
+import { DeleteOutlined, MoreOutlined, ReloadOutlined } from '@ant-design/icons';
+import {
+ deleteHomeMaterialAsset,
+ getHomeMaterialAssetStatus,
+ getHomeMaterialAssets,
+ regenerateHomeMaterialWatermark,
+} from '../../api';
+import type {
+ HomeMaterialAsset,
+ HomeMaterialAssetQueryParams,
+ HomeMaterialCategory,
+ HomeMaterialWatermark,
+ HomeMaterialWatermarkConfig,
+ HomeMaterialTextWatermarkConfig,
+} from '../../types';
+import { apiUrl } from '../../utils/resourceUrl';
+import WatermarkEditor from './WatermarkEditor';
+
+interface Props {
+ categories: HomeMaterialCategory[];
+ watermarks: HomeMaterialWatermark[];
+ reloadKey?: number;
+}
+
+const statusMap: Record = {
+ draft: { text: '草稿', color: 'default' },
+ processing: { text: '处理中', color: 'processing' },
+ success: { text: '成功', color: 'success' },
+ failed: { text: '失败', color: 'error' },
+};
+
+const defaultTextWatermark: HomeMaterialTextWatermarkConfig = {
+ text: '民众普康 AI',
+ opacityLevel: 2,
+ fontSizePx: 28,
+ color: '#ffffff',
+ rotateDeg: -30,
+ gapX: 220,
+ gapY: 140,
+ staggered: true,
+};
+
+const defaultConfig: HomeMaterialWatermarkConfig = {
+ watermarkType: 'image',
+ watermarkId: null,
+ opacityLevel: 6,
+ position: 'bottom_right',
+ customXRatio: null,
+ customYRatio: null,
+ sizeMode: 'ratio',
+ widthRatio: 0.18,
+ widthPx: null,
+ marginX: 24,
+ marginY: 24,
+ textWatermark: defaultTextWatermark,
+};
+
+function normalizeTextConfig(raw: any): HomeMaterialTextWatermarkConfig {
+ return {
+ text: raw?.text || defaultTextWatermark.text,
+ opacityLevel: raw?.opacityLevel ?? raw?.opacity_level ?? defaultTextWatermark.opacityLevel,
+ fontSizePx: raw?.fontSizePx ?? raw?.font_size_px ?? defaultTextWatermark.fontSizePx,
+ color: raw?.color || defaultTextWatermark.color,
+ rotateDeg: raw?.rotateDeg ?? raw?.rotate_deg ?? defaultTextWatermark.rotateDeg,
+ gapX: raw?.gapX ?? raw?.gap_x ?? defaultTextWatermark.gapX,
+ gapY: raw?.gapY ?? raw?.gap_y ?? defaultTextWatermark.gapY,
+ staggered: raw?.staggered ?? defaultTextWatermark.staggered,
+ };
+}
+
+function normalizeConfig(raw: unknown, fallbackWatermarkId?: string | null): HomeMaterialWatermarkConfig {
+ const data = (raw || {}) as any;
+ const watermarkType = data.watermarkType || data.watermark_type || 'image';
+ return {
+ watermarkType,
+ watermarkId: watermarkType === 'repeated_text' ? null : (data.watermarkId || data.watermark_id || fallbackWatermarkId || null),
+ opacityLevel: data.opacityLevel || data.opacity_level || 6,
+ position: data.position || 'bottom_right',
+ customXRatio: data.customXRatio ?? data.custom_x_ratio ?? null,
+ customYRatio: data.customYRatio ?? data.custom_y_ratio ?? null,
+ sizeMode: data.sizeMode || data.size_mode || 'ratio',
+ widthRatio: data.widthRatio ?? data.width_ratio ?? 0.18,
+ widthPx: data.widthPx ?? data.width_px ?? null,
+ marginX: data.marginX ?? data.margin_x ?? 24,
+ marginY: data.marginY ?? data.margin_y ?? 24,
+ textWatermark: normalizeTextConfig(data.textWatermark || data.text_watermark),
+ };
+}
+
+function isValidConfig(config: HomeMaterialWatermarkConfig): boolean {
+ if (config.watermarkType === 'repeated_text') return !!config.textWatermark?.text?.trim();
+ return !!config.watermarkId;
+}
+
+const HomeMaterialAssetTable: React.FC = ({ categories, watermarks, reloadKey }) => {
+ const [items, setItems] = useState([]);
+ const [total, setTotal] = useState(0);
+ const [loading, setLoading] = useState(false);
+ const [filters, setFilters] = useState({ page: 1, pageSize: 20 });
+ const [preview, setPreview] = useState(null);
+ const [regen, setRegen] = useState(null);
+ const [regenConfig, setRegenConfig] = useState(defaultConfig);
+ const [regenSubmitting, setRegenSubmitting] = useState(false);
+
+ const load = async () => {
+ setLoading(true);
+ try {
+ const res = await getHomeMaterialAssets(filters);
+ setItems(res.items);
+ setTotal(res.total);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => { load(); }, [filters, reloadKey]);
+
+ useEffect(() => {
+ const processing = items.filter(i => i.status === 'processing');
+ if (processing.length === 0) return;
+ const timer = window.setInterval(async () => {
+ const statuses = await Promise.all(processing.map(i => getHomeMaterialAssetStatus(i.id).catch(() => null)));
+ const changed = statuses.some(s => s && s.status !== 'processing');
+ if (changed) load();
+ }, 2500);
+ return () => window.clearInterval(timer);
+ }, [items]);
+
+ const openRegenerate = (row: HomeMaterialAsset) => {
+ setRegen(row);
+ setRegenConfig(normalizeConfig(row.watermarkConfig, row.watermarkId));
+ };
+
+ const getPreviewImageUrl = (row: HomeMaterialAsset) => {
+ if (row.mediaType === 'image') return apiUrl(row.watermarkedUrl || row.originalUrl);
+ return apiUrl(row.coverUrl || '');
+ };
+
+ const getVideoUrl = (row: HomeMaterialAsset) => apiUrl(row.watermarkedUrl || row.originalUrl);
+
+ const confirmDelete = (row: HomeMaterialAsset) => {
+ Modal.confirm({
+ title: '确认删除该素材？',
+ content: row.title || row.id,
+ okText: '删除',
+ okButtonProps: { danger: true },
+ cancelText: '取消',
+ async onOk() {
+ await deleteHomeMaterialAsset(row.id);
+ message.success('删除成功');
+ await load();
+ },
+ });
+ };
+
+ const submitRegenerate = async () => {
+ if (!regen || regenSubmitting) return;
+ if (!isValidConfig(regenConfig)) {
+ message.warning(regenConfig.watermarkType === 'repeated_text' ? '请输入重复文字水印内容' : '请选择水印图片');
+ return;
+ }
+ setRegenSubmitting(true);
+ try {
+ await regenerateHomeMaterialWatermark(regen.id, {
+ watermark_type: regenConfig.watermarkType,
+ watermark_id: regenConfig.watermarkType === 'image' ? regenConfig.watermarkId : null,
+ opacity_level: regenConfig.opacityLevel,
+ position: regenConfig.position,
+ custom_x_ratio: regenConfig.customXRatio,
+ custom_y_ratio: regenConfig.customYRatio,
+ size_mode: regenConfig.sizeMode,
+ width_ratio: regenConfig.widthRatio,
+ width_px: regenConfig.widthPx,
+ margin_x: regenConfig.marginX,
+ margin_y: regenConfig.marginY,
+ text_watermark: regenConfig.watermarkType === 'repeated_text' && regenConfig.textWatermark ? {
+ text: regenConfig.textWatermark.text,
+ opacity_level: regenConfig.textWatermark.opacityLevel,
+ font_size_px: regenConfig.textWatermark.fontSizePx,
+ color: regenConfig.textWatermark.color,
+ rotate_deg: regenConfig.textWatermark.rotateDeg,
+ gap_x: regenConfig.textWatermark.gapX,
+ gap_y: regenConfig.textWatermark.gapY,
+ staggered: regenConfig.textWatermark.staggered,
+ } : null,
+ wait: false,
+ });
+ message.success('已提交重新生成');
+ setRegen(null);
+ await load();
+ } finally {
+ setRegenSubmitting(false);
+ }
+ };
+
+ return (
+ <>
+
+
+ setFilters(f => ({ ...f, page, pageSize })) }}
+ scroll={{ x: 1180 }}
+ columns={[
+ {
+ title: '预览',
+ width: 110,
+ render: (_: unknown, row: HomeMaterialAsset) => {
+ const imageUrl = getPreviewImageUrl(row);
+ if (row.mediaType === 'image') {
+ return imageUrl ? : '-';
+ }
+ const videoUrl = getVideoUrl(row);
+ const posterUrl = apiUrl(row.coverUrl || '');
+ return videoUrl ? (
+
+ ) : '-';
+ },
+ },
+ { title: '标题', dataIndex: 'title', render: (v: string | null) => v || 未命名素材 },
+ { title: '行业', dataIndex: 'categoryName' },
+ { title: '类型', dataIndex: 'mediaType', render: (v: string) => v === 'image' ? '图片' : '视频' },
+ { title: '状态', dataIndex: 'status', render: (v: string) => {statusMap[v]?.text || v} },
+ {
+ title: '水印',
+ render: (_: unknown, row: HomeMaterialAsset) => {
+ const cfg = normalizeConfig(row.watermarkConfig, row.watermarkId);
+ return cfg.watermarkType === 'repeated_text' ? '重复文字水印' : (row.watermarkName || '图片水印');
+ },
+ },
+ { title: '排序', dataIndex: 'sortOrder' },
+ { title: '错误', dataIndex: 'errorMessage', ellipsis: true },
+ {
+ title: '操作',
+ width: 150,
+ align: 'center' as const,
+ render: (_: unknown, row: HomeMaterialAsset) => (
+
+
+ , label: '重新生成水印' },
+ { key: 'delete', icon: , label: '删除素材', danger: true },
+ ],
+ onClick: ({ key }) => {
+ if (key === 'regenerate') openRegenerate(row);
+ if (key === 'delete') confirmDelete(row);
+ },
+ }}
+ >
+ }>更多
+
+
+ ),
+ },
+ ]}
+ />
+ setPreview(null)} footer={null} width={900} destroyOnHidden>
+ {preview && (
+
+ 原素材：{preview.originalUrl ? apiUrl(preview.originalUrl) : '-'}
+ 水印素材：{preview.watermarkedUrl ? apiUrl(preview.watermarkedUrl) : '-'}
+ {preview.mediaType === 'image' ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+ !regenSubmitting && setRegen(null)}
+ onOk={submitRegenerate}
+ confirmLoading={regenSubmitting}
+ okButtonProps={{ disabled: regenSubmitting || !isValidConfig(regenConfig) }}
+ cancelButtonProps={{ disabled: regenSubmitting }}
+ width={980}
+ destroyOnHidden
+ >
+ {regen && (
+
+ )}
+
+
+ );
+};
+
+export default HomeMaterialAssetTable;
diff --git a/video-gen-admin/src/pages/homeMaterials/HomeMaterialCategoryPanel.tsx b/video-gen-admin/src/pages/homeMaterials/HomeMaterialCategoryPanel.tsx
new file mode 100644
index 00000000..cae0d530
--- /dev/null
+++ b/video-gen-admin/src/pages/homeMaterials/HomeMaterialCategoryPanel.tsx
@@ -0,0 +1,156 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Table, message } from 'antd';
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import * as AntIcons from '@ant-design/icons';
+import { deleteHomeMaterialCategory, getHomeMaterialCategories, saveHomeMaterialCategory } from '../../api';
+import type { HomeMaterialCategory, HomeMaterialCategoryPayload } from '../../types';
+
+
+const ICON_COMPONENTS = AntIcons as unknown as Record>;
+
+const CATEGORY_ICON_OPTIONS = [
+ { label: '通用应用', value: 'AppstoreOutlined' },
+ { label: '图片素材', value: 'PictureOutlined' },
+ { label: '视频素材', value: 'VideoCameraOutlined' },
+ { label: '电商购物', value: 'ShoppingOutlined' },
+ { label: '门店商铺', value: 'ShopOutlined' },
+ { label: '美妆护肤', value: 'SkinOutlined' },
+ { label: '餐饮食品', value: 'CoffeeOutlined' },
+ { label: '家居生活', value: 'HomeOutlined' },
+ { label: '汽车出行', value: 'CarOutlined' },
+ { label: '医疗健康', value: 'MedicineBoxOutlined' },
+ { label: '教育培训', value: 'BookOutlined' },
+ { label: '数码科技', value: 'LaptopOutlined' },
+ { label: '旅游定位', value: 'EnvironmentOutlined' },
+ { label: '摄影影像', value: 'CameraOutlined' },
+ { label: '礼品活动', value: 'GiftOutlined' },
+ { label: '热门爆款', value: 'FireOutlined' },
+ { label: '品牌服务', value: 'CustomerServiceOutlined' },
+ { label: '营销增长', value: 'RocketOutlined' },
+ { label: '机构企业', value: 'BankOutlined' },
+ { label: '娱乐休闲', value: 'SmileOutlined' },
+];
+
+function renderIconOption(value?: string | null, label?: string) {
+ if (!value) {
+ return 未设置;
+ }
+ const Icon = ICON_COMPONENTS[value];
+ return (
+
+ {Icon ? : null}
+ {label || value}
+ {value}
+
+ );
+}
+
+const HomeMaterialCategoryPanel: React.FC<{ onChanged?: () => void }> = ({ onChanged }) => {
+ const [items, setItems] = useState([]);
+ const [total, setTotal] = useState(0);
+ const [loading, setLoading] = useState(false);
+ const [page, setPage] = useState(1);
+ const [modalOpen, setModalOpen] = useState(false);
+ const [editing, setEditing] = useState(null);
+ const [form] = Form.useForm();
+
+ const load = async () => {
+ setLoading(true);
+ try {
+ const res = await getHomeMaterialCategories({ page, pageSize: 20 });
+ setItems(res.items);
+ setTotal(res.total);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => { load(); }, [page]);
+
+ const openEdit = (row?: HomeMaterialCategory) => {
+ setEditing(row || null);
+ form.setFieldsValue(row ? {
+ name: row.name,
+ key: row.key,
+ description: row.description,
+ icon: row.icon,
+ is_active: row.isActive,
+ sort_order: row.sortOrder,
+ } : { is_active: true, sort_order: 0 });
+ setModalOpen(true);
+ };
+
+ const submit = async () => {
+ const values = await form.validateFields();
+ await saveHomeMaterialCategory({ ...(values as HomeMaterialCategoryPayload), id: editing?.id });
+ message.success('保存成功');
+ setModalOpen(false);
+ await load();
+ onChanged?.();
+ };
+
+ return (
+ <>
+
+
+
} onClick={() => openEdit()}>新增行业
+
renderIconOption(v) },
+ { title: '启用', dataIndex: 'isActive', render: (v: boolean) => v ? '启用' : '禁用' },
+ { title: '素材数', dataIndex: 'assetCount' },
+ { title: '图片/视频', render: (_: unknown, r: HomeMaterialCategory) => `${r.imageCount}/${r.videoCount}` },
+ { title: '排序', dataIndex: 'sortOrder' },
+ {
+ title: '操作',
+ render: (_: unknown, row: HomeMaterialCategory) => (
+
+ } onClick={() => openEdit(row)}>编辑
+ { await deleteHomeMaterialCategory(row.id); message.success('删除成功'); await load(); onChanged?.(); }}>
+ }>删除
+
+
+ ),
+ },
+ ]}
+ />
+ setModalOpen(false)} destroyOnHidden>
+
+
+
+ );
+};
+
+export default HomeMaterialCategoryPanel;
diff --git a/video-gen-admin/src/pages/homeMaterials/HomeMaterialUploadModal.tsx b/video-gen-admin/src/pages/homeMaterials/HomeMaterialUploadModal.tsx
new file mode 100644
index 00000000..ba4a3596
--- /dev/null
+++ b/video-gen-admin/src/pages/homeMaterials/HomeMaterialUploadModal.tsx
@@ -0,0 +1,208 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Form, Input, InputNumber, Modal, Select, Switch, Upload, Button, message } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { uploadHomeMaterialAsset } from '../../api';
+import type { HomeMaterialCategory, HomeMaterialMediaType, HomeMaterialWatermark, HomeMaterialWatermarkConfig } from '../../types';
+import WatermarkEditor from './WatermarkEditor';
+
+interface Props {
+ open: boolean;
+ onClose: () => void;
+ categories: HomeMaterialCategory[];
+ watermarks: HomeMaterialWatermark[];
+ onSuccess: () => void;
+}
+
+const defaultConfig: HomeMaterialWatermarkConfig = {
+ watermarkType: 'image',
+ watermarkId: null,
+ opacityLevel: 6,
+ position: 'bottom_right',
+ customXRatio: null,
+ customYRatio: null,
+ sizeMode: 'ratio',
+ widthRatio: 0.18,
+ widthPx: null,
+ marginX: 24,
+ marginY: 24,
+ textWatermark: {
+ text: '民众普康 AI',
+ opacityLevel: 2,
+ fontSizePx: 28,
+ color: '#ffffff',
+ rotateDeg: -30,
+ gapX: 220,
+ gapY: 140,
+ staggered: true,
+ },
+};
+
+function isValidConfig(config: HomeMaterialWatermarkConfig): boolean {
+ if (config.watermarkType === 'repeated_text') return !!config.textWatermark?.text?.trim();
+ return !!config.watermarkId;
+}
+
+const HomeMaterialUploadModal: React.FC = ({ open, onClose, categories, watermarks, onSuccess }) => {
+ const [form] = Form.useForm();
+ const [file, setFile] = useState(null);
+ const [fileList, setFileList] = useState([]);
+ const [mediaType, setMediaType] = useState('image');
+ const [config, setConfig] = useState(defaultConfig);
+ const [submitting, setSubmitting] = useState(false);
+ const [mediaObjectUrl, setMediaObjectUrl] = useState('');
+
+ const resetState = () => {
+ setFile(null);
+ setFileList([]);
+ setMediaType('image');
+ setMediaObjectUrl('');
+ setSubmitting(false);
+ };
+
+ useEffect(() => {
+ if (open) {
+ resetState();
+ const defaultWatermark = watermarks.find(w => w.isDefault) || watermarks[0];
+ setConfig({ ...defaultConfig, watermarkId: defaultWatermark?.id || null });
+ form.setFieldsValue({ media_type: 'image', is_active: true, sort_order: 0, title: undefined });
+ }
+ }, [open, watermarks, form]);
+
+ useEffect(() => {
+ return () => {
+ if (mediaObjectUrl.startsWith('blob:')) URL.revokeObjectURL(mediaObjectUrl);
+ };
+ }, [mediaObjectUrl]);
+
+ const mediaUrl = useMemo(() => mediaObjectUrl || undefined, [mediaObjectUrl]);
+
+ const handleBeforeUpload = (selectedFile: File) => {
+ const isImage = selectedFile.type.startsWith('image/');
+ const isVideo = selectedFile.type.startsWith('video/');
+
+ if (mediaType === 'image' && !isImage) {
+ message.warning('当前素材类型为图片，请选择图片文件');
+ return Upload.LIST_IGNORE;
+ }
+ if (mediaType === 'video' && !isVideo) {
+ message.warning('当前素材类型为视频，请选择视频文件');
+ return Upload.LIST_IGNORE;
+ }
+
+ if (mediaObjectUrl.startsWith('blob:')) URL.revokeObjectURL(mediaObjectUrl);
+ const nextUrl = URL.createObjectURL(selectedFile);
+ setFile(selectedFile);
+ setMediaObjectUrl(nextUrl);
+ setFileList([{ uid: selectedFile.name, name: selectedFile.name, status: 'done', originFileObj: selectedFile }]);
+ return false;
+ };
+
+ const handleRemoveFile = () => {
+ setFile(null);
+ setFileList([]);
+ if (mediaObjectUrl.startsWith('blob:')) URL.revokeObjectURL(mediaObjectUrl);
+ setMediaObjectUrl('');
+ };
+
+ const changeMediaType = (value: HomeMaterialMediaType) => {
+ setMediaType(value);
+ handleRemoveFile();
+ };
+
+ const closeModal = () => {
+ if (submitting) return;
+ onClose();
+ };
+
+ const submit = async () => {
+ if (submitting) return;
+ const values = await form.validateFields();
+ if (!file) {
+ message.warning('请选择素材文件');
+ return;
+ }
+ if (config.watermarkType === 'image' && !config.watermarkId) {
+ message.warning('请选择水印图片');
+ return;
+ }
+ if (config.watermarkType === 'repeated_text' && !config.textWatermark?.text?.trim()) {
+ message.warning('请输入重复文字水印内容');
+ return;
+ }
+ setSubmitting(true);
+ try {
+ const res = await uploadHomeMaterialAsset({
+ categoryId: values.category_id,
+ file,
+ mediaType,
+ title: values.title?.trim() || null,
+ watermarkType: config.watermarkType,
+ watermarkId: config.watermarkType === 'image' ? config.watermarkId : null,
+ opacityLevel: config.opacityLevel,
+ position: config.position,
+ customXRatio: config.customXRatio,
+ customYRatio: config.customYRatio,
+ sizeMode: config.sizeMode,
+ widthRatio: config.widthRatio,
+ widthPx: config.widthPx,
+ marginX: config.marginX,
+ marginY: config.marginY,
+ textWatermark: config.watermarkType === 'repeated_text' ? config.textWatermark : null,
+ isActive: values.is_active,
+ sortOrder: values.sort_order,
+ wait: false,
+ });
+ message.success(res.message || '已提交水印处理');
+ onSuccess();
+ onClose();
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ return (
+
+
+
+
+ );
+};
+
+export default HomeMaterialUploadModal;
diff --git a/video-gen-admin/src/pages/homeMaterials/WatermarkEditor.tsx b/video-gen-admin/src/pages/homeMaterials/WatermarkEditor.tsx
new file mode 100644
index 00000000..92815888
--- /dev/null
+++ b/video-gen-admin/src/pages/homeMaterials/WatermarkEditor.tsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import { Col, Form, Input, InputNumber, Radio, Row, Select, Slider, Switch } from 'antd';
+import type { HomeMaterialMediaType, HomeMaterialWatermark, HomeMaterialWatermarkConfig } from '../../types';
+import WatermarkPreview from './WatermarkPreview';
+
+interface WatermarkEditorProps {
+ value: HomeMaterialWatermarkConfig;
+ onChange: (next: HomeMaterialWatermarkConfig) => void;
+ watermarks: HomeMaterialWatermark[];
+ mediaUrl?: string | null;
+ mediaType?: HomeMaterialMediaType;
+}
+
+const positionOptions = [
+ { label: '左上角', value: 'top_left' },
+ { label: '顶部居中', value: 'top_center' },
+ { label: '右上角', value: 'top_right' },
+ { label: '左侧居中', value: 'middle_left' },
+ { label: '正中间', value: 'center' },
+ { label: '右侧居中', value: 'middle_right' },
+ { label: '左下角', value: 'bottom_left' },
+ { label: '底部居中', value: 'bottom_center' },
+ { label: '右下角', value: 'bottom_right' },
+ { label: '拖拽自定义', value: 'custom' },
+];
+
+const defaultTextWatermark = {
+ text: '民众普康 AI',
+ opacityLevel: 2,
+ fontSizePx: 28,
+ color: '#ffffff',
+ rotateDeg: -30,
+ gapX: 220,
+ gapY: 140,
+ staggered: true,
+};
+
+const WatermarkEditor: React.FC = ({ value, onChange, watermarks, mediaUrl, mediaType }) => {
+ const patch = (partial: Partial) => onChange({ ...value, ...partial });
+ const patchText = (partial: Partial>) => {
+ patch({ textWatermark: { ...defaultTextWatermark, ...(value.textWatermark || {}), ...partial } });
+ };
+ const watermarkUrl = watermarks.find(w => w.id === value.watermarkId)?.fileUrl;
+ const textWatermark = { ...defaultTextWatermark, ...(value.textWatermark || {}) };
+
+ return (
+
+
+
+ patch(partial)}
+ />
+
+ );
+};
+
+export default WatermarkEditor;
diff --git a/video-gen-admin/src/pages/homeMaterials/WatermarkLibraryModal.tsx b/video-gen-admin/src/pages/homeMaterials/WatermarkLibraryModal.tsx
new file mode 100644
index 00000000..0f6eb3e3
--- /dev/null
+++ b/video-gen-admin/src/pages/homeMaterials/WatermarkLibraryModal.tsx
@@ -0,0 +1,207 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Image, Input, Modal, Popconfirm, Space, Switch, Table, Upload, message } from 'antd';
+import { DeleteOutlined, EditOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { deleteHomeMaterialWatermark, getHomeMaterialWatermarks, updateHomeMaterialWatermark, uploadHomeMaterialWatermark } from '../../api';
+import type { HomeMaterialWatermark } from '../../types';
+import { apiUrl } from '../../utils/resourceUrl';
+
+interface Props {
+ open?: boolean;
+ onClose?: () => void;
+ embedded?: boolean;
+ onChanged?: () => void;
+}
+
+const WatermarkLibraryModal: React.FC = ({ open = true, onClose, embedded = false, onChanged }) => {
+ const [items, setItems] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [uploadOpen, setUploadOpen] = useState(false);
+ const [editing, setEditing] = useState(null);
+ const [file, setFile] = useState(null);
+ const [fileList, setFileList] = useState([]);
+ const [previewUrl, setPreviewUrl] = useState('');
+ const [submitting, setSubmitting] = useState(false);
+ const [form] = Form.useForm();
+
+ const load = async () => {
+ setLoading(true);
+ try {
+ const res = await getHomeMaterialWatermarks({ page: 1, pageSize: 200 });
+ setItems(res.items);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => { if (open) load(); }, [open]);
+
+ useEffect(() => {
+ return () => {
+ if (previewUrl.startsWith('blob:')) URL.revokeObjectURL(previewUrl);
+ };
+ }, [previewUrl]);
+
+ const resetUploadState = () => {
+ setFile(null);
+ setFileList([]);
+ setPreviewUrl('');
+ setSubmitting(false);
+ };
+
+ const openUpload = () => {
+ setEditing(null);
+ resetUploadState();
+ form.setFieldsValue({ name: '', is_default: false, is_active: true });
+ setUploadOpen(true);
+ };
+
+ const openEdit = (row: HomeMaterialWatermark) => {
+ setEditing(row);
+ resetUploadState();
+ setPreviewUrl(apiUrl(row.fileUrl));
+ form.setFieldsValue({ name: row.name, is_default: row.isDefault, is_active: row.isActive });
+ setUploadOpen(true);
+ };
+
+ const closeUploadModal = () => {
+ if (submitting) return;
+ setUploadOpen(false);
+ resetUploadState();
+ };
+
+ const handleBeforeUpload = (selectedFile: File) => {
+ if (!selectedFile.type.startsWith('image/')) {
+ message.warning('请选择图片文件');
+ return Upload.LIST_IGNORE;
+ }
+
+ if (previewUrl.startsWith('blob:')) URL.revokeObjectURL(previewUrl);
+ const nextPreviewUrl = URL.createObjectURL(selectedFile);
+ setFile(selectedFile);
+ setPreviewUrl(nextPreviewUrl);
+ setFileList([{ uid: selectedFile.name, name: selectedFile.name, status: 'done', originFileObj: selectedFile }]);
+ return false;
+ };
+
+ const handleRemoveFile = () => {
+ setFile(null);
+ setFileList([]);
+ if (previewUrl.startsWith('blob:')) URL.revokeObjectURL(previewUrl);
+ setPreviewUrl('');
+ };
+
+ const submit = async () => {
+ if (submitting) return;
+ const values = await form.validateFields();
+
+ if (!editing && !file) {
+ message.warning('请选择水印图片');
+ return;
+ }
+
+ setSubmitting(true);
+ try {
+ if (editing) {
+ await updateHomeMaterialWatermark(editing.id, { name: values.name, is_default: values.is_default, is_active: values.is_active });
+ } else if (file) {
+ await uploadHomeMaterialWatermark(file, values.name, values.is_default);
+ }
+
+ message.success('保存成功');
+ setUploadOpen(false);
+ resetUploadState();
+ await load();
+ onChanged?.();
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ const table = (
+ <>
+
+
+
} onClick={openUpload}>上传水印
+
},
+ { title: '名称', dataIndex: 'name' },
+ { title: '尺寸', render: (_: unknown, r: HomeMaterialWatermark) => r.width && r.height ? `${r.width}×${r.height}` : '-' },
+ { title: '默认', dataIndex: 'isDefault', render: (v: boolean) => v ? '是' : '否' },
+ { title: '启用', dataIndex: 'isActive', render: (v: boolean) => v ? '启用' : '禁用' },
+ {
+ title: '操作',
+ render: (_: unknown, row: HomeMaterialWatermark) => (
+
+ } onClick={() => openEdit(row)}>编辑
+ { await deleteHomeMaterialWatermark(row.id); message.success('删除成功'); await load(); onChanged?.(); }}>
+ }>删除
+
+
+ ),
+ },
+ ]}
+ />
+
+
+
+
+ );
+
+ if (embedded) return table;
+ return {table};
+};
+
+export default WatermarkLibraryModal;
diff --git a/video-gen-admin/src/pages/homeMaterials/WatermarkPreview.tsx b/video-gen-admin/src/pages/homeMaterials/WatermarkPreview.tsx
new file mode 100644
index 00000000..764dc35e
--- /dev/null
+++ b/video-gen-admin/src/pages/homeMaterials/WatermarkPreview.tsx
@@ -0,0 +1,363 @@
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Spin } from 'antd';
+import { previewHomeMaterialTextWatermark } from '../../api';
+import { apiUrl } from '../../utils/resourceUrl';
+import type { HomeMaterialMediaType, HomeMaterialTextWatermarkPayload, HomeMaterialWatermarkConfig } from '../../types';
+
+interface WatermarkPreviewProps {
+ mediaUrl?: string | null;
+ mediaType?: HomeMaterialMediaType;
+ watermarkUrl?: string | null;
+ config: HomeMaterialWatermarkConfig;
+ onChange?: (patch: Partial) => void;
+}
+
+interface Size {
+ width: number;
+ height: number;
+}
+
+const PREVIEW_MAX_HEIGHT = 360;
+const PREVIEW_MIN_HEIGHT = 280;
+
+function clamp(value: number, min: number, max: number): number {
+ if (!Number.isFinite(value)) return min;
+ return Math.min(max, Math.max(min, value));
+}
+
+function calcStageSize(containerWidth: number, naturalSize: Size | null): Size {
+ const maxWidth = Math.max(0, containerWidth);
+ if (!maxWidth) return { width: 0, height: PREVIEW_MIN_HEIGHT };
+
+ if (!naturalSize?.width || !naturalSize?.height) {
+ return { width: maxWidth, height: PREVIEW_MIN_HEIGHT };
+ }
+
+ const scale = Math.min(maxWidth / naturalSize.width, PREVIEW_MAX_HEIGHT / naturalSize.height);
+ return {
+ width: Math.max(1, Math.round(naturalSize.width * scale)),
+ height: Math.max(1, Math.round(naturalSize.height * scale)),
+ };
+}
+
+function calcWatermarkWidth(config: HomeMaterialWatermarkConfig, stageWidth: number): number {
+ if (config.sizeMode === 'px' && config.widthPx) {
+ return clamp(config.widthPx, 1, Math.max(1, stageWidth));
+ }
+ const ratio = clamp(config.widthRatio ?? 0.18, 0.01, 1);
+ return Math.max(1, stageWidth * ratio);
+}
+
+function calcPresetPosition(config: HomeMaterialWatermarkConfig): React.CSSProperties {
+ const marginX = config.marginX ?? 24;
+ const marginY = config.marginY ?? 24;
+
+ switch (config.position) {
+ case 'top_left':
+ return { left: marginX, top: marginY };
+ case 'top_center':
+ return { left: '50%', top: marginY, transform: 'translateX(-50%)' };
+ case 'top_right':
+ return { right: marginX, top: marginY };
+ case 'middle_left':
+ return { left: marginX, top: '50%', transform: 'translateY(-50%)' };
+ case 'center':
+ return { left: '50%', top: '50%', transform: 'translate(-50%, -50%)' };
+ case 'middle_right':
+ return { right: marginX, top: '50%', transform: 'translateY(-50%)' };
+ case 'bottom_left':
+ return { left: marginX, bottom: marginY };
+ case 'bottom_center':
+ return { left: '50%', bottom: marginY, transform: 'translateX(-50%)' };
+ case 'bottom_right':
+ default:
+ return { right: marginX, bottom: marginY };
+ }
+}
+
+function toTextPayload(config: HomeMaterialWatermarkConfig): HomeMaterialTextWatermarkPayload | null {
+ const text = config.textWatermark;
+ if (!text || !text.text?.trim()) return null;
+ return {
+ text: text.text.trim(),
+ opacity_level: text.opacityLevel,
+ font_size_px: text.fontSizePx,
+ color: text.color,
+ rotate_deg: text.rotateDeg,
+ gap_x: text.gapX,
+ gap_y: text.gapY,
+ staggered: text.staggered,
+ };
+}
+
+const WatermarkPreview: React.FC = ({
+ mediaUrl,
+ mediaType = 'image',
+ watermarkUrl,
+ config,
+ onChange,
+}) => {
+ const outerRef = useRef(null);
+ const stageRef = useRef(null);
+ const watermarkRef = useRef(null);
+ const dragOffsetRef = useRef({ x: 0, y: 0 });
+ const previewSeqRef = useRef(0);
+
+ const [containerWidth, setContainerWidth] = useState(0);
+ const [naturalSize, setNaturalSize] = useState(null);
+ const [watermarkSize, setWatermarkSize] = useState({ width: 0, height: 0 });
+ const [dragging, setDragging] = useState(false);
+ const [textPreviewLayer, setTextPreviewLayer] = useState('');
+ const [textPreviewLoading, setTextPreviewLoading] = useState(false);
+ const [textPreviewError, setTextPreviewError] = useState('');
+
+ const mediaSrc = useMemo(() => apiUrl(mediaUrl), [mediaUrl]);
+ const watermarkSrc = useMemo(() => apiUrl(watermarkUrl), [watermarkUrl]);
+ const stageSize = useMemo(() => calcStageSize(containerWidth, naturalSize), [containerWidth, naturalSize]);
+ const watermarkWidth = useMemo(() => calcWatermarkWidth(config, stageSize.width), [config, stageSize.width]);
+ const isRepeatedText = config.watermarkType === 'repeated_text';
+
+ useLayoutEffect(() => {
+ if (!outerRef.current) return;
+ const update = () => setContainerWidth(outerRef.current?.clientWidth || 0);
+ update();
+ const observer = new ResizeObserver(update);
+ observer.observe(outerRef.current);
+ return () => observer.disconnect();
+ }, []);
+
+ useLayoutEffect(() => {
+ if (!watermarkRef.current) return;
+ const update = () => {
+ const rect = watermarkRef.current?.getBoundingClientRect();
+ if (!rect) return;
+ setWatermarkSize({ width: rect.width, height: rect.height });
+ };
+ update();
+ const observer = new ResizeObserver(update);
+ observer.observe(watermarkRef.current);
+ return () => observer.disconnect();
+ }, [watermarkSrc, watermarkWidth]);
+
+ useEffect(() => {
+ setNaturalSize(null);
+ setTextPreviewLayer('');
+ setTextPreviewError('');
+ }, [mediaSrc, mediaType]);
+
+ useEffect(() => {
+ if (!isRepeatedText) {
+ setTextPreviewLayer('');
+ setTextPreviewLoading(false);
+ setTextPreviewError('');
+ return;
+ }
+ const textPayload = toTextPayload(config);
+ if (!naturalSize?.width || !naturalSize.height || !textPayload) {
+ setTextPreviewLayer('');
+ return;
+ }
+
+ const seq = ++previewSeqRef.current;
+ setTextPreviewLoading(true);
+ setTextPreviewError('');
+ const timer = window.setTimeout(async () => {
+ try {
+ const res = await previewHomeMaterialTextWatermark({
+ width: naturalSize.width,
+ height: naturalSize.height,
+ text_watermark: textPayload,
+ });
+ if (previewSeqRef.current === seq) {
+ setTextPreviewLayer(res.previewLayerDataUrl);
+ }
+ } catch (e) {
+ if (previewSeqRef.current === seq) {
+ setTextPreviewLayer('');
+ setTextPreviewError(e instanceof Error ? e.message : '文字水印预览生成失败');
+ }
+ } finally {
+ if (previewSeqRef.current === seq) setTextPreviewLoading(false);
+ }
+ }, 300);
+ return () => window.clearTimeout(timer);
+ }, [config, isRepeatedText, naturalSize]);
+
+ useEffect(() => {
+ const onMove = (e: PointerEvent) => {
+ if (!dragging || !stageRef.current || !onChange || isRepeatedText) return;
+
+ const rect = stageRef.current.getBoundingClientRect();
+ const wmWidth = watermarkSize.width || watermarkWidth;
+ const wmHeight = watermarkSize.height || 1;
+ const availableX = Math.max(1, rect.width - wmWidth);
+ const availableY = Math.max(1, rect.height - wmHeight);
+ const left = clamp(e.clientX - rect.left - dragOffsetRef.current.x, 0, availableX);
+ const top = clamp(e.clientY - rect.top - dragOffsetRef.current.y, 0, availableY);
+
+ onChange({
+ position: 'custom',
+ customXRatio: Number((left / availableX).toFixed(4)),
+ customYRatio: Number((top / availableY).toFixed(4)),
+ });
+ };
+ const onUp = () => setDragging(false);
+ window.addEventListener('pointermove', onMove);
+ window.addEventListener('pointerup', onUp);
+ window.addEventListener('pointercancel', onUp);
+ return () => {
+ window.removeEventListener('pointermove', onMove);
+ window.removeEventListener('pointerup', onUp);
+ window.removeEventListener('pointercancel', onUp);
+ };
+ }, [dragging, isRepeatedText, onChange, watermarkSize.height, watermarkSize.width, watermarkWidth]);
+
+ const watermarkPositionStyle = useMemo(() => {
+ if (config.position !== 'custom') return calcPresetPosition(config);
+
+ const wmWidth = watermarkSize.width || watermarkWidth;
+ const wmHeight = watermarkSize.height || 1;
+ const availableX = Math.max(0, stageSize.width - wmWidth);
+ const availableY = Math.max(0, stageSize.height - wmHeight);
+ const xRatio = clamp(config.customXRatio ?? 0.5, 0, 1);
+ const yRatio = clamp(config.customYRatio ?? 0.5, 0, 1);
+
+ return {
+ left: availableX * xRatio,
+ top: availableY * yRatio,
+ transform: 'none',
+ };
+ }, [config, stageSize.height, stageSize.width, watermarkSize.height, watermarkSize.width, watermarkWidth]);
+
+ return (
+
+ {mediaSrc ? (
+
+ {mediaType === 'video' ? (
+
+ ) : (
+
上传素材后可预览水印效果
+ )}
+