feat(Design): 新增矩阵题型和文件上传题型

- 新增矩阵题型组件和相关配置
- 新增文件上传题型组件和相关配置
-优化签名题型组件
- 添新的 CSS 样式类

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

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, useTemplateRef } from 'vue';
+import { computed, onMounted, ref, useTemplateRef, toRefs } from 'vue';
+
+const props = defineProps<{
+  element: any;
+  active: boolean;
+  index: number;
+}>();
+
+const { element, active } = toRefs(props);
+
 const signatureCanvas = useTemplateRef('signatureCanvas');
 
 const canvasWidth = ref(100);
@@ -63,6 +72,9 @@ onMounted(() => {
 
   // 触摸开始，开始绘制适用于移动设备
   signatureCanvas.value?.addEventListener('touchstart', (e) => {
+    if (!active.value) {
+      return;
+    }
     // 防止页面滚动
     e.preventDefault();
     isDrawing = true;
@@ -150,25 +162,51 @@ const undo = () => {
     ctx.putImageData(imageData, 0, 0);
   }
 };
+
+const emit = defineEmits(['update:element']);
+const emitValue = () => {
+  emit('update:element', element.value);
+};
 </script>
 
 <template>
   <van-cell>
-    <div class="sign-question">
-      <canvas
-        ref="signatureCanvas"
-        :width="canvasWidth"
-        :height="canvasHeight"
-        style="border: 1px solid #ccc; border-radius: 4px"
-      >
-      </canvas>
-      <div class="sign-text" :class="{ show: showSignText }">
-        <span @click="clearCanvas">清空</span>
-        <span @click="undo">撤销</span>
-        <span @click="togglePen">{{ isEraser ? '画笔' : '橡皮擦' }}</span>
-        <span @click="saveCanvas">完成并上传</span>
-      </div>
-    </div>
+    <van-field
+      :label="element.stem"
+      :required="element.config.is_required === 1"
+      label-align="top"
+      :border="false"
+      readonly
+      class="base-select"
+    >
+      <template #left-icon>
+        {{ index + 1 }}
+      </template>
+      <template #label>
+        <contenteditable
+          v-model="element.stem"
+          :active="active"
+          @blur="emitValue"
+        ></contenteditable>
+      </template>
+      <template #input>
+        <div class="sign-question">
+          <canvas
+            ref="signatureCanvas"
+            :width="canvasWidth"
+            :height="canvasHeight"
+            style="border: 1px solid #ccc; border-radius: 4px"
+          >
+          </canvas>
+          <div class="sign-text" :class="{ show: showSignText }">
+            <span @click="clearCanvas">清空</span>
+            <span @click="undo">撤销</span>
+            <span @click="togglePen">{{ isEraser ? '画笔' : '橡皮擦' }}</span>
+            <span @click="saveCanvas">完成并上传</span>
+          </div>
+        </div>
+      </template>
+    </van-field>
   </van-cell>
 </template>