📝(i18n): 重构 i18n 文档

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"),
 ]);
 
 // 监听年月, 刷新日期

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);

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;

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 };

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>
-```
+```
+
+::: 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 |
+
+:::

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: "下载量",

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();