uview-pro 0.2.2 → 0.2.3

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

@@ -1,13 +1,19 @@
 <template>
     <view class="u-collapse-item" :style="`${$u.toStyle(itemStyle)}${$u.toStyle(customStyle)}`" :class="customClass">
-        <view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="headStyle">
+        <view
+            :hover-stay-time="200"
+            class="u-collapse-head"
+            @tap.stop="headClick"
+            :hover-class="hoverClass"
+            :style="headStyle"
+        >
             <template v-if="!slots['title-all']">
                 <view v-if="!slots['title']" class="u-collapse-title u-line-1" :style="titleStyle">
                     {{ title }}
                 </view>
                 <slot v-else name="title" />
                 <view class="u-icon-wrap">
-                    <u-icon v-if="arrow" :color="arrowColor" :name="isShow ? 'arrow-up' : 'arrow-down'" />
+                    <u-icon v-if="showArrow" :color="arrowColor" :name="isShow ? 'arrow-up' : 'arrow-down'" />
                 </view>
             </template>
             <slot v-else name="title-all" />
@@ -26,17 +32,18 @@ export default {
     name: 'u-collapse-item',
     options: {
         addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
         virtualHost: true,
+        // #endif
         styleIsolation: 'shared'
     }
 };
 </script>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, useSlots, getCurrentInstance, nextTick, computed } from 'vue';
-import { $u } from '../..';
+import { ref, watch, onMounted, useSlots, getCurrentInstance, nextTick, computed, onUnmounted } from 'vue';
+import { $u, useChildren, onParentEvent } from '../..';
 import { CollapseItemProps } from './types';
