wip(docs): 完善 i18n 文档

docs/i18n/detail/options.md

@@ -1,8 +1,9 @@
-```js
+<pre class="layui-code" lay-options="{style: 'height: 525px;', layout: ['code'], tools: []}">
+  <textarea>
 i18n.set({
   locale: 'zh-CN', // 设置语言环境
   messages: { // 语言包
-    'zh-CN': { // 简体中文（默认）
+    'zh-CN': { // 简体中文语言包（内置）
       code: {
         copy: '复制代码',
         copied: '已复制',
@@ -170,18 +171,8 @@ i18n.set({
           }
         }
       }
-    },
-    'en': { // 通用英语
-      code: {
-        copy: 'Copy Code',
-        copied: 'Copied',
-        // ……
-      },
-      // ……
-    },
-    'fr': {}, // 通用法语
-    'zh-HK': {}, // 繁体中文
-    // …… // 更多语言代码
+    }
   }
 });
-```
+  </textarea>
+</pre>

docs/i18n/index.md

@@ -5,13 +5,13 @@ toc: true
 
 # 国际化 <sup>2.12+</sup>
 
-> `i18n` 是 2.12 版本新增的国际化模块，用于实现各组件提示文本的多语言支持。
+> `i18n` 是 2.12 版本新增的国际化模块，用于实现各组件消息文本的多语言支持。
 
 <h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
 
 <div class="ws-docs-showcase"></div>
 
-<pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 560px;', layout: ['preview', 'code'], tools: ['full','window']}">
+<pre class="layui-code" lay-options="{preview: 'iframe', text: {preview: '完整演示'}, style: 'height: 560px;', layout: ['preview', 'code'], tools: ['full','window']}">
   <textarea>
 {{- d.include("/i18n/detail/demo.md") }}
   </textarea>
@@ -25,7 +25,7 @@ toc: true
 | [i18n.set(options)](#set) | 设置语言包及默认语言。|
 | [i18n.$t(options)](#translation) | 从国际化消息中获取翻译后的内容。 |
 
-<h3 id="set" lay-toc="{level: 2}">国际化配置</h3>
+<h3 id="set" lay-toc="{level: 2}">配置方式</h3>
 
 i18n 支持两种配置方式，您可以根据实际场景选择任一方式。
 
@@ -33,19 +33,36 @@ i18n 支持两种配置方式，您可以根据实际场景选择任一方式。
 
 `i18n.set(options)`
 
-- 参数 `options` : 基础属性选项。[#详见选项](#options)
+- 参数 `options` : 基础属性选项。[#详见语言包选项](#options)
+
+```js
+layui.use(function() {
+  var i18n = layui.i18n;
+
+  // 设置语言
+  i18n.set({
+    locale: 'zh-CN', // 当前语言环境。zh-CN 为内置简体中文语言包
+    messages: { // 扩展其他语言包
+      'en': {},
+      'zh-HK': {},
+    }
+  });
+});
+```
+
+🔔 请注意：如果您的页面有用到 Layui 组件的自动渲染（如 table 模板配置渲染方式），因为执行顺序的问题，组件在自动渲染时可能无法读取到 `i18n.set()` 的配置信息，此时建议采用下述 `LAYUI_GLOBAL.i18n` 全局配置。
 
 #### 2. 通过 `LAYUI_GLOBAL.i18n` 全局配置
 
-该方式通常用于 Layui 内置组件的自动渲染时的场景，需放置在 `layui.js` 导入之前，以确保国际化配置在组件渲染之前完成。
+由于 i18n 配置与组件渲染存在执行顺序问题，为了确保 i18n 配置始终在组件渲染之前生效，更推荐采用该全局配置方式。
 
 ```html
 <script>
   window.LAYUI_GLOBAL = {
     // 选项同 i18n.set(options)
     i18n: {
-      locale: 'zh-CN',
-      messages: {
+      locale: 'zh-CN', // 当前语言环境
+      messages: { // 扩展其他语言包
         'en': {},
         'zh-HK': {},
       }
@@ -55,13 +72,38 @@ i18n 支持两种配置方式，您可以根据实际场景选择任一方式。
 <script src="/layui/layui.js"></script>
 ```
 
-<h3 id="options" lay-toc="{level: 2}">选项</h3>
+<h3 id="options" lay-toc="{level: 2}">语言包选项</h3>
+
+i18n 默认采用简体中文（`zh-CN`）语言环境，以下为各组件消息文本对应的选项：
 
 <div>
 {{- d.include("/i18n/detail/options.md") }}
 </div>
 
+
+您可以基于上述选项，扩展更多语言包，如：
+
+```js
+i18n.set({
+  locale: 'en', // 当前语言环境
+  messages: { // 扩展更多语言包
+    'en': { // 通用英语
+      code: {
+        copy: 'Copy Code',
+        copied: 'Copied',
+        // ……
+      },
+      // ……
+    },
+    'fr': {}, // 通用法语
+    'zh-HK': {}, // 繁体中文
+    // …… // 更多语言
+  }
+});
+```
+
 ## 💖 心语
 
+待写