feat: 更新课程页面UI和交互逻辑

- 修改课程卡片页面，使用字典动态获取学科ID
- 调整课程详情页菜单项和图标
- 更新进度控制逻辑和UI样式
- 优化语音播放和录音功能交互
- 调整底部导航栏样式和布局

pages/card/index.uvue

@@ -6,6 +6,7 @@ import { type SubjectKnowledgeCardResult, getSubjectKnowledgeCard } from '@/serv
 import { fetchSubjectConfigInfo } from '@/services/subject/info'
 import type { SubjectCatalogResult } from '@/services/subject/catalog'
 import { config } from '@/config'
+import { dict } from '@/.cool/store'
 
 const activeCategory = ref<string>()
 const activeTab = ref<string>('knowledge')
@@ -15,7 +16,8 @@ const cards = ref<SubjectKnowledgeCardResult[]>([])
 const cardsScrollView = ref<any>(null)
 const categoryRefs = ref<any>()
 async function getDataList() {
-  const res = await getSubjectKnowledgeCard({ subjectId: '69c49329091547710d451f9d' })
+  const id = dict.getValueByLabelMapByType('index_subject_id')['物理']
+  const res = await getSubjectKnowledgeCard({ subjectId: id })
   cards.value = res.userCardList || []
   categories.value = res.catalogList || []
 }

pages/catalog/detail.uvue

@@ -15,16 +15,16 @@ const data = ref({
 })
 const menuItems = [
   { id: 'watch', name: '看课', icon: 'https://oss.xiaoxiongcode.com/static/home/kanke.png' },
-  { id: 'practice', name: '练习', icon: 'https://oss.xiaoxiongcode.com/static/home/lianxi.png' },
+  // { id: 'practice', name: '练习', icon: 'https://oss.xiaoxiongcode.com/static/home/lianxi.png' },
   { id: 'experiment', name: '虚拟实验', icon: 'https://oss.xiaoxiongcode.com/static/home/shiyan.png' },
-  { id: 'diary', name: '科学日记', icon: 'https://oss.xiaoxiongcode.com/static/home/riji.png' }
+  // { id: 'diary', name: '科学日记', icon: 'https://oss.xiaoxiongcode.com/static/home/riji.png' }
 ]
 const menu2Items = [
   { id: '1', name: '观察', icon: 'https://oss.xiaoxiongcode.com/static/home/观察.png' },
-  { id: '2', name: '提问', icon: 'https://oss.xiaoxiongcode.com/static/home/卡通扁平化功能图标设计.png' },
-  { id: '3', name: '假设', icon: 'https://oss.xiaoxiongcode.com/static/home/假设.png' },
-  { id: '4', name: '实验', icon: 'https://oss.xiaoxiongcode.com/static/home/实验.png' },
-  { id: '5', name: '总结', icon: 'https://oss.xiaoxiongcode.com/static/home/总结.png' },
+  { id: '2', name: '学习', icon: 'https://oss.xiaoxiongcode.com/static/home/假设.png' },
+  { id: '3', name: '假设', icon: 'https://oss.xiaoxiongcode.com/static/home/卡通扁平化功能图标设计.png' },
+  { id: '4', name: '交互', icon: 'https://oss.xiaoxiongcode.com/static/home/总结.png' },
+  { id: '5', name: '实验', icon: 'https://oss.xiaoxiongcode.com/static/home/实验.png' },
   { id: '6', name: '拓展', icon: 'https://oss.xiaoxiongcode.com/static/home/拓展.png' },
 ]
 //当前进度
