feat/design: 优化矩阵题样式和功能

- 新增矩阵题类型的支持和样式
- 修复矩阵题选项保存逻辑
-优化矩阵题输入框样式
- 新增项目名称保存功能
- 调整问卷创建页面逻辑

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

@@ -4,16 +4,21 @@ import MatrixCheckbox from '@/views/Design/components/Questions/MatrixCheckbox.v
 import MatrixText from '@/views/Design/components/Questions/MatrixText.vue';
 import MatrixRadio from '@/views/Design/components/Questions/MatrixRadio.vue';
 
-const question = defineModel<question>('element', { default: () => ({}), required: false });
+const question = defineModel<question>('element', {
+  type: Object,
+  default: () => {
+    return {};
+  }
+});
 // eslint-disable-next-line
 const activeComponent = computed<Component>(() => {
   switch (question.value.question_type) {
-  case 8:
-    return MatrixText;
-  case 9:
-    return MatrixRadio;
-  case 10:
-    return MatrixCheckbox;
+    case 8:
+      return MatrixText;
+    case 9:
+      return MatrixRadio;
+    case 10:
+      return MatrixCheckbox;
   }
 });
 
@@ -33,30 +38,33 @@ console.log(rows.value, cols.value);
   active: boolean;
 }>();
 
+const emit = defineEmits(['update:element']);
 const emitValue = () => {
-  emit('update:element', element.value);
+  console.log(question.value);
+  emit('update:element', question.value);
 };
 </script>
 
 <template>
   <van-field
-    v-model="element.stem"
-    :label="element.stem"
-    :required="element.config.is_required === 1"
+    v-model="question.stem"
+    :label="question.stem"
+    :required="question.config.is_required === 1"
     label-align="top"
+    class="contenteditable-question-title"
   >
     <template #left-icon>
       {{ index + 1 }}
     </template>
     <!-- 使用 title 插槽来自定义标题 -->
     <template #label>
-      <h1>
-        <contenteditable v-model="element.stem" :active="active" @blur="emitValue" />
-      </h1>
+      <contenteditable v-model="question.stem" :active="active" @blur="emitValue" />
     </template>
 
     <template #input>
+      <!--      <div style="width: 1000px; overflow: scroll">-->
       <Component :is="activeComponent" v-model:rows="rows" v-model:cols="cols" />
+      <!--      </div>-->
     </template>
     <!-- 使用 label 插槽来自定义标题 -->
     <!--    <template #input>-->
@@ -104,7 +112,7 @@ const emitValue = () => {
     <!--    </template>-->
   </van-field>
 </template>
-<style lang="scss">
+<style lang="scss" scoped>
 .matrix-table {
   width: 100%;
   border-collapse: collapse;
@@ -116,8 +124,6 @@ const emitValue = () => {
 
   th,
   td {
-    //min-width: 80px;
-    //padding: 8px;
     border-width: 0 0 1px;
     text-align: center;
   }
@@ -126,24 +132,4 @@ const emitValue = () => {
 .td-input {
   text-align: center;
 }
-
-input[type='text'] {
-  width: 85%;
-  border: none;
-  border-radius: 5px;
-  outline: 1px solid #ddd;
-}
-
-input[type='checkbox'] {
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  background-color: red;
-  outline: none;
-}
-
-input[type='radio'] {
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  outline: none;
-}
 </style>