Sfoglia il codice sorgente

1、智能问答回车
2、视频进度条背景色

liyanbo 9 mesi fa
parent
commit
420700ac30
3 ha cambiato i file con 68 aggiunte e 139 eliminazioni
  1. 52 77
      src/views/AIDevelop.vue
  2. 15 61
      src/views/AILaboratory.vue
  3. 1 1
      src/views/AIQuestions.vue

+ 52 - 77
src/views/AIDevelop.vue

@@ -120,38 +120,27 @@
               v-for="(option, index) in currentQuestion.options"
               :key="index"
               class="question-option"
-            >
-              <el-radio
-                v-model="selectedOption"
-                :label="index"
-                :value="option"
-                v-cloak="(selectedOption = option)"
-              >
-                <span>{{ option }}</span>
-              </el-radio>
-            </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 confirm" @click="handleSubmitAnswer"
-              >确定</el-button
-            >
-          </div>
-          <!-- 右侧小图标 -->
-          <div class="ai-icon-container" @click="handleAIClick">
-            <img
-              src="@/assets/images/xiaozhi.png"
-              alt="AI对话"
-              class="ai-icon"
-            />
-            <span class="ai-text">AI助手</span>
+          >
+            <el-radio v-model="selectedOption" :label="index" :value="option" v-cloak="selectedOption = option">
+              <span>{{ option }}</span>
+            </el-radio>
           </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 confirm" @click="handleSubmitAnswer">确定</el-button>
+        </div>
+        <!-- 右侧小图标 -->
+        <div class="ai-icon-container" @click="handleAIClick">
+          <img src="@/assets/images/xiaozhi.png" alt="AI对话" class="ai-icon" />
+          <span class="ai-text">AI助手</span>
+        </div>
       </div>
+    </div>
     </transition>
 
     <!-- AI对话弹框 -->
