Merge pull request #9741 from dataease/pr@dev-v2@feat_pager-color

feat(仪表板): 仪表板配置增加高级设置，增加分页器配色等 #8443 #8435
2024-05-20 18:21:32 +08:00 · 2024-05-20 18:21:32 +08:00 · 048847af53
commit 048847af53
parent 796768fd6e b630421901
7 changed files with 67 additions and 40 deletions
--- a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
+++ b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
@ -146,13 +146,6 @@ const saveSelfSubject = () => {
        >
          <filter-style-simple-selector />
        </el-collapse-item>
-        <el-collapse-item
-          :title="t('visualization.filter_component')"
-          name="filterComponent"
-          class="no-padding no-border-bottom"
-        >
-          <filter-style-simple-selector />
-        </el-collapse-item>
        <el-collapse-item
          title="高级样式设置"
          name="seniorStyleSetting"
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
@ -158,6 +158,21 @@
                />
              </el-form-item>
            </el-col>
+            <el-col :span="12">
+              <el-form-item label="分页器配色" class="form-item">
+                <el-color-picker
+                  :trigger-width="colorPickerWidth"
+                  v-model="seniorForm.pagerColor"
+                  size="small"
+                  :predefine="predefineColors"
+                  color-format="rgb"
+                  :effect="themes"
+                  show-alpha
+                  is-custom
+                  @change="changePagerColorChange"
+                />
+              </el-form-item>
+            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
@ -174,7 +189,10 @@ import eventBus from '@/utils/eventBus'
 import { storeToRefs } from 'pinia'
 import CustomColorStyleSelect from '@/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue'
 import elementResizeDetectorMaker from 'element-resize-detector'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 const { t } = useI18n()
+const snapshotStore = snapshotStoreWithOut()
+
 const props = defineProps({
  themes: {
    type: String as PropType<EditorTheme>,
@ -191,6 +209,9 @@ const colorFormRef = ref(null)
 const colorForm = computed(
  () => canvasStyleData.value.component.chartColor as DeepPartial<ChartAttr>
 )
+
+const seniorForm = computed(() => canvasStyleData.value.component.seniorStyleSetting)
+
 const predefineColors = COLOR_PANEL

 const state = reactive({
@ -215,6 +236,10 @@ const changeColorOption = (modifyName = 'value') => {
  changeColorCase(modifyName)
 }

+const changePagerColorChange = () => {
+  snapshotStore.recordSnapshotCache()
+}
+
 const changeColorCase = modifyName => {
  colorForm.value['modifyName'] = modifyName
  emits('onColorChange', colorForm.value)
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
@ -5,22 +5,22 @@
        <el-col :span="12">
          <el-form-item class="form-item" label="联动、钻取、调整的图标颜色">
            <el-color-picker
-              v-model="filterStyle.titleColor"
+              v-model="seniorStyleSetting.linkageIconColor"
              :trigger-width="197"
              is-custom
              :predefine="state.predefineColors"
-              @change="themeChange('titleColor')"
+              @change="themeChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="form-item" label="钻取层级展示颜色">
            <el-color-picker
-              v-model="filterStyle.labelColor"
+              v-model="seniorStyleSetting.drillLayerColor"
              :trigger-width="197"
              is-custom
              :predefine="state.predefineColors"
-              @change="themeChange('labelColor')"
+              @change="themeChange"
            />
          </el-form-item>
        </el-col>
@ -35,15 +35,13 @@ import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useI18n } from '@/hooks/web/useI18n'
 import { cloneDeep } from 'lodash-es'
-import { adaptCurThemeFilterStyleAll } from '@/utils/canvasStyle'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import eventBus from '@/utils/eventBus'
-import { ElIcon } from 'element-plus-secondary'
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
-const filterStyle = computed<any>(() => {
-  return dvMainStore.canvasStyleData.component.filterStyle
+const seniorStyleSetting = computed<any>(() => {
+  return dvMainStore.canvasStyleData.component.seniorStyleSetting
 })

 const state = reactive({
@ -55,14 +53,13 @@ const state = reactive({
 const initForm = () => {
  // do
 }
-const themeChange = styleKey => {
-  dvMainStore.canvasStyleData.component.filterStyle = cloneDeep(filterStyle.value)
-  adaptCurThemeFilterStyleAll(styleKey)
-  snapshotStore.recordSnapshotCache('filterStyleSimpleSelector-themeChange')
+const themeChange = () => {
+  dvMainStore.canvasStyleData.component.seniorStyleSetting = cloneDeep(seniorStyleSetting.value)
+  snapshotStore.recordSnapshotCache('seniorStyleSettingSimpleSelector-themeChange')
 }

 const handleHorizontalChange = (type, horizontal = 'titleLayout') => {
-  filterStyle.value[horizontal] = type
+  seniorStyleSetting.value[horizontal] = type
  themeChange(horizontal)
 }

--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@ -158,7 +158,8 @@ export const SENIOR_STYLE_SETTING_LIGHT = {

 export const SENIOR_STYLE_SETTING_DARK = {
  linkageIconColor: '#ffffff',
-  drillLayerColor: '#ffffff'
+  drillLayerColor: '#ffffff',
+  pagerColor: '#ffffff'
 }

 export const FILTER_COMMON_STYLE_BASE = {
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@ -29,7 +29,8 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 import { trackBarStyleCheck } from '@/utils/canvasUtils'

 const dvMainStore = dvMainStoreWithOut()
-const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc } = storeToRefs(dvMainStore)
+const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, canvasStyleData } =
+  storeToRefs(dvMainStore)
 const { emitter } = useEmitt()

 const props = defineProps({
@ -420,6 +421,10 @@ const autoHeightStyle = computed(() => {
    height: 20 * scale.value + 8 + 'px'
  }
 })
+
+const tabStyle = computed(() => [
+  { '--de-pager-color': canvasStyleData.value.component.seniorStyleSetting.pagerColor }
+])
 </script>

 <template>
@ -435,7 +440,7 @@ const autoHeightStyle = computed(() => {
      <div style="position: relative; height: 100%" :id="containerId"></div>
    </div>
    <el-row :style="autoStyle" v-if="showPage && !isError">
-      <div class="table-page-info">
+      <div class="table-page-info" :style="tabStyle">
        <div>共{{ state.pageInfo.total }}条</div>
        <el-pagination
          class="table-page-content"
@ -474,16 +479,16 @@ const autoHeightStyle = computed(() => {
  height: 20px;
  display: flex;
  width: 100%;
-  color: grey;
+  color: var(--de-pager-color);
  :deep(.table-page-content) {
    button,
    button[disabled] {
-      color: grey;
+      color: var(--de-pager-color);
      background: transparent !important;
    }
    ul li {
      &:not(.is-active) {
-        color: grey;
+        color: var(--de-pager-color);
      }
      background: transparent !important;
    }
--- a/core/core-frontend/src/views/chart/components/views/components/DrillPath.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/DrillPath.vue
@ -1,8 +1,10 @@
 <script lang="tsx" setup>
-import { reactive, watch } from 'vue'
+import { computed, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { reverseColor } from '../util/util'
 import { ArrowRight } from '@element-plus/icons-vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+const dvMainStore = dvMainStoreWithOut()

 const { t } = useI18n()

@ -24,14 +26,18 @@ const state = reactive({
  textColor: '#bbbfc4'
 })

-watch(
-  [() => props.themeStyle?.backgroundColorSelect, () => props.themeStyle?.color],
-  () => {
-    loadThemeStyle()
-  },
-  { deep: true }
+const textColor = computed(
+  () => dvMainStore.canvasStyleData.component.seniorStyleSetting.drillLayerColor
 )

+// watch(
+//   [() => props.themeStyle?.backgroundColorSelect, () => props.themeStyle?.color],
+//   () => {
+//     loadThemeStyle()
+//   },
+//   { deep: true }
+// )
+
 const drillJump = index => {
  if (index < props.drillFilters.length) {
    emit('onDrillJump', index)
@ -67,7 +73,7 @@ const loadThemeStyle = () => {
  <div v-if="props.drillFilters && props.drillFilters.length > 0" class="drill">
    <el-breadcrumb :separator-icon="ArrowRight" class="drill-style">
      <el-breadcrumb-item class="drill-item" @click="drillJump(0)">
-        <span :style="{ color: state.textColor }">{{ t('commons.all') }}</span>
+        <span :style="{ color: textColor }">{{ t('commons.all') }}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item
        v-for="(filter, index) in props.drillFilters"
@ -75,7 +81,7 @@ const loadThemeStyle = () => {
        class="drill-item"
        @click="drillJump(index + 1)"
      >
-        <span :style="{ color: state.textColor }">{{ filter.value[0] }}</span>
+        <span :style="{ color: textColor }">{{ filter.value[0] }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@ -741,11 +741,11 @@ const titleIconStyle = computed(() => {
    flex-wrap: nowrap;
    gap: 8px;

-    //color: #646a73;
-    //
-    //&.icons-container__dark {
-    //  color: #a6a6a6;
-    //}
+    color: #646a73;
+
+    &.icons-container__dark {
+      color: #a6a6a6;
+    }

    &.is-editing {
      gap: 6px;