@skyfox2000/webui 1.5.7 → 1.5.10

package/package.json

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

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

@@ -4,6 +4,7 @@ import { Button } from '../../common';
 import { Modal, Space } from 'ant-design-vue';
 import { onFormSave, onFormSaveAs, onFormClose, EditorControl, ProviderKeys } from '@/index';
 import { AnyData } from '@skyfox2000/fapi';
+import { $t } from '@/locales/index';
 
 const props = defineProps<{
    /**

package/src/components/content/form/formItem.vue

@@ -5,6 +5,7 @@ import { Helper } from '../../common';
 import { computed, inject, ref, useAttrs } from 'vue';
 import { AnyData } from '@skyfox2000/fapi';
 import { getRule } from '@/utils/form-validate';
+import { $t } from '@/locales/index';
 
 const props = defineProps<{
    /**
@@ -62,9 +63,9 @@ const required = computed(() => {
    // 如果rule包含.，则表示是对象属性
    const rule = getRule(props.rule.split('.'), editorCtrl?.formRules?.value);
    if (!rule) {
-      message.error(`"${props.label}" 的验证规则 \`${props.rule}\` 不存在`);
+      message.error($t('webui.components.content.formItem.validationRuleNotFound', { label: props.label, rule: props.rule }));
       errInfo.value.errClass = 'text-[#ff4d4f]';
-      errInfo.value.msg = `规则 \`${props.rule}\` 不存在，请检查代码！`;
+      errInfo.value.msg = $t('webui.components.content.formItem.validationRuleNotFound', { label: props.label, rule: props.rule });
       return true;
    }
    if (!rule.required) {

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

@@ -5,6 +5,7 @@ import SearchItem from './searchItem.vue';
 import { Button } from '../../common';
 import { GridControl } from '@/index';
 import { AnyData } from '@skyfox2000/fapi';
+import { $t } from '@/locales/index';
 
 /**
  * 搜索表单BUG

package/src/components/content/search/searchItem.vue

@@ -5,6 +5,7 @@ import { FormItem } from 'ant-design-vue';
 import { AnyData } from '@skyfox2000/fapi';
 import { getRule } from '@/utils/form-validate';
 import message from 'vue-m-message';
+import { $t } from '@/locales/index';
 
 const props = defineProps<{
    /**
@@ -42,9 +43,9 @@ const required = computed(() => {
    // 如果rule包含.，则表示是对象属性
    const rule = getRule(props.rule.split('.'), editorCtrl?.formRules?.value);
    if (!rule) {
-      message.error(`"${props.label}" 的验证规则 \`${props.rule}\` 不存在`);
+      message.error($t('webui.components.content.searchItem.validationRuleNotFound', { label: props.label, rule: props.rule }));
       errInfo.value.errClass = 'text-[#ff4d4f]';
-      errInfo.value.msg = `规则 \`${props.rule}\` 不存在，请检查代码！`;
+      errInfo.value.msg = $t('webui.components.content.searchItem.validationRuleNotFound', { label: props.label, rule: props.rule });
       return true;
    }
    if (!rule.required) {

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch, defineAsyncComponent } from 'vue';
 import { ToolIcon, Dialog } from '../../index';
+import { $t } from '@/locales/index';
 import { loadTheme, loadWorker, ensureAceLoaded } from './aceConfig';
 
 const props = defineProps<{
@@ -160,16 +161,17 @@ onMounted(async () => {
       <div class="flex-1 overflow-hidden">
          <VAceEditor v-if="editorLoaded" :class="[height]" v-model:value="content" :lang="language" :theme="theme"
             :options="aceOptions" @blur="handleBlur" @keyup.enter.native.stop @keydown.enter.native.stop />
-         <div v-else :class="[height, 'flex justify-center items-center']">加载编辑器中...</div>
+         <div v-else :class="[height, 'flex justify-center items-center']">{{
+            $t('webui.components.form.aceEditor.loading') }}</div>
       </div>
    </div>
-   <Dialog title="代码编辑器" v-model:open="isFullScreen" :width="680" :footer="null">
+   <Dialog :title="$t('webui.components.form.aceEditor.title')" v-model:open="isFullScreen" :width="680" :footer="null">
       <VAceEditor v-if="isFullScreen && editorLoaded" class="h-[500px] w-[99.3%] border-1 border-solid border-gray-200"
          v-model:value="content" :lang="language" :theme="theme" :options="aceOptions" @blur="handleBlur"
          @keyup.enter.native.stop @keydown.enter.native.stop />
       <div v-else-if="isFullScreen"
          class="h-[500px] w-[99.3%] flex justify-center items-center border-1 border-solid border-gray-200">
-         加载编辑器中...
+         {{ $t('webui.components.form.aceEditor.loading') }}
       </div>
    </Dialog>
 </template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, useAttrs, watch, shallowRef, onActivated } from 'vue';
+import { $t } from '@/locales/index';
 import {
    circleLoading,
    useInputFactory,
@@ -45,7 +46,7 @@ watch(
    () => url.value.loading,
    (newVal) => {
       if (newVal) placeholder.value = '';
-      else if (!placeholder.value) placeholder.value = '请选择' + labelText.value;
+      else if (!placeholder.value) placeholder.value = $t('webui.components.form.cascader.pleaseSelect', [labelText.value]);
    },
    { immediate: true },
 );
@@ -110,10 +111,11 @@ onUnmounted(() => {
    <div class="relative w-[248px] max-w-[248px]">
       <div v-if="!selectOptions.length" class="absolute z-10 mt-[5px] mr-[10px] text-[#999] flex items-center">
          <circleLoading class="text-[#555] mx-[5px] !ml-[10px] !w-4 !h-4" />
-         <span>数据加载中...</span>
+         <span>{{ $t('webui.components.form.cascader.loading') }}</span>
       </div>
       <Cascader :options="selectOptions" :class="[errInfo?.errClass]" :allow-clear="true"
-         :placeholder="selectOptions.length > 0 ? '请选择' + labelText : ''" @change="onChanged" v-bind="attrs" />
+         :placeholder="selectOptions.length > 0 ? $t('webui.components.form.cascader.pleaseSelect', [labelText]) : ''"
+         @change="onChanged" v-bind="attrs" />
    </div>
 </template>
 

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

@@ -99,7 +99,7 @@ onUnmounted(() => {
       <!-- TODO 获取结果通知 -->
       <!-- <div v-if="!checkboxOptions.length" class="absolute z-10 mt-[5px] mr-[10px] text-[#999] flex items-center">
          <circleLoading class="text-[#555] mx-[5px] !ml-[10px] !w-4 !h-4" />
-         <span>数据加载中...</span>
+         <span>{{ $t('webui.components.form.checkbox.loading') }}</span>
       </div> -->
       <CheckboxGroup @change="onChanged" class="w-full mb-[-3px]" v-bind="attrs">
          <template v-if="checkboxOptions.length > 0">

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

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { DatePicker } from 'ant-design-vue';
 import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
 import { formValidate, useInputFactory } from '@/index';
+import { $t } from '@/locales/index';
 const props = defineProps<{
    valueFormat?: string;
 }>();
@@ -21,7 +22,7 @@ const dateFormat = ref<string>(props.valueFormat ?? 'YYYY-MM-DD');
    <DatePicker
       class="w-full"
       :class="[errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '']"
-      :placeholder="'请选择' + labelText"
+      :placeholder="$t('webui.components.form.datePicker.pleaseSelect', [labelText])"
       :locale="locale"
       :valueFormat="dateFormat"
       @blur="onBlur"

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

@@ -70,7 +70,7 @@ const onClear = () => {
       v-model:value="innerValue"
       autocomplete="new-password"
       :allow-clear="true"
-      :placeholder="t('webui.form.inputPlaceholder', [labelText])"
+      :placeholder="t('webui.common.placeholder', [labelText])"
       @blur="onBlur"
       @change="onClear"
       v-bind="$attrs"

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

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

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

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

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

@@ -2,6 +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';
 
 const props = defineProps<{
    /**
@@ -85,6 +86,8 @@ watch(
    { immediate: true },
 );
 
+const { t } = useI18n();
+
 const updateConfig = () => {
    let newConfig: Record<string, string>;
 
@@ -140,7 +143,8 @@ const handleInputChange = () => {
       <div v-for="item in configList" :key="item.id" class="flex items-center gap-2">
          <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 || '配置名'"
+               :title="item.text || item.field" class="w-full"
+               :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%]" />
@@ -149,14 +153,15 @@ const handleInputChange = () => {
          </div>
          <div class="w-[3%]">=</div>
          <div :class="[fieldWidth ? `w-[${97 - fieldWidth}%]` : 'w-[64%]']">
-            <Input v-model:value="item.value" :placeholder="valueHolder || '请输入' + item.text || '请输入配置值'"
+            <Input v-model:value="item.value"
+               :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') }}
       </Button>
    </div>
 </template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch, useAttrs, shallowRef, onActivated } from 'vue';
+import { $t } from '@/locales/index';
 import { Radio, RadioChangeEvent, RadioGroup } from 'ant-design-vue';
 import {
    OptionCommProps,
@@ -22,7 +23,7 @@ const props = defineProps({
    },
    nodata: {
       type: String,
-      default: '无数据',
+      default: $t('webui.components.form.radio.noData'),
    },
    /**
     * 换行数量

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

@@ -2,6 +2,7 @@
 import { ref, PropType } from 'vue';
 import Radio from './index.vue';
 import { OPTIONS } from '@/index';
+import { $t } from '@/locales/index';
 
 const props = defineProps({
    /**
@@ -31,7 +32,7 @@ const props = defineProps({
 const options = ref(JSON.parse(JSON.stringify(OPTIONS.getOptions(props.dataKey))));
 if (props.all === true) {
    options.value.unshift({
-      label: '全部',
+      label: $t('webui.components.form.radio.all'),
       value: props.allValue || [0, 1],
    });
 }

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

@@ -5,6 +5,7 @@ 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';
 
 const props = defineProps({
    ...OptionCommProps,
@@ -47,6 +48,7 @@ const emit = defineEmits<{
 }>();
 
 const { editorCtrl, errInfo } = useInputFactory();
+const { t } = useI18n();
 
 const customSize = computed(() => {
    switch (props.size) {
@@ -66,7 +68,7 @@ const onChange = (checked: boolean | string | number) => {
 onMounted(() => {
    if (!props.data || props.data.length != 2) {
       console.error('Switch组件: ', props.data);
-      message.error('Switch组件必须有且只有两个选项');
+      message.error(t('webui.components.form.switch.error'));
       return;
    }
    if (optionCtrl) loadOption(optionCtrl.autoload, optionCtrl, props);

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

@@ -16,7 +16,7 @@ const onBlur = () => {
    <Textarea
       :class="errInfo?.errClass === 'error' ? ['error', '!border-red-300', 'shadow-[0_0_3px_0px_#ff4d4f]'] : ''"
       :allow-clear="true"
- :placeholder="t('webui.form.inputPlaceholder', [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,11 +3,13 @@ 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';
 const props = defineProps<{
     valueFormat?: string;
 }>();
 
 const { editorCtrl, labelText, errInfo } = useInputFactory();
+const { t } = useI18n();
 const onBlur = () => {
     if (errInfo?.value.errClass && editorCtrl) {
         /// 重新开始验证
@@ -20,5 +22,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="'请选择' + labelText" :locale="locale" :valueFormat="timeFormat" @blur="onBlur" />
+        :placeholder="t('webui.common.pleaseSelect') + labelText" :locale="locale" :valueFormat="timeFormat"
+        @blur="onBlur" />
 </template>

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref, watch, onMounted, PropType, onActivated } from 'vue';
+import { $t } from '@/locales/index';
 import { TreeSelect } from 'ant-design-vue';
 import type { SelectValue, TreeControl, TreeNode } from '@/index';
 import { queryTree, useInputFactory } from '@/index';
@@ -116,7 +117,8 @@ const onClear = () => {
 
 <template>
    <TreeSelect :class="[errInfo?.errClass]" tree-line :multiple="multiple" :tree-default-expanded-keys="['-']"
-      v-model:value="currentValue" :tree-data="selectTreeData" :placeholder="'请选择' + labelText" class="w-full"
+      v-model:value="currentValue" :tree-data="selectTreeData"
+      :placeholder="$t('webui.components.form.treeSelect.pleaseSelect', [labelText])" class="w-full"
       @change="handleChange" @clear="onClear" v-bind="$attrs" />
 </template>
 <style scoped>

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

@@ -2,6 +2,7 @@
 import { ToolIcon } from '../../common';
 import { computed, ref, watch } from 'vue';
 import message from 'vue-m-message';
+import { useI18n } from 'vue-i18n';
 import type { UploadProps } from 'ant-design-vue';
 import { Upload, Image } from 'ant-design-vue';
 import { UploadFile, path } from '@/index';
@@ -85,6 +86,7 @@ const props = withDefaults(defineProps<ImageListProps>(), {
 
 const inputFactory = useInputFactory();
 const { errInfo } = inputFactory;
+const { t } = useI18n();
 
 // Upload 组件的文件列表更新
 const displayList = ref<UploadFile[]>(props.fileList);
@@ -101,14 +103,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('文件类型不支持');
+         message.error(t('webui.components.form.upload.unsupportedFileType'));
          return false;
       }
    }
 
    // 文件大小验证
    if (file.size / 1024 / 1024 > props.maxFileSize) {
-      message.error(`文件大小超过 ${props.maxFileSize}MB 限制`);
+      message.error(t('webui.components.form.upload.fileSizeExceeded', [props.maxFileSize]));
       return false;
    }
 
@@ -161,7 +163,7 @@ const handleFileSelect = async (newFiles: any[]) => {
 
       // 检查是否达到最大数量限制
       if (isMaxCountReached()) {
-         message.error(`最多上传 ${props.maxCount} 个文件`);
+         message.error(t('webui.components.form.upload.maxFileCount', [props.maxCount]));
          hasError = true;
          break;
       }
@@ -260,7 +262,7 @@ const removeFile = (index: number) => {
          },
       }).then((res) => {
          if (res && res.status === ResStatus.SUCCESS) {
-            message.success('删除文件成功！');
+            message.success(t('webui.common.success'));
             displayList.value.splice(index, 1);
          }
       });
@@ -342,12 +344,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">预览</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">删除</span>
+                  <span class="text-sm ml-1">{{ t('webui.components.form.upload.delete') }}</span>
                </div>
             </div>
          </div>

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

@@ -369,9 +369,9 @@ const confirmIndex = (index: number) => {
 
 const getPlaceholder = (): string => {
    const typeMsg =
-      props.fileExt && props.fileExt.length && props.fileExtTip ? `文件必须为 ${props.fileExt.join('/')}` : '';
-   const sizeMsg = props.maxFileSize !== 0 && props.maxFileSizeTip ? `单文件最大 ${props.maxFileSize}MB` : '';
-   const countMsg = props.maxCount !== 0 && props.maxCountTip ? `最多 ${props.maxCount} 个文件` : '';
+      props.fileExt && props.fileExt.length && props.fileExtTip ? $t('webui.components.form.upload.fileTypeRequired', [props.fileExt.join('/')]) : '';
+   const sizeMsg = props.maxFileSize !== 0 && props.maxFileSizeTip ? $t('webui.components.form.upload.singleFileMax', [props.maxFileSize]) : '';
+   const countMsg = props.maxCount !== 0 && props.maxCountTip ? $t('webui.components.form.upload.maxFiles', [props.maxCount]) : '';
 
    return [sizeMsg, typeMsg, countMsg].filter(Boolean).join('，');
 };
@@ -473,7 +473,7 @@ const getStatus = (status?: UploadStatus) => {
                            clickable @click="previewFile(index)" />
                         <span v-if="showActionText" class="mr-2 text-sm text-nowrap"
                            v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:preview' }"
-                           @click="previewFile(index)">预览</span>
+                           @click="previewFile(index)">{{ $t('webui.common.preview') }}</span>
                      </Tooltip>
                   </div>
                   <div v-if="showDelete !== false"
@@ -487,7 +487,8 @@ const getStatus = (status?: UploadStatus) => {
                               <ToolIcon icon="icon-new" :angle="45"
                                  v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }" clickable />
                               <span v-if="showActionText" class="text-sm text-nowrap"
-                                 v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }">删除</span>
+                                 v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }">{{
+                                    $t('webui.common.delete') }}</span>
                            </div>
                         </Tooltip>
                      </Popconfirm>

package/src/components/layout/datetime/index.vue

@@ -1,13 +1,24 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
+import { getLang } from '@/locales/index'
+
 const DateTime = ref("")
+
 onMounted(() => {
   setInterval(() => {
     const curTime = new Date()
-    const options: any = { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
-    const formattedTime = curTime.toLocaleString(undefined, options).replace(/\//g, '-').replace(',', '');
-    DateTime.value = curTime.getFullYear() + "-" + formattedTime
-  }, 1000);
+    const lang = getLang()
+    const options: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false
+    }
+    DateTime.value = curTime.toLocaleString(lang, options)
+  }, 1000)
 })
 </script>
 

package/src/components/layout/header/language.vue

@@ -17,6 +17,8 @@ const handleLangChange = async (lang: string) => {
   try {
     await setLang(lang);
     currentLang.value = lang;
+    // 刷新整个页面以确保语言完全生效
+    window.location.reload();
   } catch (error) {
     console.error('Failed to change language:', error);
   }