@10yun/cv-mobile-ui 0.5.49 → 0.5.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@10yun/cv-mobile-ui",
-  "version": "0.5.49",
+  "version": "0.5.51",
   "description": "十云cvjs移动端ui，适用uniapp",
   "author": "10yun",
   "license": "Apache-2.0",

package/ui-cv/components/cv-mask-png/cv-mask-png.vue

@@ -0,0 +1,27 @@
+<template>
+  <view class="cv-mask-icon" :style="iconStyle" @tap="$emit('click', $event)"></view>
+</template>
+<script>
+import maskMixin from '../cv-mask-svg/mixins.js';
+export default {
+  name: 'cvMaskPng',
+  mixins: [maskMixin],
+  data() {
+    return {
+      iconType: 'png'
+    };
+  }
+};
+</script>
+<style scoped>
+.cv-mask-icon {
+  /* 基础样式重置 */
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+}
+/* 悬浮颜色修改：直接切换背景色（精准高效） */
+.cv-mask-icon:hover {
+  background-color: v-bind('hoverColor') !important;
+}
+</style>

package/ui-cv/components/cv-mask-svg/cv-mask-svg.vue

@@ -0,0 +1,22 @@
+<template>
+  <view class="mask-icon" :style="iconStyle" @tap="$emit('click', $event)"></view>
+</template>
+<script>
+import maskMixin from './mixins.js';
+export default {
+  name: 'cvMaskSvg',
+  mixins: [maskMixin]
+};
+</script>
+<style scoped>
+.cv-mask-icon {
+  /* 基础样式重置 */
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+}
+/* 悬浮颜色修改：直接切换背景色（精准高效） */
+.cv-mask-icon:hover {
+  background-color: v-bind('hoverColor') !important;
+}
+</style>

package/ui-cv/components/cv-mask-svg/mixins.js

