@skyfox2000/webui 1.6.14 → 1.6.16

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@skyfox2000/webui",
-   "version": "1.6.14",
+   "version": "1.6.16",
    "description": "后台前端通用组件定义, 支持国际化",
    "type": "module",
    "keywords": [],

package/src/components/content/table/index.vue

@@ -210,6 +210,9 @@ onMounted(async () => {
       :data-source="dataList" :loading="gridCtrl.isGridLoading.value" :columns="columns" :pagination="pagination"
       :row-selection="rowSelection" :scroll="props.scroll || { x: 700 }" :size="gridCtrl.tableSize.value" bordered
       v-bind="attrs">
+      <template #emptyText>
+         {{ $t('webui.common.noData') }}
+      </template>
       <template #bodyCell="bodyCell">
          <slot name="bodyCell" :column="bodyCell?.column" :record="bodyCell?.record"></slot>
          <template v-if="gridCtrl && bodyCell?.column?.dataIndex === 'enabled'">

package/src/components/form/input/index.vue

@@ -2,8 +2,7 @@
 import { formValidate, useInputFactory } from '@/index';
 import { Input } from 'ant-design-vue';
 import { ref, watch, computed, useAttrs } from 'vue';
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
+import { $t } from '@/locales/index';
 
 const { editorCtrl, labelText, errInfo } = useInputFactory();
 const props = withDefaults(defineProps<{
@@ -76,7 +75,8 @@ const onClear = (e: any) => {
          errInfo?.errClass === 'error' && !$slots.addonBefore && !$slots.addonAfter
             ? '!border-red-300 shadow-[0_0_3px_0px_#ff4d4f]'
       : '',]" v-model:value="innerValue" autocomplete="new-password" :allow-clear="true"
-      :placeholder="t('webui.common.placeholder', [labelText])" @blur="onBlur" @change="onClear" v-bind="filteredAttrs">
+      :placeholder="$t('webui.common.placeholder', [labelText])" @blur="onBlur" @change="onClear"
+      v-bind="filteredAttrs">
       <template #addonBefore v-if="$slots.addonBefore">
          <slot name="addonBefore"></slot>
       </template>

package/src/components/form/input/inputNumber.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { formValidate, useInputFactory } from '@/index';
 import { InputNumber } from 'ant-design-vue';
-import { useI18n } from 'vue-i18n';
+import { $t } from '@/locales/index';
 
 const { editorCtrl, labelText, errInfo } = useInputFactory();
-const { t } = useI18n();
 const onBlur = () => {
    if (errInfo?.value.errClass && editorCtrl) {
       /// 重新开始验证
@@ -17,7 +16,7 @@ const onBlur = () => {
       :class="[errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '']"
       @blur="onBlur"
       :allow-clear="false"
- :placeholder="t('webui.common.placeholder', [labelText])"
+:placeholder="$t('webui.common.placeholder', [labelText])"
       class="w-[50%]"
       v-bind="$attrs"
    >

package/src/components/form/input/inputPassword.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { formValidate, useInputFactory } from '@/index';
 import { InputPassword } from 'ant-design-vue';
-import { useI18n } from 'vue-i18n';
+import { $t } from '@/locales/index';
 
 const { editorCtrl, labelText, errInfo } = useInputFactory();
-const { t } = useI18n();
 const onBlur = () => {
    if (errInfo?.value.errClass && editorCtrl) {
       /// 重新开始验证
@@ -17,7 +16,7 @@ const onBlur = () => {
       :class="errInfo?.errClass === 'error' ? ['error', '!border-red-300', 'shadow-[0_0_3px_0px_#ff4d4f]'] : ''"
       :allow-clear="true"
       autocomplete="new-password"
- :placeholder="t('webui.common.placeholder', [labelText])"
+:placeholder="$t('webui.common.placeholder', [labelText])"
       @blur="onBlur"
       v-bind="$attrs"
    />

package/src/components/form/propEditor/index.vue

@@ -2,7 +2,7 @@
 import { ref, watch } from 'vue';
 import { Input, Button } from 'ant-design-vue';
 import type { PropConfigItem } from '@/typings/form.d';
-import { useI18n } from 'vue-i18n';
+import { $t } from '@/locales/index';
 
 const props = defineProps<{
    /**
@@ -86,8 +86,6 @@ watch(
    { immediate: true },
 );
 
-const { t } = useI18n();
-
 const updateConfig = () => {
    let newConfig: Record<string, string>;
 
@@ -144,7 +142,7 @@ const handleInputChange = () => {
          <div :class="[fieldWidth ? `w-[${fieldWidth}%]` : 'w-[33%]']">
             <Input v-if="!selectList || selectList.length === 0" v-model:value="item.field"
                :title="item.text || item.field" class="w-full"
-               :placeholder="item.text || labelHolder || t('webui.components.form.propEditor.configName')"
+               :placeholder="item.text || labelHolder || $t('webui.components.form.propEditor.configName')"
                @input="handleInputChange" :disabled="!addMore" />
             <div v-else>
                <Input v-model:value="item.text" :title="item.text" :disabled="true" class="w-[100%]" />
@@ -154,14 +152,14 @@ const handleInputChange = () => {
          <div class="w-[3%]">=</div>
          <div :class="[fieldWidth ? `w-[${97 - fieldWidth}%]` : 'w-[64%]']">
             <Input v-model:value="item.value"
-               :placeholder="valueHolder || t('webui.common.placeholder', [item.text || t('webui.components.form.propEditor.configValue')])"
+               :placeholder="valueHolder || $t('webui.common.placeholder', [item.text || $t('webui.components.form.propEditor.configValue')])"
                @input="handleInputChange" :title="item.value" />
          </div>
       </div>
       <Button v-if="addMore" @click="addNewLine"
          class="mt-1 w-[80px] !text-[12px] text-[#666] bg-[#e6f7ff] border-[#b3e0ff] hover:bg-[#b3e0ff] hover:border-[#8abeff]"
          size="small">
-         {{ t('webui.components.form.propEditor.addConfigRow') }}
+         {{ $t('webui.components.form.propEditor.addConfigRow') }}
       </Button>
    </div>
 </template>

package/src/components/form/radio/index.vue

@@ -23,7 +23,7 @@ const props = defineProps({
    },
    nodata: {
       type: String,
-      default: $t('webui.components.form.radio.noData'),
+      default: $t('webui.common.noData'),
    },
    /**
     * 换行数量

package/src/components/form/switch/index.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, PropType, watch, shallowRef } from 'vue';
+import { ref, onMounted, onUnmounted, PropType, watch, shallowRef, computed } from 'vue';
 import { formValidate, useInputFactory, OptionItemProps, loadOption, unloadOption, OptionCommProps } from '@/index';
 import { Switch } from 'ant-design-vue';
 import message from 'vue-m-message';
 import { useOptionFactory } from '@/utils/page';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { $t, getLang } from '@/locales/index';
 
 const props = defineProps({
    ...OptionCommProps,
@@ -48,7 +47,6 @@ const emit = defineEmits<{
 }>();
 
 const { editorCtrl, errInfo } = useInputFactory();
-const { t } = useI18n();
 
 const customSize = computed(() => {
    switch (props.size) {
@@ -58,6 +56,19 @@ const customSize = computed(() => {
          return 'w-[58px]';
    }
 });
+
+const isEn = computed(() => getLang() === 'en-US' || getLang() === 'en');
+
+const checkedLabel = computed(() => {
+   const label = switchOptions.value[0]?.label || '';
+   return (isEn.value && label.toLowerCase() === 'enable') ? label.slice(0, 2) : label;
+});
+
+const uncheckedLabel = computed(() => {
+   const label = switchOptions.value[1]?.label || '';
+   return (isEn.value && label.toLowerCase() === 'disable') ? label.slice(0, 3) : label;
+});
+
 const onChange = (checked: boolean | string | number) => {
    if (errInfo?.value.errClass && editorCtrl) {
       /// 重新开始验证
@@ -68,7 +79,7 @@ const onChange = (checked: boolean | string | number) => {
 onMounted(() => {
    if (!props.data || props.data.length != 2) {
       console.error('Switch组件: ', props.data);
-      message.error(t('webui.components.form.switch.error'));
+      message.error($t('webui.components.form.switch.error'));
       return;
    }
    if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);
@@ -83,8 +94,8 @@ onUnmounted(() => {
       errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '',
       'bg-blue-300',
       customSize,
-   ]" :checkedChildren="switchOptions[0].label" :checkedValue="switchOptions[0].value"
-      :unCheckedChildren="switchOptions[1].label" :unCheckedValue="switchOptions[1].value" @change="onChange"
+]" :checkedChildren="checkedLabel" :checkedValue="switchOptions[0].value" :unCheckedChildren="uncheckedLabel"
+      :unCheckedValue="switchOptions[1].value" @change="onChange"
       v-bind="$attrs" />
 </template>
 <style>
@@ -92,4 +103,5 @@ onUnmounted(() => {
 .ant-switch-small .ant-switch-inner-unchecked {
    font-size: 10px !important;
 }
-</style>
+</style>
+

package/src/components/form/textarea/index.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { formValidate, useInputFactory } from '@/index';
 import { Textarea } from 'ant-design-vue';
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
-
+import { $t } from '@/locales/index';
 const { editorCtrl, labelText, errInfo } = useInputFactory();
 const onBlur = () => {
    if (errInfo?.value.errClass && editorCtrl) {
@@ -16,7 +14,7 @@ const onBlur = () => {
    <Textarea
       :class="errInfo?.errClass === 'error' ? ['error', '!border-red-300', 'shadow-[0_0_3px_0px_#ff4d4f]'] : ''"
       :allow-clear="true"
- :placeholder="t('webui.common.placeholder', [labelText])"
+:placeholder="$t('webui.common.placeholder', [labelText])"
       @blur="onBlur"
       @keyup.enter.native.stop
       @keydown.enter.native.stop

package/src/components/form/timePicker/index.vue

@@ -3,13 +3,12 @@ import { ref } from 'vue';
 import { TimePicker } from 'ant-design-vue';
 import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
 import { formValidate, useInputFactory } from '@/index';
-import { useI18n } from 'vue-i18n';
+import { $t } from '@/locales/index';
 const props = defineProps<{
     valueFormat?: string;
 }>();
 
 const { editorCtrl, labelText, errInfo } = useInputFactory();
-const { t } = useI18n();
 const onBlur = () => {
     if (errInfo?.value.errClass && editorCtrl) {
         /// 重新开始验证
@@ -22,6 +21,6 @@ const timeFormat = ref<string>(props.valueFormat ?? 'HH:mm');
 <template>
     <TimePicker class="w-full"
         :class="[errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '']"
-        :placeholder="t('webui.common.pleaseSelect') + labelText" :locale="locale" :valueFormat="timeFormat"
+        :placeholder="$t('webui.common.pleaseSelect') + labelText" :locale="locale" :valueFormat="timeFormat"
         @blur="onBlur" />
 </template>

package/src/components/form/upload/imageList.vue

@@ -2,7 +2,7 @@
 import { ToolIcon } from '../../common';
 import { computed, ref, watch } from 'vue';
 import message from 'vue-m-message';
-import { useI18n } from 'vue-i18n';
+import { $t } from '@/locales/index';
 import type { UploadProps } from 'ant-design-vue';
 import { Upload, Image } from 'ant-design-vue';
 import { UploadFile, path } from '@/index';
@@ -86,8 +86,6 @@ const props = withDefaults(defineProps<ImageListProps>(), {
 
 const inputFactory = useInputFactory();
 const { errInfo } = inputFactory;
-const { t } = useI18n();
-
 // Upload 组件的文件列表更新
 const displayList = ref<UploadFile[]>(props.fileList);
 // Upload 组件的内部文件列表
@@ -101,14 +99,14 @@ const validateFile = (file: File): boolean => {
    if (props.fileExt && props.fileExt.length > 0) {
       const extension = file.name.split('.').pop()?.toLowerCase() || '';
       if (!props.fileExt.includes(extension)) {
-         message.error(t('webui.components.form.upload.unsupportedFileType'));
+         message.error($t('webui.components.form.upload.unsupportedFileType'));
          return false;
       }
    }
 
    // 文件大小验证
    if (file.size / 1024 / 1024 > props.maxFileSize) {
-      message.error(t('webui.components.form.upload.fileSizeExceeded', [props.maxFileSize]));
+      message.error($t('webui.components.form.upload.fileSizeExceeded', [props.maxFileSize]));
       return false;
    }
 
@@ -161,7 +159,7 @@ const handleFileSelect = async (newFiles: any[]) => {
 
       // 检查是否达到最大数量限制
       if (isMaxCountReached()) {
-         message.error(t('webui.components.form.upload.maxFileCount', [props.maxCount]));
+         message.error($t('webui.components.form.upload.maxFileCount', [props.maxCount]));
          hasError = true;
          break;
       }
@@ -260,7 +258,7 @@ const removeFile = (index: number) => {
          },
       }).then((res) => {
          if (res && res.status === ResStatus.SUCCESS) {
-            message.success(t('webui.common.success'));
+            message.success($t('webui.common.success'));
             displayList.value.splice(index, 1);
          }
       });
@@ -342,12 +340,12 @@ const hoveredIndex = ref(-1);
                <div v-if="previewUrl" class="flex items-center text-white cursor-pointer hover:text-blue-400"
                   @click="previewFile(index)">
                   <ToolIcon icon="icon-eye" clickable />
-                  <span class="text-sm ml-1">{{ t('webui.components.form.upload.preview') }}</span>
+                  <span class="text-sm ml-1">{{ $t('webui.components.form.upload.preview') }}</span>
                </div>
                <div v-if="showDelete !== false" class="flex items-center text-white cursor-pointer hover:text-red-400"
                   @click="removeFile(index)">
                   <ToolIcon icon="icon-new" :angle="45" clickable />
-                  <span class="text-sm ml-1">{{ t('webui.components.form.upload.delete') }}</span>
+                  <span class="text-sm ml-1">{{ $t('webui.components.form.upload.delete') }}</span>
                </div>
             </div>
          </div>

package/src/locales/default.en-US.ts

@@ -38,7 +38,8 @@ export const defaultEnLocale = {
          "more": "More",
          "moreActions": "More Actions",
          "uploadSave": "Upload & Save",
-         "dataLoading": "Loading data..."
+         "dataLoading": "Loading data...",
+         "noData": "No data"
       },
 
       "components": {
@@ -182,8 +183,7 @@ export const defaultEnLocale = {
                "delete": "Delete"
             },
             "select": {
-               "pleaseSelect": "Please select {0}",
-               "noData": "No data"
+               "pleaseSelect": "Please select {0}"
             },
             "aceEditor": {
                "title": "Code Editor",
@@ -206,7 +206,6 @@ export const defaultEnLocale = {
                "error": "Switch component must have exactly two options"
             },
             "radio": {
-               "noData": "No data",
                "all": "All"
             },
             "autoComplete": {
@@ -219,8 +218,7 @@ export const defaultEnLocale = {
                "addConfigRow": "Add Row"
             },
             "transfer": {
-               "pleaseInput": "Please enter {0}",
-               "noData": "No data"
+               "pleaseInput": "Please enter {0}"
             }
          }
       },

package/src/locales/default.zh-CN.ts

@@ -38,7 +38,8 @@ export const defaultLocale = {
          "more": "更多",
          "moreActions": "更多操作",
          "uploadSave": "上传保存",
-         "dataLoading": "数据加载中..."
+         "dataLoading": "数据加载中...",
+         "noData": "无数据"
       },
       
       "components": {
@@ -182,8 +183,7 @@ export const defaultLocale = {
                "delete": "删除"
             },
             "select": {
-               "pleaseSelect": "请选择{0}",
-               "noData": "无数据"
+               "pleaseSelect": "请选择{0}"
             },
             "aceEditor": {
                "title": "代码编辑器",
@@ -206,7 +206,6 @@ export const defaultLocale = {
                "error": "Switch组件必须有且只有两个选项"
             },
             "radio": {
-               "noData": "无数据",
                "all": "全部"
             },
             "autoComplete": {
@@ -219,8 +218,7 @@ export const defaultLocale = {
                "addConfigRow": "新增配置行"
             },
             "transfer": {
-               "pleaseInput": "请输入{0}",
-               "noData": "无数据"
+               "pleaseInput": "请输入{0}"
             }
          },
       },