Upload 168 files

frontend/src/views/Editor/Canvas/Operate/ImageElementOperate.vue

@@ -1,67 +1,67 @@
-<template>
-  <div class="image-element-operate" :class="{ 'cliping': isCliping }">
-    <BorderLine 
-      class="operate-border-line"
-      v-for="line in borderLines" 
-      :key="line.type" 
-      :type="line.type" 
-      :style="line.style"
-    />
-    <template v-if="handlerVisible">
-      <ResizeHandler
-        class="operate-resize-handler" 
-        v-for="point in resizeHandlers"
-        :key="point.direction"
-        :type="point.direction"
-        :rotate="elementInfo.rotate"
-        :style="point.style"
-        @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
-      />
-      <RotateHandler
-        class="operate-rotate-handler" 
-        :style="{ left: scaleWidth / 2 + 'px' }"
-        @mousedown.stop="$event => rotateElement($event, elementInfo)"
-      />
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useMainStore } from '@/store'
-import type { PPTImageElement } from '@/types/slides'
-import type { OperateResizeHandlers } from '@/types/edit'
-import useCommonOperate from '../hooks/useCommonOperate'
-
-import RotateHandler from './RotateHandler.vue'
-import ResizeHandler from './ResizeHandler.vue'
-import BorderLine from './BorderLine.vue'
-
-const props = defineProps<{
-  elementInfo: PPTImageElement
-  handlerVisible: boolean
-  rotateElement: (e: MouseEvent, element: PPTImageElement) => void
-  scaleElement: (e: MouseEvent, element: PPTImageElement, command: OperateResizeHandlers) => void
-}>()
-
-const { canvasScale, clipingImageElementId } = storeToRefs(useMainStore())
-
-const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)
-
-const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
-const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
-const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
-</script>
-
-<style lang="scss" scoped>
-.image-element-operate.cliping {
-  visibility: hidden;
-}
+<template>
+  <div class="image-element-operate" :class="{ 'cliping': isCliping }">
+    <BorderLine 
+      class="operate-border-line"
+      v-for="line in borderLines" 
+      :key="line.type" 
+      :type="line.type" 
+      :style="line.style"
+    />
+    <template v-if="handlerVisible">
+      <ResizeHandler
+        class="operate-resize-handler" 
+        v-for="point in resizeHandlers"
+        :key="point.direction"
+        :type="point.direction"
+        :rotate="elementInfo.rotate"
+        :style="point.style"
+        @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
+      />
+      <RotateHandler
+        class="operate-rotate-handler" 
+        :style="{ left: scaleWidth / 2 + 'px' }"
+        @mousedown.stop="$event => rotateElement($event, elementInfo)"
+      />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore } from '@/store'
+import type { PPTImageElement } from '@/types/slides'
+import type { OperateResizeHandlers } from '@/types/edit'
+import useCommonOperate from '../hooks/useCommonOperate'
+
+import RotateHandler from './RotateHandler.vue'
+import ResizeHandler from './ResizeHandler.vue'
+import BorderLine from './BorderLine.vue'
+
+const props = defineProps<{
+  elementInfo: PPTImageElement
+  handlerVisible: boolean
+  rotateElement: (e: MouseEvent, element: PPTImageElement) => void
+  scaleElement: (e: MouseEvent, element: PPTImageElement, command: OperateResizeHandlers) => void
+}>()
+
+const { canvasScale, clipingImageElementId } = storeToRefs(useMainStore())
+
+const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)
+
+const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
+const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
+const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
+</script>
+
+<style lang="scss" scoped>
+.image-element-operate.cliping {
+  visibility: hidden;
+}
 </style>

frontend/src/views/Editor/Canvas/Operate/TextElementOperate.vue

