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

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

@@ -0,0 +1,115 @@
+<template>
+  <view class="u-tree">
+    <tree-node
+      v-for="node in treeData"
+      :key="node[props.nodeKey]"
+      :node="node"
+      :props="props"
+      :show-checkbox="showCheckbox"
+      :check-strictly="checkStrictly"
+      :expand-on-click-node="expandOnClickNode"
+      @node-click="handleNodeClick"
+      @check-change="$emit('check-change', $event)"
+    >
+      <template #default="{ nodeData, level }">
+        <slot :node="nodeData" :level="level"></slot>
+      </template>
+    </tree-node>
+  </view>
+</template>
+<script>
+import TreeNode from './tree-node.vue';
+export default {
+  name: 'u-tree',
+  components: { TreeNode },
+  props: {
+    data: {
+      type: Array,
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => ({
+        label: 'label',
+        children: 'children',
+        nodeKey: 'id'
+      })
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    },
+    expandOnClickNode: {
+      type: Boolean,
+      default: true
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      treeData: []
+    };
+  },
+  created() {
+    this.initTree();
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        this.treeData = JSON.parse(JSON.stringify(newVal));
+        this.initExpandedState(this.treeData, this.defaultExpandAll);
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  emits: ['node-click', 'check-change'],
+  methods: {
+    initTree() {
+      this.treeData = JSON.parse(JSON.stringify(this.data));
+      this.initExpandedState(this.treeData, this.defaultExpandAll);
+    },
+    initExpandedState(nodes, expanded) {
+      nodes.forEach((node) => {
+        node.expanded = expanded;
+        if (node[this.props.children]) {
+          this.initExpandedState(node[this.props.children], expanded);
+        }
+      });
+    },
+    handleNodeClick(node) {
+      this.$emit('node-click', node);
+    },
+    /**
+     * 直接递归 treeData 获取所有 checked 的节点
+     */
+    getCheckedNodes() {
+      const traverse = (nodes) => {
+        let result = [];
+        nodes.forEach((node) => {
+          if (node.checked) {
+            result.push(node);
+          }
+          if (node[this.props.children] && node[this.props.children].length > 0) {
+            result = result.concat(traverse(node[this.props.children]));
+          }
+        });
+        return result;
+      };
+      return traverse(this.treeData);
+    }
+  }
+};
+</script>
+<style scoped>
+.u-tree {
+  font-size: 28rpx;
+}
+</style>

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

@@ -167,6 +167,10 @@ export const props = defineMixin({
     customAfterAutoUpload: {
       type: Boolean,
       default: () => defProps.upload.customAfterAutoUpload
+    },
+    videoPreviewObjectFit: {
+      type: String,
+      default: () => defProps.upload.videoPreviewObjectFit
     }
   }
 });

