jvs-ppt-ui 0.0.14 → 0.0.16

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

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
+import { ref, computed } from 'vue'
+import { useSlides } from '../../../composables/useSlides'
+
+const props = withDefaults(defineProps<{
   elementX: number
   elementY: number
   elementW: number
@@ -32,191 +35,342 @@ const emit = defineEmits<{
   (e: 'toggleFlipV'): void
   (e: 'adjustZIndex', command: any): void
 }>()
+
+const { activeSlide, selectedElementId, selectedElementIds } = useSlides()
+
+const selectedIds = computed(() => {
+  if (selectedElementIds.value && selectedElementIds.value.length > 0) {
+    return selectedElementIds.value
+  }
+  if (selectedElementId.value) {
+    return [selectedElementId.value]
+  }
+  return []
+})
+
+const slideElements = computed(() => activeSlide.value?.elements || [])
+
+const selectedIndices = computed(() => {
+  const ids = selectedIds.value
+  if (!ids.length) return []
+  return slideElements.value
+    .map((el: any, index: number) => (ids.includes(el.id) ? index : -1))
+    .filter((idx: number) => idx !== -1)
+})
+
+const canMoveUp = computed(() => {
+  if (selectedIndices.value.length === 0 || slideElements.value.length <= 1) return false
+  const total = slideElements.value.length
+  const allAtTop = selectedIndices.value.every((idx: number) => idx >= total - selectedIndices.value.length)
+  return !allAtTop
+})
+
+const canMoveDown = computed(() => {
+  if (selectedIndices.value.length === 0 || slideElements.value.length <= 1) return false
+  const allAtBottom = selectedIndices.value.every((idx: number) => idx < selectedIndices.value.length)
+  return !allAtBottom
+})
+
+const canMoveTop = computed(() => canMoveUp.value)
+const canMoveBottom = computed(() => canMoveDown.value)
+
+const rotateInputRef = ref<HTMLInputElement | null>(null)
+const rotateDisplayLen = computed(() => Math.max(1, String(props.elementRotate ?? 0).length))
+
+function focusRotateInput(e: MouseEvent) {
+  if (e.target !== rotateInputRef.value) {
+    rotateInputRef.value?.focus()
+    rotateInputRef.value?.select()
+  }
+}
+
+function onRotateInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  const raw = target.value
+  if (raw === '' || raw === '-') return
+  const val = Number(raw)
+  if (isNaN(val)) return
+  let deg = Math.round(val) % 360
+  if (deg < 0) deg += 360
+  emit('update:elementRotate', deg)
+}
+
+function onRotateBlur(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.value === '' || target.value === '-' || isNaN(Number(target.value))) {
+    target.value = String(props.elementRotate ?? 0)
+  } else {
+    let val = Math.round(Number(target.value)) % 360
+    if (val < 0) val += 360
+    target.value = String(val)
+    emit('update:elementRotate', val)
+  }
+}
 </script>
 
 <template>
-  <div class="control-group sidebar-position-group"
-    style="padding: 0 16px; margin-top: 8px; margin-bottom: 8px; border-bottom: 1px solid #EEEFF0; padding-bottom: 12px; display: flex; flex-direction: column; gap: 8px;">
-    <!-- X & Y -->
-    <div v-if="!hidePosition" style="display: grid; grid-template-columns: 1fr 1fr 32px; gap: 8px;">
-      <div class="custom-num-input" style="height: 32px;">
-        <span class="custom-num-prefix" style="width: 20px; text-align: left;">X</span>
-        <input type="number" step="any" :value="elementX"
-          @input="emit('update:elementX', Number(($event.target as HTMLInputElement).value))"
-          class="custom-num-field" />
-      </div>
-      <div class="custom-num-input" style="height: 32px;">
-        <span class="custom-num-prefix" style="width: 20px; text-align: left;">Y</span>
-        <input type="number" step="any" :value="elementY"
-          @input="emit('update:elementY', Number(($event.target as HTMLInputElement).value))"
-          class="custom-num-field" />
+  <div class="control-group sidebar-position-group">
+    <!-- Row 1: X & Y -->
+    <div v-if="!hidePosition" class="pos-row">
+      <div class="pos-main-cols">
+        <div class="custom-num-input">
+          <span class="custom-num-prefix">X</span>
+          <input type="number" step="any" :value="elementX"
+            @input="emit('update:elementX', Number(($event.target as HTMLInputElement).value))"
+            class="custom-num-field" />
+        </div>
+        <div class="custom-num-input">
+          <span class="custom-num-prefix">Y</span>
+          <input type="number" step="any" :value="elementY"
+            @input="emit('update:elementY', Number(($event.target as HTMLInputElement).value))"
+            class="custom-num-field" />
+        </div>
       </div>
