wedux-ui 0.1.0

package/miniprogram_dist/components/layout-sider/layout-sider.scss

@@ -0,0 +1,13 @@
+.w-layout-sider {
+  flex-shrink: 0;
+  background: var(--layout-sider-bg);
+  height: 100%;
+
+  &__scroll {
+    height: 100%;
+  }
+
+  &--bordered {
+    border-right: 1rpx solid var(--layout-border-color);
+  }
+}

package/miniprogram_dist/components/layout-sider/layout-sider.wxml

@@ -0,0 +1,5 @@
+<view class="w-layout-sider {{bordered ? 'w-layout-sider--bordered' : ''}}" style="{{_style}}">
+  <scroll-view class="w-layout-sider__scroll" scroll-y="{{scrollY}}" bindscroll="_onScroll">
+    <slot></slot>
+  </scroll-view>
+</view>

package/miniprogram_dist/components/list/list.js

@@ -0,0 +1,55 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+
+  relations: {
+    '../list-item/list-item': {
+      type: 'descendant',
+      linked() {
+        this._updateChildren();
+      },
+      unlinked() {
+        this._updateChildren();
+      },
+    },
+  },
+
+  properties: {
+    bordered: {
+      type: Boolean,
+      value: false,
+    },
+    showDivider: {
+      type: Boolean,
+      value: true,
+    },
+    size: {
+      type: String,
+      value: 'medium',
+    },
+  },
+
+  observers: {
+    'showDivider, size': function () {
+      this._updateChildren();
+    },
+  },
+
+  methods: {
+    _updateChildren() {
+      const items = this.getRelationNodes('../list-item/list-item');
+      if (!items || !items.length) return;
+
+      const { showDivider, size } = this.data;
+      const lastIndex = items.length - 1;
+
+      items.forEach((item, index) => {
+        item.setData({
+          _showDivider: showDivider && index < lastIndex,
+          _size: size,
+        });
+      });
+    },
+  },
+});

package/miniprogram_dist/components/list/list.json

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

package/miniprogram_dist/components/list/list.scss

@@ -0,0 +1,51 @@
+.w-list {
+  background-color: var(--w-list-bg);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-md);
+
+  &--bordered {
+    border: 2rpx solid var(--w-list-border);
+    border-radius: var(--radius-lg);
+  }
+
+  &__header:empty,
+  &__footer:empty {
+    display: none;
+  }
+
+  &__header,
+  &__footer {
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--font-size-md);
+    color: var(--color-text-secondary);
+    font-weight: 500;
+  }
+
+  &__header {
+    border-bottom: 2rpx solid var(--w-list-border);
+  }
+
+  &__footer {
+    border-top: 2rpx solid var(--w-list-border);
+  }
+
+  &--small {
+    font-size: var(--font-size-sm);
+
+    .w-list__header,
+    .w-list__footer {
+      padding: var(--spacing-sm) var(--spacing-lg);
+      font-size: var(--font-size-sm);
+    }
+  }
+
+  &--large {
+    font-size: var(--font-size-lg);
+
+    .w-list__header,
+    .w-list__footer {
+      padding: var(--spacing-lg) var(--spacing-lg);
+      font-size: var(--font-size-lg);
+    }
+  }
+}

package/miniprogram_dist/components/list/list.wxml

@@ -0,0 +1,9 @@
+<view class="w-list {{bordered ? 'w-list--bordered' : ''}} w-list--{{size}}">
+  <view class="w-list__header">
+    <slot name="header" />
+  </view>
+  <slot />
+  <view class="w-list__footer">
+    <slot name="footer" />
+  </view>
+</view>

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

@@ -0,0 +1,24 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+
+  relations: {
+    '../list/list': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {},
+
+  data: {
+    _showDivider: false,
+    _size: 'medium',
+  },
+
+  methods: {
+    handleTap(e) {
+      this.triggerEvent('tap', e.detail);
+    },
+  },
+});

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

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

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

