主要变更: 1. 重构API目录结构,采用模块化设计,适配5.x后端接口规范 2. 优化布局组件,提升用户界面体验 3. 增强国际化支持,完善多语言配置 4. 新增权限控制功能,支持前端路由权限管理 5. 优化认证流程,支持JWT认证机制 6. 新增中间件和插件,提升系统扩展性 7. 优化状态管理,采用更清晰的模块化设计 8. 新增搜索框、广告等组件,丰富页面功能 9. 更改包管理工具从npm到pnpm,提升依赖管理效率 10. 完善配置系统,支持多环境配置 适配5.x后端特性: - 采用新的API接口规范 - 支持JWT认证机制 - 适配后端权限控制体系 - 支持后端国际化接口 - 优化数据交互方式
58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<!-- SEO 组件 -->
|
|
<Seo />
|
|
|
|
<el-config-provider :value-on-clear="() => null" :locale="locale">
|
|
<NuxtLayout>
|
|
<NuxtPage />
|
|
</NuxtLayout>
|
|
</el-config-provider>
|
|
|
|
<!-- 百度统计组件 -->
|
|
<BaiduAnalytics />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// @ts-ignore
|
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
|
// @ts-ignore
|
|
import en from 'element-plus/dist/locale/en.mjs'
|
|
import type { Language } from 'element-plus/es/locale'
|
|
import { onMounted, computed } from 'vue'
|
|
import { initDark, getDark } from './utils/dark'
|
|
import { useHead } from 'nuxt/app'
|
|
|
|
// modules import mark, Please do not remove.
|
|
import { useSystemStore } from './stores/system'
|
|
import { useMemberStore } from './stores/member'
|
|
|
|
const systemStore = useSystemStore()
|
|
const locale = computed(() => (systemStore.lang === 'zh-cn' ? zhCn : en))
|
|
|
|
// 在服务器端渲染时就设置正确的 dark 类
|
|
useHead({
|
|
htmlAttrs: {
|
|
class: getDark() ? 'dark' : ''
|
|
}
|
|
})
|
|
|
|
// 仅在客户端执行,避免 SSR 时清空持久化的 token
|
|
if (import.meta.client) {
|
|
const memberStore = useMemberStore()
|
|
// 如果有 token 但没有 refreshToken(比如旧数据),清除它
|
|
if (memberStore.token && !memberStore.refreshToken) {
|
|
memberStore.token = ''
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await systemStore.getSiteInfoFn()
|
|
// 初始化语言设置
|
|
systemStore.initLanguage()
|
|
// 初始化暗黑模式(确保客户端与服务器端保持一致)
|
|
initDark()
|
|
})
|
|
</script>
|