前端增加题目中心

vue2/vue/src/components/Teacher/Aside.vue

@@ -26,6 +26,11 @@
       <span>分数中心</span>
     </el-menu-item>
 
+    <el-menu-item :index="`/teacher/questions?userId=${userId}`">
+      <i class="el-icon-s-data"></i>
+      <span>题目中心</span>
+    </el-menu-item>
+
     <el-menu-item :index="`/teacher/correct?userId=${userId}`">
       <i class="el-icon-edit"></i>
       <span>批改中心</span>

vue2/vue/src/router/index.js

@@ -8,6 +8,12 @@ import store from '../store';  // 引入 Vuex store
 Vue.use(VueRouter);
 
 const routes = [
+  {
+    path:'/teacher/questions',
+    name:'Questions',
+    component: () => import(/* webpackChunkName: "about" */ '../views/Teacher/Questions.vue'),
+    meta: { requiresAuth: true }
+  },
   {
     path:'/student/message',
     name:'Message',

vue2/vue/src/views/Teacher/Questions.vue

@@ -0,0 +1,149 @@
+<template>
+  <el-container style="min-height: 100vh">
+    <!-- 左侧导航 -->
+    <el-aside :width="sideWidth + 'px'" style="background-color: #f4f6f9; box-shadow: 2px 0 6px rgba(0, 21, 41, 0.1)">
+      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
+    </el-aside>
+    <!-- 右侧内容 -->
+    <el-container>
+      <!-- 顶部导航 -->
+      <el-header style="border-bottom: 1px solid #e0e0e0; background-color: #ffffff; padding: 10px;">
+        <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" />
+      </el-header>
+      <el-main>
+        <div class="question-add-container">
+          <!-- 输入框用于添加题目，设置合适的宽度和样式 -->
+          <el-input
+              placeholder="请输入题目内容"
+              v-model="newQuestion"
+              clearable
+              style="width: 60%; margin-right: 10px;"
+          />
+          <el-button
+              type="primary"
+              @click="addQuestion"
+              icon="el-icon-plus"
+              :loading="isAddingQuestion"
+          >
+            添加题目
+          </el-button>
+        </div>
+        <el-collapse
+            v-model="activeNames"
+            class="question-collapse"
+            accordion
+            :expand-icon="false"
+        >
+          <el-collapse-item
+              v-for="(question, index) in questionList"
+              :key="index"
+              :name="index.toString()"
+              class="question-item"
+          >
+            <template #title>
+              <div class="question-title-container">
+                <span class="question-title">{{ question.title }}</span>
+                <el-button
+                    type="danger"
+                    icon="el-icon-delete"
+                    circle
+                    @click="deleteQuestion(index)"
+                />
+              </div>
+            </template>
+            <div class="question-content">{{ question.content }}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import Header from "@/components/Teacher/Header.vue";
+import Aside from "@/components/Teacher/Aside.vue";
+
+export default {
+  name: "Questions",
+  components: {Aside, Header},
+  data() {
+    return {
+      collapseBtnClass: "el-icon-s-fold",
+      isCollapse: false,
+      sideWidth: 200,
+      logoTextShow: true,
+      questionList: [], // 存储题目列表数据，每个元素是包含title和content属性的对象
+      newQuestion: "", // 用于绑定输入框中输入的新题目内容
+      activeNames: [], // 控制折叠面板展开状态
+      isAddingQuestion: false // 标记是否正在添加题目，用于按钮加载状态显示
+    };
+  },
+  methods: {
+    collapse() {
+      this.isCollapse =!this.isCollapse;
+      if (this.isCollapse) {
+        this.sideWidth = 64;
+        this.collapseBtnClass = "el-icon-s-unfold";
+        this.logoTextShow = false;
+      } else {
+        this.sideWidth = 200;
+        this.collapseBtnClass = "el-icon-s-fold";
+        this.logoTextShow = true;
+      }
+    },
+    addQuestion() {
+      this.isAddingQuestion = true; // 显示按钮加载状态
+      setTimeout(() => {
+        if (this.newQuestion.trim() !== "") {
+          this.questionList.push({
+            title: `题目${this.questionList.length + 1}`,
+            content: this.newQuestion
+          });
+          this.newQuestion = ""; // 清空输入框
+        }
+        this.isAddingQuestion = false; // 隐藏按钮加载状态
+      }, 500);
+    },
+    deleteQuestion(index) {
+      this.questionList.splice(index, 1);
+    }
+  },
+  created() {
+    this.userId = this.$route.query.userId;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.question-add-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.question-collapse {
+  border: none;
+}
+
+.question-item {
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.question-title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
+.question-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.question-content {
+  padding: 10px;
+}
+</style>