feat: 完成TikTok短剧管理后台基础功能开发
本次提交搭建了完整的后台管理系统,包含: 1. 登录认证与权限校验体系 2. 工作台、短剧、用户、角色、人员、日志等全业务模块 3. 响应式布局与通用样式组件 4. 菜单动态过滤与路由权限控制 5. 移除了README中冗余的权限管理菜单项
This commit is contained in:
47
src/Drama/index.tsx
Normal file
47
src/Drama/index.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { useState } from 'react';
|
||||
import { Button, Card, Form, Input, Message, Modal, 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';
|
||||
|
||||
function DramasPage() {
|
||||
const { data, loading, reload } = 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 api.post('/api/admin/v1/dramas', { ...values, status: values.status || 'draft' });
|
||||
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={{ total: data.pagination.total, pageSize: data.pagination.pageSize }} columns={[
|
||||
{ title: 'ID', dataIndex: 'id', width: 80 },
|
||||
{ title: '标题', dataIndex: 'title' },
|
||||
{ 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> },
|
||||
]} />
|
||||
<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>
|
||||
</Form>
|
||||
</Modal>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default DramasPage;
|
||||
Reference in New Issue
Block a user