mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
126 lines
3.0 KiB
Vue
126 lines
3.0 KiB
Vue
<template>
|
||
<div class="export-pptx-dialog">
|
||
<div class="configs">
|
||
<div class="row">
|
||
<div class="title">导出范围：</div>
|
||
<RadioGroup
|
||
class="config-item"
|
||
v-model:value="rangeType"
|
||
>
|
||
<RadioButton style="width: 33.33%;" value="all">全部</RadioButton>
|
||
<RadioButton style="width: 33.33%;" value="current">当前页</RadioButton>
|
||
<RadioButton style="width: 33.33%;" value="custom">自定义</RadioButton>
|
||
</RadioGroup>
|
||
</div>
|
||
<div class="row" v-if="rangeType === 'custom'">
|
||
<div class="title" :data-range="`（${range[0]} ~ ${range[1]}）`">自定义范围：</div>
|
||
<Slider
|
||
class="config-item"
|
||
range
|
||
:min="1"
|
||
:max="slides.length"
|
||
:step="1"
|
||
v-model:value="range"
|
||
/>
|
||
</div>
|
||
<div class="row">
|
||
<div class="title">覆盖默认母版：</div>
|
||
<div class="config-item">
|
||
<Switch v-model:checked="masterOverwrite" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btns">
|
||
<Button class="btn export" type="primary" @click="exportPPTX(selectedSlides, masterOverwrite)">导出 PPTX</Button>
|
||
<Button class="btn close" @click="close()">关闭</Button>
|
||
</div>
|
||
|
||
<FullscreenSpin :loading="exporting" tip="正在导出..." />
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { computed, ref } from 'vue'
|
||
import { storeToRefs } from 'pinia'
|
||
import { useSlidesStore } from '@/store'
|
||
import useExport from '@/hooks/useExport'
|
||
|
||
const emit = defineEmits<{
|
||
(event: 'close'): void
|
||
}>()
|
||
|
||
const { slides, currentSlide } = storeToRefs(useSlidesStore())
|
||
|
||
const { exportPPTX, exporting } = useExport()
|
||
|
||
const rangeType = ref<'all' | 'current' | 'custom'>('all')
|
||
const range = ref<[number, number]>([1, slides.value.length])
|
||
const masterOverwrite = ref(true)
|
||
|
||
const selectedSlides = computed(() => {
|
||
if (rangeType.value === 'all') return slides.value
|
||
if (rangeType.value === 'current') return [currentSlide.value]
|
||
return slides.value.filter((item, index) => {
|
||
const [min, max] = range.value
|
||
return index >= min - 1 && index <= max - 1
|
||
})
|
||
})
|
||
|
||
const close = () => emit('close')
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.export-pptx-dialog {
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.configs {
|
||
width: 350px;
|
||
height: calc(100% - 100px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.row {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.title {
|
||
width: 100px;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: attr(data-range);
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 0;
|
||
}
|
||
}
|
||
.config-item {
|
||
flex: 1;
|
||
}
|
||
}
|
||
.btns {
|
||
width: 300px;
|
||
height: 100px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.export {
|
||
flex: 1;
|
||
}
|
||
.close {
|
||
width: 100px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
</style> |