优化页面、修复BUG

client/src/styles/pptPreview.css

@@ -1,23 +1,6 @@
 /* PPT 预览幻灯片样式 */
 
 .ppt-preview-root {
-  --ppt-bg: #f8f7f4;
-  --ppt-text: #1a1a1a;
-  --ppt-muted: #666666;
-  --ppt-accent: #c9a962;
-  --ppt-code-bg: #1e1e1e;
-  --ppt-code-text: #eeeeee;
-  --ppt-border: rgba(0, 0, 0, 0.08);
-  --ppt-chrome-h: 8.5rem;
-  --ppt-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
-  --ppt-duration-reveal: 0.95s;
-  --ppt-duration-reveal-leave: 0.65s;
-  --ppt-duration-slide: 0.85s;
-  --ppt-duration-layout: 0.75s;
-  --ppt-reveal-offset: 10px;
-}
-
-.ppt-preview-root.ppt-theme-dark {
   --ppt-bg: #141414;
   --ppt-text: #f5f5f5;
   --ppt-muted: #a0a0a0;
@@ -25,6 +8,14 @@
   --ppt-code-bg: #1e1e1e;
   --ppt-code-text: #eeeeee;
   --ppt-border: rgba(255, 255, 255, 0.1);
+  --ppt-chrome-h: 8.5rem;
+  --ppt-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
+  --ppt-duration-reveal: 0.95s;
+  --ppt-duration-reveal-leave: 0.65s;
+  --ppt-duration-slide: 0.85s;
+  --ppt-duration-layout: 0.75s;
+  --ppt-reveal-offset: 10px;
+  --ppt-canvas-radius: 0.5rem;
 }
 
 /* 舞台与缩放容器 */
@@ -121,7 +112,7 @@
   background: var(--ppt-bg);
   color: var(--ppt-text);
   border: 1px solid var(--ppt-border);
-  border-radius: 0.5rem;
+  border-radius: var(--ppt-canvas-radius, 0.5rem);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -453,6 +444,93 @@
   transform: translateX(8px) scale(0.985);
 }
 
+/* 页间切换：纯淡入淡出 */
+.ppt-slide-fade-enter-active,
+.ppt-slide-fade-leave-active,
+.ppt-slide-back-fade-enter-active,
+.ppt-slide-back-fade-leave-active {
+  transition: opacity var(--ppt-duration-slide) var(--ppt-ease-soft);
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ppt-slide-fade-leave-active,
+.ppt-slide-back-fade-leave-active {
+  z-index: 1;
+}
+
+.ppt-slide-fade-enter-active,
+.ppt-slide-back-fade-enter-active {
+  z-index: 2;
+}
+
+.ppt-slide-fade-enter-from,
+.ppt-slide-fade-leave-to,
+.ppt-slide-back-fade-enter-from,
+.ppt-slide-back-fade-leave-to {
+  opacity: 0;
+}
+
+/* 页间切换：推入（更明显位移） */
+.ppt-slide-push-enter-active,
+.ppt-slide-push-leave-active,
+.ppt-slide-back-push-enter-active,
+.ppt-slide-back-push-leave-active {
+  transition:
+    opacity var(--ppt-duration-slide) var(--ppt-ease-soft),
+    transform var(--ppt-duration-slide) var(--ppt-ease-soft);
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ppt-slide-push-leave-active,
+.ppt-slide-back-push-leave-active {
+  z-index: 1;
+}
+
+.ppt-slide-push-enter-active,
+.ppt-slide-back-push-enter-active {
+  z-index: 2;
+}
+
+.ppt-slide-push-enter-from {
+  opacity: 0;
+  transform: translateX(24px) scale(0.98);
+}
+
+.ppt-slide-push-leave-to {
+  opacity: 0;
+  transform: translateX(-24px) scale(0.98);
+}
+
+.ppt-slide-back-push-enter-from {
+  opacity: 0;
+  transform: translateX(-24px) scale(0.98);
+}
+
+.ppt-slide-back-push-leave-to {
+  opacity: 0;
+  transform: translateX(24px) scale(0.98);
+}
+
+/* 分步揭示：纯淡入 */
+.ppt-reveal-fade-enter-active {
+  transition: opacity var(--ppt-duration-reveal) var(--ppt-ease-soft);
+}
+
+.ppt-reveal-fade-leave-active {
+  transition: opacity var(--ppt-duration-reveal-leave) var(--ppt-ease-soft);
+}
+
+.ppt-reveal-fade-enter-from,
+.ppt-reveal-fade-leave-to {
+  opacity: 0;
+}
+
 .ppt-thumbnail {
   aspect-ratio: 16 / 9;
   width: 7rem;
@@ -485,10 +563,20 @@
 @media (prefers-reduced-motion: reduce) {
   .ppt-reveal-enter-active,
   .ppt-reveal-leave-active,
+  .ppt-reveal-fade-enter-active,
+  .ppt-reveal-fade-leave-active,
   .ppt-slide-enter-active,
   .ppt-slide-leave-active,
   .ppt-slide-back-enter-active,
   .ppt-slide-back-leave-active,
+  .ppt-slide-fade-enter-active,
+  .ppt-slide-fade-leave-active,
+  .ppt-slide-back-fade-enter-active,
+  .ppt-slide-back-fade-leave-active,
+  .ppt-slide-push-enter-active,
+  .ppt-slide-push-leave-active,
+  .ppt-slide-back-push-enter-active,
+  .ppt-slide-back-push-leave-active,
   .ppt-slide-section-header,
   .ppt-slide-section-title,
   .ppt-slide-canvas {
@@ -497,10 +585,20 @@
 
   .ppt-reveal-enter-from,
   .ppt-reveal-leave-to,
+  .ppt-reveal-fade-enter-from,
+  .ppt-reveal-fade-leave-to,
   .ppt-slide-enter-from,
   .ppt-slide-leave-to,
   .ppt-slide-back-enter-from,
-  .ppt-slide-back-leave-to {
+  .ppt-slide-back-leave-to,
+  .ppt-slide-fade-enter-from,
+  .ppt-slide-fade-leave-to,
+  .ppt-slide-back-fade-enter-from,
+  .ppt-slide-back-fade-leave-to,
+  .ppt-slide-push-enter-from,
+  .ppt-slide-push-leave-to,
+  .ppt-slide-back-push-enter-from,
+  .ppt-slide-back-push-leave-to {
     transform: none;
   }
 }