xlx_teacher_app/src/pages/marking/grading.vue

<!-- 阅卷页面 -->
<route lang="jsonc">
{
  "style": {
    "navigationStyle": "custom"
  }
}
</route>

<script lang="ts" setup>
import { useQueryClient } from '@tanstack/vue-query'
import { whenever } from '@vueuse/core'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import AnswerDialog from '@/components/marking/components/dialog/AnswerDialog.vue'
import AvgScoreDialog from '@/components/marking/components/dialog/AvgScoreDialog.vue'
import FullscreenImageDialog from '@/components/marking/components/dialog/FullscreenImageDialog.vue'
import ScoreSettingsDialog from '@/components/marking/components/dialog/ScoreSettingsDialog.vue'
import QuickScorePanel from '@/components/marking/components/QuickScorePanel.vue'
import MarkingImageViewerNew from '@/components/marking/components/renderer/MarkingImageViewerNew.vue'
import { provideMarkingData } from '@/components/marking/composables/useMarkingData'
import MarkingLayout from '@/components/marking/MarkingLayout.vue'
import { DefaultMarkingDataProvider, DefaultMarkingHistoryProvider, provideMarkingContext } from '@/composables/marking/MarkingContext'
import { provideMarkingHistory } from '@/composables/marking/useMarkingHistory'
import { provideMarkingNavigation } from '@/composables/marking/useMarkingNavigation'

defineOptions({
  name: 'GradingPage',
})

// 获取路由参数
const examId = ref<number>()
const subjectId = ref<number>()
const questionId = ref<number>()
const taskId = ref<number>()
const evaluationType = ref<'single' | 'double'>('single')
const taskType = ref<'initial' | 'final' | 'arbitration'>('initial')

// 屏幕方向状态
const isLandscape = ref(false)

// 图片缩放比例
const imageScale = ref(1.0)

// 提供阅卷上下文（使用默认实现）
provideMarkingContext({
  dataProvider: new DefaultMarkingDataProvider(),
  historyProvider: new DefaultMarkingHistoryProvider(),
  isHistory: false,
  defaultPosition: 'last',
})

// 提供历史记录管理
provideMarkingHistory({ taskId })

// 提供导航管理
const markingNavigation = provideMarkingNavigation({ taskId })
const {
  currentIndex: navCurrentIndex,
  totalCount: navTotalCount,
  isViewingHistory,
  canGoPrev,
  canGoNext,
  goToPrevQuestion,
  goToNextQuestion,
  initNavigation,
  createSwipeHandler,
} = markingNavigation

// 提供数据管理
const markingData = provideMarkingData({
  taskId,
  questionId,
  examId,
  subjectId,
  isLandscape,
  taskType,
})
const { questionData: questions, questionsList, totalQuestions: totalQuestionsCount } = markingData

// 全屏弹窗状态
const showFullscreenImage = ref(false)

const currentQuestionIndex = ref(0)
const totalQuestions = computed(() => totalQuestionsCount.value)

// 分数数据
const myScore = computed(() => {
  const data = markingData.avgScoreData.value
  return data?.teacher_score.average_score || 0
})
const avgScore = computed(() => {
  const data = markingData.avgScoreData.value
  return data?.all_teachers_score.average_score || 0
})

// 页面加载时获取参数
onLoad((options) => {
  examId.value = Number(options.examId)
  subjectId.value = Number(options.subjectId)
  questionId.value = Number(options.questionId)
  taskId.value = Number(options.taskId) // 从路由参数获取taskId
  evaluationType.value = options.type as 'single' | 'double' || 'single'
  taskType.value = options.taskType
})

// 监听屏幕方向变化
function handleOrientationChange() {
  // #ifdef H5
  const orientation = window.screen.orientation?.angle || 0
  isLandscape.value = orientation === 90 || orientation === 270
  // #endif

  // #ifdef APP-PLUS
  // plus.screen.lockOrientation('portrait-primary')
  // #endif
}

onMounted(async () => {
  // #ifdef H5
  window.addEventListener('orientationchange', handleOrientationChange)
  handleOrientationChange()
  // #endif

  // 初始化导航
  await initNavigation()
})

onUnmounted(() => {
  // #ifdef H5
  window.removeEventListener('orientationchange', handleOrientationChange)
  // #endif
})

// 切换屏幕方向
function toggleOrientation() {
  // #ifdef APP-PLUS
  if (isLandscape.value) {
    plus.screen.lockOrientation('portrait-primary')
  }
  else {
    plus.screen.lockOrientation('landscape-primary')
  }
  // #endif

  isLandscape.value = !isLandscape.value
}

// 打开全屏图片弹窗
function toggleFullscreen() {
  showFullscreenImage.value = true
}

// 返回上一页
function goBack() {
  uni.navigateBack()
}

// 题目选择
function selectQuestion(index: number) {
  currentQuestionIndex.value = index
  questions.value = []
}

// 弹窗状态
const showScoreSettings = ref(false)
const showAvgScore = ref(false)
const showAnswer = ref(false)

// 打分设置
function openScoreSettings() {
  showScoreSettings.value = true
}

// 打分设置确认
function handleScoreSettingsConfirm(data: { stepSize: number, commonScores: number[] }) {
  console.log('打分设置已确认:', data)
  uni.showToast({
    title: '设置已保存',
    icon: 'success',
  })
}

