uview-pro 0.2.2 → 0.2.3

package/changelog.md

@@ -1,3 +1,24 @@
+## 0.2.3（2025-10-06）
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-collapse:** 修复手风琴组件在头条小程序的兼容性 ([3189dc4](https://github.com/anyup/uView-Pro/commit/3189dc468edd977bc3e20256bd8a6c1b124bc4e6))
+
+### ✨ Features | 新功能
+
+- **util:** 新增日志功能并调整主题配置 ([5e07894](https://github.com/anyup/uView-Pro/commit/5e078945fb64867e4e49be1c9228aac7be8c1104))
+- **components:** 重构复选框和手风琴组件，新增父子组件通信库 ([55b9b60](https://github.com/anyup/uView-Pro/commit/55b9b6069f1a40a6c4190b27952bcf9a489f8923))
+- **util:** 添加自定义事件总线 ([6589f4f](https://github.com/anyup/uView-Pro/commit/6589f4f20b1391a9267670f6622538d4a6db0d82))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **components:** 重构复选框和折叠组件，支持多平台小程序，微信，支付宝，头条 ([0ebc0f5](https://github.com/anyup/uView-Pro/commit/0ebc0f5edcc1df6ccd9baaaf659a0bde7b37d21d))
+- **hooks:** 移除组件关系热更新时的错误日志输出 ([c8a2a3d](https://github.com/anyup/uView-Pro/commit/c8a2a3d041a55f94c8bd86d47eaaee9657cbd597))
+
+### 📝 Documentation | 文档
+
+- **readme:** 更新微信交流群二维码 ([cff3a3d](https://github.com/anyup/uView-Pro/commit/cff3a3dbb035ca365a1ab9839b14f300ef775c16))
+
 ## 0.2.2（2025-09-30）
 
 ### 🚀 Chore | 构建/工程依赖/工具

package/components/u-checkbox/u-checkbox.vue

@@ -1,7 +1,12 @@
 <template>
     <view class="u-checkbox" :style="[checkboxStyle]">
-        <view class="u-checkbox__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
-            <u-icon class="u-checkbox__icon-wrap__icon" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor" />
+        <view class="u-checkbox__icon-wrap" @tap="toggle" :class="iconClass" :style="$u.toStyle(iconStyle)">
+            <u-icon
+                class="u-checkbox__icon-wrap__icon"
+                name="checkbox-mark"
+                :size="checkboxIconSize"
+                :color="iconColor"
+            />
         </view>
         <view
             class="u-checkbox__label"
@@ -15,15 +20,24 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-checkbox',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
-import { computed, inject, getCurrentInstance, onMounted } from 'vue';
-import { $u } from '../..';
+import { computed, onUnmounted } from 'vue';
+import { $u, useChildren, onParentEvent } from '../..';
 import { CheckboxProps } from './types';
 
-defineOptions({
-    name: 'u-checkbox'
-});
-
 /**
  * checkbox 复选框
  * @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
@@ -40,54 +54,44 @@ defineOptions({
  */
 
 const props = defineProps(CheckboxProps);
-
 const emit = defineEmits(['change', 'update:modelValue']);
 
-const instance = getCurrentInstance();
-const instanceProxy = instance?.proxy;
-// 父组件 group 注入
-let parent = inject<any>('u-checkbox-group', null);
-
-// 组件注册到 group
-onMounted(() => {
-    // 兼容头条小程序不支持provide/inject
-    // #ifdef MP-TOUTIAO
-    parent = $u.parentData('u-checkbox-group', instance);
-    // #endif
-    // 如果存在u-checkbox-group，将本组件的实例塞进父组件的children中
-    if (parent && parent.children && !parent.children.value.includes(instanceProxy)) {
-        parent.children.value.push(instanceProxy);
-    }
-});
+// 使用子组件Hook
+const { childId, parentExposed } = useChildren('u-checkbox', 'u-checkbox-group');
 
 // 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置
 const isDisabled = computed(() => {
-    return props.disabled !== '' ? props.disabled : parent ? parent.props.disabled : false;
+    return props.disabled !== '' ? props.disabled : (parentExposed.value?.props?.disabled ?? false);
 });
+
 // 是否禁用label点击
 const isLabelDisabled = computed(() => {
-    return props.labelDisabled !== '' ? props.labelDisabled : parent ? parent.props.labelDisabled : false;
+    return props.labelDisabled !== '' ? props.labelDisabled : (parentExposed.value?.props?.labelDisabled ?? false);
 });
+
 // 组件尺寸，对应size的值，默认值为34rpx
 const checkboxSize = computed(() => {
-    return props.size ? props.size : parent ? parent.props.size : 34;
+    return props.size ? props.size : (parentExposed.value?.props?.size ?? 34);
 });
+
 // 组件的勾选图标的尺寸，默认20
 const checkboxIconSize = computed(() => {
-    return props.iconSize ? props.iconSize : parent ? parent.props.iconSize : 20;
+    return props.iconSize ? props.iconSize : (parentExposed.value?.props?.iconSize ?? 20);
 });
+
 // 组件选中激活时的颜色
 const elActiveColor = computed(() => {
-    return props.activeColor ? props.activeColor : parent ? parent.props.activeColor : 'primary';
+    return props.activeColor ? props.activeColor : (parentExposed.value?.props?.activeColor ?? 'primary');
 });
+
 // 组件的形状
 const elShape = computed(() => {
-    return props.shape ? props.shape : parent ? parent.props.shape : 'square';
+    return props.shape ? props.shape : (parentExposed.value?.props?.shape ?? 'square');
 });
+
 // 图标样式
 const iconStyle = computed(() => {
     let style: Record<string, string> = {};
-    // 既要判断是否手动禁用，还要判断用户v-model绑定的值，如果绑定为false，那么也无法选中
     if (elActiveColor.value && props.modelValue && !isDisabled.value) {
         style.borderColor = elActiveColor.value;
         style.backgroundColor = elActiveColor.value;
@@ -96,36 +100,35 @@ const iconStyle = computed(() => {
     style.height = $u.addUnit(checkboxSize.value);
     return style;
 });
+
 // checkbox内部的勾选图标，如果选中状态，为白色，否则为透明色即可
 const iconColor = computed(() => {
     return props.modelValue ? '#ffffff' : 'transparent';
 });
+
 const iconClass = computed(() => {
     let classes: string[] = [];
     classes.push('u-checkbox__icon-wrap--' + elShape.value);
     if (props.modelValue == true) classes.push('u-checkbox__icon-wrap--checked');
     if (isDisabled.value) classes.push('u-checkbox__icon-wrap--disabled');
     if (props.modelValue && isDisabled.value) classes.push('u-checkbox__icon-wrap--disabled--checked');
-    // 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
     return classes.join(' ');
 });
+
 const checkboxStyle = computed(() => {
     let style: Record<string, string> = {};
-    if (parent && parent.props.width) {
-        style.width = parent.props.width;
+    if (parentExposed.value?.props?.width) {
+        style.width = parentExposed.value.props.width;
         // #ifdef MP
-        // 各家小程序因为它们特殊的编译结构，使用float布局
         style.float = 'left';
         // #endif
         // #ifndef MP
-        // H5和APP使用flex布局
-        style.flex = `0 0 ${parent.props.width}`;
+        style.flex = `0 0 ${parentExposed.value.props.width}`;
         // #endif
     }
-    if (parent && parent.props.wrap) {
+    if (parentExposed.value?.props?.wrap) {
         style.width = '100%';
         // #ifndef MP
-        // H5和APP使用flex布局，将宽度设置100%，即可自动换行
         style.flex = '0 0 100%';
         // #endif
     }
@@ -140,6 +143,7 @@ function onClickLabel() {
         setValue();
     }
 }
+
 /**
  * 点击icon
  */
@@ -148,48 +152,64 @@ function toggle() {
         setValue();
     }
 }
+
 /**
  * 触发change事件
  */
 function emitEvent() {
-    emit('change', {
+    const changeValue = {
         value: !props.modelValue,
         name: props.name
-    });
-    // 执行父组件u-checkbox-group的事件方法
-    // 等待下一个周期再执行，因为emit('input')作用于父组件，再反馈到子组件内部，需要时间
+    };
+    emit('change', changeValue);
+
+    // 通知父组件状态变化
     setTimeout(() => {
-        if (parent && parent.children && parent.children.value && parent.children.value.includes(instanceProxy) && parent.emitEvent) parent.emitEvent();
+        if (parentExposed.value?.emitEvent) {
+            parentExposed.value.emitEvent();
+        }
     }, 80);
 }
+
 /**
- * 设置input的值，这里通过input事件，设置通过v-model绑定的组件的值
+ * 设置通过v-model绑定的组件的值
  */
 function setValue() {
     // 判断是否超过了可选的最大数量
-    let checkedNum = 0;
-    if (parent && parent.children && parent.children.value) {
-        // 只要父组件的某一个子元素的value为true，就加1(已有的选中数量)
-        parent.children.value.forEach((val: any) => {
-            if (val.value) checkedNum++;
-        });
-    }
-    // 如果原来为选中状态，那么可以取消
     if (props.modelValue == true) {
         emitEvent();
-        emit('update:modelValue', !props.modelValue);
+        emit('update:modelValue', false);
     } else {
-        // 如果超出最多可选项，提示
-        if (parent && checkedNum >= parent.props.max) {
-            return $u.toast(`最多可选${parent.props.max}项`);
+        if (!parentExposed.value?.validateSelection()) {
+            return;
         }
-        // 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
         emitEvent();
-        emit('update:modelValue', !props.modelValue);
+        emit('update:modelValue', true);
     }
 }
 
-defineExpose({ setValue, emitEvent });
+// 监听父组件事件
+const unsubscribeSetChecked = onParentEvent(childId, 'setChecked', data => {
+    if (!isDisabled.value) {
+        emit('update:modelValue', data.checked);
+        if (data.checked !== props.modelValue) {
+            emitEvent();
+        }
+    }
+});
+
+// 在适当的时候取消监听
+onUnmounted(() => {
+    unsubscribeSetChecked();
+});
+
+defineExpose({
+    isChecked: computed(() => props.modelValue),
+    name: props.name,
+    setValue,
+    emitEvent,
+    props
+});
 </script>
 
 <style lang="scss" scoped>
@@ -222,7 +242,6 @@ defineExpose({ setValue, emitEvent });
         transition-duration: 0.2s;
 
         /* #ifdef MP-TOUTIAO */
-        // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
         &__icon {
             line-height: 0;
         }

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

@@ -8,7 +8,7 @@ import type { Shape } from '../../types/global';
 
 export const CheckboxGroupProps = {
     /** 最多能选中多少个checkbox */
-    max: { type: [Number, String], default: 999 },
+    max: { type: Number, default: 999 },
     /** 是否禁用所有复选框 */
     disabled: { type: Boolean, default: false },
     /** 在表单内提交时的标识符 */

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

@@ -4,15 +4,24 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-checkbox-group',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
-import { ref, getCurrentInstance, provide } from 'vue';
-import { $u } from '../..';
+import { getCurrentInstance, computed } from 'vue';
+import { $u, useParent } from '../..';
 import { CheckboxGroupProps } from './types';
 
-defineOptions({
-    name: 'u-checkbox-group'
-});
-
 /**
  * checkboxGroup 开关选择器父组件Group
  * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
@@ -29,22 +38,12 @@ defineOptions({
  * @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
  * @example <u-checkbox-group></u-checkbox-group>
  */
-
+const instance = getCurrentInstance();
 const props = defineProps(CheckboxGroupProps);
+const emit = defineEmits(['update:modelValue', 'change']);
 
-const emit = defineEmits(['change']);
-
-// 复选框子项集合
-const children = ref<any[]>([]); // 用于存储所有子checkbox实例
-
-// 向子组件 provide 本 group 实例
-provide('u-checkbox-group', {
-    props,
-    emitEvent,
-    children
-});
-
-const instance = getCurrentInstance();
+// 使用父组件Hook
+const { children, broadcast } = useParent('u-checkbox-group');
 
 /**
  * 派发 change 事件和表单校验
@@ -52,19 +51,71 @@ const instance = getCurrentInstance();
 function emitEvent() {
     // 收集所有选中的 name
     let values: any[] = [];
-    children.value.forEach(val => {
-        if (val.modelValue) values.push(val.name);
+    children.forEach((child: any) => {
+        if (child.getExposed?.()?.isChecked.value) {
+            values.push(child.getExposed?.()?.name);
+        }
     });
     emit('change', values);
-    // 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
-    // 由于头条小程序执行迟钝，故需要用几十毫秒的延时
     setTimeout(() => {
-        // 将当前的值发送到 u-form-item 进行校验
         $u.dispatch(instance, 'u-form-item', 'on-form-change', values);
     }, 60);
 }
 
-defineExpose({ emitEvent, children, props });
+/**
+ * 全选/全不选方法
+ */
+function setAllChecked(checked: boolean) {
+    if (props.disabled) {
+        console.warn('u-checkbox-group已禁用，无法操作');
+        return;
+    }
+    broadcast('setChecked', { checked });
+}
+
+/**
+ * 获取选中的值
+ */
+function getSelectedValues() {
+    return children
+        .filter(child => child.getExposed?.()?.isChecked.value)
+        .map(child => child.getExposed?.()?.name)
+        .filter(Boolean);
+}
+
+/**
+ * 验证选择是否超过最大数量
+ */
+function validateSelection() {
+    const selectedCount = children.filter(child => child.getExposed?.()?.isChecked.value).length;
+    if (props.max && selectedCount >= props.max) {
+        $u.toast(`超过最大选择数量: ${props.max}`);
+        return false;
+    }
+    return true;
+}
+
+// 使用defineExpose暴露给外部
+defineExpose({
+    // props
+    props,
+
+    // 方法
+    emitEvent,
+    setAllChecked,
+    getSelectedValues,
+    validateSelection,
+
+    // 计算属性
+    selectedCount: computed(() => children.filter(child => child.getExposed?.()?.isChecked.value).length),
+    isFull: computed(() => {
+        const selectedCount = children.filter(child => child.getExposed?.()?.isChecked.value).length;
+        return props.max && selectedCount >= props.max;
+    }),
+    isEmpty: computed(() => children.filter(child => child.getExposed?.()?.isChecked.value).length === 0),
+    // 工具方法
+    getChildrenCount: () => children.length
+});
 </script>
 
 <style lang="scss" scoped>

package/components/u-collapse/u-collapse.vue

@@ -9,16 +9,18 @@ export default {
     name: 'u-collapse',
     options: {
         addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
         virtualHost: true,
+        // #endif
         styleIsolation: 'shared'
     }
 };
 </script>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 import { CollapseProps } from './types';
-import { $u } from '../../';
+import { $u, useParent } from '../../';
 
 /**
  * collapse 手风琴
@@ -34,33 +36,157 @@ import { $u } from '../../';
  * @example <u-collapse></u-collapse>
  */
 const props = defineProps(CollapseProps);
-
 const emit = defineEmits(['change']);
 
-// 子元素集合
-const children = ref<any[]>([]);
+// 使用通信库的父组件Hook
+const { children, broadcast, getChildrenExposed } = useParent('u-collapse');
+
+// 当前激活的面板 - 只在手风琴模式下使用
+const activeName = ref<string | number>('');
+
+onMounted(() => {
+    nextTick(() => {
+        // 初始化：收集所有open为true的项
+        setTimeout(() => {
+            initializeActiveName();
+        }, 100);
+    });
+});
 
 /**
- * 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况
+ * 初始化activeName - 找到第一个open为true的项
  */
-function init() {
-    children.value.forEach((vm, index) => {
-        vm.init && vm.init();
-    });
+function initializeActiveName() {
+    if (props.accordion) {
+        // 手风琴模式下，取第一个open为true的项作为初始激活项
+        const childrenExposed = getChildrenExposed();
+        const openChild = childrenExposed.find(child => child.exposed.isShow === true);
+        if (openChild) {
+            activeName.value = openChild.exposed.itemName || '';
+        }
+    }
 }
 
 /**
  * collapse item被点击，由collapse item调用父组件方法
  */
-function onChange(index: string | number) {
-    emit('change', index);
+function onChange(name: string | number) {
+    if (props.accordion) {
+        // 手风琴模式
+        const childrenExposed = getChildrenExposed();
+        const targetChild = childrenExposed.find(child => child.exposed.itemName === name);
+        if (targetChild?.exposed.isShow.value === true) {
+            // 目标项当前是展开状态，点击后要关闭它
+            activeName.value = '';
+            broadcast('closeAll', {});
+        } else {
+            // 目标项当前是关闭状态，点击后要展开它并关闭其他
+            activeName.value = name;
+            broadcast('openSingle', { targetName: name });
+        }
+    } else {
+        // 非手风琴模式 - 只通知目标项切换状态
+        broadcast('toggleSingle', { targetName: name });
+    }
+
+    // 收集当前所有展开的项
+    let currentActiveNames: (string | number)[] = [];
+    if (props.accordion) {
+        currentActiveNames = activeName.value ? [activeName.value] : [];
+    } else {
+        // 对于非手风琴模式，我们不知道所有项的状态，所以这里不处理
+        currentActiveNames = [];
+    }
+
+    emit('change', props.accordion ? activeName.value || '' : currentActiveNames);
+}
+
+/**
+ * 设置激活的面板
+ */
+function setActiveNames(names: string | number | (string | number)[]) {
+    if (props.accordion) {
+        // 手风琴模式
+        const name = Array.isArray(names) ? names[0] : names;
+        activeName.value = name || '';
+        if (name) {
+            broadcast('openSingle', { targetName: name });
+        } else {
+            broadcast('closeAll', {});
+        }
+    } else {
+        // 非手风琴模式
+        const namesArray = Array.isArray(names) ? names : [names];
+        broadcast('setMultiple', { targetNames: namesArray });
+    }
+}
+
+/**
+ * 打开所有面板
+ */
+function openAll() {
+    if (props.accordion) {
+        console.warn('手风琴模式下不能打开所有面板');
+        return;
+    }
+    const childrenExposed = getChildrenExposed();
+    const allNames = childrenExposed.map(child => child.exposed.itemName).filter(Boolean);
+    broadcast('setMultiple', { targetNames: allNames });
+}
+
+/**
+ * 关闭所有面板
+ */
+function closeAll() {
+    broadcast('closeAll', {});
+    if (props.accordion) {
+        activeName.value = '';
+    }
+}
+
+/**
+ * 重新初始化，用于动态内容变化
+ */
+function init() {
+    const childrenExposed = getChildrenExposed();
+    childrenExposed.forEach(child => {
+        if (child.exposed.init) {
+            child.exposed.init();
+        }
+    });
+
+    // 重新初始化activeName
+    setTimeout(() => {
+        initializeActiveName();
+    }, 150);
+}
+
+// 热更新处理 - 重新连接所有子组件
+if (import.meta.hot) {
+    import.meta.hot.accept(() => {
+        setTimeout(() => {
+            broadcast('reconnect', {});
+        }, 100);
+    });
 }
 
+// 使用defineExpose暴露给外部
 defineExpose({
+    // props
     props,
-    children,
+
+    // 状态
+    activeName,
+
+    // 方法
+    onChange,
+    setActiveNames,
+    openAll,
+    closeAll,
     init,
-    onChange
+
+    // 计算属性
+    childrenCount: () => children.length
 });
 </script>