jvs-ppt-ui 0.0.14 → 0.0.16

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import QuickColorPopover from '../../QuickColorPopover.vue'
+import { parseColor } from '../../../composables/sidebar/useSidebarShapeFormat'
 
 const props = withDefaults(defineProps<{
   isBorderEnabled?: boolean
@@ -17,7 +18,7 @@ const props = withDefaults(defineProps<{
   borderHex: '#000000',
   borderWidth: 1,
   borderStyle: 'solid',
-  borderAlpha: 0,
+  borderAlpha: 100,
   showAlpha: true,
   recentColors: () => []
 })
@@ -59,74 +60,172 @@ function toggleExpand() {
   emit('update:isBorderExpanded', !props.isBorderExpanded)
 }
 
+const displayBorderOpacity = computed(() => {
+  if (props.borderHex === 'transparent' || props.borderHex === 'none') {
+    return 0
+  }
+  const alpha = props.borderAlpha !== undefined ? props.borderAlpha : 100
+  return Math.max(0, Math.min(100, Math.round(alpha)))
+})
+
+function handleBorderOpacityInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  let val = parseInt(target.value)
+  if (isNaN(val)) val = 100
+  val = Math.max(0, Math.min(100, val))
+  emit('update:borderAlpha', val)
+}
+
+function onSelectBorderColor(color: string) {
+  if (!color || color === 'transparent' || color === 'none') {
+    emit('update:borderHex', 'transparent')
+    emit('update:borderAlpha', 0)
+    return
+  }
+  const parsed = parseColor(color)
+  emit('update:borderHex', parsed.hex)
+  if (parsed.alpha !== undefined && parsed.alpha < 100) {
+    emit('update:borderAlpha', parsed.alpha)
+  } else if (!props.borderAlpha || props.borderAlpha === 0) {
+    emit('update:borderAlpha', 100)
+  }
+}
+
 function toggleSwitch(val: any) {
   const boolVal = !!val
   emit('update:isBorderEnabled', boolVal)
   emit('update:isBorderExpanded', boolVal)
 }
+
+function handleBorderOpacityBlur(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.value === '' || isNaN(Number(target.value))) {
+    target.value = String(displayBorderOpacity.value)
+  } else {
+    let val = parseInt(target.value)
+    val = Math.max(0, Math.min(100, val))
+    target.value = String(val)
+    emit('update:borderAlpha', val)
+  }
+}
+
+const borderWidthInputRef = ref<HTMLInputElement | null>(null)
+
+function focusBorderWidthInput(e: MouseEvent) {
+  if (e.target !== borderWidthInputRef.value) {
+    borderWidthInputRef.value?.focus()
+    borderWidthInputRef.value?.select()
+  }
+}
+
+function onBorderWidthInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  const raw = target.value
+  if (raw === '') return
+  const val = Number(raw)
+  if (isNaN(val)) return
+  const safeVal = Math.max(0, Math.min(100, Math.round(val)))
+  emit('update:borderWidth', safeVal)
+}
+
+function onBorderWidthBlur(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.value === '' || isNaN(Number(target.value))) {
+    target.value = String(props.borderWidth ?? 1)
+  } else {
+    const val = Number(target.value)
+    const safeVal = Math.max(0, Math.min(100, Math.round(val)))
+    target.value = String(safeVal)
+    emit('update:borderWidth', safeVal)
+  }
+}
 </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 class="accordion-arrow" @click.stop="toggleExpand"
-          :style="{ transform: (isBorderEnabled && isBorderExpanded) ? 'rotate(90deg)' : 'rotate(0deg)' }">▶</span>边框
+        <span>边框</span>
+        <span class="accordion-arrow">
+          <svg class="icon" style="width: 14px; height: 14px;">
+            <use :href="(isBorderEnabled && isBorderExpanded) ? '#icon-xiala-zhankai' : '#icon-xiala-shouqi'"
+                 :xlink:href="(isBorderEnabled && isBorderExpanded) ? '#icon-xiala-zhankai' : '#icon-xiala-shouqi'"></use>
+          </svg>
+        </span>
       </span>
       <el-switch :model-value="isBorderEnabled" size="small" @click.stop @change="toggleSwitch" />
     </div>
 
+    <!-- Content -->
     <div v-show="isBorderExpanded && isBorderEnabled" class="shape-accordion-content">
