refactor(components): 优化内容可编辑组件中的图片处理逻辑

- 修改了图片宽度和高度的计算方式，使用原始尺寸和宽高比 - 更新了矩阵问题的默认选项文本 - 调整了部分组件的样式和布局
2025-03-20 14:59:07 +08:00
parent e6560a69d9
commit a7845f6ceb
8 changed files with 78 additions and 80 deletions
--- a/src/components/contenteditable.vue
+++ b/src/components/contenteditable.vue
@@ -75,7 +75,7 @@ const functions = {
    document.execCommand('italic', false, null);
  },

-  uploadImage: async() => {
+  uploadImage: async () => {
    // 保存当前光标位置
    savedRange.value = saveSelection();

@@ -84,7 +84,7 @@ const functions = {

    fileInput.click();

-    fileInput.onchange = async(e) => {
+    fileInput.onchange = async (e) => {
      const [file] = e.target.files;
      if (!file) return;
      if (file.size > 2 * 1024 * 1024) {
@@ -96,12 +96,28 @@ const functions = {
      const img = document.createElement('img');
      img.src = data.url;
      img.onload = () => {
-        const scale = img.naturalHeight / 50;
-        const width = (img.naturalWidth / scale).toFixed(0);
-        const height = 50;
+        // const scale = img.naturalHeight / 50;
+        // const width = (img.naturalWidth / scale).toFixed(0);
+        // const height = 50;
+        // const maxWidth = img.naturalWidth;
+        // const maxHeight = img.naturalHeight;
+        // eslint-disable-next-line standard/no-callback-literal
+        // const style = `style="width:${width}px;
+        // height:${height}px;
+        // max-width:${maxWidth}px;
+        // max-height:${maxHeight}px"`;
+        // 使用原始高度
+        const height = img.naturalHeight;
+        // 根据宽高比计算宽度
+        const width = (height * 3) / 4;
        const maxWidth = img.naturalWidth;
        const maxHeight = img.naturalHeight;
-        const style = `style="width:${width}px;height:${height}px;max-width:${maxWidth}px;max-height:${maxHeight}px"`;
+        // eslint-disable-next-line standard/no-callback-literal
+        const style = `style="width:${width}px;
+        height:${height}px;
+        max-width:${maxWidth}px;
+        max-height:${maxHeight}px"`;
+        // eslint-disable-next-line standard/no-callback-literal
        insertImageAtCaret(`<img src=${data.url} ${style}/>`);

        // 恢复光标位置
@@ -146,10 +162,10 @@ const isEmptyContent = (html) => {
  const trimmedHtml = html.trim();
  // 检查是否为空字符串、仅包含 <br> 或仅包含 <p><br></p>
  return (
-    trimmedHtml === ''
-    || trimmedHtml === '<br>'
-    || trimmedHtml === '<p><br></p>'
-    || trimmedHtml === '<p></p>'
+    trimmedHtml === '' ||
+    trimmedHtml === '<br>' ||
+    trimmedHtml === '<p><br></p>' ||
+    trimmedHtml === '<p></p>'
  );
 };

--- a/src/utils/QuestionJsons/MartrixQuestion.js
+++ b/src/utils/QuestionJsons/MartrixQuestion.js
@@ -12,7 +12,7 @@ export default {
        is_fixed: 0,
        is_other: 0,
        is_remove_other: 0,
-        option: '<p>选项1</p>',
+        option: '<p>行标签1</p>',
        option_config: {
          image_url: [],
          title: '',
@@ -22,26 +22,7 @@ export default {
        },
        option_index: 1,
        parent_id: 0,
-        type: 0,
-        cascade: [],
-        config: []
-      },
-      {
-        id: '',
-        is_fixed: 0,
-        is_other: 0,
-        is_remove_other: 0,
-        option: '<p>选项2</p>',
-        option_config: {
-          image_url: [],
-          title: '',
-          instructions: [],
-          option_type: 0,
-          limit_right_content: ''
-        },
-        option_index: 1,
-        parent_id: 0,
-        type: 0,
+        type: 1,
        cascade: [],
        config: []
      }
@@ -67,35 +48,7 @@ export default {
          gradient: '',
          image_url: [],
          option_type: 0,
-          type: 0,
-          limit_right_content: '',
-          child_area: null,
-          binding_goods_id: ''
-        },
-        disable_option_update: null,
-        cascade: []
-      },
-      {
-        option: '<p style="text-align:center">列标签2</p>',
-        id: '1049202',
-        type: 2,
-        is_other: 0,
-        is_fixed: 0,
-        is_remove_other: 0,
-        created_at: null,
-        created_user_id: null,
-        parent_id: null,
-        option_index: 4,
-        list_id: 74491,
-        option_code: '',
-        option_config: {
-          title: '',
-          instructions: [],
-          price: 0,
-          gradient: '',
-          image_url: [],
-          option_type: 0,
-          type: 0,
+          type: 2,
          limit_right_content: '',
          child_area: null,
          binding_goods_id: ''
@@ -103,6 +56,34 @@ export default {
        disable_option_update: null,
        cascade: []
      }
+      // {
+      //   option: '<p style="text-align:center">列标签2</p>',
+      //   id: '1049202',
+      //   type: 2,
+      //   is_other: 0,
+      //   is_fixed: 0,
+      //   is_remove_other: 0,
+      //   created_at: null,
+      //   created_user_id: null,
+      //   parent_id: null,
+      //   option_index: 4,
+      //   list_id: 74491,
+      //   option_code: '',
+      //   option_config: {
+      //     title: '',
+      //     instructions: [],
+      //     price: 0,
+      //     gradient: '',
+      //     image_url: [],
+      //     option_type: 0,
+      //     type: 0,
+      //     limit_right_content: '',
+      //     child_area: null,
+      //     binding_goods_id: ''
+      //   },
+      //   disable_option_update: null,
+      //   cascade: []
+      // }
    ]
  ],
  last_option_index: 1,
--- a/src/views/Design/Index.vue
+++ b/src/views/Design/Index.vue
@@ -52,8 +52,8 @@
          <martrix-question
            v-if="
              element.question_type === 8 ||
-              element.question_type === 9 ||
-              element.question_type === 10
+                element.question_type === 9 ||
+                element.question_type === 10
            "
            :element="computedElement(element)"
            :index="index"
--- a/src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue
+++ b/src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue
@@ -144,8 +144,8 @@
              <BeforeRate
                v-if="
                  log.logic !== 'always' &&
-                  log.is_answer !== 0 &&
-                  [5, 106].includes(log.question_type)
+                    log.is_answer !== 0 &&
+                    [5, 106].includes(log.question_type)
                "
                :activeQuestion="activeQuestion"
                :logic="log"
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -10,7 +10,7 @@ import { showFailToast } from 'vant';
 import appBridge from '@/assets/js/appBridge';
 const contentShow = ref(false);

-onMounted(async () => {
+onMounted(async() => {
  if (appBridge.isInReactNative()) {
    const appToken = utils.getSessionStorage('xToken');
    getUserInfo(appToken)
--- a/src/views/Home/components/Market/components/MarketItem.vue
+++ b/src/views/Home/components/Market/components/MarketItem.vue
@@ -101,7 +101,7 @@ const deleteItem = (item) => {
    showCancelButton: true,
    confirmButtonColor: '#03B03C'
  })
-    .then(async () => {
+    .then(async() => {
      const res = await deleteTemplate(item.sn);
      if (res.data.code === 0) {
        showSuccessToast('删除成功');
--- a/src/views/Survey/Index.vue
+++ b/src/views/Survey/Index.vue
@@ -141,7 +141,7 @@ const onLoad = () => {
    fetchSurveys();
  }, 500);
 };
-const fetchSurveys = async () => {
+const fetchSurveys = async() => {
  const params = {
    page: form.value.page,
    per_page: form.value.pageSize,
@@ -179,7 +179,7 @@ const deleteItem = (item) => {
    showCancelButton: true,
    confirmButtonColor: '#03B03C'
  })
-    .then(async () => {
+    .then(async() => {
      const res = await deleteSurveys(item.sn);
      if (res.data.message) {
        showToast(res.data.message);
@@ -203,7 +203,7 @@ const copyItem = (item) => {
    showCancelButton: true,
    confirmButtonColor: '#03B03C'
  })
-    .then(async () => {
+    .then(async() => {
      const res = await copySurveys(item.sn);
      if (res.data.code === 200 || res.data.code === 201) {
        showSuccessToast('复制成功');
@@ -252,7 +252,7 @@ const editItem = (item) => {
  });
 };
 // 保存为模板
-const saveTemplate = async (item) => {
+const saveTemplate = async(item) => {
  const data = JSON.parse(JSON.stringify(item));
  const res = await saveTemplates(item.sn, data);
  if (res.data.code === 200 || res.data.code === 201) {
--- a/src/views/Survey/views/Create/Index.vue
+++ b/src/views/Survey/views/Create/Index.vue
@@ -60,7 +60,7 @@
          </div>
        </template>
      </Design>
-      <div class="design-button" v-if="!activeId && questionInfo.questions.length > 0">
+      <div v-if="!activeId && questionInfo.questions.length > 0" class="design-button">
        <van-button size="small" class="theme-background" @click="show = true">
          + 添加题目
        </van-button>
@@ -431,14 +431,14 @@ const questionEvent = (item) => {
      options:
        item.json.options.length > 0
          ? item.json.options.map((item) => {
-              return item.map((it) => {
-                return {
-                  ...it,
-                  // 主键生成
-                  id: uuidv4()
-                };
-              });
-            })
+            return item.map((it) => {
+              return {
+                ...it,
+                // 主键生成
+                id: uuidv4()
+              };
+            });
+          })
          : []
    })
  );
@@ -577,7 +577,7 @@ const previewQuestion = () => {
  router.push({ name: 'preview', query: { ...route.query } });
 };

-onMounted(async () => {
+onMounted(async() => {
  await getQuestionDetail();
 });
 </script>
@@ -750,6 +750,7 @@ onMounted(async () => {
    font-weight: bold;
    font-size: 16px;
  }
+
  .ques_list {
    margin-bottom: 10px;
  }