@@ -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);
+ }
+}
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 23af4224fd..e37f39ad23 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/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'
}
},
{
diff --git a/core/core-frontend/src/custom-component/de-tabs/Component.vue b/core/core-frontend/src/custom-component/de-tabs/Component.vue
index 33c1d9a7cb..64bdfa1f03 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/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'
}
}
diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index 031d03bf31..df424b9bec 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/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',
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index e5e32e11b0..2c13306519 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/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: '條件樣式設定',
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index a63e5e5c23..e9436a4199 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/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)