zetaloop
263 lines
10 KiB
TypeScript
263 lines
10 KiB
TypeScript
"use client"
|
||
|
||
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
|
||
import { ArrowLeft, ImagePlus, X } from "lucide-react"
|
||
import Link from "next/link"
|
||
import { useRouter } from "next/navigation"
|
||
import { useState } from "react"
|
||
import { useForm } from "react-hook-form"
|
||
import { z } from "zod"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { useRequireAuth } from "@/lib/use-require-auth"
|
||
import { useAuthStore } from "@/store/auth"
|
||
import { useOrderStore } from "@/store/orders"
|
||
import { usePostStore } from "@/store/posts"
|
||
|
||
const postSchema = z.object({
|
||
title: z.string().min(2, "标题至少2个字符").max(50, "标题最多50个字符"),
|
||
content: z.string().min(10, "内容至少10个字符"),
|
||
})
|
||
|
||
const tagOptions = ["英雄联盟", "王者荣耀", "CS2", "原神", "上分", "攻略", "好评", "吐槽", "求组队"]
|
||
|
||
export default function NewPostPage() {
|
||
const router = useRouter()
|
||
const { isAuthenticated, requireAuth } = useRequireAuth()
|
||
const currentRole = useAuthStore((state) => state.currentRole)
|
||
const userId = useAuthStore((state) => state.user?.id)
|
||
const user = useAuthStore((state) => state.user)
|
||
const orders = useOrderStore((state) => state.orders)
|
||
const posts = usePostStore((state) => state.posts)
|
||
const createPost = usePostStore((state) => state.createPost)
|
||
const [postType, setPostType] = useState("normal")
|
||
const [selectedTags, setSelectedTags] = useState<string[]>([])
|
||
const [imageCount, setImageCount] = useState(0)
|
||
const [selectedQuotePostId, setSelectedQuotePostId] = useState<string | undefined>(undefined)
|
||
const [selectedOrderId, setSelectedOrderId] = useState<string | undefined>(undefined)
|
||
const canShowOrder = currentRole === "consumer"
|
||
const effectivePostType = canShowOrder || postType !== "show_order" ? postType : "normal"
|
||
|
||
const {
|
||
register,
|
||
handleSubmit,
|
||
formState: { errors, isSubmitting },
|
||
} = useForm<z.infer<typeof postSchema>>({
|
||
resolver: standardSchemaResolver(postSchema),
|
||
})
|
||
|
||
const toggleTag = (tag: string) => {
|
||
setSelectedTags((prev) =>
|
||
prev.includes(tag) ? prev.filter((t) => t !== tag) : prev.length < 5 ? [...prev, tag] : prev,
|
||
)
|
||
}
|
||
|
||
const availableOrders = orders.filter(
|
||
(order) => order.status === "completed" && order.consumerId === userId,
|
||
)
|
||
|
||
const onSubmit = async (data: z.infer<typeof postSchema>) => {
|
||
if (!isAuthenticated) {
|
||
requireAuth(() => undefined)
|
||
return
|
||
}
|
||
|
||
requireAuth(() => {
|
||
if (!user) return
|
||
|
||
createPost({
|
||
author: user,
|
||
authorRole: currentRole,
|
||
title: data.title,
|
||
content: data.content,
|
||
images: Array.from({ length: imageCount }).map(() => "/posts/p1-1.jpg"),
|
||
tags: selectedTags,
|
||
linkedOrderId: effectivePostType === "show_order" ? selectedOrderId : undefined,
|
||
quotedPostId: effectivePostType === "quote" ? selectedQuotePostId : undefined,
|
||
})
|
||
|
||
router.push("/community")
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
|
||
<Link
|
||
href="/community"
|
||
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
|
||
>
|
||
<ArrowLeft className="h-4 w-4" />
|
||
返回社区
|
||
</Link>
|
||
|
||
<Card className="hover:shadow-[var(--shadow-card)]">
|
||
<CardHeader>
|
||
<CardTitle className="tracking-tighter leading-tight">发布帖子</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||
<div className="space-y-2">
|
||
<Label>帖子类型</Label>
|
||
<Select value={effectivePostType} onValueChange={setPostType}>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="normal">普通帖</SelectItem>
|
||
{canShowOrder && <SelectItem value="show_order">秀单帖</SelectItem>}
|
||
<SelectItem value="quote">引用帖</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{effectivePostType === "show_order" && (
|
||
<div className="space-y-2">
|
||
<Label>关联订单</Label>
|
||
<Select value={selectedOrderId} onValueChange={setSelectedOrderId}>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="选择要展示的订单" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{availableOrders.map((order) => (
|
||
<SelectItem key={order.id} value={order.id}>
|
||
{order.service.title} · {order.playerName}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
)}
|
||
|
||
{effectivePostType === "quote" && (
|
||
<div className="space-y-2">
|
||
<Label>引用帖子</Label>
|
||
<Select value={selectedQuotePostId} onValueChange={setSelectedQuotePostId}>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="选择要引用的帖子" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{posts.map((post) => (
|
||
<SelectItem key={post.id} value={post.id}>
|
||
{post.title}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
<div className="mt-2 rounded-xl border bg-muted/50 p-3 text-sm text-muted-foreground">
|
||
<p className="font-medium text-foreground">预览：</p>
|
||
{selectedQuotePostId ? (
|
||
(() => {
|
||
const post = posts.find((p) => p.id === selectedQuotePostId)
|
||
if (!post) return <p className="mt-1">未找到帖子</p>
|
||
return (
|
||
<div className="mt-2 rounded-lg border bg-background p-3">
|
||
<p className="font-medium text-foreground">{post.title}</p>
|
||
<p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
|
||
{post.content}
|
||
</p>
|
||
<div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
|
||
<span>@{post.author.nickname}</span>
|
||
<span>·</span>
|
||
<span>{new Date(post.createdAt).toLocaleDateString("zh-CN")}</span>
|
||
</div>
|
||
</div>
|
||
)
|
||
})()
|
||
) : (
|
||
<p className="mt-1">选择一个帖子以查看预览...</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="title">标题</Label>
|
||
<Input id="title" placeholder="请输入帖子标题" {...register("title")} />
|
||
{errors.title && <p className="text-xs text-destructive">{errors.title.message}</p>}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="content">内容</Label>
|
||
<Textarea id="content" placeholder="写点什么..." rows={6} {...register("content")} />
|
||
{errors.content && (
|
||
<p className="text-xs text-destructive">{errors.content.message}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>图片（最多9张）</Label>
|
||
<div className="flex gap-2 flex-wrap">
|
||
{Array.from({ length: imageCount }).map((_, i) => (
|
||
<div
|
||
key={`img-${i.toString()}`}
|
||
className="h-20 w-20 rounded-lg bg-muted flex items-center justify-center relative"
|
||
>
|
||
<span className="text-xs text-muted-foreground">图片</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setImageCount((c) => c - 1)}
|
||
className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center"
|
||
>
|
||
<X className="h-3 w-3" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
{imageCount < 9 && (
|
||
<button
|
||
type="button"
|
||
onClick={() => setImageCount((c) => c + 1)}
|
||
className="h-20 w-20 rounded-lg border-2 border-dashed border-muted-foreground/25 flex flex-col items-center justify-center gap-1 text-muted-foreground hover:border-muted-foreground/50 transition-colors"
|
||
>
|
||
<ImagePlus className="h-5 w-5" />
|
||
<span className="text-[10px]">添加</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>标签（最多5个）</Label>
|
||
<div className="flex flex-wrap gap-2">
|
||
{tagOptions.map((tag) => (
|
||
<Badge
|
||
key={tag}
|
||
variant={selectedTags.includes(tag) ? "default" : "outline"}
|
||
className="cursor-pointer"
|
||
onClick={() => toggleTag(tag)}
|
||
>
|
||
{tag}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-2">
|
||
<Button
|
||
type="submit"
|
||
className="flex-1"
|
||
disabled={isSubmitting || (postType === "show_order" && !selectedOrderId)}
|
||
>
|
||
{isSubmitting ? "发布中..." : "发布"}
|
||
</Button>
|
||
<Button type="button" variant="outline" asChild>
|
||
<Link href="/community">取消</Link>
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|