@skyfox2000/webui 1.5.3 → 1.5.7

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { ToolIcon, Input } from '@/components/';
-
-
+import { $t } from '@/locales/index';
 import { getToolVisible, getToolStatus, onToolClicked } from '@/utils/tools';
 import type { ComponentTool, ToolGroup } from '@/typings/tools.d';
 import GroupTools from '../toolbar/groupTools.vue';
@@ -48,7 +47,7 @@ const toolData = computed(() => {
    const tools = props.tools as ComponentTool[];
    return [{
       id: 'default-group',
-      name: '工具',
+      name: $t('webui.components.content.toolpanel.tool'),
       tools: tools
    }] as ToolPanelGroup[];
 });
@@ -74,7 +73,7 @@ const filteredToolData = computed(() => {
       const allTools = filteredGroups.flatMap(group => group.tools);
       return [{
          id: 'search-results',
-         name: '搜索结果',
+         name: $t('webui.components.content.toolpanel.searchResult'),
          tools: allTools
       }];
    }
@@ -98,20 +97,20 @@ const modeToggleGroup = computed<ToolGroup[]>(() => {
       tools: [
          {
             key: 'list',
-            label: '列表',
+            label: $t('webui.components.content.toolpanel.list'),
             icon: 'icon-datalist',
             display: 'icon',
-            tiptext: '列表视图',
+            tiptext: $t('webui.components.content.toolpanel.listView'),
             click: () => {
                props.onModeChange?.('list');
             }
          } as ComponentTool,
          {
             key: 'grid',
-            label: '网格',
+            label: $t('webui.components.content.toolpanel.grid'),
             icon: 'icon-icon-list',
             display: 'icon',
-            tiptext: '网格视图',
+            tiptext: $t('webui.components.content.toolpanel.gridView'),
             click: () => {
                props.onModeChange?.('grid');
             }
@@ -128,10 +127,10 @@ const collapseToggleGroup = computed<ToolGroup[]>(() => {
       tools: [
          {
             key: 'collapse',
-            label: props.collapsed ? '展开' : '收起',
+            label: props.collapsed ? $t('webui.components.content.toolpanel.expand') : $t('webui.components.content.toolpanel.collapse'),
             icon: 'icon-menu',
             display: 'icon',
-            tiptext: props.collapsed ? '展开面板' : '收起面板',
+            tiptext: props.collapsed ? $t('webui.components.content.toolpanel.expandPanel') : $t('webui.components.content.toolpanel.collapsePanel'),
             // 添加特殊的点击处理
             click: () => {
                props.onCollapseChange?.(!props.collapsed);
@@ -195,7 +194,7 @@ const handleDragEnd = (event: DragEvent) => {
    <div class="relative h-full">
       <!-- 主面板 -->
       <div
-         class="h-full bg-white border-r border-gray-200 transition-all duration-300 ease-in-out shadow-sm"
+ class="h-full bg-white border-r border-gray-200 transition-all duration-300 ease-in-out shadow-sm"
          :class="panelWidthClass">
          <!-- 展开状态 -->
          <div v-if="!props.collapsed" class="h-full flex flex-col">
@@ -210,8 +209,9 @@ const handleDragEnd = (event: DragEvent) => {
 
             <!-- 搜索框区域 -->
             <div v-if="showSearch" class="px-3 pt-3 pb-2">
-               <Input v-model:value="searchKeyword" placeholder="搜索工具..." allow-clear size="small" class="w-full"
-                  @update:value="(value: string) => handleSearch(value)"
+               <Input v-model:value="searchKeyword"
+                  :placeholder="$t('webui.components.content.toolpanel.searchPlaceholder')" allow-clear size="small"
+                  class="w-full" @update:value="(value: string) => handleSearch(value)"
                   @press-enter="(e: Event) => handleSearch((e.target as HTMLInputElement).value)" />
             </div>
             <!-- 工具列表滚动区域 -->
@@ -241,8 +241,8 @@ const handleDragEnd = (event: DragEvent) => {
                            class="aspect-square flex flex-col items-center justify-center p-1.5 bg-gray-50 border border-solid border-gray-200 rounded-lg shadow-sm hover:border-blue-300 hover:shadow-lg hover:bg-blue-50 transition-all duration-200 cursor-move group"
                            :class="[
                               getToolStatus(tool) ? 'opacity-50 cursor-not-allowed bg-gray-200' : 'hover:scale-105',
-                              tool.class || '',
-                              dragConfig?.draggable ? 'cursor-move' : '',
+   tool.class || '',
+   dragConfig?.draggable ? 'cursor-move' : '',
                            ]" :draggable="dragConfig?.draggable"
                            @click="tool.click ? (tool.click as any)(tool, $event) : handleToolClick(tool, $event)"
                            @dragstart="handleDragStart($event, tool as any)" @dragend="handleDragEnd($event)"
@@ -264,8 +264,8 @@ const handleDragEnd = (event: DragEvent) => {
                            class="flex items-center px-2.5 py-2 bg-gray-50 border border-gray-200 border-solid rounded-lg shadow-sm hover:border-blue-500 hover:shadow-md hover:bg-blue-50 transition-all duration-200 group"
                            :class="[
                               getToolStatus(tool) ? 'opacity-50 cursor-not-allowed bg-gray-200' : 'hover:scale-[1.02]',
-                              tool.class || '',
-                              dragConfig?.draggable ? 'cursor-move' : ''
+   tool.class || '',
+   dragConfig?.draggable ? 'cursor-move' : ''
                            ]" :draggable="dragConfig?.draggable"
                            @click="tool.click ? (tool.click as any)(tool, $event) : handleToolClick(tool, $event)"
                            @dragstart="handleDragStart($event, tool as any)" @dragend="handleDragEnd($event)"
@@ -276,7 +276,7 @@ const handleDragEnd = (event: DragEvent) => {
                               dragConfig?.draggable ? '!cursor-move' : '']" v-bind="tool.iconProps" />
                            <div class="flex-1 min-w-0">
                               <div class="font-medium text-gray-900 text-sm group-hover:text-gray-950 text-center">{{
-                                 tool.label }}</div>
+   tool.label }}</div>
                               <div v-if="(tool as any).description"
                                  class="text-xs text-gray-600 mt-0.5 truncate group-hover:text-gray-700 text-center">
                                  {{ (tool as any).description }}
@@ -303,8 +303,8 @@ const handleDragEnd = (event: DragEvent) => {
                      class="w-12 h-12 flex items-center justify-center bg-gray-50 border border-gray-400 rounded-lg shadow-sm hover:border-blue-500 hover:shadow-md hover:bg-blue-50 transition-all duration-200 cursor-move group"
                      :class="[
                         getToolStatus(tool) ? 'opacity-50 cursor-not-allowed bg-gray-200' : 'hover:scale-110',
-                        tool.class || '',
-                        dragConfig?.draggable ? 'cursor-move' : ''
+   tool.class || '',
+   dragConfig?.draggable ? 'cursor-move' : ''
                      ]" :draggable="dragConfig?.draggable"
                      @click="tool.click ? (tool.click as any)(tool, $event) : handleToolClick(tool, $event)"
                      @dragstart="handleDragStart($event, tool as any)" @dragend="handleDragEnd($event)"

package/src/components/error/error403.vue

@@ -6,9 +6,9 @@ const onClicked = () => {
 };
 </script>
 <template>
-   <Result status="403" title="403" sub-title="您没有权限访问当前页面！">
+   <Result status="403" title="403" :sub-title="$t('webui.components.error.forbidden')">
       <template #extra>
-         <Button type="primary" @click="onClicked">点击返回</Button>
+         <Button type="primary" @click="onClicked">{{ $t('webui.components.error.clickReturn') }}</Button>
       </template>
    </Result>
 </template>

package/src/components/error/error404.vue

@@ -6,9 +6,9 @@ const onClicked = () => {
 };
 </script>
 <template>
-   <Result status="404" title="404" sub-title="页面不存在或者没有权限访问页面！">
+   <Result status="404" title="404" :sub-title="$t('webui.components.error.pageNotFound')">
       <template #extra>
-         <Button type="primary" @click="onClicked">点击返回</Button>
+         <Button type="primary" @click="onClicked">{{ $t('webui.components.error.clickReturn') }}</Button>
       </template>
    </Result>
 </template>

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

@@ -2,6 +2,8 @@
 import { formValidate, useInputFactory } from '@/index';
 import { Input } from 'ant-design-vue';
 import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
 
 const { editorCtrl, labelText, errInfo } = useInputFactory();
 const onBlur = () => {
@@ -68,7 +70,7 @@ const onClear = () => {
       v-model:value="innerValue"
       autocomplete="new-password"
       :allow-clear="true"
-      :placeholder="'请输入' + labelText"
+      :placeholder="t('webui.form.inputPlaceholder', [labelText])"
       @blur="onBlur"
       @change="onClear"
       v-bind="$attrs"

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

@@ -18,6 +18,7 @@ import {
 } from '@/index';
 import { IUrlInfo } from '@skyfox2000/fapi';
 import { useOptionFactory } from '@/utils/page';
+import { $t } from '@/locales/index';
 
 type SelectValueType = string | number | string[] | number[] | null;
 const props = defineProps({
@@ -146,7 +147,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.select.pleaseSelect', [labelText.value]);
    },
    { immediate: true },
 );
@@ -211,7 +212,7 @@ onUnmounted(() => {
    <div>
       <div v-if="optionCtrl?.url?.loading" 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.upload.dataLoading') }}</span>
       </div>
       <Select :class="[errInfo?.errClass, 'w-full']" v-model:value="innerValue" :allow-clear="true" @change="onChanged"
          :placeholder="placeholder" :label-in-value="false" v-bind="attrs">

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

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

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

@@ -3,6 +3,7 @@ import { ref, onMounted, watch } from 'vue';
 import { AnyControl, doQuery, formValidate, OptionItemProps, useInputFactory } from '@/index';
 import { Transfer } from 'ant-design-vue';
 import { IUrlInfo, ReqParams } from '@skyfox2000/fapi';
+import { $t } from '@/locales/index';
 const props = defineProps<{
    /**
     * 是否自动加载数据
@@ -75,7 +76,7 @@ onMounted(async () => {
 <template>
    <Transfer
       :class="errInfo?.errClass === 'error' ? ['error', '!border-red-300', 'shadow-[0_0_3px_0px_#ff4d4f]'] : ''"
-      :placeholder="'请输入' + labelText"
+      :placeholder="$t('webui.components.form.transfer.pleaseInput', [labelText])"
       :targetKeys="targetKeys"
       @change="onChange"
       v-bind="$attrs"

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

@@ -8,6 +8,7 @@ import { UploadFile, UploadStatus, donwloadFromMinio, path, Switch, previewFromM
 import { useInputFactory } from '@/utils/form-validate';
 import { ApiResponse, httpPost, IUrlInfo, ResStatus } from '@skyfox2000/fapi';
 import { fastUpload } from '@/utils/file-upload';
+import { $t } from '@/locales/index';
 
 export interface UploadListProps {
    /**
@@ -120,14 +121,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;
    }
 
@@ -200,7 +201,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;
       }
@@ -343,7 +344,7 @@ const removeFile = (index: number) => {
          },
       }).then((res) => {
          if (res && res.status === ResStatus.SUCCESS) {
-            message.success('删除文件成功！');
+            message.success($t('webui.components.form.upload.deleteSuccess'));
             displayList.value.splice(index, 1);
          }
       });
@@ -395,17 +396,17 @@ const getStatusColor = (status?: UploadStatus) => {
 const getStatus = (status?: UploadStatus) => {
    switch (status) {
       case UploadStatus.Uploading:
-         return '上传中';
+         return $t('webui.components.form.upload.uploading');
       case UploadStatus.Success:
-         return '上传完成';
+         return $t('webui.components.form.upload.uploadComplete');
       case UploadStatus.Error:
-         return '上传失败';
+         return $t('webui.components.form.upload.uploadFailed');
       case UploadStatus.Online:
-         return '在线';
+         return $t('webui.common.online');
       case UploadStatus.Offline:
-         return '已下线';
+         return $t('webui.common.offline');
       default:
-         return '待上传';
+         return $t('webui.components.form.upload.pendingUpload');
    }
 };
 </script>
@@ -416,11 +417,13 @@ const getStatus = (status?: UploadStatus) => {
          <div class="w-35 mx-3 flex gap-2">
             <Upload ref="fileUploader" v-bind="uploadProps"
                v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:upload' }">
-               <Button :class="[errInfo?.errClass + '-text']">选择文件</Button>
+               <Button :class="[errInfo?.errClass + '-text']">{{ $t('webui.components.form.upload.selectFile')
+               }}</Button>
             </Upload>
             <Upload v-if="showFolderUpload" ref="fileFolderUploader" :webkitdirectory="true" :directory="true" v-bind="folderUploadProps"
                v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:upload' }">
-               <Button :class="[errInfo?.errClass + '-text']">选择目录</Button>
+               <Button :class="[errInfo?.errClass + '-text']">{{ $t('webui.components.form.upload.selectDirectory')
+                  }}</Button>
             </Upload>
          </div>
          <div class="flex-1 text-sm text-gray-500" :class="[errInfo?.errClass + '-text']">
@@ -444,17 +447,17 @@ const getStatus = (status?: UploadStatus) => {
                   <div class="mr-2" v-if="
                      showOnlineSwitch && (file.status == UploadStatus.Online || file.status == UploadStatus.Offline)
                   ">
-                     <Tooltip title="上线或下线">
+                     <Tooltip :title="$t('webui.components.form.upload.onlineOrOffline')">
                         <Switch v-model:checked="file.status" :data="[
-                           { label: '上线', value: UploadStatus.Online },
-                           { label: '下线', value: UploadStatus.Offline },
+   { label: $t('webui.common.online'), value: UploadStatus.Online },
+   { label: $t('webui.common.offline'), value: UploadStatus.Offline },
                         ]" @change="onlineOrOffline(file)"
                            v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:online' }" />
                      </Tooltip>
                   </div>
                   <div class="flex items-center text-blue-500 hover:text-blue-700 mr-1 cursor-pointer"
                      v-if="downloadUrl && (file.status == UploadStatus.Online || file.status == UploadStatus.Offline)">
-                     <Tooltip title="下载">
+                     <Tooltip :title="$t('webui.common.download')">
                         <ToolIcon icon="icon-download"
                            v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:download' }" clickable
                            @click="downloadFile(index)" />
@@ -465,7 +468,7 @@ const getStatus = (status?: UploadStatus) => {
                   </div>
                   <div class="flex items-center text-blue-500 hover:text-blue-700 mr-1 cursor-pointer"
                      v-if="previewUrl && (file.status == UploadStatus.Online || file.status == UploadStatus.Offline)">
-                     <Tooltip title="预览">
+                     <Tooltip :title="$t('webui.common.preview')">
                         <ToolIcon icon="icon-eye" v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:preview' }"
                            clickable @click="previewFile(index)" />
                         <span v-if="showActionText" class="mr-2 text-sm text-nowrap"
@@ -475,10 +478,11 @@ const getStatus = (status?: UploadStatus) => {
                   </div>
                   <div v-if="showDelete !== false"
                      class="flex items-center text-red-500 hover:text-red-700 cursor-pointer">
-                     <Popconfirm :open="confirmIndex(index)" cancelText="否" okText="是" title="确定删除该文件吗？"
+                     <Popconfirm :open="confirmIndex(index)" :cancelText="$t('webui.common.no')"
+                        :okText="$t('webui.common.yes')" :title="$t('webui.components.form.upload.deleteConfirm')"
                         :okButtonProps="{ size: 'small' }" :cancelButtonProps="{ size: 'small' }"
                         @confirm="removeFile(index)" @cancel="delIndex = -1">
-                        <Tooltip title="删除">
+                        <Tooltip :title="$t('webui.common.delete')">
                            <div @click="confirmDelFile(index, file.status)">
                               <ToolIcon icon="icon-new" :angle="45"
                                  v-auth="{ role: ['Super', 'Admin'], permit: ':uploadlist:delete' }" clickable />

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

@@ -18,16 +18,16 @@ const confirmExit = () => {
 };
 </script>
 <template>
-   <Tooltip :title="$t('webui.layout.header.exitPlatform')">
+   <Tooltip :title="$t('webui.components.layout.header.exitPlatform')">
       <ToolIcon icon="icon-logout" @click="open = true" clickable class="w-5 h-5"
-         :title="$t('webui.layout.header.exitSystem')" />
+         :title="$t('webui.components.layout.header.exitSystem')" />
    </Tooltip>
-   <Modal v-model:open="open" :title="$t('webui.layout.header.confirmExit')" :ok-text="$t('webui.common.confirm')"
-      :cancel-text="$t('webui.common.cancel')" :width="380" @ok="confirmExit">
+   <Modal v-model:open="open" :title="$t('webui.components.layout.header.confirmExit')"
+      :ok-text="$t('webui.common.confirm')" :cancel-text="$t('webui.common.cancel')" :width="380" @ok="confirmExit">
       <Flex align="center" justify="flex-start" :style="{ padding: '0 32px', margin: '20px 0' }">
          <ToolIcon icon="icon-question-circle" color="orange" class="w-[60px] h-[60px]" />
          <div style="margin: 0 0 0 20px; font-weight: 400; font-size: 16px">{{
-            $t('webui.layout.header.exitConfirmMessage') }}</div>
+            $t('webui.components.layout.header.exitConfirmMessage') }}</div>
       </Flex>
    </Modal>
 </template>

package/src/components/layout/menu/menuTabs.vue

@@ -44,7 +44,7 @@ const closeTab = (key: string) => {
                   <span class="flex">
                      {{ pane.title }}
                   </span>
-                  <Tooltip title="关闭" placement="top" size="small">
+                  <Tooltip :title="$t('webui.common.close')" placement="top" size="small">
                      <div
                         class="inline-block mx-auto relative flex items-center"
                         v-if="pageInfoStore.TabPanes.length > 1 && pane.closable"

package/src/const/options.ts

@@ -1,4 +1,5 @@
 import { OptionItemProps } from '@/typings/option';
+import { $t } from '@/locales/index';
 
 /**
  * 静态选项
@@ -52,13 +53,13 @@ export class OPTIONS {
     */
    static EnableDisable = [
       {
-         label: '启用',
-         text: '✅ 启用',
+         label: $t('webui.common.enable'),
+         text: `✅ ${$t('webui.common.enable')}`,
          value: 1,
       },
       {
-         label: '停用',
-         text: '🚫 停用',
+         label: $t('webui.common.disable'),
+         text: `🚫 ${$t('webui.common.disable')}`,
          value: 0,
       },
    ];
@@ -70,13 +71,13 @@ export class OPTIONS {
     */
    static SuccessResult = [
       {
-         label: '成功',
-         text: '✅ 成功',
+         label: $t('webui.common.success'),
+         text: `✅ ${$t('webui.common.success')}`,
          value: 1,
       },
       {
-         label: '失败',
-         text: '🚫 失败',
+         label: $t('webui.common.failed'),
+         text: `🚫 ${$t('webui.common.failed')}`,
          value: 0,
       },
    ];
@@ -88,13 +89,13 @@ export class OPTIONS {
     */
    static YesNo = [
       {
-         label: '是',
-         text: '✅ 是',
+         label: $t('webui.common.yes'),
+         text: `✅ ${$t('webui.common.yes')}`,
          value: 1,
       },
       {
-         label: '否',
-         text: '❎ 否',
+         label: $t('webui.common.no'),
+         text: `❎ ${$t('webui.common.no')}`,
          value: 0,
       },
    ];
@@ -106,13 +107,13 @@ export class OPTIONS {
     */
    static MaleFemale = [
       {
-         label: '男',
-         text: '男 👨',
+         label: $t('webui.common.male'),
+         text: `${$t('webui.common.male')} 👨`,
          value: 'M',
       },
       {
-         label: '女',
-         text: '女 👩',
+         label: $t('webui.common.female'),
+         text: `${$t('webui.common.female')} 👩`,
          value: 'F',
       },
    ];