// 查看均分
function viewAvgScore() {
  showAvgScore.value = true
}

// 查看答案
function viewAnswer() {
  showAnswer.value = true
}

// 当前题目信息
const currentQuestions = computed(() => questionsList.value[currentQuestionIndex.value])
// 如果在历史查看模式，使用历史记录数据，否则使用当前题目数据
const currentQuestion = computed(() => {
  if (isViewingHistory.value && markingNavigation.currentHistoryQuestion.value) {
    // 历史模式：返回历史记录
    return markingNavigation.currentHistoryQuestion.value
  }
  // 正常模式：返回当前题目
  return questions.value[0]
})
const currentTask = computed(() => currentQuestions.value?.tasks?.[taskType.value])

// 当前答题卡图片列表
const currentImageUrls = computed(() => currentQuestion.value?.image_urls || [])

let isFirst = true
whenever(questionsList, () => {
  if (isFirst) {
    isFirst = false
    currentQuestionIndex.value = questionsList.value.findIndex(q => q.question_id === questionId.value)
  }
})

const queryClient = useQueryClient()
whenever(currentTask, (task, oldTask) => {
  taskId.value = task?.id
  questionId.value = task?.question_id

  queryClient.invalidateQueries({ queryKey: ['marking-question', oldTask?.id] })
  queryClient.invalidateQueries({ queryKey: ['marking-question', task.id] })
})

// 快捷打分选择
function handleQuickScoreSelect(score: number) {
  console.log('选择分数:', score)
}

// 创建手势处理器
const swipeHandler = createSwipeHandler()

// 历史查看模式提示
const historyModeText = computed(() => {
  if (isViewingHistory.value) {
    return `${navCurrentIndex.value}/${totalQuestionsCount.value}`
  }
  return ''
})

// 上一题
async function handlePrevQuestion() {
  await goToPrevQuestion()
}

// 下一题
async function handleNextQuestion() {
  await goToNextQuestion()
}
</script>

<template>
  <div
    class="relative h-screen w-100vw flex flex-col touch-pan-x touch-pan-y overflow-hidden overscroll-none pt-safe"
    @touchstart="swipeHandler.onTouchStart"
    @touchend="swipeHandler.onTouchEnd"
  >
    <MarkingLayout
      :is-landscape="isLandscape"
      :is-fullscreen="false"
      :current-question-index="currentQuestionIndex"
      :current-task-submit="currentTask?.marked_quantity || 0"
      :total-questions="totalQuestions"
      :questions="questionsList"
      :my-score="myScore"
      :avg-score="avgScore"
      :is-viewing-history="isViewingHistory"
      :can-go-prev="canGoPrev"
      :can-go-next="canGoNext"
      :history-mode-text="historyModeText"
      :task-id="taskId"
      @go-back="goBack"
      @select-question="selectQuestion"
      @open-score-settings="openScoreSettings"
      @view-avg-score="viewAvgScore"
      @view-answer="viewAnswer"
      @toggle-orientation="toggleOrientation"
      @toggle-fullscreen="toggleFullscreen"
      @prev-question="handlePrevQuestion"
      @next-question="handleNextQuestion"
    >
      <template #content>
        <MarkingImageViewerNew
          v-if="questions[0]?.image_urls?.length"
          v-model:scale="imageScale"
          :question-data="[currentQuestion]"
          :image-size="100"
        />

        <!-- 快捷打分面板 - 固定定位在右侧 -->
        <QuickScorePanel
          v-if="currentQuestion && !isViewingHistory"
          :is-landscape="isLandscape"
          :full-score="currentQuestion.full_score"
          @score-selected="handleQuickScoreSelect"
        />
      </template>
    </MarkingLayout>

    <!-- 打分设置弹窗 -->
    <ScoreSettingsDialog
      v-model="showScoreSettings"
      :full-score="currentQuestions?.full_score"
      @confirm="handleScoreSettingsConfirm"
    />

    <!-- 查看均分弹窗 -->
    <AvgScoreDialog
      v-model="showAvgScore"
      :my-score="myScore"
      :avg-score="avgScore"
      :question-title="`${currentQuestions?.question_major}.${currentQuestions?.question_minor}`"
      :full-score="currentQuestions?.full_score"
      :avg-score-data="markingData.avgScoreData.value"
    />

    <!-- 查看答案弹窗 -->
    <AnswerDialog
      v-if="currentQuestion"
      v-model="showAnswer"
      :question-title="`${currentQuestion?.question_major}.${currentQuestion?.question_minor}`"
      :full-score="currentQuestion?.full_score"
      :standard-answer="currentQuestion?.standard_answer || ''"
    />

    <!-- 全屏图片弹窗 -->
    <FullscreenImageDialog
      v-model="showFullscreenImage"
      :image-urls="currentImageUrls"
    />
  </div>
</template>

<style scoped>
/* 禁用橡皮筋效果 */
.h-screen {
  position: fixed;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* H5端额外的橡皮筋禁用 */
/* #ifdef H5 */
body,
html {
  overscroll-behavior: none;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}
/* #endif */

/* 微信小程序端橡皮筋禁用 */
/* #ifdef MP-WEIXIN */
page {
  overflow: hidden;
  overscroll-behavior: none;
}
/* #endif */

/* APP端橡皮筋禁用 */
/* #ifdef APP-PLUS */
page {
  overflow: hidden;
}
/* #endif */
</style>