提交AI自主学习界面

src/components/study/SelfDirectedLearning.vue

@@ -5,6 +5,7 @@
       <h3>和AI一起学你想学！</h3>
     </div>
     <div class="input-section">
+      <!-- 发送消息输入框 -->
       <div class="dialogue-card user-input-card">
         <div class="dialogue-content">
           <textarea
@@ -44,22 +45,66 @@
           </button>
         </div>
       </div>
+
+      <!-- 生成/进度 -->
+      <div class="new-container" v-if="showNewContainer">
+        <!-- 全部完成时显示成功状态 -->
+        <div v-if="allStepsCompleted" class="success-container">
+          <div class="success-checkmark">✓</div>
+          <div class="success-text">完成</div>
+        </div>
+        <!-- 未完成时显示进度 -->
+        <template v-else>
+          <div class="left-box">
+            <div class="loading-container">
+              <div class="loading-spinner"></div>
+              <div class="loading-text">正在生成中</div>
+            </div>
+          </div>
+          <div class="right-box">
+            <div class="progress-container">
+              <div class="progress-title">正在生成课程</div>
+              <div class="progress-steps">
+                <div class="progress-step" v-for="(step, index) in visibleProgressSteps" :key="index" :style="{ animationDelay: `${index * 0.2}s` }">
+                  <span class="step-text">{{ step.text }}</span>
+                  <span class="step-status" :class="{ 'completed': step.completed, 'active': step.active }">
+                    <span v-if="step.completed" class="checkmark">✓</span>
+                    <span v-else-if="step.active" class="loading-dot"></span>
+                    <span v-else class="step-placeholder"></span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {ref, onMounted, computed} from "vue";
 import { Top, Search, User,Memo,ArrowUpBold,ArrowDownBold } from '@element-plus/icons-vue'
 
 // 发送消息输入框
 const prompt = ref(""); // prompt
 
