github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 03:52:59 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #2481 from dataease/pr@dev@refactor_theme

Browse Source 
refactor: 主题控制适配所有过滤组件
This commit is contained in:
王嘉豪 2022-06-23 12:02:17 +08:00 committed by GitHub
commit f13a464a2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 193 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/canvas/utils/style.js
View File

@ -332,6 +332,9 @@ export function adaptCurTheme(customStyle, customAttr) {
}
customAttr['color'] = { ...canvasStyle.chartInfo.chartColor }
customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'] }
if (customStyle.background) {
delete customStyle.background
}
}
export function adaptCurThemeCommonStyle(component) {
@ -339,6 +342,12 @@ export function adaptCurThemeCommonStyle(component) {
for (const key in commonStyle) {
component.commonBackground[key] = commonStyle[key]
}
if (isFilterComponent(component.component)) {
const filterStyle = store.state.canvasStyleData.chartInfo.filterStyle
for (const styleKey in component.style) {
component.style[styleKey] = filterStyle[styleKey]
}
}
return component
}
@ -349,3 +358,17 @@ export function adaptCurThemeCommonStyleAll() {
})
}
export function adaptCurThemeFilterStyleAll(styleKey) {
const componentData = store.state.componentData
const filterStyle = store.state.canvasStyleData.chartInfo.filterStyle
componentData.forEach((item) => {
if (isFilterComponent(item.component)) {
item.style[styleKey] = filterStyle[styleKey]
}
})
}
export function isFilterComponent(component) {
return ['de-select', 'de-select-grid', 'de-date', 'de-input-search', 'de-number-range', 'de-select-tree'].includes(component)
}

2
frontend/src/components/canvas/utils/utils.js
View File