@@ -417,27 +406,25 @@ let messageHistory = ref([])
 
 // 定义每个视频对应的暂停时间和问题
 const videoPauseTimes = {
-  [video1]: {
-    pauseTimes: [1],
+  [video2]: {
+    pauseTimes: [30],
     questions: [
       {
         title: '视频当中发生了什么事情呢?',
         options: [],
         aiQuestion: '视频当中发生了什么事情呢',
-        aiAnswer:
-          '让我来告诉你吧:泡泡怪篡改了Ai历史数据,导致Ai系统发生崩溃,所以要修正Ai历史抓到泡泡怪!'
+        aiAnswer: '让我来告诉你吧:泡泡怪篡改了Ai历史数据,导致Ai系统发生崩溃,所以要修正Ai历史抓到泡泡怪!'
       }
     ]
   },
-  [video2]: {
-    pauseTimes: [53],
+  [video3]: {
+    pauseTimes: [49],
     questions: [
       {
-        title: '视频当中发生了什么事情呢?',
+        title: '同学们,大家了解图灵测试了吗?',
         options: [],
         aiQuestion: '视频当中发生了什么事情呢',
-        aiAnswer:
-          '让我来告诉你吧:泡泡怪篡改了Ai历史数据,导致Ai系统发生崩溃,所以要修正Ai历史抓到泡泡怪!'
+        aiAnswer: '让我来告诉你吧:泡泡怪篡改了Ai历史数据,导致Ai系统发生崩溃,所以要修正Ai历史抓到泡泡怪!'
       }
     ]
   },
@@ -448,43 +435,32 @@ const videoPauseTimes = {
         title: '你觉得deepseek、豆包等大模型可以通过图灵测试吗?为什么?',
         options: [],
         aiQuestion: '你觉得deepseek、豆包等大模型可以通过图灵测试吗?为什么?',
-        aiAnswer:
-          '大模型已缩短与图灵测试的标志距离,尤其在表面对话层面,但因缺乏深层次理解、逻辑一致性与真实认知,仍无法在严格测试中稳定通过。'
+        aiAnswer: '大模型已缩短与图灵测试的标志距离,尤其在表面对话层面,但因缺乏深层次理解、逻辑一致性与真实认知,仍无法在严格测试中稳定通过。'
       }
     ]
   },
   [video5]: {
-    pauseTimes: [48],
-    questions: [
-      {
-        title: '1956年达特茅斯会议上提出人工智能的目标是__________?',
-        options: [],
-        aiQuestion: '1956年达特茅斯会议上提出人工智能的目标是什么?',
-        aiAnswer: '原内容:机器能够像人类一样利用知识去解决问题,需要更改'
-      }
-    ]
+    pauseTimes: [49],
+    questions: []
   },
   [video6]: {
-    pauseTimes: [5]
+    pauseTimes: [5],
   },
   [video7]: {
-    pauseTimes: [64, 91],
+    pauseTimes: [64.5,91],
     questions: [
       {
         title: '如果你是聊天机器人,你会怎么回答用户呢?',
         options: [],
-        aiQuestion: '如果你是聊天机器人,你会怎么回答用户呢?',
-        aiAnswer: '发生什么事情了呢?'
+        aiQuestion: '',
+        aiAnswer: ''
       },
       {
-        title:
-          '当我们和聊天机器人对话的内容被人类所查看并回答时,隐私信息是否泄露?',
+        title: '当我们和聊天机器人对话的内容被人类所查看并回答时,隐私信息是否泄露?',
         options: [],
-        aiQuestion:
-          '当我们和聊天机器人对话的内容被人类所查看并回答时,隐私信息是否泄露?',
-        aiAnswer:
-          '与聊天机器人的对话被人类查看时,隐私泄露风险客\n' +
-          '观存在,尤其是人类介入或安全漏洞场景下。建议优先选择支持本地'
+        aiQuestion: '当我们和聊天机器人对话的内容被人类所查看并回答时,隐私信息是否泄露?',
+        aiAnswer: '与聊天机器人的对话被人类查看时,隐私泄露风险客\n' +
+            '观存在,尤其是人类介入或安全漏洞场景下。建议优先选择支持本地'
       }
     ]
   },
@@ -494,8 +470,7 @@ const videoPauseTimes = {
       {
         title: '如果你身体不舒服时找这样的专家检查,那么它开的药你敢喝吗?',
         options: [],
-        aiQuestion:
-          '如果你身体不舒服时找这样的专家检查,那么它开的药你敢喝吗?',
+        aiQuestion: '如果你身体不舒服时找这样的专家检查,那么它开的药你敢喝吗?',
         aiAnswer: '这题没给答案,你自己去查吧!'
       }
     ]
@@ -507,51 +482,50 @@ const videoPauseTimes = {
         title: '在生活中,有哪些正在使用的专家系统呢?',
         options: [],
         aiQuestion: '在生活中,有哪些正在使用的专家系统呢?',
-        aiAnswer:
-          '在医疗健康领域有复杂疾病协同决策和Ai医生分身与诊断辅助;在水利交通领域的水利厅专家库系统用于项目验收和抢险督查'
+        aiAnswer: '在医疗健康领域有复杂疾病协同决策和Ai医生分身与诊断辅助;在水利交通领域的水利厅专家库系统用于项目验收和抢险督查'
       }
     ]
   },
   [video11]: {
-    pauseTimes: [1, 90, 176],
+    pauseTimes: [1,90,176],
     questions: [
       {
         title: '怎么会有爆炸声?泡泡怪在这里吗?',
         options: [],
-        aiQuestion: '怎么会有爆炸声?泡泡怪在这里吗?',
+        aiQuestion: '',
         aiAnswer: ''
       },
       {
         title: '同学们喜欢下围棋吗?',
         options: [],
-        aiQuestion: '同学们喜欢下围棋吗?',
+        aiQuestion: '',
         aiAnswer: ''
       },
       {
         title: '为什么AlphaGo要在围棋上攻克真人冠军呢?',
         options: [],
         aiQuestion: '为什么AlphaGo要在围棋上攻克真人冠军呢?',
-        aiAnswer:
-          '围棋是人类智力游戏的巅峰,拥有天文数字级的可能性,每颗棋子价值由全局态势动态决定,所以当前一手可能百步之后才显现价值。AlphaGo战胜人类顶尖选手,它证明了Ai不仅能处理规则明确的事物,更能攻克依赖直觉、策略的“人类专属领域”'
+        aiAnswer: '围棋是人类智力游戏的巅峰,拥有天文数字级的可能性,每颗棋子价值由全局态势动态决定,所以当前一手可能百步之后才显现价值。AlphaGo战胜人类顶尖选手,它证明了Ai不仅能处理规则明确的事物,更能攻克依赖直觉、策略的“人类专属领域”'
       }
     ]
   },
   [video12]: {
-    pauseTimes: [1]
+    pauseTimes: [1],
   },
   [video13]: {
-    pauseTimes: [61],
+    pauseTimes: [62],
     questions: [
       {
         title: '我们一起来感受一下大模型吧!',
         options: [],
-        aiQuestion: '我们一起来感受一下大模型吧!',
+        aiQuestion: '',
         aiAnswer: ''
       }
     ]
   }
 }
 
+
 // 处理视频时间更新事件
 const handleTimeUpdate = () => {
   if (!videoRef.value) return
@@ -883,11 +857,11 @@ $text-color: #483d8b; // 文本颜色:靛蓝色
     // object-fit: contain;
   }
 }
-// 视频进度条样式
-video.full-box-video::-webkit-media-controls-timeline {
-  background-color: rgb(255, 255, 255,0.3); // 进度条背景颜色,调浅为半透明白色
-}
 
+/* 隐藏 Chrome 视频控件的渐变背景等默认样式 */
+video::-webkit-media-controls-panel {
+  background: transparent !important; /* 去掉背景渐变,设为透明 */
+}
 
 .small-title {
   width: 100%;
@@ -1465,4 +1439,5 @@ video.full-box-video::-webkit-media-controls-timeline {
     //background: linear-gradient(90deg, darken($primary-color, 5%), darken($secondary-color, 5%));
   }
 }
