uview-pro 0.2.3 → 0.3.0

package/changelog.md

@@ -1,3 +1,55 @@
+## 0.3.0（2025-10-12）
+
+### 📝 Documentation | 文档
+
+- 更新开源捐赠图片 ([8eb0f00](https://github.com/anyup/uView-Pro/commit/8eb0f00ed5308cd1c3574b66dc752b050bbfcb70))
+- update readme ([c93cdcb](https://github.com/anyup/uView-Pro/commit/c93cdcb1278040b8c5b6232b0d7928edad22af5d))
+
+### ✨ Features | 新功能
+
+- **component-relation:** 添加组件关系管理 Hooks 工具，用于完全替换 provide/inject，全平台兼容 ([927be95](https://github.com/anyup/uView-Pro/commit/927be95e8b1c1bd5e05cf91c00888c314f6431e8))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **components:** 重构复选框checkbox和手风琴collapse组件，使用新版组件关系管理工具，优化兼容性 ([a6b2e86](https://github.com/anyup/uView-Pro/commit/a6b2e86394193a1ff5b58df045cba5518b322d38))
+- **u-radio:** 修复单选框组件，兼容微信、头条小程序 ([6c409dc](https://github.com/anyup/uView-Pro/commit/6c409dc2c0ed116abcdde23a366c7f575fd56a24))
+- **styles:** 优化 u-collapse-item 和 u-text 组件的样式合并逻辑 ([d4436c5](https://github.com/anyup/uView-Pro/commit/d4436c51dc2ddb27d70eeba4cad804504da40013))
+- **layout:** 优化布局组件兼容性 ([285b7a7](https://github.com/anyup/uView-Pro/commit/285b7a73fcd9f8a21521be0d7e7a83690495dc4b))
+- **u-form:** 重构表单组件的错误处理和样式，增强兼容性，支持多种小程序平台 ([587f87d](https://github.com/anyup/uView-Pro/commit/587f87d1b8d3dd6cd98e583b2640bef61bd8f119))
+- **components:** 所有组件允许接受外部样式，允许样式穿透 ([e736e90](https://github.com/anyup/uView-Pro/commit/e736e9014e36c995ba434a56a6ccfee01c56ad35))
+- **u-grid:** 重构宫格组件，支持自定义样式 ([d999ece](https://github.com/anyup/uView-Pro/commit/d999eceed2447ddc99a62a6bdcc57deaa1d1b515))
+- **component-relation:** 优化子组件挂载时连接父组件的逻辑 ([2d038f2](https://github.com/anyup/uView-Pro/commit/2d038f2721e91db2f1773079341473505f2f6836))
+- **u-dropdown:** 重构下拉菜单组件，兼容多平台 ([393caa5](https://github.com/anyup/uView-Pro/commit/393caa57910e9a63484e0c9e852c634fc15ef606))
+- **components:** 优化部分组件中的 customStyle 属性及样式处理 ([3506a5a](https://github.com/anyup/uView-Pro/commit/3506a5a055a7a106311351b4b8b90127b019a061))
+- **components:** 统一使用 customClass 和 customStyle 属性，统一处理组件样式和类名 ([d400997](https://github.com/anyup/uView-Pro/commit/d40099782b97011edc04c5040342b585b8f18fcd))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-collapse:** 修复手风琴模式和非手风琴模式的处理回调时，index错误的问题 ([a5882eb](https://github.com/anyup/uView-Pro/commit/a5882eb17d87fee4e06448ecc353bf4237f25d52))
+
+## 0.2.4（2025-10-08）
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **i18n:** 修复切换中英文切换失效问题 ([d61d817](https://github.com/anyup/uView-Pro/commit/d61d81790aecd774435999c9ab8c3672a2df38ad))
+- **style:** 修复文本溢出样式u-line-1生成错误问题 ([5d2bf3c](https://github.com/anyup/uView-Pro/commit/5d2bf3ca080f8c5bc9fe40bb1f421c28f7ee8017))
+
+### ✨ Features | 新功能
+
+- **calendar:** 增加日历组件的页面显示模式 ([af13724](https://github.com/anyup/uView-Pro/commit/af137241e644a5f1e99b07e580c8d3aca9250e9e))
+
+### ♻️ Code Refactoring | 代码重构
+
+- 优化代码格式和可读性 ([2e338d5](https://github.com/anyup/uView-Pro/commit/2e338d5cb2dbf3ce42f38c9581c04164b852f992))
+- **useComponent:** 重构组件事件处理并添加热更新支持 ([80f7e5e](https://github.com/anyup/uView-Pro/commit/80f7e5efaa2b2ab1668969072cb6d18652d00cc2))
+- **u-collapse:** 重构 u-collapse 组件中的事件处理逻辑 ([6aadfd1](https://github.com/anyup/uView-Pro/commit/6aadfd16d5aefd45f022c8da1612ba1921942f6e))
+- **u-checkbox:** 优化复选框组件的父组件事件处理 ([3b597ea](https://github.com/anyup/uView-Pro/commit/3b597ea2833ca71e5752d097b2f07c143869f0d2))
+- **hooks:** 优化 useComponent 以支持页面级别组件关系管理 ([429192f](https://github.com/anyup/uView-Pro/commit/429192f66ba59a26acb957acfc01d5f318d43fb6))
+
+### 📝 Documentation | 文档
+
+- 更新微信交流群图片链接 ([e67588a](https://github.com/anyup/uView-Pro/commit/e67588ae392d5150ec4d271ce45e65fe32372460))
+
 ## 0.2.3（2025-10-06）
 
 ### 🐛 Bug Fixes | Bug 修复

package/components/u-action-sheet/types.ts

@@ -1,11 +1,13 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import type { ActionSheetItem, ActionSheetTips } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * actionSheet 操作菜单
  * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
  */
 export const ActionSheetProps = {
+    ...baseProps,
     /** 点击遮罩是否可以关闭actionsheet */
     maskCloseAble: { type: Boolean, default: true },
     /** 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx */

package/components/u-action-sheet/u-action-sheet.vue

@@ -9,6 +9,8 @@
         :safeAreaInsetBottom="safeAreaInsetBottom"
         @close="popupClose"
         :z-index="uZIndex"
+        :custom-class="customClass"
+        :custom-style="customStyle"
     >
         <view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
             {{ tips.text }}
@@ -27,21 +29,37 @@
             </view>
         </block>
         <view class="u-gab" v-if="cancelBtn"> </view>
-        <view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class" :hover-stay-time="150" v-if="cancelBtn" @tap="close">{{
-            cancelText
-        }}</view>
+        <view
+            @touchmove.stop.prevent
+            class="u-actionsheet-cancel u-action-sheet-item"
+            hover-class="u-hover-class"
+            :hover-stay-time="150"
+            v-if="cancelBtn"
+            @tap="close"
+        >
+            {{ cancelText }}
+        </view>
     </u-popup>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-action-sheet',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 import { $u } from '../..';
 import { ActionSheetProps } from './types';
 
-defineOptions({
-    name: 'u-action-sheet'
-});
-
 /**
  * actionSheet 操作菜单
  * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。

package/components/u-alert-tips/types.ts

@@ -1,11 +1,13 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import type { ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * alertTips 警告提示
  * @description 警告提示，展现需要关注的信息
  */
 export const AlertTipsProps = {
+    ...baseProps,
     /** 显示文字 */
     title: { type: String, default: '' },
     /** 主题，success/warning/info/error */

package/components/u-alert-tips/u-alert-tips.vue

@@ -2,14 +2,31 @@
     <view
         class="u-alert-tips"
         v-if="show"
-        :class="[!show ? 'u-close-alert-tips' : '', type ? 'u-alert-tips--bg--' + type + '-light' : '', type ? 'u-alert-tips--border--' + type + '-disabled' : '']"
-        :style="{
-            backgroundColor: bgColor,
-            borderColor: borderColor
-        }"
+        :class="[
+            !show ? 'u-close-alert-tips' : '',
+            type ? 'u-alert-tips--bg--' + type + '-light' : '',
+            type ? 'u-alert-tips--border--' + type + '-disabled' : '',
+            customClass
+        ]"
+        :style="
+            $u.toStyle(
+                {
+                    backgroundColor: bgColor,
+                    borderColor: borderColor
+                },
+                customStyle
+            )
+        "
     >
         <view class="u-icon-wrap">
-            <u-icon v-if="showIcon" :name="uIconName" :size="description ? 40 : 32" class="u-icon" :color="uIconType" :custom-style="iconStyle"></u-icon>
+            <u-icon
+                v-if="showIcon"
+                :name="uIconName"
+                :size="description ? 40 : 32"
+                class="u-icon"
+                :color="uIconType"
+                :custom-style="iconStyle"
+            ></u-icon>
         </view>
         <view class="u-alert-content" @tap.stop="onClick">
             <view class="u-alert-title" :style="uTitleStyle">
@@ -44,16 +61,25 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-alert-tips',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import uIcon from '../u-icon/u-icon.vue';
 import { computed } from 'vue';
 import { $u } from '../..';
 import { AlertTipsProps } from './types';
 
-defineOptions({
-    name: 'u-alert-tips'
-});
-
 /**
  * alertTips 警告提示
  * @description 警告提示，展现需要关注的信息

package/components/u-avatar/types.ts

@@ -1,8 +1,10 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import type { ImgMode } from '../../types/global';
+import { baseProps } from '../common/props';
 
 // u-avatar 组件 props
 export const AvatarProps = {
+    ...baseProps,
     /** 背景颜色 */
     bgColor: { type: String, default: 'transparent' },
     /** 头像路径 */

package/components/u-avatar/u-avatar.vue

@@ -1,6 +1,13 @@
 <template>
-    <view class="u-avatar" :style="wrapStyle" @tap="onClick">
-        <image @error="onLoadError" :style="imgStyle" class="u-avatar__img" v-if="!uText && avatar" :src="avatar" :mode="imgMode"></image>
+    <view class="u-avatar" :class="customClass" :style="$u.toStyle(wrapStyle, customStyle)" @tap="onClick">
+        <image
+            @error="onLoadError"
+            :style="imgStyle"
+            class="u-avatar__img"
+            v-if="!uText && avatar"
+            :src="avatar"
+            :mode="imgMode"
+        ></image>
         <text class="u-line-1" v-else-if="uText" :style="{ fontSize: '38rpx' }">{{ uText }}</text>
         <slot v-else></slot>
         <view class="u-avatar__sex" v-if="showSex" :class="['u-avatar__sex--' + sexIcon]" :style="uSexStyle">
@@ -12,13 +19,23 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-avatar',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
 import { AvatarProps } from './types';
-
-defineOptions({
-    name: 'u-avatar'
-});
+import { $u } from '../..';
 
 let base64Avatar =
     'data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYG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';
@@ -69,7 +86,14 @@ watch(
  */
 const wrapStyle = computed(() => {
     let style: Record<string, string> = {};
-    style.height = props.size === 'large' ? '120rpx' : props.size === 'default' ? '90rpx' : props.size === 'mini' ? '70rpx' : props.size + 'rpx';
+    style.height =
+        props.size === 'large'
+            ? '120rpx'
+            : props.size === 'default'
+              ? '90rpx'
+              : props.size === 'mini'
+                ? '70rpx'
+                : props.size + 'rpx';
     style.width = style.height;
     style.flex = `0 0 ${style.height}`;
     style.backgroundColor = props.bgColor;

package/components/u-avatar-cropper/u-avatar-cropper.vue

@@ -37,6 +37,19 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-avatar-cropper',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 // @ts-nocheck
 import { ref, reactive, onMounted } from 'vue';
@@ -45,8 +58,6 @@ import { $u } from '../..';
 import WeCropper from './weCropper';
 import { AvatarCropperProps } from './types';
 
-defineOptions({ name: 'u-avatar-cropper' });
-
 /**
  * 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
  * mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"

package/components/u-avatar-cropper/weCropper.js

@@ -240,7 +240,14 @@
         self.deviceRadio = windowWidth / 750;
     }
 
-    var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+    var commonjsGlobal =
+        typeof window !== 'undefined'
+            ? window
+            : typeof global !== 'undefined'
+              ? global
+              : typeof self !== 'undefined'
+                ? self
+                : {};
 
     function createCommonjsModule(fn, module) {
         return (
@@ -478,14 +485,22 @@
                     buffer = a + b + c;
                     // Turn the 24 bits into four chunks of 6 bits each, and append the
                     // matching character for each of them to the output.
-                    output += TABLE.charAt((buffer >> 18) & 0x3f) + TABLE.charAt((buffer >> 12) & 0x3f) + TABLE.charAt((buffer >> 6) & 0x3f) + TABLE.charAt(buffer & 0x3f);
+                    output +=
+                        TABLE.charAt((buffer >> 18) & 0x3f) +
+                        TABLE.charAt((buffer >> 12) & 0x3f) +
+                        TABLE.charAt((buffer >> 6) & 0x3f) +
+                        TABLE.charAt(buffer & 0x3f);
                 }
 
                 if (padding == 2) {
                     a = input.charCodeAt(position) << 8;
                     b = input.charCodeAt(++position);
                     buffer = a + b;
-                    output += TABLE.charAt(buffer >> 10) + TABLE.charAt((buffer >> 4) & 0x3f) + TABLE.charAt((buffer << 2) & 0x3f) + '=';
+                    output +=
+                        TABLE.charAt(buffer >> 10) +
+                        TABLE.charAt((buffer >> 4) & 0x3f) +
+                        TABLE.charAt((buffer << 2) & 0x3f) +
+                        '=';
                 } else if (padding == 1) {
                     buffer = input.charCodeAt(position);
                     output += TABLE.charAt(buffer >> 2) + TABLE.charAt((buffer << 4) & 0x3f) + '==';
@@ -701,7 +716,10 @@
             var strPixelRow = '';
             for (var x = 0; x < biWidth; x++) {
                 var iOffsetX = x << 2;
-                strPixelRow += fromCharCode(aImgData[iOffsetY + iOffsetX + 2]) + fromCharCode(aImgData[iOffsetY + iOffsetX + 1]) + fromCharCode(aImgData[iOffsetY + iOffsetX]);
+                strPixelRow +=
+                    fromCharCode(aImgData[iOffsetY + iOffsetX + 2]) +
+                    fromCharCode(aImgData[iOffsetY + iOffsetX + 1]) +
+                    fromCharCode(aImgData[iOffsetY + iOffsetX]);
             }
 
             for (var c = 0; c < iPadding; c++) {
@@ -881,7 +899,13 @@
             if (tools_10(customOptions) && customOptions.original) {
                 // original mode
                 task = function () {
-                    self.targetCtx.drawImage(self.croperTarget, self.imgLeft * pixelRatio, self.imgTop * pixelRatio, self.scaleWidth * pixelRatio, self.scaleHeight * pixelRatio);
+                    self.targetCtx.drawImage(
+                        self.croperTarget,
+                        self.imgLeft * pixelRatio,
+                        self.imgTop * pixelRatio,
+                        self.scaleWidth * pixelRatio,
+                        self.scaleHeight * pixelRatio
+                    );
 
                     canvasOptions = {
                         canvasId: targetId,
@@ -905,7 +929,9 @@
                         fn = customOptions;
                     }
 
-                    var arg = canvasOptions.componentContext ? [canvasOptions, canvasOptions.componentContext] : [canvasOptions];
+                    var arg = canvasOptions.componentContext
+                        ? [canvasOptions, canvasOptions.componentContext]
+                        : [canvasOptions];
 
                     return canvasToTempFilePath.apply(null, arg);
                 })
@@ -1094,9 +1120,11 @@
          * @param imgTop 图片左上角纵坐标值
          */
         self.outsideBound = function (imgLeft, imgTop) {
-            self.imgLeft = imgLeft >= x ? x : self.scaleWidth + imgLeft - x <= width ? x + width - self.scaleWidth : imgLeft;
+            self.imgLeft =
+                imgLeft >= x ? x : self.scaleWidth + imgLeft - x <= width ? x + width - self.scaleWidth : imgLeft;
 
-            self.imgTop = imgTop >= y ? y : self.scaleHeight + imgTop - y <= height ? y + height - self.scaleHeight : imgTop;
+            self.imgTop =
+                imgTop >= y ? y : self.scaleHeight + imgTop - y <= height ? y + height - self.scaleHeight : imgTop;
         };
 
         /**

package/components/u-avatar-cropper/weCropper.ts

@@ -482,14 +482,22 @@ var base64 = createCommonjsModule(function (module, exports) {
                 buffer = a + b + c;
                 // Turn the 24 bits into four chunks of 6 bits each, and append the
                 // matching character for each of them to the output.
-                output += TABLE.charAt((buffer >> 18) & 0x3f) + TABLE.charAt((buffer >> 12) & 0x3f) + TABLE.charAt((buffer >> 6) & 0x3f) + TABLE.charAt(buffer & 0x3f);
+                output +=
+                    TABLE.charAt((buffer >> 18) & 0x3f) +
+                    TABLE.charAt((buffer >> 12) & 0x3f) +
+                    TABLE.charAt((buffer >> 6) & 0x3f) +
+                    TABLE.charAt(buffer & 0x3f);
             }
 
             if (padding == 2) {
                 a = input.charCodeAt(position) << 8;
                 b = input.charCodeAt(++position);
                 buffer = a + b;
-                output += TABLE.charAt(buffer >> 10) + TABLE.charAt((buffer >> 4) & 0x3f) + TABLE.charAt((buffer << 2) & 0x3f) + '=';
+                output +=
+                    TABLE.charAt(buffer >> 10) +
+                    TABLE.charAt((buffer >> 4) & 0x3f) +
+                    TABLE.charAt((buffer << 2) & 0x3f) +
+                    '=';
             } else if (padding == 1) {
                 buffer = input.charCodeAt(position);
                 output += TABLE.charAt(buffer >> 2) + TABLE.charAt((buffer << 4) & 0x3f) + '==';
@@ -705,7 +713,10 @@ function genBitmapImage(oData: any) {
         var strPixelRow = '';
         for (var x = 0; x < biWidth; x++) {
             var iOffsetX = x << 2;
-            strPixelRow += fromCharCode(aImgData[iOffsetY + iOffsetX + 2]) + fromCharCode(aImgData[iOffsetY + iOffsetX + 1]) + fromCharCode(aImgData[iOffsetY + iOffsetX]);
+            strPixelRow +=
+                fromCharCode(aImgData[iOffsetY + iOffsetX + 2]) +
+                fromCharCode(aImgData[iOffsetY + iOffsetX + 1]) +
+                fromCharCode(aImgData[iOffsetY + iOffsetX]);
         }
 
         for (var c = 0; c < iPadding; c++) {
@@ -885,7 +896,13 @@ function methods(this: any) {
         if (tools_10(customOptions) && customOptions.original) {
             // original mode
             task = function () {
-                self.targetCtx.drawImage(self.croperTarget, self.imgLeft * pixelRatio, self.imgTop * pixelRatio, self.scaleWidth * pixelRatio, self.scaleHeight * pixelRatio);
+                self.targetCtx.drawImage(
+                    self.croperTarget,
+                    self.imgLeft * pixelRatio,
+                    self.imgTop * pixelRatio,
+                    self.scaleWidth * pixelRatio,
+                    self.scaleHeight * pixelRatio
+                );
 
                 canvasOptions = {
                     canvasId: targetId,
@@ -909,7 +926,9 @@ function methods(this: any) {
                     fn = customOptions;
                 }
 
-                var arg = canvasOptions.componentContext ? [canvasOptions, canvasOptions.componentContext] : [canvasOptions];
+                var arg = canvasOptions.componentContext
+                    ? [canvasOptions, canvasOptions.componentContext]
+                    : [canvasOptions];
 
                 return canvasToTempFilePath.apply(null, arg);
             })
@@ -1098,9 +1117,11 @@ function cut(this: any) {
      * @param imgTop 图片左上角纵坐标值
      */
     self.outsideBound = function (imgLeft: any, imgTop: any) {
-        self.imgLeft = imgLeft >= x ? x : self.scaleWidth + imgLeft - x <= width ? x + width - self.scaleWidth : imgLeft;
+        self.imgLeft =
+            imgLeft >= x ? x : self.scaleWidth + imgLeft - x <= width ? x + width - self.scaleWidth : imgLeft;
 
-        self.imgTop = imgTop >= y ? y : self.scaleHeight + imgTop - y <= height ? y + height - self.scaleHeight : imgTop;
+        self.imgTop =
+            imgTop >= y ? y : self.scaleHeight + imgTop - y <= height ? y + height - self.scaleHeight : imgTop;
     };
 
     /**

package/components/u-back-top/types.ts

@@ -1,8 +1,10 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import type { Shape } from '../../types/global';
+import { baseProps } from '../common/props';
 
 // u-back-top 组件 props
 export const BackTopProps = {
+    ...baseProps,
     /** 返回顶部的形状，circle-圆形，square-方形 */
     mode: { type: String as PropType<Shape>, default: 'circle' },
     /** 自定义图标 */
@@ -28,11 +30,6 @@ export const BackTopProps = {
             color: '#909399',
             fontSize: '38rpx'
         })
-    },
-    /** 整个组件的样式 */
-    customStyle: {
-        type: Object as PropType<Record<string, any>>,
-        default: () => ({})
     }
 };
 

package/components/u-back-top/u-back-top.vue

@@ -2,17 +2,19 @@
     <view
         @tap="backToTop"
         class="u-back-top"
-        :class="['u-back-top--mode--' + mode]"
-        :style="[
-            {
-                bottom: bottom + 'rpx',
-                right: right + 'rpx',
-                borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
-                zIndex: uZIndex,
-                opacity: opacity
-            },
-            customStyle
-        ]"
+        :class="['u-back-top--mode--' + mode, customClass]"
+        :style="
+            $u.toStyle(
+                {
+                    bottom: bottom + 'rpx',
+                    right: right + 'rpx',
+                    borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
+                    zIndex: uZIndex,
+                    opacity: opacity
+                },
+                customStyle
+            )
+        "
     >
         <view class="u-back-top__content" v-if="!slots.default">
             <u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon>
@@ -24,13 +26,23 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-back-top',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed, watch, useSlots } from 'vue';
 import { BackTopProps } from './types';
-
-defineOptions({
-    name: 'u-back-top'
-});
+import { $u } from '../../';
 
 /**
  * back-top 返回顶部按钮
@@ -63,7 +75,10 @@ const uZIndex = ref(-1);
  */
 const showBackTop = computed(() => {
     // uni.upx2px 用于将 rpx 转为 px
-    return Number(props.scrollTop) > (typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px(Number(props.top)) : Number(props.top));
+    return (
+        Number(props.scrollTop) >
+        (typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px(Number(props.top)) : Number(props.top))
+    );
     // #else
     // return Number(props.scrollTop) > Number(props.top)
 });

package/components/u-badge/types.ts

@@ -1,5 +1,6 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import type { BadgeSize, ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * badge 角标类型定义
@@ -7,6 +8,7 @@ import type { BadgeSize, ThemeType } from '../../types/global';
  */
 
 export const BadgeProps = {
+    ...baseProps,
     /** 使用预设的背景颜色 primary,warning,success,error,info */
     type: { type: String as PropType<ThemeType>, default: 'error' },
     /** Badge的尺寸，default, mini */

package/components/u-badge/u-badge.vue

@@ -2,30 +2,48 @@
     <view
         v-if="show"
         class="u-badge"
-        :class="[isDot ? 'u-badge-dot' : '', size === 'mini' ? 'u-badge-mini' : '', type ? 'u-badge--bg--' + type : '']"
-        :style="[
-            {
-                top: (offset as number[])[0] + 'rpx',
-                right: (offset as number[])[1] + 'rpx',
-                fontSize: fontSize + 'rpx',
-                position: absolute ? 'absolute' : 'static',
-                color: color,
-                backgroundColor: bgColor
-            },
-            boxStyle
+        :class="[
+            isDot ? 'u-badge-dot' : '',
+            size === 'mini' ? 'u-badge-mini' : '',
+            type ? 'u-badge--bg--' + type : '',
+            customClass
         ]"
+        :style="
+            $u.toStyle(
+                {
+                    top: (offset as number[])[0] + 'rpx',
+                    right: (offset as number[])[1] + 'rpx',
+                    fontSize: fontSize + 'rpx',
+                    position: absolute ? 'absolute' : 'static',
+                    color: color,
+                    backgroundColor: bgColor
+                },
+                boxStyle,
+                customStyle
+            )
+        "
     >
         {{ showText }}
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-badge',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 import { BadgeProps } from './types';
-
-defineOptions({
-    name: 'u-badge'
-});
+import { $u } from '../..';
 
 /**
  * badge 角标