feat: 图表标题增加备注设置

core/core-frontend/src/locales/zh-CN.ts

@@ -951,6 +951,7 @@ export default {
     field_can_not_empty: '字段不能为空',
     conditions_can_not_empty: '字段的条件不能为空，若无条件，请直接删除该字段',
     remark: '备注',
+    remark_show: '显示备注',
     remark_edit: '编辑备注',
     remark_bg_color: '背景填充',
     quota_font_family: '值字体',

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PropType, computed, onMounted, reactive, toRefs, watch, nextTick } from 'vue'
+import { PropType, computed, onMounted, reactive, toRefs, watch, nextTick, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import {
   COLOR_PANEL,
@@ -10,6 +10,8 @@ import {
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { cloneDeep, defaultsDeep } from 'lodash-es'
+import { ElButton, ElIcon } from 'element-plus-secondary'
+import Icon from '@/components/icon-custom/src/Icon.vue'
 const dvMainStore = dvMainStoreWithOut()
 const { batchOptStatus } = storeToRefs(dvMainStore)
 
@@ -55,7 +57,6 @@ const fontSizeList = computed(() => {
 })
 
 const changeTitleStyle = prop => {
-  console.log(prop)
   emit('onTextChange', state.titleForm, prop)
 }
 
@@ -73,6 +74,25 @@ const init = () => {
   })
 }
 
+const showEditRemark = ref<boolean>(false)
+const tempRemark = ref<string>('')
+
+const openEditRemark = () => {
+  tempRemark.value = cloneDeep(state.titleForm.remark)
+  showEditRemark.value = true
+}
+
+const closeEditRemark = () => {
+  showEditRemark.value = false
+  tempRemark.value = ''
+}
+
+const saveEditRemark = () => {
+  showEditRemark.value = false
+  state.titleForm.remark = tempRemark.value
+  changeTitleStyle('remark')
+}
+
 onMounted(() => {
   init()
 })
@@ -87,219 +107,268 @@ watch(
 </script>
 
 <template>
-  <el-form
-    ref="titleForm"
-    :disabled="!state.titleForm.show"
-    :model="state.titleForm"
-    label-position="top"
-  >
-    <el-form-item
-      :label="t('chart.title')"
-      class="form-item"
-      :class="'form-item-' + themes"
-      v-if="!batchOptStatus"
+  <div>
+    <el-form
+      ref="titleForm"
+      :disabled="!state.titleForm.show"
+      :model="state.titleForm"
+      label-position="top"
     >
-      <el-input
-        :effect="themes"
-        v-model="chart.title"
-        size="small"
-        maxlength="100"
-        :placeholder="t('chart.title')"
-        clearable
-        @blur="changeTitleStyle('title')"
-      />
-    </el-form-item>
-
-    <el-form-item
-      class="form-item"
-      :class="'form-item-' + themes"
-      :effect="themes"
-      :label="t('chart.text')"
-    >
-      <el-select
-        :effect="themes"
-        v-model="state.titleForm.fontFamily"
-        :placeholder="t('chart.font_family')"
-        @change="changeTitleStyle('fontFamily')"
+      <el-form-item
+        :label="t('chart.title')"
+        class="form-item"
+        :class="'form-item-' + themes"
+        v-if="!batchOptStatus"
       >
-        <el-option
-          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
+        <el-input
           :effect="themes"
-          v-model="state.titleForm.color"
-          class="color-picker-style"
-          :predefine="predefineColors"
-          @change="changeTitleStyle('color')"
-          is-custom
+          v-model="chart.title"
+          size="small"
+          maxlength="100"
+          :placeholder="t('chart.title')"
+          clearable
+          @blur="changeTitleStyle('title')"
         />
       </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.titleForm.fontSize"
-            :placeholder="t('chart.text_fontsize')"
-            size="small"
-            @change="changeTitleStyle('fontSize')"
-          >
-            <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"
+        :label="t('chart.text')"
+      >
         <el-select
           :effect="themes"
-          v-model="state.titleForm.letterSpace"
-          :placeholder="t('chart.quota_letter_space')"
-          @change="changeTitleStyle('letterSpace')"
+          v-model="state.titleForm.fontFamily"
+          :placeholder="t('chart.font_family')"
+          @change="changeTitleStyle('fontFamily')"
         >
-          <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>
 
-    <el-space>
+      <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.titleForm.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
+            @change="changeTitleStyle('color')"
+            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.titleForm.fontSize"
+              :placeholder="t('chart.text_fontsize')"
+              size="small"
+              @change="changeTitleStyle('fontSize')"
+            >
+              <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
+            :effect="themes"
+            v-model="state.titleForm.letterSpace"
+            :placeholder="t('chart.quota_letter_space')"
+            @change="changeTitleStyle('letterSpace')"
+          >
+            <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
+            :effect="themes"
+            class="icon-checkbox"
+            v-model="state.titleForm.isBolder"
+            @change="changeTitleStyle('isBolder')"
+          >
+            <el-tooltip :effect="toolTip" placement="top">
+              <template #content>
+                {{ t('chart.bolder') }}
+              </template>
+              <div
+                class="icon-btn"
+                :class="{ dark: themes === 'dark', active: state.titleForm.isBolder }"
+              >
+                <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.titleForm.isItalic"
+            @change="changeTitleStyle('isItalic')"
+          >
+            <el-tooltip :effect="toolTip" placement="top">
+              <template #content>
+                {{ t('chart.italic') }}
+              </template>
+              <div
+                class="icon-btn"
+                :class="{ dark: themes === 'dark', active: state.titleForm.isItalic }"
+              >
+                <el-icon>
+                  <Icon name="icon_italic_outlined" />
+                </el-icon>
+              </div>
+            </el-tooltip>
+          </el-checkbox>
+        </el-form-item>
+
+        <div class="position-divider" :class="'position-divider--' + themes"></div>
+
+        <el-form-item class="form-item" :class="'form-item-' + themes">
+          <el-radio-group
+            :effect="themes"
+            class="icon-radio-group"
+            v-model="state.titleForm.hPosition"
+            @change="changeTitleStyle('hPosition')"
+          >
+            <el-radio :effect="themes" label="left">
+              <el-tooltip :effect="toolTip" placement="top">
+                <template #content>
+                  {{ t('chart.text_pos_left') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'left' }"
+                >
+                  <el-icon>
+                    <Icon name="icon_left-alignment_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </el-radio>
+            <el-radio :effect="themes" label="center">
+              <el-tooltip :effect="toolTip" placement="top">
+                <template #content>
+                  {{ t('chart.text_pos_center') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: state.titleForm.hPosition === 'center'
+                  }"
+                >
+                  <el-icon>
+                    <Icon name="icon_center-alignment_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </el-radio>
+            <el-radio :effect="themes" label="right">
+              <el-tooltip :effect="toolTip" placement="top">
+                <template #content>
+                  {{ t('chart.text_pos_right') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: state.titleForm.hPosition === 'right'
+                  }"
+                >
+                  <el-icon>
+                    <Icon name="icon_right-alignment_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-space>
+
       <el-form-item class="form-item" :class="'form-item-' + themes">
         <el-checkbox
+          size="small"
           :effect="themes"
-          class="icon-checkbox"
-          v-model="state.titleForm.isBolder"
-          @change="changeTitleStyle('isBolder')"
+          v-model="state.titleForm.fontShadow"
+          @change="changeTitleStyle('fontShadow')"
         >
-          <el-tooltip :effect="toolTip" placement="top">
-            <template #content>
-              {{ t('chart.bolder') }}
-            </template>
-            <div
-              class="icon-btn"
-              :class="{ dark: themes === 'dark', active: state.titleForm.isBolder }"
-            >
-              <el-icon>
-                <Icon name="icon_bold_outlined" />
-              </el-icon>
-            </div>
-          </el-tooltip>
+          {{ t('chart.font_shadow') }}
         </el-checkbox>
       </el-form-item>
 
       <el-form-item class="form-item" :class="'form-item-' + themes">
         <el-checkbox
+          size="small"
           :effect="themes"
-          class="icon-checkbox"
-          v-model="state.titleForm.isItalic"
-          @change="changeTitleStyle('isItalic')"
+          v-model="state.titleForm.remarkShow"
+          @change="changeTitleStyle('remarkShow')"
         >
-          <el-tooltip :effect="toolTip" placement="top">
-            <template #content>
-              {{ t('chart.italic') }}
-            </template>
-            <div
-              class="icon-btn"
-              :class="{ dark: themes === 'dark', active: state.titleForm.isItalic }"
-            >
-              <el-icon>
-                <Icon name="icon_italic_outlined" />
-              </el-icon>
-            </div>
-          </el-tooltip>
+          {{ t('chart.remark_show') }}
         </el-checkbox>
       </el-form-item>
-
-      <div class="position-divider" :class="'position-divider--' + themes"></div>
-
-      <el-form-item class="form-item" :class="'form-item-' + themes">
-        <el-radio-group
-          :effect="themes"
-          class="icon-radio-group"
-          v-model="state.titleForm.hPosition"
-          @change="changeTitleStyle('hPosition')"
-        >
-          <el-radio :effect="themes" label="left">
-            <el-tooltip :effect="toolTip" placement="top">
-              <template #content>
-                {{ t('chart.text_pos_left') }}
-              </template>
-              <div
-                class="icon-btn"
-                :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'left' }"
-              >
-                <el-icon>
-                  <Icon name="icon_left-alignment_outlined" />
-                </el-icon>
-              </div>
-            </el-tooltip>
-          </el-radio>
-          <el-radio :effect="themes" label="center">
-            <el-tooltip :effect="toolTip" placement="top">
-              <template #content>
-                {{ t('chart.text_pos_center') }}
-              </template>
-              <div
-                class="icon-btn"
-                :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'center' }"
-              >
-                <el-icon>
-                  <Icon name="icon_center-alignment_outlined" />
-                </el-icon>
-              </div>
-            </el-tooltip>
-          </el-radio>
-          <el-radio :effect="themes" label="right">
-            <el-tooltip :effect="toolTip" placement="top">
-              <template #content>
-                {{ t('chart.text_pos_right') }}
-              </template>
-              <div
-                class="icon-btn"
-                :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'right' }"
-              >
-                <el-icon>
-                  <Icon name="icon_right-alignment_outlined" />
-                </el-icon>
-              </div>
-            </el-tooltip>
-          </el-radio>
-        </el-radio-group>
+      <el-form-item class="form-item" :class="'form-item-' + themes" style="margin-left: 22px">
+        <label class="remark-label" :class="{ 'remark-label--dark': themes === 'dark' }">
+          {{ t('chart.remark_edit') }}
+        </label>
+        <el-button text @click="openEditRemark" :effect="themes">
+          <el-icon size="14px">
+            <Icon name="icon_edit_outlined" />
+          </el-icon>
+        </el-button>
       </el-form-item>
-    </el-space>
+    </el-form>
 
-    <el-form-item class="form-item" :class="'form-item-' + themes">
-      <el-checkbox
-        size="small"
-        :effect="themes"
-        v-model="state.titleForm.fontShadow"
-        @change="changeTitleStyle('fontShadow')"
-      >
-        {{ t('chart.font_shadow') }}
-      </el-checkbox>
-    </el-form-item>
-  </el-form>
+    <el-dialog
+      :title="t('chart.remark_edit')"
+      :visible="showEditRemark"
+      v-model="showEditRemark"
+      width="420px"
+      :close-on-click-modal="false"
+    >
+      <div @keydown.stop @keyup.stop>
+        <el-form-item :label="t('chart.remark')" class="form-item" prop="chartShowName">
+          <el-input type="textarea" autosize v-model="tempRemark" :maxlength="50" clearable />
+        </el-form-item>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeEditRemark">{{ t('chart.cancel') }}</el-button>
+          <el-button type="primary" @click="saveEditRemark()">{{ t('chart.confirm') }}</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <style lang="less" scoped>
@@ -401,4 +470,16 @@ watch(
     background: rgba(235, 235, 235, 0.15);
   }
 }
+.remark-label {
+  color: var(--N600, #646a73);
+  font-family: PingFang SC;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+
+  &.remark-label--dark {
+    color: var(--N600-Dark, #a6a6a6);
+  }
+}
 </style>

core/core-frontend/src/views/chart/components/views/index.vue

@@ -101,6 +101,10 @@ const snapshotStore = snapshotStoreWithOut()
 const state = reactive({
   initReady: true, //curComponent 切换期间 不接收外部的calcData 和 renderChart 事件
   title_show: true,
+  title_remark: {
+    show: false,
+    remark: ''
+  },
   title_class: {
     fontSize: '18px',
     color: '#303133',
@@ -240,6 +244,9 @@ const initTitle = () => {
         customStyle.background.alpha
       )
     }
+
+    state.title_remark.show = customStyle.text.remarkShow
+    state.title_remark.remark = customStyle.text.remark
   }
 }
 
@@ -563,8 +570,16 @@ const toolTip = computed(() => {
       <div
         class="icons-container"
         :class="{ 'is-editing': titleEditStatus }"
-        v-if="trackMenu.length > 0"
+        v-if="trackMenu.length > 0 || state.title_remark.show"
       >
+        <el-tooltip :effect="toolTip" placement="top" v-if="state.title_remark.show">
+          <template #content>
+            <div style="white-space: pre-wrap" v-html="state.title_remark.remark"></div>
+          </template>
+          <el-icon size="16px" class="inner-icon">
+            <Icon name="icon_info_outlined" />
+          </el-icon>
+        </el-tooltip>
         <el-tooltip :effect="toolTip" placement="top" content="已设置联动" v-if="hasLinkIcon">
           <el-icon size="16px" class="inner-icon">
             <Icon name="icon_link-record_outlined" />