chore: update

.eslintrc.cjs

@@ -10,7 +10,9 @@ module.exports = {
     './.eslintrc-auto-import.json'
   ],
   rules: {
+    'vue/no-mutating-props': 'off',
     'vue/multi-word-component-names': 'off',
+    'vue/no-setup-props-destructure': 'off',
     '@typescript-eslint/no-explicit-any': 'off'
   }
 }

package.json

@@ -3,12 +3,11 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite --mode dev",
-    "build": "run-p type-check build-only --mode prod && npm run deploy",
-    "build:test": "run-p type-check build-only --mode test",
-    "build:pre": "run-p type-check build-only --mode pre",
+    "build": "vue-tsc --noEmit && vite build --mode prod && npm run deploy",
+    "build:test": "vue-tsc --noEmit && vite build --mode test",
+    "build:pre": "vue-tsc --noEmit && vite build --mode pre",
     "preview": "vite preview --port 4173",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit",
+    "typecheck": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "deploy": "node ./deploy.js"
   },
@@ -42,7 +41,6 @@
     "ali-oss": "^6.17.1",
     "eslint": "^8.5.0",
     "eslint-plugin-vue": "^9.3.0",
-    "npm-run-all": "^4.1.5",
     "sass": "^1.54.0",
     "typescript": "~4.7.4",
     "unplugin-auto-import": "^0.10.1",

src/api/base.ts

@@ -2,7 +2,7 @@ import httpRequest from '@/utils/axios'
 
 // 获取用户信息
 export function getUser() {
-  return httpRequest.get('/api/resource/v1/util/info')
+  return httpRequest.get('/api/usercenter/v2/frontend/user/get-user-info')
 }
 
 // 退出登录

src/components/layout/Aside.vue