package/uview-plus/components/u-upload/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-upload {
   /* #ifndef APP-NVUE */
   display: flex;

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

@@ -1,4 +1,3 @@
-@import '../../libs/css/components.scss';
 $u-upload-preview-border-radius: 2px !default;
 $u-upload-preview-margin: 0 8px 8px 0 !default;
 $u-upload-image-width: 80px !default;

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

@@ -65,7 +65,11 @@
               :name="item.isVideo || (item.type && item.type === 'video') ? 'movie' : 'folder'"
             ></up-icon>
             <text class="u-upload__wrap__preview__other__text">
-              {{ item.isVideo || (item.type && item.type === 'video') ? item.name || '视频' : item.name || '文件' }}
+              {{
+                item.isVideo || (item.type && item.type === 'video')
+                  ? item.name || t('up.common.video')
+                  : item.name || t('up.common.file')
+              }}
             </text>
           </view>
           <view class="u-upload__status" v-if="item.status === 'uploading' || item.status === 'failed'">
@@ -133,7 +137,7 @@
         :src="currentItemIndex >= 0 ? lists[currentItemIndex].url : ''"
         @error="videoErrorCallback"
         show-center-play-btn
-        object-fit="cover"
+        :object-fit="videoPreviewObjectFit"
         show-fullscreen-btn="true"
         enable-play-gesture
         controls
@@ -153,6 +157,7 @@ import { mpMixin } from '../../libs/mixin/mpMixin';
 import { mixin } from '../../libs/mixin/mixin';
 import { addStyle, addUnit, toast } from '../../libs/function/index';
 import test from '../../libs/function/test';
+import { t } from '../../libs/i18n';
 /**
  * upload 上传
  * @description 该组件用于上传图片场景
@@ -230,6 +235,7 @@ export default {
   emits: ['error', 'beforeRead', 'oversize', 'afterRead', 'delete', 'clickPreview', 'update:fileList', 'afterAutoUpload'],
   // #endif
   methods: {
+    t,
     addUnit,
     addStyle,
     videoErrorCallback() {},
@@ -380,7 +386,7 @@ export default {
       const oversize = Array.isArray(file) ? file.some((item) => item.size > maxSize) : file.size > maxSize;
       if (oversize) {
         uni.showToast({
-          title: '超过大小限制'
+          title: t('up.upload.sizeExceed')
         });
         this.$emit(
           'oversize',
@@ -402,7 +408,7 @@ export default {
           this.fileList.push({
             ...item,
             status: 'uploading',
-            message: '上传中',
+            message: t('up.upload.uploading'),
             progress: 0
           });
         });
@@ -609,7 +615,7 @@ export default {
         urls: urls,
         current: current,
         fail() {
-          toast('预览图片失败');
+          toast(t('up.upload.previewImageFail'));
         }
       });
     },
@@ -645,7 +651,7 @@ export default {
         sources: sources,
         current: current,
         fail() {
-          toast('预览视频失败');
+          toast(t('up.upload.previewVideoFail'));
         }
       });
       // #endif

package/uview-plus/components/u-upload/upload.js

@@ -40,6 +40,7 @@ export default {
 		autoUploadDriver: '',
 		autoUploadHeader: {},
 		getVideoThumb: false,
-		customAfterAutoUpload: false
+		customAfterAutoUpload: false,
+		videoPreviewObjectFit: 'cover'
 	}
 }

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

@@ -1,26 +0,0 @@
-/* #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 */

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

@@ -1,4 +1,2 @@
-@import '../../libs/css/components.scss';
-
 .u-view {
 }

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

@@ -1,3 +1,70 @@
-<template>
  <view
    class="u-view"
    :class="class"
    :style="{
      backgroundColor: backgroundColor,
      color: color,
      flexDirection: flexDirection,
      justifyContent: justifyContent,
      alignItems: alignItems,
      flex1: flex1,
      width: width,
      height: height,
      padding: padding,
      margin: margin,
      borderColor: borderColor
    }"
  ></view>
 * View 视图
 * @description 对View默认标签的封装
 * @tutorial https://ijry.github.io/uview-plus/components/view.html
 * @property {String} 					bgColor		背景颜色
 * @event {Function} click  点击触发事件
 * @example <up-view></up-view>
 */
  name: 'up-view',
  // #ifdef MP
  mixins: [mpMixin, mixin],
  // #endif
  // #ifndef MP
  mixins: [mpMixin, mixin],
  // #endif
  emits: ['click'],
  computed: {
    valueStyle() {}
  },
  props: {
    backgroundColor: '',
    color: '',
    flexDirection: '',
    justifyContent: '',
    alignItems: '',
    flex1: '',
    width: '',
    height: '',
    padding: '',
    margin: '',
    borderColor: ''
  },
  data() {
    return {};
  },
  methods: {
    addStyle,
    clickHandler() {
      this.$emit('click');
    }
  }
