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: UI调整

Browse Source
This commit is contained in:
pipipi-pikachu 2022-11-06 15:26:43 +08:00
parent 880760e3c5
commit 5837e6f901
3 changed files with 43 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/FullscreenSpin.vue
View File

@ -1,10 +1,13 @@
<template> <template>
<div class="fullscreen-spin" v-if="loading"><Spin :tip="tip" size="large" /></div> <div class="fullscreen-spin" v-if="loading">
<div class="spin">
<div class="spinner"></div>
<div class="text">{{tip}}</div>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Spin } from 'ant-design-vue'
defineProps({ defineProps({
loading: { loading: {
type: Boolean, type: Boolean,
@ -30,4 +33,37 @@ defineProps({
align-items: center; align-items: center;
background-color: rgba($color: #f1f1f1, $alpha: .7); background-color: rgba($color: #f1f1f1, $alpha: .7);
} }
.spin {
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.spinner {
width: 36px;
height: 36px;
border: 3px solid #d14424;
border-top-color: transparent;
border-radius: 50%;
animation: spinner .8s linear infinite;
}
.text {
margin-top: 20px;
color: #d14424;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style> </style>

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

@ -8,11 +8,7 @@
<FileInput accept=".pptist" @change="files => importSpecificFile(files)"> <FileInput accept=".pptist" @change="files => importSpecificFile(files)">
<MenuItem>导入 pptist 文件</MenuItem> <MenuItem>导入 pptist 文件</MenuItem>
</FileInput> </FileInput>
<MenuItem @click="setDialogForExport('pptist')">导出 pptist 文件</MenuItem> <MenuItem @click="setDialogForExport('pptx')">导出文件</MenuItem>
<MenuItem @click="setDialogForExport('pptx')">导出 PPTX</MenuItem>
<MenuItem @click="setDialogForExport('image')">导出图片</MenuItem>
<MenuItem @click="setDialogForExport('json')">导出 JSON</MenuItem>
<MenuItem @click="setDialogForExport('pdf')">打印 / 导出 PDF</MenuItem>
</Menu> </Menu>
</template> </template>
</Dropdown> </Dropdown>

6
src/views/Editor/Toolbar/SlideDesignPanel.vue
View File

@ -101,9 +101,9 @@
<div style="flex: 2;">画布尺寸：</div> <div style="flex: 2;">画布尺寸：</div>
<Select style="flex: 3;" :value="viewportRatio" @change="value => updateViewportRatio(value as number)"> <Select style="flex: 3;" :value="viewportRatio" @change="value => updateViewportRatio(value as number)">
<SelectOption :value="0.5625">宽屏 16 : 9</SelectOption> <SelectOption :value="0.5625">宽屏 16 : 9</SelectOption>
<SelectOption :value="0.625">宽屏 16 ：10</SelectOption> <SelectOption :value="0.625">宽屏 16 : 10</SelectOption>
<SelectOption :value="0.75">标准 4 ：3</SelectOption> <SelectOption :value="0.75">标准 4 : 3</SelectOption>
<SelectOption :value="0.70710678">A3 / A4</SelectOption> <SelectOption :value="0.70710678">纸张 A3 / A4</SelectOption>
</Select> </Select>
</div> </div>