@10yun/cv-mobile-ui 0.5.44 → 0.5.46

package/uview-plus/components/u-signature/style.scss

@@ -0,0 +1,88 @@
+.u-signature {
+  display: flex;
+  flex-direction: column;
+
+  &__canvas-wrap {
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__canvas {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__toolbar {
+    margin-top: 5px;
+    background-color: #fff;
+  }
+
+  &__toolbar-icons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1px 0;
+    // border: 1px solid #e0e0e0;
+    border-radius: 4px;
+  }
+
+  &__toolbar-icon {
+    padding: 5px;
+  }
+
+  &__brush-settings,
+  &__color-settings {
+    margin-top: 15px;
+    padding: 1px;
+    // border: 1px solid #e0e0e0;
+    border-radius: 4px;
+  }
+
+  &__progress {
+    &-label {
+      display: block;
+      margin-bottom: 10px;
+      font-size: 14px;
+      color: #999;
+    }
+  }
+
+  &__color-picker {
+    margin-bottom: 10px;
+  }
+
+  &__color-label {
+    display: block;
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: #999;
+  }
+
+  &__colors {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  &__color-item {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: 2px solid #f0f0f0;
+    cursor: pointer;
+
+    &--active {
+      border-color: #2979ff;
+      transform: scale(1.1);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    justify-content: center;
+  }
+}

package/uview-plus/components/u-signature/u-signature.vue

@@ -0,0 +1,350 @@
+<template>
+  <view class="u-signature">
+    <view class="u-signature__canvas-wrap">
+      <canvas
+        class="u-signature__canvas"
+        :canvas-id="canvasId"
+        :disable-scroll="true"
+        @touchstart="touchStart"
+        @touchmove="touchMove"
+        @touchend="touchEnd"
+        :style="{
+          width: canvasWidth + 'px',
+          height: canvasHeight + 'px',
+          background: bgColor
+        }"
+      ></canvas>
+    </view>
+    <view v-if="showToolbar" class="u-signature__toolbar">
+      <view class="u-signature__toolbar-icons u-flex u-flex-x">
+        <view class="u-signature__toolbar-icon" @click="undo">
+          <up-icon name="arrow-left" size="22" :color="pathStack.length === 0 ? '#ccc' : '#999'"></up-icon>
+        </view>
+        <view class="u-signature__toolbar-icon" @click="clear">
+          <up-icon name="trash" size="25" color="#999"></up-icon>
+        </view>
+        <view class="u-signature__toolbar-icon" @click="toggleBrushSettings">
+          <up-icon name="edit-pen" size="25" color="#999"></up-icon>
+        </view>
+        <view class="u-signature__toolbar-icon" @click="toggleColorSettings">
+          <up-icon name="grid" size="24" color="#999"></up-icon>
+        </view>
+        <view class="u-signature__toolbar-icon" @click="exportSignature">
+          <up-icon name="checkmark" size="25" :color="isEmpty ? '#ccc' : '#999'"></up-icon>
+        </view>
+      </view>
+      <!-- 笔画设置 -->
+      <view v-if="showBrushSettings" class="u-signature__brush-settings">
+        <view class="u-signature__progress">
+          <text class="u-signature__progress-label">{{ t('up.signature.penSize') }}:</text>
+          <up-slider v-model="lineWidth" :min="1" :max="20" :step="1" @show-value="true" :value-show="lineWidth"></up-slider>
+        </view>
+      </view>
+      <!-- 颜色设置 -->
+      <view v-if="showColorSettings" class="u-signature__color-settings">
+        <view class="u-signature__color-picker">
+          <text class="u-signature__color-label">{{ t('up.signature.penColor') }}:</text>
+          <view class="u-signature__colors">
+            <view
+              v-for="(color, index) in presetColors"
+              :key="index"
+              class="u-signature__color-item"
+              :class="{ 'u-signature__color-item--active': lineColor === color }"
+              :style="{ backgroundColor: color }"
+              @click="selectColor(color)"
+            ></view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { t } from '../../libs/i18n';
+export default {
+  name: 'u-signature',
+  props: {
+    // 画布宽度
+    width: {
+      type: [String, Number],
+      default: 300
+    },
+    // 画布高度
+    height: {
+      type: [String, Number],
+      default: 200
+    },
+    // 背景颜色
+    bgColor: {
+      type: String,
+      default: '#ffffff'
+    },
+    // 默认笔画颜色
+    color: {
+      type: String,
+      default: '#000000'
+    },
+    // 默认笔画粗细
+    thickness: {
+      type: [String, Number],
+      default: 3
+    },
+    // 是否显示工具栏
+    showToolbar: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      canvasId: 'u-signature-' + Math.random().toString(36).substr(2, 9),
+      canvasWidth: 300,
+      canvasHeight: 200,
+      lineColor: '#000000',
+      lineWidth: 3,
+      isDrawing: false,
+      pathStack: [], // 存储绘制路径用于回退
+      currentPath: [], // 当前绘制路径
+      ctx: null,
+      isEmpty: true,
+      presetColors: [
+        '#000000', // 黑色
+        '#ff0000', // 红色
+        '#00ff00', // 绿色
+        '#0000ff', // 蓝色
+        '#ffff00', // 黄色
+        '#00ffff', // 青色
+        '#ff00ff', // 紫色
+        '#ffffff' // 白色
+      ],
+      showBrushSettings: false,
+      showColorSettings: false,
+      lastPoint: null // 保存上一个点的坐标
+    };
+  },
+  mounted() {
+    this.initCanvas();
+  },
+  watch: {
+    width: {
+      handler(newVal) {
+        this.canvasWidth = Number(newVal);
+      },
+      immediate: true
+    },
+    height: {
+      handler(newVal) {
+        this.canvasHeight = Number(newVal);
+      },
+      immediate: true
+    },
+    color: {
+      handler(newVal) {
+        this.lineColor = newVal;
+      },
+      immediate: true
+    },
+    thickness: {
+      handler(newVal) {
+        this.lineWidth = Number(newVal);
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    initCanvas() {
+      // #ifndef APP-NVUE
+      const ctx = uni.createCanvasContext(this.canvasId, this);
+      this.ctx = ctx;
+      this.clearCanvas();
+      // #endif
+      // #ifdef APP-NVUE
+      // NVUE环境下的处理
+      // #endif
+    },
+    touchStart(e) {
+      if (!this.ctx) return;
+      this.isDrawing = true;
+      this.isEmpty = false;
+      this.currentPath = [];
+      const { x, y } = this.getCanvasPoint(e);
+      this.ctx.beginPath();
+      this.ctx.moveTo(x, y);
+      this.ctx.setLineCap('round');
+      this.ctx.setLineJoin('round');
+      this.ctx.setStrokeStyle(this.lineColor);
+      this.ctx.setLineWidth(this.lineWidth);
+      // 记录起始点
+      this.currentPath.push({
+        x,
+        y,
+        type: 'start',
+        color: this.lineColor,
+        width: this.lineWidth
+      });
+      // 保存上一个点
+      this.lastPoint = { x, y };
+      // 阻止默认事件以提高性能
+      e.preventDefault();
+    },
+    touchMove(e) {
+      if (!this.isDrawing || !this.ctx) return;
+      // 阻止默认事件以提高性能
+      e.preventDefault();
+      const { x, y } = this.getCanvasPoint(e);
+      // 使用更密集的点采样确保线条连贯性
+      if (this.lastPoint) {
+        // 计算两点间距离
+        const distance = Math.sqrt(Math.pow(x - this.lastPoint.x, 2) + Math.pow(y - this.lastPoint.y, 2));
+        // 根据距离确定插值点数量，确保点间距不超过1像素以获得更平滑的线条
+        const steps = Math.max(1, Math.floor(distance / 1));
+        // 在两点间插入插值点
+        for (let i = 1; i <= steps; i++) {
+          const t = i / steps;
+          const midX = this.lastPoint.x + (x - this.lastPoint.x) * t;
+          const midY = this.lastPoint.y + (y - this.lastPoint.y) * t;
+          this.ctx.lineTo(midX, midY);
+          this.ctx.stroke();
+          this.currentPath.push({
+            x: midX,
+            y: midY,
+            type: 'move'
+          });
+        }
+      } else {
+        this.ctx.lineTo(x, y);
+        this.ctx.stroke();
+        this.currentPath.push({
+          x,
+          y,
+          type: 'move'
+        });
+      }
+      this.ctx.draw(true);
+      // 更新上一个点
+      this.lastPoint = { x, y };
+    },
+    touchEnd(e) {
+      if (!this.isDrawing || !this.ctx) return;
+      this.isDrawing = false;
+      this.ctx.closePath();
+      this.lastPoint = null;
+      // 将当前路径加入栈中用于回退
+      if (this.currentPath.length > 0) {
+        this.pathStack.push([...this.currentPath]);
+      }
+    },
+    // 同步获取canvas坐标点（兼容处理）
+    getCanvasPoint(e) {
+      const touch = e.touches[0];
+      const canvas = uni.createSelectorQuery().in(this).select('.u-signature__canvas');
+      // 返回一个包含坐标的对象
+      return {
+        x: touch.x,
+        y: touch.y
+      };
+    },
+    // 选择颜色
+    selectColor(color) {
+      this.lineColor = color;
+    },
+    // 回退操作
+    undo() {
+      if (this.pathStack.length === 0) return;
+      // 弹出最后一个路径
+      this.pathStack.pop();
+      // 重新绘制
+      this.redraw();
+    },
+    // 重新绘制所有路径
+    redraw() {
+      this.clearCanvas();
+      if (this.pathStack.length === 0) {
+        this.isEmpty = true;
+        return;
+      }
+      this.isEmpty = false;
+      // #ifndef APP-NVUE
+      this.pathStack.forEach((path) => {
+        if (path.length === 0) return;
+        this.ctx.beginPath();
+        this.ctx.setLineCap('round');
+        this.ctx.setLineJoin('round');
+        let lastPoint = null;
+        path.forEach((point, index) => {
+          if (index === 0 && point.type === 'start') {
+            // 设置起始点样式
+            this.ctx.setStrokeStyle(point.color);
+            this.ctx.setLineWidth(point.width);
+            this.ctx.moveTo(point.x, point.y);
+            lastPoint = { x: point.x, y: point.y };
+          } else if (point.type === 'move') {
+            this.ctx.lineTo(point.x, point.y);
+            lastPoint = { x: point.x, y: point.y };
+          }
+        });
+        this.ctx.stroke();
+        this.ctx.draw(true);
+      });
+      // #endif
+    },
+    // 清空画布
+    clear() {
+      this.pathStack = [];
+      this.currentPath = [];
+      this.isEmpty = true;
+      this.lastPoint = null;
+      this.clearCanvas();
+    },
+    // 清空画布内容
+    clearCanvas() {
+      if (!this.ctx) return;
+      // #ifndef APP-NVUE
+      this.ctx.setFillStyle(this.bgColor);
+      this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
+      this.ctx.draw();
+      // #endif
+    },
+    // 导出签名图片
+    exportSignature() {
+      if (this.isEmpty) return;
+      // #ifndef APP-NVUE
+      uni.canvasToTempFilePath(
+        {
+          canvasId: this.canvasId,
+          fileType: 'png',
+          quality: 1,
+          success: (res) => {
+            this.$emit('confirm', res.tempFilePath);
+          },
+          fail: (err) => {
+            this.$emit('error', err);
+          }
+        },
+        this
+      );
+      // #endif
+      // #ifdef APP-NVUE
+      // NVUE环境下可能需要特殊处理
+      // #endif
+    },
+    // 切换笔画设置显示
+    toggleBrushSettings() {
+      this.showBrushSettings = !this.showBrushSettings;
+      if (this.showBrushSettings) {
+        this.showColorSettings = false;
+      }
+    },
+    // 切换颜色设置显示
+    toggleColorSettings() {
+      this.showColorSettings = !this.showColorSettings;
+      if (this.showColorSettings) {
+        this.showBrushSettings = false;
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-skeleton/style.css

@@ -1,29 +1,3 @@
-/* #ifndef APP-NVUE */
-.u-empty,
-.u-empty__wrap,
-.u-tabs,
-.u-tabs__wrapper,
-.u-tabs__wrapper__scroll-view-wrapper,
-.u-tabs__wrapper__scroll-view,
-.u-tabs__wrapper__nav,
-.u-tabs__wrapper__nav__line,
-.up-empty,
-.up-empty__wrap,
-.up-tabs,
-.up-tabs__wrapper,
-.up-tabs__wrapper__scroll-view-wrapper,
-.up-tabs__wrapper__scroll-view,
-.up-tabs__wrapper__nav,
-.up-tabs__wrapper__nav__line {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
 .u-skeleton {
   flex: 1;
 }

package/uview-plus/components/u-skeleton/style.scss

@@ -1,5 +1,3 @@
-@import '../../libs/css/components.scss';
-
 @mixin background {
   /* #ifdef APP-NVUE */
   background-color: #f1f2f4;

package/uview-plus/components/u-skeleton/u-skeleton.vue

@@ -50,7 +50,7 @@ const animation = uni.requireNativePlugin('animation');
 /**
  * Skeleton 骨架屏
  * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
- * @tutorial https://ijry.github.io/uview-plus/components/skeleton.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/skeleton.html
  * @property {Boolean}					loading		是否显示骨架占位图，设置为false将会展示子组件内容 (默认 true )
  * @property {Boolean}					animate		是否开启动画效果 (默认 true )
  * @property {String | Number}			rows		段落占位图行数 (默认 0 )
@@ -89,8 +89,8 @@ export default {
           rowWidth = test.array(this.rowsWidth)
             ? this.rowsWidth[i] || (i === this.rows - 1 ? '70%' : '100%')
             : i === this.rows - 1
-            ? '70%'
-            : this.rowsWidth,
+              ? '70%'
+              : this.rowsWidth,
           rowHeight = test.array(this.rowsHeight) ? this.rowsHeight[i] || '18px' : this.rowsHeight;
         // 如果有title占位图，第一个段落占位图的外边距需要大一些，如果没有title占位图，第一个段落占位图则无需外边距
         // 之所以需要这么做，是因为weex的无能，以提升性能为借口不支持css的一些伪类

package/uview-plus/components/u-sku-wu/_doc/readme.md

@@ -4,7 +4,7 @@
 
 `u-sku` 是一款仿京东算法的轻量化、强大、拓展性强、可使用带图sku、可根据配置主题色自动生成相应的组件主题色的商品多规格sku，仅需要按照指定格式传入sku数组便可以直接使用。
 
-## [查看文档](https://ijry.github.io/uview-plus/components/sku.html)
+## [查看文档](https://uview-plus.jiangruyi.com/components/sku.html)
 
 ## [更多组件, 请查看 `u-ui` 组件库](https://ext.dcloud.net.cn/plugin?name=u--ui)
 (请勿下载插件zip)
@@ -13,4 +13,4 @@
 	<img src="https://wuui.cn/intr.png">
 </a>
 
-**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://ijry.github.io/uview-plus/components/qqFeedBack.html)**
+**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://uview-plus.jiangruyi.com/components/qqFeedBack.html)**

package/uview-plus/components/u-sku-wu/u-sku-wu.vue

@@ -120,7 +120,7 @@ import { props } from './props.js';
 /**
  * geek-sku
  * @description 商品sku组件。
- * @tutorial https://ijry.github.io/uview-plus/components/sku.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/sku.html
  * @property {Array} data 源数据。
  * @property {Boolean} modelValue 是否显示sku组件(默认值: false, v3显示)。
  * @property {Boolean} value 是否显示sku组件(默认值: false, v2显示)。

package/uview-plus/components/u-slider/nvue - /345/211/257/346/234/254.js"

@@ -0,0 +1,166 @@
+/**
+ * 使用bindingx方案实现slider
+ * 只能使用于nvue下
+ */
+// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
+const BindingX = uni.requireNativePlugin('bindingx');
+// nvue操作dom的库，用于获取dom的尺寸信息
+const dom = uni.requireNativePlugin('dom');
+// nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
+const animation = uni.requireNativePlugin('animation');
+export default {
+  data() {
+    return {
+      // bindingx的回调值，用于取消绑定
+      panEvent: null,
+      // 标记是否移动状态
+      moving: false,
+      // 位移的偏移量
+      x: 0,
+      // 是否正在触摸过程中，用于标记动画类是否添加或移除
+      touching: false,
+      changeFromInside: false
+    };
+  },
+  watch: {
+    // 监听vlaue的变化，此变化可能是由于内部修改v-model的值，或者外部
+    // 从服务端获取一个值后，赋值给slider的v-model而导致的
+    value(n) {
+      if (!this.changeFromInside) {
+        this.initX();
+      } else {
+        this.changeFromInside = false;
+      }
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getSliderRect();
+    },
+    // 获取节点信息
+    // 获取slider尺寸
+    getSliderRect() {
+      // 获取滑块条的尺寸信息
+      // 通过nvue的dom模块，查询节点信息
+      setTimeout(() => {
+        dom.getComponentRect(this.$refs['slider'], (res) => {
+          this.sliderRect = res.size;
+          this.initX();
+        });
+      }, 10);
+    },
+    // 初始化按钮位置
+    initButtonStyle({ barStyle, buttonWrapperStyle }) {
+      this.barStyle = barStyle;
+      this.buttonWrapperStyle = buttonWrapperStyle;
+    },
+    emitEvent(event, value) {
+      this.$emit(event, value ? value : this.value);
+    },
+    formatStep(value) {
+      // 移动点占总长度的百分比
+      return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
+    },
+    // 滑动开始
+    onTouchStart(e) {
+      // 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
+      e.stopPropagation && e.stopPropagation();
+      e.preventDefault && e.preventDefault();
+      if (this.moving || this.disabled) {
+        // 释放上一次的资源
+        if (this.panEvent?.token != 0) {
+          BindingX.unbind({
+            token: this.panEvent.token,
+            // pan为手势事件
+            eventType: 'pan'
+          });
+          this.gesToken = 0;
+        }
+        return;
+      }
+      this.moving = true;
+      this.touching = true;
+      // 获取元素ref
+      const button = this.$refs['nvue-button'].ref;
+      const gap = this.$refs['nvue-gap'].ref;
+      const { min, max, step } = this;
+      const { left, width } = this.sliderRect;
+      // 初始值为本次偏移量x，加上次停止滑动时的结束值
+      let exporession = `(${this.x} + x)`;
+      // 将偏移的x值，转为总位移的百分比值，为了和min和max进行判断
+      exporession = `(${exporession} / ${width}) * 100`;
+      if (step > 1) {
+        // 如果step步进大于1，需要跳步，所以需要使用Math.round进行取整
+        exporession = `round(max(${min}, min(${exporession}, ${max})) / ${step}) * ${step}`;
+      } else {
+        // 当step=1时，无需跳步，充分利用bindingx性能，滑块实时跟随手势，达到丝滑的效果
+        exporession = `max(${min}, min(${exporession}, ${max}))`;
+      }
+      // 将百分比最后转化为对应的px值
+      exporession = `${exporession} / 100 * ${width}`;
+      // 最大值不允许超过轨迹的宽度
+      const { sliderWidth } = this.sliderRect;
+      exporession = `min(${sliderWidth}, ${exporession})`;
+      // 滑块点总是需要一个左偏移的值，为自身宽度的一半
+      const buttonExpression = `${exporession} - ${this.blockHeight / 2}`;
+      // 阿里为了KPI而开源的BindingX
+      this.panEvent = BindingX.bind(
+        {
+          anchor: button,
+          eventType: 'pan',
+          props: [
+            {
+              element: gap,
+              // 绑定width属性，设置其宽度值
+              property: 'width',
+              expression
+            },
+            {
+              element: button,
+              // 绑定width属性，设置其宽度值
+              property: 'transform.translateX',
+              expression: buttonExpression
+            }
+          ]
+        },
+        (e) => {
+          if (e.state === 'end' || e.state === 'exit') {
+            //
+            this.x = range(0, left + width, e.deltaX + this.x);
+            // 根据偏移值，得出移动的百分比，进而修改双向绑定的v-model的值
+            const value = (this.x / width) * 100;
+            const percent = this.formatStep(value);
+            // 修改value值
+            this.$emit('input', percent);
+            // 标记下一次触发value的watch时，这个值的变化，是由内部改变的
+            this.changeFromInside = true;
+            this.moving = false;
+            this.touching = false;
+          }
+        }
+      );
+    },
+    // 从value的变化，倒推得出x的值该为多少
+    initX() {
+      const { left, width } = this.sliderRect;
+      // 得出x的初始偏移值，之所以需要这么做，是因为在bindingX中，触摸滑动时，只能的值本次移动的偏移值
+      // 而无法的值准确的前后移动的两个点的坐标值，weex纯粹为阿里巴巴的KPI(部门业绩考核)产物，也就这样了
+      this.x = (this.value / 100) * width;
+      // 设置移动的值
+      const barStyle = {
+        width: this.x + 'px'
+      };
+      // 按钮的初始值
+      const buttonWrapperStyle = {
+        transform: `translateX(${this.x - this.blockHeight / 2}px)`
+      };
+      this.initButtonStyle({
+        barStyle,
+        buttonWrapperStyle
+      });
+    }
+  }
+};

package/uview-plus/components/u-slider/props.js

@@ -86,6 +86,10 @@ export const props = defineMixin({
     height: {
       type: String,
       default: () => defProps.slider.height
+    },
+    innerStyle: {
+      type: Object,
+      default: () => defProps.slider.innerStyle
     }
   }
 });