feat: 矩阵样式更改

- 通过 matrixQuestion 来适配相应的矩阵问题
- 矩阵的样式更新

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

@@ -4,23 +4,27 @@
       <tr>
         <th></th>
         <td v-for="col in cols" :key="col.option">
+          <contenteditable v-model="col.option" :active="active" @blur="emitValue" />
+
           <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
-          <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"></span>
+          <!--          <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"></span>-->
         </td>
       </tr>
     </thead>
     <tbody>
       <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
-        <th v-html="row.option"></th>
-        <td v-for="(col, colIndex) in cols" :key="colIndex">
+        <!--        <th v-html="row.option"></th>-->
+        <contenteditable v-model="row.option" :active="active" @blur="emitValue" />
+
+        <th v-for="(col, colIndex) in cols" :key="colIndex">
           <input
             type="checkbox"
             :name="`R${rowIndex + 1}`"
@@ -28,15 +32,15 @@
             :checked="isOptionChecked(rowIndex, colIndex)"
             @change="handleMatrixRadioChange(rowIndex, colIndex)"
           />
-        </td>
+        </th>
       </tr>
     </tbody>
   </table>
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
-import { vFocus } from '@/utils/directives/useVFocus';
+// import { defineProps } from 'vue';
+// import { vFocus } from '@/utils/directives/useVFocus';
 
 // 记录行和列的索引
 const rowRecord = defineModel<number[][]>('rowRecord', { required: false, default: () => [] });
@@ -44,14 +48,16 @@ const rowRecord = defineModel<number[][]>('rowRecord', { required: false, defaul
 // 检查 rowRecord 是否存在
 // console.log(`rowRecord:`, rowRecord.value);
 
+const active = defineModel('active', { required: false, default: true });
 /* const isPreview =  */ defineModel<boolean>('isPreview', { required: false, default: false });
-defineProps<{
-  rows: OptionType[];
-  cols: OptionType[];
-}>();
+const rows = defineModel('rows', { required: false, default: () => [] });
+const cols = defineModel('cols', { required: false, default: () => [] });
 
 // const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);
 
+const emitValue = () => {
+  emit('update:element', element.value);
+};
 // 判断是否选中
 const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
   // [
@@ -64,10 +70,10 @@ const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
   return rowRecord.value[rowIndex].includes(colIndex);
 };
 
-const handleRowNameChange = (/* value: string */) => {
-  // console.log(`row change: ${value}`);
-  // 你可以在这里添加其他逻辑
-};
+// const handleRowNameChange = (/* value: string */) => {
+//   // console.log(`row change: ${value}`);
+//   // 你可以在这里添加其他逻辑
+// };
 
 // 当 matrix radio 选中时，更新 rowRecord 和 matrixAnswer
 function handleMatrixRadioChange(row: number, col: number) {
@@ -108,16 +114,4 @@ function handleMatrixRadioChange(row: number, col: number) {
 // };
 </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>
+<style scoped lang="scss"></style>