问卷考试系统设计（五）：前端引擎——渲染、状态管理与防作弊

const componentMap: Record<string, () => Promise<Component>> = {
  single_choice:  () => import('../components/questions/SingleChoice.vue'),
  multiple_choice:() => import('../components/questions/MultipleChoice.vue'),
  likert:         () => import('../components/questions/LikertScale.vue'),
  matrix:         () => import('../components/questions/MatrixQuestion.vue'),
  ranking:        () => import('../components/questions/RankingQuestion.vue'),
  fill_blank:     () => import('../components/questions/FillBlank.vue'),
  essay:          () => import('../components/questions/EssayQuestion.vue'),
  upload:         () => import('../components/questions/UploadQuestion.vue'),
  demographic:    () => import('../components/questions/Demographic.vue'),
}

export function resolveComponent(type: string) {
  const loader = componentMap[type]
  if (!loader) {
    console.warn(`未知题型: ${type}`)
    return null
  }
  return defineAsyncComponent({
    loader,
    loadingComponent: () => import('../components/QuestionSkeleton.vue'),
    delay: 100,    // 100ms 内加载完不显示 loading
    timeout: 10000,
  })
}

<script setup lang="ts">
import { resolveComponent } from '@/registry/questionRegistry'

const props = defineProps<{
  question: Question
  modelValue: unknown
}>()

const emit = defineEmits<{
  'update:modelValue': [value: unknown]
}>()

const DynamicComponent = computed(() =>
  resolveComponent(props.question.type)
)

const value = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v),
})
</script>

<template>
  <NCard :id="`question-${question.id}`" class="mb-4">
    <template #header>
      <div class="flex items-start gap-2">
        <NTag :type="question.required ? 'error' : 'default'" size="small">
          {{ question.required ? '必填' : '选填' }}
        </NTag>
        <span class="text-base font-medium">{{ question.title }}</span>
      </div>
    </template>

    <component
      v-if="DynamicComponent"
      :is="DynamicComponent"
      :question="question"
      v-model="value"
    />
    <div v-else class="text-red-500">不支持的题型: {{ question.type }}</div>
  </NCard>
</template>

<NRadioGroup v-model:value="value" :name="question.id">
  <NSpace vertical :size="12">
    <NRadio
      v-for="opt in question.options"
      :key="opt.value"
      :value="opt.value"
    >
      {{ opt.label }}
    </NRadio>
  </NSpace>
</NRadioGroup>

// stores/useAnswerStore.ts
export const useAnswerStore = defineStore('answer', () => {
  const questions = ref<Question[]>([])
  const answers = ref<Record<string, unknown>>({})

  const answeredIds = computed(() => {
    return new Set(
      Object.entries(answers.value)
        .filter(([, v]) => !isEmpty(v))
        .map(([id]) => id)
    )
  })

  const unansweredIds = computed(() => {
    return questions.value
      .filter(q => q.required && !answeredIds.value.has(q.id))
      .map(q => q.id)
  })

  const progress = computed(() => {
    if (questions.value.length === 0) return 0
    return Math.round((answeredIds.value.size / questions.value.length) * 100)
  })

  function isEmpty(value: unknown): boolean {
    if (value === null || value === undefined) return true
    if (typeof value === 'string') return value.trim() === ''
    if (Array.isArray(value)) return value.length === 0
    if (typeof value === 'object') return Object.keys(value).length === 0
    return false
  }

  function validate(): { valid: boolean; firstUnansweredId: string | null } {
    const first = unansweredIds.value[0] ?? null
    return { valid: first === null, firstUnansweredId: first }
  }

  function setAnswer(questionId: string, value: unknown) {
    answers.value[questionId] = value
  }

  function initQuestionnaire(qs: Question[]) {
    questions.value = qs
    answers.value = {}
    qs.forEach(q => {
      if (q.type === 'multiple_choice' || q.type === 'ranking') {
        answers.value[q.id] = []
      } else if (q.type === 'likert' || q.type === 'matrix') {
        answers.value[q.id] = {}
      } else if (q.type === 'upload') {
        answers.value[q.id] = []
      } else {
        answers.value[q.id] = null
      }
    })
  }

  return {
    questions, answers, answeredIds, unansweredIds, progress,
    validate, setAnswer, initQuestionnaire, isEmpty,
  }
})

