center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

refactor(图表): 增加修改公共样式组件增加图标等

Browse Source
This commit is contained in:
wangjiahao 2024-04-22 16:16:30 +08:00
parent a35c98b03e
commit 05c5b5b589
4 changed files with 75 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/core-frontend/src/assets/svg/dv-style-activeFont.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713773038663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6292" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 64H64C28.8 64 0 92.8 0 128v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64z m-26.56 808h-832v-704h832v704z" p-id="6293"></path><path d="M695.36 735.04c-32.64 0-60.48-9.28-81.92-28.16-22.4-19.2-33.92-44.48-33.92-74.88 0-55.04 32.96-120.96 190.72-120.96h5.12c-0.64-11.52-1.6-18.24-2.24-21.76-0.64-2.88-2.24-7.04-9.6-11.52-3.84-2.24-13.44-6.4-36.48-6.4-49.6 0-49.92 8-50.56 20.16l-0.64 18.24h-88.96l1.28-20.48c5.44-85.76 78.4-96.64 141.76-96.64 40.32 0 72.64 8.64 96.32 25.92 25.6 18.56 38.4 53.12 38.4 102.4v206.72h-88.64v-11.84c-23.68 13.12-50.56 19.2-80.64 19.2z m64.64-147.52c-90.56 0-90.56 31.36-90.56 41.92 0 11.2 4.48 15.68 8.32 18.56 14.4 10.56 45.76 11.52 71.68-1.28 10.88-5.44 19.2-11.84 25.92-20.16v-38.72h-15.36z m-177.6 140.8h-100.16l-45.44-121.92h-137.6L256 728.32H160l165.12-439.36h82.24l175.04 439.36z m-255.36-202.56h80.32l-40.96-110.72-39.36 110.72z" p-id="6294"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
core/core-frontend/src/assets/svg/dv-style-backgroundColor.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713772528957" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5278" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.9765625" height="200"><path d="M860.16025 508.587c0-20.48-3.413-40.96-20.48-58.027L505.17325 95.573c-27.306-27.306-68.266-27.306-95.573 0l-98.987 102.4-143.36-153.6c-13.653-13.653-34.133-13.653-47.786 0-13.654 17.067-13.654 37.547 0 51.2l143.36 150.187L20.48025 498.347c-27.307 27.306-27.307 71.68 0 102.4l341.333 354.986c27.307 27.307 68.267 27.307 95.574 0L843.09325 552.96c10.24-13.653 17.067-30.72 17.067-44.373z m-740.693-6.827l191.146-201.387L430.08025 426.667c13.653 13.653 34.133 13.653 47.787 0 13.653-13.654 13.653-37.547 0-51.2L358.40025 249.173l95.573-102.4 337.92 354.987H119.46725z m907.946 334.507c-6.826-75.094-136.533-286.72-136.533-286.72s-126.293 201.386-136.533 286.72C737.28025 976.213 822.61325 993.28 890.88025 993.28c68.267 0 146.773-13.653 136.533-157.013z m0 0" p-id="5279"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
core/core-frontend/src/assets/svg/dv-style-borderColor.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713772449367" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4293" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M770 900c34.242 0 62 27.758 62 62 0 34.242-27.758 62-62 62H254c-34.242 0-62-27.758-62-62 0-34.242 27.758-62 62-62h516z m-78-736c59.05 0 107.032 47.391 107.986 106.214L800 272v33.867c0 19.882-16.118 36-36 36-19.683 0-35.677-15.797-35.995-35.405l-0.005-0.595V272c0-19.683-15.797-35.677-35.405-35.995L692 236H270c-19.683 0-35.677 15.797-35.995 35.405L234 272v424c0 19.683 15.797 35.677 35.405 35.995L270 732h162.756c19.882 0 36 16.118 36 36 0 19.683-15.797 35.677-35.405 36H270c-59.05 0-107.032-47.391-107.986-106.214L162 696V272c0-59.05 47.391-107.032 106.214-107.986L270 164h422z m171.445 200.445l49.497 49.497c9.372 9.372 9.372 24.568 0 33.94l-0.088 0.088-281.16 278.274-95.972 28.583c-8.47 2.522-17.38-2.298-19.902-10.767a16 16 0 0 1 0.228-9.84l31.74-90.946L829.59 364.358c9.387-9.29 24.515-9.252 33.854 0.087z" p-id="4294"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

128
core/core-frontend/src/custom-component/common/CommonStyleSet.vue
View File

