新增路由与后台页面

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
-        "vue": "^2.6.14"
+        "vue": "^2.6.14",
+        "vue-router": "^3.6.5"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -10524,6 +10525,11 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -11651,7 +11657,8 @@
       "version": "7.21.0-placeholder-for-preset-env.2",
       "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
       "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@babel/plugin-syntax-decorators": {
       "version": "7.27.1",
@@ -13026,7 +13033,8 @@
       "version": "5.0.9",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.9.tgz",
       "integrity": "sha512-AQhgGNFVd4Pu2crvS0a+hRckgrJv07gzOASdbLd3I72wkT43dd01MLRp8IBRRsu92t3MXenW86AZUCbQBz3//A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "5.0.9",
@@ -13470,13 +13478,15 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
       "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "8.3.4",
@@ -13538,7 +13548,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-colors": {
       "version": "4.1.3",
@@ -14307,7 +14318,8 @@
       "version": "6.4.1",
       "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
       "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-loader": {
       "version": "6.11.0",
@@ -14475,7 +14487,8 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -15980,7 +15993,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -17275,25 +17289,29 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -17380,7 +17398,8 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
       "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.2.0",
@@ -17439,7 +17458,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -18951,6 +18971,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -19272,7 +19297,8 @@
           "version": "8.18.3",
           "resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.3.tgz",
           "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -19374,7 +19400,8 @@
       "version": "7.5.10",
       "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.10.tgz",
       "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",

package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^2.6.14"
+    "vue": "^2.6.14",
+    "vue-router": "^3.6.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -1,28 +1,212 @@
+<!--全局样式-->
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <Header />
+    <div class="container">
+      <Sidebar />
+      <div class="content">
+        <div class="title">测评系统后台</div>
+        <TabNavigation :active-tab="activeTab" @update:activeTab="activeTab = $event" />
+
+        <!-- 内容区域 -->
+        <div v-if="activeTab === 'question'" class="question-management">
+          <QuestionSearch />
+          <QuestionTable />
+        </div>
+
+        <!-- 其他模块占位 -->
+        <div v-else class="placeholder">
+          <p>当前模块内容暂未开发</p>
+        </div>
+
+        <div class="footer-btn">
+          <button class="btn-red">应用</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import Header from './components/Layout/Header.vue'
+import Sidebar from './components/Layout/Sidebar.vue'
+import TabNavigation from './components/Tabs/TabNavigation.vue'
+import QuestionSearch from './components/Question/QuestionSearch.vue'
+import QuestionTable from './components/Question/QuestionTable.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    Header,
+    Sidebar,
+    TabNavigation,
+    QuestionSearch,
+    QuestionTable
+  },
+  data() {
+    return {
+      activeTab: 'question'
+    }
   }
 }
 </script>
+<style>/* 保持原有的全局样式 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Arial', sans-serif;
+  background-color: #f5f5f5;
+}
 
-<style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.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);
+}
+
+.logo {
+  color: #e74c3c;
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.container {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.content {
+  flex: 1;
+  padding: 20px;
+  background-color: white;
+  overflow-y: auto;
+}
+
+.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;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: opacity 0.3s;
+}
+
+.tab-btn:hover {
+  background-color: #c0392b;
+}
+
+.tab-btn.active {
+  opacity: 0.5;
+}
+
+.search-area {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  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;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.btn-group {
+  display: flex;
+  gap: 10px;
+}
+
+.btn-red {
+  padding: 8px 16px;
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-red.small {
+  padding: 4px 10px;
+  font-size: 12px;
+}
+
+.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;
+}
+
+.footer-btn {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
 }
 </style>

src/components/Layout/Header.vue

@@ -0,0 +1,31 @@
+<!--头部组件-->
+<template>
+  <div class="header">
+    <div class="logo">Homily Link</div>
+  </div>
+</template>
+
+<script>
+export default {
+  // 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);
+}
+
+.logo {
+  color: #e74c3c;
+  font-weight: bold;
+  font-size: 18px;
+}
+</style>

src/components/Layout/Sidebar.vue

@@ -0,0 +1,50 @@
+<!--侧边栏组件-->
+<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>
+</template>
+
+<script>
+export default {
+  name: 'SideBar'
+}
+</script>
+
+<style scoped>
+.sidebar {
+  width: 200px;
+  background-color: #f5f5f5;
+  height: 100%;
+  border-right: 1px solid #ddd;
+}
+
+.sidebar-menu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.sidebar-menu li {
+  padding: 15px 20px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.sidebar-menu li:hover {
+  background-color: #e0e0e0;
+}
+
+.sidebar-menu li.active {
+  background-color: #d1ecf1;
+  color: #007bff;
+}
+</style>

src/components/Question/QuestionSearch.vue

@@ -0,0 +1,36 @@
+<!--搜索区域-->
+<template>
+  <div class="search-area">
+    <div class="search-item">
+      <label>题目类型</label>
+      <select>
+        <option>股票知识</option>
+        <option>基金知识</option>
+        <option>投资策略</option>
+      </select>
+    </div>
+    <div class="search-item">
+      <label>题干查找</label>
+      <input type="text" placeholder="请输入题干关键词" />
+    </div>
+    <div class="search-item">
+      <label>课程推荐</label>
+      <select>
+        <option>量能擒牛</option>
+        <option>趋势交易</option>
+        <option>基本面分析</option>
+      </select>
+    </div>
+    <div class="btn-group">
+      <button class="btn-red">查找</button>
+      <button class="btn-red">新增题目</button>
+      <button class="btn-red">Excel导出</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QuestionSearch'
+}
+</script>

src/components/Question/QuestionTable.vue

@@ -0,0 +1,69 @@
+<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>
+        <td>1</td>
+        <td>以下哪项不是股票的基本特征？</td>
+        <td>股票知识</td>
+        <td>50</td>
+        <td>50%</td>
+        <td>量能擒牛</td>
+        <td>
+          <button class="btn-red small">查看</button>
+          <button class="btn-red small">修改</button>
+          <button class="btn-red small">删除</button>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QuestionTable'
+}
+</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/components/Tabs/TabNavigation.vue

@@ -0,0 +1,38 @@
+<!--标签页导航-->
+<template>
+  <div class="tabs">
+    <button
+        class="tab-btn"
+        :class="{ active: activeTab === 'user' }"
+        @click="$emit('update:activeTab', 'user')"
+    >
+      用户数据
+    </button>
+    <button
+        class="tab-btn"
+        :class="{ active: activeTab === 'wrong' }"
+        @click="$emit('update:activeTab', 'wrong')"
+    >
+      错题统计
+    </button>
+    <button
+        class="tab-btn"
+        :class="{ active: activeTab === 'question' }"
+        @click="$emit('update:activeTab', 'question')"
+    >
+      题库管理
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TabNavigation',
+  props: {
+    activeTab: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

src/router/index.js

@@ -0,0 +1,37 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import QuestionManage from '@/views/QuestionManage.vue'
+import UserStatistics from '@/views/UserStatistics.vue'
+import WrongQuestion from '@/views/WrongQuestion.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/questions'
+  },
+  {
+    path: '/questions',
+    name: 'QuestionManage',
+    component: QuestionManage
+  },
+  {
+    path: '/users',
+    name: 'UserStatistics',
+    component: UserStatistics
+  },
+  {
+    path: '/wrong-questions',
+    name: 'WrongQuestion',
+    component: WrongQuestion
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router