@@ -0,0 +1,131 @@
+export default {
+  emits: ['click'],
+  props: {
+    // 图标类型（对应远程 SVG 遮罩文件名）
+    name: {
+      type: String,
+      required: true,
+      validator: (v) => v.trim().length > 0
+    },
+    // 图标大小（小程序推荐rpx）
+    size: {
+      type: [Number, String],
+      default: 24
+    },
+    // 图标颜色（精准控制，无需滤镜）
+    color: {
+      type: String,
+      default: '#333333'
+    },
+    // 悬浮颜色
+    hoverColor: {
+      type: String,
+      default: ''
+    },
+    // 开启悬浮效果
+    hoverEffect: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      iconType: 'svg'
+    };
+  },
+  computed: {
+    // 核心修改：将 图片资源 地址替换为 远程 地址（远程 CDN 存放 PNG、SVG 遮罩）
+    maskIconUrl() {
+      // 远程 CDN 根地址（可抽离为全局常量）
+      const cdnBase = 'https://10ui.cn/icons';
+      let processedName = this.name || '';
+      let iconPath = '';
+
+      // 步骤1：驼峰命名转连字符分隔（核心：匹配大写字母，添加前置-后转小写）
+      // 正则说明：
+      // [A-Z] 匹配所有大写字母（驼峰的标识）
+      // 替换为：'-' + 匹配到的大写字母（后续步骤2统一转小写，此处可先转小写也可后转）
+      processedName = processedName.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+      // 处理特殊情况：若字符串以-开头（如原名称以大写字母开头，如 Avatar → -avatar），去除首尾多余-
+      processedName = processedName.replace(/^-|-$/g, '');
+
+      // 步骤2：全部转换为小写（兼容混合大小写场景，如 avatar-Filled → avatar-filled）
+      processedName = processedName.toLowerCase().trim();
+
+      // 步骤3：定义正则，匹配末尾的 -filled（确保是整体，不分割）
+      const filledSuffixReg = /-filled$/;
+      const isFilledSuffix = filledSuffixReg.test(processedName);
+
+      if (isFilledSuffix) {
+        // 情况A：末尾带 -filled，需要拆分非-filled部分，保留-filled为整体
+        // 步骤：先截取除了末尾-filled之外的字符串，再处理分割，最后拼接-filled
+        const withoutFilled = processedName.slice(0, processedName.lastIndexOf('-filled'));
+        if (withoutFilled) {
+          // 非-filled部分有内容（如 xxxx-avatar-filled → withoutFilled = xxxx-avatar）
+          // 对非-filled部分按-分割，过滤空元素后拼接为路径
+          const pathArr = withoutFilled.split('-').filter((item) => item.trim().length > 0);
+          // 拼接：非-filled部分路径 + / + filled整体（如 xxxx/avatar + / + filled → xxxx/avatar-filled）
+          iconPath = `${pathArr.join('/')}-filled`;
+        } else {
+          // 非-filled部分无内容（如直接是 avatar-filled → withoutFilled 为空）
+          iconPath = processedName; // 直接使用整体，如 avatar-filled
+        }
+      } else {
+        // 情况B：末尾不带 -filled，正常按-分割拼接
+        if (processedName.includes('-')) {
+          const pathArr = processedName.split('-').filter((item) => item.trim().length > 0);
+          iconPath = pathArr.join('/');
+        } else {
+          iconPath = processedName;
+        }
+      }
+
+      // 处理 iconType，兼容大小写+默认值（保留原有逻辑）
+      const targetIconType = this.iconType?.toLowerCase() || 'png';
+
+      // 拼接最终 URL
+      switch (targetIconType) {
+        case 'svg':
+          return `${cdnBase}/${iconPath}.svg`;
+        case 'png':
+          return `${cdnBase}/png/${iconPath}.png`;
+        default:
+          return `${cdnBase}/png/${iconPath}.png`;
+      }
+    },
+    // 处理图标大小
+    iconSize() {
+      if (typeof this.size === 'string' && (this.size.includes('px') || this.size.includes('rpx'))) {
+        return this.size;
+      }
+      return `${parseFloat(this.size)}px`;
+    },
+    // 核心样式：mask-image + 背景色（控制颜色）
+    iconStyle() {
+      const baseStyle = {
+        // 图标大小：宽高一致
+        width: this.iconSize,
+        height: this.iconSize,
+        // 图标颜色：通过背景色控制（精准无偏差）
+        backgroundColor: this.color,
+        // 遮罩层： 引用远程 图片，保留 -webkit- 前缀兼容小程序
+        WebkitMaskImage: `url(${this.maskIconUrl})`,
+        maskImage: `url(${this.maskIconUrl})`,
+        // 遮罩属性： 保持形状完整，不拉伸
+        WebkitMaskSize: 'contain',
+        maskSize: 'contain',
+        WebkitMaskRepeat: 'no-repeat',
+        maskRepeat: 'no-repeat',
+        WebkitMaskPosition: 'center',
+        maskPosition: 'center'
+      };
+
+      // 悬浮过渡效果
+      if (this.hoverEffect) {
+        baseStyle.transition = 'background-color 0.2s ease';
+      }
+
+      return baseStyle;
+    }
+  }
+};

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

@@ -83,5 +83,27 @@ export default {
 };
 </script>
 <style scoped>
-@import './style.css';
+/* 不能引入，不然v-bind无法生效 @import './style.css'; */
+
+.u-grid {
+  /* #ifdef APP-NVUE */
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: block;
+  /* #endif */
+  justify-content: center;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  /* #ifndef APP-NVUE */
+  display: grid !important;
+  grid-gap: v-bind(gap);
+  grid-template-columns: repeat(v-bind(col), 1fr);
+  /* #endif */
+}
 </style>

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

@@ -65,6 +65,7 @@
 import { props } from './props';
 import { mpMixin } from '../../libs/mixin/mpMixin';
 import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, addStyle, getWindowInfo, getPx } from '../../libs/function/index';
 /**
  * Navbar 自定义导航栏
  * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，自动状态栏高度、小程序胶囊预留位置等，一般建议使用uni-app带的导航栏。