feat: 完成 preview 组件的功能

- 新增 preview 组件相关的资源
- 调用 web 端部分 API
- 相关题目添加答案配置

src/views/Design/components/Questions/MatrixCheckbox.vue

@@ -0,0 +1,99 @@
+<template>
+  <table class="matrix-table">
+    <thead>
+    <tr>
+      <th></th>
+      <td v-for="col in columns" :key="col.option">
+        <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
+        <input
+          v-if="col.editor"
+          v-model="col.option"
+          v-focus
+          type="text"
+          @focusout="col.editor = false"
+          @click="handleRowNameChange(col.option!)"
+        />
+        <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"/>
+      </td>
+    </tr>
+    </thead>
+    <tbody>
+    <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
+      <th v-html="row.option"/>
+      <td v-for="(col, colIndex) in columns" :key="colIndex">
+        <input
+          type="checkbox"
+          :value="`${rowIndex + 1}_${colIndex + 1}`"
+          :checked="isOptionChecked(rowIndex, colIndex)"
+          @change="handleColNameChange(row.option, col.option, $event)"
+        />
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, defineEmits } from 'vue';
+import {vFocus} from '@/utils/directives/useVFocus';
+
+const props = defineProps<{
+  rows: { option: string }[];
+  columns: { option: string, editor?: boolean }[];
+  questionType: number;
+  matrixAnswer: { [key: string]: any };
+  rowRecord: (number | string)[];
+}>();
+
+const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);
+
+const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
+  const key = `R${rowIndex + 1}_C${colIndex + 1}`;
+  return !!props.matrixAnswer[key];
+};
+
+const handleRowNameChange = (value: string) => {
+  console.log(`row change: ${value}`);
+  // 你可以在这里添加其他逻辑
+};
+
+const handleColNameChange = (rowOption: string, colOption: string, e: Event) => {
+  const target = e.target as HTMLInputElement;
+  const col = props.columns.findIndex(option => option.option === colOption);
+  const row = props.rows.findIndex(option => option.option === rowOption);
+
+  if (props.questionType === 10) {
+    if (target.checked) {
+      props.rowRecord[col] = (props.rowRecord[col] || []).concat(row + 1);
+    } else {
+      props.rowRecord[col] = (props.rowRecord[col] || []).filter(item => item !== row + 1);
+    }
+    props.matrixAnswer = {};
+    props.rows.forEach((rowOption, rowIndex) => {
+      const colOptions = props.rowRecord[rowIndex];
+      if (colOptions) {
+        colOptions.forEach((col: any) => {
+          props.matrixAnswer[`R${rowIndex + 1}_C${col}`] = true;
+        });
+      }
+    });
+  }
+
+  emits('update:matrixAnswer', props.matrixAnswer);
+  emits('update:rowRecord', props.rowRecord);
+};
+</script>
+
+<style scoped lang="scss">
+.matrix-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.matrix-table th,
+.matrix-table td {
+  padding: 8px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+</style>