From 8c64abbe51afcc69e460c401e47e65f6574a3795 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Sat, 8 Jan 2022 10:30:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E8=AF=AD=E8=A8=80=E4=B8=8D=E4=BC=9A=E5=90=8C=E6=AD=A5=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UserInfo/components/SystemSet/index.vue   |  2 +-
 src/components/UserInfo/index.vue             | 27 +++++----------
 src/utils/page.ts                             |  2 +-
 src/utils/utils.ts                            | 15 +++++++--
 .../project/items/components/Card/index.vue   | 33 ++++++++-----------
 .../items/components/ModalCard/index.vue      | 14 +++++---
 .../Create/components/CreateModal/index.vue   | 11 +++----
 .../project/layout/components/Sider/menu.ts   |  5 ++-
 8 files changed, 53 insertions(+), 56 deletions(-)

diff --git a/src/components/UserInfo/components/SystemSet/index.vue b/src/components/UserInfo/components/SystemSet/index.vue
index 8cf5cff3..ce0230a6 100644
--- a/src/components/UserInfo/components/SystemSet/index.vue
+++ b/src/components/UserInfo/components/SystemSet/index.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script script lang="ts" setup>
-import { reactive, h } from 'vue'
+import { reactive } from 'vue'
 import { ListType } from './index.d'
 import { useLangStore } from '@/store/modules/langStore/langStore'
 import { icon } from '@/plugins'
diff --git a/src/components/UserInfo/index.vue b/src/components/UserInfo/index.vue
index 704ebb9a..81f5b682 100644
--- a/src/components/UserInfo/index.vue
+++ b/src/components/UserInfo/index.vue
@@ -23,10 +23,10 @@
 </template>
 
 <script lang="ts" setup>
-import { h, ref, watchEffect } from 'vue'
+import { h, ref } from 'vue'
 import { NAvatar, NText } from 'naive-ui'
 import { renderIcon } from '@/utils'
-import { openDoc, logout } from '@/utils'
+import { openDoc, logout, renderLang } from '@/utils'
 import { SystemSet } from './components/SystemSet/index'
 
 import { icon } from '@/plugins'
@@ -68,9 +68,7 @@ const renderUserInfo = () => {
     ]
   )
 }
-const options = ref()
-
-const init = (doc: string, contact: string, sysSet: string, logout: string) => [
+const options = ref([
   {
     label: '我的信息',
     key: 'info',
@@ -82,17 +80,17 @@ const init = (doc: string, contact: string, sysSet: string, logout: string) => [
     key: 'd1'
   },
   {
-    label: doc,
+    label: renderLang('global.doc'),
     key: 'doc',
     icon: renderIcon(DocumentTextIcon)
   },
   {
-    label: contact,
+    label: renderLang('global.contact'),
     key: 'contact',
     icon: renderIcon(ChatboxEllipsesIcon)
   },
   {
-    label: sysSet,
+    label: renderLang('global.sys_set'),
     key: 'sysSet',
     icon: renderIcon(SettingsSharpIcon)
   },
@@ -101,20 +99,11 @@ const init = (doc: string, contact: string, sysSet: string, logout: string) => [
     key: 'd3'
   },
   {
-    label: logout,
+    label: renderLang('global.logout'),
     key: 'logout',
     icon: renderIcon(LogOutOutlineIcon)
   }
-]
-
-watchEffect(() => {
-  options.value = init(
-    t('global.doc'),
-    t('global.contact'),
-    t('global.sys_set'),
-    t('global.logout')
-  )
-})
+])
 
 // 图片渲染错误
 const errorHandle = (e: Event) => {
diff --git a/src/utils/page.ts b/src/utils/page.ts
index 5596ef36..a4680772 100644
--- a/src/utils/page.ts
+++ b/src/utils/page.ts
@@ -105,7 +105,7 @@ export const logout = () => {
  * @param url
  */
 export const openNewWindow = (url: string) => {
-  window.open(url, 'blank')
+  window.open(url, '_blank')
 }
 
 /**
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 9690ad91..792374aa 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -15,10 +15,21 @@ export function getUUID(randomLength: number) {
 
 /**
  * * render 图标
+ *  @param icon 图标
+ *  @param set 设置项
  */
 export const renderIcon = (icon: any, set = {}) => {
   return () => h(NIcon, set, { default: () => h(icon) })
 }
+/**
+ * * render 语言
+ *  @param lang 语言标识
+ *  @param set 设置项
+ *  @param tag 要渲染成的标签
+ */
+export const renderLang = (lang: string, set = {}, tag = 'span') => {
+  return () => h(tag, set, { default: () => window['$t'](lang) })
+}
 
 /**
  * * 处理 vite 中无法使用 require 的问题，utils 文件为根路径
@@ -69,7 +80,7 @@ export const goAddEventListener = <K extends keyof WindowEventMap>(
   listener: EventListenerOrEventListenerObject,
   options?: boolean | AddEventListenerOptions | undefined
 ) => {
-  if(!target) return
+  if (!target) return
   target.addEventListener(
     type,
     debounce(listener, 300, {
@@ -88,6 +99,6 @@ export const goRemoveEventListener = <K extends keyof WindowEventMap>(
   type: K,
   listener: EventListenerOrEventListenerObject
 ) => {
-  if(!target) return
+  if (!target) return
   target.removeEventListener(type, listener)
 }
diff --git a/src/views/project/items/components/Card/index.vue b/src/views/project/items/components/Card/index.vue
index be52cd52..fee26844 100644
--- a/src/views/project/items/components/Card/index.vue
+++ b/src/views/project/items/components/Card/index.vue
@@ -70,7 +70,7 @@
                     </template>
                   </n-button>
                 </template>
-                <span> {{ item.label }} </span>
+                <component :is="item.label"></component>
               </n-tooltip>
             </template>
           </n-space>
@@ -82,13 +82,10 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, h } from 'vue'
-import { renderIcon, requireUrl, requireFallbackImg } from '@/utils'
+import { reactive, ref } from 'vue'
+import { renderIcon, renderLang, requireUrl, requireFallbackImg } from '@/utils'
 import { icon } from '@/plugins'
 import { AppleControlBtn } from '@/components/AppleControlBtn'
-import { NText } from 'naive-ui'
-
-const t = window['$t']
 
 const {
   EllipsisHorizontalCircleSharpIcon,
@@ -102,39 +99,37 @@ const {
 } = icon.ionicons5
 
 const emit = defineEmits(['delete', 'resize', 'edit'])
+const t = window['$t']
 
 const props = defineProps({
   cardData: Object
 })
-const renderNText = (set = {}) => {
-  return () => h(NText, set, { default: () => h('312321') })
-}
 const fnBtnList = reactive([
   {
-    label: t('global.r_edit'),
+    label: renderLang('global.r_edit'),
     key: 'edit',
     icon: renderIcon(HammerIcon)
   },
   {
-    lable: t('global.r_more'),
+    lable: renderLang('global.r_more'),
     key: 'select',
     icon: renderIcon(EllipsisHorizontalCircleSharpIcon)
   }
 ])
 
-const selectOptions = reactive([
+const selectOptions = ref([
   {
-    label: t('global.r_preview'),
+    label: renderLang('global.r_preview'),
     key: 'preview',
     icon: renderIcon(DesktopOutlineIcon)
   },
   {
-    label: t('global.r_copy'),
+    label: renderLang('global.r_copy'),
     key: 'copy',
     icon: renderIcon(CopyIcon)
   },
   {
-    label: t('global.r_rename'),
+    label: renderLang('global.r_rename'),
     key: 'rename',
     icon: renderIcon(PencilIcon)
   },
@@ -144,13 +139,13 @@ const selectOptions = reactive([
   },
   {
     label: props.cardData?.release
-      ? t('global.r_unpublish')
-      : t('global.r_publish'),
+      ? renderLang('global.r_unpublish')
+      : renderLang('global.r_publish'),
     key: 'send',
     icon: renderIcon(SendIcon)
   },
   {
-    label: t('global.r_download'),
+    label: renderLang('global.r_download'),
     key: 'download',
     icon: renderIcon(DownloadIcon)
   },
@@ -159,7 +154,7 @@ const selectOptions = reactive([
     key: 'd2'
   },
   {
-    label: t('global.r_delete'),
+    label: renderLang('global.r_delete'),
     key: 'delete',
     icon: renderIcon(TrashIcon)
   }
diff --git a/src/views/project/items/components/ModalCard/index.vue b/src/views/project/items/components/ModalCard/index.vue
index 10b9a799..2559eb9e 100644
--- a/src/views/project/items/components/ModalCard/index.vue
+++ b/src/views/project/items/components/ModalCard/index.vue
@@ -36,7 +36,7 @@
       <template #action>
         <n-space class="list-footer" justify="space-between">
           <n-text depth="3">
-            {{$t('project.last_edit')}}:
+            {{ $t('project.last_edit') }}:
             <n-time :time="new Date()" format="yyyy-MM-dd hh:mm" />
           </n-text>
           <!-- 工具 -->
@@ -47,7 +47,11 @@
                 dot
                 :color="cardData?.release ? '#34c749' : '#fcbc40'"
               />
-              {{ cardData?.release ? $t('project.release') : $t('project.unreleased') }}
+              {{
+                cardData?.release
+                  ? $t('project.release')
+                  : $t('project.unreleased')
+              }}
             </n-text>
 
             <template v-for="item in fnBtnList" :key="item.key">
@@ -59,7 +63,7 @@
                     </template>
                   </n-button>
                 </template>
-                <span> {{ item.label }}</span>
+                <component :is="item.label"></component>
               </n-tooltip>
             </template>
           </n-space>
@@ -72,7 +76,7 @@
 
 <script setup lang="ts">
 import { watchEffect, reactive } from 'vue'
-import { renderIcon, requireUrl, requireFallbackImg } from '@/utils'
+import { renderIcon, renderLang, requireUrl } from '@/utils'
 import { icon } from '@/plugins'
 import { AppleControlBtn } from '@/components/AppleControlBtn'
 
@@ -96,7 +100,7 @@ watchEffect(() => {
 
 const fnBtnList = reactive([
   {
-    label: t('global.r_edit'),
+    label: renderLang('global.r_edit'),
     key: 'edit',
     icon: renderIcon(HammerIcon)
   }
diff --git a/src/views/project/layout/components/Create/components/CreateModal/index.vue b/src/views/project/layout/components/Create/components/CreateModal/index.vue
index 08ed2e55..21b86374 100644
--- a/src/views/project/layout/components/Create/components/CreateModal/index.vue
+++ b/src/views/project/layout/components/Create/components/CreateModal/index.vue
@@ -18,15 +18,14 @@
             :disabled="item.disabled"
             v-for="item in typeList"
             :key="item.key"
-            :title="item.title"
             @click="btnHandle(item.index)"
           >
+            <component :is="item.title"> </component>
             <template #icon>
               <n-icon size="18">
                 <component :is="item.icon" />
               </n-icon>
             </template>
-            <span>{{ item.title }}</span>
           </n-button>
         </n-space>
         <template #action> </template>
@@ -39,7 +38,7 @@
 import { watch, reactive } from 'vue'
 import { icon } from '@/plugins'
 import { PageEnum, ChartEnum } from '@/enums/pageEnum'
-import { routerTurnByName } from '@/utils'
+import { routerTurnByName, renderLang } from '@/utils'
 
 const { FishIcon, LaptopOutlineIcon, BeerIcon, CloseIcon } = icon.ionicons5
 const t = window['$t']
@@ -50,19 +49,19 @@ const props = defineProps({
 
 const typeList = reactive([
   {
-    title: t('project.new_project'),
+    title: renderLang('project.new_project'),
     key: ChartEnum.CHART_HOME_NAME,
     icon: FishIcon,
     disabled: false
   },
   {
-    title: t('project.my_templete'),
+    title: renderLang('project.my_templete'),
     key: PageEnum.BASE_HOME_TEMPLATE_NAME,
     icon: LaptopOutlineIcon,
     disabled: true
   },
   {
-    title: t('project.template_market'),
+    title: renderLang('project.template_market'),
     key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
     icon: BeerIcon,
     disabled: true
diff --git a/src/views/project/layout/components/Sider/menu.ts b/src/views/project/layout/components/Sider/menu.ts
index b3aa549d..c3e6a7a3 100644
--- a/src/views/project/layout/components/Sider/menu.ts
+++ b/src/views/project/layout/components/Sider/menu.ts
@@ -13,7 +13,6 @@ export const renderMenuLabel = (option: MenuOption | MenuGroupOption) => {
 export const expandedKeys = () => ['all-project']
 
 export const menuOptionsInit = () => {
-  
   const t = window['$t']
 
   return reactive([
@@ -22,13 +21,13 @@ export const menuOptionsInit = () => {
       type: 'divider'
     },
     {
-      label: t('project.project'),
+      label: () => h('span', null, { default: () => t('project.project') }),
       key: 'all-project',
       icon: renderIcon(GridIcon),
       children: [
         {
           type: 'group',
-          label: t('project.my'),
+          label: () => h('span', null, { default: () => t('project.my') }),
           key: 'my-project',
           children: [
             {