Explorar el Código

禁用实操课未开放视频和添加生成等待效果

丸子 hace 7 meses
padre
commit
fb33e847db

+ 2 - 3
src/components/ImageUpload/index.vue

@@ -93,15 +93,14 @@ const handleFileSelect = async (event) => {
   }
 
   // 验证文件大小
-  const maxSize = 5 * 1024 * 1024;
+  const maxSize = 50 * 1024 * 1024;
   if (file.size > maxSize) {
-    Message().error('图片大小不能超过5MB!', true);
+    Message().error('图片大小不能超过50MB!', true);
     return;
   }
 
   try {
     isUploading.value = true;
-    
     // 创建FormData对象
     const formData = new FormData();
     formData.append('file', file);

+ 10 - 0
src/views/AIGeneralCourse.vue

@@ -355,6 +355,16 @@ const goToAIExperience = outlineData => {
       return
     }
   }
+  // 检查是否是实操课的最后四节课
+  if (showPracticalCourse.value && ClassOutlineScData.value.length > 0) {
+    const totalLessons = ClassOutlineScData.value.length;
+    const currentIndex = parseInt(outlineData.ctTypeSort);
+    // 禁用最后四节课
+    if (currentIndex > totalLessons - 4) {
+      Message().notifyWarning('此课程暂未开放,敬请期待!', true)
+      return
+    }
+  }
   router.push({
     path: '/ai-develop', // 跳转视频页面
     query: { typeId: outlineData.id, typeName: outlineData.ctType }

+ 37 - 2
src/views/AIImageToImage.vue

@@ -82,6 +82,11 @@
               <!-- AI生成图片对话框 -->
               <div class="ai-message" v-if="item.type !== 'user'">
                 {{ item.content }}
+                <span v-if="item.loading" class="loading-dots">
+                  <span class="dot"></span>
+                  <span class="dot"></span>
+                  <span class="dot"></span>
+                </span>
                 <div class="image-list" v-if="item.imageList">
                   <el-image
                       v-for="(image, index) in item.imageList"
@@ -160,7 +165,6 @@
 import { ref, onMounted,onUnmounted} from 'vue'
 import {AiImageStatusEnum, CreatePainting, PaintingGetMys} from '@/api/questions.js'
 import { useRouter, useRoute } from 'vue-router'
-import NumberPeople00 from '@/assets/images/xiaozhi.png'
 import {
   Document,
   Menu as IconMenu,
@@ -384,7 +388,8 @@ const sendMessage = async() => {
     imageAllList.value.push(userMessage);
     imageAllList.value.push({
       type: 'ai',
-      content: "正在为您生成图片,请稍等...",
+      content: "正在为您生成图片,请稍等",
+      loading: true
     })
 
     // 递增消息计数器
@@ -736,6 +741,36 @@ const inProgressTimerFun = () => {
   border-radius: rpx(5);
   text-align: left; // 文字左对齐
 }
+
+// 加载动画效果
+.loading-dots {
+  display: inline-block;
+  margin-left: rpx(5);
+}
+.loading-dots .dot {
+  display: inline-block;
+  width: rpx(3);
+  height: rpx(3);
+  border-radius: 50%;
+  background-color: #333;
+  margin: 0 rpx(1);
+  animation: loading-dot 1.4s infinite ease-in-out both;
+}
+.loading-dots .dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.loading-dots .dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+@keyframes loading-dot {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
 .image-list {
   display: flex;
   flex-wrap: wrap;

+ 54 - 14
src/views/AIImageToVideo.vue

@@ -82,18 +82,23 @@
                   <!-- AI生成图片对话框 -->
                  <div class="ai-message" v-if="item.type !== 'user'">
                 {{ item.content }}
-                <div class="image-list" v-if="item.imageList && item.imageList.length > 0">
-                    <video
-                      v-for="(video, index) in item.imageList"
-                      :key="index"
-                      style="width: 30%; max-width: 600px; height: auto; margin: 10px;"
-                      :src="video"
-                      controls
-                      playsinline
-                    >
-                      您的浏览器不支持视频播放
-                  </video>
-                </div>
+                  <span v-if="item.loading" class="loading-dots">
+                    <span class="dot"></span>
+                    <span class="dot"></span>
+                    <span class="dot"></span>
+                  </span>
+                  <div class="image-list" v-if="item.imageList && item.imageList.length > 0">
+                      <video
+                        v-for="(video, index) in item.imageList"
+                        :key="index"
+                        style="width: 30%; max-width: 600px; height: auto; margin: 10px;"
+                        :src="video"
+                        controls
+                        playsinline
+                      >
+                        您的浏览器不支持视频播放
+                    </video>
+                  </div>
               </div>
                 
             </div>
@@ -144,7 +149,6 @@
 import { ref, onMounted,onUnmounted} from 'vue'
 import {AiImageStatusEnum, CreatePainting, PaintingGetMys,CreateVideo, VideoGetMys} from '@/api/questions.js'
 import { useRouter, useRoute } from 'vue-router'
-import NumberPeople00 from '@/assets/images/xiaozhi.png'
 import {
   Document,
   Menu as IconMenu,
@@ -365,7 +369,8 @@ const sendMessage = async() => {
     imageAllList.value.push(userMessage);
     imageAllList.value.push({
       type: 'ai',
-      content: "正在为您生成视频,请稍等...",
+      content: "正在为您生成视频,请稍等",
+      loading: true
     })
 
     // 递增消息计数器
@@ -718,6 +723,41 @@ const inProgressTimerFun = () => {
   border-radius: rpx(5);
   text-align: left; // 文字左对齐
 }
+
+// 加载动画效果
+.loading-dots {
+  display: inline-block;
+  margin-left: rpx(5);
+}
+
+.loading-dots .dot {
+  display: inline-block;
+  width: rpx(3);
+  height: rpx(3);
+  border-radius: 50%;
+  background-color: #333;
+  margin: 0 rpx(1);
+  animation: loading-dot 1.4s infinite ease-in-out both;
+}
+
+.loading-dots .dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.loading-dots .dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes loading-dot {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
+
 .image-list {
   display: flex;
   flex-wrap: wrap;

+ 38 - 2
src/views/AIPainting.vue

@@ -57,6 +57,11 @@
               <!-- AI生成图片对话框 -->
               <div class="ai-message" v-if="item.type !== 'user'">
                 {{ item.content }}
+                <span v-if="item.loading" class="loading-dots">
+                  <span class="dot"></span>
+                  <span class="dot"></span>
+                  <span class="dot"></span>
+                </span>
                 <div class="image-list" v-if="item.imageList">
                   <el-image
                       v-for="(image, index) in item.imageList"
@@ -185,7 +190,6 @@ import demo1 from '@/assets/images/ai-demo/ai-image-demo1.png'
 import demo2 from '@/assets/images/ai-demo/ai-image-demo2.png'
 import demo3 from '@/assets/images/ai-demo/ai-image-demo3.png'
 import demo4 from '@/assets/images/ai-demo/ai-image-demo4.png'
-import NumberPeople00 from '@/assets/images/xiaozhi.png'
 import {
   Document,
   Menu as IconMenu,
@@ -393,7 +397,8 @@ const sendMessage = async() => {
     })
     imageAllList.value.push({
       type: 'ai',
-      content: "正在为您生成图片,请稍等...",
+      content: "正在为您生成图片,请稍等",
+      loading: true
     })
 
     // 递增消息计数器
@@ -733,6 +738,37 @@ const inProgressTimerFun = () => {
   border-radius: rpx(5);
   text-align: left; // 文字左对齐
 }
+
+// 加载动画效果
+.loading-dots {
+  display: inline-block;
+  margin-left: rpx(5);
+}
+.loading-dots .dot {
+  display: inline-block;
+  width: rpx(3);
+  height: rpx(3);
+  border-radius: 50%;
+  background-color: #333;
+  margin: 0 rpx(1);
+  animation: loading-dot 1.4s infinite ease-in-out both;
+}
+.loading-dots .dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.loading-dots .dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+@keyframes loading-dot {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
+
 .image-list {
   display: flex;
   flex-wrap: wrap;