@@ -1,61 +1,61 @@
-<template>
-  <div class="text-element-operate">
-    <BorderLine 
-      class="operate-border-line"
-      v-for="line in borderLines" 
-      :key="line.type" 
-      :type="line.type" 
-      :style="line.style"
-    />
-    <template v-if="handlerVisible">
-      <ResizeHandler
-        class="operate-resize-handler" 
-        v-for="point in resizeHandlers"
-        :key="point.direction"
-        :type="point.direction"
-        :rotate="elementInfo.rotate"
-        :style="point.style"
-        @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
-      />
-      <RotateHandler
-        class="operate-rotate-handler" 
-        :style="{ left: scaleWidth / 2 + 'px' }"
-        @mousedown.stop="$event => rotateElement($event, elementInfo)"
-      />
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useMainStore } from '@/store'
-import type { PPTTextElement } from '@/types/slides'
-import type { OperateResizeHandlers } from '@/types/edit'
-import useCommonOperate from '../hooks/useCommonOperate'
-
-import RotateHandler from './RotateHandler.vue'
-import ResizeHandler from './ResizeHandler.vue'
-import BorderLine from './BorderLine.vue'
-
-const props = defineProps<{
-  elementInfo: PPTTextElement
-  handlerVisible: boolean
-  rotateElement: (e: MouseEvent, element: PPTTextElement) => void
-  scaleElement: (e: MouseEvent, element: PPTTextElement, command: OperateResizeHandlers) => void
-}>()
-
-const { canvasScale } = storeToRefs(useMainStore())
-
-const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
-const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
-
-const { textElementResizeHandlers, verticalTextElementResizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
-const resizeHandlers = computed(() => props.elementInfo.vertical ? verticalTextElementResizeHandlers.value : textElementResizeHandlers.value)
+<template>
+  <div class="text-element-operate">
+    <BorderLine 
+      class="operate-border-line"
+      v-for="line in borderLines" 
+      :key="line.type" 
+      :type="line.type" 
+      :style="line.style"
+    />
+    <template v-if="handlerVisible">
+      <ResizeHandler
+        class="operate-resize-handler" 
+        v-for="point in resizeHandlers"
+        :key="point.direction"
+        :type="point.direction"
+        :rotate="elementInfo.rotate"
+        :style="point.style"
+        @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
+      />
+      <RotateHandler
+        class="operate-rotate-handler" 
+        :style="{ left: scaleWidth / 2 + 'px' }"
+        @mousedown.stop="$event => rotateElement($event, elementInfo)"
+      />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore } from '@/store'
+import type { PPTTextElement } from '@/types/slides'
+import type { OperateResizeHandlers } from '@/types/edit'
+import useCommonOperate from '../hooks/useCommonOperate'
+
+import RotateHandler from './RotateHandler.vue'
+import ResizeHandler from './ResizeHandler.vue'
+import BorderLine from './BorderLine.vue'
+
+const props = defineProps<{
+  elementInfo: PPTTextElement
+  handlerVisible: boolean
+  rotateElement: (e: MouseEvent, element: PPTTextElement) => void
+  scaleElement: (e: MouseEvent, element: PPTTextElement, command: OperateResizeHandlers) => void
+}>()
+
+const { canvasScale } = storeToRefs(useMainStore())
+
+const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
+const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
+
+const { textElementResizeHandlers, verticalTextElementResizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
+const resizeHandlers = computed(() => props.elementInfo.vertical ? verticalTextElementResizeHandlers.value : textElementResizeHandlers.value)
 </script>

frontend/src/views/Editor/Canvas/Operate/index.vue

@@ -1,138 +1,138 @@
-<template>
-  <div
-    class="operate"
-    :class="{ 'multi-select': isMultiSelect && !isActive }"
-    :style="{
-      top: elementInfo.top * canvasScale + 'px',
-      left: elementInfo.left * canvasScale + 'px',
-      transform: `rotate(${rotate}deg)`,
-      transformOrigin: `${elementInfo.width * canvasScale / 2}px ${height * canvasScale / 2}px`,
-    }"
-  >
-    <component
-      v-if="isSelected"
-      :is="currentOperateComponent"
-      :elementInfo="elementInfo"
-      :handlerVisible="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)"
-      :rotateElement="rotateElement"
-      :scaleElement="scaleElement"
-      :dragLineElement="dragLineElement"
-      :moveShapeKeypoint="moveShapeKeypoint"
-    ></component>
-
-    <div 
-      class="animation-index"
-      v-if="toolbarState === 'elAnimation' && elementIndexListInAnimation.length"
-    >
-      <div class="index-item" v-for="index in elementIndexListInAnimation" :key="index">{{index + 1}}</div>
-    </div>
-
-    <LinkHandler 
-      :elementInfo="elementInfo" 
-      :link="elementInfo.link"
-      :openLinkDialog="openLinkDialog" 
-      v-if="isActive && elementInfo.link" 
-      @mousedown.stop=""
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore } from '@/store'
-import {
-  ElementTypes,
-  type PPTElement,
-  type PPTLineElement,
-  type PPTVideoElement,
-  type PPTAudioElement,
-  type PPTShapeElement,
-  type PPTChartElement,
-} from '@/types/slides'
-import type { OperateLineHandlers, OperateResizeHandlers } from '@/types/edit'
-
-import ImageElementOperate from './ImageElementOperate.vue'
-import TextElementOperate from './TextElementOperate.vue'
-import ShapeElementOperate from './ShapeElementOperate.vue'
-import LineElementOperate from './LineElementOperate.vue'
-import TableElementOperate from './TableElementOperate.vue'
-import CommonElementOperate from './CommonElementOperate.vue'
-import LinkHandler from './LinkHandler.vue'
-
-const props = defineProps<{
-  elementInfo: PPTElement
-  isSelected: boolean
-  isActive: boolean
-  isActiveGroupElement: boolean
-  isMultiSelect: boolean
-  rotateElement: (e: MouseEvent, element: Exclude<PPTElement, PPTChartElement | PPTLineElement | PPTVideoElement | PPTAudioElement>) => void
-  scaleElement: (e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void
-  dragLineElement: (e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void
-  moveShapeKeypoint: (e: MouseEvent, element: PPTShapeElement, index: number) => void
-  openLinkDialog: () => void
-}>()
-
-const { canvasScale, toolbarState } = storeToRefs(useMainStore())
-const { formatedAnimations } = storeToRefs(useSlidesStore())
-
-const currentOperateComponent = computed<unknown>(() => {
-  const elementTypeMap = {
-    [ElementTypes.IMAGE]: ImageElementOperate,
-    [ElementTypes.TEXT]: TextElementOperate,
-    [ElementTypes.SHAPE]: ShapeElementOperate,
-    [ElementTypes.LINE]: LineElementOperate,
-    [ElementTypes.TABLE]: TableElementOperate,
-    [ElementTypes.CHART]: CommonElementOperate,
-    [ElementTypes.LATEX]: CommonElementOperate,
-    [ElementTypes.VIDEO]: CommonElementOperate,
-    [ElementTypes.AUDIO]: CommonElementOperate,
-  }
-  return elementTypeMap[props.elementInfo.type] || null
-})
-
-const elementIndexListInAnimation = computed(() => {
-  const indexList = []
-  for (let i = 0; i < formatedAnimations.value.length; i++) {
-    const elIds = formatedAnimations.value[i].animations.map(item => item.elId)
-    if (elIds.includes(props.elementInfo.id)) indexList.push(i)
-  }
-  return indexList
-})
-
-const rotate = computed(() => 'rotate' in props.elementInfo ? props.elementInfo.rotate : 0)
-const height = computed(() => 'height' in props.elementInfo ? props.elementInfo.height : 0)
-</script>
-
-<style lang="scss" scoped>
-.operate {
-  position: absolute;
-  z-index: 100;
-  user-select: none;
-
-  &.multi-select {
-    opacity: 0.2;
-  }
-}
-.animation-index {
-  position: absolute;
-  top: 0;
-  left: -24px;
-  font-size: 12px;
-
-  .index-item {
-    width: 18px;
-    height: 18px;
-    background-color: #fff;
-    color: $themeColor;
-    border: 1px solid $themeColor;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    & + .index-item {
-      margin-top: 5px;
-    }
-  }
-}
+<template>
+  <div
+    class="operate"
+    :class="{ 'multi-select': isMultiSelect && !isActive }"
+    :style="{
+      top: elementInfo.top * canvasScale + 'px',
+      left: elementInfo.left * canvasScale + 'px',
+      transform: `rotate(${rotate}deg)`,
+      transformOrigin: `${elementInfo.width * canvasScale / 2}px ${height * canvasScale / 2}px`,
+    }"
+  >
+    <component
+      v-if="isSelected"
+      :is="currentOperateComponent"
+      :elementInfo="elementInfo"
+      :handlerVisible="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)"
+      :rotateElement="rotateElement"
+      :scaleElement="scaleElement"
+      :dragLineElement="dragLineElement"
+      :moveShapeKeypoint="moveShapeKeypoint"
+    ></component>
+
+    <div 
+      class="animation-index"
+      v-if="toolbarState === 'elAnimation' && elementIndexListInAnimation.length"
+    >
+      <div class="index-item" v-for="index in elementIndexListInAnimation" :key="index">{{index + 1}}</div>
+    </div>
+
+    <LinkHandler 
+      :elementInfo="elementInfo" 
+      :link="elementInfo.link"
+      :openLinkDialog="openLinkDialog" 
+      v-if="isActive && elementInfo.link" 
+      @mousedown.stop=""
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import {
+  ElementTypes,
+  type PPTElement,
+  type PPTLineElement,
+  type PPTVideoElement,
+  type PPTAudioElement,
+  type PPTShapeElement,
+  type PPTChartElement,
+} from '@/types/slides'
+import type { OperateLineHandlers, OperateResizeHandlers } from '@/types/edit'
+
+import ImageElementOperate from './ImageElementOperate.vue'
+import TextElementOperate from './TextElementOperate.vue'
+import ShapeElementOperate from './ShapeElementOperate.vue'
+import LineElementOperate from './LineElementOperate.vue'
+import TableElementOperate from './TableElementOperate.vue'
+import CommonElementOperate from './CommonElementOperate.vue'
+import LinkHandler from './LinkHandler.vue'
+
+const props = defineProps<{
+  elementInfo: PPTElement
+  isSelected: boolean
+  isActive: boolean
+  isActiveGroupElement: boolean
+  isMultiSelect: boolean
+  rotateElement: (e: MouseEvent, element: Exclude<PPTElement, PPTChartElement | PPTLineElement | PPTVideoElement | PPTAudioElement>) => void
+  scaleElement: (e: MouseEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => void
+  dragLineElement: (e: MouseEvent, element: PPTLineElement, command: OperateLineHandlers) => void
+  moveShapeKeypoint: (e: MouseEvent, element: PPTShapeElement, index: number) => void
+  openLinkDialog: () => void
+}>()
+
+const { canvasScale, toolbarState } = storeToRefs(useMainStore())
+const { formatedAnimations } = storeToRefs(useSlidesStore())
+
+const currentOperateComponent = computed<unknown>(() => {
+  const elementTypeMap = {
+    [ElementTypes.IMAGE]: ImageElementOperate,
+    [ElementTypes.TEXT]: TextElementOperate,
+    [ElementTypes.SHAPE]: ShapeElementOperate,
+    [ElementTypes.LINE]: LineElementOperate,
+    [ElementTypes.TABLE]: TableElementOperate,
+    [ElementTypes.CHART]: CommonElementOperate,
+    [ElementTypes.LATEX]: CommonElementOperate,
+    [ElementTypes.VIDEO]: CommonElementOperate,
+    [ElementTypes.AUDIO]: CommonElementOperate,
+  }
+  return elementTypeMap[props.elementInfo.type] || null
+})
+
+const elementIndexListInAnimation = computed(() => {
+  const indexList = []
+  for (let i = 0; i < formatedAnimations.value.length; i++) {
+    const elIds = formatedAnimations.value[i].animations.map(item => item.elId)
+    if (elIds.includes(props.elementInfo.id)) indexList.push(i)
+  }
+  return indexList
+})
+
+const rotate = computed(() => 'rotate' in props.elementInfo ? props.elementInfo.rotate : 0)
+const height = computed(() => 'height' in props.elementInfo ? props.elementInfo.height : 0)
+</script>
+
+<style lang="scss" scoped>
+.operate {
+  position: absolute;
+  z-index: 100;
+  user-select: none;
+
+  &.multi-select {
+    opacity: 0.2;
+  }
+}
+.animation-index {
+  position: absolute;
+  top: 0;
+  left: -24px;
+  font-size: 12px;
+
+  .index-item {
+    width: 18px;
+    height: 18px;
+    background-color: #fff;
+    color: $themeColor;
+    border: 1px solid $themeColor;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    & + .index-item {
+      margin-top: 5px;
+    }
+  }
+}
 </style>

frontend/src/views/Editor/ExportDialog/ExportHTML.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="export-html-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>
+        <Switch class="config-item" v-model:value="includeInteractivity" />
+      </div>
+      <div class="row">
+        <div class="title">包含样式：</div>
+        <Switch class="config-item" v-model:value="includeCSS" />
+      </div>
+      <div class="row">
+        <div class="title">独立文件：</div>
+        <Switch class="config-item" v-model:value="standalone" />
+      </div>
+      <div class="tips">
+        <div class="tip-item">
+          <strong>交互功能：</strong>启用后可以使用键盘导航（方向键、空格键等）和全屏功能
+        </div>
+        <div class="tip-item">
+          <strong>包含样式：</strong>启用后HTML文件包含完整的CSS样式，否则只有基本结构
+        </div>
+        <div class="tip-item">
+          <strong>独立文件：</strong>启用后生成的HTML文件可以在任何环境中独立运行
+        </div>
+      </div>
+    </div>
+    <div class="btns">
+      <Button class="btn export" type="primary" @click="handleExport">导出 HTML</Button>
+      <Button class="btn close" @click="emit('close')">关闭</Button>
+    </div>
+
+    <FullscreenSpin :loading="exporting" tip="正在导出HTML网页..." />
+  </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 FullscreenSpin from '@/components/FullscreenSpin.vue'
+import Switch from '@/components/Switch.vue'
+import Slider from '@/components/Slider.vue'
+import Button from '@/components/Button.vue'
+import RadioButton from '@/components/RadioButton.vue'
+import RadioGroup from '@/components/RadioGroup.vue'
+
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
+const { slides, currentSlide } = storeToRefs(useSlidesStore())
+const { exportHTML, exporting } = useExport()
+
+const rangeType = ref<'all' | 'current' | 'custom'>('all')
+const range = ref<[number, number]>([1, slides.value.length])
+const includeInteractivity = ref(true)
+const includeCSS = ref(true)
+const standalone = 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 handleExport = () => {
+  const options = {
+    includeInteractivity: includeInteractivity.value,
+    includeCSS: includeCSS.value,
+    standalone: standalone.value
+  }
+  
+  exportHTML(selectedSlides.value, options)
+}
+</script>
+
+<style lang="scss" scoped>
+.export-html-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;
+  }
+
+  .tips {
+    margin-top: 20px;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border-left: 4px solid #007bff;
+    
+    .tip-item {
+      font-size: 12px;
+      color: #666;
+      line-height: 1.6;
+      margin-bottom: 8px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      strong {
+        color: #333;
+      }
+    }
+  }
+}
+.btns {
+  width: 300px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .export {
+    flex: 1;
+  }
+  .close {
+    width: 100px;
+    margin-left: 10px;
+  }
+}
+</style>

