refactor: i18n

* refactor: i18n

src/views/able/line-tree.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import ElTreeLine from "/@/components/ReTreeLine";
 import { extractPathList, deleteChildren } from "/@/utils/tree";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
+const { t } = useI18n();
 
 let menusData = computed(() => {
   return deleteChildren(usePermissionStoreHook().menusTree);
@@ -43,7 +45,7 @@ let dataProps = {
               ><template v-slot:default="{ node }">
                 <el-tree-line :node="node" :showLabelLine="true">
                   <template v-slot:node-label>
-                    <span class="text-sm">{{ $t(node.data.meta.title) }}</span>
+                    <span class="text-sm">{{ t(node.data.meta.title) }}</span>
                   </template>
                 </el-tree-line>
               </template>
@@ -75,7 +77,7 @@ let dataProps = {
                   :indent="30"
                 >
                   <template v-slot:node-label>
-                    <span class="text-sm">{{ $t(node.data.meta.title) }}</span>
+                    <span class="text-sm">{{ t(node.data.meta.title) }}</span>
                   </template>
                 </el-tree-line>
               </template>

src/views/able/menu-tree.vue

@@ -5,6 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import { ref, computed } from "vue";
 import type { ElTreeV2 } from "element-plus";
 import { transformI18n } from "/@/plugins/i18n";
@@ -12,6 +13,7 @@ import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { extractPathList, deleteChildren } from "/@/utils/tree";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
+const { t } = useI18n();
 
 interface treeNode extends TreeNode {
   meta: {
@@ -76,7 +78,7 @@ const filterMethod = (query: string, node: treeNode) => {
       :default-expanded-keys="expandedKeys"
     >
       <template #default="{ data }">
-        <span>{{ $t(data.meta.title) }}</span>
+        <span>{{ t(data.meta.title) }}</span>
       </template>
     </el-tree-v2>
   </el-card>

src/views/nested/menu1/menu1-1/index.vue

@@ -1,18 +1,21 @@
 <template>
   <div>
-    <p>{{ $t("menus.hsmenu1") }}</p>
-    <p style="text-indent: 2em">{{ $t("menus.hsmenu1-1") }}</p>
+    <p>{{ t("menus.hsmenu1") }}</p>
+    <p style="text-indent: 2em">{{ t("menus.hsmenu1-1") }}</p>
     <el-input v-model="input" />
   </div>
 </template>
 
 <script lang="ts">
+import { useI18n } from "vue-i18n";
 import { defineComponent, ref } from "vue";
 export default defineComponent({
   name: "Menu1-1",
   setup() {
+    const { t } = useI18n();
     return {
-      input: ref("")
+      input: ref(""),
+      t
     };
   }
 });

src/views/nested/menu1/menu1-2/menu1-2-1/index.vue

@@ -1,19 +1,22 @@
 <template>
   <div>
-    <p>{{ $t("menus.hsmenu1") }}</p>
-    <p style="text-indent: 2em">{{ $t("menus.hsmenu1-2") }}</p>
-    <p style="text-indent: 4em">{{ $t("menus.hsmenu1-2-1") }}</p>
+    <p>{{ t("menus.hsmenu1") }}</p>
+    <p style="text-indent: 2em">{{ t("menus.hsmenu1-2") }}</p>
+    <p style="text-indent: 4em">{{ t("menus.hsmenu1-2-1") }}</p>
     <el-input v-model="input" />
   </div>
 </template>
 
 <script lang="ts">
+import { useI18n } from "vue-i18n";
 import { defineComponent, ref } from "vue";
 export default defineComponent({
   name: "Menu1-2-1",
   setup() {
+    const { t } = useI18n();
     return {
-      input: ref("")
+      input: ref(""),
+      t
     };
   }
 });

src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

@@ -1,19 +1,22 @@
 <template>
   <div>
-    <p>{{ $t("menus.hsmenu1") }}</p>
-    <p style="text-indent: 2em">{{ $t("menus.hsmenu1-2") }}</p>
-    <p style="text-indent: 4em">{{ $t("menus.hsmenu1-2-2") }}</p>
+    <p>{{ t("menus.hsmenu1") }}</p>
+    <p style="text-indent: 2em">{{ t("menus.hsmenu1-2") }}</p>
+    <p style="text-indent: 4em">{{ t("menus.hsmenu1-2-2") }}</p>
     <el-input v-model="input" />
   </div>
 </template>
 
 <script lang="ts">
+import { useI18n } from "vue-i18n";
 import { defineComponent, ref } from "vue";
 export default defineComponent({
   name: "Menu1-2-2",
   setup() {
+    const { t } = useI18n();
     return {
-      input: ref("")
+      input: ref(""),
+      t
     };
   }
 });

src/views/nested/menu1/menu1-3/index.vue

@@ -1,18 +1,21 @@
 <template>
   <div>
-    <p>{{ $t("menus.hsmenu1") }}</p>
-    <p style="text-indent: 2em">{{ $t("menus.hsmenu1-3") }}</p>
+    <p>{{ t("menus.hsmenu1") }}</p>
+    <p style="text-indent: 2em">{{ t("menus.hsmenu1-3") }}</p>
     <el-input v-model="input" />
   </div>
 </template>
 
 <script lang="ts">
+import { useI18n } from "vue-i18n";
 import { defineComponent, ref } from "vue";
 export default defineComponent({
   name: "Menu1-3",
   setup() {
+    const { t } = useI18n();
     return {
-      input: ref("")
+      input: ref(""),
+      t
     };
   }
 });

src/views/nested/menu2/index.vue

@@ -1,17 +1,20 @@
 <template>
   <div>
-    <p>{{ $t("menus.hsmenu2") }}</p>
+    <p>{{ t("menus.hsmenu2") }}</p>
     <el-input v-model="input" />
   </div>
 </template>
 
 <script lang="ts">
+import { useI18n } from "vue-i18n";
 import { defineComponent, ref } from "vue";
 export default defineComponent({
   name: "Menu2",
   setup() {
+    const { t } = useI18n();
     return {
-      input: ref("")
+      input: ref(""),
+      t
     };
   }
 });

src/views/system/dict/config.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { reactive } from "vue";
+import { useI18n } from "vue-i18n";
 import { VxeTableEvents } from "vxe-table";
 import { templateRef } from "@vueuse/core";
 
@@ -19,6 +20,8 @@ const emit = defineEmits<{
   (e: "handleClose"): void;
 }>();
 
+const { t } = useI18n();
+
 const xTable = templateRef<any>("xTable", null);
 
 const configData = reactive({
@@ -140,7 +143,7 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
               <span class="select-count"
                 >已选中{{ configData.selectRecords.length }}条</span
               >
-              <vxe-button size="small">{{ $t("buttons.hsdelete") }}</vxe-button>
+              <vxe-button size="small">{{ t("buttons.hsdelete") }}</vxe-button>
             </span>
           </template>
         </vxe-pager>

src/views/system/dict/index.vue

@@ -7,6 +7,7 @@ export default {
 <script setup lang="ts">
 import XEUtils from "xe-utils";
 import Config from "./config.vue";
+import { useI18n } from "vue-i18n";
 import { cloneDeep } from "lodash-unified";
 import { templateRef } from "@vueuse/core";
 import { reactive, ref, unref, nextTick } from "vue";
@@ -22,6 +23,8 @@ type onEditNRow = {
   model: string;
 };
 
+const { t } = useI18n();
+
 const dictData = reactive({
   submitLoading: false,
   showEdit: false,
@@ -209,7 +212,7 @@ function handleClose() {
       <template #buttons>
         <vxe-input
           v-model="dictData.filterName"
-          :placeholder="$t('buttons.hssearch')"
+          :placeholder="t('buttons.hssearch')"
           @keyup="searchEvent"
         ></vxe-input>
       </template>
@@ -218,19 +221,19 @@ function handleClose() {
           icon="fa fa-plus-square-o"
           status="primary"
           @click="onAdd"
-          >{{ $t("buttons.hsadd") }}</vxe-button
+          >{{ t("buttons.hsadd") }}</vxe-button
         >
         <vxe-button
           icon="fa fa-folder-open-o"
           status="primary"
           @click="$refs.xTree.setAllTreeExpand(true)"
-          >{{ $t("buttons.hsexpendAll") }}</vxe-button
+          >{{ t("buttons.hsexpendAll") }}</vxe-button
         >
         <vxe-button
           icon="fa fa-folder-o"
           status="primary"
           @click="$refs.xTree.clearTreeExpand()"
-          >{{ $t("buttons.hscollapseAll") }}</vxe-button
+          >{{ t("buttons.hscollapseAll") }}</vxe-button
         >
       </template>
     </vxe-toolbar>