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

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>