jvs-ppt-ui 0.0.14 → 0.0.16

package/src/components/sidebar/common/SidebarReflectionAccordion.vue

@@ -1,203 +1,429 @@
-<script setup lang="ts">
-const props = withDefaults(defineProps<{
-  enableReflection?: boolean
-  isReflectionExpanded?: boolean
-  reflectionDistance?: number
-  reflectionSize?: number
-  reflectionOpacity?: number
-  reflectionBlur?: number
-}>(), {
-  enableReflection: false,
-  isReflectionExpanded: false,
-  reflectionDistance: 0,
-  reflectionSize: 100,
-  reflectionOpacity: 30,
-  reflectionBlur: 0
-})
-
-const emit = defineEmits<{
-  (e: 'update:enableReflection', val: boolean): void
-  (e: 'update:isReflectionExpanded', val: boolean): void
-  (e: 'update:reflectionDistance', val: number): void
-  (e: 'update:reflectionSize', val: number): void
-  (e: 'update:reflectionOpacity', val: number): void
-  (e: 'update:reflectionBlur', val: number): void
-}>()
-
-function toggleHeader() {
-  if (!props.enableReflection) return
-  emit('update:isReflectionExpanded', !props.isReflectionExpanded)
-}
-
-function toggleExpand() {
-  if (!props.enableReflection) return
-  emit('update:isReflectionExpanded', !props.isReflectionExpanded)
-}
-
-function toggleSwitch(val: any) {
-  const boolVal = !!val
-  emit('update:enableReflection', boolVal)
-  emit('update:isReflectionExpanded', boolVal)
-}
-</script>
-
-<template>
-  <div class="control-group shape-accordion-group">
-    <div class="shape-accordion-header" @click="toggleHeader">
-      <span class="control-label shape-accordion-header-label">
-        <span class="accordion-arrow" @click.stop="toggleExpand"
-          :style="{ transform: (enableReflection && isReflectionExpanded) ? 'rotate(90deg)' : 'rotate(0deg)' }">▶</span>倒影
-      </span>
-      <el-switch :model-value="enableReflection" size="small" @click.stop @change="toggleSwitch" />
-    </div>
-
-    <div v-show="isReflectionExpanded && enableReflection" class="shape-accordion-content">
-      <!-- Distance Slider -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">距离</span>
-        <div class="shape-slider-wrapper">
-          <el-slider :model-value="reflectionDistance || 0"
-            @update:model-value="emit('update:reflectionDistance', $event as number)" :min="0" :max="100" :step="0.1"
-            size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
-            :show-input-controls="false" />
-        </div>
-      </div>
-
-      <!-- Size Slider -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">大小</span>
-        <div class="shape-slider-wrapper">
-          <el-slider :model-value="reflectionSize || 0"
-            @update:model-value="emit('update:reflectionSize', $event as number)" :min="0" :max="100" :step="0.1"
-            size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
-            :show-input-controls="false" />
-        </div>
-      </div>
-
-      <!-- Opacity Slider -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">透明度</span>
-        <div class="shape-slider-wrapper">
-          <el-slider :model-value="reflectionOpacity || 0"
-            @update:model-value="emit('update:reflectionOpacity', $event as number)" :min="0" :max="100" :step="1"
-            size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
-            :show-input-controls="false" />
-        </div>
-      </div>
-
-      <!-- Blur Slider -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">模糊</span>
-        <div class="shape-slider-wrapper">
-          <el-slider :model-value="reflectionBlur || 0"
-            @update:model-value="emit('update:reflectionBlur', $event as number)" :min="0" :max="100" :step="0.1"
-            size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
-            :show-input-controls="false" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.shape-accordion-group {
-  border-bottom: 1px solid #EEEFF0;
-  padding-bottom: 12px;
-  margin-bottom: 8px;
-}
-
-.shape-accordion-header {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  height: 32px;
-  cursor: pointer;
-}
-
-.shape-accordion-header-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 80px;
-  flex-shrink: 0;
-  text-align: left;
-}
-
-.accordion-arrow {
-  font-size: 9px;
-  transition: transform 0.2s;
-  display: inline-block;
-  color: #475569;
-}
-
-.shape-accordion-content {
-  padding: 12px 16px 0 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.shape-property-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0;
-  gap: 8px;
-}
-
-.shape-property-label {
-  font-size: 12px;
-  color: var(--text-secondary, #64748b);
-  width: 80px;
-  flex-shrink: 0;
-  text-align: left;
-}
-
-.shape-slider-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1;
-}
-
-.custom-slider {
-  --el-slider-height: 4px !important;
-  --el-slider-button-size: 16px !important;
-  --el-slider-button-wrapper-offset: -16px !important;
-
-  :deep(.show-input) {
-    margin-right: 16px;
-  }
-
-  :deep(.el-input-number) {
-    width: 48px;
-    height: 30px;
-
-    .el-input__wrapper {
-      padding: 4px;
-      background: #F5F6F7;
-      border: none;
-      border-radius: 4px;
-      box-shadow: none;
-    }
-
-    .el-input__inner {
-      text-align: center;
-      font-size: 12px;
-      color: var(--text-primary);
-    }
-  }
-}
-
-:deep(.el-switch__core) {
-  border-radius: 4px !important;
-}
-
-:deep(.el-switch__action) {
-  border-radius: 3px !important;
-}
-</style>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  enableReflection?: boolean
+  isReflectionExpanded?: boolean
+  reflectionDistance?: number
+  reflectionSize?: number
+  reflectionOpacity?: number
+  reflectionBlur?: number
+}>(), {
+  enableReflection: false,
+  isReflectionExpanded: false,
+  reflectionDistance: 0,
+  reflectionSize: 100,
+  reflectionOpacity: 30,
+  reflectionBlur: 0
+})
+
+const emit = defineEmits<{
+  (e: 'update:enableReflection', val: boolean): void
+  (e: 'update:isReflectionExpanded', val: boolean): void
+  (e: 'update:reflectionDistance', val: number): void
+  (e: 'update:reflectionSize', val: number): void
+  (e: 'update:reflectionOpacity', val: number): void
+  (e: 'update:reflectionBlur', val: number): void
+}>()
+
+function toggleHeader() {
+  if (!props.enableReflection) return
+  emit('update:isReflectionExpanded', !props.isReflectionExpanded)
+}
+
+function toggleSwitch(val: any) {
+  const boolVal = !!val
+  emit('update:enableReflection', boolVal)
+  emit('update:isReflectionExpanded', boolVal)
+}
+
+// Distance input
+const distanceInputRef = ref<HTMLInputElement | null>(null)
+function focusDistanceInput(e: MouseEvent) {
+  if (e.target !== distanceInputRef.value) {
+    distanceInputRef.value?.focus()
+    distanceInputRef.value?.select()
+  }
+}
+function onDistanceInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.value === '') return
+  const val = Number(target.value)
+  if (isNaN(val)) return
+  emit('update:reflectionDistance', Math.max(0, Math.min(100, val)))
+}
+function onDistanceBlur(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.value === '' || isNaN(Number(target.value))) {
+    target.value = String(props.reflectionDistance || 0)
+  } else {
+    const val = Math.max(0, Math.min(100, Number(target.value)))
+    target.value = String(val)
+    emit('update:reflectionDistance', val)
+  }
+}
+
+// Size input
+const sizeInputRef = ref<HTMLInputElement | null>(null)
+function focusSizeInput(e: MouseEvent) {
+  if (e.target !== sizeInputRef.value) {
+    sizeInputRef.value?.focus()
+    sizeInputRef.value?.select()
+  }
+}
+function onSizeInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.value === '') return
+  const val = Number(target.value)
+  if (isNaN(val)) return
+  emit('update:reflectionSize', Math.max(0, Math.min(100, val)))
+}
+function onSizeBlur(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.value === '' || isNaN(Number(target.value))) {
+    target.value = String(props.reflectionSize || 0)
+  } else {
+    const val = Math.max(0, Math.min(100, Number(target.value)))
+    target.value = String(val)
+    emit('update:reflectionSize', val)
+  }
+}
+
+// Blur input
+const blurInputRef = ref<HTMLInputElement | null>(null)
+function focusBlurInput(e: MouseEvent) {
+  if (e.target !== blurInputRef.value) {
+    blurInputRef.value?.focus()
+    blurInputRef.value?.select()
+  }
+}
+function onBlurInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.value === '') return
+  const val = Number(target.value)
+  if (isNaN(val)) return
+  emit('update:reflectionBlur', Math.max(0, Math.min(100, val)))
+}
+function onBlurBlur(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.value === '' || isNaN(Number(target.value))) {
+    target.value = String(props.reflectionBlur || 0)
+  } else {
+    const val = Math.max(0, Math.min(100, Number(target.value)))
+    target.value = String(val)
+    emit('update:reflectionBlur', val)
+  }
+}
+
+// Opacity input
+const opacityInputRef = ref<HTMLInputElement | null>(null)
+function focusOpacityInput(e: MouseEvent) {
+  if (e.target !== opacityInputRef.value) {
+    opacityInputRef.value?.focus()
+    opacityInputRef.value?.select()
+  }
+}
+function onOpacityInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.value === '') return
+  const val = Number(target.value)
+  if (isNaN(val)) return
+  emit('update:reflectionOpacity', Math.max(0, Math.min(100, val)))
+}
+function onOpacityBlur(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.value === '' || isNaN(Number(target.value))) {
+    target.value = String(props.reflectionOpacity || 0)
+  } else {
+    const val = Math.max(0, Math.min(100, Number(target.value)))
+    target.value = String(val)
+    emit('update:reflectionOpacity', val)
+  }
+}
+</script>
+
+<template>
+  <div class="control-group shape-accordion-group">
+    <!-- Header -->
+    <div class="shape-accordion-header" @click="toggleHeader">
+      <span class="control-label shape-accordion-header-label">
+        <span>倒影</span>
+        <span class="accordion-arrow">
+          <svg class="icon" style="width: 14px; height: 14px;">
+            <use :href="(enableReflection && isReflectionExpanded) ? '#icon-xiala-zhankai' : '#icon-xiala-shouqi'"
+                 :xlink:href="(enableReflection && isReflectionExpanded) ? '#icon-xiala-zhankai' : '#icon-xiala-shouqi'"></use>
+          </svg>
+        </span>
+      </span>
+      <el-switch :model-value="enableReflection" size="small" @click.stop @change="toggleSwitch" />
+    </div>
+
+    <!-- Content (order: 距离, 大小, 模糊度, 透明度 matching Image 2) -->
+    <div v-show="isReflectionExpanded && enableReflection" class="shape-accordion-content">
+      <!-- 1. 距离 (Distance) -->
+      <div class="prop-item">
+        <div class="prop-label">距离</div>
+        <div class="slider-control-row">
+          <el-slider
+            :model-value="reflectionDistance || 0"
+            @update:model-value="emit('update:reflectionDistance', Math.round(($event as number) * 10) / 10)"
+            :min="0"
+            :max="100"
+            :step="0.5"
+            size="small"
+            class="custom-slider"
+            :show-tooltip="false"
+          />
+          <div class="slider-num-pill" @click="focusDistanceInput">
+            <input
+              ref="distanceInputRef"
+              type="text"
+              inputmode="numeric"
+              :value="reflectionDistance || 0"
+              @input="onDistanceInput"
+              @blur="onDistanceBlur"
+              @keydown.enter="($event.target as HTMLElement).blur()"
+              class="num-field-center"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 2. 大小 (Size) -->
+      <div class="prop-item">
+        <div class="prop-label">大小</div>
+        <div class="slider-control-row">
+          <el-slider
+            :model-value="reflectionSize || 0"
+            @update:model-value="emit('update:reflectionSize', Math.round(($event as number) * 10) / 10)"
+            :min="0"
+            :max="100"
+            :step="0.5"
+            size="small"
+            class="custom-slider"
+            :show-tooltip="false"
+          />
+          <div class="slider-num-pill" @click="focusSizeInput">
+            <input
+              ref="sizeInputRef"
+              type="text"
+              inputmode="numeric"
+              :value="reflectionSize || 0"
+              @input="onSizeInput"
+              @blur="onSizeBlur"
+              @keydown.enter="($event.target as HTMLElement).blur()"
+              class="num-field-center"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 3. 模糊度 (Blur) -->
+      <div class="prop-item">
+        <div class="prop-label">模糊度</div>
+        <div class="slider-control-row">
+          <el-slider
+            :model-value="reflectionBlur || 0"
+            @update:model-value="emit('update:reflectionBlur', Math.round(($event as number) * 10) / 10)"
+            :min="0"
+            :max="100"
+            :step="0.5"
+            size="small"
+            class="custom-slider"
+            :show-tooltip="false"
+          />
+          <div class="slider-num-pill" @click="focusBlurInput">
+            <input
+              ref="blurInputRef"
+              type="text"
+              inputmode="numeric"
+              :value="reflectionBlur || 0"
+              @input="onBlurInput"
+              @blur="onBlurBlur"
+              @keydown.enter="($event.target as HTMLElement).blur()"
+              class="num-field-center"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 4. 透明度 (Opacity) -->
+      <div class="prop-item">
+        <div class="prop-label">透明度</div>
+        <div class="slider-control-row">
+          <el-slider
+            :model-value="reflectionOpacity || 0"
+            @update:model-value="emit('update:reflectionOpacity', Math.round(($event as number) * 10) / 10)"
+            :min="0"
+            :max="100"
+            :step="1"
+            size="small"
+            class="custom-slider"
+            :show-tooltip="false"
+          />
+          <div class="slider-num-pill" @click="focusOpacityInput">
+            <input
+              ref="opacityInputRef"
+              type="text"
+              inputmode="numeric"
+              :value="reflectionOpacity || 0"
+              @input="onOpacityInput"
+              @blur="onOpacityBlur"
+              @keydown.enter="($event.target as HTMLElement).blur()"
+              class="num-field-center"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.shape-accordion-group {
+  border-bottom: 1px solid #f1f5f9;
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+}
+
+.shape-accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 34px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.shape-accordion-header-label {
+  font-size: 14px;
+  font-weight: 400;
+  color: #1e293b;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.accordion-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #64748b;
+}
+
+:deep(.el-switch) {
+  --el-switch-on-color: #2563eb;
+  --el-switch-off-color: #cbd5e1;
+}
+
+.shape-accordion-content {
+  padding: 8px 16px 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.prop-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+.prop-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  user-select: none;
+  text-align: left;
+}
+
+.slider-control-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.custom-slider {
+  --el-slider-main-bg-color: #1e293b;
+  --el-slider-runway-bg-color: #E5E7EB;
+  --el-slider-height: 4px !important;
+  --el-slider-button-size: 14px !important;
+  --el-slider-button-wrapper-offset: -15px !important;
+  flex: 1;
+  margin-right: 12px;
+
+  :deep(.el-slider__runway) {
+    background-color: #E5E7EB !important;
+    height: 4px !important;
+    border-radius: 2px !important;
+  }
+
+  :deep(.el-slider__bar) {
+    background-color: #1e293b !important;
+    height: 4px !important;
+    border-radius: 2px !important;
+  }
+
+  :deep(.el-slider__button) {
+    width: 14px !important;
+    height: 14px !important;
+    border: 1px solid #d1d5db !important;
+    background-color: #ffffff !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
+    transition: transform 0.15s ease !important;
+
+    &:hover {
+      transform: scale(1.15);
+    }
+  }
+}
+
+.slider-num-pill {
+  width: 52px;
+  height: 32px;
+  background: #FAFAFA;
+  border: 1px solid #edf0f3;
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: text;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: #cbd5e1;
+  }
+
+  &:focus-within {
+    border-color: #2563eb;
+    box-shadow: 0 0 0 1px #2563eb;
+  }
+}
+
+.num-field-center {
+  width: 100%;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+  box-sizing: border-box;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    display: none !important;
+    margin: 0;
+  }
+}
+</style>