feat: 完善短剧管理页面的表单与数据类型

扩展了Drama类型定义,新增简介、标签、地区等字段,重构创建短剧弹窗表单,使用更友好的选择器与布局优化用户填写体验,移除冗余的默认status参数拼接
This commit is contained in:
2026-07-01 16:04:41 +08:00
parent 51e26025c6
commit 56f8c477c2
2 changed files with 100 additions and 9 deletions

View File

@@ -1,10 +1,35 @@
import { useState } from 'react';
import { Button, Card, Form, Input, Message, Modal, Table, Tag } from '@arco-design/web-react';
import {
Button,
Card,
Form,
Grid,
Input,
InputNumber,
InputTag,
Message,
Modal,
Select,
Switch,
Table,
Tag,
} from '@arco-design/web-react';
import { IconPlus } from '@arco-design/web-react/icon';
import type { Drama } from '../api/types';
import { api } from '../api/client';
import { usePageData } from '../hooks/usePageData';
const { Row, Col } = Grid;
const TYPE_OPTIONS = ['revenge', 'romance', 'action'];
const STATUS_OPTIONS: { value: string; label: string }[] = [
{ value: 'draft', label: '草稿' },
{ value: 'scheduled', label: '定时发布' },
{ value: 'published', label: '已发布' },
{ value: 'offline', label: '已下线' },
];
function DramasPage() {
const { data, loading, reload } = usePageData<Drama>('/api/admin/v1/dramas');
const [visible, setVisible] = useState(false);
@@ -13,7 +38,7 @@ function DramasPage() {
const createDrama = async (values: Partial<Drama>) => {
setCreating(true);
try {
await api.post('/api/admin/v1/dramas', { ...values, status: values.status || 'draft' });
await api.post('/api/admin/v1/dramas', values);
Message.success('短剧创建成功');
setVisible(false);
await reload();
@@ -31,13 +56,73 @@ function DramasPage() {
{ 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> },
]} />
<Modal title="创建短剧" visible={visible} onCancel={() => setVisible(false)} footer={null}>
<Form layout="vertical" onSubmit={createDrama}>
<Form.Item label="标题" field="title" rules={[{ required: true }]}><Input /></Form.Item>
<Form.Item label="封面地址" field="coverUrl" rules={[{ required: true }]}><Input /></Form.Item>
<Form.Item label="类型" field="type" rules={[{ required: true }]}><Input placeholder="revenge、romance、action" /></Form.Item>
<Form.Item label="状态" field="status"><Input placeholder="draft 或 published" /></Form.Item>
<Button type="primary" htmlType="submit" loading={creating}></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 }]}>
<Select placeholder="选择或输入类型" allowCreate>
{TYPE_OPTIONS.map((type) => <Select.Option key={type} value={type}>{type}</Select.Option>)}
</Select>
</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>

View File

@@ -35,6 +35,12 @@ export type Drama = {
status: string;
coverUrl: string;
isRecommended: boolean;
description?: string;
tags?: string[];
region?: string;
language?: string;
year?: number;
sortOrder?: number;
createdAt: string;
};