真人素材库本地完成

2026-07-06 15:13:41 +08:00
parent 75d1f7a428
commit ab67bdf19e
52 changed files with 4131 additions and 137 deletions
@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Card, Col, Form, Input, Modal, Row, Space, Typography, message } from 'antd';
+import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
+import type { PrivatePortraitProject } from '../../../types';
+import { createPrivatePortraitProject, getPrivatePortraitProjects } from '../../../api';
+import PrivatePortraitProjectList from './ProjectList';
+import PrivatePortraitProjectDetail from './ProjectDetail';
+
+const PrivatePortraitLibraryPanel: React.FC = () => {
+  const [projects, setProjects] = useState<PrivatePortraitProject[]>([]);
+  const [selected, setSelected] = useState<PrivatePortraitProject | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [form] = Form.useForm();
+
+  const loadProjects = async () => {
+    setLoading(true);
+    try {
+      const res = await getPrivatePortraitProjects({ pageSize: 100 });
+      setProjects(res.items);
+      setSelected((prev) => prev ? (res.items.find((item) => item.id === prev.id) || res.items[0] || null) : (res.items[0] || null));
+    } catch (e: any) {
+      message.error(e?.message || '加载真人素材项目组失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { loadProjects(); }, []);
+
+  const handleCreate = async () => {
+    const values = await form.validateFields();
+    try {
+      const project = await createPrivatePortraitProject(values);
+      message.success('项目组已创建');
+      setCreateOpen(false);
+      form.resetFields();
+      await loadProjects();
+      setSelected(project);
+    } catch (e: any) {
+      message.error(e?.message || '创建项目组失败');
+    }
+  };
+
+  return (
+    <div style={{ padding: 16 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <div>
+          <Typography.Title level={4} style={{ margin: 0 }}>真人素材库</Typography.Title>
+          <Typography.Text type="secondary">管理真人授权项目组和已入库 Active 素材，AI 创作添加参考内容时可直接选择。</Typography.Text>
+        </div>
+        <Space>
+          <Button icon={<ReloadOutlined />} onClick={loadProjects} loading={loading}>刷新</Button>
+          <Button type="primary" icon={<PlusOutlined />} onClick={() => setCreateOpen(true)}>新建项目组</Button>
+        </Space>
+      </div>
+      <Row gutter={16}>
+        <Col xs={24} md={7} lg={6}>
+          <Card title="项目组" style={{ borderRadius: 12 }}>
+            <PrivatePortraitProjectList items={projects} selectedId={selected?.id} onSelect={setSelected} />
+          </Card>
+        </Col>
+        <Col xs={24} md={17} lg={18}>
+          {selected ? (
+            <PrivatePortraitProjectDetail project={selected} onDeleted={() => { setSelected(null); loadProjects(); }} onChanged={loadProjects} />
+          ) : (
+            <Card style={{ borderRadius: 12, textAlign: 'center', color: '#94a3b8' }}>请先创建或选择一个真人素材项目组</Card>
+          )}
+        </Col>
+      </Row>
+      <Modal title="新建真人素材项目组" open={createOpen} onCancel={() => setCreateOpen(false)} onOk={handleCreate} okText="创建">
+        <Form form={form} layout="vertical">
+          <Form.Item label="项目组名称" name="name" rules={[{ required: true, message: '请输入项目组名称' }]}>
+            <Input placeholder="例如：达人A、客户B、张三人像" />
+          </Form.Item>
+          <Form.Item label="描述" name="description">
+            <Input.TextArea rows={3} placeholder="可选" />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default PrivatePortraitLibraryPanel;