+      <div class="pos-side-placeholder"></div>
     </div>
 
-    <!-- W & H & Lock aspect ratio -->
-    <div v-if="!hideDimensions"
-      style="display: grid; grid-template-columns: 1fr 1fr 32px; gap: 8px; align-items: center;">
-      <div class="custom-num-input" style="height: 32px;">
-        <span class="custom-num-prefix" style="width: 20px; text-align: left;">W</span>
-        <input type="number" step="any" :value="elementW"
-          @input="emit('update:elementW', Number(($event.target as HTMLInputElement).value))"
-          class="custom-num-field" />
-      </div>
-      <div class="custom-num-input" :class="{ 'is-disabled': disableHeight }" style="height: 32px;">
-        <span class="custom-num-prefix" style="width: 20px; text-align: left;">H</span>
-        <input type="number" step="any" :value="elementH" :disabled="disableHeight" :readonly="disableHeight"
-          @input="!disableHeight && emit('update:elementH', Number(($event.target as HTMLInputElement).value))"
-          class="custom-num-field" />
+    <!-- Row 2: W & H & Lock aspect ratio -->
+    <div v-if="!hideDimensions" class="pos-row">
+      <div class="pos-main-cols">
+        <div class="custom-num-input">
+          <span class="custom-num-prefix">W</span>
+          <input type="number" step="any" :value="elementW"
+            @input="emit('update:elementW', Number(($event.target as HTMLInputElement).value))"
+            class="custom-num-field" />
+        </div>
+        <div class="custom-num-input" :class="{ 'is-disabled': disableHeight }">
+          <span class="custom-num-prefix">H</span>
+          <input type="number" step="any" :value="elementH" :disabled="disableHeight" :readonly="disableHeight"
+            @input="!disableHeight && emit('update:elementH', Number(($event.target as HTMLInputElement).value))"
+            class="custom-num-field" />
+        </div>
       </div>
-      <!-- aspect lock -->
-      <div class="aspect-lock-btn" :class="{ 'is-active': isFixedRatio }" :title="isFixedRatio ? '取消锁定宽高比' : '锁定宽高比'"
+      <!-- Aspect lock button -->
+      <button type="button" class="aspect-lock-btn" :class="{ 'is-active': isFixedRatio }"
+        :title="isFixedRatio ? '取消锁定宽高比' : '锁定宽高比'"
         @click="emit('update:isFixedRatio', !isFixedRatio)">
-        <svg class="icon" style="width: 16px; height: 16px;">
+        <svg class="icon" style="width: 16px; height: 16px; fill: currentColor;">
           <use :xlink:href="isFixedRatio ? '#icon-suoding1' : '#icon-quxiaosuoding'"></use>
         </svg>
-      </div>
+      </button>
     </div>
 
