uview-pro 0.3.7 → 0.3.9

package/changelog.md

@@ -1,3 +1,44 @@
+## 0.3.9（2025-11-05）
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **types:** 修正组件声明文件中uLoadmore的命名大小写问题 ([eb69b18](https://github.com/anyup/uView-Pro/commit/eb69b18d969dac13a75375501018edc4f3097e33))
+- **loadmore:** 修复 u-loadmore 组件使用类型声明报错问题 ([92facfd](https://github.com/anyup/uView-Pro/commit/92facfdb5b2b57bcd634d93412c90661c5f6e59d))
+
+### ✨ Features | 新功能
+
+- **theme:** 新增本地主题文件支持 ([a989314](https://github.com/anyup/uView-Pro/commit/a989314a7b691e94ed81e524100e70d6e9a22a12))
+- **theme:** 实现运行时主题变更功能，新增 setTheme 函数 ([12765d0](https://github.com/anyup/uView-Pro/commit/12765d07244a9d6ca49c4dd34d81f66a61c87c6d))
+
+### 👥 Contributors
+
+<a href="https://github.com/liujiayii"><img src="https://github.com/liujiayii.png?size=40" width="40" height="40" alt="liujiayii" title="liujiayii"/></a> <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a>
+
+## 0.3.8（2025-11-04）
+
+### 📦‍ Build System | 打包构建
+
+- 新增钉钉小程序运行和打包命令 ([a5b4ab3](https://github.com/anyup/uView-Pro/commit/a5b4ab3abab95b4c56bf02415f1785371f7f19ee))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-circle-progress:** 修复微信小程序 canvas 2d 环形进度条绘制问题,适配不同平台的 canvas 上下文 ([e7ab701](https://github.com/anyup/uView-Pro/commit/e7ab701bcbd83e7861aeb9a104269265c6b38a56))
+
+### ✨ Features | 新功能
+
+- **u-fab:** 新增悬浮按钮组件及演示示例 ([85848de](https://github.com/anyup/uView-Pro/commit/85848de6bae15d91942a633959459ae8e6ecb857))
+- **u-fab:** 优化悬浮组件功能和交互，新增预设定位position、拖动吸边autoStick属性 ([65a4bde](https://github.com/anyup/uView-Pro/commit/65a4bde2331c8b2a49933bb4c5d7e1f97a11c56a))
+- **u-text:** 新增 u-text 组件默认插槽支持 ([a7b6e59](https://github.com/anyup/uView-Pro/commit/a7b6e5944afbcd48920c25a58c07642544ff3d3e))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **fab:** 优化 fab 组件示例代码 ([ca71fa2](https://github.com/anyup/uView-Pro/commit/ca71fa28fa86baa53384eb366384d97a0b8d84b2))
+- **u-fab:** 重构 gap 属性以支持对象类型 ([bee34bf](https://github.com/anyup/uView-Pro/commit/bee34bffd6a7587e9a82fe3e35cc64c096d8d2b3))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/wjp980108"><img src="https://github.com/wjp980108.png?size=40" width="40" height="40" alt="wjp980108" title="wjp980108"/></a>
+
 ## 0.3.7（2025-10-28）
 
 ### 🐛 Bug Fixes | Bug 修复

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

@@ -34,7 +34,7 @@ export const ActionSheetProps = {
     /** 取消按钮的文字提示 */
     cancelText: { type: String, default: '取消' },
     /** 字体颜色 */
-    color: { type: String, default: $u.color.mainColor },
+    color: { type: String, default: () => $u.color.mainColor },
     /** 字体大小 */
     fontSize: { type: [String, Number], default: '32rpx' },
     /** 是否异步关闭 */

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

@@ -15,7 +15,7 @@ export const ActionSheetItemProps = {
     /** 边距 */
     padding: { type: [Number, String] as PropType<number | string>, default: '34rpx 0' },
     /** 字体颜色 */
-    color: { type: String, default: $u.color.mainColor },
+    color: { type: String, default: () => $u.color.mainColor },
     /** 字体大小 */
     fontSize: { type: [String, Number], default: '32rpx' },
     /** 是否禁用 */

package/components/u-calendar/types.ts

@@ -40,13 +40,13 @@ export const CalendarProps = {
     /** 默认日期字体颜色 */
     color: { type: String, default: '#303133' },
     /** 选中|起始结束日期背景色 */
-    activeBgColor: { type: String, default: $u.color.primary },
+    activeBgColor: { type: String, default: () => $u.color.primary },
     /** 选中|起始结束日期字体颜色 */
     activeColor: { type: String, default: '#ffffff' },
     /** 范围内日期背景色 */
     rangeBgColor: { type: String, default: 'rgba(41,121,255,0.13)' },
     /** 范围内日期字体颜色 */
-    rangeColor: { type: String, default: $u.color.primary },
+    rangeColor: { type: String, default: () => $u.color.primary },
     /** mode=range时生效，起始日期自定义文案 */
     startText: { type: String, default: '开始' },
     /** mode=range时生效，结束日期自定义文案 */

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

@@ -21,7 +21,7 @@ export const CheckboxGroupProps = {
     /** 形状，square为方形，circle为原型 */
     shape: { type: String as PropType<Shape>, default: 'square' },
     /** 选中状态下的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 组件的整体大小 */
     size: { type: [String, Number], default: 34 },
     /** 每个checkbox占u-checkbox-group的宽度 */

package/components/u-circle-progress/u-circle-progress.vue

@@ -14,8 +14,10 @@
         "
     >
         <!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
+        <!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
         <canvas
             class="u-canvas-bg"
+            type="2d"
             :canvas-id="elBgId"
             :id="elBgId"
             :style="{
@@ -25,6 +27,7 @@
         ></canvas>
         <canvas
             class="u-canvas"
+            type="2d"
             :canvas-id="elId"
             :id="elId"
             :style="{
@@ -32,6 +35,27 @@
                 height: widthPx + 'px'
             }"
         ></canvas>
+        <!-- #endif -->
+        <!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
+        <canvas
+            class="u-canvas-bg"
+            :canvas-id="elBgId"
+            :id="elBgId"
+            :style="{
+                width: widthPx + 'px',
+                height: widthPx + 'px'
+            }"
+        ></canvas>
+        <canvas
+            class="u-canvas"
+            :canvas-id="elId"
+            :id="elId"
+            :style="{
+                width: widthPx + 'px',
+                height: widthPx + 'px'
+            }"
+        ></canvas>
+        <!-- #endif -->
         <slot></slot>
     </view>
 </template>
@@ -50,9 +74,12 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
+import { ref, computed, watch, onMounted, getCurrentInstance, onBeforeMount } from 'vue';
 import { $u } from '../..';
 import { CircleProgressProps } from './types';
+// #ifdef MP-WEIXIN || MP-TOUTIAO
+import { canvas2d } from '../../libs/util/canvas-2d';
+// #endif
 
 /**
  * circleProgress 环形进度条
@@ -72,12 +99,17 @@ const props = defineProps(CircleProgressProps);
 
 let elBgId = $u.guid(); // 非微信端的时候，需用动态的id，否则一个页面多个圆形进度条组件数据会混乱
 let elId = $u.guid();
-// #ifdef MP-WEIXIN
-elBgId = 'uCircleProgressBgId'; // 微信小程序中不能使用$u.guid()形式动态生成id值，否则会报错
-elId = 'uCircleProgressElId';
+// #ifdef MP-WEIXIN || MP-TOUTIAO
+// elBgId = 'uCircleProgressBgId'; // 微信小程序中不能使用$u.guid()形式动态生成id值，否则会报错
+// elId = 'uCircleProgressElId';
 // #endif
 const instance = getCurrentInstance();
 
+const pixelRatio = ref<number>(1); // 像素比
+
+// 存储 MP-WEIXIN 下通过 selectorQuery 获取到的 canvas node，方便在绘制前清空
+const canvasNodeMap = new Map<string, any>();
+
 const widthPx = computed(() =>
     typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px(Number(props.width)) : Number(props.width)
 );
@@ -99,6 +131,10 @@ const circleColor = computed(() => {
     return props.activeColor;
 });
 
+onBeforeMount(() => {
+    pixelRatio.value = uni.getSystemInfoSync().pixelRatio;
+});
+
 // 监听percent变化，动态绘制进度
 watch(
     () => props.percent,
@@ -126,11 +162,55 @@ onMounted(() => {
     }, 50);
 });
 
+/**
+ * 获取canvas上下文
+ */
+function getContext(canvasId) {
+    return new Promise<UniApp.CanvasContext>(resolve => {
+        let ctx = null;
+        // #ifndef MP-WEIXIN || MP-TOUTIAO
+        ctx = uni.createCanvasContext(canvasId, instance);
+        resolve(ctx);
+        // #endif
+        // #ifdef MP-WEIXIN || MP-TOUTIAO
+        uni.createSelectorQuery()
+            .in(instance?.proxy)
+            .select(`#${canvasId}`)
+            .node(res => {
+                if (res && res.node) {
+                    const canvas = res.node;
+                    ctx = canvas2d(canvas.getContext('2d') as CanvasRenderingContext2D);
+                    canvas.width = widthPx.value * pixelRatio.value;
+                    canvas.height = widthPx.value * pixelRatio.value;
+                    ctx.scale(pixelRatio.value, pixelRatio.value);
+                    // 存储 canvas node，后续绘制时用于清空画布
+                    canvasNodeMap.set(canvasId, canvas);
+                    resolve(ctx);
+                }
+            })
+            .exec();
+        // #endif
+    });
+}
+
 /**
  * 绘制底部灰色圆环
  */
-function drawProgressBg() {
-    const ctx = uni.createCanvasContext(elBgId, instance);
+async function drawProgressBg() {
+    const ctx = await getContext(elBgId);
+    // #ifdef MP-WEIXIN || MP-TOUTIAO
+    // 清空背景画布（如果可用）以确保绘制一致性
+    try {
+        if (typeof ctx.clearRect === 'function') {
+            const node = canvasNodeMap.get(elBgId);
+            const w = node ? node.width : widthPx.value * pixelRatio.value;
+            const h = node ? node.height : widthPx.value * pixelRatio.value;
+            ctx.clearRect(0, 0, w, h);
+        }
+    } catch (e) {
+        // ignore
+    }
+    // #endif
     ctx.setLineWidth(borderWidthPx.value); // 设置圆环宽度
     ctx.setStrokeStyle(props.inactiveColor); // 线条颜色
     ctx.beginPath(); // 开始描绘路径
@@ -144,13 +224,26 @@ function drawProgressBg() {
  * 绘制进度圆环
  * @param progress 当前进度
  */
-function drawCircleByProgress(progress: number) {
+async function drawCircleByProgress(progress: number) {
     // 第一次操作进度环时将上下文保存到了this.data中，直接使用即可
     let ctx = progressContext.value;
     if (!ctx) {
-        ctx = uni.createCanvasContext(elId, instance);
+        ctx = await getContext(elId);
         progressContext.value = ctx;
     }
+    // #ifdef MP-WEIXIN || MP-TOUTIAO
+    // 清空进度画布，避免旧的更大进度残留，导致无法降低的视觉错误
+    try {
+        if (typeof ctx.clearRect === 'function') {
+            const node = canvasNodeMap.get(elId);
+            const w = node ? node.width : widthPx.value * pixelRatio.value;
+            const h = node ? node.height : widthPx.value * pixelRatio.value;
+            ctx.clearRect(0, 0, w, h);
+        }
+    } catch (e) {
+        // ignore
+    }
+    // #endif
     // 表示进度的两端为圆形
     ctx.setLineCap('round');
     // 设置线条的宽度和颜色

package/components/u-dropdown/types.ts

@@ -9,9 +9,9 @@ import { $u } from '../../';
 export const DropdownProps = {
     ...baseProps,
     /** 菜单标题和选项的激活态颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 菜单标题和选项的未激活态颜色 */
-    inactiveColor: { type: String, default: $u.color.contentColor },
+    inactiveColor: { type: String, default: () => $u.color.contentColor },
     /** 点击遮罩是否关闭菜单 */
     closeOnClickMask: { type: Boolean, default: true },
     /** 点击当前激活项标题是否关闭菜单 */

package/components/u-fab/types.ts

@@ -0,0 +1,75 @@
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
+import type { FabDirection, FabGap, FabPosition, ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * fab 悬浮按钮类型定义
+ * @description 供 u-fab 组件 props 使用
+ */
+
+export const FabProps = {
+    ...baseProps,
+    /** 按钮的预置样式，primary，info，error，warning，success */
+    type: { type: String as PropType<ThemeType>, default: 'primary' },
+    /** 是否禁止状态 */
+    disabled: { type: Boolean, default: false },
+    /** 按钮能否可以拖动 */
+    draggable: { type: Boolean, default: false },
+    /** 按钮与边缘的间距，单位 px。支持 number 或对象 {top,left,right,bottom}，优先级按键存在顺序 */
+    gap: {
+        type: Object as PropType<FabGap>,
+        default: () => ({
+            top: 16,
+            left: 16,
+            right: 16,
+            bottom: 16
+        })
+    },
+    /** 拖动结束时是否自动吸边（仅当 draggable 为 true 时生效） */
+    autoStick: { type: Boolean, default: true },
+    /** 预设定位：控制组件默认停靠位置 */
+    position: {
+        type: String as PropType<FabPosition>,
+        default: 'right-bottom'
+    },
+    /** 菜单出现的方向 */
+    direction: { type: String as PropType<FabDirection>, default: 'top' },
+    /** 按钮自定义层级 */
+    zIndex: { type: Number, default: 99 }
+};
+
+export type FabProps = ExtractPropTypes<typeof FabProps>;
+
+interface DirectionConfig {
+    opposite: keyof CSSProperties;
+    sizeKey: 'width' | 'height';
+    positionKey: 'left' | 'top';
+    flexBase: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+}
+
+export const directionConfig: Record<FabDirection, DirectionConfig> = {
+    top: {
+        opposite: 'bottom',
+        sizeKey: 'width',
+        positionKey: 'left',
+        flexBase: 'column'
+    },
+    bottom: {
+        opposite: 'top',
+        sizeKey: 'width',
+        positionKey: 'left',
+        flexBase: 'column-reverse'
+    },
+    left: {
+        opposite: 'right',
+        sizeKey: 'height',
+        positionKey: 'top',
+        flexBase: 'row'
+    },
+    right: {
+        opposite: 'left',
+        sizeKey: 'height',
+        positionKey: 'top',
+        flexBase: 'row-reverse'
+    }
+};

package/components/u-fab/u-fab.vue

@@ -0,0 +1,328 @@
+<template>
+    <view
+        class="u-fab"
+        :style="$u.toStyle(fabStyle, customStyle)"
+        :class="[customClass]"
+        @touchstart="handleTouchstart"
+        @touchmove.stop.prevent="handleTouchmove"
+        @touchend="handleTouchend"
+    >
+        <view class="u-fab-trigger" id="trigger">
+            <slot name="trigger">
+                <u-button
+                    custom-class="u-fab-trigger-btn"
+                    custom-style="width:112rpx;height:112rpx;border-radius:112rpx;"
+                    :type="type"
+                    :disabled="disabled"
+                    :throttle-time="0"
+                    @click="handleBtnClick"
+                >
+                    <u-icon :name="expansion ? 'close' : 'plus'" size="36rpx"></u-icon>
+                </u-button>
+            </slot>
+        </view>
+        <view class="u-fab-actions" id="actions" :class="{ 'u-fab-actions__show': expansion }" :style="actionsStyle">
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-fab',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { directionConfig, FabProps } from './types.ts';
+import { computed, getCurrentInstance, onMounted, reactive, ref, useSlots, watch } from 'vue';
+import { $u } from '../../';
+
+const props = defineProps(FabProps);
+const emit = defineEmits(['trigger']);
+
+const slots = useSlots();
+const instance = getCurrentInstance();
+const sysInfo = $u.sys();
+const dragging = ref(true);
+const minLeft = ref(0);
+const maxLeft = ref(0);
+const minTop = ref(0);
+const maxTop = ref(0);
+const expansion = ref(false);
+const direction = ref(props.direction);
+const effectiveWindowHeight = ref(sysInfo.windowHeight);
+// #ifdef H5
+effectiveWindowHeight.value = sysInfo.windowTop + sysInfo.windowHeight;
+// #endif
+const position = reactive({
+    top: 0,
+    left: 0
+});
+const actions = ref();
+const btnInfo = ref({
+    width: 56,
+    height: 56
+});
+const start = reactive({
+    x: 0,
+    y: 0
+});
+
+// 计算悬浮按钮样式
+const fabStyle = computed(() => {
+    const style: Record<string, any> = {
+        transition: dragging.value ? 'none' : 'all 0.3s ease',
+        zIndex: props.zIndex,
+        left: `${position.left}px`,
+        top: `${position.top}px`
+    };
+    return style;
+});
+
+// 动画样式
+const actionsStyle = computed(() => {
+    const config = directionConfig[direction.value];
+    const base: Record<string, any> = {
+        [config.opposite]: '100%',
+        [config.sizeKey]: '100%',
+        [config.positionKey]: 0,
+        flexDirection: config.flexBase,
+        transition: 'all 0.28s cubic-bezier(0.3, 0, 0.2, 1)'
+    };
+
+    // 展开/收缩动画：根据方向设置初始偏移
+    const offset = 12; // rpx/px 相对轻微偏移，视觉更顺滑
+    if (expansion.value) {
+        base.transform = 'translate3d(0,0,0) scale(1)';
+        base.opacity = 1;
+    } else {
+        // 隐藏时做一个方向上的微位移并缩放以优化动画感
+        if (direction.value === 'top') base.transform = `translate3d(0, ${offset}px, 0) scale(0.96)`;
+        else if (direction.value === 'bottom') base.transform = `translate3d(0, -${offset}px, 0) scale(0.96)`;
+        else if (direction.value === 'left') base.transform = `translate3d(${offset}px, 0, 0) scale(0.96)`;
+        else base.transform = `translate3d(-${offset}px, 0, 0) scale(0.96)`;
+        base.opacity = 0;
+    }
+
+    return base;
+});
+
+watch(
+    () => [props.position, props.gap],
+    () => {
+        initPosition();
+    }
+);
+
+watch(
+    () => props.direction,
+    () => {
+        if (expansion.value) direction.value = calcDirection();
+    }
+);
+
+// helper：支持 gap 为 number 或对象形式
+function getGap(side: 'top' | 'left' | 'right' | 'bottom') {
+    const g = props.gap as any;
+    if (typeof g === 'number') return g;
+    if (g && typeof g === 'object' && g[side] !== undefined) return Number(g[side]);
+    return 0;
+}
+
+// 拖动开始事件
+function handleTouchstart(e: TouchEvent) {
+    if (props.disabled || !props.draggable) return;
+
+    const touches = e.touches[0];
+    start.x = touches.clientX;
+    start.y = touches.clientY;
+    dragging.value = true;
+}
+
+// 拖动移动事件
+function handleTouchmove(e: TouchEvent) {
+    if (props.disabled || !props.draggable) return;
+
+    const touches = e.touches[0];
+    const deltaX = touches.clientX - start.x;
+    const deltaY = touches.clientY - start.y;
+
+    position.left += deltaX;
+    position.top += deltaY;
+
+    start.x = touches.clientX;
+    start.y = touches.clientY;
+
+    // 设置边界，防止拖出边界
+    position.left = Math.max(minLeft.value, Math.min(maxLeft.value, position.left));
+    position.top = Math.max(minTop.value, Math.min(maxTop.value, position.top));
+}
+
+// 拖动结束事件
+function handleTouchend() {
+    if (props.disabled || !props.draggable) return;
+
+    dragging.value = false;
+
+    // 如果 autoStick 为 false，则释放后不进行自动吸边，仅做边界限制
+    if (props.autoStick === false) {
+        position.left = Math.max(minLeft.value, Math.min(maxLeft.value, position.left));
+        position.top = Math.max(minTop.value, Math.min(maxTop.value, position.top));
+        return;
+    }
+
+    const middle = sysInfo.windowWidth / 2;
+    const buttonCenter = position.left + btnInfo.value.width / 2;
+
+    // 自动吸边，按钮中心位置大于视口的一半时，自动依附在右边，不然就是左边
+    position.left =
+        buttonCenter > middle ? sysInfo.windowWidth - btnInfo.value.width - getGap('right') : getGap('left');
+
+    if (expansion.value) direction.value = calcDirection();
+}
+
+// 按钮点击事件
+function handleBtnClick() {
+    if (slots?.default) {
+        expansion.value = !expansion.value;
+        if (expansion.value) direction.value = calcDirection();
+    } else {
+        emit('trigger');
+    }
+}
+
+// 计算方向
+function calcDirection() {
+    if (!actions.value) return props.direction;
+
+    let dir = props.direction;
+
+    const actionsHeight = actions.value?.height || 0;
+    const actionsWidth = actions.value?.width || 0;
+
+    // 菜单展开时，如果位置不够，则反转方向
+    if (dir === 'top') {
+        // 按钮上方剩余空间: 按钮顶部 - 顶部边距
+        if (position.top - minTop.value < actionsHeight) dir = 'bottom';
+    } else if (dir === 'bottom') {
+        // 按钮下方剩余空间: 有效窗口高度 - (按钮顶部 + 按钮高 + 边距)
+        const bottom = effectiveWindowHeight.value - (position.top + btnInfo.value.height + getGap('bottom'));
+        if (bottom < actionsHeight) dir = 'top';
+    } else if (dir === 'left') {
+        // 按钮左侧剩余空间: 有效窗口宽度 - 边距
+        if (position.left - getGap('left') < actionsWidth) dir = 'right';
+    } else if (dir === 'right') {
+        // 按钮右侧剩余空间: 有效窗口宽度 - (按钮左侧 + 按钮宽 + 边距)
+        const right = sysInfo.windowWidth - (position.left + btnInfo.value.width + getGap('right'));
+        if (right < actionsWidth) dir = 'left';
+    }
+
+    return dir;
+}
+
+// 初始化位置
+function initPosition() {
+    // 根据 props.position 计算初始 left/top
+    const pos = props.position || 'right-bottom';
+    const winW = sysInfo.windowWidth;
+    const winH = effectiveWindowHeight.value;
+
+    switch (pos) {
+        case 'left-top':
+            position.left = getGap('left');
+            position.top = getGap('top') + sysInfo.windowTop;
+            break;
+        case 'right-top':
+            position.left = winW - btnInfo.value.width - getGap('right');
+            position.top = getGap('top') + sysInfo.windowTop;
+            break;
+        case 'left-bottom':
+            position.left = getGap('left');
+            position.top = winH - btnInfo.value.height - getGap('bottom');
+            break;
+        case 'right-bottom':
+            position.left = winW - btnInfo.value.width - getGap('right');
+            position.top = winH - btnInfo.value.height - getGap('bottom');
+            break;
+        case 'left-center':
+            position.left = getGap('left');
+            position.top = Math.round((winH - btnInfo.value.height) / 2);
+            break;
+        case 'right-center':
+            position.left = winW - btnInfo.value.width - getGap('right');
+            position.top = Math.round((winH - btnInfo.value.height) / 2);
+            break;
+        case 'top-center':
+            position.left = Math.round((winW - btnInfo.value.width) / 2);
+            position.top = getGap('top') + sysInfo.windowTop;
+            break;
+        case 'bottom-center':
+            position.left = Math.round((winW - btnInfo.value.width) / 2);
+            position.top = winH - btnInfo.value.height - getGap('bottom');
+            break;
+        default:
+            position.left = winW - btnInfo.value.width - getGap('right');
+            position.top = winH - btnInfo.value.height - getGap('bottom');
+            break;
+    }
+}
+
+onMounted(async () => {
+    btnInfo.value = await $u.getRect('#trigger', instance);
+    actions.value = await $u.getRect('#actions', instance);
+
+    initPosition();
+
+    minLeft.value = getGap('left');
+    minTop.value = getGap('top') + sysInfo.windowTop;
+    maxLeft.value = sysInfo.windowWidth - btnInfo.value.width - getGap('right');
+    maxTop.value = effectiveWindowHeight.value - btnInfo.value.height - getGap('bottom');
+});
+
+defineExpose({
+    toggle: handleBtnClick
+});
+</script>
+
+<style scoped lang="scss">
+.u-fab {
+    position: fixed;
+
+    .u-fab-trigger {
+        :deep(.u-fab-trigger-btn) {
+            width: 112rpx;
+            height: 112rpx;
+            border-radius: 112rpx;
+
+            &::after {
+                border-radius: 112rpx;
+            }
+        }
+    }
+
+    .u-fab-actions {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        visibility: hidden;
+        opacity: 0;
+        transform-origin: center;
+        will-change: transform, opacity;
+        transition: all 0.28s cubic-bezier(0.3, 0, 0.2, 1);
+
+        &.u-fab-actions__show {
+            visibility: visible;
+            opacity: 1;
+        }
+    }
+}
+</style>

package/components/u-index-list/types.ts

@@ -34,7 +34,7 @@ export const IndexListProps = {
     /** 锚点和右边索引字符高亮颜色 */
     activeColor: {
         type: String,
-        default: $u.color.primary
+        default: () => $u.color.primary
     }
 };
 

package/components/u-link/types.ts

@@ -9,7 +9,7 @@ export const LinkProps = {
     /** 文字颜色 */
     color: {
         type: String,
-        default: $u.color.primary
+        default: () => $u.color.primary
     },
     /** 字体大小，单位rpx */
     fontSize: {

package/components/u-message-input/types.ts

@@ -50,12 +50,12 @@ export const MessageInputProps = {
     /** 激活样式 */
     activeColor: {
         type: String,
-        default: $u.color.primary
+        default: () => $u.color.primary
     },
     /** 未激活的样式 */
     inactiveColor: {
         type: String,
-        default: $u.color.contentColor
+        default: () => $u.color.contentColor
     },
     /** 输入框的大小，单位rpx，宽等于高 */
     width: {

package/components/u-modal/types.ts

@@ -59,12 +59,12 @@ export const ModalProps = {
     /** 确认按钮颜色 */
     confirmColor: {
         type: String,
-        default: $u.color.primary
+        default: () => $u.color.primary
     },
     /** 取消文字颜色 */
     cancelColor: {
         type: String,
-        default: $u.color.contentColor
+        default: () => $u.color.contentColor
     },
     /** 圆角值 */
     borderRadius: {

package/components/u-picker/types.ts

@@ -62,12 +62,12 @@ export const PickerProps = {
     /** "取消"按钮的颜色 */
     cancelColor: {
         type: String,
-        default: $u.color.contentColor
+        default: () => $u.color.contentColor
     },
     /** "确定"按钮的颜色 */
     confirmColor: {
         type: String,
-        default: $u.color.primary
+        default: () => $u.color.primary
     },
     /** 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02 */
     defaultTime: {

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

@@ -14,7 +14,7 @@ export const RadioGroupProps = {
     /** 匹配某一个radio组件，如果某个radio的name值等于此值，那么这个radio就被会选中 */
     modelValue: { type: [String, Number] as PropType<string | number>, default: '' },
     /** 选中状态下的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 组件的整体大小 */
     size: { type: [String, Number] as PropType<number | string>, default: 34 },
     /** 是否禁止点击提示语选中复选框 */

package/components/u-read-more/types.ts

@@ -17,7 +17,7 @@ export const ReadMoreProps = {
     /** 展开时的提示文字 */
     openText: { type: String, default: '收起' },
     /** 提示的文字颜色 */
-    color: { type: String, default: $u.color.primary },
+    color: { type: String, default: () => $u.color.primary },
     /** 提示文字的大小 */
     fontSize: { type: [String, Number] as PropType<number | string>, default: 28 },
     /** 是否显示阴影 */

package/components/u-select/types.ts

@@ -16,9 +16,9 @@ export const SelectProps = {
     /** 通过双向绑定控制组件的弹出与收起 */
     modelValue: { type: Boolean, default: false },
     /** "取消"按钮的颜色 */
-    cancelColor: { type: String, default: $u.color.contentColor },
+    cancelColor: { type: String, default: () => $u.color.contentColor },
     /** "确定"按钮的颜色 */
-    confirmColor: { type: String, default: $u.color.primary },
+    confirmColor: { type: String, default: () => $u.color.primary },
     /** 弹出的z-index值 */
     zIndex: { type: [String, Number] as PropType<string | number>, default: 0 },
     /** 是否开启底部安全区适配 */

package/components/u-slider/types.ts

@@ -23,9 +23,9 @@ export const SliderProps = {
     /** 滑块条高度，单位rpx */
     height: { type: [Number, String] as PropType<number | string>, default: 6 },
     /** 进度条的激活部分颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 进度条的背景颜色 */
-    inactiveColor: { type: String, default: $u.color.lightColor },
+    inactiveColor: { type: String, default: () => $u.color.lightColor },
     /** 滑块的背景颜色 */
     blockColor: { type: String, default: '#ffffff' },
     /** 用户对滑块的自定义颜色 */

package/components/u-step/types.ts

@@ -15,9 +15,9 @@ export const StepProps = {
     /** 主题类型, primary|success|info|warning|error */
     type: { type: String as PropType<ThemeType>, default: 'primary' },
     /** 激活步骤的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 未激活的颜色 */
-    unActiveColor: { type: String, default: $u.color.info },
+    unActiveColor: { type: String, default: () => $u.color.info },
     /** 自定义图标 */
     icon: { type: String, default: 'checkmark' },
     /** 标题 */

package/components/u-steps/types.ts

@@ -19,9 +19,9 @@ export const StepsProps = {
     /** 当前哪一步是激活的 */
     current: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** 激活步骤的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 未激活的颜色 */
-    unActiveColor: { type: String, default: $u.color.info },
+    unActiveColor: { type: String, default: () => $u.color.info },
     /** 自定义图标 */
     icon: { type: String, default: 'checkmark' },
     /** step的排列方向，row-横向，column-竖向 */

package/components/u-switch/types.ts

@@ -15,7 +15,7 @@ export const SwitchProps = {
     /** 开关尺寸，单位rpx */
     size: { type: [Number, String] as PropType<number | string>, default: 50 },
     /** 打开时的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 关闭时的颜色 */
     inactiveColor: { type: String, default: '#ffffff' },
     /** v-model 绑定值，是否选中 */

package/components/u-tabs/types.ts

@@ -22,9 +22,9 @@ export const TabsProps = {
     /** 过渡动画时长, 单位s */
     duration: { type: [String, Number] as PropType<number | string>, default: 0.5 },
     /** 选中项的主题颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** 未选中项的颜色 */
-    inactiveColor: { type: String, default: $u.color.mainColor },
+    inactiveColor: { type: String, default: () => $u.color.mainColor },
     /** 菜单底部移动的bar的宽度，单位rpx */
     barWidth: { type: [String, Number] as PropType<number | string>, default: 40 },
     /** 移动bar的高度 */

package/components/u-tabs-swiper/types.ts

@@ -22,9 +22,9 @@ export const TabsSwiperProps = {
     /** tabs组件外部swiper的宽度，单位rpx */
     swiperWidth: { type: [String, Number] as PropType<number | string>, default: 750 },
     /** 滑块和激活tab文字的颜色 */
-    activeColor: { type: String, default: $u.color.primary },
+    activeColor: { type: String, default: () => $u.color.primary },
     /** tabs文字颜色 */
-    inactiveColor: { type: String, default: $u.color.mainColor },
+    inactiveColor: { type: String, default: () => $u.color.mainColor },
     /** 滑块宽度，单位rpx */
     barWidth: { type: [Number, String] as PropType<number | string>, default: 40 },
     /** 滑块高度，单位rpx */

package/components/u-text/u-text.vue

@@ -22,10 +22,12 @@
             :class="['u-text__price', props.type && `u-text__value--${props.type}`]"
             :style="textValueStyle"
         >
-            ￥{{ displayValue }}
+            <slot>￥{{ displayValue }}</slot>
         </text>
         <!-- link 模式 -->
-        <u-link v-else-if="props.mode === 'link'" :href="props.href" underLine>{{ displayValue }}</u-link>
+        <u-link v-else-if="props.mode === 'link'" :href="props.href" underLine>
+            <slot>{{ displayValue }}</slot>
+        </u-link>
         <template v-else-if="props.openType && isMp">
             <button
                 class="u-reset-button u-text__value"
@@ -46,7 +48,7 @@
                 :show-message-card="props.showMessageCard"
                 :app-parameter="props.appParameter"
             >
-                {{ displayValue }}
+                <slot>{{ displayValue }}</slot>
             </button>
         </template>
         <!-- 默认模式 -->
@@ -56,7 +58,7 @@
             :style="textValueStyle"
             :class="[props.type && `u-text__value--${props.type}`, props.lines ? `u-line-${props.lines}` : '']"
         >
-            {{ displayValue }}
+            <slot>{{ displayValue }}</slot>
         </text>
         <!-- 后缀图标 -->
         <view class="u-text__icon u-text__suffix-icon" v-if="props.suffixIcon">

package/index.ts

@@ -15,9 +15,9 @@ declare const uni: {
 const install = (app: any, options?: UViewProOptions): void => {
     uni.$u = $u;
     if (options) {
-        // 配置主题
+        // 配置主题：使用 $u.setTheme 以就地更新 reactive $u.color
         if (options.theme) {
-            $u.color = $u.deepMerge($u.color, options.theme);
+            $u.setTheme?.(options.theme);
         }
         // 设置调试模式
         logger

package/libs/function/color.ts

@@ -1,6 +1,8 @@
-import type { ThemeColor } from '../../types/global';
+import type { ColorType, ThemeColor } from '../../types/global';
+import { reactive } from 'vue';
 
-const color: ThemeColor = {
+// 使用 reactive 包装颜色对象，使其在运行时可被响应式读取与更新
+const color: ThemeColor = reactive({
     primary: '#2979ff',
     primaryDark: '#2b85e4',
     primaryDisabled: '#a0cfff',
@@ -32,6 +34,10 @@ const color: ThemeColor = {
     tipsColor: '#909399',
     lightColor: '#c0c4cc',
     borderColor: '#e4e7ed'
-};
+});
+
+export function getColor(name: ColorType) {
+    return (color as any)[name] || '';
+}
 
 export default color;

package/libs/index.ts

@@ -12,6 +12,8 @@ import colorGradients from './function/colorGradient';
 import guid from './function/guid';
 // 主题相关颜色,info|success|warning|primary|default|error,此颜色已在uview.scss中定义,但是为js中也能使用,故也定义一份
 import color from './function/color';
+import { getColor } from './function/color';
+import type { ThemeColor } from '../types/global';
 // 根据type获取图标名称
 import type2icon from './function/type2icon';
 // 打乱数组的顺序
@@ -242,6 +244,25 @@ export function kebabCase(word: string): string {
     return newWord;
 }
 
+/**
+ * 运行时设置主题颜色（就地合并到 reactive 的 $u.color）
+ * @param theme Partial<ThemeColor>
+ */
+function setTheme(theme: Partial<ThemeColor> | undefined) {
+    if (!theme) return;
+    try {
+        const merged = deepMerge($u.color, theme);
+        Object.keys(merged).forEach(k => {
+            $u.color[k] = (merged as any)[k];
+        });
+    } catch (e) {
+        // 兜底：直接 assign
+        Object.keys(theme).forEach(k => {
+            $u.color[k] = (theme as any)[k];
+        });
+    }
+}
+
 export {
     queryParams,
     route,
@@ -249,6 +270,7 @@ export {
     timeFrom,
     guid,
     color,
+    getColor,
     sys,
     os,
     type2icon,
@@ -268,7 +290,8 @@ export {
     clipboard,
     config,
     zIndex,
-    mitt
+    mitt,
+    setTheme
 };
 
 export const $u = {
@@ -281,6 +304,7 @@ export const $u = {
     colorToRgba: colorGradients.colorToRgba,
     guid,
     color,
+    getColor,
     sys,
     os,
     type2icon,
@@ -309,7 +333,8 @@ export const $u = {
     formatName,
     addStyle,
     toStyle,
-    kebabCase
+    kebabCase,
+    setTheme
 };
 
 // 颜色相关方法单独导出

package/libs/util/canvas-2d.ts

@@ -0,0 +1,49 @@
+/**
+ * 适配 canvas 2d 上下文
+ * @param ctx canvas 2d 上下文
+ * @returns
+ */
+export function canvas2d(ctx: CanvasRenderingContext2D): UniApp.CanvasContext {
+    return Object.assign(ctx, {
+        setFillStyle(color: string | CanvasGradient) {
+            ctx.fillStyle = color;
+        },
+        setStrokeStyle(color: string | CanvasGradient | CanvasPattern) {
+            ctx.strokeStyle = color;
+        },
+        setLineWidth(lineWidth: number) {
+            ctx.lineWidth = lineWidth;
+        },
+        setLineCap(lineCap: 'butt' | 'round' | 'square') {
+            ctx.lineCap = lineCap;
+        },
+
+        setFontSize(font: string) {
+            ctx.font = font;
+        },
+        setGlobalAlpha(alpha: number) {
+            ctx.globalAlpha = alpha;
+        },
+        setLineJoin(lineJoin: 'bevel' | 'round' | 'miter') {
+            ctx.lineJoin = lineJoin;
+        },
+        setTextAlign(align: 'left' | 'center' | 'right') {
+            ctx.textAlign = align;
+        },
+        setMiterLimit(miterLimit: number) {
+            ctx.miterLimit = miterLimit;
+        },
+        setShadow(offsetX: number, offsetY: number, blur: number, color: string) {
+            ctx.shadowOffsetX = offsetX;
+            ctx.shadowOffsetY = offsetY;
+            ctx.shadowBlur = blur;
+            ctx.shadowColor = color;
+        },
+        setTextBaseline(textBaseline: 'top' | 'bottom' | 'middle') {
+            ctx.textBaseline = textBaseline;
+        },
+        createCircularGradient() {},
+        draw() {},
+        addColorStop() {}
+    }) as unknown as UniApp.CanvasContext;
+}

package/package.json

@@ -1,9 +1,9 @@
 {
     "id": "uview-pro",
     "name": "uview-pro",
-    "displayName": "【Vue3重构版】uView Pro｜基于Vue3+TS全面重构的70+精选UI组件库",
-    "version": "0.3.7",
-    "description": "uView Pro，是全面支持Vue3的uni-app生态框架，70+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
+    "displayName": "【Vue3重构版】uView Pro｜基于Vue3+TS全面重构的80+精选UI组件库",
+    "version": "0.3.9",
+    "description": "uView Pro，是全面支持Vue3的uni-app生态框架，80+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
     "main": "index.ts",
     "module": "index.ts",
     "browser": "index.ts",

package/types/components.d.ts

@@ -44,7 +44,7 @@ declare module 'vue' {
         uLine: (typeof import('../components/u-line/u-line.vue'))['default'];
         uLineProgress: (typeof import('../components/u-line-progress/u-line-progress.vue'))['default'];
         uLink: (typeof import('../components/u-link/u-link.vue'))['default'];
-        uLoadMore: (typeof import('../components/u-loadmore/u-loadmore.vue'))['default'];
+        uLoadmore: (typeof import('../components/u-loadmore/u-loadmore.vue'))['default'];
         uLoading: (typeof import('../components/u-loading/u-loading.vue'))['default'];
         uLoadingPopup: (typeof import('../components/u-loading-popup/u-loading-popup.vue'))['default'];
         uMask: (typeof import('../components/u-mask/u-mask.vue'))['default'];
@@ -95,6 +95,7 @@ declare module 'vue' {
         uStatusBar: (typeof import('../components/u-status-bar/u-status-bar.vue'))['default'];
         uSafeBottom: (typeof import('../components/u-safe-bottom/u-safe-bottom.vue'))['default'];
         uTextarea: (typeof import('../components/u-textarea/u-textarea.vue'))['default'];
+        uFab: (typeof import('../components/u-fab/u-fab.vue'))['default'];
     }
 }
 

package/types/global.d.ts

@@ -290,35 +290,51 @@ export type TagSize = 'default' | 'mini' | 'medium';
 export type ToastPosition = 'top' | 'center' | 'bottom';
 export type UploadSizeType = 'original' | 'compressed';
 export type UploadSourceType = 'album' | 'camera';
+// fab 组件 position
+export type FabPosition =
+    | 'left-top'
+    | 'right-top'
+    | 'left-bottom'
+    | 'right-bottom'
+    | 'left-center'
+    | 'right-center'
+    | 'top-center'
+    | 'bottom-center';
+// fab 组件 direction
+export type FabDirection = 'top' | 'bottom' | 'left' | 'right';
+// fab 组件 gap
+export type FabGap = Partial<Record<'top' | 'left' | 'right' | 'bottom', number>>;
+
+export type ColorType =
+    | 'primary'
+    | 'primaryDark'
+    | 'primaryDisabled'
+    | 'primaryLight'
+    | 'bgColor'
+    | 'info'
+    | 'infoDark'
+    | 'infoDisabled'
+    | 'infoLight'
+    | 'warning'
+    | 'warningDark'
+    | 'warningDisabled'
+    | 'warningLight'
+    | 'error'
+    | 'errorDark'
+    | 'errorDisabled'
+    | 'errorLight'
+    | 'success'
+    | 'successDark'
+    | 'successDisabled'
+    | 'successLight'
+    | 'mainColor'
+    | 'contentColor'
+    | 'tipsColor'
+    | 'lightColor'
+    | 'borderColor';
+
 // 自定义主题色
-export type ThemeColor = Partial<{
-    primary: string;
-    primaryDark: string;
-    primaryDisabled: string;
-    primaryLight: string;
-    bgColor: string;
-    info: string;
-    infoDark: string;
-    infoDisabled: string;
-    infoLight: string;
-    warning: string;
-    warningDark: string;
-    warningDisabled: string;
-    warningLight: string;
-    error: string;
-    errorDark: string;
-    errorDisabled: string;
-    errorLight: string;
-    success: string;
-    successDark: string;
-    successDisabled: string;
-    successLight: string;
-    mainColor: string;
-    contentColor: string;
-    tipsColor: string;
-    lightColor: string;
-    borderColor: string;
-}>;
+export type ThemeColor = Partial<Record<ColorType, string>>;
 
 export type LogConfig = Partial<{
     debug?: boolean;