From 2ed92d3f7a1ea6f99ec9c8d11f729e81e78f93a2 Mon Sep 17 00:00:00 2001
From: AfyerCu <20569838@qq.com>
Date: Thu, 20 Nov 2025 22:28:47 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=B8=80=E4=BA=9B=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/marking/MarkingLayout.vue      | 36 ++++++--
 .../marking/components/QuickScorePanel.vue    | 11 ++-
 .../components/dialog/ScoreSettingsDialog.vue | 23 ++++-
 .../components/renderer/DomImageRenderer.vue  | 38 ++++++--
 .../composables/renderer/useMarkingDom.ts     | 89 ++++++++++++++++---
 .../marking/composables/useMarkingSettings.ts |  3 +
 .../marking/review/ReviewHeader.vue           |  2 +-
 .../marking/review/ReviewImageRenderer.vue    |  7 +-
 .../marking/useMarkingNavigation.ts           | 11 +++
 src/pages/marking/grading.vue                 | 17 +++-
 src/pages/marking/review.vue                  | 79 +++++++++++-----
 11 files changed, 259 insertions(+), 57 deletions(-)

diff --git a/src/components/marking/MarkingLayout.vue b/src/components/marking/MarkingLayout.vue
index a4f7885..ba98631 100644
--- a/src/components/marking/MarkingLayout.vue
+++ b/src/components/marking/MarkingLayout.vue
@@ -2,6 +2,7 @@
 <script lang="ts" setup>
 import type { ExamQuestionWithTasksResponse } from '@/api'
 import { computed, ref, watch } from 'vue'
