feat(Design): 新增图文题型组件

- 添加 Contenteditable组件用于富文本编辑
- 实现 CheckboxQuestionAction 组件用于多选题配置
- 开发 TextWithImages 组件用于图文题型展示
- 更新 QuestionAction 组件以支持多选题操作
- 调整 QuestionBefore 组件移除分组功能

components.d.ts

@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Contenteditable: typeof import('./src/components/contenteditable.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanActionSheet: typeof import('vant/es')['ActionSheet']

src/components/contenteditable.vue

@@ -0,0 +1,117 @@
+<template>
+  <div
+    ref="editor"
+    contenteditable="true"
+    class="van-field"
+    @focus="showToolbar"
+    @blur="save"
+    v-html="modelValue"
+  ></div>
+  <div ref="editorAction" class="editor-action">
+    <button v-for="item in actions" :key="item.name" @click="funEvent(item)">{{ item.label }}</button>
+  </div>
+</template>
+
+<script setup>
+import { defineEmits, ref, onMounted, onBeforeUnmount } from 'vue';
+
+defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  }
+});
+
+const editor = ref(null);
+const editorAction = ref(null);
+const emit = defineEmits(['update:modelValue']);
+let lastHeight = window.innerHeight;
+
+const save = (e) => {
+  emit('update:modelValue', e.target.innerHTML);
+};
+
+const functions = {
+  boldModern: () => {
+    document.execCommand('bold', false, null);
+  },
+  underLine: () => {
+    document.execCommand('underline', false, null);
+  },
+  italic: () => {
+    document.execCommand('italic', false, null);
+  }
+};
+
+const funEvent = (item) => {
+  functions[item.fun]();
+};
+
+const actions = [
+  {
+    label: '加粗',
+    fun: 'boldModern',
+    icon: ''
+  },
+  {
+    label: '下划线',
+    fun: 'underLine',
+    icon: ''
+  },
+  {
+    label: '图片上传',
+    fun: 'uploadImage',
+    icon: ''
+  },
+  {
+    label: '倾斜',
+    fun: 'italic'
+  }
+];
+
+const showToolbar = () => {
+  editorAction.value.style.display = '';
+};
+
+const handleResize = () => {
+  const currentHeight = window.innerHeight;
+  if (currentHeight < lastHeight) {
+    // 键盘弹出
+    editorAction.value.style.display = '';
+  } else {
+    setTimeout(() => {
+      // 键盘收起
+      editorAction.value.style.display = 'none';
+    }, 100);
+  }
+  lastHeight = currentHeight;
+};
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<style scoped lang="scss">
+.editor-action {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 3000;
+  width: 100%;
+  height: 40px;
+  padding: 0 10px;
+  background: #fff;
+  line-height: 40px;
+
+  & button {
+    border: none;
+    background: #fff;
+    outline: none;
+  }
+}
+</style>

src/views/Design/Index.vue

@@ -43,6 +43,14 @@
             :active="chooseQuestionId === element.id"
             sn="lXEBBpE2"
           />
+
+          <!--图文-->
+          <TextWithImages
+            v-if="element.question_type === 6"
+            :element="element"
+            :active="chooseQuestionId === element.id"
+          />
+
           <!--组件底部左侧操作-->
           <template #action="{ element: el }">
             <div class="flex slot-actions">
@@ -89,6 +97,7 @@ import Paging from './components/Questions/paging/Paging.vue';
 import Completion from './components/Questions/Completion.vue';
 import MartrixQuestion from './components/Questions/MartrixQuestion.vue';
 import Rate from './components/Questions/Rate.vue';
