feat: ✨ 支持国际化 (#168)

* feat: ✨ 支持国际化 * feat: ✨ 支持国际化 * fix: 🐛 支持国际化 * docs: ✏️ 文档中增加国际化的介绍 * feat: ✨ 支持越南语 * docs: ✏️ 文档中增加支持国际化的版本 * refactor: ♻️ 调整防抖函数的实现 * docs: ✏️ 文档中增加vite.config.ts国际化相关的配置 * docs: ✏️ 增加支持越南文 --------- Co-authored-by: xuqingkai <[email protected]>
Moonofweisheng · Jan 28, 2024 · ce9f192 · ce9f192
1 parent 3846590
commit ce9f192
Show file tree

Hide file tree

Showing 47 changed files with 988 additions and 445 deletions.
diff --git a/README.md b/README.md
@@ -48,7 +48,7 @@
 - 🚀 支持 APP、H5、微信小程序 等平台.
 - 🚀 60+ 个高质量组件，覆盖移动端主流场景.
 - 💪 使用 Typescript 构建，提供良好的组件类型系统.
-- 💪 采用 Vue3 最新特性，提升组件性能.
+- 🌍 支持国际化，内置 6 种语言包.
 - 📖 提供丰富的文档和组件示例.
 - 🎨 支持修改 CSS 变量实现主题定制.
 - 🍭 支持暗黑模式

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,17 +1,17 @@
 /*
  * @Author: weisheng
  * @Date: 2023-07-27 10:26:09
- * @LastEditTime: 2024-01-06 22:20:13
+ * @LastEditTime: 2024-01-26 13:32:22
  * @LastEditors: weisheng
  * @Description: 
- * @FilePath: /wot-design-uni/docs/.vitepress/config.ts
+ * @FilePath: \wot-design-uni\docs\.vitepress\config.ts
  * 记得注释
  */
 import { defineConfig } from 'vitepress';
 
 export default defineConfig({
   title: `Wot Design Uni`,
-  description: '一个参照Wot-design打造的uni-app组件库',
+  description: '一个参照wot-design打造的uni-app组件库',
   head: [
     ['link', { rel: 'icon', href: '/favicon.ico' }],
     ['script', {}, `
@@ -69,15 +69,17 @@ export default defineConfig({
           {
             text: '字体',
             link: '/guide/typography',
+          }, {
+            text: '常见问题',
+            link: '/guide/common-problems',
           },
           {
+            text: '国际化',
+            link: '/guide/locale',
+          }, {
             text: '更新日志',
             link: '/guide/changelog',
           },
-          {
-            text: '常见问题',
-            link: '/guide/common-problems',
-          }
         ]
       },
       {
@@ -133,13 +135,17 @@ export default defineConfig({
           link: '/guide/typography',
         },
         {
-          text: '更新日志',
-          link: '/guide/changelog',
+          text: '国际化',
+          link: '/guide/locale',
         },
         {
           text: '常见问题',
           link: '/guide/common-problems',
-        }
+        },
+        {
+          text: '更新日志',
+          link: '/guide/changelog',
+        },
       ],
       '/reward/': [
         {
@@ -151,7 +157,7 @@ export default defineConfig({
           link: '/reward/donor',
         },
       ],
-    
+
       '/component/': [
         {
           text: '基础',
@@ -184,7 +190,7 @@ export default defineConfig({
           ]
         },
         {
-    
+
           text: "导航",
           items: [{
             link: "/component/pagination",
@@ -209,7 +215,7 @@ export default defineConfig({
             text: "Sidebar 侧边栏"
           }]
         }, {
-    
+
           text: "数据输入",
           items: [{
             link: "/component/calendar",
@@ -324,7 +330,7 @@ export default defineConfig({
             text: "NumberKeyboard 数字键盘"
           }]
         }, {
-    
+
           text: "数据展示",
           items: [{
             link: "/component/badge",
@@ -384,7 +390,7 @@ export default defineConfig({
         }
       ]
     }
-    
+
   },
 
 })
diff --git a/docs/component/picker.md b/docs/component/picker.md
@@ -87,7 +87,7 @@ const columns = ref([
 
 传入 `column-change` 属性，其类型为 `function`，接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源，当修改完成后需要执行 `resolve()` 告知组件修改完成以继续执行，如果 `column-change` 包含异步操作，也可以使组件按照异步顺序进行执行。
 
-> resolve 参数为 1.4.0 添加，每次修改完后都需要调用 resolve() 通知组件。
+> 每次修改完后都需要调用 resolve() 通知组件。
 
 ```html
 <wd-picker

diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md
@@ -23,7 +23,7 @@
 - 🚀 支持 APP、H5、微信小程序 等平台.
 - 🚀 60+ 个高质量组件，覆盖移动端主流场景.
 - 💪 使用 Typescript 构建，提供良好的组件类型系统.
-- 💪 采用 Vue3 最新特性，提升组件性能.
+- 🌍 支持国际化，内置 6 种语言包.
 - 📖 提供丰富的文档和组件示例.
 - 🎨 支持修改 CSS 变量实现主题定制.
 - 🍭 支持暗黑模式

diff --git a/docs/guide/locale.md b/docs/guide/locale.md
@@ -0,0 +1,67 @@
+# 国际化<el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">0.2.20</el-tag>
+
+Wot Design Uni 默认使用中文语言，同时支持多语言切换，如果你希望使用其他语言，你可以参考下面的方案。
+
+:::warning 注意点
+目前组件库发布到 npm 上的包是未经编译的`vue`与`ts`，而 Vite 会将[预构建](https://cn.vitejs.dev/guide/dep-pre-bundling.html)的依赖项缓存到 `node_modules/.vite`，组件库的国际化的实现是基于`reactive`实现的数据共享，在`dev`阶段就会出现页面使用预构建产物中的国际化数据，而组件库使用组件库内部的国际化数据，所以在非`uni_modules`模式引入时，需要在`vite.config.ts`中增加以下配置:
+
+```ts
+import { defineConfig } from 'vite'
+import uni from '@dcloudio/vite-plugin-uni'
+
+export default defineConfig({
+  ...
+  optimizeDeps: {
+    exclude: process.env.UNI_PLATFORM === 'h5' && process.env.NODE_ENV === 'development' ? ['wot-design-uni'] : []
+  }
+  ...
+})
+
+```
+
+使用[optimizeDeps.exclude](https://cn.vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude)在预构建中强制排除`wot-design-uni`模块，在`uni_modules`模式下，不需要做任何处理。
+
+:::
+
+## 使用其他语言
+
+我们通过 **Locale** 组件实现多语言支持，使用 **Locale.use** 方法可以切换当前使用的语言。
+
+```typescript
+import { Locale } from 'wot-design-uni'
+// 引入英文语言包
+import enUS from 'wot-design-uni/locale/lang/en-US'
+
+Locale.use('en-US', enUS)
+```
+
+## 覆盖语言包
+
+通过 **Locale.add** 方法可以实现文案的修改和扩展，示例如下：
+
+```typescript
+import { Locale } from 'wot-design-uni'
+
+const messages = {
+  'zh-CN': {
+    calendar: {
+      title: '请选择日期' // 将'选择日期'修改为'请选择日期'
+    }
+  }
+}
+
+Locale.add(messages)
+```
+
+## 支持的语言
+
+| 语言             | 文件名    | 版本      |
+| ---------------- | --------- | --------- |
+| 简体中文         | zh-CN     | `v0.2.20` |
+| 繁体中文（台湾） | zh-TW     | `v0.2.20` |
+| 繁体中文（香港） | zh-HK     | `v0.2.20` |
+| 英文             | en-US     | `v0.2.20` |
+| 泰文             | th-TH     | `v0.2.20` |
+| 越南文             | vi-VN    | `v0.2.20` |
+
+如果你需要使用其他的语言，欢迎贡献 [PR](https://github.com/Moonofweisheng/wot-design-uni/pulls)，只需在[这里](https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/locale/lang)添加一个语言配置文件即可。
diff --git a/docs/index.md b/docs/index.md
@@ -2,12 +2,12 @@
 layout: home
 
 title: Wot Design Uni
-titleTemplate: 一个参照Wot-design打造的uni-app组件库
+titleTemplate: 基于Vue3+TS开发的uni-app组件库
 
 hero:
   name: Wot Design Uni
   text:
-  tagline: 一个参照Wot-design打造的uni-app组件库
+  tagline: 基于Vue3+TS开发的uni-app组件库
   image:
     src: /wot-design.png
     alt: Wot Design
@@ -30,17 +30,17 @@ features:
     title: 60+ 组件
     details: 超过 60 个高质量组件，覆盖移动端主流场景。
   - icon: 💪
-    title: 支持 TypeScript
+    title: TypeScript 支持
     details: 使用 Typescript 构建，提供良好的组件类型系统。
-  - icon: 💪
-    title: 支持 Vue3
-    details: 采用 Vue3 最新特性，提升组件性能。
+  - icon: 🌍
+    title: 支持国际化
+    details: 支持国际化，内置 6 种语言包。
   - icon: 📖
     title: 提供丰富的文档和组件示例
     details: 文档和组件示例为开发者提供稳定的后勤保障。
   - icon: 🍭
     title: 支持暗黑模式和主题定制
-    details: 可以定制scss变量以及组件的样式自定义。
+    details: 可以定制css变量以及组件的样式自定义。
 
 footer: false
 ---
diff --git a/src/main.ts b/src/main.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: weisheng
  * @Date: 2023-03-09 19:23:03
- * @LastEditTime: 2023-08-22 23:02:46
+ * @LastEditTime: 2024-01-26 14:08:43
  * @LastEditors: weisheng
  * @Description:
  * @FilePath: \wot-design-uni\src\main.ts