Upload 71 files

frontend/src/assets/styles/font.scss

@@ -1,9 +1,9 @@
-$fonts: 'SourceHanSans', 'SourceHanSerif', 'FangZhengHeiTi', 'FangZhengKaiTi', 'FangZhengShuSong', 'FangZhengFangSong', 'AlibabaPuHuiTi', 'ZhuQueFangSong', 'LXGWWenKai', 'WenDingPLKaiTi', 'DeYiHei', 'MiSans', 'CangerXiaowanzi', 'YousheTitleBlack', 'FengguangMingrui', 'ShetuModernSquare', 'ZcoolHappy', 'ZizhiQuXiMai', 'SucaiJishiKangkang', 'SucaiJishiCoolSquare', 'TuniuRounded', 'RuiziZhenyan';
-
-@each $font in $fonts {
-  @font-face {
-    font-display: swap;
-    font-family: $font;
-    src: url('https://asset.pptist.cn/font/#{$font}.woff2') format('woff2');
-  }
+$fonts: 'SourceHanSans', 'SourceHanSerif', 'FangZhengHeiTi', 'FangZhengKaiTi', 'FangZhengShuSong', 'FangZhengFangSong', 'AlibabaPuHuiTi', 'ZhuQueFangSong', 'LXGWWenKai', 'WenDingPLKaiTi', 'DeYiHei', 'MiSans', 'CangerXiaowanzi', 'YousheTitleBlack', 'FengguangMingrui', 'ShetuModernSquare', 'ZcoolHappy', 'ZizhiQuXiMai', 'SucaiJishiKangkang', 'SucaiJishiCoolSquare', 'TuniuRounded', 'RuiziZhenyan';
+
+@each $font in $fonts {
+  @font-face {
+    font-display: swap;
+    font-family: $font;
+    src: url('https://asset.pptist.cn/font/#{$font}.woff2') format('woff2');
+  }
 }

frontend/src/configs/animation.ts

@@ -1,234 +1,234 @@
-import type { TurningMode } from '@/types/slides'
-
-export const ANIMATION_DEFAULT_DURATION = 1000
-export const ANIMATION_DEFAULT_TRIGGER = 'click'
-export const ANIMATION_CLASS_PREFIX = 'animate__'
-
-export const ENTER_ANIMATIONS = [
-  {
-    type: 'bounce',
-    name: '弹跳',
-    children: [
-      { name: '弹入', value: 'bounceIn' },
-      { name: '向右弹入', value: 'bounceInLeft' },
-      { name: '向左弹入', value: 'bounceInRight' },
-      { name: '向上弹入', value: 'bounceInUp' },
-      { name: '向下弹入', value: 'bounceInDown' },
-    ],
-  },
-  {
-    type: 'fade',
-    name: '浮现',
-    children: [
-      { name: '浮入', value: 'fadeIn' },
-      { name: '向下浮入', value: 'fadeInDown' },
-      { name: '向下长距浮入', value: 'fadeInDownBig' },
-      { name: '向右浮入', value: 'fadeInLeft' },
-      { name: '向右长距浮入', value: 'fadeInLeftBig' },
-      { name: '向左浮入', value: 'fadeInRight' },
-      { name: '向左长距浮入', value: 'fadeInRightBig' },
-      { name: '向上浮入', value: 'fadeInUp' },
-      { name: '向上长距浮入', value: 'fadeInUpBig' },
-      { name: '从左上浮入', value: 'fadeInTopLeft' },
-      { name: '从右上浮入', value: 'fadeInTopRight' },
-      { name: '从左下浮入', value: 'fadeInBottomLeft' },
-      { name: '从右下浮入', value: 'fadeInBottomRight' },
-    ],
-  },
-  {
-    type: 'rotate',
-    name: '旋转',
-    children: [
-      { name: '旋转进入', value: 'rotateIn' },
-      { name: '绕左下进入', value: 'rotateInDownLeft' },
-      { name: '绕右下进入', value: 'rotateInDownRight' },
-      { name: '绕左上进入', value: 'rotateInUpLeft' },
-      { name: '绕右上进入', value: 'rotateInUpRight' },
-    ],
-  },
-  {
-    type: 'zoom',
-    name: '缩放',
-    children: [
-      { name: '放大进入', value: 'zoomIn' },
-      { name: '向下放大进入', value: 'zoomInDown' },
-      { name: '从左放大进入', value: 'zoomInLeft' },
-      { name: '从右放大进入', value: 'zoomInRight' },
-      { name: '向上放大进入', value: 'zoomInUp' },
-    ],
-  },
-  {
-    type: 'slide',
-    name: '滑入',
-    children: [
-      { name: '向下滑入', value: 'slideInDown' },
-      { name: '从右滑入', value: 'slideInLeft' },
-      { name: '从左滑入', value: 'slideInRight' },
-      { name: '向上滑入', value: 'slideInUp' },
-    ],
-  },
-  {
-    type: 'flip',
-    name: '翻转',
-    children: [
-      { name: 'X轴翻转进入', value: 'flipInX' },
-      { name: 'Y轴翻转进入', value: 'flipInY' },
-    ],
-  },
-  {
-    type: 'back',
-    name: '放大滑入',
-    children: [
-      { name: '向下放大滑入', value: 'backInDown' },
-      { name: '从左放大滑入', value: 'backInLeft' },
-      { name: '从右放大滑入', value: 'backInRight' },
-      { name: '向上放大滑入', value: 'backInUp' },
-    ],
-  },
-  {
-    type: 'lightSpeed',
-    name: '飞入',
-    children: [
-      { name: '从右飞入', value: 'lightSpeedInRight' },
-      { name: '从左飞入', value: 'lightSpeedInLeft' },
-    ],
-  },
-]
-
-export const EXIT_ANIMATIONS = [
-  {
-    type: 'bounce',
-    name: '弹跳',
-    children: [
-      { name: '弹出', value: 'bounceOut' },
-      { name: '向左弹出', value: 'bounceOutLeft' },
-      { name: '向右弹出', value: 'bounceOutRight' },
-      { name: '向上弹出', value: 'bounceOutUp' },
-      { name: '向下弹出', value: 'bounceOutDown' },
-    ],
-  },
-  {
-    type: 'fade',
-    name: '浮现',
-    children: [
-      { name: '浮出', value: 'fadeOut' },
-      { name: '向下浮出', value: 'fadeOutDown' },
-      { name: '向下长距浮出', value: 'fadeOutDownBig' },
-      { name: '向左浮出', value: 'fadeOutLeft' },
-      { name: '向左长距浮出', value: 'fadeOutLeftBig' },
-      { name: '向右浮出', value: 'fadeOutRight' },
-      { name: '向右长距浮出', value: 'fadeOutRightBig' },
-      { name: '向上浮出', value: 'fadeOutUp' },
-      { name: '向上长距浮出', value: 'fadeOutUpBig' },
-      { name: '从左上浮出', value: 'fadeOutTopLeft' },
-      { name: '从右上浮出', value: 'fadeOutTopRight' },
-      { name: '从左下浮出', value: 'fadeOutBottomLeft' },
-      { name: '从右下浮出', value: 'fadeOutBottomRight' },
-    ],
-  },
-  {
-    type: 'rotate',
-    name: '旋转',
-    children: [
-      { name: '旋转退出', value: 'rotateOut' },
-      { name: '绕左下退出', value: 'rotateOutDownLeft' },
-      { name: '绕右下退出', value: 'rotateOutDownRight' },
-      { name: '绕左上退出', value: 'rotateOutUpLeft' },
-      { name: '绕右上退出', value: 'rotateOutUpRight' },
-    ],
-  },
-  {
-    type: 'zoom',
-    name: '缩放',
-    children: [
-      { name: '缩小退出', value: 'zoomOut' },
-      { name: '向下缩小退出', value: 'zoomOutDown' },
-      { name: '从左缩小退出', value: 'zoomOutLeft' },
-      { name: '从右缩小退出', value: 'zoomOutRight' },
-      { name: '向上缩小退出', value: 'zoomOutUp' },
-    ],
-  },
-  {
-    type: 'slide',
-    name: '滑出',
-    children: [
-      { name: '向下滑出', value: 'slideOutDown' },
-      { name: '从左滑出', value: 'slideOutLeft' },
-      { name: '从右滑出', value: 'slideOutRight' },
-      { name: '向上滑出', value: 'slideOutUp' },
-    ],
-  },
-  {
-    type: 'flip',
-    name: '翻转',
-    children: [
-      { name: 'X轴翻转退出', value: 'flipOutX' },
-      { name: 'Y轴翻转退出', value: 'flipOutY' },
-    ],
-  },
-  {
-    type: 'back',
-    name: '缩小滑出',
-    children: [
-      { name: '向下缩小滑出', value: 'backOutDown' },
-      { name: '从左缩小滑出', value: 'backOutLeft' },
-      { name: '从右缩小滑出', value: 'backOutRight' },
-      { name: '向上缩小滑出', value: 'backOutUp' },
-    ],
-  },
-  {
-    type: 'lightSpeed',
-    name: '飞出',
-    children: [
-      { name: '从右飞出', value: 'lightSpeedOutRight' },
-      { name: '从左飞出', value: 'lightSpeedOutLeft' },
-    ],
-  },
-]
-
-export const ATTENTION_ANIMATIONS = [
-  {
-    type: 'shake',
-    name: '晃动',
-    children: [
-      { name: '左右摇晃', value: 'shakeX' },
-      { name: '上下摇晃', value: 'shakeY' },
-      { name: '摇头', value: 'headShake' },
-      { name: '摆动', value: 'swing' },
-      { name: '晃动', value: 'wobble' },
-      { name: '惊恐', value: 'tada' },
-      { name: '果冻', value: 'jello' },
-    ],
-  },
-  {
-    type: 'other',
-    name: '其他',
-    children: [
-      { name: '弹跳', value: 'bounce' },
-      { name: '闪烁', value: 'flash' },
-      { name: '脉搏', value: 'pulse' },
-      { name: '橡皮筋', value: 'rubberBand' },
-      { name: '心跳（快）', value: 'heartBeat' },
-    ],
-  },
-]
-
-interface SlideAnimation {
-  label: string
-  value: TurningMode
-}
-
-export const SLIDE_ANIMATIONS: SlideAnimation[] = [
-  { label: '无', value: 'no' },
-  { label: '随机', value: 'random' },
-  { label: '左右推移', value: 'slideX' },
-  { label: '上下推移', value: 'slideY' },
-  { label: '左右推移（3D）', value: 'slideX3D' },
-  { label: '上下推移（3D）', value: 'slideY3D' },
-  { label: '淡入淡出', value: 'fade' },
-  { label: '旋转', value: 'rotate' },
-  { label: '上下展开', value: 'scaleY' },
-  { label: '左右展开', value: 'scaleX' },
-  { label: '放大', value: 'scale' },
-  { label: '缩小', value: 'scaleReverse' },
+import type { TurningMode } from '@/types/slides'
+
+export const ANIMATION_DEFAULT_DURATION = 1000
+export const ANIMATION_DEFAULT_TRIGGER = 'click'
+export const ANIMATION_CLASS_PREFIX = 'animate__'
+
+export const ENTER_ANIMATIONS = [
+  {
+    type: 'bounce',
+    name: '弹跳',
+    children: [
+      { name: '弹入', value: 'bounceIn' },
+      { name: '向右弹入', value: 'bounceInLeft' },
+      { name: '向左弹入', value: 'bounceInRight' },
+      { name: '向上弹入', value: 'bounceInUp' },
+      { name: '向下弹入', value: 'bounceInDown' },
+    ],
+  },
+  {
+    type: 'fade',
+    name: '浮现',
+    children: [
+      { name: '浮入', value: 'fadeIn' },
+      { name: '向下浮入', value: 'fadeInDown' },
+      { name: '向下长距浮入', value: 'fadeInDownBig' },
+      { name: '向右浮入', value: 'fadeInLeft' },
+      { name: '向右长距浮入', value: 'fadeInLeftBig' },
+      { name: '向左浮入', value: 'fadeInRight' },
+      { name: '向左长距浮入', value: 'fadeInRightBig' },
+      { name: '向上浮入', value: 'fadeInUp' },
+      { name: '向上长距浮入', value: 'fadeInUpBig' },
+      { name: '从左上浮入', value: 'fadeInTopLeft' },
+      { name: '从右上浮入', value: 'fadeInTopRight' },
+      { name: '从左下浮入', value: 'fadeInBottomLeft' },
+      { name: '从右下浮入', value: 'fadeInBottomRight' },
+    ],
+  },
+  {
+    type: 'rotate',
+    name: '旋转',
+    children: [
+      { name: '旋转进入', value: 'rotateIn' },
+      { name: '绕左下进入', value: 'rotateInDownLeft' },
+      { name: '绕右下进入', value: 'rotateInDownRight' },
+      { name: '绕左上进入', value: 'rotateInUpLeft' },
+      { name: '绕右上进入', value: 'rotateInUpRight' },
+    ],
+  },
+  {
+    type: 'zoom',
+    name: '缩放',
+    children: [
+      { name: '放大进入', value: 'zoomIn' },
+      { name: '向下放大进入', value: 'zoomInDown' },
+      { name: '从左放大进入', value: 'zoomInLeft' },
+      { name: '从右放大进入', value: 'zoomInRight' },
+      { name: '向上放大进入', value: 'zoomInUp' },
+    ],
+  },
+  {
+    type: 'slide',
+    name: '滑入',
+    children: [
+      { name: '向下滑入', value: 'slideInDown' },
+      { name: '从右滑入', value: 'slideInLeft' },
+      { name: '从左滑入', value: 'slideInRight' },
+      { name: '向上滑入', value: 'slideInUp' },
+    ],
+  },
+  {
+    type: 'flip',
+    name: '翻转',
+    children: [
+      { name: 'X轴翻转进入', value: 'flipInX' },
+      { name: 'Y轴翻转进入', value: 'flipInY' },
+    ],
+  },
+  {
+    type: 'back',
+    name: '放大滑入',
+    children: [
+      { name: '向下放大滑入', value: 'backInDown' },
+      { name: '从左放大滑入', value: 'backInLeft' },
+      { name: '从右放大滑入', value: 'backInRight' },
+      { name: '向上放大滑入', value: 'backInUp' },
+    ],
+  },
+  {
+    type: 'lightSpeed',
+    name: '飞入',
+    children: [
+      { name: '从右飞入', value: 'lightSpeedInRight' },
+      { name: '从左飞入', value: 'lightSpeedInLeft' },
+    ],
+  },
+]
+
+export const EXIT_ANIMATIONS = [
+  {
+    type: 'bounce',
+    name: '弹跳',
+    children: [
+      { name: '弹出', value: 'bounceOut' },
+      { name: '向左弹出', value: 'bounceOutLeft' },
+      { name: '向右弹出', value: 'bounceOutRight' },
+      { name: '向上弹出', value: 'bounceOutUp' },
+      { name: '向下弹出', value: 'bounceOutDown' },
+    ],
+  },
+  {
+    type: 'fade',
+    name: '浮现',
+    children: [
+      { name: '浮出', value: 'fadeOut' },
+      { name: '向下浮出', value: 'fadeOutDown' },
+      { name: '向下长距浮出', value: 'fadeOutDownBig' },
+      { name: '向左浮出', value: 'fadeOutLeft' },
+      { name: '向左长距浮出', value: 'fadeOutLeftBig' },
+      { name: '向右浮出', value: 'fadeOutRight' },
+      { name: '向右长距浮出', value: 'fadeOutRightBig' },
+      { name: '向上浮出', value: 'fadeOutUp' },
+      { name: '向上长距浮出', value: 'fadeOutUpBig' },
+      { name: '从左上浮出', value: 'fadeOutTopLeft' },
+      { name: '从右上浮出', value: 'fadeOutTopRight' },
+      { name: '从左下浮出', value: 'fadeOutBottomLeft' },
+      { name: '从右下浮出', value: 'fadeOutBottomRight' },
+    ],
+  },
+  {
+    type: 'rotate',
+    name: '旋转',
+    children: [
+      { name: '旋转退出', value: 'rotateOut' },
+      { name: '绕左下退出', value: 'rotateOutDownLeft' },
+      { name: '绕右下退出', value: 'rotateOutDownRight' },
+      { name: '绕左上退出', value: 'rotateOutUpLeft' },
+      { name: '绕右上退出', value: 'rotateOutUpRight' },
+    ],
+  },
+  {
+    type: 'zoom',
+    name: '缩放',
+    children: [
+      { name: '缩小退出', value: 'zoomOut' },
+      { name: '向下缩小退出', value: 'zoomOutDown' },
+      { name: '从左缩小退出', value: 'zoomOutLeft' },
+      { name: '从右缩小退出', value: 'zoomOutRight' },
+      { name: '向上缩小退出', value: 'zoomOutUp' },
+    ],
+  },
+  {
+    type: 'slide',
+    name: '滑出',
+    children: [
+      { name: '向下滑出', value: 'slideOutDown' },
+      { name: '从左滑出', value: 'slideOutLeft' },
+      { name: '从右滑出', value: 'slideOutRight' },
+      { name: '向上滑出', value: 'slideOutUp' },
+    ],
+  },
+  {
+    type: 'flip',
+    name: '翻转',
+    children: [
+      { name: 'X轴翻转退出', value: 'flipOutX' },
+      { name: 'Y轴翻转退出', value: 'flipOutY' },
+    ],
+  },
+  {
+    type: 'back',
+    name: '缩小滑出',
+    children: [
+      { name: '向下缩小滑出', value: 'backOutDown' },
+      { name: '从左缩小滑出', value: 'backOutLeft' },
+      { name: '从右缩小滑出', value: 'backOutRight' },
+      { name: '向上缩小滑出', value: 'backOutUp' },
+    ],
+  },
+  {
+    type: 'lightSpeed',
+    name: '飞出',
+    children: [
+      { name: '从右飞出', value: 'lightSpeedOutRight' },
+      { name: '从左飞出', value: 'lightSpeedOutLeft' },
+    ],
+  },
+]
+
+export const ATTENTION_ANIMATIONS = [
+  {
+    type: 'shake',
+    name: '晃动',
+    children: [
+      { name: '左右摇晃', value: 'shakeX' },
+      { name: '上下摇晃', value: 'shakeY' },
+      { name: '摇头', value: 'headShake' },
+      { name: '摆动', value: 'swing' },
+      { name: '晃动', value: 'wobble' },
+      { name: '惊恐', value: 'tada' },
+      { name: '果冻', value: 'jello' },
+    ],
+  },
+  {
+    type: 'other',
+    name: '其他',
+    children: [
+      { name: '弹跳', value: 'bounce' },
+      { name: '闪烁', value: 'flash' },
+      { name: '脉搏', value: 'pulse' },
+      { name: '橡皮筋', value: 'rubberBand' },
+      { name: '心跳（快）', value: 'heartBeat' },
+    ],
+  },
+]
+
+interface SlideAnimation {
+  label: string
+  value: TurningMode
+}
+
+export const SLIDE_ANIMATIONS: SlideAnimation[] = [
+  { label: '无', value: 'no' },
+  { label: '随机', value: 'random' },
+  { label: '左右推移', value: 'slideX' },
+  { label: '上下推移', value: 'slideY' },
+  { label: '左右推移（3D）', value: 'slideX3D' },
+  { label: '上下推移（3D）', value: 'slideY3D' },
+  { label: '淡入淡出', value: 'fade' },
+  { label: '旋转', value: 'rotate' },
+  { label: '上下展开', value: 'scaleY' },
+  { label: '左右展开', value: 'scaleX' },
+  { label: '放大', value: 'scale' },
+  { label: '缩小', value: 'scaleReverse' },
 ]

frontend/src/configs/theme.ts

@@ -1,122 +1,122 @@
-export interface PresetTheme {
-  background: string
-  fontColor: string
-  borderColor: string
-  fontname: string
-  colors: string[]
-}
-
-export const PRESET_THEMES: PresetTheme[] = [
-  {
-    background: '#ffffff',
-    fontColor: '#333333',
-    borderColor: '#41719c',
-    fontname: '',
-    colors: ['#5b9bd5', '#ed7d31', '#a5a5a5', '#ffc000', '#4472c4', '#70ad47'],
-  },
-  {
-    background: '#ffffff',
-    fontColor: '#333333',
-    borderColor: '#5f6f1c',
-    fontname: '',
-    colors: ['#83992a', '#3c9670', '#44709d', '#a23b32', '#d87728', '#deb340'],
-  },
-  {
-    background: '#ffffff',
-    fontColor: '#333333',
-    borderColor: '#a75f0a',
-    fontname: '',
-    colors: ['#e48312', '#bd582c', '#865640', '#9b8357', '#c2bc80', '#94a088'],
-  },
-  {
-    background: '#ffffff',
-    fontColor: '#333333',
-    borderColor: '#7c91a8',
-    fontname: '',
-    colors: ['#bdc8df', '#003fa9', '#f5ba00', '#ff7567', '#7676d9', '#923ffc'],
-  },
-  {
-    background: '#ffffff',
-    fontColor: '#333333',
-    borderColor: '#688e19',
-    fontname: '',
-    colors: ['#90c225', '#54a121', '#e6b91e', '#e86618', '#c42f19', '#918756'],
-  },
-  {
-    background: '#ffffff',
-    fontColor: '#333333',
-    borderColor: '#4495b0',
-    fontname: '',
-    colors: ['#1cade4', '#2683c6', '#27ced7', '#42ba97', '#3e8853', '#62a39f'],
-  },
-  {
-    background: '#e9efd6',
-    fontColor: '#333333',
-    borderColor: '#782009',
-    fontname: '',
-    colors: ['#a5300f', '#de7e18', '#9f8351', '#728653', '#92aa4c', '#6aac91'],
-  },
-  {
-    background: '#17444e',
-    fontColor: '#ffffff',
-    borderColor: '#800c0b',
-    fontname: '',
-    colors: ['#b01513', '#ea6312', '#e6b729', '#6bab90', '#55839a', '#9e5d9d'],
-  },
-  {
-    background: '#36234d',
-    fontColor: '#ffffff',
-    borderColor: '#830949',
-    fontname: '',
-    colors: ['#b31166', '#e33d6f', '#e45f3c', '#e9943a', '#9b6bf2', '#d63cd0'],
-  },
-  {
-    background: '#247fad',
-    fontColor: '#ffffff',
-    borderColor: '#032e45',
-    fontname: '',
-    colors: ['#052f61', '#a50e82', '#14967c', '#6a9e1f', '#e87d37', '#c62324'],
-  },
-  {
-    background: '#103f55',
-    fontColor: '#ffffff',
-    borderColor: '#2d7f8a',
-    fontname: '',
-    colors: ['#40aebd', '#97e8d5', '#a1cf49', '#628f3e', '#f2df3a', '#fcb01c'],
-  },
-  {
-    background: '#242367',
-    fontColor: '#ffffff',
-    borderColor: '#7d2b8d',
-    fontname: '',
-    colors: ['#ac3ec1', '#477bd1', '#46b298', '#90ba4c', '#dd9d31', '#e25345'],
-  },
-  {
-    background: '#e4b75e',
-    fontColor: '#333333',
-    borderColor: '#b68317',
-    fontname: '',
-    colors: ['#a5644e', '#b58b80', '#c3986d', '#a19574', '#c17529', '#826277'],
-  },
-  {
-    background: '#333333',
-    fontColor: '#ffffff',
-    borderColor: '#7c91a8',
-    fontname: '',
-    colors: ['#bdc8df', '#003fa9', '#f5ba00', '#ff7567', '#7676d9', '#923ffc'],
-  },
-  {
-    background: '#2b2b2d',
-    fontColor: '#ffffff',
-    borderColor: '#893011',
-    fontname: '',
-    colors: ['#bc451b', '#d3ba68', '#bb8640', '#ad9277', '#a55a43', '#ad9d7b'],
-  },
-  {
-    background: '#171b1e',
-    fontColor: '#ffffff',
-    borderColor: '#505050',
-    fontname: '',
-    colors: ['#6f6f6f', '#bfbfa5', '#dbd084', '#e7bf5f', '#e9a039', '#cf7133'],
-  },
+export interface PresetTheme {
+  background: string
+  fontColor: string
+  borderColor: string
+  fontname: string
+  colors: string[]
+}
+
+export const PRESET_THEMES: PresetTheme[] = [
+  {
+    background: '#ffffff',
+    fontColor: '#333333',
+    borderColor: '#41719c',
+    fontname: '',
+    colors: ['#5b9bd5', '#ed7d31', '#a5a5a5', '#ffc000', '#4472c4', '#70ad47'],
+  },
+  {
+    background: '#ffffff',
+    fontColor: '#333333',
+    borderColor: '#5f6f1c',
+    fontname: '',
+    colors: ['#83992a', '#3c9670', '#44709d', '#a23b32', '#d87728', '#deb340'],
+  },
+  {
+    background: '#ffffff',
+    fontColor: '#333333',
+    borderColor: '#a75f0a',
+    fontname: '',
+    colors: ['#e48312', '#bd582c', '#865640', '#9b8357', '#c2bc80', '#94a088'],
+  },
+  {
+    background: '#ffffff',
+    fontColor: '#333333',
+    borderColor: '#7c91a8',
+    fontname: '',
+    colors: ['#bdc8df', '#003fa9', '#f5ba00', '#ff7567', '#7676d9', '#923ffc'],
+  },
+  {
+    background: '#ffffff',
+    fontColor: '#333333',
+    borderColor: '#688e19',
+    fontname: '',
+    colors: ['#90c225', '#54a121', '#e6b91e', '#e86618', '#c42f19', '#918756'],
+  },
+  {
+    background: '#ffffff',
+    fontColor: '#333333',
+    borderColor: '#4495b0',
+    fontname: '',
+    colors: ['#1cade4', '#2683c6', '#27ced7', '#42ba97', '#3e8853', '#62a39f'],
+  },
+  {
+    background: '#e9efd6',
+    fontColor: '#333333',
+    borderColor: '#782009',
+    fontname: '',
+    colors: ['#a5300f', '#de7e18', '#9f8351', '#728653', '#92aa4c', '#6aac91'],
+  },
+  {
+    background: '#17444e',
+    fontColor: '#ffffff',
+    borderColor: '#800c0b',
+    fontname: '',
+    colors: ['#b01513', '#ea6312', '#e6b729', '#6bab90', '#55839a', '#9e5d9d'],
+  },
+  {
+    background: '#36234d',
+    fontColor: '#ffffff',
+    borderColor: '#830949',
+    fontname: '',
+    colors: ['#b31166', '#e33d6f', '#e45f3c', '#e9943a', '#9b6bf2', '#d63cd0'],
+  },
+  {
+    background: '#247fad',
+    fontColor: '#ffffff',
+    borderColor: '#032e45',
+    fontname: '',
+    colors: ['#052f61', '#a50e82', '#14967c', '#6a9e1f', '#e87d37', '#c62324'],
+  },
+  {
+    background: '#103f55',
+    fontColor: '#ffffff',
+    borderColor: '#2d7f8a',
+    fontname: '',
+    colors: ['#40aebd', '#97e8d5', '#a1cf49', '#628f3e', '#f2df3a', '#fcb01c'],
+  },
+  {
+    background: '#242367',
+    fontColor: '#ffffff',
+    borderColor: '#7d2b8d',
+    fontname: '',
+    colors: ['#ac3ec1', '#477bd1', '#46b298', '#90ba4c', '#dd9d31', '#e25345'],
+  },
+  {
+    background: '#e4b75e',
+    fontColor: '#333333',
+    borderColor: '#b68317',
+    fontname: '',
+    colors: ['#a5644e', '#b58b80', '#c3986d', '#a19574', '#c17529', '#826277'],
+  },
+  {
+    background: '#333333',
+    fontColor: '#ffffff',
+    borderColor: '#7c91a8',
+    fontname: '',
+    colors: ['#bdc8df', '#003fa9', '#f5ba00', '#ff7567', '#7676d9', '#923ffc'],
+  },
+  {
+    background: '#2b2b2d',
+    fontColor: '#ffffff',
+    borderColor: '#893011',
+    fontname: '',
+    colors: ['#bc451b', '#d3ba68', '#bb8640', '#ad9277', '#a55a43', '#ad9d7b'],
+  },
+  {
+    background: '#171b1e',
+    fontColor: '#ffffff',
+    borderColor: '#505050',
+    fontname: '',
+    colors: ['#6f6f6f', '#bfbfa5', '#dbd084', '#e7bf5f', '#e9a039', '#cf7133'],
+  },
 ]

frontend/src/hooks/useAlignActiveElement.ts

@@ -1,177 +1,177 @@
-import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore } from '@/store'
-import type { PPTElement } from '@/types/slides'
-import { ElementAlignCommands } from '@/types/edit'
-import { getElementListRange, getRectRotatedOffset } from '@/utils/element'
-import useHistorySnapshot from './useHistorySnapshot'
-
-interface RangeMap {
-  [id: string]: ReturnType<typeof getElementListRange> 
-}
-
-export default () => {
-  const slidesStore = useSlidesStore()
-  const { activeElementIdList, activeElementList } = storeToRefs(useMainStore())
-  const { currentSlide } = storeToRefs(slidesStore)
-
-  const { addHistorySnapshot } = useHistorySnapshot()
-
-  /**
-   * 对齐选中的元素
-   * @param command 对齐方向
-   */
-  const alignActiveElement = (command: ElementAlignCommands) => {
-    const { minX, maxX, minY, maxY } = getElementListRange(activeElementList.value)
-    const elementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
-
-    // 如果所选择的元素为组合元素的成员，需要计算该组合的整体范围
-    const groupElementRangeMap: RangeMap = {}
-    for (const activeElement of activeElementList.value) {
-      if (activeElement.groupId && !groupElementRangeMap[activeElement.groupId]) {
-        const groupElements = activeElementList.value.filter(item => item.groupId === activeElement.groupId)
-        groupElementRangeMap[activeElement.groupId] = getElementListRange(groupElements)
-      }
-    }
-
-    // 根据不同的命令，计算对齐的位置
-    if (command === ElementAlignCommands.LEFT) {
-      elementList.forEach(element => {
-        if (activeElementIdList.value.includes(element.id)) {
-          if (!element.groupId) {
-            if ('rotate' in element && element.rotate) {
-              const { offsetX } = getRectRotatedOffset({
-                left: element.left,
-                top: element.top,
-                width: element.width,
-                height: element.height,
-                rotate: element.rotate,
-              })
-              element.left = minX - offsetX
-            }
-            else element.left = minX
-          }
-          else {
-            const range = groupElementRangeMap[element.groupId]
-            const offset = range.minX - minX
-            element.left = element.left - offset
-          }
-        }
-      })
-    }
-    else if (command === ElementAlignCommands.RIGHT) {
-      elementList.forEach(element => {
-        if (activeElementIdList.value.includes(element.id)) {
-          if (!element.groupId) {
-            const elWidth = element.type === 'line' ? Math.max(element.start[0], element.end[0]) : element.width
-            if ('rotate' in element && element.rotate) {
-              const { offsetX } = getRectRotatedOffset({
-                left: element.left,
-                top: element.top,
-                width: element.width,
-                height: element.height,
-                rotate: element.rotate,
-              })
-              element.left = maxX - elWidth + offsetX
-            }
-            else element.left = maxX - elWidth
-          }
-          else {
-            const range = groupElementRangeMap[element.groupId]
-            const offset = range.maxX - maxX
-            element.left = element.left - offset
-          }
-        }
-      })
-    }
-    else if (command === ElementAlignCommands.TOP) {
-      elementList.forEach(element => {
-        if (activeElementIdList.value.includes(element.id)) {
-          if (!element.groupId) {
-            if ('rotate' in element && element.rotate) {
-              const { offsetY } = getRectRotatedOffset({
-                left: element.left,
-                top: element.top,
-                width: element.width,
-                height: element.height,
-                rotate: element.rotate,
-              })
-              element.top = minY - offsetY
-            }
-            else element.top = minY
-          }
-          else {
-            const range = groupElementRangeMap[element.groupId]
-            const offset = range.minY - minY
-            element.top = element.top - offset
-          }
-        }
-      })
-    }
-    else if (command === ElementAlignCommands.BOTTOM) {
-      elementList.forEach(element => {
-        if (activeElementIdList.value.includes(element.id)) {
-          if (!element.groupId) {
-            const elHeight = element.type === 'line' ? Math.max(element.start[1], element.end[1]) : element.height
-            if ('rotate' in element && element.rotate) {
-              const { offsetY } = getRectRotatedOffset({
-                left: element.left,
-                top: element.top,
-                width: element.width,
-                height: element.height,
-                rotate: element.rotate,
-              })
-              element.top = maxY - elHeight + offsetY
-            }
-            else element.top = maxY - elHeight
-          }
-          else {
-            const range = groupElementRangeMap[element.groupId]
-            const offset = range.maxY - maxY
-            element.top = element.top - offset
-          }
-        }
-      })
-    }
-    else if (command === ElementAlignCommands.HORIZONTAL) {
-      const horizontalCenter = (minX + maxX) / 2
-      elementList.forEach(element => {
-        if (activeElementIdList.value.includes(element.id)) {
-          if (!element.groupId) {
-            const elWidth = element.type === 'line' ? Math.max(element.start[0], element.end[0]) : element.width
-            element.left = horizontalCenter - elWidth / 2
-          }
-          else {
-            const range = groupElementRangeMap[element.groupId]
-            const center = (range.maxX + range.minX) / 2
-            const offset = center - horizontalCenter
-            element.left = element.left - offset
-          }
-        }
-      })
-    }
-    else if (command === ElementAlignCommands.VERTICAL) {
-      const verticalCenter = (minY + maxY) / 2
-      elementList.forEach(element => {
-        if (activeElementIdList.value.includes(element.id)) {
-          if (!element.groupId) {
-            const elHeight = element.type === 'line' ? Math.max(element.start[1], element.end[1]) : element.height
-            element.top = verticalCenter - elHeight / 2
-          }
-          else {
-            const range = groupElementRangeMap[element.groupId]
-            const center = (range.maxY + range.minY) / 2
-            const offset = center - verticalCenter
-            element.top = element.top - offset
-          }
-        }
-      })
-    }
-
-    slidesStore.updateSlide({ elements: elementList })
-    addHistorySnapshot()
-  }
-
-  return {
-    alignActiveElement,
-  }
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { PPTElement } from '@/types/slides'
+import { ElementAlignCommands } from '@/types/edit'
+import { getElementListRange, getRectRotatedOffset } from '@/utils/element'
+import useHistorySnapshot from './useHistorySnapshot'
+
+interface RangeMap {
+  [id: string]: ReturnType<typeof getElementListRange> 
+}
+
+export default () => {
+  const slidesStore = useSlidesStore()
+  const { activeElementIdList, activeElementList } = storeToRefs(useMainStore())
+  const { currentSlide } = storeToRefs(slidesStore)
+
+  const { addHistorySnapshot } = useHistorySnapshot()
+
+  /**
+   * 对齐选中的元素
+   * @param command 对齐方向
+   */
+  const alignActiveElement = (command: ElementAlignCommands) => {
+    const { minX, maxX, minY, maxY } = getElementListRange(activeElementList.value)
+    const elementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
+
+    // 如果所选择的元素为组合元素的成员，需要计算该组合的整体范围
+    const groupElementRangeMap: RangeMap = {}
+    for (const activeElement of activeElementList.value) {
+      if (activeElement.groupId && !groupElementRangeMap[activeElement.groupId]) {
+        const groupElements = activeElementList.value.filter(item => item.groupId === activeElement.groupId)
+        groupElementRangeMap[activeElement.groupId] = getElementListRange(groupElements)
+      }
+    }
+
+    // 根据不同的命令，计算对齐的位置
+    if (command === ElementAlignCommands.LEFT) {
+      elementList.forEach(element => {
+        if (activeElementIdList.value.includes(element.id)) {
+          if (!element.groupId) {
+            if ('rotate' in element && element.rotate) {
+              const { offsetX } = getRectRotatedOffset({
+                left: element.left,
+                top: element.top,
+                width: element.width,
+                height: element.height,
+                rotate: element.rotate,
+              })
+              element.left = minX - offsetX
+            }
+            else element.left = minX
+          }
+          else {
+            const range = groupElementRangeMap[element.groupId]
+            const offset = range.minX - minX
+            element.left = element.left - offset
+          }
+        }
+      })
+    }
+    else if (command === ElementAlignCommands.RIGHT) {
+      elementList.forEach(element => {
+        if (activeElementIdList.value.includes(element.id)) {
+          if (!element.groupId) {
+            const elWidth = element.type === 'line' ? Math.max(element.start[0], element.end[0]) : element.width
+            if ('rotate' in element && element.rotate) {
+              const { offsetX } = getRectRotatedOffset({
+                left: element.left,
+                top: element.top,
+                width: element.width,
+                height: element.height,
+                rotate: element.rotate,
+              })
+              element.left = maxX - elWidth + offsetX
+            }
+            else element.left = maxX - elWidth
+          }
+          else {
+            const range = groupElementRangeMap[element.groupId]
+            const offset = range.maxX - maxX
+            element.left = element.left - offset
+          }
+        }
+      })
+    }
+    else if (command === ElementAlignCommands.TOP) {
+      elementList.forEach(element => {
+        if (activeElementIdList.value.includes(element.id)) {
+          if (!element.groupId) {
+            if ('rotate' in element && element.rotate) {
+              const { offsetY } = getRectRotatedOffset({
+                left: element.left,
+                top: element.top,
+                width: element.width,
+                height: element.height,
+                rotate: element.rotate,
+              })
+              element.top = minY - offsetY
+            }
+            else element.top = minY
+          }
+          else {
+            const range = groupElementRangeMap[element.groupId]
+            const offset = range.minY - minY
+            element.top = element.top - offset
+          }
+        }
+      })
+    }
+    else if (command === ElementAlignCommands.BOTTOM) {
+      elementList.forEach(element => {
+        if (activeElementIdList.value.includes(element.id)) {
+          if (!element.groupId) {
+            const elHeight = element.type === 'line' ? Math.max(element.start[1], element.end[1]) : element.height
+            if ('rotate' in element && element.rotate) {
+              const { offsetY } = getRectRotatedOffset({
+                left: element.left,
+                top: element.top,
+                width: element.width,
+                height: element.height,
+                rotate: element.rotate,
+              })
+              element.top = maxY - elHeight + offsetY
+            }
+            else element.top = maxY - elHeight
+          }
+          else {
+            const range = groupElementRangeMap[element.groupId]
+            const offset = range.maxY - maxY
+            element.top = element.top - offset
+          }
+        }
+      })
+    }
+    else if (command === ElementAlignCommands.HORIZONTAL) {
+      const horizontalCenter = (minX + maxX) / 2
+      elementList.forEach(element => {
+        if (activeElementIdList.value.includes(element.id)) {
+          if (!element.groupId) {
+            const elWidth = element.type === 'line' ? Math.max(element.start[0], element.end[0]) : element.width
+            element.left = horizontalCenter - elWidth / 2
+          }
+          else {
+            const range = groupElementRangeMap[element.groupId]
+            const center = (range.maxX + range.minX) / 2
+            const offset = center - horizontalCenter
+            element.left = element.left - offset
+          }
+        }
+      })
+    }
+    else if (command === ElementAlignCommands.VERTICAL) {
+      const verticalCenter = (minY + maxY) / 2
+      elementList.forEach(element => {
+        if (activeElementIdList.value.includes(element.id)) {
+          if (!element.groupId) {
+            const elHeight = element.type === 'line' ? Math.max(element.start[1], element.end[1]) : element.height
+            element.top = verticalCenter - elHeight / 2
+          }
+          else {
+            const range = groupElementRangeMap[element.groupId]
+            const center = (range.maxY + range.minY) / 2
+            const offset = center - verticalCenter
+            element.top = element.top - offset
+          }
+        }
+      })
+    }
+
+    slidesStore.updateSlide({ elements: elementList })
+    addHistorySnapshot()
+  }
+
+  return {
+    alignActiveElement,
+  }
 }

frontend/src/hooks/useExport.ts

@@ -80,11 +80,439 @@ export default () => {
     saveAs(blob, `${title.value}.json`)
   }
 
+  // 新增：导出为HTML网页
+  const exportHTML = (_slides: Slide[], options: any = {}) => {
+    exporting.value = true
+    
+    try {
+      const {
+        includeInteractivity = false,
+        standalone = true,
+        includeCSS = true
+      } = options
+
+      // 生成HTML内容
+      const htmlContent = generateHTMLPresentation(_slides, {
+        title: title.value,
+        theme: theme.value,
+        viewportSize: viewportSize.value,
+        viewportRatio: viewportRatio.value,
+        includeInteractivity,
+        standalone,
+        includeCSS
+      })
+
+      // 创建并下载HTML文件
+      const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' })
+      saveAs(blob, `${title.value}.html`)
+      
+      message.success('HTML网页导出成功')
+    } 
+    catch (error: any) {
+      message.error('HTML网页导出失败')
+    } 
+    finally {
+      exporting.value = false
+    }
+  }
+
+  // 生成完整的HTML演示文稿
+  const generateHTMLPresentation = (slides: Slide[], config: any) => {
+    const { title, theme, viewportSize, viewportRatio, includeInteractivity, includeCSS } = config
+    
+    const slideHeight = Math.round(viewportSize * viewportRatio)
+    
+    // CSS样式
+    const css = includeCSS ? `
+      <style>
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+        
+        body {
+          font-family: '${theme.fontName}', 'Microsoft YaHei', Arial, sans-serif;
+          background: ${theme.backgroundColor};
+          color: ${theme.fontColor};
+          overflow: hidden;
+        }
+        
+        .presentation-container {
+          width: 100vw;
+          height: 100vh;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background: #000;
+        }
+        
+        .slide-container {
+          width: ${viewportSize}px;
+          height: ${slideHeight}px;
+          background: #fff;
+          position: relative;
+          overflow: hidden;
+          transform-origin: center;
+          box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+        }
+        
+        .slide {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: none;
+        }
+        
+        .slide.active {
+          display: block;
+        }
+        
+        .element {
+          position: absolute;
+          word-wrap: break-word;
+        }
+        
+        .text-element {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+        }
+        
+        .image-element img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+        
+        .shape-element {
+          border-radius: var(--border-radius, 0);
+        }
+        
+        .navigation {
+          position: fixed;
+          bottom: 30px;
+          left: 50%;
+          transform: translateX(-50%);
+          display: flex;
+          gap: 10px;
+          z-index: 1000;
+        }
+        
+        .nav-btn {
+          padding: 12px 20px;
+          background: rgba(255,255,255,0.9);
+          border: none;
+          border-radius: 25px;
+          cursor: pointer;
+          font-size: 14px;
+          font-weight: bold;
+          transition: all 0.3s ease;
+          box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        }
+        
+        .nav-btn:hover {
+          background: rgba(255,255,255,1);
+          transform: translateY(-2px);
+        }
+        
+        .nav-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        
+        .slide-counter {
+          position: fixed;
+          top: 30px;
+          right: 30px;
+          background: rgba(0,0,0,0.7);
+          color: white;
+          padding: 8px 16px;
+          border-radius: 20px;
+          font-size: 14px;
+          z-index: 1000;
+        }
+        
+        .fullscreen-btn {
+          position: fixed;
+          top: 30px;
+          left: 30px;
+          background: rgba(0,0,0,0.7);
+          color: white;
+          border: none;
+          padding: 8px 16px;
+          border-radius: 20px;
+          cursor: pointer;
+          font-size: 14px;
+          z-index: 1000;
+        }
+        
+        /* 响应式缩放 */
+        @media (max-width: 1200px) {
+          .slide-container {
+            transform: scale(0.8);
+          }
+        }
+        
+        @media (max-width: 800px) {
+          .slide-container {
+            transform: scale(0.6);
+          }
+        }
+        
+        @media (max-width: 600px) {
+          .slide-container {
+            transform: scale(0.4);
+          }
+        }
+      </style>
+    ` : ''
+    
+    // JavaScript交互功能
+    const javascript = includeInteractivity ? `
+      <script>
+        class PPTViewer {
+          constructor() {
+            this.currentSlide = 0;
+            this.totalSlides = ${slides.length};
+            this.init();
+          }
+          
+          init() {
+            this.updateSlide();
+            this.bindEvents();
+            this.autoScale();
+            window.addEventListener('resize', () => this.autoScale());
+          }
+          
+          bindEvents() {
+            document.addEventListener('keydown', (e) => {
+              switch(e.key) {
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                  this.prevSlide();
+                  break;
+                case 'ArrowRight':
+                case 'ArrowDown':
+                case ' ':
+                  this.nextSlide();
+                  break;
+                case 'Home':
+                  this.goToSlide(0);
+                  break;
+                case 'End':
+                  this.goToSlide(this.totalSlides - 1);
+                  break;
+                case 'F11':
+                  this.toggleFullscreen();
+                  break;
+              }
+            });
+          }
+          
+          nextSlide() {
+            if (this.currentSlide < this.totalSlides - 1) {
+              this.currentSlide++;
+              this.updateSlide();
+            }
+          }
+          
+          prevSlide() {
+            if (this.currentSlide > 0) {
+              this.currentSlide--;
+              this.updateSlide();
+            }
+          }
+          
+          goToSlide(index) {
+            if (index >= 0 && index < this.totalSlides) {
+              this.currentSlide = index;
+              this.updateSlide();
+            }
+          }
+          
+          updateSlide() {
+            // 隐藏所有幻灯片
+            document.querySelectorAll('.slide').forEach(slide => {
+              slide.classList.remove('active');
+            });
+            
+            // 显示当前幻灯片
+            const currentSlideEl = document.getElementById('slide-' + this.currentSlide);
+            if (currentSlideEl) {
+              currentSlideEl.classList.add('active');
+            }
+            
+            // 更新计数器
+            const counter = document.querySelector('.slide-counter');
+            if (counter) {
+              counter.textContent = \`\${this.currentSlide + 1} / \${this.totalSlides}\`;
+            }
+            
+            // 更新导航按钮状态
+            const prevBtn = document.getElementById('prevBtn');
+            const nextBtn = document.getElementById('nextBtn');
+            if (prevBtn) prevBtn.disabled = this.currentSlide === 0;
+            if (nextBtn) nextBtn.disabled = this.currentSlide === this.totalSlides - 1;
+          }
+          
+          autoScale() {
+            const container = document.querySelector('.slide-container');
+            if (!container) return;
+            
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+            const slideWidth = ${viewportSize};
+            const slideHeight = ${slideHeight};
+            
+            const scaleX = (windowWidth * 0.9) / slideWidth;
+            const scaleY = (windowHeight * 0.9) / slideHeight;
+            const scale = Math.min(scaleX, scaleY, 1);
+            
+            container.style.transform = \`scale(\${scale})\`;
+          }
+          
+          toggleFullscreen() {
+            if (!document.fullscreenElement) {
+              document.documentElement.requestFullscreen();
+            } else {
+              document.exitFullscreen();
+            }
+          }
+        }
+        
+        // 初始化PPT查看器
+        document.addEventListener('DOMContentLoaded', () => {
+          new PPTViewer();
+        });
+      </script>
+    ` : ''
+    
+    // 生成幻灯片HTML
+    const slidesHTML = slides.map((slide, index) => {
+      const slideBackground = formatSlideBackground(slide.background)
+      const elementsHTML = slide.elements.map(element => formatElement(element)).join('')
+      
+      return `
+        <div id="slide-${index}" class="slide ${index === 0 ? 'active' : ''}" style="${slideBackground}">
+          ${elementsHTML}
+        </div>
+      `
+    }).join('')
+    
+    // 导航控件HTML
+    const navigationHTML = includeInteractivity ? `
+      <div class="navigation">
+        <button id="prevBtn" class="nav-btn" onclick="window.pptViewer?.prevSlide()">上一页</button>
+        <button id="nextBtn" class="nav-btn" onclick="window.pptViewer?.nextSlide()">下一页</button>
+      </div>
+      <div class="slide-counter">1 / ${slides.length}</div>
+      <button class="fullscreen-btn" onclick="window.pptViewer?.toggleFullscreen()">全屏</button>
+    ` : ''
+    
+    // 组装完整HTML
+    const html = `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+  <meta name="description" content="PPTist导出的HTML演示��稿">
+  <meta name="generator" content="PPTist">
+  ${css}
+</head>
+<body>
+  <div class="presentation-container">
+    <div class="slide-container">
+      ${slidesHTML}
+    </div>
+  </div>
+  ${navigationHTML}
+  ${javascript}
+</body>
+</html>`
+    
+    return html
+  }
+
+  // 格式化幻灯片背景
+  const formatSlideBackground = (background: any) => {
+    if (!background) {
+      return 'background: #ffffff;'
+    }
+    
+    if (background.type === 'solid') {
+      return `background: ${background.color || '#ffffff'};`
+    }
+    
+    if (background.type === 'gradient') {
+      const { gradientType, colors } = background
+      if (gradientType === 'linear') {
+        return `background: linear-gradient(${background.gradientRotate || 0}deg, ${colors.map((c: any) => c.color).join(', ')});`
+      }
+      return `background: radial-gradient(${colors.map((c: any) => c.color).join(', ')});`
+    }
+    
+    if (background.type === 'image' && background.image) {
+      return `background-image: url(${background.image.src}); background-size: cover; background-position: center;`
+    }
+    
+    return 'background: #ffffff;'
+  }
+
+  // 格式化元素
+  const formatElement = (element: any) => {
+    const baseStyle = `
+      left: ${element.left || 0}px;
+      top: ${element.top || 0}px;
+      width: ${element.width || 100}px;
+      height: ${element.height || 100}px;
+      transform: rotate(${element.rotate || 0}deg);
+    `
+    
+    if (element.type === 'text') {
+      const textStyle = `
+        font-size: ${element.fontSize || 16}px;
+        font-family: ${element.fontName || 'Microsoft YaHei'};
+        color: ${element.color || '#000000'};
+        font-weight: ${element.bold ? 'bold' : 'normal'};
+        font-style: ${element.italic ? 'italic' : 'normal'};
+        text-decoration: ${element.underline ? 'underline' : 'none'};
+        text-align: ${element.align || 'left'};
+        line-height: ${element.lineHeight || 1.5};
+      `
+      
+      return `<div class="element text-element" style="${baseStyle}${textStyle}">${element.content || ''}</div>`
+    }
+    
+    if (element.type === 'image' && element.src) {
+      return `<div class="element image-element" style="${baseStyle}"><img src="${element.src}" alt="图片" /></div>`
+    }
+    
+    if (element.type === 'shape') {
+      const shapeStyle = `
+        background: ${element.fill || '#ffffff'};
+        border: ${element.outline?.width || 0}px solid ${element.outline?.color || '#000000'};
+        border-radius: ${element.borderRadius || 0}px;
+      `
+      
+      return `<div class="element shape-element" style="${baseStyle}${shapeStyle}"></div>`
+    }
+    
+    // 其他元素类型的基本处理
+    return `<div class="element" style="${baseStyle}"></div>`
+  }
+
   // 格式化颜色值为 透明度 + HexString，供pptxgenjs使用
   const formatColor = (_color: string) => {
-    if (!_color) return {
-      alpha: 0,
-      color: '#000000',
+    if (!_color) {
+      return {
+        alpha: 0,
+        color: '#000000',
+      }
     }
 
     const c = tinycolor(_color)
@@ -910,6 +1338,8 @@ export default () => {
     exportImage,
     exportJSON,
     exportSpecificFile,
+    exportHTML,
     exportPPTX,
+    generateHTMLPresentation,
   }
 }

frontend/src/hooks/useMoveElement.ts

@@ -1,61 +1,61 @@
-import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore } from '@/store'
-import type { PPTElement } from '@/types/slides'
-import { KEYS } from '@/configs/hotkey'
-import useHistorySnapshot from '@/hooks/useHistorySnapshot'
-
-export default () => {
-  const slidesStore = useSlidesStore()
-  const { activeElementIdList, activeGroupElementId } = storeToRefs(useMainStore())
-  const { currentSlide } = storeToRefs(slidesStore)
-
-  const { addHistorySnapshot } = useHistorySnapshot()
-
-  /**
-   * 将元素向指定方向移动指定的距离
-   * 组合元素成员中，存在被选中可独立操作的元素时，优先移动该元素。否则默认移动所有被选中的元素
-   * @param command 移动方向
-   * @param step 移动距离
-   */
-  const moveElement = (command: string, step = 1) => {
-    let newElementList: PPTElement[] = []
-
-    const move = (el: PPTElement) => {
-      let { left, top } = el
-      switch (command) {
-        case KEYS.LEFT: 
-          left = left - step
-          break
-        case KEYS.RIGHT: 
-          left = left + step
-          break
-        case KEYS.UP: 
-          top = top - step
-          break
-        case KEYS.DOWN: 
-          top = top + step
-          break
-        default: break
-      }
-      return { ...el, left, top }
-    }
-
-    if (activeGroupElementId.value) {
-      newElementList = currentSlide.value.elements.map(el => {
-        return activeGroupElementId.value === el.id ? move(el) : el
-      })
-    }
-    else {
-      newElementList = currentSlide.value.elements.map(el => {
-        return activeElementIdList.value.includes(el.id) ? move(el) : el
-      })
-    }
-
-    slidesStore.updateSlide({ elements: newElementList })
-    addHistorySnapshot()
-  }
-
-  return {
-    moveElement,
-  }
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { PPTElement } from '@/types/slides'
+import { KEYS } from '@/configs/hotkey'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+export default () => {
+  const slidesStore = useSlidesStore()
+  const { activeElementIdList, activeGroupElementId } = storeToRefs(useMainStore())
+  const { currentSlide } = storeToRefs(slidesStore)
+
+  const { addHistorySnapshot } = useHistorySnapshot()
+
+  /**
+   * 将元素向指定方向移动指定的距离
+   * 组合元素成员中，存在被选中可独立操作的元素时，优先移动该元素。否则默认移动所有被选中的元素
+   * @param command 移动方向
+   * @param step 移动距离
+   */
+  const moveElement = (command: string, step = 1) => {
+    let newElementList: PPTElement[] = []
+
+    const move = (el: PPTElement) => {
+      let { left, top } = el
+      switch (command) {
+        case KEYS.LEFT: 
+          left = left - step
+          break
+        case KEYS.RIGHT: 
+          left = left + step
+          break
+        case KEYS.UP: 
+          top = top - step
+          break
+        case KEYS.DOWN: 
+          top = top + step
+          break
+        default: break
+      }
+      return { ...el, left, top }
+    }
+
+    if (activeGroupElementId.value) {
+      newElementList = currentSlide.value.elements.map(el => {
+        return activeGroupElementId.value === el.id ? move(el) : el
+      })
+    }
+    else {
+      newElementList = currentSlide.value.elements.map(el => {
+        return activeElementIdList.value.includes(el.id) ? move(el) : el
+      })
+    }
+
+    slidesStore.updateSlide({ elements: newElementList })
+    addHistorySnapshot()
+  }
+
+  return {
+    moveElement,
+  }
 }

frontend/src/hooks/usePPTManager.ts

@@ -1,141 +1,141 @@
-import { onMounted, ref } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useAuthStore, useSlidesStore } from '@/store'
-import dataSyncService from '@/services/dataSyncService'
-import api from '@/services'
-import message from '@/utils/message'
-
-export default () => {
-  const authStore = useAuthStore()
-  const slidesStore = useSlidesStore()
-  const { title } = storeToRefs(slidesStore)
-  
-  const pptList = ref<any[]>([])
-  const loading = ref(false)
-  const showPPTManager = ref(false)
-
-  // 获取PPT列表
-  const refreshPPTList = async () => {
-    if (!authStore.isLoggedIn) return
-    
-    loading.value = true
-    try {
-      pptList.value = await dataSyncService.getPPTList()
-    } catch (error) {
-      message.error('获取PPT列表失败')
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 创建新PPT
-  const createNewPPT = async (title: string = '新建演示文稿') => {
-    try {
-      loading.value = true
-      const pptId = await dataSyncService.createNewPPT(title)
-      if (pptId) {
-        message.success('创建成功')
-        await refreshPPTList()
-        return pptId
-      }
-    } catch (error) {
-      message.error('创建失败')
-      throw error
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 加载PPT
-  const loadPPT = async (pptId: string) => {
-    try {
-      loading.value = true
-      await dataSyncService.loadPPT(pptId)
-      message.success('PPT加载成功')
-    } catch (error) {
-      message.error('PPT加载失败')
-      throw error
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 删除PPT
-  const deletePPT = async (pptId: string) => {
-    try {
-      loading.value = true
-      await dataSyncService.deletePPT(pptId)
-      message.success('删除成功')
-      await refreshPPTList()
-    } catch (error) {
-      message.error('删除失败')
-      throw error
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 保存当前PPT
-  const saveCurrentPPT = async () => {
-    try {
-      const success = await dataSyncService.manualSave()
-      if (success) {
-        message.success('保存成功')
-      } else {
-        message.error('保存失败')
-      }
-      return success
-    } catch (error) {
-      message.error('保存失败')
-      return false
-    }
-  }
-
-  // 生成分享链接
-  const generateShareLinks = async (slideIndex = 0) => {
-    try {
-      const links = await dataSyncService.generateShareLink(slideIndex)
-      message.success('分享链接生成成功')
-      return links
-    } catch (error) {
-      message.error('生成分享链接失败')
-      throw error
-    }
-  }
-
-  // 复制PPT
-  const copyPPT = async (pptId: string, newTitle: string) => {
-    try {
-      loading.value = true
-      const response = await api.copyPPT(pptId, newTitle)
-      message.success('复制成功')
-      await refreshPPTList()
-      return response.pptId
-    } catch (error) {
-      message.error('复制失败')
-      throw error
-    } finally {
-      loading.value = false
-    }
-  }
-
-  // 组件挂载时初始化
-  onMounted(() => {
-    if (authStore.isLoggedIn) {
-      refreshPPTList()
-    }
-  })
-
-  return {
-    pptList,
-    loading,
-    showPPTManager,
-    refreshPPTList,
-    createNewPPT,
-    loadPPT,
-    deletePPT,
-    saveCurrentPPT,
-    generateShareLinks,
-    copyPPT
-  }
+import { onMounted, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useAuthStore, useSlidesStore } from '@/store'
+import dataSyncService from '@/services/dataSyncService'
+import api from '@/services'
+import message from '@/utils/message'
+
+export default () => {
+  const authStore = useAuthStore()
+  const slidesStore = useSlidesStore()
+  const { title } = storeToRefs(slidesStore)
+  
+  const pptList = ref<any[]>([])
+  const loading = ref(false)
+  const showPPTManager = ref(false)
+
+  // 获取PPT列表
+  const refreshPPTList = async () => {
+    if (!authStore.isLoggedIn) return
+    
+    loading.value = true
+    try {
+      pptList.value = await dataSyncService.getPPTList()
+    } catch (error) {
+      message.error('获取PPT列表失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 创建新PPT
+  const createNewPPT = async (title: string = '新建演示文稿') => {
+    try {
+      loading.value = true
+      const pptId = await dataSyncService.createNewPPT(title)
+      if (pptId) {
+        message.success('创建成功')
+        await refreshPPTList()
+        return pptId
+      }
+    } catch (error) {
+      message.error('创建失败')
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 加载PPT
+  const loadPPT = async (pptId: string) => {
+    try {
+      loading.value = true
+      await dataSyncService.loadPPT(pptId)
+      message.success('PPT加载成功')
+    } catch (error) {
+      message.error('PPT加载失败')
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 删除PPT
+  const deletePPT = async (pptId: string) => {
+    try {
+      loading.value = true
+      await dataSyncService.deletePPT(pptId)
+      message.success('删除成功')
+      await refreshPPTList()
+    } catch (error) {
+      message.error('删除失败')
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 保存当前PPT
+  const saveCurrentPPT = async () => {
+    try {
+      const success = await dataSyncService.manualSave()
+      if (success) {
+        message.success('保存成功')
+      } else {
+        message.error('保存失败')
+      }
+      return success
+    } catch (error) {
+      message.error('保存失败')
+      return false
+    }
+  }
+
+  // 生成分享链接
+  const generateShareLinks = async (slideIndex = 0) => {
+    try {
+      const links = await dataSyncService.generateShareLink(slideIndex)
+      message.success('分享链接生成成功')
+      return links
+    } catch (error) {
+      message.error('生成分享链接失败')
+      throw error
+    }
+  }
+
+  // 复制PPT
+  const copyPPT = async (pptId: string, newTitle: string) => {
+    try {
+      loading.value = true
+      const response = await api.copyPPT(pptId, newTitle)
+      message.success('复制成功')
+      await refreshPPTList()
+      return response.pptId
+    } catch (error) {
+      message.error('复制失败')
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 组件挂载时初始化
+  onMounted(() => {
+    if (authStore.isLoggedIn) {
+      refreshPPTList()
+    }
+  })
+
+  return {
+    pptList,
+    loading,
+    showPPTManager,
+    refreshPPTList,
+    createNewPPT,
+    loadPPT,
+    deletePPT,
+    saveCurrentPPT,
+    generateShareLinks,
+    copyPPT
+  }
 }

frontend/src/hooks/useUniformDisplayElement.ts

@@ -1,261 +1,261 @@
-import { computed } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useMainStore, useSlidesStore } from '@/store'
-import type { PPTElement } from '@/types/slides'
-import { getElementRange, getElementListRange, getRectRotatedOffset } from '@/utils/element'
-import useHistorySnapshot from './useHistorySnapshot'
-
-interface ElementItem {
-  min: number
-  max: number
-  el: PPTElement
-}
-
-interface GroupItem {
-  groupId: string
-  els: PPTElement[]
-}
-
-interface GroupElementsItem {
-  min: number
-  max: number
-  els: PPTElement[]
-}
-
-type Item = ElementItem | GroupElementsItem
-
-interface ElementWithPos {
-  pos: number
-  el: PPTElement
-}
-
-interface LastPos {
-  min: number
-  max: number
-}
-
-export default () => {
-  const slidesStore = useSlidesStore()
-  const { activeElementIdList, activeElementList } = storeToRefs(useMainStore())
-  const { currentSlide } = storeToRefs(slidesStore)
-
-  const { addHistorySnapshot } = useHistorySnapshot()
-
-  const displayItemCount = computed(() => {
-    let count = 0
-    const groupIdList: string[] = []
-    for (const el of activeElementList.value) {
-      if (!el.groupId) count += 1
-      else if (!groupIdList.includes(el.groupId)) {
-        groupIdList.push(el.groupId)
-        count += 1
-      }
-    }
-    return count
-  })
-  // 水平均匀排列
-  const uniformHorizontalDisplay = () => {
-    const { minX, maxX } = getElementListRange(activeElementList.value)
-    const copyOfActiveElementList: PPTElement[] = JSON.parse(JSON.stringify(activeElementList.value))
-    const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
-
-    // 分别获取普通元素和组合元素集合，并记录下每一项的范围
-    const singleElemetList: ElementItem[] = []
-    let groupList: GroupItem[] = []
-    for (const el of copyOfActiveElementList) {
-      if (!el.groupId) {
-        const { minX, maxX } = getElementRange(el)
-        singleElemetList.push({ min: minX, max: maxX, el })
-      }
-      else {
-        const groupEl = groupList.find(item => item.groupId === el.groupId)
-        if (!groupEl) groupList.push({ groupId: el.groupId, els: [el] })
-        else {
-          groupList = groupList.map(item => item.groupId === el.groupId ? { ...item, els: [...item.els, el] } : item)
-        }
-      }
-    }
-    const formatedGroupList: GroupElementsItem[] = []
-    for (const groupItem of groupList) {
-      const { minX, maxX } = getElementListRange(groupItem.els)
-      formatedGroupList.push({ min: minX, max: maxX, els: groupItem.els })
-    }
-
-    // 将普通元素和组合元素集合组合在一起，然后将每一项按位置（从左到右）排序
-    const list: Item[] = [...singleElemetList, ...formatedGroupList]
-    list.sort((itemA, itemB) => itemA.min - itemB.min)
-
-    // 计算元素均匀分布所需要的间隔：
-    // (所选元素整体范围 - 所有所选元素宽度和) / (所选元素数 - 1)
-    let totalWidth = 0
-    for (const item of list) {
-      const width = item.max - item.min
-      totalWidth += width
-    }
-    const span = ((maxX - minX) - totalWidth) / (list.length - 1)
-
-    // 按位置顺序依次计算每一个元素的目标位置
-    // 第一项中的元素即为起点，无需计算
-    // 从第二项开始，每一项的位置应该为：上一项位置 + 上一项宽度 + 间隔
-    // 注意此处计算的位置（pos）并非元素最终的left值，而是目标位置范围最小值（元素旋转后的left值 ≠ 范围最小值）
-    const sortedElementData: ElementWithPos[] = []
-
-    const firstItem = list[0]
-    let lastPos: LastPos = { min: firstItem.min, max: firstItem.max }
-
-    if ('el' in firstItem) {
-      sortedElementData.push({ pos: firstItem.min, el: firstItem.el })
-    }
-    else {
-      for (const el of firstItem.els) {
-        const { minX: pos } = getElementRange(el)
-        sortedElementData.push({ pos, el })
-      }
-    }
-
-    for (let i = 1; i < list.length; i++) {
-      const item = list[i]
-      const lastWidth = lastPos.max - lastPos.min
-      const currentPos = lastPos.min + lastWidth + span
-      const currentWidth = item.max - item.min
-      lastPos = { min: currentPos, max: currentPos + currentWidth }
-
-      if ('el' in item) {
-        sortedElementData.push({ pos: currentPos, el: item.el })
-      }
-      else {
-        for (const el of item.els) {
-          const { minX } = getElementRange(el)
-          const offset = minX - item.min
-          sortedElementData.push({ pos: currentPos + offset, el })
-        }
-      }
-    }
-
-    // 根据目标位置计算元素最终目标left值
-    // 对于旋转后的元素，需要计算旋转前后left的偏移来做校正
-    for (const element of newElementList) {
-      if (!activeElementIdList.value.includes(element.id)) continue
-
-      for (const sortedItem of sortedElementData) {
-        if (sortedItem.el.id === element.id) {
-          if ('rotate' in element && element.rotate) {
-            const { offsetX } = getRectRotatedOffset({
-              left: element.left,
-              top: element.top,
-              width: element.width,
-              height: element.height,
-              rotate: element.rotate,
-            })
-            element.left = sortedItem.pos - offsetX
-          }
-          else element.left = sortedItem.pos
-        }
-      }
-    }
-
-    slidesStore.updateSlide({ elements: newElementList })
-    addHistorySnapshot()
-  }
-
-  // 垂直均匀排列（逻辑类似水平均匀排列方法）
-  const uniformVerticalDisplay = () => {
-    const { minY, maxY } = getElementListRange(activeElementList.value)
-    const copyOfActiveElementList: PPTElement[] = JSON.parse(JSON.stringify(activeElementList.value))
-    const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
-
-    const singleElemetList: ElementItem[] = []
-    let groupList: GroupItem[] = []
-    for (const el of copyOfActiveElementList) {
-      if (!el.groupId) {
-        const { minY, maxY } = getElementRange(el)
-        singleElemetList.push({ min: minY, max: maxY, el })
-      }
-      else {
-        const groupEl = groupList.find(item => item.groupId === el.groupId)
-        if (!groupEl) groupList.push({ groupId: el.groupId, els: [el] })
-        else {
-          groupList = groupList.map(item => item.groupId === el.groupId ? { ...item, els: [...item.els, el] } : item)
-        }
-      }
-    }
-    const formatedGroupList: GroupElementsItem[] = []
-    for (const groupItem of groupList) {
-      const { minY, maxY } = getElementListRange(groupItem.els)
-      formatedGroupList.push({ min: minY, max: maxY, els: groupItem.els })
-    }
-
-    const list: Item[] = [...singleElemetList, ...formatedGroupList]
-    list.sort((itemA, itemB) => itemA.min - itemB.min)
-
-    let totalHeight = 0
-    for (const item of list) {
-      const height = item.max - item.min
-      totalHeight += height
-    }
-    const span = ((maxY - minY) - totalHeight) / (list.length - 1)
-
-    const sortedElementData: ElementWithPos[] = []
-
-    const firstItem = list[0]
-    let lastPos: LastPos = { min: firstItem.min, max: firstItem.max }
-
-    if ('el' in firstItem) {
-      sortedElementData.push({ pos: firstItem.min, el: firstItem.el })
-    }
-    else {
-      for (const el of firstItem.els) {
-        const { minY: pos } = getElementRange(el)
-        sortedElementData.push({ pos, el })
-      }
-    }
-
-    for (let i = 1; i < list.length; i++) {
-      const item = list[i]
-      const lastHeight = lastPos.max - lastPos.min
-      const currentPos = lastPos.min + lastHeight + span
-      const currentHeight = item.max - item.min
-      lastPos = { min: currentPos, max: currentPos + currentHeight }
-
-      if ('el' in item) {
-        sortedElementData.push({ pos: currentPos, el: item.el })
-      }
-      else {
-        for (const el of item.els) {
-          const { minY } = getElementRange(el)
-          const offset = minY - item.min
-          sortedElementData.push({ pos: currentPos + offset, el })
-        }
-      }
-    }
-
-    for (const element of newElementList) {
-      if (!activeElementIdList.value.includes(element.id)) continue
-
-      for (const sortedItem of sortedElementData) {
-        if (sortedItem.el.id === element.id) {
-          if ('rotate' in element && element.rotate) {
-            const { offsetY } = getRectRotatedOffset({
-              left: element.left,
-              top: element.top,
-              width: element.width,
-              height: element.height,
-              rotate: element.rotate,
-            })
-            element.top = sortedItem.pos - offsetY
-          }
-          else element.top = sortedItem.pos
-        }
-      }
-    }
-
-    slidesStore.updateSlide({ elements: newElementList })
-    addHistorySnapshot()
-  }
-
-  return {
-    displayItemCount,
-    uniformHorizontalDisplay,
-    uniformVerticalDisplay,
-  }
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { PPTElement } from '@/types/slides'
+import { getElementRange, getElementListRange, getRectRotatedOffset } from '@/utils/element'
+import useHistorySnapshot from './useHistorySnapshot'
+
+interface ElementItem {
+  min: number
+  max: number
+  el: PPTElement
+}
+
+interface GroupItem {
+  groupId: string
+  els: PPTElement[]
+}
+
+interface GroupElementsItem {
+  min: number
+  max: number
+  els: PPTElement[]
+}
+
+type Item = ElementItem | GroupElementsItem
+
+interface ElementWithPos {
+  pos: number
+  el: PPTElement
+}
+
+interface LastPos {
+  min: number
+  max: number
+}
+
+export default () => {
+  const slidesStore = useSlidesStore()
+  const { activeElementIdList, activeElementList } = storeToRefs(useMainStore())
+  const { currentSlide } = storeToRefs(slidesStore)
+
+  const { addHistorySnapshot } = useHistorySnapshot()
+
+  const displayItemCount = computed(() => {
+    let count = 0
+    const groupIdList: string[] = []
+    for (const el of activeElementList.value) {
+      if (!el.groupId) count += 1
+      else if (!groupIdList.includes(el.groupId)) {
+        groupIdList.push(el.groupId)
+        count += 1
+      }
+    }
+    return count
+  })
+  // 水平均匀排列
+  const uniformHorizontalDisplay = () => {
+    const { minX, maxX } = getElementListRange(activeElementList.value)
+    const copyOfActiveElementList: PPTElement[] = JSON.parse(JSON.stringify(activeElementList.value))
+    const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
+
+    // 分别获取普通元素和组合元素集合，并记录下每一项的范围
+    const singleElemetList: ElementItem[] = []
+    let groupList: GroupItem[] = []
+    for (const el of copyOfActiveElementList) {
+      if (!el.groupId) {
+        const { minX, maxX } = getElementRange(el)
+        singleElemetList.push({ min: minX, max: maxX, el })
+      }
+      else {
+        const groupEl = groupList.find(item => item.groupId === el.groupId)
+        if (!groupEl) groupList.push({ groupId: el.groupId, els: [el] })
+        else {
+          groupList = groupList.map(item => item.groupId === el.groupId ? { ...item, els: [...item.els, el] } : item)
+        }
+      }
+    }
+    const formatedGroupList: GroupElementsItem[] = []
+    for (const groupItem of groupList) {
+      const { minX, maxX } = getElementListRange(groupItem.els)
+      formatedGroupList.push({ min: minX, max: maxX, els: groupItem.els })
+    }
+
+    // 将普通元素和组合元素集合组合在一起，然后将每一项按位置（从左到右）排序
+    const list: Item[] = [...singleElemetList, ...formatedGroupList]
+    list.sort((itemA, itemB) => itemA.min - itemB.min)
+
+    // 计算元素均匀分布所需要的间隔：
+    // (所选元素整体范围 - 所有所选元素宽度和) / (所选元素数 - 1)
+    let totalWidth = 0
+    for (const item of list) {
+      const width = item.max - item.min
+      totalWidth += width
+    }
+    const span = ((maxX - minX) - totalWidth) / (list.length - 1)
+
+    // 按位置顺序依次计算每一个元素的目标位置
+    // 第一项中的元素即为起点，无需计算
+    // 从第二项开始，每一项的位置应该为：上一项位置 + 上一项宽度 + 间隔
+    // 注意此处计算的位置（pos）并非元素最终的left值，而是目标位置范围最小值（元素旋转后的left值 ≠ 范围最小值）
+    const sortedElementData: ElementWithPos[] = []
+
+    const firstItem = list[0]
+    let lastPos: LastPos = { min: firstItem.min, max: firstItem.max }
+
+    if ('el' in firstItem) {
+      sortedElementData.push({ pos: firstItem.min, el: firstItem.el })
+    }
+    else {
+      for (const el of firstItem.els) {
+        const { minX: pos } = getElementRange(el)
+        sortedElementData.push({ pos, el })
+      }
+    }
+
+    for (let i = 1; i < list.length; i++) {
+      const item = list[i]
+      const lastWidth = lastPos.max - lastPos.min
+      const currentPos = lastPos.min + lastWidth + span
+      const currentWidth = item.max - item.min
+      lastPos = { min: currentPos, max: currentPos + currentWidth }
+
+      if ('el' in item) {
+        sortedElementData.push({ pos: currentPos, el: item.el })
+      }
+      else {
+        for (const el of item.els) {
+          const { minX } = getElementRange(el)
+          const offset = minX - item.min
+          sortedElementData.push({ pos: currentPos + offset, el })
+        }
+      }
+    }
+
+    // 根据目标位置计算元素最终目标left值
+    // 对于旋转后的元素，需要计算旋转前后left的偏移来做校正
+    for (const element of newElementList) {
+      if (!activeElementIdList.value.includes(element.id)) continue
+
+      for (const sortedItem of sortedElementData) {
+        if (sortedItem.el.id === element.id) {
+          if ('rotate' in element && element.rotate) {
+            const { offsetX } = getRectRotatedOffset({
+              left: element.left,
+              top: element.top,
+              width: element.width,
+              height: element.height,
+              rotate: element.rotate,
+            })
+            element.left = sortedItem.pos - offsetX
+          }
+          else element.left = sortedItem.pos
+        }
+      }
+    }
+
+    slidesStore.updateSlide({ elements: newElementList })
+    addHistorySnapshot()
+  }
+
+  // 垂直均匀排列（逻辑类似水平均匀排列方法）
+  const uniformVerticalDisplay = () => {
+    const { minY, maxY } = getElementListRange(activeElementList.value)
+    const copyOfActiveElementList: PPTElement[] = JSON.parse(JSON.stringify(activeElementList.value))
+    const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
+
+    const singleElemetList: ElementItem[] = []
+    let groupList: GroupItem[] = []
+    for (const el of copyOfActiveElementList) {
+      if (!el.groupId) {
+        const { minY, maxY } = getElementRange(el)
+        singleElemetList.push({ min: minY, max: maxY, el })
+      }
+      else {
+        const groupEl = groupList.find(item => item.groupId === el.groupId)
+        if (!groupEl) groupList.push({ groupId: el.groupId, els: [el] })
+        else {
+          groupList = groupList.map(item => item.groupId === el.groupId ? { ...item, els: [...item.els, el] } : item)
+        }
+      }
+    }
+    const formatedGroupList: GroupElementsItem[] = []
+    for (const groupItem of groupList) {
+      const { minY, maxY } = getElementListRange(groupItem.els)
+      formatedGroupList.push({ min: minY, max: maxY, els: groupItem.els })
+    }
+
+    const list: Item[] = [...singleElemetList, ...formatedGroupList]
+    list.sort((itemA, itemB) => itemA.min - itemB.min)
+
+    let totalHeight = 0
+    for (const item of list) {
+      const height = item.max - item.min
+      totalHeight += height
+    }
+    const span = ((maxY - minY) - totalHeight) / (list.length - 1)
+
+    const sortedElementData: ElementWithPos[] = []
+
+    const firstItem = list[0]
+    let lastPos: LastPos = { min: firstItem.min, max: firstItem.max }
+
+    if ('el' in firstItem) {
+      sortedElementData.push({ pos: firstItem.min, el: firstItem.el })
+    }
+    else {
+      for (const el of firstItem.els) {
+        const { minY: pos } = getElementRange(el)
+        sortedElementData.push({ pos, el })
+      }
+    }
+
+    for (let i = 1; i < list.length; i++) {
+      const item = list[i]
+      const lastHeight = lastPos.max - lastPos.min
+      const currentPos = lastPos.min + lastHeight + span
+      const currentHeight = item.max - item.min
+      lastPos = { min: currentPos, max: currentPos + currentHeight }
+
+      if ('el' in item) {
+        sortedElementData.push({ pos: currentPos, el: item.el })
+      }
+      else {
+        for (const el of item.els) {
+          const { minY } = getElementRange(el)
+          const offset = minY - item.min
+          sortedElementData.push({ pos: currentPos + offset, el })
+        }
+      }
+    }
+
+    for (const element of newElementList) {
+      if (!activeElementIdList.value.includes(element.id)) continue
+
+      for (const sortedItem of sortedElementData) {
+        if (sortedItem.el.id === element.id) {
+          if ('rotate' in element && element.rotate) {
+            const { offsetY } = getRectRotatedOffset({
+              left: element.left,
+              top: element.top,
+              width: element.width,
+              height: element.height,
+              rotate: element.rotate,
+            })
+            element.top = sortedItem.pos - offsetY
+          }
+          else element.top = sortedItem.pos
+        }
+      }
+    }
+
+    slidesStore.updateSlide({ elements: newElementList })
+    addHistorySnapshot()
+  }
+
+  return {
+    displayItemCount,
+    uniformHorizontalDisplay,
+    uniformVerticalDisplay,
+  }
 }