@ -19,6 +19,8 @@
:title="t('chart.text_color')"
v-model="styleForm[styleColorKey.value]"
class="color-picker-style"
:prefix-icon="expandIcon(styleColorKey.icon)"
:triggerWidth="styleColorKey.width"
is-custom
:predefine="state.predefineColors"
@change="changeStyle"
@ -128,48 +130,50 @@
</el-tooltip>
<template v-if="styleForm.textAlign">
<div class="m-divider" :class="'custom-divider-' + themes"></div>
<el-tooltip effect="dark" placement="bottom">
<template #content>
{{ t('chart.text_pos_left') }}
</template>
<div
class="icon-btn"
:class="{ dark: themes === 'dark', active: styleForm.textAlign === 'left' }"
@click="setPosition('textAlign', 'left')"
>
<el-icon>
<Icon name="icon_left-alignment_outlined" />
</el-icon>
</div>
</el-tooltip>
<el-tooltip effect="dark" placement="bottom">
<template #content>
{{ t('chart.text_pos_center') }}
</template>
<div
class="icon-btn"
:class="{ dark: themes === 'dark', active: styleForm.textAlign === 'center' }"
@click="setPosition('textAlign', 'center')"
>
<el-icon>
<Icon name="icon_center-alignment_outlined" />
</el-icon>
</div>
</el-tooltip>
<el-tooltip effect="dark" placement="bottom">
<template #content>
{{ t('chart.text_pos_right') }}
</template>
<div
class="icon-btn"
:class="{ dark: themes === 'dark', active: styleForm.textAlign === 'right' }"
@click="setPosition('textAlign', 'right')"
>
<el-icon>
<Icon name="icon_right-alignment_outlined" />
</el-icon>
</div>
</el-tooltip>
<div style="display: flex">
<el-tooltip effect="dark" placement="bottom">
<template #content>
{{ t('chart.text_pos_left') }}
</template>
<div
class="icon-btn"
:class="{ dark: themes === 'dark', active: styleForm.textAlign === 'left' }"
@click="setPosition('textAlign', 'left')"
>
<el-icon>
<Icon name="icon_left-alignment_outlined" />
</el-icon>
</div>
</el-tooltip>
<el-tooltip effect="dark" placement="bottom">
<template #content>
{{ t('chart.text_pos_center') }}
</template>
<div
class="icon-btn"
:class="{ dark: themes === 'dark', active: styleForm.textAlign === 'center' }"
@click="setPosition('textAlign', 'center')"
>
<el-icon>
<Icon name="icon_center-alignment_outlined" />
</el-icon>
</div>
</el-tooltip>
<el-tooltip effect="dark" placement="bottom">
<template #content>
{{ t('chart.text_pos_right') }}
</template>
<div
class="icon-btn"
:class="{ dark: themes === 'dark', active: styleForm.textAlign === 'right' }"
@click="setPosition('textAlign', 'right')"
>
<el-icon>
<Icon name="icon_right-alignment_outlined" />
</el-icon>
</div>
</el-tooltip>
</div>
</template>
<template v-if="styleForm.headHorizontalPosition">
<div class="m-divider"></div>
@ -230,8 +234,8 @@
</el-row>
</template>
<script lang="ts" setup>
import { computed, reactive, ref, toRefs, watch } from 'vue'
<script lang="tsx" setup>
import { computed, h, reactive, ref, toRefs, watch } from 'vue'
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { useI18n } from '@/hooks/web/useI18n'
@ -253,7 +257,9 @@ const props = withDefaults(
themes: 'dark'
}
)
const expandIcon = (name: string) => {
return h(Icon, { className: '', name })
}
const { themes, element } = toRefs(props)
const emits = defineEmits(['onTextChange'])
const styleMounted = ref({
@ -287,11 +293,21 @@ const state = reactive({
})
const styleColorKeyArray = [
{ value: 'color', label: '颜色' },
{ value: 'borderColor', label: '边框颜色' },
{ value: 'headFontColor', label: '头部字体颜色' },
{ value: 'headFontActiveColor', label: '激活字体颜色' },
{ value: 'backgroundColor', label: '背景色' }
{ value: 'color', label: '颜色', width: 90, icon: 'dv-style-color' },
{ value: 'borderColor', label: '边框颜色', width: 90, icon: 'dv-style-borderColor' },
{
value: 'headFontColor',
label: '头部字体颜色',
width: 90,
icon: 'dv-style-headFontColor'
},
{
value: 'headFontActiveColor',
label: '激活字体颜色',
width: 90,
icon: 'dv-style-headFontActiveColor'
},
{ value: 'backgroundColor', label: '背景色', width: 90, icon: 'dv-style-backgroundColor' }
]
const fontSizeList = computed(() => {
@ -339,15 +355,15 @@ const styleOptionMountedKeyArray = [
value: 'fontSize',
label: '字体大小',
customOption: fontSizeList.value,
width: '80px',
width: '90px',
icon: 'dv-style-fontSize'
},
{
value: 'activeFontSize',
label: '激活字体大小',
customOption: fontSizeList.value,
width: '80px',
icon: 'dv-style-headFontActiveColor'
width: '90px',
icon: 'dv-style-activeFont'
}
]
@ -357,21 +373,21 @@ const styleOptionKeyArray = [
value: 'opacity',
label: '透明度',
customOption: opacitySizeList,
width: '80px',
width: '90px',
icon: 'dv-style-opacity'
},
{
value: 'borderWidth',
label: '边框宽度',
customOption: borderWidthList.value,
width: '80px',
width: '90px',
icon: 'dv-style-opacity'
},
{
value: 'borderRadius',
label: '圆角',
customOption: borderRadiusList.value,
width: '80px',
width: '90px',
icon: 'dv-style-borderRadius'
},
{