✨ feat: 联调分割线线上字段

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-03 10:20:07
+ * @LastEditTime: 2024-11-12 16:40:42
  * @FilePath: /data-table/src/components/DividerField/index.vue
  * @Description: 分隔线组件
 -->
 <template>
   <div class="divider-field-page">
-    <div v-if="styleType === 'type1'" class="type1">
-      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
+    <div v-if="item.component_props.style === 'type1'" class="type1">
+      <div v-if="!item.component_props.hide_label" :style="{ color: item.component_props.label_color, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ item.component_props.label }}</div>
     </div>
-    <div v-if="styleType === 'type2'" class="type2">
-      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
-      <div :style="{ borderTop: '1px dashed', borderColor: bgColor }"></div>
+    <div v-if="item.component_props.style === 'type2'" class="type2">
+      <div v-if="!item.component_props.hide_label" :style="{ color: item.component_props.label_color, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ item.component_props.label }}</div>
+      <div :style="{ borderTop: '1px dashed', borderColor: item.component_props.theme_color }"></div>
     </div>
-    <div v-if="styleType === 'type3'" class="type3">
-      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
-      <div :style="{ borderTop: '1px solid', borderColor: bgColor }"></div>
+    <div v-if="item.component_props.style === 'type3'" class="type3">
+      <div v-if="!item.component_props.hide_label" :style="{ color: item.component_props.label_color, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ item.component_props.label }}</div>
+      <div :style="{ borderTop: '1px solid', borderColor: item.component_props.theme_color }"></div>
     </div>
-    <div v-if="styleType === 'type4'" class="type4">
-      <div :style="{ color: titleColor, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ dividerTitle }}</div>
-      <div :style="{ borderTop: '2px solid', borderColor: bgColor }"></div>
+    <div v-if="item.component_props.style === 'type4'" class="type4">
+      <div v-if="!item.component_props.hide_label" :style="{ color: item.component_props.label_color, lineHeight: 1.2, marginBottom: '0.25rem' }">{{ item.component_props.label }}</div>
+      <div :style="{ borderTop: '2px solid', borderColor: item.component_props.theme_color }"></div>
     </div>
-    <div v-if="styleType === 'type5'" class="type5">
+    <div v-if="item.component_props.style === 'type5'" class="type5">
       <div class="sep-line">
-        <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
-          <span>{{ dividerTitle }}</span>
+        <div class="sep-label" :style="{ color: item.component_props.label_color, backgroundColor: item.component_props.theme_color}">
+          <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span>
         </div>
         <div class="sep-right">
-          <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
-          <div class="right-line" :style="{ borderColor: bgColor }"></div>
-          <div class="right-parallelogram1" :style="{ backgroundColor: bgColor}"></div>
-          <div class="right-parallelogram2" :style="{ backgroundColor: bgColor}"></div>
-          <div class="right-parallelogram3" :style="{ backgroundColor: bgColor}"></div>
+          <div class="right-triangle" :style="{ backgroundColor: item.component_props.theme_color}"></div>
+          <div class="right-line" :style="{ borderColor: item.component_props.theme_color }"></div>
+          <div class="right-parallelogram1" :style="{ backgroundColor: item.component_props.theme_color}"></div>
+          <div class="right-parallelogram2" :style="{ backgroundColor: item.component_props.theme_color}"></div>
+          <div class="right-parallelogram3" :style="{ backgroundColor: item.component_props.theme_color}"></div>
         </div>
       </div>
     </div>
-    <div v-if="styleType === 'type6'" class="type6">
-      <div class="sep-style-select-field-label" :style="{ color: titleColor }">{{ dividerTitle }}</div>
+    <div v-if="item.component_props.style === 'type6'" class="type6">
+      <div v-if="!item.component_props.hide_label" class="sep-style-select-field-label" :style="{ color: item.component_props.label_color }">{{ item.component_props.label }}</div>
       <div class="sep-style-select-item">
         <div class="sep-line">
           <div class="sep-bg-wrapper">
-            <div class="sep-bg" :style="{ borderColor: bgColor }"></div>
+            <div class="sep-bg" :style="{ borderColor: item.component_props.theme_color }"></div>
           </div>
           <div class="sep-label" style="background-color: rgb(250, 129, 24);">
-            <span>{{ dividerTitle }}</span>
+            <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span>
           </div>
         </div>
       </div>
     </div>
-    <div v-if="styleType === 'type7'" class="type7">
+    <div v-if="item.component_props.style === 'type7'" class="type7">
       <div class="sep-line">
         <div class="sep-bg-wrapper">
-          <div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
+          <div class="sep-bg" :style="{ backgroundColor: item.component_props.theme_color}"></div>
         </div>