-@import './style.css';
-</style>
+<template>
+  <view
+    class="u-view"
+    :class="class"
+    :style="{
+      backgroundColor: backgroundColor,
+      color: color,
+      flexDirection: flexDirection,
+      justifyContent: justifyContent,
+      alignItems: alignItems,
+      flex1: flex1,
+      width: width,
+      height: height,
+      padding: padding,
+      margin: margin,
+      borderColor: borderColor
+    }"
+  ></view>
+</template>
+<script>
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, deepMerge } from '../../libs/function/index';
+/**
+ * View 视图
+ * @description 对View默认标签的封装
+ * @tutorial https://uview-plus.jiangruyi.com/components/view.html
+ * @property {String} 					bgColor		背景颜色
+ * @event {Function} click  点击触发事件
+ * @example <up-view></up-view>
+ */
+export default {
+  name: 'up-view',
+  // #ifdef MP
+  mixins: [mpMixin, mixin],
+  // #endif
+  // #ifndef MP
+  mixins: [mpMixin, mixin],
+  // #endif
+  emits: ['click'],
+  computed: {
+    valueStyle() {}
+  },
+  props: {
+    backgroundColor: '',
+    color: '',
+    flexDirection: '',
+    justifyContent: '',
+    alignItems: '',
+    flex1: '',
+    width: '',
+    height: '',
+    padding: '',
+    margin: '',
+    borderColor: ''
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    addStyle,
+    clickHandler() {
+      this.$emit('click');
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-virtual-list/style.scss

@@ -0,0 +1,16 @@
+.u-virtual-list {
+  position: relative;
+  overflow: hidden;
+}
+
+.virtual-scroll-container {
+  height: 100%;
+}
+
+.scroll-content {
+  position: relative;
+}
+
+.list-item {
+  will-change: transform;
+}

package/uview-plus/components/u-virtual-list/u-virtual-list.vue

@@ -0,0 +1,218 @@
+<template>
+  <view class="u-virtual-list" :style="{ height: addUnit(height) }" ref="container">
+    <scroll-view
+      class="virtual-scroll-container"
+      :scroll-y="true"
+      :scroll-top="scrollTop"
+      :style="{ height: '100%' }"
+      @scroll="handleScroll"
+    >
+      <!-- @touchmove.stop.prevent="handleTouchMove" -->
+      <view class="scroll-content">
+        <!-- 顶部占位 -->
+        <view :style="{ height: topPlaceholderHeight + 'px' }"></view>
+        <!-- 可见项 -->
+        <view v-for="item in visibleItems" :key="getItemKey(item)" class="list-item" :style="{ height: itemHeight + 'px' }">
+          <slot :item="item" :index="item._virtualIndex"></slot>
+        </view>
+        <!-- 底部占位 -->
+        <view :style="{ height: bottomPlaceholderHeight + 'px' }"></view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<script>
+import { addUnit } from '../../libs/function/index.js';
+export default {
+  name: 'u-virtual-list',
+  props: {
+    // 数据源
+    listData: {
+      type: Array,
+      default: () => []
+    },
+    // 每项高度（固定高度模式）
+    itemHeight: {
+      type: Number,
+      default: 50
+    },
+    // 容器高度
+    height: {
+      type: [String, Number],
+      default: '100%'
+    },
+    // 缓冲区项数
+    buffer: {
+      type: Number,
+      default: 4
+    },
+    // 索引键名
+    keyField: {
+      type: String,
+      default: 'id'
+    },
+    // 当前滚动位置
+    scrollTop: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      // 起始索引
+      startIndex: 0,
+      // 容器实际高度
+      containerHeight: 0
+    };
+  },
+  computed: {
+    // 可视区域显示的项数（根据容器实际高度自动计算）
+    remain() {
+      if (this.containerHeight <= 0) {
+        // 默认值，防止除以0
+        return Math.ceil(500 / this.itemHeight) || 10;
+      }
+      const calculated = Math.ceil(this.containerHeight / this.itemHeight);
+      // 确保至少显示一些项
+      return Math.max(1, calculated);
+    },
+    // 可视项数量
+    visibleCount() {
+      return this.remain + this.buffer;
+    },
+    // 可视项
+    visibleItems() {
+      const start = Math.max(0, this.startIndex - Math.floor(this.buffer / 2));
+      const end = Math.min(this.listData.length, start + this.visibleCount);
+      return this.listData.slice(start, end).map((item, index) => {
+        return {
+          ...item,
+          _virtualIndex: start + index
+        };
+      });
+    },
+    // 顶部占位高度
+    topPlaceholderHeight() {
+      const start = Math.max(0, this.startIndex - Math.floor(this.buffer / 2));
+      return start * this.itemHeight;
+    },
+    // 底部占位高度
+    bottomPlaceholderHeight() {
+      const start = Math.max(0, this.startIndex - Math.floor(this.buffer / 2));
+      const end = Math.min(this.listData.length, start + this.visibleCount);
+      return (this.listData.length - end) * this.itemHeight;
+    }
+  },
+  emits: ['update:scrollTop', 'scroll'],
+  watch: {
+    listData: {
+      handler() {
+        this.updateVisibleItems();
+      },
+      immediate: true
+    },
+    scrollTop: {
+      handler(newVal) {
+        this.updateVisibleItems();
+      }
+    }
+  },
+  mounted() {
+    this.measureContainerHeight();
+  },
+  methods: {
+    addUnit,
+    // 测量容器高度
+    measureContainerHeight() {
+      // 使用 uni.createSelectorQuery 获取实际高度
+      this.$nextTick(() => {
+        // #ifdef H5
+        if (this.$refs.container) {
+          const element = this.$refs.container.$el || this.$refs.container;
+          this.containerHeight = element.offsetHeight || 500;
+        }
+        // #endif
+        // #ifndef H5
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select('.u-virtual-list')
+          .boundingClientRect((rect) => {
+            if (rect) {
+              this.containerHeight = rect.height || 500;
+            } else {
+              // 如果无法获取实际高度，使用默认计算
+              this.containerHeight = this.calculateDefaultHeight();
+            }
+          })
+          .exec();
+        // #endif
+      });
+    },
+    // 计算默认高度
+    calculateDefaultHeight() {
+      const height = this.height;
+      if (typeof height === 'number') {
+        return height;
+      }
+      if (typeof height === 'string') {
+        if (height.includes('px')) {
+          return parseInt(height) || 500;
+        } else if (height.includes('vh')) {
+          // 处理视口高度单位
+          const vh = parseInt(height);
+          return isNaN(vh) ? 500 : (vh / 100) * this.getViewportHeight();
+        } else if (height.includes('%')) {
+          // 百分比高度，使用默认值
+          return 500;
+        } else {
+          const num = parseInt(height);
+          return isNaN(num) ? 500 : num;
+        }
+      }
+      return 500;
+    },
+    // 获取视口高度
+    getViewportHeight() {
+      // #ifdef H5
+      return window.innerHeight;
+      // #endif
+      // #ifndef H5
+      try {
+        const res = uni.getSystemInfoSync();
+        return res.windowHeight;
+      } catch (e) {
+        return 600; // 默认值
+      }
+      // #endif
+    },
+    getItemKey(item) {
+      return item[this.keyField] !== undefined ? item[this.keyField] : item._virtualIndex;
+    },
+    // 更新可视项
+    updateVisibleItems() {
+      const index = Math.floor(this.scrollTop / this.itemHeight);
+      this.startIndex = Math.max(0, index);
+    },
+    // 处理滚动
+    handleScroll(e) {
+      const scrollTop = e.detail.scrollTop;
+      this.$emit('update:scrollTop', scrollTop);
+      this.$emit('scroll', scrollTop);
+    },
+    // 处理触摸移动，阻止事件冒泡
+    handleTouchMove(e) {
+      // 阻止触摸移动事件冒泡到父级，防止触发页面滚动
+      e.stopPropagation();
+    },
+    // 获取可见项范围
+    getVisibleRange() {
+      const start = Math.max(0, this.startIndex - Math.floor(this.buffer / 2));
+      const end = Math.min(this.listData.length, start + this.visibleCount);
+      return { start, end };
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-waterfall/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-waterfall {
   /* #ifndef APP-NVUE */
   display: flex;
@@ -44,6 +18,9 @@
   height: 100%;
   /* #endif */
 }
+.u-column:not(:first-child) {
+  margin-left: 10rpx;
+}
 .u-image {
   /* #ifndef APP-NVUE */
   max-width: 100%;

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

@@ -1,5 +1,3 @@
-@import '../../libs/css/components.scss';
-
 .u-waterfall {
   @include flex;
   flex-direction: row;
@@ -14,6 +12,10 @@
   /* #ifndef APP-NVUE */
   height: 100%;
   /* #endif */
+  // 添加列之间的间距
+  &:not(:first-child) {
+    margin-left: 10rpx;
+  }
 }
 
 .u-image {