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

refactor: 暂时移除图片导出(#28)

Browse Source
This commit is contained in:
pipipi-pikachu 2021-05-18 21:25:39 +08:00
parent d273594e1a
commit 7fd9e01b5b
3 changed files with 9 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -18,7 +18,6 @@
"crypto-js": "^4.0.0",
"dexie": "^3.0.3",
"file-saver": "^2.0.5",
"html-to-image": "^1.6.0",
"lodash": "^4.17.20",
"mitt": "^2.1.0",
"prosemirror-commands": "^1.1.7",

168
src/views/Editor/EditorHeader/ExportDialog.vue
View File

@ -1,110 +1,35 @@
<template>
<div class="export-dialog">
<div class="tabs">
<div
class="tab"
:class="{ 'active': tab.value === currentTab }"
v-for="tab in tabs"
:key="tab.value"
@click="currentTab = tab.value"
>{{tab.label}}</div>
<div class="preview">
<pre>{{slides}}</pre>
</div>
<div class="content json" v-if="currentTab === 'json'">
<div class="json-preview">
<pre>{{slides}}</pre>
</div>
<div class="json-configs">
<Button class="btn" type="primary" @click="exportJSON()">导出 JSON 文件</Button>
<Button class="btn" @click="emit('close')">关闭</Button>
</div>
</div>
<div class="content image" v-if="currentTab === 'image'">
<div class="thumbnails-view">
<div class="thumbnails" ref="imageThumbnailsRef">
<ThumbnailSlide
class="thumbnail"
v-for="slide in slides"
:key="slide.id"
:slide="slide"
:size="1600"
/>
</div>
</div>
<div class="configs">
<Button class="btn" type="primary" @click="exportImage('png')">导出 PNG 图片</Button>
<Button class="btn" type="primary" @click="exportImage('jpeg')">导出 JPEG 图片</Button>
<Button class="btn" @click="emit('close')">关闭</Button>
</div>
<div class="spinning" v-if="spinning">
<Spin />
<div class="tip">正在导出，请稍等...</div>
</div>
<div class="handle">
<Button class="btn" type="primary" @click="exportJSON()">导出</Button>
<Button class="btn" @click="emit('close')">关闭</Button>
</div>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { computed, defineComponent } from 'vue'
import { useStore } from '@/store'
import { saveAs } from 'file-saver'
import { toPng, toJpeg } from 'html-to-image'
import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
import { message } from 'ant-design-vue'
export default defineComponent({
name: 'export-dialog',
components: {
ThumbnailSlide,
},
setup(props, { emit }) {
const store = useStore()
const slides = computed(() => store.state.slides)
const tabs = ref([
{ label: 'JSON', value: 'json' },
{ label: '图片', value: 'image' },
])
const currentTab = ref('json')
const spinning = ref(false)
const exportJSON = () => {
const blob = new Blob([JSON.stringify(slides.value)], { type: '' })
saveAs(blob, 'pptist_slides.json')
}
const imageThumbnailsRef = ref<HTMLElement>()
const exportImage = (type: string) => {
spinning.value = true
const toImage = type === 'png' ? toPng : toJpeg
setTimeout(() => {
if (!imageThumbnailsRef.value) return
toImage(imageThumbnailsRef.value, {
quality: 0.95,
width: 1600,
}).then(dataUrl => {
spinning.value = false
saveAs(dataUrl, `pptist_slides.${type}`)
}).catch(() => {
spinning.value = false
message.error('导出图片失败')
})
}, 200)
}
return {
tabs,
currentTab,
spinning,
slides,
exportJSON,
exportImage,
imageThumbnailsRef,
emit,
}
},
@ -114,40 +39,11 @@ export default defineComponent({
<style lang="scss" scoped>
.export-dialog {
height: 500px;
}
.tabs {
height: 40px;
font-size: 12px;
display: flex;
margin: -24px -24px 20px -24px;
}
.tab {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: $lightGray;
border-bottom: 1px solid $borderColor;
cursor: pointer;
&.active {
background-color: #fff;
border-bottom-color: #fff;
}
& + .tab {
border-left: 1px solid $borderColor;
}
}
.content {
height: calc(100% - 60px);
display: flex;
justify-content: center;
position: relative;
overflow: hidden;
}
.json-preview {
.preview {
width: 460px;
height: 100%;
overflow: auto;
@ -160,7 +56,7 @@ export default defineComponent({
height: 100%;
}
}
.json-configs {
.handle {
flex: 1;
.btn {
@ -168,52 +64,4 @@ export default defineComponent({
margin-bottom: 10px;
}
}
.thumbnails-view {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
}
}
.configs {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.btn {
width: 240px;
margin-bottom: 12px;
}
}
.spinning {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
.tip {
margin-top: 10px;
color: $themeColor;
}
}
</style>

4
src/views/Editor/EditorHeader/index.vue
View File

@ -11,7 +11,7 @@
<MenuItem @click="deleteSlide()">删除页面</MenuItem>
<MenuItem @click="toggleGridLines()">{{ showGridLines ? '关闭网格线' : '打开网格线' }}</MenuItem>
<MenuItem @click="resetSlides()">重置幻灯片</MenuItem>
<MenuItem @click="exportDialogVisible = true">导出为</MenuItem>
<MenuItem @click="exportDialogVisible = true">导出 JSON</MenuItem>
</Menu>
</template>
</Dropdown>
@ -77,8 +77,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import HotkeyDoc from './HotkeyDoc.vue'
import ExportDialog from './ExportDialog.vue'
import { message } from 'ant-design-vue'
export default defineComponent({
name: 'editor-header',
components: {