|
|
@@ -14,7 +14,7 @@ export interface CategorySidebarProps {
|
|
|
}
|
|
|
|
|
|
interface CategorySidebarContextType {
|
|
|
- registerItem: (item: any) => void;
|
|
|
+ registerItem: (item: any) => number;
|
|
|
unregisterItem: (item: any) => void;
|
|
|
setActive: (index: number) => Promise<void>;
|
|
|
activeKey: number;
|
|
|
@@ -45,11 +45,17 @@ const CategorySidebar: React.FC<CategorySidebarProps> = (props) => {
|
|
|
|
|
|
// 注册子组件
|
|
|
const registerItem = useCallback((item: any) => {
|
|
|
+ const currentLength = childrenRef.current.length;
|
|
|
+ const itemIndex = currentLength;
|
|
|
+
|
|
|
setChildrenList(prev => {
|
|
|
const newList = [...prev, item];
|
|
|
childrenRef.current = newList;
|
|
|
+ console.debug('CategorySidebar registerItem:', { itemIndex, totalItems: newList.length });
|
|
|
return newList;
|
|
|
});
|
|
|
+
|
|
|
+ return itemIndex;
|
|
|
}, []);
|
|
|
|
|
|
// 注销子组件
|
|
|
@@ -84,10 +90,23 @@ const CategorySidebar: React.FC<CategorySidebarProps> = (props) => {
|
|
|
const preBottomRightRadiusItemIndexs = bottomRightRadiusItemIndexsRef.current;
|
|
|
|
|
|
if (!children.length) {
|
|
|
+ console.debug('CategorySidebar setActive: no children available');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
+ // 如果是子组件变化触发的，即使 activeKey 相同也要重新设置样式
|
|
|
+ // 或者如果是用户点击同一个item，也需要重新设置样式
|
|
|
if (activeKey === currentActive && !isChildrenChange) {
|
|
|
+ // 即使点击同一个item，也要确保样式正确应用
|
|
|
+ console.debug('CategorySidebar setActive: same item clicked, ensuring styles');
|
|
|
+ }
|
|
|
+
|
|
|
+ console.debug('CategorySidebar setActive:', { activeKey, currentActive, isChildrenChange, childrenCount: children.length });
|
|
|
+
|
|
|
+ // 确保 activeKey 在有效范围内
|
|
|
+ if (activeKey < 0 || activeKey >= children.length) {
|
|
|
+ console.debug('CategorySidebar setActive: invalid activeKey, using 0');
|
|
|
+ setCurrentActive(0);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
@@ -96,21 +115,16 @@ const CategorySidebar: React.FC<CategorySidebarProps> = (props) => {
|
|
|
const newTopRightRadiusItemIndexs = getTopRightRadiusItemIndexs(activeKey, children);
|
|
|
const newBottomRightRadiusItemIndexs = getBottomRightRadiusItemIndexs(activeKey);
|
|
|
|
|
|
+ console.debug('CategorySidebar setActive - radius indexes:', {
|
|
|
+ top: newTopRightRadiusItemIndexs,
|
|
|
+ bottom: newBottomRightRadiusItemIndexs
|
|
|
+ });
|
|
|
+
|
|
|
setTopRightRadiusItemIndexs(newTopRightRadiusItemIndexs);
|
|
|
setBottomRightRadiusItemIndexs(newBottomRightRadiusItemIndexs);
|
|
|
|
|
|
const promises: Promise<void>[] = [];
|
|
|
|
|
|
- // 将旧的选中项改为 false
|
|
|
- if (currentActive !== activeKey && children[currentActive]) {
|
|
|
- promises.push(children[currentActive].setActive(false));
|
|
|
- }
|
|
|
-
|
|
|
- // 将新的选中项改为 true
|
|
|
- if (children && children[activeKey]) {
|
|
|
- promises.push(children[activeKey].setActive(true));
|
|
|
- }
|
|
|
-
|
|
|
// 移除旧的圆角效果
|
|
|
preTopRightRadiusItemIndexs.forEach((item) => {
|
|
|
if (children[item]) {
|
|
|
@@ -152,12 +166,19 @@ const CategorySidebar: React.FC<CategorySidebarProps> = (props) => {
|
|
|
}
|
|
|
}, [activeKey, setActive]);
|
|
|
|
|
|
+ // 组件挂载时设置初始选中状态
|
|
|
+ useEffect(() => {
|
|
|
+ if (childrenList.length > 0 && currentActive === activeKey) {
|
|
|
+ setActive(activeKey, true);
|
|
|
+ }
|
|
|
+ }, [childrenList, setActive, currentActive, activeKey]);
|
|
|
+
|
|
|
// 子组件变化时重新设置选中状态
|
|
|
useEffect(() => {
|
|
|
if (childrenList.length > 0) {
|
|
|
setActive(currentActive, true);
|
|
|
}
|
|
|
- }, [childrenList.length, setActive]);
|
|
|
+ }, [childrenList, setActive]);
|
|
|
|
|
|
const contextValue: CategorySidebarContextType = {
|
|
|
registerItem,
|
yourname