feat: 完成TikTok短剧管理后台基础功能开发

本次提交搭建了完整的后台管理系统,包含:
1.  登录认证与权限校验体系
2.  工作台、短剧、用户、角色、人员、日志等全业务模块
3.  响应式布局与通用样式组件
4.  菜单动态过滤与路由权限控制
5.  移除了README中冗余的权限管理菜单项
This commit is contained in:
2026-07-01 15:24:13 +08:00
parent 6722752d5e
commit 51e26025c6
27 changed files with 1364 additions and 1282 deletions

47
src/Drama/index.tsx Normal file
View 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;