telegram-management-system/debug-menu-loading.js

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

(async () => {
  let browser;
  
  try {
    console.log('启动浏览器调试菜单加载...');
    browser = await chromium.launch({ 
      headless: false,
      slowMo: 300,
      devtools: true  // 打开开发者工具
    });
    
    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());
    });
    
    // 登录
    console.log('\n执行登录...');
    await page.goto('http://localhost:5174/', { waitUntil: 'networkidle' });
    await page.fill('[name="username"]', 'admin');
    await page.fill('[name="password"]', '111111');
    await page.click('button:has-text("登录")');
    await page.waitForTimeout(2000);
    
    // 访问首页
    if (page.url().includes('login')) {
      await page.goto('http://localhost:5174/dashboard/home', { waitUntil: 'networkidle' });
    }
    
    await page.waitForTimeout(2000);
    
    // 在浏览器中执行JavaScript检查
    console.log('\n检查菜单数据...');
    
    const menuInfo = await page.evaluate(() => {
      // 尝试获取Vue/React实例
      const app = window.__app__ || window.app || window.$app;
      
      // 检查localStorage中的数据
      const accessMenus = localStorage.getItem('access-menus');
      const accessToken = localStorage.getItem('access_token');
      const userInfo = localStorage.getItem('user_info');
      
      // 检查DOM中的菜单元素
      const menuElements = {
        antMenu: document.querySelectorAll('.ant-menu').length,
        menuItems: document.querySelectorAll('.ant-menu-item').length,
        subMenus: document.querySelectorAll('.ant-menu-submenu').length,
        roleMenu: document.querySelectorAll('[role="menu"]').length,
        sider: document.querySelectorAll('.ant-layout-sider').length
      };
      
      // 检查Pinia store
      let storeInfo = null;
      try {
        if (window.__PINIA__) {
          const stores = window.__PINIA__._s;
          storeInfo = {
            storeCount: stores.size,
            storeKeys: Array.from(stores.keys())
          };
        }
      } catch (e) {
        storeInfo = { error: e.message };
      }
      
      return {
        localStorage: {
          hasAccessMenus: !!accessMenus,
          accessMenusLength: accessMenus ? JSON.parse(accessMenus).length : 0,
          hasAccessToken: !!accessToken,
          hasUserInfo: !!userInfo
        },
        dom: menuElements,
        app: !!app,
        pinia: storeInfo,
        url: window.location.href,
        title: document.title
      };
    });
    
    console.log('\n菜单调试信息:');
    console.log(JSON.stringify(menuInfo, null, 2));
    
    // 尝试手动触发菜单加载
    console.log('\n尝试手动触发菜单加载...');
    
    await page.evaluate(() => {
      // 尝试调用菜单API
      if (window.getAllMenusApi) {
        console.log('找到 getAllMenusApi，调用中...');
        window.getAllMenusApi().then(menus => {
          console.log('菜单数据:', menus);
        });
      }
      
      // 检查路由
      if (window.$router) {
        console.log('路由列表:', window.$router.getRoutes().map(r => r.path));
      }
    });
    
    await page.waitForTimeout(3000);
    
    // 再次检查菜单元素
    const finalMenuCount = await page.locator('.ant-menu-item, .ant-menu-submenu').count();
    console.log(`\n最终菜单元素数量: ${finalMenuCount}`);
    
    // 截图
    await page.screenshot({ path: 'test-screenshots/menu-debug.png', fullPage: true });
    
    console.log('\n调试完成，保持浏览器打开...');
    await new Promise(() => {});
    
  } catch (error) {
    console.error('出错了:', error);
    if (browser) {
      await browser.close();
    }
  }
})();