feat: 多主题色编辑

src/components/ColorListButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <Button class="color-btn">
+    <div class="blocks">
+      <div class="color-block" v-for="(color, index) in colors" :key="index">
+        <div class="content" :style="{ backgroundColor: color }"></div>
+      </div>
+    </div>
+    <IconPlatte class="color-btn-icon" />
+  </Button>
+</template>
+
+<script lang="ts" setup>
+import Button from './Button.vue'
+
+defineProps<{
+  colors: string[]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.color-btn {
+  width: 100%;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  padding: 0 !important;
+}
+.blocks {
+  display: flex;
+  flex: 1;
+  margin-left: 8px;
+  outline: 1px dashed rgba($color: #666, $alpha: .12);
+}
+.color-block {
+  height: 20px;
+  flex: 1;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAEBJREFUOE9jfPbs2X8GIoCkpCQRqhgYGEcNxBlOo2GIM2iGQLL5//8/UTnl+fPnxOWUUQNxhtNoGOLOKYM+2QAAh2Nq10DwkukAAAAASUVORK5CYII=);
+
+  & + & {
+    margin-left: 2px;
+  }
+}
+.content {
+  width: 100%;
+  height: 100%;
+}
+.color-btn-icon {
+  width: 32px;
+  font-size: 13px;
+  color: #bfbfbf;
+}
+</style>

src/hooks/useImport.ts

@@ -155,6 +155,7 @@ export default () => {
       const width = json.size.width
 
       slidesStore.setViewportSize(width * ratio)
+      slidesStore.setTheme({ themeColors: json.themeColors })
 
       const slides: Slide[] = []
       for (const item of json.slides) {

src/hooks/useSlideTheme.ts

@@ -292,32 +292,24 @@ export default () => {
     }
   }
   
-  // 应用预置主题（单页）
-  const applyPresetThemeToSingleSlide = (theme: PresetTheme) => {
-    const newSlide: Slide = JSON.parse(JSON.stringify(currentSlide.value))
-    setSlideTheme(newSlide, theme)
-    slidesStore.updateSlide({
-      background: newSlide.background,
-      elements: newSlide.elements,
-    })
-    addHistorySnapshot()
-  }
-  
-  // 应用预置主题（全部）
-  const applyPresetThemeToAllSlides = (theme: PresetTheme) => {
-    const newSlides: Slide[] = JSON.parse(JSON.stringify(slides.value))
-    for (const slide of newSlides) {
-      setSlideTheme(slide, theme)
-    }
+  // 应用预置主题
+  const applyPresetTheme = (theme: PresetTheme, resetSlides = false) => {
     slidesStore.setTheme({
       backgroundColor: theme.background,
       themeColors: theme.colors,
       fontColor: theme.fontColor,
       fontName: theme.fontname,
     })
+
+    if (resetSlides) {
+      const newSlides: Slide[] = JSON.parse(JSON.stringify(slides.value))
+      for (const slide of newSlides) {
+        setSlideTheme(slide, theme)
+      }
       slidesStore.setSlides(newSlides)
       addHistorySnapshot()
     }
+  }
   
   // 将当前主题配置应用到全部页面
   const applyThemeToAllSlides = (applyAll = false) => {
@@ -373,8 +365,7 @@ export default () => {
 
   return {
     getSlidesThemeStyles,
-    applyPresetThemeToSingleSlide,
-    applyPresetThemeToAllSlides,
+    applyPresetTheme,
     applyThemeToAllSlides,
   }
 }

src/views/Editor/Toolbar/SlideDesignPanel/ThemeColorsSetting.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="theme-colors-setting">
+    <div class="title">编辑主题色</div>
+
+    <div class="list">
+      <div class="row" v-for="(item, index) in themeColors" :key="index">
+        <div class="label" style="width: 40%;">幻灯片主题色{{ index + 1 }}：</div>
+        <Popover trigger="click" style="width: 60%;">
+          <template #content>
+            <ColorPicker
+              :modelValue="item"
+              @update:modelValue="(value: string) => themeColors[index] = value"
+            />
+          </template>
+          <ColorButton :color="item" />
+        </Popover>
+      </div>
+    </div>
+
+    <Button class="btn" type="primary" @click="setThemeColors()">确认</Button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useSlidesStore } from '@/store'
+import Popover from '@/components/Popover.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import ColorButton from '@/components/ColorButton.vue'
+import Button from '@/components/Button.vue'
+
+const emit = defineEmits<{
+  (event: 'close'): void 
+}>()
+
+const slidesStore = useSlidesStore()
+const { theme } = storeToRefs(slidesStore)
+
+const themeColors = ref<string[]>([])
+
+onMounted(() => {
+  let colors = theme.value.themeColors
+
+  while (colors.length < 6) {
+    colors.push('#00000000')
+  }
+  
+  themeColors.value = [...colors]
+})
+
+const setThemeColors = () => {
+  slidesStore.setTheme({ themeColors: themeColors.value })
+  emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+.theme-colors-setting {
+  display: flex;
+  flex-direction: column;
+}
+.title {
+  margin-bottom: 15px;
+  font-size: 17px;
+  font-weight: 700;
+}
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.label {
+  font-size: 13px;
+}
+.btn {
+  width: 100%;
+  margin-top: 12px;
+}
+</style>

src/views/Editor/Toolbar/SlideDesignPanel/index.vue

@@ -162,18 +162,10 @@
         <ColorButton :color="theme.backgroundColor" />
       </Popover>
     </div>
-    <!-- <div class="row">
+    <div class="row">
       <div style="width: 40%;">主题色：</div>
-      <Popover trigger="click" style="width: 60%;">
-        <template #content>
-          <ColorPicker
-            :modelValue="theme.themeColors[0]"
-            @update:modelValue="value => updateTheme({ themeColors: value })"
-          />
-        </template>
-        <ColorButton :color="theme.themeColors[0]" />
-      </Popover>
-    </div> -->
+      <ColorListButton style="width: 60%;" :colors="theme.themeColors" @click="themeColorsSettingVisible = true" />
+    </div>
     
     <template v-if="moreThemeConfigsVisible">
       <div class="row">
@@ -284,8 +276,8 @@
           </div>
 
           <div class="btns">
-            <Button type="primary" size="small" @click="applyPresetThemeToSingleSlide(item)">应用</Button>
-            <Button type="primary" size="small" style="margin-top: 3px;" @click="applyPresetThemeToAllSlides(item)">应用全局</Button>
+            <Button type="primary" size="small" @click="applyPresetTheme(item)">应用</Button>
+            <Button type="primary" size="small" style="margin-top: 3px;" @click="applyPresetTheme(item, true)">应用全局</Button>
           </div>
         </div>
       </div>
@@ -299,6 +291,14 @@
   >
     <ThemeStylesExtract @close="themeStylesExtractVisible = false" />
   </Modal>
+
+  <Modal
+    v-model:visible="themeColorsSettingVisible" 
+    :width="310"
+    @closed="themeColorsSettingVisible = false"
+  >
+    <ThemeColorsSetting @close="themeColorsSettingVisible = false" />
+  </Modal>
 </template>
 
 <script lang="ts" setup>
@@ -322,8 +322,10 @@ import useSlideTheme from '@/hooks/useSlideTheme'
 import { getImageDataURL } from '@/utils/image'
 
 import ThemeStylesExtract from './ThemeStylesExtract.vue'
-import SVGLine from './common/SVGLine.vue'
+import ThemeColorsSetting from './ThemeColorsSetting.vue'
+import SVGLine from '../common/SVGLine.vue'
 import ColorButton from '@/components/ColorButton.vue'
+import ColorListButton from '@/components/ColorListButton.vue'
 import FileInput from '@/components/FileInput.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Divider from '@/components/Divider.vue'
@@ -341,6 +343,7 @@ const { slides, currentSlide, slideIndex, viewportRatio, viewportSize, theme } =
 
 const moreThemeConfigsVisible = ref(false)
 const themeStylesExtractVisible = ref(false)
+const themeColorsSettingVisible = ref(false)
 const currentGradientIndex = ref(0)
 const lineStyleOptions = ref<LineStyleType[]>(['solid', 'dashed', 'dotted'])
 
@@ -356,8 +359,7 @@ const background = computed(() => {
 
 const { addHistorySnapshot } = useHistorySnapshot()
 const {
-  applyPresetThemeToSingleSlide,
-  applyPresetThemeToAllSlides,
+  applyPresetTheme,
   applyThemeToAllSlides,
 } = useSlideTheme()
 

src/views/Editor/Toolbar/index.vue

@@ -21,7 +21,7 @@ import { ToolbarStates } from '@/types/toolbar'
 import ElementStylePanel from './ElementStylePanel/index.vue'
 import ElementPositionPanel from './ElementPositionPanel.vue'
 import ElementAnimationPanel from './ElementAnimationPanel.vue'
-import SlideDesignPanel from './SlideDesignPanel.vue'
+import SlideDesignPanel from './SlideDesignPanel/index.vue'
 import SlideAnimationPanel from './SlideAnimationPanel.vue'
 import MultiPositionPanel from './MultiPositionPanel.vue'
 import MultiStylePanel from './MultiStylePanel.vue'