feat(admin): 添加用户管理相关文件

添加用户管理视图、API和状态管理文件
2026-03-28 14:37:29 +08:00
commit 08ea5fbe98
1643 changed files with 255646 additions and 0 deletions
@@ -0,0 +1,164 @@
+const { chromium } = require('playwright');
+
+const TARGET_URL = 'http://localhost:5174';
+
+(async () => {
+  console.log('🔍 开始诊断前端白屏问题...\n');
+  
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 1920, height: 1080 }
+  });
+  const page = await context.newPage();
+  
+  // 监听控制台消息
+  const consoleMessages = [];
+  const errorMessages = [];
+  
+  page.on('console', msg => {
+    const text = msg.text();
+    const type = msg.type();
+    consoleMessages.push({ type, text });
+    if (type === 'error') {
+      errorMessages.push(text);
+      console.log(`❌ 控制台错误: ${text}`);
+    }
+  });
+  
+  page.on('pageerror', error => {
+    errorMessages.push(error.message);
+    console.log(`❌ 页面错误: ${error.message}`);
+  });
+  
+  // 监听网络请求
+  const failedRequests = [];
+  page.on('response', response => {
+    if (!response.ok() && response.status() !== 0) {
+      failedRequests.push({
+        url: response.url(),
+        status: response.status(),
+        statusText: response.statusText()
+      });
+    }
+  });
+  
+  try {
+    console.log('📄 正在访问页面:', TARGET_URL);
+    const startTime = Date.now();
+    
+    await page.goto(TARGET_URL, { 
+      timeout: 60000,
+      waitUntil: 'networkidle'
+    });
+    
+    const loadTime = Date.now() - startTime;
+    console.log(`⏱️ 页面加载耗时: ${loadTime}ms\n`);
+    
+    // 等待一段时间确保所有资源加载
+    await page.waitForTimeout(3000);
+    
+    // 获取页面标题
+    const title = await page.title();
+    console.log(`📋 页面标题: "${title}"`);
+    
+    // 检查DOM结构
+    const appDiv = await page.$('#app');
+    console.log(`🔍 #app 元素存在: ${!!appDiv}`);
+    
+    if (appDiv) {
+      const appHTML = await appDiv.innerHTML();
+      const appText = await appDiv.innerText();
+      console.log(`📄 #app 内容长度: ${appHTML.length} 字符`);
+      console.log(`📝 #app 文本内容: "${appText.substring(0, 200)}${appText.length > 200 ? '...' : ''}"`);
+      
+      // 检查是否有子元素
+      const childCount = await page.evaluate(() => {
+        const app = document.getElementById('app');
+        return app ? app.children.length : 0;
+      });
+      console.log(`👶 #app 子元素数量: ${childCount}`);
+      
+      if (childCount === 0) {
+        console.log('\n⚠️ 警告: #app 元素为空，Vue应用可能未正确挂载！');
+      }
+    }
+    
+    // 检查body内容
+    const bodyHTML = await page.evaluate(() => document.body.innerHTML);
+    console.log(`\n📄 Body内容长度: ${bodyHTML.length} 字符`);
+    
+    // 检查是否是白屏
+    const isWhiteScreen = await page.evaluate(() => {
+      const body = document.body;
+      const app = document.getElementById('app');
+      // 检查body或app是否有可见内容
+      const hasVisibleContent = body.innerText.trim().length > 0 || 
+                                body.querySelectorAll('img, canvas, svg, video, iframe').length > 0;
+      return !hasVisibleContent;
+    });
+    
+    console.log(`\n${isWhiteScreen ? '⚠️ 检测到白屏！' : '✅ 页面有内容显示'}`);
+    
+    // 检查Vue是否挂载
+    const vueMounted = await page.evaluate(() => {
+      return !!window.__VUE__ || !!document.querySelector('[data-v-app]');
+    });
+    console.log(`🔧 Vue应用已挂载: ${vueMounted}`);
+    
+    // 检查是否有加载错误提示
+    const hasErrorElement = await page.$('.error, .loading-error, [class*="error"], [class*="fail"]');
+    console.log(`❌ 发现错误元素: ${!!hasErrorElement}`);
+    
+    // 网络请求统计
+    console.log(`\n📊 网络请求统计:`);
+    console.log(`   - 失败请求数: ${failedRequests.length}`);
+    if (failedRequests.length > 0) {
+      console.log(`   - 失败的请求:`);
+      failedRequests.forEach(req => {
+        console.log(`     • ${req.url} - ${req.status} ${req.statusText}`);
+      });
+    }
+    
+    // 控制台消息统计
+    console.log(`\n📊 控制台消息统计:`);
+    console.log(`   - 总消息数: ${consoleMessages.length}`);
+    console.log(`   - 错误数: ${errorMessages.length}`);
+    
+    if (errorMessages.length > 0) {
+      console.log(`\n❌ JavaScript错误列表:`);
+      errorMessages.forEach((err, idx) => {
+        console.log(`   ${idx + 1}. ${err}`);
+      });
+    }
+    
+    // 截图保存
+    await page.screenshot({ path: '/Users/zhangxiang/Codes/Gitee/everything-is-suitable/white-screen-diagnosis.png', fullPage: true });
+    console.log(`\n📸 截图已保存到: /Users/zhangxiang/Codes/Gitee/everything-is-suitable/white-screen-diagnosis.png`);
+    
+    // 总结
+    console.log(`\n${'='.repeat(50)}`);
+    console.log('📋 诊断总结:');
+    if (isWhiteScreen) {
+      console.log('   ⚠️ 页面显示为白屏');
+      if (errorMessages.length > 0) {
+        console.log('   ❌ 发现JavaScript错误，可能是导致白屏的原因');
+      }
+      if (!vueMounted) {
+        console.log('   🔧 Vue应用未正确挂载');
+      }
+      if (failedRequests.length > 0) {
+        console.log('   📡 部分资源加载失败');
+      }
+    } else {
+      console.log('   ✅ 页面内容正常显示');
+    }
+    console.log(`${'='.repeat(50)}`);
+    
+  } catch (error) {
+    console.error('❌ 诊断过程中出错:', error.message);
+    await page.screenshot({ path: '/Users/zhangxiang/Codes/Gitee/everything-is-suitable/white-screen-error.png', fullPage: true });
+    console.log(`📸 错误截图已保存到: /Users/zhangxiang/Codes/Gitee/everything-is-suitable/white-screen-error.png`);
+  } finally {
+    await browser.close();
+  }
+})();