Files
nl-blogs/client/src/utils/applyPptTemplate.ts
2026-07-14 09:37:13 +08:00

53 lines
1.7 KiB
TypeScript

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),
}
}