更改一处变量名称update var name

src/router/index.ts

@@ -13,6 +13,10 @@ const router = createRouter({
 // 导航路由守卫
 router.beforeEach((to:any, from:any, next:any) => {
   try {
+    const title = to.meta && to.meta.title;
+    if (title) {
+      document.title = title;
+    }
     // 路由在白名单里面
     if (existWhite(to.path)) {
       next()

src/store/modules/setting.ts

@@ -14,7 +14,7 @@ const settingStore = defineStore({
   state: () => ({
     token: '', // 请求token
     userInfo: '', // 用户基本信息
-    perfer: {}, // 设置偏好，包括：主题皮肤等
+    prefer: {}, // 设置偏好，包括：主题皮肤等
     collapse: false, // 左边菜单折叠
     drawer: false, // 右边抽屉工具页面
     dropDown: false, // 用户名的下拉菜单折叠
@@ -24,7 +24,7 @@ const settingStore = defineStore({
   getters: {
     getToken: (state) => state.token,
     getUserInfo: (state) => state.userInfo,
-    getPerfer: (state) => state.perfer,
+    getPrefer: (state) => state.prefer,
     getCollapse: (state) => state.collapse,
     getDrawer: (state) => state.drawer,
     getDropDown: (state) => state.dropDown,
@@ -41,8 +41,8 @@ const settingStore = defineStore({
       this.userInfo = userInfo
     },
     // 设置偏好，包括：主题皮肤等
-    setPerfer(perfer: any) {
-      this.perfer = perfer
+    setPrefer(prefer: any) {
+      this.prefer = prefer
     },
     // 保存左边menu折叠状态
     setCollapse(collapse: boolean) {
@@ -71,7 +71,7 @@ const settingStore = defineStore({
         storage: localStorage, // 可以为localStorage或者sessionStorage
         // 可以通过paths指定需要持久化的值，其他没有指定的则不会持久化
         paths: [
-          'token', 'collapse', 'userInfo', 'dropDown','defaultActive', 'drawer', 'perfer',
+          'token', 'collapse', 'userInfo', 'dropDown','defaultActive', 'drawer', 'prefer',
         ]
       }
     ]

src/utils/modules/setting.ts

@@ -138,25 +138,25 @@ export const getBreadcrumb = (route: any) => {
  * 设置偏好设置信息
  * @returns number
  */
-export function setPerfer(data: any) {
+export function setPrefer(data: any) {
   // 如果数据值为空，则不处理
   if (Object.keys(data).length < 1) {
     return
   }
 
-  // 获取store里的perfer数据
-  const perfer = initStore().refSettStore.perfer
+  // 获取store里的prefer数据
+  const prefer = initStore().refSettStore.prefer
   let newData:any = {}
   // 存在数据的处理
-  if (Object.keys(perfer.value).length >= 1) {
+  if (Object.keys(prefer.value).length >= 1) {
     // 合并对象
-    newData = Object.assign(perfer.value, data)
+    newData = Object.assign(prefer.value, data)
   } else {
     newData = data
   }
   if (newData) {
     // 保存数据到store中
-    initStore().settStore.setPerfer(newData)
+    initStore().settStore.setPrefer(newData)
   }
   return true
 }
@@ -165,10 +165,10 @@ export function setPerfer(data: any) {
  * 获取偏好设置信息
  * @returns number
  */
-export const getPerfer = () => {
-  const { perfer } = initStore().refSettStore
+export const getPrefer = () => {
+  const { prefer } = initStore().refSettStore
   // 如果不存在主题皮肤，则使用默认皮肤
-  return perfer
+  return prefer
 }
 
 /**

src/views/layout/components/header/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="nav-header">
     <!-- 导入头部左边菜单伸缩组件 -->
-    <CompHeaderCollapse v-if="perfer.collapse != 0" />
+    <CompHeaderCollapse v-if="prefer.collapse != 0" />
     <!-- 导入头部面包屑导航栏组件 -->
-    <CompHeaderBreadcrumb v-if="perfer.breadcrumb != 0" />
+    <CompHeaderBreadcrumb v-if="prefer.breadcrumb != 0" />
     <!-- 导入头部工具栏组件 -->
     <CompHeaderToolbar />
     <!-- 导入头部用户简介下拉菜单组件 -->
@@ -30,9 +30,9 @@ export default defineComponent({
   },
   setup() {
     //获取偏好设置信息
-    const perfer:any = reactive(setting.getPerfer());
+    const prefer:any = reactive(setting.getPrefer());
     return {
-      perfer
+      prefer
     }
   }
 })

src/views/layout/components/header/profile.vue

@@ -2,11 +2,11 @@
     <div class="nav-profile">
         <el-dropdown trigger="hover" @visible-change="handleDropDown" @command="commandDropDownMenu">
           <div class="nav-user-avatar">
-            <img :src="data.userInfo.avatar_url" :alt="data.userInfo.username" class="profile-avatar" v-if="data.perfer.avatar != 0">
-            <span class="nav-user-name" v-if="data.perfer.username != 0 ">
+            <img :src="data.userInfo.avatar_url" :alt="data.userInfo.username" class="profile-avatar" v-if="data.prefer.avatar != 0">
+            <span class="nav-user-name" v-if="data.prefer.username != 0 ">
               {{data.userInfo.username}}
             </span>
-            <el-icon class="icon-drop" :span="5" :offset="2" v-if="data.perfer.username != 0 "><component :is="data.dropDown ? `ArrowDownBold` :  `ArrowUpBold`" /></el-icon>
+            <el-icon class="icon-drop" :span="5" :offset="2" v-if="data.prefer.username != 0 "><component :is="data.dropDown ? `ArrowDownBold` :  `ArrowUpBold`" /></el-icon>
           </div>
           <template #dropdown>
               <el-dropdown-menu>
@@ -40,7 +40,7 @@ export default defineComponent({
         username: 'guest'
       },
       //获取偏好设置信息
-      perfer: setting.getPerfer(),
+      prefer: setting.getPrefer(),
       //获取用户名的下拉菜单的收起/展开 状态
       dropDown: setting.getDropDown(),
       //获取用户基本信息

src/views/layout/components/header/toolbar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="nav-toolbar">
-        <el-icon class="nav-i-size icon-sty1" title="刷新" v-if="perfer.refresh != 0 " @click="refresh"><Refresh /></el-icon>
+        <el-icon class="nav-i-size icon-sty1" title="刷新" v-if="prefer.refresh != 0 " @click="refresh"><Refresh /></el-icon>
     </div>
 </template>
 
@@ -11,14 +11,14 @@ import { setting } from '@/utils'
 export default defineComponent({
   name:"ToolBar",
   setup() {
-    const perfer:any = reactive(setting.getPerfer());
+    const prefer:any = reactive(setting.getPrefer());
     //重新加载页面
     const refresh = () => {
       location.reload();
     }
 
     return {
-      perfer,
+      prefer,
       refresh,
     }
   }

src/views/layout/components/setting/drawer.vue

@@ -45,27 +45,27 @@ import { G } from '@/config'
 
 export default defineComponent({
   setup() {
-    const perfer:any = reactive(setting.getPerfer());
+    const prefer:any = reactive(setting.getPrefer());
     
     //常用的响应数据
     const data:any = reactive({
       form: {
         lang: G.LANG_DEFAULT,//主题皮肤，不选为默认皮肤
-        theme: comm.toStr(perfer.value.theme) ? perfer.value.theme : G.THEME_DEFAULT,//主题皮肤，不选为默认皮肤
-        breadcrumb: setting.getOnOff(perfer.value.breadcrumb) ? 1 : 0,//是否展示面包屑导航
-        collapse: setting.getOnOff(perfer.value.collapse) ? 1 : 0,//是否展示左边menu菜单收缩图标
-        refresh: setting.getOnOff(perfer.value.refresh) ?  1 : 0,//是否展示头部工具栏的刷新图标
-        username: setting.getOnOff(perfer.value.username) ?  1 : 0,//是否展示头部我的用户名
-        avatar: setting.getOnOff(perfer.value.avatar) ?  1 : 0,//是否展示头部我的头像
+        theme: comm.toStr(prefer.value.theme) ? prefer.value.theme : G.THEME_DEFAULT,//主题皮肤，不选为默认皮肤
+        breadcrumb: setting.getOnOff(prefer.value.breadcrumb) ? 1 : 0,//是否展示面包屑导航
+        collapse: setting.getOnOff(prefer.value.collapse) ? 1 : 0,//是否展示左边menu菜单收缩图标
+        refresh: setting.getOnOff(prefer.value.refresh) ?  1 : 0,//是否展示头部工具栏的刷新图标
+        username: setting.getOnOff(prefer.value.username) ?  1 : 0,//是否展示头部我的用户名
+        avatar: setting.getOnOff(prefer.value.avatar) ?  1 : 0,//是否展示头部我的头像
       },
       drawer: setting.getDrawer()
     })
 
     //保存功能设置面板的数据，包括：改变主题皮肤、图标显示、导航Tabs、显示/隐藏 面包屑导航等
     const turnOnOf = (val:number,name:string) => {
-      let perfer:any = {}
-      perfer[name] = val
-      setting.setPerfer(perfer);
+      let prefer:any = {}
+      prefer[name] = val
+      setting.setPrefer(prefer);
     }
     
     return {

src/views/layout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main">
     <el-container class="main-content">
-      <el-aside :width="collapse ? '60px' : '180px'" :class="setting.getTheme(perfer.theme)">
+      <el-aside :width="collapse ? '60px' : '180px'" :class="setting.getTheme(prefer.theme)">
         <CompAside />
       </el-aside>
       <el-container class="page">
@@ -36,11 +36,11 @@ export default defineComponent({
     // 获取setting store
     const collapse = setting.getCollapse()
     //获取偏好设置信息
-    const perfer:any = reactive(setting.getPerfer());
+    const prefer:any = reactive(setting.getPrefer());
     return {
       setting,
       collapse,
-      perfer
+      prefer
     }
   }
 })