From 8d8772021ece9968d4968a59740e146bfea5632d 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: Sat, 15 Mar 2025 18:09:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(Design):=20=E4=BC=98=E5=8C=96=E9=97=AE?=
 =?UTF-8?q?=E5=8D=B7=E8=AE=BE=E8=AE=A1=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=20-=20=E5=AE=9E=E7=8E=B0=E9=80=89=E9=A1=B9=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加内容可编辑组件拖拽排序功能
- 优化题目和选项的样式
- 添加右键拖拽功能
---
 src/assets/css/public.scss                    | 50 +++++++++-
 src/components/contenteditable.vue            | 27 +++--
 src/views/Design/Index.vue                    | 21 ++--
 .../ActionCompoents/OptionAction.vue          | 99 +++++++++++--------
 .../Design/components/Questions/Choice.vue    | 34 ++++++-
 5 files changed, 171 insertions(+), 60 deletions(-)

diff --git a/src/assets/css/public.scss b/src/assets/css/public.scss
index b27aa60..8f88733 100644
--- a/src/assets/css/public.scss
+++ b/src/assets/css/public.scss
@@ -32,7 +32,7 @@
   }
 }
 
-.van-switch--on{
+.van-switch--on {
   background: $theme-color;
 }
 
@@ -51,3 +51,51 @@
     background-color: rgba(0, 0, 0, 0.7) !important;
   }
 }
+
+.contenteditable {
+  width: 100%;
+}
+
+.contenteditable-input {
+  width: 100%;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 8px;
+  background: #fafbfc;
+  outline: 1px solid #f4f4f4;
+  font-size: 14px;
+}
+
+.contenteditable-label {
+  width: 100%;
+
+  //outline: 1px solid #ccc;
+  //border-bottom: 1px solid #ccc;
+}
+
+.contenteditable-question-title {
+  & .van-cell__title {
+    position: relative;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      bottom: -2px;
+      box-sizing: border-box;
+      width: 100%;
+      border-bottom: 0.0267rem solid #ebedf0;
+      pointer-events: none;
+      transform: scaleY(0.5);
+    }
+
+    &:focus-within::after {
+      border-bottom-color: $theme-color;
+    }
+
+    & .contenteditable-label {
+      & :focus {
+        //color: green;
+      }
+    }
+  }
+}
diff --git a/src/components/contenteditable.vue b/src/components/contenteditable.vue
index d5c0c4f..67418c6 100644
--- a/src/components/contenteditable.vue
+++ b/src/components/contenteditable.vue
@@ -1,11 +1,16 @@
 <template>
-  <p
-    ref="editor"
-    :contenteditable="active"
-    class="van-field"
-    :class="className"
-    v-html="modelValue"
-  ></p>
+  <div class="flex contenteditable align-center space-between" :class="className">
+    <p
+      ref="editor"
+      :contenteditable="active"
+      class="van-field contenteditable-content"
+      v-html="modelValue"
+    ></p>
+    <div class="right-icon ml10">
+      <slot name="right-icon"></slot>
+    </div>
+  </div>
+
   <div v-if="showAction && active" ref="editorAction" class="editor-action">
     <button v-for="item in actions" :key="item.name" @click="funEvent(item, $event)">
       {{ item.label }}
