refactor:额外暴露i18n实例、组件的语言包整理

web/src/components/icon/selector.vue

@@ -4,13 +4,28 @@
             <transition name="el-zoom-in-center">
                 <div class="icon-selector-box">
                     <div class="selector-header">
-                        <div class="selector-title">{{ title }}</div>
+                        <div class="selector-title">{{ title ? title : $t('iconSelector.Please select an icon') }}</div>
                         <div class="selector-tab">
-                            <span title="Element Puls 图标" @click="onChangeTab('ele')" :class="state.iconType == 'ele' ? 'active' : ''">ele</span>
-                            <span title="Font Awesome 图标" @click="onChangeTab('awe')" :class="state.iconType == 'awe' ? 'active' : ''">awe</span>
-                            <span title="阿里 Iconfont 图标" @click="onChangeTab('ali')" :class="state.iconType == 'ali' ? 'active' : ''">ali</span>
                             <span
-                                title="本地图标:/src/assets/icons中的.svg"
+                                :title="'Element Puls ' + $t('iconSelector.Icon')"
+                                @click="onChangeTab('ele')"
+                                :class="state.iconType == 'ele' ? 'active' : ''"
+                                >ele</span
+                            >
+                            <span
+                                :title="'Font Awesome ' + $t('iconSelector.Icon')"
+                                @click="onChangeTab('awe')"
+                                :class="state.iconType == 'awe' ? 'active' : ''"
+                                >awe</span
+                            >
+                            <span
+                                :title="$t('iconSelector.Ali iconcont Icon')"
+                                @click="onChangeTab('ali')"
+                                :class="state.iconType == 'ali' ? 'active' : ''"
+                                >ali</span
+                            >
+                            <span
+                                :title="$t('iconSelector.Local icon title')"
                                 @click="onChangeTab('local')"
                                 :class="state.iconType == 'local' ? 'active' : ''"
                                 >local</span
@@ -40,7 +55,7 @@
                 v-model="state.inputValue"
                 :size="size"
                 :disabled="disabled"
-                placeholder="搜索图标"
+                :placeholder="$t('search') + $t('iconSelector.Icon')"
                 ref="selectorInput"
                 @focus="onInputFocus"
                 @blur="onInputBlur"
@@ -78,7 +93,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
     size: 'default',
     disabled: false,
-    title: '请选择图标',
+    title: '',
     type: 'ele',
     placement: 'bottom',
     modelValue: '',

web/src/components/table/fieldRender/index.vue

@@ -54,7 +54,7 @@
 
     <!-- url -->
     <div v-if="field.render == 'url'">
-        <el-input :model-value="fieldValue" placeholder="链接地址">
+        <el-input :model-value="fieldValue" :placeholder="t('Link address')">
             <template #append>
                 <el-button @click="typeof field.click == 'function' ? field.click(fieldValue, field) : openUrl(fieldValue, field)">
                     <Icon :color="'#606266'" name="el-icon-Position" />
@@ -116,13 +116,7 @@
                 :content="btn.title ? t(btn.title) : ''"
                 placement="top"
             >
-                <el-button
-                    v-if="btn.name == 'weigh-sort'"
-                    v-auth="'sortable'"
-                    :class="btn.class"
-                    class="table-operate move-button"
-                    :type="btn.type"
-                >
+                <el-button v-if="btn.name == 'weigh-sort'" v-auth="'sortable'" :class="btn.class" class="table-operate move-button" :type="btn.type">
                     <Icon :name="btn.icon" />
                     <div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
                 </el-button>
@@ -166,7 +160,7 @@ if (props.property.indexOf('.') > -1) {
     let fieldNameArr = props.property.split('.')
     let val: any = props.row[fieldNameArr[0]]
     for (let index = 1; index < fieldNameArr.length; index++) {
-        val = val ? (val[fieldNameArr[index]] ?? ''):''
+        val = val ? val[fieldNameArr[index]] ?? '' : ''
     }
     fieldValue.value = val
 }

web/src/components/table/index.ts

@@ -1,3 +1,5 @@
+import { i18n } from '/@/lang/index'
+
 /*
  * 默认Url点击事件处理
  */
@@ -51,10 +53,10 @@ export const defaultOptButtons = (optButType: DefaultOptButType[] = ['weigh-sort
                 icon: 'fa fa-trash',
                 class: 'table-row-delete',
                 popconfirm: {
-                    confirmButtonText: '删除',
-                    cancelButtonText: '取消',
+                    confirmButtonText: i18n.global.t('delete'),
+                    cancelButtonText: i18n.global.t('Cancel'),
                     confirmButtonType: 'danger',
-                    title: '确认要删除记录吗？',
+                    title: i18n.global.t('Are you sure to delete the selected record?'),
                 },
                 disabledTip: false,
             },
@@ -74,7 +76,7 @@ export const defaultOptButtons = (optButType: DefaultOptButType[] = ['weigh-sort
  * 格式化时间戳
  */
 export const timeFormat = (dateTime: string | number | null = null, fmt = 'yyyy-mm-dd hh:MM:ss') => {
-    if (dateTime == 'none') return '无'
+    if (dateTime == 'none') return i18n.global.t('none')
     if (!dateTime) dateTime = Number(new Date())
     if (dateTime.toString().length === 10) {
         dateTime = +dateTime * 1000

web/src/lang/globs-en.ts

@@ -46,4 +46,6 @@ export default {
     search: 'Search',
     Reset: 'Reset',
     to: 'To',
+    'Link address': 'Link address',
+    'none': 'None',
 }

web/src/lang/globs-zh-cn.ts

@@ -46,4 +46,6 @@ export default {
     search: '搜索',
     Reset: '重置',
     to: '至',
+    'Link address': '链接地址',
+    'none': '无',
 }

web/src/lang/index.ts

@@ -1,5 +1,6 @@
 import type { App } from 'vue'
 import { createI18n } from 'vue-i18n'
+import type { I18n } from 'vue-i18n'
 import { useConfig } from '/@/stores/config'
 
 /*
@@ -11,6 +12,8 @@ import { useConfig } from '/@/stores/config'
 import elementZhcnLocale from 'element-plus/lib/locale/lang/zh-cn'
 import elementEnLocale from 'element-plus/lib/locale/lang/en'
 
+export var i18n: I18n<{ [x: string]: any }, unknown, unknown, false>
+
 interface assignLocale {
     [key: string]: any
 }
@@ -48,7 +51,7 @@ export async function loadLang(app: App) {
     // 合并语言包(含element-puls、页面语言包)
     Object.assign(messages[locale], ...assignLocale[locale])
 
-    const i18n = createI18n({
+    i18n = createI18n({
         locale: locale,
         legacy: false, // 组合式api
         globalInjection: true, // 挂载$t,$d等到全局

web/src/lang/pages/en/iconSelector.ts

@@ -0,0 +1,6 @@
+export default {
+    Icon: 'Icon',
+    'Local icon title': 'Local icon:/src/assets/icons Inside .svg',
+    'Please select an icon': 'Please select an icon',
+    'Ali iconcont Icon': 'Ali iconcont Icon',
+}

web/src/lang/pages/zh-cn/iconSelector.ts

@@ -0,0 +1,6 @@
+export default {
+    Icon: '图标',
+    'Local icon title': '本地图标:/src/assets/icons中的.svg',
+    'Please select an icon': '请选择图标',
+    'Ali iconcont Icon': '阿里 Iconfont 图标',
+}