From 230384e2b115d7631500af3f80f48298bb180fe9 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Mon, 22 Jan 2024 17:11:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8C=87=E6=A0=87=E5=8D=A1>=E6=8C=87?=
 =?UTF-8?q?=E6=A0=87=E5=80=BC>=E5=90=8E=E7=BC=80=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../indicator/DeIndicator.vue                 |   5 +-
 .../src/models/chart/chart-style.d.ts         |   1 +
 .../components/IndicatorNameSelector.vue      |   1 +
 .../components/IndicatorValueSelector.vue     | 274 ++++++++++--------
 .../chart/components/editor/util/chart.ts     |   1 +
 5 files changed, 153 insertions(+), 129 deletions(-)

diff --git a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue
index 71c400b65c..e71f474348 100644
--- a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue
+++ b/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>
diff --git a/core/core-frontend/src/models/chart/chart-style.d.ts b/core/core-frontend/src/models/chart/chart-style.d.ts
index 9cdd45e017..d07758fbcd 100644
--- a/core/core-frontend/src/models/chart/chart-style.d.ts
+++ b/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
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
index 6444a75856..0c54dbc03d 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
+++ b/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')"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
index 936cab9e2d..790f56f570 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
+++ b/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
-        class="form-item"
-        :class="'form-item-' + themes"
-        :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
+      <el-form-item class="form-item" :class="'form-item-' + themes">
+        <el-checkbox
+          size="small"
           :effect="themes"
-          v-model="state.indicatorValueForm.suffixFontFamily"
-          :placeholder="t('chart.font_family')"
-          @change="changeTitleStyle('suffixFontFamily')"
+          v-model="state.indicatorValueForm.suffixEnable"
+          @change="changeTitleStyle('suffixEnable')"
         >
-          <el-option
-            v-for="option in fontFamily"
-            :key="option.value"
-            :label="option.name"
-            :value="option.value"
-          />
-        </el-select>
+          {{ t('chart.indicator_suffix') }}
+        </el-checkbox>
       </el-form-item>
 
-      <div style="display: flex">
-        <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
-          <el-color-picker
-            :effect="themes"
-            v-model="state.indicatorValueForm.suffixColor"
-            class="color-picker-style"
-            :predefine="predefineColors"
-            @change="changeTitleStyle('suffixColor')"
-            is-custom
+      <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"
+            @change="changeTitleStyle('suffix')"
           />
         </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"
-            :placeholder="t('chart.quota_letter_space')"
-            @change="changeTitleStyle('suffixLetterSpace')"
+            v-model="state.indicatorValueForm.suffixFontFamily"
+            :placeholder="t('chart.font_family')"
+            @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>
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 1bfe74f1e8..c0787cb1ad 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/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',