wedux-ui 0.1.0

package/miniprogram_dist/components/upload/upload.wxml

@@ -0,0 +1,142 @@
+<!-- Grid Mode -->
+<view
+  wx:if="{{mode === 'grid'}}"
+  class="w-upload w-upload--grid {{(disabled || _formItemDisabled) ? 'w-upload--disabled' : ''}}"
+>
+  <view
+    wx:for="{{fileList}}"
+    wx:key="index"
+    class="w-upload__grid-item"
+    style="{{_itemStyle}}"
+    data-index="{{index}}"
+    bindtap="handlePreview"
+  >
+    <!-- Image -->
+    <image
+      wx:if="{{item.type === 'image'}}"
+      class="w-upload__thumb"
+      src="{{item.thumb || item.url}}"
+      mode="aspectFill"
+    />
+    <!-- Video -->
+    <block wx:elif="{{item.type === 'video'}}">
+      <image class="w-upload__thumb" src="{{item.thumb || item.url}}" mode="aspectFill" />
+      <text class="w-upload__video-icon iconfont icon-play_fill"></text>
+    </block>
+    <!-- File -->
+    <view wx:else class="w-upload__file-info">
+      <text class="w-upload__file-icon iconfont icon-file"></text>
+      <text class="w-upload__file-name">{{item.name || '文件'}}</text>
+    </view>
+
+    <!-- Error overlay -->
+    <view
+      wx:if="{{item.status === 'error'}}"
+      class="w-upload__error-overlay"
+      catchtap="handleRetry"
+      data-index="{{index}}"
+    >
+      <text class="w-upload__retry-icon iconfont icon-retry"></text>
+    </view>
+
+    <!-- Progress bar -->
+    <view wx:if="{{item.status === 'uploading'}}" class="w-upload__progress">
+      <view class="w-upload__progress-bar" style="width: {{item.progress || 0}}%"></view>
+    </view>
+
+    <!-- Delete button -->
+    <view
+      wx:if="{{!readonly && !(disabled || _formItemDisabled)}}"
+      class="w-upload__delete"
+      catchtap="handleDelete"
+      data-index="{{index}}"
+    >
+      <text class="w-upload__delete-icon iconfont icon-close"></text>
+    </view>
+  </view>
+
+  <!-- Add button (grid) -->
+  <view
+    wx:if="{{!readonly && !(disabled || _formItemDisabled) && _showAdd}}"
+    class="w-upload__add"
+    style="{{_itemStyle}}"
+    bindtap="handleChoose"
+  >
+    <slot wx:if="{{_useSlot}}" />
+    <text wx:else class="w-upload__add-icon iconfont icon-add"></text>
+  </view>
+</view>
+
+<!-- List Mode -->
+<view
+  wx:else
+  class="w-upload w-upload--list {{(disabled || _formItemDisabled) ? 'w-upload--disabled' : ''}}"
+>
+  <view wx:for="{{fileList}}" wx:key="index" class="w-upload__list-item">
+    <!-- Thumb / Icon -->
+    <view
+      wx:if="{{item.type === 'image' || item.type === 'video'}}"
+      class="w-upload__list-thumb"
+      data-index="{{index}}"
+      bindtap="handlePreview"
+    >
+      <image class="w-upload__list-thumb-img" src="{{item.thumb || item.url}}" mode="aspectFill" />
+    </view>
+    <view wx:else class="w-upload__list-icon" data-index="{{index}}" bindtap="handlePreview">
+      <text class="iconfont icon-file"></text>
+    </view>
+
+    <!-- Content -->
+    <view class="w-upload__list-content" data-index="{{index}}" bindtap="handleListContentTap">
+      <view class="w-upload__list-name">{{item.name || item.url}}</view>
+      <view class="w-upload__list-meta">
+        <text wx:if="{{item.size}}" class="w-upload__list-size">{{_fileSizes[index] || ''}}</text>
+        <text
+          wx:if="{{item.status === 'uploading'}}"
+          class="w-upload__list-status w-upload__list-status--uploading"
+        >
+          {{item.progress || 0}}%
+        </text>
+        <text
+          wx:if="{{item.status === 'error'}}"
+          class="w-upload__list-status w-upload__list-status--error"
+        >
+          重新上传
+        </text>
+      </view>
+      <!-- List progress bar -->
+      <view
+        wx:if="{{item.status === 'uploading' || item.status === 'error'}}"
+        class="w-upload__list-progress"
+      >
+        <view
+          class="w-upload__list-progress-bar {{item.status === 'error' ? 'w-upload__list-progress-bar--error' : ''}}"
+          style="width: {{item.progress || 0}}%"
+        ></view>
+      </view>
+    </view>
+
+    <!-- Delete -->
+    <view
+      wx:if="{{!readonly && !(disabled || _formItemDisabled)}}"
+      class="w-upload__list-delete"
+      catchtap="handleDelete"
+      data-index="{{index}}"
+    >
+      <text class="iconfont icon-close"></text>
+    </view>
+  </view>
+
+  <!-- Add button (list) -->
+  <view
+    wx:if="{{!readonly && !(disabled || _formItemDisabled) && _showAdd}}"
+    class="w-upload__list-add"
+    bindtap="handleChoose"
+  >
+    <slot wx:if="{{_useSlot}}" />
+    <block wx:else>
+      <text class="w-upload__list-add-icon iconfont icon-add"></text>
+      <text>选择文件</text>
+    </block>
+  </view>
+</view>