frontend/src/views/Editor/ExportDialog/index.vue

@@ -23,6 +23,7 @@ import ExportJSON from './ExportJSON.vue'
 import ExportPDF from './ExportPDF.vue'
 import ExportPPTX from './ExportPPTX.vue'
 import ExportSpecificFile from './ExportSpecificFile.vue'
+import ExportHTML from './ExportHTML.vue'
 import Tabs from '@/components/Tabs.vue'
 
 interface TabItem {
@@ -38,6 +39,7 @@ const setDialogForExport = mainStore.setDialogForExport
 const tabs: TabItem[] = [
   { key: 'pptist', label: '导出 pptist 文件' },
   { key: 'pptx', label: '导出 PPTX' },
+  { key: 'html', label: '导出 HTML' },
   { key: 'image', label: '导出图片' },
   { key: 'json', label: '导出 JSON' },
   { key: 'pdf', label: '打印 / 导出 PDF' },
@@ -50,6 +52,7 @@ const currentDialogComponent = computed<unknown>(() => {
     'pdf': ExportPDF,
     'pptx': ExportPPTX,
     'pptist': ExportSpecificFile,
+    'html': ExportHTML,
   }
   if (dialogForExport.value) return dialogMap[dialogForExport.value] || null
   return null

frontend/src/views/Login.vue

@@ -1,122 +1,122 @@
-<template>
-  <div class="login-container">
-    <div class="login-form">
-      <h2>PPTist 登录</h2>
-      <form @submit.prevent="handleLogin">
-        <div class="form-group">
-          <label>用户名</label>
-          <input 
-            v-model="username" 
-            type="text" 
-            placeholder="请输入用户名"
-            required
-          />
-        </div>
-        <div class="form-group">
-          <label>密码</label>
-          <input 
-            v-model="password" 
-            type="password" 
-            placeholder="请输入密码"
-            required
-          />
-        </div>
-        <button type="submit" :disabled="loading">
-          {{ loading ? '登录中...' : '登录' }}
-        </button>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useAuthStore } from '@/store'
-import message from '@/utils/message'
-
-const authStore = useAuthStore()
-
-const username = ref('')
-const password = ref('')
-const loading = ref(false)
-
-const handleLogin = async () => {
-  if (!username.value || !password.value) {
-    message.error('请输入用户名和密码')
-    return
-  }
-
-  loading.value = true
-  try {
-    await authStore.login(username.value, password.value)
-    message.success('登录成功')
-    // 登录成功后，App.vue会自动检测到认证状态变化并显示主界面
-  } catch (error) {
-    console.error('登录失败:', error)
-  } finally {
-    loading.value = false
-  }
-}
-</script>
-
-<style scoped>
-.login-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background: #f5f5f5;
-}
-
-.login-form {
-  background: white;
-  padding: 40px;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  width: 400px;
-}
-
-.login-form h2 {
-  text-align: center;
-  margin-bottom: 30px;
-  color: #333;
-}
-
-.form-group {
-  margin-bottom: 20px;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 5px;
-  color: #555;
-}
-
-.form-group input {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-button {
-  width: 100%;
-  padding: 12px;
-  background: #5b9bd5;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-button:hover {
-  background: #4a8bc2;
-}
-
-button:disabled {
-  background: #ccc;
-  cursor: not-allowed;
-}
+<template>
+  <div class="login-container">
+    <div class="login-form">
+      <h2>PPTist 登录</h2>
+      <form @submit.prevent="handleLogin">
+        <div class="form-group">
+          <label>用户名</label>
+          <input 
+            v-model="username" 
+            type="text" 
+            placeholder="请输入用户名"
+            required
+          />
+        </div>
+        <div class="form-group">
+          <label>密码</label>
+          <input 
+            v-model="password" 
+            type="password" 
+            placeholder="请输入密码"
+            required
+          />
+        </div>
+        <button type="submit" :disabled="loading">
+          {{ loading ? '登录中...' : '登录' }}
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAuthStore } from '@/store'
+import message from '@/utils/message'
+
+const authStore = useAuthStore()
+
+const username = ref('')
+const password = ref('')
+const loading = ref(false)
+
+const handleLogin = async () => {
+  if (!username.value || !password.value) {
+    message.error('请输入用户名和密码')
+    return
+  }
+
+  loading.value = true
+  try {
+    await authStore.login(username.value, password.value)
+    message.success('登录成功')
+    // 登录成功后，App.vue会自动检测到认证状态变化并显示主界面
+  } catch (error) {
+    console.error('登录失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.login-form {
+  background: white;
+  padding: 40px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  width: 400px;
+}
+
+.login-form h2 {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  color: #555;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+button {
+  width: 100%;
+  padding: 12px;
+  background: #5b9bd5;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #4a8bc2;
+}
+
+button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
 </style>

frontend/src/views/PublicViewer.vue

@@ -1,497 +1,497 @@
-<template>
-  <div class="public-viewer">
-    <FullscreenSpin v-if="loading" tip="正在加载演示文稿..." loading :mask="false" />
-    
-    <div v-else-if="error" class="error-container">
-      <div class="error-message">
-        <h3>{{ error }}</h3>
-        <p>请检查分享链接是否正确或联系分享者</p>
-      </div>
-    </div>
-
-    <div v-else class="presentation-container">
-      <!-- 演示文稿标题 -->
-      <div class="presentation-header">
-        <h1>{{ presentationTitle }}</h1>
-        <div class="controls">
-          <button @click="toggleFullscreen" class="control-btn">
-            {{ isFullscreen ? '退出全屏' : '全屏查看' }}
-          </button>
-          <button @click="startSlideshow" class="control-btn primary">
-            开始演示
-          </button>
-        </div>
-      </div>
-
-      <!-- 幻灯片预览 -->
-      <div class="slides-container" ref="slidesContainer">
-        <div 
-          v-for="(slide, index) in slides" 
-          :key="slide.id"
-          class="slide-preview"
-          :class="{ active: currentSlideIndex === index }"
-          @click="currentSlideIndex = index"
-        >
-          <div class="slide-number">{{ index + 1 }}</div>
-          <div class="slide-content">
-            <SlideThumbnail :slide="slide" />
-          </div>
-        </div>
-      </div>
-
-      <!-- 当前幻灯片显示 -->
-      <div class="current-slide-container">
-        <div class="slide-navigation">
-          <button 
-            @click="previousSlide" 
-            :disabled="currentSlideIndex === 0"
-            class="nav-btn"
-          >
-            上一页
-          </button>
-          <span class="slide-counter">
-            {{ currentSlideIndex + 1 }} / {{ slides.length }}
-          </span>
-          <button 
-            @click="nextSlide" 
-            :disabled="currentSlideIndex === slides.length - 1"
-            class="nav-btn"
-          >
-            下一页
-          </button>
-        </div>
-        
-        <div class="current-slide" ref="currentSlideRef">
-          <Slide 
-            v-if="currentSlide"
-            :slide="currentSlide" 
-            :editable="false"
-            class="slide-display"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- 全屏演示模式 -->
-    <div v-if="isSlideshow" class="slideshow-mode" @keydown="handleKeydown">
-      <div class="slideshow-container">
-        <Slide 
-          v-if="currentSlide"
-          :slide="currentSlide" 
-          :editable="false"
-          class="slideshow-slide"
-        />
-        
-        <div class="slideshow-controls">
-          <button @click="exitSlideshow" class="exit-btn">退出演示</button>
-          <div class="slideshow-navigation">
-            <button @click="previousSlide" :disabled="currentSlideIndex === 0">←</button>
-            <span>{{ currentSlideIndex + 1 }} / {{ slides.length }}</span>
-            <button @click="nextSlide" :disabled="currentSlideIndex === slides.length - 1">→</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, computed, onUnmounted } from 'vue'
-import { useMessage } from '@/hooks/useMessage'
-import api from '@/services'
-import type { Slide as SlideType } from '@/types/slides'
-
-import FullscreenSpin from '@/components/FullscreenSpin.vue'
-import Slide from '@/views/components/Slide/index.vue'
-import SlideThumbnail from '@/views/components/SlideThumbnail/index.vue'
-
-const { message } = useMessage()
-
-const loading = ref(true)
-const error = ref('')
-const slides = ref<SlideType[]>([])
-const presentationTitle = ref('')
-const currentSlideIndex = ref(0)
-const isFullscreen = ref(false)
-const isSlideshow = ref(false)
-const slidesContainer = ref<HTMLElement>()
-const currentSlideRef = ref<HTMLElement>()
-
-const currentSlide = computed(() => slides.value[currentSlideIndex.value])
-
-// 从URL获取分享ID
-const getShareIdFromUrl = () => {
-  const url = window.location.href
-  const match = url.match(/\/public\/view\/([^/?]+)/)
-  return match ? match[1] : null
-}
-
-// 加载公共演示文稿
-const loadPublicPresentation = async () => {
-  try {
-    loading.value = true
-    const shareId = getShareIdFromUrl()
-    
-    if (!shareId) {
-      error.value = '无效的分享链接'
-      return
-    }
-
-    const response = await api.get(`/api/public/presentation/${shareId}`)
-    
-    if (response.data.success) {
-      slides.value = response.data.slides
-      presentationTitle.value = response.data.title || '未命名演示文稿'
-    } else {
-      error.value = response.data.message || '加载失败'
-    }
-  } catch (err) {
-    console.error('加载公共演示文稿失败:', err)
-    error.value = '加载演示文稿时出错，请稍后重试'
-  } finally {
-    loading.value = false
-  }
-}
-
-// 幻灯片导航
-const previousSlide = () => {
-  if (currentSlideIndex.value > 0) {
-    currentSlideIndex.value--
-  }
-}
-
-const nextSlide = () => {
-  if (currentSlideIndex.value < slides.value.length - 1) {
-    currentSlideIndex.value++
-  }
-}
-
-// 全屏功能
-const toggleFullscreen = () => {
-  if (!document.fullscreenElement) {
-    currentSlideRef.value?.requestFullscreen()
-    isFullscreen.value = true
-  } else {
-    document.exitFullscreen()
-    isFullscreen.value = false
-  }
-}
-
-// 演示模式
-const startSlideshow = () => {
-  isSlideshow.value = true
-  currentSlideIndex.value = 0
-  document.addEventListener('keydown', handleKeydown)
-}
-
-const exitSlideshow = () => {
-  isSlideshow.value = false
-  document.removeEventListener('keydown', handleKeydown)
-}
-
-// 键盘事件处理
-const handleKeydown = (event: KeyboardEvent) => {
-  switch (event.key) {
-    case 'ArrowLeft':
-    case 'ArrowUp':
-      previousSlide()
-      break
-    case 'ArrowRight':
-    case 'ArrowDown':
-    case ' ':
-      nextSlide()
-      break
-    case 'Escape':
-      exitSlideshow()
-      break
-  }
-}
-
-// 全屏状态监听
-const handleFullscreenChange = () => {
-  isFullscreen.value = !!document.fullscreenElement
-}
-
-onMounted(() => {
-  loadPublicPresentation()
-  document.addEventListener('fullscreenchange', handleFullscreenChange)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
-  document.removeEventListener('fullscreenchange', handleFullscreenChange)
-})
-</script>
-
-<style lang="scss" scoped>
-.public-viewer {
-  width: 100%;
-  height: 100vh;
-  background: #f5f5f5;
-}
-
-.error-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  
-  .error-message {
-    text-align: center;
-    padding: 2rem;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    
-    h3 {
-      color: #ff4757;
-      margin-bottom: 1rem;
-    }
-    
-    p {
-      color: #666;
-    }
-  }
-}
-
-.presentation-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-.presentation-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 2rem;
-  background: white;
-  border-bottom: 1px solid #e0e0e0;
-  
-  h1 {
-    margin: 0;
-    color: #333;
-    font-size: 1.5rem;
-  }
-  
-  .controls {
-    display: flex;
-    gap: 1rem;
-  }
-  
-  .control-btn {
-    padding: 0.5rem 1rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    background: white;
-    cursor: pointer;
-    transition: all 0.2s;
-    
-    &:hover {
-      background: #f8f9fa;
-    }
-    
-    &.primary {
-      background: #007bff;
-      color: white;
-      border-color: #007bff;
-      
-      &:hover {
-        background: #0056b3;
-      }
-    }
-  }
-}
-
-.slides-container {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  padding: 1rem;
-  overflow-y: auto;
-  max-height: 200px;
-}
-
-.slide-preview {
-  position: relative;
-  width: 200px;
-  height: 150px;
-  border: 2px solid #ddd;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s;
-  background: white;
-  
-  &:hover {
-    border-color: #007bff;
-    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
-  }
-  
-  &.active {
-    border-color: #007bff;
-    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
-  }
-  
-  .slide-number {
-    position: absolute;
-    top: 8px;
-    left: 8px;
-    background: rgba(0, 0, 0, 0.7);
-    color: white;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    z-index: 10;
-  }
-  
-  .slide-content {
-    width: 100%;
-    height: 100%;
-    padding: 8px;
-  }
-}
-
-.current-slide-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  background: white;
-}
-
-.slide-navigation {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-  
-  .nav-btn {
-    padding: 0.5rem 1rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    background: white;
-    cursor: pointer;
-    
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    
-    &:not(:disabled):hover {
-      background: #f8f9fa;
-    }
-  }
-  
-  .slide-counter {
-    font-weight: 500;
-    color: #666;
-  }
-}
-
-.current-slide {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  
-  .slide-display {
-    max-width: 90%;
-    max-height: 90%;
-  }
-}
-
-.slideshow-mode {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: black;
-  z-index: 9999;
-}
-
-.slideshow-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.slideshow-slide {
-  max-width: 95%;
-  max-height: 95%;
-}
-
-.slideshow-controls {
-  position: absolute;
-  bottom: 2rem;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-  
-  .exit-btn {
-    padding: 0.5rem 1rem;
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 4px;
-    cursor: pointer;
-    
-    &:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-  }
-  
-  .slideshow-navigation {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    color: white;
-    
-    button {
-      padding: 0.5rem;
-      background: rgba(255, 255, 255, 0.1);
-      color: white;
-      border: 1px solid rgba(255, 255, 255, 0.3);
-      border-radius: 4px;
-      cursor: pointer;
-      
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      
-      &:not(:disabled):hover {
-        background: rgba(255, 255, 255, 0.2);
-      }
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .presentation-header {
-    flex-direction: column;
-    gap: 1rem;
-    
-    .controls {
-      width: 100%;
-      justify-content: center;
-    }
-  }
-  
-  .slides-container {
-    max-height: 120px;
-  }
-  
-  .slide-preview {
-    width: 120px;
-    height: 90px;
-  }
-}
+<template>
+  <div class="public-viewer">
+    <FullscreenSpin v-if="loading" tip="正在加载演示文稿..." loading :mask="false" />
+    
+    <div v-else-if="error" class="error-container">
+      <div class="error-message">
+        <h3>{{ error }}</h3>
+        <p>请检查分享链接是否正确或联系分享者</p>
+      </div>
+    </div>
+
+    <div v-else class="presentation-container">
+      <!-- 演示文稿标题 -->
+      <div class="presentation-header">
+        <h1>{{ presentationTitle }}</h1>
+        <div class="controls">
+          <button @click="toggleFullscreen" class="control-btn">
+            {{ isFullscreen ? '退出全屏' : '全屏查看' }}
+          </button>
+          <button @click="startSlideshow" class="control-btn primary">
+            开始演示
+          </button>
+        </div>
+      </div>
+
+      <!-- 幻灯片预览 -->
+      <div class="slides-container" ref="slidesContainer">
+        <div 
+          v-for="(slide, index) in slides" 
+          :key="slide.id"
+          class="slide-preview"
+          :class="{ active: currentSlideIndex === index }"
+          @click="currentSlideIndex = index"
+        >
+          <div class="slide-number">{{ index + 1 }}</div>
+          <div class="slide-content">
+            <SlideThumbnail :slide="slide" />
+          </div>
+        </div>
+      </div>
+
+      <!-- 当前幻灯片显示 -->
+      <div class="current-slide-container">
+        <div class="slide-navigation">
+          <button 
+            @click="previousSlide" 
+            :disabled="currentSlideIndex === 0"
+            class="nav-btn"
+          >
+            上一页
+          </button>
+          <span class="slide-counter">
+            {{ currentSlideIndex + 1 }} / {{ slides.length }}
+          </span>
+          <button 
+            @click="nextSlide" 
+            :disabled="currentSlideIndex === slides.length - 1"
+            class="nav-btn"
+          >
+            下一页
+          </button>
+        </div>
+        
+        <div class="current-slide" ref="currentSlideRef">
+          <Slide 
+            v-if="currentSlide"
+            :slide="currentSlide" 
+            :editable="false"
+            class="slide-display"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 全屏演示模式 -->
+    <div v-if="isSlideshow" class="slideshow-mode" @keydown="handleKeydown">
+      <div class="slideshow-container">
+        <Slide 
+          v-if="currentSlide"
+          :slide="currentSlide" 
+          :editable="false"
+          class="slideshow-slide"
+        />
+        
+        <div class="slideshow-controls">
+          <button @click="exitSlideshow" class="exit-btn">退出演示</button>
+          <div class="slideshow-navigation">
+            <button @click="previousSlide" :disabled="currentSlideIndex === 0">←</button>
+            <span>{{ currentSlideIndex + 1 }} / {{ slides.length }}</span>
+            <button @click="nextSlide" :disabled="currentSlideIndex === slides.length - 1">→</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, computed, onUnmounted } from 'vue'
+import { useMessage } from '@/hooks/useMessage'
+import api from '@/services'
+import type { Slide as SlideType } from '@/types/slides'
+
+import FullscreenSpin from '@/components/FullscreenSpin.vue'
+import Slide from '@/views/components/Slide/index.vue'
+import SlideThumbnail from '@/views/components/SlideThumbnail/index.vue'
+
+const { message } = useMessage()
+
+const loading = ref(true)
+const error = ref('')
+const slides = ref<SlideType[]>([])
+const presentationTitle = ref('')
+const currentSlideIndex = ref(0)
+const isFullscreen = ref(false)
+const isSlideshow = ref(false)
+const slidesContainer = ref<HTMLElement>()
+const currentSlideRef = ref<HTMLElement>()
+
+const currentSlide = computed(() => slides.value[currentSlideIndex.value])
+
+// 从URL获取分享ID
+const getShareIdFromUrl = () => {
+  const url = window.location.href
+  const match = url.match(/\/public\/view\/([^/?]+)/)
+  return match ? match[1] : null
+}
+
+// 加载公共演示文稿
+const loadPublicPresentation = async () => {
+  try {
+    loading.value = true
+    const shareId = getShareIdFromUrl()
+    
+    if (!shareId) {
+      error.value = '无效的分享链接'
+      return
+    }
+
+    const response = await api.get(`/api/public/presentation/${shareId}`)
+    
+    if (response.data.success) {
+      slides.value = response.data.slides
+      presentationTitle.value = response.data.title || '未命名演示文稿'
+    } else {
+      error.value = response.data.message || '加载失败'
+    }
+  } catch (err) {
+    console.error('加载公共演示文稿失败:', err)
+    error.value = '加载演示文稿时出错，请稍后重试'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 幻灯片导航
+const previousSlide = () => {
+  if (currentSlideIndex.value > 0) {
+    currentSlideIndex.value--
+  }
+}
+
+const nextSlide = () => {
+  if (currentSlideIndex.value < slides.value.length - 1) {
+    currentSlideIndex.value++
+  }
+}
+
+// 全屏功能
+const toggleFullscreen = () => {
+  if (!document.fullscreenElement) {
+    currentSlideRef.value?.requestFullscreen()
+    isFullscreen.value = true
+  } else {
+    document.exitFullscreen()
+    isFullscreen.value = false
+  }
+}
+
+// 演示模式
+const startSlideshow = () => {
+  isSlideshow.value = true
+  currentSlideIndex.value = 0
+  document.addEventListener('keydown', handleKeydown)
+}
+
+const exitSlideshow = () => {
+  isSlideshow.value = false
+  document.removeEventListener('keydown', handleKeydown)
+}
+
+// 键盘事件处理
+const handleKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case 'ArrowLeft':
+    case 'ArrowUp':
+      previousSlide()
+      break
+    case 'ArrowRight':
+    case 'ArrowDown':
+    case ' ':
+      nextSlide()
+      break
+    case 'Escape':
+      exitSlideshow()
+      break
+  }
+}
+
+// 全屏状态监听
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!document.fullscreenElement
+}
+
+onMounted(() => {
+  loadPublicPresentation()
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+})
+</script>
+
+<style lang="scss" scoped>
+.public-viewer {
+  width: 100%;
+  height: 100vh;
+  background: #f5f5f5;
+}
+
+.error-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  
+  .error-message {
+    text-align: center;
+    padding: 2rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    
+    h3 {
+      color: #ff4757;
+      margin-bottom: 1rem;
+    }
+    
+    p {
+      color: #666;
+    }
+  }
+}
+
+.presentation-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.presentation-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background: white;
+  border-bottom: 1px solid #e0e0e0;
+  
+  h1 {
+    margin: 0;
+    color: #333;
+    font-size: 1.5rem;
+  }
+  
+  .controls {
+    display: flex;
+    gap: 1rem;
+  }
+  
+  .control-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+    transition: all 0.2s;
+    
+    &:hover {
+      background: #f8f9fa;
+    }
+    
+    &.primary {
+      background: #007bff;
+      color: white;
+      border-color: #007bff;
+      
+      &:hover {
+        background: #0056b3;
+      }
+    }
+  }
+}
+
+.slides-container {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 1rem;
+  overflow-y: auto;
+  max-height: 200px;
+}
+
+.slide-preview {
+  position: relative;
+  width: 200px;
+  height: 150px;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: white;
+  
+  &:hover {
+    border-color: #007bff;
+    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
+  }
+  
+  &.active {
+    border-color: #007bff;
+    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
+  }
+  
+  .slide-number {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    z-index: 10;
+  }
+  
+  .slide-content {
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+  }
+}
+
+.current-slide-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  background: white;
+}
+
+.slide-navigation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  
+  .nav-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    
+    &:not(:disabled):hover {
+      background: #f8f9fa;
+    }
+  }
+  
+  .slide-counter {
+    font-weight: 500;
+    color: #666;
+  }
+}
+
+.current-slide {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  .slide-display {
+    max-width: 90%;
+    max-height: 90%;
+  }
+}
+
+.slideshow-mode {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: black;
+  z-index: 9999;
+}
+
+.slideshow-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.slideshow-slide {
+  max-width: 95%;
+  max-height: 95%;
+}
+
+.slideshow-controls {
+  position: absolute;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  
+  .exit-btn {
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    cursor: pointer;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+  
+  .slideshow-navigation {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    color: white;
+    
+    button {
+      padding: 0.5rem;
+      background: rgba(255, 255, 255, 0.1);
+      color: white;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      border-radius: 4px;
+      cursor: pointer;
+      
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      
+      &:not(:disabled):hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .presentation-header {
+    flex-direction: column;
+    gap: 1rem;
+    
+    .controls {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+  
+  .slides-container {
+    max-height: 120px;
+  }
+  
+  .slide-preview {
+    width: 120px;
+    height: 90px;
+  }
+}
 </style>

frontend/src/views/components/element/ChartElement/BaseChartElement.vue

@@ -1,68 +1,68 @@
-<template>
-  <div class="base-element-chart"
-    :class="{ 'is-thumbnail': target === 'thumbnail' }"
-    :style="{
-      top: elementInfo.top + 'px',
-      left: elementInfo.left + 'px',
-      width: elementInfo.width + 'px',
-      height: elementInfo.height + 'px',
-    }"
-  >
-    <div
-      class="rotate-wrapper"
-      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
-    >
-      <div 
-        class="element-content"
-        :style="{
-          backgroundColor: elementInfo.fill,
-        }"
-      >
-        <ElementOutline
-          :width="elementInfo.width"
-          :height="elementInfo.height"
-          :outline="elementInfo.outline"
-        />
-        <Chart
-          :width="elementInfo.width"
-          :height="elementInfo.height"
-          :type="elementInfo.chartType"
-          :data="elementInfo.data"
-          :themeColors="elementInfo.themeColors"
-          :textColor="elementInfo.textColor"
-          :options="elementInfo.options"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PPTChartElement } from '@/types/slides'
-
-import ElementOutline from '@/views/components/element/ElementOutline.vue'
-import Chart from './Chart.vue'
-
-defineProps<{
-  elementInfo: PPTChartElement
-  target?: string
-}>()
-</script>
-
-<style lang="scss" scoped>
-.base-element-chart {
-  position: absolute;
-
-  &.is-thumbnail {
-    pointer-events: none;
-  }
-}
-.rotate-wrapper {
-  width: 100%;
-  height: 100%;
-}
-.element-content {
-  width: 100%;
-  height: 100%;
-}
+<template>
+  <div class="base-element-chart"
+    :class="{ 'is-thumbnail': target === 'thumbnail' }"
+    :style="{
+      top: elementInfo.top + 'px',
+      left: elementInfo.left + 'px',
+      width: elementInfo.width + 'px',
+      height: elementInfo.height + 'px',
+    }"
+  >
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
+    >
+      <div 
+        class="element-content"
+        :style="{
+          backgroundColor: elementInfo.fill,
+        }"
+      >
+        <ElementOutline
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :outline="elementInfo.outline"
+        />
+        <Chart
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :type="elementInfo.chartType"
+          :data="elementInfo.data"
+          :themeColors="elementInfo.themeColors"
+          :textColor="elementInfo.textColor"
+          :options="elementInfo.options"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PPTChartElement } from '@/types/slides'
+
+import ElementOutline from '@/views/components/element/ElementOutline.vue'
+import Chart from './Chart.vue'
+
+defineProps<{
+  elementInfo: PPTChartElement
+  target?: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+.base-element-chart {
+  position: absolute;
+
+  &.is-thumbnail {
+    pointer-events: none;
+  }
+}
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
+.element-content {
+  width: 100%;
+  height: 100%;
+}
 </style>

frontend/src/views/components/element/ChartElement/index.vue

@@ -1,88 +1,88 @@
-<template>
-  <div class="editable-element-chart"
-    :class="{ 'lock': elementInfo.lock }"
-    :style="{
-      top: elementInfo.top + 'px',
-      left: elementInfo.left + 'px',
-      width: elementInfo.width + 'px',
-      height: elementInfo.height + 'px',
-    }"
-  >
-    <div
-      class="rotate-wrapper"
-      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
-    >
-      <div 
-        class="element-content" 
-        :style="{
-          backgroundColor: elementInfo.fill,
-        }"
-        v-contextmenu="contextmenus"
-        @mousedown="$event => handleSelectElement($event)"
-        @touchstart="$event => handleSelectElement($event)"
-        @dblclick="openDataEditor()"
-      >
-        <ElementOutline
-          :width="elementInfo.width"
-          :height="elementInfo.height"
-          :outline="elementInfo.outline"
-        />
-        <Chart
-          :width="elementInfo.width"
-          :height="elementInfo.height"
-          :type="elementInfo.chartType"
-          :data="elementInfo.data"
-          :themeColors="elementInfo.themeColors"
-          :textColor="elementInfo.textColor"
-          :options="elementInfo.options"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { PPTChartElement } from '@/types/slides'
-import type { ContextmenuItem } from '@/components/Contextmenu/types'
-import emitter, { EmitterEvents } from '@/utils/emitter'
-
-import ElementOutline from '@/views/components/element/ElementOutline.vue'
-import Chart from './Chart.vue'
-
-const props = defineProps<{
-  elementInfo: PPTChartElement
-  selectElement: (e: MouseEvent | TouchEvent, element: PPTChartElement, canMove?: boolean) => void
-  contextmenus: () => ContextmenuItem[] | null
-}>()
-
-const handleSelectElement = (e: MouseEvent | TouchEvent) => {
-  if (props.elementInfo.lock) return
-  e.stopPropagation()
-
-  props.selectElement(e, props.elementInfo)
-}
-
-const openDataEditor = () => {
-  emitter.emit(EmitterEvents.OPEN_CHART_DATA_EDITOR)
-}
-</script>
-
-<style lang="scss" scoped>
-.editable-element-chart {
-  position: absolute;
-
-  &.lock .element-content {
-    cursor: default;
-  }
-}
-.rotate-wrapper {
-  width: 100%;
-  height: 100%;
-}
-.element-content {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  cursor: move;
-}
-</style>
+<template>
+  <div class="editable-element-chart"
+    :class="{ 'lock': elementInfo.lock }"
+    :style="{
+      top: elementInfo.top + 'px',
+      left: elementInfo.left + 'px',
+      width: elementInfo.width + 'px',
+      height: elementInfo.height + 'px',
+    }"
+  >
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
+    >
+      <div 
+        class="element-content" 
+        :style="{
+          backgroundColor: elementInfo.fill,
+        }"
+        v-contextmenu="contextmenus"
+        @mousedown="$event => handleSelectElement($event)"
+        @touchstart="$event => handleSelectElement($event)"
+        @dblclick="openDataEditor()"
+      >
+        <ElementOutline
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :outline="elementInfo.outline"
+        />
+        <Chart
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :type="elementInfo.chartType"
+          :data="elementInfo.data"
+          :themeColors="elementInfo.themeColors"
+          :textColor="elementInfo.textColor"
+          :options="elementInfo.options"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PPTChartElement } from '@/types/slides'
+import type { ContextmenuItem } from '@/components/Contextmenu/types'
+import emitter, { EmitterEvents } from '@/utils/emitter'
+
+import ElementOutline from '@/views/components/element/ElementOutline.vue'
+import Chart from './Chart.vue'
+
+const props = defineProps<{
+  elementInfo: PPTChartElement
+  selectElement: (e: MouseEvent | TouchEvent, element: PPTChartElement, canMove?: boolean) => void
+  contextmenus: () => ContextmenuItem[] | null
+}>()
+
+const handleSelectElement = (e: MouseEvent | TouchEvent) => {
+  if (props.elementInfo.lock) return
+  e.stopPropagation()
+
+  props.selectElement(e, props.elementInfo)
+}
+
+const openDataEditor = () => {
+  emitter.emit(EmitterEvents.OPEN_CHART_DATA_EDITOR)
+}
+</script>
+
+<style lang="scss" scoped>
+.editable-element-chart {
+  position: absolute;
+
+  &.lock .element-content {
+    cursor: default;
+  }
+}
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
+.element-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  cursor: move;
+}
+</style>