-    <!-- Rotate & Flip Horizontal & Flip Vertical -->
-    <div v-if="showRotate || showFlips" style="display: grid; gap: 8px; grid-template-columns: 1fr 1fr 32px;">
-      <!-- Rotate -->
-      <div v-if="showRotate" class="custom-num-input" style="height: 32px; position: relative;">
-        <span class="custom-num-prefix" style="display: flex; align-items: center;">
-          <svg class="icon" style="width: 16px; height: 16px; margin-right: 6px;">
-            <use xlink:href="#icon-jiaodu"></use>
-          </svg>
-        </span>
-        <input type="number" :value="elementRotate"
-          @input="emit('update:elementRotate', Number(($event.target as HTMLInputElement).value))"
-          class="custom-num-field" />
-        <span class="angle-icon" :style="{ left: `calc(30px + ${String(elementRotate ?? 0).length * 8}px)` }">°</span>
-      </div>
-      <div v-else></div>
-
-      <!-- Flips -->
-      <div v-if="showFlips" style="display: grid; gap: 8px; grid-template-columns: 1fr 1fr;">
-        <div class="grid-btn" title="水平翻转" @click="emit('toggleFlipH')"
-          :style="isFlipH ? { color: 'var(--accent-primary)', background: 'var(--bg-active)' } : { color: 'var(--text-secondary)' }"
-          style="height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-sizing: border-box; border: none; background: #F5F6F7; flex-shrink: 0;">
-          <svg class="icon" style="width: 16px; height: 16px;">
-            <use xlink:href="#icon-shuipingfanzhuan"></use>
-          </svg>
+    <!-- Row 3: Rotate & Flips -->
+    <div v-if="showRotate || showFlips" class="pos-row">
+      <div class="pos-main-cols">
+        <!-- Rotate in Col 1 (matches width of X and W exactly) -->
+        <div v-if="showRotate" class="custom-num-input rotate-input-wrapper" @click="focusRotateInput">
+          <span class="custom-num-prefix angle-prefix-icon">
+            <svg class="icon" style="width: 14px; height: 14px; fill: currentColor;">
+              <use xlink:href="#icon-jiaodu"></use>
+            </svg>
+          </span>
+          <input
+            ref="rotateInputRef"
+            type="text"
+            inputmode="numeric"
+            :value="elementRotate ?? 0"
+            @input="onRotateInput"
+            @blur="onRotateBlur"
+            @keydown.enter="($event.target as HTMLElement).blur()"
+            class="custom-num-field rotate-num-field"
+            :style="{ width: `calc(${rotateDisplayLen}ch + 6px)` }"
+          />
+          <span class="angle-deg-symbol">°</span>
         </div>
-        <div class="grid-btn" title="垂直翻转" @click="emit('toggleFlipV')"
-          :style="isFlipV ? { color: 'var(--accent-primary)', background: 'var(--bg-active)' } : { color: 'var(--text-secondary)' }"
-          style="height: 32px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-sizing: border-box; border: none; background: #F5F6F7; flex-shrink: 0;">
-          <svg class="icon" style="width: 16px; height: 16px;">
-            <use xlink:href="#icon-chuizhifanzhuan"></use>
-          </svg>
+        <div v-else class="empty-col-placeholder"></div>
+
+        <!-- Flips in Col 2 (matches boundaries of Y and H exactly) -->
+        <div v-if="showFlips" class="flips-pair">
+          <button type="button" class="pos-action-btn" title="水平翻转"
+            @click="emit('toggleFlipH')">
+            <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4">
+              <polygon points="8,2 2,14 8,14" fill="none" stroke="currentColor" />
+              <polygon points="8,2 14,14 8,14" fill="currentColor" stroke="currentColor" />
+              <line x1="8" y1="1" x2="8" y2="15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
+            </svg>
+          </button>
+          <button type="button" class="pos-action-btn" title="垂直翻转"
+            @click="emit('toggleFlipV')">
+            <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4">
+              <polygon points="14,8 2,2 2,8" fill="none" stroke="currentColor" />
+              <polygon points="14,8 2,14 2,8" fill="currentColor" stroke="currentColor" />
+              <line x1="1" y1="8" x2="15" y2="8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" />
+            </svg>
+          </button>
         </div>
       </div>
+      <div class="pos-side-placeholder"></div>
     </div>
