feat: 完善短剧管理页面的表单与数据类型
扩展了Drama类型定义,新增简介、标签、地区等字段,重构创建短剧弹窗表单,使用更友好的选择器与布局优化用户填写体验,移除冗余的默认status参数拼接
This commit is contained in:
@@ -1,10 +1,35 @@
|
|||||||
import { useState } from 'react';
|
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 { IconPlus } from '@arco-design/web-react/icon';
|
||||||
import type { Drama } from '../api/types';
|
import type { Drama } from '../api/types';
|
||||||
import { api } from '../api/client';
|
import { api } from '../api/client';
|
||||||
import { usePageData } from '../hooks/usePageData';
|
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() {
|
function DramasPage() {
|
||||||
const { data, loading, reload } = usePageData<Drama>('/api/admin/v1/dramas');
|
const { data, loading, reload } = usePageData<Drama>('/api/admin/v1/dramas');
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
@@ -13,7 +38,7 @@ function DramasPage() {
|
|||||||
const createDrama = async (values: Partial<Drama>) => {
|
const createDrama = async (values: Partial<Drama>) => {
|
||||||
setCreating(true);
|
setCreating(true);
|
||||||
try {
|
try {
|
||||||
await api.post('/api/admin/v1/dramas', { ...values, status: values.status || 'draft' });
|
await api.post('/api/admin/v1/dramas', values);
|
||||||
Message.success('短剧创建成功');
|
Message.success('短剧创建成功');
|
||||||
setVisible(false);
|
setVisible(false);
|
||||||
await reload();
|
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: '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: 'isRecommended', width: 140, render: (value) => value ? <Tag color="arcoblue">是</Tag> : <Tag>否</Tag> },
|
||||||
]} />
|
]} />
|
||||||
<Modal title="创建短剧" visible={visible} onCancel={() => setVisible(false)} footer={null}>
|
<Modal title="创建短剧" visible={visible} onCancel={() => setVisible(false)} footer={null} style={{ width: 640 }}>
|
||||||
<Form layout="vertical" onSubmit={createDrama}>
|
<Form
|
||||||
<Form.Item label="标题" field="title" rules={[{ required: true }]}><Input /></Form.Item>
|
layout="vertical"
|
||||||
<Form.Item label="封面地址" field="coverUrl" rules={[{ required: true }]}><Input /></Form.Item>
|
onSubmit={createDrama}
|
||||||
<Form.Item label="类型" field="type" rules={[{ required: true }]}><Input placeholder="revenge、romance、action" /></Form.Item>
|
initialValues={{ status: 'draft', isRecommended: false, sortOrder: 0 }}
|
||||||
<Form.Item label="状态" field="status"><Input placeholder="draft 或 published" /></Form.Item>
|
>
|
||||||
|
<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>
|
<Button type="primary" htmlType="submit" loading={creating}>创建</Button>
|
||||||
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
</Modal>
|
</Modal>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -35,6 +35,12 @@ export type Drama = {
|
|||||||
status: string;
|
status: string;
|
||||||
coverUrl: string;
|
coverUrl: string;
|
||||||
isRecommended: boolean;
|
isRecommended: boolean;
|
||||||
|
description?: string;
|
||||||
|
tags?: string[];
|
||||||
|
region?: string;
|
||||||
|
language?: string;
|
||||||
|
year?: number;
|
||||||
|
sortOrder?: number;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user