uview-pro 0.5.0 → 0.5.2

package/components/u-transition/u-transition.vue

@@ -0,0 +1,437 @@
+<template>
+    <view
+        v-if="rendered"
+        ref="rootRef"
+        class="u-transition"
+        :class="[customClass, animationClass]"
+        :style="$u.toStyle(animationStyle, customStyle)"
+        @animationstart="handleAnimationStart"
+        @animationend="handleAnimationEnd"
+    >
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-transition',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import { TransitionProps } from './types';
+import { $u } from '../..';
+import type { TransitionDuration } from '../../types/global';
+
+/**
+ * transition 过渡动画
+ * @description 统一的过渡与进出场动效封装，支持多种预设动画和自定义时长。
+ * @tutorial https://uviewpro.cn/zh/components/transition.html
+ * @property {Boolean} show 是否展示内容（默认true）
+ * @property {String} name 预设动画名，可选 fade/slide-up/slide-down/slide-left/slide-right/zoom-in/zoom-out（默认fade）
+ * @property {String} mode 进入/离开过渡模式，等同于原生 transition 的 mode（默认空）
+ * @property {Number|Object} duration 进入/离开动画时长，单位ms，支持 { enter, leave }（默认300）
+ * @property {String} timing-function 动画曲线（默认cubic-bezier(0.2,0.8,0.2,1)）
+ * @property {Number} delay 动画延迟，单位ms（默认0）
+ * @property {Boolean} appear 首次渲染时是否执行动画（默认false）
+ * @property {String} custom-class 自定义 class
+ * @property {String|Object} custom-style 自定义样式
+ * @example <u-transition :show="visible" name="slide-up"><view>content</view></u-transition>
+ */
+
+const props = defineProps(TransitionProps);
+
+const emit = defineEmits([
+    'before-enter',
+    'enter',
+    'after-enter',
+    'enter-cancelled',
+    'before-leave',
+    'leave',
+    'after-leave',
+    'leave-cancelled'
+]);
+
+const normalizeDuration = (duration: number | TransitionDuration) => {
+    if (typeof duration === 'number') {
+        return {
+            enter: duration,
+            leave: duration
+        };
+    }
+    return {
+        enter: duration?.enter ?? 300,
+        leave: duration?.leave ?? duration?.enter ?? 300
+    };
+};
+
+const rootRef = ref();
+const rendered = ref<boolean>(props.show);
+const animationPhase = ref<'enter' | 'leave' | ''>('');
+const animating = ref(false);
+const initialized = ref(false);
+
+const transitionDuration = computed(() => normalizeDuration(props.duration));
+
+const animationStyle = computed(() => {
+    const currentDuration =
+        animationPhase.value === 'leave' ? transitionDuration.value.leave : transitionDuration.value.enter;
+    return {
+        '--u-transition-duration-enter': `${transitionDuration.value.enter}ms`,
+        '--u-transition-duration-leave': `${transitionDuration.value.leave}ms`,
+        '--u-transition-delay': `${props.delay}ms`,
+        '--u-transition-timing': props.timingFunction,
+        animationDuration: `${currentDuration}ms`,
+        animationDelay: `${props.delay}ms`,
+        animationTimingFunction: props.timingFunction
+    };
+});
+
+const animationClass = computed(() => {
+    if (!animationPhase.value) {
+        return '';
+    }
+    return `u-transition-${props.name}-${animationPhase.value}`;
+});
+
+const getEl = () => rootRef.value as any;
+
+const startEnter = () => {
+    if (animating.value && animationPhase.value === 'enter') {
+        return;
+    }
+    if (animating.value && animationPhase.value === 'leave') {
+        emit('leave-cancelled', getEl());
+    }
+    rendered.value = true;
+    animationPhase.value = 'enter';
+    animating.value = true;
+    emit('before-enter', getEl());
+};
+
+const startLeave = () => {
+    if (!rendered.value) {
+        return;
+    }
+    if (animating.value && animationPhase.value === 'leave') {
+        return;
+    }
+    if (animating.value && animationPhase.value === 'enter') {
+        emit('enter-cancelled', getEl());
+    }
+    animationPhase.value = 'leave';
+    animating.value = true;
+    emit('before-leave', getEl());
+};
+
+const handleAnimationStart = () => {
+    if (animationPhase.value === 'enter') {
+        emit('enter', getEl());
+    } else if (animationPhase.value === 'leave') {
+        emit('leave', getEl());
+    }
+};
+
+const handleAnimationEnd = () => {
+    if (animationPhase.value === 'enter') {
+        animating.value = false;
+        animationPhase.value = '';
+        emit('after-enter', getEl());
+        return;
+    }
+    if (animationPhase.value === 'leave') {
+        animating.value = false;
+        animationPhase.value = '';
+        rendered.value = false;
+        emit('after-leave', getEl());
+    }
+};
+
+// 根据mode处理动画顺序（主要用于快速切换时的时序控制）
+const shouldWaitForAnimation = (newPhase: 'enter' | 'leave') => {
+    if (!animating.value) return false;
+
+    const currentPhase = animationPhase.value;
+
+    // 如果当前正在进行相反的动画，根据mode决定是否需要等待
+    if (props.mode === 'out-in' && currentPhase === 'leave' && newPhase === 'enter') {
+        return true; // 等待离开动画完成
+    }
+    if (props.mode === 'in-out' && currentPhase === 'enter' && newPhase === 'leave') {
+        return true; // 等待进入动画完成
+    }
+
+    return false;
+};
+
+watch(
+    () => props.show,
+    value => {
+        if (!initialized.value) {
+            initialized.value = true;
+            if (value) {
+                rendered.value = true;
+                if (props.appear) {
+                    nextTick(() => startEnter());
+                }
+            } else {
+                rendered.value = false;
+            }
+            return;
+        }
+        if (value) {
+            if (shouldWaitForAnimation('enter')) {
+                // 根据mode等待当前动画完成后再开始进入动画
+                // 简单的方式：延迟到下一个tick检查
+                nextTick(() => {
+                    if (!animating.value) {
+                        startEnter();
+                    }
+                });
+            } else {
+                startEnter();
+            }
+        } else {
+            if (shouldWaitForAnimation('leave')) {
+                // 根据mode等待当前动画完成后再开始离开动画
+                nextTick(() => {
+                    if (!animating.value) {
+                        startLeave();
+                    }
+                });
+            } else {
+                startLeave();
+            }
+        }
+    },
+    { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-transition {
+    // display: inline-flex;
+    // width: auto;
+}
+
+@mixin animation-base {
+    animation-fill-mode: both;
+}
+
+.u-transition-fade-enter {
+    @include animation-base;
+    animation-name: u-transition-fade-in;
+}
+.u-transition-fade-leave {
+    @include animation-base;
+    animation-name: u-transition-fade-out;
+}
+
+.u-transition-slide-up-enter {
+    @include animation-base;
+    animation-name: u-transition-slide-up-in;
+}
+.u-transition-slide-up-leave {
+    @include animation-base;
+    animation-name: u-transition-slide-up-out;
+}
+
+.u-transition-slide-down-enter {
+    @include animation-base;
+    animation-name: u-transition-slide-down-in;
+}
+.u-transition-slide-down-leave {
+    @include animation-base;
+    animation-name: u-transition-slide-down-out;
+}
+
+.u-transition-slide-left-enter {
+    @include animation-base;
+    animation-name: u-transition-slide-left-in;
+}
+.u-transition-slide-left-leave {
+    @include animation-base;
+    animation-name: u-transition-slide-left-out;
+}
+
+.u-transition-slide-right-enter {
+    @include animation-base;
+    animation-name: u-transition-slide-right-in;
+}
+.u-transition-slide-right-leave {
+    @include animation-base;
+    animation-name: u-transition-slide-right-out;
+}
+
+.u-transition-zoom-in-enter {
+    @include animation-base;
+    animation-name: u-transition-zoom-in-in;
+}
+.u-transition-zoom-in-leave {
+    @include animation-base;
+    animation-name: u-transition-zoom-in-out;
+}
+
+.u-transition-zoom-out-enter {
+    @include animation-base;
+    animation-name: u-transition-zoom-out-in;
+}
+.u-transition-zoom-out-leave {
+    @include animation-base;
+    animation-name: u-transition-zoom-out-out;
+}
+
+@keyframes u-transition-fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes u-transition-fade-out {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes u-transition-slide-up-in {
+    0% {
+        opacity: 0;
+        transform: translate3d(0, 40rpx, 0);
+    }
+    100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes u-transition-slide-up-out {
+    0% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+    100% {
+        opacity: 0;
+        transform: translate3d(0, 40rpx, 0);
+    }
+}
+
+@keyframes u-transition-slide-down-in {
+    0% {
+        opacity: 0;
+        transform: translate3d(0, -40rpx, 0);
+    }
+    100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes u-transition-slide-down-out {
+    0% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+    100% {
+        opacity: 0;
+        transform: translate3d(0, -40rpx, 0);
+    }
+}
+
+@keyframes u-transition-slide-left-in {
+    0% {
+        opacity: 0;
+        transform: translate3d(40rpx, 0, 0);
+    }
+    100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes u-transition-slide-left-out {
+    0% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+    100% {
+        opacity: 0;
+        transform: translate3d(40rpx, 0, 0);
+    }
+}
+
+@keyframes u-transition-slide-right-in {
+    0% {
+        opacity: 0;
+        transform: translate3d(-40rpx, 0, 0);
+    }
+    100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes u-transition-slide-right-out {
+    0% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+    100% {
+        opacity: 0;
+        transform: translate3d(-40rpx, 0, 0);
+    }
+}
+
+@keyframes u-transition-zoom-in-in {
+    0% {
+        opacity: 0;
+        transform: scale(0.85);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+@keyframes u-transition-zoom-in-out {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(0.85);
+    }
+}
+
+@keyframes u-transition-zoom-out-in {
+    0% {
+        opacity: 0;
+        transform: scale(1.1);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+@keyframes u-transition-zoom-out-out {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(1.1);
+    }
+}
+</style>

package/components/u-upload/types.ts

@@ -34,7 +34,7 @@ export const UploadProps = {
     /** 是否自定义上传按钮 */
     customBtn: { type: Boolean, default: false },
     /** 上传按钮文字 */
-    uploadText: { type: String, default: () => t('upload.uploadText') },
+    uploadText: { type: String, default: () => t('uUpload.uploadText') },
     /** 上传地址 */
     action: { type: String, default: '' },
     /** 是否禁用 */

package/components/u-upload/u-upload.vue

@@ -205,11 +205,11 @@ function selectFile() {
                 if (!props.multiple && index >= 1) return;
                 if (val.size > Number(props.maxSize)) {
                     emit('on-oversize', val, lists.value, props.index);
-                    showToast(t('upload.overSize'));
+                    showToast(t('uUpload.overSize'));
                 } else {
                     if (Number(props.maxCount) <= lists.value.length) {
                         emit('on-exceed', val, lists.value, props.index);
-                        showToast(t('upload.overMaxCount'));
+                        showToast(t('uUpload.overMaxCount'));
                         return;
                     }
                     lists.value.push({ url: val.path, progress: 0, error: false, file: val });
@@ -248,7 +248,7 @@ function retry(index: number) {
     lists.value[index].error = false;
     lists.value[index].response = null;
     if (props.showTips) {
-        uni.showLoading({ title: t('upload.reUpload') });
+        uni.showLoading({ title: t('uUpload.reUpload') });
     }
     uploadFile(index);
 }
@@ -301,7 +301,7 @@ async function uploadFile(index = 0) {
     }
     // 检查上传地址
     if (!props.action) {
-        showToast(t('upload.noAction'), true);
+        showToast(t('uUpload.noAction'), true);
         return;
     }
     lists.value[index].error = false;
@@ -355,7 +355,7 @@ function uploadError(index: number, err: any) {
     lists.value[index].error = true;
     lists.value[index].response = null;
     emit('on-error', err, index, lists.value, props.index);
-    showToast(t('upload.uploadFailed'));
+    showToast(t('uUpload.uploadFailed'));
 }
 
 /**
@@ -363,8 +363,8 @@ function uploadError(index: number, err: any) {
  */
 function deleteItem(index: number) {
     uni.showModal({
-        title: t('upload.modalTitle'),
-        content: t('upload.deleteConfirm'),
+        title: t('uUpload.modalTitle'),
+        content: t('uUpload.deleteConfirm'),
         success: async (res: any) => {
             if (res.confirm) {
                 // 先检查是否有定义before-remove移除前钩子
@@ -385,11 +385,11 @@ function deleteItem(index: number) {
                             })
                             .catch(() => {
                                 // 如果进入promise的reject，终止删除操作
-                                showToast(t('upload.terminatedRemove'));
+                                showToast(t('uUpload.terminatedRemove'));
                             });
                     } else if (beforeResponse === false) {
                         // 返回false，终止删除
-                        showToast(t('upload.terminatedRemove'));
+                        showToast(t('uUpload.terminatedRemove'));
                     } else {
                         // 如果返回true，执行删除操作
                         handlerDeleteItem(index);
@@ -413,7 +413,7 @@ function handlerDeleteItem(index: number) {
     }
     lists.value.splice(index, 1);
     emit('on-remove', index, lists.value, props.index);
-    showToast(t('upload.removeSuccess'));
+    showToast(t('uUpload.removeSuccess'));
 }
 
 /**
@@ -442,7 +442,7 @@ function doPreviewImage(url: string, index: number) {
             emit('on-preview', url, lists.value, props.index);
         },
         fail: () => {
-            uni.showToast({ title: t('upload.previewFailed'), icon: 'none' });
+            uni.showToast({ title: t('uUpload.previewFailed'), icon: 'none' });
         }
     });
 }
@@ -471,7 +471,7 @@ function checkFileExt(file: any) {
         // 转为小写
         return ext.toLowerCase() === fileExt;
     });
-    if (!noArrowExt) showToast(t('upload.notAllowedExt', { ext: fileExt }));
+    if (!noArrowExt) showToast(t('uUpload.notAllowedExt', { ext: fileExt }));
     return noArrowExt;
 }
 

package/components/u-verification-code/types.ts

@@ -13,11 +13,11 @@ export const VerificationCodeProps = {
     /** 倒计时时长，单位秒 */
     seconds: { type: [String, Number] as PropType<string | number>, default: 60 },
     /** 开始时按钮文字 */
-    startText: { type: String, default: () => t('verificationCode.startText') },
+    startText: { type: String, default: () => t('uVerificationCode.startText') },
     /** 倒计时进行中按钮文字，X为剩余秒数 */
-    changeText: { type: String, default: () => t('verificationCode.changeText') },
+    changeText: { type: String, default: () => t('uVerificationCode.changeText') },
     /** 结束时按钮文字 */
-    endText: { type: String, default: () => t('verificationCode.endText') },
+    endText: { type: String, default: () => t('uVerificationCode.endText') },
     /** 是否保持倒计时不中断（如页面切换） */
     keepRunning: { type: Boolean, default: false },
     /** 唯一标识key，用于区分多个验证码组件 */

package/index.ts

@@ -81,6 +81,8 @@ const install = (app: any, options?: UViewProOptions): void => {
         } else {
             // 默认初始化系统主题
             initTheme();
+            // 默认初始化内置语言包以保证可用
+            configProvider.initLocales();
         }
     } catch (error) {
         console.error('[install options] Error:', error);

package/libs/hooks/index.ts

@@ -4,3 +4,5 @@ export * from './useCompRelation';
 export * from './useTheme';
 export * from './useColor';
 export * from './useLocale';
+export * from './useDebounce';
+export * from './useThrottle';

package/libs/hooks/useDebounce.ts

@@ -0,0 +1,15 @@
+export function useDebounce(delay: number = 500) {
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+    // 防抖函数
+    function debounce(callback: () => void, debounceTime?: number) {
+        debounceTime = debounceTime || delay;
+        if (timeout) clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            callback();
+        }, debounceTime);
+    }
+
+    return {
+        debounce
+    };
+}

package/libs/hooks/useThrottle.ts

@@ -0,0 +1,16 @@
+export function useThrottle(delay: number = 500) {
+    let previous: number = 0;
+    // 节流函数
+    function throttle(callback: () => void, throttleTime?: number) {
+        throttleTime = throttleTime || delay;
+        let now = Date.now();
+        if (now - previous > throttleTime) {
+            callback();
+            previous = now;
+        }
+    }
+
+    return {
+        throttle
+    };
+}