-</style>
+
+</style>

+ 15 - 61
src/views/AILaboratory.vue

@@ -101,79 +101,33 @@ import NumberPeople05 from '@/assets/images/number-people05.png'
 
 // 渲染数字人老师及图片
 const peopleList = ref([
-  {
-    id: 21,
-    name: '鲁迅',
-    image: NumberPeople01,
-    message:
-      '您好,我叫鲁迅,著名的文学家、思想家、革命家、教育家、民主战士,新文化运动的重要参与者,中国现代文学的奠基人之一'
-  },
-  {
-    id: 22,
-    name: '门捷列夫',
-    image: NumberPeople02,
-    message:
-      '您好,我是门捷列夫,俄国科学家,发现并归纳元素周期律,依照原子量,制作出世界上第一张元素周期表。你需要问我什么问题呢?'
-  },
-  {
-    id: 19,
-    name: '牛顿',
-    image: NumberPeople03,
-    message:
-      '您好,我是牛顿爵士,生于英格兰林肯郡伍尔索普村,英国物理学家、数学家、哲学家。欢迎向我询问物理学、数学、哲学问题。'
-  },
-  {
-    id: 23,
-    name: '特斯拉',
-    image: NumberPeople04,
-    message:
-      '您好,我是特斯拉,是塞尔维亚裔美籍发明家 、物理学家、机械工程师、电气工程师。有什么需要帮助的?'
-  },
-  {
-    id: 18,
-    name: '李白',
-    image: NumberPeople05,
-    message:
-      '您好,我叫李白,出生于蜀郡绵州昌隆县(一说出生于西域碎叶)。我是伟大的浪漫主义诗人,经我创造书写诗文千余篇,有《李太白集》传世。欢迎向我提问诗文。'
-  }
+  { id: 21, name: '鲁迅', image: NumberPeople01 , message: '您好,我叫鲁迅,著名的文学家、思想家、革命家、教育家、民主战士,新文化运动的重要参与者,中国现代文学的奠基人之一' },
+  { id: 22, name: '门捷列夫', image: NumberPeople02 , message: '您好,我是门捷列夫,俄国科学家,发现并归纳元素周期律,依照原子量,制作出世界上第一张元素周期表。你需要问我什么问题呢?' },
+  { id: 19, name: '牛顿', image: NumberPeople03 , message: '您好,我是牛顿爵士,生于英格兰林肯郡伍尔索普村,英国物理学家、数学家、哲学家。欢迎向我询问物理学、数学、哲学问题。' },
+  { id: 23, name: '特斯拉', image: NumberPeople04 , message: '您好,我是特斯拉,是塞尔维亚裔美籍发明家 、物理学家、机械工程师、电气工程师。有什么需要帮助的?' },
+  { id: 18, name: '李白', image: NumberPeople05 , message: '您好,我叫李白,出生于蜀郡绵州昌隆县(一说出生于西域碎叶)。我是伟大的浪漫主义诗人,经我创造书写诗文千余篇,有《李太白集》传世。欢迎向我提问诗文。' }
 ])
 
 // 跳转页面携带名字和人物形象
 const navigateToAIQuestions = person => {
   router.push({
     // 跳转问答页面
-    path: '/ai-questions',
-    query: {
-      id: person.id,
-      name: person.name,
-      image: person.image,
-      message: person.message
-    }
-  })
-}
+    path: '/ai-questions', 
+    query: {  id: person.id, name: person.name, image: person.image, message: person.message }
+  }); 
+};
 
 // 跳转智能问答
-const navigateToAI = group => {
-  if (group.title === '智能问答') {
-    let person = {
-      id: 10,
-      name: '小智',
-      image: NumberPeople00,
-      message:
-        '您好,我是您的AI智能助手小智,我会尽力回答您的问题或提供有用的建议!!!!'
-    }
+const navigateToAI = (group) => {
+  if (group.title === "智能问答") {
+    let person = { id: 10, name: '小智', image: NumberPeople00, message: '您好,我是您的AI智能助手小智,我会尽力回答您的问题或提供有用的建议!!!!'  };
     router.push({
       // 跳转问答页面
       path: '/ai-questions',
-      query: {
-        id: person.id,
-        name: person.name,
-        image: person.image,
-        message: person.message
-      }
-    })
+      query: {  id: person.id, name: person.name, image: person.image, message: person.message }
+    });
   }
-  if (group.title === '智能绘画') {
+  if (group.title === "智能绘画") {
     router.push('/ai-painting')
   }
 }

+ 1 - 1
src/views/AIQuestions.vue

@@ -40,7 +40,7 @@
               type="text"
               v-model="prompt"
               placeholder="问我任何问题..."
-              @keyup.enter="sendMessage"
+              @keyup.enter="handleSendByKeydown"
             />
             <button @click="handleSendByButton">发送</button>
           </div>