From 296aa4c1713709f7dde5aa0e9164c9e9275e14a3 Mon Sep 17 00:00:00 2001
From: zxc <1171051090@qq.com>
Date: Fri, 14 Mar 2025 20:59:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=9A=E4=B8=BB=E9=A2=98=E8=89=B2?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorListButton.vue            | 52 ++++++++++++
 src/hooks/useImport.ts                        |  1 +
 src/hooks/useSlideTheme.ts                    | 33 +++-----
 .../SlideDesignPanel/ThemeColorsSetting.vue   | 81 +++++++++++++++++++
 .../ThemeStylesExtract.vue                    |  0
 .../index.vue}                                | 34 ++++----
 src/views/Editor/Toolbar/index.vue            |  2 +-
 7 files changed, 165 insertions(+), 38 deletions(-)
 create mode 100644 src/components/ColorListButton.vue
 create mode 100644 src/views/Editor/Toolbar/SlideDesignPanel/ThemeColorsSetting.vue
 rename src/views/Editor/Toolbar/{ => SlideDesignPanel}/ThemeStylesExtract.vue (100%)
 rename src/views/Editor/Toolbar/{SlideDesignPanel.vue => SlideDesignPanel/index.vue} (96%)

diff --git a/src/components/ColorListButton.vue b/src/components/ColorListButton.vue
new file mode 100644
index 00000000..a175f33d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/hooks/useImport.ts b/src/hooks/useImport.ts
index f248d9d1..df8f91d8 100644
--- a/src/hooks/useImport.ts
+++ b/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) {
diff --git a/src/hooks/useSlideTheme.ts b/src/hooks/useSlideTheme.ts
index 47ed4dce..9d7cacfa 100644
--- a/src/hooks/useSlideTheme.ts
+++ b/src/hooks/useSlideTheme.ts
@@ -292,31 +292,23 @@ 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,
     })
-    slidesStore.setSlides(newSlides)
-    addHistorySnapshot()
+
+    if (resetSlides) {
+      const newSlides: Slide[] = JSON.parse(JSON.stringify(slides.value))
+      for (const slide of newSlides) {
+        setSlideTheme(slide, theme)
+      }
+      slidesStore.setSlides(newSlides)
+      addHistorySnapshot()
+    }
   }
   
   // 将当前主题配置应用到全部页面
@@ -373,8 +365,7 @@ export default () => {
 
   return {
     getSlidesThemeStyles,
-    applyPresetThemeToSingleSlide,
-    applyPresetThemeToAllSlides,
+    applyPresetTheme,
     applyThemeToAllSlides,
   }
 }
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/SlideDesignPanel/ThemeColorsSetting.vue b/src/views/Editor/Toolbar/SlideDesignPanel/ThemeColorsSetting.vue
new file mode 100644
index 00000000..b4d332d9
--- /dev/null
+++ b/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>
diff --git a/src/views/Editor/Toolbar/ThemeStylesExtract.vue b/src/views/Editor/Toolbar/SlideDesignPanel/ThemeStylesExtract.vue
similarity index 100%
rename from src/views/Editor/Toolbar/ThemeStylesExtract.vue
rename to src/views/Editor/Toolbar/SlideDesignPanel/ThemeStylesExtract.vue
diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel/index.vue
similarity index 96%
rename from src/views/Editor/Toolbar/SlideDesignPanel.vue
rename to src/views/Editor/Toolbar/SlideDesignPanel/index.vue
index 4eabd959..6c3dc6d6 100644
--- a/src/views/Editor/Toolbar/SlideDesignPanel.vue
+++ b/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()
 
diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue
index 77f6af81..2a6eb74a 100644
--- a/src/views/Editor/Toolbar/index.vue
+++ b/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'