+import { useMarkingSettings } from '@/components/marking/composables/useMarkingSettings'
 import { useMarkingHistory } from '@/composables/marking/useMarkingHistory'
 
 interface Props {
@@ -49,6 +50,7 @@ const emit = defineEmits<Emits>()
 
 // 获取历史记录管理
 const markingHistory = useMarkingHistory()
+const settings = useMarkingSettings()
 const currentHistoryPage = ref(1)
 const { data: historyPageData, isLoading: isLoadingHistory } = markingHistory.useHistoryPage(
   computed(() => currentHistoryPage.value),
@@ -129,14 +131,29 @@ const currentHistoryIndexInList = computed(() => {
       </view>
 
       <!-- 中间题号信息 -->
-      <view class="flex flex-1 flex-col justify-center">
+      <view class="flex flex-1 items-center justify-center gap-4">
+        <!-- 题目选择器 -->
+        <wd-picker
+          :model-value="currentQuestionIndex"
+          :columns="questionPickerColumns"
+          :value="String(currentQuestionIndex)"
+          :title="`${currentQuestion?.question_major}.${currentQuestion?.question_minor}`"
+          @confirm="({ value }) => emit('selectQuestion', Number(value))"
+        >
+          <view class="flex items-center gap-4px rounded-full bg-slate-50 px-12px py-4px active:bg-slate-100">
+            <text class="text-16px text-slate-800 font-bold">
+              {{ currentQuestion?.question_major }}.{{ currentQuestion?.question_minor }}
+            </text>
+            <view class="i-carbon-chevron-down text-12px text-slate-400" />
+          </view>
+        </wd-picker>
+
+        <view class="h-16px w-1px bg-slate-200" />
+
         <view class="flex items-baseline gap-2">
-          <text class="text-18px text-slate-800 font-bold leading-none">
+          <text class="text-16px text-slate-600 font-medium leading-none">
             {{ isViewingHistory ? historyModeText : `${currentTaskSubmit}/${totalQuestions}` }}
           </text>
-          <text class="text-12px text-slate-400 leading-none">
-            题号
-          </text>
         </view>
       </view>
 
@@ -195,12 +212,17 @@ const currentHistoryIndexInList = computed(() => {
       </view>
 
       <!-- 中间图片区域 -->
-      <view class="relative flex-1 overflow-hidden bg-slate-50">
+      <view
+        class="relative flex-1 overflow-hidden bg-slate-50"
+        :class="settings.quickScorePosition === 'left' ? 'order-3' : 'order-2'"
+      >
         <slot name="content" :current-question="currentQuestion" />
       </view>
 
       <!-- 右侧打分区域 -->
-      <slot name="scoring" />
+      <view :class="settings.quickScorePosition === 'left' ? 'order-2' : 'order-3'">
+        <slot name="scoring" />
+      </view>
     </view>
   </view>
 
diff --git a/src/components/marking/components/QuickScorePanel.vue b/src/components/marking/components/QuickScorePanel.vue
index 276299a..f552e1e 100644
--- a/src/components/marking/components/QuickScorePanel.vue
+++ b/src/components/marking/components/QuickScorePanel.vue
@@ -11,6 +11,7 @@ interface Props {
 
 interface Emits {
   (e: 'score-selected', score: number): void
+  (e: 'toggle-collapse'): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -33,7 +34,10 @@ const currentMode = computed({
 })
 
 // 是否收起
-const isCollapsed = ref(true)
+const isCollapsed = ref(uni.getStorageSync('quick-score-collapse') || true)
+watch(isCollapsed, (newVal) => {
+  uni.setStorageSync('quick-score-collapse', newVal)
+})
 
 // 悬浮按钮的位置 (使用 SessionStorage 持久化)
 const floatingButtonPosition = ref(uni.getStorageSync('quick-score-submit-button-position') || {
@@ -166,6 +170,9 @@ const twoColumnLayout = computed(() => {
 // 收起/展开功能
 function toggleCollapse() {
   isCollapsed.value = !isCollapsed.value
+  setTimeout(() => {
+    emit('toggle-collapse')
+  }, 100)
 }
 
 // 选择分数
@@ -274,7 +281,7 @@ async function submitCurrentScore() {
       >
         <div
           class="size-16px text-blue-500 transition-transform"
-          :class="!isCollapsed ? 'i-carbon-chevron-right' : 'i-carbon-chevron-left'"
+          :class="settings.quickScorePosition === 'right' ? (!isCollapsed ? 'i-carbon-chevron-right' : 'i-carbon-chevron-left') : (!isCollapsed ? 'i-carbon-chevron-left' : 'i-carbon-chevron-right')"
         />
       </div>
     </div>
diff --git a/src/components/marking/components/dialog/ScoreSettingsDialog.vue b/src/components/marking/components/dialog/ScoreSettingsDialog.vue
index 1c750aa..fb96dbb 100644
--- a/src/components/marking/components/dialog/ScoreSettingsDialog.vue
+++ b/src/components/marking/components/dialog/ScoreSettingsDialog.vue
@@ -70,7 +70,7 @@ const settings = useMarkingSettings()
 
 // 初始值保存
 const initialSettings = ref({
-  quickScoreMode: '',
+  quickScoreMode: 'onekey' as 'onekey' | 'quick',
   stepSize: 0,
   quickScoreScores: [] as number[],
   onekeyScores: [] as number[],
@@ -335,6 +335,27 @@ function resetQuickScoreScores() {
           />
         </view>
 
+        <!-- 打分板位置设置 -->
+        <view class="mb-0.75em">
+          <text class="mb-0.375em block text-0.875em text-gray-700">打分板位置</text>
+          <view class="flex rounded-1 bg-gray-100 p-0.25em">
+            <view
+              class="flex-1 cursor-pointer rounded-1 py-0.5em text-center text-0.875em text-gray-600 transition-all"
+              :class="settings.quickScorePosition === 'left' ? 'bg-white text-blue-500 shadow-sm' : ''"
+              @click="settings.quickScorePosition = 'left'"
+            >
+              左侧
+            </view>
+            <view
+              class="flex-1 cursor-pointer rounded-1 py-0.5em text-center text-0.875em text-gray-600 transition-all"
+              :class="settings.quickScorePosition === 'right' ? 'bg-white text-blue-500 shadow-sm' : ''"
+              @click="settings.quickScorePosition = 'right'"
+            >
+              右侧
+            </view>
+          </view>
+        </view>
+
         <!-- 一键打分 / 快捷打分 切换 -->
         <view class="mb-0.75em flex rounded-1 bg-gray-100 p-0.25em">
           <view
diff --git a/src/components/marking/components/renderer/DomImageRenderer.vue b/src/components/marking/components/renderer/DomImageRenderer.vue
index 3a74d8c..bdda0f1 100644
--- a/src/components/marking/components/renderer/DomImageRenderer.vue
+++ b/src/components/marking/components/renderer/DomImageRenderer.vue
@@ -8,6 +8,7 @@ import { useSimpleDomLayer } from '../../composables/renderer/useMarkingDom'
 interface Props {
   imageUrl: string
   scale?: number
+  containerWidth?: number // 容器宽度，用于自适应缩放
   markingData?: DomMarkingData
   currentTool: MarkingTool
   readOnly?: boolean
@@ -19,6 +20,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   scale: 1,
+  containerWidth: 0,
   readOnly: false,
   scrollOffset: () => ({ left: 0, top: 0 }),
 })
@@ -31,9 +33,27 @@ const emit = defineEmits<{
 const naturalWidth = ref(0)
 const naturalHeight = ref(0)
 
+// 计算最终使用的缩放比例
+const finalScale = computed(() => {
+  // 如果提供了 containerWidth，则根据图片宽度自动计算 scale
+  console.log('props.containerWidth', props.containerWidth)
+  console.log('naturalWidth.value', naturalWidth.value)
+  if (props.containerWidth > 0 && naturalWidth.value > 0) {
+    const calculatedScale = props.containerWidth / naturalWidth.value
+    console.log('[DomImageRenderer] Auto calculated scale:', {
+      containerWidth: props.containerWidth,
+      naturalWidth: naturalWidth.value,
+      calculatedScale,
+    })
+    return calculatedScale
+  }
+  // 否则使用传入的 scale
+  return props.scale
+})
+
 // 计算显示尺寸（应用缩放）
-const displayWidth = computed(() => naturalWidth.value * props.scale)
-const displayHeight = computed(() => naturalHeight.value * props.scale)
+const displayWidth = computed(() => naturalWidth.value * finalScale.value)
+const displayHeight = computed(() => naturalHeight.value * finalScale.value)
 function encodeSvg(svg: string) {
   return svg.replace('<svg', (~svg.indexOf('xmlns') ? '<svg' : '<svg xmlns="http://www.w3.org/2000/svg"'))
     .replace(/"/g, '\'')
@@ -127,7 +147,7 @@ function generateMarkSvg(type: 'correct' | 'wrong' | 'half'): string {
 // Layer管理器
 const message = useMessage()
 const layerManager = useSimpleDomLayer({
-  scale: computed(() => props.scale),
+  scale: finalScale,
   currentTool: computed(() => props.currentTool),
   initialData: props.markingData,
   onQuickScore: (value: number) => props.onQuickScore?.(value),
@@ -261,7 +281,11 @@ function handleTouchEnd(e: TouchEvent) {
     return
   }
 
-  layerManager.handleMouseUp()
+  layerManager.handleMouseUp(e, {
+    ...cachedRect,
+    scrollLeft: props.scrollOffset.left,
+    scrollTop: props.scrollOffset.top,
+  })
 }
 
 /**
@@ -342,7 +366,7 @@ onMounted(async () => {
       :style="{
         width: `${naturalWidth}px`,
         height: `${naturalHeight}px`,
-        transform: `scale(${scale})`,
+        transform: `scale(${finalScale})`,
         transformOrigin: 'top left',
         pointerEvents: 'none',
       }"
@@ -440,7 +464,7 @@ onMounted(async () => {
       <view
         v-for="annotation in layerManager.markingData.value.annotations"
         :key="annotation.id"
-        class="absolute font-bold flex items-center"
+        class="absolute flex items-center font-bold"
         :style="{
           left: `${annotation.x}px`,
           top: `${annotation.y}px`,
@@ -454,7 +478,7 @@ onMounted(async () => {
         <text>{{ annotation.text }}</text>
         <view
           v-if="annotation.scoreValue !== undefined && !readOnly"
-          class="flex items-center justify-center bg-red-500 text-white rounded-full"
+          class="flex items-center justify-center rounded-full bg-red-500 text-white"
           :style="{
             width: `${annotation.fontSize * 0.8}px`,
             height: `${annotation.fontSize * 0.8}px`,
diff --git a/src/components/marking/composables/renderer/useMarkingDom.ts b/src/components/marking/composables/renderer/useMarkingDom.ts
index 346dde0..181aa0a 100644
--- a/src/components/marking/composables/renderer/useMarkingDom.ts
+++ b/src/components/marking/composables/renderer/useMarkingDom.ts
@@ -105,6 +105,15 @@ export function useSimpleDomLayer({
   const isDrawing = ref(false)
   const currentDrawingShape = ref<DomShape | null>(null)
 
+  // 点击/触摸状态追踪（用于区分点击和拖拽）
+  const touchStartTime = ref(0)
+  const touchStartPos = ref<{ x: number, y: number } | null>(null)
+  const touchMoveDistance = ref(0)
+  const clickThreshold = {
+    maxMoveDistance: 10, // 最大移动距离（px），超过则视为拖拽
+    maxDuration: 300, // 最大时长（ms），超过则不触发快捷操作
+  }
+
   // 计算属性
   const hasMarks = computed(() => {
     return (
@@ -138,9 +147,13 @@ export function useSimpleDomLayer({
     if (!pos)
       return
 
-    // 快捷打分点击模式
+    // 记录按下时间和位置
+    touchStartTime.value = Date.now()
+    touchStartPos.value = { x: pos.x, y: pos.y }
+    touchMoveDistance.value = 0
+
+    // 快捷打分点击模式 - 不在这里处理，移到 handleMouseUp
     if (markingSettings.value.quickScoreMode === 'quick' && currentTool.value === MarkingTool.SELECT) {
-      handleQuickScoreClick(pos)
       return
     }
 
@@ -156,16 +169,10 @@ export function useSimpleDomLayer({
         e.preventDefault()
         break
       case MarkingTool.CORRECT:
-        addSpecialMark('correct', pos)
-        break
       case MarkingTool.WRONG:
-        addSpecialMark('wrong', pos)
-        break
       case MarkingTool.HALF:
-        addSpecialMark('half', pos)
-        break
       case MarkingTool.TEXT:
-        addTextAnnotation(pos)
+        // 这些操作移到 handleMouseUp 中处理
         break
       case MarkingTool.ERASER:
         eraseAt(pos)
@@ -177,7 +184,7 @@ export function useSimpleDomLayer({
    * 处理鼠标移动事件
    */
   const handleMouseMove = (e: MouseEvent | TouchEvent, containerRect: DOMRect & { scrollLeft?: number, scrollTop?: number }) => {
-    if (!isDrawing.value || readOnly)
+    if (readOnly)
       return
 
     // 检测双指手势，直接返回不处理（让全局缩放处理）
@@ -190,6 +197,17 @@ export function useSimpleDomLayer({
     if (!pos)
       return
 
+    // 计算移动距离
+    if (touchStartPos.value) {
+      const dx = pos.x - touchStartPos.value.x
+      const dy = pos.y - touchStartPos.value.y
+      const distance = Math.sqrt(dx * dx + dy * dy)
+      touchMoveDistance.value = Math.max(touchMoveDistance.value, distance)
+    }
+
+    if (!isDrawing.value)
+      return
+
     if (currentTool.value === MarkingTool.PEN) {
       e.preventDefault()
       continuePenDrawing(pos)
@@ -207,7 +225,56 @@ export function useSimpleDomLayer({
   /**
    * 处理鼠标抬起事件
    */
-  const handleMouseUp = () => {
+  const handleMouseUp = (e: MouseEvent | TouchEvent, containerRect: DOMRect & { scrollLeft?: number, scrollTop?: number }) => {
+    const endTime = Date.now()
+    const duration = endTime - touchStartTime.value
+    const moveDistance = touchMoveDistance.value
+
+    // 判断是否为有效点击（移动距离小且时长短）
+    const isValidClick = moveDistance < clickThreshold.maxMoveDistance && duration < clickThreshold.maxDuration
+
+    console.log('[SimpleDomLayer] handleMouseUp', {
+      duration,
+      moveDistance,
+      isValidClick,
+      currentTool: currentTool.value,
+      isDrawing: isDrawing.value,
+    })
+
+    // 处理快捷打分（SELECT工具）
+    if (isValidClick && markingSettings.value.quickScoreMode === 'quick' && currentTool.value === MarkingTool.SELECT) {
+      const pos = getRelativePosition(e, containerRect)
+      if (pos) {
+        handleQuickScoreClick(pos)
+      }
+      isDrawing.value = false
+      return
+    }
+
+    // 处理记号和文本标注工具的点击操作
+    if (isValidClick && touchStartPos.value) {
+      const pos = touchStartPos.value
+      switch (currentTool.value) {
+        case MarkingTool.CORRECT:
+          addSpecialMark('correct', pos)
+          isDrawing.value = false
+          return
+        case MarkingTool.WRONG:
+          addSpecialMark('wrong', pos)
+          isDrawing.value = false
+          return
+        case MarkingTool.HALF:
+          addSpecialMark('half', pos)
+          isDrawing.value = false
+          return
+        case MarkingTool.TEXT:
+          addTextAnnotation(pos)
+          isDrawing.value = false
+          return
+      }
+    }
+
+    // 处理绘制工具的完成
     if (!isDrawing.value)
       return
 
diff --git a/src/components/marking/composables/useMarkingSettings.ts b/src/components/marking/composables/useMarkingSettings.ts
index 4c4d565..224a5bc 100644
--- a/src/components/marking/composables/useMarkingSettings.ts
+++ b/src/components/marking/composables/useMarkingSettings.ts
@@ -44,6 +44,8 @@ export interface MarkingSettings {
   quickScoreScores: number[]
   quickScoreMode: 'onekey' | 'quick'
   quickScoreLayout: 'single' | 'double'
+  // 打分板位置
+  quickScorePosition: 'left' | 'right'
 
   // 一键打分配置：key 为 "stepSize_fullScore"，value 为排序后的分数数组
   onekeyScoreConfigs: Record<string, number[]>
@@ -90,6 +92,7 @@ const defaultSettings: MarkingSettings = {
   quickScoreMode: 'onekey',
   quickScoreScores: [0.5, 1, 2, 3],
   quickScoreLayout: 'single',
+  quickScorePosition: 'right',
 
   // 一键打分默认值
   onekeyScoreConfigs: {},
diff --git a/src/components/marking/review/ReviewHeader.vue b/src/components/marking/review/ReviewHeader.vue
index 5603525..7b9d343 100644
--- a/src/components/marking/review/ReviewHeader.vue
+++ b/src/components/marking/review/ReviewHeader.vue
@@ -15,7 +15,7 @@ const emit = defineEmits<{
 
 // 筛选条件
 const selectedScore = ref<number | undefined>()
-const selectedOrderBy = ref<number>(1) // 默认按打分从小到大
+const selectedOrderBy = ref<number>(4) // 默认按打分从小到大
 
 // 排序选项
 const orderOptions = [
diff --git a/src/components/marking/review/ReviewImageRenderer.vue b/src/components/marking/review/ReviewImageRenderer.vue
index ec203db..6832fab 100644
--- a/src/components/marking/review/ReviewImageRenderer.vue
+++ b/src/components/marking/review/ReviewImageRenderer.vue
@@ -7,11 +7,11 @@ interface Props {
   markingData?: string
   score?: number
   fullScore?: number
-  scale?: number
+  containerWidth?: number // 容器宽度，用于自适应缩放
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  scale: 0.5, // 默认缩小显示
+  containerWidth: 0,
 })
 
 // 处理标记数据，确保每个图片都有对应的数据
@@ -74,11 +74,10 @@ function handleLayerReady() {
         <view class="image-wrapper relative overflow-hidden rounded-2 shadow-sm">
           <DomImageRenderer
             :image-url="imageUrl"
-            :scale="scale"
+            :container-width="containerWidth"
             :marking-data="processedMarkingData[index]"
             :current-tool="MarkingTool.SELECT"
             :read-only="true"
-            :adaptive-width="true"
             @layer-ready="handleLayerReady"
           />
 
diff --git a/src/composables/marking/useMarkingNavigation.ts b/src/composables/marking/useMarkingNavigation.ts
index ecb0855..c27f230 100644
--- a/src/composables/marking/useMarkingNavigation.ts
+++ b/src/composables/marking/useMarkingNavigation.ts
@@ -153,6 +153,8 @@ function createMarkingNavigation(_props: MarkingNavigationProps) {
     let startX = 0
     let startY = 0
     let startTime = 0
+    let lastSwipeTime = 0 // 上次触发手势的时间
+    const swipeThrottleMs = 400 // 手势节流时间：400ms
 
     const onTouchStart = (event: TouchEvent) => {
       const touch = event.touches[0]
@@ -171,6 +173,12 @@ function createMarkingNavigation(_props: MarkingNavigationProps) {
       const deltaY = endY - startY
       const deltaTime = endTime - startTime
 
+      // 检查节流：距离上次触发是否超过400ms
+      if (endTime - lastSwipeTime < swipeThrottleMs) {
+        console.log('🤚 手势触发过于频繁，已忽略')
+        return
+      }
+
       // 检查是否超时
       if (deltaTime > swipeConfig.timeout) {
         return
@@ -185,6 +193,9 @@ function createMarkingNavigation(_props: MarkingNavigationProps) {
         return
       }
 
+      // 更新最后触发时间
+      lastSwipeTime = endTime
+
       // 判断滑动方向（优先水平方向）
       if (absX > absY) {
         // 水平滑动
diff --git a/src/pages/marking/grading.vue b/src/pages/marking/grading.vue
index 8adeafc..1c41670 100644
--- a/src/pages/marking/grading.vue
+++ b/src/pages/marking/grading.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import { useQueryClient } from '@tanstack/vue-query'
-import { whenever } from '@vueuse/core'
+import { watchImmediate, 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'
@@ -289,6 +289,11 @@ onMounted(async () => {
   try {
     containerSize.value = await getContainerSize()
     console.log('Container size:', containerSize.value)
+
+    // 延迟1秒再次计算比例，确保图片铺满
+    setTimeout(() => {
+      recalculateScale()
+    }, 1000)
   }
   catch (error) {
     console.warn('Failed to get container size:', error)
@@ -379,6 +384,10 @@ const currentQuestion = computed(() => {
   return questions.value[0]
 })
 const currentTask = computed(() => currentQuestions.value?.tasks?.[taskType.value])
+const fullScore = ref(0)
+watchImmediate(currentQuestion, () => {
+  fullScore.value = currentQuestion.value?.full_score || 0
+})
 
 // 当前答题卡图片列表
 const currentImageUrls = computed(() => currentQuestion.value?.image_urls || [])
@@ -608,10 +617,10 @@ const nextQuestionImages = computed(() => {
       <!-- 打分区域（横屏和竖屏共用） -->
       <template #scoring>
         <QuickScorePanel
-          v-if="currentQuestion"
           :is-landscape="isLandscape"
-          :full-score="currentQuestion.full_score"
+          :full-score="fullScore"
           @score-selected="handleQuickScoreSelect"
+          @toggle-collapse="recalculateScale"
         />
       </template>
     </MarkingLayout>
@@ -638,7 +647,7 @@ const nextQuestionImages = computed(() => {
       v-if="currentQuestion"
       v-model="showAnswer"
       :question-title="`${currentQuestion?.question_major}.${currentQuestion?.question_minor}`"
-      :full-score="currentQuestion?.full_score"
+      :full-score="fullScore"
       :standard-answer="currentQuestion?.standard_answer || ''"
     />
 
diff --git a/src/pages/marking/review.vue b/src/pages/marking/review.vue
index fed5e51..a5c73ce 100644
--- a/src/pages/marking/review.vue
+++ b/src/pages/marking/review.vue
@@ -8,7 +8,8 @@
 </route>
 
 <script lang="ts" setup>
-import { useQuery } from '@tanstack/vue-query'
+import { useInfiniteQuery, useQuery } from '@tanstack/vue-query'
+import { whenever } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
 import { examMarkingTaskApi } from '@/api'
@@ -55,46 +56,65 @@ const {
   select: data => data?.history_scores || [],
 })
 
-// 获取历史记录数据
-const currentPage = ref(1)
-const pageSize = ref(20)
+// 每页数量
+const pageSize = 20
 
+// 使用 useInfiniteQuery 获取历史记录数据
 const {
   data: historyData,
   isLoading: isLoadingHistory,
   error: historyError,
+  fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage,
   refetch: refetchHistory,
-} = useQuery({
-  queryKey: ['review-history', taskId, currentPage, selectedScore, selectedOrderBy, useUserId()],
-  queryFn: () => examMarkingTaskApi.historyDetail(
+} = useInfiniteQuery({
+  queryKey: ['review-history-infinite', taskId, selectedScore, selectedOrderBy, useUserId()],
+  queryFn: ({ pageParam = 1 }) => examMarkingTaskApi.historyDetail(
     taskId.value!,
     {
-      page: currentPage.value,
-      page_size: pageSize.value,
+      page: pageParam,
+      page_size: pageSize,
       is_review: true,
       history_score: selectedScore.value,
       order_by: selectedOrderBy.value,
     },
   ),
   enabled: enableQuery,
+  initialPageParam: 1,
+  getNextPageParam: (lastPage, allPages, lastPageParam) => {
+    // 如果还有更多数据，返回下一页页码
+    if (lastPage?.has_more) {
+      return lastPageParam + 1
+    }
+    // 没有更多数据时返回 undefined
+    return undefined
+  },
 })
 
-// 历史记录列表
-const historyList = computed(() => historyData.value?.list || [])
-const totalCount = computed(() => historyData.value?.total || 0)
+// 历史记录列表 - 合并所有页面的数据
+const historyList = computed(() => {
+  if (!historyData.value?.pages) {
+    return []
+  }
+  return historyData.value.pages.flatMap(page => page?.list || [])
+})
+
+// 总数（从第一页获取）
+const totalCount = computed(() => historyData.value?.pages?.[0]?.total || 0)
 
 // 处理分数筛选变化
 function handleScoreChange(score?: number) {
   console.log('分数筛选变化:', score)
   selectedScore.value = score
-  currentPage.value = 1 // 重置到第一页
+  // 筛选变化时，useInfiniteQuery 会自动重置到第一页
 }
 
 // 处理排序变化
 function handleOrderChange(orderBy: number) {
   console.log('排序变化:', orderBy)
   selectedOrderBy.value = orderBy
-  currentPage.value = 1 // 重置到第一页
+  // 排序变化时，useInfiniteQuery 会自动重置到第一页
 }
 
 // 返回上一页
@@ -105,6 +125,23 @@ function goBack() {
 // 分数编辑对话框
 const scoreEditDialogRef = ref<InstanceType<typeof ScoreEditDialog>>()
 
+// 容器宽度
+const containerWidth = ref(0)
+
+// 获取容器宽度
+whenever(() => historyData.value?.pages?.length, () => {
+  setTimeout(() => {
+    const query = uni.createSelectorQuery()
+    query.select('.image-container').boundingClientRect((data) => {
+      if (data && !Array.isArray(data)) {
+        // 减去padding和边框，获取实际可用宽度
+        containerWidth.value = data.width - 32 // 32 = padding 16px * 2
+        console.log('[Review] Container width:', containerWidth.value)
+      }
+    }).exec()
+  }, 100)
+}, { immediate: true })
+
 // 处理图片点击编辑分数
 async function handleImageClick(record: any) {
   try {
@@ -131,14 +168,13 @@ async function handleImageClick(record: any) {
 
 // 加载更多
 function loadMore() {
-  if (historyData.value?.has_more) {
-    currentPage.value += 1
+  if (hasNextPage.value && !isFetchingNextPage.value) {
+    fetchNextPage()
   }
 }
 
 // 刷新数据
 function handleRefresh() {
-  currentPage.value = 1
   refetchHistory()
 }
 </script>
@@ -174,7 +210,7 @@ function handleRefresh() {
       </view>
 
       <!-- 历史记录列表 -->
-      <view v-else-if="historyList.length > 0" class="history-list">
+      <view v-else-if="historyList.length > 0" :key="containerWidth" class="history-list">
         <view
           v-for="record in historyList"
           :key="record.id"
@@ -200,6 +236,7 @@ function handleRefresh() {
               :marking-data="record.remark"
               :score="record.score"
               :full-score="record.full_score"
+              :container-width="containerWidth"
             />
             <view v-else class="no-image flex-center h-32 rounded-2 bg-gray-100">
               <text class="text-gray-400">暂无图片</text>
@@ -208,14 +245,16 @@ function handleRefresh() {
         </view>
 
         <!-- 加载更多 -->
-        <view v-if="historyData?.has_more" class="load-more py-4">
+        <view v-if="hasNextPage" class="load-more py-4">
           <wd-button
             type="primary"
             size="small"
             block
+            :loading="isFetchingNextPage"
+            :disabled="isFetchingNextPage"
             @click="loadMore"
           >
-            加载更多
+            {{ isFetchingNextPage ? '加载中...' : '加载更多' }}
           </wd-button>
         </view>