@10yun/cv-mobile-ui 0.5.50 → 0.5.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@10yun/cv-mobile-ui",
-  "version": "0.5.50",
+  "version": "0.5.52",
   "description": "十云cvjs移动端ui，适用uniapp",
   "author": "10yun",
   "license": "Apache-2.0",
@@ -15,8 +15,7 @@
   "scripts": {},
   "dependencies": {
     "clipboard": "^2.0.11",
-    "crypto-js": "^4.2.0",
-    "dayjs": "^1.11.13"
+    "crypto-js": "^4.2.0"
   },
   "browserslist": [
     "Android >= 7",

package/ui-cv/components/cv-dialog-share/tui-share.vue

@@ -1,13 +1,13 @@
 <template>
   <view class="container">
-    <text class="tui-share-title">分享到</text>
-    <view class="tui-share-list">
-      <view class="tui-share-item" hover-class="tui-hover" :hover-stay-time="150" v-for="(item, index) in shareList" :key="index">
-        <view class="tui-share-icon"><image :src="'/static/images/share/' + item.icon" class="tui-icon-app"></image></view>
-        <text class="tui-share-text">{{ item.name }}</text>
+    <text class="up-share-title">分享到</text>
+    <view class="up-share-list">
+      <view class="up-share-item" hover-class="up-hover" :hover-stay-time="150" v-for="(item, index) in shareList" :key="index">
+        <view class="up-share-icon"><image :src="'/static/images/share/' + item.icon" class="up-icon-app"></image></view>
+        <text class="up-share-text">{{ item.name }}</text>
       </view>
     </view>
-    <view class="tui-btn-cancel" @tap="shareCancel"><text class="tui-btn-text">取消</text></view>
+    <view class="up-btn-cancel" @tap="shareCancel"><text class="up-btn-text">取消</text></view>
   </view>
 </template>
 <script>
@@ -46,7 +46,7 @@ export default {
   background-color: #e8e8e8;
 }
 
-.tui-share-title {
+.up-share-title {
   font-size: 26rpx;
   color: #7e7e7e;
   text-align: center;
@@ -55,7 +55,7 @@ export default {
   padding-bottom: 80rpx;
 }
 
-.tui-share-list {
+.up-share-list {
   width: 750rpx;
   padding-left: 36rpx;
   padding-right: 36rpx;
@@ -64,16 +64,16 @@ export default {
   justify-content: space-between;
 }
 
-.tui-share-item {
+.up-share-item {
   width: 126rpx;
   align-items: center;
 }
 
-.tui-share-item:active {
+.up-share-item:active {
   opacity: 0.6;
 }
 
-.tui-share-icon {
+.up-share-icon {
   align-items: center;
   justify-content: center;
   background-color: #ffffff;
@@ -82,12 +82,12 @@ export default {
   border-radius: 32rpx;
 }
 
-.tui-icon-app {
+.up-icon-app {
   height: 68rpx;
   width: 68rpx;
 }
 
-.tui-share-text {
+.up-share-text {
   font-size: 24rpx;
   line-height: 24rpx;
   color: #7e7e7e;
@@ -95,7 +95,7 @@ export default {
   padding-bottom: 20rpx;
 }
 
-.tui-btn-cancel {
+.up-btn-cancel {
   width: 750rpx;
   height: 100rpx;
   position: fixed;
@@ -109,11 +109,11 @@ export default {
 		border-top-color: #eaeef1; */
 }
 
-.tui-btn-cancle:active {
+.up-btn-cancle:active {
   background-color: #eee;
 }
 
-.tui-btn-text {
+.up-btn-text {
   font-size: 34rpx;
   color: #3e3e3e;
 }

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/ui-fireui/components/{fui-actionsheet/fui-actionsheet.vue → u-action-sheet/u-action-sheet.vue}

@@ -1,15 +1,15 @@
 <template>
   <view @touchmove.stop.prevent>
-    <view class="fui-actionsheet" :class="{ 'fui-actionsheet-show': show, 'fui-actionsheet-radius': radius }">
-      <view class="fui-actionsheet-tips" :style="{ fontSize: size + 'rpx', color: color }" v-if="tips">
+    <view class="up-actionsheet" :class="{ 'up-actionsheet-show': show, 'up-actionsheet-radius': radius }">
+      <view class="up-actionsheet-tips" :style="{ fontSize: size + 'rpx', color: color }" v-if="tips">
         {{ tips }}
       </view>
-      <view :class="[isCancel ? 'fui-operate-box' : '']">
+      <view :class="[isCancel ? 'up-operate-box' : '']">
         <block v-for="(item, index) in itemList" :key="index">
           <view
-            class="fui-actionsheet-btn fui-actionsheet-divider"
-            :class="{ 'fui-btn-last': !isCancel && index == itemList.length - 1 }"
-            hover-class="fui-actionsheet-hover"
+            class="up-actionsheet-btn up-actionsheet-divider"
+            :class="{ 'up-btn-last': !isCancel && index == itemList.length - 1 }"
+            hover-class="up-actionsheet-hover"
             :hover-stay-time="150"
             :data-index="index"
             :style="{ color: item.color || '#2B2B2B' }"
@@ -20,8 +20,8 @@
         </block>
       </view>
       <view
-        class="fui-actionsheet-btn fui-actionsheet-cancel"
-        hover-class="fui-actionsheet-hover"
+        class="up-actionsheet-btn up-actionsheet-cancel"
+        hover-class="up-actionsheet-hover"
         :hover-stay-time="150"
         v-if="isCancel"
         @tap="handleClickCancel"
@@ -29,7 +29,7 @@
         取消
       </view>
     </view>
-    <view class="fui-actionsheet-mask" :class="{ 'fui-mask-show': show }" @tap="handleClickMask"></view>
+    <view class="up-actionsheet-mask" :class="{ 'up-mask-show': show }" @tap="handleClickMask"></view>
   </view>
 </template>
 
@@ -105,7 +105,7 @@ export default {
 </script>
 
 <style scoped>
-.fui-actionsheet {
+.up-actionsheet {
   width: 100%;
   position: fixed;
   left: 0;
@@ -120,18 +120,18 @@ export default {
   min-height: 100rpx;
 }
 
-.fui-actionsheet-radius {
+.up-actionsheet-radius {
   border-top-left-radius: 20rpx;
   border-top-right-radius: 20rpx;
   overflow: hidden;
 }
 
-.fui-actionsheet-show {
+.up-actionsheet-show {
   transform: translate3d(0, 0, 0);
   visibility: visible;
 }
 
-.fui-actionsheet-tips {
+.up-actionsheet-tips {
   width: 100%;
   padding: 40rpx 60rpx;
   box-sizing: border-box;
@@ -142,11 +142,11 @@ export default {
   justify-content: center;
 }
 
-.fui-operate-box {
+.up-operate-box {
   padding-bottom: 12rpx;
 }
 
-.fui-actionsheet-btn {
+.up-actionsheet-btn {
   width: 100%;
   height: 100rpx;
   background-color: #fff;
@@ -158,11 +158,11 @@ export default {
   position: relative;
 }
 
-.fui-btn-last {
+.up-btn-last {
   padding-bottom: env(safe-area-inset-bottom);
 }
 
-.fui-actionsheet-divider::before {
+.up-actionsheet-divider::before {
   content: '';
   width: 100%;
   border-top: 1rpx solid #e7e7e7;
@@ -173,16 +173,16 @@ export default {
   transform: scaleY(0.5);
 }
 
-.fui-actionsheet-cancel {
+.up-actionsheet-cancel {
   color: #1a1a1a;
   padding-bottom: env(safe-area-inset-bottom);
 }
 
-.fui-actionsheet-hover {
+.up-actionsheet-hover {
   background-color: #f7f7f9;
 }
 
-.fui-actionsheet-mask {
+.up-actionsheet-mask {
   position: fixed;
   top: 0;
   left: 0;
@@ -195,7 +195,7 @@ export default {
   visibility: hidden;
 }
 
-.fui-mask-show {
+.up-mask-show {
   opacity: 1;
   visibility: visible;
 }

package/ui-fireui/components/{fui-alert/fui-alert.vue → u-alert/u-alert.vue}

@@ -1,20 +1,20 @@
 <template>
   <view>
-    <view class="fui-alert-class fui-alert-box" :class="[show ? 'fui-alert-show' : '']">
-      <view class="fui-alert-content" :style="{ fontSize: size + 'rpx', color: color }">
+    <view class="up-alert-class up-alert-box" :class="[show ? 'up-alert-show' : '']">
+      <view class="up-alert-content" :style="{ fontSize: size + 'rpx', color: color }">
         <slot></slot>
       </view>
       <view
-        class="fui-alert-btn"
+        class="up-alert-btn"
         :style="{ color: btnColor }"
-        hover-class="fui-alert-btn-hover"
+        hover-class="up-alert-btn-hover"
         :hover-stay-time="150"
         @tap.stop="handleClick"
       >
         {{ btnText }}
       </view>
     </view>
-    <view class="fui-alert-mask" :class="[show ? 'fui-alert-mask-show' : '']" @tap.stop="handleClickCancel"></view>
+    <view class="up-alert-mask" :class="[show ? 'up-alert-mask-show' : '']" @tap.stop="handleClickCancel"></view>
   </view>
 </template>
 
@@ -66,7 +66,7 @@ export default {
 </script>
 
 <style scoped>
-.fui-alert-box {
+.up-alert-box {
   position: fixed;
   width: 560rpx;
   left: 50%;
@@ -80,12 +80,12 @@ export default {
   z-index: 99998;
 }
 
-.fui-alert-show {
+.up-alert-show {
   transform: translate(-50%, -50%) scale(1);
   opacity: 1;
 }
 
-.fui-alert-mask {
+.up-alert-mask {
   position: fixed;
   top: 0;
   left: 0;
@@ -98,12 +98,12 @@ export default {
   visibility: hidden;
 }
 
-.fui-alert-mask-show {
+.up-alert-mask-show {
   visibility: visible;
   opacity: 1;
 }
 
-.fui-alert-content {
+.up-alert-content {
   text-align: center;
   color: #333333;
   padding: 98rpx 48rpx 92rpx 48rpx;
@@ -111,7 +111,7 @@ export default {
   word-break: break-all;
 }
 
-.fui-alert-btn {
+.up-alert-btn {
   width: 100%;
   height: 90rpx;
   display: flex;
@@ -124,11 +124,11 @@ export default {
   line-height: 32rpx;
 }
 
-.fui-alert-btn-hover {
+.up-alert-btn-hover {
   background-color: #f7f7f7;
 }
 
-.fui-alert-btn::before {
+.up-alert-btn::before {
   width: 100%;
   content: '';
   position: absolute;

package/ui-fireui/components/{fui-badge/fui-badge.vue → u-badge/u-badge.vue}

@@ -1,6 +1,6 @@
 <template>
   <view
-    :class="[dot ? 'fui-badge-dot' : 'fui-badge', 'fui-' + type, !dot ? 'fui-badge-scale' : '']"
+    :class="[dot ? 'up-badge-dot' : 'up-badge', 'up-' + type, !dot ? 'up-badge-scale' : '']"
     :style="{ top: top, right: right, position: absolute ? 'absolute' : 'static', transform: getStyle, margin: margin }"
     @tap="handleClick"
   >
@@ -66,62 +66,62 @@ export default {
 <style scoped>
 /* color start*/
 
-.fui-primary {
+.up-primary {
   background-color: #5677fc;
   color: #fff;
 }
 
-.fui-danger {
+.up-danger {
   background-color: #ed3f14;
   color: #fff;
 }
 
-.fui-red {
+.up-red {
   background-color: #f74d54;
   color: #fff;
 }
 
-.fui-warning {
+.up-warning {
   background-color: #ff7900;
   color: #fff;
 }
 
-.fui-green {
+.up-green {
   background-color: #19be6b;
   color: #fff;
 }
 
-.fui-white {
+.up-white {
   background-color: #fff;
   color: #333;
 }
 
-.fui-white_red {
+.up-white_red {
   background-color: #fff;
   color: #f74d54;
 }
 
-.fui-white_primary {
+.up-white_primary {
   background-color: #fff;
   color: #5677fc;
 }
 
-.fui-white_green {
+.up-white_green {
   background-color: #fff;
   color: #19be6b;
 }
 
-.fui-white_warning {
+.up-white_warning {
   background-color: #fff;
   color: #ff7900;
 }
 
-.fui-black {
+.up-black {
   background-color: #000;
   color: #fff;
 }
 
-.fui-gray {
+.up-gray {
   background-color: #ededed;
   color: #999;
 }
@@ -130,13 +130,13 @@ export default {
 
 /* badge start*/
 
-.fui-badge-dot {
+.up-badge-dot {
   height: 8px;
   width: 8px;
   border-radius: 50%;
 }
 
-.fui-badge {
+.up-badge {
   font-size: 24rpx;
   line-height: 24rpx;
   height: 36rpx;
@@ -150,7 +150,7 @@ export default {
   z-index: 10;
 }
 
-.fui-badge-scale {
+.up-badge-scale {
   transform-origin: center center;
 }