uview-pro 0.0.6 → 0.0.8

package/changelog.md

@@ -1,4 +1,9 @@
-## 0.0.6（2025-08-21）
+## 0.0.8（2025-08-25）
+### ♻️ Code Refactoring | 代码重构
+
+-   重构组件 Props 属性定义，每个组件具有完善的 ts 类型定义 ([8cc0de7](https://gitee.com/anyup/uView-Pro/commit/8cc0de7c1527b48dd223d89207135eea01766294))
+-   重构类型定义并统一到全局类型文件 global types ([b0fd010](https://gitee.com/anyup/uView-Pro/commit/b0fd0107289eb1c6df2f58d91b63d9b25902caee))
+## 0.0.7（2025-08-21）
 
 ### 🐛 Bug Fixes | Bug 修复
 

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

@@ -0,0 +1,35 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { ActionSheetItem, ActionSheetTips } from '../../types/global';
+
+/**
+ * actionSheet 操作菜单
+ * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+ */
+export const ActionSheetProps = {
+    /** 点击遮罩是否可以关闭actionsheet */
+    maskCloseAble: { type: Boolean, default: true },
+    /** 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx */
+    list: {
+        type: Array as unknown as PropType<ActionSheetItem[]>,
+        default: () => []
+    },
+    /** 顶部的提示文字 */
+    tips: {
+        type: Object as unknown as PropType<ActionSheetTips>,
+        default: () => ({ text: '', color: '', fontSize: '26' })
+    },
+    /** 底部的取消按钮 */
+    cancelBtn: { type: Boolean, default: true },
+    /** 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 */
+    safeAreaInsetBottom: { type: Boolean, default: false },
+    /** 通过双向绑定控制组件的弹出与收起 */
+    modelValue: { type: Boolean, default: false },
+    /** 弹出的顶部圆角值 */
+    borderRadius: { type: [String, Number], default: 0 },
+    /** 弹出的z-index值 */
+    zIndex: { type: [String, Number], default: 0 },
+    /** 取消按钮的文字提示 */
+    cancelText: { type: String, default: '取消' }
+};
+
+export type ActionSheetProps = ExtractPropTypes<typeof ActionSheetProps>;

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

@@ -36,6 +36,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { $u } from '../..';
+import { ActionSheetProps } from './types';
 
 defineOptions({
     name: 'u-action-sheet'
@@ -59,53 +60,7 @@ defineOptions({
  * @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
  */
 
-const props = defineProps({
-    /** 点击遮罩是否可以关闭actionsheet */
-    maskCloseAble: {
-        type: Boolean,
-        default: true
-    },
-    /** 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx */
-    list: {
-        type: Array as () => Array<{ text: string; subText?: string; color?: string; fontSize?: string; disabled?: boolean }>,
-        default: () => []
-    },
-    /** 顶部的提示文字 */
-    tips: {
-        type: Object as () => { text: string; color?: string; fontSize?: string },
-        default: () => ({ text: '', color: '', fontSize: '26' })
-    },
-    /** 底部的取消按钮 */
-    cancelBtn: {
-        type: Boolean,
-        default: true
-    },
-    /** 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 */
-    safeAreaInsetBottom: {
-        type: Boolean,
-        default: false
-    },
-    /** 通过双向绑定控制组件的弹出与收起 */
-    modelValue: {
-        type: Boolean,
-        default: false
-    },
-    /** 弹出的顶部圆角值 */
-    borderRadius: {
-        type: [String, Number],
-        default: 0
-    },
-    /** 弹出的z-index值 */
-    zIndex: {
-        type: [String, Number],
-        default: 0
-    },
-    /** 取消按钮的文字提示 */
-    cancelText: {
-        type: String,
-        default: '取消'
-    }
-});
+const props = defineProps(ActionSheetProps);
 
 const emit = defineEmits(['update:modelValue', 'click', 'close']);
 

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

@@ -0,0 +1,39 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { ThemeType } from '../../types/global';
+
+/**
+ * alertTips 警告提示
+ * @description 警告提示，展现需要关注的信息
+ */
+export const AlertTipsProps = {
+    /** 显示文字 */
+    title: { type: String, default: '' },
+    /** 主题，success/warning/info/error */
+    type: { type: String as PropType<ThemeType>, default: 'warning' },
+    /** 辅助性文字 */
+    description: { type: String, default: '' },
+    /** 是否可关闭 */
+    closeAble: { type: Boolean, default: false },
+    /** 关闭按钮自定义文本 */
+    closeText: { type: String, default: '' },
+    /** 是否显示图标 */
+    showIcon: { type: Boolean, default: false },
+    /** 文字颜色，如果定义了color值，icon会失效 */
+    color: { type: String, default: '' },
+    /** 背景颜色 */
+    bgColor: { type: String, default: '' },
+    /** 边框颜色 */
+    borderColor: { type: String, default: '' },
+    /** 是否显示 */
+    show: { type: Boolean, default: true },
+    /** 左边显示的icon */
+    icon: { type: String, default: '' },
+    /** icon的样式 */
+    iconStyle: { type: Object, default: () => ({}) },
+    /** 标题的样式 */
+    titleStyle: { type: Object, default: () => ({}) },
+    /** 描述文字的样式 */
+    descStyle: { type: Object, default: () => ({}) }
+};
+
+export type AlertTipsProps = ExtractPropTypes<typeof AlertTipsProps>;

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

@@ -48,6 +48,7 @@
 import uIcon from '../u-icon/u-icon.vue';
 import { computed } from 'vue';
 import { $u } from '../..';
+import { AlertTipsProps } from './types';
 
 defineOptions({
     name: 'u-alert-tips'
@@ -70,38 +71,8 @@ defineOptions({
  * @event {Function} click 点击组件时触发
  * @event {Function} close 点击关闭按钮时触发
  */
-type Types = 'primary' | 'info' | 'error' | 'warning' | 'success';
-
-const props = defineProps({
-    /** 显示文字 */
-    title: { type: String, default: '' },
-    /** 主题，success/warning/info/error */
-    type: { type: String as () => Types, default: 'warning' },
-    /** 辅助性文字 */
-    description: { type: String, default: '' },
-    /** 是否可关闭 */
-    closeAble: { type: Boolean, default: false },
-    /** 关闭按钮自定义文本 */
-    closeText: { type: String, default: '' },
-    /** 是否显示图标 */
-    showIcon: { type: Boolean, default: false },
-    /** 文字颜色，如果定义了color值，icon会失效 */
-    color: { type: String, default: '' },
-    /** 背景颜色 */
-    bgColor: { type: String, default: '' },
-    /** 边框颜色 */
-    borderColor: { type: String, default: '' },
-    /** 是否显示 */
-    show: { type: Boolean, default: true },
-    /** 左边显示的icon */
-    icon: { type: String, default: '' },
-    /** icon的样式 */
-    iconStyle: { type: Object, default: () => ({}) },
-    /** 标题的样式 */
-    titleStyle: { type: Object, default: () => ({}) },
-    /** 描述文字的样式 */
-    descStyle: { type: Object, default: () => ({}) }
-});
+
+const props = defineProps(AlertTipsProps);
 
 const emit = defineEmits(['click', 'close']);
 

package/components/u-avatar/types.ts

@@ -0,0 +1,34 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { ImgMode } from '../../types/global';
+
+// u-avatar 组件 props
+export const AvatarProps = {
+    /** 背景颜色 */
+    bgColor: { type: String, default: 'transparent' },
+    /** 头像路径 */
+    src: { type: String, default: '' },
+    /** 尺寸，large-大，default-中等，mini-小，如果为数值，则单位为rpx，宽度等于高度 */
+    size: { type: [String, Number], default: 'default' },
+    /** 头像模型，square-带圆角方形，circle-圆形 */
+    mode: { type: String, default: 'circle' },
+    /** 文字内容 */
+    text: { type: String, default: '' },
+    /** 图片的裁剪模型 */
+    imgMode: { type: String as PropType<ImgMode>, default: 'aspectFill' },
+    /** 标识符 */
+    index: { type: [String, Number], default: '' },
+    /** 右上角性别角标，man-男，woman-女 */
+    sexIcon: { type: String as PropType<'man' | 'woman'>, default: 'man' },
+    /** 右下角的等级图标 */
+    levelIcon: { type: String, default: 'level' },
+    /** 右下角等级图标背景颜色 */
+    levelBgColor: { type: String, default: '' },
+    /** 右上角性别图标的背景颜色 */
+    sexBgColor: { type: String, default: '' },
+    /** 是否显示性别图标 */
+    showSex: { type: Boolean, default: false },
+    /** 是否显示等级图标 */
+    showLevel: { type: Boolean, default: false }
+};
+
+export type AvatarProps = ExtractPropTypes<typeof AvatarProps>;

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

@@ -14,13 +14,14 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
+import { AvatarProps } from './types';
 
 defineOptions({
     name: 'u-avatar'
 });
 
 let base64Avatar =
-    'data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYG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';
+    'data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYG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';
 
 /**
  * avatar 头像
@@ -41,35 +42,7 @@ let base64Avatar =
  * @event {Function} click 头像被点击
  * @example <u-avatar :src="src"></u-avatar>
  */
-const props = defineProps({
-    /** 背景颜色 */
-    bgColor: { type: String, default: 'transparent' },
-    /** 头像路径 */
-    src: { type: String, default: '' },
-    /** 尺寸，large-大，default-中等，mini-小，如果为数值，则单位为rpx，宽度等于高度 */
-    size: { type: [String, Number], default: 'default' },
-    /** 头像模型，square-带圆角方形，circle-圆形 */
-    mode: { type: String, default: 'circle' },
-    /** 文字内容 */
-    text: { type: String, default: '' },
-    /** 图片的裁剪模型 */
-    imgMode: { type: String, default: 'aspectFill' },
-    /** 标识符 */
-    index: { type: [String, Number], default: '' },
-    /** 右上角性别角标，man-男，woman-女 */
-    sexIcon: { type: String, default: 'man' },
-    /** 右下角的等级图标 */
-    levelIcon: { type: String, default: 'level' },
-    /** 右下角等级图标背景颜色 */
-    levelBgColor: { type: String, default: '' },
-    /** 右上角性别图标的背景颜色 */
-    sexBgColor: { type: String, default: '' },
-    /** 是否显示性别图标 */
-    showSex: { type: Boolean, default: false },
-    /** 是否显示等级图标 */
-    showLevel: { type: Boolean, default: false }
-});
-
+const props = defineProps(AvatarProps);
 const emit = defineEmits(['click']);
 
 // 头像的地址，因为如果加载错误，需要赋值为默认图片，props值无法修改，所以需要一个中间值

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

@@ -0,0 +1,23 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { AvatarCropperBoundStyle } from '../../types/global';
+
+export const AvatarCropperProps = {
+    /** 裁剪矩形框的样式 */
+    boundStyle: {
+        type: Object as PropType<AvatarCropperBoundStyle>,
+        default: (): AvatarCropperBoundStyle => ({
+            lineWidth: 4,
+            borderColor: 'rgb(245, 245, 245)',
+            mask: 'rgba(0, 0, 0, 0.35)'
+        })
+    }
+    // 其他 props 可参考注释，后续如需开放直接补充
+    // rectWidth: { type: [String, Number], default: 400 },
+    // rectHeight: { type: [String, Number], default: 400 },
+    // destWidth: { type: [String, Number], default: 400 },
+    // destHeight: { type: [String, Number], default: 400 },
+    // fileType: { type: String, default: 'jpg' },
+    // quality: { type: [Number, String], default: 1 }
+};
+
+export type AvatarCropperProps = ExtractPropTypes<typeof AvatarCropperProps>;

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

@@ -43,6 +43,7 @@ import { ref, reactive, onMounted } from 'vue';
 import { $u } from '../..';
 // 兼容 UMD/ESM 导入 weCropper.js
 import WeCropper from './weCropper';
+import { AvatarCropperProps } from './types';
 
 defineOptions({ name: 'u-avatar-cropper' });
 
@@ -50,51 +51,7 @@ defineOptions({ name: 'u-avatar-cropper' });
  * 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
  * mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
  */
-const props = defineProps({
-    boundStyle: {
-        type: Object as () => {
-            lineWidth: number;
-            borderColor: string;
-            mask: string;
-        },
-        default: () => ({
-            lineWidth: 4,
-            borderColor: 'rgb(245, 245, 245)',
-            mask: 'rgba(0, 0, 0, 0.35)'
-        })
-    }
-    // // 裁剪框宽度，单位rpx
-    // rectWidth: {
-    //   type: [String, Number],
-    //   default: 400
-    // },
-    // // 裁剪框高度，单位rpx
-    // rectHeight: {
-    //   type: [String, Number],
-    //   default: 400
-    // },
-    // // 输出图片宽度，单位rpx
-    // destWidth: {
-    //   type: [String, Number],
-    //   default: 400
-    // },
-    // // 输出图片高度，单位rpx
-    // destHeight: {
-    //   type: [String, Number],
-    //   default: 400
-    // },
-    // // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可
-    // fileType: {
-    //   type: String,
-    //   default: 'jpg',
-    // },
-    // // 生成的图片质量
-    // // H5上无效，目前不考虑使用此参数
-    // quality: {
-    //   type: [Number, String],
-    //   default: 1
-    // }
-});
+const props = defineProps(AvatarCropperProps);
 
 /**
  * 组合式API变量声明

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

@@ -0,0 +1,39 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { Shape } from '../../types/global';
+
+// u-back-top 组件 props
+export const BackTopProps = {
+    /** 返回顶部的形状，circle-圆形，square-方形 */
+    mode: { type: String as PropType<Shape>, default: 'circle' },
+    /** 自定义图标 */
+    icon: { type: String, default: 'arrow-upward' },
+    /** 提示文字 */
+    tips: { type: String, default: '' },
+    /** 返回顶部滚动时间 */
+    duration: { type: [Number, String], default: 100 },
+    /** 滚动距离 */
+    scrollTop: { type: [Number, String], default: 0 },
+    /** 距离顶部多少距离显示，单位rpx */
+    top: { type: [Number, String], default: 400 },
+    /** 返回顶部按钮到底部的距离，单位rpx */
+    bottom: { type: [Number, String], default: 200 },
+    /** 返回顶部按钮到右边的距离，单位rpx */
+    right: { type: [Number, String], default: 40 },
+    /** 层级 */
+    zIndex: { type: [Number, String], default: '9' },
+    /** 图标的样式，对象形式 */
+    iconStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({
+            color: '#909399',
+            fontSize: '38rpx'
+        })
+    },
+    /** 整个组件的样式 */
+    customStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    }
+};
+
+export type BackTopProps = ExtractPropTypes<typeof BackTopProps>;

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

@@ -26,6 +26,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, useSlots } from 'vue';
+import { BackTopProps } from './types';
 
 defineOptions({
     name: 'u-back-top'
@@ -46,39 +47,7 @@ defineOptions({
  * @property {Object} iconStyle 图标的样式，对象形式
  * @property {Object} customStyle 整个组件的样式
  */
-const props = defineProps({
-    /** 返回顶部的形状，circle-圆形，square-方形 */
-    mode: { type: String, default: 'circle' },
-    /** 自定义图标 */
-    icon: { type: String, default: 'arrow-upward' },
-    /** 提示文字 */
-    tips: { type: String, default: '' },
-    /** 返回顶部滚动时间 */
-    duration: { type: [Number, String], default: 100 },
-    /** 滚动距离 */
-    scrollTop: { type: [Number, String], default: 0 },
-    /** 距离顶部多少距离显示，单位rpx */
-    top: { type: [Number, String], default: 400 },
-    /** 返回顶部按钮到底部的距离，单位rpx */
-    bottom: { type: [Number, String], default: 200 },
-    /** 返回顶部按钮到右边的距离，单位rpx */
-    right: { type: [Number, String], default: 40 },
-    /** 层级 */
-    zIndex: { type: [Number, String], default: '9' },
-    /** 图标的样式，对象形式 */
-    iconStyle: {
-        type: Object,
-        default: () => ({
-            color: '#909399',
-            fontSize: '38rpx'
-        })
-    },
-    /** 整个组件的样式 */
-    customStyle: {
-        type: Object,
-        default: () => ({})
-    }
-});
+const props = defineProps(BackTopProps);
 
 const slots = useSlots();
 

package/components/u-badge/types.ts

@@ -0,0 +1,36 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { BadgeSize, ThemeType } from '../../types/global';
+
+/**
+ * badge 角标类型定义
+ * @description 供 u-badge 组件 props 使用
+ */
+
+export const BadgeProps = {
+    /** 使用预设的背景颜色 primary,warning,success,error,info */
+    type: { type: String as PropType<ThemeType>, default: 'error' },
+    /** Badge的尺寸，default, mini */
+    size: { type: String as PropType<BadgeSize>, default: 'default' },
+    /** 是否是圆点 */
+    isDot: { type: Boolean, default: false },
+    /** 显示的数值内容 */
+    count: { type: [Number, String], default: undefined },
+    /** 展示封顶的数字值 */
+    overflowCount: { type: Number, default: 99 },
+    /** 当数值为 0 时，是否展示 Badge */
+    showZero: { type: Boolean, default: false },
+    /** 位置偏移 [number, number] */
+    offset: { type: Array as unknown as PropType<[number, number]>, default: () => [20, 20] },
+    /** 是否开启绝对定位，开启了offset才会起作用 */
+    absolute: { type: Boolean, default: true },
+    /** 字体大小 */
+    fontSize: { type: [String, Number], default: '24' },
+    /** 字体颜色 */
+    color: { type: String, default: '#ffffff' },
+    /** badge的背景颜色 */
+    bgColor: { type: String, default: '' },
+    /** 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效 */
+    isCenter: { type: Boolean, default: false }
+};
+
+export type BadgeProps = ExtractPropTypes<typeof BadgeProps>;

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

@@ -21,6 +21,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { BadgeProps } from './types';
 
 defineOptions({
     name: 'u-badge'
@@ -44,32 +45,7 @@ defineOptions({
  * @example <u-badge type="error" count="7"></u-badge>
  */
 
-const props = defineProps({
-    /** 使用预设的背景颜色 primary,warning,success,error,info */
-    type: { type: String, default: 'error' },
-    /** Badge的尺寸，default, mini */
-    size: { type: String, default: 'default' },
-    /** 是否是圆点 */
-    isDot: { type: Boolean, default: false },
-    /** 显示的数值内容 */
-    count: { type: [Number, String], default: undefined },
-    /** 展示封顶的数字值 */
-    overflowCount: { type: Number, default: 99 },
-    /** 当数值为 0 时，是否展示 Badge */
-    showZero: { type: Boolean, default: false },
-    /** 位置偏移 [number, number] */
-    offset: { type: [Array, Object], default: () => [20, 20] },
-    /** 是否开启绝对定位，开启了offset才会起作用 */
-    absolute: { type: Boolean, default: true },
-    /** 字体大小 */
-    fontSize: { type: [String, Number], default: '24' },
-    /** 字体颜色 */
-    color: { type: String, default: '#ffffff' },
-    /** badge的背景颜色 */
-    bgColor: { type: String, default: '' },
-    /** 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效 */
-    isCenter: { type: Boolean, default: false }
-});
+const props = defineProps(BadgeProps);
 
 /**
  * 计算 badge 的定位和变换样式

package/components/u-button/types.ts

@@ -0,0 +1,66 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ButtonFormType, ButtonOpenType, ButtonScope, ButtonSize, ButtonType, Shape } from '../../types/global';
+
+/**
+ * button 按钮类型定义
+ * @description 供 u-button 组件 props 使用
+ */
+
+export const ButtonProps = {
+    /** 是否细边框 */
+    hairLine: { type: Boolean, default: true },
+    /** 按钮的预置样式，default，primary，error，warning，success */
+    type: { type: String as PropType<ButtonType>, default: 'default' },
+    /** 按钮尺寸，default，medium，mini */
+    size: { type: String as PropType<ButtonSize>, default: 'default' },
+    /** 按钮形状，circle（两边为半圆），square（带圆角） */
+    shape: { type: String as PropType<Shape>, default: 'square' },
+    /** 按钮是否镂空 */
+    plain: { type: Boolean, default: false },
+    /** 是否禁止状态 */
+    disabled: { type: Boolean, default: false },
+    /** 是否加载中 */
+    loading: { type: Boolean, default: false },
+    /** 支付宝小程序，当 open-type 为 getAuthorize 时有效 */
+    scope: { type: String as PropType<ButtonScope>, default: '' },
+    /** 开放能力，具体请看uniapp稳定关于button组件部分说明 */
+    openType: { type: String as PropType<ButtonOpenType>, default: '' },
+    /** 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 */
+    formType: { type: String as PropType<ButtonFormType>, default: '' },
+    /** 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 */
+    appParameter: { type: String, default: '' },
+    /** 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 */
+    hoverStopPropagation: { type: Boolean, default: false },
+    /** 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效 */
+    lang: { type: String, default: 'en' },
+    /** 会话来源，open-type="contact"时有效。只微信小程序有效 */
+    sessionFrom: { type: String, default: '' },
+    /** 会话内消息卡片标题，open-type="contact"时有效 */
+    sendMessageTitle: { type: String, default: '' },
+    /** 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 */
+    sendMessagePath: { type: String, default: '' },
+    /** 会话内消息卡片图片，open-type="contact"时有效 */
+    sendMessageImg: { type: String, default: '' },
+    /** 是否显示会话内消息卡片，open-type="contact"时有效 */
+    showMessageCard: { type: Boolean, default: false },
+    /** 手指按（触摸）按钮时按钮时的背景颜色 */
+    hoverBgColor: { type: String, default: '' },
+    /** 水波纹的背景颜色 */
+    rippleBgColor: { type: String, default: '' },
+    /** 是否开启水波纹效果 */
+    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: '' },
+    /** 节流，一定时间内只能触发一次 */
+    throttleTime: { type: [String, Number], default: 1000 },
+    /** 按住后多久出现点击态，单位毫秒 */
+    hoverStartTime: { type: [String, Number], default: 20 },
+    /** 手指松开后点击态保留时间，单位毫秒 */
+    hoverStayTime: { type: [String, Number], default: 150 }
+};
+
+export type ButtonProps = ExtractPropTypes<typeof ButtonProps>;