OL-LearnPlatform-Frontend/src/views/teacher/course/CourseEditor.vue

<template>
  <div class="course-editor">
    <!-- 左侧导航菜单 -->
    <div class="sidebar" v-if="!hideSidebar">
      <router-link :to="`/teacher/course-editor/${courseId}/courseware`" class="menu-item"
        :class="{ active: $route.path.includes('courseware') }">
        <img :src="$route.path.includes('courseware') ? '/images/teacher/课件-选中.png' : '/images/teacher/课件.png'"
          alt="资源库" />
        <span>资源库</span>
      </router-link>
      <router-link :to="`/teacher/course-editor/${courseId}/chapters`" class="menu-item"
        :class="{ active: $route.path.includes('chapters') }">
        <img :src="$route.path.includes('chapters') ? '/images/teacher/章节-选中.png' : '/images/teacher/章节.png'"
          alt="章节" />
        <span>章节</span>
      </router-link>
      <!-- 作业二级导航 -->
      <div class="menu-group">
        <div class="menu-header" @click="toggleHomework">
          <img src="/images/teacher/作业.png" alt="作业" />
          <span>作业</span>
          <i class="n-base-icon" :class="{ expanded: homeworkExpanded }">
            <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M5.64645 3.14645C5.45118 3.34171 5.45118 3.65829 5.64645 3.85355L9.79289 8L5.64645 12.1464C5.45118 12.3417 5.45118 12.6583 5.64645 12.8536C5.84171 13.0488 6.15829 13.0488 6.35355 12.8536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645Z"
                fill="#C2C2C2" />
            </svg>
          </i>
        </div>
        <div class="submenu" v-show="homeworkExpanded">
          <router-link :to="`/teacher/course-editor/${courseId}/homework/library`" class="submenu-item"
            :class="{ active: $route.path.includes('/homework/library') }">
            <span>作业库</span>
          </router-link>
          <router-link :to="`/teacher/course-editor/${courseId}/homework/review`" class="submenu-item"
            :class="{ active: $route.path.includes('/homework/review') }">
            <span>批阅作业</span>
          </router-link>
        </div>
      </div>

      <!-- 练考通二级导航 -->
      <div class="menu-group">
        <div class="menu-header" @click="togglePractice">
          <img src="/images/teacher/练考通.png" alt="练考通" />
          <span>练考通</span>
          <i class="n-base-icon" :class="{ expanded: practiceExpanded }">
            <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M5.64645 3.14645C5.45118 3.34171 5.45118 3.65829 5.64645 3.85355L9.79289 8L5.64645 12.1464C5.45118 12.3417 5.45118 12.6583 5.64645 12.8536C5.84171 13.0488 6.15829 13.0488 6.35355 12.8536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645Z"
                fill="#C2C2C2" />
            </svg>
          </i>
        </div>
        <div class="submenu" v-show="practiceExpanded">
          <router-link :to="`/teacher/course-editor/${courseId}/practice/exam`" class="submenu-item"
            :class="{ active: $route.path.includes('/practice/exam') }">
            <span>试卷</span>
          </router-link>
          <router-link :to="`/teacher/course-editor/${courseId}/practice/review`" class="submenu-item"
            :class="{ active: $route.path.includes('/practice/review') }">
            <span>阅卷中心</span>
          </router-link>
        </div>
      </div>
      <router-link :to="`/teacher/course-editor/${courseId}/question-bank`" class="menu-item"
        :class="{ active: $route.path.includes('question-bank') }">
        <img :src="$route.path.includes('question-bank') ? '/images/teacher/题库-选中.png' : '/images/teacher/题库.png'"
          alt="题库" />
        <span>题库</span>
      </router-link>
      <router-link :to="`/teacher/course-editor/${courseId}/certificate`" class="menu-item"
        :class="{ active: $route.path.includes('certificate') }">
        <img :src="$route.path.includes('certificate') ? '/images/teacher/证书-选中.png' : '/images/teacher/证书.png'"
          alt="证书" />
        <span>证书</span>
      </router-link>
      <router-link :to="`/teacher/course-editor/${courseId}/discussion`" class="menu-item"
        :class="{ active: $route.path.includes('discussion') }">
        <img :src="$route.path.includes('discussion') ? '/images/teacher/讨论-选中.png' : '/images/teacher/讨论.png'"
          alt="讨论" />
        <span>讨论</span>
      </router-link>
      <router-link :to="`/teacher/course-editor/${courseId}/statistics`" class="menu-item"
        :class="{ active: $route.path.includes('statistics') }">
        <img :src="$route.path.includes('statistics') ? '/images/teacher/统计-选中.png' : '/images/teacher/统计.png'"
          alt="统计" />
        <span>统计</span>
      </router-link>
      <router-link :to="`/teacher/course-editor/${courseId}/notification`" class="menu-item"
        :class="{ active: $route.path.includes('notification') }">
        <img :src="$route.path.includes('notification') ? '/images/teacher/通知-选中.png' : '/images/teacher/通知.png'"
          alt="通知" />
        <span>通知</span>
      </router-link>
      <router-link :to="`/teacher/course-editor/${courseId}/management`" class="menu-item"
        :class="{ active: $route.path.includes('management') }">
        <img :src="$route.path.includes('management') ? '/images/teacher/管理-选中.png' : '/images/teacher/管理.png'"
          alt="管理" />
        <span>管理</span>
      </router-link>
    </div>

    <!-- 右侧内容区域 -->
    <div class="content-area" :class="{ 'full-width': hideSidebar }">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, computed } from 'vue'

