feat: 题卡标题可以设置字号和加粗

card/components/common/CardNameEdit.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="card-name-edit">
+    <div class="style-edit mb-2">
+      <el-button
+        size="small"
+        :type="isBold ? 'primary' : 'default'"
+        @click="boldChange"
+        >B</el-button
+      >
+      <size-select
+        v-model="modalForm.nameFontSize"
+        :predefine="PREDEFINE_OPTIONS"
+        class="ml-2 escape"
+        @change="emitChange"
+      >
+      </size-select>
+    </div>
+    <el-input
+      v-model="modalForm.topicName"
+      type="textarea"
+      :autosize="{ minRows: 2, maxRows: 5 }"
+      resize="none"
+      placeholder="请输入题目名称"
+      clearable
+      :style="styles"
+      @input="emitChange"
+    ></el-input>
+  </div>
+</template>
+
+<script>
+import { objAssign } from "../../plugins/utils";
+import SizeSelect from "./SizeSelect.vue";
+
+const initModalForm = {
+  topicName: "",
+  nameFontSize: "14px",
+  nameFontWeight: 400,
+};
+
+export default {
+  name: "CardNameEdit",
+  components: { SizeSelect },
+  props: {
+    value: {
+      type: Object,
+      default() {
+        return {
+          topicName: "",
+          nameFontSize: "14px",
+          nameFontWeight: 400,
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      modalForm: { ...initModalForm },
+      PREDEFINE_OPTIONS: [
+        {
+          value: "14px",
+          label: "小",
+        },
+        {
+          value: "18px",
+          label: "中",
+        },
+        {
+          value: "21px",
+          label: "大",
+        },
+      ],
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.initData(val);
+      },
+    },
+  },
+  computed: {
+    isBold() {
+      return this.modalForm.nameFontWeight === 700;
+    },
+    styles() {
+      return {
+        fontWeight: this.modalForm.nameFontWeight,
+        fontSize: this.modalForm.nameFontSize,
+      };
+    },
+  },
+  methods: {
+    initData() {
+      this.modalForm = objAssign(initModalForm, this.value);
+    },
+    boldChange() {
+      this.modalForm.nameFontWeight = this.isBold ? 400 : 700;
+      this.emitChange();
+    },
+    emitChange() {
+      const val = objAssign(this.value, this.modalForm);
+      this.$emit("input", val);
+      this.$emit("change", val);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.card-name-edit textarea {
+  font-weight: inherit;
+}
+</style>

card/elements/composition/EditComposition.vue

@@ -18,30 +18,26 @@
         ></el-input-number>
       </el-form-item> -->
       <el-form-item prop="topicName" label="题目名称：">
-        <el-input
-          v-model="modalForm.topicName"
-          type="textarea"
-          :autosize="{ minRows: 2, maxRows: 5 }"
-          resize="none"
-          placeholder="请输入题目名称"
-          clearable
-          maxlength="100"
-          show-word-limit
-        ></el-input>
+        <card-name-edit v-model="modalForm"></card-name-edit>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
+import CardNameEdit from "../../components/common/CardNameEdit.vue";
+
 const initModalForm = {
   id: "",
   topicNo: null,
   topicName: "",
+  nameFontSize: "14px",
+  nameFontWeight: 400,
 };
 
 export default {
   name: "edit-composition",
+  components: { CardNameEdit },
   props: {
     instance: {
       type: Object,

card/elements/composition/ElemComposition.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="elem-composition">
-    <div class="elem-title" v-if="data.showTitle" ref="ElemTitle">
+    <div
+      v-if="data.showTitle"
+      ref="ElemTitle"
+      class="elem-title"
+      :style="nameStyles"
+    >
       {{ data.parent.topicName }}
     </div>
     <div class="elem-body" ref="ElemBody">
@@ -29,6 +34,14 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    nameStyles() {
+      return {
+        fontWeight: this.data.parent.nameFontWeight,
+        fontSize: this.data.parent.nameFontSize,
+      };
+    },
+  },
   mounted() {
     this.modifyBodyStyle();
   },

card/elements/composition/ElemCompositionEdit.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="elem-composition elem-composition-edit">
-    <div class="elem-title" v-if="data.showTitle" ref="ElemTitle">
+    <div
+      v-if="data.showTitle"
+      ref="ElemTitle"
+      class="elem-title"
+      :style="nameStyles"
+    >
       {{ data.parent.topicName }}
     </div>
     <div class="elem-body" :style="bodyStyle">
@@ -58,6 +63,12 @@ export default {
   },
   computed: {
     ...mapState("card", ["curDragElement"]),
+    nameStyles() {
+      return {
+        fontWeight: this.data.parent.nameFontWeight,
+        fontSize: this.data.parent.nameFontSize,
+      };
+    },
   },
   watch: {
     "data.parent": {

card/elements/composition/model.js

@@ -6,6 +6,8 @@ const COMPOSITION_PROP = {
   sign: "subjective",
   topicNo: null,
   topicName: "",
+  nameFontSize: "14px",
+  nameFontWeight: 400,
 };
 
 const MODEL = {

card/elements/explain/EditExplain.vue

@@ -18,16 +18,7 @@
         ></el-input-number>
       </el-form-item> -->
       <el-form-item prop="topicName" label="题目名称：">
-        <el-input
-          v-model="modalForm.topicName"
-          type="textarea"
-          :autosize="{ minRows: 2, maxRows: 5 }"
-          resize="none"
-          placeholder="请输入题目名称"
-          clearable
-          maxlength="100"
-          show-word-limit
-        ></el-input>
+        <card-name-edit v-model="modalForm"></card-name-edit>
       </el-form-item>
       <el-form-item prop="startEnd" label="起止题号：">
         <el-input-number
@@ -55,10 +46,14 @@
 </template>
 
 <script>
+import CardNameEdit from "../../components/common/CardNameEdit.vue";
+
 const initModalForm = {
   id: "",
   topicNo: null,
   topicName: "",
+  nameFontSize: "14px",
+  nameFontWeight: 400,
   startNumber: 1,
   endNumber: 4,
   questionsCount: 4,
@@ -66,6 +61,7 @@ const initModalForm = {
 
 export default {
   name: "edit-explain",
+  components: { CardNameEdit },
   props: {
     instance: {
       type: Object,

card/elements/explain/ElemExplain.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="elem-explain">
-    <div class="elem-title" v-if="data.showTitle" ref="ElemTitle">
+    <div
+      v-if="data.showTitle"
+      ref="ElemTitle"
+      class="elem-title"
+      :style="nameStyles"
+    >
       {{ data.parent.topicName }}
     </div>
     <div class="elem-body" ref="ElemBody">
@@ -36,6 +41,14 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    nameStyles() {
+      return {
+        fontWeight: this.data.parent.nameFontWeight,
+        fontSize: this.data.parent.nameFontSize,
+      };
+    },
+  },
   mounted() {
     this.modifyBodyStyle();
   },

card/elements/explain/ElemExplainEdit.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="elem-explain elem-explain-edit">
-    <div class="elem-title" v-if="data.showTitle" ref="ElemTitle">
+    <div
+      class="elem-title"
+      v-if="data.showTitle"
+      ref="ElemTitle"
+      :style="nameStyles"
+    >
       {{ data.parent.topicName }}
     </div>
     <div class="elem-body" :style="bodyStyle">
@@ -65,6 +70,12 @@ export default {
   },
   computed: {
     ...mapState("card", ["curDragElement"]),
+    nameStyles() {
+      return {
+        fontWeight: this.data.parent.nameFontWeight,
+        fontSize: this.data.parent.nameFontSize,
+      };
+    },
   },
   watch: {
     "data.parent": {

card/elements/explain/model.js

@@ -5,6 +5,8 @@ const EXPLAIN_PROP = {
   sign: "subjective",
   topicNo: null,
   topicName: "",
+  nameFontSize: "14px",
+  nameFontWeight: 400,
   startNumber: 1,
   questionsCount: 1,
 };

card/elements/fill-line/EditFillLine.vue

@@ -18,16 +18,7 @@
         ></el-input-number>
       </el-form-item> -->
       <el-form-item prop="topicName" label="题目名称：">
-        <el-input
-          v-model="modalForm.topicName"
-          type="textarea"
-          :autosize="{ minRows: 2, maxRows: 5 }"
-          resize="none"
-          placeholder="请输入题目名称"
-          clearable
-          maxlength="100"
-          show-word-limit
-        ></el-input>
+        <card-name-edit v-model="modalForm"></card-name-edit>
       </el-form-item>
       <el-form-item prop="endNumber" label="起止题号：">
         <el-input-number
@@ -148,6 +139,7 @@
 
 <script>
 import { DIRECTION_TYPE } from "../../enumerate";
+import CardNameEdit from "../../components/common/CardNameEdit.vue";
 
 const initModalForm = {
   id: "",
@@ -167,6 +159,7 @@ const initModalForm = {
 
 export default {
   name: "edit-fill-line",
+  components: { CardNameEdit },
   props: {
     instance: {
       type: Object,

card/elements/fill-line/ElemFillLine.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="elem-fill-line">
     <div
-      class="elem-title"
       v-if="data.parent && data.startNumber === data.parent.startNumber"
+      class="elem-title"
+      :style="nameStyles"
     >
       {{ data.parent.topicName }}
     </div>
@@ -80,6 +81,12 @@ export default {
         width: 100 / this.data.questionNumberPerLine + "%",
       };
     },
+    nameStyles() {
+      return {
+        fontWeight: this.data.parent.nameFontWeight,
+        fontSize: this.data.parent.nameFontSize,
+      };
+    },
   },
   mounted() {},
   methods: {},

card/elements/fill-line/model.js

@@ -10,6 +10,8 @@ const MODEL = {
   sign: "subjective",
   topicName: "",
   topicNo: null,
+  nameFontSize: "14px",
+  nameFontWeight: 400,
   startNumber: 1,
   questionsCount: 4,
   questionNumberPerLine: 2,

card/elements/fill-question/EditFillQuestion.vue

@@ -21,16 +21,7 @@
         ></el-input-number>
       </el-form-item> -->
       <el-form-item prop="topicName" label="题目名称：">
-        <el-input
-          v-model="modalForm.topicName"
-          type="textarea"
-          :autosize="{ minRows: 2, maxRows: 5 }"
-          resize="none"
-          placeholder="请输入题目名称"
-          clearable
-          maxlength="100"
-          show-word-limit
-        ></el-input>
+        <card-name-edit v-model="modalForm"></card-name-edit>
       </el-form-item>
       <el-form-item prop="endNumber" label="起止题号：">
         <el-input-number
@@ -82,11 +73,14 @@
 <script>
 import { getFillQuestionName } from "../../elementModel";
 import { BOOLEAN_TYPE, DIRECTION_TYPE } from "../../enumerate";
+import CardNameEdit from "../../components/common/CardNameEdit.vue";
 
 const initModalForm = {
   id: "",
   topicNo: null,
   topicName: "",
+  nameFontSize: "14px",
+  nameFontWeight: 400,
   startNumber: 1,
   endNumber: 5,
   questionsCount: 10,
@@ -100,6 +94,7 @@ const initModalForm = {
 
 export default {
   name: "edit-fill-question",
+  components: { CardNameEdit },
   props: {
     instance: {
       type: Object,

card/elements/fill-question/ElemFillQuestion.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="classes">
-    <div class="elem-title" v-if="isFirstSpin">
+    <div v-if="isFirstSpin" class="elem-title" :style="nameStyles">
       {{ data.parent.topicName }}
     </div>
     <div class="elem-body">
@@ -70,6 +70,12 @@ export default {
           : { marginRight: this.data.optionGap + "px" };
       return styles;
     },
+    nameStyles() {
+      return {
+        fontWeight: this.data.parent.nameFontWeight,
+        fontSize: this.data.parent.nameFontSize,
+      };
+    },
   },
   data() {
     return {

card/elements/fill-question/model.js

@@ -11,6 +11,8 @@ const MODEL = {
   sign: "objective",
   topicName: "",
   topicNo: null,
+  nameFontSize: "14px",
+  nameFontWeight: 400,
   startNumber: 1,
   questionsCount: 10,
   optionCount: 4,

card/store/card.js

@@ -6,7 +6,13 @@ import {
   getNewPage,
   getTopicHeadModel,
 } from "../elementModel";
-import { objAssign, deepCopy, calcSum, getElementId } from "../plugins/utils";
+import {
+  objAssign,
+  deepCopy,
+  calcSum,
+  getElementId,
+  randomCode,
+} from "../plugins/utils";
 
 const state = {
   cardConfig: {},
@@ -191,7 +197,8 @@ const checkElementisCovered = (id, type) => {
     return elementHeights.some((item) => item > limitHeight);
   }
 
-  return elementDom.offsetHeight < elementDom.firstChild.offsetHeight;
+  // return elementDom.offsetHeight < elementDom.firstChild.offsetHeight;
+  return false;
 };
 
 const createFunc = {
@@ -523,6 +530,7 @@ const actions = {
 
     let newElement = Object.assign({}, curElement, {
       id: getElementId(),
+      key: randomCode(),
       elements: [],
       h: 200,
       isExtend: true,
@@ -621,7 +629,19 @@ const actions = {
       const elementDom = document.getElementById(`preview-${element.id}`);
 
       if (elementDom) {
-        element.h = elementDom.offsetHeight;
+        if (element.type === "FILL_QUESTION" || element.type === "FILL_LINE") {
+          const elementH = Math.max(
+            elementDom.lastChild.offsetHeight,
+            elementDom.offsetHeight
+          );
+          if (elementH !== element.h) {
+            element.key = randomCode();
+            element.minHeight = elementDom.lastChild.offsetHeight;
+            element.h = elementH;
+          }
+        } else {
+          element.h = elementDom.offsetHeight;
+        }
         element.w = elementDom.offsetWidth;
         // 解答题小题与其他题有些区别。
         // 其他题都是通过内部子元素自动撑高元件，而解答题则需要手动设置高度。