fix: 修改语言切换

src/components/Application/Application.vue

@@ -2,6 +2,7 @@
   <n-loading-bar-provider>
     <n-dialog-provider>
       <DialogContent />
+      <LoadingContent />
       <n-notification-provider>
         <n-message-provider>
           <MessageContent />
@@ -22,4 +23,5 @@ import {
 
 import { MessageContent } from '@/components/MessageContent'
 import { DialogContent } from '@/components/DialogContent'
+import { LoadingContent } from '@/components/LoadingContent'
 </script>

src/components/LoadingContent/index.ts

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

src/components/LoadingContent/index.vue

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

src/components/UserInfo/index.vue

@@ -24,12 +24,11 @@ import { h, ref, reactive } from 'vue';
 import { NAvatar, NText } from 'naive-ui'
 import { renderIcon } from '@/utils'
 import { openDoc, logout } from '@/utils'
-import { useI18n } from 'vue-i18n'
 
 import { icon } from '@/plugins'
 const { DocumentTextIcon, ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon } = icon.ionicons5
 
-const { t } = useI18n()
+const t = window['$t']
 
 const imageUrl = 'https://www.naiveui.com/assets/naivelogo.93278402.svg'
 

src/i18n/en/index.ts

@@ -1,18 +1,30 @@
 import login from './login'
+import project from './project'
 
 const global = {
-  doc_addr: "Document",
-  code_addr: "Code address",
-  form_account: "Please enter your account or email",
-  form_password: "Please enter your password",
+  doc_addr: 'Document',
+  code_addr: 'Code address',
+  form_account: 'Please enter your account or email',
+  form_password: 'Please enter your password',
   // header
   doc: 'Document',
   help: 'Help',
   contact: 'Contact us',
-  logout: 'Logout'
+  logout: 'Logout',
+  // right key
+  r_edit: 'Edit',
+  r_preview: 'Preview',
+  r_copy: 'Copy',
+  r_rename: 'Rename',
+  r_publish: 'Publish',
+  r_unpublish: 'Unpublish',
+  r_download: 'Download',
+  r_delete: 'Delete',
+  r_more: 'More',
 }
 
 export default {
-  global: global,
-  login: login
+  global,
+  login,
+  project
 }

src/i18n/en/project.ts

@@ -0,0 +1,15 @@
+export default {
+  create_btn: 'Creat',
+  create_tip: 'Please select a content for development',
+  project: 'Project',
+  my: 'My',
+  new_project: 'NewProject',
+  all_project: 'AllProject',
+  my_templete: 'MyTemplete',
+  template_market: 'TemplateMarket',
+
+  // items 
+  release: 'Release',
+  unreleased: 'Unrelease',
+  last_edit: 'Last edit time'
+}

src/i18n/zh/index.ts

@@ -1,4 +1,5 @@
 import login from './login'
+import project from './project'
 
 const global = {
   doc_addr: '文档地址',
@@ -9,10 +10,21 @@ const global = {
   doc: '说明文档',
   help: '帮助中心',
   contact: '联系我们',
-  logout: '退出登录'
+  logout: '退出登录',
+  // 功能键
+  r_edit: '编辑',
+  r_preview: '预览',
+  r_copy: '复制',
+  r_rename: '重命名',
+  r_publish: '发布',
+  r_unpublish: '取消发布',
+  r_download: '下载',
+  r_delete: '删除',
+  r_more: '更多',
 }
 
 export default {
-  global: global,
-  login: login
+  global,
+  login,
+  project
 }

src/i18n/zh/project.ts

@@ -0,0 +1,16 @@
+export default {
+  // aside
+  create_btn: '新建',
+  create_tip: '从哪里出发好呢？',
+  project: '项目',
+  my: '我的',
+  new_project: '新项目',
+  all_project: '全部项目',
+  my_templete: '我的模板',
+  template_market: '模板市场',
+
+  // items 
+  release: '已发布',
+  unreleased: '未发布',
+  last_edit: '最后编辑'
+}

src/layout/index.vue

@@ -3,85 +3,10 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue'
-import { useLoadingBar } from 'naive-ui'
 import { MainView } from '@/layout/components/Main/index'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+window['$t'] = t
 
-onMounted(() => {
-  // 挂载在 window 方便与在js中使用
-  window['$loading'] = useLoadingBar()
-  window['$loading'].finish()
-})
 </script>
-
-<style lang="scss" scoped>
-.layout {
-  display: flex;
-  flex-direction: row;
-  flex: auto;
-
-  &-default-background {
-    background: #f5f7f9;
-  }
-
-  .layout-sider {
-    min-height: 100vh;
-    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
-    position: relative;
-    z-index: 13;
-    transition: all 0.2s ease-in-out;
-  }
-
-  .layout-sider-fix {
-    position: fixed;
-    top: 0;
-    left: 0;
-  }
-
-  .ant-layout {
-    overflow: hidden;
-  }
-
-  .layout-right-fix {
-    overflow-x: hidden;
-    padding-left: 200px;
-    min-height: 100vh;
-    transition: all 0.2s ease-in-out;
-  }
-
-  .layout-content {
-    flex: auto;
-    min-height: 100vh;
-  }
-
-  .n-layout-header.n-layout-header--absolute-positioned {
-    z-index: 11;
-  }
-
-  .n-layout-footer {
-    background: none;
-  }
-}
-
-.layout-content-main {
-  margin: 0 10px 10px;
-  position: relative;
-  padding-top: 64px;
-}
-
-.layout-content-main-fix {
-  padding-top: 64px;
-}
-
-.fluid-header {
-  padding-top: 0px;
-}
-
-.main-view-fix {
-  padding-top: 44px;
-}
-
-.noMultiTabs {
-  padding-top: 0;
-}
-</style>

src/views/login/index.vue

@@ -114,7 +114,6 @@
 import { reactive, ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useMessage } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
 import { requireUrl } from '@/utils'
 import { routerTurnByName } from '@/utils'
 import shuffle from 'lodash/shuffle'
@@ -142,7 +141,7 @@ const autoLogin = ref(true)
 const show = ref(false)
 const showBg = ref(false)
 const designStore = useDesignStore()
-const { t } = useI18n()
+const t = window['$t']
 
 onMounted(() => {
   setTimeout(() => {

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

@@ -38,7 +38,11 @@
                 dot
                 :color="cardData.release ? '#34c749' : '#fcbc40'"
               />
-              {{ cardData.release ? '已发布' : '未发布' }}
+              {{
+                cardData.release
+                  ? $t('project.release')
+                  : $t('project.unreleased')
+              }}
             </n-text>
 
             <template v-for="item in fnBtnList" :key="item.key">
@@ -78,11 +82,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { reactive, h } from 'vue'
 import { renderIcon, requireUrl, requireFallbackImg } from '@/utils'
 import { icon } from '@/plugins'
 import { AppleControlBtn } from '@/components/AppleControlBtn'
-import { useMessage, useDialog } from 'naive-ui'
+import { NText } from 'naive-ui'
+
+const t = window['$t']
 
 const {
   EllipsisHorizontalCircleSharpIcon,
@@ -95,41 +101,40 @@ const {
   SendIcon
 } = icon.ionicons5
 
-const dialog = useDialog()
-const message = useMessage()
-
 const emit = defineEmits(['delete', 'resize', 'edit'])
 
 const props = defineProps({
   cardData: Object
 })
-
-const fnBtnList = [
+const renderNText = (set = {}) => {
+  return () => h(NText, set, { default: () => h('312321') })
+}
+const fnBtnList = reactive([
   {
-    label: '编辑',
+    label: t('global.r_edit'),
     key: 'edit',
     icon: renderIcon(HammerIcon)
   },
   {
-    lable: '更多',
+    lable: t('global.r_more'),
     key: 'select',
     icon: renderIcon(EllipsisHorizontalCircleSharpIcon)
   }
-]
+])
 
-const selectOptions = [
+const selectOptions = reactive([
   {
-    label: '预览',
+    label: t('global.r_preview'),
     key: 'preview',
     icon: renderIcon(ApertureSharpIcon)
   },
   {
-    label: '复制',
+    label: t('global.r_copy'),
     key: 'copy',
     icon: renderIcon(CopyIcon)
   },
   {
-    label: '重命名',
+    label: t('global.r_rename'),
     key: 'rename',
     icon: renderIcon(PencilIcon)
   },
@@ -138,12 +143,14 @@ const selectOptions = [
     key: 'd1'
   },
   {
-    label: props.cardData?.release ? '取消发布' : '发布',
+    label: props.cardData?.release
+      ? t('global.r_unpublish')
+      : t('global.r_publish'),
     key: 'send',
     icon: renderIcon(SendIcon)
   },
   {
-    label: '下载',
+    label: t('global.r_download'),
     key: 'download',
     icon: renderIcon(DownloadIcon)
   },
@@ -152,11 +159,11 @@ const selectOptions = [
     key: 'd2'
   },
   {
-    label: '删除',
+    label: t('global.r_delete'),
     key: 'delete',
     icon: renderIcon(TrashIcon)
   }
-]
+])
 
 const handleSelect = (key: string) => {
   switch (key) {

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')}}：
             <n-time :time="new Date()" format="yyyy-MM-dd hh:mm" />
           </n-text>
           <!-- 工具 -->
@@ -47,7 +47,7 @@
                 dot
                 :color="cardData?.release ? '#34c749' : '#fcbc40'"
               />
-              {{ cardData?.release ? '已发布' : '未发布' }}
+              {{ cardData?.release ? $t('project.release') : $t('project.unreleased') }}
             </n-text>
 
             <template v-for="item in fnBtnList" :key="item.key">
@@ -71,14 +71,17 @@
 </template>
 
 <script setup lang="ts">
-import { watchEffect } from 'vue'
+import { watchEffect, reactive } from 'vue'
 import { renderIcon, requireUrl, requireFallbackImg } from '@/utils'
 import { icon } from '@/plugins'
 import { AppleControlBtn } from '@/components/AppleControlBtn'
+
 const { HammerIcon } = icon.ionicons5
 
 const emit = defineEmits(['close'])
 
+const t = window['$t']
+
 const props = defineProps({
   show: Boolean,
   cardData: Object
@@ -91,13 +94,13 @@ watchEffect(() => {
   }
 })
 
-const fnBtnList = [
+const fnBtnList = reactive([
   {
-    label: '编辑',
+    label: t('global.r_edit'),
     key: 'edit',
     icon: renderIcon(HammerIcon)
   }
-]
+])
 
 // 关闭对话框
 const closeHandle = () => {

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

@@ -3,7 +3,7 @@
     <n-space size="large">
       <n-card class="card-box" hoverable>
         <template #header>
-          <n-text class="card-box-tite">从哪里出发好呢？</n-text>
+          <n-text class="card-box-tite">{{ $t('project.create_tip') }}</n-text>
         </template>
         <template #header-extra>
           <n-text @click="closeHandle">
@@ -36,32 +36,33 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, ref } from 'vue'
+import { watch, reactive } from 'vue'
 import { icon } from '@/plugins'
 import { PageEnum, ChartEnum } from '@/enums/pageEnum'
 import { routerTurnByName } from '@/utils'
 
 const { FishIcon, LaptopOutlineIcon, BeerIcon, CloseIcon } = icon.ionicons5
+const t = window['$t']
 const emit = defineEmits(['close'])
 const props = defineProps({
   show: Boolean
 })
 
-const typeList = ref([
+const typeList = reactive([
   {
-    title: '新项目',
+    title: t('project.new_project'),
     key: ChartEnum.CHART_HOME_NAME,
     icon: FishIcon,
     disabled: false
   },
   {
-    title: '我的模板',
+    title: t('project.my_templete'),
     key: PageEnum.BASE_HOME_TEMPLATE_NAME,
     icon: LaptopOutlineIcon,
     disabled: true
   },
   {
-    title: '市场模板',
+    title: t('project.template_market'),
     key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
     icon: BeerIcon,
     disabled: true
@@ -87,13 +88,15 @@ const btnHandle = (key: string) => {
 }
 </script>
 <style lang="scss" scoped>
+$cardWidth: 570px;
+
 @include go('create-modal') {
   position: fixed;
   top: 200px;
   left: 50%;
   transform: translateX(-50%);
   .card-box {
-    width: 500px;
+    width: $cardWidth;
     cursor: pointer;
     border: 1px solid rgba(0, 0, 0, 0);
     @extend .go-transition;

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

@@ -12,7 +12,7 @@
         </n-button>
       </template>
       <span>
-        新建
+        {{ $t('project.create_btn') }}
       </span>
     </n-tooltip>
     <n-button v-else ghost type="primary" size="large">
@@ -23,7 +23,7 @@
         </n-icon>
       </template>
       <span>
-        新建
+        {{ $t('project.create_btn') }}
       </span>
     </n-button>
   </div>

src/views/project/layout/components/Sider/menu.ts

@@ -13,19 +13,22 @@ export const renderMenuLabel = (option: MenuOption | MenuGroupOption) => {
 export const expandedKeys = () => ['all-project']
 
 export const menuOptionsInit = () => {
+  
+  const t = window['$t']
+
   return reactive([
     {
       key: 'divider-1',
       type: 'divider'
     },
     {
-      label: '项目',
+      label: t('project.project'),
       key: 'all-project',
       icon: renderIcon(GridIcon),
       children: [
         {
           type: 'group',
-          label: '我的',
+          label: t('project.my'),
           key: 'my-project',
           children: [
             {
@@ -37,7 +40,7 @@ export const menuOptionsInit = () => {
                       name: PageEnum.BASE_HOME_ITEMS_NAME
                     }
                   },
-                  { default: () => '全部项目' }
+                  { default: () => t('project.all_project') }
                 ),
               key: PageEnum.BASE_HOME_ITEMS_NAME,
               icon: renderIcon(DesktopIcon)
@@ -51,7 +54,7 @@ export const menuOptionsInit = () => {
                       name: PageEnum.BASE_HOME_TEMPLATE_NAME
                     }
                   },
-                  { default: () => '我的物料' }
+                  { default: () => t('project.my_templete') }
                 ),
               key: PageEnum.BASE_HOME_TEMPLATE_NAME,
               icon: renderIcon(LaptopOutlineIcon)
@@ -74,7 +77,7 @@ export const menuOptionsInit = () => {
               name: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME
             }
           },
-          { default: () => '物料市场' }
+          { default: () => t('project.template_market') }
         ),
       key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
       icon: renderIcon(BeerIcon)

types/global.d.ts

@@ -1,7 +1,7 @@
-
 interface Window {
-  $loading: any;
-  $message: any;
-  $dialog: any;
+  $loading: any
+  $message: any
+  $dialog: any
+  $t: any
 }
-declare type Recordable<T = any> = Record<string, T>;
+declare type Recordable<T = any> = Record<string, T>