feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

site/sources/slider/vue2.txt

@@ -0,0 +1,132 @@
+<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="value[0]" @change="onInput(0, $event)" />
+        <span>—</span>
+        <input type="number" :value="value[1]" @change="onInput(1, $event)" />
+      </template>
+      <input v-else type="number" :value="value" @change="onInput(null, $event)" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaSlider',
+  props: {
+    value: { 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 }
+  },
+  data() { return { dragIndex: -1 }; },
+  computed: {
+    pct() { return (v) => ((v - this.min) / (this.max - this.min)) * 100; },
+    clamp() {
+      return (v) => {
+        const snapped = Math.round((v - this.min) / this.step) * this.step + this.min;
+        return Math.max(this.min, Math.min(this.max, snapped));
+      };
+    },
+    handlePercents() {
+      if (this.range) return [this.pct(this.value[0]), this.pct(this.value[1])];
+      return [this.pct(this.value)];
+    },
+    fillStyle() {
+      if (this.range) {
+        const lo = this.pct(this.value[0]), hi = this.pct(this.value[1]);
+        return { left: lo + '%', width: (hi - lo) + '%' };
+      }
+      return { left: '0%', width: this.pct(this.value) + '%' };
+    },
+    tickPercents() {
+      const n = Math.floor((this.max - this.min) / this.step);
+      return Array.from({ length: n + 1 }, (_, i) => this.pct(this.min + i * this.step));
+    }
+  },
+  methods: {
+    setVal(next) { this.$emit('input', next); this.$emit('change', next); },
+    valueFromClientX(x) {
+      const rect = this.$refs.track.getBoundingClientRect();
+      return this.clamp(this.min + (x - rect.left) / rect.width * (this.max - this.min));
+    },
+    onHandleDown(i, e) {
+      if (this.disabled) return;
+      e.preventDefault();
+      this.dragIndex = i;
+      window.addEventListener('pointermove', this.onMove);
+      window.addEventListener('pointerup', this.onUp);
+    },
+    onTrackDown(e) {
+      if (this.disabled || e.target.classList.contains('aa-slider-handle')) return;
+      const nv = this.valueFromClientX(e.clientX);
+      if (this.range) {
+        const i = Math.abs(nv - this.value[0]) <= Math.abs(nv - this.value[1]) ? 0 : 1;
+        const arr = [...this.value]; arr[i] = nv; arr.sort((a, b) => a - b);
+        this.setVal(arr);
+      } else {
+        this.setVal(nv);
+      }
+    },
+    onMove(e) {
+      if (this.dragIndex < 0) return;
+      const nv = this.valueFromClientX(e.clientX);
+      if (this.range) {
+        const arr = [...this.value]; arr[this.dragIndex] = nv; arr.sort((a, b) => a - b);
+        this.setVal(arr);
+      } else {
+        this.setVal(nv);
+      }
+    },
+    onUp() {
+      this.dragIndex = -1;
+      window.removeEventListener('pointermove', this.onMove);
+      window.removeEventListener('pointerup', this.onUp);
+    },
+    onInput(i, e) {
+      const v = +e.target.value;
+      if (this.range) {
+        const arr = [...this.value]; arr[i] = v; arr.sort((a, b) => a - b);
+        this.setVal(arr);
+      } else {
+        this.setVal(v);
+      }
+    }
+  },
+  beforeDestroy() { this.onUp(); }
+};
+</script>
+
+<!-- 样式对齐 组件7.txt SliderInput 规范 -->
+<style>
+.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>