国际化 ​

当前支持的语言 ​

yun-elp 目前内置四种语言：

  • zh-cn（简单中文，默认）
  • en（英文）
  • ja（日文）
  • ar（阿拉伯语）

locale 统一配置 ​

在 y-app-wrap 上配置 locale 为内置语言码（如 'zh-cn'），即可同时切换：

  • yun-elp 组件文案（y-dialog、y-table 合计行等）
  • y-app-wrap 内部的 Element Plus 组件文案（el-pagination、el-date-picker 等）

无需再单独写 elpConfig.locale，除非你要让 EP 与 yun-elp 使用不同语言。

项目说明
取值'zh-cn' | 'en' | 'ja' | 'ar'，不是任意字符串
默认值'zh-cn'（yun-elp 与内部 EP 均为中文）
作用范围仅 y-app-wrap 包裹的子树
覆盖 EP 语言显式传入 elpConfig.locale 时以其为准
外部 EP 组件y-app-wrap 外的 el-* 不会自动同步，需单独配置 el-config-provider

更完整的配置说明见 AppWrap 语言配置。

配置方式 ​

推荐通过 y-app-wrap 在应用最外层统一配置 locale（默认 zh-cn）：

  • locale：控制 yun-elp 内置文案
  • direction：控制排版方向（ltr / rtl / auto，默认 auto）
  • elpConfig.locale：可选；未设置时会自动按 locale 注入对应的 Element Plus 语言包
vue
<script setup lang="ts">
import { ref } from 'vue';

const locale = ref<'zh-cn' | 'en' | 'ja' | 'ar'>('zh-cn');
</script>

<template>
  <y-app-wrap :locale="locale" direction="auto">
    <router-view />
  </y-app-wrap>
</template>

未传 locale 时，yun-elp 与 y-app-wrap 内部的 Element Plus 组件（如 el-pagination）均默认使用简体中文。

若需使用与 locale 不同的 Element Plus 语言包，可显式传入 elpConfig.locale 覆盖：

vue
<script setup lang="ts">
import { ref } from 'vue';
import en from 'element-plus/dist/locale/en.mjs';

const locale = ref<'zh-cn' | 'en' | 'ja' | 'ar'>('zh-cn');
</script>

<template>
  <y-app-wrap :locale="locale" :elp-config="{ locale: en }">
    <router-view />
  </y-app-wrap>
</template>

YAppWrap 外部的 Element Plus 组件不会自动同步，需单独配置 el-config-provider 的 locale。

排版方向（RTL） ​

direction="auto" 时，locale="ar" 会自动切换为 RTL；其他语言保持 LTR。

y-app-wrap 会在根容器上设置 dir 属性，内部 yun-elp 自定义样式已使用逻辑属性（如 margin-inline-start、inset-inline-end）适配 RTL。

direction行为
autoar → rtl，其余 → ltr
ltr强制 LTR
rtl强制 RTL

若应用根节点也需要 RTL（例如布局、路由视图），请与 y-app-wrap 保持一致：

vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import { resolveDirection } from 'yun-elp/locale';

const locale = ref<'zh-cn' | 'en' | 'ja' | 'ar'>('ar');
const htmlDir = computed(() => resolveDirection(locale.value, 'auto'));
</script>

<template>
  <div :dir="htmlDir">
    <y-app-wrap :locale="locale" direction="auto">
      <router-view />
    </y-app-wrap>
  </div>
</template>

仅需要阿语文案、不需要 RTL 布局时，可设置 direction="ltr"。

适用范围 ​

locale 会影响 yun-elp 内部已接入国际化的组件文案，例如：

  • y-dialog
  • y-drawer
  • y-pop
  • y-empty
  • y-table
  • y-cron-picker

如果没有显式传入 locale，这些组件默认使用简体中文。

建议 ​

  • 如果你的应用已经有全局 i18n 方案，建议把语言状态统一收口到应用根组件，再映射给 y-app-wrap
  • 一般情况下只需设置 locale；elpConfig.locale 仅在需要与 yun-elp 语言不一致时再显式覆盖
  • 阿拉伯语完整体验：locale="ar" + direction="auto"（或显式 direction="rtl"）