telegram-management-system/frontend/debug-menu-tab.js

const { chromium } = require('playwright');

async function debugMenuTab() {
  const browser = await chromium.launch({ 
    headless: false,
    slowMo: 1500 
  });
  
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });
  
  const page = await context.newPage();
  
  // 监听所有事件
  page.on('console', msg => {
    console.log(`🔍 控制台[${msg.type()}]: ${msg.text()}`);
  });
  
  page.on('pageerror', error => {
    console.error(`❌ 页面错误: ${error.message}`);
  });
  
  console.log('🐛 开始调试菜单点击和tab页面问题...');
  
  try {
    // 登录
    await page.goto('http://localhost:8891/login', { waitUntil: 'networkidle' });
    console.log('1. 正在登录...');
    await page.locator('input[type="text"]').first().fill('admin');
    await page.locator('input[type="password"]').first().fill('111111');
    await page.locator('button[type="submit"]').first().click();
    await page.waitForTimeout(3000);
    
    // 访问主页
    await page.goto('http://localhost:8891/home', { waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);
    console.log('2. ✅ 已访问主页');
    
    // 检查当前tab状态
    const initialTabs = await page.locator('.tag-nav-wrapper .tag-nav-item').count();
    console.log(`3. 🏷️ 当前tab数量: ${initialTabs}`);
    
    const activeTab = await page.locator('.tag-nav-wrapper .tag-nav-item.is-active').textContent();
    console.log(`   当前激活tab: "${activeTab}"`);
    
    // 截图初始状态
    await page.screenshot({ path: 'debug-before-click.png', fullPage: true });
    
    console.log('4. 🔍 分析菜单结构...');
    
    // 展开第一个子菜单
    const submenuTitles = await page.locator('.ivu-menu-submenu-title').all();
    console.log(`   找到 ${submenuTitles.length} 个子菜单`);
    
    if (submenuTitles.length > 0) {
      const firstSubmenu = submenuTitles[0];
      const submenuText = await firstSubmenu.textContent();
      console.log(`   准备展开子菜单: "${submenuText}"`);
      
      await firstSubmenu.click();
      await page.waitForTimeout(1000);
      console.log('   ✅ 子菜单已展开');
      
      // 查找子菜单项
      const menuItems = await page.locator('.ivu-menu-item').all();
      console.log(`   子菜单中找到 ${menuItems.length} 个菜单项`);
      
      if (menuItems.length > 0) {
        // 尝试点击第一个菜单项
        const firstItem = menuItems[0];
        const itemText = await firstItem.textContent();
        const itemName = await firstItem.getAttribute('name') || 'unknown';
        
        console.log(`5. 🖱️ 准备点击菜单项: "${itemText}" (name: ${itemName})`);
        
        // 记录点击前状态
        const urlBefore = page.url();
        const tabsBefore = await page.locator('.tag-nav-wrapper .tag-nav-item').count();
        
        console.log(`   点击前URL: ${urlBefore}`);
        console.log(`   点击前tab数: ${tabsBefore}`);
        
        // 监听路由变化
        let routeChanged = false;
        page.on('framenavigated', () => {
          routeChanged = true;
          console.log('   🔄 检测到路由变化');
        });
        
        // 点击菜单项
        await firstItem.click();
        console.log('   ✅ 已点击菜单项');
        
        // 等待可能的变化
        await page.waitForTimeout(3000);
        
        // 检查变化
        const urlAfter = page.url();
        const tabsAfter = await page.locator('.tag-nav-wrapper .tag-nav-item').count();
        const activeTabAfter = await page.locator('.tag-nav-wrapper .tag-nav-item.is-active').textContent();
        
        console.log(`6. 📊 点击后状态:`);
        console.log(`   点击后URL: ${urlAfter}`);
        console.log(`   点击后tab数: ${tabsAfter}`);
        console.log(`   当前激活tab: "${activeTabAfter}"`);
        console.log(`   路由是否变化: ${routeChanged}`);
        console.log(`   URL是否变化: ${urlBefore !== urlAfter}`);
        console.log(`   Tab数是否增加: ${tabsAfter > tabsBefore}`);
        
        // 截图结果
        await page.screenshot({ path: 'debug-after-click.png', fullPage: true });
        
        if (urlBefore === urlAfter && tabsAfter === tabsBefore) {
          console.log('❌ 严重问题: 菜单点击完全无效果!');
          
          // 深入调试事件绑定
          console.log('7. 🔍 调试事件绑定...');
          
          const menuItemEvents = await page.evaluate(() => {
            const item = document.querySelector('.ivu-menu-item');
            return {
              hasClickListener: item && item.onclick !== null,
              classList: item ? Array.from(item.classList) : [],
              attributes: item ? Array.from(item.attributes).map(attr => `${attr.name}="${attr.value}"`) : []
            };
          });
          
          console.log('   菜单项事件信息:', menuItemEvents);
          
        } else {
          console.log('🎉 菜单点击有效果，但可能还有其他问题');
        }
      }
    }
    
  } catch (error) {
    console.error('❌ 调试失败:', error.message);
    console.error('堆栈:', error.stack);
  }
  
  console.log('\n⏱️ 保持浏览器打开20秒以便观察...');
  await page.waitForTimeout(20000);
  
  await browser.close();
  console.log('🏁 调试完成');
}

debugMenuTab().catch(console.error);