From d0252048fe99f2402f50aa06d7851606383f1c8d Mon Sep 17 00:00:00 2001
From: daijiajjun <daijiajun@daijiajun.com>
Date: Sat, 8 Nov 2025 16:09:55 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=98=E5=BA=93=E7=AE=A1=E7=90=86=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=96+=E5=85=A8=E9=83=A8=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                | 39 +++++++++++++++++---
 src/components/HelloWorld.vue              | 58 ------------------------------
 src/components/Layout/Header.vue           | 25 +++++++------
 src/components/Layout/Sidebar.vue          | 36 ++++++++++++-------
 src/components/Question/QuestionSearch.vue |  9 +++++
 src/components/Question/QuestionTable.vue  | 38 +++++++++++++-------
 src/components/Tabs/TabNavigation.vue      |  8 ++++-
 src/main.js                                | 11 +++++-
 src/router/index.js                        | 37 +++++++++++--------
 src/views/HomeView.vue                     |  0
 src/views/QuestionManage.vue               |  7 ++++
 src/views/UserStatistics.vue               | 52 ++++++++++++++++++++++++---
 12 files changed, 202 insertions(+), 118 deletions(-)
 delete mode 100644 src/components/HelloWorld.vue
 delete mode 100644 src/views/HomeView.vue

diff --git a/src/App.vue b/src/App.vue
index e6b134b..f7b56f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,23 @@
 <template>
+  <!-- 应用根组件容器 -->
   <div id="app">
+    <!-- 头部组件 -->
     <Header />
+    <!-- 主容器，包含侧边栏和内容区域 -->
     <div class="container">
+      <!-- 侧边栏组件 -->
       <Sidebar />
+      <!-- 内容区域 -->
       <div class="content">
+        <!-- 页面标题 -->
         <div class="title">测评系统后台</div>
+        <!-- 标签导航组件 -->
         <TabNavigation />
 
-        <!-- 使用 router-view 替代原来的 tab 切换逻辑 -->
+        <!-- 路由视图出口，根据路由显示对应组件 -->
         <router-view />
 
+        <!-- 底部应用按钮 -->
         <div class="footer-btn">
           <button class="btn-red">应用</button>
         </div>
@@ -19,12 +27,17 @@
 </template>
 
 <script>
+// 导入头部组件
 import Header from './components/Layout/Header.vue'
+// 导入侧边栏组件
 import Sidebar from './components/Layout/Sidebar.vue'
