feat: 完善短剧管理页面的表单与数据类型
扩展了Drama类型定义,新增简介、标签、地区等字段,重构创建短剧弹窗表单,使用更友好的选择器与布局优化用户填写体验,移除冗余的默认status参数拼接
This commit is contained in:
@@ -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>
|
||||
<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>
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user