7 changed files with 169 additions and 1120 deletions
@ -1,223 +0,0 @@
@@ -1,223 +0,0 @@
|
||||
<template> |
||||
<div class="route-sync-test"> |
||||
<h2>路由同步测试</h2> |
||||
|
||||
<div class="test-section"> |
||||
<h3>1. 路由收集测试</h3> |
||||
<button @click="testRouteCollection" :disabled="loading">测试路由收集</button> |
||||
<div v-if="routeCollectionResult" class="result"> |
||||
<h4>收集结果:</h4> |
||||
<pre>{{ JSON.stringify(routeCollectionResult, null, 2) }}</pre> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="test-section"> |
||||
<h3>2. 路由映射测试</h3> |
||||
<button @click="testRouteMapping" :disabled="loading">测试路由映射</button> |
||||
<div v-if="routeMappingResult" class="result"> |
||||
<h4>映射结果:</h4> |
||||
<pre>{{ JSON.stringify(routeMappingResult, null, 2) }}</pre> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="test-section"> |
||||
<h3>3. 路由同步测试</h3> |
||||
<button @click="testRouteSync" :disabled="loading">测试路由同步</button> |
||||
<div v-if="syncResult" class="result"> |
||||
<h4>同步结果:</h4> |
||||
<pre>{{ JSON.stringify(syncResult, null, 2) }}</pre> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="test-section"> |
||||
<h3>4. 手动同步</h3> |
||||
<button @click="manualSync" :disabled="loading">手动同步</button> |
||||
<div v-if="manualSyncResult" class="result"> |
||||
<h4>手动同步结果:</h4> |
||||
<pre>{{ JSON.stringify(manualSyncResult, null, 2) }}</pre> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="loading" v-if="loading"> |
||||
<p>正在执行测试...</p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { RouteCollector } from './RouteCollector' |
||||
import { RouteMapper } from './RouteMapper' |
||||
import { RouteSyncService } from './RouteSyncService' |
||||
import routeSyncManager from './RouteSyncManager' |
||||
|
||||
export default { |
||||
name: 'RouteSyncTest', |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
routeCollectionResult: null, |
||||
routeMappingResult: null, |
||||
syncResult: null, |
||||
manualSyncResult: null |
||||
} |
||||
}, |
||||
methods: { |
||||
async testRouteCollection() { |
||||
this.loading = true |
||||
try { |
||||
const collector = new RouteCollector() |
||||
const routes = collector.collectRoutes() |
||||
|
||||
this.routeCollectionResult = { |
||||
totalRoutes: routes.length, |
||||
routes: routes, |
||||
menuRoutes: collector.getMenuRoutes(), |
||||
routesByModule: collector.getRoutesByModule() |
||||
} |
||||
|
||||
console.log('✅ 路由收集测试完成') |
||||
} catch (error) { |
||||
console.error('❌ 路由收集测试失败:', error) |
||||
this.routeCollectionResult = { error: error.message } |
||||
} finally { |
||||
this.loading = false |
||||
} |
||||
}, |
||||
|
||||
async testRouteMapping() { |
||||
this.loading = true |
||||
try { |
||||
const collector = new RouteCollector() |
||||
const routes = collector.collectRoutes() |
||||
|
||||
const mapper = new RouteMapper() |
||||
const mappings = mapper.generateRouteMappings(routes) |
||||
const validation = mapper.validateMappings(mappings) |
||||
|
||||
this.routeMappingResult = { |
||||
totalMappings: mappings.length, |
||||
mappings: mappings, |
||||
validation: validation, |
||||
isValid: validation.isValid |
||||
} |
||||
|
||||
console.log('✅ 路由映射测试完成') |
||||
} catch (error) { |
||||
console.error('❌ 路由映射测试失败:', error) |
||||
this.routeMappingResult = { error: error.message } |
||||
} finally { |
||||
this.loading = false |
||||
} |
||||
}, |
||||
|
||||
async testRouteSync() { |
||||
this.loading = true |
||||
try { |
||||
const syncService = new RouteSyncService('http://localhost:8080') |
||||
const success = await syncService.syncRoutes() |
||||
|
||||
this.syncResult = { |
||||
success: success, |
||||
syncStatus: syncService.getSyncStatus(), |
||||
syncStats: syncService.getSyncStats() |
||||
} |
||||
|
||||
console.log('✅ 路由同步测试完成') |
||||
} catch (error) { |
||||
console.error('❌ 路由同步测试失败:', error) |
||||
this.syncResult = { error: error.message } |
||||
} finally { |
||||
this.loading = false |
||||
} |
||||
}, |
||||
|
||||
async manualSync() { |
||||
this.loading = true |
||||
try { |
||||
const success = await routeSyncManager.manualSync() |
||||
|
||||
this.manualSyncResult = { |
||||
success: success, |
||||
syncStatus: routeSyncManager.getSyncStatus(), |
||||
syncStats: routeSyncManager.getSyncStats() |
||||
} |
||||
|
||||
console.log('✅ 手动同步完成') |
||||
} catch (error) { |
||||
console.error('❌ 手动同步失败:', error) |
||||
this.manualSyncResult = { error: error.message } |
||||
} finally { |
||||
this.loading = false |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.route-sync-test { |
||||
padding: 20px; |
||||
max-width: 1200px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.test-section { |
||||
margin-bottom: 30px; |
||||
padding: 20px; |
||||
border: 1px solid #ddd; |
||||
border-radius: 8px; |
||||
background-color: #f9f9f9; |
||||
} |
||||
|
||||
.test-section h3 { |
||||
margin-top: 0; |
||||
color: #333; |
||||
} |
||||
|
||||
button { |
||||
background-color: #007bff; |
||||
color: white; |
||||
border: none; |
||||
padding: 10px 20px; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
button:hover { |
||||
background-color: #0056b3; |
||||
} |
||||
|
||||
button:disabled { |
||||
background-color: #6c757d; |
||||
cursor: not-allowed; |
||||
} |
||||
|
||||
.result { |
||||
margin-top: 15px; |
||||
padding: 15px; |
||||
background-color: white; |
||||
border-radius: 4px; |
||||
border: 1px solid #ddd; |
||||
} |
||||
|
||||
.result h4 { |
||||
margin-top: 0; |
||||
color: #333; |
||||
} |
||||
|
||||
.result pre { |
||||
background-color: #f8f9fa; |
||||
padding: 10px; |
||||
border-radius: 4px; |
||||
overflow-x: auto; |
||||
font-size: 12px; |
||||
line-height: 1.4; |
||||
} |
||||
|
||||
.loading { |
||||
text-align: center; |
||||
padding: 20px; |
||||
color: #666; |
||||
} |
||||
</style> |
||||
@ -1,116 +0,0 @@
@@ -1,116 +0,0 @@
|
||||
// 测试路由收集功能
|
||||
import { RouteCollector } from './RouteCollector' |
||||
import { RouteMapper } from './RouteMapper' |
||||
import { RouteSyncService } from './RouteSyncService' |
||||
|
||||
// 模拟路由数据（基于实际的路由结构）
|
||||
const mockRoutes = [ |
||||
{ |
||||
path: '/', |
||||
component: { name: 'MainLayout' }, |
||||
children: [ |
||||
{ |
||||
path: '', |
||||
name: 'Home', |
||||
component: { name: 'Home' } |
||||
}, |
||||
{ |
||||
path: '/user-management', |
||||
name: 'UserManagement', |
||||
component: { name: 'UserManagement' } |
||||
}, |
||||
{ |
||||
path: '/settings', |
||||
name: 'Settings', |
||||
component: { name: 'Settings' } |
||||
}, |
||||
{ |
||||
path: '/user-profile', |
||||
name: 'UserProfile', |
||||
component: { name: 'UserProfile' } |
||||
}, |
||||
{ |
||||
path: '/role-management', |
||||
name: 'RoleManagement', |
||||
component: { name: 'RoleManagement' } |
||||
} |
||||
] |
||||
} |
||||
] |
||||
|
||||
// 测试路由收集
|
||||
function testRouteCollection() { |
||||
console.log('🧪 开始测试路由收集...') |
||||
|
||||
// 创建路由收集器
|
||||
const collector = new RouteCollector() |
||||
|
||||
// 模拟收集路由
|
||||
collector.routes = [] |
||||
collector._collectFromRouter(mockRoutes) |
||||
|
||||
console.log('📋 收集到的路由:') |
||||
collector.routes.forEach((route, index) => { |
||||
console.log(`${index + 1}. ${route.path} (${route.name}) - ${route.module}`) |
||||
}) |
||||
|
||||
// 测试路由映射
|
||||
const mapper = new RouteMapper() |
||||
const mappings = mapper.generateRouteMappings(collector.routes) |
||||
|
||||
console.log('\n🔗 生成的路由映射:') |
||||
mappings.forEach((mapping, index) => { |
||||
console.log(`${index + 1}. ${mapping.frontendRoute} -> ${mapping.backendRoute} (${mapping.httpMethod})`) |
||||
}) |
||||
|
||||
return { |
||||
routes: collector.routes, |
||||
mappings: mappings |
||||
} |
||||
} |
||||
|
||||
// 测试同步服务
|
||||
async function testSyncService() { |
||||
console.log('\n🔄 开始测试同步服务...') |
||||
|
||||
const syncService = new RouteSyncService('http://localhost:8080') |
||||
|
||||
// 模拟收集路由
|
||||
const collector = new RouteCollector() |
||||
collector.routes = [] |
||||
collector._collectFromRouter(mockRoutes) |
||||
|
||||
// 生成映射
|
||||
const mapper = new RouteMapper() |
||||
const mappings = mapper.generateRouteMappings(collector.routes) |
||||
|
||||
console.log(`📊 准备同步 ${mappings.length} 个路由映射`) |
||||
|
||||
// 验证映射
|
||||
const validation = mapper.validateMappings(mappings) |
||||
console.log(`✅ 映射验证: ${validation.isValid ? '通过' : '失败'}`) |
||||
if (!validation.isValid) { |
||||
console.log('❌ 验证错误:', validation.errors) |
||||
} |
||||
|
||||
return { |
||||
isValid: validation.isValid, |
||||
mappings: mappings, |
||||
errors: validation.errors |
||||
} |
||||
} |
||||
|
||||
// 导出测试函数
|
||||
export { testRouteCollection, testSyncService } |
||||
|
||||
// 如果直接运行此文件，执行测试
|
||||
if (typeof window !== 'undefined') { |
||||
// 在浏览器环境中，将测试函数挂载到全局对象
|
||||
window.testRouteCollection = testRouteCollection |
||||
window.testSyncService = testSyncService |
||||
|
||||
console.log('🧪 路由收集测试函数已挂载到 window 对象') |
||||
console.log('使用方法:') |
||||
console.log(' testRouteCollection() - 测试路由收集') |
||||
console.log(' testSyncService() - 测试同步服务') |
||||
} |
||||
Loading…
Reference in new issue