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,152 +360,170 @@ 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')"
-      >
-        <el-input
-          v-model="state.indicatorValueForm.suffix"
-          :placeholder="t('chart.indicator_suffix_placeholder')"
-          maxlength="10"
-          @change="changeTitleStyle('suffix')"
-        />
-      </el-form-item>
-
-      <el-form-item class="form-item" :class="'form-item-' + themes" :effect="themes">
-        <el-select
           :effect="themes"
-          v-model="state.indicatorValueForm.suffixFontFamily"
+          v-model="state.indicatorValueForm.suffixEnable"
-          :placeholder="t('chart.font_family')"
+          @change="changeTitleStyle('suffixEnable')"
-          @change="changeTitleStyle('suffixFontFamily')"
         >
-          <el-option
+          {{ t('chart.indicator_suffix') }}
-            v-for="option in fontFamily"
+        </el-checkbox>
-            :key="option.value"
-            :label="option.name"
-            :value="option.value"
-          />
-        </el-select>
       </el-form-item>
 
-      <div style="display: flex">
+      <div style="padding-left: 22px">
-        <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
+        <el-form-item class="form-item" :class="'form-item-' + themes">
-          <el-color-picker
+          <el-input
-            :effect="themes"
+            :disabled="!state.indicatorValueForm.suffixEnable"
-            v-model="state.indicatorValueForm.suffixColor"
+            v-model="state.indicatorValueForm.suffix"
-            class="color-picker-style"
+            :placeholder="t('chart.indicator_suffix_placeholder')"
-            :predefine="predefineColors"
+            maxlength="10"
-            @change="changeTitleStyle('suffixColor')"
+            @change="changeTitleStyle('suffix')"
-            is-custom
           />
         </el-form-item>
-        <el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
-          <el-tooltip content="字号" :effect="toolTip" placement="top">
-            <el-select
-              style="width: 56px"
-              :effect="themes"
-              v-model="state.indicatorValueForm.suffixFontSize"
-              :placeholder="t('chart.text_fontsize')"
-              size="small"
-              @change="changeTitleStyle('suffixFontSize')"
-            >
-              <el-option
-                v-for="option in fontSizeList"
-                :key="option.value"
-                :label="option.name"
-                :value="option.value"
-              />
-            </el-select>
-          </el-tooltip>
-        </el-form-item>
 
-        <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
+        <el-form-item class="form-item" :class="'form-item-' + themes" :effect="themes">
           <el-select
+            :disabled="!state.indicatorValueForm.suffixEnable"
             :effect="themes"
-            v-model="state.indicatorValueForm.suffixLetterSpace"
+            v-model="state.indicatorValueForm.suffixFontFamily"
-            :placeholder="t('chart.quota_letter_space')"
+            :placeholder="t('chart.font_family')"
-            @change="changeTitleStyle('suffixLetterSpace')"
+            @change="changeTitleStyle('suffixFontFamily')"
           >
-            <template #prefix>
-              <el-icon>
-                <Icon name="icon_letter-spacing_outlined" />
-              </el-icon>
-            </template>
             <el-option
-              v-for="option in fontLetterSpace"
+              v-for="option in fontFamily"
               :key="option.value"
               :label="option.name"
               :value="option.value"
             />
           </el-select>
         </el-form-item>
+
+        <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"
+              :predefine="predefineColors"
+              @change="changeTitleStyle('suffixColor')"
+              is-custom
+            />
+          </el-form-item>
+          <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"
+                :placeholder="t('chart.text_fontsize')"
+                size="small"
+                @change="changeTitleStyle('suffixFontSize')"
+              >
+                <el-option
+                  v-for="option in fontSizeList"
+                  :key="option.value"
+                  :label="option.name"
+                  :value="option.value"
+                />
+              </el-select>
+            </el-tooltip>
+          </el-form-item>
+
+          <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')"
+              @change="changeTitleStyle('suffixLetterSpace')"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Icon name="icon_letter-spacing_outlined" />
+                </el-icon>
+              </template>
+              <el-option
+                v-for="option in fontLetterSpace"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+
+        <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"
+              @change="changeTitleStyle('suffixIsBolder')"
+            >
+              <el-tooltip :effect="toolTip" placement="top">
+                <template #content>
+                  {{ t('chart.bolder') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: state.indicatorValueForm.suffixIsBolder
+                  }"
+                >
+                  <el-icon>
+                    <Icon name="icon_bold_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </el-checkbox>
+          </el-form-item>
+
+          <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"
+              @change="changeTitleStyle('suffixIsItalic')"
+            >
+              <el-tooltip :effect="toolTip" placement="top">
+                <template #content>
+                  {{ t('chart.italic') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: state.indicatorValueForm.suffixIsItalic
+                  }"
+                >
+                  <el-icon>
+                    <Icon name="icon_italic_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </el-checkbox>
+          </el-form-item>
+        </el-space>
+
+        <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"
+            @change="changeTitleStyle('suffixFontShadow')"
+          >
+            {{ t('chart.font_shadow') }}
+          </el-checkbox>
+        </el-form-item>
       </div>
-
-      <el-space>
-        <el-form-item class="form-item" :class="'form-item-' + themes">
-          <el-checkbox
-            :effect="themes"
-            class="icon-checkbox"
-            v-model="state.indicatorValueForm.suffixIsBolder"
-            @change="changeTitleStyle('suffixIsBolder')"
-          >
-            <el-tooltip :effect="toolTip" placement="top">
-              <template #content>
-                {{ t('chart.bolder') }}
-              </template>
-              <div
-                class="icon-btn"
-                :class="{
-                  dark: themes === 'dark',
-                  active: state.indicatorValueForm.suffixIsBolder
-                }"
-              >
-                <el-icon>
-                  <Icon name="icon_bold_outlined" />
-                </el-icon>
-              </div>
-            </el-tooltip>
-          </el-checkbox>
-        </el-form-item>
-
-        <el-form-item class="form-item" :class="'form-item-' + themes">
-          <el-checkbox
-            :effect="themes"
-            class="icon-checkbox"
-            v-model="state.indicatorValueForm.suffixIsItalic"
-            @change="changeTitleStyle('suffixIsItalic')"
-          >
-            <el-tooltip :effect="toolTip" placement="top">
-              <template #content>
-                {{ t('chart.italic') }}
-              </template>
-              <div
-                class="icon-btn"
-                :class="{
-                  dark: themes === 'dark',
-                  active: state.indicatorValueForm.suffixIsItalic
-                }"
-              >
-                <el-icon>
-                  <Icon name="icon_italic_outlined" />
-                </el-icon>
-              </div>
-            </el-tooltip>
-          </el-checkbox>
-        </el-form-item>
-      </el-space>
-
-      <el-form-item class="form-item" :class="'form-item-' + themes">
-        <el-checkbox
-          size="small"
-          :effect="themes"
-          v-model="state.indicatorValueForm.suffixFontShadow"
-          @change="changeTitleStyle('suffixFontShadow')"
-        >
-          {{ t('chart.font_shadow') }}
-        </el-checkbox>
-      </el-form-item>
     </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',