feature(resume): 新增输入框组件切换，可以选择富文本切换

src/views/createTemplate/designer/components/ComponentTypePop.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-popover
+    popper-class="component-type-select-pop-box"
+    :teleported="teleported"
+    :width="150"
+    trigger="click"
+  >
+    <template #reference>
+      <div class="icon-popper-box">
+        <el-tooltip effect="light" content="填写框类型切换" placement="bottom">
+          <svg-icon icon-name="icon-ruanjianguanli" color="#74a274" size="18px"></svg-icon>
+        </el-tooltip>
+      </div>
+    </template>
+    <div class="component-type-select">
+      <div
+        v-for="(item, index) in cptSwitchList(type)"
+        :key="index"
+        class="icon-list-item"
+        @click="handleComponentType(item)"
+      >
+        <div class="component-item">{{ item.label }}</div>
+      </div>
+    </div>
+  </el-popover>
+</template>
+<script lang="ts" setup>
+  import { cptSwitchList } from '../setters/components/index';
+
+  interface IIcon {
+    content: any;
+    type?: any;
+    teleported?: boolean;
+  }
+  const props = withDefaults(defineProps<IIcon>(), {
+    content: '',
+    type: '',
+    teleported: true
+  });
+
+  const emit = defineEmits(['update:modelValue', 'change', 'editorSwitch']);
+
+  const type = ref<any>(props.type);
+
+  watch(
+    () => type.value,
+    (newVal, oldVal) => {
+      console.log(newVal, oldVal);
+      if (oldVal === 'editor') {
+        let contentValue = '';
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(props.content.value, 'text/html');
+        contentValue = doc.body.textContent || ''; // 获取纯文本内容
+        emit('editorSwitch', contentValue);
+      }
+      emit('update:modelValue', type.value);
+      emit('change', type.value);
+    }
+  );
+
+  // 选中图标
+  const handleComponentType = (item: any) => {
+    console.log('切换类型', props.content, item.value);
+    type.value = item.value;
+  };
+</script>
+<style lang="scss">
+  .icon-popper-box {
+    display: flex;
+    align-items: center;
+    border-radius: 5px;
+    padding: 2px 2px;
+    margin: 0 3px;
+    transition: all 0.3s;
+    margin-right: 8px;
+    cursor: pointer;
+    &:hover {
+      background-color: rgba($color: #ccc, $alpha: 0.2);
+    }
+  }
+
+  .component-type-select-pop-box {
+    padding: 5px !important;
+    .component-type-select {
+      width: 100%;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      .icon-list-item {
+        display: flex;
+        align-items: center;
+        padding: 15px 10px;
+        transition: all 0.3s;
+        font-size: 14px;
+        cursor: pointer;
+        &:hover {
+          background-color: rgba($color: #ccc, $alpha: 0.2);
+        }
+      }
+    }
+  }
+</style>

src/views/createTemplate/designer/components/DataConfig.vue

@@ -102,6 +102,15 @@
                           size="18px"
                         ></icon-select-pop>
                       </template>
+                      <!-- 组件类型切换 -->
+                      <template #component-switch>
+                        <component-type-pop
+                          v-model="moduleItem.dataSource[key].type"
+                          :content="moduleItem.dataSource[key]"
+                          :type="value.type"
+                          @editor-switch="handleEditorSwitch($event, moduleItem.dataSource[key])"
+                        ></component-type-pop>
+                      </template>
                       <!-- 组件开关 -->
                       <template #label-right>
                         <div class="field-label-right-box">
@@ -140,6 +149,7 @@
   import { ComponentPublicInstance } from 'vue';
   import hjList from '../setters/components/hj-list.vue'; // 数据配置，列表组件
   import IconSelectPop from '@/components/IconSelectPop/IconSelectPop.vue';
+  import ComponentTypePop from './ComponentTypePop.vue';
 
   const { HJNewJsonStore, selectedModuleId, moduleDataConfigRefList } = storeToRefs(
     appStore.useCreateTemplateStore
@@ -243,6 +253,12 @@
   const handleChangeSwitch = (value: boolean, index: number) => {
     HJNewJsonStore.value.componentsTree[index].customProps.showModule = value;
   };
+
+  // 如果是富文本组件切换至其他组件
+  const handleEditorSwitch = (value: string, item: any) => {
+    console.log('富文本组件切换至其他组件', value, item);
+    item.value = value;
+  };
 </script>
 
 <style lang="scss" scoped>

src/views/createTemplate/designer/modules/components/hj-abstract-1.vue

@@ -1,5 +1,5 @@
 <template>
-  <p :style="abstract">{{ module.dataSource.abstract.value }}</p>
+  <p v-dompurify-html="module.dataSource.abstract.value" :style="abstract"></p>
 </template>
 <script lang="ts" setup>
   import { IModule } from '@/views/createTemplate/types/IHJNewSchema';

src/views/createTemplate/designer/modules/components/hj-hobbies-1.vue

@@ -1,5 +1,5 @@
 <template>
-  <p :style="abstract">{{ module.dataSource.content.value }}</p>
+  <p v-dompurify-html="module.dataSource.content.value" :style="abstract"></p>
 </template>
 <script lang="ts" setup>
   import { IModule } from '@/views/createTemplate/types/IHJNewSchema';

src/views/createTemplate/designer/modules/components/hj-name-1.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 :style="name">{{ module.dataSource.name.value }}</h1>
+  <h1 v-dompurify-html="module.dataSource.name.value" :style="name"></h1>
 </template>
 <script lang="ts" setup>
   import { IModule } from '@/views/createTemplate/types/IHJNewSchema';

src/views/createTemplate/designer/modules/components/hj-skill-specialties-1.vue

@@ -3,10 +3,10 @@
     <template v-for="(item, index) in module.dataSource.list.value" :key="index">
       <li
         v-show="module.props.introduce.show"
+        v-dompurify-html="item.introduce.value"
         :style="skillSpecialtiesLi"
         :class="[{ 'odd-li': isOddLi(index + 1) }]"
       >
-        {{ item.introduce.value }}
       </li>
     </template>
   </ul>

src/views/createTemplate/designer/modules/components/hj-works-display-1.vue

@@ -6,9 +6,11 @@
         <a v-show="module.props.worksLink.show" :style="worksLink" :href="item.worksLink.value">{{
           item.worksLink.value
         }}</a>
-        <p v-show="module.props.worksIntroduce.show" :style="worksIntroduce">{{
-          item.worksIntroduce.value
-        }}</p>
+        <p
+          v-show="module.props.worksIntroduce.show"
+          v-dompurify-html="item.worksIntroduce.value"
+          :style="worksIntroduce"
+        ></p>
       </li>
     </template>
   </ul>

src/views/createTemplate/designer/setters/components/hj-editor.vue

@@ -1,27 +1,35 @@
 <template>
   <div class="field">
-    <div class="field-top">
+    <div v-if="showTop" class="field-top">
       <div class="label-left">
         <span class="label">{{ label }}</span>
         <slot name="label-left"></slot>
       </div>
-      <slot name="label-right"></slot>
+      <div class="label-right">
+        <slot name="component-switch"></slot>
+        <slot name="label-right"></slot>
+      </div>
     </div>
     <comm-editor v-model="inputValue"></comm-editor>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { IModule } from '@/views/createTemplate/types/IHJNewSchema';
-
   const emit = defineEmits(['update:modelValue']);
 
-  const props = defineProps<{
+  interface TP {
     modelValue: string | number;
     label: string;
     keyValue: string;
-    module: IModule;
-  }>();
+    showTop?: boolean;
+  }
+
+  const props = withDefaults(defineProps<TP>(), {
+    modelValue: '',
+    label: '',
+    keyValue: '',
+    showTop: true
+  });
 
   // 添加一个可响应的 inputValue，并监听 modelValue 的变化
   const inputValue = ref(props.modelValue);
@@ -62,13 +70,18 @@
           margin-left: 1px;
         }
       }
+      .label-right {
+        display: flex;
+        align-items: center;
+      }
     }
 
     .editor-box {
       border: 1px solid #dcdfe6;
       border-radius: 4px;
       overflow: hidden;
       transition: all 0.3s;
+      cursor: auto;
       &:hover {
         border: 1px solid #d4d5d8;
       }

src/views/createTemplate/designer/setters/components/hj-input.vue

@@ -5,7 +5,10 @@
         <span class="label">{{ label }}</span>
         <slot name="label-left"></slot>
       </div>
-      <slot name="label-right"></slot>
+      <div class="label-right">
+        <!-- <slot name="component-switch"></slot> -->
+        <slot name="label-right"></slot>
+      </div>
     </div>
     <el-input
       v-model="inputValue"
@@ -79,6 +82,10 @@
           margin-left: 1px;
         }
       }
