feat: 指标卡>指标值>后缀增加显示设置

core/core-frontend/src/custom-component/indicator/DeIndicator.vue

@@ -194,6 +194,8 @@ const indicatorSuffixClass = ref<CSSProperties>({
   'font-synthesis': 'weight style'
 })
 
+const showSuffix = ref<boolean>(DEFAULT_INDICATOR_STYLE.suffixEnable)
+
 const suffixContent = ref('')
 
 const indicatorNameShow = ref(false)
@@ -293,6 +295,7 @@ const renderChart = async view => {
         'font-synthesis': 'weight style'
       }
 
+      showSuffix.value = customAttr.indicator.suffixEnable
       suffixContent.value = defaultTo(customAttr.indicator.suffix, '')
     }
     if (customAttr.indicatorName && customAttr.indicatorName.show) {
@@ -359,7 +362,7 @@ defineExpose({
   <div :style="contentStyle">
     <div>
       <span :style="indicatorClass">{{ formattedResult }}</span>
-      <span :style="indicatorSuffixClass">{{ suffixContent }}</span>
+      <span :style="indicatorSuffixClass" v-if="showSuffix">{{ suffixContent }}</span>
     </div>
     <div v-if="indicatorNameShow">
       <span :style="indicatorNameClass">{{ resultName }}</span>

core/core-frontend/src/models/chart/chart-style.d.ts

@@ -44,6 +44,7 @@ declare interface ChartIndicatorStyle {
   letterSpace: string
   fontShadow: boolean
 
+  suffixEnable: boolean
   suffix: string
   suffixFontSize: string
   suffixColor: string

core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue

@@ -149,6 +149,7 @@ watch(
 
         <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
           <el-select
+            size="small"
             :effect="themes"
             v-model="state.indicatorNameForm.letterSpace"
             :placeholder="t('chart.quota_letter_space')"

core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue

@@ -360,12 +360,21 @@ watch(
 
       <el-divider class="m-divider" :class="{ 'divider-dark': themes === 'dark' }" />
 
-      <el-form-item
+      <el-form-item class="form-item" :class="'form-item-' + themes">
-        class="form-item"
+        <el-checkbox
-        :class="'form-item-' + themes"
+          size="small"
-        :label="t('chart.indicator_suffix')"
+          :effect="themes"
+          v-model="state.indicatorValueForm.suffixEnable"
+          @change="changeTitleStyle('suffixEnable')"
         >
+          {{ t('chart.indicator_suffix') }}
+        </el-checkbox>
+      </el-form-item>
+
+      <div style="padding-left: 22px">
+        <el-form-item class="form-item" :class="'form-item-' + themes">
           <el-input
+            :disabled="!state.indicatorValueForm.suffixEnable"
             v-model="state.indicatorValueForm.suffix"
             :placeholder="t('chart.indicator_suffix_placeholder')"
             maxlength="10"
@@ -375,6 +384,7 @@ watch(
 
         <el-form-item class="form-item" :class="'form-item-' + themes" :effect="themes">
           <el-select
+            :disabled="!state.indicatorValueForm.suffixEnable"
             :effect="themes"
             v-model="state.indicatorValueForm.suffixFontFamily"
             :placeholder="t('chart.font_family')"
@@ -392,6 +402,7 @@ watch(
         <div style="display: flex">
           <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
             <el-color-picker
+              :disabled="!state.indicatorValueForm.suffixEnable"
               :effect="themes"
               v-model="state.indicatorValueForm.suffixColor"
               class="color-picker-style"
@@ -403,6 +414,7 @@ watch(
           <el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
             <el-tooltip content="字号" :effect="toolTip" placement="top">
               <el-select
+                :disabled="!state.indicatorValueForm.suffixEnable"
                 style="width: 56px"
                 :effect="themes"
                 v-model="state.indicatorValueForm.suffixFontSize"
@@ -422,6 +434,8 @@ watch(
 
           <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
             <el-select
+              size="small"
+              :disabled="!state.indicatorValueForm.suffixEnable"
               :effect="themes"
               v-model="state.indicatorValueForm.suffixLetterSpace"
               :placeholder="t('chart.quota_letter_space')"
@@ -445,6 +459,7 @@ watch(
         <el-space>
           <el-form-item class="form-item" :class="'form-item-' + themes">
             <el-checkbox
+              :disabled="!state.indicatorValueForm.suffixEnable"
               :effect="themes"
               class="icon-checkbox"
               v-model="state.indicatorValueForm.suffixIsBolder"
@@ -471,6 +486,7 @@ watch(
 
           <el-form-item class="form-item" :class="'form-item-' + themes">
             <el-checkbox
+              :disabled="!state.indicatorValueForm.suffixEnable"
               :effect="themes"
               class="icon-checkbox"
               v-model="state.indicatorValueForm.suffixIsItalic"
@@ -498,6 +514,7 @@ watch(
 
         <el-form-item class="form-item" :class="'form-item-' + themes">
           <el-checkbox
+            :disabled="!state.indicatorValueForm.suffixEnable"
             size="small"
             :effect="themes"
             v-model="state.indicatorValueForm.suffixFontShadow"
@@ -506,6 +523,7 @@ watch(
             {{ t('chart.font_shadow') }}
           </el-checkbox>
         </el-form-item>
+      </div>
     </el-form>
   </div>
 </template>

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -359,6 +359,7 @@ export const DEFAULT_INDICATOR_STYLE: ChartIndicatorStyle = {
   letterSpace: '0',
   fontShadow: false,
 
+  suffixEnable: true,
   suffix: '',
   suffixFontSize: '14',
   suffixColor: '#5470C6',