github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 页面模板UI优化

Browse Source
This commit is contained in:
zxc 2025-03-05 21:02:35 +08:00
parent 6b74cf13c8
commit fa2b17bb64
1 changed files with 48 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/Editor/Thumbnails/Templates.vue
View File

@ -1,13 +1,14 @@
<template> <template>
<div class="templates"> <div class="templates">
<div class="header"> <div class="catalogs">
<Tabs <div class="catalog"
:tabs="tabs" :class="{ 'active': activeCatalog === item.id }"
v-model:value="activeTab" v-for="item in templates"
card :key="item.id"
/> @click="changeCatalog(item.id)"
>{{ item.name }}</div>
</div> </div>
<div class="list"> <div class="list" ref="listRef">
<div <div
class="slide-item" class="slide-item"
v-for="slide in slides" v-for="slide in slides"
@ -24,7 +25,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue' import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { useSlidesStore } from '@/store' import { useSlidesStore } from '@/store'
import type { Slide } from '@/types/slides' import type { Slide } from '@/types/slides'
@ -32,12 +33,6 @@ import api from '@/services'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue' import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
import Button from '@/components/Button.vue' import Button from '@/components/Button.vue'
import Tabs from '@/components/Tabs.vue'
interface TabItem {
key: string
label: string
}
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'select', payload: Slide): void (event: 'select', payload: Slide): void
@ -46,41 +41,64 @@ const emit = defineEmits<{
const slidesStore = useSlidesStore() const slidesStore = useSlidesStore()
const { templates } = storeToRefs(slidesStore) const { templates } = storeToRefs(slidesStore)
const slides = ref<Slide[]>([]) const slides = ref<Slide[]>([])
const listRef = ref<HTMLElement>()
const tabs = computed<TabItem[]>(() => { const activeCatalog = ref('')
return templates.value.map(item => ({
label: item.name,
key: item.id,
}))
})
const activeTab = ref('')
const insertTemplate = (slide: Slide) => { const insertTemplate = (slide: Slide) => {
emit('select', slide) emit('select', slide)
} }
watch(activeTab, () => { const changeCatalog = (id: string) => {
if (!activeTab.value) return activeCatalog.value = id
api.getFileData(activeTab.value).then(ret => { api.getFileData(activeCatalog.value).then(ret => {
slides.value = ret.slides slides.value = ret.slides
if (listRef.value) listRef.value.scrollTo(0, 0)
}) })
}) }
onMounted(() => { onMounted(() => {
activeTab.value = templates.value[0].id changeCatalog(templates.value[0].id)
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.templates { .templates {
width: 382px; width: 500px;
height: 500px; height: 500px;
display: flex;
} }
.header { .catalogs {
margin: -10px -10px 10px; width: 108px;
margin-right: 10px;
padding-right: 10px;
border-right: 1px solid $borderColor;
overflow: auto;
.catalog {
padding: 7px 8px;
border-radius: $borderRadius;
cursor: pointer;
&:hover {
background-color: #f5f5f5;
}
&.active {
color: $themeColor;
background-color: rgba($color: $themeColor, $alpha: .05);
border-right: 2px solid $themeColor;
font-weight: 700;
}
& + .catalog {
margin-top: 3px;
}
}
} }
.list { .list {
height: calc(100% - 50px); width: 392px;
padding: 2px; padding: 2px;
margin-right: -10px; margin-right: -10px;
padding-right: 10px; padding-right: 10px;