1、更换视频第一帧

2、智能绘画增加试题，更改ui
3、视频组件试题弹框动画

src/views/AIDevelop.vue

@@ -96,7 +96,8 @@
       </div>
     </div>
     <!-- 添加试题弹框 -->
-    <div
+    <transition name="fade-scale">
+      <div
         v-show="questionDialogVisible"
         class="child-dialog-wrapper"
         @click.self="handleCloseQuestionDialog"
@@ -119,11 +120,11 @@
           </div>
         </div>
         <div v-else class="no-options">
-          暂无选项
+<!--          暂无选项-->
         </div>
         <!-- 底部按钮 -->
         <div class="dialog-footer">
-          <el-button class="child-button cancel" @click="questionDialogVisible = false; showAIDialog = false">取消</el-button>
+<!--          <el-button class="child-button cancel" @click="questionDialogVisible = false; showAIDialog = false">取消</el-button>-->
           <el-button class="child-button confirm" @click="handleSubmitAnswer">确定</el-button>
         </div>
         <!-- 右侧小图标 -->
@@ -133,6 +134,7 @@
         </div>
       </div>
     </div>
+    </transition>
 
     <!-- AI对话弹框 -->
     <div
@@ -373,6 +375,17 @@ let messageHistory = ref([])
 
 // 定义每个视频对应的暂停时间和问题
 const videoPauseTimes = {
+  [video1]: {
+    pauseTimes: [1],
+    questions: [
+      {
+        title: '视频当中发生了什么事情呢？',
+        options: [],
+        aiQuestion: '视频当中发生了什么事情呢',
+        aiAnswer: '让我来告诉你吧：泡泡怪篡改了Ai历史数据，导致Ai系统发生崩溃，所以要修正Ai历史抓到泡泡怪！'
+      }
+    ]
+  },
   [video2]: {
     pauseTimes: [53],
     questions: [
@@ -445,7 +458,7 @@ const videoPauseTimes = {
         title: '在生活中，有哪些正在使用的专家系统呢？',
         options: [],
         aiQuestion: '在生活中，有哪些正在使用的专家系统呢？',
-        aiAnswer: '在医疗健康领域有复杂疾病协同决策喝Ai医生分身与诊断辅助；在水利交通领域的水利厅专家库系统用于项目验收和抢险督查'
+        aiAnswer: '在医疗健康领域有复杂疾病协同决策和Ai医生分身与诊断辅助；在水利交通领域的水利厅专家库系统用于项目验收和抢险督查'
       }
     ]
   },
@@ -586,6 +599,7 @@ const handleCloseAIDialog = () => {
 </script>
 <style scoped lang="scss">
 @use 'sass:math';
+@use 'sass:color'; // 引入 color 模块
 // 定义rpx转换函数
 @function rpx($px) {
   @return math.div($px, 750) * 100vw;
@@ -1011,7 +1025,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
 
 
     &:hover {
-      background: linear-gradient(to right, darken($primary-color, 5%), darken($secondary-color, 5%));
+      background: linear-gradient(to right, color.adjust($primary-color, $lightness: -5%), color.adjust($secondary-color, $lightness: -5%));
       box-shadow: 0 rpx(3) rpx(10) rgba($primary-color, 0.4);
       transform: translateY(-rpx(1));
       color: white;
@@ -1144,6 +1158,18 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
     text-indent: 1em;
   }
 }
+/* 定义淡入和缩放动画 */
+.fade-scale-enter-active,
+.fade-scale-leave-active {
+  transition: all 0.5s ease;
+}
+
+.fade-scale-enter-from,
+.fade-scale-leave-to {
+  opacity: 0.1;
+  transform: scale(0.9);
+}
+
 // 自定义试题弹框背景
 .child-dialog-wrapper {
   position: fixed;
@@ -1167,17 +1193,6 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   padding: rpx(20);
   width: 60%;
   position: relative;
-
-  // 添加装饰元素
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: rpx(10);
-    background: linear-gradient(90deg, $primary-color, $secondary-color, $accent-color);
-  }
 }
 
 // AI对话弹框样式
@@ -1300,7 +1315,7 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
     transition: background-color 0.3s ease; // 颜色过渡效果
 
     &:hover {
-      background-color: darken($primary-color, 10%); // 悬停时滑块颜色加深
+      //background-color: darken($primary-color, 10%); // 悬停时滑块颜色加深
     }
   }
 

src/views/AIPainting.vue

@@ -9,6 +9,17 @@
           智能绘画
         </div>
       </div>
+
+      <div class="img-box">
+        <p>
+          <img
+              style=" width: fit-content; height: 180px; margin: 10px;"
+              src="@/assets/images/color.png"
+              class="avatar user"
+          />
+        </p>
+        <p>期待你的画作喔~</p>
+      </div>
     </div>
     <!-- 右侧AI问答 -->
     <div class="number-people">
@@ -17,7 +28,7 @@
         <div class="chat-dialog">
           <!-- 对话消息列表 -->
           <div class="message-list">
