feat(仪表板、数据大屏): tab表头支持下划线，加粗，斜体样式#13540

core/core-frontend/src/assets/svg/style-underline.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1733971867948" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4250" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M703.232 67.008h127.488v413.248c0 158.016-142.656 286.016-318.72 286.016-176 0-318.72-128-318.72-286.016V67.008h127.488v413.248c0 39.872 18.176 78.144 51.136 107.776 36.8 32.96 86.528 51.072 140.096 51.072s103.36-18.112 140.032-51.136c33.024-29.632 51.2-67.968 51.2-107.776V67.008zM193.28 871.616h637.44v85.376H193.28v-85.376z" fill="#040000" p-id="4251"></path></svg>

core/core-frontend/src/custom-component/common/CommonStyleSet.vue

@@ -166,6 +166,20 @@
             </el-icon>
           </div>
         </el-tooltip>
+        <el-tooltip v-if="styleForm.textDecoration !== undefined" effect="dark" placement="bottom">
+          <template #content>
+            {{ t('visualization.text_decoration') }}
+          </template>
+          <div
+            class="icon-btn"
+            :class="{ dark: themes === 'dark', active: styleForm.textDecoration === 'underline' }"
+            @click="checkTextDecoration"
+          >
+            <el-icon>
+              <Icon name="style-underline"><styleUnderline class="svg-icon" /></Icon>
+            </el-icon>
+          </div>
+        </el-tooltip>
         <template v-if="styleForm.textAlign">
           <div class="m-divider" :class="'custom-divider-' + themes"></div>
           <div style="display: flex">
@@ -298,6 +312,7 @@ import dvStyleActiveFont from '@/assets/svg/dv-style-activeFont.svg'
 import dvStyleFontFamily from '@/assets/svg/dv-style-fontFamily.svg'
 import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
 import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
+import styleUnderline from '@/assets/svg/style-underline.svg'
 import icon_leftAlignment_outlined from '@/assets/svg/icon_left-alignment_outlined.svg'
 import icon_centerAlignment_outlined from '@/assets/svg/icon_center-alignment_outlined.svg'
 import icon_rightAlignment_outlined from '@/assets/svg/icon_right-alignment_outlined.svg'
@@ -308,6 +323,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { storeToRefs } from 'pinia'
+import { ElIcon } from 'element-plus-secondary'
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
@@ -567,6 +583,15 @@ const checkItalic = () => {
   changeStyle({ key: 'fontStyle', value: styleForm.value.fontStyle })
 }
 
+const checkTextDecoration = () => {
+  if (styleForm.value.textDecoration === 'normal') {
+    styleForm.value.textDecoration = 'underline'
+  } else {
+    styleForm.value.textDecoration = 'normal'
+  }
+  changeStyle({ key: 'textDecoration', value: styleForm.value.textDecoration })
+}
+
 function setPosition(key, p: 'left' | 'center' | 'right') {
   styleForm.value[key] = p
   changeStyle({ key: key, value: p })
@@ -709,4 +734,47 @@ watch(
 .dark-icon {
   color: #ffffff;
 }
+
+.icon-checkbox {
+  :deep(.ed-checkbox__input) {
+    display: none;
+  }
+  :deep(.ed-checkbox__label) {
+    padding: 0;
+  }
+}
+
+.icon-btn {
+  font-size: 16px;
+  line-height: 16px;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+  border-radius: 4px;
+  padding-top: 4px;
+
+  color: #1f2329;
+
+  cursor: pointer;
+
+  &.dark {
+    color: #a6a6a6;
+    &.active {
+      color: var(--ed-color-primary);
+      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
+    }
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &.active {
+    color: var(--ed-color-primary);
+    background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
+  }
+
+  &:hover {
+    background-color: rgba(31, 35, 41, 0.1);
+  }
+}
 </style>

core/core-frontend/src/custom-component/component-list.ts

@@ -559,7 +559,11 @@ const list = [
       headFontColor: '#000000',
       headFontActiveColor: '#000000',
       titleHide: false,
-      showTabTitle: true
+      showTabTitle: true,
+      // #13540
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      textDecoration: 'normal'
     }
   },
   {

core/core-frontend/src/custom-component/de-tabs/Component.vue

@@ -422,10 +422,16 @@ const headClass = computed(() => {
 const titleStyle = itemName => {
   if (editableTabsValue.value === itemName) {
     return {
+      fontStyle: element.value.style.fontStyle,
+      fontWeight: element.value.style.fontWeight,
+      textDecoration: element.value.style.textDecoration,
       fontSize: (element.value.style.activeFontSize || 18) * scale.value + 'px'
     }
   } else {
     return {
+      fontStyle: element.value.style.fontStyle,
+      fontWeight: element.value.style.fontWeight,
+      textDecoration: element.value.style.textDecoration,
       fontSize: (element.value.style.fontSize || 16) * scale.value + 'px'
     }
   }

core/core-frontend/src/locales/en.ts

@@ -2717,6 +2717,7 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     column_name: 'Field name'
   },
   visualization: {
+    text_decoration: 'underline',
     select_target_resource: 'Please select the target resource',
     target_dashboard_dataV: 'Target Dashboard\\Screen',
     effective_during_link: 'Public link active',

core/core-frontend/src/locales/tw.ts

@@ -2651,6 +2651,7 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    text_decoration: '下劃線',
     select_target_resource: '請選擇目標資源',
     target_dashboard_dataV: '目標儀表板\\數據大屏',
     condition_style_set: '條件樣式設定',

core/core-frontend/src/utils/canvasUtils.ts

@@ -207,6 +207,9 @@ export function historyItemAdaptor(
   componentItem['category'] = componentItem['category'] || 'base'
 
   if (componentItem.component === 'DeTabs') {
+    componentItem.style.fontStyle = componentItem.style.fontStyle || 'normal'
+    componentItem.style.fontWeight = componentItem.style.fontWeight || 'normal'
+    componentItem.style.textDecoration = componentItem.style.textDecoration || 'normal'
     componentItem.propValue.forEach(tabItem => {
       tabItem.componentData.forEach(tabComponent => {
         historyItemAdaptor(tabComponent, reportFilterInfo, attachInfo, canvasVersion, canvasInfo)