uview-pro 0.3.1 → 0.3.2

package/changelog.md

@@ -1,3 +1,22 @@
+## 0.3.2（2025-10-15）
+
+### 📝 Documentation | 文档
+
+- **changelog:** 更新 CHANGELOG.md 生成配置 ([27a2609](https://github.com/anyup/uView-Pro/commit/27a26095b92cf8cbc6477c563a68b1557f9fb045))
+- 更新交流群图片链接 ([832815d](https://github.com/anyup/uView-Pro/commit/832815deb63f8b144f525591d16e3ccf900b8632))
+
+### ⚡ Performance Improvements | 性能优化
+
+- **component-relation:** 增强组件间通信功能；修改 broadcast 方法，支持定向广播；移除对子组件名称的强制要求，允许匿名组件 ([28ea814](https://github.com/anyup/uView-Pro/commit/28ea814810055aa4c99b53d676b16da337fdf7d5))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-index-list:** 重构索引锚点组件，兼容多端，修复IndexList索引列表在微信小程序没有吸顶效果 ([ce6a7a3](https://github.com/anyup/uView-Pro/commit/ce6a7a3c01b622cad268779098390c0d593f75bc))
+
+### 👥 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>
+
 ## 0.3.1（2025-10-14）
 
 ### 📝 Documentation | 文档

package/components/u-index-anchor/u-index-anchor.vue

@@ -31,8 +31,8 @@ export default {
 
 <script setup lang="ts">
 import { IndexAnchorProps } from './types';
-import { ref, computed, onMounted, getCurrentInstance } from 'vue';
-import { $u } from '../..';
+import { ref, onMounted } from 'vue';
+import { $u, useChildren } from '../..';
 
 /**
  * indexAnchor 索引列表锚点
@@ -46,28 +46,54 @@ import { $u } from '../..';
  */
 
 const props = defineProps(IndexAnchorProps);
+const { parentExposed } = useChildren('u-index-anchor', 'u-index-list');
 
 // 响应式变量
 const active = ref(false);
 const wrapperStyle = ref<Record<string, any>>({});
 const anchorStyle = ref<Record<string, any>>({});
-let parent: any = null;
-
-const instance = getCurrentInstance();
+const top = ref(0);
+const height = ref(0);
 
 // 挂载时查找父组件并注册
 onMounted(() => {
-    parent = $u.$parent('u-index-list', instance);
-    if (parent) {
-        parent.exposed?.children.push(instance);
-        parent.exposed?.updateData();
+    if (parentExposed) {
+        parentExposed?.value?.updateData();
     }
 });
+
+function setTop(val) {
+    top.value = val;
+}
+
+function setHeight(val) {
+    height.value = val;
+}
+
+function setActive(val) {
+    active.value = val;
+}
+
+function setAnchorStyle(val) {
+    anchorStyle.value = val;
+}
+
+function setWrapperStyle(val) {
+    wrapperStyle.value = val;
+}
+
 defineExpose({
+    props,
+    top,
+    height,
     active,
     wrapperStyle,
     anchorStyle,
-    props
+    setTop,
+    setHeight,
+    setActive,
+    setAnchorStyle,
+    setWrapperStyle
 });
 </script>
 

package/components/u-index-list/u-index-list.vue

@@ -49,7 +49,7 @@ export default {
 
 <script setup lang="ts">
 import { ref, reactive, computed, watch, onMounted, getCurrentInstance } from 'vue';
-import { $u } from '../..';
+import { $u, useParent } from '../..';
 import { IndexListProps } from './types';
 
 /**
@@ -84,8 +84,6 @@ const activeAnchorIndex = ref(0);
 const showSidebar = ref(true);
 const touchmove = ref(false);
 const touchmoveIndex = ref(0);
-// 孩子锚点组件
-const children = reactive<any[]>([]);
 const sidebar = reactive<{ height: number; top: number }>({ height: 0, top: 0 });
 const scrollToAnchorIndex = ref<number | null>(null);
 const timer = ref<any>(null);
@@ -101,8 +99,7 @@ const indexList = computed(() => props.indexList ?? getIndexList()).value;
 const zIndex = computed(() => props.zIndex).value;
 const activeColor = computed(() => props.activeColor).value;
 
-// 只能在created生命周期定义children，如果在data定义，会因为循环引用而报错
-children.length = 0;
+const { children, broadcast } = useParent('u-index-anchor');
 
 // 兼容 H5/非H5 stickyOffsetTop
 onMounted(() => {
@@ -146,11 +143,9 @@ function setRect() {
 function setAnchorsRect() {
     return Promise.all(
         children.map((anchor, index) => {
-            $u.getRect('.u-index-anchor-wrapper', anchor).then((rect: any) => {
-                Object.assign(anchor, {
-                    height: rect.height,
-                    top: rect.top
-                });
+            $u.getRect('.u-index-anchor-wrapper', anchor.getInstance()).then((rect: any) => {
+                broadcast('setTop', rect.top, anchor.id);
+                broadcast('setHeight', rect.height, anchor.id);
             });
         })
     );
@@ -182,9 +177,9 @@ function setSiderbarRect() {
 function getActiveAnchorIndex() {
     const sticky = props.sticky;
     for (let i = children.length - 1; i >= 0; i--) {
-        const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
+        const preAnchorHeight = i > 0 ? children[i - 1].getExposed().height.value : 0;
         const reachTop = sticky ? preAnchorHeight : 0;
-        if (reachTop >= children[i].top) {
+        if (reachTop >= children[i].getExposed().top.value) {
             return i;
         }
     }
@@ -203,7 +198,7 @@ function onScroll() {
     if (sticky) {
         let isActiveAnchorSticky = false;
         if (active !== -1) {
-            isActiveAnchorSticky = children[active].top <= 0;
+            isActiveAnchorSticky = children[active].getExposed().top.value <= 0;
         }
         children.forEach((item, index) => {
             if (index === active) {
@@ -212,7 +207,7 @@ function onScroll() {
                     color: `${activeColor}`
                 };
                 if (isActiveAnchorSticky) {
-                    wrapperStyle = { height: `${children[index].height}px` };
+                    wrapperStyle = { height: `${children[index].getExposed().height.value}px` };
                     anchorStyle = {
                         position: 'fixed',
                         top: `${stickyOffsetTop.value}px`,
@@ -220,31 +215,30 @@ function onScroll() {
                         color: `${activeColor}`
                     };
                 }
-                item.active = active;
-                item.wrapperStyle = wrapperStyle;
-                item.anchorStyle = anchorStyle;
+                broadcast('setActive', active, item.id);
+                broadcast('setAnchorStyle', anchorStyle, item.id);
+                broadcast('setWrapperStyle', wrapperStyle, item.id);
             } else if (index === active - 1) {
                 const currentAnchor = children[index];
-                const currentOffsetTop = currentAnchor.top;
-                const targetOffsetTop = index === children.length - 1 ? top.value : children[index + 1].top;
+                const currentOffsetTop = currentAnchor.getExposed().top.value;
+                const targetOffsetTop =
+                    index === children.length - 1 ? top.value : children[index + 1].getExposed().top.value;
                 const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
-                const translateY = parentOffsetHeight - currentAnchor.height;
+                const translateY = parentOffsetHeight - currentAnchor.getExposed().height.value;
                 const anchorStyle = {
                     position: 'relative',
                     transform: `translate3d(0, ${translateY}px, 0)`,
                     zIndex: `${zIndex ? zIndex : $u.zIndex.indexListSticky}`,
                     color: `${activeColor}`
                 };
-                item.active = active;
-                item.anchorStyle = anchorStyle;
+                broadcast('setActive', active, currentAnchor.id);
+                broadcast('setAnchorStyle', anchorStyle, currentAnchor.id);
+                broadcast('setWrapperStyle', '', item.id);
             } else {
-                item.active = false;
-                item.anchorStyle = '';
-                item.wrapperStyle = '';
+                broadcast('setActive', false, item.id);
+                broadcast('setAnchorStyle', '', item.id);
+                broadcast('setWrapperStyle', '', item.id);
             }
-            item.exposed.active = item.active;
-            item.exposed.anchorStyle = item.anchorStyle;
-            item.exposed.wrapperStyle = item.wrapperStyle;
         });
     }
 }
@@ -284,12 +278,12 @@ function scrollToAnchor(index: number) {
         return;
     }
     scrollToAnchorIndex.value = index;
-    const anchor = children.find(item => item.props.index === indexList[index]);
+    const anchor = children.find(item => item.getExposed().props.index === indexList[index]);
     if (anchor) {
-        emit('select', anchor.props.index);
+        emit('select', anchor.getExposed().props.index);
         uni.pageScrollTo({
             duration: 0,
-            scrollTop: anchor.top + Number(props.scrollTop)
+            scrollTop: anchor.getExposed().top.value + Number(props.scrollTop)
         });
     }
 }

package/libs/hooks/useCompRelation.ts

@@ -7,7 +7,7 @@ interface ParentContext {
     name: string;
     addChild: (child: ChildContext) => void;
     removeChild: (childId: string) => void;
-    broadcast: (event: string, data?: any) => void;
+    broadcast: (event: string, data?: any, childIds?: string | string[]) => void; // 修改：支持定向广播
     getChildren: () => ChildContext[];
     getExposed: () => Record<string, any>;
     getChildExposed: (childId: string) => Record<string, any>;
@@ -80,6 +80,33 @@ export function useParent(componentName?: string) {
     const children = reactive<ChildContext[]>([]);
     const childrenMap = new Map<string, ChildContext>();
 
+    // 修改：增强broadcast方法，支持定向广播
+    const broadcast = (event: string, data?: any, childIds?: string | string[]) => {
+        let targetChildren: ChildContext[] = [];
+
+        if (childIds) {
+            // 处理单个childId或childId数组
+            const ids = Array.isArray(childIds) ? childIds : [childIds];
+            targetChildren = ids.map(id => childrenMap.get(id)).filter(Boolean) as ChildContext[];
+        } else {
+            // 没有指定childIds，广播给所有子组件
+            targetChildren = Array.from(childrenMap.values());
+        }
+
+        logger.log(`Parent ${name} broadcasting event: ${event} to ${targetChildren.length} children`);
+
+        targetChildren.forEach(child => {
+            const exposed = child.getExposed();
+            if (exposed && typeof exposed[event] === 'function') {
+                try {
+                    exposed[event](data);
+                } catch (error) {
+                    logger.warn(`Error calling child method ${event} for child ${child.id}:`, error);
+                }
+            }
+        });
+    };
+
     // 父组件上下文
     const parentContext: ParentContext = {
         name,
@@ -104,19 +131,7 @@ export function useParent(componentName?: string) {
             }
         },
 
-        broadcast(event: string, data?: any) {
-            logger.log(`Parent ${name} broadcasting event: ${event} to ${childrenMap.size} children`);
-            childrenMap.forEach(child => {
-                const exposed = child.getExposed();
-                if (exposed && typeof exposed[event] === 'function') {
-                    try {
-                        exposed[event](data);
-                    } catch (error) {
-                        logger.warn(`Error calling child method ${event}:`, error);
-                    }
-                }
-            });
-        },
+        broadcast, // 使用新的broadcast方法
 
         getChildren() {
             return Array.from(childrenMap.values());
@@ -189,11 +204,12 @@ export function useChildren(componentName?: string, parentName?: string) {
 
     // 使用组件名称作为默认名称
     const name = componentName || instance.type.name || instance.type.__name;
-    if (!name) {
-        throw new Error('Component name is required for useChildren. Either provide a name or set component name.');
-    }
+    // 修改：移除强制要求组件名称的报错，允许匿名组件
+    // if (!name) {
+    //     throw new Error('Component name is required for useChildren. Either provide a name or set component name.');
+    // }
 
-    const instanceId = generateInstanceId(name);
+    const instanceId = generateInstanceId(name || 'anonymous');
     const parentRef = ref<ParentContext | null>(null);
     const parentExposed = ref<Record<string, any>>({});
 
@@ -238,9 +254,11 @@ export function useChildren(componentName?: string, parentName?: string) {
             parentRef.value = parent;
             parent.addChild(childContext);
             getParentExposed();
-            logger.log(`Child ${name} linked to parent ${parent.name}`);
+            logger.log(`Child ${name || 'anonymous'} linked to parent ${parent.name}`);
             return true;
         }
+        // 修改：找不到父组件时不报错，只是记录日志
+        logger.log(`Child ${name || 'anonymous'} no parent found, working in standalone mode`);
         return false;
     };
 
@@ -258,14 +276,15 @@ export function useChildren(componentName?: string, parentName?: string) {
                 logger.warn(`Parent method ${event} not found or not a function`);
             }
         } else {
-            logger.warn(`No parent found to emit event: ${event}`);
+            // 修改：父组件不存在时只记录调试日志，不报警告
+            logger.log(`No parent found to emit event: ${event}`);
         }
     };
 
     // 子组件上下文
     const childContext: ChildContext = {
         id: instanceId,
-        name,
+        name: name || 'anonymous',
         emitToParent,
         getParentExposed,
         getInstance() {
@@ -274,7 +293,7 @@ export function useChildren(componentName?: string, parentName?: string) {
         getExposed
     };
 
-    logger.log(`Child ${name} registered, looking for parent`);
+    logger.log(`Child ${name || 'anonymous'} registered, looking for parent`);
 
     onMounted(() => {
         // 立即尝试连接父组件
@@ -294,12 +313,12 @@ export function useChildren(componentName?: string, parentName?: string) {
         if (parentRef.value) {
             parentRef.value.removeChild(instanceId);
         }
-        logger.log(`Child ${name} unmounted`);
+        logger.log(`Child ${name || 'anonymous'} unmounted`);
     });
 
     return {
         childId: instanceId,
-        childName: name,
+        childName: name || 'anonymous',
         parent: parentRef,
         emitToParent,
         getParentExposed,

package/package.json

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

package/readme.md

@@ -73,7 +73,7 @@ pnpm dev
 
 <table class="table">
     <tr>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat.png?updatedAt=1760233880982" width="250" height="345" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat-cl.png" width="250" height="345" ></td>
         <td><img src="https://ik.imagekit.io/anyup/images/social/qq-chat.png" width="250" height="345" ></td>
     </tr>
     <tr>