test/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2024-12-02 03:38:27 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 新增全局设置通用组件

Browse Source
This commit is contained in:
MTrun 2022-02-22 15:50:50 +08:00
parent adb5f353bf
commit c071cb5a49
4 changed files with 62 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/ConfigItemCom/GlobalSetting.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<div class="go-global-setting">
<CollapseItem name="标题">
<ConfigItemBox name="标题颜色">
<ConfigItem :width="200">
<n-color-picker
v-model:value="title.textStyle.color"
/>
</ConfigItem>
</ConfigItemBox>
<ConfigItemBox name="副标题颜色">
<ConfigItem :width="200">
<n-color-picker
v-model:value="title.subtextStyle.color"
/>
</ConfigItem>
</ConfigItemBox>
</CollapseItem>
<CollapseItem name="图例">
<ConfigItemBox name="图例文字颜色">
<ConfigItem :width="200">
<n-color-picker
v-model:value="legend.textStyle.color"
/>
</ConfigItem>
</ConfigItemBox>
</CollapseItem>
</div>
</template>
<script setup lang="ts">
import { toRefs, PropType } from 'vue'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import {
CollapseItem,
ConfigItemBox,
ConfigItem
} from '@/components/ConfigItemCom/index'
const props = defineProps({
data: {
type: Object as PropType<GlobalThemeJsonType>,
required: true
}
})
const { title, legend } = toRefs(props.data)
</script>
<style lang="scss" scoped>
@include go(global-setting) {
}
</style>

5
src/components/ConfigItemCom/index.ts
View File

@ -3,4 +3,7 @@ import ConfigItem from './ConfigItem.vue'
import ConfigItemBox from './ConfigItemBox.vue'
import CollapseItem from './CollapseItem.vue'
export { CollapseItem, ConfigItemBox, ConfigItem }
// 全局配置属性通用模板
import GlobalSetting from './GlobalSetting.vue'
export { CollapseItem, ConfigItemBox, ConfigItem, GlobalSetting }

37
src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
View File

@ -1,42 +1,11 @@
<template>
<div class="go-canvas-chart-color">
<CollapseItem name="标题">
<ConfigItemBox name="标题颜色">
<ConfigItem :width="200">
<n-color-picker v-model:value="chartThemeSetting.title.textStyle.color" />
</ConfigItem>
</ConfigItemBox>
<ConfigItemBox name="副标题颜色">
<ConfigItem :width="200">
<n-color-picker v-model:value="chartThemeSetting.title.subtextStyle.color" />
</ConfigItem>
</ConfigItemBox>
</CollapseItem>
<CollapseItem name="图例">
<ConfigItemBox name="图例文字颜色">
<ConfigItem :width="200">
<n-color-picker v-model:value="chartThemeSetting.legend.textStyle.color" />
</ConfigItem>
</ConfigItemBox>
</CollapseItem>
</div>
<GlobalSetting :data="chartThemeSetting" />
</template>
<script setup lang="ts">
import { toRefs } from 'vue'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import {
CollapseItem,
ConfigItemBox,
ConfigItem
} from '@/components/ConfigItemCom/index'
import { GlobalSetting } from '@/components/ConfigItemCom/index'
const chartEditStoreStore = useChartEditStoreStore()
const { chartThemeSetting } = chartEditStoreStore.getEditCanvasConfig
</script>
<style lang="scss" scoped>
@include go(canvas-chart-color) {
}
</style>
</script>

4
src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemeColor/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="go-canvas-chart-color">
<div class="go-chart-theme-color">
<n-card
v-for="(value, key) in chartColors"
:key="key"
@ -64,7 +64,7 @@ const selectTheme = (theme: ChartColorsNameType) => {
</script>
<style lang="scss" scoped>
@include go(canvas-chart-color) {
@include go(chart-theme-color) {
padding-top: 20px;
.card-box {
cursor: pointer;