From 6fce5acab1e1f11033653826c0a1393ab66a135d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sat, 22 Oct 2022 23:21:41 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(i18n):=20=E9=87=8D=E6=9E=84=20i18n?=
 =?UTF-8?q?=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../datePicker/components/DatePanel.vue       | 30 ++++++++---------
 .../datePicker/components/MonthPanel.vue      | 25 +++++++--------
 .../components/components/DateContent.vue     | 14 ++++----
 package/component/src/index.ts                |  4 +--
 .../src/document/zh-CN/guide/locale.md        | 32 +++++++++++++++----
 .../document-component/src/language/zh_CN.ts  |  3 +-
 .../document-component/src/layouts/Layout.vue |  5 +--
 7 files changed, 65 insertions(+), 48 deletions(-)

diff --git a/package/component/src/component/datePicker/components/DatePanel.vue b/package/component/src/component/datePicker/components/DatePanel.vue
index 17735169..3f79e44e 100644
--- a/package/component/src/component/datePicker/components/DatePanel.vue
+++ b/package/component/src/component/datePicker/components/DatePanel.vue
@@ -16,9 +16,9 @@
           <span @click="datePicker.showPanel.value = 'year'"
             >{{ datePicker.currentYear.value }} {{ t("datePicker.year") }}</span
           >
-          <span @click="datePicker.showPanel.value = 'month'"
-            > {{ MONTH_NAME[datePicker.currentMonth.value] }} </span
-          >
+          <span @click="datePicker.showPanel.value = 'month'">
+            {{ MONTH_NAME[datePicker.currentMonth.value] }}
+          </span>
         </div>
         <i
           class="layui-icon laydate-icon laydate-next-m"
@@ -74,18 +74,18 @@ const datePicker: provideType = inject("datePicker") as provideType;
 const dateList = ref<any>([]);
 
 const MONTH_NAME = computed(() => [
-  t('datePicker.january'),
-  t('datePicker.february'),
-  t('datePicker.march'),
-  t('datePicker.april'),
-  t('datePicker.may'),
-  t('datePicker.june'),
-  t('datePicker.july'),
-  t('datePicker.august'),
-  t('datePicker.september'),
-  t('datePicker.october'),
-  t('datePicker.november'),
-  t('datePicker.december'),
+  t("datePicker.january"),
+  t("datePicker.february"),
+  t("datePicker.march"),
+  t("datePicker.april"),
+  t("datePicker.may"),
+  t("datePicker.june"),
+  t("datePicker.july"),
+  t("datePicker.august"),
+  t("datePicker.september"),
+  t("datePicker.october"),
+  t("datePicker.november"),
+  t("datePicker.december"),
 ]);
 
 // 监听年月, 刷新日期
diff --git a/package/component/src/component/datePicker/components/MonthPanel.vue b/package/component/src/component/datePicker/components/MonthPanel.vue
index 1eb18e97..81be8417 100644
--- a/package/component/src/component/datePicker/components/MonthPanel.vue
+++ b/package/component/src/component/datePicker/components/MonthPanel.vue
@@ -58,21 +58,20 @@ const Month = ref(props.modelValue);
 const { t } = useI18n();
 
 const MONTH_NAME = computed(() => [
-  t('datePicker.january'),
-  t('datePicker.february'),
-  t('datePicker.march'),
-  t('datePicker.april'),
-  t('datePicker.may'),
-  t('datePicker.june'),
-  t('datePicker.july'),
-  t('datePicker.august'),
-  t('datePicker.september'),
-  t('datePicker.october'),
-  t('datePicker.november'),
-  t('datePicker.december'),
+  t("datePicker.january"),
+  t("datePicker.february"),
+  t("datePicker.march"),
+  t("datePicker.april"),
+  t("datePicker.may"),
+  t("datePicker.june"),
+  t("datePicker.july"),
+  t("datePicker.august"),
+  t("datePicker.september"),
+  t("datePicker.october"),
+  t("datePicker.november"),
+  t("datePicker.december"),
 ]);
 