frontend/src/views/components/element/ShapeElement/GradientDefs.vue

@@ -1,30 +1,30 @@
-<template>
-  <linearGradient 
-    v-if="type === 'linear'"
-    :id="id" 
-    x1="0%" 
-    y1="0%" 
-    x2="100%" 
-    y2="0%" 
-    :gradientTransform="`rotate(${rotate},0.5,0.5)`"
-  >
-    <stop v-for="(item, index) in colors" :key="index" :offset="`${item.pos}%`" :stop-color="item.color" />
-  </linearGradient>
-
-  <radialGradient :id="id" v-else>
-    <stop v-for="(item, index) in colors" :key="index" :offset="`${item.pos}%`" :stop-color="item.color" />
-  </radialGradient>
-</template>
-
-<script lang="ts" setup>
-import type { GradientColor, GradientType } from '@/types/slides'
-
-withDefaults(defineProps<{
-  id: string
-  type: GradientType
-  colors: GradientColor[]
-  rotate?: number
-}>(), {
-  rotate: 0,
-})
+<template>
+  <linearGradient 
+    v-if="type === 'linear'"
+    :id="id" 
+    x1="0%" 
+    y1="0%" 
+    x2="100%" 
+    y2="0%" 
+    :gradientTransform="`rotate(${rotate},0.5,0.5)`"
+  >
+    <stop v-for="(item, index) in colors" :key="index" :offset="`${item.pos}%`" :stop-color="item.color" />
+  </linearGradient>
+
+  <radialGradient :id="id" v-else>
+    <stop v-for="(item, index) in colors" :key="index" :offset="`${item.pos}%`" :stop-color="item.color" />
+  </radialGradient>
+</template>
+
+<script lang="ts" setup>
+import type { GradientColor, GradientType } from '@/types/slides'
+
+withDefaults(defineProps<{
+  id: string
+  type: GradientType
+  colors: GradientColor[]
+  rotate?: number
+}>(), {
+  rotate: 0,
+})
 </script>