+import TextWithImages from '@/views/Design/components/Questions/TextWithImages.vue';
 
 const activeIndex = ref(-1);
 /**

src/views/Design/components/ActionCompoents/QuestionAction.vue

@@ -44,6 +44,12 @@
           <span> {{ getSkipTypeText(0) }} <van-icon name="arrow"></van-icon></span>
         </template>
       </van-cell>
+      <van-divider></van-divider>
+      <!--      根据不同题型 展示不同的操作-->
+      <checkbox-question-action
+        v-if="activeQuestion.question_type === 2"
+        v-model="activeQuestion"
+      ></checkbox-question-action>
     </van-cell-group>
   </van-action-sheet>
   <!--  移动 复制-->
@@ -84,6 +90,7 @@
   </van-popup>
 </template>
 <script setup>
+import checkboxQuestionAction from './components/QuestionItemAction/checkboxQuestionAction.vue';
 import { showConfirmDialog } from 'vant';
 import { ref } from 'vue';
 import { useCounterStore } from '@/stores/counter';
@@ -183,8 +190,8 @@ const getSkipTypeText = (skipType) => {
   const ls = [];
   logics.map((item) => {
     if (
-      item.skip_type === skipType &&
+      item.skip_type === skipType
-      item.question_index === activeQuestion.value.question_index
+      && item.question_index === activeQuestion.value.question_index
     ) {
       ls.push(item);
     }
@@ -200,13 +207,13 @@ const getSkipTypeText = (skipType) => {
 
 const questionSetting = (type) => {
   switch (type) {
-    case 'before':
+  case 'before':
-      questionBeforeShow.value = true;
+    questionBeforeShow.value = true;
 
-      break;
+    break;
-    case 'after':
+  case 'after':
-      questionBeforeShow.value = true;
+    questionBeforeShow.value = true;
-      break;
+    break;
   }
   skipType.value = type === 'before' ? 1 : 0;
 };

src/views/Design/components/ActionCompoents/components/QuestionItemAction/CheckboxQuestionAction.vue

@@ -0,0 +1,69 @@
+<template>
+  <van-cell title="选项数量" :border="false" label-align="left"> </van-cell>
+  <van-field
+    v-model="actionQuestion.config.min_select"
+    label="最少"
+    type="number"
+    :border="false"
+    label-align="left"
+    input-align="right"
+    class="action-field"
+    placeholder="不限"
+    @update:model-value="
+      (value) => {
+        actionQuestion.config.min_select = Number(value);
+      }
+    "
+  >
+    <template #right-icon>
+      <span>个</span>
+    </template>
+  </van-field>
+  <van-field
+    v-model="actionQuestion.config.max_select"
+    label="最多"
+    type="number"
+    :border="false"
+    placeholder="不限"
+    input-align="right"
+    class="action-field"
+    @update:model-value="
+      (value) => {
+        actionQuestion.config.max_select = Number(value);
+      }
+    "
+  >
+    <template #right-icon>
+      <span>个</span>
+    </template>
+  </van-field>
+</template>
+<script setup>
+import { computed, defineEmits } from 'vue';
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+const actionQuestion = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  }
+});
+</script>
+<style scoped lang="scss">
+.action-field {
+  & ::v-deep .van-field__label {
+    color: #bfbfbf;
+    font-size: 14px;
+  }
+}
+</style>

src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue

@@ -279,12 +279,12 @@ const groupOptions = [
   {
     label: '选项',
     value: 0
-  },
-  {
-    label: '分组',
-    value: 1
-    // disabled: true
   }
+  // {
+  //   label: '分组',
+  //   value: 1
+  //   // disabled: true
+  // }
 ];
 const settingIfOptions = [
   { label: 'if', value: 'if' },

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="container text-with-images-container">
+    <van-field
+      readonly
+      :label="element.stem"
+      :required="element.config.is_required === 1"
+      label-align="top"
+      class="base-select"
+    >
+      <template #label>
+        <contenteditable v-model="element.stem"></contenteditable>
+      </template>
+    </van-field>
+  </div>
+</template>
+<script setup>
+import contenteditable from '@/components/contenteditable.vue';
+import { ref } from 'vue';
+const props = defineProps({
+  element: {
+    type: Object,
+    default: () => {
+      return {
+        stem: ''
+      };
+    }
+  },
+  active: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const element = ref(props.element);
+
+</script>
+<style scoped lang="scss">
+</style>