|
|
@@ -0,0 +1,183 @@
|
|
|
+<template>
|
|
|
+ <div class="pptist-editor">
|
|
|
+ <EditorHeader class="layout-header" />
|
|
|
+ <div class="layout-content">
|
|
|
+ <CollapsibleToolbar class="layout-sidebar" @toggle="handleToolbarToggle" />
|
|
|
+ <div class="layout-content-center">
|
|
|
+ <CanvasTool class="center-top" />
|
|
|
+ <Canvas class="center-body" :style="{ height: `calc(100% - ${remarkHeight + 40}px - 120px)` }" :courseid="props.courseid"/>
|
|
|
+ <!-- <Remark
|
|
|
+ class="center-bottom"
|
|
|
+ v-model:height="remarkHeight"
|
|
|
+ :style="{ height: `${remarkHeight}px` }"
|
|
|
+ v-show="false"
|
|
|
+ /> -->
|
|
|
+ <Thumbnails class="layout-content-left" />
|
|
|
+ </div>
|
|
|
+ <Toolbar class="layout-content-right" v-show="false"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <SelectPanel v-if="showSelectPanel" />
|
|
|
+ <SearchPanel v-if="showSearchPanel" />
|
|
|
+ <NotesPanel v-if="showNotesPanel" />
|
|
|
+ <MarkupPanel v-if="showMarkupPanel" />
|
|
|
+
|
|
|
+ <Modal
|
|
|
+ :visible="!!dialogForExport"
|
|
|
+ :width="680"
|
|
|
+ @closed="closeExportDialog()"
|
|
|
+ >
|
|
|
+ <ExportDialog />
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ <Modal
|
|
|
+ :visible="showAIPPTDialog"
|
|
|
+ :width="720"
|
|
|
+ :closeOnClickMask="false"
|
|
|
+ :closeOnEsc="false"
|
|
|
+ closeButton
|
|
|
+ @closed="closeAIPPTDialog()"
|
|
|
+ >
|
|
|
+ <AIPPTDialog />
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ <Modal
|
|
|
+ class="createCourseDialog"
|
|
|
+ :visible="showCreateCourseDialog"
|
|
|
+ :closeOnClickMask="false"
|
|
|
+ :closeOnEsc="false"
|
|
|
+ :closeButton="false"
|
|
|
+ @closed="closeCreateCourseDialog()"
|
|
|
+ >
|
|
|
+ <CreateCourseDialog @close="closeCreateCourseDialog" @select="handleCreateCourseSelect" />
|
|
|
+ </Modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, computed, onMounted } from 'vue'
|
|
|
+import { storeToRefs } from 'pinia'
|
|
|
+import { useMainStore } from '@/store'
|
|
|
+import useGlobalHotkey from '@/hooks/useGlobalHotkey'
|
|
|
+import usePasteEvent from '@/hooks/usePasteEvent'
|
|
|
+
|
|
|
+import EditorHeader from './EditorHeader/index.vue'
|
|
|
+import Canvas from './Canvas/index.vue'
|
|
|
+import CanvasTool from './CanvasTool/index.vue'
|
|
|
+import Thumbnails from './Thumbnails/index2.vue'
|
|
|
+import Toolbar from './Toolbar/index.vue'
|
|
|
+import Remark from './Remark/index.vue'
|
|
|
+import ExportDialog from './ExportDialog/index.vue'
|
|
|
+import SelectPanel from './SelectPanel.vue'
|
|
|
+import SearchPanel from './SearchPanel.vue'
|
|
|
+import NotesPanel from './NotesPanel.vue'
|
|
|
+import MarkupPanel from './MarkupPanel.vue'
|
|
|
+import AIPPTDialog from './AIPPTDialog.vue'
|
|
|
+import Modal from '@/components/Modal.vue'
|
|
|
+import CollapsibleToolbar from '@/components/CollapsibleToolbar/index.vue'
|
|
|
+import CreateCourseDialog from '@/components/CreateCourseDialog.vue'
|
|
|
+
|
|
|
+interface Props {
|
|
|
+ courseid?: string | null
|
|
|
+}
|
|
|
+
|
|
|
+const props = withDefaults(defineProps<Props>(), {
|
|
|
+ courseid: null,
|
|
|
+})
|
|
|
+
|
|
|
+const mainStore = useMainStore()
|
|
|
+const { dialogForExport, showSelectPanel, showSearchPanel, showNotesPanel, showMarkupPanel, showAIPPTDialog } = storeToRefs(mainStore)
|
|
|
+const closeExportDialog = () => mainStore.setDialogForExport('')
|
|
|
+const closeAIPPTDialog = () => mainStore.setAIPPTDialogState(false)
|
|
|
+
|
|
|
+const remarkHeight = ref(0)
|
|
|
+const sidebarCollapsed = ref(false)
|
|
|
+const showCreateCourseDialog = ref(false)
|
|
|
+
|
|
|
+const handleToolbarToggle = (collapsed: boolean) => {
|
|
|
+ sidebarCollapsed.value = collapsed
|
|
|
+}
|
|
|
+
|
|
|
+const closeCreateCourseDialog = () => {
|
|
|
+ showCreateCourseDialog.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const handleCreateCourseSelect = (option: string) => {
|
|
|
+ console.log('Selected option:', option)
|
|
|
+ // 这里可以添加不同选项的处理逻辑
|
|
|
+ if (option === 'upload') {
|
|
|
+ // 触发文件上传
|
|
|
+ const fileInput = document.createElement('input')
|
|
|
+ fileInput.type = 'file'
|
|
|
+ fileInput.accept = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
|
|
|
+ fileInput.click()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ if (!props.courseid) {
|
|
|
+ showCreateCourseDialog.value = true
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+useGlobalHotkey()
|
|
|
+usePasteEvent()
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.pptist-editor {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.layout-header {
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+.layout-content {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.layout-sidebar {
|
|
|
+ // width: 200px;
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ transition: width 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.layout-sidebar.collapsed {
|
|
|
+ width: 48px;
|
|
|
+}
|
|
|
+
|
|
|
+.layout-content-left {
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.layout-content-center {
|
|
|
+ flex: 1;
|
|
|
+ transition: width 0.3s ease;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.layout-content-center .center-top {
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.layout-content-right {
|
|
|
+ width: 260px;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.createCourseDialog{
|
|
|
+ background: #78797b;
|
|
|
+
|
|
|
+ .modal-content{
|
|
|
+ width: auto !important;
|
|
|
+ min-width: 800px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