-    <!-- Layer row -->
-    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 32px; gap: 8px;">
-      <div class="grid-btn" title="上移一层" @click="emit('adjustZIndex', 'forward')">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-shangyiyiceng"></use>
-        </svg>
-      </div>
-      <div class="grid-btn" title="下移一层" @click="emit('adjustZIndex', 'backward')">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-xiayiyiceng"></use>
-        </svg>
-      </div>
-      <div class="grid-btn" title="置于顶层" @click="emit('adjustZIndex', 'front')">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-zhiyudingceng"></use>
-        </svg>
-      </div>
-      <div class="grid-btn" title="置于底层" @click="emit('adjustZIndex', 'back')">
-        <svg class="icon" style="width: 16px; height: 16px;">
-          <use xlink:href="#icon-zhiyudiceng"></use>
-        </svg>
+
+    <!-- Row 4: Layer ordering buttons (上移一层, 下移一层, 置于顶层, 置于底层) -->
+    <div class="pos-row">
+      <div class="pos-main-cols">
+        <div class="layer-buttons-quad">
+          <!-- 上移一层 -->
+          <button type="button" class="pos-action-btn" :class="{ 'is-disabled': !canMoveUp }"
+            :disabled="!canMoveUp" title="上移一层" @click="canMoveUp && emit('adjustZIndex', 'forward')">
+            <svg class="icon" style="width: 16px; height: 16px;">
+              <use :xlink:href="canMoveUp ? '#icon-shangyiyiceng' : '#icon-shangyiyiceng1'"></use>
+            </svg>
+          </button>
+
+          <!-- 下移一层 -->
+          <button type="button" class="pos-action-btn" :class="{ 'is-disabled': !canMoveDown }"
+            :disabled="!canMoveDown" title="下移一层" @click="canMoveDown && emit('adjustZIndex', 'backward')">
+            <svg class="icon" style="width: 16px; height: 16px;">
+              <use :xlink:href="canMoveDown ? '#icon-xiayiyiceng' : '#icon-xiayiyiceng1'"></use>
+            </svg>
+          </button>
+
+          <!-- 置于顶层 -->
+          <button type="button" class="pos-action-btn" :class="{ 'is-disabled': !canMoveTop }"
+            :disabled="!canMoveTop" title="置于顶层" @click="canMoveTop && emit('adjustZIndex', 'front')">
+            <svg class="icon" style="width: 16px; height: 16px;">
+              <use :xlink:href="canMoveTop ? '#icon-zhiyudingceng' : '#icon-zhiyudingceng1'"></use>
+            </svg>
+          </button>
+
+          <!-- 置于底层 -->
+          <button type="button" class="pos-action-btn" :class="{ 'is-disabled': !canMoveBottom }"
+            :disabled="!canMoveBottom" title="置于底层" @click="canMoveBottom && emit('adjustZIndex', 'back')">
+            <svg class="icon" style="width: 16px; height: 16px;">
+              <use :xlink:href="canMoveBottom ? '#icon-zhiyudiceng' : '#icon-zhiyudiceng1'"></use>
+            </svg>
+          </button>
+        </div>
       </div>
+      <div class="pos-side-placeholder"></div>
     </div>
     <slot />
   </div>
 </template>
 
 <style scoped>
