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

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

frontend/src/components/canvas/components/editor/EditBar.vue

@@ -137,7 +137,7 @@
           :target="curComponent.hyperlinks.openMode "
           :href="curComponent.hyperlinks.content "
         >
-          <i class="icon iconfont icon-com-jump"/>
+          <i class="icon iconfont icon-com-jump" />
         </a>
       </span>
 

frontend/src/views/background/index.vue

@@ -112,7 +112,7 @@
               :http-request="upload"
               :file-list="fileList"
             >
-              <i class="el-icon-plus"/>
+              <i class="el-icon-plus" />
             </el-upload>
             <el-dialog
               top="25vh"

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: [],
+    properties: [
-    propertyInner: {}
+      '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>
@@ -350,7 +357,7 @@ export default {
 </script>
 
 <style scoped>
-.shape-item{
+.shape-item {
   padding: 6px;
   border: none;
   width: 100%;
@@ -358,29 +365,35 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-.form-item-slider ::v-deep .el-form-item__label{
+
+.form-item-slider ::v-deep .el-form-item__label {
   font-size: 12px;
   line-height: 38px;
 }
-.form-item ::v-deep .el-form-item__label{
+
+.form-item ::v-deep .el-form-item__label {
   font-size: 12px;
 }
-.el-select-dropdown__item{
+
+.el-select-dropdown__item {
   padding: 0 20px;
 }
-span{
+
+span {
   font-size: 12px
 }
-.el-form-item{
+
+.el-form-item {
   margin-bottom: 6px;
 }
 
-.switch-style{
+.switch-style {
   position: absolute;
   right: 10px;
   margin-top: -4px;
 }
-.color-picker-style{
+
+.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,190 +513,193 @@ export default {
     font-weight: 400 !important;
   }
 }
-  .padding-lr {
-    padding: 0 6px;
-  }
-  .col {
-    width: 40%;
-    flex: 1;
-    padding: 10px;
-    border: solid 1px #eee;
-    border-radius: 5px;
-    float: left;
-  }
 
-  .col + .col {
+.padding-lr {
-    margin-left: 10px;
+  padding: 0 6px;
-  }
+}
 
-  .view-panel {
+.col {
-    display: flex;
+  width: 40%;
-    height: 100%;
+  flex: 1;
-    background-color: #f7f8fa;
+  padding: 10px;
-  }
+  border: solid 1px #eee;
+  border-radius: 5px;
+  float: left;
+}
 
-  .blackTheme .view-panel {
+.col + .col {
-    background-color: var(--MainBG);
+  margin-left: 10px;
-  }
+}
 
-  .el-form-item {
+.view-panel {
-    margin-bottom: 0;
+  display: flex;
-  }
+  height: 100%;
+  background-color: #f7f8fa;
+}
 
-  span {
+.blackTheme .view-panel {
-    font-size: 12px;
+  background-color: var(--MainBG);
-  }
+}
 
-  .tab-header ::v-deep .el-tabs__header {
+.el-form-item {
-    border-top: solid 1px #eee;
+  margin-bottom: 0;
-    border-right: solid 1px #eee;
+}
-  }
 
-  .tab-header ::v-deep .el-tabs__item {
+span {
-    font-size: 12px;
+  font-size: 12px;
-    padding: 0 20px !important;
+}
-  }
 
-  .blackTheme .tab-header ::v-deep .el-tabs__item {
+.tab-header ::v-deep .el-tabs__header {
-    background-color: var(--MainBG);
+  border-top: solid 1px #eee;
-  }
+  border-right: solid 1px #eee;
+}
 
-  .tab-header ::v-deep .el-tabs__nav-scroll {
+.tab-header ::v-deep .el-tabs__item {
-    padding-left: 0 !important;
+  font-size: 12px;
-  }
+  padding: 0 20px !important;
+}
 
-  .tab-header ::v-deep .el-tabs__header {
+.blackTheme .tab-header ::v-deep .el-tabs__item {
-    margin: 0 !important;
+  background-color: var(--MainBG);
-  }
+}
 
-  .tab-header ::v-deep .el-tabs__content {
+.tab-header ::v-deep .el-tabs__nav-scroll {
-    height: calc(100% - 40px);
+  padding-left: 0 !important;
-  }
+}
 
-  .chart-icon {
+.tab-header ::v-deep .el-tabs__header {
-    width: 20px;
+  margin: 0 !important;
-    height: 20px;
+}
-  }
 
-  .el-radio {
+.tab-header ::v-deep .el-tabs__content {
-    margin: 5px;
+  height: calc(100% - 40px);
-  }
+}
 
-  .el-radio ::v-deep .el-radio__label {
+.chart-icon {
-    padding-left: 0;
+  width: 20px;
-  }
+  height: 20px;
+}
 
-  .attr-style {
+.el-radio {
-    height: calc(100vh - 56px - 60px - 40px - 40px);
+  margin: 5px;
-  }
+}
 
-  .blackTheme .attr-style {
+.el-radio ::v-deep .el-radio__label {
-    color: var(--TextPrimary);
+  padding-left: 0;
-  }
+}
 
-  .attr-selector {
+.attr-style {
-    width: 100%;
+  height: calc(100vh - 56px - 60px - 40px - 40px);
-    height: 100%;
+}
-    margin: 6px 0;
-    padding: 0 4px;
-    display: flex;
-    align-items: center;
-    background-color: white
-  }
 
-  .blackTheme .attr-selector {
+.blackTheme .attr-style {
+  color: var(--TextPrimary);
+}
 
-    background-color: var(--MainBG)
+.attr-selector {
-  }
+  width: 100%;
+  height: 100%;
+  margin: 6px 0;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  background-color: white
+}
 
-  .dialog-css ::v-deep .el-dialog__title {
+.blackTheme .attr-selector {
-    font-size: 14px;
-  }
 
-  .dialog-css ::v-deep .el-dialog__header {
+  background-color: var(--MainBG)
-    padding: 20px 20px 0;
+}
-  }
 
-  .dialog-css ::v-deep .el-dialog__body {
+.dialog-css ::v-deep .el-dialog__title {
-    padding: 10px 20px 20px;
+  font-size: 14px;
-  }
+}
 
-  .blackTheme .theme-border-class {
+.dialog-css ::v-deep .el-dialog__header {
-    color: var(--TextPrimary) !important;
+  padding: 20px 20px 0;
-    background-color: var(--ContentBG);
+}
-  }
 
-  .blackTheme .padding-lr {
+.dialog-css ::v-deep .el-dialog__body {
-    border-color: var(--TableBorderColor) !important;
+  padding: 10px 20px 20px;
-  }
+}
 
-  .blackTheme .theme-item-class {
+.blackTheme .theme-border-class {
-    background-color: var(--MainBG) !important;
+  color: var(--TextPrimary) !important;
-    border-color: var(--TableBorderColor) !important;
+  background-color: var(--ContentBG);
-  }
+}
 
-  .icon-class {
+.blackTheme .padding-lr {
-    color: #6c6c6c;
+  border-color: var(--TableBorderColor) !important;
-  }
+}
 
-  .blackTheme .icon-class {
+.blackTheme .theme-item-class {
-    color: #cccccc;
+  background-color: var(--MainBG) !important;
-  }
+  border-color: var(--TableBorderColor) !important;
+}
 
-  .radio-span ::v-deep .el-radio__label {
+.icon-class {
-    margin-left: 4px;
+  color: #6c6c6c;
-  }
+}
 
-  .view-title-name {
+.blackTheme .icon-class {
-    display: -moz-inline-box;
+  color: #cccccc;
-    display: inline-block;
+}
-    width: 130px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin-left: 45px;
-  }
 
-  ::v-deep .item-axis {
+.radio-span ::v-deep .el-radio__label {
-    width: 128px !important;
+  margin-left: 4px;
-  }
+}
 
-  ::v-deep .el-slider__input {
+.view-title-name {
-    width: 80px !important;
+  display: -moz-inline-box;
-  }
+  display: inline-block;
+  width: 130px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-left: 45px;
+}
 
-  ::v-deep .el-input-number--mini {
+::v-deep .item-axis {
-    width: 100px !important;
+  width: 128px !important;
-  }
+}
 
-  ::v-deep .el-slider__runway.show-input{
+::v-deep .el-slider__input {
-    width: 80px!important;
+  width: 80px !important;
-  }
+}
 
-  .no-senior {
+::v-deep .el-input-number--mini {
-    width: 100%;
+  width: 100px !important;
-    text-align: center;
+}
-    font-size: 12px;
-    padding-top: 40px;
-    overflow: auto;
-    border-right: 1px solid #e6e6e6;
-    height: 100%;
-  }
 
-  .form-item-slider ::v-deep .el-form-item__label{
+::v-deep .el-slider__runway.show-input {
-    font-size: 12px;
+  width: 80px !important;
-    line-height: 38px;
+}
-  }
-  .form-item ::v-deep .el-form-item__label{
-    font-size: 12px;
-  }
 
-  .no-properties {
+.no-senior {
-    width: 100%;
+  width: 100%;
-    text-align: center;
+  text-align: center;
-    font-size: 12px;
+  font-size: 12px;
-    padding-top: 40px;
+  padding-top: 40px;
-    overflow: auto;
+  overflow: auto;
-    height: 100%;
+  border-right: 1px solid #e6e6e6;
-  }
+  height: 100%;
-  </style>
+}
+
+.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;
+}
+
+.no-properties {
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  padding-top: 40px;
+  overflow: auto;
+  height: 100%;
+}
+</style>