export function useConditionEvaluator(
  questions: () => Question[],
  answers: () => Record<string, unknown>,
) {
  function evaluate(condition: Condition | null | undefined): boolean {
    if (!condition) return true

    const answer = answers()[condition.questionId]
    const { operator, value } = condition

    switch (operator) {
      case 'eq': return answer === value
      case 'neq': return answer !== value
      case 'in': return Array.isArray(value) && value.includes(answer as any)
      case 'not_in': return Array.isArray(value) && !value.includes(answer as any)
      case 'gt': return typeof answer === 'number' && answer > (value as number)
      case 'lt': return typeof answer === 'number' && answer < (value as number)
      default: return true
    }
  }

  const visibleQuestions = computed(() => {
    return questions().filter(q => evaluate(q.condition))
  })

  return { visibleQuestions, evaluate }
}

<template>
  <div class="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm px-4 py-2">
    <div class="max-w-3xl mx-auto flex items-center gap-3">
      <NProgress :percentage="progress" :stroke-width="10" class="flex-1" />
      <span class="text-sm text-gray-500 whitespace-nowrap">
        {{ answeredIds.size }}/{{ questions.length }}
      </span>
      <NButton text @click="showNav = true">
        <NIcon :component="List" size="20" />
      </NButton>
    </div>
  </div>

  <NDrawer v-model:show="showNav" :width="280" placement="right">
    <NDrawerContent title="题目导航">
      <div class="grid grid-cols-5 gap-2">
        <NButton
          v-for="(q, idx) in questions"
          :key="q.id"
          size="small"
          :type="answeredIds.has(q.id) ? 'success' : 'default'"
          @click="scrollToQuestion(q.id)"
        >
          {{ idx + 1 }}
        </NButton>
      </div>
    </NDrawerContent>
  </NDrawer>
</template>

// utils/shuffle.ts
// 种子随机数生成器（Mulberry32，轻量、确定性）
function mulberry32(seed: number): () => number {
  return () => {
    seed |= 0
    seed = seed + 0x6d2b79f5 | 0
    let t = Math.imul(seed ^ seed >>> 15, 1 | seed)
    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t
    return ((t ^ t >>> 14) >>> 0) / 4294967296
  }
}

// Fisher-Yates 洗牌，用种子随机数替代 Math.random()
export function seededShuffle<T>(arr: T[], seed: number): T[] {
  const result = [...arr]
  const rand = mulberry32(seed)
  for (let i = result.length - 1; i > 0; i--) {
    const j = Math.floor(rand() * (i + 1))
    ;[result[i], result[j]] = [result[j], result[i]]
  }
  return result
}

interface ShuffledQuestion {
  originalIndex: number   // 原始索引，提交答案用这个
  question: Question
  shuffledOptions?: { originalValue: string; label: string }[]
}

function shufflePaper(
  questions: Question[],
  seed: number
): ShuffledQuestion[] {
  // 1. 题目打乱
  const shuffledQuestions = seededShuffle(questions, seed)

  return shuffledQuestions.map((q, displayIndex) => {
    // 2. 选项打乱（只对选择题打乱，量表题不打乱）
    const shouldShuffleOptions = [
      'single_choice', 'multiple_choice'
    ].includes(q.type)

    let shuffledOptions
    if (shouldShuffleOptions && q.options) {
      // 每道题用不同种子，避免所有题选项顺序一样
      const optSeed = seed + displayIndex
      shuffledOptions = seededShuffle(
        q.options.map(opt => ({
          originalValue: opt.value,
          label: opt.label,
        })),
        optSeed
      )
    }

    return {
      originalIndex: questions.indexOf(q),
      question: q,
      shuffledOptions,
    }
  })
}

<template>
  <NRadioGroup v-model:value="selectedOriginalValue">
    <NSpace vertical :size="12">
      <NRadio
        v-for="opt in shuffledOptions"
        :key="opt.originalValue"
        :value="opt.originalValue"
      >
        {{ opt.label }}
      </NRadio>
    </NSpace>
  </NRadioGroup>
</template>

<script setup lang="ts">
// shuffledOptions 来自 shufflePaper() 的输出
// selectedOriginalValue 始终是原始的 option.value
// 提交时答案就是原始值，后端无需知道前端打乱了什么
const props = defineProps<{
  shuffledOptions: { originalValue: string; label: string }[]
}>()
const selectedOriginalValue = defineModel<string>()
</script>

// 预生成 20 套卷
int variantCount = 20;
List<PaperVariant> variants = IntStream.range(0, variantCount)
    .mapToObj(i -> paperGenerator.generateVariant(questionnaire, i))
    .collect(Collectors.toList());