@ -8,7 +8,7 @@ import {
} from '@/utils/ApplicationContext'
import { uuid } from 'vue-uuid'
import store from '@/store'
import { AIDED_DESIGN, PANEL_CHART_INFO } from '@/views/panel/panel'
import { AIDED_DESIGN, FILTER_COMMON_STYLE, PANEL_CHART_INFO } from '@/views/panel/panel'
import html2canvas from 'html2canvasde'
export function deepCopy(target) {

14
frontend/src/components/dataease/DeOutWidget.vue
View File

@ -27,8 +27,8 @@
:is="element.component"
v-if="element.type==='custom'"
:id="'component' + element.id"
class="component-custom"
ref="deOutWidget"
class="component-custom"
:out-style="element.style"
:element="element"
:in-draw="inDraw"
@ -105,31 +105,29 @@ export default {
'curCanvasScale'
]),
deSelectGridBg() {
if (this.element.component !== 'de-select-grid') return null;
const { backgroundColorSelect, color } = this.element.commonBackground;
if (this.element.component !== 'de-select-grid') return null
const { backgroundColorSelect, color } = this.element.commonBackground
return {
background: backgroundColorSelect ? color : '#fff',
background: backgroundColorSelect ? color : '#fff',
border: backgroundColorSelect ? 'none' : '1px solid #d7dae2'
}
},
isFilterComponent() {
return ['de-select', 'de-select-grid', 'de-date', "de-input-search", "de-number-range", "de-select-tree"].includes(this.element.component)
return ['de-select', 'de-select-grid', 'de-date', 'de-input-search', 'de-number-range', 'de-select-tree'].includes(this.element.component)
}
},
watch: {
'element.style': {
handler(val) {
this.handlerPositionChange(val);
this.handlerPositionChange(val)
},
deep: true,
immediate: true
}
},
mounted() {
// this.watchSize()
},
created() {
// console.log('aaaaaa')
const { horizontal, vertical, brColor, wordColor, innerBgColor } = this.element.style
this.$set(this.element.style, 'horizontal', horizontal || 'left')
this.$set(this.element.style, 'vertical', vertical || 'center')

2
frontend/src/views/chart/components/ChartComponentG2.vue
View File

@ -79,7 +79,7 @@ export default {
textAlign: 'left',
fontStyle: 'normal',
fontWeight: 'normal',
background: hexColorToRGBA('#ffffff', 0)
background: ''
},
title_show: true,
antVRenderStatus: false

2
frontend/src/views/chart/components/ChartComponentS2.vue
View File

@ -87,7 +87,7 @@ export default {
textAlign: 'left',
fontStyle: 'normal',
fontWeight: 'normal',
background: hexColorToRGBA('#ffffff', 0)
background: ''
},
container_bg_class: {
background: hexColorToRGBA('#ffffff', 0)

1
frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentStyle.vue
View File

@ -29,7 +29,6 @@ export default {
name: 'ComponentStyle',
data() {
return {
basePath: 'chartInfo.chartCommonStyle.',
predefineColors: COLOR_PANEL,
componentStyleForm: {}
}

127
frontend/src/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<div style="width: 100%">
<el-col>
<el-form ref="filterForm" :model="filterForm" label-width="80px" size="mini">
<div>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="filterForm.horizontal" size="mini" @change="themeChange('horizontal')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="filterForm.vertical" size="mini" @change="themeChange('vertical')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="'标题颜色'" class="form-item">
<el-color-picker v-model="filterForm.color" class="color-picker-style" :predefine="predefineColors" @change="themeChange('color')" />
</el-form-item>
<el-divider>输入框样式(颜色)</el-divider>
<el-row style="height: 40px;overflow: hidden;">
<el-col :span="4" style="padding-left: 10px;padding-top: 8px">
边框
</el-col>
<el-col :span="4" style="padding-top: 5px">
<el-color-picker v-model="filterForm.brColor" size="mini" class="color-picker-style" @change="themeChange('brColor')" :predefine="predefineColors" />
</el-col>
<el-col :span="4" style="padding-left: 10px;padding-top: 8px">
文字
</el-col>
<el-col :span="4" style="padding-top: 5px">
<el-color-picker v-model="filterForm.wordColor" size="mini" class="color-picker-style" @change="themeChange('wordColor')" :predefine="predefineColors" />
</el-col>
<el-col :span="4" style="padding-left: 10px;padding-top: 8px">
背景
</el-col>
<el-col :span="4" style="padding-top: 5px">
<el-color-picker v-model="filterForm.innerBgColor" size="mini" class="color-picker-style" @change="themeChange('innerBgColor')" :predefine="predefineColors" />
</el-col>
</el-row>
</div>
</el-form>
</el-col>
</div>
</template>
<script>
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { adaptCurThemeFilterStyleAll } from '@/components/canvas/utils/style'
import { mapState } from 'vuex'
export default {
name: 'FilterStyleSelector',
props: {
},
data() {
return {
filterForm: {},
fontSize: [],
isSetting: false,
predefineColors: COLOR_PANEL
}
},
computed: {
...mapState([
'canvasStyleData'
])
},
watch: {
},
mounted() {
this.initForm()
},
methods: {
initForm() {
this.filterForm = this.canvasStyleData.chartInfo.filterStyle
},
themeChange(styleKey) {
adaptCurThemeFilterStyleAll(styleKey)
}
}
}
</script>
<style scoped>
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
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;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
.el-divider__text{
font-size: 8px;
font-weight: 400;
color: rgb(144, 147, 153);
}
</style>

4
frontend/src/views/panel/SubjectSetting/PanelStyle/OverallSetting.vue
View File

@ -66,6 +66,7 @@ import {
} from '@/components/canvas/utils/style'
import bus from '@/utils/bus'
import { DEFAULT_COLOR_CASE_DARK, DEFAULT_TITLE_STYLE_DARK, DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { FILTER_COMMON_STYLE, FILTER_COMMON_STYLE_DARK } from '@/views/panel/panel'
export default {
name: 'OverallSetting',
data() {
@ -92,16 +93,19 @@ export default {
if (modifyName === 'themeColor') {
// 主题变更
this.canvasStyleData.chartInfo.chartCommonStyle.backgroundColorSelect = true
this.canvasStyleData.panel.backgroundType = 'color'
if (this.overallSettingForm.panel.themeColor === 'light') {
this.canvasStyleData.panel.color = LIGHT_THEME_PANEL_BACKGROUND
this.canvasStyleData.chartInfo.chartCommonStyle.color = LIGHT_THEME_COMPONENT_BACKGROUND
this.canvasStyleData.chartInfo.chartTitle = DEFAULT_TITLE_STYLE
this.canvasStyleData.chartInfo.chartColor = DEFAULT_COLOR_CASE
this.canvasStyleData.chartInfo.filterStyle = FILTER_COMMON_STYLE
} else {
this.canvasStyleData.panel.color = DARK_THEME_PANEL_BACKGROUND
this.canvasStyleData.chartInfo.chartCommonStyle.color = DARK_THEME_COMPONENT_BACKGROUND
this.canvasStyleData.chartInfo.chartTitle = DEFAULT_TITLE_STYLE_DARK
this.canvasStyleData.chartInfo.chartColor = DEFAULT_COLOR_CASE_DARK
this.canvasStyleData.chartInfo.filterStyle = FILTER_COMMON_STYLE_DARK
}
adaptCurThemeCommonStyleAll()
bus.$emit('onThemeColorChange')

5
frontend/src/views/panel/SubjectSetting/index.vue
View File

@ -27,6 +27,9 @@
<el-collapse-item :title="'图表标题'" name="table">
<view-title @onTextChange="onTextChange" />
</el-collapse-item>
<el-collapse-item :title="'过滤组件'" name="filterComponent">
<FilterStyleSelector />
</el-collapse-item>
</el-collapse>
</div>
</el-row>
@ -42,9 +45,11 @@ import OverallSetting from '@/views/panel/SubjectSetting/PanelStyle/OverallSetti
import ViewTitle from '@/views/panel/SubjectSetting/PanelStyle/ViewTitle'
import ComponentStyle from '@/views/panel/SubjectSetting/PanelStyle/ComponentStyle'
import { adaptCurThemeCommonStyleAll } from '@/components/canvas/utils/style'
import FilterStyleSelector from '@/views/panel/SubjectSetting/PanelStyle/FilterStyleSelector'
export default {
components: {
FilterStyleSelector,
ComponentStyle,
ViewTitle,
slider,

31
frontend/src/views/panel/panel.js
View File

@ -3,6 +3,24 @@ import { DEFAULT_COLOR_CASE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/cha
import { deepCopy } from '@/components/canvas/utils/utils'
import { COMMON_BACKGROUND_BASE } from '@/components/canvas/custom-component/component-list'
export const FILTER_COMMON_STYLE = {
horizontal: 'left',
vertical: 'center',
color: '#000000',
brColor: '',
wordColor: '',
innerBgColor: ''
}
export const FILTER_COMMON_STYLE_DARK = {
horizontal: 'left',
vertical: 'center',
color: '#FFFFFF',
brColor: '',
wordColor: '#4E4B4B',
innerBgColor: '#131E42'
}
export const DEFAULT_PANEL_STYLE = {
themeColor: 'light',
color: '#ffffff',
@ -13,6 +31,13 @@ export const DEFAULT_PANEL_STYLE = {
resultCount: 1000 // 视图结果显示条数
}
export const PANEL_CHART_INFO = {
chartTitle: DEFAULT_TITLE_STYLE,
chartColor: DEFAULT_COLOR_CASE,
chartCommonStyle: COMMON_BACKGROUND_BASE,
filterStyle: FILTER_COMMON_STYLE
}
export const CANVAS_STYLE = {
width: 1600,
height: 900,
@ -34,12 +59,6 @@ export const CANVAS_STYLE = {
chartInfo: PANEL_CHART_INFO
}
export const PANEL_CHART_INFO = {
chartTitle: DEFAULT_TITLE_STYLE,
chartColor: DEFAULT_COLOR_CASE,
chartCommonStyle: COMMON_BACKGROUND_BASE
}
export const AIDED_DESIGN = {
showGrid: false,
matrixBase: 1 // 当前matrix的基数 （是pcMatrixCount的几倍）