style: 样式修改

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -154,7 +154,7 @@ export default {
     },
     showUnpublishedArea() {
       // return this.panelInfo.status === 'unpublished'
-      if (this.mainActiveName === 'PanelMain' && this.activeTab==='') {
+      if (this.mainActiveName === 'PanelMain' && this.activeTab === 'PanelList') {
         return this.panelInfo.status === 'unpublished' && this.panelInfo.privileges.indexOf('manage') === -1
       } else {
         return this.panelInfo.status === 'unpublished'

frontend/src/views/chart/components/component-style/XAxisSelector.vue

@@ -53,7 +53,7 @@
               </el-form-item>
             </span>
           </span>
-          <el-divider />
+          <el-divider v-if="showProperty('splitLine')" />
           <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
             <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
@@ -72,7 +72,7 @@
               </el-radio-group>
             </el-form-item>
           </span>
-          <el-divider />
+          <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
             <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
@@ -89,7 +89,7 @@
               </el-select>
             </el-form-item>
           </span>
-          <el-divider v-show="showProperty('axisLabel')" />
+          <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
             <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle('')" />
           </el-form-item>

frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue

@@ -53,7 +53,7 @@
               </el-form-item>
             </span>
           </span>
-          <el-divider />
+          <el-divider v-if="showProperty('splitLine')" />
           <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
             <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
@@ -65,7 +65,7 @@
               <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle('splitLine')" />
             </el-form-item>
           </span>
-          <el-divider />
+          <el-divider v-if="showProperty('axisForm')" />
           <el-form-item v-show="showProperty('axisForm')" :label="$t('chart.axis_label_show')" class="form-item">
             <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>

frontend/src/views/chart/components/component-style/YAxisExtSelector.vue

@@ -53,7 +53,7 @@
               </el-form-item>
             </span>
           </span>
-          <el-divider v-show="showProperty('splitLine')"   />
+          <el-divider v-if="showProperty('splitLine')"   />
           <el-form-item v-show="showProperty('splitLine')"  :label="$t('chart.axis_show')" class="form-item">
             <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
@@ -72,7 +72,7 @@
               </el-radio-group>
             </el-form-item>
           </span>
-          <el-divider v-show="showProperty('axisLabel')" />
+          <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item v-show="showProperty('axisLabel')"  :label="$t('chart.axis_label_show')" class="form-item">
             <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
@@ -89,7 +89,7 @@
               </el-select>
             </el-form-item>
           </span>
-          <el-divider v-show="showProperty('axisLabel')" />
+          <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item v-show="showProperty('axisLabel')"  :label="$t('chart.content_formatter')" class="form-item">
             <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle('axisLabel')" />
           </el-form-item>

frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue

@@ -53,7 +53,7 @@
               </el-form-item>
             </span>
           </span>
-          <el-divider />
+          <el-divider v-if="showProperty('splitLine')" />
           <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
             <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
@@ -65,7 +65,7 @@
               <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('lineStyle')" />
             </el-form-item>
           </span>
-          <el-divider />
+          <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
             <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>

frontend/src/views/chart/components/component-style/YAxisSelector.vue

@@ -53,7 +53,7 @@
               </el-form-item>
             </span>
           </span>
-          <el-divider />
+          <el-divider v-if="showProperty('splitLine')" />
           <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
             <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
@@ -72,7 +72,7 @@
               </el-radio-group>
             </el-form-item>
           </span>
-          <el-divider v-show="showProperty('axisLabel')" />
+          <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
             <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>
@@ -89,7 +89,7 @@
               </el-select>
             </el-form-item>
           </span>
-          <el-divider v-show="showProperty('axisLabel')" />
+          <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
             <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle('axisLabel')" />
           </el-form-item>

frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue

@@ -64,7 +64,7 @@
               </el-form-item>
             </span>
           </span>
-          <el-divider />
+          <el-divider v-if="showProperty('splitLine')"  />
           <el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
             <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
           </el-form-item>
@@ -76,7 +76,7 @@
               <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
             </el-form-item>
           </span>
-          <el-divider />
+          <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
             <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
           </el-form-item>

frontend/src/views/chart/components/shape-attr/SizeSelector.vue

@@ -79,13 +79,13 @@
         <!--radar-end-->
         <!--table-begin-->
 
-        <el-form-item v-show="showProperty('tablePageMode')" :label="$t('chart.table_page_mode')" class="form-item">
+        <el-form-item v-show="showProperty('tablePageMode')" label-width="100px" :label="$t('chart.table_page_mode')" class="form-item">
           <el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase('tablePageMode')">
             <el-option :label="$t('chart.page_mode_page')" value="page" />
             <el-option :label="$t('chart.page_mode_pull')" value="pull" />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('tablePageSize') && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
+        <el-form-item v-show="showProperty('tablePageSize') && sizeForm.tablePageMode === 'page'" label-width="100px" :label="$t('chart.table_page_size')" class="form-item">
           <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase('tablePageSize')">
             <el-option
               v-for="item in pageSizeOptions"
@@ -95,23 +95,23 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('tableTitleFontSize')" :label="$t('chart.table_title_fontsize')" class="form-item">
+        <el-form-item v-show="showProperty('tableTitleFontSize')" label-width="100px" :label="$t('chart.table_title_fontsize')" class="form-item">
           <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase('tableTitleFontSize')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('tableItemFontSize')" :label="$t('chart.table_item_fontsize')" class="form-item">
+        <el-form-item v-show="showProperty('tableItemFontSize')" label-width="100px" :label="$t('chart.table_item_fontsize')" class="form-item">
           <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase('tableItemFontSize')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="showProperty('tableTitleHeight')" :label="$t('chart.table_title_height')" class="form-item form-item-slider">
+        <el-form-item v-show="showProperty('tableTitleHeight')" label-width="100px" :label="$t('chart.table_title_height')" class="form-item form-item-slider">
           <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableTitleHeight')" />
         </el-form-item>
-        <el-form-item v-show="showProperty('tableItemHeight')" :label="$t('chart.table_item_height')" class="form-item form-item-slider">
+        <el-form-item v-show="showProperty('tableItemHeight')" label-width="100px" :label="$t('chart.table_item_height')" class="form-item form-item-slider">
           <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableItemHeight')" />
         </el-form-item>
-        <el-form-item v-show="showProperty('tableColumnWidth')" :label="$t('chart.table_column_width_config')" class="form-item form-item-slider">
+        <el-form-item v-show="showProperty('tableColumnWidth')" label-width="100px" :label="$t('chart.table_column_width_config')" class="form-item form-item-slider">
           <el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="1000" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableColumnWidth')" />
         </el-form-item>
         <!--table-end-->
@@ -173,7 +173,7 @@
         <!--treemap-end-->
         <!--chart-mix-end-->
 
-        <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
+        <el-divider v-if="showProperty('barDefault')" content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
         <el-form-item v-show="showProperty('barDefault')" :label="$t('chart.adapt')" class="form-item">
           <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
         </el-form-item>
@@ -183,7 +183,7 @@
         <el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
           <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase('barGap')" />
         </el-form-item>
-        <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
+        <el-divider v-if="showProperty('lineWidth')" content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
         <el-form-item v-show="showProperty('lineWidth')" :label="$t('chart.line_width')" class="form-item form-item-slider">
           <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase('lineWidth')" />
         </el-form-item>
@@ -206,7 +206,7 @@
         <el-form-item v-show="showProperty('lineArea')" :label="$t('chart.line_area')" class="form-item">
           <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase('lineArea')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-divider content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
+        <el-divider v-if="showProperty('bubble_scatterSymbol')" content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
         <el-form-item v-show="showProperty('bubble_scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
           <el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('scatterSymbol')">
             <el-option

frontend/src/views/chart/components/shape-attr/TotalCfg.vue

@@ -2,7 +2,7 @@
   <div style="width: 100%">
     <el-col>
       <el-form ref="totalForm" :model="totalForm" label-width="80px" size="mini">
-        <el-divider v-show="showProperty('row')" content-position="center" class="divider-style">{{ $t('chart.row_cfg') }}</el-divider>
+        <el-divider v-if="showProperty('row')" content-position="center" class="divider-style">{{ $t('chart.row_cfg') }}</el-divider>
         <el-form-item v-show="showProperty('row')" :label="$t('chart.total_show')" class="form-item">
           <el-checkbox v-model="totalForm.row.showGrandTotals" @change="changeTotalCfg('row')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
@@ -33,7 +33,7 @@
           </el-form-item>
         </div>
 
-        <el-divider v-show="showProperty('col')" content-position="center" class="divider-style">{{ $t('chart.col_cfg') }}</el-divider>
+        <el-divider v-if="showProperty('col')" content-position="center" class="divider-style">{{ $t('chart.col_cfg') }}</el-divider>
         <el-form-item v-show="showProperty('col')" :label="$t('chart.total_show')" class="form-item">
           <el-checkbox v-model="totalForm.col.showGrandTotals" @change="changeTotalCfg('col')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>