From ec8b1b0b8dd4159106bb6d87b2cd886aa2f283d0 Mon Sep 17 00:00:00 2001
From: qiang <qw13131wang@gmail.com>
Date: Thu, 5 Dec 2024 18:07:38 +0800
Subject: [PATCH] feat: add multi-language files (#538)

* feat: add multi-language files

* test: fix
---
 build/build-locale.ts            | 13 ++++++
 build/sync-types.ts              | 15 +++++++
 demo/I18n/base.vue               | 71 +++----------------------------
 docs/en-US/guide/i18n.md         | 63 ++++++++++------------------
 docs/src/components/ProCode.vue  |  3 +-
 docs/src/components/PwaPopup.vue |  2 +-
 docs/src/lang/index.ts           | 72 ++------------------------------
 docs/src/tsconfig.json           |  1 +
 docs/zh-CN/guide/i18n.md         | 63 ++++++++++------------------
 package.json                     |  5 ++-
 src/Crud/index.test.ts           |  2 +-
 src/Crud/useCrud.ts              | 48 +++++++--------------
 src/Form/useForm.ts              | 30 ++++---------
 src/Search/useSearch.ts          | 29 ++++---------
 src/Tabs/useTabs.ts              | 36 ++++------------
 src/composables/index.ts         |  1 +
 src/composables/locale.ts        | 28 +++++++++++++
 src/locale/en.ts                 | 37 ++++++++++++++++
 src/locale/zh-cn.ts              | 37 ++++++++++++++++
 vite.config.ts                   |  1 +
 20 files changed, 230 insertions(+), 327 deletions(-)
 create mode 100644 build/build-locale.ts
 create mode 100644 build/sync-types.ts
 create mode 100644 src/composables/locale.ts
 create mode 100644 src/locale/en.ts
 create mode 100644 src/locale/zh-cn.ts

diff --git a/build/build-locale.ts b/build/build-locale.ts
new file mode 100644
index 00000000..e859b981
--- /dev/null
+++ b/build/build-locale.ts
@@ -0,0 +1,13 @@
+import fg from 'fast-glob'
+import { defineConfig } from 'vite'
+import { toAbsolute } from './utils'
+
+export default defineConfig({
+  build: {
+    target: 'es2015',
+    outDir: toAbsolute('../lib/locale'),
+    lib: {
+      entry: fg.sync(toAbsolute('../src/locale/*.ts')),
+    },
+  },
+})
diff --git a/build/sync-types.ts b/build/sync-types.ts
new file mode 100644
index 00000000..680730f3
--- /dev/null
+++ b/build/sync-types.ts
@@ -0,0 +1,15 @@
+import fg from 'fast-glob'
+import { copyFileRecursive, toAbsolute } from './utils'
+
+function transform(input: string) {
+  const outDir = input.replace(/\/types\//, '/lib/')
+  copyFileRecursive(input, outDir)
+}
+
+(() => {
+  fg.sync([
+    toAbsolute('../types/locale/*'),
+    toAbsolute('../types/styles/*'),
+  ]).map(transform)
+  console.log('sync-types done')
+})()
diff --git a/demo/I18n/base.vue b/demo/I18n/base.vue
index 0634e6bb..c3d49603 100644
--- a/demo/I18n/base.vue
+++ b/demo/I18n/base.vue
@@ -6,7 +6,7 @@
   >
     Switch lang
   </el-button>
-  <el-config-provider :locale="toggle ? locale1 : locale2">
+  <el-config-provider :locale="toggle ? en : zhCN">
     <pro-search
       v-model="searchForm"
       :columns="searchColumns"
@@ -45,72 +45,11 @@ import {
   defineCrudBeforeOpen,
   defineSearchColumns,
 } from 'element-pro-components'
+import en from 'element-pro-components/lib/locale/en'
+import zhCN from 'element-pro-components/lib/locale/zh-cn'
 
 export default defineComponent({
   setup() {
-    const locale1 = {
-      name: 'en',
-      pro: {
-        form: {
-          submit: 'Submit',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-        },
-        search: {
-          submit: 'Search',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-        },
-        crud: {
-          add: 'Add',
-          edit: 'Edit',
-          detail: 'Detail',
-          del: 'Delete',
-          submit: 'Submit',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-          search: 'Search',
-          searchReset: 'Reset',
-          searchPrev: 'Prev',
-          searchNext: 'Next',
-        },
-      },
-    }
-    const locale2 = {
-      name: 'zh-cn',
-      pro: {
-        form: {
-          submit: '提交',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-        },
-        search: {
-          submit: '搜索',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-        },
-        crud: {
-          add: '新增',
-          edit: '编辑',
-          detail: '查看',
-          del: '删除',
-          submit: '提交',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-          search: '搜索',
-          searchReset: '重置',
-          searchPrev: '上一步',
-          searchNext: '下一步',
-        },
-      },
-    }
-
     const form = ref({})
     const searchForm = ref({})
     const detail = ref({})
@@ -233,8 +172,8 @@ export default defineComponent({
       formColumns,
       searchColumns,
       toggle,
-      locale1,
-      locale2,
+      en,
+      zhCN,
       data,
       beforeOpen,
       submit,
diff --git a/docs/en-US/guide/i18n.md b/docs/en-US/guide/i18n.md
index 8f019b93..00bdec91 100644
--- a/docs/en-US/guide/i18n.md
+++ b/docs/en-US/guide/i18n.md
@@ -7,51 +7,34 @@ meta:
 
 # Internationalization
 
-## configuration
+element-pro-components components support internationalization configuration like element-plus. You only need to merge the internationalization configuration of element-pro-components when configuring element-plus internationalization.
 
-Like elememt-plus, international configuration can be inject through ElConfigProvider
+## Global configuration
+
+```ts
+import ElementPlus from 'element-plus'
+import ElementPro from 'element-pro-components'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import proZhCN from 'element-pro-components/lib/locale/zh-cn'
+
+app.use(ElementPlus, { locale: Object.assign(zhCn, proZhCN) }).use(ElementPro)
+```
+
+## ElConfigProvider
+
+You can also inject internationalization configuration through ElConfigProvider like elememt-plus.
 
 ::: demo
 @/demo/I18n/base.vue
 :::
 
+## Supported languages
+
+[Supported languages list](https://github.com/tolking/element-pro-components/tree/main/src/locale)
+
+- en
+- zh-cn
+
 ## Configurable fields
 
-```js
-const locale = {
-  pro: {
-    form: {
-      submit: 'Submit',
-      reset: 'Reset',
-      prev: 'Prev',
-      next: 'Next',
-    },
-    search: {
-      submit: 'Search',
-      reset: 'Reset',
-      prev: 'Prev',
-      next: 'Next',
-    },
-    crud: {
-      add: 'Add',
-      edit: 'Edit',
-      detail: 'Detail',
-      del: 'Delete',
-      submit: 'Submit',
-      reset: 'Reset',
-      prev: 'Prev',
-      next: 'Next',
-      search: 'Search',
-      searchReset: 'Reset',
-      searchPrev: 'Prev',
-      searchNext: 'Next',
-    },
-    tabs: {
-      refresh: 'Refresh',
-      left: 'Close Left',
-      right: 'Close Right',
-      others: 'Close Others',
-    },
-  },
-}
-```
+<<< @/src/locale/en.ts
diff --git a/docs/src/components/ProCode.vue b/docs/src/components/ProCode.vue
index 5b6950d1..92819015 100644
--- a/docs/src/components/ProCode.vue
+++ b/docs/src/components/ProCode.vue
@@ -87,14 +87,13 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useClipboard } from '@vueuse/core'
-import { useLocale } from 'element-plus'
 import {
   CaretTop,
   CaretBottom,
   DocumentCopy,
   VideoPlay,
 } from '@element-plus/icons-vue'
-import { useShow } from 'element-pro-components'
+import { useShow, useLocale } from 'element-pro-components'
 import { github } from '../utils/index'
 import { useStackBlitz } from '../composables/index'
 
diff --git a/docs/src/components/PwaPopup.vue b/docs/src/components/PwaPopup.vue
index 2ddc9b7d..ab1fe7dc 100644
--- a/docs/src/components/PwaPopup.vue
+++ b/docs/src/components/PwaPopup.vue
@@ -28,7 +28,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useLocale } from 'element-plus'
+import { useLocale } from 'element-pro-components'
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 
 const { t } = useLocale()
diff --git a/docs/src/lang/index.ts b/docs/src/lang/index.ts
index 67a40420..8f8001f4 100644
--- a/docs/src/lang/index.ts
+++ b/docs/src/lang/index.ts
@@ -1,45 +1,14 @@
 import en from 'element-plus/es/locale/lang/en'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import proEn from 'element-pro-components/lib/locale/en'
+import proZhCN from 'element-pro-components/lib/locale/zh-cn'
 import type { Language, TranslatePair } from 'element-plus/es/locale'
 
 const lang: Record<string, Language & Record<string, string | TranslatePair>> =
   {
     'en-US': {
       ...en,
-      pro: {
-        form: {
-          submit: 'Submit',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-        },
-        search: {
-          submit: 'Search',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-        },
-        crud: {
-          add: 'Add',
-          edit: 'Edit',
-          detail: 'Detail',
-          del: 'Delete',
-          submit: 'Submit',
-          reset: 'Reset',
-          prev: 'Prev',
-          next: 'Next',
-          search: 'Search',
-          searchReset: 'Reset',
-          searchPrev: 'Prev',
-          searchNext: 'Next',
-        },
-        tabs: {
-          refresh: 'Refresh',
-          left: 'Close Left',
-          right: 'Close Right',
-          others: 'Close Others',
-        },
-      },
+      ...proEn,
       docs: {
         code: {
           hide: 'Hide',
@@ -58,40 +27,7 @@ const lang: Record<string, Language & Record<string, string | TranslatePair>> =
     },
     'zh-CN': {
       ...zhCn,
-      pro: {
-        form: {
-          submit: '提交',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-        },
-        search: {
-          submit: '搜索',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-        },
-        crud: {
-          add: '新增',
-          edit: '编辑',
-          detail: '查看',
-          del: '删除',
-          submit: '提交',
-          reset: '重置',
-          prev: '上一步',
-          next: '下一步',
-          search: '搜索',
-          searchReset: '重置',
-          searchPrev: '上一步',
-          searchNext: '下一步',
-        },
-        tabs: {
-          refresh: '刷新',
-          left: '关闭左侧',
-          right: '关闭右侧',
-          others: '关闭其他',
-        },
-      },
+      ...proZhCN,
       docs: {
         code: {
           hide: '隐藏代码',
diff --git a/docs/src/tsconfig.json b/docs/src/tsconfig.json
index 54911530..11da3130 100644
--- a/docs/src/tsconfig.json
+++ b/docs/src/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "jsx": "preserve",
     "paths": {
+      "element-pro-components/lib/*": ["./src/*"],
       "element-pro-components": ["./src/index"]
     }
   },
diff --git a/docs/zh-CN/guide/i18n.md b/docs/zh-CN/guide/i18n.md
index f105a98f..1b8788dd 100644
--- a/docs/zh-CN/guide/i18n.md
+++ b/docs/zh-CN/guide/i18n.md
@@ -7,51 +7,34 @@ meta:
 
 # 国际化
 
-## 配置
+element-pro-components 组件同 element-plus 一样支持国际化配置。你只需要在配置 element-plus 的国际化时，合并 element-pro-components 的国际化配置即可。
 
-同 elememt-plus 一样可以通过 ElConfigProvider 注入国际化配置
+## 全局配置
+
+```ts
+import ElementPlus from 'element-plus'
+import ElementPro from 'element-pro-components'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import proZhCN from 'element-pro-components/lib/locale/zh-cn'
+
+app.use(ElementPlus, { locale: Object.assign(zhCn, proZhCN) }).use(ElementPro)
+```
+
+## ElConfigProvider
+
+也可以像 elememt-plus 一样通过 ElConfigProvider 注入国际化配置
 
 ::: demo
 @/demo/I18n/base.vue
 :::
 
+## 支持的语言
+
+[支持的语言列表](https://github.com/tolking/element-pro-components/tree/main/src/locale)
+
+- en
+- zh-cn
+
 ## 可配置字段
 
-```js
-const locale = {
-  pro: {
-    form: {
-      submit: '提交',
-      reset: '重置',
-      prev: '上一步',
-      next: '下一步',
-    },
-    search: {
-      submit: '搜索',
-      reset: '重置',
-      prev: '上一步',
-      next: '下一步',
-    },
-    crud: {
-      add: '新增',
-      edit: '编辑',
-      detail: '查看',
-      del: '删除',
-      submit: '提交',
-      reset: '重置',
-      prev: '上一步',
-      next: '下一步',
-      search: '搜索',
-      searchReset: '重置',
-      searchPrev: '上一步',
-      searchNext: '下一步',
-    },
-    tabs: {
-      refresh: '刷新',
-      left: '关闭左侧',
-      right: '关闭右侧',
-      others: '关闭其他',
-    },
-  },
-}
-```
+<<< @/src/locale/zh-cn.ts
diff --git a/package.json b/package.json
index ba9fe30e..7d6f467b 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,10 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "npm run build:lib && npm run build:helper && npm run build:styles && npm run build:types",
+    "build": "npm run build:lib && npm run build:locale && npm run build:helper && npm run build:styles && npm run build:types",
     "build:lib": "rimraf lib && vite build -c build/build-lib.ts",
-    "build:types": "rimraf types && vue-tsc --declaration --emitDeclarationOnly",
+    "build:locale": "rimraf lib/locale && vite build -c build/build-locale.ts",
+    "build:types": "rimraf types && vue-tsc --declaration --emitDeclarationOnly && esno build/sync-types.ts",
     "build:helper": "esno build/build-helper.ts",
     "build:styles": "rimraf lib/styles && esno build/build-styles.ts",
     "build:docs": "rimraf dist && npm run build:manifest && npm run build:ssr && esno build/prerender.ts",
diff --git a/src/Crud/index.test.ts b/src/Crud/index.test.ts
index b4bfc6dc..ab705872 100644
--- a/src/Crud/index.test.ts
+++ b/src/Crud/index.test.ts
@@ -676,7 +676,7 @@ describe('Crud', () => {
     const btns = wrapper.findAll('.pro-crud .crud-menu .el-button')
     expect(btns).toHaveLength(3 * tableData.length)
     expect(btns[0].text()).toBe('Edit')
-    expect(btns[1].text()).toBe('View')
+    expect(btns[1].text()).toBe('Detail')
     expect(btns[2].text()).toBe('Delete')
     expect(wrapper.find('.pro-crud .crud-table').text()).toBe('Tom')
 
diff --git a/src/Crud/useCrud.ts b/src/Crud/useCrud.ts
index e9d816fe..a30217d0 100644
--- a/src/Crud/useCrud.ts
+++ b/src/Crud/useCrud.ts
@@ -1,8 +1,8 @@
 import { computed, ref, useSlots, Ref, Slot } from 'vue'
-import { useLocale } from 'element-plus'
+import { useLocale } from '../composables/index'
 import { isFunction, isObject, filterDeep } from '../utils/index'
 import { formMenu, useFormInjectEmits } from '../Form/index'
-import type { UnknownObject, ExternalParam } from '../types/index'
+import type { UnknownObject } from '../types/index'
 import type {
   IFormColumns,
   IFormEmits,
@@ -37,49 +37,29 @@ export function useCrudMenu(
     const menu: ICrudMenuColumns = {
       ...formMenu,
       add: true,
-      addText: 'Add',
       addProps: { type: 'primary' },
       edit: true,
-      editText: 'Edit',
       editProps: { link: true, type: 'primary' },
       detail: true,
-      detailText: 'View',
       detailProps: { link: true, type: 'info' },
       del: true,
-      delText: 'Delete',
       delProps: { link: true, type: 'danger' },
       search: true,
-      searchText: 'Search',
       searchProps: { type: 'primary' },
       searchReset: true,
-      searchResetText: 'Reset',
-      searchPrevText: 'Prev',
-      searchNextText: 'Next',
+      addText: t('pro.crud.add'),
+      editText: t('pro.crud.edit'),
+      detailText: t('pro.crud.detail'),
+      delText: t('pro.crud.del'),
+      submitText: t('pro.crud.submit'),
+      resetText: t('pro.crud.reset'),
+      prevText: t('pro.crud.prev'),
+      nextText: t('pro.crud.next'),
+      searchText: t('pro.crud.search'),
+      searchResetText: t('pro.crud.reset'),
+      searchPrevText: t('pro.crud.prev'),
+      searchNextText: t('pro.crud.next'),
     }
-    const menuList = [
-      'add',
-      'edit',
-      'detail',
-      'del',
-      'submit',
-      'reset',
-      'prev',
-      'next',
-      'search',
-      'searchReset',
-      'searchPrev',
-      'searchNext',
-    ]
-
-    menuList.forEach((item) => {
-      const menuKey = `pro.crud.${item}`
-      const menuText = t(menuKey)
-
-      if (menuText && menuText !== menuKey) {
-        const key = `${item}Text` as keyof ICrudMenuColumns
-        menu[key] = menuText as ExternalParam
-      }
-    })
 
     return isObject(props.menu) ? Object.assign({}, menu, props.menu) : menu
   })
diff --git a/src/Form/useForm.ts b/src/Form/useForm.ts
index 30f03d8b..c051dccb 100644
--- a/src/Form/useForm.ts
+++ b/src/Form/useForm.ts
@@ -1,6 +1,5 @@
 import { computed, shallowRef, provide, inject } from 'vue'
-import { useLocale } from 'element-plus'
-import { useShow } from '../composables/index'
+import { useShow, useLocale } from '../composables/index'
 import { isBoolean } from '../utils/index'
 import type { ComputedRef, Ref, InjectionKey, Slot } from 'vue'
 import type { CollapseModelValue, TabPaneName } from 'element-plus'
@@ -25,12 +24,8 @@ import type {
 
 export const formMenu: IFormMenuColumns = {
   submit: true,
-  submitText: 'Submit',
   submitProps: { type: 'primary' },
   reset: true,
-  resetText: 'Reset',
-  prevText: 'Prev',
-  nextText: 'Next',
 }
 
 export function useFormMenu(
@@ -39,23 +34,12 @@ export function useFormMenu(
   const { t } = useLocale()
 
   return computed(() => {
-    const menu = { ...formMenu }
-    const submitText = t('pro.form.submit')
-    const resetText = t('pro.form.reset')
-    const prevText = t('pro.form.prev')
-    const nextText = t('pro.form.next')
-
-    if (submitText && submitText !== 'pro.form.submit') {
-      menu.submitText = submitText
-    }
-    if (resetText && resetText !== 'pro.form.reset') {
-      menu.resetText = resetText
-    }
-    if (prevText && prevText !== 'pro.form.prev') {
-      menu.prevText = prevText
-    }
-    if (nextText && nextText !== 'pro.form.next') {
-      menu.nextText = nextText
+    const menu = {
+      ...formMenu,
+      submitText: t('pro.form.submit'),
+      resetText: t('pro.form.reset'),
+      prevText: t('pro.form.prev'),
+      nextText: t('pro.form.next'),
     }
 
     return props.menu ? Object.assign({}, menu, props.menu) : menu
diff --git a/src/Search/useSearch.ts b/src/Search/useSearch.ts
index d2074cec..2090c416 100644
--- a/src/Search/useSearch.ts
+++ b/src/Search/useSearch.ts
@@ -1,6 +1,6 @@
 import { computed, useSlots } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
-import { useLocale } from 'element-plus'
+import { useLocale } from '../composables/index'
 import { useFormInjectEmits } from '../Form/useForm'
 import type { ComputedRef, Ref, Slot } from 'vue'
 import type {
@@ -14,12 +14,8 @@ import type { ISearchProps, ISearchEmits, ISearchConfigProp } from './type'
 
 export const searchMenu: IFormMenuColumns = {
   submit: true,
-  submitText: 'Search',
   submitProps: { type: 'primary' },
   reset: true,
-  resetText: 'Reset',
-  prevText: 'Prev',
-  nextText: 'Next',
 }
 
 export function useSearchMenu(
@@ -28,23 +24,12 @@ export function useSearchMenu(
   const { t } = useLocale()
 
   return computed(() => {
-    const menu = { ...searchMenu }
-    const submitText = t('pro.search.submit')
-    const resetText = t('pro.search.reset')
-    const prevText = t('pro.search.prev')
-    const nextText = t('pro.search.next')
-
-    if (submitText && submitText !== 'pro.search.submit') {
-      menu.submitText = submitText
-    }
-    if (resetText && resetText !== 'pro.search.reset') {
-      menu.resetText = resetText
-    }
-    if (prevText && prevText !== 'pro.search.prev') {
-      menu.prevText = prevText
-    }
-    if (nextText && nextText !== 'pro.search.next') {
-      menu.nextText = nextText
+    const menu = {
+      ...searchMenu,
+      searchMenu: t('pro.search.submit'),
+      resetText: t('pro.search.reset'),
+      prevText: t('pro.search.prev'),
+      nextText: t('pro.search.next'),
     }
 
     return props.menu ? Object.assign({}, menu, props.menu) : menu
diff --git a/src/Tabs/useTabs.ts b/src/Tabs/useTabs.ts
index 018a52a2..6bf35310 100644
--- a/src/Tabs/useTabs.ts
+++ b/src/Tabs/useTabs.ts
@@ -1,7 +1,8 @@
 import { computed, nextTick, Ref, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { DropdownInstance, useLocale } from 'element-plus'
+import { useLocale } from '../composables/index'
 import { isFunction, isObject, throwWarn } from '../utils/index'
+import type { DropdownInstance } from 'element-plus'
 import type { ITabsProps, ITabsExpose, ITab } from './type'
 
 interface UseTabs extends ITabsExpose {
@@ -15,34 +16,13 @@ interface UseTabs extends ITabsExpose {
 
 export function useTabsMenu() {
   const { t } = useLocale()
-  const menu = {
-    refresh: 'Refresh',
-    left: 'Close Left',
-    right: 'Close Right',
-    others: 'Close Others',
-  }
-
-  return computed(() => {
-    const refresh = t('pro.tabs.refresh')
-    const left = t('pro.tabs.left')
-    const right = t('pro.tabs.right')
-    const others = t('pro.tabs.others')
-
-    if (refresh && refresh !== 'pro.tabs.refresh') {
-      menu.refresh = refresh
-    }
-    if (left && left !== 'pro.tabs.left') {
-      menu.left = left
-    }
-    if (right && right !== 'pro.tabs.right') {
-      menu.right = right
-    }
-    if (others && others !== 'pro.tabs.others') {
-      menu.others = others
-    }
 
-    return menu
-  })
+  return computed(() => ({
+    refresh: t('pro.tabs.refresh'),
+    left: t('pro.tabs.left'),
+    right: t('pro.tabs.right'),
+    others: t('pro.tabs.others'),
+  }))
 }
 
 export function useTabs(props: ITabsProps): UseTabs {
diff --git a/src/composables/index.ts b/src/composables/index.ts
index 0d5d6dde..d5b3bb63 100644
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -1,6 +1,7 @@
 export * from './breakpoint'
 export * from './col'
 export * from './data'
+export * from './locale'
 export * from './public'
 export * from './router'
 export * from './row'
diff --git a/src/composables/locale.ts b/src/composables/locale.ts
new file mode 100644
index 00000000..f039ff32
--- /dev/null
+++ b/src/composables/locale.ts
@@ -0,0 +1,28 @@
+import { useLocale as useEPLocale } from 'element-plus'
+import Lang from '../locale/en'
+import { get } from '../utils/index'
+import type { Ref } from 'vue'
+import type { TranslatorOption } from 'element-plus'
+import type { Language } from 'element-plus/es/locale'
+
+export function useLocale(localeOverrides?: Ref<Language | undefined>) {
+  const { t, ...arg } = useEPLocale(localeOverrides)
+
+  function translate(path: string, option?: TranslatorOption) {
+    let value = t(path, option)
+
+    if (value === path) {
+      value = get(Lang, path, path)
+    }
+
+    return value.replace(
+      /\{(\w+)\}/g,
+      (_, key) => `${option?.[key] ?? `{${key}}`}`,
+    )
+  }
+
+  return {
+    ...arg,
+    t: translate,
+  }
+}
diff --git a/src/locale/en.ts b/src/locale/en.ts
new file mode 100644
index 00000000..47fef7f3
--- /dev/null
+++ b/src/locale/en.ts
@@ -0,0 +1,37 @@
+export default {
+  name: 'en',
+  pro: {
+    form: {
+      submit: 'Submit',
+      reset: 'Reset',
+      prev: 'Prev',
+      next: 'Next',
+    },
+    search: {
+      submit: 'Search',
+      reset: 'Reset',
+      prev: 'Prev',
+      next: 'Next',
+    },
+    crud: {
+      add: 'Add',
+      edit: 'Edit',
+      detail: 'Detail',
+      del: 'Delete',
+      submit: 'Submit',
+      reset: 'Reset',
+      prev: 'Prev',
+      next: 'Next',
+      search: 'Search',
+      searchReset: 'Reset',
+      searchPrev: 'Prev',
+      searchNext: 'Next',
+    },
+    tabs: {
+      refresh: 'Refresh',
+      left: 'Close Left',
+      right: 'Close Right',
+      others: 'Close Others',
+    },
+  },
+}
diff --git a/src/locale/zh-cn.ts b/src/locale/zh-cn.ts
new file mode 100644
index 00000000..f500bf21
--- /dev/null
+++ b/src/locale/zh-cn.ts
@@ -0,0 +1,37 @@
+export default {
+  name: 'zh-cn',
+  pro: {
+    form: {
+      submit: '提交',
+      reset: '重置',
+      prev: '上一步',
+      next: '下一步',
+    },
+    search: {
+      submit: '搜索',
+      reset: '重置',
+      prev: '上一步',
+      next: '下一步',
+    },
+    crud: {
+      add: '新增',
+      edit: '编辑',
+      detail: '查看',
+      del: '删除',
+      submit: '提交',
+      reset: '重置',
+      prev: '上一步',
+      next: '下一步',
+      search: '搜索',
+      searchReset: '重置',
+      searchPrev: '上一步',
+      searchNext: '下一步',
+    },
+    tabs: {
+      refresh: '刷新',
+      left: '关闭左侧',
+      right: '关闭右侧',
+      others: '关闭其他',
+    },
+  },
+}
diff --git a/vite.config.ts b/vite.config.ts
index a874876d..5d255c7e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -18,6 +18,7 @@ export default defineConfig({
   server: { port: 3000 },
   resolve: {
     alias: {
+      'element-pro-components/lib': resolve(__dirname, 'src'),
       'element-pro-components': resolve(__dirname, 'src'),
     },
   },