mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
133 lines
3.1 KiB
Vue
133 lines
3.1 KiB
Vue
<template>
|
||
<div class="export-pptist-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="tip">
|
||
提示：.pptist 是本应用的特有文件后缀，支持将该类型的文件导入回应用中。
|
||
</div>
|
||
</div>
|
||
<div class="btns">
|
||
<Button class="btn export" type="primary" @click="exportSpecificFile(selectedSlides)">导出 .pptist 文件</Button>
|
||
<Button class="btn close" @click="emit('close')">关闭</Button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { computed, ref } from 'vue'
|
||
import { storeToRefs } from 'pinia'
|
||
import { useSlidesStore } from '@/store'
|
||
import useExport from '@/hooks/useExport'
|
||
|
||
import {
|
||
Button,
|
||
Slider,
|
||
Radio,
|
||
} from 'ant-design-vue'
|
||
const { Group: RadioGroup, Button: RadioButton } = Radio
|
||
|
||
const emit = defineEmits<{
|
||
(event: 'close'): void
|
||
}>()
|
||
|
||
const { slides, currentSlide } = storeToRefs(useSlidesStore())
|
||
|
||
const { exportSpecificFile } = useExport()
|
||
|
||
const rangeType = ref<'all' | 'current' | 'custom'>('all')
|
||
const range = ref<[number, number]>([1, slides.value.length])
|
||
|
||
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
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.export-pptist-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;
|
||
line-height: 1;
|
||
|
||
&::after {
|
||
content: attr(data-range);
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 0;
|
||
}
|
||
}
|
||
.config-item {
|
||
flex: 1;
|
||
}
|
||
|
||
.tip {
|
||
font-size: 12px;
|
||
color: #aaa;
|
||
line-height: 1.8;
|
||
margin-top: 25px;
|
||
}
|
||
}
|
||
.btns {
|
||
width: 300px;
|
||
height: 100px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.export {
|
||
flex: 1;
|
||
}
|
||
.close {
|
||
width: 100px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
</style> |