uview-pro 0.2.4 → 0.3.0

package/changelog.md

@@ -1,3 +1,32 @@
+## 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 修复

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 }}
@@ -40,15 +42,24 @@
     </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

@@ -5,12 +5,18 @@
         :class="[
             !show ? 'u-close-alert-tips' : '',
             type ? 'u-alert-tips--bg--' + type + '-light' : '',
-            type ? 'u-alert-tips--border--' + type + '-disabled' : ''
+            type ? 'u-alert-tips--border--' + type + '-disabled' : '',
+            customClass
         ]"
-        :style="{
-            backgroundColor: bgColor,
-            borderColor: borderColor
-        }"
+        :style="
+            $u.toStyle(
+                {
+                    backgroundColor: bgColor,
+                    borderColor: borderColor
+                },
+                customStyle
+            )
+        "
     >
         <view class="u-icon-wrap">
             <u-icon
@@ -55,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,5 +1,5 @@
 <template>
-    <view class="u-avatar" :style="wrapStyle" @tap="onClick">
+    <view class="u-avatar" :class="customClass" :style="$u.toStyle(wrapStyle, customStyle)" @tap="onClick">
         <image
             @error="onLoadError"
             :style="imgStyle"
@@ -19,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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';

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-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 返回顶部按钮

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 角标

package/components/u-button/types.ts

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { ButtonFormType, ButtonOpenType, ButtonScope, ButtonSize, ButtonType, Shape } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * button 按钮类型定义
@@ -7,6 +8,7 @@ import type { ButtonFormType, ButtonOpenType, ButtonScope, ButtonSize, ButtonTyp
  */
 
 export const ButtonProps = {
+    ...baseProps,
     /** 是否细边框 */
     hairLine: { type: Boolean, default: true },
     /** 按钮的预置样式，default，primary，error，warning，success */
@@ -51,8 +53,6 @@ export const ButtonProps = {
     ripple: { type: Boolean, default: false },
     /** 按下的类名 */
     hoverClass: { type: String, default: '' },
-    /** 自定义样式，对象形式 */
-    customStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
     /** 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 */
     dataName: { type: String, default: '' },
     /** 节流，一定时间内只能触发一次 */

package/components/u-button/u-button.vue

@@ -9,7 +9,8 @@
             shape === 'circle' ? 'u-round-circle' : '',
             hairLine ? showHairLineBorder : 'u-btn--bold-border',
             'u-btn--' + type,
-            disabled ? `u-btn--${type}--disabled` : ''
+            disabled ? `u-btn--${type}--disabled` : '',
+            customClass
         ]"
         :hover-start-time="Number(hoverStartTime)"
         :hover-stay-time="Number(hoverStayTime)"
@@ -34,12 +35,14 @@
         @opensetting="opensetting"
         @chooseavatar="chooseavatar"
         @agreeprivacyauthorization="agreeprivacyauthorization"
-        :style="[
-            customStyle,
-            {
-                overflow: ripple ? 'hidden' : 'visible'
-            }
-        ]"
+        :style="
+            $u.toStyle(
+                {
+                    overflow: ripple ? 'hidden' : 'visible'
+                },
+                customStyle
+            )
+        "
         @tap.stop="click($event)"
         :hover-class="getHoverClass"
         :loading="loading"
@@ -60,14 +63,24 @@
     </button>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-button',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed, nextTick } from 'vue';
 import { $u } from '../../';
 import { ButtonProps } from './types';
 
-defineOptions({
-    name: 'u-button'
-});
 /**
  * button 按钮
  * @description Button 按钮

package/components/u-car-keyboard/types.ts

@@ -1,10 +1,12 @@
 import { type ExtractPropTypes } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * u-car-keyboard 车牌号键盘类型定义
  * @description 供 u-car-keyboard 组件 props 使用
  */
 export const CarKeyboardProps = {
+    ...baseProps,
     /** 是否打乱键盘按键的顺序 */
     random: { type: Boolean, default: false }
 };

package/components/u-car-keyboard/u-car-keyboard.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="u-keyboard" @touchmove.stop.prevent="() => {}">
+    <view class="u-keyboard" :class="customClass" :style="$u.toStyle(customStyle)" @touchmove.stop.prevent="() => {}">
         <view class="u-keyboard-grids">
             <view>
                 <view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
@@ -38,15 +38,24 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-car-keyboard',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { $u } from '../..';
 import { CarKeyboardProps } from './types';
 
-defineOptions({
-    name: 'u-car-keyboard'
-});
-
 /**
  * u-car-keyboard 车牌号键盘
  * @description 车牌号输入专用键盘，支持省份简称和字母数字切换，支持按键顺序打乱。

package/components/u-card/types.ts

@@ -1,4 +1,5 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * card 卡片类型定义
@@ -8,6 +9,7 @@ export type CardIndex = string | number | Record<string, any>;
 export type CardStyle = Record<string, any>;
 
 export const CardProps = {
+    ...baseProps,
     /** 与屏幕两侧是否留空隙 */
     full: { type: Boolean, default: false },
     /** 标题 */

package/components/u-card/u-card.vue

@@ -2,12 +2,17 @@
     <view
         class="u-card"
         @tap.stop="onClick"
-        :class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': Number(borderRadius) > 0 }"
-        :style="{
-            borderRadius: borderRadius + 'rpx',
-            margin: margin,
-            boxShadow: boxShadow
-        }"
+        :class="[{ 'u-border': border, 'u-card-full': full, 'u-card--border': Number(borderRadius) > 0 }, customClass]"
+        :style="
+            $u.toStyle(
+                {
+                    borderRadius: borderRadius + 'rpx',
+                    margin: margin,
+                    boxShadow: boxShadow
+                },
+                customStyle
+            )
+        "
     >
         <view
             v-if="showHead"
@@ -72,13 +77,23 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-card',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { useSlots } from 'vue';
 import { CardProps } from './types';
-
-defineOptions({
-    name: 'u-card'
-});
+import { $u } from '../..';
 
 /**
  * card 卡片

package/components/u-cell-group/types.ts

@@ -1,4 +1,5 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * cell-group 组件 props 类型定义
@@ -6,6 +7,7 @@ import { type ExtractPropTypes, type PropType } from 'vue';
  */
 
 export const CellGroupProps = {
+    ...baseProps,
     /** 分组标题 */
     title: { type: String, default: '' },
     /** 是否显示分组list上下边框 */

package/components/u-cell-group/u-cell-group.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="u-cell-box">
+    <view class="u-cell-box" :class="customClass" :style="$u.toStyle(customStyle)">
         <view class="u-cell-title" v-if="title" :style="[titleStyle]">
             {{ title }}
         </view>
@@ -9,12 +9,22 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-cell-group',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { CellGroupProps } from './types';
-
-defineOptions({
-    name: 'u-cell-group'
-});
+import { $u } from '../..';
 
 /**
  * cellGroup 单元格父组件Group

package/components/u-cell-item/types.ts

@@ -1,5 +1,6 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import type { CellItemArrowDirection } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * cell-item 组件 props 类型定义
@@ -9,6 +10,7 @@ export type CellItemIndex = string | number;
 export type CellItemStyle = Record<string, any>;
 
 export const CellItemProps = {
+    ...baseProps,
     /** 左侧图标名称(只能uView内置图标)，或者图标src */
     icon: { type: String, default: '' },
     /** 左侧标题 */