-      <!-- Border Color -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">颜色</span>
-        <QuickColorPopover v-model:visible="borderPopoverVisible" :color="borderHex || '#000000'"
-          :recent-colors="recentColors" @select-color="emit('update:borderHex', $event)">
+      <!-- Row 1: Border Color Swatch Pill (Full-width) -->
+      <div class="full-color-pill">
+        <QuickColorPopover v-model:visible="borderPopoverVisible" :color="borderHex || '#000000'" :alpha="props.borderAlpha"
+          :recent-colors="recentColors" @select-color="onSelectBorderColor">
           <template #reference>
-            <div class="color-picker-pill-wrapper">
-              <div class="color-pill-inner">
-                <div :style="{ background: borderHex || '#000000' }" class="color-square-preview"></div>
-                <span class="color-hex-text">
-                  {{ formatHexDisplay(borderHex || '#000000') }}
-                </span>
-              </div>
+            <div class="color-left-info">
+              <div :style="{ background: borderHex || '#000000' }" class="color-square-preview"></div>
+              <span class="color-hex-text">
+                {{ formatHexDisplay(borderHex || '#000000') }}
+              </span>
             </div>
           </template>
         </QuickColorPopover>
-      </div>
-
-      <!-- Border Style & Width -->
-      <div class="shape-property-row">
-        <span class="shape-property-label">样式</span>
-        <div class="shape-border-style-wrapper">
-          <!-- Border style dropdown -->
-          <el-select :model-value="borderStyle || 'solid'" @update:model-value="emit('update:borderStyle', $event)"
-            size="small" class="custom-select" style="width: 96px; flex-shrink: 0;">
-            <el-option label="───" value="solid" />
-            <el-option label="---" value="dashed" />
-          </el-select>
-          <!-- Border width selector -->
-          <div class="shape-border-width-wrapper" style="width: 96px; flex: none;">
-            <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"
-              style="margin-right: 6px; color: var(--text-secondary); flex-shrink: 0;">
-              <line x1="3" y1="6" x2="21" y2="6" />
-              <line x1="3" y1="12" x2="21" y2="12" />
-              <line x1="3" y1="18" x2="21" y2="18" />
-            </svg>
-            <input type="number" :value="borderWidth ?? 1"
-              @input="emit('update:borderWidth', Number(($event.target as HTMLInputElement).value))" :min="0" :max="100"
-              class="shape-num-field" />
-          </div>
+        <div class="color-opacity-input-wrapper" @click.stop title="边框不透明度 (0%为全透明，100%为完全不透明)">
+          <input
+            type="text"
+            inputmode="numeric"
+            class="color-opacity-num-input"
+            :value="displayBorderOpacity"
+            @input="handleBorderOpacityInput"
+            @blur="handleBorderOpacityBlur"
+            @keydown.enter="($event.target as HTMLElement).blur()"
+            :style="{ width: `calc(${String(displayBorderOpacity).length}ch + 2px)` }"
+          />
+          <span class="percent-unit">%</span>
         </div>
       </div>
 
-      <!-- Border Transparency (optional) -->
-      <div v-if="showAlpha" class="shape-property-row">
-        <span class="shape-property-label">透明度</span>
-        <div class="shape-slider-wrapper">
-          <el-slider :model-value="borderAlpha || 0" @update:model-value="emit('update:borderAlpha', $event as number)"
-            :min="0" :max="100" size="small" style="flex: 1;" class="custom-slider" :show-tooltip="false" show-input
-            :show-input-controls="false" />
+      <!-- Row 2: Border Style & Width -->
+      <div class="border-style-width-row">
+        <!-- Border style dropdown -->
+        <el-select :model-value="borderStyle || 'solid'" @update:model-value="emit('update:borderStyle', $event)"
+          size="small" class="border-style-select" :teleported="true">
+          <template #prefix>
+            <div class="border-style-line-preview" :class="borderStyle || 'solid'"></div>
+          </template>
+          <el-option label="实线" value="solid">
+            <div class="style-option-line solid-line"></div>
+          </el-option>
+          <el-option label="虚线" value="dashed">
+            <div class="style-option-line dashed-line"></div>
+          </el-option>
+          <el-option label="点线" value="dotted">
+            <div class="style-option-line dotted-line"></div>
+          </el-option>
+        </el-select>
+
+        <!-- Border width input -->
+        <div class="border-width-input-pill" @click="focusBorderWidthInput">
+          <span class="border-width-icon">
+            <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
+              <rect x="2" y="3.5" width="12" height="1.8" rx="0.9" />
+              <rect x="2" y="7.25" width="12" height="1.8" rx="0.9" />
+              <rect x="2" y="11" width="12" height="1.8" rx="0.9" />
+            </svg>
+          </span>
+          <input
+            ref="borderWidthInputRef"
+            type="text"
+            inputmode="numeric"
+            :value="borderWidth ?? 1"
+            @input="onBorderWidthInput"
+            @blur="onBorderWidthBlur"
+            @keydown.enter="($event.target as HTMLElement).blur()"
+            class="border-num-field"
+            :style="{ width: `calc(${String(borderWidth ?? 1).length}ch + 4px)` }"
+          />
         </div>
       </div>
     </div>