-            <div v-for="(item, index) in imageAllList" :key="index">
+            <div v-if="imageAllList.length > 0" v-for="(item, index) in imageAllList" :key="index">
 
               <!-- 用户消息 -->
               <div class="user-message" v-if="item.type === 'user'">
@@ -63,7 +74,55 @@
                   </el-image>
                 </div>
               </div>
+            </div>
 
+            <div v-else class="content-demo">
+
+              <h3>请参考示例：</h3>
+
+              <!-- 用户消息 -->
+              <div class="user-message">
+                生成粉色的会飞的猪
+              </div>
+
+              <!-- AI生成图片对话框 -->
+              <div class="ai-message" >
+                为您生成图片：
+
+                <div class="image-list" v-if="demoImageList">
+                  <el-image
+                      v-for="(image, index) in demoImageList"
+                      :key="index"
+                      style=" width: fit-content; height: 180px; margin: 10px;"
+                      :src="image"
+                      :preview-src-list="demoImageList"
+                      fit="cover"
+                      show-progress
+                  >
+                    <template
+                        #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
+                    >
+                      <el-icon @click="prev"><Back /></el-icon>
+                      <el-icon @click="next"><Right /></el-icon>
+                      <el-icon @click="setActiveItem(demoImageList.length - 1)">
+                        <DArrowRight />
+                      </el-icon>
+                      <el-icon @click="actions('zoomOut')"><ZoomOut /></el-icon>
+                      <el-icon
+                          @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })">
+                        <ZoomIn />
+                      </el-icon>
+                      <el-icon
+                          @click="actions('clockwise', { rotateDeg: 180, enableTransition: false })">
+                        <RefreshRight />
+                      </el-icon>
+                      <el-icon @click="actions('anticlockwise')"><RefreshLeft /></el-icon>
+                      <el-icon @click="reset"><Refresh /></el-icon>
+                      <el-icon @click="download(activeIndex)"><Download /></el-icon>
+                    </template>
+                  </el-image>
+                </div>
+              </div>
             </div>
           </div>
           <!-- 输入框和发送按钮 -->
@@ -85,6 +144,10 @@
 import { ref, onMounted,onUnmounted} from 'vue'
 import {AiImageStatusEnum, CreatePainting, PaintingGetMys} from '@/api/questions.js'
 import { useRouter, useRoute } from 'vue-router'
+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 {
   Document,
   Menu as IconMenu,
@@ -100,18 +163,7 @@ const goBack = () => {
 const router = useRouter()
 const route = useRoute()
 
-// AI生成图片
-// CreatePainting({
-//   modelId: 56,
-//   prompt:''
-// }).then(res=>{
-//   console.log(res);
-// })
-
-// 获取绘图记录
-// CreatePaintingGetMy().then(res=>{
-//   console.log(res);
-// })
+const demoImageList = [demo1, demo2, demo3, demo4]
 
 // 消息列表和输入内容的响应式变量
 const messages = ref([])
@@ -279,6 +331,7 @@ const inProgressTimerFun = () => {
   display: flex;
   background-color: #ece9fd;
 }
+
 .content-box {
   flex: 1;
   margin-top: rpx(10);
@@ -288,6 +341,11 @@ const inProgressTimerFun = () => {
   background: rgba($color: #ffffff, $alpha: 0.5);
 }
 
+//左侧展览区图标
+.img-box {
+  margin-top: rpx(50);
+  color: #a39dce;
+}
 // 对话框
 .chat-dialog {
   display: flex;
@@ -354,4 +412,10 @@ const inProgressTimerFun = () => {
   display: flex;
   flex-wrap: wrap;
 }
+
+.content-demo {
+  background-color: #f4f2fa;
+  border-radius: 15px;
+  padding: 30px 10px;
+}
 </style>

src/views/AIQuestions.vue

@@ -310,15 +310,16 @@ const messageList = computed(() => {
   if (activeMessageList.value.length > 0) {
     return activeMessageList.value
   }
+
   // 没有消息时，如果有 systemMessage 则展示它
   if (activeConversation.value?.systemMessage) {
-    return [
-      {
-        id: 0,
-        type: 'system',
-        content: activeConversation.value.systemMessage
-      }
-    ]
+    let systemMessage = {
+      id: 0,
+      type: 'system',
+      content: activeConversation.value.systemMessage
+    }
+    activeMessageList.value.push(systemMessage)
+    return [systemMessage]
   }
   return []
 })

vite.config.js

@@ -14,11 +14,11 @@ export default defineConfig({
   base: './',
   server: {
     host: "0.0.0.0",
-    // proxy: {
-    //   '/api': {
-    //     target: 'https://192.168.110.8:8080',
-    //     changeOrigin: true
-    //   }
-    // }
+    proxy: {
+      '/api': {
+        target: 'https://192.168.110.8:8080',
+        changeOrigin: true
+      }
+    }
   }
 })