fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

内容库优化

Browse Source
This commit is contained in:
wong
2025-05-21 09:27:35 +08:00
parent d39e88be7f
commit 61bcbf2790
5 changed files with 540 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

367
Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx
View File

@@ -4,7 +4,7 @@ import type React from "react"
import { useState, useEffect, use } from "react" import { useState, useEffect, use } from "react"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { ChevronLeft, Plus, X, Image as ImageIcon, UploadCloud, Link, Video, FileText, Layers } from "lucide-react" import { ChevronLeft, Plus, X, Image as ImageIcon, UploadCloud, Link, Video, FileText, Layers, CalendarDays, ChevronDown } from "lucide-react"
import { Card } from "@/components/ui/card" import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea" import { Textarea } from "@/components/ui/textarea"
@@ -40,6 +40,9 @@ interface Material {
location: string | null location: string | null
lat: string lat: string
lng: string lng: string
comment: string | null
icon: string | null
videoUrl?: string
} }
const isImageUrl = (url: string) => { const isImageUrl = (url: string) => {
@@ -65,6 +68,11 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
const [originalMaterial, setOriginalMaterial] = useState<Material | null>(null) const [originalMaterial, setOriginalMaterial] = useState<Material | null>(null)
const [materialType, setMaterialType] = useState<number>(1) // 默认为图片类型 const [materialType, setMaterialType] = useState<number>(1) // 默认为图片类型
const [url, setUrl] = useState<string>("") const [url, setUrl] = useState<string>("")
const [title, setTitle] = useState<string>("")
const [iconUrl, setIconUrl] = useState<string>("")
const [videoUrl, setVideoUrl] = useState<string>("")
const [publishTime, setPublishTime] = useState("")
const [comment, setComment] = useState("")
// 获取素材详情 // 获取素材详情
useEffect(() => { useEffect(() => {
@@ -77,6 +85,10 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
const material = response.data const material = response.data
setOriginalMaterial(material) setOriginalMaterial(material)
setContent(material.content) setContent(material.content)
setTitle(material.title || "")
setIconUrl(material.icon || "")
setVideoUrl(material.videoUrl || "")
setComment(material.comment || "")
// 设置素材类型 // 设置素材类型
setMaterialType(Number(material.type) || 1) setMaterialType(Number(material.type) || 1)
@@ -166,6 +178,10 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
id: resolvedParams.materialId, id: resolvedParams.materialId,
type: materialType, type: materialType,
content: content, content: content,
title: materialType === 2 ? title : undefined,
icon: materialType === 2 ? iconUrl : undefined,
videoUrl: materialType === 3 ? videoUrl : undefined,
comment: comment,
} }
// 根据类型添加不同的字段 // 根据类型添加不同的字段
@@ -215,145 +231,270 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
</header> </header>
<div className="p-4"> <div className="p-4">
<Card className="p-4"> <Card className="p-8 rounded-3xl shadow-xl bg-white max-w-lg mx-auto">
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-8">
{/* 素材类型选择器 */} {/* 基础信息分组 */}
<div> <div className="mb-6">
<Label className="text-base required">类型</Label> <div className="text-xs text-gray-400 mb-2 tracking-widest">基础信息</div>
<div className="flex items-center mt-2 border border-gray-200 rounded-md overflow-hidden"> <div className="mb-4">
{MATERIAL_TYPES.map((type) => ( <Label className="font-bold flex items-center mb-2">
<button 发布时间
key={type.id} </Label>
type="button" <div className="relative">
className={cn( <Input
"flex-1 py-2 px-4 flex items-center justify-center gap-1 text-sm transition-colors", id="publish-time"
materialType === type.id type="datetime-local"
? "bg-blue-500 text-white" step="60"
: "bg-white text-gray-600 hover:bg-gray-50" value={publishTime}
)} onChange={(e) => setPublishTime(e.target.value)}
onClick={() => setMaterialType(type.id)} className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
placeholder="请选择发布时间"
style={{ width: 'auto' }}
/>
</div>
</div>
<div>
<Label className="font-bold flex items-center mb-2">
<span className="text-red-500 mr-1">*</span>类型
</Label>
<div className="relative">
<select
style={{ border: '1px solid #e0e0e0' }}
className="appearance-none w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 pr-10 text-base bg-white placeholder:text-gray-300"
value={materialType}
onChange={e => setMaterialType(Number(e.target.value))}
> >
<type.icon className="h-4 w-4" /> {MATERIAL_TYPES.map(type => (
{type.name} <option key={type.id} value={type.id}>{type.name}</option>
</button> ))}
))} </select>
<ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
</div>
</div> </div>
</div> </div>
<div className="border-b border-gray-100 my-4" />
{/* 根据不同类型显示不同的编辑区域 */} {/* 内容信息分组 */}
{(materialType === 4 || materialType === 6 || (materialType === 1 && !isImageUrl(content))) && ( {(materialType === 4 || materialType === 6 || (materialType === 1 && !isImageUrl(content))) && (
<div> <div className="mb-6">
<Label htmlFor="content">素材内容</Label> <div className="text-xs text-gray-400 mb-2 tracking-widest">内容信息</div>
<Label htmlFor="content" className="font-bold flex items-center mb-2">
<span className="text-red-500 mr-1">*</span>内容
</Label>
<Textarea <Textarea
id="content" id="content"
value={content} value={content}
onChange={(e) => setContent(e.target.value)} onChange={(e) => setContent(e.target.value)}
placeholder="请输入素材内容" placeholder="请输入内容"
className="mt-1" className="w-full rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base min-h-[120px] bg-gray-50 placeholder:text-gray-300"
rows={10} rows={10}
/> />
<div className="mt-4">
<Label htmlFor="comment" className="font-bold mb-2">评论</Label>
<Textarea
id="comment"
value={comment}
onChange={(e) => setComment(e.target.value)}
placeholder="请输入评论内容"
className="w-full rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base min-h-[80px] bg-gray-50 placeholder:text-gray-300"
rows={4}
/>
</div>
</div> </div>
)} )}
{/* 链接或视频类型 */}
{(materialType === 2 || materialType === 3) && ( {(materialType === 2 || materialType === 3) && (
<div> <div className="mb-6">
<Label htmlFor="url">{materialType === 2 ? "链接地址" : "视频链接"}</Label> <div className="text-xs text-gray-400 mb-2 tracking-widest">内容信息</div>
{materialType === 2 && (
<div className="mb-4">
<Label htmlFor="title" className="font-bold flex items-center mb-2">
<span className="text-red-500 mr-1">*</span>标题
</Label>
<Input
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="请输入标题"
className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"/>
{/* 图标上传 */}
<div className="mt-4">
<Label className="font-bold mb-2">图标</Label>
<div className="flex items-center gap-4">
<Button
type="button"
variant="outline"
className="rounded-2xl border-dashed border-2 border-blue-300 bg-white hover:bg-blue-50 h-28 w-28 flex flex-col items-center justify-center p-0"
onClick={() => {
// 模拟上传，实际应对接上传接口
const mock = [
"https://cdn-icons-png.flaticon.com/512/732/732212.png",
"https://cdn-icons-png.flaticon.com/512/5968/5968764.png",
"https://cdn-icons-png.flaticon.com/512/5968/5968705.png"
];
const random = mock[Math.floor(Math.random() * mock.length)];
setIconUrl(random);
}}
>
{iconUrl ? (
<Image src={iconUrl} alt="图标" width={80} height={80} className="object-contain rounded-xl mx-auto my-auto" />
) : (
<>
<UploadCloud className="h-8 w-8 mb-2 text-gray-400 mx-auto" />
<span className="text-sm text-gray-500">上传图标</span>
</>
)}
</Button>
{iconUrl && (
<Button type="button" variant="destructive" size="sm" className="h-8 px-2 rounded-lg" onClick={() => setIconUrl("")}>删除</Button>
)}
</div>
<div className="text-xs text-gray-400 mt-1">建议尺寸 80x80，支持 PNG/JPG</div>
</div>
</div>
)}
<Label htmlFor="url" className="font-bold flex items-center mb-2">
<span className="text-red-500 mr-1">*</span>{materialType === 2 ? "链接地址" : "视频链接"}
</Label>
<Input <Input
id="url" id="url"
value={url} value={url}
onChange={(e) => setUrl(e.target.value)} onChange={(e) => setUrl(e.target.value)}
placeholder={materialType === 2 ? "请输入链接地址" : "请输入视频链接"} placeholder={materialType === 2 ? "请输入链接地址" : "请输入视频链接"}
className="mt-1" className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
/> />
{/* 视频类型上传视频 */}
{materialType === 3 && (
<div className="mt-4">
<Label className="font-bold mb-2">上传视频</Label>
<div className="flex items-center gap-4">
<Button
type="button"
variant="outline"
className="rounded-2xl border-dashed border-2 border-blue-300 bg-white hover:bg-blue-50 h-28 w-44 flex flex-col items-center justify-center p-0"
onClick={() => {
// 模拟上传，实际应对接上传接口
const mock = [
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/movie.mp4"
];
const random = mock[Math.floor(Math.random() * mock.length)];
setVideoUrl(random);
}}
>
{videoUrl ? (
<video src={videoUrl} controls className="object-contain rounded-xl h-24 w-40 mx-auto my-auto" />
) : (
<>
<UploadCloud className="h-8 w-8 mb-2 text-gray-400 mx-auto" />
<span className="text-sm text-gray-500">上传视频</span>
</>
)}
</Button>
{videoUrl && (
<Button type="button" variant="destructive" size="sm" className="h-8 px-2 rounded-lg" onClick={() => setVideoUrl("")}>删除</Button>
)}
</div>
<div className="text-xs text-gray-400 mt-1">支持MP4，建议不超过20MB</div>
</div>
)}
<div className="mt-4">
<Label htmlFor="comment" className="font-bold mb-2">评论</Label>
<Textarea
id="comment"
value={comment}
onChange={(e) => setComment(e.target.value)}
placeholder="请输入评论内容"
className="w-full rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base min-h-[80px] bg-gray-50 placeholder:text-gray-300"
rows={4}
/>
</div>
</div> </div>
)} )}
{/* 素材上传分组（仅图片类型和小程序类型） */}
{/* 图片类型 */} {(materialType === 1 || materialType === 5) && (
{materialType === 1 && ( <div className="mb-6">
<div> <div className="text-xs text-gray-400 mb-2 tracking-widest">素材上传</div>
<Label>图片集</Label> {materialType === 1 && (
<div className="mt-2 border border-dashed border-gray-300 rounded-lg p-4 text-center"> <>
<Button <Label className="font-bold mb-2">素材</Label>
type="button" <div className="border border-dashed border-gray-300 rounded-2xl p-4 text-center bg-gray-50">
variant="outline" <Button
onClick={handleUploadImage} type="button"
className="w-full py-8 flex flex-col items-center justify-center" variant="outline"
> onClick={handleUploadImage}
<UploadCloud className="h-8 w-8 mb-2 text-gray-400" /> className="w-full py-8 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-blue-300 bg-white hover:bg-blue-50"
<span>点击上传图片</span> >
<span className="text-xs text-gray-500 mt-1">支持 JPG、PNG 格式</span> <UploadCloud className="h-8 w-8 mb-2 text-gray-400" />
</Button> <span>点击上传图片</span>
</div> <span className="text-xs text-gray-500 mt-1">支持 JPG、PNG 格式</span>
</Button>
{previewUrls.length > 0 && ( </div>
<div className="mt-4"> {previewUrls.length > 0 && (
<Label>已上传图片</Label> <div className="mt-2">
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 mt-2"> <Label className="font-bold mb-2">已上传图片</Label>
{previewUrls.map((url, index) => ( <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mt-2">
<div key={index} className="relative group"> {previewUrls.map((url, index) => (
<div className="aspect-square relative rounded-lg overflow-hidden border border-gray-200"> <div key={index} className="relative group">
<Image <div className="aspect-square relative rounded-2xl overflow-hidden border border-gray-200">
src={url} <Image
alt={`图片 ${index + 1}`} src={url}
fill alt={`图片 ${index + 1}`}
className="object-cover" fill
/> className="object-cover"
</div> />
<Button </div>
type="button" <Button
variant="destructive" type="button"
size="sm" variant="destructive"
className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 p-0" size="sm"
onClick={() => handleRemoveImage(index)} className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 p-0 rounded-full"
> onClick={() => handleRemoveImage(index)}
<X className="h-3 w-3" /> >
</Button> <X className="h-3 w-3" />
</Button>
</div>
))}
</div> </div>
))} </div>
)}
</>
)}
{materialType === 5 && (
<div className="space-y-6">
<div>
<Label htmlFor="appTitle" className="font-bold mb-2">小程序名称</Label>
<Input
id="appTitle"
placeholder="请输入小程序名称"
className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
/>
</div>
<div>
<Label htmlFor="appId" className="font-bold mb-2">AppID</Label>
<Input
id="appId"
placeholder="请输入AppID"
className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
/>
</div>
<div>
<Label className="font-bold mb-2">小程序封面图</Label>
<div className="border border-dashed border-gray-300 rounded-2xl p-4 text-center bg-gray-50">
<Button
type="button"
variant="outline"
onClick={handleUploadImage}
className="w-full py-4 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-blue-300 bg-white hover:bg-blue-50"
>
<UploadCloud className="h-6 w-6 mb-2 text-gray-400" />
<span>上传小程序封面图</span>
</Button>
</div>
</div> </div>
</div> </div>
)} )}
</div> </div>
)} )}
<Button type="submit" className="w-full h-12 rounded-2xl bg-blue-600 hover:bg-blue-700 text-base font-bold mt-12 shadow">
{/* 小程序类型 */}
{materialType === 5 && (
<div className="space-y-4">
<div>
<Label htmlFor="appTitle">小程序名称</Label>
<Input
id="appTitle"
placeholder="请输入小程序名称"
className="mt-1"
/>
</div>
<div>
<Label htmlFor="appId">AppID</Label>
<Input
id="appId"
placeholder="请输入AppID"
className="mt-1"
/>
</div>
<div>
<Label>小程序封面图</Label>
<div className="mt-2 border border-dashed border-gray-300 rounded-lg p-4 text-center">
<Button
type="button"
variant="outline"
onClick={handleUploadImage}
className="w-full py-4 flex flex-col items-center justify-center"
>
<UploadCloud className="h-6 w-6 mb-2 text-gray-400" />
<span>上传小程序封面图</span>
</Button>
</div>
</div>
</div>
)}
<Button type="submit" className="w-full">
保存修改 保存修改
</Button> </Button>
</form> </form>

411
Cunkebao/app/content/[id]/materials/new/page.tsx
View File

@@ -4,7 +4,7 @@ import type React from "react"
import { useState } from "react" import { useState } from "react"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { ChevronLeft, Plus, X, Image as ImageIcon, UploadCloud, Link, Video, FileText, Layers } from "lucide-react" import { ChevronLeft, Plus, X, Image as ImageIcon, UploadCloud, Link, Video, FileText, Layers, CalendarDays, ChevronDown } from "lucide-react"
import { Card } from "@/components/ui/card" import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea" import { Textarea } from "@/components/ui/textarea"
@@ -36,71 +36,76 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
const [content, setContent] = useState("") const [content, setContent] = useState("")
const [images, setImages] = useState<string[]>([]) const [images, setImages] = useState<string[]>([])
const [previewUrls, setPreviewUrls] = useState<string[]>([]) const [previewUrls, setPreviewUrls] = useState<string[]>([])
const [materialType, setMaterialType] = useState<number>(1) // 默认为图片类型 const [materialType, setMaterialType] = useState<number>(1)
const [url, setUrl] = useState<string>("") const [url, setUrl] = useState<string>("")
const [title, setTitle] = useState<string>("")
const [coverImage, setCoverImage] = useState<string>("")
const [videoUrl, setVideoUrl] = useState<string>("")
const [publishTime, setPublishTime] = useState("")
const [comment, setComment] = useState("")
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
// 模拟上传图片 // 图片上传
const handleUploadImage = () => { const handleUploadImage = () => {
// 这里应该是真实的图片上传逻辑
// 为了演示，这里模拟添加一些示例图片URL
const mockImageUrls = [ const mockImageUrls = [
"https://picsum.photos/id/237/200/300", "https://picsum.photos/id/237/200/300",
"https://picsum.photos/id/238/200/300", "https://picsum.photos/id/238/200/300",
"https://picsum.photos/id/239/200/300" "https://picsum.photos/id/239/200/300"
] ]
const randomIndex = Math.floor(Math.random() * mockImageUrls.length) const randomIndex = Math.floor(Math.random() * mockImageUrls.length)
const newImage = mockImageUrls[randomIndex] const newImage = mockImageUrls[randomIndex]
if (!images.includes(newImage)) { if (!images.includes(newImage)) {
setImages([...images, newImage]) setImages([...images, newImage])
setPreviewUrls([...previewUrls, newImage]) setPreviewUrls([...previewUrls, newImage])
} }
} }
const handleRemoveImage = (indexToRemove: number) => { const handleRemoveImage = (indexToRemove: number) => {
setImages(images.filter((_, index) => index !== indexToRemove)) setImages(images.filter((_, index) => index !== indexToRemove))
setPreviewUrls(previewUrls.filter((_, index) => index !== indexToRemove)) setPreviewUrls(previewUrls.filter((_, index) => index !== indexToRemove))
} }
// 创建素材
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
// 校验
// 根据不同类型校验不同字段 if (!content) {
showToast("请输入内容", "error")
return
}
if (!comment) {
showToast("请输入评论内容", "error")
return
}
if (materialType === 1 && images.length === 0) { if (materialType === 1 && images.length === 0) {
showToast("请上传图片", "error") showToast("请上传图片", "error")
return return
} else if (materialType === 2 && !url) { } else if (materialType === 2 && (!url || !title)) {
showToast("请输入链接地址", "error") showToast("请输入标题和链接地址", "error")
return return
} else if ((materialType === 4 || materialType === 6) && !content) { } else if (materialType === 3 && (!url && !videoUrl)) {
showToast("请输入文本内容", "error") showToast("请填写视频链接或上传视频", "error")
return return
} }
setLoading(true) setLoading(true)
const loadingToast = showToast("正在创建素材...", "loading", true) const loadingToast = showToast("正在创建素材...", "loading", true)
try { try {
// 构建API请求参数
const payload: any = { const payload: any = {
libraryId: params.id, libraryId: params.id,
type: materialType, type: materialType,
content: content, content: content,
comment: comment,
sendTime: publishTime,
} }
// 根据类型添加不同的字段
if (materialType === 1) { if (materialType === 1) {
payload.resUrls = images payload.resUrls = images
} else if (materialType === 2) { } else if (materialType === 2) {
payload.title = title
payload.urls = [url] payload.urls = [url]
payload.coverImage = coverImage
} else if (materialType === 3) { } else if (materialType === 3) {
payload.urls = [url] payload.urls = videoUrl ? [videoUrl] : []
} }
const response = await api.post<ApiResponse>('/v1/content/library/create-item', payload) const response = await api.post<ApiResponse>('/v1/content/library/create-item', payload)
if (response.code === 200) { if (response.code === 200) {
showToast("创建成功", "success") showToast("创建成功", "success")
router.push(`/content/${params.id}/materials`) router.push(`/content/${params.id}/materials`)
@@ -108,7 +113,6 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
showToast(response.msg || "创建失败", "error") showToast(response.msg || "创建失败", "error")
} }
} catch (error: any) { } catch (error: any) {
console.error("Failed to create new material:", error)
showToast(error?.message || "创建素材失败", "error") showToast(error?.message || "创建素材失败", "error")
} finally { } finally {
loadingToast.remove && loadingToast.remove() loadingToast.remove && loadingToast.remove()
@@ -128,147 +132,258 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
</div> </div>
</div> </div>
</header> </header>
<div className="p-4"> <div className="p-4">
<Card className="p-4"> <Card className="p-8 rounded-3xl shadow-xl bg-white max-w-lg mx-auto">
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-8">
{/* 素材类型选择器 */} {/* 基础信息分组 */}
<div> <div className="mb-6">
<Label className="text-base required">类型</Label> <div className="text-xs text-gray-400 mb-2 tracking-widest">基础信息</div>
<div className="flex items-center mt-2 border border-gray-200 rounded-md overflow-hidden"> <div className="mb-4">
{MATERIAL_TYPES.map((type) => ( <Label className="font-bold flex items-center mb-2">发布时间</Label>
<button <div className="relative">
key={type.id} <Input
type="button" id="publish-time"
className={cn( type="datetime-local"
"flex-1 py-2 px-4 flex items-center justify-center gap-1 text-sm transition-colors", step="60"
materialType === type.id value={publishTime}
? "bg-blue-500 text-white" onChange={(e) => setPublishTime(e.target.value)}
: "bg-white text-gray-600 hover:bg-gray-50" className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
)} placeholder="请选择发布时间"
onClick={() => setMaterialType(type.id)} style={{ width: 'auto' }}
/>
<CalendarDays className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
</div>
</div>
<div>
<Label className="font-bold flex items-center mb-2">
<span className="text-red-500 mr-1">*</span>类型
</Label>
<div className="relative">
<select
style={{ border: '1px solid #e0e0e0' }}
className="appearance-none w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 pr-10 text-base bg-white placeholder:text-gray-300"
value={materialType}
onChange={e => setMaterialType(Number(e.target.value))}
> >
<type.icon className="h-4 w-4" /> {MATERIAL_TYPES.map(type => (
{type.name} <option key={type.id} value={type.id}>{type.name}</option>
</button> ))}
))} </select>
<ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
</div>
</div> </div>
</div> </div>
<div className="border-b border-gray-100 my-4" />
{/* 根据不同类型显示不同的编辑区域 */} {/* 内容信息分组（所有类型都展示内容和评论） */}
{(materialType === 4 || materialType === 6) && ( <div className="mb-6">
<div> <div className="text-xs text-gray-400 mb-2 tracking-widest">内容信息</div>
<Label htmlFor="content">素材内容</Label> <Label htmlFor="content" className="font-bold flex items-center mb-2">
<span className="text-red-500 mr-1">*</span>内容
</Label>
<Textarea
id="content"
value={content}
onChange={(e) => setContent(e.target.value)}
placeholder="请输入内容"
className="w-full rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base min-h-[120px] bg-gray-50 placeholder:text-gray-300"
rows={10}
/>
<div className="mt-4">
<Label htmlFor="comment" className="font-bold mb-2">评论</Label>
<Textarea <Textarea
id="content" id="comment"
value={content} value={comment}
onChange={(e) => setContent(e.target.value)} onChange={(e) => setComment(e.target.value)}
placeholder="请输入素材内容" placeholder="请输入评论内容"
className="mt-1" className="w-full rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base min-h-[80px] bg-gray-50 placeholder:text-gray-300"
rows={10} rows={4}
/> />
</div> </div>
)} </div>
{/* 链接或视频类型 */}
{(materialType === 2 || materialType === 3) && ( {(materialType === 2 || materialType === 3) && (
<div> <div className="mb-6">
<Label htmlFor="url">{materialType === 2 ? "链接地址" : "视频链接"}</Label> <div className="text-xs text-gray-400 mb-2 tracking-widest">内容信息</div>
<Input {materialType === 2 && (
id="url" <div className="mb-4">
value={url} <Label htmlFor="title" className="font-bold flex items-center mb-2">
onChange={(e) => setUrl(e.target.value)} <span className="text-red-500 mr-1">*</span>标题
placeholder={materialType === 2 ? "请输入链接地址" : "请输入视频链接"} </Label>
className="mt-1" <Input
/> id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="请输入标题"
className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"/>
{/* 封面图上传 */}
<div className="mt-4">
<Label className="font-bold mb-2">封面图</Label>
<div className="flex items-center gap-4">
<Button
type="button"
variant="outline"
className="rounded-2xl border-dashed border-2 border-blue-300 bg-white hover:bg-blue-50 h-28 w-28 flex flex-col items-center justify-center p-0"
onClick={() => {
const mock = [
"https://cdn-icons-png.flaticon.com/512/732/732212.png",
"https://cdn-icons-png.flaticon.com/512/5968/5968764.png",
"https://cdn-icons-png.flaticon.com/512/5968/5968705.png"
];
const random = mock[Math.floor(Math.random() * mock.length)];
setCoverImage(random);
}}
>
{coverImage ? (
<Image src={coverImage} alt="封面图" width={80} height={80} className="object-contain rounded-xl mx-auto my-auto" />
) : (
<>
<UploadCloud className="h-8 w-8 mb-2 text-gray-400 mx-auto" />
<span className="text-sm text-gray-500">上传封面图</span>
</>
)}
</Button>
{coverImage && (
<Button type="button" variant="destructive" size="sm" className="h-8 px-2 rounded-lg" onClick={() => setCoverImage("")}>删除</Button>
)}
</div>
<div className="text-xs text-gray-400 mt-1">建议尺寸 80x80，支持 PNG/JPG</div>
</div>
</div>
)}
{materialType === 2 && (
<>
<Label htmlFor="url" className="font-bold flex items-center mb-2">
<span className="text-red-500 mr-1">*</span>链接地址
</Label>
<Input
id="url"
value={url}
onChange={(e) => setUrl(e.target.value)}
placeholder="请输入链接地址"
className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
/>
</>
)}
{materialType === 3 && (
<div className="mt-4">
<Label className="font-bold mb-2">上传视频</Label>
<div className="flex items-center gap-4">
<Button
type="button"
variant="outline"
className="rounded-2xl border-dashed border-2 border-blue-300 bg-white hover:bg-blue-50 h-28 w-44 flex flex-col items-center justify-center p-0"
onClick={() => {
const mock = [
"https://www.w3schools.com/html/mov_bbb.mp4",
"https://www.w3schools.com/html/movie.mp4"
];
const random = mock[Math.floor(Math.random() * mock.length)];
setVideoUrl(random);
}}
>
{videoUrl ? (
<video src={videoUrl} controls className="object-contain rounded-xl h-24 w-40 mx-auto my-auto" />
) : (
<>
<UploadCloud className="h-8 w-8 mb-2 text-gray-400 mx-auto" />
<span className="text-sm text-gray-500">上传视频</span>
</>
)}
</Button>
{videoUrl && (
<Button type="button" variant="destructive" size="sm" className="h-8 px-2 rounded-lg" onClick={() => setVideoUrl("")}>删除</Button>
)}
</div>
<div className="text-xs text-gray-400 mt-1">支持MP4，建议不超过20MB</div>
</div>
)}
</div> </div>
)} )}
{/* 素材上传分组（仅图片类型和小程序类型） */}
{/* 图片类型 */} {(materialType === 1 || materialType === 5) && (
{materialType === 1 && ( <div className="mb-6">
<div> <div className="text-xs text-gray-400 mb-2 tracking-widest">素材上传</div>
<Label>图片集</Label> {materialType === 1 && (
<div className="mt-2 border border-dashed border-gray-300 rounded-lg p-4 text-center"> <>
<Button <Label className="font-bold mb-2">素材</Label>
type="button" <div className="border border-dashed border-gray-300 rounded-2xl p-4 text-center bg-gray-50">
variant="outline" <Button
onClick={handleUploadImage} type="button"
className="w-full py-8 flex flex-col items-center justify-center" variant="outline"
> onClick={handleUploadImage}
<UploadCloud className="h-8 w-8 mb-2 text-gray-400" /> className="w-full py-8 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-blue-300 bg-white hover:bg-blue-50"
<span>点击上传图片</span> >
<span className="text-xs text-gray-500 mt-1">支持 JPG、PNG 格式</span> <UploadCloud className="h-8 w-8 mb-2 text-gray-400" />
</Button> <span>点击上传图片</span>
</div> <span className="text-xs text-gray-500 mt-1">支持 JPG、PNG 格式</span>
</Button>
{previewUrls.length > 0 && ( </div>
<div className="mt-4"> {previewUrls.length > 0 && (
<Label>已上传图片</Label> <div className="mt-2">
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 mt-2"> <Label className="font-bold mb-2">已上传图片</Label>
{previewUrls.map((url, index) => ( <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mt-2">
<div key={index} className="relative group"> {previewUrls.map((url, index) => (
<div className="aspect-square relative rounded-lg overflow-hidden border border-gray-200"> <div key={index} className="relative group">
<Image <div className="aspect-square relative rounded-2xl overflow-hidden border border-gray-200">
src={url} <Image
alt={`图片 ${index + 1}`} src={url}
fill alt={`图片 ${index + 1}`}
className="object-cover" fill
/> className="object-cover"
</div> />
<Button </div>
type="button" <Button
variant="destructive" type="button"
size="sm" variant="destructive"
className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 p-0" size="sm"
onClick={() => handleRemoveImage(index)} className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 p-0 rounded-full"
> onClick={() => handleRemoveImage(index)}
<X className="h-3 w-3" /> >
</Button> <X className="h-3 w-3" />
</Button>
</div>
))}
</div> </div>
))} </div>
)}
</>
)}
{materialType === 5 && (
<div className="space-y-6">
<div>
<Label htmlFor="appTitle" className="font-bold mb-2">小程序名称</Label>
<Input
id="appTitle"
placeholder="请输入小程序名称"
className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
/>
</div>
<div>
<Label htmlFor="appId" className="font-bold mb-2">AppID</Label>
<Input
id="appId"
placeholder="请输入AppID"
className="w-full h-12 rounded-2xl border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 px-4 text-base placeholder:text-gray-300"
/>
</div>
<div>
<Label className="font-bold mb-2">小程序封面图</Label>
<div className="border border-dashed border-gray-300 rounded-2xl p-4 text-center bg-gray-50">
<Button
type="button"
variant="outline"
onClick={handleUploadImage}
className="w-full py-4 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-blue-300 bg-white hover:bg-blue-50"
>
<UploadCloud className="h-6 w-6 mb-2 text-gray-400" />
<span>上传小程序封面图</span>
</Button>
</div>
</div> </div>
</div> </div>
)} )}
</div> </div>
)} )}
<Button type="submit" className="w-full h-12 rounded-2xl bg-blue-600 hover:bg-blue-700 text-base font-bold mt-12 shadow" disabled={loading}>
{/* 小程序类型 */}
{materialType === 5 && (
<div className="space-y-4">
<div>
<Label htmlFor="appTitle">小程序名称</Label>
<Input
id="appTitle"
placeholder="请输入小程序名称"
className="mt-1"
/>
</div>
<div>
<Label htmlFor="appId">AppID</Label>
<Input
id="appId"
placeholder="请输入AppID"
className="mt-1"
/>
</div>
<div>
<Label>小程序封面图</Label>
<div className="mt-2 border border-dashed border-gray-300 rounded-lg p-4 text-center">
<Button
type="button"
variant="outline"
onClick={handleUploadImage}
className="w-full py-4 flex flex-col items-center justify-center"
>
<UploadCloud className="h-6 w-6 mb-2 text-gray-400" />
<span>上传小程序封面图</span>
</Button>
</div>
</div>
</div>
)}
<Button type="submit" className="w-full" disabled={loading}>
{loading ? "创建中..." : "保存素材"} {loading ? "创建中..." : "保存素材"}
</Button> </Button>
</form> </form>

6
Server/application/api/controller/WebSocketController.php
View File

@@ -347,9 +347,9 @@ class WebSocketController extends BaseController
"cmdType" => "CmdMomentInteract", "cmdType" => "CmdMomentInteract",
"momentInteractType" => 1, "momentInteractType" => 1,
"seq" => time(), "seq" => time(),
"snsId" => $snsId, "snsId" => $snsId,
"wechatAccountId" => $wechatAccountId, "wechatAccountId" => $wechatAccountId,
"wechatFriendId" => $wechatFriendId, "wechatFriendId" => $wechatFriendId,
]; ];
$message = $this->sendMessage($result); $message = $this->sendMessage($result);

3
Server/application/cunkebao/config/route.php
View File

@@ -74,9 +74,10 @@ Route::group('v1/', function () {
Route::get('detail', 'app\cunkebao\controller\ContentLibraryController@detail'); // 获取内容库详情 Route::get('detail', 'app\cunkebao\controller\ContentLibraryController@detail'); // 获取内容库详情
Route::get('collectMoments', 'app\cunkebao\controller\ContentLibraryController@collectMoments'); // 采集朋友圈 Route::get('collectMoments', 'app\cunkebao\controller\ContentLibraryController@collectMoments'); // 采集朋友圈
Route::get('item-list', 'app\cunkebao\controller\ContentLibraryController@getItemList'); // 获取内容库素材列表 Route::get('item-list', 'app\cunkebao\controller\ContentLibraryController@getItemList'); // 获取内容库素材列表
Route::post('add-item', 'app\cunkebao\controller\ContentLibraryController@addItem'); // 添加内容库素材 Route::post('create-item', 'app\cunkebao\controller\ContentLibraryController@addItem'); // 添加内容库素材
Route::delete('delete-item', 'app\cunkebao\controller\ContentLibraryController@deleteItem'); // 删除内容库素材 Route::delete('delete-item', 'app\cunkebao\controller\ContentLibraryController@deleteItem'); // 删除内容库素材
Route::get('get-item-detail', 'app\cunkebao\controller\ContentLibraryController@getItemDetail'); // 获取内容库素材详情 Route::get('get-item-detail', 'app\cunkebao\controller\ContentLibraryController@getItemDetail'); // 获取内容库素材详情
Route::post('update-item', 'app\cunkebao\controller\ContentLibraryController@updateItem'); // 更新内容库素材
}); });
// 好友相关 // 好友相关

24
Server/application/cunkebao/controller/ContentLibraryController.php
View File

@@ -160,7 +160,7 @@ class ContentLibraryController extends Controller
$item['selectedFriends'] = $friendsInfo; $item['selectedFriends'] = $friendsInfo;
} }
// 获取群组详细信息
if (!empty($item['sourceGroups']) && $item['sourceType'] == 2) { if (!empty($item['sourceGroups']) && $item['sourceType'] == 2) {
$groupIds = $item['sourceGroups']; $groupIds = $item['sourceGroups'];
$groupsInfo = []; $groupsInfo = [];
@@ -448,7 +448,7 @@ class ContentLibraryController extends Controller
->find(); ->find();
$item['senderNickname'] = $friendInfo['nickname'] ?: ''; $item['senderNickname'] = $friendInfo['nickname'] ?: '';
$item['senderAvatar'] = $friendInfo['avatar'] ?: ''; $item['senderAvatar'] = $friendInfo['avatar'] ?: '';
}else{ }else if ($item['type'] == 'group_message' && $item['wechatChatroomId']) {
$friendInfo = Db::table('s2_wechat_chatroom_member') $friendInfo = Db::table('s2_wechat_chatroom_member')
->field('nickname, avatar') ->field('nickname, avatar')
->where('wechatId', $item['wechatId']) ->where('wechatId', $item['wechatId'])
@@ -496,7 +496,7 @@ class ContentLibraryController extends Controller
return json(['code' => 400, 'msg' => '内容类型不能为空']); return json(['code' => 400, 'msg' => '内容类型不能为空']);
} }
if (empty($param['contentData'])) { if (empty($param['content'])) {
return json(['code' => 400, 'msg' => '内容数据不能为空']); return json(['code' => 400, 'msg' => '内容数据不能为空']);
} }
@@ -526,9 +526,21 @@ class ContentLibraryController extends Controller
// 创建内容项目 // 创建内容项目
$item = new ContentItem; $item = new ContentItem;
$item->libraryId = $param['libraryId']; $item->libraryId = $param['libraryId'];
$item->type = $param['type']; $item->contentType = $param['type'];
$item->title = $param['title'] ?? ''; $item->type = 'diy';
$item->contentData = $param['contentData']; $item->title = '自定义内容';
$item->content = $param['content'];
$item->comment = $param['comment'] ?? '';
$item->sendTime = strtotime($param['sendTime']);
$item->resUrls = json_encode($param['resUrls'] ?? [],256);
$item->urls = json_encode($param['urls'] ?? [],256);
$item->senderNickname = '系统创建';
$item->coverImage = $param['coverImage'] ?? '';
print_r($item);
exit;
$item->save(); $item->save();
return json(['code' => 200, 'msg' => '添加成功', 'data' => ['id' => $item->id]]); return json(['code' => 200, 'msg' => '添加成功', 'data' => ['id' => $item->id]]);