// 用户分配
public PaperVariant assignVariant(String userId, String examId) {
    int index = Math.floorMod((userId + examId).hashCode(), variantCount);
    return variants.get(index);
}

// 后端：每人只生成一个种子 + 签名
public String signSeed(String userId, String examId, long seed) {
    String payload = userId + ":" + examId + ":" + seed;
    return HmacUtils.hmacSha256(HMAC_SECRET, payload);
}

// 后端校验提交
public void verifyAnswer(String userId, String examId, long seed, String signature) {
    String expected = signSeed(userId, examId, seed);
    if (!expected.equals(signature)) {
        throw new BusinessException("种子签名无效，可能存在篡改");
    }
}

// 预生成，启动时或考试创建时执行一次
public class PaperVariantGenerator {

    public List<PaperVariant> generate(Questionnaire q, int count) {
        return IntStream.range(0, count)
            .mapToObj(i -> {
                long seed = i;  // 用序号做种子
                List<ShuffledQuestion> shuffled = shuffleQuestions(q.getQuestions(), seed);
                return new PaperVariant(i, shuffled, seed);
            })
            .collect(Collectors.toList());
    }
}

// 用户分配，每人一次 hash 计算
public PaperVariant assign(String userId, String examId, List<PaperVariant> variants) {
    int index = Math.floorMod((userId + examId).hashCode(), variants.size());
    return variants.get(index);
}

public List<PaperDTO> batchGeneratePapers(String examId, List<String> userIds) {
    // 题目内容只生成一次，所有人共享
    Questionnaire questionnaire = questionnaireService.getLatest(examId);
    List<Question> questions = questionnaire.getQuestions();

    // 每人只生成种子 + 签名
    return userIds.stream().map(userId -> {
        long seed = generateSeed(userId, examId);
        String signature = signSeed(userId, examId, seed);
        return PaperDTO.builder()
            .paperId(generatePaperId())
            .examId(examId)
            .seed(seed)
            .signature(signature)
            .questions(questions)  // 共享同一份题目
            .build();
    }).collect(Collectors.toList());
}

export function useAntiCheat(options?: {
  onSwitchTab?: () => void
  disableCopy?: boolean
  recordTime?: boolean
}) {
  let switchCount = 0
  const switchTimestamps: number[] = []
  const startTime = Date.now()
  const timeLog: Record<string, { start: number; end?: number }> = {}

  // 切屏检测
  function handleVisibilityChange() {
    if (document.hidden) {
      switchCount++
      switchTimestamps.push(Date.now())
      message.warning(`检测到切屏（第 ${switchCount} 次），已记录`)
      options?.onSwitchTab?.()
    }
  }

  // 复制粘贴禁用
  function preventCopy(e: Event) {
    e.preventDefault()
    message.warning('禁止复制粘贴')
  }

  onMounted(() => {
    document.addEventListener('visibilitychange', handleVisibilityChange)
    if (options?.disableCopy) {
      document.addEventListener('copy', preventCopy)
      document.addEventListener('cut', preventCopy)
      document.addEventListener('paste', preventCopy)
    }
  })

  function getReport() {
    return {
      switchCount,
      switchTimestamps,
      totalTimeSeconds: Math.floor((Date.now() - startTime) / 1000),
      questionTimeLog: timeLog,
    }
  }

  return { getReport, switchCount }
}

interface AntiCheatReport {
  switchCount: number              // 切屏次数
  switchTimestamps: number[]       // 切屏时间戳
  totalTimeSeconds: number         // 总作答时长
  questionTimeLog: Record<string, {  // 每题停留时间
    start: number
    end?: number
  }>
  seed: number                     // 使用的种子（后端可验证）
  seedSignature: string            // 种子签名
}

<template>
  <!-- 移动端：纵向卡片 -->
  <div v-if="isMobile" class="likert-mobile space-y-3">
    <NCard v-for="row in rows" :key="row.value" size="small">
      <div class="font-medium mb-2">{{ row.label }}</div>
      <NRadioGroup
        :value="modelValue?.[row.value] ?? null"
        @update:value="updateRow(row.value, $event)"
      >
        <NSpace vertical :size="8">
          <NRadio v-for="sp in scalePoints" :key="sp.value" :value="sp.value"
                  class="w-full py-1">
            {{ sp.label }}
          </NRadio>
        </NSpace>
      </NRadioGroup>
    </NCard>
  </div>

  <!-- 桌面端：横向表格 -->
  <div v-else class="likert-desktop">
    <!-- 桌面版表格布局 -->
  </div>
</template>