新增素材前测模板，投放平台授权列表，素材ID列表

2026-07-03 15:22:54 +08:00
parent b5538ee27a
commit 7f9a70d1ee
5 changed files with 613 additions and 35 deletions
@@ -34,6 +34,9 @@ import AdminReplicationProjectDetail from './pages/AdminReplicationProjectDetail
 import AdminVideoPromptSchemaConfig from './pages/AdminVideoPromptSchemaConfig';
 import AdminContactRequests from './pages/AdminContactRequests';
 import AdminHomeMaterials from './pages/AdminHomeMaterials';
+import AdminPreTestTemplates from './pages/AdminPreTestTemplates';
+import AdminOAuthList from './pages/AdminOAuthList';
+import AdminMaterialList from './pages/AdminMaterialList';

 import { useAdminStore } from './store';

@@ -109,6 +112,9 @@ const App = () => {
              <Route path="platform" element={<AdminPlatform />} />
              <Route path="contact-requests" element={<AdminContactRequests />} />
              <Route path="home-materials" element={<AdminHomeMaterials />} />
+              <Route path="pretest-templates" element={<AdminPreTestTemplates />} />
+              <Route path="oauth-list" element={<AdminOAuthList />} />
+              <Route path="material-list" element={<AdminMaterialList />} />
            </Route>
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
@@ -0,0 +1,197 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Select, Table, Pagination, Tag, Typography } from 'antd';
+import { FileTextOutlined, SearchOutlined } from '@ant-design/icons';
+
+const { Text } = Typography;
+
+const AdminMaterialList: React.FC = () => {
+  const [tableData, setTableData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [total, setTotal] = useState(0);
+  const [searchMaterialId, setSearchMaterialId] = useState('');
+  const [searchUploadId, setSearchUploadId] = useState('');
+  const [searchFileName, setSearchFileName] = useState('');
+  const [searchResourceType, setSearchResourceType] = useState('');
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      key: 'index',
+      width: 60,
+      render: (text: number) => <span style={{ color: '#64748b' }}>{text}</span>,
+    },
+    {
+      title: '素材ID',
+      dataIndex: 'materialId',
+      key: 'materialId',
+      width: 180,
+    },
+    {
+      title: '上传ID',
+      dataIndex: 'uploadId',
+      key: 'uploadId',
+      width: 160,
+    },
+    {
+      title: '文件名',
+      dataIndex: 'fileName',
+      key: 'fileName',
+      width: 200,
+    },
+    {
+      title: '资源类型',
+      dataIndex: 'resourceType',
+      key: 'resourceType',
+      width: 100,
+      render: (text: string) => (
+        <Tag color={text === 'video' ? 'blue' : 'green'}>
+          {text === 'video' ? '视频' : '图片'}
+        </Tag>
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 100,
+      render: (text: string) => (
+        <Tag color={text === 'SUCCESS' ? 'green' : text === 'PENDING' ? 'orange' : 'red'}>
+          {text === 'SUCCESS' ? '成功' : text === 'PENDING' ? '处理中' : '失败'}
+        </Tag>
+      ),
+    },
+    {
+      title: '文件大小',
+      dataIndex: 'fileSize',
+      key: 'fileSize',
+      width: 120,
+      render: (text: string) => <span style={{ color: '#64748b' }}>{text}</span>,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      width: 180,
+      render: (text: string) => <span style={{ color: '#64748b' }}>{text}</span>,
+    },
+  ];
+
+  const loadMaterialList = async () => {
+    setLoading(true);
+    try {
+      const mockData = {
+        items: Array.from({ length: pageSize }, (_, i) => ({
+          id: `${currentPage}-${i}`,
+          index: (currentPage - 1) * pageSize + i + 1,
+          materialId: `MAT-${(currentPage - 1) * pageSize + i + 1}`,
+          uploadId: `UP-${(currentPage - 1) * pageSize + i + 1}`,
+          fileName: `file_${(currentPage - 1) * pageSize + i + 1}.mp4`,
+          resourceType: ['video', 'image'][i % 2],
+          status: ['SUCCESS', 'PENDING', 'FAILED'][i % 3],
+          fileSize: `${(Math.random() * 50 + 10).toFixed(1)} MB`,
+          createdAt: '2026-07-01 10:00:00',
+        })),
+        total: 120,
+      };
+      setTableData(mockData.items);
+      setTotal(mockData.total);
+    } catch (error) {
+      console.error('加载数据失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadMaterialList();
+  }, [currentPage, pageSize]);
+
+  const handleSearch = () => {
+    setCurrentPage(1);
+    loadMaterialList();
+  };
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
+        <FileTextOutlined style={{ color: '#6366f1', fontSize: 16 }} />
+        <Text strong style={{ fontSize: 16 }}>素材ID列表</Text>
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <Input
+            placeholder="素材ID"
+            value={searchMaterialId}
+            onChange={(e) => setSearchMaterialId(e.target.value)}
+            style={{ width: 160 }}
+            allowClear
+            onPressEnter={handleSearch}
+          />
+          <Input
+            placeholder="上传ID"
+            value={searchUploadId}
+            onChange={(e) => setSearchUploadId(e.target.value)}
+            style={{ width: 160 }}
+            allowClear
+            onPressEnter={handleSearch}
+          />
+          <Input
+            placeholder="文件名"
+            value={searchFileName}
+            onChange={(e) => setSearchFileName(e.target.value)}
+            style={{ width: 140 }}
+            allowClear
+            onPressEnter={handleSearch}
+          />
+          <Select
+            placeholder="资源类型"
+            value={searchResourceType}
+            onChange={(value) => setSearchResourceType(value)}
+            style={{ width: 120 }}
+            allowClear
+            options={[
+              { value: 'image', label: '图片' },
+              { value: 'video', label: '视频' },
+            ]}
+          />
+          <Button
+            type="primary"
+            onClick={handleSearch}
+          >
+            搜索
+          </Button>
+        </div>
+      </div>
+      <div style={{ background: '#fff', borderRadius: 12, boxShadow: '0 1px 3px rgba(0,0,0,0.05)' }}>
+        <Table
+          dataSource={tableData}
+          columns={columns}
+          loading={loading}
+          pagination={false}
+          rowKey="id"
+          bordered={false}
+          scroll={{ x: 'max-content' }}
+        />
+        <div style={{ padding: '16px', textAlign: 'right' }}>
+          <Pagination
+            current={currentPage}
+            pageSize={pageSize}
+            total={total}
+            showSizeChanger
+            showTotal={(total) => `共 ${total} 条记录`}
+            onChange={(page, size) => {
+              setCurrentPage(page);
+              setPageSize(size);
+            }}
+            size="small"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdminMaterialList;
@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Select, Table, Pagination, Tag, Typography } from 'antd';
+import { LockOutlined, SearchOutlined } from '@ant-design/icons';
+
+const { Text } = Typography;
+
+const AdminOAuthList: React.FC = () => {
+  const [tableData, setTableData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [total, setTotal] = useState(0);
+  const [searchAccountId, setSearchAccountId] = useState('');
+  const [searchUserId, setSearchUserId] = useState('');
+  const [searchOpenType, setSearchOpenType] = useState('');
+
+  const openTypeOptions = [
+    { value: 'AD', label: 'AD' },
+    { value: 'QIANCHUAN', label: '千川' },
+    { value: 'LOCAL', label: '本地推' },
+  ];
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      key: 'index',
+      width: 60,
+      render: (text: number) => <span style={{ color: '#64748b' }}>{text}</span>,
+    },
+    {
+      title: '授权绑定账户ID',
+      dataIndex: 'accountId',
+      key: 'accountId',
+      width: 180,
+    },
+    {
+      title: '授权登录账户用户ID',
+      dataIndex: 'accountUserId',
+      key: 'accountUserId',
+      width: 180,
+    },
+    {
+      title: '开户方式',
+      dataIndex: 'openType',
+      key: 'openType',
+      width: 120,
+      render: (text: string) => (
+        <Tag color={text === 'AD' ? 'blue' : text === 'QIANCHUAN' ? 'green' : 'orange'}>
+          {text === 'AD' ? 'AD' : text === 'QIANCHUAN' ? '千川' : '本地推'}
+        </Tag>
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 100,
+      render: (text: string) => (
+        <Tag color={text === 'active' ? 'green' : 'red'}>
+          {text === 'active' ? '有效' : '失效'}
+        </Tag>
+      ),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      width: 180,
+      render: (text: string) => <span style={{ color: '#64748b' }}>{text}</span>,
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'updatedAt',
+      key: 'updatedAt',
+      width: 180,
+      render: (text: string) => <span style={{ color: '#64748b' }}>{text}</span>,
+    },
+  ];
+
+  const loadOAuthList = async () => {
+    setLoading(true);
+    try {
+      const mockData = {
+        items: Array.from({ length: pageSize }, (_, i) => ({
+          id: `${currentPage}-${i}`,
+          index: (currentPage - 1) * pageSize + i + 1,
+          accountId: `ACC-${(currentPage - 1) * pageSize + i + 1}`,
+          accountUserId: `USER-${(currentPage - 1) * pageSize + i + 1}`,
+          openType: ['AD', 'QIANCHUAN', 'LOCAL'][i % 3],
+          status: i % 6 === 0 ? 'inactive' : 'active',
+          createdAt: '2026-07-01 10:00:00',
+          updatedAt: '2026-07-02 14:30:00',
+        })),
+        total: 80,
+      };
+      setTableData(mockData.items);
+      setTotal(mockData.total);
+    } catch (error) {
+      console.error('加载数据失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadOAuthList();
+  }, [currentPage, pageSize]);
+
+  const handleSearch = () => {
+    setCurrentPage(1);
+    loadOAuthList();
+  };
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
+        <LockOutlined style={{ color: '#6366f1', fontSize: 16 }} />
+        <Text strong style={{ fontSize: 16 }}>投放平台授权列表</Text>
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <Input
+            placeholder="授权绑定账户ID"
+            value={searchAccountId}
+            onChange={(e) => setSearchAccountId(e.target.value)}
+            style={{ width: 180 }}
+            allowClear
+            onPressEnter={handleSearch}
+          />
+          <Input
+            placeholder="授权登录账户用户ID"
+            value={searchUserId}
+            onChange={(e) => setSearchUserId(e.target.value)}
+            style={{ width: 180 }}
+            allowClear
+            onPressEnter={handleSearch}
+          />
+          <Select
+            placeholder="开户方式"
+            value={searchOpenType}
+            onChange={(value) => setSearchOpenType(value)}
+            style={{ width: 140 }}
+            allowClear
+            options={openTypeOptions}
+          />
+          <Button
+            type="primary"
+            onClick={handleSearch}
+          >
+            搜索
+          </Button>
+        </div>
+      </div>
+      <div style={{ background: '#fff', borderRadius: 12, boxShadow: '0 1px 3px rgba(0,0,0,0.05)' }}>
+        <Table
+          dataSource={tableData}
+          columns={columns}
+          loading={loading}
+          pagination={false}
+          rowKey="id"
+          bordered={false}
+          scroll={{ x: 'max-content' }}
+        />
+        <div style={{ padding: '16px', textAlign: 'right' }}>
+          <Pagination
+            current={currentPage}
+            pageSize={pageSize}
+            total={total}
+            showSizeChanger
+            showTotal={(total) => `共 ${total} 条记录`}
+            onChange={(page, size) => {
+              setCurrentPage(page);
+              setPageSize(size);
+            }}
+            size="small"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdminOAuthList;
@@ -0,0 +1,191 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Select, Table, Pagination, Tag, Typography } from 'antd';
+import { FileTextOutlined, SearchOutlined } from '@ant-design/icons';
+
+const { Text } = Typography;
+
+const AdminPreTestTemplates: React.FC = () => {
+  const [tableData, setTableData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [total, setTotal] = useState(0);
+  const [searchPlatform, setSearchPlatform] = useState('');
+  const [searchName, setSearchName] = useState('');
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      key: 'index',
+      width: 60,
+      render: (text: number) => <span style={{ color: '#64748b' }}>{text}</span>,
+    },
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+      key: 'name',
+      width: 200,
+    },
+    {
+      title: '投放平台',
+      dataIndex: 'platform',
+      key: 'platform',
+      width: 120,
+      render: (text: string) => (
+        <Tag color={text === 'AD' ? 'blue' : text === 'QIANCHUAN' ? 'green' : 'orange'}>
+          {text === 'AD' ? 'AD' : text === 'QIANCHUAN' ? '千川' : '本地推'}
+        </Tag>
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      width: 100,
+      render: (text: string) => (
+        <Tag color={text === 'active' ? 'green' : 'red'}>
+          {text === 'active' ? '启用' : '禁用'}
+        </Tag>
+      ),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      width: 180,
+      render: (text: string) => <span style={{ color: '#64748b' }}>{text}</span>,
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'updatedAt',
+      key: 'updatedAt',
+      width: 180,
+      render: (text: string) => <span style={{ color: '#64748b' }}>{text}</span>,
+    },
+  ];
+
+  const loadRecords = async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      params.set('page', String(currentPage));
+      params.set('page_size', String(pageSize));
+      if (searchPlatform) params.set('platform', searchPlatform);
+      if (searchName) params.set('name', searchName);
+      const mockData = {
+        items: Array.from({ length: pageSize }, (_, i) => ({
+          id: `${currentPage}-${i}`,
+          index: (currentPage - 1) * pageSize + i + 1,
+          name: `前测模板${(currentPage - 1) * pageSize + i + 1}`,
+          platform: ['AD', 'QIANCHUAN', 'LOCAL'][i % 3],
+          status: i % 5 === 0 ? 'inactive' : 'active',
+          createdAt: '2026-07-01 10:00:00',
+          updatedAt: '2026-07-02 14:30:00',
+        })),
+        total: 50,
+      };
+      setTableData(mockData.items);
+      setTotal(mockData.total);
+    } catch (error) {
+      console.error('加载数据失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadRecords();
+  }, [currentPage, pageSize]);
+
+  const handlePageChange = (page: number, size: number) => {
+    setCurrentPage(page);
+    setPageSize(size);
+  };
+
+  const handleSearch = () => {
+    setCurrentPage(1);
+    loadRecords();
+  };
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
+        <FileTextOutlined style={{ color: '#6366f1', fontSize: 16 }} />
+        <Text strong style={{ fontSize: 16 }}>素材前测模板</Text>
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+          <Input
+            placeholder="模板名称"
+            value={searchName}
+            onChange={(e) => setSearchName(e.target.value)}
+            style={{ width: 180 }}
+            allowClear
+            onPressEnter={handleSearch}
+          />
+          <Select
+            placeholder="投放平台"
+            value={searchPlatform}
+            onChange={(value) => setSearchPlatform(value)}
+            style={{ width: 140 }}
+            allowClear
+            options={[
+              { value: 'AD', label: 'AD' },
+              { value: 'QIANCHUAN', label: '千川' },
+              { value: 'LOCAL', label: '本地推' },
+            ]}
+          />
+          <Button
+            type="primary"
+            onClick={handleSearch}
+          >
+            搜索
+          </Button>
+        </div>
+      </div>
+      <div style={{
+        background: '#fff',
+        borderRadius: 16,
+        boxShadow: '0 4px 20px rgba(0,0,0,0.04)',
+        overflow: 'hidden',
+      }}>
+        <Table
+          dataSource={tableData}
+          columns={columns}
+          loading={loading}
+          pagination={false}
+          rowKey="id"
+          bordered={false}
+          scroll={{ x: 'max-content' }}
+          onRow={() => ({
+            style: {
+              cursor: 'pointer',
+              transition: 'background-color 0.15s',
+            },
+            onMouseEnter: (e: React.MouseEvent) => {
+              (e.currentTarget as HTMLElement).style.backgroundColor = '#f8fafc';
+            },
+            onMouseLeave: (e: React.MouseEvent) => {
+              (e.currentTarget as HTMLElement).style.backgroundColor = 'transparent';
+            },
+          })}
+        />
+        <div style={{ padding: '16px', textAlign: 'right' }}>
+          <Pagination
+            current={currentPage}
+            pageSize={pageSize}
+            total={total}
+            showSizeChanger
+            showTotal={(total) => `共 ${total} 条记录`}
+            pageSizeOptions={['10', '20', '50', '100']}
+            onChange={handlePageChange}
+            size="small"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdminPreTestTemplates;