From 7b262c9db28ffc2130b08e53ec0b10beba1a4bdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 8 Jan 2023 19:10:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=20i18n=20=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99=E5=92=8C=20props=20=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  6 ++---
 src/components/GoLangSelect/index.vue         |  3 +++
 src/i18n/index.ts                             |  2 ++
 src/store/modules/langStore/langStore.ts      |  3 ---
 .../components/ProjectItemsCard/index.vue     |  1 +
 .../ProjectItemsList/hooks/useModal.hook.ts   |  5 ++--
 .../components/ProjectItemsList/index.vue     |  5 ++--
 .../ProjectItemsModalCard/index.vue           | 26 +++++++++++++++----
 .../components/CreateModal/index.vue          | 18 ++++++-------
 9 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 76306284..046ab291 100644
--- a/package.json
+++ b/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",
@@ -82,4 +82,4 @@
     "vue-echarts": "^6.0.2",
     "vue-tsc": "^0.28.10"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/GoLangSelect/index.vue b/src/components/GoLangSelect/index.vue
index 7989276a..0cf4a883 100644
--- a/src/components/GoLangSelect/index.vue
+++ b/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>
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 06576c37..b6d851c0 100644
--- a/src/i18n/index.ts
+++ b/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: {
diff --git a/src/store/modules/langStore/langStore.ts b/src/store/modules/langStore/langStore.ts
index d1795e6c..2b7d2709 100644
--- a/src/store/modules/langStore/langStore.ts
+++ b/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) {
diff --git a/src/views/project/items/components/ProjectItemsCard/index.vue b/src/views/project/items/components/ProjectItemsCard/index.vue
index b042d229..63ec3c91 100644
--- a/src/views/project/items/components/ProjectItemsCard/index.vue
+++ b/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,
diff --git a/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts b/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts
index 89894b03..16434efd 100644
--- a/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts
+++ b/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)
diff --git a/src/views/project/items/components/ProjectItemsList/index.vue b/src/views/project/items/components/ProjectItemsList/index.vue
index dc4f9206..80d0c2ff 100644
--- a/src/views/project/items/components/ProjectItemsList/index.vue
+++ b/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 } =
-  useModalDataInit()
+const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/project/items/components/ProjectItemsModalCard/index.vue b/src/views/project/items/components/ProjectItemsModalCard/index.vue
index 938f2e5c..3515552f 100644
--- a/src/views/project/items/components/ProjectItemsModalCard/index.vue
+++ b/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,
-  cardData: Object
+  modalShow: {
+    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
diff --git a/src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue b/src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue
index 2cbae29e..6f4cb853 100644
--- a/src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue
+++ b/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) {
-    closeHandle()
-  }
+  showRef.value = newValue.show
 })
 
 // 关闭对话框
@@ -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;