fix: 修改语言挂载问题

src/App.vue

@@ -6,6 +6,7 @@
     :theme-overrides="getThemeOverrides"
   >
     <AppProvider>
+      <I18n />
       <router-view />
     </AppProvider>
   </n-config-provider>
@@ -13,8 +14,9 @@
 
 <script lang="ts" setup>
 import { zhCN, dateZhCN, NConfigProvider } from 'naive-ui'
-import { AppProvider } from '@/components/Application'
+import { AppProvider } from '@/components/AppProvider'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { I18n } from '@/components/I18n'
 
 import { getDarkThemeHook, getThemeOverridesHook } from '@/hooks'
 

src/components/Application/Application.vue → src/components/AppProvider/AppProvider.vue

@@ -24,4 +24,5 @@ import {
 import { MessageContent } from '@/components/MessageContent'
 import { DialogContent } from '@/components/DialogContent'
 import { LoadingContent } from '@/components/LoadingContent'
+
 </script>

src/components/AppProvider/index.ts

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

src/components/AppleControlBtn/index.vue

@@ -53,23 +53,28 @@ const filterBtnList = computed(() => {
 const isFull = computed(() => {
   return props.narrow && screenfullFn(true)
 })
-const btnList = [
-  {
-    title: '关闭',
-    key: 'close',
-    icon: CloseIcon
-  },
-  {
-    title: '缩小',
-    key: 'remove',
-    icon: RemoveIcon
-  },
-  {
-    title: isFull ? '缩小' : '放大',
-    key: props.narrow ? 'fullResize' : 'resize',
-    icon: ResizeIcon
-  }
-]
+
+const btnList: {
+  title: string,
+  key: "close" | "remove" | "resize" | "fullResize",
+  icon: any
+}[] = [
+    {
+      title: '关闭',
+      key: 'close',
+      icon: CloseIcon
+    },
+    {
+      title: '缩小',
+      key: 'remove',
+      icon: RemoveIcon
+    },
+    {
+      title: isFull ? '缩小' : '放大',
+      key: props.narrow ? 'fullResize' : 'resize',
+      icon: ResizeIcon
+    }
+  ]
 
 const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
   if (key === 'fullResize') screenfullFn()
@@ -80,7 +85,7 @@ const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
 </script>
 
 <style lang="scss" scoped>
-@include go('apple-control-btn') {
+@include go("apple-control-btn") {
   display: flex;
   &:hover {
     .btn {

src/components/Application/index.ts

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

src/components/DialogContent/index.vue

@@ -1,12 +1,6 @@
 <template></template>
-<script lang="ts">
-  import { useDialog } from 'naive-ui';
-
-  export default {
-    name: 'DialogContent',
-    setup() {
-      //挂载在 window 方便与在js中使用
-      window['$dialog'] = useDialog();
-    },
-  };
+<script lang="ts" setup>
+import { useDialog } from 'naive-ui';
+//挂载在 window 方便与在js中使用
+window['$dialog'] = useDialog();
 </script>

src/components/I18n/index.ts

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

src/components/I18n/index.vue

@@ -0,0 +1,7 @@
+<template></template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+window['$t'] = t
+</script>

src/components/LoadingContent/index.vue

@@ -1,12 +1,8 @@
-<script lang="ts">
-import { useLoadingBar } from 'naive-ui'
+<template></template>
 
-export default {
-  name: 'LoadingContent',
-  setup() {
-    // 挂载在 window 方便与在js中使用
-    window['$loading'] = useLoadingBar()
-    window['$loading'].finish()
-  }
-}
+<script lang="ts" setup>
+import { useLoadingBar } from 'naive-ui'
+// 挂载在 window 方便与在js中使用
+window['$loading'] = useLoadingBar()
+window['$loading'].finish()
 </script>

src/components/MessageContent/index.vue

@@ -1,11 +1,7 @@
-<script lang="ts">
-  import { useMessage } from 'naive-ui';
+<template></template>
 
-  export default {
-    name: 'MessageContent',
-    setup() {
-      //挂载在 window 方便与在js中使用
-      window['$message'] = useMessage();
-    },
-  };
+<script lang="ts" setup>
+import { useMessage } from 'naive-ui';
+//挂载在 window 方便与在js中使用
+window['$message'] = useMessage();
 </script>

src/layout/index.vue

@@ -4,9 +4,4 @@
 
 <script lang="ts" setup>
 import { MainView } from '@/layout/components/Main/index'
-import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
-
-window['$t'] = t
-
 </script>

src/main.ts

@@ -4,7 +4,7 @@ import router, { setupRouter } from '@/router'
 import i18n from '@/i18n/index'
 import { setupStore } from '@/store'
 import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins'
-import { AppProvider } from '@/components/Application'
+import { AppProvider } from '@/components/AppProvider/index'
 import { setHtmlTheme } from '@/utils'
 
 async function appInit() {
@@ -24,11 +24,11 @@ async function appInit() {
   // 挂载状态管理
   setupStore(app)
 
-  // 优先挂载一下 Provider 解决路由守卫，Axios中可使用，Dialog，Message 等之类组件
+  // 解决路由守卫，Axios中可使用，Dialog，Message 等全局组件
   appProvider.mount('#appProvider', true)
 
   // 挂载路由
-  await setupRouter(app)
+  setupRouter(app)
 
   // 路由准备就绪后挂载APP实例
   await router.isReady()

src/utils/page.ts

@@ -136,16 +136,9 @@ export const fetchRouteParams = () => {
 }
 
 /**
- * * 是否需要确认
+ * * 回到主页面
  * @param confirm
  */
-export const goHome = (confirm?: boolean, message?: string) => {
-  if (confirm) {
-    goDialog({
-      message,
-      onPositiveCallback: () => {
-        routerTurnByName(PageEnum.BASE_HOME_NAME)
-      },
-    })
-  }
+export const goHome = <T extends typeof goDialog>(confirm: boolean, params: T) => {
+  routerTurnByName(PageEnum.BASE_HOME_NAME)
 }

src/utils/plugin.ts

@@ -14,7 +14,10 @@ export const goDialog = (
   params: {
     // 基本
     type?: DialogEnum
+    // 提示
     message?: string
+    // 点击遮罩是否关闭
+    isMaskClosable?: boolean
     // 回调
     onPositiveCallback: Function
     onNegativeCallback?: Function
@@ -28,32 +31,33 @@ export const goDialog = (
   const {
     type,
     message,
+    isMaskClosable,
     onPositiveCallback,
     onNegativeCallback,
     promise,
     promiseResCallback,
-    promiseRejCallback
+    promiseRejCallback,
   } = params
 
   const typeObj = {
     // 自定义
     delete: {
       fn: dialogFn || window['$dialog'].warning,
-      message: message || '是否删除此数据?'
+      message: message || '是否删除此数据?',
     },
     // 原有
     warning: {
       fn: window['$dialog'].warning,
-      message: message || '是否执行此操作?'
+      message: message || '是否执行此操作?',
     },
     error: {
       fn: window['$dialog'].error,
-      message: message || '是否执行此操作?'
+      message: message || '是否执行此操作?',
     },
     success: {
       fn: window['$dialog'].success,
-      message: message || '是否执行此操作?'
-    }
+      message: message || '是否执行此操作?',
+    },
   }
 
   const d: DialogReactive = (typeObj as any)[type || DialogEnum.warning]['fn']({
@@ -63,7 +67,7 @@ export const goDialog = (
     positiveText: '确定',
     negativeText: '取消',
     // 是否通过遮罩关闭
-    maskClosable: maskClosable,
+    maskClosable: isMaskClosable || maskClosable,
     onPositiveClick: async () => {
       // 执行异步
       if (promise && onPositiveCallback) {
@@ -81,6 +85,6 @@ export const goDialog = (
     },
     onNegativeClick: async () => {
       onNegativeCallback && onNegativeCallback(d)
-    }
+    },
   })
 }

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

@@ -1,6 +1,6 @@
 <template>
   <n-space class="header-left-btn" :size="25">
-    <n-button size="small" quaternary #icon @click="goHome(true, '返回将不会保存任何操作')">
+    <n-button size="small" quaternary #icon @click="goHomeHandle()">
       <n-icon :depth="3">
         <HomeIcon />
       </n-icon>
@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import { toRefs, Ref, reactive } from 'vue'
-import { renderIcon, routerTurnByName, goHome } from '@/utils'
+import { renderIcon, goDialog, goHome } from '@/utils'
 import { icon } from '@/plugins'
 const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
@@ -61,11 +61,19 @@ const btnList = reactive<ItemType[]>([
   }
 ])
 
-
-
 const clickHandle = (item: ItemType) => {
   setItem(item.key, !item.select)
 }
+
+const goHomeHandle = () => {
+  goDialog({
+    message: '返回将不会保存任何操作',
+    isMaskClosable: true,
+    onPositiveCallback: goHome,
+  })
+
+}
+
 </script>
 <style lang="scss" scoped>
 .header-left-btn {

src/views/login/index.vue

@@ -38,11 +38,7 @@
           <n-collapse-transition :appear="true" :show="show">
             <n-card class="login-account-card" :title="$t('login.desc')">
               <div class="login-account-top">
-                <img
-                  class="login-account-top-logo"
-                  src="~@/assets/images/logo.png"
-                  alt="logo"
-                />
+                <img class="login-account-top-logo" src="~@/assets/images/logo.png" alt="logo" />
               </div>
               <n-form
                 ref="formRef"
@@ -67,7 +63,7 @@
                   <n-input
                     v-model:value="formInline.password"
                     type="password"
-                    show-password-toggle
+                    show-password-on="click"
                     :placeholder="$t('global.form_password')"
                   >
                     <template #prefix>
@@ -80,9 +76,7 @@
                 <n-form-item>
                   <div class="flex justify-between">
                     <div class="flex-initial">
-                      <n-checkbox v-model:checked="autoLogin">
-                        {{ $t('login.form_auto') }}
-                      </n-checkbox>
+                      <n-checkbox v-model:checked="autoLogin">{{ $t('login.form_auto') }}</n-checkbox>
                     </div>
                   </div>
                 </n-form-item>
@@ -93,9 +87,7 @@
                     size="large"
                     :loading="loading"
                     block
-                  >
-                    {{ $t('login.form_button') }}
-                  </n-button>
+                  >{{ $t('login.form_button') }}</n-button>
                 </n-form-item>
               </n-form>
             </n-card>
@@ -125,7 +117,7 @@ import { Footer } from '@/layout/components/Footer'
 import { PageEnum } from '@/enums/pageEnum'
 import { icon } from '@/plugins'
 
-const { ChatboxEllipsesIcon, LockClosedOutlineIcon } = icon.ionicons5
+const { PersonOutlineIcon, LockClosedOutlineIcon } = icon.ionicons5
 
 interface FormState {
   username: string
@@ -139,6 +131,7 @@ const autoLogin = ref(true)
 const show = ref(false)
 const showBg = ref(false)
 const designStore = useDesignStore()
+
 const t = window['$t']
 
 onMounted(() => {
@@ -206,10 +199,10 @@ const handleSubmit = (e: Event) => {
     if (!errors) {
       const { username, password } = formInline
       loading.value = true
-      message.success(`${t('login.login_success')}！`)
+      message.success(`${t('login.login_success')}!`)
       routerTurnByName(PageEnum.BASE_HOME_NAME, true)
     } else {
-      message.error(`${t('login.login_message')}！`)
+      message.error(`${t('login.login_message')}!`)
     }
   })
 }
@@ -233,7 +226,7 @@ $carousel-image-height: 60vh;
 @include go(login-box) {
   height: $go-login-height;
   overflow: hidden;
-  @include background-image('background-image');
+  @include background-image("background-image");
   &-header {
     display: flex;
     justify-content: space-between;
@@ -274,7 +267,7 @@ $carousel-image-height: 60vh;
 
       &-card {
         @extend .go-background-filter;
-        @include filter-bg-color('filter-color');
+        @include filter-bg-color("filter-color");
         box-shadow: 0 0 20px 5px rgba(40, 40, 40, 0.5);
       }
 
@@ -302,7 +295,7 @@ $carousel-image-height: 60vh;
     align-items: center;
     width: $--max-width;
     height: 100vh;
-    background: url('@/assets/images/login/login-bg.png') no-repeat 0 -120px;
+    background: url("@/assets/images/login/login-bg.png") no-repeat 0 -120px;
     .bg-slot {
       width: $carousel-width;
     }