Aida_Purchaser_Front/src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import { useUserInfoStore } from '@/stores/userInfo'
import { getUserLanguage } from '@/api/user'
import i18n from '@/lang/index'

// 语言映射：后端格式 -> i18n 格式
const backendToI18nLanguage: Record<string, string> = {
	'en': 'ENGLISH',
	'zh-CN': 'CHINESE_SIMPLIFIED'
}

// 语言同步状态缓存（避免每次路由切换都请求）
let languageSynced = false

/**
 * 路由缓存机制:
 * 1. 设置路由的meta属性为{ cache: true }，表示需要缓存
 * 2. App.vue中使用RouteCache组件，通过路由的name来进行匹配
 * 3. 路由的name默认是文件名,如果文件名与name不一致,通过defineOptions({ name: 'componentName' })来设置
 */
const router = createRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/home/index.vue')
    },
    {
      path: '/collectionStory',
      name: 'collectionStory',
      component: () => import('../views/collectionStory/index.vue')
    },
    {
      path: '/brand',
      name: 'brand',
      component: () => import('../views/brand/index.vue')
    },
	{
		path: '/brand/:id',
		name: 'brandDetail',
		component: () => import('../views/brandDetail/index.vue')
	},
    {
      path: '/digitalItem',
      name: 'digitalItem',
      component: () => import('../views/digitalItem/index.vue'),
      meta: { cache: true }
    },
    {
      path: '/digitalItem/:id',
      name: 'digitalItemDetail',
      component: () => import('../views/digitalDetail/index.vue')
    },
    {
      path: '/settings',
      name: 'settings',
      component: () => import('@/views/setting/index.vue'),
      meta: { cache: true }
    },
    {
      path: '/shoppingCart', // 购物车
      name: 'shoppingCart',
      component: () => import('@/views/shoppingCart/index.vue')
    },
    {
      path: '/notifications',
      name: 'notifications',
      component: () => import('@/views/notifications/index.vue')
    },
    {
      path: '/wardrobe',
      name: 'wardrobe',
      component: () => import('@/views/wardrobe/index.vue')
    },
    {
      path:'/account',
      name:'account',
      component:()=>import('@/views/account/index.vue')
    },
    {
      path:'/pay',
      name:'pay',
      component:()=>import('@/views/pay/index.vue')
    },
    {
      path: '/:pathMatch(.*)',
      name: '404',
      component: () => import('../views/404.vue')
    }
  ],
  history: createWebHistory('/')
})

router.beforeEach((to, from, next) => {
  next()
})

router.afterEach(async () => {
	// 检查用户是否已登录
	const userInfoStore = useUserInfoStore()
	const token = userInfoStore.state.token
	
	if (!token) {
		languageSynced = false // 未登录时重置同步状态
		return
	}
	
	// 如果已经同步过，跳过
	if (languageSynced) {
		return
	}
	
	try {
		// 获取用户语言设置
		const response = await getUserLanguage()
		const userLanguage = (response as any)?.language // 后端返回 'en' 或 'zh-CN'
		
		if (!userLanguage) {
			return
		}
		
		// 转换为 i18n 格式
		const i18nLanguage = backendToI18nLanguage[userLanguage]
		
		if (!i18nLanguage) {
			return
		}
		
		// 获取当前 i18n 语言
		const currentLocale = i18n.global.locale.value
		
		// 如果用户语言和本地 i18n 不一致，更新 i18n
		if (i18nLanguage !== currentLocale) {
			i18n.global.locale.value = i18nLanguage as 'ENGLISH' | 'CHINESE_SIMPLIFIED'
			localStorage.setItem('language', i18nLanguage)
		}
		
		// 标记已同步
		languageSynced = true
	} catch (error) {
		// 静默失败，不影响页面正常加载
		console.warn('Failed to sync user language:', error)
	}
})

export default router