-import { useParent } from '../../libs/hooks/useParent';
 
 /**
  * collapseItem 手风琴Item
@@ -59,50 +66,77 @@ const instance = getCurrentInstance();
 
 const isShow = ref(false);
 const elId = ref('');
-const height = ref('0'); // body内容的高度
-const headStyle = ref<Record<string, any>>({}); // 头部样式，对象形式
-const bodyStyle = ref<Record<string, any>>({}); // 主体部分样式
-const itemStyle = ref<Record<string, any>>({}); // 每个item的整体样式
-const arrowColor = ref(''); // 箭头的颜色
-const hoverClass = ref(''); // 头部按下时的效果样式类
-const accordion = ref(true); // 是否显示右侧箭头
-const arrow = ref(true);
+const height = ref('0');
+const headStyle = ref<Record<string, any>>({});
+const bodyStyle = ref<Record<string, any>>({});
+const itemStyle = ref<Record<string, any>>({});
+const arrowColor = ref('');
+const hoverClass = ref('');
 
-const { parent, parentExposed } = useParent('u-collapse');
+// 使用通信库的子组件Hook
+const { childId, parentExposed } = useChildren('u-collapse-item', 'u-collapse');
 
-watch(
-    () => props.open,
-    val => {
-        isShow.value = val;
-    },
-    { immediate: true }
-);
+// 计算属性
+const showArrow = computed(() => {
+    return parentExposed.value?.props ? parentExposed.value.props.arrow : true;
+});
 
-/**
- * 获取父组件的配置项
- */
 const titleStyle = computed(() => {
     let style = { textAlign: props.align ? props.align : 'left' };
 
-    if (isShow.value && props.activeStyle && !arrow.value) {
+    if (isShow.value && props.activeStyle && !showArrow.value) {
         style = $u.deepMerge(style, props.activeStyle);
     }
     return $u.toStyle(style);
 });
 
+// 获取唯一标识符
+const itemName = computed(() => {
+    // 优先级：name > index > childId
+    if (props.name !== undefined && props.name !== '') {
+        return props.name;
+    } else if (props.index !== undefined && props.index !== '') {
+        return props.index;
+    } else {
+        return childId;
+    }
+});
+
+/**
+ * 设置显示状态
+ */
+function setShowState(show: boolean) {
+    if (isShow.value !== show) {
+        isShow.value = show;
+
+        // 如果展开，需要重新计算高度
+        if (show) {
+            nextTick(() => {
+                queryRect();
+            });
+        }
+
+        // 本地触发change事件
+        emit('change', {
+            index: props.index,
+            name: itemName.value,
+            show: isShow.value
+        });
+    }
+}
+
 /**
  * 异步获取内容，或者动态修改了内容时，需要重新初始化
  */
 function init() {
-    if (parent) {
-        headStyle.value = parentExposed.props.headStyle;
-        bodyStyle.value = parentExposed.props.bodyStyle;
-        arrowColor.value = parentExposed.props.arrowColor;
-        hoverClass.value = parentExposed.props.hoverClass;
-        arrow.value = parentExposed.props.arrow;
-        itemStyle.value = parentExposed.props.itemStyle;
-        accordion.value = parentExposed.props.accordion;
+    if (parentExposed.value?.props) {
+        headStyle.value = parentExposed.value.props.headStyle || {};
+        bodyStyle.value = parentExposed.value.props.bodyStyle || {};
+        arrowColor.value = parentExposed.value.props.arrowColor || '#909399';
+        hoverClass.value = parentExposed.value.props.hoverClass || 'u-hover-class';
+        itemStyle.value = parentExposed.value.props.itemStyle || {};
     }
+
     elId.value = $u.guid();
     nextTick(() => {
         queryRect();
@@ -114,46 +148,108 @@ function init() {
  */
 function headClick() {
     if (props.disabled) return;
-    if (accordion.value && parent) {
-        parent.children.forEach((vm: any) => {
-            if (vm.exposed.elId.value !== elId.value) {
-                vm.exposed.isShow.value = false;
-            } else {
-                vm.exposed.isShow.value = !vm.exposed.isShow.value;
-                emit('change', {
-                    index: props.index,
-                    show: vm.exposed.isShow.value
-                });
-            }
-        });
-    } else {
-        isShow.value = !isShow.value;
-        emit('change', {
-            index: props.index,
-            show: isShow.value
-        });
+
+    // 通知父组件状态变化
+    if (parentExposed.value?.onChange) {
+        parentExposed.value.onChange(itemName.value);
     }
-    if (isShow.value) parentExposed && parentExposed.onChange && parentExposed.onChange(props.index);
 }
 
 /**
  * 查询内容高度
  */
 function queryRect() {
-    // getRect为uView自带的节点查询简化方法，详见文档介绍：https://uviewpro.cn/zh/tools/getRect.html
-    // 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
-    $u.getRect('#' + elId.value, instance).then((res: any) => {
-        height.value = res.height + 'px';
-        // #ifdef MP-TOUTIAO
-        height.value = 'auto';
-        // #endif
-    });
+    $u.getRect('#' + elId.value, instance)
+        .then((res: any) => {
+            if (res && res.height) {
+                height.value = res.height + 'px';
+            }
+            // #ifdef MP-TOUTIAO
+            if (isShow.value) {
+                height.value = 'auto';
+            }
+            // #endif
+        })
+        .catch((err: any) => {
+            console.warn('queryRect error:', err);
+            height.value = 'auto';
+        });
 }
 
+// 监听父组件的事件
+const unsubscribeOpenSingle = onParentEvent(childId, 'openSingle', (data: any) => {
+    // 只有目标项展开，其他都关闭
+    const shouldShow = data.targetName === itemName.value;
+    setShowState(shouldShow);
+});
+
+const unsubscribeCloseAll = onParentEvent(childId, 'closeAll', () => {
+    setShowState(false);
+});
+
+const unsubscribeSetMultiple = onParentEvent(childId, 'setMultiple', (data: any) => {
+    const shouldShow = data.targetNames.includes(itemName.value);
+    setShowState(shouldShow);
+});
+
+const unsubscribeToggleSingle = onParentEvent(childId, 'toggleSingle', (data: any) => {
+    // 只有目标项才切换状态
+    if (data.targetName === itemName.value) {
+        setShowState(!isShow.value);
+    }
+});
+
+// 监听父组件的重连事件（热更新后）
+const unsubscribeReconnect = onParentEvent(childId, 'reconnect', () => {
+    console.log('Collapse item reconnected to parent after hot update');
+});
+
 onMounted(() => {
+    // 关键修复：根据 open 属性设置初始状态
+    setShowState(props.open);
+
+    // 初始化
     init();
 });
 
+// 监听 open 属性变化
+watch(
+    () => props.open,
+    newVal => {
+        setShowState(newVal);
+    }
+);
+
+// 监听父组件exposed的变化
+watch(
+    parentExposed,
+    newExposed => {
+        if (newExposed) {
+            init();
+        }
+    },
+    { deep: true, immediate: true }
+);
+
+// 组件卸载时清理事件监听
+onUnmounted(() => {
+    unsubscribeOpenSingle();
+    unsubscribeCloseAll();
+    unsubscribeSetMultiple();
+    unsubscribeToggleSingle();
+    unsubscribeReconnect();
+});
+
+// 热更新处理
+if (import.meta.hot) {
+    import.meta.hot.accept(() => {
+        setTimeout(() => {
+            console.log('Collapse item hot updated, reinitializing...');
+            init();
+        }, 150);
+    });
+}
+
 defineExpose({
     init,
     isShow,
@@ -164,7 +260,9 @@ defineExpose({
     itemStyle,
     arrowColor,
     hoverClass,
-    arrow
+    itemName: itemName.value,
+    queryRect,
+    setShowState
 });
 </script>
 

package/index.ts

@@ -1,5 +1,6 @@
 import { $u, type RequestOptions } from './libs';
 import type { UViewProOptions } from './types/global';
+import { logger } from './libs/util/logger';
 
 declare const uni: {
     [key: string]: any;
@@ -13,8 +14,16 @@ declare const uni: {
 // $u挂载到uni对象上
 const install = (app: any, options?: UViewProOptions): void => {
     uni.$u = $u;
-    if (options && options.theme) {
-        $u.color = $u.deepMerge($u.color, options.theme);
+    if (options) {
+        // 配置主题
+        if (options.theme) {
+            $u.color = $u.deepMerge($u.color, options.theme);
+        }
+        // 设置调试模式
+        logger
+            .setDebugMode(options?.log?.debug ?? true)
+            .setPrefix(options?.log?.prefix)
+            .setShowCallerInfo(options?.log?.showCallerInfo ?? true);
     }
     // 可扩展更多配置项
     app.config.globalProperties.$u = $u;

package/libs/hooks/index.ts

@@ -1,3 +1,3 @@
+export * from './useComponent';
 export * from './useEmitter';
-export * from './useParent';
 export * from './useRect';

package/libs/hooks/useComponent.ts

@@ -0,0 +1,343 @@
+// utils/useComponent.ts
+import { ref, reactive, getCurrentInstance, onUnmounted, nextTick, computed } from 'vue';
+import { logger } from '../util/logger';
+import { eventBus } from '../util/eventBus';
+
+// 简化类型定义
+interface ParentContext {
+    name: string;
+    addChild: (child: ChildContext) => void;
+    removeChild: (childId: string) => void;
+    broadcast: (event: string, data?: any) => void;
+    getChildren: () => ChildContext[];
+    getExposed: () => Record<string, any>;
+    getChildExposed: (childId: string) => Record<string, any>;
+    getChildrenExposed: () => Array<{ id: string; name: string; exposed: Record<string, any> }>;
+}
+
+interface ChildContext {
+    id: string;
+    name: string;
+    emitToParent: (event: string, data?: any) => void;
+    getParentExposed: () => Record<string, any>;
+    getInstance: () => any;
+    getExposed: () => Record<string, any>;
+}
+
+// 全局存储
+const parentMap = new Map<string, ParentContext>();
+const childMap = new Map<string, ChildContext>();
+
+// 事件常量
+const PARENT_REGISTERED_EVENT = 'parent:registered';
+const PARENT_UNMOUNTED_EVENT = 'parent:unmounted';
+const CHILD_REGISTERED_EVENT = 'child:registered';
+
+// 热更新清理函数
+export function cleanupComponentRelations(): void {
+    logger.log('Cleaning up component relations for hot reload');
+    parentMap.clear();
+    childMap.clear();
+}
+
+// 热更新处理
+if (import.meta.hot) {
+    import.meta.hot.accept(() => {
+        setTimeout(() => {
+            cleanupComponentRelations();
+        }, 50);
+    });
+}
+
+/**
+ * 生成实例唯一ID
+ */
+function generateInstanceId(componentName: string): string {
+    return `${componentName}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * 父组件 Hook
+ */
+export function useParent(componentName: string) {
+    const instance = getCurrentInstance();
+    if (!instance) {
+        throw new Error('useParent must be called within setup function');
+    }
+
+    if (!componentName) {
+        throw new Error('Component name is required for useParent');
+    }
+
+    // 热更新时清理旧的父组件
+    if (parentMap.has(componentName)) {
+        logger.log(`Cleaning up existing parent ${componentName} for hot reload`);
+        parentMap.delete(componentName);
+    }
+
+    const children = reactive<ChildContext[]>([]);
+
+    // 父组件上下文
+    const parentContext: ParentContext = {
+        name: componentName,
+
+        addChild(child: ChildContext) {
+            if (!children.find(c => c.id === child.id)) {
+                children.push(child);
+                logger.log(`Parent ${componentName} added child: ${child.name}`);
+            }
+        },
+
+        removeChild(childId: string) {
+            const index = children.findIndex(c => c.id === childId);
+            if (index > -1) {
+                children.splice(index, 1);
+                logger.log(`Parent ${componentName} removed child: ${childId}`);
+            }
+        },
+
+        broadcast(event: string, data?: any) {
+            logger.log(`Parent ${componentName} broadcasting event: ${event}`);
+            children.forEach(child => {
+                eventBus.emit(`child:${child.id}:${event}`, data);
+            });
+        },
+
+        getChildren() {
+            return [...children];
+        },
+
+        getExposed() {
+            return instance.exposed || {};
+        },
+
+        getChildExposed(childId: string) {
+            const child = children.find(c => c.id === childId);
+            if (child && child.getExposed) {
+                return child.getExposed();
+            }
+            logger.warn(`Child ${childId} not found or does not have getExposed method`);
+            return {};
+        },
+
+        getChildrenExposed() {
+            return children
+                .filter(child => child.getExposed)
+                .map(child => {
+                    const exposed = child.getExposed();
+                    return {
+                        id: child.id,
+                        name: child.name,
+                        exposed: exposed
+                    };
+                })
+                .filter(item => Object.keys(item.exposed).length > 0);
+        }
+    };
+
+    // 注册父组件并广播事件
+    parentMap.set(componentName, parentContext);
+    logger.log(`Parent ${componentName} registered`);
+
+    // 广播父组件注册事件
+    eventBus.emit(PARENT_REGISTERED_EVENT, { name: componentName, parent: parentContext });
+
+    // 组件卸载时清理
+    onUnmounted(() => {
+        parentMap.delete(componentName);
+        eventBus.emit(PARENT_UNMOUNTED_EVENT, { name: componentName });
+        logger.log(`Parent ${componentName} unmounted`);
+    });
+
+    return {
+        parentName: componentName,
+        children,
+        broadcast: parentContext.broadcast,
+        getChildren: parentContext.getChildren,
+        getChildExposed: parentContext.getChildExposed,
+        getChildrenExposed: parentContext.getChildrenExposed
+    };
+}
+
+/**
+ * 子组件 Hook
+ */
+export function useChildren(componentName: string, parentName: string) {
+    const instance = getCurrentInstance();
+    if (!instance) {
+        throw new Error('useChildren must be called within setup function');
+    }
+
+    if (!componentName || !parentName) {
+        throw new Error('Component name and parent name are required for useChildren');
+    }
+
+    const instanceId = generateInstanceId(componentName);
+    const parentRef = ref<ParentContext | null>(null);
+    const parentExposed = ref<Record<string, any>>({});
+
+    // 热更新时清理旧的子组件
+    if (childMap.has(instanceId)) {
+        logger.log(`Cleaning up existing child ${componentName} for hot reload`);
+        childMap.delete(instanceId);
+    }
+
+    // 获取父组件暴露内容
+    const getParentExposed = (): Record<string, any> => {
+        if (parentRef.value) {
+            const exposed = parentRef.value.getExposed();
+            parentExposed.value = exposed;
+            return exposed;
+        }
+        return {};
+    };
+
+    // 获取子组件exposed内容
+    const getExposed = (): Record<string, any> => {
+        return instance.exposed || {};
+    };
+
+    // 链接到父组件
+    const linkParent = (): boolean => {
+        const parent = parentMap.get(parentName);
+        if (parent) {
+            parentRef.value = parent;
+            parent.addChild(childContext);
+            getParentExposed();
+            logger.log(`Child ${componentName} linked to parent ${parentName}`);
+            return true;
+        }
+        return false;
+    };
+
+    // 子组件上下文
+    const childContext: ChildContext = {
+        id: instanceId,
+        name: componentName,
+
+        emitToParent(event: string, data?: any) {
+            eventBus.emit(`parent:${parentName}:${event}`, {
+                data,
+                childId: instanceId,
+                childName: componentName
+            });
+        },
+
+        getParentExposed,
+        getInstance() {
+            return instance;
+        },
+        getExposed
+    };
+
+    // 注册子组件
+    childMap.set(instanceId, childContext);
+    logger.log(`Child ${componentName} registered`);
+
+    // 广播子组件注册事件
+    eventBus.emit(CHILD_REGISTERED_EVENT, {
+        id: instanceId,
+        name: componentName,
+        parentName: parentName
+    });
+
+    // 立即尝试连接父组件
+    let connected = linkParent();
+
+    // 如果没连接上，监听父组件注册事件
+    if (!connected) {
+        const parentRegisteredHandler = (eventData: any) => {
+            if (eventData.name === parentName) {
+                connected = linkParent();
+                if (connected) {
+                    eventBus.off(PARENT_REGISTERED_EVENT, parentRegisteredHandler);
+                }
+            }
+        };
+        eventBus.on(PARENT_REGISTERED_EVENT, parentRegisteredHandler);
+    }
+
+    // 监听父组件卸载事件
+    const parentUnmountedHandler = (eventData: any) => {
+        if (eventData.name === parentName && parentRef.value) {
+            parentRef.value = null;
+            parentExposed.value = {};
+            logger.log(`Parent ${parentName} unmounted, child ${componentName} disconnected`);
+        }
+    };
+    eventBus.on(PARENT_UNMOUNTED_EVENT, parentUnmountedHandler);
+
+    // 组件卸载时清理
+    onUnmounted(() => {
+        if (parentRef.value) {
+            parentRef.value.removeChild(instanceId);
+        }
+        childMap.delete(instanceId);
+        eventBus.off(PARENT_REGISTERED_EVENT);
+        eventBus.off(PARENT_UNMOUNTED_EVENT, parentUnmountedHandler);
+        logger.log(`Child ${componentName} unmounted`);
+    });
+
+    return {
+        childId: instanceId,
+        childName: componentName,
+        parent: parentRef,
+        emitToParent: childContext.emitToParent,
+        getParentExposed,
+        parentExposed: computed(() => parentExposed.value),
+        getExposed: childContext.getExposed
+    };
+}
+
+/**
+ * 监听子组件事件
+ */
+export function onChildEvent(parentName: string, event: string, handler: Function) {
+    eventBus.on(`parent:${parentName}:${event}`, eventData => {
+        handler(eventData.data, eventData.childId, eventData.childName);
+    });
+}
+
+/**
+ * 监听父组件事件
+ */
+export function onParentEvent(childId: string, event: string, handler: Function) {
+    // 修复类型问题：将 Function 转换为 EventCallback
+    const eventCallback = (data?: any, ...args: any[]) => {
+        handler(data, ...args);
+    };
+    eventBus.on(`child:${childId}:${event}`, eventCallback);
+
+    // 返回取消监听函数
+    return () => {
+        eventBus.off(`child:${childId}:${event}`, eventCallback);
+    };
+}
+
+/**
+ * 检查父组件是否存在
+ */
+export function hasParent(parentName: string): boolean {
+    return parentMap.has(parentName);
+}
+
+/**
+ * 获取所有已注册的父组件名称
+ */
+export function getRegisteredParents(): string[] {
+    return Array.from(parentMap.keys());
+}
+
+/**
+ * 获取父组件实例
+ */
+export function getParent(parentName: string): ParentContext | undefined {
+    return parentMap.get(parentName);
+}
+
+/**
+ * 获取子组件实例
+ */
+export function getChild(childId: string): ChildContext | undefined {
+    return childMap.get(childId);
+}