@@ -138,6 +143,14 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.contenteditable-content {
+  width: 100%;
+}
+
+.right-icon {
+  color: #c4c9d4;
+}
+
 .editor-action {
   position: fixed;
   bottom: 0;
diff --git a/src/views/Design/Index.vue b/src/views/Design/Index.vue
index 9ed3896..f2c084e 100644
--- a/src/views/Design/Index.vue
+++ b/src/views/Design/Index.vue
@@ -4,7 +4,7 @@
       v-if="questionInfo.questions.length > 0"
       v-model:data="questionInfo.questions"
       item-key="id"
-      handle=".moverQues"
+      handle=".moveQuestion"
       chosenClass="chosen"
       animation="300"
       :scroll="true"
@@ -105,8 +105,11 @@
                   class="flex"
                 >
                   <template v-for="(act, actIndex) in item.actions" :key="actIndex">
-                    <div class="flex align-center action-item" @click="actionEvent(act, el)">
-                      <van-icon :name="act.icon"></van-icon>
+                    <div
+                      class="flex align-center action-item theme-color"
+                      @click="actionEvent(act, el)"
+                    >
+                      <van-icon :name="act.icon" class="icons"></van-icon>
                       <span class="ml10">{{ act.label }}</span>
                     </div>
                   </template>
@@ -269,7 +272,7 @@ const actionOptions = [
     actions: [
       {
         label: '添加选项',
-        icon: 'add',
+        icon: 'add-o',
         fun: 'radioAddOption'
       }
     ]
@@ -280,12 +283,12 @@ const actionOptions = [
     actions: [
       {
         label: '添加行标签',
-        icon: 'add',
+        icon: 'add-o',
         fun: 'addMatrixRowOption'
       },
       {
         label: '添加列标签',
-        icon: 'add',
+        icon: 'add-o',
         fun: 'addMatrixColumnOption'
       }
     ]
@@ -448,7 +451,11 @@ onMounted(() => {
   //background-color: #e9eef3;
   color: #333;
 
-  .slot-actions {
+  ::v-deep .slot-actions {
+    & .action-item {
+      font-size: 15px;
+    }
+
     & .action-item + .action-item {
       margin-left: 10px;
     }
diff --git a/src/views/Design/components/ActionCompoents/OptionAction.vue b/src/views/Design/components/ActionCompoents/OptionAction.vue
index 6441745..94f1e02 100644
--- a/src/views/Design/components/ActionCompoents/OptionAction.vue
+++ b/src/views/Design/components/ActionCompoents/OptionAction.vue
@@ -1,15 +1,31 @@
 <template>
   <div class="option-action">
-    <template v-for="(item, index) in data" :key="index">
-      <div class="flex align-center option-action-container">
-        <slot name="item" :element="item" :index="index"></slot>
-        <span v-if="active" class="flex">
-          <van-icon class-prefix="mobilefont" name="setting " @click="openMoveModel(item, index)" />
-          <van-icon class-prefix="mobilefont" name="gengduo " @click="openOptionActionModel(item, index)" />
-          <van-icon class-prefix="mobilefont" name="del1 " @click="deleteOption(index)" />
-        </span>
-      </div>
-    </template>
+    <draggable
+      v-model:data="data"
+      item-key="option_index"
+      :handle="handle"
+      chosenClass="chosen"
+      animation="300"
+      :scroll="true"
+    >
+      <template #item="{ element, index }">
+        <div class="flex align-center option-action-container">
+          <slot name="item" :element="element" :index="index"></slot>
+          <span v-if="active" class="flex">
+            <!--<van-icon class-prefix="mobilefont"
+            name="setting "
+              @click="openMoveModel(element, index)
+              "/>-->
+            <van-icon
+              class-prefix="mobilefont"
+              name="gengduo "
+              @click="openOptionActionModel(element, index)"
+            />
+            <van-icon class-prefix="mobilefont" name="del1 " @click="deleteOption(index)" />
+          </span>
+        </div>
+      </template>
+    </draggable>
   </div>
   <!--  操作项弹窗-->
   <van-action-sheet v-model:show="show">
@@ -66,15 +82,8 @@
 import CheckboxAction from './components/OptionItemAction/CheckboxAction.vue';
 import { ref } from 'vue';
 import { showConfirmDialog } from 'vant';
+import Draggable from '@/views/Design/components/Draggable.vue';
 const props = defineProps({
-  data: {
-    type: Object,
-    default: () => {
-      return {
-        stem: ''
-      };
-    }
-  },
   active: {
     type: Boolean,
     default: false
@@ -84,9 +93,17 @@ const props = defineProps({
     default: () => {
       // 空
     }
+  },
+  handle: {
+    type: String,
+    default: ''
   }
 });
 
+const data = defineModel('data', {
+  type: Array,
+  default: () => []
+});
 const actions = [
   { name: '上移选项', action: 'up' },
   { name: '下移选项', action: 'down' }
@@ -109,31 +126,31 @@ const openOptionActionModel = (item, index) => {
   activeOption.value = item;
   activeIndex.value = index;
 };
-const openMoveModel = (item, index) => {
-  moveShow.value = true;
-  activeOption.value = item;
-  activeIndex.value = index;
-};
+// const openMoveModel = (item, index) => {
+//   moveShow.value = true;
+//   activeOption.value = item;
+//   activeIndex.value = index;
+// };
 // 上下移动
 const optionMove = (action) => {
   switch (action.action) {
-  case 'up':
-    if (activeIndex.value === 0) {
-      moveShow.value = false;
-      return false;
-    }
-    // 向上移动
-    element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-    activeIndex.value -= 1;
-    break;
-  case 'down':
-    if (activeIndex.value === element.value.length - 1) {
-      moveShow.value = false;
-      return false;
-    }
-    element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-    activeIndex.value += 1;
-    break;
+    case 'up':
+      if (activeIndex.value === 0) {
+        moveShow.value = false;
+        return false;
+      }
+      // 向上移动
+      element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+      activeIndex.value -= 1;
+      break;
+    case 'down':
+      if (activeIndex.value === element.value.length - 1) {
+        moveShow.value = false;
+        return false;
+      }
+      element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+      activeIndex.value += 1;
+      break;
   }
 };
 
@@ -164,7 +181,7 @@ const deleteOption = (index) => {
   & .option-action-container {
     font-size: 16px;
 
-    & .mobilefont{
+    & .mobilefont {
       font-size: 16px;
     }
 
diff --git a/src/views/Design/components/Questions/Choice.vue b/src/views/Design/components/Questions/Choice.vue
index 19964ca..f9e0ddb 100644
--- a/src/views/Design/components/Questions/Choice.vue
+++ b/src/views/Design/components/Questions/Choice.vue
@@ -4,13 +4,18 @@
     :label="element.stem"
     :required="element.config.is_required === 1"
     label-align="top"
-    class="base-select"
+    class="contenteditable-question-title base-select"
   >
     <template #left-icon>
       {{ index + 1 }}
     </template>
     <template #label>
-      <contenteditable v-model="element.stem" :active="active" @blur="emitValue"></contenteditable>
+      <contenteditable
+        v-model="element.stem"
+        className="contenteditable-label"
+        :active="active"
+        @blur="emitValue"
+      ></contenteditable>
     </template>
     <template #input>
       <template v-for="(item, optionIndex) in element.options" :key="item.id">
@@ -19,6 +24,7 @@
             v-model:data="element.options[optionIndex]"
             :active="active"
             :question="element"
+            handle=".moverQues"
           >
             <template #item="{ element: it, index: itIndex }">
               <van-radio
@@ -31,7 +37,17 @@
                 <!--       自定义文本         -->
                 <template #default>
                   <div class="flex align-center van-cell">
-                    <contenteditable v-model="it.option" :active="active"></contenteditable>
+                    <contenteditable
+                      v-model="it.option"
+                      className="contenteditable-input"
+                      :active="active"
+                    >
+                      <template #right-icon>
+                        <div v-if="active" class="moverQues">
+                          <van-icon class-prefix="mobilefont" name="option "></van-icon>
+                        </div>
+                      </template>
+                    </contenteditable>
                     <div v-if="it.is_other">
                       <input class="other-input" type="text" />
                     </div>
@@ -57,7 +73,17 @@
               >
                 <template #default>
                   <div class="flex align-center van-cell">
-                    <contenteditable v-model="it.option" :active="active"></contenteditable>
+                    <contenteditable
+                      v-model="it.option"
+                      className="contenteditable-input"
+                      :active="active"
+                    >
+                      <template #right-icon>
+                        <div v-if="active" class="moverQues">
+                          <van-icon class-prefix="mobilefont" name="option "></van-icon>
+                        </div>
+                      </template>
+                    </contenteditable>
                     <div v-if="it.is_other">
                       <input class="other-input" type="text" />
                     </div>