综述: 优化分销商管理页面交互功能和菜单搜索功能

- 在index.html中为分销管理添加了二级子菜单结构，改善了用户界面
- 增强了菜单项展开/收起的控制逻辑，提供了更好的交互体验
- 实现了菜单搜索功能，支持按文本内容过滤菜单项
- 添加了JavaScript错误监听器用于调试和错误追踪
- 修改了toggleSubmenu函数，优化了菜单展开/收起的行为控制

商家端web/index.html

@@ -156,6 +156,10 @@
             transform: rotate(90deg);
         }
 
+        .submenu-item.expanded .menu-arrow {
+            transform: rotate(90deg);
+        }
+
         .submenu {
             background-color: #fafafa;
             display: none;
@@ -165,6 +169,39 @@
             display: block;
         }
 
+        .submenu-item {
+            position: relative;
+        }
+
+        .submenu-item.expanded > .submenu {
+            display: block;
+        }
+
+        .submenu .submenu {
+            background-color: #f0f0f0;
+            display: none;
+        }
+
+        /* 确保二级子菜单也能正确显示 */
+        .menu-item.expanded .submenu-item.expanded > .submenu,
+        .submenu-item.expanded > .submenu {
+            display: block;
+        }
+        
+        /* 特别为分销管理的嵌套子菜单提供显示规则 */
+        .menu-item.expanded .submenu .submenu-item.expanded .submenu {
+            display: block;
+        }
+        
+        /* 确保在品牌管理展开的情况下，分销管理的子菜单能正确显示 */
+        .menu-item.expanded .submenu .submenu-item .submenu {
+            display: none; /* 默认隐藏 */
+        }
+        
+        .menu-item.expanded .submenu .submenu-item.expanded .submenu {
+            display: block; /* 只有在展开时才显示 */
+        }
+
         .submenu-link {
             padding: 8px 20px 8px 46px;
             font-size: 13px;
@@ -286,7 +323,7 @@
             </li>
             
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-user-cog"></i>
                     </span>
@@ -308,7 +345,7 @@
             </li>
             
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-clipboard-list"></i>
                     </span>
@@ -343,7 +380,7 @@
             </li>
             
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-analytics"></i>
                     </span>
@@ -370,7 +407,7 @@
             
             
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-users"></i>
                     </span>
@@ -393,7 +430,7 @@
             
 
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-file-alt"></i>
                     </span>
@@ -419,7 +456,7 @@
             </li>
 
             <li class="menu-item">
-                <div class="menu-link" onclick="toggleSubmenu(this)">
+                <div class="menu-link" onclick="toggleTopLevelSubmenu(this)">
                     <span class="menu-icon">
                         <i class="fas fa-award"></i>
                     </span>
@@ -437,14 +474,25 @@
                         <span class="submenu-icon"></span>
                         品牌市场订单
                     </a>
-                    <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/分销商管理.html', this)">
-                        <span class="submenu-icon"></span>
-                        分销商管理
-                    </a>
-                    <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/分销订单与佣金管理.html', this)">
-                        <span class="submenu-icon"></span>
-                        分销订单与佣金管理
-                    </a>
+                    <div class="submenu-item">
+                        <div class="submenu-link" onclick="toggleSubmenu(this, event);">
+                            <span class="submenu-icon"></span>
+                            <span class="menu-text">分销管理</span>
+                            <span class="menu-arrow">
+                                <i class="fas fa-chevron-right"></i>
+                            </span>
+                        </div>
+                        <div class="submenu">
+                            <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/分销商管理.html', this);" style="padding-left: 70px;">
+                                <span class="submenu-icon"></span>
+                                分销商管理
+                            </a>
+                            <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/分销订单与佣金管理.html', this);" style="padding-left: 70px;">
+                                <span class="submenu-icon"></span>
+                                分销订单与佣金管理
+                            </a>
+                        </div>
+                    </div>
                 </div>
             </li>
         </ul>
@@ -467,10 +515,58 @@
             sidebar.classList.toggle('open');
         }
 
-        // 切换子菜单展开/收起
-        function toggleSubmenu(element) {
+        // 切换顶级菜单展开/收起
+        function toggleTopLevelSubmenu(element) {
+            console.log('toggleTopLevelSubmenu called', element);
             const menuItem = element.parentElement;
-            menuItem.classList.toggle('expanded');
+            console.log('Parent menu item:', menuItem);
+
+            // 切换 expanded 类
+            const isExpanded = menuItem.classList.toggle('expanded');
+            console.log('Menu item expanded state:', isExpanded);
+
+            // 阻止事件冒泡，防止触发父级菜单的点击事件
+            if (event && event.stopPropagation) {
+                event.stopPropagation();
+            } else if (window.event) {
+                window.event.cancelBubble = true;
+            }
+            console.log('Event stopped from propagating');
+        }
+
+        // 切换子菜单展开/收起 - 适用于所有层级
+        function toggleSubmenu(element, event) {
+            console.log('toggleSubmenu called', element);
+            const parentElement = element.parentElement;
+            console.log('Parent element:', parentElement);
+            
+            let targetElement;
+            
+            // Check if this is a direct submenu item or nested submenu item
+            if (parentElement.classList.contains('submenu-item')) {
+                targetElement = parentElement;
+                console.log('Found submenu-item element');
+            } else {
+                targetElement = parentElement;
+                console.log('Using parent element directly');
+            }
+
+            console.log('Target element before toggle:', targetElement);
+            console.log('Target element classList:', targetElement.classList);
+
+            // Toggle expanded class
+            const isExpanded = targetElement.classList.toggle('expanded');
+            console.log('Target element expanded state after toggle:', isExpanded);
+            console.log('Target element classList after toggle:', targetElement.classList);
+
+            // Prevent event bubbling, to avoid triggering parent menu clicks
+            if (event && event.stopPropagation) {
+                event.stopPropagation();
+                console.log('Event stopped from propagating');
+            } else if (window.event) {
+                window.event.cancelBubble = true;
+                console.log('Event cancelBubble set to true');
+            }
         }
 
         // 加载内容到iframe
@@ -510,17 +606,22 @@
 
         // 菜单搜索功能
         document.querySelector('.search-input').addEventListener('input', function(e) {
+            console.log('Search input event triggered', e.target.value);
             const searchText = e.target.value.toLowerCase();
             const menuItems = document.querySelectorAll('.menu-item');
+            console.log('Found', menuItems.length, 'menu items');
             
             menuItems.forEach(item => {
                 const menuText = item.querySelector('.menu-text');
                 if (menuText) {
                     const text = menuText.textContent.toLowerCase();
+                    console.log('Checking menu text:', text);
                     if (text.includes(searchText) || searchText === '') {
                         item.style.display = 'block';
+                        console.log('Display set to block for:', text);
                     } else {
                         item.style.display = 'none';
+                        console.log('Display set to none for:', text);
                     }
                 }
             });
@@ -540,6 +641,16 @@
                 }
             });
         });
+        // 添加错误监听器以便调试
+        window.addEventListener('error', function(e) {
+            console.error('JavaScript Error:', e.error);
+            console.error('Error Message:', e.message);
+            console.error('Error Filename:', e.filename);
+            console.error('Error Line Number:', e.lineno);
+            console.error('Error Column Number:', e.colno);
+        });
+        
+        console.log('Page loaded and scripts initialized');
     </script>
 </body>
 </html>