7 changed files with 169 additions and 1120 deletions
@ -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 @@ |
|||||||
// 测试路由收集功能
|
|
||||||
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