diff --git a/src/components/ConfigItemCom/CollapseItem.vue b/src/components/ConfigItemCom/CollapseItem.vue
new file mode 100644
index 00000000..08036b4d
--- /dev/null
+++ b/src/components/ConfigItemCom/CollapseItem.vue
@@ -0,0 +1,22 @@
+<template>
+ <n-divider />
+ <n-collapse arrow-placement="right" default-expanded-names="1">
+ <!-- 右侧 -->
+ <template #header-extra>
+ <slot name="header" />
+ </template>
+
+ <n-collapse-item :title="name" name="1">
+ <slot />
+ </n-collapse-item>
+ </n-collapse>
+</template>
+
+<script setup lang="ts">
+defineProps({
+ name: {
+ type: String,
+ required: true
+ }
+})
+</script>
diff --git a/src/components/ConfigItemCom/ConfigItem.vue b/src/components/ConfigItemCom/ConfigItem.vue
new file mode 100644
index 00000000..b5c44b72
--- /dev/null
+++ b/src/components/ConfigItemCom/ConfigItem.vue
@@ -0,0 +1,26 @@
+<template>
+ <div
+ v-if="type === 'number'"
+ :style="{ width: width ? width + 'px' : '100%' }"
+ >
+ <slot />
+ </div>
+ <div v-else :style="{ width: `${width}px` }">
+ <slot />
+ </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+ width: {
+ type: Number,
+ required: false
+ },
+ type: {
+ type: String,
+ required: false
+ }
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/ConfigItemCom/ConfigItemBox.vue b/src/components/ConfigItemCom/ConfigItemBox.vue
new file mode 100644
index 00000000..4a3acfa0
--- /dev/null
+++ b/src/components/ConfigItemCom/ConfigItemBox.vue
@@ -0,0 +1,33 @@
+<template>
+ <div class="go-config-item-box go-flex-items-center">
+ <n-text class="item-left">{{ name }}</n-text>
+ <n-space class="item-right" justify="space-between">
+ <slot />
+ </n-space>
+ </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+ name: {
+ type: String,
+ required: true
+ }
+})
+</script>
+
+<style lang="scss" scoped>
+$leftWidth: 100px;
+@include go('config-item-box') {
+ position: relative;
+ justify-content: flex-start;
+ .item-left {
+ width: $leftWidth;
+ text-align: left;
+ margin-left: 10px;
+ }
+ .item-right {
+ margin-left: 10px;
+ }
+}
+</style>
diff --git a/src/components/ConfigItemCom/index.ts b/src/components/ConfigItemCom/index.ts
new file mode 100644
index 00000000..7484e1e1
--- /dev/null
+++ b/src/components/ConfigItemCom/index.ts
@@ -0,0 +1,6 @@
+// 设置项布局
+import ConfigItem from './ConfigItem.vue'
+import ConfigItemBox from './ConfigItemBox.vue'
+import CollapseItem from './CollapseItem.vue'
+
+export { CollapseItem, ConfigItemBox, ConfigItem }
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
index 1330d6df..f65c762f 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
+++ b/src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue
@@ -1,15 +1,42 @@
<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>
</template>
<script setup lang="ts">
+import { toRefs } from 'vue'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import {
+ CollapseItem,
+ ConfigItemBox,
+ ConfigItem
+} from '@/components/ConfigItemCom/index'
+const chartEditStoreStore = useChartEditStoreStore()
+const { chartThemeSetting } = chartEditStoreStore.getEditCanvasConfig
</script>
<style lang="scss" scoped>
@include go(canvas-chart-color) {
-
}
</style>
diff --git a/src/views/chart/ContentDetails/components/CanvasPage/index.vue b/src/views/chart/ContentDetails/components/CanvasPage/index.vue
index 83282ad3..40077fe0 100644
--- a/src/views/chart/ContentDetails/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentDetails/components/CanvasPage/index.vue
@@ -50,16 +50,7 @@
<n-color-picker
style="width: 326px;"
:showPreview="true"
- :swatches="[
- '#232324',
- '#2a2a2b',
- '#313132',
- '#373739',
- '#757575',
- '#e0e0e0',
- '#eeeeee',
- '#fafafa'
- ]"
+ :swatches="swatchesColors"
v-model:value="canvasConfig.background"
/>
</n-space>
@@ -93,8 +84,6 @@
</n-space>
</n-space>
- <n-divider />
-
<!-- 主题选择和全局配置 -->
<n-tabs class="tabs-box" size="small" type="segment">
<n-tab-pane
@@ -136,10 +125,25 @@ const canvasConfig = chartEditStoreStore.getEditCanvasConfig
const uploadFileListRef = ref()
const switchSelectColorLoading = ref(false)
-const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue'))
-const ChartThemSetting = loadAsyncComponent(() => import('./components/ChartThemSetting/index.vue'))
+const ChartThemeColor = loadAsyncComponent(() =>
+ import('./components/ChartThemeColor/index.vue')
+)
+const ChartThemSetting = loadAsyncComponent(() =>
+ import('./components/ChartThemSetting/index.vue')
+)
// 页面设置
+const swatchesColors = [
+ '#232324',
+ '#2a2a2b',
+ '#313132',
+ '#373739',
+ '#757575',
+ '#e0e0e0',
+ '#eeeeee',
+ '#fafafa'
+]
+
const globalTabList = [
{
key: 'ChartTheme',
@@ -184,7 +188,10 @@ const clearImage = () => {
EditCanvasConfigEnum.BACKGROUND_IAMGE,
undefined
)
- chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, true)
+ chartEditStoreStore.setEditCanvasConfig(
+ EditCanvasConfigEnum.SELECT_COLOR,
+ true
+ )
}
// 清除颜色
@@ -278,5 +285,8 @@ $updloadHeight: 193px;
.icon-position {
padding-top: 2px;
}
+ .tabs-box {
+ margin-top: 30px;
+ }
}
</style>
diff --git a/src/views/chart/ContentDetails/components/ChartBehind/index.ts b/src/views/chart/ContentDetails/components/ChartBehind/index.ts
deleted file mode 100644
index 45dcf4d8..00000000
--- a/src/views/chart/ContentDetails/components/ChartBehind/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Behind from './index.vue'
-
-export { Behind }
diff --git a/src/views/chart/ContentDetails/components/ChartBehind/index.vue b/src/views/chart/ContentDetails/components/ChartData/index.vue
similarity index 100%
rename from src/views/chart/ContentDetails/components/ChartBehind/index.vue
rename to src/views/chart/ContentDetails/components/ChartData/index.vue
diff --git a/src/views/chart/ContentDetails/components/ChartSetting/index.ts b/src/views/chart/ContentDetails/components/ChartSetting/index.ts
deleted file mode 100644
index d18bd673..00000000
--- a/src/views/chart/ContentDetails/components/ChartSetting/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ChartSetting from './index.vue'
-
-export { ChartSetting }
diff --git a/src/views/chart/ContentDetails/index.vue b/src/views/chart/ContentDetails/index.vue
index 3bf7d02d..c3870d9b 100644
--- a/src/views/chart/ContentDetails/index.vue
+++ b/src/views/chart/ContentDetails/index.vue
@@ -93,7 +93,7 @@ const { ConstructIcon, FlashIcon, DesktopOutlineIcon } = icon.ionicons5
const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
const CanvasPage = loadAsyncComponent(() =>import('./components/CanvasPage/index.vue'))
const ChartSetting = loadAsyncComponent(() =>import('./components/ChartSetting/index.vue'))
-const ChartBehind = loadAsyncComponent(() => import('./components/ChartBehind/index.vue'))
+const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
const collapsed = ref<boolean>(getDetails.value)
@@ -141,10 +141,10 @@ const canvasTabList = [
render: ChartSetting
},
{
- key: 'ChartBehind',
+ key: 'ChartData',
title: '数据',
icon: FlashIcon,
- render: ChartBehind
+ render: ChartData
}
]
</script>