feat(仪表板): 组件间距支持自定义设置大小 #15009

core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue

@@ -49,6 +49,34 @@
         <el-radio :effect="themes" label="no">{{ t('visualization.no_gap') }}</el-radio>
       </el-radio-group>
     </el-form-item>
+    <el-form-item
+      v-if="canvasStyleData.dashboard.gap === 'yes'"
+      class="form-item"
+      :class="'form-item-' + themes"
+      :label="t('visualization.gap_size')"
+    >
+      <el-radio-group v-model="canvasStyleData.dashboard.gapMode" @change="onGapModeChange">
+        <el-radio :effect="themes" label="small">{{ t('visualization.small') }}</el-radio>
+        <el-radio :effect="themes" label="middle">{{ t('visualization.middle') }}</el-radio>
+        <el-radio :effect="themes" label="large">{{ t('visualization.large') }}</el-radio>
+        <el-radio :effect="themes" label="custom">{{ t('visualization.custom') }}</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      class="form-item"
+      :class="'form-item-' + themes"
+      v-show="canvasStyleData.dashboard.gapMode === 'custom'"
+    >
+      <el-input-number
+        v-model="canvasStyleData.dashboard.gapSize"
+        :effect="themes"
+        controls-position="right"
+        size="middle"
+        :min="0"
+        :max="50"
+        @change="themeChange"
+      />
+    </el-form-item>
     <el-form-item
       v-if="dvInfo.type === 'dashboard'"
       class="form-item"
@@ -291,6 +319,7 @@ import Icon from '@/components/icon-custom/src/Icon.vue'
 import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
 import { isDesktop } from '@/utils/ModelUtil'
 import eventBus from '@/utils/eventBus'
+import { resetValueFormatter } from '@/views/chart/components/editor/drag-item/utils'
 const appearanceStore = useAppearanceStoreWithOut()
 const isDesktopFlag = isDesktop()
 const snapshotStore = snapshotStoreWithOut()
@@ -338,6 +367,22 @@ const onKeepSizeChange = () => {
   eventBus.emit('event-canvas-size-init')
   snapshotStore.recordSnapshotCache('renderChart')
 }
+const onGapModeChange = () => {
+  snapshotStore.recordSnapshotCache('renderChart')
+  switch (canvasStyleData.value.dashboard.gapMode) {
+    case 'small':
+      canvasStyleData.value.dashboard.gapSize = 3
+      break
+    case 'middle':
+      canvasStyleData.value.dashboard.gapSize = 5
+      break
+    case 'large':
+      canvasStyleData.value.dashboard.gapSize = 10
+      break
+    default:
+      break
+  }
+}
 
 const themeChange = (modifyName?) => {
   if (modifyName === 'themeColor') {

core/core-frontend/src/locales/en.ts

@@ -2868,6 +2868,11 @@ export default {
     column_name: 'Field name'
   },
   visualization: {
+    gap_size: 'Gap Size',
+    small: 'Small',
+    middle: 'Medium',
+    large: 'Large',
+    custom: 'Custom',
     no_details: 'No Data',
     sync_pc_design: 'Synchronize PC Design',
     title_background: 'Title Background',

core/core-frontend/src/locales/tw.ts

@@ -2789,6 +2789,11 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    gap_size: '間隙大小',
+    small: '小',
+    middle: '中',
+    large: '大',
+    custom: '自定義',
     no_details: '無明細數據',
     sync_pc_design: '同步PC設計',
     title_background: '標題背景',

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

@@ -2795,6 +2795,11 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    gap_size: '间隙大小',
+    small: '小',
+    middle: '中',
+    large: '大',
+    custom: '自定义',
     no_details: '无明细数据',
     sync_pc_design: '同步PC设计',
     title_background: '标题背景',

core/core-frontend/src/utils/canvasUtils.ts

@@ -251,6 +251,7 @@ export function historyAdaptor(
   canvasStyleResult['fontFamily'] = canvasStyleResult['fontFamily'] || 'PingFang'
   canvasStyleResult.dashboard['showGrid'] = canvasStyleResult.dashboard['showGrid'] || false
   canvasStyleResult.dashboard['matrixBase'] = canvasStyleResult.dashboard['matrixBase'] || 4
+  canvasStyleResult.dashboard['gapMode'] = canvasStyleResult.dashboard['gapMode'] || 'middle'
   canvasStyleResult.component['seniorStyleSetting'] =
     canvasStyleResult.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT)
   canvasStyleResult['suspensionButtonAvailable'] =

core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts

@@ -61,6 +61,7 @@ export const MOBILE_SETTING_DARK = {
 export const DEFAULT_DASHBOARD_STYLE_BASE = {
   gap: 'yes',
   gapSize: 5,
+  gapMode: 'middle',
   showGrid: false,
   matrixBase: 4, // 当前matrix的基数 （是pcMatrixCount的几倍）
   resultMode: 'all', // 图表结果显示模式 all 图表 custom 仪表板自定义