jvs-ppt-ui 0.0.14 → 0.0.16

package/src/components/sidebar/panels/SidebarTransitionPanel.vue

@@ -1,210 +1,791 @@
-<script setup lang="ts">
-defineProps<{
-  transitionOptions: Array<{ name: string; value: string }>
-  activeSlideTransition: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:activeSlideTransition', val: string): void
-  (e: 'applyTransitionToAll'): void
-}>()
-</script>
-
-<template>
-  <div class="sidebar-transition-panel flex-column" style="display: flex; flex-direction: column; gap: 14px; padding: 16px;">
-    <div class="transition-grid">
-      <div
-        v-for="item in transitionOptions"
-        :key="item.value"
-        class="transition-card"
-        :class="[item.value, { active: activeSlideTransition === item.value }]"
-        @click="emit('update:activeSlideTransition', item.value)"
-      >
-        <div class="transition-mockup" :class="item.value">P</div>
-        <div class="transition-name">{{ item.name }}</div>
-      </div>
-    </div>
-    <button class="transition-apply-all-btn" @click="emit('applyTransitionToAll')">
-      ✓ 应用到全部
-    </button>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.transition-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  padding: 4px 0;
-}
-
-.transition-card {
-  border: 1px solid var(--border-color);
-  background: #ffffff;
-  border-radius: 6px;
-  padding: 12px;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-}
-
-.transition-card:hover {
-  border-color: var(--accent-primary);
-  box-shadow: var(--shadow-sm);
-}
-
-.transition-card.active {
-  border-color: #1E6FFF !important;
-  background-color: #f0f6ff !important;
-}
-
-.transition-mockup {
-  position: relative;
-  width: 60px;
-  height: 38px;
-  background-color: #555555;
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  overflow: hidden;
-  color: #ffffff;
-  font-size: 14px;
-  font-weight: 700;
-  font-family: var(--font-sans);
-}
-
-.transition-mockup:not(.none):not(.random):hover::after {
-  content: "JVS-PPT";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background-color: #1E6FFF;
-  color: #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 9px;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-@keyframes preview-slideX {
-  0% { transform: translateX(100%); }
-  100% { transform: translateX(0); }
-}
-.transition-mockup.push-left-right:hover::after {
-  animation: preview-slideX 0.3s linear;
-}
-
-@keyframes preview-slideY {
-  0% { transform: translateY(100%); }
-  100% { transform: translateY(0); }
-}
-.transition-mockup.push-up-down:hover::after {
-  animation: preview-slideY 0.3s linear;
-}
-
-@keyframes preview-slideX3D {
-  0% { transform: translateX(100%) scale(0.5); }
-  100% { transform: translateX(0); }
-}
-.transition-mockup.push-left-right-3d:hover::after {
-  animation: preview-slideX3D 0.3s linear;
-}
-
-@keyframes preview-slideY3D {
-  0% { transform: translateY(100%) scale(0.5); }
-  100% { transform: translateY(0); }
-}
-.transition-mockup.push-up-down-3d:hover::after {
-  animation: preview-slideY3D 0.3s linear;
-}
-
-@keyframes preview-fade {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-.transition-mockup.fade:hover::after {
-  animation: preview-fade 0.3s linear;
-}
-
-@keyframes preview-rotate {
-  0% { transform: rotate(-90deg); }
-  100% { transform: rotate(0); }
-}
-.transition-mockup.rotate:hover::after {
-  transform-origin: 0 0;
-  animation: preview-rotate 0.3s linear;
-}
-
-@keyframes preview-scaleY {
-  0% { transform: scaleY(0.1); }
-  100% { transform: scaleY(1); }
-}
-.transition-mockup.expand-up-down:hover::after {
-  animation: preview-scaleY 0.3s linear;
-}
-
-@keyframes preview-scaleX {
-  0% { transform: scaleX(0.1); }
-  100% { transform: scaleX(1); }
-}
-.transition-mockup.expand-left-right:hover::after {
-  animation: preview-scaleX 0.3s linear;
-}
-
-@keyframes preview-scale {
-  0% { transform: scale(0.25); }
-  100% { transform: scale(1); }
-}
-.transition-mockup.zoom-in:hover::after {
-  animation: preview-scale 0.3s linear;
-}
-
-@keyframes preview-scaleReverse {
-  0% { transform: scale(2); }
-  100% { transform: scale(1); }
-}
-.transition-mockup.zoom-out:hover::after {
-  animation: preview-scaleReverse 0.3s linear;
-}
-
-.transition-name {
-  font-size: 11.5px;
-  color: var(--text-primary);
-  font-weight: 500;
-  text-align: center;
-}
-
-.transition-apply-all-btn {
-  background: #ffffff;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  font-size: 12px;
-  color: var(--text-primary);
-  cursor: pointer;
-  padding: 10px 0;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  transition: all var(--transition-fast);
-  font-weight: 500;
-  margin-top: 14px;
-}
-
-.transition-apply-all-btn:hover {
-  background: var(--bg-active);
-  border-color: var(--accent-primary);
-  color: var(--accent-primary);
-}
-</style>
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useSlides } from '../../../composables/useSlides'
+import '../../../assets/iconfont/iconfont.js'
+
+const props = defineProps<{
+  transitionOptions: Array<{ name: string; value: string }>
+  activeSlideTransition: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:activeSlideTransition', val: string): void
+  (e: 'applyTransitionToAll', options: any): void
+}>()
+
+const { activeSlide, zoomRatio } = useSlides()
+
+// 持续时间配置 (秒)
+const duration = ref<number>(activeSlide.value?.transitionDuration ?? 1)
+// 自动切页开关与延时
+const autoAdvance = ref<boolean>(Boolean(activeSlide.value?.autoAdvance))
+const autoAdvanceDelay = ref<number>(activeSlide.value?.autoAdvanceDelay ?? 0.5)
+// 单击鼠标时换片
+const clickAdvance = ref<boolean>(activeSlide.value?.clickAdvance ?? false)
+
+// 持续时间下拉 Popover 状态
+const isDurationPopoverVisible = ref(false)
+const durationTriggerRef = ref<HTMLElement | null>(null)
+const durationTriggerWidth = ref(258)
+
+const durationOptions = [
+  { label: '0.5秒（非常快）', value: 0.5 },
+  { label: '1秒（快）', value: 1 },
+  { label: '1.5秒（中等）', value: 1.5 },
+  { label: '2秒（慢）', value: 2 },
+  { label: '3秒（非常慢）', value: 3 }
+]
+
+const currentDurationLabel = computed(() => {
+  const match = durationOptions.find(opt => opt.value === duration.value)
+  return match ? match.label : `${duration.value}秒`
+})
+
+function onDurationPopoverShow() {
+  if (durationTriggerRef.value) {
+    durationTriggerWidth.value = durationTriggerRef.value.offsetWidth
+  }
+}
+
+function selectDuration(val: number) {
+  duration.value = val
+  isDurationPopoverVisible.value = false
+}
+
+// 响应切换选中 slide
+watch(activeSlide, (slide) => {
+  if (slide) {
+    duration.value = slide.transitionDuration ?? 1
+    autoAdvance.value = Boolean(slide.autoAdvance)
+    autoAdvanceDelay.value = slide.autoAdvanceDelay ?? 0.5
+    clickAdvance.value = slide.clickAdvance ?? false
+  }
+}, { immediate: true })
+
+// 同步写入 activeSlide
+watch(duration, (val) => {
+  if (activeSlide.value) activeSlide.value.transitionDuration = val
+})
+watch(autoAdvance, (val) => {
+  if (activeSlide.value) activeSlide.value.autoAdvance = val
+})
+watch(autoAdvanceDelay, (val) => {
+  if (activeSlide.value) activeSlide.value.autoAdvanceDelay = val
+})
+watch(clickAdvance, (val) => {
+  if (activeSlide.value) activeSlide.value.clickAdvance = val
+})
+
+// 数字步进器操作
+function stepUp() {
+  if (!autoAdvance.value) return
+  autoAdvanceDelay.value = +(Math.min(60, Number((autoAdvanceDelay.value + 0.5).toFixed(1))))
+}
+
+function stepDown() {
+  if (!autoAdvance.value) return
+  autoAdvanceDelay.value = +(Math.max(0.1, Number((autoAdvanceDelay.value - 0.5).toFixed(1))))
+}
+
+// 恢复可能受损的 main-slide transform 缩放
+function restoreSlideTransform() {
+  const slideEl = document.querySelector('.canvas-area .main-slide') as HTMLElement
+  if (slideEl) {
+    const scale = (zoomRatio?.value || 100) / 100
+    slideEl.style.transform = `scale(${scale})`
+    slideEl.style.transformOrigin = 'center center'
+  }
+}
+
+onMounted(() => {
+  restoreSlideTransform()
+})
+
+onBeforeUnmount(() => {
+  if (activeAnimation) {
+    activeAnimation.cancel()
+    activeAnimation = null
+  }
+  restoreSlideTransform()
+})
+
+watch(zoomRatio, () => {
+  restoreSlideTransform()
+})
+
+// 预览动画播放系统 (直接作用于 main-slide，严格合成当前 scale 矩阵，执行后绝不改变大小)
+let activeAnimation: Animation | null = null
+
+function playPreview(transitionType?: string) {
+  const t = transitionType || props.activeSlideTransition || 'push-up-down'
+  const slideEl = document.querySelector('.canvas-area .main-slide') as HTMLElement
+  if (!slideEl) return
+
+  const scale = (zoomRatio?.value || 100) / 100
+
+  if (activeAnimation) {
+    activeAnimation.onfinish = null
+    activeAnimation.oncancel = null
+    activeAnimation.cancel()
+    activeAnimation = null
+  }
+
+  if (t === 'none') {
+    restoreSlideTransform()
+    return
+  }
+
+  let actualType = t
+  if (t === 'random') {
+    const pool = [
+      'push-left-right', 'push-up-down', 'push-left-right-3d', 'push-up-down-3d',
+      'fade', 'rotate', 'expand-up-down', 'expand-left-right', 'zoom-in', 'zoom-out'
+    ]
+    actualType = pool[Math.floor(Math.random() * pool.length)]
+  }
+
+  const dur = (duration.value || 1) * 1000
+  let keyframes: Keyframe[] = []
+
+  switch (actualType) {
+    case 'push-left-right':
+      keyframes = [
+        { transform: `scale(${scale}) translateX(100%)`, opacity: 0.3 },
+        { transform: `scale(${scale}) translateX(0)`, opacity: 1 }
+      ]
+      break
+    case 'push-up-down':
+      keyframes = [
+        { transform: `scale(${scale}) translateY(100%)`, opacity: 0.3 },
+        { transform: `scale(${scale}) translateY(0)`, opacity: 1 }
+      ]
+      break
+    case 'push-left-right-3d':
+      keyframes = [
+        { transform: `scale(${scale * 0.7}) perspective(1000px) rotateY(-35deg) translateX(70%)`, opacity: 0.2 },
+        { transform: `scale(${scale}) perspective(1000px) rotateY(0deg) translateX(0)`, opacity: 1 }
+      ]
+      break
+    case 'push-up-down-3d':
+      keyframes = [
+        { transform: `scale(${scale * 0.7}) perspective(1000px) rotateX(35deg) translateY(70%)`, opacity: 0.2 },
+        { transform: `scale(${scale}) perspective(1000px) rotateX(0deg) translateY(0)`, opacity: 1 }
+      ]
+      break
+    case 'fade':
+      keyframes = [
+        { transform: `scale(${scale})`, opacity: 0 },
+        { transform: `scale(${scale})`, opacity: 1 }
+      ]
+      break
+    case 'rotate':
+      keyframes = [
+        { transform: `scale(${scale * 0.5}) rotate(-180deg)`, opacity: 0.2 },
+        { transform: `scale(${scale}) rotate(0deg)`, opacity: 1 }
+      ]
+      break
+    case 'expand-up-down':
+      keyframes = [
+        { transform: `scale(${scale}) scaleY(0)`, opacity: 0.2 },
+        { transform: `scale(${scale}) scaleY(1)`, opacity: 1 }
+      ]
+      break
+    case 'expand-left-right':
+      keyframes = [
+        { transform: `scale(${scale}) scaleX(0)`, opacity: 0.2 },
+        { transform: `scale(${scale}) scaleX(1)`, opacity: 1 }
+      ]
+      break
+    case 'zoom-in':
+      keyframes = [
+        { transform: `scale(${scale * 0.3})`, opacity: 0 },
+        { transform: `scale(${scale})`, opacity: 1 }
+      ]
+      break
+    case 'zoom-out':
+      keyframes = [
+        { transform: `scale(${scale * 1.8})`, opacity: 0 },
+        { transform: `scale(${scale})`, opacity: 1 }
+      ]
+      break
+    default:
+      keyframes = [
+        { transform: `scale(${scale})`, opacity: 0.8 },
+        { transform: `scale(${scale})`, opacity: 1 }
+      ]
+      break
+  }
+
+  // 临时防止滚动条跳动
+  const wrapper = document.querySelector('.canvas-slide-wrapper') as HTMLElement
+  if (wrapper) {
+    wrapper.style.overflow = 'hidden'
+  }
+
+  slideEl.style.transformOrigin = 'center center'
+  slideEl.style.pointerEvents = 'none'
+
+  const currentAnim = slideEl.animate(keyframes, {
+    duration: dur,
+    easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)'
+  })
+  activeAnimation = currentAnim
+
+  const cleanup = () => {
+    if (activeAnimation !== currentAnim) return
+    activeAnimation = null
+    if (slideEl) {
+      // 关键：强制保留当前缩放比例 scale(scale)，绝不能置空清除！
+      slideEl.style.transform = `scale(${scale})`
+      slideEl.style.transformOrigin = 'center center'
+      slideEl.style.opacity = ''
+      slideEl.style.clipPath = ''
+      slideEl.style.pointerEvents = ''
+    }
+    if (wrapper) {
+      wrapper.style.overflow = ''
+    }
+  }
+
+  currentAnim.onfinish = cleanup
+  currentAnim.oncancel = cleanup
+}
+
+const hoveredTransition = ref<string | null>(null)
+
+function onHoverTransition(val: string) {
+  if (hoveredTransition.value === val) return
+  hoveredTransition.value = val
+  playPreview(val)
+}
+
+function onLeaveTransition(val: string) {
+  if (hoveredTransition.value === val) {
+    hoveredTransition.value = null
+  }
+}
+
+function selectTransition(val: string) {
+  emit('update:activeSlideTransition', val)
+}
+
+const transitionIcons: Record<string, { default: string; selected: string }> = {
+  'none': { default: 'icon-wudonghua', selected: 'icon-wudonghua-xuanzhong' },
+  'random': { default: 'icon-suiji', selected: 'icon-suiji-xuanzhong' },
+  'push-left-right': { default: 'icon-zuoyoutuiyi', selected: 'icon-zuoyoutuiyi-xuanzhong' },
+  'push-up-down': { default: 'icon-shangxiatuiyi', selected: 'icon-shangxiatuiyi-xuanzhong' },
+  'push-left-right-3d': { default: 'icon-a-zuoyoutuiyi3D', selected: 'icon-a-zuoyoutuiyi3D-xuanzhong' },
+  'push-up-down-3d': { default: 'icon-a-shangxiatuiyi3D', selected: 'icon-a-shangxiatuiyi3D-xuanzhong' },
+  'fade': { default: 'icon-danrudanchu', selected: 'icon-danrudanchu-xuanzhong' },
+  'rotate': { default: 'icon-xuanzhuan', selected: 'icon-xuanzhuan-xuanzhong' },
+  'expand-up-down': { default: 'icon-shangxiazhankai', selected: 'icon-shangxiazhankai-xuanzhong' },
+  'expand-left-right': { default: 'icon-zuoyouzhankai', selected: 'icon-zuoyouzhankai-xuanzhong' },
+  'zoom-in': { default: 'icon-fangda1', selected: 'icon-fangda-xuanzhong' },
+  'zoom-out': { default: 'icon-suoxiao1', selected: 'icon-suoxiao-xuanzhong' }
+}
+
+function getTransitionIcon(type: string, isSelected: boolean): string {
+  const iconPair = transitionIcons[type]
+  if (!iconPair) return isSelected ? 'icon-suiji-xuanzhong' : 'icon-suiji'
+  return isSelected ? iconPair.selected : iconPair.default
+}
+
+function handleApplyAll() {
+  emit('applyTransitionToAll', {
+    transition: props.activeSlideTransition,
+    duration: duration.value,
+    autoAdvance: autoAdvance.value,
+    autoAdvanceDelay: autoAdvanceDelay.value,
+    clickAdvance: clickAdvance.value
+  })
+}
+</script>
+
+<template>
+  <div class="sidebar-transition-panel">
+    <!-- 效果区域标题及预览按钮 -->
+    <div class="transition-section-header">
+      <span class="section-title">效果</span>
+      <button type="button" class="preview-btn" @click="playPreview()">
+        <svg viewBox="0 0 24 24" class="play-icon">
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
+          <polygon points="10,8 16,12 10,16" fill="currentColor" />
+        </svg>
+        <span>预览</span>
+      </button>
+    </div>
+
+    <!-- 12个动画效果卡片网格 (2列布局) -->
+    <div class="transition-grid">
+      <div
+        v-for="item in transitionOptions"
+        :key="item.value"
+        class="transition-item"
+        :class="{ active: activeSlideTransition === item.value }"
+        @mouseenter="onHoverTransition(item.value)"
+        @mouseleave="onLeaveTransition(item.value)"
+        @click="selectTransition(item.value)"
+      >
+        <div class="transition-card">
+          <svg viewBox="0 0 1024 1024" class="transition-icon-svg" aria-hidden="true">
+            <use
+              :xlink:href="`#${getTransitionIcon(item.value, activeSlideTransition === item.value)}`"
+              :href="`#${getTransitionIcon(item.value, activeSlideTransition === item.value)}`"
+            />
+          </svg>
+        </div>
+        <span class="transition-name">{{ item.name }}</span>
+      </div>
+    </div>
+
+    <!-- 底部配置区域 -->
+    <div class="transition-settings-section">
+      <!-- 持续时间 (统一下拉风格) -->
+      <div class="setting-item">
+        <div class="setting-label">持续时间</div>
+        <el-popover
+          v-model:visible="isDurationPopoverVisible"
+          placement="bottom-start"
+          :width="durationTriggerWidth"
+          trigger="click"
+          popper-class="autofit-popover-panel"
+          :show-arrow="false"
+          :offset="4"
+          @before-enter="onDurationPopoverShow"
+        >
+          <template #reference>
+            <div
+              ref="durationTriggerRef"
+              class="custom-select-trigger"
+              :class="{ 'is-active': isDurationPopoverVisible }"
+            >
+              <span class="select-trigger-text">{{ currentDurationLabel }}</span>
+              <svg
+                viewBox="0 0 1024 1024"
+                width="10"
+                height="10"
+                fill="currentColor"
+                class="select-trigger-arrow"
+                :class="{ 'is-open': isDurationPopoverVisible }"
+              >
+                <path d="M831.872 340.777L512 652.672 192.128 340.777a31.968 31.968 0 0 0-45.12 45.312l342.4 333.568a32 32 0 0 0 45.184 0l342.4-333.568a31.968 31.968 0 0 0-45.12-45.312z"></path>
+              </svg>
+            </div>
+          </template>
+
+          <div class="autofit-menu-container">
+            <div
+              v-for="opt in durationOptions"
+              :key="opt.value"
+              class="autofit-menu-item"
+              :class="{ 'is-selected': duration === opt.value }"
+              @click="selectDuration(opt.value)"
+            >
+              <span class="autofit-item-label">{{ opt.label }}</span>
+              <svg
+                v-if="duration === opt.value"
+                viewBox="0 0 24 24"
+                width="15"
+                height="15"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="autofit-check-icon"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+          </div>
+        </el-popover>
+      </div>
+
+      <!-- 自动切页 + 步进输入框 -->
+      <div class="setting-row">
+        <el-checkbox v-model="autoAdvance" class="transition-checkbox">自动切页</el-checkbox>
+        <div class="stepper-box" :class="{ disabled: !autoAdvance }">
+          <input
+            type="number"
+            class="stepper-input"
+            v-model.number="autoAdvanceDelay"
+            :disabled="!autoAdvance"
+            step="0.5"
+            min="0.1"
+            max="60"
+          />
+          <span class="stepper-unit">秒</span>
+          <div class="stepper-arrows">
+            <button type="button" class="stepper-btn" :disabled="!autoAdvance" @click.stop="stepUp">
+              <svg viewBox="0 0 1024 1024" width="8" height="8" fill="currentColor">
+                <path d="M512 320l320 384H192z" />
+              </svg>
+            </button>
+            <button type="button" class="stepper-btn" :disabled="!autoAdvance" @click.stop="stepDown">
+              <svg viewBox="0 0 1024 1024" width="8" height="8" fill="currentColor">
+                <path d="M512 704l-320-384h640z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 单击鼠标时换片 -->
+      <div class="setting-row">
+        <el-checkbox v-model="clickAdvance" class="transition-checkbox">单击鼠标时换片</el-checkbox>
+      </div>
+
+      <!-- 应用于所有幻灯片 -->
+      <button type="button" class="transition-apply-all-btn" @click="handleApplyAll">
+        应用于所有幻灯片
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.sidebar-transition-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 15px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  max-height: 100%;
+  width: 288px;
+}
+
+.transition-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+
+  .section-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #1e293b;
+    letter-spacing: 0.2px;
+  }
+
+  .preview-btn {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: #1e6fff;
+    font-size: 13px;
+    font-weight: 500;
+    padding: 2px 4px;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+      opacity: 0.85;
+    }
+
+    .play-icon {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.transition-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 124px);
+  gap: 12px 10px;
+  justify-content: space-between;
+}
+
+.transition-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  width: 124px;
+
+  &:hover {
+    .transition-card {
+      border-color: #93c5fd;
+      background: #ffffff;
+    }
+    .transition-name {
+      color: #1e6fff;
+    }
+  }
+
+  &.active {
+    .transition-card {
+      border: 1.5px solid #1e6fff !important;
+      background: #ffffff !important;
+      box-shadow: 0 0 0 1px rgba(30, 111, 255, 0.08);
+    }
+
+    .transition-name {
+      color: #1e6fff;
+      font-weight: 600;
+    }
+  }
+}
+
+.transition-card {
+  width: 124px;
+  height: 72px;
+  border: 1px solid #e2e8f0;
+  background: #fafafc;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.transition-icon-svg {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  display: block;
+}
+
+.transition-name {
+  font-size: 12px;
+  color: #334155;
+  font-weight: 500;
+  text-align: center;
+  line-height: 1.2;
+  margin-top: 6px;
+  white-space: nowrap;
+  transition: color 0.15s ease;
+}
+
+.transition-settings-section {
+  border-top: 1px solid #f1f5f9;
+  padding-top: 16px;
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.setting-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  .setting-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: #1e293b;
+  }
+}
+
+/* Custom Select Trigger for Duration */
+.custom-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 34px;
+  background-color: #fafafa;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+
+  &:hover {
+    border-color: #cbd5e1;
+  }
+
+  &.is-active {
+    border-color: #1e6fff;
+    background-color: #ffffff;
+    box-shadow: 0 0 0 1px #1e6fff;
+  }
+}
+
+.select-trigger-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+}
+
+.select-trigger-arrow {
+  color: #94a3b8;
+  transition: transform 0.2s ease;
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+
+.autofit-menu-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.autofit-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 34px;
+  padding: 0 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+
+  &:hover {
+    background-color: #f8fafc;
+  }
+
+  &.is-selected {
+    background-color: #eef2ff;
+
+    .autofit-item-label {
+      color: #1e6fff;
+      font-weight: 500;
+    }
+  }
+}
+
+.autofit-item-label {
+  font-size: 13px;
+  color: #1e293b;
+  transition: color 0.15s ease;
+}
+
+.autofit-check-icon {
+  color: #1e6fff;
+  flex-shrink: 0;
+}
+
+.setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+}
+
+.transition-checkbox {
+  :deep(.el-checkbox__label) {
+    font-size: 13px;
+    color: #1e293b;
+  }
+
+  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+    background-color: #1e6fff;
+    border-color: #1e6fff;
+  }
+}
+
+.stepper-box {
+  display: flex;
+  align-items: center;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  background: #ffffff;
+  height: 30px;
+  padding: 0 4px 0 8px;
+  box-sizing: border-box;
+  width: 104px;
+  transition: all 0.15s ease;
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    background: #f8fafc;
+  }
+
+  &:hover:not(.disabled),
+  &:focus-within:not(.disabled) {
+    border-color: #1e6fff;
+  }
+
+  .stepper-input {
+    width: 38px;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 13px;
+    color: #1e293b;
+    text-align: center;
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  .stepper-unit {
+    font-size: 12px;
+    color: #64748b;
+    margin: 0 4px;
+    user-select: none;
+  }
+
+  .stepper-arrows {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    margin-left: auto;
+  }
+
+  .stepper-btn {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+    height: 11px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #94a3b8;
+    line-height: 1;
+
+    &:hover:not(:disabled) {
+      color: #1e6fff;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.transition-apply-all-btn {
+  width: 100%;
+  height: 38px;
+  border-radius: 8px;
+  background: #1e6fff;
+  color: #ffffff;
+  font-size: 13.5px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease;
+  margin-top: 4px;
+  user-select: none;
+
+  &:hover {
+    background: #1656cb;
+  }
+
+  &:active {
+    background: #0e4bb5;
+  }
+}
+</style>