@@ -82,31 +82,31 @@ onMounted(async () => {
   }, 1000)
 })
 async function handleEnded() {
-  // await updateSubjectProgress({
-  //   courseId: course.value?.id,
-  //   mainProgress: 1,
-  //   assistantProgress: 2,
-  //   status: 0
-  // })
-  // progress2.value = 2
+  progress2.value++
+  await updateSubjectProgress({
+    courseId: course.value?.id,
+    mainProgress: 1,
+    assistantProgress: progress2.value,
+    status: 0
+  })
 
-  switch (progress2.value) {
-    case 1:
-      router.push({
-        path: "/pages/catalog/web-view",
-        query: {
-          src: data.value.webviewSrc,
-          progress: progress2.value,
-        }
-      });
-      break
-    case 2:
-    case 4:
-    case 5:
-    case 6:
-      progress2.value++
-      break
-  }
+  // switch (progress2.value) {
+  //   case 1:
+  //     router.push({
+  //       path: "/pages/catalog/web-view",
+  //       query: {
+  //         src: data.value.webviewSrc,
+  //         progress: progress2.value,
+  //       }
+  //     });
+  //     break
+  //   case 2:
+  //   case 4:
+  //   case 5:
+  //   case 6:
+  //     progress2.value++
+  //     break
+  // }
 }
 const status = ref('wait')
 onShow(() => {
@@ -133,14 +133,13 @@ watchEffect(() => {
     switch (progress2.value) {
       case 1:
         data.value.videoSrc = course.value?.detailItem?.observeVideoPath
-        data.value.webviewSrc = course.value?.detailItem?.observeAnimationPath
         break
       case 2:
         data.value.videoSrc = course.value?.detailItem?.questionVideoPath
         break
       case 3:
         setTimeout(() => {
-          playVoice('/static/rain_experiment.mp3')
+          playVoice(course.value?.detailItem?.assumeAnimationPath)
         }, 2000)
         // data.value.webviewSrc = course.value?.detailItem?.assumeAnimationPath || data.value.webviewSrc
         // router.push({
@@ -153,7 +152,7 @@ watchEffect(() => {
         break
       case 4:
         // data.value.videoSrc = course.value?.detailItem?.testVideoPath || data.value.videoSrc
-        data.value.webviewSrc = course.value?.detailItem?.testAnimationPath
+        data.value.webviewSrc = course.value?.detailItem?.summaryVideoPath
         router.push({
           path: "/pages/catalog/web-view",
           query: {
@@ -163,7 +162,7 @@ watchEffect(() => {
         });
         break
       case 5:
-        data.value.videoSrc = course.value?.detailItem?.summaryVideoPath
+        data.value.videoSrc = course.value?.detailItem?.testVideoPath
         break
       case 6:
         data.value.videoSrc = course.value?.detailItem?.expandVideoPath
@@ -220,19 +219,22 @@ onUnmounted(() => {
         <!-- 顶部提示文字 -->
         <view class="absolute text-[20px] top-[20vh] w-full flex flex-row items-center justify-center">
           <!-- <cl-icon name="notification-3-fill" color="#FCE762" :size="40"></cl-icon> -->
-          <text>🔊</text>
-          <text class=" font-bold text-white">为什么下雨后，盐和糖消失了，烤肉却还在呢？</text>
+          <cl-image src="https://oss.xiaoxiongcode.com/static/home/guangbo.png" mode="heightFix" class="!h-[25px]"
+            @tap="playVoice(course?.detailItem?.assumeAnimationPath)"></cl-image>
+          <text class=" font-bold text-white">{{ course?.detailItem?.assumeAnimationJavascriptPath }}</text>
         </view>
 
         <!-- 居中麦克风按钮 -->
-        <view class=" mic flex flex-col items-center w-[120px] h-[120px]">
-          <view v-show="timer">
+        <view class=" mic flex flex-col items-center w-[220px] h-[220px]">
+          <view v-show="timer" class="mic">
             <cl-progress-circle :value="timers"></cl-progress-circle>
           </view>
 
-          <view class="mic  w-[120px] h-[120px] bg-[#3CB8FF]  rounded-full  flex items-center justify-center  z-[2]"
+          <view
+            class="mic  w-[120px] h-[120px] bg-[#3CB8FF]  rounded-full  flex items-center justify-center  z-[2] border-[4px] border-white border-solid"
             @tap="startRecord" v-if="!timer">
-            <cl-icon name="mic-fill" color="white" :size="60"></cl-icon>
+            <cl-image src="https://oss.xiaoxiongcode.com/static/home/maikefeng.png" mode="heightFix"
+              class="!h-[60px]"></cl-image>
           </view>
           <template v-else>
             <view class="mic  w-[120px] h-[120px] bg-[#3CB8FF]  rounded-full  flex items-center justify-center  z-[2]"
@@ -242,18 +244,22 @@ onUnmounted(() => {
           </template>
 
           <!-- 指示手指 -->
-          <view class="absolute bottom-[-20px] right-[-20px] animate-bounce pointer-events-none z-[2]"
+          <view class="absolute bottom-[20px] right-[20px] animate-bounce pointer-events-none z-[2] !h-[60px] w-[100px]"
             v-if="!timer && !voicePath">
-            <cl-icon name="arrow-left-up-line" color="white" :size="60"></cl-icon>
+            <cl-image src="https://oss.xiaoxiongcode.com/static/home/shou.png" mode="heightFix" width="100%"
+              class=""></cl-image>
           </view>
         </view>
         <!-- 下一步按钮 (录音完成后显示) -->
         <view v-show="voicePath" class="mic flex flex-row items-center justify-center gap-[200px]">
           <button
-            class="bg-[#71C73D] text-white w-[80px] h-[80px] flex items-center justify-center rounded-full font-bold text-[25px] shadow-md active:opacity-80"
-            @tap="playVoice(voicePath)">🔊</button>
+            class="bg-[#3CB8FF] text-white w-[80px] h-[80px] flex items-center justify-center rounded-full font-bold text-[25px] shadow-md active:opacity-80 border-[4px] border-white border-solid"
+            @tap="playVoice(voicePath)">
+            <cl-image src="https://oss.xiaoxiongcode.com/static/home/guangbo-bai.png" mode="heightFix"
+              class="!h-[25px]"></cl-image>
+          </button>
           <button
-            class="bg-[#71C73D] text-white w-[80px] h-[80px] flex items-center justify-center rounded-full font-bold text-[25px] shadow-md active:opacity-80"
+            class="bg-[#71C73D] text-white w-[80px] h-[80px] flex items-center justify-center rounded-full font-bold text-[25px] shadow-md active:opacity-80 border-[4px] border-white border-solid"
             @tap="handleTop">√</button>
         </view>
       </view>
@@ -266,9 +272,9 @@ onUnmounted(() => {
           <view class="before"></view>
           <view v-for="(item, i) in menu2Items" :key="item.id"
             class="px-0 py-3 flex items-center justify-center gap-[5px] relative z-[1]"
-            :class="{ '!bg-[#fff] rounded-full': progress2 == i + 1 }">
-            <cl-image :src="item.icon" mode="heightFix" class="!h-[30px]"></cl-image>
-            <text class="text-[14px]  font-bold" :class="{ '!text-[#2BA0F3]': progress2 == i + 1 }">{{ item.name
+            :class="{ '!bg-[#fff] rounded-full': progress2 == i + 1 }" @tap="progress2 = i + 1">
+            <cl-image :src="item.icon" mode="heightFix" class="!h-[28px] !w-[50px]"></cl-image>
+            <text class="text-[12px]  font-bold" :class="{ '!text-[#2BA0F3]': progress2 == i + 1 }">{{ item.name
             }}</text>
           </view>
           <view class="before"></view>
@@ -352,11 +358,11 @@ onUnmounted(() => {
   color: #fff;
 
   .control-progress {
-    @apply flex flex-row gap-[1vh] relative justify-end;
+    @apply flex flex-row gap-[3px] relative justify-end;
     flex: 1;
 
     .before {
-      @apply absolute top-1/2 right-0 w-[410px] h-[40px] bg-[#2BA0F3] rounded-l-full;
+      @apply absolute top-1/2 right-0 w-[340px] h-[40px] bg-[#2BA0F3] rounded-l-full;
       transform: translateY(-30%);
     }
   }