fix🐛: 解决切换语言不会监听的问题

src/components/Reload/index.ts

@@ -0,0 +1,3 @@
+import Reload from './index.vue';
+
+export { Reload };

src/components/Reload/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="go-reload"></div>  
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import router from '@/router'
+// 重新加载前路径页面
+onMounted(() => {
+  router.go(-1)
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('reload') {
+  height: 100vh;
+  width: 100vw;
+  @include filter-bg-color('background-color')
+}
+</style>

src/enums/pageEnum.ts

@@ -14,6 +14,9 @@ export enum PageEnum {
   //重定向
   REDIRECT = '/redirect',
   REDIRECT_NAME = 'Redirect',
+  RELOAD = '/reload',
+  RELOAD_NAME = 'Reload',
+
 
   // 首页
   BASE_HOME = '/project',

src/router/base.ts

@@ -2,6 +2,7 @@ import { RouteRecordRaw } from 'vue-router'
 import type { AppRouteRecordRaw } from '@/router/types';
 import { ErrorPage404, ErrorPage403, ErrorPage500, Layout } from '@/router/constant';
 import { PageEnum } from '@/enums/pageEnum'
+import { Reload } from '@/components/Reload/index'
 
 
 export const LoginRoute: RouteRecordRaw = {
@@ -50,8 +51,17 @@ export const ErrorPageRoute: AppRouteRecordRaw = {
   }
 };
 
+export const ReloadRoute: AppRouteRecordRaw = {
+  path: PageEnum.RELOAD,
+  name: PageEnum.RELOAD_NAME,
+  component: Reload,
+  meta: {
+    title: PageEnum.RELOAD_NAME,
+  },
+}
+
 export const RedirectRoute: AppRouteRecordRaw = {
-  path: '/redirect',
+  path: PageEnum.REDIRECT,
   name: PageEnum.REDIRECT_NAME,
   component: Layout,
   meta: {

src/router/index.ts

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import { RedirectRoute } from '@/router/base'
 import { createRouterGuards } from './router-guards'
 import { PageEnum } from '@/enums/pageEnum'
-import { HttpErrorPage, LoginRoute } from '@/router/base'
+import { HttpErrorPage, LoginRoute, ReloadRoute } from '@/router/base'
 import { Layout } from '@/router/constant'
 
 import modules from '@/router/modules'
@@ -26,7 +26,7 @@ const RootRoute: Array<RouteRecordRaw> = [
 ]
 
 
-export const constantRouter: any[] = [LoginRoute, ...RootRoute, RedirectRoute];
+export const constantRouter: any[] = [LoginRoute, ...RootRoute, RedirectRoute, ReloadRoute];
 
 const router = createRouter({
   history: createWebHashHistory(''),

src/store/modules/langStore/langStore.ts

@@ -3,7 +3,7 @@ import { lang } from '@/settings/designSetting'
 import { LangStateType } from './langStore.d'
 import { LangEnum } from '@/enums/styleEnum'
 import i18n from '@/i18n/index'
-import { setLocalStorage } from '@/utils'
+import { setLocalStorage, reloadRoutePage } from '@/utils'
 import { GO_LANG_SELECT } from '@/settings/storageConst'
 
 export const useLangStore = defineStore({
@@ -21,6 +21,7 @@ export const useLangStore = defineStore({
       this.lang = lang
       i18n.global.locale = lang
       setLocalStorage(GO_LANG_SELECT, lang)
+      reloadRoutePage()
     }
   }
 })

src/styles/common/mixins/mixins.scss

@@ -52,13 +52,6 @@
   }
 }
 
-//获取斑点渐变颜色
-@mixin background-point($target) {
-  @include themeify {
-    background-image: themed($target);
-  }
-}
-
 //获取边框颜色
 @mixin filter-border-color($target) {
   @include themeify {

src/styles/common/style.scss

@@ -45,7 +45,7 @@
   overflow: hidden;
 }
 
-// 背景斑点需配合 @mixin background-point 使用
+// 背景斑点需配合 @mixin background-image 使用
 .go-point-bg {
   @include fetch-theme('background-color');
   background-size: 15px 15px, 15px 15px;

src/utils/page.ts

@@ -1,6 +1,5 @@
 import { ResultEnum } from '@/enums/httpEnum'
 import { ErrorPageNameMap, PageEnum } from '@/enums/pageEnum'
-import { RouteLocation } from 'vue-router'
 import router from '@/router'
 import { docPath, giteeSourceCodePath } from '@/settings/pathConst'
 
@@ -87,6 +86,13 @@ export const redirectErrorPage = (code: ResultEnum) => {
   routerTurnByName(pageName)
 }
 
+/**
+ * * 重新加载当前路由页面
+ */
+export const reloadRoutePage = () => {
+  routerTurnByName(PageEnum.RELOAD_NAME)
+}
+
 /**
  * * 退出
  */

src/views/chart/components/ContentDetails/index.vue

@@ -43,7 +43,6 @@ $wight: 400px;
   padding: 10px;
   .icon-position {
     padding-top: 2px;
-    color: #70c0e8;
   }
 }
 </style>

src/views/chart/components/ContentDraw/index.vue

@@ -19,7 +19,7 @@ import { ContentBox } from '../ContentBox/index'
 <style lang="scss" scoped>
 @include go(content-draw) {
   overflow: hidden;
-  @include background-point('background-point');
+  @include background-image('background-point');
   @extend .go-point-bg;
 }
 </style>

src/views/exception/403.vue

@@ -11,10 +11,8 @@
 </template>
 
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
 import { PageEnum } from '@/enums/pageEnum'
 import { routerTurnByName } from '@/utils'
-const router = useRouter()
 function goHome() {
   routerTurnByName(PageEnum.BASE_HOME_NAME)
 }

src/views/exception/404.vue

@@ -11,10 +11,8 @@
 </template>
 
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
 import { PageEnum } from '@/enums/pageEnum'
 import { routerTurnByName } from '@/utils'
-const router = useRouter()
 function goHome() {
   routerTurnByName(PageEnum.BASE_HOME_NAME)
 }

src/views/exception/500.vue

@@ -11,10 +11,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
 import { PageEnum } from '@/enums/pageEnum'
 import { routerTurnByName } from '@/utils'
-const router = useRouter()
+
 function goHome() {
   routerTurnByName(PageEnum.BASE_HOME_NAME)
 }

src/views/login/index.vue

@@ -112,7 +112,6 @@
 
 <script lang="ts" setup>
 import { reactive, ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { useMessage } from 'naive-ui'
 import { requireUrl } from '@/utils'
 import { routerTurnByName } from '@/utils'
@@ -133,7 +132,6 @@ interface FormState {
   password: string
 }
 
-const router = useRouter()
 const formRef = ref()
 const message = useMessage()
 const loading = ref(false)

src/views/project/items/components/Card/index.vue

@@ -207,7 +207,7 @@ $contentHeight: 200px;
     margin-bottom: 5px;
     cursor: pointer;
     border-radius: $--border-radius-base;
-    @include background-point('background-point');
+    @include background-image('background-point');
     @extend .go-point-bg;
     &-top {
       position: absolute;

src/views/project/items/components/ModalCard/index.vue

@@ -132,7 +132,7 @@ $contentWidth: calc(82vw);
     margin-top: 20px;
     border-radius: $--border-radius-base;
     overflow: hidden;
-    @include background-point('background-point');
+    @include background-image('background-point');
     @extend .go-point-bg;
     &-top {
       position: absolute;

src/views/project/layout/components/Create/index.vue

@@ -15,7 +15,7 @@
         {{ $t('project.create_btn') }}
       </span>
     </n-tooltip>
-    <n-button v-else ghost type="primary" size="large">
+    <n-button v-else ghost type="primary">
       <template #icon>
         <n-icon>
           <DuplicateOutlineIcon v-show="designStore.getDarkTheme" />