237c7802e5
Some checks failed
Deploy / deploy (push) Has been cancelled
Full-stack web application for Telegram management - Frontend: Vue 3 + Vben Admin - Backend: NestJS - Features: User management, group broadcast, statistics 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
318 lines
14 KiB
JavaScript
318 lines
14 KiB
JavaScript
#!/usr/bin/env node
|
||
|
||
/**
|
||
* 完整演示新的统一智能姓名管理系统
|
||
*/
|
||
|
||
const { chromium } = require('playwright');
|
||
|
||
async function unifiedDemo() {
|
||
console.log('🎯 演示全新的统一智能姓名管理系统...\n');
|
||
|
||
let browser;
|
||
let page;
|
||
|
||
try {
|
||
browser = await chromium.launch({
|
||
headless: false,
|
||
slowMo: 1500,
|
||
devtools: false
|
||
});
|
||
|
||
const context = await browser.newContext({
|
||
viewport: { width: 1600, height: 1000 }
|
||
});
|
||
|
||
page = await context.newPage();
|
||
|
||
// 监听API调用
|
||
page.on('request', request => {
|
||
const url = request.url();
|
||
if (url.includes('/nameTemplate/')) {
|
||
console.log(`🔗 ${request.method()} ${url}`);
|
||
}
|
||
});
|
||
|
||
page.on('response', response => {
|
||
const url = response.url();
|
||
if (url.includes('/nameTemplate/')) {
|
||
console.log(`📡 ${response.status()} ${url}`);
|
||
}
|
||
});
|
||
|
||
// ==================== 第1步：登录 ====================
|
||
console.log('🚀 第1步：登录系统...');
|
||
await page.goto('http://localhost:8891');
|
||
await page.waitForLoadState('networkidle');
|
||
|
||
await page.fill('input[type="text"]', 'admin');
|
||
await page.fill('input[type="password"]', '111111');
|
||
await page.click('button:has-text("登录")');
|
||
await page.waitForLoadState('networkidle');
|
||
|
||
console.log('✅ 登录成功');
|
||
await page.screenshot({ path: 'unified_01_login.png', fullPage: true });
|
||
|
||
// ==================== 第2步：访问新的统一姓名管理 ====================
|
||
console.log('\n🎯 第2步：访问新的统一智能姓名管理系统...');
|
||
await page.goto('http://localhost:8891/#/nameManage/unified');
|
||
await page.waitForLoadState('networkidle');
|
||
await page.waitForTimeout(5000); // 等待系统状态加载
|
||
|
||
console.log('✅ 进入统一姓名管理系统');
|
||
await page.screenshot({ path: 'unified_02_main_interface.png', fullPage: true });
|
||
|
||
// ==================== 第3步：检查系统状态面板 ====================
|
||
console.log('\n📊 第3步：检查4层级生成系统状态...');
|
||
|
||
const systemStatus = await page.evaluate(() => {
|
||
// 检查生成器状态卡片
|
||
const statusCards = document.querySelectorAll('.status-card');
|
||
const generatorItems = document.querySelectorAll('.generator-item');
|
||
const platformTags = document.querySelectorAll('.platform-tags .ivu-tag');
|
||
const cultureTags = document.querySelectorAll('.culture-tags .ivu-tag');
|
||
|
||
return {
|
||
statusCardsCount: statusCards.length,
|
||
generatorCount: generatorItems.length,
|
||
platformCount: platformTags.length,
|
||
cultureCount: cultureTags.length,
|
||
hasGeneratePanel: !!document.querySelector('.generate-panel')
|
||
};
|
||
});
|
||
|
||
console.log('✅ 系统状态面板分析：');
|
||
console.log(` 📊 状态卡片: ${systemStatus.statusCardsCount}个`);
|
||
console.log(` 🎯 生成器: ${systemStatus.generatorCount}个`);
|
||
console.log(` 🌐 支持平台: ${systemStatus.platformCount}个`);
|
||
console.log(` 🌍 支持文化: ${systemStatus.cultureCount}个`);
|
||
console.log(` 🎲 智能生成面板: ${systemStatus.hasGeneratePanel ? '存在' : '不存在'}`);
|
||
|
||
// ==================== 第4步：测试智能生成功能 ====================
|
||
console.log('\n🎲 第4步：测试智能姓名生成功能...');
|
||
|
||
// 设置生成参数
|
||
const platformSelect = await page.locator('.generate-panel .ivu-select').first();
|
||
if (await platformSelect.isVisible()) {
|
||
await platformSelect.click();
|
||
await page.waitForTimeout(500);
|
||
await page.click('li:has-text("微信")');
|
||
console.log('🔧 选择平台: 微信');
|
||
}
|
||
|
||
const cultureSelect = await page.locator('.generate-panel .ivu-select').nth(1);
|
||
if (await cultureSelect.isVisible()) {
|
||
await cultureSelect.click();
|
||
await page.waitForTimeout(500);
|
||
await page.click('li:has-text("中文")');
|
||
console.log('🌍 选择文化: 中文');
|
||
}
|
||
|
||
// 点击生成按钮
|
||
const generateBtn = await page.locator('button:has-text("生成姓名")');
|
||
if (await generateBtn.isVisible()) {
|
||
await generateBtn.click();
|
||
console.log('🎯 触发智能生成...');
|
||
await page.waitForTimeout(3000);
|
||
|
||
await page.screenshot({ path: 'unified_03_generate_names.png', fullPage: true });
|
||
|
||
// 检查生成结果
|
||
const generateResults = await page.evaluate(() => {
|
||
const resultItems = document.querySelectorAll('.name-result-item');
|
||
return Array.from(resultItems).map(item => ({
|
||
displayName: item.querySelector('.name-display strong')?.textContent,
|
||
nameParts: item.querySelector('.name-parts')?.textContent,
|
||
tags: Array.from(item.querySelectorAll('.ivu-tag')).map(tag => tag.textContent)
|
||
}));
|
||
});
|
||
|
||
if (generateResults.length > 0) {
|
||
console.log('✅ 智能生成成功：');
|
||
generateResults.forEach((result, index) => {
|
||
console.log(` ${index + 1}. ${result.displayName} ${result.nameParts} [${result.tags.join(', ')}]`);
|
||
});
|
||
} else {
|
||
console.log('⚠️ 生成结果为空（可能系统配置未完成）');
|
||
}
|
||
}
|
||
|
||
// ==================== 第5步：测试添加新模板功能 ====================
|
||
console.log('\n➕ 第5步：测试添加姓名模板功能...');
|
||
|
||
const addButton = await page.locator('button:has-text("添加姓名模板")');
|
||
if (await addButton.isVisible()) {
|
||
await addButton.click();
|
||
await page.waitForTimeout(2000);
|
||
console.log('🖱️ 打开添加模板弹窗');
|
||
|
||
await page.screenshot({ path: 'unified_04_add_modal.png', fullPage: true });
|
||
|
||
// 检查弹窗内容
|
||
const modalInfo = await page.evaluate(() => {
|
||
const modal = document.querySelector('.ivu-modal');
|
||
if (!modal) return { hasModal: false };
|
||
|
||
const inputs = modal.querySelectorAll('input');
|
||
const selects = modal.querySelectorAll('.ivu-select');
|
||
|
||
return {
|
||
hasModal: true,
|
||
title: modal.querySelector('.ivu-modal-header')?.textContent?.trim(),
|
||
inputCount: inputs.length,
|
||
selectCount: selects.length,
|
||
inputPlaceholders: Array.from(inputs).map(input => input.placeholder).filter(p => p)
|
||
};
|
||
});
|
||
|
||
if (modalInfo.hasModal) {
|
||
console.log('✅ 高级添加弹窗：');
|
||
console.log(` 📝 标题: ${modalInfo.title}`);
|
||
console.log(` 📝 输入框: ${modalInfo.inputCount}个`);
|
||
console.log(` 📋 下拉选择: ${modalInfo.selectCount}个`);
|
||
console.log(` 📋 字段: ${modalInfo.inputPlaceholders.join(', ')}`);
|
||
|
||
// 填写一些示例数据
|
||
const lastNameInput = await page.locator('input[placeholder*="姓氏"]');
|
||
if (await lastNameInput.isVisible()) {
|
||
await lastNameInput.fill('智能');
|
||
console.log('✏️ 填写姓氏: 智能');
|
||
}
|
||
|
||
const firstNameInput = await page.locator('input[placeholder*="名字"]');
|
||
if (await firstNameInput.isVisible()) {
|
||
await firstNameInput.fill('生成');
|
||
console.log('✏️ 填写名字: 生成');
|
||
}
|
||
|
||
const displayNameInput = await page.locator('input[placeholder*="显示名称"]');
|
||
if (await displayNameInput.isVisible()) {
|
||
await displayNameInput.fill('智能生成');
|
||
console.log('✏️ 填写显示名: 智能生成');
|
||
}
|
||
|
||
await page.waitForTimeout(1000);
|
||
await page.screenshot({ path: 'unified_05_filled_form.png', fullPage: true });
|
||
|
||
// 取消而不是提交
|
||
const cancelButton = await page.locator('button:has-text("取消")');
|
||
if (await cancelButton.isVisible()) {
|
||
await cancelButton.click();
|
||
console.log('❌ 取消添加（演示完成）');
|
||
}
|
||
}
|
||
}
|
||
|
||
// ==================== 第6步：测试高级搜索功能 ====================
|
||
console.log('\n🔍 第6步：测试高级搜索和过滤功能...');
|
||
|
||
// 测试关键词搜索
|
||
const keywordInput = await page.locator('input[placeholder*="搜索姓名"]');
|
||
if (await keywordInput.isVisible()) {
|
||
await keywordInput.fill('李');
|
||
console.log('🔍 输入搜索关键词: 李');
|
||
|
||
// 测试文化过滤
|
||
const cultureFilter = await page.locator('form .ivu-select').nth(1);
|
||
if (await cultureFilter.isVisible()) {
|
||
await cultureFilter.click();
|
||
await page.waitForTimeout(500);
|
||
const cnOption = await page.locator('li:has-text("中文")');
|
||
if (await cnOption.isVisible()) {
|
||
await cnOption.click();
|
||
console.log('🌍 选择文化过滤: 中文');
|
||
}
|
||
}
|
||
|
||
const searchButton = await page.locator('button:has-text("搜索")');
|
||
if (await searchButton.isVisible()) {
|
||
await searchButton.click();
|
||
await page.waitForTimeout(2000);
|
||
console.log('🔍 执行高级搜索');
|
||
|
||
await page.screenshot({ path: 'unified_06_advanced_search.png', fullPage: true });
|
||
|
||
// 重置搜索
|
||
const resetButton = await page.locator('button:has-text("重置")');
|
||
if (await resetButton.isVisible()) {
|
||
await resetButton.click();
|
||
await page.waitForTimeout(1000);
|
||
console.log('🧹 重置搜索条件');
|
||
}
|
||
}
|
||
}
|
||
|
||
// ==================== 第7步：检查数据表格 ====================
|
||
console.log('\n📋 第7步：检查增强型数据表格...');
|
||
|
||
const tableInfo = await page.evaluate(() => {
|
||
const table = document.querySelector('table');
|
||
if (!table) return { hasTable: false };
|
||
|
||
const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent?.trim());
|
||
const rows = table.querySelectorAll('tbody tr');
|
||
|
||
return {
|
||
hasTable: true,
|
||
headerCount: headers.length,
|
||
headers: headers,
|
||
rowCount: rows.length,
|
||
hasAdvancedColumns: headers.includes('文化') && headers.includes('平台') && headers.includes('质量')
|
||
};
|
||
});
|
||
|
||
if (tableInfo.hasTable) {
|
||
console.log('✅ 增强型数据表格：');
|
||
console.log(` 📊 列数: ${tableInfo.headerCount}个`);
|
||
console.log(` 📋 列标题: ${tableInfo.headers.join(' | ')}`);
|
||
console.log(` 📊 数据行: ${tableInfo.rowCount}条`);
|
||
console.log(` 🎯 高级列: ${tableInfo.hasAdvancedColumns ? '已包含文化/平台/质量列' : '基础列'}`);
|
||
}
|
||
|
||
// ==================== 第8步：最终展示 ====================
|
||
console.log('\n🎉 第8步：系统功能总览...');
|
||
|
||
await page.screenshot({ path: 'unified_07_final_overview.png', fullPage: true });
|
||
|
||
console.log('\n🏆 统一智能姓名管理系统演示完成！');
|
||
console.log('\n📂 生成的演示截图：');
|
||
console.log(' unified_01_login.png - 系统登录');
|
||
console.log(' unified_02_main_interface.png - 统一管理界面');
|
||
console.log(' unified_03_generate_names.png - 智能生成功能');
|
||
console.log(' unified_04_add_modal.png - 高级添加弹窗');
|
||
console.log(' unified_05_filled_form.png - 详细表单');
|
||
console.log(' unified_06_advanced_search.png - 高级搜索功能');
|
||
console.log(' unified_07_final_overview.png - 最终系统总览');
|
||
|
||
console.log('\n✨ 新统一系统特点：');
|
||
console.log(' 🎯 统一界面: 替代分离的姓氏/名字页面');
|
||
console.log(' 📊 系统状态: 实时显示4层级生成器状态');
|
||
console.log(' 🌐 多平台支持: 8个通讯平台适配');
|
||
console.log(' 🌍 多文化支持: 14种文化背景');
|
||
console.log(' 🎲 智能生成: 实时在线生成高质量姓名');
|
||
console.log(' 🔍 高级搜索: 多维度过滤和搜索');
|
||
console.log(' 📋 增强表格: 文化/平台/质量/权重等丰富信息');
|
||
console.log(' ➕ 高级添加: 全面的模板配置选项');
|
||
console.log(' 🔧 智能路由: 旧页面隐藏，新页面为主入口');
|
||
|
||
console.log('\n⏰ 浏览器将保持打开20秒供最终观察...');
|
||
await page.waitForTimeout(20000);
|
||
|
||
} catch (error) {
|
||
console.error('❌ 演示失败:', error.message);
|
||
if (page) {
|
||
await page.screenshot({ path: 'unified_error.png', fullPage: true });
|
||
}
|
||
} finally {
|
||
if (browser) {
|
||
await browser.close();
|
||
}
|
||
console.log('🏁 统一系统演示结束');
|
||
}
|
||
}
|
||
|
||
if (require.main === module) {
|
||
unifiedDemo().catch(console.error);
|
||
}
|
||
|
||
module.exports = unifiedDemo; |