wedux-ui 0.4.0 → 0.6.0

package/miniprogram_dist/components/carousel/carousel.js

@@ -0,0 +1,568 @@
+const { createDrag } = require('../../utils/drag');
+
+Component({
+  relations: {
+    '../carousel-item/carousel-item': {
+      type: 'descendant',
+      linked: function () {
+        this._onChildrenChange();
+      },
+      unlinked: function () {
+        this._onChildrenChange();
+      },
+    },
+  },
+
+  properties: {
+    current: {
+      type: Number,
+      value: -1,
+    },
+    defaultCurrent: {
+      type: Number,
+      value: 0,
+    },
+    effect: {
+      type: String,
+      value: 'slide',
+    },
+    direction: {
+      type: String,
+      value: 'horizontal',
+    },
+    loop: {
+      type: Boolean,
+      value: true,
+    },
+    autoplay: {
+      type: Boolean,
+      value: false,
+    },
+    interval: {
+      type: Number,
+      value: 5000,
+    },
+    duration: {
+      type: Number,
+      value: 300,
+    },
+    slidesPerView: {
+      type: Number,
+      value: 1,
+    },
+    spaceBetween: {
+      type: Number,
+      value: 0,
+    },
+    showDots: {
+      type: Boolean,
+      value: true,
+    },
+    dotType: {
+      type: String,
+      value: 'dot',
+    },
+    dotPlacement: {
+      type: String,
+      value: 'bottom',
+    },
+  },
+
+  data: {
+    _trackStyle: '',
+    _dots: [],
+    _total: 0,
+  },
+
+  observers: {
+    current: function (val) {
+      if (val >= 0) {
+        this._goTo(val, true);
+      }
+    },
+  },
+
+  lifetimes: {
+    created() {
+      this._internalIndex = this.data.defaultCurrent;
+      this._drag = createDrag();
+    },
+
+    ready() {
+      this._containerWidth = 0;
+      this._containerHeight = 0;
+      this._slideSize = 0;
+      this._autoplayTimer = null;
+      this._loopResetTimer = null;
+      this._boundaryItemIndex = -1;
+
+      wx.nextTick(() => {
+        this._measure();
+      });
+    },
+
+    detached() {
+      this._stopAutoplay();
+      if (this._loopResetTimer) {
+        clearTimeout(this._loopResetTimer);
+        this._loopResetTimer = null;
+      }
+    },
+  },
+
+  methods: {
+    /* ── Relations ── */
+    _getItems() {
+      return this.getRelationNodes('../carousel-item/carousel-item') || [];
+    },
+
+    _onChildrenChange() {
+      const items = this._getItems();
+      const total = items.length;
+      this._internalIndex = Math.min(this._internalIndex || 0, Math.max(0, total - 1));
+      this._rebuildDots();
+      if (this._slideSize > 0) {
+        this._updateChildSizes();
+        this._goTo(this._internalIndex, false);
+      }
+    },
+
+    /* ── Measure ── */
+    _measure() {
+      const query = this.createSelectorQuery();
+      query.select('.w-carousel').boundingClientRect();
+      query.exec((res) => {
+        if (!res[0]) return;
+        const { width, height } = res[0];
+        this._containerWidth = width;
+        this._containerHeight = height;
+        const { slidesPerView, spaceBetween, direction } = this.data;
+        const containerSize = direction === 'horizontal' ? width : height;
+        this._slideSize = (containerSize - (slidesPerView - 1) * spaceBetween) / slidesPerView;
+
+        this._updateChildSizes();
+        this._goTo(this._internalIndex, false);
+        this._startAutoplay();
+      });
+    },
+
+    /* ── Child size dispatch (slide effect only) ── */
+    _updateChildSizes() {
+      const items = this._getItems();
+      const { effect, direction, spaceBetween } = this.data;
+      if (effect !== 'slide') return;
+
+      items.forEach((item) => {
+        const sizeStyle =
+          direction === 'horizontal'
+            ? `width: ${this._slideSize}px; height: 100%; margin-right: ${spaceBetween}px;`
+            : `width: 100%; height: ${this._slideSize}px; margin-bottom: ${spaceBetween}px;`;
+        item._setState('active', sizeStyle);
+      });
+    },
+
+    /* ── Dots ── */
+    _rebuildDots() {
+      const items = this._getItems();
+      const total = items.length;
+      const { slidesPerView } = this.data;
+      const dotCount =
+        slidesPerView <= 1 ? total : Math.max(0, total - Math.floor(slidesPerView) + 1);
+      const displayIndex = this._internalIndex;
+      const dots = Array.from({ length: dotCount }, (_, i) => ({
+        active: i === displayIndex,
+      }));
+      this.setData({ _total: total, _dots: dots });
+    },
+
+    /* ── Go to index ── */
+    _goTo(index, animate) {
+      if (animate === undefined) animate = true;
+      const items = this._getItems();
+      const total = items.length;
+      if (!total) return;
+
+      // 清除待执行的 loop 复位，立即复位
+      if (this._loopResetTimer) {
+        clearTimeout(this._loopResetTimer);
+        this._loopResetTimer = null;
+        this._updateChildSizes();
+      }
+
+      let newIndex = index;
+
+      if (this.data.loop) {
+        newIndex = ((index % total) + total) % total;
+      } else {
+        newIndex = Math.max(0, Math.min(index, total - 1));
+      }
+
+      const prev = this._internalIndex;
+      this._internalIndex = newIndex;
+
+      // slide + loop 边界过渡：无缝动画而非瞬移
+      if (
+        this.data.loop &&
+        this.data.effect === 'slide' &&
+        animate &&
+        total > 1 &&
+        this.data.slidesPerView <= 1
+      ) {
+        const isForwardLoop = prev === total - 1 && newIndex === 0;
+        const isBackwardLoop = prev === 0 && newIndex === total - 1;
+
+        if (isForwardLoop || isBackwardLoop) {
+          this._slideLoopTransition(prev, newIndex, isForwardLoop);
+          this._rebuildDots();
+          if (prev !== newIndex) {
+            this.triggerEvent('change', { current: newIndex, previous: prev });
+          }
+          return;
+        }
+      }
+
+      // 非边界过渡，清理拖拽时预置的 boundary item
+      if (this._boundaryItemIndex >= 0) {
+        this._boundaryItemIndex = -1;
+        if (animate) {
+          this._loopResetTimer = setTimeout(() => {
+            this._loopResetTimer = null;
+            this._updateChildSizes();
+          }, this.data.duration + 20);
+        } else {
+          this._updateChildSizes();
+        }
+      }
+
+      this._applyEffect(animate);
+      this._rebuildDots();
+
+      if (prev !== newIndex) {
+        this.triggerEvent('change', { current: newIndex, previous: prev });
+      }
+    },
+
+    /* ── Apply visual effect ── */
+    _applyEffect(animate) {
+      const { effect, direction, spaceBetween, duration } = this.data;
+      const dur = animate ? duration : 0;
+
+      if (effect === 'slide') {
+        const offset = this._internalIndex * (this._slideSize + spaceBetween);
+        const transform =
+          direction === 'horizontal' ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
+        this.setData({
+          _trackStyle: `transform: ${transform}; transition: transform ${dur}ms ease;`,
+        });
+        return;
+      }
+
+      this._applyNonSlideEffect(dur);
+    },
+
+    _applyNonSlideEffect(dur) {
+      const items = this._getItems();
+      const total = items.length;
+      const { effect, loop } = this.data;
+      const cur = this._internalIndex;
+
+      items.forEach((item, i) => {
+        let state, style;
+        const base = `width: 100%; height: 100%; position: absolute; top: 0; left: 0;`;
+
+        if (effect === 'fade') {
+          const isActive = i === cur;
+          state = isActive ? 'active' : 'hidden';
+          style = `${base} opacity: ${isActive ? 1 : 0}; transition: opacity ${dur}ms; z-index: ${isActive ? 1 : 0};`;
+        } else {
+          // card
+          const cardBase = `${base} border-radius: var(--w-carousel-card-radius); overflow: hidden;`;
+          const diff = i - cur;
+          const isPrev = diff === -1 || (loop && diff === total - 1);
+          const isNext = diff === 1 || (loop && diff === -(total - 1));
+
+          if (diff === 0) {
+            state = 'active';
+            style = `${cardBase} transform: scale(1) translateX(0); opacity: 1; transition: transform ${dur}ms ease, opacity ${dur}ms ease; z-index: 1;`;
+          } else if (isPrev) {
+            state = 'prev';
+            style = `${cardBase} transform: scale(0.85) translateX(-70%); opacity: 0.7; transition: transform ${dur}ms ease, opacity ${dur}ms ease; z-index: 0;`;
+          } else if (isNext) {
+            state = 'next';
+            style = `${cardBase} transform: scale(0.85) translateX(70%); opacity: 0.7; transition: transform ${dur}ms ease, opacity ${dur}ms ease; z-index: 0;`;
+          } else {
+            state = 'hidden';
+            style = `${cardBase} opacity: 0; pointer-events: none; z-index: 0;`;
+          }
+        }
+
+        item._setState(state, style);
+      });
+    },
+
+    /* ── Slide loop 无缝过渡 ── */
+    _getItemSizeStyle() {
+      const { direction, spaceBetween } = this.data;
+      return direction === 'horizontal'
+        ? `width: ${this._slideSize}px; height: 100%; margin-right: ${spaceBetween}px;`
+        : `width: 100%; height: ${this._slideSize}px; margin-bottom: ${spaceBetween}px;`;
+    },
+
+    _slideLoopTransition(fromIndex, toIndex, isForward) {
+      const items = this._getItems();
+      const total = items.length;
+      const { direction, spaceBetween, duration } = this.data;
+      const step = this._slideSize + spaceBetween;
+      const isH = direction === 'horizontal';
+      const axis = isH ? 'X' : 'Y';
+      const sizeStyle = this._getItemSizeStyle();
+
+      this._boundaryItemIndex = -1;
+
+      if (isForward) {
+        // 最后→第一：把 item[0] 移到最后一张后面
+        items[toIndex]._setState(
+          'active',
+          `${sizeStyle} transform: translate${axis}(${total * step}px);`,
+        );
+        // track 向前滑动一格到 item[0] 的临时位置
+        const offset = total * step;
+        const transform = isH ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
+        this.setData({
+          _trackStyle: `transform: ${transform}; transition: transform ${duration}ms ease;`,
+        });
+      } else {
+        // 第一→最后：把 item[last] 移到第一张前面
+        items[toIndex]._setState(
+          'active',
+          `${sizeStyle} transform: translate${axis}(${-total * step}px);`,
+        );
+        // track 向后滑动一格
+        const offset = -step;
+        const transform = isH ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
+        this.setData({
+          _trackStyle: `transform: ${transform}; transition: transform ${duration}ms ease;`,
+        });
+      }
+
+      // 动画结束后复位所有 item 和 track
+      this._loopResetTimer = setTimeout(() => {
+        this._loopResetTimer = null;
+        this._updateChildSizes();
+        this._applyEffect(false);
+      }, duration + 20);
+    },
+
+    /**
+     * 拖拽前预置边界 item，使跟手拖动时能看到下一张
+     */
+    _prepareBoundarySlide() {
+      const items = this._getItems();
+      const total = items.length;
+      if (total <= 1) return;
+
+      const cur = this._internalIndex;
+      const { direction, spaceBetween } = this.data;
+      const step = this._slideSize + spaceBetween;
+      const isH = direction === 'horizontal';
+      const axis = isH ? 'X' : 'Y';
+      const sizeStyle = this._getItemSizeStyle();
+
+      this._boundaryItemIndex = -1;
+
+      if (cur === 0) {
+        // 可能向前滑（回到最后）→ 把最后一张移到第一张前面
+        items[total - 1]._setState(
+          'active',
+          `${sizeStyle} transform: translate${axis}(${-total * step}px);`,
+        );
+        this._boundaryItemIndex = total - 1;
+      } else if (cur === total - 1) {
+        // 可能向后滑（到第一张）→ 把第一张移到最后一张后面
+        items[0]._setState(
+          'active',
+          `${sizeStyle} transform: translate${axis}(${total * step}px);`,
+        );
+        this._boundaryItemIndex = 0;
+      }
+    },
+
+    /* ── Touch handlers ── */
+    onTouchStart(e) {
+      this._stopAutoplay();
+      // 清除待执行的 loop 复位
+      if (this._loopResetTimer) {
+        clearTimeout(this._loopResetTimer);
+        this._loopResetTimer = null;
+        this._updateChildSizes();
+        this._applyEffect(false);
+      }
+
+      this._drag.start(e.touches[0]);
+      if (this.data.effect === 'slide') {
+        this._startTranslate = this._internalIndex * (this._slideSize + this.data.spaceBetween);
+        // loop 模式下预置边界 item，使跟手拖动无缝
+        if (this.data.loop && this.data.slidesPerView <= 1) {
+          this._prepareBoundarySlide();
+        }
+      }
+    },
+
+    onTouchMove(e) {
+      if (!this._drag.isActive()) return;
+      const { effect, direction } = this.data;
+      const touch = e.touches[0];
+
+      if (effect === 'slide') {
+        const delta = this._drag.delta(touch, direction);
+        const offset = this._startTranslate - delta;
+        const transform =
+          direction === 'horizontal' ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
+        this.setData({ _trackStyle: `transform: ${transform}; transition: none;` });
+      } else {
+        const containerSize =
+          direction === 'horizontal' ? this._containerWidth : this._containerHeight;
+        const progress = this._drag.progress(touch, direction, containerSize);
+        if (effect === 'fade') {
+          this._applyFadeDrag(progress);
+        } else {
+          this._applyCardDrag(progress);
+        }
+      }
+    },
+
+    onTouchEnd(e) {
+      const { direction } = this.data;
+      const containerSize =
+        direction === 'horizontal' ? this._containerWidth : this._containerHeight;
+      const result = this._drag.end(e.changedTouches[0], direction, containerSize);
+      if (!result) return;
+
+      if (result.swipe === 1) {
+        this._goTo(this._internalIndex + 1);
+      } else if (result.swipe === -1) {
+        this._goTo(this._internalIndex - 1);
+      } else {
+        this._goTo(this._internalIndex);
+      }
+      this._startAutoplay();
+    },
+
+    /* ── Fade 跟手拖动 ── */
+    _applyFadeDrag(progress) {
+      const items = this._getItems();
+      const total = items.length;
+      const cur = this._internalIndex;
+      const { loop } = this.data;
+      const absP = Math.abs(progress);
+
+      let targetIndex;
+      if (progress > 0) {
+        targetIndex = loop ? (cur + 1) % total : Math.min(cur + 1, total - 1);
+      } else {
+        targetIndex = loop ? (cur - 1 + total) % total : Math.max(cur - 1, 0);
+      }
+
+      const base = 'width: 100%; height: 100%; position: absolute; top: 0; left: 0;';
+      items.forEach((item, i) => {
+        let opacity, zIndex;
+        if (i === cur) {
+          opacity = 1 - absP;
+          zIndex = 1;
+        } else if (i === targetIndex && targetIndex !== cur) {
+          opacity = absP;
+          zIndex = 1;
+        } else {
+          opacity = 0;
+          zIndex = 0;
+        }
+        item._setState(
+          i === cur ? 'active' : 'hidden',
+          `${base} opacity: ${opacity}; z-index: ${zIndex}; transition: none;`,
+        );
+      });
+    },
+
+    /* ── Card 跟手拖动 ── */
+    _applyCardDrag(progress) {
+      const items = this._getItems();
+      const total = items.length;
+      const cur = this._internalIndex;
+      const { loop } = this.data;
+      const absP = Math.abs(progress);
+
+      const prevIndex = loop ? (cur - 1 + total) % total : cur - 1;
+      const nextIndex = loop ? (cur + 1) % total : cur + 1;
+
+      const base =
+        'width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: var(--w-carousel-card-radius); overflow: hidden;';
+      items.forEach((item, i) => {
+        let style;
+        if (i === cur) {
+          const tx = -progress * 70;
+          const scale = 1 - absP * 0.15;
+          const opacity = 1 - absP * 0.3;
+          style = `${base} transform: scale(${scale}) translateX(${tx}%); opacity: ${opacity}; z-index: 1; transition: none;`;
+        } else if (i === prevIndex && prevIndex >= 0) {
+          const tx = progress < 0 ? -70 + absP * 70 : -70;
+          const scale = progress < 0 ? 0.85 + absP * 0.15 : 0.85;
+          const opacity = progress < 0 ? 0.7 + absP * 0.3 : 0.7;
+          style = `${base} transform: scale(${scale}) translateX(${tx}%); opacity: ${opacity}; z-index: 0; transition: none;`;
+        } else if (i === nextIndex && nextIndex < total) {
+          const tx = progress > 0 ? 70 - absP * 70 : 70;
+          const scale = progress > 0 ? 0.85 + absP * 0.15 : 0.85;
+          const opacity = progress > 0 ? 0.7 + absP * 0.3 : 0.7;
+          style = `${base} transform: scale(${scale}) translateX(${tx}%); opacity: ${opacity}; z-index: 0; transition: none;`;
+        } else {
+          style = `${base} opacity: 0; pointer-events: none; z-index: 0;`;
+        }
+        item._setState(i === cur ? 'active' : 'other', style);
+      });
+    },
+
+    /* ── Card tap ── */
+    _onItemTap(item) {
+      if (this.data.effect !== 'card') return;
+      const items = this._getItems();
+      const idx = items.indexOf(item);
+      if (idx !== -1 && idx !== this._internalIndex) {
+        this._goTo(idx);
+      }
+    },
+
+    /* ── Autoplay ── */
+    _startAutoplay() {
+      if (!this.data.autoplay) return;
+      this._stopAutoplay();
+      const items = this._getItems();
+      if (items.length <= 1) return;
+      this._autoplayTimer = setInterval(() => {
+        this._goTo(this._internalIndex + 1);
+      }, this.data.interval);
+    },
+
+    _stopAutoplay() {
+      if (this._autoplayTimer) {
+        clearInterval(this._autoplayTimer);
+        this._autoplayTimer = null;
+      }
+    },
+
+    /* ── Public methods ── */
+    to(index) {
+      this._goTo(index, true);
+    },
+
+    prev() {
+      this._goTo(this._internalIndex - 1, true);
+    },
+
+    next() {
+      this._goTo(this._internalIndex + 1, true);
+    },
+
+    getCurrentIndex() {
+      return this._internalIndex;
+    },
+  },
+});

