From 01b53ee4a0f87003651598d4771b384fb8f95681 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Thu, 6 Mar 2025 17:37:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(Design):=20=E6=96=B0=E5=A2=9E=E5=9B=BE?=
 =?UTF-8?q?=E6=96=87=E9=A2=98=E5=9E=8B=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 Contenteditable组件用于富文本编辑
- 实现 CheckboxQuestionAction 组件用于多选题配置
- 开发 TextWithImages 组件用于图文题型展示
- 更新 QuestionAction 组件以支持多选题操作
- 调整 QuestionBefore 组件移除分组功能
---
 components.d.ts                               |   1 +
 src/components/contenteditable.vue            | 117 ++++++++++++++++++
 src/views/Design/Index.vue                    |   9 ++
 .../ActionCompoents/QuestionAction.vue        |  23 ++--
 .../CheckboxQuestionAction.vue                |  69 +++++++++++
 .../QuestionItemAction/QuestionBefore.vue     |  10 +-
 .../components/Questions/TextWithImages.vue   |  38 ++++++
 7 files changed, 254 insertions(+), 13 deletions(-)
 create mode 100644 src/components/contenteditable.vue
 create mode 100644 src/views/Design/components/ActionCompoents/components/QuestionItemAction/CheckboxQuestionAction.vue
 create mode 100644 src/views/Design/components/Questions/TextWithImages.vue

diff --git a/components.d.ts b/components.d.ts
index 4bc3beb..9be9cdb 100644
--- a/components.d.ts
+++ b/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']
diff --git a/src/components/contenteditable.vue b/src/components/contenteditable.vue
new file mode 100644
index 0000000..f94b92f
--- /dev/null
+++ b/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>
diff --git a/src/views/Design/Index.vue b/src/views/Design/Index.vue
index 67a1be2..b345f8b 100644
--- a/src/views/Design/Index.vue
+++ b/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);
 /**
diff --git a/src/views/Design/components/ActionCompoents/QuestionAction.vue b/src/views/Design/components/ActionCompoents/QuestionAction.vue
index 95972c7..1cb493d 100644
--- a/src/views/Design/components/ActionCompoents/QuestionAction.vue
+++ b/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.question_index === activeQuestion.value.question_index
+      item.skip_type === skipType
+      && item.question_index === activeQuestion.value.question_index
     ) {
       ls.push(item);
     }
@@ -200,13 +207,13 @@ const getSkipTypeText = (skipType) => {
 
 const questionSetting = (type) => {
   switch (type) {
-    case 'before':
-      questionBeforeShow.value = true;
+  case 'before':
+    questionBeforeShow.value = true;
 
-      break;
-    case 'after':
-      questionBeforeShow.value = true;
-      break;
+    break;
+  case 'after':
+    questionBeforeShow.value = true;
+    break;
   }
   skipType.value = type === 'before' ? 1 : 0;
 };
diff --git a/src/views/Design/components/ActionCompoents/components/QuestionItemAction/CheckboxQuestionAction.vue b/src/views/Design/components/ActionCompoents/components/QuestionItemAction/CheckboxQuestionAction.vue
new file mode 100644
index 0000000..1f65487
--- /dev/null
+++ b/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>
diff --git a/src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue b/src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue
index a52af10..eae560f 100644
--- a/src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue
+++ b/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' },
diff --git a/src/views/Design/components/Questions/TextWithImages.vue b/src/views/Design/components/Questions/TextWithImages.vue
new file mode 100644
index 0000000..a5990cf
--- /dev/null
+++ b/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>