@@ -0,0 +1,51 @@
+.w-list-item {
+  position: relative;
+
+  &__body {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+
+  &__prefix:empty {
+    display: none;
+  }
+
+  &__prefix {
+    flex-shrink: 0;
+    margin-right: var(--spacing-lg);
+  }
+
+  &__main {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__suffix:empty {
+    display: none;
+  }
+
+  &__suffix {
+    flex-shrink: 0;
+    margin-left: var(--spacing-lg);
+  }
+
+  &__divider {
+    height: 2rpx;
+    background-color: var(--w-list-border);
+    margin: 0 var(--spacing-lg);
+  }
+
+  /* Size variants */
+  &--small {
+    .w-list-item__body {
+      padding: var(--spacing-sm) var(--spacing-lg);
+    }
+  }
+
+  &--large {
+    .w-list-item__body {
+      padding: var(--spacing-lg) var(--spacing-lg);
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+<view class="w-list-item w-list-item--{{_size}}" bindtap="handleTap">
+  <view class="w-list-item__body">
+    <view class="w-list-item__prefix">
+      <slot name="prefix" />
+    </view>
+    <view class="w-list-item__main">
+      <slot />
+    </view>
+    <view class="w-list-item__suffix">
+      <slot name="suffix" />
+    </view>
+  </view>
+  <view class="w-list-item__divider" wx:if="{{_showDivider}}"></view>
+</view>

package/miniprogram_dist/components/navigation-bar/navigation-bar.js

@@ -0,0 +1,77 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+
+  properties: {
+    title: {
+      type: String,
+      value: '',
+    },
+    back: {
+      type: Boolean,
+      value: true,
+    },
+    useBackSlot: {
+      type: Boolean,
+      value: false,
+    },
+    useTitleSlot: {
+      type: Boolean,
+      value: false,
+    },
+    useContentSlot: {
+      type: Boolean,
+      value: false,
+    },
+    preventBack: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    _statusBarHeight: 0,
+    _navbarHeight: 44,
+    _capsuleWidth: 0,
+    _showBack: false,
+  },
+
+  lifetimes: {
+    attached() {
+      const { statusBarHeight, windowWidth } = wx.getWindowInfo();
+      const { platform } = wx.getDeviceInfo();
+      const rect = wx.getMenuButtonBoundingClientRect();
+      const pages = getCurrentPages();
+
+      // 导航栏高度 = 胶囊按钮垂直居中所需高度
+      const navbarHeight = (rect.top - statusBarHeight) * 2 + rect.height;
+      // 右侧需要避让胶囊按钮的宽度
+      const capsuleWidth = windowWidth - rect.left;
+
+      this.setData({
+        _statusBarHeight: statusBarHeight,
+        _navbarHeight: navbarHeight,
+        _capsuleWidth: capsuleWidth,
+        _showBack: this.data.back && pages.length > 1,
+        _platform: platform,
+      });
+    },
+  },
+
+  observers: {
+    back(val) {
+      const pages = getCurrentPages();
+      this.setData({ _showBack: val && pages.length > 1 });
+    },
+  },
+
+  methods: {
+    _onBack() {
+      this.triggerEvent('back');
+      if (!this.data.preventBack) {
+        wx.navigateBack();
+      }
+    },
+  },
+});

package/miniprogram_dist/components/navigation-bar/navigation-bar.json

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

package/miniprogram_dist/components/navigation-bar/navigation-bar.scss

@@ -0,0 +1,63 @@
+@import '../../styles/iconfont.scss';
+
+.w-navbar {
+  background-color: var(--navbar-bg);
+}
+
+.w-navbar__content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.w-navbar__back {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 88rpx;
+  height: 100%;
+}
+
+.w-navbar__back--hover {
+  opacity: 0.5;
+}
+
+.w-navbar__back-slot {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.w-navbar__back-icon {
+  font-size: 52rpx;
+  color: var(--navbar-icon-color);
+}
+
+.w-navbar__custom-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  overflow: hidden;
+}
+
+.w-navbar__title {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--navbar-title-color);
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/miniprogram_dist/components/navigation-bar/navigation-bar.wxml

@@ -0,0 +1,35 @@
+<view class="w-navbar" style="padding-top: {{_statusBarHeight}}px;">
+  <view
+    class="w-navbar__content"
+    style="height: {{_navbarHeight}}px; padding-right: {{_capsuleWidth}}px;"
+  >
+    <!-- content 插槽模式：占据胶囊左侧所有空间 -->
+    <view wx:if="{{useContentSlot}}" class="w-navbar__custom-content">
+      <slot name="content" />
+    </view>
+
+    <!-- 默认模式：返回按钮 + 标题 -->
+    <block wx:else>
+      <view
+        wx:if="{{_showBack}}"
+        class="w-navbar__back"
+        hover-class="w-navbar__back--hover"
+        bind:tap="_onBack"
+      >
+        <view wx:if="{{useBackSlot}}" class="w-navbar__back-slot">
+          <slot name="back" />
+        </view>
+        <view wx:else class="iconfont icon-left w-navbar__back-icon"></view>
+      </view>
+
+      <view
+        wx:if="{{useTitleSlot}}"
+        class="w-navbar__title"
+        style="padding: 0 {{_capsuleWidth}}px;"
+      >
+        <slot name="title" />
+      </view>
+      <view wx:else class="w-navbar__title" style="padding: 0 {{_capsuleWidth}}px;">{{title}}</view>
+    </block>
+  </view>
+</view>

package/miniprogram_dist/components/number-animation/number-animation.js

@@ -0,0 +1,124 @@
+Component({
+  properties: {
+    from: {
+      type: Number,
+      value: 0,
+    },
+    to: {
+      type: Number,
+      value: 0,
+    },
+    duration: {
+      type: Number,
+      value: 2000,
+    },
+    precision: {
+      type: Number,
+      value: 0,
+    },
+    showSeparator: {
+      type: Boolean,
+      value: false,
+    },
+    active: {
+      type: Boolean,
+      value: true,
+    },
+    color: {
+      type: String,
+      value: '',
+    },
+    fontSize: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    _displayValue: '0',
+    _style: '',
+  },
+
+  lifetimes: {
+    attached() {
+      this._initialized = true;
+      this._animating = false;
+      this._timer = null;
+      this._currentValue = this.data.from;
+      if (this.data.active) {
+        this._animate(this.data.from, this.data.to);
+      } else {
+        this._updateDisplay(this.data.from);
+      }
+    },
+
+    detached() {
+      this._stopAnimation();
+    },
+  },
+
+  observers: {
+    to(to) {
+      if (!this._initialized || !this.data.active) return;
+      this._animate(this._currentValue ?? this.data.from, to);
+    },
+    'color, fontSize'(color, fontSize) {
+      const parts = [];
+      if (color) parts.push(`color: ${color}`);
+      if (fontSize) parts.push(`font-size: ${fontSize}`);
+      this.setData({ _style: parts.join('; ') });
+    },
+  },
+
+  methods: {
+    play() {
+      this._animate(this.data.from, this.data.to);
+    },
+
+    _animate(from, to) {
+      this._stopAnimation();
+      this._animating = true;
+
+      const { duration } = this.data;
+      const startTime = Date.now();
+
+      this._timer = setInterval(() => {
+        const elapsed = Math.min(Date.now() - startTime, duration);
+        const progress = elapsed / duration;
+        // easeOut quintic: 1 - (1 - t)^5
+        const eased = 1 - Math.pow(1 - progress, 5);
+        const current = from + (to - from) * eased;
+
+        this._updateDisplay(current);
+
+        if (elapsed >= duration) {
+          this._stopAnimation();
+          this._updateDisplay(to);
+          this.triggerEvent('finish');
+        }
+      }, 16);
+    },
+
+    _stopAnimation() {
+      if (this._timer) {
+        clearInterval(this._timer);
+        this._timer = null;
+      }
+      this._animating = false;
+    },
+
+    _updateDisplay(value) {
+      this._currentValue = value;
+      const { precision, showSeparator } = this.data;
+      let str = value.toFixed(precision);
+
+      if (showSeparator) {
+        const parts = str.split('.');
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        str = parts.join('.');
+      }
+
+      this.setData({ _displayValue: str });
+    },
+  },
+});

package/miniprogram_dist/components/number-animation/number-animation.json

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

package/miniprogram_dist/components/number-animation/number-animation.scss

@@ -0,0 +1,3 @@
+.w-number-animation {
+  display: inline;
+}

package/miniprogram_dist/components/number-animation/number-animation.wxml

@@ -0,0 +1 @@
+<text class="w-number-animation" style="{{_style}}">{{_displayValue}}</text>