feat: backendData driven preview page

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

src/pages/preview/index.jsx

@@ -42,20 +42,71 @@ const VideoList = () => {
   const [Videos, setVideos] = useState([])
 
   //Call the backend interface to obtain the latest video results
-  const refreshVideo = async () => {
-    let res = null
-    try {
-      res = await axios.get(`http://10.20.1.10:3100/2403/learnvideo/check?shotDirName=${state.reqData.shotDirName}`)
-    } catch (err) {
-      message.error('Connect server failed')
-      console.error(err)
-    }
+  // const refreshVideo = async () => {
+  //   let res = null
+  //   try {
+  //     res = await axios.get(`http://10.20.1.10:3100/2403/learnvideo/check?shotDirName=${state.reqData.shotDirName}`)
+  //   } catch (err) {
+  //     message.error('Connect server failed')
+  //     console.error(err)
+  //   }
 
-    if (res.data.code != 200) {
-      message.error(`request server failed: ${res.data.code}`)
+  //   if (res.data.code != 200) {
+  //     console.log(res.data)
+  //     message.error(`request server failed: ${res.data.code}`)
+  //   }
+  //   //Always refresh display list
+  //   if (res.data.data.length) {
+  //     let _Videos = res.data.data.map((video, index) => {
+  //       let videoData = {
+  //         url: video.url,
+  //         targetAudience: video.data.targetAudience,
+  //         painPoint: video.data.painPoint
+  //       }
+  //       return <VideoBox videoData={videoData} key={index} />
+  //     })
+  //     setVideos(_Videos)
+  //   }
+  //   let timer = setTimeout(() => {
+  //     clearTimeout(timer)
+  //     refreshVideo()
+  //   }, 4000)
+  // }
+
+  useEffect(() => {
+    console.log('state_is:', state)
+
+    // 模拟请求和渲染过程
+    let res = {}
+    res.data = {
+      code: 200,
+      data: [
+        {
+          url: '/test.mp4',
+          data: {
+            targetAudience: '1忙碌的上班族和年轻家庭主妇...',
+            painPoint: '1工作繁忙，没时间去市场挑选新鲜海鲜...'
           }
-    //Always refresh display list
-    if (res.data.data.length) {
+        },
+        {
+          url: '/test.mp4',
+          data: {
+            targetAudience: '2忙碌的上班族和年轻家庭主妇...',
+            painPoint: '2工作繁忙，没时间去市场挑选新鲜海鲜...'
+          }
+        },
+        {
+          url: '/test.mp4',
+          data: {
+            targetAudience: '3忙碌的上班族和年轻家庭主妇...',
+            painPoint: '3工作繁忙，没时间去市场挑选新鲜海鲜...'
+          }
+        }
+      ]
+    }
+    const refreshVideo = () => {
+      setTimeout(() => {
+        if (res.data.code == 200) {
           let _Videos = res.data.data.map((video, index) => {
             let videoData = {
               url: video.url,
@@ -65,68 +116,20 @@ const VideoList = () => {
             return <VideoBox videoData={videoData} key={index} />
           })
           setVideos(_Videos)
+          res.data.data.push({
+            url: '/test.mp4',
+            data: {
+              targetAudience: '3忙碌的上班族和年轻家庭主妇...',
+              painPoint: '3工作繁忙，没时间去市场挑选新鲜海鲜...'
             }
-    let timer = setTimeout(() => {
-      clearTimeout(timer)
+          })
           refreshVideo()
-    }, 4000)
+        }
+      }, 3000)
     }
 
-  useEffect(() => {
-    console.log('state_is:', state)
-    refreshVideo()
 
-    // let res = {}
-    // res.data = {
-    //   code: 200,
-    //   data: [
-    //     {
-    //       url: '/test1.mp4',
-    //       data: {
-    //         targetAudience: '1忙碌的上班族和年轻家庭主妇...',
-    //         painPoint: '1工作繁忙，没时间去市场挑选新鲜海鲜...'
-    //       }
-    //     },
-    //     {
-    //       url: '/test.mp4',
-    //       data: {
-    //         targetAudience: '2忙碌的上班族和年轻家庭主妇...',
-    //         painPoint: '2工作繁忙，没时间去市场挑选新鲜海鲜...'
-    //       }
-    //     },
-    //     {
-    //       url: '/test.mp4',
-    //       data: {
-    //         targetAudience: '3忙碌的上班族和年轻家庭主妇...',
-    //         painPoint: '3工作繁忙，没时间去市场挑选新鲜海鲜...'
-    //       }
-    //     }
-    //   ]
-    // }
-    // const refreshVideo = () => {
-    //   setTimeout(() => {
-    //     if (res.data.code == 200) {
-    //       let _Videos = res.data.data.map((video, index) => {
-    //         let videoData = {
-    //           url: video.url,
-    //           targetAudience: video.data.targetAudience,
-    //           painPoint: video.data.painPoint
-    //         }
-    //         return <VideoBox videoData={videoData} key={index} />
-    //       })
-    //       setVideos(_Videos)
-    //       res.data.data.push({
-    //         url: '/test.mp4',
-    //         data: {
-    //           targetAudience: '3忙碌的上班族和年轻家庭主妇...',
-    //           painPoint: '3工作繁忙，没时间去市场挑选新鲜海鲜...'
-    //         }
-    //       })
-    //       refreshVideo()
-    //     }
-    //   }, 3000)
-    // }
-    // refreshVideo()
+    refreshVideo()
   }, [])
   return <>{Videos}</>
 }

src/pages/upload/index.jsx

@@ -85,7 +85,7 @@ const Upload = () => {
       clearTimeout(timer)
       setLoading(false)
       navigate('/preview', { state: { reqData } })
-    }, 2000)
+    }, 5000)
   }
 
   useEffect(() => {