错题统计页面

src/components/WrongQuestion/WrongQuestionSearch.vue

@@ -0,0 +1,70 @@
+<!-- src/components/WrongQuestion/WrongQuestionSearch.vue -->
+<template>
+  <!-- 搜索区域容器 -->
+  <div class="search-area">
+    <!-- 题目类型筛选项 -->
+    <div class="search-item">
+      <label>题目类型</label>
+      <select v-model="filters.type">
+        <option value="">全部</option>
+        <option value="股票知识">股票知识</option>
+        <option value="基金知识">基金知识</option>
+        <option value="投资策略">投资策略</option>
+      </select>
+    </div>
+
+    <!-- 题干关键词搜索项 -->
+    <div class="search-item">
+      <label>题干查找</label>
+      <input type="text" v-model="filters.questionText" placeholder="请输入题干关键词" />
+    </div>
+
+    <!-- 推荐课程筛选项 -->
+    <div class="search-item">
+      <label>推荐课程</label>
+      <select v-model="filters.course">
+        <option value="">全部</option>
+        <option value="量能擒牛">量能擒牛</option>
+        <option value="趋势交易">趋势交易</option>
+        <option value="基本面分析">基本面分析</option>
+      </select>
+    </div>
+
+    <!-- 操作按钮组 -->
+    <div class="btn-group">
+      <!-- 查找按钮，触发搜索逻辑 -->
+      <button class="btn-red" @click="searchWrongQuestions">查找</button>
+      <!-- Excel导出按钮，触发导出逻辑 -->
+      <button class="btn-red" @click="exportToExcel">Excel导出</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  // 组件名称：错题统计搜索组件
+  name: 'WrongQuestionSearch',
+  data() {
+    return {
+      // 搜索条件数据模型
+      filters: {
+        type: '',           // 题目类型筛选值
+        questionText: '',   // 题干关键词
+        course: ''          // 推荐课程筛选值
+      }
+    }
+  },
+  methods: {
+    // 执行错题搜索逻辑
+    searchWrongQuestions() {
+      console.log('搜索条件:', this.filters)
+      // 可通过事件或 API 调用将条件传递给父组件或后端
+    },
+    // 导出当前数据为 Excel 文件
+    exportToExcel() {
+      console.log('导出 Excel')
+      // 后续可集成导出功能（如使用 `xlsx` 库）
+    }
+  }
+}
+</script>

src/components/WrongQuestion/WrongQuestionTable.vue

@@ -0,0 +1,99 @@
+<!-- src/components/WrongQuestion/WrongQuestionTable.vue -->
+<template>
+  <!-- 表格容器，用于展示错题统计数据 -->
+  <div class="table-container">
+    <!-- 数据表格 -->
+    <table>
+      <!-- 表头部分 -->
+      <thead>
+      <tr>
+        <th>ID</th>
+        <th>题干</th>
+        <th>题目类型</th>
+        <th>出错次数</th>
+        <th>出错率</th>
+        <th>推荐课程</th>
+        <th>操作</th>
+      </tr>
+      </thead>
+      <!-- 表格主体，循环渲染每条错题数据 -->
+      <tbody>
+      <tr v-for="item in wrongQuestions" :key="item.id">
+        <td>{{ item.id }}</td>
+        <td>{{ item.questionText }}</td>
+        <td>{{ item.type }}</td>
+        <td>{{ item.errorCount }}</td>
+        <td>{{ item.errorRate }}</td>
+        <td>{{ item.recommendedCourse }}</td>
+        <td>
+          <!-- 查看出错用户按钮 -->
+          <button class="btn-red small" @click="viewUser(item)">出错用户</button>
+          <!-- 查看题目详情按钮 -->
+          <button class="btn-red small" @click="viewQuestion(item)">查看题目</button>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  // 组件名称：错题统计表格组件
+  name: 'WrongQuestionTable',
+  // 接收父组件传递的错题数据列表
+  props: {
+    wrongQuestions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  // 定义方法
+  methods: {
+    // 点击“出错用户”按钮时触发，用于查看该题目的错误用户信息
+    viewUser(item) {
+      console.log('查看出错用户:', item)
+    },
+    // 点击“查看题目”按钮时触发，用于跳转或显示题目详情
+    viewQuestion(item) {
+      console.log('查看题目:', item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 表格容器样式 */
+.table-container {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+/* 表格整体样式 */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: white;
+}
+
+/* 表头和表体单元格通用样式 */
+th,
+td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+/* 表头样式 */
+th {
+  background-color: #f2f2f2;
+  font-weight: normal;
+  color: #333;
+}
+
+/* 鼠标悬停行高亮效果 */
+tr:hover {
+  background-color: #f9f9f9;
+}
+</style>

src/views/WrongQuestion.vue

@@ -1,18 +1,61 @@
 <template>
+  <!-- 错题统计页面容器 -->
   <div class="wrong-question">
-    <p>错题统计模块</p>
-    <p>当前模块内容暂未开发</p>
+    <!-- 搜索区域组件，用于筛选错题数据 -->
+    <WrongQuestionSearch />
+    <!-- 错题表格组件，展示筛选后的错题列表 -->
+    <WrongQuestionTable :wrongQuestions="wrongQuestions" />
   </div>
 </template>
 
 <script>
+// 导入搜索组件：用于提供筛选条件输入和操作按钮
+import WrongQuestionSearch from '@/components/WrongQuestion/WrongQuestionSearch.vue'
+// 导入表格组件：用于展示错题数据列表
+import WrongQuestionTable from '@/components/WrongQuestion/WrongQuestionTable.vue'
+
 export default {
-  name: 'WrongQuestion'
+  // 组件名称：错题统计页面
+  name: 'WrongQuestion',
+  // 注册子组件
+  components: {
+    WrongQuestionSearch,
+    WrongQuestionTable
+  },
+  // 页面数据
+  data() {
+    return {
+      // 错题数据列表，初始为示例数据
+      wrongQuestions: [
+        {
+          id: 1,
+          questionText: '以下哪项不是股票的基本特征？',
+          type: '股票知识',
+          errorCount: 50,
+          errorRate: '50%',
+          recommendedCourse: '量能擒牛'
+        }
+      ]
+    }
+  },
+  // 页面方法
+  methods: {
+    // 获取错题数据的方法，后续可集成 API 调用
+    fetchWrongQuestions() {
+      console.log('获取错题数据...')
+    }
+  },
+  // 生命周期钩子：组件挂载完成后执行
+  mounted() {
+    // 页面加载时调用获取数据方法
+    this.fetchWrongQuestions()
+  }
 }
 </script>
 
 <style scoped>
+/* 错题统计页面整体样式 */
 .wrong-question {
-  padding: 20px;
+  padding: 20px; /* 内边距设置为20px，保持内容与边界间距 */
 }
 </style>