const route = useRoute()

// 获取课程ID
const courseId = route.params.id

// 作业菜单展开状态
const homeworkExpanded = ref(false)

// 切换作业菜单展开/收起
const toggleHomework = () => {
  homeworkExpanded.value = !homeworkExpanded.value
}

// 练考通菜单展开状态
const practiceExpanded = ref(false)

// 切换练考通菜单展开/收起
const togglePractice = () => {
  practiceExpanded.value = !practiceExpanded.value
}

// 判断是否隐藏左侧导航
const hideSidebar = computed(() => {
  const currentPath = route.path
  // 定义需要隐藏侧边栏的页面路径
  const hideSidebarPaths = [
    'add-question',      // 新增试题页面
    'edit-question',     // 编辑试题页面（预留）
    'question-preview',  // 题目预览页面（预留）
    'bulk-import',       // 批量导入页面（预留）
    'question-analysis'  // 题目分析页面（预留）
  ]

  // 检查当前路径是否包含需要隐藏侧边栏的路径
  return hideSidebarPaths.some(path => currentPath.includes(path))
})
</script>

<style scoped>
.course-editor {
  display: flex;
  margin-top: 5px;
  height: 100vh;
  background: #f5f5f5;
}

/* 左侧导航 */
.sidebar {
  width: 220px;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  padding: 20px 15px;
  margin-right: 5px;
}

/* 右侧内容区域 */
.content-area {
  flex: 1;
  overflow: auto;
}

/* 全宽显示（隐藏侧边栏的页面） */
.content-area.full-width {
  width: 100%;
  margin-left: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  color: #666;
  border-radius: 5px;
}

.menu-item:hover {
  background: #f5f5f5;
}

.menu-item.active {
  background: #F5F8FB;
  color: #0288D1;
}

.menu-item.active span {
  color: #0288D1;
}

.menu-item img {
  margin-left: 30px;
  margin-top: 1px;
  width: 16px;
  height: 16px;
  margin-right: 14px;
}

.menu-item span {
  font-size: 16px;
  color: #666;
}

/* 作业二级导航样式 */
.menu-group {
  margin-bottom: 5px;
}

.menu-header {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  font-size: 16px;
  color: #666;
  border-radius: 5px;
}

.menu-header:hover {
  background: #f5f5f5;
}

.menu-header img {
  margin-left: 30px;
  margin-top: 1px;
  width: 16px;
  height: 16px;
  margin-right: 14px;
}

.menu-header span {
  font-size: 16px;
  color: #666;
}

.menu-header .n-base-icon {
  margin-left: auto;
  transition: transform 0.3s ease;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-header .n-base-icon svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.menu-header .n-base-icon.expanded svg {
  transform: rotate(90deg);
}

.submenu {
  margin-left: 30px;
  margin-bottom: 5px;
}

.submenu-item {
  display: block;
  padding: 8px 15px;
  margin-bottom: 3px;
  text-decoration: none;
  color: #666;
  font-size: 14px;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.submenu-item:hover {
  background: #f0f8ff;
  color: #0288D1;
}

.submenu-item.active {
  background: #e6f7ff;
  color: #0288D1;
}
</style>