-        <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
-          <span>{{ dividerTitle }}</span>
+        <div class="sep-label" :style="{ color: item.component_props.label_color, backgroundColor: item.component_props.theme_color }">
+          <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span>
         </div>
       </div>
     </div>
-    <div v-if="styleType === 'type8'" class="type8">
+    <div v-if="item.component_props.style === 'type8'" class="type8">
       <div class="sep-line">
-        <div class="sep-bg" :style="{ backgroundColor: bgColor}"></div>
+        <div class="sep-bg" :style="{ backgroundColor: item.component_props.theme_color}"></div>
         <div class="sep-center">
-          <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor }">
-            <span>{{ dividerTitle }}</span>
+          <div class="sep-label" :style="{ color: item.component_props.label_color, backgroundColor: item.component_props.theme_color }">
+            <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span>
           </div>
-          <div class="left-triangle" :style="{ backgroundColor: bgColor}"></div>
-          <div class="left-border" :style="{ backgroundColor: bgColor}"></div>
-          <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
-          <div class="right-border" :style="{ backgroundColor: bgColor}"></div>
+          <div class="left-triangle" :style="{ backgroundColor: item.component_props.theme_color}"></div>
+          <div class="left-border" :style="{ backgroundColor: item.component_props.theme_color}"></div>
+          <div class="right-triangle" :style="{ backgroundColor: item.component_props.theme_color}"></div>
+          <div class="right-border" :style="{ backgroundColor: item.component_props.theme_color}"></div>
         </div>
       </div>
     </div>
-    <div v-if="styleType === 'type9'" class="type9">
+    <div v-if="item.component_props.style === 'type9'" class="type9">
       <div class="sep-line">
         <div class="left-wrapper">
-          <div class="left-block" :style="{ backgroundColor: bgColor}"></div>
-          <div class="left-triangle" :style="{ backgroundColor: bgColor}"></div>
+          <div class="left-block" :style="{ backgroundColor: item.component_props.theme_color}"></div>
+          <div class="left-triangle" :style="{ backgroundColor: item.component_props.theme_color}"></div>
           <div class="left-square"></div>
-          <div class="left-line1" :style="{ borderColor: bgColor }"></div>
-          <div class="left-line2" :style="{ borderColor: bgColor }"></div>
+          <div class="left-line1" :style="{ borderColor: item.component_props.theme_color }"></div>
+          <div class="left-line2" :style="{ borderColor: item.component_props.theme_color }"></div>
         </div>
-        <div class="sep-label" :style="{ color: titleColor, backgroundColor: bgColor}">
-          <span>{{ dividerTitle }}</span>
+        <div class="sep-label" :style="{ color: item.component_props.label_color, backgroundColor: item.component_props.theme_color}">
+          <span v-if="!item.component_props.hide_label">{{ item.component_props.label }}</span>
         </div>
         <div class="right-wrapper">
-          <div class="right-block" :style="{ backgroundColor: bgColor}"></div>
-          <div class="right-triangle" :style="{ backgroundColor: bgColor}"></div>
+          <div class="right-block" :style="{ backgroundColor: item.component_props.theme_color}"></div>
+          <div class="right-triangle" :style="{ backgroundColor: item.component_props.theme_color}"></div>
           <div class="right-square"></div>
-          <div class="right-line1" :style="{ borderColor: bgColor }"></div>
-          <div class="right-line2" :style="{ borderColor: bgColor }"></div>
+          <div class="right-line1" :style="{ borderColor: item.component_props.theme_color }"></div>
+          <div class="right-line2" :style="{ borderColor: item.component_props.theme_color }"></div>
         </div>
       </div>
     </div>
-    <div class="fx-sub-html" v-html="desc"></div>
+    <div class="fx-sub-html" v-html="item.component_props.description"></div>
   </div>
 </template>
 
@@ -106,32 +106,9 @@ const props = defineProps({
 const styleTitle = ref({});
 const styleBorder = ref({});
 
-const bgColor = ref('');
-const titleColor = ref('');
-
-const styleType = ref('type5');
-
-const dividerTitle = ref('分割标题');
 const desc = ref('<b>描述信息</b>');
 
 onMounted(() => {
-  // styleObj.value = {
-  //   color: props.item.component_props.color,
-  //   borderColor: props.item.component_props.color,
-  //   padding: props.item.component_props.padding,
-  // };
-  // styleTitle.value = {
-  //   color: "blue",
-  //   fontSize: "0.9rem",
-  // };
-  // styleBorder.value = {
-  //   border: "1px dashed",
-  //   borderColor: "red",
-  //   margin: "5px 0",
-  // };
-
-  titleColor.value = '#FFF';
-  bgColor.value = '#FA8118';
 });
 </script>