feat: 添加听读评测功能

src/router/index.js

@@ -10,6 +10,7 @@ import QuestionGenerator from '../views/QuestionGenerator.vue'
 import QuestionVariant from '../views/QuestionVariant.vue'
 import AudioToText from '../views/AudioToText.vue'
 import QuestionExplanation from '../views/QuestionExplanation.vue'
+import SpeakingEvaluation from '../views/SpeakingEvaluation.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -69,6 +70,11 @@ const router = createRouter({
       name: 'question-explanation',
       component: QuestionExplanation
     },
+    {
+      path: '/speaking-evaluation',
+      name: 'speaking-evaluation',
+      component: SpeakingEvaluation
+    },
   ]
 })
 

src/views/HomePage.vue

@@ -93,6 +93,14 @@ const features = ref([
     icon: "presentation",
     route: "/question-explanation",
   },
+  {
+    id: 12,
+    title: "听读评测",
+    desc: "输入单词或句子列表，点击卡片听发音，按住按钮跟读录音，AI智能评测发音准确度，提供错误标注和改进建议。",
+    class: "card-12",
+    icon: "mic",
+    route: "/speaking-evaluation",
+  },
 ]);
 
 // Hover effect for glassmorphism glare
@@ -131,6 +139,12 @@ onUnmounted(() => {
 </script>
 
 <template>
+  <div class="homepage-bg">
+    <video class="bg-video" autoplay muted loop playsinline>
+      <source src="@/assets/bg.mp4" type="video/mp4" />
+    </video>
+    <div class="bg-overlay"></div>
+  </div>
   <div class="homepage-container">
     <header>
       <h1>AI 英语学习辅助平台</h1>
@@ -368,6 +382,35 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+.homepage-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: -1;
+  overflow: hidden;
+}
+
+.bg-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  filter: blur(8px);
+  object-fit: cover;
+}
+
+.bg-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
 .homepage-container {
   width: 100%;
   max-width: 1200px;
@@ -535,6 +578,16 @@ h1 {
   box-shadow: 0 8px 20px -6px rgba(6, 182, 212, 0.5);
 }
 
+.card-11 .icon-wrapper {
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.5);
+}
+
+.card-12 .icon-wrapper {
+  background: linear-gradient(135deg, #ec4899, #f472b6);
+  box-shadow: 0 8px 20px -6px rgba(236, 72, 153, 0.5);
+}
+
 .card-title {
   font-size: 1.5rem;
   font-weight: 600;