@liujitcn/kratos-admin-core 0.0.20 → 0.0.23

package/dist/package/src/components/ImportExcel/index.vue

@@ -1,10 +1,16 @@
 <template>
-  <el-dialog v-model="dialogVisible" :title="`批量添加${parameter.title}`" :destroy-on-close="true" width="580px" draggable>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="t('core.upload.batch_add', { resource: parameter.title })"
+    :destroy-on-close="true"
+    width="580px"
+    draggable
+  >
     <el-form class="drawer-multiColumn-form" label-width="100px">
-      <el-form-item label="模板下载 :">
-        <el-button type="primary" :icon="Download" @click="downloadTemp"> 点击下载 </el-button>
+      <el-form-item :label="t('core.upload.template_download')">
+        <el-button type="primary" :icon="Download" @click="downloadTemp">{{ t("common.action.download") }}</el-button>
       </el-form-item>
-      <el-form-item label="文件上传 :">
+      <el-form-item :label="t('core.upload.file')">
         <el-upload
           action="#"
           class="upload"
@@ -23,16 +29,18 @@
             <el-icon class="el-icon--upload">
               <upload-filled />
             </el-icon>
-            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__text">
+              {{ t("core.upload.drag_or_click") }}<em>{{ t("core.upload.click") }}</em>
+            </div>
           </slot>
           <template #tip>
             <slot name="tip">
-              <div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M</div>
+              <div class="el-upload__tip">{{ t("core.upload.excel_format", { size: parameter.fileSize ?? 5 }) }}</div>
             </slot>
           </template>
         </el-upload>
       </el-form-item>
-      <el-form-item label="数据覆盖 :">
+      <el-form-item :label="t('core.upload.data_cover')">
         <el-switch v-model="isCover" />
       </el-form-item>
     </el-form>
@@ -44,6 +52,9 @@ import { ref } from "vue";
 import { useDownload } from "../../hooks/useDownload";
 import { Download } from "@element-plus/icons-vue";
 import { ElNotification, UploadRequestOptions, UploadRawFile } from "element-plus";
