优化页面、修复BUG

client/src/utils/applyPptTemplate.ts

@@ -0,0 +1,52 @@
+import type {
+  PptTemplateApplied,
+  PptTemplateConfig,
+  PptRevealTransition,
+  PptSlideTransition,
+} from '../types/pptTemplate'
+
+export function getSlideTransitionNames(slide: PptSlideTransition): {
+  forward: string
+  backward: string
+} {
+  switch (slide) {
+    case 'fade':
+      return { forward: 'ppt-slide-fade', backward: 'ppt-slide-back-fade' }
+    case 'push':
+      return { forward: 'ppt-slide-push', backward: 'ppt-slide-back-push' }
+    default:
+      return { forward: 'ppt-slide', backward: 'ppt-slide-back' }
+  }
+}
+
+export function getRevealTransitionName(reveal: PptRevealTransition): string {
+  return reveal === 'fade' ? 'ppt-reveal-fade' : 'ppt-reveal'
+}
+
+/** 将模板 config 转为 CSS 变量与 transition 名 */
+export function applyPptTemplate(config: PptTemplateConfig): PptTemplateApplied {
+  const { colors, animation, transitions, ui } = config
+  const slideNames = getSlideTransitionNames(transitions.slide)
+
+  return {
+    templateVars: {
+      '--ppt-bg': colors.bg,
+      '--ppt-text': colors.text,
+      '--ppt-muted': colors.muted,
+      '--ppt-accent': colors.accent,
+      '--ppt-code-bg': colors.codeBg,
+      '--ppt-code-text': colors.codeText,
+      '--ppt-border': colors.border,
+      '--ppt-ease-soft': animation.easing,
+      '--ppt-duration-reveal': animation.revealDuration,
+      '--ppt-duration-reveal-leave': animation.revealLeaveDuration,
+      '--ppt-duration-slide': animation.slideDuration,
+      '--ppt-duration-layout': animation.layoutDuration,
+      '--ppt-reveal-offset': animation.revealOffset,
+      '--ppt-canvas-radius': ui.canvasBorderRadius,
+    },
+    slideTransitionForward: slideNames.forward,
+    slideTransitionBackward: slideNames.backward,
+    revealTransition: getRevealTransitionName(transitions.reveal),
+  }
+}