init: initial commit
This commit is contained in:
Blizzard
@@ -0,0 +1,325 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
getChannelListApi,
|
||||
saveChannelApi,
|
||||
updateChannelApi,
|
||||
deleteChannelApi,
|
||||
getCategoryListApi
|
||||
} from '../../../api/radio';
|
||||
import { Button } from '../../../components/ui/button';
|
||||
import { Input } from '../../../components/ui/input';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../../components/ui/dialog';
|
||||
import { Label } from '../../../components/ui/label';
|
||||
import { Plus, Edit, Trash2 } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export default function Channel() {
|
||||
const [data, setData] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [categories, setCategories] = useState([]);
|
||||
|
||||
// Pagination & Search
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize] = useState(10);
|
||||
const [searchName, setSearchName] = useState('');
|
||||
|
||||
// Dialog State
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
ID: undefined,
|
||||
categoryId: '',
|
||||
name: '',
|
||||
description: '',
|
||||
price: 0,
|
||||
coverId: '',
|
||||
tags: '',
|
||||
isVipOnly: 0,
|
||||
sort: 0,
|
||||
status: 1
|
||||
});
|
||||
|
||||
const fetchCategories = async () => {
|
||||
try {
|
||||
const res: any = await getCategoryListApi();
|
||||
setCategories(res.list || res || []);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const res: any = await getChannelListApi({
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
keyword: searchName,
|
||||
name: searchName
|
||||
});
|
||||
setData(res.list || []);
|
||||
setTotal(res.total || 0);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Table data fetch only on pagination change
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [page, pageSize]);
|
||||
|
||||
// Lazy load categories only when dialog opens
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
fetchCategories();
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const handleSearch = () => {
|
||||
if (page === 1) {
|
||||
fetchData();
|
||||
} else {
|
||||
setPage(1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenAdd = () => {
|
||||
setIsEdit(false);
|
||||
setFormData({
|
||||
ID: undefined, categoryId: '', name: '', description: '',
|
||||
price: 0, coverId: '', tags: '', isVipOnly: 0, sort: 0, status: 1
|
||||
});
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleOpenEdit = (record: any) => {
|
||||
setIsEdit(true);
|
||||
setFormData({
|
||||
ID: record.ID,
|
||||
categoryId: record.categoryId,
|
||||
name: record.name,
|
||||
description: record.description,
|
||||
price: record.price,
|
||||
coverId: record.coverId,
|
||||
tags: record.tags,
|
||||
isVipOnly: record.isVipOnly,
|
||||
sort: record.sort,
|
||||
status: record.status
|
||||
});
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm('确定要删除这个频道吗?')) return;
|
||||
try {
|
||||
await deleteChannelApi({ id });
|
||||
toast.success('删除成功');
|
||||
fetchData();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.name) {
|
||||
toast.error('请填写频道名称');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (isEdit) {
|
||||
await updateChannelApi(formData);
|
||||
toast.success('更新成功');
|
||||
} else {
|
||||
await saveChannelApi(formData);
|
||||
toast.success('创建成功');
|
||||
}
|
||||
setOpen(false);
|
||||
fetchData();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4 flex flex-col h-full bg-background rounded-lg border p-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">频道管理</h1>
|
||||
<p className="text-muted-foreground">管理所有的电台频道</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div className="flex justify-between items-center space-x-2">
|
||||
<div className="flex space-x-2 w-full max-sm">
|
||||
<Input
|
||||
placeholder="根据名称搜索..."
|
||||
value={searchName}
|
||||
onChange={(e) => setSearchName(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
/>
|
||||
<Button variant="secondary" onClick={handleSearch}>搜索</Button>
|
||||
</div>
|
||||
<Button onClick={handleOpenAdd}>
|
||||
<Plus className="w-4 h-4 mr-2" /> 新增频道
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
<div className="border rounded-md mt-4 flex-1 overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[80px]">ID</TableHead>
|
||||
<TableHead>分类ID</TableHead>
|
||||
<TableHead>名称</TableHead>
|
||||
<TableHead>描述</TableHead>
|
||||
<TableHead>标签</TableHead>
|
||||
<TableHead>价格(分)</TableHead>
|
||||
<TableHead>仅VIP</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading && data.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center h-32">加载中...</TableCell>
|
||||
</TableRow>
|
||||
) : data.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center h-32 text-muted-foreground">未找到数据</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
data.map((item: any) => (
|
||||
<TableRow key={item.ID} className={loading ? 'opacity-50' : ''}>
|
||||
<TableCell>{item.ID}</TableCell>
|
||||
<TableCell>{item.categoryId}</TableCell>
|
||||
<TableCell className="font-medium">{item.name}</TableCell>
|
||||
<TableCell>{item.description}</TableCell>
|
||||
<TableCell>{item.tags}</TableCell>
|
||||
<TableCell>{item.price}</TableCell>
|
||||
<TableCell>{item.isVipOnly === 1 ? '是' : '否'}</TableCell>
|
||||
<TableCell>{item.status === 1 ? '启用' : '禁用'}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="icon" onClick={() => handleOpenEdit(item)}>
|
||||
<Edit className="w-4 h-4 text-blue-500" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => handleDelete(item.ID)}>
|
||||
<Trash2 className="w-4 h-4 text-red-500" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="flex bg-muted p-2 mt-2 rounded items-center justify-between text-sm text-muted-foreground">
|
||||
<span>总计: {total} 条</span>
|
||||
<span>每页: {pageSize} 条</span>
|
||||
</div>
|
||||
|
||||
{/* Form Dialog */}
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEdit ? '编辑频道' : '新增频道'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4 max-h-[60vh] overflow-y-auto px-1">
|
||||
<div className="space-y-2">
|
||||
<Label>名称</Label>
|
||||
<Input
|
||||
value={formData.name}
|
||||
onChange={e => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="输入频道名称"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>选择分类</Label>
|
||||
<select
|
||||
className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
value={formData.categoryId}
|
||||
onChange={e => setFormData({ ...formData, categoryId: e.target.value })}
|
||||
>
|
||||
<option value="" disabled>选择一个分类</option>
|
||||
{categories.map((c: any) => (
|
||||
<option key={c.ID} value={c.ID}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>描述</Label>
|
||||
<Input
|
||||
value={formData.description}
|
||||
onChange={e => setFormData({ ...formData, description: e.target.value })}
|
||||
placeholder="频道描述"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>标签 (逗号分隔)</Label>
|
||||
<Input
|
||||
value={formData.tags}
|
||||
onChange={e => setFormData({ ...formData, tags: e.target.value })}
|
||||
placeholder="例：音乐,新闻"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex space-x-4">
|
||||
<div className="space-y-2 flex-1">
|
||||
<Label>价格 (分)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={formData.price}
|
||||
onChange={e => setFormData({ ...formData, price: parseInt(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 flex-1">
|
||||
<Label>排序</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={formData.sort}
|
||||
onChange={e => setFormData({ ...formData, sort: parseInt(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-4">
|
||||
<div className="space-y-2 flex-1">
|
||||
<Label>仅限VIP</Label>
|
||||
<select
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
value={formData.isVipOnly}
|
||||
onChange={e => setFormData({ ...formData, isVipOnly: parseInt(e.target.value) })}
|
||||
>
|
||||
<option value={0}>否</option>
|
||||
<option value={1}>是</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2 flex-1">
|
||||
<Label>状态</Label>
|
||||
<select
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
value={formData.status}
|
||||
onChange={e => setFormData({ ...formData, status: parseInt(e.target.value) })}
|
||||
>
|
||||
<option value={1}>启用</option>
|
||||
<option value={0}>禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>取消</Button>
|
||||
<Button onClick={handleSubmit}>提交</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user