+import { useLocaleStore } from "../../locales";
+
+const { t } = useLocaleStore();
 
 /** Excel 导入弹窗参数。 */
 export interface ExcelParameterProps {
@@ -77,7 +88,7 @@ const acceptParams = (params: ExcelParameterProps) => {
 // Excel 导入模板下载
 const downloadTemp = () => {
   if (!parameter.value.tempApi) return;
-  useDownload(parameter.value.tempApi, `${parameter.value.title}模板`);
+  useDownload(parameter.value.tempApi, t("core.upload.template", { resource: parameter.value.title }));
 };
 
 // 文件上传
@@ -99,15 +110,15 @@ const beforeExcelUpload = (file: UploadRawFile) => {
   const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!;
   if (!isExcel)
     ElNotification({
-      title: "温馨提示",
-      message: "上传文件只能是 xls / xlsx 格式！",
+      title: t("common.title.warning"),
+      message: t("core.upload.file_format_invalid"),
       type: "warning"
     });
   if (!fileSize)
     setTimeout(() => {
       ElNotification({
-        title: "温馨提示",
-        message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
+        title: t("common.title.warning"),
+        message: t("core.upload.file_size_exceeded", { size: parameter.value.fileSize ?? 5 }),
         type: "warning"
       });
     }, 0);
@@ -117,8 +128,8 @@ const beforeExcelUpload = (file: UploadRawFile) => {
 // 文件数超出提示
 const handleExceed = () => {
   ElNotification({
-    title: "温馨提示",
-    message: "最多只能上传一个文件！",
+    title: t("common.title.warning"),
+    message: t("core.upload.single_file_only"),
     type: "warning"
   });
 };
@@ -126,8 +137,8 @@ const handleExceed = () => {
 // 上传错误提示
 const excelUploadError = () => {
   ElNotification({
-    title: "温馨提示",
-    message: `批量添加${parameter.value.title}失败，请您重新上传！`,
+    title: t("common.title.warning"),
+    message: t("core.upload.batch_failed", { resource: parameter.value.title }),
     type: "error"
   });
 };
@@ -135,8 +146,8 @@ const excelUploadError = () => {
 // 上传成功提示
 const excelUploadSuccess = () => {
   ElNotification({
-    title: "温馨提示",
-    message: `批量添加${parameter.value.title}成功！`,
+    title: t("common.title.notice"),
+    message: t("core.upload.batch_success", { resource: parameter.value.title }),
     type: "success"
   });
 };

package/dist/package/src/components/LocaleSwitch/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-dropdown trigger="click" placement="bottom-end" @command="handleLocaleChange">
+    <Languages class="toolBar-icon" :size="20" :title="t('core.header.language')" />
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item v-for="item in localeOptions" :key="item.value" :command="item.value" :disabled="item.value === locale">
+          {{ item.label }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Languages } from "@lucide/vue";
+import { type SupportedLocale, useLocaleStore } from "../../locales";
+
+const { locale, setLocale, languageOptions, t } = useLocaleStore();
+const localeOptions = computed(() => {
+  return languageOptions.value.map(item => ({ value: item.language_code, label: item.native_name }));
+});
+
+/** 切换管理端语言并刷新动态本地化数据。 */
+function handleLocaleChange(value: SupportedLocale) {
+  void setLocale(value);
+}
+</script>

package/dist/package/src/components/PasswordStrength/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="password-strength">
     <div class="password-strength__header">
-      <span>密码强度</span>
+      <span>{{ t("core.password.strength") }}</span>
       <strong :class="`password-strength__label password-strength__label--${strength.level}`">
-        {{ strength.text }}
+        {{ t(`core.password.strength.${strength.level}`) }}
       </strong>
     </div>
     <div class="password-strength__bars">
@@ -17,13 +17,16 @@
         }"
       />
     </div>
-    <p class="password-strength__tip">{{ tip }}</p>
+    <p class="password-strength__tip">{{ tip || t("core.password.tip") }}</p>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { getPasswordStrength, PASSWORD_STRENGTH_TIP } from "../../utils/passwordStrength";
+import { getPasswordStrength } from "../../utils/passwordStrength";
+import { useLocaleStore } from "../../locales";
+
+const { t } = useLocaleStore();
 
 /** 密码强度组件属性。 */
 interface PasswordStrengthProps {
@@ -35,7 +38,7 @@ interface PasswordStrengthProps {
 
 const props = withDefaults(defineProps<PasswordStrengthProps>(), {
   password: "",
-  tip: PASSWORD_STRENGTH_TIP
+  tip: ""
 });
 
 /** 强度条固定为三段，保持所有页面一致。 */

package/dist/package/src/components/ProForm/components/DynamicList.vue

@@ -1,16 +1,19 @@
 <template>
   <div class="dynamic-list">
     <div v-for="(item, index) in modelValue" :key="index" class="dynamic-list__item">
-      <el-input v-model="modelValue[index]" v-bind="inputProps" />
+      <el-input v-model="modelValue[index]" v-bind="resolvedInputProps" />
       <el-button :icon="Delete" circle type="danger" plain @click="handleRemove(index)" />
     </div>
-    <el-button :icon="Plus" type="primary" plain @click="handleAdd">添加</el-button>
+    <el-button :icon="Plus" type="primary" plain @click="handleAdd">{{ t("common.action.create") }}</el-button>
   </div>
 </template>
 
 <script setup lang="ts" name="DynamicList">
 import { computed } from "vue";
 import { Delete, Plus } from "@element-plus/icons-vue";
+import { useLocaleStore } from "../../../locales";
+
+const { t } = useLocaleStore();
 
 /** 动态字符串列表组件属性。 */
 interface DynamicListProps {
@@ -20,9 +23,11 @@ interface DynamicListProps {
 
 const props = withDefaults(defineProps<DynamicListProps>(), {
   modelValue: () => [],
-  inputProps: () => ({ placeholder: "请输入内容" })
+  inputProps: () => ({})
 });
 
+const resolvedInputProps = computed(() => ({ placeholder: t("common.placeholder.input_content"), ...props.inputProps }));
+
 const emit = defineEmits<{
   "update:modelValue": [value: string[]];
 }>();

package/dist/package/src/components/ProForm/components/KvList.vue

@@ -1,17 +1,22 @@
 <template>
   <div class="kv-list">
     <div v-for="(item, index) in modelValue" :key="index" class="kv-list__item">
-      <el-input v-model="item.key" v-bind="keyInputProps" />
-      <el-input v-model="item.value" v-bind="valueInputProps" />
+      <el-input v-model="item.key" v-bind="resolvedKeyInputProps" />
+      <el-input v-model="item.value" v-bind="resolvedValueInputProps" />
       <el-button :icon="Delete" circle type="danger" plain @click="handleRemove(index)" />
     </div>
-    <el-button :icon="Plus" type="primary" plain v-bind="addButtonProps" @click="handleAdd">{{ addText }}</el-button>
+    <el-button :icon="Plus" type="primary" plain v-bind="addButtonProps" @click="handleAdd">
+      {{ addText || t("common.action.create") }}
+    </el-button>
   </div>
 </template>
 
 <script setup lang="ts" name="KvList">
 import { computed } from "vue";
 import { Delete, Plus } from "@element-plus/icons-vue";
+import { useLocaleStore } from "../../../locales";
+
+const { t } = useLocaleStore();
 
 /** 键值对列表单项。 */
 interface KvItem {
@@ -30,12 +35,15 @@ interface KvListProps {
 
 const props = withDefaults(defineProps<KvListProps>(), {
   modelValue: () => [],
-  keyInputProps: () => ({ placeholder: "参数名" }),
-  valueInputProps: () => ({ placeholder: "参数值" }),
-  addText: "添加",
+  keyInputProps: () => ({}),
+  valueInputProps: () => ({}),
+  addText: "",
   addButtonProps: () => ({})
 });
 
+const resolvedKeyInputProps = computed(() => ({ placeholder: t("common.field.parameter_name"), ...props.keyInputProps }));
+const resolvedValueInputProps = computed(() => ({ placeholder: t("common.field.parameter_value"), ...props.valueInputProps }));
+
 const emit = defineEmits<{
   "update:modelValue": [value: KvItem[]];
 }>();

package/dist/package/src/components/ProForm/index.vue

@@ -3,7 +3,7 @@
     <el-row :gutter="gutter">
       <template v-for="field in visibleFields" :key="field.prop">
         <span v-if="field.rowBreakBefore" class="pro-form__row-break" aria-hidden="true" />
-        <el-col :span="field.colSpan ?? colSpan">
+        <el-col :span="field.colSpan ?? colSpan" :xs="24">
           <el-form-item :label="field.label" :prop="field.prop" :rules="field.rules" v-bind="resolveFieldItemProps(field)">
             <template v-if="field.labelTooltip" #label>
               <div class="pro-form__label">
@@ -47,7 +47,7 @@ interface ProFormProps {
 
 const props = withDefaults(defineProps<ProFormProps>(), {
   rules: () => ({}),
-  labelWidth: "110px",
+  labelWidth: "",
   gutter: 20,
   colSpan: 24
 });

package/dist/package/src/components/ProTable/components/ColSetting.vue

@@ -1,19 +1,19 @@
 <template>
   <!-- 列设置 -->
-  <el-drawer v-model="drawerVisible" title="列设置" size="450px">
+  <el-drawer v-model="drawerVisible" :title="t('core.table.column_setting')" size="450px">
     <div class="table-main">
       <el-table :data="colSetting" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
-        <el-table-column prop="label" align="left" label="列名" />
-        <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
+        <el-table-column prop="label" align="left" :label="t('core.table.column_name')" />
+        <el-table-column v-slot="scope" prop="isShow" align="center" :label="t('core.table.show')">
           <el-switch v-model="scope.row.isShow"></el-switch>
         </el-table-column>
-        <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
+        <el-table-column v-slot="scope" prop="sortable" align="center" :label="t('core.table.sort')">
           <el-switch v-model="scope.row.sortable"></el-switch>
         </el-table-column>
         <template #empty>
           <div class="table-empty">
             <img src="../../../assets/images/notData.png" alt="notData" />
-            <div>暂无可配置列</div>
+            <div>{{ t("core.table.no_configurable_columns") }}</div>
           </div>
         </template>
       </el-table>
@@ -24,10 +24,12 @@
 <script setup lang="ts" name="ColSetting">
 import { ref } from "vue";
 import { ColumnProps } from "../../../components/ProTable/interface";
+import { useLocaleStore } from "../../../locales";
 
 defineProps<{ colSetting: ColumnProps[] }>();
 
 const drawerVisible = ref<boolean>(false);
+const { t } = useLocaleStore();
 
 const openColSetting = () => {
   drawerVisible.value = true;

package/dist/package/src/components/ProTable/components/TableColumn.vue

@@ -10,6 +10,7 @@ import { ColumnProps, HeaderRenderScope, RenderScope, TableActionProps } from ".
 import type { TableAlign } from "../../../utils/proTable";
 import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from "../../../utils";
 import { formatPrice } from "../../../utils/utils";
+import { t } from "../../../locales";
 
 const props = defineProps<{
   column: ColumnProps;
@@ -119,7 +120,7 @@ const renderImageCell = (item: ColumnProps, scope: RenderScope<any>) => {
       }
     },
     {
-      error: () => h(ElText, { type: "info", size: "small" }, () => "无图")
+      error: () => h(ElText, { type: "info", size: "small" }, () => t("common.message.no_data"))
     }
   );
 };

package/dist/package/src/components/ProTable/index.vue

@@ -31,18 +31,22 @@
       </div>
       <div v-if="showToolButtonArea" class="header-button-ri">
         <slot name="toolButton">
-          <el-tooltip v-if="showTreeToggleButton" :content="isTreeExpanded ? '折叠全部' : '展开全部'" placement="top">
+          <el-tooltip
+            v-if="showTreeToggleButton"
+            :content="isTreeExpanded ? t('core.table.collapse_all') : t('core.table.expand_all')"
+            placement="top"
+          >
             <el-button class="tool-button" :icon="isTreeExpanded ? Fold : Expand" circle @click="toggleTreeExpand" />
           </el-tooltip>
-          <el-tooltip v-if="showToolButton('refresh')" content="刷新数据" placement="top">
+          <el-tooltip v-if="showToolButton('refresh')" :content="t('core.table.refresh')" placement="top">
             <el-button class="tool-button" :icon="Refresh" circle @click="handleToolRefresh" />
           </el-tooltip>
-          <el-tooltip v-if="showToolButton('setting') && columns.length" content="列设置" placement="top">
+          <el-tooltip v-if="showToolButton('setting') && columns.length" :content="t('core.table.column_setting')" placement="top">
             <el-button class="tool-button" :icon="Operation" circle @click="openColSetting" />
           </el-tooltip>
           <el-tooltip
             v-if="showToolButton('search') && searchColumns?.length"
-            :content="isShowSearch ? '隐藏搜索' : '显示搜索'"
+            :content="isShowSearch ? t('core.table.hide_search') : t('core.table.show_search')"
             placement="top"
           >
             <el-button class="tool-button" :icon="Search" circle @click="isShowSearch = !isShowSearch" />
@@ -104,7 +108,7 @@
         <div class="table-empty">
           <slot name="empty">
             <img src="../../assets/images/notData.png" alt="notData" />
-            <div>暂无数据</div>
+            <div>{{ t("common.message.no_data") }}</div>
           </slot>
         </div>
       </template>
@@ -128,7 +132,14 @@ import { ref, watch, provide, onMounted, unref, computed, nextTick, useAttrs, us
 import { ElTable } from "element-plus";
 import { useTable } from "../../hooks/useTable";
 import { useSelection } from "../../hooks/useSelection";
-import { ColumnProps, EnumProps, HeaderActionProps, HeaderActionScope, ProTableProps, TypeProps } from "../../components/ProTable/interface";
+import {
+  ColumnProps,
+  EnumProps,
+  HeaderActionProps,
+  HeaderActionScope,
+  ProTableProps,
+  TypeProps
+} from "../../components/ProTable/interface";
 import { Expand, Fold, Refresh, Operation, Search } from "@element-plus/icons-vue";
 import { generateUUID, handleProp } from "../../utils";
 import { resolveTableColumnAlign } from "../../utils/proTable";
@@ -137,6 +148,9 @@ import Pagination from "./components/Pagination.vue";
 import ColSetting from "./components/ColSetting.vue";
 import TableColumn from "./components/TableColumn.vue";
 import Sortable from "sortablejs";
+import { useLocaleStore } from "../../locales";
+
+const { t } = useLocaleStore();
 
 // 接受父组件参数，配置默认值
 const props = withDefaults(defineProps<ProTableProps>(), {
@@ -208,8 +222,18 @@ const headerActionScope = computed<HeaderActionScope>(() => ({
 }));
 
 // 表格操作 Hooks
-const { loading, tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
-  useTable(props.requestApi, props.initParam, props.pagination, props.dataCallback, props.requestError);
+const {
+  loading,
+  tableData,
+  pageable,
+  searchParam,
+  searchInitParam,
+  getTableList,
+  search,
+  reset,
+  handleSizeChange,
+  handleCurrentChange
+} = useTable(props.requestApi, props.initParam, props.pagination, props.dataCallback, props.requestError);
 
 // 清空选中数据列表
 const clearSelection = () => tableRef.value!.clearSelection();
@@ -299,10 +323,11 @@ const setEnumMapValue = (prop: string | undefined, data: { [key: string]: any }[
  * 根据状态开关配置自动生成搜索下拉枚举，避免状态列只配置开关后搜索框无选项。
  */
 const buildStatusEnum = (column: ColumnProps): EnumProps[] => {
-  if (column.enum || column.dictCode || column.cellType !== "status" || column.search?.el !== "select" || !column.statusProps) return [];
+  if (column.enum || column.dictCode || column.cellType !== "status" || column.search?.el !== "select" || !column.statusProps)
+    return [];
   return [
-    { label: column.statusProps.activeText ?? "启用", value: column.statusProps.activeValue },
-    { label: column.statusProps.inactiveText ?? "禁用", value: column.statusProps.inactiveValue }
+    { label: column.statusProps.activeText ?? t("common.status.enabled"), value: column.statusProps.activeValue },
+    { label: column.statusProps.inactiveText ?? t("common.status.disabled"), value: column.statusProps.inactiveValue }
   ];
 };
 

package/dist/package/src/components/SearchForm/components/SearchFormItem.vue

@@ -49,6 +49,9 @@ import {
 import Dict from "../../../components/Dict/index.vue";
 import { handleProp } from "../../../utils";
 import { ColumnProps, SearchType } from "../../../components/ProTable/interface";
+import { useLocaleStore } from "../../../locales";
+
+const { t } = useLocaleStore();
 
 /** 单个搜索表单项组件属性。 */
 interface SearchFormItem {
@@ -151,12 +154,14 @@ const placeholder = computed(() => {
   const search = props.column.search;
   if (["datetimerange", "daterange", "monthrange"].includes(search?.props?.type) || search?.props?.isRange) {
     return {
-      rangeSeparator: search?.props?.rangeSeparator ?? "至",
-      startPlaceholder: search?.props?.startPlaceholder ?? "开始时间",
-      endPlaceholder: search?.props?.endPlaceholder ?? "结束时间"
+      rangeSeparator: search?.props?.rangeSeparator ?? "-",
+      startPlaceholder: search?.props?.startPlaceholder ?? t("common.field.start_time"),
+      endPlaceholder: search?.props?.endPlaceholder ?? t("common.field.end_time")
     };
   }
-  const placeholder = search?.props?.placeholder ?? (search?.el?.includes("input") ? "请输入" : "请选择");
+  const placeholder =
+    search?.props?.placeholder ??
+    (search?.el?.includes("input") ? t("common.placeholder.input") : t("common.placeholder.select"));
   return { placeholder };
 });
 

package/dist/package/src/components/SearchForm/index.vue

@@ -18,10 +18,10 @@
         </GridItem>
         <GridItem v-if="showOperation" suffix>
           <div class="operation">
-            <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
-            <el-button :icon="Delete" @click="reset"> 重置 </el-button>
+            <el-button type="primary" :icon="Search" @click="search">{{ t("common.action.search") }}</el-button>
+            <el-button :icon="Delete" @click="reset">{{ t("common.action.reset") }}</el-button>
             <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
-              {{ collapsed ? "展开" : "合并" }}
+              {{ collapsed ? t("common.action.expand") : t("common.action.collapse") }}
               <el-icon class="el-icon--right">
                 <component :is="collapsed ? ArrowDown : ArrowUp"></component>
               </el-icon>
@@ -40,6 +40,9 @@ import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
 import SearchFormItem from "./components/SearchFormItem.vue";
 import Grid from "../../components/Grid/index.vue";
 import GridItem from "../../components/Grid/components/GridItem.vue";
+import { useLocaleStore } from "../../locales";
+
+const { t } = useLocaleStore();
 
 /** ProTable 搜索表单组件属性。 */
 interface ProTableProps {

package/dist/package/src/components/SelectFilter/index.vue

@@ -4,7 +4,7 @@
       <div class="select-filter-item-title">
         <span>{{ item.title }} ：</span>
       </div>
-      <span v-if="!item.options.length" class="select-filter-notData">暂无数据 ~</span>
+      <span v-if="!item.options.length" class="select-filter-notData">{{ t("common.message.no_data") }}</span>
       <el-scrollbar>
         <ul class="select-filter-list">
           <li
@@ -32,6 +32,9 @@
 
 <script setup lang="ts" name="selectFilter">
 import { ref, watch } from "vue";
+import { useLocaleStore } from "../../locales";
+
+const { t } = useLocaleStore();
 
 /** 筛选项候选值。 */
 interface OptionsProps {

package/dist/package/src/components/SelectIcon/index.vue

@@ -14,7 +14,7 @@
       </template>
     </el-input>
     <el-dialog v-model="dialogVisible" :title="placeholder" top="50px" width="66%">
-      <el-input v-model="inputValue" placeholder="搜索图标" size="large" :prefix-icon="Icons.Search" />
+      <el-input v-model="inputValue" :placeholder="t('core.icon.search')" size="large" :prefix-icon="Icons.Search" />
       <el-scrollbar v-if="Object.keys(iconsList).length">
         <div class="icon-list">
           <div v-for="item in iconsList" :key="item" class="icon-item" @click="selectIcon(item)">
@@ -23,7 +23,7 @@
           </div>
         </div>
       </el-scrollbar>
-      <el-empty v-else description="未搜索到您要找的图标~" />
+      <el-empty v-else :description="t('core.icon.empty')" />
     </el-dialog>
   </div>
 </template>
@@ -31,6 +31,9 @@
 <script setup lang="ts" name="SelectIcon">
 import { ref, computed, watch } from "vue";
 import * as Icons from "@element-plus/icons-vue";
+import { useLocaleStore } from "../../locales";
+
+const { t } = useLocaleStore();
 
 /** 图标选择器组件属性。 */
 interface SelectIconProps {
@@ -42,10 +45,11 @@ interface SelectIconProps {
 
 const props = withDefaults(defineProps<SelectIconProps>(), {
   iconValue: "",
-  title: "请选择图标",
+  title: "",
   clearable: true,
-  placeholder: "请选择图标"
+  placeholder: ""
 });
+const placeholder = computed(() => props.placeholder || t("core.icon.placeholder"));
 
 // 重新接收一下，防止打包后 clearable 报错
 const valueIcon = ref(props.iconValue);

package/dist/package/src/components/TreeFilter/index.vue

@@ -4,14 +4,14 @@
       {{ title }}
     </h4>
     <div class="search">
-      <el-input v-model="filterText" placeholder="输入关键字进行过滤" clearable />
+      <el-input v-model="filterText" :placeholder="t('core.tree.filter_placeholder')" clearable />
       <el-dropdown trigger="click">
         <el-icon size="20"><More /></el-icon>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item v-if="!multiple" @click="resetSelected">重置选择</el-dropdown-item>
-            <el-dropdown-item @click="toggleTreeNodes(true)">展开全部</el-dropdown-item>
-            <el-dropdown-item @click="toggleTreeNodes(false)">折叠全部</el-dropdown-item>
+            <el-dropdown-item v-if="!multiple" @click="resetSelected">{{ t("core.tree.reset_selection") }}</el-dropdown-item>
+            <el-dropdown-item @click="toggleTreeNodes(true)">{{ t("core.table.expand_all") }}</el-dropdown-item>
+            <el-dropdown-item @click="toggleTreeNodes(false)">{{ t("core.table.collapse_all") }}</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -51,6 +51,9 @@
 <script setup lang="ts" name="TreeFilter">
 import { ref, watch, onBeforeMount, nextTick } from "vue";
 import { ElTree } from "element-plus";
+import { useLocaleStore } from "../../locales";
+
+const { locale, t } = useLocaleStore();
 
 // 接收父组件参数并设置默认值
 interface TreeFilterProps {
@@ -97,7 +100,7 @@ const normalizeLazyNodes = (nodes: { [key: string]: any }[] = []) =>
 
 const updateTreeData = (data: { [key: string]: any }[]) => {
   treeData.value = props.lazy ? normalizeLazyNodes(data) : data;
-  const allNode = { id: "", [props.label]: "全部", isLeaf: true };
+  const allNode = { id: "", [props.label]: t("common.value.all"), isLeaf: true };
   treeAllData.value = props.showAll ? [allNode, ...treeData.value] : treeData.value;
 };
 
@@ -110,7 +113,10 @@ onBeforeMount(async () => {
   }
 });
 
-const loadTreeNode = async (node: { level: number; data?: { [key: string]: any } }, resolve: (data: { [key: string]: any }[]) => void) => {
+const loadTreeNode = async (
+  node: { level: number; data?: { [key: string]: any } },
+  resolve: (data: { [key: string]: any }[]) => void
+) => {
   if (!props.requestApi) {
     resolve([]);
     return;
@@ -141,6 +147,8 @@ watch(
   { deep: true, immediate: true }
 );
 
+watch(locale, () => updateTreeData(treeData.value));
+
 const filterText = ref("");
 watch(filterText, val => {
   treeRef.value!.filter(val);