yuzhiran-dev
70 lines
3.1 KiB
TypeScript
70 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Card } from '@/components/ui/card';
|
|
|
|
export default function NewCoursePage() {
|
|
const router = useRouter();
|
|
const [form, setForm] = useState({ title: '', description: '', cover: '', isFree: true });
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!form.title.trim()) return;
|
|
setSubmitting(true);
|
|
try {
|
|
const token = localStorage.getItem('adminToken');
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/v1/courses`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
|
|
body: JSON.stringify(form),
|
|
});
|
|
if (res.ok) router.push('/admin/courses');
|
|
} catch {}
|
|
setSubmitting(false);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="border-b border-border bg-card px-4 py-4">
|
|
<h1 className="text-2xl font-bold text-foreground">新建课程</h1>
|
|
</div>
|
|
<div className="max-w-2xl mx-auto p-6">
|
|
<Card className="p-6">
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-1">课程标题</label>
|
|
<Input value={form.title} onChange={e => setForm(f => ({ ...f, title: e.target.value }))} placeholder="输入课程标题" required />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-1">描述</label>
|
|
<textarea value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
|
|
rows={3} className="w-full px-3 py-2 bg-background border border-input rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
|
placeholder="课程简介" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-foreground mb-1">封面链接</label>
|
|
<Input value={form.cover} onChange={e => setForm(f => ({ ...f, cover: e.target.value }))} placeholder="https://..." />
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<input type="checkbox" id="isFree" checked={form.isFree} onChange={e => setForm(f => ({ ...f, isFree: e.target.checked }))}
|
|
className="rounded border-input" />
|
|
<label htmlFor="isFree" className="text-sm text-foreground">免费课程</label>
|
|
</div>
|
|
<div className="flex gap-2 pt-2">
|
|
<Button type="submit" disabled={submitting || !form.title.trim()}>
|
|
{submitting ? '创建中...' : '创建课程'}
|
|
</Button>
|
|
<Link href="/admin/courses"><Button type="button" variant="outline">取消</Button></Link>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|