perf: 简化页面模板

src/App.vue

@@ -44,17 +44,11 @@ onMounted(async () => {
     api.getMockData('slides').then((slides: Slide[]) => {
       slidesStore.setSlides(slides)
     })
-    api.getMockData('layouts').then((slides: Slide[]) => {
-      slidesStore.setLayouts(slides)
-    })
   }
   else {
     api.getFileData('slides').then((slides: Slide[]) => {
       slidesStore.setSlides(slides)
     })
-    api.getFileData('layouts').then((slides: Slide[]) => {
-      slidesStore.setLayouts(slides)
-    })
   }
 
   await deleteDiscardedDB()

src/store/slides.ts

@@ -1,7 +1,6 @@
 import { defineStore } from 'pinia'
-import tinycolor from 'tinycolor2'
 import { omit } from 'lodash'
-import type { Slide, SlideTheme, PPTElement, PPTAnimation } from '@/types/slides'
+import type { Slide, SlideTheme, PPTElement, PPTAnimation, SlideTemplate } from '@/types/slides'
 
 interface RemovePropData {
   id: string
@@ -26,7 +25,7 @@ export interface SlidesState {
   slideIndex: number
   viewportSize: number
   viewportRatio: number
-  _layouts: Slide[]
+  templates: SlideTemplate[]
 }
 
 export const useSlidesStore = defineStore('slides', {
@@ -53,7 +52,10 @@ export const useSlidesStore = defineStore('slides', {
     slideIndex: 0, // 当前页面索引
     viewportSize: 1000, // 可视区域宽度基数
     viewportRatio: 0.5625, // 可视区域比例，默认16:9
-    _layouts: [], // 布局模板
+    templates: [
+      { name: '红色通用模板', id: 'template_1', cover: 'https://asset.pptist.cn/img/template_1.jpg' },
+      { name: '蓝色通用模板', id: 'template_2', cover: 'https://asset.pptist.cn/img/template_2.jpg' },
+    ], // 模板
   }),
 
   getters: {
@@ -101,26 +103,6 @@ export const useSlidesStore = defineStore('slides', {
       }
       return formatedAnimations
     },
-
-    layouts(state) {
-      const {
-        themeColor,
-        fontColor,
-        fontName,
-        backgroundColor,
-      } = state.theme
-
-      const subColor = tinycolor(fontColor).isDark() ? 'rgba(230, 230, 230, 0.5)' : 'rgba(180, 180, 180, 0.5)'
-
-      const layoutsString = JSON.stringify(state._layouts)
-        .replace(/{{themeColor}}/g, themeColor)
-        .replace(/{{fontColor}}/g, fontColor)
-        .replace(/{{fontName}}/g, fontName)
-        .replace(/{{backgroundColor}}/g, backgroundColor)
-        .replace(/{{subColor}}/g, subColor)
-
-      return JSON.parse(layoutsString)
-    },
   },
 
   actions: {
@@ -145,8 +127,8 @@ export const useSlidesStore = defineStore('slides', {
       this.slides = slides
     },
 
-    setLayouts(layouts: Slide[]) {
-      this._layouts = layouts
+    setTemplates(templates: SlideTemplate[]) {
+      this.templates = templates
     },
 
     addSlide(slide: Slide | Slide[]) {

src/types/slides.ts

@@ -760,3 +760,9 @@ export interface SlideTheme {
   outline: PPTElementOutline
   shadow: PPTElementShadow
 }
+
+export interface SlideTemplate {
+  name: string
+  id: string
+  cover: string
+}

src/views/Editor/AIPPTDialog.vue

@@ -55,17 +55,19 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
 import api from '@/services'
 import useAIPPT from '@/hooks/useAIPPT'
 import type { AIPPTSlide } from '@/types/AIPPT'
 import type { Slide } from '@/types/slides'
 import message from '@/utils/message'
-import { useMainStore } from '@/store'
+import { useMainStore, useSlidesStore } from '@/store'
 import Input from '@/components/Input.vue'
 import Button from '@/components/Button.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 
 const mainStore = useMainStore()
+const { templates } = storeToRefs(useSlidesStore())
 const { AIPPT } = useAIPPT()
 
 const language = ref<'zh' | 'en'>('zh')
@@ -77,10 +79,7 @@ const outlineCreating = ref(false)
 const outlineRef = ref<HTMLElement>()
 const inputRef = ref<InstanceType<typeof Input>>()
 const step = ref<'setup' | 'outline' | 'template'>('setup')
-const templates = ref([
-  { name: '红色通用模板', id: 'template_1', cover: 'https://asset.pptist.cn/img/template_1.jpg' },
-  { name: '蓝色通用模板', id: 'template_2', cover: 'https://asset.pptist.cn/img/template_2.jpg' },
-])
+
 const recommends = ref([
   '大学生职业生涯规划',
   '公司年会策划方案',

src/views/Editor/Thumbnails/LayoutPool.vue → src/views/Editor/Thumbnails/Templates.vue

@@ -1,10 +1,16 @@
 <template>
-  <div class="layout-pool">
-    <div class="header">页面模板</div>
+  <div class="templates">
+    <div class="header">
+      <Tabs 
+        :tabs="tabs" 
+        v-model:value="activeTab"
+        card 
+      />
+    </div>
     <div class="list">
       <div 
-        class="layout-item"
-        v-for="slide in layouts" 
+        class="slide-item"
+        v-for="slide in slides" 
         :key="slide.id"
       >
         <ThumbnailSlide class="thumbnail" :slide="slide" :size="180" />
@@ -14,40 +20,64 @@
         </div>
       </div>
     </div>
-    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, onMounted, computed, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import type { Slide } from '@/types/slides'
+import api from '@/services'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import Button from '@/components/Button.vue'
+import Tabs from '@/components/Tabs.vue'
+
+interface TabItem {
+  key: string
+  label: string
+}
 
 const emit = defineEmits<{
   (event: 'select', payload: Slide): void
 }>()
 
 const slidesStore = useSlidesStore()
-const { layouts } = storeToRefs(slidesStore)
+const { templates } = storeToRefs(slidesStore)
+const slides = ref<Slide[]>([])
+
+const tabs = computed<TabItem[]>(() => {
+  return templates.value.map(item => ({
+    label: item.name,
+    key: item.id,
+  }))
+})
+const activeTab = ref('')
 
 const insertTemplate = (slide: Slide) => {
   emit('select', slide)
 }
+
+watch(activeTab, () => {
+  if (!activeTab.value) return
+  api.getFileData(activeTab.value).then(ret => {
+    slides.value = ret.slides
+  })
+})
+
+onMounted(() => {
+  activeTab.value = templates.value[0].id
+})
 </script>
 
 <style lang="scss" scoped>
-.layout-pool {
+.templates {
   width: 382px;
   height: 500px;
 }
 .header {
-  height: 40px;
   margin: -10px -10px 10px;
-  padding: 10px 12px 0;
-  background-color: $lightGray;
-  border-bottom: 1px solid $borderColor;
 }
 .list {
   height: calc(100% - 50px);
@@ -57,14 +87,10 @@ const insertTemplate = (slide: Slide) => {
   overflow: auto;
   @include flex-grid-layout();
 }
-.layout-item {
+.slide-item {
   position: relative;
   @include flex-grid-layout-children(2, 48%);
 
-  &:nth-last-child(2), &:last-child {
-    margin-bottom: 0;
-  }
-
   &:hover .btns {
     opacity: 1;
   }

src/views/Editor/Thumbnails/index.vue

@@ -9,7 +9,7 @@
       <div class="btn" @click="createSlide()"><IconPlus class="icon" />添加幻灯片</div>
       <Popover trigger="click" placement="bottom-start" v-model:value="presetLayoutPopoverVisible" center>
         <template #content>
-          <LayoutPool @select="slide => { createSlideByTemplate(slide); presetLayoutPopoverVisible = false }" />
+          <Templates @select="slide => { createSlideByTemplate(slide); presetLayoutPopoverVisible = false }" />
         </template>
         <div class="select-btn"><IconDown /></div>
       </Popover>
@@ -82,7 +82,7 @@ import useScreening from '@/hooks/useScreening'
 import useLoadSlides from '@/hooks/useLoadSlides'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
-import LayoutPool from './LayoutPool.vue'
+import Templates from './Templates.vue'
 import Popover from '@/components/Popover.vue'
 import Draggable from 'vuedraggable'
 

vite.config.ts

@@ -10,6 +10,8 @@ export default defineConfig({
     vue(),
   ],
   server: {
+    host: '127.0.0.1',
+    port: 5173,
     proxy: {
       '/api': {
         target: 'https://server.pptist.cn',