-
 // 点击月份
 const handleMonthClick = (item: any) => {
   Month.value = MONTH_NAME.value.indexOf(item);
diff --git a/package/component/src/component/datePicker/components/components/DateContent.vue b/package/component/src/component/datePicker/components/components/DateContent.vue
index 458bcbdf..ec63269d 100644
--- a/package/component/src/component/datePicker/components/components/DateContent.vue
+++ b/package/component/src/component/datePicker/components/components/DateContent.vue
@@ -68,13 +68,13 @@ const props = withDefaults(defineProps<DateContentProps>(), {
 const { t } = useI18n();
 
 const WEEK_NAME = computed(() => [
-  t('datePicker.sunday'),
-  t('datePicker.monday'),
-  t('datePicker.tuesday'),
-  t('datePicker.wednesday'),
-  t('datePicker.thursday'),
-  t('datePicker.friday'),
-  t('datePicker.saturday') 
+  t("datePicker.sunday"),
+  t("datePicker.monday"),
+  t("datePicker.tuesday"),
+  t("datePicker.wednesday"),
+  t("datePicker.thursday"),
+  t("datePicker.friday"),
+  t("datePicker.saturday"),
 ]);
 
 const datePicker: provideType = inject("datePicker") as provideType;
diff --git a/package/component/src/index.ts b/package/component/src/index.ts
index 97b4475d..ab1c0946 100644
--- a/package/component/src/index.ts
+++ b/package/component/src/index.ts
@@ -5,7 +5,7 @@ import "@layui/layer-vue/lib/index.css";
 import "@layui/icons-vue/lib/index.css";
 import { layer } from "@layui/layer-vue";
 import layerInstall from "@layui/layer-vue";
-import i18n from "./language";
+import i18n, { useI18n } from "./language";
 
 import LayBacktop from "./component/backTop/index";
 import LayAvatar from "./component/avatar/index";
@@ -279,6 +279,6 @@ export {
   install,
 };
 
-export { layer };
+export { layer, useI18n };
 
 export default { install };
diff --git a/package/document-component/src/document/zh-CN/guide/locale.md b/package/document-component/src/document/zh-CN/guide/locale.md
index 83be4610..d743e14e 100644
--- a/package/document-component/src/document/zh-CN/guide/locale.md
+++ b/package/document-component/src/document/zh-CN/guide/locale.md
@@ -11,28 +11,46 @@
     </lay-config-provider>
 </template>
 ```
-::: describe layui-vue 内部会维护一个 vue-i18n 实例, 你无需再去创建，直接使用 useI18n() 获取即可
+
+::: describe 在 layui-vue 内部维护了一个 i18n 实例, 你可以通过 useI18n() 方法来使用它。
 :::
 
-::: describe 你可以使用 locales 属性来扩展语言包, 用户自定义语言包优先级大于组件库内部维护的语言包, 即你可以扩展亦可以覆盖。
+::: describe 你可以使用 locales 属性来扩展语言包, 自定义语言优先级大于组件库内部维护的语言, 即可扩展亦可覆盖。
 :::
 
-
 ```vue
 <template>
     <lay-config-provider locale="zh_CN" :locales="locales">
-        <App />
+        {{ t('hello') }}
     </lay-config-provider>
 </template>
 
 <script setup>
+import { useI18n } from "@layui/layui-vue";
+
+const { t } = useI18n();
+
 const locales = [
     'zh_CN': {
-        message: '你好, layui-vue'
+        hello: '你好',
+        title: '标题'
     },
     'en_US': {
-        message: 'hello, layui-vue'
+        hello: 'hello',
+        title: 'title'
     }
 ];
 </script>
-```
\ No newline at end of file
+```
+
+::: describe 目前支持的语言列表。
+:::
+
+::: table
+
+| 语言        | 内容                |
+|-------------|-------------------------|
+| zh_CN  | https://gitee.com/layui/layui-vue/blob/master/package/component/src/language/locales/zh_CN.ts |
+| en_US  | https://gitee.com/layui/layui-vue/blob/master/package/component/src/language/locales/en_US.ts |
+
+:::
\ No newline at end of file
diff --git a/package/document-component/src/language/zh_CN.ts b/package/document-component/src/language/zh_CN.ts
index be62dfdf..6fa68741 100644
--- a/package/document-component/src/language/zh_CN.ts
+++ b/package/document-component/src/language/zh_CN.ts
@@ -7,8 +7,7 @@ export default {
     material: "物料",
   },
   home: {
-    description:
-      "layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.",
+    description: "layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.",
     version: "当前版本",
     changelog: "更新日志",
     download: "下载量",
diff --git a/package/document-component/src/layouts/Layout.vue b/package/document-component/src/layouts/Layout.vue
index 2507ea37..628c8036 100644
--- a/package/document-component/src/layouts/Layout.vue
+++ b/package/document-component/src/layouts/Layout.vue
@@ -232,15 +232,16 @@
 <script>
 import { provide, ref, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import { useAppStore } from "../store/app";
+import { useI18n }  from "../../../component/src/index";
 import menu from "../view/utils/menus";
-import { useI18n } from "vue-i18n";
 import zh_CN from "../language/zh_CN.ts";
 import en_US from "../language/en_US.ts";
-import { useAppStore } from "../store/app";
 import config from "../../../component/package.json";
 
 export default {
   setup() {
+
     const { t } = useI18n();
     const route = useRoute();
     const router = useRouter();