diff --git a/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx b/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx new file mode 100644 index 00000000..31261588 --- /dev/null +++ b/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx @@ -0,0 +1,248 @@ +"use client" + +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 { Card } from "@/components/ui/card" +import { Button } from "@/components/ui/button" +import { Textarea } from "@/components/ui/textarea" +import { Label } from "@/components/ui/label" +import { toast } from "@/components/ui/use-toast" +import { api } from "@/lib/api" +import { showToast } from "@/lib/toast" +import Image from "next/image" + +interface ApiResponse { + code: number + msg: string + data: T +} + +interface Material { + id: number + type: string + title: string + content: string + coverImage: string | null + resUrls: string[] + urls: string[] + createTime: string + createMomentTime: number + time: string + wechatId: string + friendId: string | null + wechatChatroomId: number + senderNickname: string + location: string | null + lat: string + lng: string +} + +const isImageUrl = (url: string) => { + return /\.(jpg|jpeg|png|gif|webp)$/i.test(url) || url.includes('oss-cn-shenzhen.aliyuncs.com') +} + +export default function EditMaterialPage({ params }: { params: Promise<{ id: string, materialId: string }> }) { + const resolvedParams = use(params) + const router = useRouter() + const [isLoading, setIsLoading] = useState(true) + const [content, setContent] = useState("") + const [images, setImages] = useState([]) + const [previewUrls, setPreviewUrls] = useState([]) + const [originalMaterial, setOriginalMaterial] = useState(null) + + // 获取素材详情 + useEffect(() => { + const fetchMaterialDetail = async () => { + setIsLoading(true) + try { + const response = await api.get>(`/v1/content/library/get-item-detail?id=${resolvedParams.materialId}`) + + if (response.code === 200 && response.data) { + const material = response.data + setOriginalMaterial(material) + setContent(material.content) + + // 处理图片 + const imageUrls: string[] = [] + + // 检查内容本身是否为图片链接 + if (isImageUrl(material.content)) { + if (!imageUrls.includes(material.content)) { + imageUrls.push(material.content) + } + } + + // 添加资源URL中的图片 + material.resUrls.forEach(url => { + if (isImageUrl(url) && !imageUrls.includes(url)) { + imageUrls.push(url) + } + }) + + setImages(imageUrls) + setPreviewUrls(imageUrls) + } else { + showToast(response.msg || "获取素材详情失败", "error") + router.back() + } + } catch (error: any) { + console.error("Failed to fetch material detail:", error) + showToast(error?.message || "请检查网络连接", "error") + router.back() + } finally { + setIsLoading(false) + } + } + + fetchMaterialDetail() + }, [resolvedParams.materialId, router]) + + // 模拟上传图片 + const handleUploadImage = () => { + // 这里应该是真实的图片上传逻辑 + // 为了演示，这里模拟添加一些示例图片URL + const mockImageUrls = [ + "https://picsum.photos/id/237/200/300", + "https://picsum.photos/id/238/200/300", + "https://picsum.photos/id/239/200/300" + ] + + const randomIndex = Math.floor(Math.random() * mockImageUrls.length) + const newImage = mockImageUrls[randomIndex] + + if (!images.includes(newImage)) { + setImages([...images, newImage]) + setPreviewUrls([...previewUrls, newImage]) + } + } + + const handleRemoveImage = (indexToRemove: number) => { + setImages(images.filter((_, index) => index !== indexToRemove)) + setPreviewUrls(previewUrls.filter((_, index) => index !== indexToRemove)) + } + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + if (!content && images.length === 0) { + showToast("请输入素材内容或上传图片", "error") + return + } + + const loadingToast = showToast("正在更新素材...", "loading", true) + try { + const response = await api.post('/v1/content/library/update-item', { + id: resolvedParams.materialId, + content: content, + resUrls: images + }) + + if (response.code === 200) { + showToast("素材更新成功", "success") + router.push(`/content/${resolvedParams.id}/materials`) + } else { + showToast(response.msg || "更新失败", "error") + } + } catch (error: any) { + console.error("Failed to update material:", error) + showToast(error?.message || "更新失败", "error") + } finally { + loadingToast.remove && loadingToast.remove() + } + } + + if (isLoading) { + return ( +
+
加载中...
+
+ ) + } + + return ( +
+
+
+
+ +

编辑素材

+
+
+
+ +
+ +
+ {/* 只有当内容不是图片链接时才显示内容编辑区 */} + {!isImageUrl(content) && ( +
+ +