feat: 新增数据管理页面与短剧详情页，完善接口类型与菜单配置
1. 新增数据管理页面，支持查看数据概览、短剧/剧集指标和同步记录 2. 新增短剧详情页，支持查看短剧信息、管理剧集和上传视频 3. 新增菜单配置项，添加数据管理入口 4. 扩展API类型定义，新增剧集、上传任务、数据统计等类型 5. 修复timestamp类型为数字类型，新增短剧额外字段 6. 为页面布局添加统一的page-stack样式类 7. 新增短剧详情路由，优化短剧列表页跳转逻辑
This commit is contained in:
@@ -1,7 +1,9 @@
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Descriptions,
|
||||
Form,
|
||||
Grid,
|
||||
Input,
|
||||
@@ -10,12 +12,13 @@ import {
|
||||
Message,
|
||||
Modal,
|
||||
Select,
|
||||
Space,
|
||||
Switch,
|
||||
Table,
|
||||
Tag,
|
||||
} from '@arco-design/web-react';
|
||||
import { IconPlus } from '@arco-design/web-react/icon';
|
||||
import type { Drama } from '../api/types';
|
||||
import { IconArrowLeft, IconPlus, IconRefresh } from '@arco-design/web-react/icon';
|
||||
import type { ApiResponse, Drama, Episode, UploadTask } from '../api/types';
|
||||
import { api } from '../api/client';
|
||||
import { usePageData } from '../hooks/usePageData';
|
||||
|
||||
@@ -30,7 +33,33 @@ const STATUS_OPTIONS: { value: string; label: string }[] = [
|
||||
{ value: 'offline', label: '已下线' },
|
||||
];
|
||||
|
||||
const REVIEW_STATUS_LABEL: Record<string, string> = {
|
||||
not_submitted: '未提交',
|
||||
pending: '待审核',
|
||||
reviewing: '审核中',
|
||||
approved: '已通过',
|
||||
rejected: '已拒绝',
|
||||
};
|
||||
|
||||
const PUBLISH_STATUS_LABEL: Record<string, string> = {
|
||||
draft: '草稿',
|
||||
scheduled: '定时发布',
|
||||
published: '已发布',
|
||||
offline: '已下线',
|
||||
};
|
||||
|
||||
function DramasPage() {
|
||||
const { id } = useParams();
|
||||
|
||||
if (id) {
|
||||
return <DramaDetailPage dramaId={Number(id)} />;
|
||||
}
|
||||
|
||||
return <DramaListPage />;
|
||||
}
|
||||
|
||||
function DramaListPage() {
|
||||
const navigate = useNavigate();
|
||||
const { data, loading, reload } = usePageData<Drama>('/api/admin/v1/dramas');
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [creating, setCreating] = useState(false);
|
||||
@@ -52,9 +81,13 @@ function DramasPage() {
|
||||
<Table rowKey="id" loading={loading} data={data.list} pagination={{ total: data.pagination.total, pageSize: data.pagination.pageSize }} columns={[
|
||||
{ title: 'ID', dataIndex: 'id', width: 80 },
|
||||
{ title: '标题', dataIndex: 'title' },
|
||||
{ title: '地区', dataIndex: 'region', width: 120 },
|
||||
{ title: '类型', dataIndex: 'type', width: 140 },
|
||||
{ title: '状态', dataIndex: 'status', width: 120, render: (status) => <Tag color={status === 'published' ? 'green' : 'gray'}>{status}</Tag> },
|
||||
{ title: '推荐', dataIndex: 'isRecommended', width: 140, render: (value) => value ? <Tag color="arcoblue">是</Tag> : <Tag>否</Tag> },
|
||||
{ title: '总集数', dataIndex: 'totalEpisodes', width: 100 },
|
||||
{ title: '已发布', dataIndex: 'publishedEpisodes', width: 100 },
|
||||
{ title: '状态', dataIndex: 'status', width: 120, render: (status) => <Tag color={status === 'published' ? 'green' : 'gray'}>{PUBLISH_STATUS_LABEL[String(status)] || String(status)}</Tag> },
|
||||
{ title: '推荐', dataIndex: 'isRecommended', width: 100, render: (value) => value ? <Tag color="arcoblue">是</Tag> : <Tag>否</Tag> },
|
||||
{ title: '操作', width: 120, render: (_, record) => <Button type="text" onClick={() => navigate(`/dramas/${record.id}`)}>详情</Button> },
|
||||
]} />
|
||||
<Modal title="创建短剧" visible={visible} onCancel={() => setVisible(false)} footer={null} style={{ width: 640 }}>
|
||||
<Form
|
||||
@@ -129,4 +162,144 @@ function DramasPage() {
|
||||
);
|
||||
}
|
||||
|
||||
function DramaDetailPage({ dramaId }: { dramaId: number }) {
|
||||
const navigate = useNavigate();
|
||||
const [drama, setDrama] = useState<Drama | null>(null);
|
||||
const [episodes, setEpisodes] = useState<Episode[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [episodeCount, setEpisodeCount] = useState(1);
|
||||
const [uploadingEpisodeId, setUploadingEpisodeId] = useState<number | null>(null);
|
||||
|
||||
const loadDetail = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [dramaResponse, episodeResponse] = await Promise.all([
|
||||
api.get<ApiResponse<Drama>>(`/api/admin/v1/dramas/${dramaId}`),
|
||||
api.get<ApiResponse<{ list: Episode[] }>>(`/api/admin/v1/dramas/${dramaId}/episodes?pageSize=200`),
|
||||
]);
|
||||
setDrama(dramaResponse.data.data);
|
||||
setEpisodeCount(dramaResponse.data.data.totalEpisodes || 1);
|
||||
setEpisodes(episodeResponse.data.data.list);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void loadDetail();
|
||||
}, [dramaId]);
|
||||
|
||||
const configureEpisodes = async () => {
|
||||
await api.post(`/api/admin/v1/dramas/${dramaId}/episodes/batch`, { episodeCount });
|
||||
Message.success('剧集数量已更新');
|
||||
await loadDetail();
|
||||
};
|
||||
|
||||
const updateDramaStatus = async (status: string) => {
|
||||
await api.patch(`/api/admin/v1/dramas/${dramaId}`, { status });
|
||||
Message.success('短剧状态已更新');
|
||||
await loadDetail();
|
||||
};
|
||||
|
||||
const uploadEpisodeVideo = async (episode: Episode, file: File) => {
|
||||
setUploadingEpisodeId(episode.id);
|
||||
try {
|
||||
const task = await api.post<ApiResponse<UploadTask>>('/api/admin/v1/media/upload-tasks', {
|
||||
episodeId: episode.id,
|
||||
fileName: file.name,
|
||||
contentType: file.type || 'video/mp4',
|
||||
fileSize: file.size,
|
||||
});
|
||||
await api.patch(`/api/admin/v1/media/upload-tasks/${task.data.data.jobId}/complete`, {});
|
||||
await api.post('/api/admin/v1/media/review-status/sync', {});
|
||||
Message.success('视频上传并审核通过');
|
||||
await loadDetail();
|
||||
} finally {
|
||||
setUploadingEpisodeId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const publishEpisode = async (episode: Episode) => {
|
||||
await api.patch(`/api/admin/v1/episodes/${episode.id}`, {
|
||||
publishStatus: 'published',
|
||||
status: 'published',
|
||||
});
|
||||
Message.success('剧集已发布');
|
||||
await loadDetail();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-stack">
|
||||
<Card
|
||||
className="section-card"
|
||||
loading={loading && !drama}
|
||||
title={<Space><Button icon={<IconArrowLeft />} onClick={() => navigate('/dramas')} />短剧详情</Space>}
|
||||
extra={<Space>
|
||||
<Button icon={<IconRefresh />} onClick={loadDetail}>刷新</Button>
|
||||
<Button onClick={() => updateDramaStatus('draft')}>设为草稿</Button>
|
||||
<Button type="primary" onClick={() => updateDramaStatus('published')}>上架短剧</Button>
|
||||
</Space>}
|
||||
>
|
||||
{drama && (
|
||||
<Descriptions
|
||||
column={3}
|
||||
data={[
|
||||
{ label: '短剧ID', value: drama.id },
|
||||
{ label: '名称', value: drama.title },
|
||||
{ label: '地区', value: drama.region || '-' },
|
||||
{ label: '类型', value: drama.type },
|
||||
{ label: '总集数', value: drama.totalEpisodes || 0 },
|
||||
{ label: '已发布集数', value: drama.publishedEpisodes || 0 },
|
||||
{ label: '状态', value: PUBLISH_STATUS_LABEL[drama.status] || drama.status },
|
||||
{ label: '封面', value: drama.coverUrl },
|
||||
{ label: '简介', value: drama.description || '-' },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card className="section-card" title="剧集配置" extra={<Space>
|
||||
<InputNumber min={1} max={500} value={episodeCount} onChange={(value) => setEpisodeCount(Number(value) || 1)} />
|
||||
<Button type="primary" onClick={configureEpisodes}>保存集数</Button>
|
||||
</Space>}>
|
||||
<Table rowKey="id" loading={loading} data={episodes} pagination={false} columns={[
|
||||
{ title: '集数', dataIndex: 'episodeNo', width: 80 },
|
||||
{ title: '标题', dataIndex: 'title' },
|
||||
{ title: 'BytePlus VID', dataIndex: 'byteplusVid', width: 180, render: (value) => value || '-' },
|
||||
{ title: '尺寸', width: 120, render: (_, record) => record.width && record.height ? `${record.width}x${record.height}` : '-' },
|
||||
{ title: '时长', dataIndex: 'durationSeconds', width: 100, render: (value) => value ? `${value}s` : '-' },
|
||||
{ title: '审核状态', dataIndex: 'reviewStatus', width: 120, render: (status) => <Tag color={status === 'approved' ? 'green' : 'orange'}>{REVIEW_STATUS_LABEL[String(status)] || String(status)}</Tag> },
|
||||
{ title: '发布状态', dataIndex: 'publishStatus', width: 120, render: (status) => <Tag color={status === 'published' ? 'green' : 'gray'}>{PUBLISH_STATUS_LABEL[String(status)] || String(status)}</Tag> },
|
||||
{
|
||||
title: '操作',
|
||||
width: 280,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button loading={uploadingEpisodeId === record.id}>
|
||||
<label>
|
||||
上传视频
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
style={{ display: 'none' }}
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
void uploadEpisodeVideo(record, file);
|
||||
}
|
||||
event.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</Button>
|
||||
<Button type="text" disabled={record.reviewStatus !== 'approved'} onClick={() => publishEpisode(record)}>发布</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]} />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DramasPage;
|
||||
|
||||
Reference in New Issue
Block a user