feat: 本次提交更新内容如下

保存进度
2025-07-15 11:15:21 +08:00
parent d2052e2825
commit 3955821f42
2 changed files with 65 additions and 46 deletions
--- a/nkebao/src/pages/content/materials/List.tsx
+++ b/nkebao/src/pages/content/materials/List.tsx
@@ -3,7 +3,6 @@ import { useNavigate, useParams } from 'react-router-dom';
 import Layout from '@/components/Layout';
 import UnifiedHeader from '@/components/UnifiedHeader';
 import { Input } from '@/components/ui/input';
-import { Card } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { toast } from '@/components/ui/toast';
@@ -23,6 +22,7 @@ interface MaterialItem {
  title?: string; // Added for new card structure
  creatorName?: string; // Added for new card structure
  aiAnalysis?: string; // Added for AI analysis result
+  resUrls?: string[]; // Added for image URLs
 }

 export default function Materials() {
@@ -146,6 +146,20 @@ export default function Materials() {
                    <div className="font-bold text-lg text-gray-900 mb-2 mt-1">{item.title ? `【${item.title}】` : (item.content.length > 20 ? `【${item.content.slice(0, 20)}...】` : `【${item.content}】`)}</div>
                    {/* 内容 */}
                    <div className="text-base text-gray-800 whitespace-pre-line mb-3" style={{ lineHeight: '1.8' }}>{item.content}</div>
+                    {/* 图片展示 */}
+                    {item.resUrls && item.resUrls.length > 0 && (
+                      <div className="flex flex-col gap-2 mb-3">
+                        {item.resUrls.map((url: string, idx: number) => (
+                          <img
+                            key={idx}
+                            src={url}
+                            alt="素材图片"
+                            className="w-full max-w-full rounded-lg border"
+                            style={{ height: 'auto', boxShadow: '0 1px 4px rgba(0,0,0,0.08)' }}
+                          />
+                        ))}
+                      </div>
+                    )}
                    {/* 标签 */}
                    {item.tags && item.tags.length > 0 && (
                      <div className="flex flex-wrap gap-2 mb-2">
--- a/nkebao/src/pages/content/materials/New.tsx
+++ b/nkebao/src/pages/content/materials/New.tsx
@@ -1,16 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Card } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
+import { Button } from 'tdesign-mobile-react';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { toast } from '@/components/ui/toast';
-import { Plus, X } from 'lucide-react';
 import Layout from '@/components/Layout';
 import UnifiedHeader from '@/components/UnifiedHeader';
-import { get, post, put } from '@/api/request';
-import { Image as ImageIcon, Link as LinkIcon, Video as VideoIcon, FileText, Layers, UploadCloud } from 'lucide-react';
+import { get, post } from '@/api/request';
+import { UploadCloud } from 'lucide-react';
 import { Upload } from 'tdesign-mobile-react';
 import type { UploadFile } from 'tdesign-mobile-react/es/upload/type';

@@ -24,12 +23,11 @@ export default function NewMaterial() {
  const [coverImage, setCoverImage] = useState('');
  const [url, setUrl] = useState('');
  const [videoUrl, setVideoUrl] = useState('');
-  const [resUrls, setResUrls] = useState<string[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isEdit, setIsEdit] = useState(false);
  const [sendTime, setSendTime] = useState('');
  const [images, setImages] = useState<string[]>([]);
-  const [selectOpen, setSelectOpen] = useState(false);
+  const [isFirstLoad, setIsFirstLoad] = useState(true);

  // 判断模式并拉取详情
  useEffect(() => {
@@ -39,35 +37,38 @@ export default function NewMaterial() {
        .then(res => {
          if (res && res.code === 200 && res.data) {
            setContent(res.data.content || '');
-            // setTags(res.data.tags || []); // 已移除tags
+            setComment(res.data.comment || '');
+            setSendTime(res.data.sendTime || '');
+            if (isFirstLoad && res.data.contentType) {
+              setContentType(Number(res.data.contentType));
+              setIsFirstLoad(false);
+            }
+            setDesc(res.data.desc || '');
+            setCoverImage(res.data.coverImage || '');
+            setUrl(res.data.url || '');
+            setVideoUrl(res.data.videoUrl || '');
+            setImages(res.data.resUrls || []); // 图片回显
          } else {
            toast({ title: '获取失败', description: res?.msg || '获取素材详情失败', variant: 'destructive' });
          }
        })
        .catch(error => {
          toast({ title: '网络错误', description: error?.message || '请检查网络连接', variant: 'destructive' });
-        })
-        // .finally(() => setLoading(false)); // 已移除loading
+        });
    } else {
      setIsEdit(false);
      setContent('');
-      // setTags([]); // 已移除tags
+      setComment('');
+      setSendTime('');
+      setContentType(1);
+      setImages([]);
+      setIsFirstLoad(true);
    }
  }, [materialId]);

-  // 移除未用的Badge、Plus、newTag、setNewTag、tags、setTags、loading、setResUrls、handleAddTag、handleRemoveTag
-  // 保证所有变量和set方法都已声明
-  // 定义内容类型常量和类型
-  const MATERIAL_TYPE_OPTIONS = [
-    { id: 1, name: '图片' },
-    { id: 2, name: '链接' },
-    { id: 3, name: '视频' },
-    { id: 4, name: '文本' },
-    { id: 5, name: '小程序' },
-  ];

-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+
+  const handleSave = async () => {
    if (!content) {
      toast({
        title: '错误',
@@ -80,24 +81,25 @@ export default function NewMaterial() {
    try {
      let res;
      if (isEdit) {
-        // 编辑模式，调用新接口
+        // 编辑模式，调用新接口，所有字段取表单值
        const payload = {
          id: materialId,
-          contentType: 4,
-          content,
-          comment: '',
-          sendTime: '',
-        };
-        res = await put('/v1/content/library/update-item', payload);
-      } else {
-        // 新建模式，调用新接口
-        const payload = {
-          libraryId: id,
-          type: 1,
+          contentType,
          content,
          comment,
          sendTime,
-          resUrls,
+          resUrls: images,
+        };
+        res = await post('/v1/content/library/update-item', payload);
+      } else {
+        // 新建模式，所有字段取表单值
+        const payload = {
+          libraryId: id,
+          type: contentType,
+          content,
+          comment,
+          sendTime,
+          resUrls: images,
        };
        res = await post('/v1/content/library/create-item', payload);
      }
@@ -125,18 +127,23 @@ export default function NewMaterial() {
    const random = mock[Math.floor(Math.random() * mock.length)];
    if (!images.includes(random)) setImages([...images, random]);
  };
-  const handleRemoveImage = (idx: number) => {
-    setImages(images.filter((_, i) => i !== idx));
-  };

  return (
    <Layout
      header={<UnifiedHeader title={isEdit ? '编辑素材' : '新建素材'} showBack onBack={() => navigate(-1)} />}
+      footer={
+        <div className='m-2'>
+          {/* 2. 按钮onClick绑定handleSave */}
+          <Button theme="primary" block onClick={handleSave} disabled={isSubmitting}>
+            {isSubmitting ? (isEdit ? '保存中...' : '创建中...') : (isEdit ? '保存修改' : '保存素材')}
+          </Button>
+        </div>
+      }
    >
      <div className="flex-1 bg-gray-50 min-h-screen">
        <div className="p-4 max-w-lg mx-auto">
          <Card className="p-8 rounded-3xl shadow-xl bg-white">
-            <form onSubmit={handleSubmit} className="space-y-8">
+            <form className="space-y-8">
              {/* 基础信息分组 */}
              <div className="mb-6">
                <div className="text-xs text-gray-400 mb-2 tracking-widest">基础信息</div>
@@ -193,7 +200,7 @@ export default function NewMaterial() {
                      ) : (
                        <div className="relative">
                          <img src={coverImage} alt="封面图" className="object-contain rounded-xl mx-auto my-auto w-20 h-20" />
-                          <Button type="button" variant="destructive" size="sm" className="absolute top-1 right-1 h-8 px-2 rounded-lg" onClick={() => setCoverImage('')}>删除</Button>
+                          <Button type="button" variant="base" size="small" className="absolute top-1 right-1 h-8 px-2 rounded-lg" onClick={() => setCoverImage('')}>删除</Button>
                        </div>
                      )}
                    </div>
@@ -219,7 +226,7 @@ export default function NewMaterial() {
                      ) : (
                        <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>
+                          <Button type="button" variant="base" size="small" className="absolute top-1 right-1 h-8 px-2 rounded-lg" onClick={() => setVideoUrl('')}>删除</Button>
                        </div>
                      )}
                    </div>
@@ -270,10 +277,8 @@ export default function NewMaterial() {
                  rows={4}
                />
              </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">
-                {isSubmitting ? (isEdit ? '保存中...' : '创建中...') : (isEdit ? '保存修改' : '保存素材')}
-              </Button>
+
+
            </form>
          </Card>
        </div>