+// 导入标签导航组件
 import TabNavigation from './components/Tabs/TabNavigation.vue'
 
 export default {
+  // 根组件名称
   name: 'App',
+  // 注册子组件
   components: {
     Header,
     Sidebar,
@@ -36,18 +49,20 @@ export default {
 </script>
 
 <style>
-/* 保持原有的全局样式不变 */
+/* 全局样式重置 */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
+/* body基础样式 */
 body {
   font-family: 'Arial', sans-serif;
   background-color: #f5f5f5;
 }
 
+/* 应用容器样式 */
 #app {
   width: 100%;
   height: 100vh;
@@ -55,6 +70,7 @@ body {
   flex-direction: column;
 }
 
+/* 头部样式 */
 .header {
   height: 60px;
   background-color: white;
@@ -65,18 +81,21 @@ body {
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
+/* logo样式 */
 .logo {
   color: #e74c3c;
   font-weight: bold;
   font-size: 18px;
 }
 
+/* 主容器样式，使用flex布局 */
 .container {
   display: flex;
   flex: 1;
   overflow: hidden;
 }
 
+/* 内容区域样式 */
 .content {
   flex: 1;
   padding: 20px;
@@ -85,18 +104,21 @@ body {
   position: relative;
 }
 
+/* 标题样式 */
 .title {
   font-size: 20px;
   margin-bottom: 20px;
   color: #333;
 }
 
+/* 标签导航容器样式 */
 .tabs {
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
 }
 
+/* 标签按钮样式 */
 .tab-btn {
   padding: 8px 16px;
   background-color: #e74c3c;
@@ -107,20 +129,24 @@ body {
   transition: opacity 0.3s;
 }
 
+/* 标签按钮悬停效果 */
 .tab-btn:hover {
   background-color: #c0392b;
 }
 
+/* 激活状态的标签按钮样式 */
 .tab-btn.active {
   opacity: 0.5;
 }
 
+/* 底部按钮定位样式 */
 .footer-btn {
   position: absolute;
   bottom: 20px;
   right: 20px;
 }
-/* 在 App.vue 的 style 标签中添加或修改以下样式 */
+
+/* 搜索区域样式 */
 .search-area {
   display: flex;
   justify-content: space-between;
@@ -129,18 +155,21 @@ body {
   gap: 20px;
 }
 
+/* 搜索项样式 */
 .search-item {
   display: flex;
   flex-direction: column;
   min-width: 160px;
 }
 
+/* 搜索项标签样式 */
 .search-item label {
   margin-bottom: 5px;
   font-size: 14px;
   color: #666;
 }
 
+/* 搜索项下拉框和输入框样式 */
 .search-item select,
 .search-item input {
   padding: 8px;
@@ -149,11 +178,13 @@ body {
   font-size: 14px;
 }
 
+/* 按钮组样式 */
 .btn-group {
   display: flex;
   gap: 10px;
 }
 
+/* 红色按钮样式 */
 .btn-red {
   padding: 8px 16px;
   background-color: #e74c3c;
@@ -163,9 +194,9 @@ body {
   cursor: pointer;
 }
 
+/* 小尺寸红色按钮样式 */
 .btn-red.small {
   padding: 4px 10px;
   font-size: 12px;
 }
-
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 879051a..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/Layout/Header.vue b/src/components/Layout/Header.vue
index b782cbc..39219e7 100644
--- a/src/components/Layout/Header.vue
+++ b/src/components/Layout/Header.vue
@@ -1,31 +1,36 @@
 <!--头部组件-->
 <template>
+  <!-- 头部容器 -->
   <div class="header">
+    <!-- 系统Logo -->
     <div class="logo">Homily Link</div>
   </div>
 </template>
 
 <script>
 export default {
+  // 组件名称：Header（由于是单个单词，已禁用多单词命名规则）
   // eslint-disable-next-line vue/multi-word-component-names
   name: 'Header'
 }
 </script>
 
 <style scoped>
+/* 头部样式 */
 .header {
-  height: 60px;
-  background-color: white;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding-left: 20px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  height: 60px;                /* 高度60px */
+  background-color: white;     /* 白色背景 */
+  display: flex;               /* 使用flex布局 */
+  align-items: center;         /* 垂直居中对齐 */
+  justify-content: flex-start; /* 内容靠左对齐 */
+  padding-left: 20px;          /* 左内边距20px */
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加底部阴影效果 */
 }
 
+/* Logo样式 */
 .logo {
-  color: #e74c3c;
-  font-weight: bold;
-  font-size: 18px;
+  color: #e74c3c;     /* 红色字体 */
+  font-weight: bold;  /* 粗体 */
+  font-size: 18px;    /* 字体大小18px */
 }
 </style>
diff --git a/src/components/Layout/Sidebar.vue b/src/components/Layout/Sidebar.vue
index 5674a5c..31a1d13 100644
--- a/src/components/Layout/Sidebar.vue
+++ b/src/components/Layout/Sidebar.vue
@@ -1,13 +1,17 @@
 <!--侧边栏组件-->
 <template>
+  <!-- 侧边栏容器 -->
   <div class="sidebar">
+    <!-- 侧边栏菜单列表 -->
     <ul class="sidebar-menu">
+      <!-- 各个菜单项 -->
       <li>主页</li>
       <li>发文章</li>
       <li>我的内容</li>
       <li>我的收藏</li>
       <li>评论管理</li>
       <li>账号设置</li>
+      <!-- 当前激活的菜单项 -->
       <li class="active">测评管理</li>
     </ul>
   </div>
@@ -15,36 +19,42 @@
 
 <script>
 export default {
+  // 组件名称：SideBar
   name: 'SideBar'
 }
 </script>
 
 <style scoped>
+/* 侧边栏整体样式 */
 .sidebar {
-  width: 200px;
-  background-color: #f5f5f5;
-  height: 100%;
-  border-right: 1px solid #ddd;
+  width: 200px;              /* 宽度200px */
+  background-color: #f5f5f5; /* 背景色 */
+  height: 100%;              /* 高度占满父容器 */
+  border-right: 1px solid #ddd; /* 右边框 */
 }
 
+/* 侧边栏菜单样式 */
 .sidebar-menu {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+  list-style: none;  /* 移除默认列表样式 */
+  padding: 0;        /* 清除内边距 */
+  margin: 0;         /* 清除外边距 */
 }
 
+/* 菜单项通用样式 */
 .sidebar-menu li {
-  padding: 15px 20px;
-  cursor: pointer;
-  transition: background-color 0.3s;
+  padding: 15px 20px;            /* 内边距 */
+  cursor: pointer;               /* 鼠标指针样式 */
+  transition: background-color 0.3s; /* 背景色过渡动画 */
 }
 
+/* 菜单项悬停效果 */
 .sidebar-menu li:hover {
-  background-color: #e0e0e0;
+  background-color: #e0e0e0;     /* 悬停时的背景色 */
 }
 
+/* 激活状态的菜单项样式 */
 .sidebar-menu li.active {
-  background-color: #d1ecf1;
-  color: #007bff;
+  background-color: #d1ecf1;     /* 激活项背景色 */
+  color: #007bff;                /* 激活项文字颜色 */
 }
 </style>
diff --git a/src/components/Question/QuestionSearch.vue b/src/components/Question/QuestionSearch.vue
index 65a34c1..dcf3972 100644
--- a/src/components/Question/QuestionSearch.vue
+++ b/src/components/Question/QuestionSearch.vue
@@ -1,6 +1,8 @@
 <!--搜索区域-->
 <template>
+  <!-- 搜索区域容器 -->
   <div class="search-area">
+    <!-- 题目类型筛选项 -->
     <div class="search-item">
       <label>题目类型</label>
       <select>
@@ -9,10 +11,14 @@
         <option>投资策略</option>
       </select>
     </div>
+
+    <!-- 题干关键词搜索项 -->
     <div class="search-item">
       <label>题干查找</label>
       <input type="text" placeholder="请输入题干关键词" />
     </div>
+
+    <!-- 课程推荐筛选项 -->
     <div class="search-item">
       <label>课程推荐</label>
       <select>
@@ -21,6 +27,8 @@
         <option>基本面分析</option>
       </select>
     </div>
+
+    <!-- 操作按钮组 -->
     <div class="btn-group">
       <button class="btn-red">查找</button>
       <button class="btn-red">新增题目</button>
@@ -31,6 +39,7 @@
 
 <script>
 export default {
+  // 组件名称：题目搜索
   name: 'QuestionSearch'
 }
 </script>
diff --git a/src/components/Question/QuestionTable.vue b/src/components/Question/QuestionTable.vue
index 2d054ff..15bf3f6 100644
--- a/src/components/Question/QuestionTable.vue
+++ b/src/components/Question/QuestionTable.vue
@@ -1,6 +1,9 @@
 <template>
+  <!-- 表格容器 -->
   <div class="table-container">
+    <!-- 题目数据表格 -->
     <table>
+      <!-- 表头部分 -->
       <thead>
       <tr>
         <th>ID</th>
@@ -12,7 +15,9 @@
         <th>操作</th>
       </tr>
       </thead>
+      <!-- 表格主体部分 -->
       <tbody>
+      <!-- 示例数据行 -->
       <tr>
         <td>1</td>
         <td>以下哪项不是股票的基本特征？</td>
@@ -21,6 +26,7 @@
         <td>50%</td>
         <td>量能擒牛</td>
         <td>
+          <!-- 操作按钮组 -->
           <button class="btn-red small">查看</button>
           <button class="btn-red small">修改</button>
           <button class="btn-red small">删除</button>
@@ -33,37 +39,43 @@
 
 <script>
 export default {
+  // 组件名称：题目表格
   name: 'QuestionTable'
 }
 </script>
 
 <style scoped>
+/* 表格容器样式 */
 .table-container {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 10px;
+  width: 100%;           /* 宽度100% */
+  border-collapse: collapse; /* 边框合并 */
+  margin-top: 10px;      /* 上边距10px */
 }
 
+/* 表格样式 */
 table {
-  width: 100%;
-  border-collapse: collapse;
-  background-color: white;
+  width: 100%;           /* 宽度100% */
+  border-collapse: collapse; /* 边框合并 */
+  background-color: white;   /* 白色背景 */
 }
 
+/* 表格单元格样式 */
 th,
 td {
-  padding: 12px;
-  text-align: left;
-  border-bottom: 1px solid #ddd;
+  padding: 12px;         /* 内边距 */
+  text-align: left;      /* 文字左对齐 */
+  border-bottom: 1px solid #ddd; /* 底部边框 */
 }
 
+/* 表头样式 */
 th {
-  background-color: #f2f2f2;
-  font-weight: normal;
-  color: #333;
+  background-color: #f2f2f2; /* 背景色 */
+  font-weight: normal;   /* 正常字体粗细 */
+  color: #333;           /* 字体颜色 */
 }
 
+/* 表格行悬停效果 */
 tr:hover {
-  background-color: #f9f9f9;
+  background-color: #f9f9f9; /* 悬停背景色 */
 }
 </style>
diff --git a/src/components/Tabs/TabNavigation.vue b/src/components/Tabs/TabNavigation.vue
index 4536c41..c8dc6f1 100644
--- a/src/components/Tabs/TabNavigation.vue
+++ b/src/components/Tabs/TabNavigation.vue
@@ -1,5 +1,7 @@
 <template>
+  <!-- 标签页导航容器 -->
   <div class="tabs">
+    <!-- 用户数据标签按钮 -->
     <button
         class="tab-btn"
         :class="{ active: $route.path === '/users' }"
@@ -7,6 +9,8 @@
     >
       用户数据
     </button>
+
+    <!-- 错题统计标签按钮 -->
     <button
         class="tab-btn"
         :class="{ active: $route.path === '/wrong-questions' }"
@@ -14,6 +18,8 @@
     >
       错题统计
     </button>
+
+    <!-- 题库管理标签按钮 -->
     <button
         class="tab-btn"
         :class="{ active: $route.path === '/questions' }"
@@ -26,7 +32,7 @@
 
 <script>
 export default {
+  // 组件名称：标签导航
   name: 'TabNavigation'
-  // 移除 props，因为不再需要 activeTab
 }
 </script>
diff --git a/src/main.js b/src/main.js
index 51ae644..7c95e11 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,18 @@
+// 导入Vue框架
 import Vue from 'vue'
+// 导入根组件App.vue
 import App from './App.vue'
+// 导入路由配置
 import router from "@/router";
+
+// 关闭生产环境提示
 Vue.config.productionTip = false
 
+// 创建Vue实例
 new Vue({
+    // 注入路由配置
     router,
-  render: h => h(App),
+    // 渲染函数，将App组件渲染到页面
+    render: h => h(App),
+    // 挂载到id为app的DOM元素上
 }).$mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index ce9ce98..85bb07c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,37 +1,46 @@
+// 导入Vue框架
 import Vue from 'vue'
+// 导入Vue Router插件
 import VueRouter from 'vue-router'
+// 导入题库管理页面组件
 import QuestionManage from '@/views/QuestionManage.vue'
+// 导入用户统计数据页面组件
 import UserStatistics from '@/views/UserStatistics.vue'
+// 导入错题统计页面组件
 import WrongQuestion from '@/views/WrongQuestion.vue'
 
+// 在Vue中使用VueRouter插件
 Vue.use(VueRouter)
 
+// 定义路由配置数组
 const routes = [
     {
-        path: '/',
-        redirect: '/questions'
+        path: '/',                    // 根路径
+        redirect: '/questions'        // 重定向到题目管理页面
     },
     {
-        path: '/questions',
-        name: 'QuestionManage',
-        component: QuestionManage
+        path: '/questions',           // 题库管理路径
+        name: 'QuestionManage',       // 路由名称
+        component: QuestionManage     // 对应的组件
     },
     {
-        path: '/users',
-        name: 'UserStatistics',
-        component: UserStatistics
+        path: '/users',               // 用户统计数据路径
+        name: 'UserStatistics',       // 路由名称
+        component: UserStatistics     // 对应的组件
     },
     {
-        path: '/wrong-questions',
-        name: 'WrongQuestion',
-        component: WrongQuestion
+        path: '/wrong-questions',     // 错题统计路径
+        name: 'WrongQuestion',        // 路由名称
+        component: WrongQuestion      // 对应的组件
     }
 ]
 
+// 创建VueRouter实例
 const router = new VueRouter({
-    mode: 'history',
-    base: process.env.BASE_URL,
-    routes
+    mode: 'history',                  // 使用HTML5 History模式
+    base: process.env.BASE_URL,       // 设置应用的基路径
+    routes                            // 路由配置
 })
 
+// 导出路由器实例供main.js使用
 export default router
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/QuestionManage.vue b/src/views/QuestionManage.vue
index 33510a3..a4749e2 100644
--- a/src/views/QuestionManage.vue
+++ b/src/views/QuestionManage.vue
@@ -1,16 +1,23 @@
 <template>
+  <!-- 题库管理页面容器 -->
   <div class="question-management">
+    <!-- 题目搜索组件 -->
     <QuestionSearch />
+    <!-- 题目表格组件 -->
     <QuestionTable />
   </div>
 </template>
 
 <script>
+// 导入题目搜索组件
 import QuestionSearch from '@/components/Question/QuestionSearch.vue'
+// 导入题目表格组件
 import QuestionTable from '@/components/Question/QuestionTable.vue'
 
 export default {
+  // 组件名称：题库管理
   name: 'QuestionManage',
+  // 注册子组件
   components: {
     QuestionSearch,
     QuestionTable
diff --git a/src/views/UserStatistics.vue b/src/views/UserStatistics.vue
index 4147ec1..2668f73 100644
--- a/src/views/UserStatistics.vue
+++ b/src/views/UserStatistics.vue
@@ -1,18 +1,62 @@
 <template>
+  <!-- 用户统计数据页面容器 -->
   <div class="user-statistics">
-    <p>用户统计数据模块</p>
-    <p>当前模块内容暂未开发</p>
+    <!-- 用户统计数据搜索组件 -->
+    <UserStatisticsSearch />
+    <!-- 用户统计数据表格组件，传递用户数据 -->
+    <UserStatisticsTable :users="userStatistics" />
   </div>
 </template>
 
 <script>
+// 导入用户统计数据搜索组件
+import UserStatisticsSearch from '@/components/UserStatistics/UserStatisticsSearch.vue'
+// 导入用户统计数据表格组件
+import UserStatisticsTable from '@/components/UserStatistics/UserStatisticsTable.vue'
+
 export default {
-  name: 'UserStatistics'
+  // 组件名称：用户统计数据
+  name: 'UserStatistics',
+  // 注册子组件
+  components: {
+    UserStatisticsSearch,
+    UserStatisticsTable
+  },
+  // 组件数据
+  data() {
+    return {
+      // 用户统计数据数组
+      userStatistics: [
+        {
+          id: 1,                    // 用户ID
+          userName: '张三',          // 用户名
+          role: '学员',             // 用户角色
+          jingwangId: '90048184',   // 京网ID
+          questionType: '股票知识',  // 题目类型
+          score: 50,                // 分数
+          submitTime: '2025-11-04 10:00:00' // 提交时间
+        }
+      ]
+    }
+  },
+  // 组件方法
+  methods: {
+    // 获取用户统计数据的方法
+    fetchUserStatistics() {
+      // 实现从后端获取数据的逻辑
+    }
+  },
+  // 生命周期钩子：组件挂载完成后执行
+  mounted() {
+    // 页面加载时获取数据
+    this.fetchUserStatistics()
+  }
 }
 </script>
 
 <style scoped>
+/* 用户统计数据页面样式 */
 .user-statistics {
-  padding: 20px;
+  padding: 20px;  /* 内边距20px */
 }
 </style>