Merge pull request #3779 from dataease/pr@dev@refactor_richTextView-title

refactor(视图): 富文本视图允许修改标题

frontend/src/views/chart/chart/util.js

@@ -354,8 +354,14 @@ export const TYPE_CONFIGS = [
     value: 'richTextView',
     title: 'chart.rich_text_view',
     icon: 'richTextView',
-    properties: [],
-    propertyInner: {}
+    properties: [
+      'title-selector-ant-v'
+    ],
+    propertyInner: {
+      'title-selector-ant-v': [
+        'title'
+      ]
+    }
   },
   {
     render: 'antv',

frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue

@@ -15,9 +15,10 @@
           <el-checkbox
             v-model="titleForm.show"
             @change="changeTitleStyle('show')"
-          >{{ $t('chart.show') }}</el-checkbox>
+          >{{ $t('chart.show') }}
+          </el-checkbox>
         </el-form-item>
-        <div v-show="showProperty('show') && titleForm.show">
+        <div v-show="titleForm.show">
           <el-form-item
             v-show="showProperty('title')"
             v-if="!batchOptStatus"
@@ -105,11 +106,13 @@
             <el-checkbox
               v-model="titleForm.isItalic"
               @change="changeTitleStyle('isItalic')"
-            >{{ $t('chart.italic') }}</el-checkbox>
+            >{{ $t('chart.italic') }}
+            </el-checkbox>
             <el-checkbox
               v-model="titleForm.isBolder"
               @change="changeTitleStyle('isBolder')"
-            >{{ $t('chart.bolder') }}</el-checkbox>
+            >{{ $t('chart.bolder') }}
+            </el-checkbox>
           </el-form-item>
           <el-form-item
             v-show="showProperty('letterSpace')"
@@ -137,7 +140,8 @@
             <el-checkbox
               v-model="titleForm.fontShadow"
               @change="changeTitleStyle('fontShadow')"
-            >{{ $t('chart.font_shadow') }}</el-checkbox>
+            >{{ $t('chart.font_shadow') }}
+            </el-checkbox>
           </el-form-item>
 
           <el-form-item
@@ -148,7 +152,8 @@
             <el-checkbox
               v-model="titleForm.remarkShow"
               @change="changeTitleStyle('remarkShow')"
-            >{{ $t('chart.show') }}</el-checkbox>
+            >{{ $t('chart.show') }}
+            </el-checkbox>
           </el-form-item>
           <span v-show="titleForm.remarkShow">
             <el-form-item
@@ -204,12 +209,14 @@
         <el-button
           size="mini"
           @click="closeRemark"
-        >{{ $t('chart.cancel') }}</el-button>
+        >{{ $t('chart.cancel') }}
+        </el-button>
         <el-button
           type="primary"
           size="mini"
           @click="changeRemark"
-        >{{ $t('chart.confirm') }}</el-button>
+        >{{ $t('chart.confirm') }}
+        </el-button>
       </div>
     </el-dialog>
   </div>
@@ -358,19 +365,24 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
+
 .form-item-slider ::v-deep .el-form-item__label {
   font-size: 12px;
   line-height: 38px;
 }
+
 .form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
+
 .el-select-dropdown__item {
   padding: 0 20px;
 }
+
 span {
   font-size: 12px
 }
+
 .el-form-item {
   margin-bottom: 6px;
 }
@@ -380,6 +392,7 @@ span{
   right: 10px;
   margin-top: -4px;
 }
+
 .color-picker-style {
   cursor: pointer;
   z-index: 1003;

frontend/src/views/chart/view/ChartStyle.vue

@@ -18,7 +18,14 @@
       style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
       class="attr-style theme-border-class"
     >
-      <el-row class="de-collapse-style">
+      <el-row
+        v-show="showPropertiesCollapse([
+          'color-selector','size-selector','size-selector-ant-v',
+          'label-selector','label-selector-ant-v',
+          'tooltip-selector','tooltip-selector-ant-v',
+          'total-cfg','suspension-selector'])"
+        class="de-collapse-style"
+      >
         <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
         <el-collapse
           v-model="attrActiveNames"
@@ -496,7 +503,7 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .de-collapse-style {
   ::v-deep.el-collapse-item__header {
     height: 34px !important;
@@ -506,9 +513,11 @@ export default {
     font-weight: 400 !important;
   }
 }
+
 .padding-lr {
   padding: 0 6px;
 }
+
 .col {
   width: 40%;
   flex: 1;
@@ -680,6 +689,7 @@ export default {
   font-size: 12px;
   line-height: 38px;
 }
+
 .form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }