feat: 新增主题色选项

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')
 )