fix: 处理 i18n 报错和 props 报错

package.json

@@ -33,13 +33,13 @@
     "html2canvas": "^1.4.1",
     "keymaster": "^1.6.2",
     "monaco-editor": "^0.33.0",
-    "naive-ui": "2.33.4",
+    "naive-ui": "2.34.3",
     "pinia": "^2.0.13",
     "screenfull": "^6.0.1",
     "three": "^0.145.0",
     "vue": "^3.2.31",
     "vue-demi": "^0.13.1",
-    "vue-i18n": "9.1.9",
+    "vue-i18n": "^9.2.2",
     "vue-router": "4.0.12",
     "vue3-lazyload": "^0.2.5-beta",
     "vue3-sketch-ruler": "^1.3.3",

src/components/GoLangSelect/index.vue

@@ -14,16 +14,19 @@
 </template>
 
 <script lang="ts" setup>
+import { useI18n } from "vue-i18n";
 import { useLangStore } from '@/store/modules/langStore/langStore'
 import { langList } from '@/i18n/index'
 import { LangEnum } from '@/enums/styleEnum'
 import { icon } from '@/plugins'
 
 const { LanguageIcon } = icon.ionicons5
+const { locale } = useI18n();
 const langStore = useLangStore()
 const options = langList
 
 const handleSelect = (key: LangEnum) => {
+  locale.value = key;
   langStore.changeLang(key)
 }
 </script>

src/i18n/index.ts

@@ -23,6 +23,8 @@ export const langList = [
 ]
 
 const i18n = createI18n({
+  legacy: false,
+  globalInjection:true,
   locale: langStorage?.lang || lang,
   fallbackLocale: langStorage?.lang || lang,
   messages: {

src/store/modules/langStore/langStore.ts

@@ -2,7 +2,6 @@ import { defineStore } from 'pinia'
 import { lang } from '@/settings/designSetting'
 import { LangStateType } from './langStore.d'
 import { LangEnum } from '@/enums/styleEnum'
-import i18n from '@/i18n/index'
 import { setLocalStorage, getLocalStorage, reloadRoutePage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
@@ -25,10 +24,8 @@ export const useLangStore = defineStore({
   actions: {
     changeLang(lang: LangEnum): void {
       const settingStore = useSettingStore()
-      
       if (this.lang === lang) return
       this.lang = lang
-      i18n.global.locale = lang
       setLocalStorage(GO_LANG_STORE, this.$state)
 
       if (settingStore.getChangeLangReload) {

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

@@ -89,6 +89,7 @@ import { renderIcon, renderLang,  requireErrorImg } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn'
 import { Chartype } from '../../index.d'
+import { log } from 'console'
 const {
   EllipsisHorizontalCircleSharpIcon,
   CopyIcon,

src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts

@@ -1,7 +1,8 @@
-import { ref, Ref } from 'vue'
+import { ref } from 'vue'
 import { ChartEnum } from '@/enums/pageEnum'
 import { fetchPathByName, routerTurnByPath } from '@/utils'
-import { Chartype } from '../../..'
+import { Chartype } from '../../../index.d'
+
 export const useModalDataInit = () => {
   const modalShow = ref<boolean>(false)
   const modalData = ref<Chartype | null>(null)

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

@@ -25,7 +25,7 @@
   </div>
   <project-items-modal-card
     v-if="modalData"
-    v-model:modalShow="modalShow"
+    :modalShow="modalShow"
     :cardData="modalData"
     @close="closeModal"
     @edit="editHandle"
@@ -41,8 +41,7 @@ import { useDataListInit } from './hooks/useData.hook'
 
 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
 const { list, deleteHandle } = useDataListInit()
-const { modalData, modalShow, closeModal, resizeHandle, editHandle } =
+const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit()
-  useModalDataInit()
 </script>
 
 <style lang="scss" scoped>

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

@@ -2,7 +2,7 @@
   <!-- mask-closable 暂时是失效的，不知道为啥 -->
   <n-modal
     class="go-modal-box"
-    v-model:show="modalShow"
+    v-model:show="showRef"
     @afterLeave="closeHandle"
   >
     <n-card hoverable size="small">
@@ -75,20 +75,36 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import { renderIcon, renderLang } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn'
 
 const { HammerIcon } = icon.ionicons5
-
+const showRef = ref(false)
 const emit = defineEmits(['close', 'edit'])
 
 const props = defineProps({
-  modalShow: Boolean,
+  modalShow: {
-  cardData: Object
+    required: true,
+    type: Boolean
+  },
+  cardData: {
+    required: true,
+    type: Object
+  }
 })
 
+watch(
+  () => props.modalShow,
+  newValue => {
+    showRef.value = newValue
+  },
+  {
+    immediate: true
+  }
+)
+
 // 处理url获取
 const requireUrl = (name: string) => {
   return new URL(`../../../../../assets/images/${name}`, import.meta.url).href

src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-modal v-model:show="show" class="go-create-modal">
+  <n-modal v-model:show="showRef" class="go-create-modal" @afterLeave="closeHandle">
     <n-space size="large">
       <n-card class="card-box" hoverable>
         <template #header>
@@ -35,20 +35,21 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, reactive } from 'vue'
+import { ref, watch, shallowRef } from 'vue'
 import { icon } from '@/plugins'
 import { PageEnum, ChartEnum } from '@/enums/pageEnum'
 import { fetchPathByName, routerTurnByPath, renderLang, getUUID } from '@/utils'
 
 const { FishIcon, CloseIcon } = icon.ionicons5
 const { StoreIcon, ObjectStorageIcon } = icon.carbon
-const $t = window['$t']
+const showRef = ref(false)
+
 const emit = defineEmits(['close'])
 const props = defineProps({
   show: Boolean
 })
 
-const typeList = reactive([
+const typeList = shallowRef([
   {
     title: renderLang('project.new_project'),
     key: ChartEnum.CHART_HOME_NAME,
@@ -69,11 +70,8 @@ const typeList = reactive([
   }
 ])
 
-// 解决点击模态层不会触发 @on-after-leave 的问题
 watch(props, newValue => {
-  if (!newValue.show) {
+  showRef.value = newValue.show
-    closeHandle()
-  }
 })
 
 // 关闭对话框
@@ -92,7 +90,7 @@ const btnHandle = (key: string) => {
 <style lang="scss" scoped>
 $cardWidth: 570px;
 
-@include go("create-modal") {
+@include go('create-modal') {
   position: fixed;
   top: 200px;
   left: 50%;
@@ -103,7 +101,7 @@ $cardWidth: 570px;
     border: 1px solid rgba(0, 0, 0, 0);
     @extend .go-transition;
     &:hover {
-      @include hover-border-color("hover-border-color");
+      @include hover-border-color('hover-border-color');
     }
     &-tite {
       font-size: 14px;