package/miniprogram_dist/components/carousel/carousel.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/carousel/carousel.scss

@@ -0,0 +1,98 @@
+.w-carousel {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.w-carousel__track {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  will-change: transform;
+}
+
+.w-carousel--vertical .w-carousel__track {
+  flex-direction: column;
+  width: 100%;
+}
+
+.w-carousel__slides {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Dots container */
+.w-carousel__dots {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.w-carousel__dots--bottom {
+  bottom: 24rpx;
+  left: 0;
+  right: 0;
+  flex-direction: row;
+}
+
+.w-carousel__dots--top {
+  top: 24rpx;
+  left: 0;
+  right: 0;
+  flex-direction: row;
+}
+
+.w-carousel__dots--left {
+  left: 24rpx;
+  top: 0;
+  bottom: 0;
+  flex-direction: column;
+}
+
+.w-carousel__dots--right {
+  right: 24rpx;
+  top: 0;
+  bottom: 0;
+  flex-direction: column;
+}
+
+/* Dot 圆点 */
+.w-carousel__dot {
+  width: var(--w-carousel-dot-size);
+  height: var(--w-carousel-dot-size);
+  border-radius: 9999rpx;
+  background: var(--w-carousel-dot-color);
+  transition:
+    transform 300ms,
+    background 300ms;
+  flex-shrink: 0;
+}
+
+.w-carousel__dot--active {
+  background: var(--w-carousel-dot-color-active);
+  transform: scale(1.25);
+}
+
+/* Line 线条 */
+.w-carousel__dot--line {
+  width: var(--w-carousel-dot-line-width);
+  height: 8rpx;
+  border-radius: 4rpx;
+  background: var(--w-carousel-dot-color);
+  transition:
+    width 300ms,
+    background 300ms;
+  transform: none;
+}
+
+.w-carousel__dot--line.w-carousel__dot--active {
+  width: var(--w-carousel-dot-line-width-active);
+  background: var(--w-carousel-dot-color-active);
+  transform: none;
+}

package/miniprogram_dist/components/carousel/carousel.wxml

@@ -0,0 +1,33 @@
+<view
+  class="w-carousel w-carousel--{{effect}} w-carousel--{{direction}} w-carousel--dots-{{dotPlacement}}"
+>
+  <view
+    wx:if="{{effect === 'slide'}}"
+    class="w-carousel__track"
+    style="{{_trackStyle}}"
+    bindtouchstart="onTouchStart"
+    bindtouchmove="onTouchMove"
+    bindtouchend="onTouchEnd"
+  >
+    <slot />
+  </view>
+  <view
+    wx:else
+    class="w-carousel__slides"
+    bindtouchstart="onTouchStart"
+    bindtouchmove="onTouchMove"
+    bindtouchend="onTouchEnd"
+  >
+    <slot />
+  </view>
+  <view
+    wx:if="{{showDots && _total > 1}}"
+    class="w-carousel__dots w-carousel__dots--{{dotPlacement}}"
+  >
+    <view
+      wx:for="{{_dots}}"
+      wx:key="index"
+      class="w-carousel__dot {{item.active ? 'w-carousel__dot--active' : ''}} {{dotType === 'line' ? 'w-carousel__dot--line' : ''}}"
+    />
+  </view>
+</view>

package/miniprogram_dist/components/carousel-item/carousel-item.js

@@ -0,0 +1,25 @@
+Component({
+  relations: {
+    '../carousel/carousel': {
+      type: 'ancestor',
+    },
+  },
+
+  data: {
+    _style: '',
+    _state: 'hidden',
+  },
+
+  methods: {
+    _setState(state, style) {
+      this.setData({ _state: state, _style: style });
+    },
+
+    onTap() {
+      const parents = this.getRelationNodes('../carousel/carousel');
+      if (parents && parents.length) {
+        parents[0]._onItemTap(this);
+      }
+    },
+  },
+});

package/miniprogram_dist/components/carousel-item/carousel-item.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/carousel-item/carousel-item.scss

@@ -0,0 +1,6 @@
+.w-carousel-item {
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}

package/miniprogram_dist/components/carousel-item/carousel-item.wxml

@@ -0,0 +1,3 @@
+<view class="w-carousel-item w-carousel-item--{{_state}}" style="{{_style}}" bindtap="onTap"
+  ><slot
+/></view>

package/miniprogram_dist/components/image/image.js

@@ -0,0 +1,95 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+
+  properties: {
+    src: {
+      type: String,
+      value: '',
+    },
+    mode: {
+      type: String,
+      value: 'aspectFill', // scaleToFill | aspectFit | aspectFill | widthFix | heightFix | ...
+    },
+    width: {
+      type: String,
+      value: '',
+    },
+    height: {
+      type: String,
+      value: '',
+    },
+    radius: {
+      type: String,
+      value: '',
+    },
+    round: {
+      type: Boolean,
+      value: false,
+    },
+    showLoading: {
+      type: Boolean,
+      value: true,
+    },
+    showError: {
+      type: Boolean,
+      value: true,
+    },
+    fade: {
+      type: Boolean,
+      value: true,
+    },
+    lazyLoad: {
+      type: Boolean,
+      value: false,
+    },
+    fallbackSrc: {
+      type: String,
+      value: '',
+    },
+    showMenuByLongpress: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    _status: 'loading', // loading | loaded | error
+    _currentSrc: '',
+    _containerStyle: '',
+  },
+
+  observers: {
+    src(src) {
+      this.setData({
+        _currentSrc: src,
+        _status: src ? 'loading' : 'error',
+      });
+    },
+    'width, height, radius'(width, height, radius) {
+      const parts = [];
+      if (width) parts.push(`width: ${width}`);
+      if (height) parts.push(`height: ${height}`);
+      if (radius) parts.push(`border-radius: ${radius}`);
+      this.setData({ _containerStyle: parts.join('; ') });
+    },
+  },
+
+  methods: {
+    handleLoad(e) {
+      this.setData({ _status: 'loaded' });
+      this.triggerEvent('load', e.detail);
+    },
+
+    handleError(e) {
+      const { fallbackSrc, _currentSrc } = this.data;
+      if (fallbackSrc && _currentSrc !== fallbackSrc) {
+        this.setData({ _currentSrc: fallbackSrc });
+      } else {
+        this.setData({ _status: 'error' });
+      }
+      this.triggerEvent('error', e.detail);
+    },
+  },
+});

package/miniprogram_dist/components/image/image.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/image/image.scss

@@ -0,0 +1,104 @@
+@import '../../styles/iconfont.scss';
+
+.w-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: var(--w-image-radius, 0);
+  background-color: var(--w-image-bg, var(--color-bg-base));
+}
+
+.w-image--round {
+  border-radius: var(--radius-full);
+}
+
+/* Image */
+.w-image__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.w-image--fade-in .w-image__img {
+  animation: w-image-fade-in var(--w-image-fade-duration, 300ms) ease-out;
+}
+
+@keyframes w-image-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Placeholder (loading & error) */
+.w-image__placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Slot controls: hide default when slot has content */
+.w-image__loading-slot:empty {
+  display: none;
+}
+
+.w-image__loading-slot:empty + .w-image__loading-default {
+  display: flex;
+}
+
+.w-image__loading-slot:not(:empty) + .w-image__loading-default {
+  display: none;
+}
+
+.w-image__error-slot:empty {
+  display: none;
+}
+
+.w-image__error-slot:empty + .w-image__error-default {
+  display: flex;
+}
+
+.w-image__error-slot:not(:empty) + .w-image__error-default {
+  display: none;
+}
+
+/* Loading default: spinning animation */
+.w-image__loading-default {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.w-image__loading-icon {
+  width: var(--w-image-loading-icon-size, 48rpx);
+  height: var(--w-image-loading-icon-size, 48rpx);
+  border: 4rpx solid var(--color-separator);
+  border-top-color: var(--color-text-secondary);
+  border-radius: 50%;
+  animation: w-image-spin 0.8s linear infinite;
+}
+
+@keyframes w-image-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Error default */
+.w-image__error-default {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.w-image__error-icon {
+  font-size: var(--w-image-error-icon-size, 48rpx);
+  color: var(--color-text-placeholder);
+}

package/miniprogram_dist/components/image/image.wxml

@@ -0,0 +1,35 @@
+<view
+  class="w-image {{round ? 'w-image--round' : ''}} {{_status === 'loaded' && fade ? 'w-image--fade-in' : ''}}"
+  style="{{_containerStyle}}"
+>
+  <image
+    wx:if="{{_currentSrc && _status !== 'error'}}"
+    class="w-image__img"
+    src="{{_currentSrc}}"
+    mode="{{mode}}"
+    lazy-load="{{lazyLoad}}"
+    show-menu-by-longpress="{{showMenuByLongpress}}"
+    bindload="handleLoad"
+    binderror="handleError"
+  ></image>
+
+  <!-- Loading -->
+  <view wx:if="{{_status === 'loading' && showLoading}}" class="w-image__placeholder">
+    <view class="w-image__loading-slot">
+      <slot name="loading"></slot>
+    </view>
+    <view class="w-image__loading-default">
+      <view class="w-image__loading-icon"></view>
+    </view>
+  </view>
+
+  <!-- Error -->
+  <view wx:if="{{_status === 'error' && showError}}" class="w-image__placeholder">
+    <view class="w-image__error-slot">
+      <slot name="error"></slot>
+    </view>
+    <view class="w-image__error-default">
+      <view class="w-image__error-icon iconfont icon-broken-image"></view>
+    </view>
+  </view>
+</view>

package/miniprogram_dist/styles/iconfont.scss

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 5134551 */
   src: 
-       url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
-       url('//at.alicdn.com/t/c/font_5134551_zr54w3qnk2m.ttf?t=1775402273099') format('truetype');
+       url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+       url('//at.alicdn.com/t/c/font_5134551_7oyrdzd7ntn.ttf?t=1775471224272') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-broken-image:before {
+  content: "\e600";
+}
+
 .icon-empty:before {
   content: "\e6a6";
 }

package/miniprogram_dist/styles/tokens.scss

@@ -304,4 +304,19 @@ page {
   /* Price */
   --w-price-color: var(--color-brand);
   --w-price-original-color: var(--color-text-secondary);
+
+  /* Image */
+  --w-image-radius: 0;
+  --w-image-bg: var(--color-bg-base);
+  --w-image-fade-duration: 300ms;
+  --w-image-loading-icon-size: 48rpx;
+  --w-image-error-icon-size: 48rpx;
+
+  /* Carousel */
+  --w-carousel-dot-color: rgba(255, 255, 255, 0.5);
+  --w-carousel-dot-color-active: #ffffff;
+  --w-carousel-dot-size: 16rpx;
+  --w-carousel-dot-line-width: 16rpx;
+  --w-carousel-dot-line-width-active: 48rpx;
+  --w-carousel-card-radius: var(--w-radius-lg, 16rpx);
 }

package/miniprogram_dist/utils/drag.js

@@ -0,0 +1,71 @@
+/**
+ * 拖动跟踪工具
+ * 封装 touch 事件的追踪、delta 计算、滑动判定
+ */
+function createDrag() {
+  let startX = 0;
+  let startY = 0;
+  let startTime = 0;
+  let active = false;
+
+  return {
+    /** 记录起点 */
+    start(touch) {
+      active = true;
+      startX = touch.clientX;
+      startY = touch.clientY;
+      startTime = Date.now();
+    },
+
+    /** 计算拖动位移（px） */
+    delta(touch, direction) {
+      const dx = touch.clientX - startX;
+      const dy = touch.clientY - startY;
+      return direction === 'horizontal' ? dx : dy;
+    },
+
+    /**
+     * 计算拖动进度（-1 ~ 1），正值 = 向 next 拖动
+     * @param {Object} touch
+     * @param {string} direction
+     * @param {number} containerSize
+     */
+    progress(touch, direction, containerSize) {
+      if (!containerSize) return 0;
+      const d = this.delta(touch, direction);
+      return Math.max(-1, Math.min(1, -d / containerSize));
+    },
+
+    /**
+     * 结束拖动，返回滑动判定
+     * @returns {{ delta: number, velocity: number, swipe: number } | null}
+     *   swipe: 1 = next, -1 = prev, 0 = 回弹
+     */
+    end(touch, direction, containerSize) {
+      if (!active) return null;
+      active = false;
+      const delta = this.delta(touch, direction);
+      const elapsed = Date.now() - startTime;
+      const velocity = elapsed > 0 ? delta / elapsed : 0;
+
+      let swipe = 0;
+      if (delta < -containerSize * 0.3 || velocity < -0.4) {
+        swipe = 1;
+      } else if (delta > containerSize * 0.3 || velocity > 0.4) {
+        swipe = -1;
+      }
+
+      return { delta, velocity, swipe };
+    },
+
+    isActive() {
+      return active;
+    },
+
+    cancel() {
+      active = false;
+    },
+  };
+}
+
+module.exports = { createDrag };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wedux-ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "微信小程序组件库，支持主题切换",
   "miniprogram": "miniprogram_dist",
   "files": [