cyh-tk-admin/src/Drama/index.tsx

import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
    Button,
    Card,
    Descriptions,
    Form,
    Grid,
    Input,
    InputNumber,
    InputTag,
    Message,
    Modal,
    Select,
    Space,
    Switch,
    Table,
    Tag,
} from "@arco-design/web-react";
import { IconArrowLeft, IconPlus, IconRefresh } from "@arco-design/web-react/icon";
import type { Drama, Episode } from "../api/types";
import {
    configureDramaEpisodes,
    createDrama as createDramaApi,
    getDrama,
    getDramaEpisodes,
    updateDrama,
    updateEpisode,
} from "../api/dramas";
import { completeUploadTask, createUploadTask, syncReviewStatus } from "../api/media";
import { usePageData } from "../hooks/usePageData";

const { Row, Col } = Grid;

const STATUS_OPTIONS: { value: string; label: string }[] = [
    { value: "draft", label: "草稿" },
    { value: "scheduled", label: "定时发布" },
    { value: "published", label: "已发布" },
    { 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, changePage } = usePageData<Drama>("/api/admin/v1/dramas");
    const [visible, setVisible] = useState(false);
    const [creating, setCreating] = useState(false);

    const createDrama = async (values: Partial<Drama>) => {
        setCreating(true);
        try {
            await createDramaApi(values);
            Message.success("短剧创建成功");
            setVisible(false);
            await reload();
        } finally {
            setCreating(false);
        }
    };

    return (
        <Card
            className="section-card"
            title="短剧管理"
            extra={
                <Button type="primary" icon={<IconPlus />} onClick={() => setVisible(true)}>
                    新增短剧
                </Button>
            }
        >
            <Table
                rowKey="id"
                loading={loading}
                data={data.list}
                pagination={{
                    current: data.pagination.page,
                    total: data.pagination.total,
                    pageSize: data.pagination.pageSize,
                    onChange: (page, pageSize) => changePage(page, pageSize),
                }}
                columns={[
                    { title: "ID", dataIndex: "id", width: 80 },
                    { title: "标题", dataIndex: "title" },
                    { title: "地区", dataIndex: "region", width: 120 },
                    { title: "类型", dataIndex: "type", width: 140 },
                    { 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
                    layout="vertical"
                    onSubmit={createDrama}
                    initialValues={{
                        status: "draft",
                        isRecommended: false,
                        sortOrder: 0,
                    }}
                >
                    <Form.Item label="标题" field="title" rules={[{ required: true }]}>
                        <Input placeholder="请输入短剧标题" />
                    </Form.Item>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item label="类型" field="type" rules={[{ required: true }]}>
                                <Input placeholder="请输入类型，如复仇、爱情、动作等" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="状态" field="status">
                                <Select placeholder="请选择状态">
                                    {STATUS_OPTIONS.map((option) => (
                                        <Select.Option key={option.value} value={option.value}>
                                            {option.label}
                                        </Select.Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Form.Item label="封面地址" field="coverUrl" rules={[{ required: true }]}>
                        <Input placeholder="请输入封面图片 URL" />
                    </Form.Item>
                    <Form.Item label="简介" field="description">
                        <Input.TextArea placeholder="请输入短剧简介" autoSize={{ minRows: 2, maxRows: 4 }} />
                    </Form.Item>
                    <Form.Item label="标签" field="tags">
                        <InputTag placeholder="输入后回车添加标签" allowClear />
                    </Form.Item>
                    <Row gutter={16}>
                        <Col span={8}>
                            <Form.Item label="地区" field="region">
                                <Input placeholder="如 中国" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="语言" field="language">
                                <Input placeholder="如 zh-CN" />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="年份" field="year">
                                <InputNumber placeholder="如 2026" min={1900} style={{ width: "100%" }} />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item label="排序权重" field="sortOrder">
                                <InputNumber placeholder="数值越大越靠前" style={{ width: "100%" }} />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="推荐" field="isRecommended" triggerPropName="checked">
                                <Switch />
                            </Form.Item>
                        </Col>
                    </Row>
                    <div className="modal-actions">
                        <Button onClick={() => setVisible(false)}>取消</Button>
                        <Button type="primary" htmlType="submit" loading={creating}>
                            创建
                        </Button>
                    </div>
                </Form>
            </Modal>
        </Card>
    );
}

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 [dramaData, episodeList] = await Promise.all([getDrama(dramaId), getDramaEpisodes(dramaId)]);
            setDrama(dramaData);
            setEpisodeCount(dramaData.totalEpisodes || 1);
            setEpisodes(episodeList);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        void loadDetail();
    }, [dramaId]);

    const configureEpisodes = async () => {
        await configureDramaEpisodes(dramaId, episodeCount);
        Message.success("剧集数量已更新");
        await loadDetail();
    };

    const updateDramaStatus = async (status: string) => {
        await updateDrama(dramaId, { status });
        Message.success("短剧状态已更新");
        await loadDetail();
    };

    const uploadEpisodeVideo = async (episode: Episode, file: File) => {
        setUploadingEpisodeId(episode.id);
        try {
            const task = await createUploadTask({
                episodeId: episode.id,
                fileName: file.name,
                contentType: file.type || "video/mp4",
                fileSize: file.size,
            });
            await completeUploadTask(task.jobId);
            await syncReviewStatus();
            Message.success("视频上传并审核通过");
            await loadDetail();
        } finally {
            setUploadingEpisodeId(null);
        }
    };

    const publishEpisode = async (episode: Episode) => {
        await updateEpisode(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;