Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

2026-09-10 19:21:56 +08:00
commit 51ce3a28f7
654 changed files with 49082 additions and 0 deletions
@@ -0,0 +1,136 @@
+<template>
+  <div class="aa-slider" :class="{ 'is-disabled': disabled }">
+    <div class="aa-slider-track" ref="track" @pointerdown="onTrackDown">
+      <div class="aa-slider-rail"></div>
+      <div class="aa-slider-fill" :style="fillStyle"></div>
+      <div class="aa-slider-ticks" v-if="showTicks">
+        <div v-for="(t, i) in tickPercents" :key="i" class="aa-slider-tick" :style="{ left: t + '%' }"></div>
+      </div>
+      <div
+        v-for="(h, i) in handlePercents" :key="i"
+        class="aa-slider-handle" :style="{ left: h + '%' }"
+        @pointerdown.stop="onHandleDown(i, $event)"
+      ></div>
+    </div>
+    <div class="aa-slider-value" v-if="showInput">
+      <template v-if="range">
+        <input type="number" :value="modelValue[0]" @change="onInput(0, $event)" />
+        <span>—</span>
+        <input type="number" :value="modelValue[1]" @change="onInput(1, $event)" />
+      </template>
+      <input v-else type="number" :value="modelValue" @change="onInput(null, $event)" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: [Number, Array], default: 0 },   // number | [lo, hi]
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  step: { type: Number, default: 1 },
+  range: { type: Boolean, default: false },
+  showTicks: { type: Boolean, default: false },
+  showInput: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false }
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const track = ref(null);
+const dragIndex = ref(-1);
+
+const pct = (v) => ((v - props.min) / (props.max - props.min)) * 100;
+const clamp = (v) => {
+  const snapped = Math.round((v - props.min) / props.step) * props.step + props.min;
+  return Math.max(props.min, Math.min(props.max, snapped));
+};
+
+const handlePercents = computed(() => {
+  if (props.range) return [pct(props.modelValue[0]), pct(props.modelValue[1])];
+  return [pct(props.modelValue)];
+});
+const fillStyle = computed(() => {
+  if (props.range) {
+    const lo = pct(props.modelValue[0]), hi = pct(props.modelValue[1]);
+    return { left: lo + '%', width: (hi - lo) + '%' };
+  }
+  return { left: '0%', width: pct(props.modelValue) + '%' };
+});
+const tickPercents = computed(() => {
+  const n = Math.floor((props.max - props.min) / props.step);
+  return Array.from({ length: n + 1 }, (_, i) => pct(props.min + i * props.step));
+});
+
+function setVal(next) {
+  emit('update:modelValue', next);
+  emit('change', next);
+}
+
+function valueFromClientX(x) {
+  const rect = track.value.getBoundingClientRect();
+  return clamp(props.min + (x - rect.left) / rect.width * (props.max - props.min));
+}
+
+function onHandleDown(i, e) {
+  if (props.disabled) return;
+  e.preventDefault();
+  dragIndex.value = i;
+  window.addEventListener('pointermove', onMove);
+  window.addEventListener('pointerup', onUp);
+}
+function onTrackDown(e) {
+  if (props.disabled || e.target.classList.contains('aa-slider-handle')) return;
+  const nv = valueFromClientX(e.clientX);
+  if (props.range) {
+    const i = Math.abs(nv - props.modelValue[0]) <= Math.abs(nv - props.modelValue[1]) ? 0 : 1;
+    const arr = [...props.modelValue]; arr[i] = nv; arr.sort((a, b) => a - b);
+    setVal(arr);
+  } else {
+    setVal(nv);
+  }
+}
+function onMove(e) {
+  if (dragIndex.value < 0) return;
+  const nv = valueFromClientX(e.clientX);
+  if (props.range) {
+    const arr = [...props.modelValue]; arr[dragIndex.value] = nv; arr.sort((a, b) => a - b);
+    setVal(arr);
+  } else {
+    setVal(nv);
+  }
+}
+function onUp() {
+  dragIndex.value = -1;
+  window.removeEventListener('pointermove', onMove);
+  window.removeEventListener('pointerup', onUp);
+}
+function onInput(i, e) {
+  const v = +e.target.value;
+  if (props.range) {
+    const arr = [...props.modelValue]; arr[i] = v; arr.sort((a, b) => a - b);
+    setVal(arr);
+  } else {
+    setVal(v);
+  }
+}
+onBeforeUnmount(onUp);
+</script>
+
+<!-- 样式对齐 组件7.txt SliderInput 规范 -->
+<style scoped>
+.aa-slider { position: relative; display: flex; align-items: center; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); }
+.aa-slider.is-disabled { opacity: .5; pointer-events: none; }
+.aa-slider-track { position: relative; flex: 1; height: 40px; }
+.aa-slider-rail { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: #E8ECF1; border-radius: 2px; }
+.aa-slider-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 4px; background: #2F54EB; border-radius: 2px; }
+.aa-slider-handle { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff;
+  border: 2px solid #2F54EB; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: box-shadow .15s; }
+.aa-slider-handle:hover, .aa-slider-handle:focus { box-shadow: 0 0 0 4px rgba(47,84,235,0.2); outline: none; }
+.aa-slider-ticks { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 0; pointer-events: none; }
+.aa-slider-tick { position: absolute; top: 0; width: 2px; height: 8px; background: #E8ECF1; transform: translate(-50%, -50%); }
+.aa-slider-value { margin-left: 12px; font-size: 14px; color: #262626; display: inline-flex; align-items: center; gap: 6px; }
+.aa-slider-value input { width: 56px; height: 28px; text-align: center; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; color: #262626; }
+.aa-slider-value input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
+</style>