【操盘手】内容库界面优化

2025-05-23 14:56:47 +08:00
parent 76b5e6f144
commit a3da60eace
4 changed files with 350 additions and 181 deletions
--- a/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx
+++ b/Cunkebao/app/content/[id]/materials/edit/[materialId]/page.tsx
@@ -29,7 +29,7 @@ interface Material {
  content: string
  coverImage: string | null
  resUrls: string[]
-  urls: string[]
+  urls: ({ desc?: string; image?: string; url?: string } | string)[]
  createTime: string
  createMomentTime: number
  time: string
@@ -43,6 +43,8 @@ interface Material {
  comment: string | null
  icon: string | null
  videoUrl?: string
+  sendTime: string
+  contentType: string
 }

 const isImageUrl = (url: string) => {
@@ -66,12 +68,14 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
  const [images, setImages] = useState<string[]>([])
  const [previewUrls, setPreviewUrls] = useState<string[]>([])
  const [originalMaterial, setOriginalMaterial] = useState<Material | null>(null)
-  const [materialType, setMaterialType] = useState<number>(1) // 默认为图片类型
+  const [sendTime, setSendTime] = useState("")
+  const [contentType, setContentType] = useState<number>(1)
  const [url, setUrl] = useState<string>("")
+  const [desc, setDesc] = useState("")
+  const [image, setImage] = useState("")
  const [title, setTitle] = useState<string>("")
  const [iconUrl, setIconUrl] = useState<string>("")
  const [videoUrl, setVideoUrl] = useState<string>("")
-  const [publishTime, setPublishTime] = useState("")
  const [comment, setComment] = useState("")

  // 获取素材详情
@@ -85,19 +89,35 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
          const material = response.data
          setOriginalMaterial(material)
          setContent(material.content)
-          setTitle(material.title || "")
-          setIconUrl(material.icon || "")
-          setVideoUrl(material.videoUrl || "")
          setComment(material.comment || "")
-          
-          // 设置素材类型
-          setMaterialType(Number(material.type) || 1)
-          
-          // 如果是链接类型，设置URL
-          if (material.type === "2" && material.urls && material.urls.length > 0) {
-            setUrl(material.urls[0])
+          setSendTime(material.sendTime || "")
+          setContentType(Number(material.contentType) || 1)
+          // 链接类型
+          if (Number(material.contentType) === 2 && material.urls && material.urls.length > 0) {
+            const first = material.urls[0];
+            if (typeof first === "object" && first !== null) {
+              setDesc(first.desc || "");
+              setImage(first.image || "");
+              setUrl(first.url || "");
+            } else {
+              setDesc("");
+              setImage("");
+              setUrl(typeof first === "string" ? first : "");
+            }
          }
          
+          // 视频类型
+          if (Number(material.contentType) === 3 && material.urls && material.urls.length > 0) {
+            const first = material.urls[0];
+            if (typeof first === "string") {
+              setVideoUrl(first);
+            } else if (typeof first === "object" && first !== null && first.url) {
+              setVideoUrl(first.url);
+            } else {
+              setVideoUrl("");
+            }
+          }
+
          // 处理图片
          const imageUrls: string[] = []
          
@@ -161,13 +181,13 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
    e.preventDefault()
    
    // 根据不同类型校验不同字段
-    if (materialType === 1 && images.length === 0) {
+    if (contentType === 1 && images.length === 0) {
      showToast("请上传图片", "error")
      return
-    } else if (materialType === 2 && !url) {
-      showToast("请输入链接地址", "error")
+    } else if (contentType === 2 && (!url || !desc)) {
+      showToast("请输入描述和链接地址", "error")
      return
-    } else if ((materialType === 4 || materialType === 6) && !content) {
+    } else if ((contentType === 4 || contentType === 6) && !content) {
      showToast("请输入文本内容", "error")
      return
    }
@@ -176,21 +196,19 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
    try {
      const payload: any = {
        id: resolvedParams.materialId,
-        type: materialType,
+        contentType: contentType,
        content: content,
-        title: materialType === 2 ? title : undefined,
-        icon: materialType === 2 ? iconUrl : undefined,
-        videoUrl: materialType === 3 ? videoUrl : undefined,
        comment: comment,
+        sendTime: sendTime,
      }
      
      // 根据类型添加不同的字段
-      if (materialType === 1) {
+      if (contentType === 1) {
        payload.resUrls = images
-      } else if (materialType === 2) {
-        payload.urls = [url]
-      } else if (materialType === 3) {
-        payload.urls = [url]
+      } else if (contentType === 2) {
+        payload.urls = [{ desc, image, url }]
+      } else if (contentType === 3) {
+        payload.urls = videoUrl ? [videoUrl] : []
      }
      
      const response = await api.post<ApiResponse>('/v1/content/library/update-item', payload)
@@ -245,8 +263,8 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
                    id="publish-time"
                    type="datetime-local"
                    step="60"
-                    value={publishTime}
-                    onChange={(e) => setPublishTime(e.target.value)}
+                    value={sendTime}
+                    onChange={(e) => setSendTime(e.target.value)}
                    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' }}
@@ -261,8 +279,8 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
                  <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))}
+                    value={contentType}
+                    onChange={e => setContentType(Number(e.target.value))}
                  >
                    {MATERIAL_TYPES.map(type => (
                      <option key={type.id} value={type.id}>{type.name}</option>
@@ -274,7 +292,125 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
            </div>
            <div className="border-b border-gray-100 my-4" />
            {/* 内容信息分组 */}
-            {(materialType === 4 || materialType === 6 || (materialType === 1 && !isImageUrl(content))) && (
+          
+              <div className="mb-6">
+                <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
+                  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
+                    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>
+          
+            {contentType === 2 && (
+              <div className="mb-6">
+                <div className="text-xs text-gray-400 mb-2 tracking-widest">内容信息</div>
+                <Label htmlFor="title" className="font-bold flex items-center mb-2">
+                  <span className="text-red-500 mr-1">*</span>描述
+                </Label>
+                <Input
+                  id="title"
+                  value={desc}
+                  onChange={(e) => setDesc(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">
+                    {!image ? (
+                      <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)];
+                          setImage(random);
+                        }}
+                      >
+                        <UploadCloud className="h-8 w-8 mb-2 text-gray-400 mx-auto" />
+                        <span className="text-sm text-gray-500">上传封面图</span>
+                      </Button>
+                    ) : (
+                      <div className="relative">
+                        <Image src={image} alt="封面图" width={80} height={80} className="object-contain rounded-xl mx-auto my-auto" />
+                        <Button type="button" variant="destructive" size="sm" className="absolute top-1 right-1 h-8 px-2 rounded-lg" onClick={() => setImage("")}>删除</Button>
+                      </div>
+                    )}
+                  </div>
+                  <div className="text-xs text-gray-400 mt-1">建议尺寸 80x80，支持 PNG/JPG</div>
+                </div>
+                <div className="mb-4">
+                  <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"
+                  />
+                </div>
+              </div>
+            )}
+            {contentType === 3 && (
+              <div className="mb-6">
+                <div className="text-xs text-gray-400 mb-2 tracking-widest">内容信息</div>
+                <Label className="font-bold mb-2">上传视频</Label>
+                <div className="flex items-center gap-4">
+                  {!videoUrl ? (
+                    <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);
+                      }}
+                    >
+                      <UploadCloud className="h-8 w-8 mb-2 text-gray-400 mx-auto" />
+                      <span className="text-sm text-gray-500">上传视频</span>
+                    </Button>
+                  ) : (
+                    <div className="relative">
+                      <video src={videoUrl} controls className="object-contain rounded-xl h-24 w-40 mx-auto my-auto" />
+                      <Button type="button" variant="destructive" size="sm" className="absolute top-1 right-1 h-8 px-2 rounded-lg" onClick={() => setVideoUrl("")}>删除</Button>
+                    </div>
+                  )}
+                </div>
+                <div className="text-xs text-gray-400 mt-1">支持MP4，建议不超过20MB</div>
+              </div>
+            )}
+            {(contentType === 4 || contentType === 6) && (
              <div className="mb-6">
                <div className="text-xs text-gray-400 mb-2 tracking-widest">内容信息</div>
                <Label htmlFor="content" className="font-bold flex items-center mb-2">
@@ -301,119 +437,11 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
                </div>
              </div>
            )}
-            {(materialType === 2 || materialType === 3) && (
-              <div className="mb-6">
-                <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
-                  id="url"
-                  value={url}
-                  onChange={(e) => setUrl(e.target.value)}
-                  placeholder={materialType === 2 ? "请输入链接地址" : "请输入视频链接"}
-                  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>
-            )}
            {/* 素材上传分组（仅图片类型和小程序类型） */}
-            {(materialType === 1 || materialType === 5) && (
+            {(contentType === 1 || contentType === 5) && (
              <div className="mb-6">
                <div className="text-xs text-gray-400 mb-2 tracking-widest">素材上传</div>
-                {materialType === 1 && (
+                {contentType === 1 && (
                  <>
                    <Label className="font-bold mb-2">素材</Label>
                    <div className="border border-dashed border-gray-300 rounded-2xl p-4 text-center bg-gray-50">
@@ -458,7 +486,7 @@ export default function EditMaterialPage({ params }: { params: Promise<{ id: str
                    )}
                  </>
                )}
-                {materialType === 5 && (
+                {contentType === 5 && (
                  <div className="space-y-6">
                    <div>
                      <Label htmlFor="appTitle" className="font-bold mb-2">小程序名称</Label>
--- a/Cunkebao/app/content/[id]/materials/new/page.tsx
+++ b/Cunkebao/app/content/[id]/materials/new/page.tsx
@@ -38,8 +38,8 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
  const [previewUrls, setPreviewUrls] = useState<string[]>([])
  const [materialType, setMaterialType] = useState<number>(1)
  const [url, setUrl] = useState<string>("")
-  const [title, setTitle] = useState<string>("")
-  const [coverImage, setCoverImage] = useState<string>("")
+  const [desc, setDesc] = useState<string>("")
+  const [image, setImage] = useState<string>("")
  const [videoUrl, setVideoUrl] = useState<string>("")
  const [publishTime, setPublishTime] = useState("")
  const [comment, setComment] = useState("")
@@ -79,8 +79,8 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
    if (materialType === 1 && images.length === 0) {
      showToast("请上传图片", "error")
      return
-    } else if (materialType === 2 && (!url || !title)) {
-      showToast("请输入标题和链接地址", "error")
+    } else if (materialType === 2 && (!url || !desc)) {
+      showToast("请输入描述和链接地址", "error")
      return
    } else if (materialType === 3 && (!url && !videoUrl)) {
      showToast("请填写视频链接或上传视频", "error")
@@ -99,9 +99,7 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
      if (materialType === 1) {
        payload.resUrls = images
      } else if (materialType === 2) {
-        payload.title = title
-        payload.urls = [url]
-        payload.coverImage = coverImage
+        payload.urls = [{ desc, image, url }]
      } else if (materialType === 3) {
        payload.urls = videoUrl ? [videoUrl] : []
      }
@@ -205,14 +203,14 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
                <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 htmlFor="desc" 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="请输入标题"
+                      id="desc"
+                      value={desc}
+                      onChange={(e) => setDesc(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">
@@ -229,11 +227,11 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
                              "https://cdn-icons-png.flaticon.com/512/5968/5968705.png"
                            ];
                            const random = mock[Math.floor(Math.random() * mock.length)];
-                            setCoverImage(random);
+                            setImage(random);
                          }}
                        >
-                          {coverImage ? (
-                            <Image src={coverImage} alt="封面图" width={80} height={80} className="object-contain rounded-xl mx-auto my-auto" />
+                          {image ? (
+                            <Image src={image} 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" />
@@ -241,8 +239,8 @@ export default function NewMaterialPage({ params }: { params: { id: string } })
                            </>
                          )}
                        </Button>
-                        {coverImage && (
-                          <Button type="button" variant="destructive" size="sm" className="h-8 px-2 rounded-lg" onClick={() => setCoverImage("")}>删除</Button>
+                        {image && (
+                          <Button type="button" variant="destructive" size="sm" className="h-8 px-2 rounded-lg" onClick={() => setImage("")}>删除</Button>
                        )}
                      </div>
                      <div className="text-xs text-gray-400 mt-1">建议尺寸 80x80，支持 PNG/JPG</div>
--- a/Cunkebao/app/content/[id]/materials/page.tsx
+++ b/Cunkebao/app/content/[id]/materials/page.tsx
@@ -142,21 +142,78 @@ export default function MaterialsPage({ params }: { params: Promise<{ id: string
    }
  }

-  // 处理内容显示
-  const renderContent = (material: Material) => {
-    // 如果内容是图片，由renderImageResources处理
-    if (isImageUrl(material.content)) {
-      return null
+  // 新增：根据类型渲染内容
+  const renderMaterialByType = (material: any) => {
+    const type = Number(material.contentType || material.type);
+    // 链接类型
+    if (type === 2 && material.urls && material.urls.length > 0) {
+      const first = material.urls[0];
+      return (
+        <a
+          href={first.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center bg-white rounded p-2 hover:bg-gray-50 transition group"
+          style={{ textDecoration: 'none' }}
+        >
+          {first.image && (
+            <div className="flex-shrink-0 w-14 h-14 rounded overflow-hidden mr-3 bg-gray-100">
+              <Image
+                src={first.image}
+                alt="封面图"
+                width={56}
+                height={56}
+                className="object-cover w-full h-full"
+              />
+            </div>
+          )}
+          <div className="flex-1 min-w-0">
+            <div className="text-base font-medium truncate group-hover:text-blue-600">{first.desc}</div>
+          </div>
+        </a>
+      );
    }
-    
-    // 显示文本内容
-    return (
-      <div className="mb-3">
-        <p className="text-gray-700 whitespace-pre-line">{material.content}</p>
-      </div>
-    )
+    // 视频类型
+    if (type === 3 && material.urls && material.urls.length > 0) {
+      const first = material.urls[0];
+      const videoUrl = typeof first === "string" ? first : (first.url || "");
+      return videoUrl ? (
+        <div className="mb-3">
+          <video src={videoUrl} controls className="rounded w-full max-w-md" />
+        </div>
+      ) : null;
+    }
+    // 文本类型
+    if (type === 4 || type === 6) {
+      return (
+        <div className="mb-3">
+          <p className="text-gray-700 whitespace-pre-line">{material.content}</p>
+        </div>
+      );
+    }
+    // 小程序类型
+    if (type === 5 && material.urls && material.urls.length > 0) {
+      const first = material.urls[0];
+      return (
+        <div className="mb-3">
+          <div>小程序名称：{first.appTitle}</div>
+          <div>AppID：{first.appId}</div>
+          {first.image && (
+            <div className="mb-2">
+              <Image src={first.image} alt="小程序封面图" width={80} height={80} className="rounded" />
+            </div>
+          )}
+        </div>
+      );
+    }
+    // 图片类型
+    if (type === 1) {
+      return renderImageResources(material);
+    }
+    // 其它类型
+    return null;
  }
-  
+
  // 处理图片资源
  const renderImageResources = (material: Material) => {
    const imageUrls = material.resUrls.filter(isImageUrl)
@@ -364,11 +421,8 @@ export default function MaterialsPage({ params }: { params: Promise<{ id: string
                  
                  <Separator className="my-3" />
                  
-                  {/* 文本内容 */}
-                  {renderContent(material)}
-                  
-                  {/* 图片资源 */}
-                  {renderImageResources(material)}
+                  {/* 类型分发内容渲染 */}
+                  {renderMaterialByType(material)}
                  
                  {/* 非图片资源标签 */}
                  {material.resUrls.length > 0 && !material.resUrls.some(isImageUrl) && (
--- a/Server/application/cunkebao/controller/ContentLibraryController.php
+++ b/Server/application/cunkebao/controller/ContentLibraryController.php
@@ -418,7 +418,6 @@ class ContentLibraryController extends Controller

        // 查询数据
        $list = ContentItem::where($where)
-            ->field('id,type,title,content,coverImage,resUrls,urls,createTime,createMomentTime,createMessageTime,wechatId,friendId,wechatChatroomId,senderNickname,location,lat,lng')
            ->order('createTime', 'desc')
            ->page($page, $limit)
            ->select();
@@ -528,7 +527,7 @@ class ContentLibraryController extends Controller
            $item->libraryId = $param['libraryId'];
            $item->contentType = $param['type'];
            $item->type = 'diy';
-            $item->title = '自定义内容';
+            $item->title = $param['title'] ?? '自定义内容';
            $item->content = $param['content'];
            $item->comment = $param['comment'] ?? '';
            $item->sendTime = strtotime($param['sendTime']);
@@ -617,11 +616,13 @@ class ContentLibraryController extends Controller
        
        // 添加内容类型的文字描述
        $contentTypeMap = [
+            0 => '未知',
            1 => '图片',
            2 => '链接',
            3 => '视频',
            4 => '文本',
            5 => '小程序',
+            6 => '图文'
        ];
        $item['contentTypeName'] = $contentTypeMap[$item['contentType'] ?? 0] ?? '未知';
        
@@ -632,7 +633,11 @@ class ContentLibraryController extends Controller
        if ($item['createMessageTime']) {
            $item['createMessageTimeFormatted'] = date('Y-m-d H:i:s', $item['createMessageTime']);
        }
-        //$item['createTimeFormatted'] = date('Y-m-d H:i:s', $item['createTime']);
+
+        // 格式化发送时间
+        if ($item['sendTime']) {
+            $item['sendTime'] = date('Y-m-d H:i:s', $item['sendTime']);
+        }

        // 获取发送者信息
        if ($item['type'] == 'moment' && $item['friendId']) {
@@ -659,6 +664,90 @@ class ContentLibraryController extends Controller
        ]);
    }

+    /**
+     * 更新内容项目
+     * @return \think\response\Json
+     */
+    public function updateItem()
+    {
+        if (!$this->request->isPost()) {
+            return json(['code' => 400, 'msg' => '请求方式错误']);
+        }
+
+        // 获取请求参数
+        $param = $this->request->post();
+
+        // 简单验证
+        if (empty($param['id'])) {
+            return json(['code' => 400, 'msg' => '参数错误']);
+        }
+
+        // 查询内容项目是否存在并检查权限
+        $item = ContentItem::where([
+            ['id', '=', $param['id']],
+            ['isDel', '=', 0]
+        ]) ->find();
+
+        if (!$item) {
+            return json(['code' => 404, 'msg' => '内容项目不存在或无权限操作']);
+        }
+
+        try {
+            // 更新内容项目
+            $item->title = $param['title'] ?? $item->title;
+            $item->content = $param['content'] ?? $item->content;
+            $item->comment = $param['comment'] ?? $item->comment;
+            
+            // 处理发送时间
+            if (!empty($param['sendTime'])) {
+                $item->sendTime = strtotime($param['sendTime']);
+            }
+
+            // 处理内容类型
+            if (isset($param['contentType'])) {
+                $item->contentType = $param['contentType'];
+            }
+
+            // 处理资源URL
+            if (isset($param['resUrls'])) {
+                $resUrls = is_string($param['resUrls']) ? json_decode($param['resUrls'], true) : $param['resUrls'];
+                $item->resUrls = json_encode($resUrls, JSON_UNESCAPED_UNICODE);
+                
+                // 设置封面图片
+                if (!empty($resUrls[0])) {
+                    $item->coverImage = $resUrls[0];
+                }
+            }
+
+            // 处理链接URL
+            if (isset($param['urls'])) {
+                $urls = is_string($param['urls']) ? json_decode($param['urls'], true) : $param['urls'];
+                $item->urls = json_encode($urls, JSON_UNESCAPED_UNICODE);
+            }
+
+            // 处理地理位置信息
+            if (isset($param['location'])) {
+                $item->location = $param['location'];
+            }
+            if (isset($param['lat'])) {
+                $item->lat = $param['lat'];
+            }
+            if (isset($param['lng'])) {
+                $item->lng = $param['lng'];
+            }
+
+            // 更新修改时间
+            $item->updateTime = time();
+            // 保存更新
+            $item->save();
+
+            return json(['code' => 200, 'msg' => '更新成功']);
+        } catch (\Exception $e) {
+            return json(['code' => 500, 'msg' => '更新失败：' . $e->getMessage()]);
+        }
+    }
+
+
    /************************************
     * 数据采集相关功能
     ************************************/