@@ -43,7 +43,7 @@ function handleClick(path: string) {
     <nav class="nav">
       <el-menu collapse :default-active="defaultActive" class="app-menu">
         <template v-for="item in menus" :key="item.path">
-          <el-sub-menu :index="item.path" v-permission="item.tag" v-if="item.children">
+          <el-sub-menu :index="item.path" v-if="item.children">
             <template #title>
               <el-icon><component :is="item.icon"></component></el-icon>{{ item.name }}
             </template>
@@ -51,13 +51,12 @@ function handleClick(path: string) {
               :index="subitem.path"
               v-for="subitem in item.children"
               :key="subitem.path"
-              v-permission="subitem.tag"
               @click="handleClick(subitem.path)"
             >
               {{ subitem.name }}
             </el-menu-item>
           </el-sub-menu>
-          <el-menu-item :index="item.path" v-permission="item.tag" @click="handleClick(item.path)" v-else>
+          <el-menu-item :index="item.path" @click="handleClick(item.path)" v-else>
             <el-icon><component :is="item.icon"></component></el-icon>{{ item.name }}
           </el-menu-item>
         </template>

src/components/layout/Header.vue

@@ -33,7 +33,7 @@ const logout = async () => {
                 <img :src="userInfo.avatar || 'https://webapp-pub.ezijing.com/website/base/images/avatar.svg'" />
               </div>
               <div class="app-header-user-main">
-                <h3>{{ userInfo.name }}</h3>
+                <h3>{{ userStore.name }}</h3>
                 <p>{{ userInfo.email || userInfo.mobile }}</p>
               </div>
               <div class="app-header-user-buttons">

src/main.ts

@@ -13,13 +13,11 @@ import AppList from '@/components/base/AppList.vue'
 
 import modules from './modules'
 
-import { permissionDirective } from '@/utils/permission'
 import { useMapStore } from '@/stores/map'
 
 const app = createApp(App)
 // 注册公共组件
 app.component('AppCard', AppCard).component('AppList', AppList)
-app.directive('permission', permissionDirective)
 // 注册模块
 modules({ router })
 

src/modules/course/api.ts

@@ -103,3 +103,40 @@ export function uploadVideoRecords(data: {
 }) {
   return httpRequest.post('/api/saas/api/v1/course/video/upload-records', data)
 }
+
+/**
+ *
+ * 考试、测验start
+ */
+
+// 获取试卷详情
+export function getPaper(data: { course_id: string; semester_id: string; paper_id: string; type: number }) {
+  return httpRequest.post('/api/saas/api/v1/question-bank/paper-question/detail', data)
+}
+// 缓存试卷
+export function cachePaper(data: {
+  course_id: string
+  semester_id: string
+  paper_id: string
+  type: number
+  question: any
+}) {
+  return httpRequest.post('/api/saas/api/v1/question-bank/paper-question/cache', data)
+}
+// 提交试卷
+export function submitPaper(data: {
+  course_id: string
+  semester_id: string
+  paper_id: string
+  type: number
+  question: any
+}) {
+  return httpRequest.post('/api/saas/api/v1/question-bank/paper/hand', data, {
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+
+/**
+ *
+ * 考试、测验end
+ */

src/modules/course/components/CourseExamCard.vue

+<script setup lang="ts">
+import type { PaperQuestionType } from '@/types'
+import { ElMessage } from 'element-plus'
+import { ArrowLeftBold } from '@element-plus/icons-vue'
+import { cachePaper, submitPaper } from '../api'
+
+import CourseExamQuestion from './CourseExamQuestion.vue'
+import CourseExamQuestionNumbers from './CourseExamQuestionNumbers.vue'
+
+interface Props {
+  status: number
+  title?: string
+  submitButtonText?: string
+}
+const props = withDefaults(defineProps<Props>(), { title: '考试', submitButtonText: '交卷' })
+
+const emit = defineEmits<{
+  (e: 'update'): void
+}>()
+
+const route = useRoute()
+const courseId = $ref(route.query.course_id as string)
+const semesterId = $ref(route.query.semester_id as string)
+const paperId = $ref(route.query.paper_id as string)
+const type = $ref(parseInt(route.query.type as string))
+
+// 所有试题
+const questionList = $(inject<PaperQuestionType[]>('questionList'))
+
+// 试题索引
+let questionIndex = $ref<number>(0)
+provide('questionIndex', $$(questionIndex))
+// 试题数量
+const questionLength = $computed(() => {
+  return questionList.length
+})
+// 当前试题
+const currentQuestion = $computed(() => {
+  return questionList[questionIndex] || {}
+})
+// 提交中
+let submitLoading = $ref<boolean>(false)
+// 是否禁用
+const disabled = $computed(() => {
+  return props.status !== 1 || submitLoading
+})
+provide('disabled', $$(disabled))
+
+// 上一题
+function handlePrev() {
+  if (questionIndex < 1) return
+  questionIndex--
+}
+// 下一题
+function handleNext() {
+  if (questionIndex === questionLength - 1) return
+  questionIndex++
+}
+// 提交
+function handleSubmit() {
+  submitLoading = true
+  clearInterval(timer)
+  submitPaper({
+    course_id: courseId,
+    semester_id: semesterId,
+    paper_id: paperId,
+    type,
+    question: JSON.stringify(genSubmitQuestion(questionList))
+  }).then(() => {
+    ElMessage.success('提交成功')
+    emit('update')
+  })
+}
+// 自动提交
+function handleAutoSubmit() {
+  if (disabled) return
+  cachePaper({
+    course_id: courseId,
+    semester_id: semesterId,
+    paper_id: paperId,
+    type,
+    question: JSON.stringify(genSubmitQuestion(questionList))
+  })
+}
+const timer = setInterval(handleAutoSubmit, 5000)
+onUnmounted(() => {
+  clearInterval(timer)
+})
+// 生成提交试卷的数据
+function genSubmitQuestion(questionList: PaperQuestionType[]) {
+  return questionList.map(question => {
+    const userAnswer = question.user_answer ? question.user_answer.split(',') : []
+    const options = question.question_options.map(item => {
+      return { ...item, user_checked: userAnswer.includes(item.id) }
+    })
+    if (question.children && question.children.length) {
+      question.children = genSubmitQuestion(question.children)
+    }
+    return { ...question, question_options: options }
+  })
+}
+</script>
+
+<template>
+  <div class="course-exam-card">
+    <div class="course-exam-card-hd">
+      <router-link :to="`/course/view?course_id=${courseId}&semester_id=${semesterId}`">
+        <el-button :icon="ArrowLeftBold" circle></el-button>
+      </router-link>
+      <div class="title">{{ title }}</div>
+    </div>
+    <div class="course-exam-card-bd">
+      <div class="course-exam-left">
+        <div class="course-exam-scroll">
+          <CourseExamQuestion :question="currentQuestion" :index="questionIndex + 1">
+            <template #index>{{ questionIndex + 1 }}/{{ questionLength }}</template>
+          </CourseExamQuestion>
+        </div>
+        <div class="course-exam-buttons">
+          <el-button size="large" :disabled="questionIndex === 0" @click="handlePrev">上一题</el-button>
+          <el-button size="large" :disabled="questionIndex === questionLength - 1" @click="handleNext">
+            下一题
+          </el-button>
+        </div>
+      </div>
+      <div class="course-exam-right">
+        <div class="course-exam-scroll">
+          <CourseExamQuestionNumbers :index="questionIndex" :status="1" />
+        </div>
+        <div class="course-exam-buttons">
+          <el-button
+            size="large"
+            type="primary"
+            auto-insert-space
+            :disabled="disabled"
+            @click="handleSubmit"
+            style="width: 100%"
+          >
+            {{ submitButtonText }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.course-exam-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100vh - 105px);
+  min-height: 600px;
+  background-color: #fff;
+  overflow: hidden;
+}
+.course-exam-card-hd {
+  border-bottom: 1px solid #ccc;
+  height: 80px;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  padding-left: 40px;
+  .title {
+    padding-left: 20px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #222222;
+    line-height: 80px;
+  }
+  .right {
+    width: 260px;
+    margin-left: auto;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .count {
+      font-size: 18px;
+      font-weight: bold;
+      color: #222222;
+    }
+  }
+}
+.course-exam-card-bd {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+.course-exam-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  .course-exam-scroll {
+    padding: 0 40px;
+  }
+  .course-exam-buttons {
+    padding: 20px 40px;
+    border-top: 1px solid #ccc;
+  }
+}
+.course-exam-right {
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #ccc;
+  position: relative;
+  width: 220px;
+  background: #fff;
+  padding: 0 20px;
+}
+.course-exam-scroll {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.course-exam-buttons {
+  padding: 20px 0;
+}
+</style>

src/modules/course/components/CourseExamQuestion.vue

+<script setup lang="ts">
+import type { PaperQuestionType } from '@/types'
+
+import CourseExamQuestionItem from './CourseExamQuestionItem.vue'
+import { questionType } from '@/utils/dictionary'
+
+interface Props {
+  index: number
+  question: PaperQuestionType
+}
+const props = defineProps<Props>()
+
+// 试题类型
+const questionTypeText = computed(() => {
+  return questionType[props.question.question_type] || props.question.question_type
+})
+</script>
+
+<template>
+  <div class="course-exam-question">
+    <div class="course-exam-question-hd">
+      <h4 class="course-exam-question-hd__title">{{ questionTypeText }}</h4>
+      <aside class="course-exam-question-hd__aside"><slot name="index"></slot></aside>
+    </div>
+    <div class="course-exam-question-bd">
+      <h2 class="course-exam-question-title" v-if="question.common_content" v-html="question.common_content"></h2>
+      <template v-if="question.children && question.children.length">
+        <CourseExamQuestionItem
+          v-for="(item, index) in question.children"
+          :question="item"
+          :index="index + 1"
+          :key="item.id"
+        />
+      </template>
+      <CourseExamQuestionItem :question="question" :index="index" v-else />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.course-exam-question {
+  position: relative;
+}
+.course-exam-question-hd {
+  padding-top: 20px;
+  display: flex;
+  align-items: center;
+  height: 45px;
+}
+.course-exam-question-hd__title {
+  flex: 1;
+  font-size: 18px;
+  color: #222;
+}
+.course-exam-question-hd__aside {
+  font-size: 18px;
+  color: #222;
+}
+.course-exam-question-title {
+  margin: 20px 0 30px;
+  font-size: 18px;
+  color: #222;
+  .num {
+    font-size: 32px;
+    font-weight: bold;
+    color: #222;
+    line-height: 45px;
+    margin-top: 5px;
+  }
+}
+</style>

src/modules/course/components/CourseExamQuestionItem.vue

+<script setup lang="ts">
+import type { PaperQuestionType } from '@/types'
+interface Props {
+  index: number
+  question: PaperQuestionType
+}
+const { question } = defineProps<Props>()
+
+const disabled = $ref<boolean>(inject('disabled'))
+
+// 处理后的options数据
+const currentOptions = computed(() => {
+  if (!question.question_options) {
+    return []
+  }
+  return question.question_options.map((item: any, index: number) => {
+    // 英文字母 + 名称
+    item.abc = A_Z[index]
+    item.abc_option = `${A_Z[index]}. ${item.option}`
+    // 提交时的选中状态
+    // item.checked = this.question.user_answer.includes(item.id)
+    // 处理正确的选中状态
+    // const hasChecked = Object.prototype.hasOwnProperty.call(item, 'isRight')
+    // const rightAnswer = this.question.question_answer || []
+    // if (!hasChecked && rightAnswer) {
+    //   item.isRight = Array.isArray(rightAnswer) ? rightAnswer.includes(item.id) : rightAnswer === item.id
+    // }
+    return item
+  })
+})
+
+// 26个英文字母
+const A_Z = $computed(() => {
+  const result = []
+  for (let i = 0; i < 26; i++) {
+    result.push(String.fromCharCode(65 + i))
+  }
+  return result
+})
+
+const questionType = computed(() => {
+  return question.child_question_type || question.question_type
+})
+
+const value = computed({
+  get() {
+    return question.user_answer
+  },
+  set(value) {
+    question.user_answer = value
+  }
+})
+const checkboxValues = computed({
+  get() {
+    return question.user_answer ? question.user_answer.split(',') : []
+  },
+  set(values) {
+    question.user_answer = values.join(',')
+  }
+})
+</script>
+
+<template>
+  <div class="question-item">
+    <div class="question-item-hd">
+      <div class="question-item-hd__num">{{ index }}.</div>
+      <div class="question-item-hd__title" v-html="question.question_content"></div>
+    </div>
+    <div class="question-item-bd">
+      <!-- 单选 -->
+      <template v-if="[1, 6].includes(questionType)">
+        <el-radio-group :disabled="disabled" v-model="value">
+          <div class="question-option-item" v-for="item in currentOptions" :key="item.id">
+            <el-radio :label="item.id">
+              <div class="question-option-item__text" v-html="item.abc_option"></div>
+            </el-radio>
+          </div>
+        </el-radio-group>
+      </template>
+      <!-- 多选 -->
+      <template v-if="questionType === 2">
+        <el-checkbox-group :disabled="disabled" v-model="checkboxValues">
+          <div class="question-option-item" v-for="item in currentOptions" :key="item.id">
+            <el-checkbox :label="item.id">
+              <div class="question-option-item__text" v-html="item.abc_option"></div>
+            </el-checkbox>
+          </div>
+        </el-checkbox-group>
+      </template>
+      <!-- 简答题 -->
+      <template v-if="questionType === 3">
+        <el-input
+          type="textarea"
+          placeholder="请输入答案内容"
+          :autosize="{ minRows: 4, maxRows: 6 }"
+          :disabled="disabled"
+          :maxlength="500"
+          :show-word-limit="true"
+          v-model="value"
+        ></el-input>
+      </template>
+    </div>
+    <!-- <div class="question-item-ft" v-if="hasResult">
+      <h3 class="question-item-ft__title">答案解析</h3>
+      <template v-if="questionType !== 3">
+        <div class="answer-item">
+          <div class="answer-item-label">正确答案：</div>
+          <div class="answer-item-content">{{ correctAnswerText }}</div>
+        </div>
+        <div class="answer-item">
+          <div class="answer-item-label">您的答案：</div>
+          <div class="answer-item-content">{{ submitAnswerText }}</div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="answer-item" v-if="question.comment">
+          <div class="answer-item-label">老师点评：</div>
+          <div class="answer-item-content">{{ question.comment }}</div>
+        </div>
+      </template>
+      <div class="answer-item" v-if="question.question_analysis">
+        <div class="answer-item-label">解析：</div>
+        <div class="answer-item-content" v-html="question.question_analysis"></div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.question-item {
+  margin-bottom: 40px;
+}
+.question-item-hd {
+  display: flex;
+}
+.question-item-hd__num {
+  font-size: 32px;
+  font-weight: bold;
+  color: #222;
+  line-height: 45px;
+  margin-top: 5px;
+}
+.question-item-hd__title {
+  margin-left: 5px;
+  padding-top: 18px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #222;
+  line-height: 25px;
+}
+.question-option-item {
+  margin-top: 20px;
+  width: 100%;
+}
+.question-option-item__text {
+  display: inline-block;
+  font-size: 18px;
+  color: #222;
+  white-space: normal;
+}
+
+.question-item-ft {
+  margin-top: 20px;
+}
+.question-item-ft__title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #222;
+  line-height: 25px;
+}
+.answer-item {
+  margin-top: 10px;
+  margin-left: 28px;
+  display: flex;
+  font-size: 18px;
+  color: #222;
+  line-height: 25px;
+}
+.answer-item-label {
+  white-space: nowrap;
+}
+.answer-item-content {
+  flex: 1;
+  overflow: hidden;
+}
+</style>

src/modules/course/components/CourseExamQuestionNumbers.vue

+<script setup lang="ts">
+import type { PaperQuestionType } from '@/types'
+
+interface Props {
+  index: number
+  status: number
+}
+const props = defineProps<Props>()
+
+// 所有试题
+const questionList = $ref<PaperQuestionType[]>(inject('questionList'))
+// 试题索引
+let questionIndex = $ref<number>(inject('questionIndex'))
+
+const questionNumTips: any = {
+  1: [
+    { class: 'is-info', name: '已答' },
+    { class: 'is-default', name: '未答' },
+    { class: 'is-success', name: '当前' }
+  ],
+  2: [
+    { class: 'is-success', name: '答对' },
+    { class: 'is-error', name: '答错' },
+    { class: 'is-info', name: '未答' }
+  ]
+}
+const questionNum = computed(() => {
+  return questionNumTips[props.status]
+})
+function genClass(data: any, index: number) {
+  // answer(0:未做,1:正确,2:错误)
+  if (props.status === 1) {
+    return {
+      'is-info': !!data.user_answer, // 已做
+      'is-success': index === questionIndex // 当前
+    }
+  }
+  if (props.status === 2) {
+    return {
+      'is-success': data.answer === 1, // 答对
+      'is-error': data.answer === 2, // 答错
+      'is-info': data.answer === 0 // 未答
+    }
+  }
+  if (props.status === 3) {
+    return {
+      'is-success': data.checked_flag, // 已批阅
+      'is-error': !data.checked_flag, // 未批阅
+      'is-info': data.answer === 0 // 未做
+    }
+  }
+}
+function handleClick(index: number) {
+  questionIndex = index
+}
+</script>
+
+<template>
+  <div class="question-numbers">
+    <div class="question-num">
+      <!-- <div v-for="item in dataList" :key="item.question_item_id">
+        <div class="tit">{{ item.title }}</div> -->
+      <ul>
+        <li
+          v-for="(item, index) in questionList"
+          class="question-num-item"
+          :class="genClass(item, index)"
+          :key="index"
+          @click="handleClick(index)"
+        >
+          {{ index + 1 }}
+        </li>
+      </ul>
+      <!-- </div> -->
+    </div>
+
+    <ul class="question-num-tips">
+      <li v-for="(item, index) in questionNum" :key="index">
+        <div class="question-num-tips-item" :class="item.class"></div>
+        <div class="txt">{{ item.name }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.question-numbers {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.question-num {
+  flex: 1;
+  padding-top: 20px;
+  .tit {
+    font-size: 12px;
+    color: #999999;
+    line-height: 17px;
+    margin-bottom: 10px;
+  }
+  ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    flex-wrap: wrap;
+  }
+}
+.question-num-item {
+  cursor: pointer;
+  position: relative;
+  border-radius: 50px;
+  width: 24px;
+  height: 24px;
+  font-size: 14px;
+  line-height: 24px;
+  margin-right: 20px;
+  margin-bottom: 10px;
+  text-align: center;
+  border: 2px solid #ccc;
+  color: #666;
+
+  &:nth-child(5n) {
+    margin-right: 0;
+  }
+}
+.question-num-tips {
+  padding-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .txt {
+    margin-top: 5px;
+    font-size: 12px;
+    color: #ccc;
+    line-height: 17px;
+    text-align: center;
+  }
+}
+.question-num-tips-item {
+  cursor: pointer;
+  position: relative;
+  border-radius: 50px;
+  width: 24px;
+  height: 24px;
+  font-size: 14px;
+  line-height: 24px;
+  text-align: center;
+  border: 2px solid #ccc;
+  color: #666;
+}
+.is-default {
+  color: #666;
+  border: 2px solid #ccc;
+}
+.is-info {
+  color: #fff;
+  background-color: #999;
+  border: 2px solid #999;
+}
+.is-success {
+  color: #666;
+  border: 2px solid #0fc118;
+}
+.is-info.is-success {
+  color: #fff;
+}
+.is-error {
+  color: #666;
+  border: 2px solid #c01540;
+}
+.is-mark::after {
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  width: 4px;
+  height: 4px;
+  background: #c01540;
+  border-radius: 50%;
+}
+</style>

src/modules/course/components/CourseListItem.vue

@@ -48,15 +48,20 @@ function handleTop(data: CourseListItemType) {
         </div>
         <div class="course-item-main">
           <h2 class="course-item__name">{{ data.name }}</h2>
-          <div class="course-item-progress">总进度<el-progress :percentage="data.watch_video_length" /></div>
+          <div class="course-item-progress">总进度<el-progress :percentage="parseFloat(data.schedule)" /></div>
         </div>
       </div>
     </router-link>
     <div class="course-item-ft">
       <div class="course-item-playlist" v-if="data.section?.id">
         <p class="t1">{{ data.section.name }}</p>
-        <p class="t2">已观看{{ data.section.watch_video_length }}%</p>
+        <p class="t2">已观看{{ data.section.schedule }}%</p>
+        <router-link
+          :to="`/course/player?course_id=${data.course_id}&chapter_id=${data.section.chapter_id}&section_id=${data.section.section_id}&resource_id=${data.section.resource_id}&semester_id=${data.semester_id}`"
+          target="_blank"
+        >
           <el-button type="primary" round>点击观看</el-button>
+        </router-link>
       </div>
       <p class="t3" v-else>尚未观看</p>
     </div>

src/modules/course/components/CoursePlayerResourceItem.vue

@@ -18,9 +18,11 @@ interface Props {
 const props = defineProps<Props>()
 
 // 跳转链接
-const targetHref = computed(() => {
+const targetUrl = computed(() => {
   const info = props.data.info
-  if (['pptx', 'doc', 'docx', 'xls', 'xlsx'].includes(info.type)) {
+  if (props.data.resource_type === 3 || props.data.resource_type === 9) {
+    return `/course/exam?course_id=${courseId}&semester_id=${semesterId}&paper_id=${props.data.resource_id}&type=2`
+  } else if (['pptx', 'doc', 'docx', 'xls', 'xlsx'].includes(info.type)) {
     return `https://view.officeapps.live.com/op/view.aspx?src=${info.url}`
   } else {
     return info.url
@@ -58,7 +60,7 @@ function downloadFile(data: CourseResourceType) {
 <template>
   <div class="course-resource-item">
     <p>
-      <a :href="targetHref" target="_blank">
+      <a :href="targetUrl" target="_blank">
         <ResourceIcon :resourceType="data.resource_type" />
         {{ data.name }}
       </a>

src/modules/course/components/CoursePlayerVideo.vue

 <script setup lang="ts">
-import type { CourseChapterType, CourseSectionType, CourseResourceType, VideoRecordType, PlayItemType } from '../types'
+import type { CourseChapterType, CourseResourceType, VideoRecordType, PlayItemType } from '../types'
 import type { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'
 import { throttle } from 'lodash'
 import { useStorage } from '@vueuse/core'
@@ -31,16 +31,16 @@ watchEffect(() => {
 })
 
 // 当前章
-const chapter = $computed<CourseSectionType>(() => {
+const chapter = $computed(() => {
   return props.chapterList.find(item => item.id === chapterId)
 })
 // 当前节
-const section = $computed<CourseSectionType>(() => {
+const section = $computed(() => {
   return chapter?.sections.find(item => item.id === sectionId)
 })
 
 // 当前节
-const resource = $computed<CourseResourceType>(() => {
+const resource = $computed(() => {
   return section?.resources.find(item => item.resource_id === resourceId)
 })
 // 资源视频列表

src/modules/course/components/CourseViewAssess.vue

 <!-- 课程考核 -->
 <script setup lang="ts">
+import type { CourseAssessChapterType } from '../types'
+
 import { getChapterVideoTreeList } from '../api'
 
 const { query } = useRoute()
 const courseId = $ref(query.course_id as string)
 const semesterId = $ref(query.semester_id as string)
-let list = $ref([])
+
+let list = $ref<CourseAssessChapterType[]>([])
 
 // 树列表
-const treeList = $computed(() => {
+const treeList = $computed<CourseAssessChapterType[]>(() => {
   return makeTree(list)
 })
-
-// 扁平列表
-const flatList = $computed(() => {
-  return tree2List(list)
-})
-
 // 累计学习时长
-const studyTime = $computed(() => {
+const studyTime = $computed<number>(() => {
   return list.reduce((total, item) => {
     return total + item.watch_video_length || 0
   }, 0)
 })
 // 视频统计
 const videoStatistics = $computed(() => {
-  return flatList.reduce(
-    (results, item) => {
-      if (item.depth === 3) {
+  const results = { length: 0, completedLength: 0 }
+  list.forEach(chapter => {
+    chapter.sections.forEach(section => {
+      section.resources.forEach(resource => {
         results.length++
-        if (item.is_finished) {
-          results.completedLength++
-        }
-      }
+        resource.is_finished && results.completedLength++
+      })
+    })
+  })
   return results
-    },
-    { length: 0, completedLength: 0 }
-  )
 })
 // 完成率
 const completedPercent = $computed(() => {
   const percent = (videoStatistics.completedLength / videoStatistics.length) * 100
   return parseFloat(percent.toFixed(2)) || 0
 })
-// 树结构转换为列表
-function tree2List(tree, parent) {
-  return tree.reduce(function (acc, item) {
-    if (item.depth === 2) {
+// 将列表转换为树结构
+function makeTree(list: any, parent?: any) {
+  return list.map((item: any) => {
+    if (item.depth === 2 && parent) {
       item.chapter_id = parent.id
     }
-    if (item.depth === 3) {
+    if (item.depth === 3 && parent) {
       item.chapter_id = parent.chapter_id
       item.section_id = parent.id
     }
-    acc.push(item)
-    if (item.sections) acc = acc.concat(tree2List(item.sections, item))
-    if (item.resources) acc = acc.concat(tree2List(item.resources, item))
-    return acc
-  }, [])
-}
-// 将列表转换为树结构
-function makeTree(list: any) {
-  return list.map(item => {
-    if (item.sections || item.resources) item.children = makeTree(item.sections || item.resources)
+    if (item.sections || item.resources) item.children = makeTree(item.sections || item.resources, item)
     return item
   })
 }

src/modules/course/components/CourseViewExamItem.vue

@@ -4,12 +4,20 @@ interface Props {
   data: PaperType
 }
 defineProps<Props>()
+
+const { query } = useRoute()
+const courseId = $ref(query.course_id as string)
+const semesterId = $ref(query.semester_id as string)
 </script>
 
 <template>
   <div class="course-exam-item" :key="data.id">
     <p>
-      {{ data.paper_title }}
+      <router-link
+        :to="`/course/exam?course_id=${courseId}&semester_id=${semesterId}&paper_id=${data.id}&type=1`"
+        target="_blank"
+        >{{ data.paper_title }}</router-link
+      >
     </p>
   </div>
 </template>

src/modules/course/types.ts

@@ -13,6 +13,13 @@ export interface CourseListItemType extends CourseType {
   watch_video_length: number
 }
 
+export interface CourseAssessChapterType extends CourseChapterType {
+  schedule: number
+  video_count: number
+  video_length: number
+  watch_video_length: number
+}
+
 // 课程章类型
 export interface CourseChapterType {
   id: string
@@ -20,6 +27,7 @@ export interface CourseChapterType {
   resource_id: string
   resource_type: number
   sections: CourseSectionType[]
+  depth: number
 }
 
 // 课程节类型
@@ -29,6 +37,7 @@ export interface CourseSectionType {
   resource_id: string
   resource_type: number
   resources: CourseResourceType[]
+  depth: number
 }
 
 // 课程资源类型
@@ -39,6 +48,8 @@ export interface CourseResourceType {
   resource_type: number
   collection_count: number
   info: ResourceType
+  depth: number
+  is_finished?: number
 }
 
 export interface VideoRecordType {

src/modules/course/views/CourseExam.vue

 <script setup lang="ts">
-const CoursePlayerVideo = defineAsyncComponent(() => import('../components/CoursePlayerVideo.vue'))
-const CoursePlayerChapter = defineAsyncComponent(() => import('../components/CoursePlayerChapter.vue'))
+import type { PaperQuestionType } from '@/types'
+import CourseExamCard from '../components/CourseExamCard.vue'
+import { getPaper } from '../api'
+const route = useRoute()
+const courseId = $ref(route.query.course_id as string)
+const semesterId = $ref(route.query.semester_id as string)
+const paperId = $ref(route.query.paper_id as string)
+const type = $ref(parseInt(route.query.type as string))
+const detail = reactive({ status: 1 })
+const questionList = ref<PaperQuestionType[]>([])
+provide('questionList', questionList)
+// 获取试卷详情
+function fetchInfo() {
+  getPaper({ course_id: courseId, semester_id: semesterId, paper_id: paperId, type }).then(res => {
+    Object.assign(detail, res.data)
+    questionList.value = res.data.question
+  })
+}
+onMounted(() => {
+  fetchInfo()
+})
 </script>
 
 <template>
-  <div class="course-player">
-    <div class="course-player-main">
-      <CoursePlayerVideo />
-      <el-tabs>
-        <el-tab-pane label="课件"> </el-tab-pane>
-        <el-tab-pane label="教案" lazy> </el-tab-pane>
-        <el-tab-pane label="作业" lazy> </el-tab-pane>
-        <el-tab-pane label="资料" lazy> </el-tab-pane>
-        <el-tab-pane label="考试/测验" lazy></el-tab-pane>
-        <el-tab-pane label="直播" lazy></el-tab-pane>
-      </el-tabs>
-    </div>
-    <div class="course-player-aside">
-      <CoursePlayerChapter />
-    </div>
-  </div>
+  <CourseExamCard :status="detail.status" @update="fetchInfo"></CourseExamCard>
 </template>
-
-<style lang="scss" scoped>
-.course-player {
-  display: flex;
-}
-.course-player-main {
-  flex: 1;
-}
-</style>

src/modules/favorites/views/Index.vue

@@ -71,6 +71,12 @@ function canDownload(type: number) {
 function downloadFile(data: CollectionType) {
   data.info.url && saveAs(data.info.url, data.info.name)
 }
+function targetUrl(item: CollectionType) {
+  if (item.type === 5) {
+    return `/course/exam?course_id=${item.course_id}&semester_id=${item.semester_id}&paper_id=${item.info.id}&type=2`
+  }
+  return `/course/player?course_id=${item.course_id}&chapter_id=${item.chapter_id}&section_id=${item.section_id}&resource_id=${item.source_id}&semester_id=${item.semester_id}`
+}
 </script>
 
 <template>
@@ -84,10 +90,7 @@ function downloadFile(data: CollectionType) {
     <ul v-if="list.length">
       <li class="collection-item" v-for="item in list" :key="item.id">
         <p>
-          <router-link
-            :to="`/course/player?course_id=${item.course_id}&chapter_id=${item.chapter_id}&section_id=${item.section_id}&resource_id=${item.source_id}&semester_id=${item.semester_id}`"
-            target="_blank"
-          >
+          <router-link :to="targetUrl(item)" target="_blank">
             <ResourceIcon :resourceType="item.type" />
             {{ item.info.name || item.info.paper_title }}
           </router-link>

src/modules/settings/api.ts

 import httpRequest from '@/utils/axios'
 // 修改用户资料
-export function updateUser(data: { name: string; avatar: string; sex: string }) {
+export function updateUser(data: { real_name: string; avatar: string; gender: number }) {
   return httpRequest.post('/api/usercenter/v2/frontend/user/update-user', data)
 }
 // 通过cookie修改密码

src/modules/settings/components/User.vue

@@ -3,18 +3,24 @@ import { ElMessage } from 'element-plus'
 import AppUpload from '@/components/base/AppUpload.vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { updateUser } from '../api'
+import { useUserStore } from '@/stores/user'
+import { pick } from 'lodash-es'
+const userStore = useUserStore()
+const userInfo = userStore.user
 
 const formRef = $ref<FormInstance>()
 const form = reactive({
-  name: '',
+  real_name: '',
   avatar: '',
-  sex: ''
+  gender: 1
 })
 const rules = ref<FormRules>({
   name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
   mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
 })
-
+onMounted(() => {
+  Object.assign(form, pick(userInfo, ['real_name', 'avatar', 'gender']))
+})
 // 提交
 function handleSubmit() {
   formRef?.validate().then(update)
@@ -37,16 +43,16 @@ const update = () => {
     label-position="left"
     style="width: 360px"
   >
-    <el-form-item label="昵称" prop="name">
-      <el-input v-model="form.name" />
+    <el-form-item label="昵称" prop="real_name">
+      <el-input v-model="form.real_name" />
     </el-form-item>
     <el-form-item label="头像" prop="avatar">
       <AppUpload v-model="form.avatar"></AppUpload>
     </el-form-item>
-    <el-form-item label="性别" prop="sex">
-      <el-radio-group v-model="form.sex" class="ml-4">
-        <el-radio label="1" size="large">男</el-radio>
-        <el-radio label="2" size="large">女</el-radio>
+    <el-form-item label="性别" prop="gender">
+      <el-radio-group v-model="form.gender" class="ml-4">
+        <el-radio :label="1" size="large">男</el-radio>
+        <el-radio :label="2" size="large">女</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item>

src/router/index.ts

@@ -15,9 +15,11 @@ router.beforeEach(async (to, from, next) => {
     } catch (e) {
       console.error(e)
     }
-    user.isLogin ? next() : next('/401')
+    if (!user.isLogin) {
+      location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
       return
     }
+  }
   next()
 })
 

src/stores/user.ts

 import { defineStore } from 'pinia'
 import { getUser, logout } from '@/api/base'
-import type { UserType, ProjectType, OrganizationType, RoleType, PermissionType } from '@/types'
+import type { UserType } from '@/types'
 
 interface State {
   user: UserType | null
-  project: ProjectType | null
-  organization: OrganizationType | null
-  roles: RoleType[]
-  permissions: PermissionType[]
 }
 
 export const useUserStore = defineStore({
   id: 'user',
   state: (): State => ({
-    user: null,
-    organization: null,
-    project: null,
-    roles: [],
-    permissions: []
+    user: null
   }),
   getters: {
-    isLogin: state => !!state.user
+    isLogin: state => !!state.user,
+    name: state => state.user?.realname || state.user?.nickname || state.user?.username
   },
   actions: {
     async getUser() {
       const res = await getUser()
-      const { info } = res.data
-      const { organization, project, roles, permissions } = res.data.permissions
-      this.user = info
-      this.organization = organization
-      this.project = project
-      this.roles = roles
-      this.permissions = permissions
+      this.user = res.data
     },
     async logout() {
       await logout()

src/types.ts

 import type { Component } from 'vue'
+import type { questionType } from '@/utils/dictionary'
 
 export interface IMenuItem {
   tag?: string
@@ -15,43 +16,10 @@ export interface UserType {
   id: string
   mobile: string
   name: string
+  realname: string
+  nickname: string
   username: string
-}
-
-// 项目类型
-export interface ProjectType {
-  id: string
-  name: string
-  tab: string
-}
-
-// 机构类型
-export interface OrganizationType {
-  contact_information: string
-  contact_name: string
-  id: string
-  is_valid: 1 | 2
-  name: string
-  validity_date: string
-}
-
-// 角色类型
-export interface RoleType {
-  desc: string
-  id: string
-  name: string
-}
-
-// 权限类型
-export interface PermissionType {
-  desc: string
-  effect_uris: string
-  id: string
-  name: string
-  parent_id: string
-  system_tag: number
-  tag: string
-  type: number
+  gender: number
 }
 
 // 课程类型
@@ -74,6 +42,9 @@ export interface CourseType {
 
 // 章节类型
 export interface ChapterType {
+  chapter_id?: string
+  section_id?: string
+  resource_id?: string
   id: string
   name: string
   schedule: string
@@ -109,6 +80,7 @@ export interface ResourceType {
   size: number
   source_id: string
   paper_title?: string
+  paper_type?: number
 }
 
 // 直播类型
@@ -151,3 +123,33 @@ export interface PaperCategoryType {
   category_name: string
   name: string
 }
+
+export type QuestionType = keyof typeof questionType
+
+export interface PaperQuestionType {
+  id: string
+  project_prefix: string
+  permission: number
+  question_type: QuestionType
+  question_title: string
+  question_content: string
+  common_content: string
+  question_options: PaperQuestionOptionType[]
+  question_analysis: string
+  question_difficulty: number
+  status: number
+  group_id: string
+  question_order: number
+  question_tag: string
+  is_parent: number
+  child_question_type: number
+  score: number
+  children?: PaperQuestionType[]
+  user_answer: string
+}
+export interface PaperQuestionOptionType {
+  checked_option: string
+  option: string
+  id: string
+  user_checked: boolean
+}

src/utils/axios.ts

@@ -52,6 +52,11 @@ httpRequest.interceptors.response.use(
       location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
       return Promise.reject(data)
     }
+    if ([4008, 4011, 4012, 4013].includes(data.code)) {
+      // 未授权
+      router.push('/401')
+      return Promise.reject(data)
+    }
     if (Object.hasOwn(data, 'code') && data.code !== 0) {
       ElMessage.error(data.message || data.msg)
       return Promise.reject(data)

src/utils/dictionary.ts

 // json to array
-export const json2Array = function (data, isValueToNumber = true) {
+export const json2Array = function (data: any, isValueToNumber = true) {
   return Object.keys(data).map(value => ({ label: data[value], value: isValueToNumber ? parseInt(value) : value }))
 }
 

src/utils/permission.ts

-import { useUserStore } from '@/stores/user'
-import type { DirectiveBinding } from 'vue'
-
-// 判断是否有权限
-export function checkPermission(value: string | string[]): boolean {
-  const userStore = useUserStore()
-  const permissions = userStore.permissions
-  if (Array.isArray(value)) {
-    return permissions.some(item => value.includes(item.tag))
-  } else {
-    return !!permissions.find(item => item.tag === value)
-  }
-}
-
-// 权限指令
-export function permissionDirective(el: HTMLElement, binding: DirectiveBinding) {
-  const { value } = binding
-  if (!value) return
-  if (!checkPermission(value)) {
-    el.parentNode && el.parentNode.removeChild(el)
-  }
-}