+// 控制生成进度显示状态
+const showNewContainer = ref(false);
+
+// 生成进度步骤
+const progressSteps = ref([
+  { text: '生成课程信息...', completed: false, active: false, visible: false },
+  { text: '生成课程小节...', completed: false, active: false, visible: false },
+  { text: '生成背景图...', completed: false, active: false, visible: false },
+  { text: '生成配音...', completed: false, active: false, visible: false }
+]);
+
 // 下拉框配置
 const dropdowns = ref([
   {
     key: 'course',
-    value: '诗词课',
+    value: '诗词',
     visible: false,
     icon: Search,
     options: [
@@ -177,7 +222,69 @@ const doSendMessage = async (content) => {
   // 清空输入框
   prompt.value = "";
 
+  // 显示new-container
+  showNewContainer.value = true;
+
+  // 开始模拟生成进度
+  simulateProgress();
+};
+
+// 模拟生成进度
+const simulateProgress = () => {
+  // 重置所有步骤
+  progressSteps.value.forEach(step => {
+    step.completed = false;
+    step.active = false;
+    step.visible = false;
+  });
+
+  // 逐个处理步骤
+  let currentStep = 0;
+  
+  const processStep = () => {
+    if (currentStep < progressSteps.value.length) {
+      // 显示当前步骤
+      progressSteps.value[currentStep].visible = true;
+      // 激活当前步骤
+      progressSteps.value[currentStep].active = true;
+      
+      // 模拟步骤完成
+      setTimeout(() => {
+        // 标记当前步骤为完成
+        progressSteps.value[currentStep].completed = true;
+        progressSteps.value[currentStep].active = false;
+        
+        // 处理下一步
+        currentStep++;
+        processStep();
+      }, 1500); // 每个步骤持续1.5秒
+    } else {
+      // 所有步骤完成后，3秒后隐藏容器
+      setTimeout(() => {
+        showNewContainer.value = false;
+      }, 2000);
+    }
+  };
+  
+  // 开始处理第一个步骤
+  processStep();
 };
+
+// 计算属性：返回可见的进度步骤
+const visibleProgressSteps = computed(() => {
+  return progressSteps.value.filter(step => step.visible);
+});
+
+// 计算属性：检查是否所有步骤都已完成
+const allStepsCompleted = computed(() => {
+  return progressSteps.value.every(step => step.completed);
+});
+
+// 组件挂载时示
+onMounted(() => {
+  // 初始状态下不显示生成进度
+  showNewContainer.value = false;
+});
 </script>
 
 <style scoped lang="scss">
@@ -189,10 +296,9 @@ const doSendMessage = async (content) => {
 
 .self-directed-learning {
   width: 100%;
-  // min-height: rpx(100); /* 设置最小高度 */
   display: flex;
   flex-direction: column;
-  flex-grow: 1; /* 允许组件在容器中生长 */
+  flex-grow: 1;
 }
 
 .title-section {
@@ -210,6 +316,7 @@ const doSendMessage = async (content) => {
 
 .input-section {
   display: flex;
+  flex-direction: column;
   justify-content: flex-start;
   margin-left: rpx(10);
   width: calc(100% - rpx(10));
@@ -222,17 +329,17 @@ const doSendMessage = async (content) => {
   padding: rpx(8);
   max-width: 50%;
   min-width: rpx(200);
-  // box-shadow: 0 rpx(3.5) rpx(10) rgba(0, 0, 0, 0.15);
   width: auto;
   display: inline-block;
   z-index: 2;
 }
 
 .user-input-card {
-  width: 90%;
+  width: 93%;
   margin-left: rpx(20);
   max-width: none;
   animation: dialogueEnterCenter 0.6s ease forwards;
+  box-sizing: border-box;
 }
 
 .user-input-card::before {
@@ -385,13 +492,13 @@ const doSendMessage = async (content) => {
   position: absolute;
   bottom: rpx(0);
   right: rpx(0);
-  width: rpx(20);
-  height: rpx(20);
+  width: rpx(18);
+  height: rpx(18);
   border-radius: 50%;
   background: transparent;
   color: #a7a4ed;
   border: rpx(1) solid #a7a4ed;
-  font-size: rpx(3);
+  font-size: rpx(2);
   font-weight: bold;
   display: flex;
   align-items: center;
@@ -444,4 +551,236 @@ const doSendMessage = async (content) => {
   display: block;
 }
 
+.new-container {
+  width: 93%;
+  margin-left: rpx(20);
+  margin-top: rpx(10);
+  display: flex;
+  gap: rpx(5);
+  background-color: #f1f0ff;
+  border: rpx(1) solid #a7a4ed;
+  border-radius: rpx(6);
+  padding: rpx(2);
+  max-width: none;
+  align-self: flex-start;
+  box-sizing: border-box;
+  min-height: rpx(50);
+}
+
+.success-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: rpx(10);
+  gap: rpx(5);
+}
+
+.success-checkmark {
+  width: rpx(20);
+  height: rpx(20);
+  border-radius: 50%;
+  background-color: #4caf50;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: rpx(12);
+  font-weight: bold;
+  animation: successScale 0.5s ease-out;
+}
+
+.success-text {
+  font-size: rpx(10);
+  color: #666;
+  font-weight: bold;
+  animation: successFadeIn 0.5s ease-out 0.2s both;
+}
+
+@keyframes successScale {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes successFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(rpx(5));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.left-box {
+  flex: 0.5;
+  // background-color: rgba(241, 240, 255, 0.8);
+  backdrop-filter: blur(rpx(5));
+  // border: rpx(1) solid rgba(167, 164, 237);
+  border-radius: rpx(6);
+  padding: rpx(2);
+  min-height: rpx(50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: rpx(5);
+}
+
+.loading-spinner {
+  width: rpx(12);
+  height: rpx(12);
+  border: rpx(2) solid rgba(167, 164, 237, 0.3);
+  border-top: rpx(2) solid #a7a4ed;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  font-size: rpx(8);
+  color: #666;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+.right-box {
+  flex: 1;
+  // background-color: rgba(241, 240, 255, 0.8);
+  backdrop-filter: blur(rpx(5));
+  // border: rpx(1) solid rgba(167, 164, 237, 0.5);
+  border-radius: rpx(6);
+  padding: rpx(8);
+  min-height: rpx(50);
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.progress-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: rpx(5);
+}
+
+.progress-title {
+  font-size: rpx(10);
+  font-weight: bold;
+  color: #666;
+  margin-bottom: rpx(3);
+}
+
+.progress-steps {
+  display: flex;
+  flex-direction: column;
+  gap: rpx(2);
+}
+
+.progress-step {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  text-align: left;
+  font-size: rpx(8);
+  color: #666;
+  padding: rpx(1) 0;
+  transition: all 0.3s ease;
+  opacity: 0;
+  transform: translateY(rpx(5));
+  animation: stepEnter 0.5s ease forwards;
+}
+
+@keyframes stepEnter {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.progress-step.active .step-text {
+  color: #a7a4ed;
+  font-weight: bold;
+}
+
+.step-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.3s ease;
+}
+
+.step-status {
+  width: rpx(8);
+  height: rpx(8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin-left: rpx(10);
+  transition: all 0.3s ease;
+}
+
+.step-placeholder {
+  width: rpx(4);
+  height: rpx(4);
+  border-radius: 50%;
+  background-color: rgba(167, 164, 237, 0.2);
+}
+
+.step-status.completed {
+  background-color: #4caf50;
+  color: white;
+}
+
+.step-status.active {
+  background-color: rgba(167, 164, 237, 0.3);
+}
+
+.checkmark {
+  font-size: rpx(6);
+  font-weight: bold;
+}
+
+.loading-dot {
+  width: rpx(4);
+  height: rpx(4);
+  background-color: #a7a4ed;
+  border-radius: 50%;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(1.2); }
+}
+
 </style>

src/views/AIPage/AIGeneralCourse.vue

@@ -186,8 +186,8 @@ const courseData = ref({
 
 // 菜单配置
 const menuConfig = [
-  { id: 'general', title: '通识课', type: '1', isPractical: false, isAICourse: false },
-  { id: 'practical', title: '实操课', type: '2', isPractical: true, isAICourse: false },
+  { id: 'general', title: 'AI通识课', type: '1', isPractical: false, isAICourse: false },
+  { id: 'practical', title: 'AI实操课', type: '2', isPractical: true, isAICourse: false },
   { id: 'ai', title: 'AI场景教学', type: '3', isPractical: false, isAICourse: true },
   { id: 'selfstudy', title: 'AI自主学习', type: '1', isPractical: false, isAICourse: true }
 ]