@@ -135,184 +234,312 @@ function toggleSwitch(val: any) {
 
 <style scoped lang="scss">
 .shape-accordion-group {
-  border-bottom: 1px solid #EEEFF0;
+  border-bottom: 1px solid #f1f5f9;
   padding-bottom: 12px;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 
 .shape-accordion-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding: 0 16px;
-  height: 32px;
+  height: 34px;
   cursor: pointer;
+  user-select: none;
 }
 
 .shape-accordion-header-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 400;
+  color: #1e293b;
   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;
+  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: 12px 16px 0 16px;
+  padding: 8px 16px 0 16px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 
-.shape-property-row {
+.full-color-pill {
+  width: 100%;
+  height: 32px;
+  background: #FAFAFA;
+  border: 1px solid #edf0f3;
+  border-radius: 8px;
+  padding: 0 10px;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 32px;
-  padding: 0;
-  gap: 8px;
-}
+  cursor: pointer;
+  transition: all 0.15s ease;
 
-.shape-property-label {
-  font-size: 12px;
-  color: var(--text-secondary, #64748b);
-  width: 80px;
-  flex-shrink: 0;
-  text-align: left;
+  &:hover {
+    border-color: #cbd5e1;
+  }
+
+  &:focus-within {
+    border-color: #2563eb;
+    box-shadow: 0 0 0 1px #2563eb;
+  }
 }
 
-.color-picker-pill-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #F5F6F7;
-  border-radius: 4px;
-  padding: 0 10px;
-  height: 32px;
-  flex: 1;
-  cursor: pointer;
-  border: none;
-  box-sizing: border-box;
+:deep(.el-popover__reference-wrapper),
+:deep(.color-span-box) {
+  display: flex !important;
+  align-items: center !important;
+  height: 100% !important;
 }
 
-.color-pill-inner {
+.color-left-info {
   display: flex;
   align-items: center;
   gap: 8px;
+  cursor: pointer;
+  height: 100%;
 }
 
 .color-square-preview {
-  width: 14px;
-  height: 14px;
-  border-radius: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   flex-shrink: 0;
+  transition: transform 0.15s ease;
+
+  &:hover {
+    transform: scale(1.08);
+  }
 }
 
 .color-hex-text {
-  font-size: 11px;
-  color: var(--text-primary);
-  font-family: monospace;
+  font-size: 13px;
   font-weight: 500;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  color: #1e293b;
+  letter-spacing: 0.2px;
+  user-select: none;
 }
 
-.shape-border-style-wrapper {
-  display: flex;
+.color-opacity-input-wrapper {
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  flex: 1;
   justify-content: flex-end;
-}
-
-.shape-border-width-wrapper {
-  display: flex;
-  align-items: center;
-  background: #F5F6F7;
-  border: none;
+  height: 24px;
+  padding: 0 2px;
   border-radius: 4px;
-  padding: 0 8px;
-  flex: 1;
-  height: 32px;
-  box-sizing: border-box;
-  position: relative;
+  transition: all 0.15s ease;
+  background: transparent;
+  cursor: text;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  &:focus-within {
+    background: rgba(37, 99, 235, 0.08);
+  }
 }
 
-.shape-num-field {
+.color-opacity-num-input {
+  width: auto;
+  min-width: 1ch;
   border: none;
   background: transparent;
   outline: none;
-  font-size: 12px;
-  color: var(--text-primary);
-  width: 100%;
-  text-align: left;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  text-align: right;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-variant-numeric: tabular-nums;
+  box-sizing: content-box;
 
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;
+    display: none !important;
     margin: 0;
   }
 }
 
-.shape-slider-wrapper {
-  display: flex;
+.percent-unit {
+  font-size: 12px;
+  font-weight: 500;
+  color: #1e293b;
+  margin-left: 2px;
+  user-select: none;
+  line-height: 1;
+}
+
+.border-style-width-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px;
+  width: 100%;
   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;
+.border-style-select {
+  width: 100%;
+  height: 32px !important;
 
-  :deep(.show-input) {
-    margin-right: 16px;
+  :deep(.el-select__wrapper),
+  :deep(.el-input__wrapper) {
+    height: 32px !important;
+    min-height: 32px !important;
+    max-height: 32px !important;
+    line-height: 30px !important;
+    background-color: #FAFAFA !important;
+    border: 1px solid #edf0f3 !important;
+    border-radius: 8px !important;
+    box-shadow: none !important;
+    padding: 0 10px !important;
+    box-sizing: border-box !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    transition: all 0.15s ease;
   }
 
-  :deep(.el-input-number) {
-    width: 48px;
-    height: 30px;
+  :deep(.el-select__wrapper:hover),
+  :deep(.el-input__wrapper:hover) {
+    border-color: #cbd5e1 !important;
+  }
 
-    .el-input__wrapper {
-      padding: 4px;
-      background: #F5F6F7;
-      border: none;
-      border-radius: 4px;
-      box-shadow: none;
-    }
+  :deep(.el-select__wrapper.is-focused),
+  :deep(.el-select__wrapper.is-focus),
+  :deep(.el-input__wrapper.is-focus) {
+    border-color: #2563eb !important;
+    box-shadow: 0 0 0 1px #2563eb !important;
+  }
 
-    .el-input__inner {
-      text-align: center;
-      font-size: 12px;
-      color: var(--text-primary);
-    }
+  :deep(.el-select__prefix),
+  :deep(.el-input__prefix) {
+    display: flex !important;
+    align-items: center !important;
+    margin-right: 0 !important;
+    flex: 1 !important;
+  }
+
+  :deep(.el-select__selection),
+  :deep(.el-select__selected-item),
+  :deep(.el-select__placeholder),
+  :deep(.el-input__inner) {
+    display: none !important;
+  }
+
+  :deep(.el-select__suffix) {
+    display: flex !important;
+    align-items: center !important;
+    color: #64748b !important;
+    margin-left: auto !important;
+  }
+}
+
+.border-style-line-preview {
+  width: 48px;
+  height: 0;
+  border-top: 2px solid #1e293b;
+  pointer-events: none;
+
+  &.dashed {
+    border-top: 2px dashed #1e293b;
+  }
+
+  &.dotted {
+    border-top: 2px dotted #1e293b;
+  }
+}
+
+.style-option-line {
+  width: 100%;
+  height: 2px;
+  margin: 8px 0;
+
+  &.solid-line {
+    background: #1e293b;
+  }
+
+  &.dashed-line {
+    border-top: 2px dashed #1e293b;
+  }
+
+  &.dotted-line {
+    border-top: 2px dotted #1e293b;
   }
 }
 
-:deep(.el-switch__core) {
-  border-radius: 4px !important;
+.border-width-input-pill {
+  width: 100%;
+  height: 32px;
+  background: #FAFAFA;
+  border: 1px solid #edf0f3;
+  border-radius: 8px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: text;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: #cbd5e1;
+  }
+
+  &:focus-within {
+    border-color: #2563eb;
+    box-shadow: 0 0 0 1px #2563eb;
+  }
 }
 
-:deep(.el-switch__action) {
-  border-radius: 3px !important;
+.border-width-icon {
+  color: #1e293b;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-:deep(.custom-select .el-input__wrapper) {
-  background-color: #F5F6F7 !important;
-  box-shadow: none !important;
-  border: none !important;
-  height: 32px !important;
-  border-radius: 4px !important;
+.border-num-field {
+  width: auto;
+  min-width: 1ch;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1e293b;
+  padding: 0;
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+  box-sizing: content-box;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    display: none !important;
+    margin: 0;
+  }
 }
 </style>