622 lines
25 KiB
TypeScript
622 lines
25 KiB
TypeScript
|
import * as React from "react"
|
|||
|
|
import {
|
|||
|
|
ArrowLeft,
|
|||
|
|
Eye,
|
|||
|
|
Pencil,
|
|||
|
|
Send,
|
|||
|
|
ShieldCheck,
|
|||
|
|
Undo2,
|
|||
|
|
Upload,
|
|||
|
|
XCircle,
|
|||
|
|
} from "lucide-react"
|
|||
|
|
|
|||
|
|
import type { RoleView, WorkflowConfig } from "@/App"
|
|||
|
|
import { Badge } from "@/components/ui/badge"
|
|||
|
|
import { Button } from "@/components/ui/button"
|
|||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|||
|
|
import { Input } from "@/components/ui/input"
|
|||
|
|
import {
|
|||
|
|
Table,
|
|||
|
|
TableBody,
|
|||
|
|
TableCell,
|
|||
|
|
TableHead,
|
|||
|
|
TableHeader,
|
|||
|
|
TableRow,
|
|||
|
|
} from "@/components/ui/table"
|
|||
|
|
|
|||
|
|
type WorkflowStatus = "draft" | "pending" | "prepublished" | "published" | "rejected" | "recalled"
|
|||
|
|
|
|||
|
|
type MiniAppContent = {
|
|||
|
|
id: string
|
|||
|
|
sourceCarId: string
|
|||
|
|
sourceCarName: string
|
|||
|
|
title: string
|
|||
|
|
subtitle: string
|
|||
|
|
highlights: string
|
|||
|
|
description: string
|
|||
|
|
ctaText: string
|
|||
|
|
scheduledPublishAt: string
|
|||
|
|
imageUrls: string[]
|
|||
|
|
workflowStatus: WorkflowStatus
|
|||
|
|
updatedBy: string
|
|||
|
|
updatedAt: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type MiniAppContentLibraryProps = {
|
|||
|
|
roleView: RoleView
|
|||
|
|
workflowConfig: WorkflowConfig
|
|||
|
|
onAddAuditLog: (message: string) => void
|
|||
|
|
newContentRequest?: {
|
|||
|
|
sourceCarId: string
|
|||
|
|
sourceCarName: string
|
|||
|
|
requestId: string
|
|||
|
|
} | null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const CONTENTS: MiniAppContent[] = [
|
|||
|
|
{
|
|||
|
|
id: "c1",
|
|||
|
|
sourceCarId: "a3",
|
|||
|
|
sourceCarName: "Audi A3 Sportback",
|
|||
|
|
title: "Audi A3 Sportback",
|
|||
|
|
subtitle: "进取，不负期待",
|
|||
|
|
highlights: "数字座舱\n城市通勤\n智能互联",
|
|||
|
|
description: "适合城市用户的豪华紧凑车型，兼顾效率与智能体验。",
|
|||
|
|
ctaText: "立即预约试驾",
|
|||
|
|
scheduledPublishAt: "",
|
|||
|
|
imageUrls: [
|
|||
|
|
"https://images.unsplash.com/photo-1606152421802-db97b9c7a11b?auto=format&fit=crop&q=80&w=1200",
|
|||
|
|
"https://picsum.photos/seed/a3-content-1/900/600",
|
|||
|
|
"https://picsum.photos/seed/a3-content-2/900/600",
|
|||
|
|
],
|
|||
|
|
workflowStatus: "published",
|
|||
|
|
updatedBy: "内容运营专员",
|
|||
|
|
updatedAt: "2026-04-11 10:02",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "c2",
|
|||
|
|
sourceCarId: "a4l",
|
|||
|
|
sourceCarName: "Audi A4L",
|
|||
|
|
title: "Audi A4L 四月限时礼遇",
|
|||
|
|
subtitle: "豪华与性能平衡",
|
|||
|
|
highlights: "quattro\n商务舒适\n限时礼遇",
|
|||
|
|
description: "面向商务人群的主推内容版本，突出舒适与操控。",
|
|||
|
|
ctaText: "获取活动详情",
|
|||
|
|
scheduledPublishAt: "2026-04-14T10:00",
|
|||
|
|
imageUrls: [
|
|||
|
|
"https://images.unsplash.com/photo-1614162692292-7ac56d7f7f1e?auto=format&fit=crop&q=80&w=1200",
|
|||
|
|
"https://picsum.photos/seed/a4-content-1/900/600",
|
|||
|
|
],
|
|||
|
|
workflowStatus: "prepublished",
|
|||
|
|
updatedBy: "业务/市场负责人",
|
|||
|
|
updatedAt: "2026-04-11 09:48",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "c3",
|
|||
|
|
sourceCarId: "a6l",
|
|||
|
|
sourceCarName: "Audi A6L",
|
|||
|
|
title: "Audi A6L",
|
|||
|
|
subtitle: "懂你，更懂未来",
|
|||
|
|
highlights: "行政旗舰\n长轴空间\n智能辅助",
|
|||
|
|
description: "正在进行文案优化，待业务审核。",
|
|||
|
|
ctaText: "预约顾问回电",
|
|||
|
|
scheduledPublishAt: "",
|
|||
|
|
imageUrls: [
|
|||
|
|
"https://images.unsplash.com/photo-1541348263662-e0c86433610a?auto=format&fit=crop&q=80&w=1200",
|
|||
|
|
],
|
|||
|
|
workflowStatus: "pending",
|
|||
|
|
updatedBy: "内容运营专员",
|
|||
|
|
updatedAt: "2026-04-11 09:30",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "c4",
|
|||
|
|
sourceCarId: "q3",
|
|||
|
|
sourceCarName: "Audi Q3",
|
|||
|
|
title: "Audi Q3 城市灵动版",
|
|||
|
|
subtitle: "年轻进阶，灵动出行",
|
|||
|
|
highlights: "紧凑SUV\n智能互联\n都市通勤",
|
|||
|
|
description: "新建草稿，待进一步补充图文和活动权益信息。",
|
|||
|
|
ctaText: "预约试驾",
|
|||
|
|
scheduledPublishAt: "",
|
|||
|
|
imageUrls: [
|
|||
|
|
"https://picsum.photos/seed/q3-content-1/900/600",
|
|||
|
|
],
|
|||
|
|
workflowStatus: "draft",
|
|||
|
|
updatedBy: "内容运营专员",
|
|||
|
|
updatedAt: "2026-04-11 08:40",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "c5",
|
|||
|
|
sourceCarId: "q5l",
|
|||
|
|
sourceCarName: "Audi Q5L",
|
|||
|
|
title: "Audi Q5L 周末试驾礼遇",
|
|||
|
|
subtitle: "自由，由我定义",
|
|||
|
|
highlights: "四驱性能\n家庭空间\n周末活动",
|
|||
|
|
description: "因权益文案与活动规则不一致，被驳回待修订。",
|
|||
|
|
ctaText: "了解礼遇",
|
|||
|
|
scheduledPublishAt: "",
|
|||
|
|
imageUrls: [
|
|||
|
|
"https://picsum.photos/seed/q5-content-1/900/600",
|
|||
|
|
],
|
|||
|
|
workflowStatus: "rejected",
|
|||
|
|
updatedBy: "业务/市场负责人",
|
|||
|
|
updatedAt: "2026-04-11 08:10",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "c6",
|
|||
|
|
sourceCarId: "a8l",
|
|||
|
|
sourceCarName: "Audi A8L",
|
|||
|
|
title: "Audi A8L 尊享礼宾版",
|
|||
|
|
subtitle: "旗舰格局，沉稳之选",
|
|||
|
|
highlights: "旗舰行政\n豪华座舱\n专属服务",
|
|||
|
|
description: "已发布后因活动档期调整撤回，待重新排期。",
|
|||
|
|
ctaText: "预约专属顾问",
|
|||
|
|
scheduledPublishAt: "2026-04-15T09:30",
|
|||
|
|
imageUrls: [
|
|||
|
|
"https://picsum.photos/seed/a8-content-1/900/600",
|
|||
|
|
],
|
|||
|
|
workflowStatus: "recalled",
|
|||
|
|
updatedBy: "业务/市场负责人",
|
|||
|
|
updatedAt: "2026-04-11 07:55",
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const WORKFLOW_LABEL: Record<WorkflowStatus, string> = {
|
|||
|
|
draft: "草稿",
|
|||
|
|
pending: "待审核",
|
|||
|
|
prepublished: "预发布",
|
|||
|
|
published: "已发布",
|
|||
|
|
rejected: "已驳回",
|
|||
|
|
recalled: "已撤回",
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function workflowBadgeClass(status: WorkflowStatus) {
|
|||
|
|
switch (status) {
|
|||
|
|
case "draft":
|
|||
|
|
return "bg-gray-100 text-gray-700 border-gray-200"
|
|||
|
|
case "pending":
|
|||
|
|
return "bg-amber-50 text-amber-700 border-amber-200"
|
|||
|
|
case "prepublished":
|
|||
|
|
return "bg-blue-50 text-blue-700 border-blue-200"
|
|||
|
|
case "published":
|
|||
|
|
return "bg-emerald-50 text-emerald-700 border-emerald-200"
|
|||
|
|
case "rejected":
|
|||
|
|
return "bg-rose-50 text-rose-700 border-rose-200"
|
|||
|
|
case "recalled":
|
|||
|
|
return "bg-zinc-100 text-zinc-700 border-zinc-200"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function nowString() {
|
|||
|
|
return new Date().toLocaleString("zh-CN", { hour12: false })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog, newContentRequest }: MiniAppContentLibraryProps) {
|
|||
|
|
const [contents, setContents] = React.useState<MiniAppContent[]>(CONTENTS)
|
|||
|
|
const [viewMode, setViewMode] = React.useState<"list" | "editor">("list")
|
|||
|
|
const [selectedId, setSelectedId] = React.useState<string>(CONTENTS[0].id)
|
|||
|
|
const [newImageUrl, setNewImageUrl] = React.useState("")
|
|||
|
|
|
|||
|
|
React.useEffect(() => {
|
|||
|
|
if (!newContentRequest) return
|
|||
|
|
|
|||
|
|
const id = `c${newContentRequest.requestId}`
|
|||
|
|
const existing = contents.find((item) => item.id === id)
|
|||
|
|
if (!existing) {
|
|||
|
|
const draft: MiniAppContent = {
|
|||
|
|
id,
|
|||
|
|
sourceCarId: newContentRequest.sourceCarId,
|
|||
|
|
sourceCarName: newContentRequest.sourceCarName,
|
|||
|
|
title: newContentRequest.sourceCarName,
|
|||
|
|
subtitle: "",
|
|||
|
|
highlights: "",
|
|||
|
|
description: "",
|
|||
|
|
ctaText: "立即预约试驾",
|
|||
|
|
scheduledPublishAt: "",
|
|||
|
|
imageUrls: [],
|
|||
|
|
workflowStatus: "draft",
|
|||
|
|
updatedBy: "内容运营专员",
|
|||
|
|
updatedAt: nowString(),
|
|||
|
|
}
|
|||
|
|
setContents((prev) => [draft, ...prev])
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setSelectedId(id)
|
|||
|
|
setViewMode("editor")
|
|||
|
|
}, [newContentRequest?.requestId])
|
|||
|
|
|
|||
|
|
const canEdit = roleView === "content-ops"
|
|||
|
|
const canApprove = roleView === "biz-market"
|
|||
|
|
const selected = contents.find((item) => item.id === selectedId) ?? null
|
|||
|
|
|
|||
|
|
const updateContent = (id: string, patch: Partial<MiniAppContent>) => {
|
|||
|
|
setContents((prev) =>
|
|||
|
|
prev.map((item) => (item.id === id ? { ...item, ...patch, updatedAt: nowString() } : item))
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const saveDraft = (item: MiniAppContent) => {
|
|||
|
|
updateContent(item.id, { workflowStatus: "draft", updatedBy: "内容运营专员" })
|
|||
|
|
onAddAuditLog(`内容运营专员保存 ${item.sourceCarName} 内容草稿`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const submitForReview = (item: MiniAppContent) => {
|
|||
|
|
updateContent(item.id, { workflowStatus: "pending", updatedBy: "内容运营专员" })
|
|||
|
|
onAddAuditLog(`内容运营专员提交 ${item.sourceCarName} 到审核队列`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const withdrawReview = (item: MiniAppContent) => {
|
|||
|
|
updateContent(item.id, { workflowStatus: "draft", updatedBy: "内容运营专员" })
|
|||
|
|
onAddAuditLog(`内容运营专员撤回 ${item.sourceCarName} 的审核申请`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const approve = (item: MiniAppContent) => {
|
|||
|
|
const nextStatus: WorkflowStatus = workflowConfig.enablePrePublish ? "prepublished" : "published"
|
|||
|
|
updateContent(item.id, { workflowStatus: nextStatus, updatedBy: "业务/市场负责人" })
|
|||
|
|
onAddAuditLog(`业务/市场负责人审批通过 ${item.sourceCarName}`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const reject = (item: MiniAppContent) => {
|
|||
|
|
updateContent(item.id, { workflowStatus: "rejected", updatedBy: "业务/市场负责人" })
|
|||
|
|
onAddAuditLog(`业务/市场负责人驳回 ${item.sourceCarName} 内容版本`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const publish = (item: MiniAppContent) => {
|
|||
|
|
const actor = roleView === "biz-market" ? "业务/市场负责人" : "内容运营专员"
|
|||
|
|
updateContent(item.id, { workflowStatus: "published", updatedBy: actor })
|
|||
|
|
onAddAuditLog(`${actor}发布 ${item.sourceCarName} 到小程序`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const recall = (item: MiniAppContent) => {
|
|||
|
|
updateContent(item.id, { workflowStatus: "recalled", updatedBy: "业务/市场负责人" })
|
|||
|
|
onAddAuditLog(`业务/市场负责人撤回 ${item.sourceCarName} 已发布内容`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const revive = (item: MiniAppContent) => {
|
|||
|
|
const nextStatus: WorkflowStatus = workflowConfig.enablePrePublish ? "prepublished" : "published"
|
|||
|
|
updateContent(item.id, { workflowStatus: nextStatus, updatedBy: "业务/市场负责人" })
|
|||
|
|
onAddAuditLog(`业务/市场负责人恢复 ${item.sourceCarName} 的发布流程`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const createNewVersion = (item: MiniAppContent) => {
|
|||
|
|
updateContent(item.id, { workflowStatus: "draft", updatedBy: "内容运营专员" })
|
|||
|
|
onAddAuditLog(`内容运营专员基于 ${item.sourceCarName} 发布版本创建新稿`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const addImage = (item: MiniAppContent) => {
|
|||
|
|
const next = newImageUrl.trim()
|
|||
|
|
if (!next) return
|
|||
|
|
updateContent(item.id, { imageUrls: [...item.imageUrls, next] })
|
|||
|
|
setNewImageUrl("")
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const removeImage = (item: MiniAppContent, idx: number) => {
|
|||
|
|
updateContent(item.id, { imageUrls: item.imageUrls.filter((_, i) => i !== idx) })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const renderActions = (item: MiniAppContent) => {
|
|||
|
|
const actions: React.ReactNode[] = []
|
|||
|
|
|
|||
|
|
if (canEdit) {
|
|||
|
|
if (item.workflowStatus === "draft" || item.workflowStatus === "rejected" || item.workflowStatus === "recalled") {
|
|||
|
|
actions.push(
|
|||
|
|
<Button key="submit" size="sm" variant="outline" onClick={() => submitForReview(item)}>
|
|||
|
|
<Send className="mr-1 h-3.5 w-3.5" />{item.workflowStatus === "draft" ? "提交审核" : "重新提审"}
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (item.workflowStatus === "pending") {
|
|||
|
|
actions.push(
|
|||
|
|
<Button key="withdraw" size="sm" variant="outline" onClick={() => withdrawReview(item)}>
|
|||
|
|
<Undo2 className="mr-1 h-3.5 w-3.5" />撤回提审
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (item.workflowStatus === "prepublished") {
|
|||
|
|
actions.push(
|
|||
|
|
<Button key="publish" size="sm" variant="outline" onClick={() => publish(item)}>
|
|||
|
|
<Upload className="mr-1 h-3.5 w-3.5" />发布
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (item.workflowStatus === "published") {
|
|||
|
|
actions.push(
|
|||
|
|
<Button key="new-version" size="sm" variant="outline" onClick={() => createNewVersion(item)}>
|
|||
|
|
<Pencil className="mr-1 h-3.5 w-3.5" />新建版本
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (canApprove) {
|
|||
|
|
if (item.workflowStatus === "pending") {
|
|||
|
|
actions.push(
|
|||
|
|
<Button key="approve" size="sm" variant="outline" onClick={() => approve(item)}>
|
|||
|
|
<ShieldCheck className="mr-1 h-3.5 w-3.5" />通过
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
actions.push(
|
|||
|
|
<Button key="reject" size="sm" variant="outline" onClick={() => reject(item)}>
|
|||
|
|
<XCircle className="mr-1 h-3.5 w-3.5" />驳回
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (workflowConfig.allowRecall && item.workflowStatus === "published") {
|
|||
|
|
actions.push(
|
|||
|
|
<Button key="recall" size="sm" variant="outline" onClick={() => recall(item)}>
|
|||
|
|
<Undo2 className="mr-1 h-3.5 w-3.5" />撤回
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (item.workflowStatus === "recalled") {
|
|||
|
|
actions.push(
|
|||
|
|
<Button key="revive" size="sm" variant="outline" onClick={() => revive(item)}>
|
|||
|
|
<Upload className="mr-1 h-3.5 w-3.5" />恢复流程
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
actions.push(
|
|||
|
|
<Button key="detail" size="sm" variant="ghost" onClick={() => { setSelectedId(item.id); setViewMode("editor") }}>
|
|||
|
|
<Eye className="mr-1 h-3.5 w-3.5" />详情
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
return actions
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (viewMode === "editor" && selected) {
|
|||
|
|
const highlights = selected.highlights
|
|||
|
|
.split("\n")
|
|||
|
|
.map((s) => s.trim())
|
|||
|
|
.filter(Boolean)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col gap-6 p-8">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<Button variant="outline" size="sm" onClick={() => setViewMode("list")}>
|
|||
|
|
<ArrowLeft className="mr-1 h-3.5 w-3.5" />返回列表
|
|||
|
|
</Button>
|
|||
|
|
<div>
|
|||
|
|
<h1 className="text-3xl font-bold tracking-tight">小程序内容编辑</h1>
|
|||
|
|
<p className="text-muted-foreground">独立编辑页：左侧字段编辑，右侧手机窗口预览。</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Badge variant="outline" className={workflowBadgeClass(selected.workflowStatus)}>
|
|||
|
|
当前状态：{WORKFLOW_LABEL[selected.workflowStatus]}
|
|||
|
|
</Badge>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid gap-6 xl:grid-cols-2">
|
|||
|
|
<Card className="border-none shadow-sm bg-white">
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle className="text-lg font-bold">编辑字段</CardTitle>
|
|||
|
|
<CardDescription>基于官网源车型生成的内容实体（MiniAppContent）。</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-4">
|
|||
|
|
<div className="grid gap-2">
|
|||
|
|
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">来源车型</label>
|
|||
|
|
<Input value={selected.sourceCarName} disabled />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid gap-2">
|
|||
|
|
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">标题</label>
|
|||
|
|
<Input value={selected.title} disabled={!canEdit} onChange={(e) => updateContent(selected.id, { title: e.target.value })} />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid gap-2">
|
|||
|
|
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">副标题</label>
|
|||
|
|
<Input value={selected.subtitle} disabled={!canEdit} onChange={(e) => updateContent(selected.id, { subtitle: e.target.value })} />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid gap-2">
|
|||
|
|
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">卖点（每行一条）</label>
|
|||
|
|
<textarea
|
|||
|
|
className="min-h-24 rounded-lg border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:border-ring"
|
|||
|
|
value={selected.highlights}
|
|||
|
|
disabled={!canEdit}
|
|||
|
|
onChange={(e) => updateContent(selected.id, { highlights: e.target.value })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid gap-2">
|
|||
|
|
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">图文描述（轻量编排）</label>
|
|||
|
|
<textarea
|
|||
|
|
className="min-h-28 rounded-lg border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:border-ring"
|
|||
|
|
value={selected.description}
|
|||
|
|
disabled={!canEdit}
|
|||
|
|
onChange={(e) => updateContent(selected.id, { description: e.target.value })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid gap-2">
|
|||
|
|
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">按钮文案</label>
|
|||
|
|
<Input value={selected.ctaText} disabled={!canEdit} onChange={(e) => updateContent(selected.id, { ctaText: e.target.value })} />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{workflowConfig.publishStrategy === "scheduled" && (
|
|||
|
|
<div className="grid gap-2">
|
|||
|
|
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">预约发布时间</label>
|
|||
|
|
<Input
|
|||
|
|
type="datetime-local"
|
|||
|
|
disabled={!canEdit}
|
|||
|
|
value={selected.scheduledPublishAt}
|
|||
|
|
onChange={(e) => updateContent(selected.id, { scheduledPublishAt: e.target.value })}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="grid gap-2">
|
|||
|
|
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">图片素材（多图）</label>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<Input value={newImageUrl} disabled={!canEdit} onChange={(e) => setNewImageUrl(e.target.value)} placeholder="粘贴图片 URL" />
|
|||
|
|
<Button variant="outline" disabled={!canEdit} onClick={() => addImage(selected)}>新增</Button>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-2 gap-2">
|
|||
|
|
{selected.imageUrls.map((url, idx) => (
|
|||
|
|
<div key={`${url}-${idx}`} className="rounded-lg border p-2">
|
|||
|
|
<img src={url} alt={`${selected.sourceCarName}-${idx}`} className="aspect-video w-full rounded object-cover" />
|
|||
|
|
<div className="mt-2 flex justify-end">
|
|||
|
|
<Button size="sm" variant="ghost" disabled={!canEdit} onClick={() => removeImage(selected, idx)}>
|
|||
|
|
删除
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex gap-2 pt-2">
|
|||
|
|
<Button variant="outline" disabled={!canEdit} onClick={() => saveDraft(selected)}>
|
|||
|
|
<Pencil className="mr-1 h-3.5 w-3.5" />保存草稿
|
|||
|
|
</Button>
|
|||
|
|
<Button disabled={!canEdit} onClick={() => submitForReview(selected)}>
|
|||
|
|
<Send className="mr-1 h-3.5 w-3.5" />提交审核
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card className="border-none shadow-sm bg-white">
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle className="text-lg font-bold">小程序预览（手机窗口）</CardTitle>
|
|||
|
|
<CardDescription>按钮上方展示预约试驾表单视觉区（仅演示，不提交）。</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="flex justify-center">
|
|||
|
|
<div className="w-[360px] rounded-[28px] border border-gray-200 bg-white shadow-2xl overflow-hidden">
|
|||
|
|
<div className="h-9 bg-black text-white px-4 flex items-center text-[10px] tracking-[0.18em] uppercase">Audi</div>
|
|||
|
|
<div className="relative">
|
|||
|
|
<img src={selected.imageUrls[0]} alt={selected.title} className="h-48 w-full object-cover" />
|
|||
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/65 to-transparent" />
|
|||
|
|
<div className="absolute left-4 right-4 bottom-3 text-white">
|
|||
|
|
<p className="text-lg font-bold tracking-tight">{selected.title}</p>
|
|||
|
|
<p className="text-xs opacity-85">{selected.subtitle}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="p-4">
|
|||
|
|
<div className="mb-3 grid grid-cols-3 gap-2">
|
|||
|
|
{selected.imageUrls.slice(0, 3).map((url, idx) => (
|
|||
|
|
<img key={`${url}-${idx}`} src={url} alt={`thumb-${idx}`} className="h-16 w-full rounded object-cover" />
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{highlights.map((item) => (
|
|||
|
|
<div key={item} className="inline-flex mr-2 mb-1 rounded-full border px-2 py-0.5 text-[10px] text-gray-600">
|
|||
|
|
{item}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p className="mt-3 text-sm leading-6 text-gray-600">{selected.description}</p>
|
|||
|
|
|
|||
|
|
{workflowConfig.publishStrategy === "scheduled" && selected.scheduledPublishAt && (
|
|||
|
|
<div className="mt-3 rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-700">
|
|||
|
|
预约发布时间：{selected.scheduledPublishAt.replace("T", " ")}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="mt-4 space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
|
|||
|
|
<div className="grid gap-1">
|
|||
|
|
<label className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">姓名</label>
|
|||
|
|
<Input placeholder="请输入您的姓名" disabled />
|
|||
|
|
</div>
|
|||
|
|
<div className="grid gap-1">
|
|||
|
|
<label className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">手机号</label>
|
|||
|
|
<Input placeholder="请输入手机号" disabled />
|
|||
|
|
</div>
|
|||
|
|
<div className="grid gap-1">
|
|||
|
|
<label className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">意向城市</label>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<select className="h-8 flex-1 rounded-lg border border-input bg-white px-2 text-sm text-gray-500" disabled>
|
|||
|
|
<option>请选择城市</option>
|
|||
|
|
</select>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
onClick={() => alert("获取位置功能为原型占位提示")}
|
|||
|
|
>
|
|||
|
|
获取位置
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<label className="flex items-start gap-2 text-[11px] leading-5 text-gray-600">
|
|||
|
|
<input type="checkbox" className="mt-0.5" />
|
|||
|
|
<span>
|
|||
|
|
我已阅读并同意《个人信息保护政策》，授权奥迪及授权经销商与我联系。
|
|||
|
|
</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Button className="mt-4 w-full bg-audi-black hover:bg-audi-dark-gray text-white" disabled>
|
|||
|
|
{selected.ctaText || "立即预约试驾"}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col gap-6 p-8">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex flex-col gap-1">
|
|||
|
|
<h1 className="text-3xl font-bold tracking-tight">小程序内容库</h1>
|
|||
|
|
<p className="text-muted-foreground">集中管理编辑、审核、保存和发布后的内容版本。</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Card className="border-none shadow-sm bg-white">
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle className="text-lg font-bold">内容版本列表</CardTitle>
|
|||
|
|
<CardDescription>与官网车型源数据分离，避免同步数据和发布内容混用。</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent>
|
|||
|
|
<Table>
|
|||
|
|
<TableHeader>
|
|||
|
|
<TableRow className="hover:bg-transparent border-b border-gray-100">
|
|||
|
|
<TableHead className="font-bold text-audi-black">来源车型</TableHead>
|
|||
|
|
<TableHead className="font-bold text-audi-black">内容标题</TableHead>
|
|||
|
|
<TableHead className="font-bold text-audi-black">状态</TableHead>
|
|||
|
|
<TableHead className="font-bold text-audi-black">最近更新</TableHead>
|
|||
|
|
<TableHead className="text-right font-bold text-audi-black">操作</TableHead>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
{contents.map((item) => (
|
|||
|
|
<TableRow key={item.id} className="hover:bg-gray-50/50 border-b border-gray-50 transition-colors">
|
|||
|
|
<TableCell>
|
|||
|
|
<p className="font-medium">{item.sourceCarName}</p>
|
|||
|
|
<p className="text-xs text-muted-foreground">{item.sourceCarId}</p>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="font-medium">{item.title}</TableCell>
|
|||
|
|
<TableCell>
|
|||
|
|
<Badge variant="outline" className={workflowBadgeClass(item.workflowStatus)}>
|
|||
|
|
{WORKFLOW_LABEL[item.workflowStatus]}
|
|||
|
|
</Badge>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-xs text-muted-foreground">
|
|||
|
|
<p>{item.updatedAt}</p>
|
|||
|
|
<p>{item.updatedBy}</p>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell className="text-right">
|
|||
|
|
<div className="flex flex-wrap justify-end gap-2">{renderActions(item)}</div>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|