-.custom-num-input {
+.sidebar-position-group {
+  padding: 0 16px;
+  margin-top: 4px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #edf0f3;
+  padding-bottom: 12px;
   display: flex;
-  align-items: center;
-  background: #F5F6F7;
-  border: 1px solid #F5F6F7;
-  border-radius: 4px;
-  padding: 0 8px;
-  height: 32px;
-  box-sizing: border-box;
-  transition: border-color 0.15s ease;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.custom-num-input:focus-within {
-  border-color: var(--accent-primary, #7c3aed);
-}
-
-.custom-num-input.is-disabled {
-  background: #f8fafc;
-  cursor: not-allowed;
-  opacity: 0.85;
+.pos-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
 }
 
-.custom-num-input.is-disabled .custom-num-prefix {
-  color: var(--text-muted, #94a3b8);
+.pos-main-cols {
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
 }
 
-.custom-num-input.is-disabled .custom-num-field {
-  color: var(--text-muted, #94a3b8);
-  cursor: not-allowed;
+.pos-side-placeholder {
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  visibility: hidden;
   pointer-events: none;
-  user-select: none;
-}
-
-.custom-num-input.is-disabled:hover,
-.custom-num-input.is-disabled:focus-within {
-  border-color: #F5F6F7;
 }
 
 .aspect-lock-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
   box-sizing: border-box;
   flex-shrink: 0;
-  background: #F5F6F7;
-  color: var(--text-secondary, #64748b);
-  border: none;
+  background: #f8f9fa;
+  color: #64748b;
+  border: 1px solid #edf0f3;
+  padding: 0;
 }
 
-.aspect-lock-btn:hover {
-  background: #eef2ff;
-  color: var(--accent-primary, #7c3aed);
+/* 仅在未选中状态下应用鼠标移入浅蓝背景 */
+.aspect-lock-btn:not(.is-active):hover {
+  background: rgba(30, 111, 255, 0.12);
+  color: #1E6FFF;
+  border-color: rgba(30, 111, 255, 0.4);
 }
 
-.aspect-lock-btn.is-active {
-  background: var(--accent-primary, #7c3aed) !important;
+/* 选中状态：以选中的 #1E6FFF 为主，鼠标移入时不覆盖背景色 */
+.aspect-lock-btn.is-active,
+.aspect-lock-btn.is-active:hover {
+  background: #1E6FFF !important;
   color: #ffffff !important;
+  border-color: #1E6FFF !important;
 }
 
-.aspect-lock-btn.is-active svg {
-  fill: #ffffff !important;
+.flips-pair {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
 }
 
-.aspect-lock-btn.is-active:hover {
-  background: var(--accent-primary, #7c3aed) !important;
-  opacity: 0.92;
+.layer-buttons-quad {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.empty-col-placeholder {
+  height: 34px;
+  visibility: hidden;
+}
+
+.custom-num-input {
+  display: flex;
+  align-items: center;
+  background: #f8f9fa;
+  border: 1px solid #edf0f3;
+  border-radius: 8px;
+  padding: 0 10px;
+  height: 34px;
+  box-sizing: border-box;
+  transition: all 0.15s ease;
+  position: relative;
+  min-width: 0;
+  width: 100%;
+}
+
+.custom-num-input:hover {
+  border-color: #e2e8f0;
+}
+
+.custom-num-input:focus-within {
+  background: #ffffff;
+  border-color: #1E6FFF;
+  box-shadow: 0 0 0 2px rgba(30, 111, 255, 0.12);
 }
 
 .custom-num-prefix {
   font-size: 12px;
-  color: var(--text-secondary, #64748b);
+  font-weight: 500;
+  color: #94a3b8;
   white-space: nowrap;
   user-select: none;
+  margin-right: 6px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 .custom-num-field {
@@ -224,9 +378,11 @@ const emit = defineEmits<{
   border: none;
   background: transparent;
   outline: none;
-  font-size: 12px;
-  color: var(--text-primary, #1e293b);
-  padding: 0 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  padding: 0;
+  min-width: 0;
 }
 
 .custom-num-field::-webkit-outer-spin-button,
@@ -235,32 +391,85 @@ const emit = defineEmits<{
   margin: 0;
 }
 
-.angle-icon {
-  position: absolute;
-  top: 50%;
-  transform: translateY(calc(-50% - 2px));
-  pointer-events: none;
+.rotate-input-wrapper {
+  cursor: text;
+}
+
+.rotate-num-field {
+  width: auto;
+  min-width: 1ch;
+  flex: none;
+  font-variant-numeric: tabular-nums;
+  box-sizing: content-box;
+}
+
+.angle-prefix-icon {
+  color: #64748b;
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+.angle-deg-symbol {
   font-size: 12px;
-  color: var(--text-secondary, #64748b);
+  font-weight: 500;
+  color: #64748b;
   margin-left: 2px;
+  line-height: 1;
+  user-select: none;
+  pointer-events: none;
+  flex-shrink: 0;
 }
 
-.grid-btn {
-  height: 32px;
-  border-radius: 4px;
+.pos-action-btn {
+  height: 34px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background: #F5F6F7;
-  color: var(--text-primary, #1e293b);
-  border: none;
+  background: #f8f9fa;
+  color: #64748b;
+  border: 1px solid #edf0f3;
   box-sizing: border-box;
   transition: all 0.15s ease;
+  padding: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+/* 仅在未选中且未禁用状态下应用鼠标移入浅蓝背景 */
+.pos-action-btn:not(.is-active):not(:disabled):not(.is-disabled):hover {
+  background: rgba(30, 111, 255, 0.12);
+  color: #1E6FFF;
+  border-color: rgba(30, 111, 255, 0.4);
 }
 
-.grid-btn:hover {
-  background: #eef2ff;
-  color: var(--accent-primary, #7c3aed);
+/* 禁用状态 */
+.pos-action-btn:disabled,
+.pos-action-btn.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.85;
+  background: #f8f9fa;
+  border-color: #edf0f3;
+}
+
+/* 选中状态：以选中的 #1E6FFF 为主，鼠标移入时不覆盖背景色 */
+.pos-action-btn.is-active,
+.pos-action-btn.is-active:hover {
+  background: #1E6FFF !important;
+  color: #ffffff !important;
+  border-color: #1E6FFF !important;
+}
+
+.custom-num-input.is-disabled {
+  background: #f8fafc;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.custom-num-input.is-disabled .custom-num-prefix,
+.custom-num-input.is-disabled .custom-num-field {
+  color: #94a3b8;
+  cursor: not-allowed;
 }
 </style>