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,6 +107,7 @@ watch(
 </script>
 
 <template>
+  <div>
     <el-form
       ref="titleForm"
       :disabled="!state.titleForm.show"
@@ -262,7 +283,10 @@ watch(
                 </template>
                 <div
                   class="icon-btn"
-                :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'center' }"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: state.titleForm.hPosition === 'center'
+                  }"
                 >
                   <el-icon>
                     <Icon name="icon_center-alignment_outlined" />
@@ -277,7 +301,10 @@ watch(
                 </template>
                 <div
                   class="icon-btn"
-                :class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'right' }"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: state.titleForm.hPosition === 'right'
+                  }"
                 >
                   <el-icon>
                     <Icon name="icon_right-alignment_outlined" />
@@ -299,7 +326,49 @@ watch(
           {{ 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"
+          v-model="state.titleForm.remarkShow"
+          @change="changeTitleStyle('remarkShow')"
+        >
+          {{ t('chart.remark_show') }}
+        </el-checkbox>
+      </el-form-item>
+      <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-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" />