feat: 新增主题色选项

src/components/Echarts/index.ts

@@ -1,2 +0,0 @@
-import Echarts from './index.vue'
-export { Echarts }

src/components/Echarts/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/components/LoadingComponent/index.vue

@@ -1,5 +1,5 @@
 <template>
   <div>
-    <Skeleton :repeat="3" :load="true"/>
+     <n-spin size="medium" />
   </div>
 </template>

src/components/UserInfo/index.vue

@@ -12,7 +12,7 @@
         round
         object-fit="cover"
         size="medium"
-        :src="imageUrl"
+        :src="Person"
         @error="errorHandle"
       />
     </div>
@@ -28,6 +28,7 @@ import { NAvatar, NText } from 'naive-ui'
 import { renderIcon } from '@/utils'
 import { openDoc, logout, renderLang } from '@/utils'
 import { SystemSet } from '@/components/SystemSet/index'
+import Person from './person.png'
 
 import { icon } from '@/plugins'
 const {
@@ -42,8 +43,6 @@ const t = window['$t']
 
 const modelShow = ref(false)
 
-const imageUrl = 'https://www.naiveui.com/assets/naivelogo.93278402.svg'
-
 // 是否失败
 const fallback = ref(false)
 
@@ -58,7 +57,7 @@ const renderUserInfo = () => {
       h(NAvatar, {
         round: true,
         style: 'margin-right: 12px;',
-        src: imageUrl
+        src: Person
       }),
       h('div', null, [
         h('div', null, [

src/packages/components/Charts/Bars/BarCommon/config.ts

@@ -26,6 +26,10 @@ export default class Config extends publicConfig implements CreateComponentType
       {
         data: [120, 200, 150, 80, 70, 110, 130],
         type: 'bar'
+      },
+      {
+        data: [130, 130, 312, 268, 155, 117, 160],
+        type: 'bar'
       }
     ]
   })

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <VChart theme="dark" :option="option" autoresize />
+  <VChart :theme="themeData" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
 import { computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
-import { use, graphic } from 'echarts/core'
+import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
 import {
@@ -16,6 +16,11 @@ import {
 import config from './config'
 
 const props = defineProps({
+  themeData: {
+    type: Object || String,
+    default: 'dark',
+    required: true
+  },
   chartData: {
     type: Object as PropType<config>,
     required: true

src/packages/components/Charts/Bars/BarCrossrange/config.ts

@@ -1,17 +1,13 @@
-import { getUUID } from '@/utils'
-import { echartOptionProfixHandle } from '@/packages/utils/chart'
+import { echartOptionProfixHandle, publicConfig } from '@/packages/utils'
 import { BarCrossrangefig } from './index'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
 
-export default class Config implements CreateComponentType {
-  public id: string = getUUID()
+export default class Config extends publicConfig implements CreateComponentType {
   public key: string = BarCrossrangefig.key
 
   public chartData: Exclude<ConfigType, ['node']> = omit(BarCrossrangefig, ['node'])
 
-  public attr = { x: 0, y: 0, w: 500, h: 300 }
-
   // 图表配置项
   public option = echartOptionProfixHandle({
     backgroundColor: 'rgba(0,0,0,0)',

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart theme="dark" :option="option" autoresize />
+  <VChart :theme="themeData" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
@@ -16,6 +16,11 @@ import {
 import config from './config'
 
 const props = defineProps({
+  themeData: {
+    type: Object || String,
+    default: 'dark',
+    required: true
+  },
   chartData: {
     type: Object as PropType<config>,
     required: true

src/packages/components/Charts/Lines/LineCommon/config.ts

@@ -1,17 +1,13 @@
-import { getUUID } from '@/utils'
-import { echartOptionProfixHandle } from '@/packages/utils/chart'
+import { echartOptionProfixHandle, publicConfig } from '@/packages/utils'
 import { LineCommonConfig } from './index'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
 
-export default class Config implements CreateComponentType {
-  public id: string = getUUID()
+export default class Config extends publicConfig implements CreateComponentType {
   public key: string = LineCommonConfig.key
 
   public chartData: Exclude<ConfigType, ['node']> = omit(LineCommonConfig, ['node'])
 
-  public attr = { x: 0, y: 0, w: 500, h: 300 }
-
   // 图表配置项
   public option = echartOptionProfixHandle({
     xAxis: {
@@ -25,6 +21,10 @@ export default class Config implements CreateComponentType {
       {
         data: [150, 230, 224, 218, 135, 147, 260],
         type: 'line'
+      },
+      {
+        data: [130, 130, 312, 268, 155, 117, 160],
+        type: 'line'
       }
     ]
   })

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart theme="dark" :option="option" autoresize />
+  <VChart :theme="themeData" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
@@ -16,6 +16,11 @@ import {
 import config from './config'
 
 const props = defineProps({
+   themeData: {
+    type: Object || String,
+    default: 'dark',
+    required: true
+  },
   chartData: {
     type: Object as PropType<config>,
     required: true

src/packages/components/Charts/Pies/PieCommon/config.ts

@@ -1,17 +1,13 @@
-import { getUUID } from '@/utils'
-import { echartOptionProfixHandle } from '@/packages/utils/chart'
+import { echartOptionProfixHandle, publicConfig } from '@/packages/utils'
 import { PieCommonConfig } from './index'
 import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
 
-export default class Config implements CreateComponentType {
-  public id: string = getUUID()
+export default class Config extends publicConfig implements CreateComponentType {
   public key: string = PieCommonConfig.key
 
   public chartData: Exclude<ConfigType, ['node']> = omit(PieCommonConfig, ['node'])
 
-  public attr = { x: 0, y: 0, w: 500, h: 300 }
-
   // 图表配置项
   public option = echartOptionProfixHandle({
     tooltip: {

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart theme="dark" :option="option" autoresize />
+  <VChart :theme="themeData" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
@@ -16,6 +16,11 @@ import {
 import config from './config'
 
 const props = defineProps({
+  themeData: {
+    type: Object || String,
+    default: 'dark',
+    required: true
+  },
   chartData: {
     type: Object as PropType<config>,
     required: true

src/plugins/icon.ts

@@ -13,7 +13,7 @@ import {
   Send as SendIcon,
   InformationCircleOutline as InformationCircleIcon,
   Grid as GridIcon,
-  TvOutline as DesktopIcon,
+  TvOutline as TvOutlineIcon,
   DocumentText as DocumentTextIcon,
   Language as LanguageIcon,
   Moon as MoonIcon,
@@ -32,7 +32,7 @@ import {
   BarChart as BarChartIcon,
   Layers as LayersIcon,
   Prism as PrismIcon,
-  Cube as CubeIcon,
+  Construct as ConstructIcon,
   ChevronBackOutline as ChevronBackOutlineIcon,
   Flash as FlashIcon,
   SettingsSharp as SettingsSharpIcon,
@@ -40,9 +40,10 @@ import {
   Card as CardIcon,
   ChevronUp as ChevronUpIcon,
   ChevronDown as ChevronDownIcon,
-  TimeOutline as TimeOutlineIcon,
   ClipboardOutline as ClipboardOutlineIcon,
-  Cut as CutIcon
+  BrowsersOutline as BrowsersOutlineIcon,
+  Cut as CutIcon,
+  Square as SquareIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -57,7 +58,7 @@ import {
   UpToTop as UpToTopIcon,
   DownToBottom as DownToBottomIcon,
   StackedMove as StackedMoveIcon,
-  PaintBrush as PaintBrushIcon
+  PaintBrush as PaintBrushIcon,
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -113,7 +114,9 @@ const ionicons5 = {
   // 项目
   GridIcon,
   // 电脑1
-  DesktopIcon,
+  TvOutlineIcon,
+  // 浏览器
+  BrowsersOutlineIcon,
   // 文档
   DocumentTextIcon,
   // 语言
@@ -127,7 +130,7 @@ const ionicons5 = {
   // 组件详情设置（三棱镜）
   PrismIcon,
   // 正方体
-  CubeIcon,
+  ConstructIcon,
   // 折叠/回退
   ChevronBackOutlineIcon,
   // 后端数据（闪电）
@@ -142,12 +145,12 @@ const ionicons5 = {
   ChevronUpIcon,
   // 下移
   ChevronDownIcon,
-  // 时间
-  TimeOutlineIcon,
   // 剪贴板
   ClipboardOutlineIcon,
   // 剪贴
-  CutIcon
+  CutIcon,
+  // 正方形
+  SquareIcon
 }
 
 const carbon = {
@@ -174,7 +177,7 @@ const carbon = {
   // 移动
   StackedMoveIcon,
   // 清空剪切板（刷子）
-  PaintBrushIcon
+  PaintBrushIcon,
 }
 
 // https://www.xicons.org/#/ 还有很多

src/plugins/naive.ts

@@ -82,6 +82,8 @@ import {
   NCarousel,
   NScrollbar,
   NPopselect,
+  NCollapse,
+  NCollapseItem,
   NCollapseTransition
 } from 'naive-ui';
 
@@ -168,6 +170,8 @@ const naive = create({
     NCarousel,
     NScrollbar,
     NPopselect,
+    NCollapse,
+    NCollapseItem,
     NCollapseTransition
   ],
 });

src/settings/chartColors.ts

@@ -0,0 +1,141 @@
+// 马卡龙
+const colorDefault = [
+ '#4992ff',
+ '#4992ff',
+ '#fddd60'
+]
+// 马卡龙
+const colorMacarons = [
+  '#2ec7c9',
+  '#b6a2de',
+  '#5ab1ef',
+  '#ffb980',
+  '#d87a80',
+  '#8d98b3',
+  '#e5cf0d',
+  '#97b552',
+  '#95706d',
+  '#dc69aa',
+  '#07a2a4',
+  '#9a7fd1',
+  '#588dd5',
+  '#f5994e',
+  '#c05050',
+  '#59678c',
+  '#c9ab00',
+  '#7eb00a',
+  '#6f5553',
+  '#c14089'
+]
+
+// 复古色
+const colorVintage = [
+  '#2ec7c9',
+  '#b6a2de',
+  '#5ab1ef',
+  '#ffb980',
+  '#d87a80',
+  '#8d98b3',
+  '#e5cf0d',
+  '#97b552',
+  '#95706d',
+  '#dc69aa',
+  '#07a2a4',
+  '#9a7fd1',
+  '#588dd5',
+  '#f5994e',
+  '#c05050',
+  '#59678c',
+  '#c9ab00',
+  '#7eb00a',
+  '#6f5553',
+  '#c14089'
+]
+
+// 信息（橘黄）
+const colorInfographic = [
+  '#C1232B',
+  '#27727B',
+  '#FCCE10',
+  '#E87C25',
+  '#B5C334',
+  '#FE8463',
+  '#9BCA63',
+  '#FAD860',
+  '#F3A43B',
+  '#60C0DD',
+  '#D7504B',
+  '#C6E579',
+  '#F4E001',
+  '#F0805A',
+  '#26C0C0'
+]
+
+// 阳光（深蓝）
+const colorShine = [
+  '#c12e34',
+  '#e6b600',
+  '#0098d9',
+  '#2b821d',
+  '#005eaa',
+  '#339ca8',
+  '#cda819',
+  '#32a487'
+]
+
+// 罗马红
+const colorRoma = [
+  '#e01f54',
+  '#001852',
+  '#f5e8c8',
+  '#b8d2c7',
+  '#c6b38e',
+  '#a4d8c2',
+  '#f3d999',
+  '#d3758f',
+  '#dcc392',
+  '#2e4783',
+  '#82b6e9',
+  '#ff6347',
+  '#a092f1',
+  '#0a915d',
+  '#eaf889',
+  '#6699FF',
+  '#ff6666',
+  '#3cb371',
+  '#d5b158',
+  '#38b6b6'
+]
+
+export const chartColors = [
+  {
+    name: '默认',
+    key: 'colorMacarons',
+    colors: colorMacarons
+  },
+  {
+    name: '马卡龙',
+    key: 'colorMacarons',
+    colors: colorMacarons
+  },
+  {
+    name: '复古',
+    key: 'colorVintage',
+    colors: colorVintage
+  },
+  {
+    name: '阳光蓝',
+    key: 'colorShine',
+    colors: colorShine
+  },
+  {
+    name: '信息黄',
+    key: 'colorInfographic',
+    colors: colorInfographic
+  },
+  {
+    name: '罗马红',
+    key: 'colorRoma',
+    colors: colorRoma
+  },
+]

src/settings/chartThemes/index.ts

@@ -0,0 +1,44 @@
+import customed from './themes/customed.json'
+import dark from './themes/dark.json'
+import chalk from './themes/chalk.json'
+import essos from './themes/essos.json'
+import macarons from './themes/macarons.json'
+import purplePassion from './themes/purple-passion.json'
+import roma from './themes/roma.json'
+import shine from './themes/shine.json'
+import vintage from './themes/vintage.json'
+import walden from './themes/walden.json'
+import westeros from './themes/westeros.json'
+import wonderland from './themes/wonderland.json'
+
+export const chartColors = {
+  dark,
+  customed,
+  macarons,
+  walden,
+  purplePassion,
+  vintage,
+  chalk,
+  westeros,
+  wonderland,
+  essos,
+  shine,
+  roma,
+}
+
+export const defaultTheme = 'dark'
+
+export const chartColorsName = {
+  dark: '暗黑（默认）',
+  customed: '明亮',
+  macarons: '马卡龙',
+  walden: '蓝绿',
+  chalk: '粉红',
+  essos: '橘红',
+  vintage: '复古',
+  purplePassion: '深紫',
+  westeros: '灰粉',
+  wonderland: '青草',
+  roma: '罗马红',
+  shine: '深色',
+}

src/settings/chartThemes/themes/chalk.json

@@ -0,0 +1,12 @@
+{
+  "color": [
+    "#fc97af",
+    "#87f7cf",
+    "#f7f494",
+    "#72ccff",
+    "#f7c5a0",
+    "#d4a4eb",
+    "#d2f5a6",
+    "#76f2f2"
+  ]
+}

src/settings/chartThemes/themes/customed.json

@@ -0,0 +1,13 @@
+{
+  "color": [
+    "#5470c6",
+    "#91cc75",
+    "#fac858",
+    "#ee6666",
+    "#73c0de",
+    "#3ba272",
+    "#fc8452",
+    "#9a60b4",
+    "#ea7ccc"
+  ]
+}

src/settings/chartThemes/themes/dark.json

@@ -0,0 +1,13 @@
+{
+  "color": [
+    "#4992ff",
+    "#7cffb2",
+    "#fddd60",
+    "#ff6e76",
+    "#58d9f9",
+    "#05c091",
+    "#ff8a45",
+    "#8d48e3",
+    "#dd79ff"
+  ]
+}

src/settings/chartThemes/themes/essos.json

@@ -0,0 +1,10 @@
+{
+  "color": [
+    "#893448",
+    "#d95850",
+    "#eb8146",
+    "#ffb248",
+    "#f2d643",
+    "#ebdba4"
+  ]
+}

src/settings/chartThemes/themes/macarons.json

@@ -0,0 +1,24 @@
+{
+  "color": [
+    "#2ec7c9",
+    "#b6a2de",
+    "#5ab1ef",
+    "#ffb980",
+    "#d87a80",
+    "#8d98b3",
+    "#e5cf0d",
+    "#97b552",
+    "#95706d",
+    "#dc69aa",
+    "#07a2a4",
+    "#9a7fd1",
+    "#588dd5",
+    "#f5994e",
+    "#c05050",
+    "#59678c",
+    "#c9ab00",
+    "#7eb00a",
+    "#6f5553",
+    "#c14089"
+  ]
+}

src/settings/chartThemes/themes/purple-passion.json

@@ -0,0 +1,10 @@
+{
+  "color": [
+    "#9b8bba",
+    "#e098c7",
+    "#8fd3e8",
+    "#71669e",
+    "#cc70af",
+    "#7cb4cc"
+  ]
+}

src/settings/chartThemes/themes/roma.json

@@ -0,0 +1,24 @@
+{
+  "color": [
+    "#e01f54",
+    "#5e4ea5",
+    "#f5e8c8",
+    "#b8d2c7",
+    "#c6b38e",
+    "#a4d8c2",
+    "#f3d999",
+    "#d3758f",
+    "#dcc392",
+    "#2e4783",
+    "#82b6e9",
+    "#ff6347",
+    "#a092f1",
+    "#0a915d",
+    "#eaf889",
+    "#6699FF",
+    "#ff6666",
+    "#3cb371",
+    "#d5b158",
+    "#38b6b6"
+  ]
+}

src/settings/chartThemes/themes/shine.json

@@ -0,0 +1,12 @@
+{
+  "color": [
+    "#c12e34",
+    "#e6b600",
+    "#0098d9",
+    "#2b821d",
+    "#005eaa",
+    "#339ca8",
+    "#cda819",
+    "#32a487"
+  ]
+}

src/settings/chartThemes/themes/vintage.json

@@ -0,0 +1,14 @@
+{
+  "color": [
+    "#d87c7c",
+    "#919e8b",
+    "#d7ab82",
+    "#6e7074",
+    "#61a0a8",
+    "#efa18d",
+    "#787464",
+    "#cc7e63",
+    "#724e58",
+    "#4b565b"
+  ]
+}

src/settings/chartThemes/themes/walden.json

@@ -0,0 +1,10 @@
+{
+  "color": [
+    "#3fb1e3",
+    "#6be6c1",
+    "#626c91",
+    "#a0a7e6",
+    "#c4ebad",
+    "#96dee8"
+  ]
+}

src/settings/chartThemes/themes/westeros.json

@@ -0,0 +1,10 @@
+{
+  "color": [
+    "#516b91",
+    "#59c4e6",
+    "#edafda",
+    "#93b7e3",
+    "#a5e7f0",
+    "#cbb0e3"
+  ]
+}

src/settings/chartThemes/themes/wonderland.json

@@ -0,0 +1,10 @@
+{
+  "color": [
+    "#4ea397",
+    "#22c3aa",
+    "#7bd9a5",
+    "#d0648a",
+    "#f58db2",
+    "#f2b3c9"
+  ]
+}

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -19,10 +19,6 @@ export type EditCanvasType = {
   // 编辑区域 DOM
   [EditCanvasTypeEnum.EDIT_LAYOUT_DOM]: HTMLElement | null
   [EditCanvasTypeEnum.EDIT_CONTENT_DOM]: HTMLElement | null
-  // 大屏宽度
-  [EditCanvasTypeEnum.WIDTH]: number
-  // 大屏高度
-  [EditCanvasTypeEnum.HEIGHT]: number
   // 偏移大小
   [EditCanvasTypeEnum.OFFSET]: number
   // 缩放
@@ -31,8 +27,36 @@ export type EditCanvasType = {
   [EditCanvasTypeEnum.USER_SCALE]: number
   // 锁定缩放
   [EditCanvasTypeEnum.LOCK_SCALE]: boolean
+}
+
+// 滤镜
+export enum EditCanvasFilterEnum {
+  HUE_ROTATE = 'hueRotate',
+  SATURATE = 'saturate',
+  BRIGHTNESS = 'brightness',
+  CONTRAST = 'contrast',
+  UN_OPACITY = 'unOpacity',
+  CHART_THEME = 'chartTheme',
+}
+export interface EditCanvasConfigType {
+  // 大屏宽度
+  [EditCanvasTypeEnum.WIDTH]: number
+  // 大屏高度
+  [EditCanvasTypeEnum.HEIGHT]: number
+  // 色相
+  [EditCanvasFilterEnum.HUE_ROTATE]: number
+  // 饱和度
+  [EditCanvasFilterEnum.SATURATE]: number
+  // 亮度
+  [EditCanvasFilterEnum.BRIGHTNESS]: number
+  // 对比度
+  [EditCanvasFilterEnum.CONTRAST]: number
+  // 不透明度
+  [EditCanvasFilterEnum.UN_OPACITY]: number
   // 背景色
   [EditCanvasTypeEnum.BACKGROUND]?: string
+  // 图表主题颜色
+  [EditCanvasFilterEnum.CHART_THEME]: string
 }
 
 // 坐标轴信息
@@ -65,6 +89,7 @@ export type RecordChartType = {
 export enum ChartEditStoreEnum {
   EDIT_RANGE = 'editRange',
   EDIT_CANVAS = 'editCanvas',
+  EDIT_CANVAS_CONFIG = 'editCanvasConfig',
   RIGHT_MENU_SHOW = 'rightMenuShow',
   MOUSE_POSITION = 'mousePosition',
   TARGET_CHART = 'targetChart',
@@ -75,6 +100,7 @@ export enum ChartEditStoreEnum {
 // Store 类型
 export interface chartEditStoreType {
   [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
+  [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
   [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
   [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType
   [ChartEditStoreEnum.TARGET_CHART]: TargetChartType

src/store/modules/chartEditStore/chartEditStore.ts

@@ -3,33 +3,30 @@ import { getUUID, loadingStart, loadingFinish, loadingError } from '@/utils'
 import { CreateComponentType } from '@/packages/index.d'
 import debounce from 'lodash/debounce'
 import cloneDeep from 'lodash/cloneDeep'
+import { defaultTheme } from '@/settings/chartThemes/index'
+// 记录记录
+import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 import {
   chartEditStoreType,
   EditCanvasType,
   MousePositionType,
   TargetChartType,
-  RecordChartType
+  RecordChartType,
+  EditCanvasConfigType
 } from './chartEditStore.d'
 
-// 记录记录
-import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
-import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-
 const chartHistoryStoreStore = useChartHistoryStoreStore()
 
 // 编辑区域内容
 export const useChartEditStoreStore = defineStore({
   id: 'useChartEditStoreStore',
   state: (): chartEditStoreType => ({
-    // 编辑画布属性
+    // 画布属性
     editCanvas: {
       // 编辑区域 Dom
       editLayoutDom: null,
       editContentDom: null,
-      // 默认宽度
-      width: 1920,
-      // 默认高度
-      height: 1080,
       // 偏移量
       offset: 20,
       // 系统控制缩放
@@ -38,8 +35,27 @@ export const useChartEditStoreStore = defineStore({
       userScale: 1,
       // 锁定缩放
       lockScale: false,
+    },
+    // 画布属性（需存储给后端）
+    editCanvasConfig: {
+      // 默认宽度
+      width: 1920,
+      // 默认高度
+      height: 1080,
+      // 色相
+      hueRotate: 0,
+      // 饱和度
+      saturate: 0,
+      // 亮度
+      brightness: 100,
+      // 对比度
+      contrast: 100,
+      // 不透明度
+      unOpacity: 100,
       // 默认背景色
-      background: undefined
+      background: undefined,
+      // chart 主题色
+      chartTheme: defaultTheme || 'dark'
     },
     // 右键菜单
     rightMenuShow: false,
@@ -55,7 +71,7 @@ export const useChartEditStoreStore = defineStore({
     },
     // 记录临时数据（复制等）
     recordChart: undefined,
-    // 图表数组
+    // 图表数组（需存储给后端）
     componentList: []
   }),
   getters: {
@@ -68,6 +84,9 @@ export const useChartEditStoreStore = defineStore({
     getEditCanvas(): EditCanvasType {
       return this.editCanvas
     },
+    getEditCanvasConfig(): EditCanvasConfigType {
+      return this.editCanvasConfig
+    },
     getTargetChart():TargetChartType {
       return this.targetChart
     },
@@ -83,6 +102,9 @@ export const useChartEditStoreStore = defineStore({
     setEditCanvasItem<T extends keyof EditCanvasType,  K extends EditCanvasType[T]>(key: T, value: K) {
       this.editCanvas[key] = value
     },
+    setCanvasConfig<T extends keyof EditCanvasConfigType,  K extends EditCanvasConfigType[T]>(key: T, value: K) {
+      this.editCanvasConfig[key] = value
+    },
     // * 设置右键菜单
     setRightMenuShow(value: boolean) {
       this.rightMenuShow = value
@@ -435,8 +457,8 @@ export const useChartEditStoreStore = defineStore({
     },
     // * 设置页面大小
     setPageSize(): void {
-      this.setPageStyle('height', `${this.getEditCanvas.height}px`)
-      this.setPageStyle('width', `${this.getEditCanvas.width}px`)
+      this.setPageStyle('height', `${this.editCanvasConfig.height}px`)
+      this.setPageStyle('width', `${this.editCanvasConfig.width}px`)
     },
     // * 计算缩放
     computedScale() {
@@ -448,8 +470,8 @@ export const useChartEditStoreStore = defineStore({
           this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
 
         // 用户设定大小
-        const editCanvasWidth = this.getEditCanvas.width
-        const editCanvasHeight = this.getEditCanvas.height
+        const editCanvasWidth = this.editCanvasConfig.width
+        const editCanvasHeight = this.editCanvasConfig.height
 
         // 需保持的比例
         const baseProportion = parseFloat(

src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

@@ -1,32 +1,10 @@
 import { ThemeEnum } from '@/enums/styleEnum'
 
-export enum ChartLayoutFilterEnum {
-  HUEROTATE = 'hueRotate',
-  SATURATE = 'saturate',
-  BRIGHTNESS = 'brightness',
-  CONTRAST = 'contrast',
-  UNOPACITY = 'unOpacity',
-}
-
-export interface ChartLayoutFilterType {
-  // 色相
-  [ChartLayoutFilterEnum.HUEROTATE]: number
-  // 饱和度
-  [ChartLayoutFilterEnum.SATURATE]: number
-  // 亮度
-  [ChartLayoutFilterEnum.BRIGHTNESS]: number
-  // 对比度
-  [ChartLayoutFilterEnum.CONTRAST]: number
-  // 不透明度
-  [ChartLayoutFilterEnum.UNOPACITY]: number
-}
-
 export enum ChartLayoutStoreEnum {
   LAYERS = 'layers',
   CHARTS = 'charts',
   DETAILS = 'details',
   ALIGNLINE = 'alignLine',
-  FILTER = 'filter',
 }
 
 export interface ChartLayoutType {
@@ -38,6 +16,4 @@ export interface ChartLayoutType {
   [ChartLayoutStoreEnum.DETAILS]: boolean
   // 对齐线
   [ChartLayoutStoreEnum.ALIGNLINE]: boolean
-  // 滤镜
-  [ChartLayoutStoreEnum.FILTER]: ChartLayoutFilterType
 }

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ChartLayoutType, ChartLayoutFilterType } from './chartLayoutStore.d'
+import { ChartLayoutType } from './chartLayoutStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -23,19 +23,6 @@ export const useChartLayoutStore = defineStore({
       details: true,
       // 对齐线
       alignLine: true,
-      // 滤镜
-      filter: {
-        // 色相
-        hueRotate: 0,
-        // 饱和度
-        saturate: 0,
-        // 亮度
-        brightness: 100,
-        // 对比度
-        contrast: 100,
-        // 不透明度
-        unOpacity: 100
-      }
     },
   getters: {
     getLayers(): boolean {
@@ -49,9 +36,6 @@ export const useChartLayoutStore = defineStore({
     },
     getAlignLine(): boolean {
       return this.alignLine
-    },
-    getFilter(): ChartLayoutFilterType {
-      return this.filter
     }
   },
   actions: {
@@ -62,13 +46,6 @@ export const useChartLayoutStore = defineStore({
       setTimeout(() => {
         chartEditStore.computedScale()
       }, 500)
-    },
-    setFilter<T extends keyof ChartLayoutFilterType>(
-      key: T,
-      value: boolean
-    ): void {
-      ;(this.filter as any)[key] = value
-      setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
     }
   }
 })

src/styles/common/_dark.scss

@@ -10,8 +10,11 @@ $dark: (
     background-color2: $--color-dark-bg-2,
     background-color2-shallow: $--color-dark-bg-2-shallow,
     background-color3: $--color-dark-bg-3,
+    background-color3-shallow: $--color-dark-bg-3-shallow,
     background-color4: $--color-dark-bg-4,
+    background-color4-shallow: $--color-dark-bg-4-shallow,
     background-color5: $--color-dark-bg-5,
+    background-color5-shallow: $--color-dark-bg-5-shallow,
   // 毛玻璃背景
     filter-color: $--filter-color-login-dark,
   //渐变背景

src/styles/common/_light.scss

@@ -12,8 +12,11 @@ $light: (
     background-color2: $--color-light-bg-2,
     background-color2-shallow: $--color-light-bg-2-shallow,
     background-color3: $--color-light-bg-3,
+    background-color3-shallow: $--color-light-bg-3-shallow,
     background-color4: $--color-light-bg-4,
+    background-color4-shallow: $--color-light-bg-4-shallow,
     background-color5: $--color-light-bg-5,
+    background-color5-shallow: $--color-light-bg-5-shallow,
   // 毛玻璃背景
     filter-color: $--filter-color-login-light,
   //渐变背景

src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.ts

@@ -0,0 +1,3 @@
+import ChartTheme from './index.vue'
+
+export { ChartTheme }

src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="go-canvas-chart-color">
+    <n-collapse :default-expanded-names="['1']">
+      <n-collapse-item title="主题选择" name="1">
+        <n-card
+          v-for="(value, key) in chartColors"
+          :key="key"
+          class="card-box"
+          :class="{ selected: key === selectName }"
+          size="small"
+          hoverable
+          embedded
+          @click="selectTheme(key)"
+        >
+          <div class="go-flex-items-center">
+            <n-text>{{ chartColorsName[key] }}</n-text>
+            <span
+              class="color-item"
+              v-for="colorItem in fetchShowColors(value.color)"
+              :key="colorItem"
+              :style="{ backgroundColor: colorItem }"
+            />
+          </div>
+        </n-card>
+      </n-collapse-item>
+    </n-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasFilterEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { chartColors, chartColorsName } from '@/settings/chartThemes/index'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import cloneDeep from 'lodash/cloneDeep'
+import { icon } from '@/plugins'
+
+const { SquareIcon } = icon.ionicons5
+const chartEditStoreStore = useChartEditStoreStore()
+
+// 全局颜色
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+
+const selectName = computed(() => {
+  return chartEditStoreStore.getEditCanvasConfig.chartTheme
+})
+
+// 获取用来展示的色号
+const fetchShowColors = (colors: Array<string>) => {
+  return cloneDeep(colors).splice(0, 6)
+}
+
+const selectTheme = (theme: string) => {
+  chartEditStoreStore.setCanvasConfig(EditCanvasFilterEnum.CHART_THEME, theme)
+}
+</script>
+
+<style lang="scss" scoped>
+@include go(canvas-chart-color) {
+  .card-box {
+    cursor: pointer;
+    margin-top: 15px;
+    padding: 0;
+    @include filter-bg-color('background-color4-shallow');
+    border-radius: 23px;
+    @include deep() {
+      .n-card__content {
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
+    }
+    &.selected {
+      border: 1px solid v-bind('themeColor');
+    }
+    &:first-child {
+      margin-top: 0;
+    }
+    .go-flex-items-center {
+      justify-content: space-between;
+    }
+    .color-item {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+    }
+  }
+}
+</style>

src/views/chart/ContentDetails/components/CanvasPage/index.ts

@@ -0,0 +1,3 @@
+import CanvasPage from './index.vue'
+
+export { CanvasPage }

src/views/chart/ContentDetails/components/CanvasPage/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="go-canvas-setting">
+    <ChartTheme />
+  </div>
+</template>
+
+<script setup>
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+const chartEditStoreStore = useChartEditStoreStore()
+import { ChartTheme } from './components/ChartTheme/index'
+</script>
+
+<style lang="scss" scoped>
+@include go(canvas-setting) {
+}
+</style>

src/views/chart/ContentDetails/components/Page/index.ts

@@ -1,3 +0,0 @@
-import Page from './index.vue'
-
-export { Page }

src/views/chart/ContentDetails/components/Page/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-   页面设置
-  </div>
-</template>
-
-<script setup>
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/chart/ContentDetails/index.vue

@@ -14,12 +14,43 @@
       @collapse="collapsedHindle"
       @expand="expandHindle"
     >
-      <ContentBox class="go-content-layers go-boderbox" :showTop="false" :depth="2">
-        <n-tabs class="tabs-box" size="small" type="segment">
+      <ContentBox
+        class="go-content-layers go-boderbox"
+        :showTop="false"
+        :depth="2"
+      >
+        <!-- 画布 -->
+        <n-tabs
+          v-show="!selectTarget"
+          class="tabs-box"
+          size="small"
+          type="segment"
+        >
+          <n-tab-pane size="small" display-directive="show:lazy">
+            <template #tab>
+              <n-space>
+                <span> 页面设置 </span>
+                <n-icon size="16" class="icon-position">
+                  <BrowsersOutlineIcon />
+                </n-icon>
+              </n-space>
+            </template>
+            <CanvasPage name="canvas" />
+          </n-tab-pane>
+        </n-tabs>
+
+        <!-- 编辑 -->
+        <n-tabs
+          v-show="selectTarget"
+          class="tabs-box"
+          size="small"
+          type="segment"
+        >
           <n-tab-pane
             v-for="item in tabList"
             :key="item.key"
             :name="item.key"
+            size="small"
             display-directive="show:lazy"
           >
             <template #tab>
@@ -39,20 +70,29 @@
 </template>
 
 <script setup lang="ts">
-import {  shallowRef, ref, toRefs, watch, reactive } from 'vue'
+import { shallowRef, ref, toRefs, watch, computed, reactive } from 'vue'
 import { icon } from '@/plugins'
+import { loadAsyncComponent } from '@/utils'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-import { Setting } from './components/Setting/index'
-import { Behind } from './components/Behind/index'
-import { Page } from './components/Page/index'
-import { ContentEdit } from '../ContentEdit/index'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const { getDetails } = toRefs(useChartLayoutStore())
 const { setItem } = useChartLayoutStore()
+const chartEditStoreStore = useChartEditStoreStore()
 
-const { CubeIcon, FlashIcon } = icon.ionicons5
+const { ConstructIcon, FlashIcon, BrowsersOutlineIcon } = icon.ionicons5
+
+const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
+const CanvasPage = loadAsyncComponent(() =>
+  import('./components/CanvasPage/index.vue')
+)
+
+const Setting = loadAsyncComponent(() =>
+  import('./components/Setting/index.vue')
+)
+const Behind = loadAsyncComponent(() => import('./components/Behind/index.vue'))
 
 const collapsed = ref<boolean>(getDetails.value)
 
@@ -66,7 +106,15 @@ const expandHindle = () => {
   setItem(ChartLayoutStoreEnum.DETAILS, false)
 }
 
-watch(getDetails, (newData) => {
+const selectTarget = computed(() => {
+  const selectId = chartEditStoreStore.getTargetChart.selectId
+  if (!selectId) return undefined
+  return chartEditStoreStore.componentList[
+    chartEditStoreStore.fetchTargetIndex()
+  ]
+})
+
+watch(getDetails, newData => {
   if (newData) {
     collapsedHindle()
   } else {
@@ -78,14 +126,14 @@ watch(getDetails, (newData) => {
 const pageSetting = reactive({
   key: 'pageSetting',
   title: '页面设置',
-  render: Page
+  render: CanvasPage
 })
 
 const tabList = shallowRef([
   {
     key: 'setting',
     title: '设置',
-    icon: CubeIcon,
+    icon: ConstructIcon,
     render: Setting
   },
   {

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="go-edit-range"
-    :style="useSizeStyle(size)"
+    :style="style"
     @mousedown="mousedownHandleUnStop($event, undefined)"
   >
     <slot></slot>
@@ -9,21 +9,37 @@
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useSizeStyle } from '../../hooks/useStyle.hook'
 import { mousedownHandleUnStop } from '../../hooks/useDrop.hook'
 
-const size = {
-  w: 1920,
-  h: 1080
-}
+const chartEditStoreStore = useChartEditStoreStore()
 
+const canvasConfig = ref(chartEditStoreStore.getEditCanvasConfig)
+
+const size = computed(() => {
+  return {
+    w: canvasConfig.value.width,
+    h: canvasConfig.value.height
+  }
+})
+
+const background = computed(() => {
+  const background = canvasConfig.value.background
+  return background ? background : '#232324'
+})
+
+const style = computed(() => {
+  // @ts-ignore
+  return { ...useSizeStyle(size.value), background: background.value }
+})
 </script>
 
 <style lang="scss" scoped>
 @include go(edit-range) {
   position: relative;
   border: 1px solid;
-  background-color: #333;
   border-radius: 15px;
   @include filter-bg-color('background-color2');
   @include fetch-theme('box-shadow');

src/views/chart/ContentEdit/components/History/index.vue

@@ -17,9 +17,6 @@
         @click="handleClick"
       >
         <span class="btn-text">历史记录</span>
-        <!-- <n-icon class="lock-icon" size="18" :depth="2">
-          <TimeOutlineIcon />
-        </n-icon> -->
       </n-button>
     </n-dropdown>
 
@@ -48,7 +45,6 @@ import {
 } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 
 const {
-  TimeOutlineIcon,
   DesktopOutlineIcon,
   PencilIcon,
   TrashIcon,

src/views/chart/ContentEdit/hooks/useDrop.hook.ts

@@ -45,7 +45,6 @@ export const handleDragOver = (e: DragEvent) => {
   if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
 }
 
-
 // * 不拦截默认行为点击
 export const mousedownHandleUnStop = (
   e: MouseEvent,

src/views/chart/ContentEdit/index.vue

@@ -30,6 +30,7 @@
             class="edit-content-chart"
             :is="item.key"
             :chartData="item"
+            :themeData="themeData"
             :style="useSizeStyle(item.attr)"
           />
         </ShapeBox>
@@ -43,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { ContentBox } from '../ContentBox/index'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
@@ -56,9 +57,9 @@ import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { getChartEditStore } from './hooks/useStore.hook'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 import { CreateComponentType } from '@/packages/index.d'
+import { chartColors } from '@/settings/chartThemes/index'
 
 const chartEditStore = getChartEditStore()
-
 const { handleContextMenu } = useContextMenu()
 
 // 布局处理
@@ -68,6 +69,14 @@ useLayout()
 const editRangeRef = ref<HTMLElement | null>(null)
 const { mouseenterHandle, mouseleaveHandle, mousedownHandle } = useMouseHandle()
 
+// 主题色注入
+const themeData = computed(() => {
+  const theme = chartEditStore.getEditCanvasConfig.chartTheme
+  if(theme === 'dark') return 'dark'
+  //  @ts-ignore
+  return chartColors[theme]
+})
+
 // 键盘事件
 onMounted(() => {
   useAddKeyboard()

src/views/chart/HeaderRightBtn/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-space class="go-mt-0">
-    <n-button v-for="item in btnList" :key="item.title" ghost>
+    <n-button v-for="item in btnList" :key="item.title" ghost size="small">
       <template #icon>
         <component :is="item.icon"></component>
       </template>

src/views/chart/hooks/useKeyboard.hook.ts

@@ -14,10 +14,10 @@ export const keyboardValue = {
 }
 
 const KeyboardHandle = (e: KeyboardEvent) => {
-  const ismacRes = isMac()
+  const isMacRes = isMac()
 
   // 暂不支持mac，因为我没有😤👻
-  if (ismacRes) return
+  if (isMacRes) return
   const key = e.key.toLowerCase()
 
   // 删除

src/views/chart/index.vue

@@ -39,16 +39,14 @@ import { loadAsyncComponent } from '@/utils'
 import { HeaderPro } from '@/layout/components/HeaderPro'
 import { useContextMenu } from './hooks/useContextMenu.hook'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
-
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
-const chartLayoutStore = useChartLayoutStore()
-const chartHistoryStoreStore = useChartHistoryStoreStore()
-// 记录初始化
-chartHistoryStoreStore.canvasInit(chartLayoutStore)
 
+const chartHistoryStoreStore = useChartHistoryStoreStore()
 const chartEditStore = useChartEditStoreStore()
 
+// 记录初始化
+chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)
+
 const HeaderLeftBtn = loadAsyncComponent(() =>
   import('./HeaderLeftBtn/index.vue')
 )

src/views/project/layout/components/Sider/menu.ts

@@ -5,7 +5,7 @@ import { PageEnum } from '@/enums/pageEnum'
 import { MenuOption, MenuGroupOption } from 'naive-ui'
 import { icon } from '@/plugins'
 
-const { GridIcon, DesktopIcon } = icon.ionicons5
+const { GridIcon, TvOutlineIcon } = icon.ionicons5
 const { StoreIcon, ObjectStorageIcon, DevicesIcon } = icon.carbon
 export const renderMenuLabel = (option: MenuOption | MenuGroupOption) => {
   return option.label
@@ -43,7 +43,7 @@ export const menuOptionsInit = () => {
                   { default: () => t('project.all_project') }
                 ),
               key: PageEnum.BASE_HOME_ITEMS_NAME,
-              icon: renderIcon(DesktopIcon),
+              icon: renderIcon(TvOutlineIcon),
             },
             {
               label: () =>