From 8b98ff39923b5f6de6ba9d32c6c7c65dd3abe7db Mon Sep 17 00:00:00 2001 From: wong <106998207@qq.com> Date: Wed, 14 May 2025 17:25:40 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=93=8D=E7=9B=98=E6=89=8B=E3=80=91?= =?UTF-8?q?=20=E5=86=85=E5=AE=B9=E5=BA=93=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[id]/materials/edit/[materialId]/page.tsx | 210 ++++++++++---- .../app/content/[id]/materials/new/page.tsx | 265 +++++++++++++----- Cunkebao/app/content/[id]/materials/page.tsx | 30 +- .../controller/ContentLibraryController.php | 22 +- 4 files changed, 383 insertions(+), 144 deletions(-) diff --git a/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx b/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx index aeb5f05e..e8188f91 100644 --- a/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx +++ b/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx @@ -4,7 +4,7 @@ import type React from "react" import { useState, useEffect, use } from "react" import { useRouter } from "next/navigation" -import { ChevronLeft, Plus, X, Image as ImageIcon, UploadCloud } from "lucide-react" +import { ChevronLeft, Plus, X, Image as ImageIcon, UploadCloud, Link, Video, FileText, Layers } from "lucide-react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" @@ -13,6 +13,8 @@ import { toast } from "@/components/ui/use-toast" import { api } from "@/lib/api" import { showToast } from "@/lib/toast" import Image from "next/image" +import { Input } from "@/components/ui/input" +import { cn } from "@/lib/utils" interface ApiResponse { code: number @@ -44,6 +46,15 @@ const isImageUrl = (url: string) => { return /\.(jpg|jpeg|png|gif|webp)$/i.test(url) || url.includes('oss-cn-shenzhen.aliyuncs.com') } +// 素材类型枚举 +const MATERIAL_TYPES = [ + { id: 1, name: "图片", icon: ImageIcon }, + { id: 2, name: "链接", icon: Link }, + { id: 3, name: "视频", icon: Video }, + { id: 4, name: "文本", icon: FileText }, + { id: 5, name: "小程序", icon: Layers } +] + export default function EditMaterialPage({ params }: { params: Promise<{ id: string, materialId: string }> }) { const resolvedParams = use(params) const router = useRouter() @@ -52,6 +63,8 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str const [images, setImages] = useState([]) const [previewUrls, setPreviewUrls] = useState([]) const [originalMaterial, setOriginalMaterial] = useState(null) + const [materialType, setMaterialType] = useState(1) // 默认为图片类型 + const [url, setUrl] = useState("") // 获取素材详情 useEffect(() => { @@ -65,6 +78,14 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str setOriginalMaterial(material) setContent(material.content) + // 设置素材类型 + setMaterialType(Number(material.type) || 1) + + // 如果是链接类型,设置URL + if (material.type === "2" && material.urls && material.urls.length > 0) { + setUrl(material.urls[0]) + } + // 处理图片 const imageUrls: string[] = [] @@ -126,18 +147,37 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() - if (!content && images.length === 0) { - showToast("请输入素材内容或上传图片", "error") + + // 根据不同类型校验不同字段 + if (materialType === 1 && images.length === 0) { + showToast("请上传图片", "error") + return + } else if (materialType === 2 && !url) { + showToast("请输入链接地址", "error") + return + } else if ((materialType === 4 || materialType === 6) && !content) { + showToast("请输入文本内容", "error") return } const loadingToast = showToast("正在更新素材...", "loading", true) try { - const response = await api.post('/v1/content/library/update-item', { + const payload: any = { id: resolvedParams.materialId, + type: materialType, content: content, - resUrls: images - }) + } + + // 根据类型添加不同的字段 + if (materialType === 1) { + payload.resUrls = images + } else if (materialType === 2) { + payload.urls = [url] + } else if (materialType === 3) { + payload.urls = [url] + } + + const response = await api.post('/v1/content/library/update-item', payload) if (response.code === 200) { showToast("素材更新成功", "success") @@ -177,8 +217,31 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
- {/* 只有当内容不是图片链接时才显示内容编辑区 */} - {!isImageUrl(content) && ( + {/* 素材类型选择器 */} +
+ +
+ {MATERIAL_TYPES.map((type) => ( + + ))} +
+
+ + {/* 根据不同类型显示不同的编辑区域 */} + {(materialType === 4 || materialType === 6 || (materialType === 1 && !isImageUrl(content))) && (