package/miniprogram_dist/components/watermark/watermark.js

@@ -0,0 +1,260 @@
+Component({
+  properties: {
+    content: {
+      type: String,
+      value: '',
+    },
+    fontSize: {
+      type: Number,
+      value: 14,
+    },
+    fontColor: {
+      type: String,
+      value: 'rgba(128, 128, 128, 0.15)',
+    },
+    fontWeight: {
+      type: String,
+      value: 'normal',
+    },
+    fontFamily: {
+      type: String,
+      value: 'sans-serif',
+    },
+    width: {
+      type: Number,
+      value: 120,
+    },
+    height: {
+      type: Number,
+      value: 64,
+    },
+    rotate: {
+      type: Number,
+      value: -22,
+    },
+    xGap: {
+      type: Number,
+      value: 0,
+    },
+    yGap: {
+      type: Number,
+      value: 0,
+    },
+    xOffset: {
+      type: Number,
+      value: 0,
+    },
+    yOffset: {
+      type: Number,
+      value: 0,
+    },
+    zIndex: {
+      type: Number,
+      value: 10,
+    },
+    image: {
+      type: String,
+      value: '',
+    },
+    imageWidth: {
+      type: Number,
+      value: 0,
+    },
+    imageHeight: {
+      type: Number,
+      value: 0,
+    },
+    imageOpacity: {
+      type: Number,
+      value: 1,
+    },
+    cross: {
+      type: Boolean,
+      value: false,
+    },
+    fullscreen: {
+      type: Boolean,
+      value: false,
+    },
+    lineHeight: {
+      type: Number,
+      value: 0,
+    },
+    selectable: {
+      type: Boolean,
+      value: true,
+    },
+    globalRotate: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  data: {
+    _bgStyle: '',
+    _canvasW: 0,
+    _canvasH: 0,
+  },
+
+  lifetimes: {
+    attached() {
+      this._draw();
+    },
+  },
+
+  observers: {
+    'content, fontSize, fontColor, fontWeight, fontFamily, width, height, rotate, xGap, yGap, xOffset, yOffset, image, imageWidth, imageHeight, imageOpacity, cross, lineHeight, globalRotate'() {
+      this._draw();
+    },
+  },
+
+  methods: {
+    _draw() {
+      const props = this.data;
+      const content = props.content;
+      const image = props.image;
+
+      if (!content && !image) {
+        this.setData({ _bgStyle: '' });
+        return;
+      }
+
+      const dpr = wx.getWindowInfo().pixelRatio || 2;
+      const cellW = props.width;
+      const cellH = props.height;
+      const xGap = props.xGap;
+      const yGap = props.yGap;
+      const patternW = cellW + xGap;
+      const patternH = cellH + yGap;
+      const canvasW = props.cross ? patternW * 2 : patternW;
+      const canvasH = props.cross ? patternH * 2 : patternH;
+
+      this.setData({
+        _canvasW: canvasW,
+        _canvasH: canvasH,
+      });
+
+      wx.nextTick(() => {
+        const query = this.createSelectorQuery();
+        query
+          .select('#watermark-canvas')
+          .fields({ node: true, size: true })
+          .exec((res) => {
+            if (!res || !res[0] || !res[0].node) return;
+
+            const canvas = res[0].node;
+            canvas.width = canvasW * dpr;
+            canvas.height = canvasH * dpr;
+            const ctx = canvas.getContext('2d');
+            ctx.scale(dpr, dpr);
+
+            if (image) {
+              this._drawImage(canvas, ctx, canvasW, canvasH, dpr, props);
+            } else {
+              this._drawText(ctx, canvasW, canvasH, props);
+              this._export(canvas, canvasW, canvasH, dpr, props);
+            }
+          });
+      });
+    },
+
+    _drawSingleMark(ctx, x, y, props) {
+      const cellW = props.width;
+      const cellH = props.height;
+      const rotate = props.rotate;
+
+      ctx.save();
+      ctx.translate(x + cellW / 2, y + cellH / 2);
+      ctx.rotate((rotate * Math.PI) / 180);
+
+      const fontSize = props.fontSize;
+      const lh = props.lineHeight || fontSize * 1.5;
+      ctx.font = `${props.fontWeight} ${fontSize}px ${props.fontFamily}`;
+      ctx.fillStyle = props.fontColor;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+
+      const lines = props.content.split('\n');
+      const totalH = lines.length * lh;
+      const startY = -totalH / 2 + lh / 2;
+
+      lines.forEach((line, i) => {
+        ctx.fillText(line, 0, startY + i * lh);
+      });
+
+      ctx.restore();
+    },
+
+    _drawText(ctx, canvasW, canvasH, props) {
+      const patternW = props.width + props.xGap;
+      const patternH = props.height + props.yGap;
+
+      this._drawSingleMark(ctx, 0, 0, props);
+
+      if (props.cross) {
+        this._drawSingleMark(ctx, patternW, patternH, props);
+      }
+    },
+
+    _drawImage(canvas, ctx, canvasW, canvasH, dpr, props) {
+      const img = canvas.createImage();
+      img.onload = () => {
+        let iw = props.imageWidth || img.width;
+        let ih = props.imageHeight || img.height;
+        if (!props.imageWidth && !props.imageHeight) {
+          iw = img.width;
+          ih = img.height;
+        } else if (props.imageWidth && !props.imageHeight) {
+          ih = (img.height / img.width) * iw;
+        } else if (!props.imageWidth && props.imageHeight) {
+          iw = (img.width / img.height) * ih;
+        }
+
+        const cellW = props.width;
+        const cellH = props.height;
+        const patternW = cellW + props.xGap;
+        const patternH = cellH + props.yGap;
+
+        const drawOne = (x, y) => {
+          ctx.save();
+          ctx.translate(x + cellW / 2, y + cellH / 2);
+          ctx.rotate((props.rotate * Math.PI) / 180);
+          ctx.globalAlpha = props.imageOpacity;
+          ctx.drawImage(img, -iw / 2, -ih / 2, iw, ih);
+          ctx.restore();
+        };
+
+        drawOne(0, 0);
+        if (props.cross) {
+          drawOne(patternW, patternH);
+        }
+
+        this._export(canvas, canvasW, canvasH, dpr, props);
+      };
+      img.onerror = () => {
+        console.warn('[w-watermark] image load failed:', props.image);
+      };
+      img.src = props.image;
+    },
+
+    _export(canvas, canvasW, canvasH, dpr, props) {
+      const dataURL = canvas.toDataURL('image/png');
+      const bgSize = `${canvasW}px ${canvasH}px`;
+      const xOffset = props.xOffset;
+      const yOffset = props.yOffset;
+      const bgPos = `${xOffset}px ${yOffset}px`;
+
+      let style =
+        `background-image: url('${dataURL}');` +
+        `background-size: ${bgSize};` +
+        'background-repeat: repeat;' +
+        `background-position: ${bgPos};`;
+
+      if (props.globalRotate) {
+        style += `transform: rotate(${props.globalRotate}deg);`;
+      }
+
+      this.setData({ _bgStyle: style });
+    },
+  },
+});

package/miniprogram_dist/components/watermark/watermark.json

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

package/miniprogram_dist/components/watermark/watermark.scss

@@ -0,0 +1,35 @@
+.w-watermark {
+  position: relative;
+  height: 100%;
+
+  &--fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 100;
+  }
+
+  &__layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &--no-select {
+    pointer-events: auto;
+  }
+
+  &__canvas {
+    position: fixed;
+    left: -9999px;
+    top: -9999px;
+    opacity: 0;
+    pointer-events: none;
+  }
+}

package/miniprogram_dist/components/watermark/watermark.wxml

@@ -0,0 +1,13 @@
+<view class="w-watermark {{fullscreen ? 'w-watermark--fullscreen' : ''}}">
+  <slot></slot>
+  <view
+    class="w-watermark__layer {{selectable ? '' : 'w-watermark--no-select'}}"
+    style="z-index: {{zIndex}}; {{_bgStyle}}"
+  ></view>
+  <canvas
+    type="2d"
+    id="watermark-canvas"
+    class="w-watermark__canvas"
+    style="width: {{_canvasW}}px; height: {{_canvasH}}px;"
+  ></canvas>
+</view>