+      .label-right {
+        display: flex;
+        align-items: center;
+      }
     }
 
     .el-input {

src/views/createTemplate/designer/setters/components/hj-list-li.vue

@@ -14,15 +14,24 @@
         animation="500"
         :sort="true"
         item-key="id"
+        handle=".move-icon"
       >
         <template #item="{ element, index }">
           <div>
             <div class="list-item-box">
               <!-- 模块数据填写区域 -->
               <div class="module-list-content-box">
+                <el-tooltip effect="light" content="拖拽换序" placement="bottom">
+                  <svg-icon
+                    class="move-icon"
+                    icon-name="icon-tuozhuai3"
+                    color="#1e2532"
+                    size="26px"
+                  ></svg-icon>
+                </el-tooltip>
                 <!-- 数据填写组件 -->
                 <template v-for="(value, key, dataIndex) in element" :key="dataIndex">
-                  <div :style="getFiledStyle(value)">
+                  <div class="data-item" :style="getFiledStyle(value)">
                     <component
                       :is="dataSourceCptMap[value.type]"
                       v-model="value.value"
@@ -33,6 +42,15 @@
                     </component>
                   </div>
                 </template>
+                <!-- 组件类型切换 -->
+                <template v-for="(value, key, dataIndex) in element" :key="dataIndex">
+                  <component-type-pop
+                    v-model="value.type"
+                    :content="value"
+                    :type="value.type"
+                    @editor-switch="handleEditorSwitch($event, value)"
+                  ></component-type-pop>
+                </template>
                 <!-- 删除图标 -->
                 <el-tooltip effect="light" content="删除该项" placement="bottom">
                   <el-button
@@ -63,6 +81,7 @@
   import { cloneDeep } from 'lodash';
   import draggable from 'vuedraggable';
   import { Delete } from '@element-plus/icons-vue';
+  import ComponentTypePop from '../../components/ComponentTypePop.vue';
 
   const emit = defineEmits(['update:modelValue']);
 
@@ -115,6 +134,12 @@
   const deleteItem = (index: number) => {
     dataObj.value.value.splice(index, 1);
   };
+
+  // 如果是富文本组件切换至其他组件
+  const handleEditorSwitch = (value: string, item: any) => {
+    console.log('富文本组件切换至其他组件', value, item);
+    item.value = value;
+  };
 </script>
 <style lang="scss" scoped>
   .hj-list-li-box {
@@ -145,7 +170,6 @@
         width: 100%;
         .list-item-box {
           width: 100%;
-          cursor: move;
           transition: all 0.3s;
           border-radius: 6px;
           &:hover {
@@ -160,10 +184,30 @@
             align-items: center;
             flex-wrap: wrap;
             margin: 5px 0;
-            padding: 2px 10px 2px 2px;
+            padding: 5px 10px 5px 0;
             .field {
               margin-bottom: 0;
             }
+            .data-item {
+              flex: 1;
+              margin: 0 10px;
+              .field {
+                height: auto;
+              }
+            }
+            .svg-icon {
+              cursor: pointer;
+              padding: 3px;
+              transition: all 0.3s;
+              margin-left: 15px;
+              &:hover {
+                background-color: #eee;
+                border-radius: 4px;
+              }
+            }
+            .move-icon {
+              cursor: move;
+            }
           }
           .list-title {
             display: flex;