feat: ✨ 文档示例项目支持国际化切换 (#992)

Author: Moonofweisheng

.vscode/settings.json

@@ -23,23 +23,96 @@
   "prettier.singleQuote": true,
   //  #让函数(名)和后面的括号之间加个空格
   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
-  // #这个按用户自身习惯选择
-  "vetur.format.defaultFormatter.html": "js-beautify-html",
-  // #让vue中的js按编辑器自带的ts格式进行格式化
-  "vetur.format.defaultFormatter.js": "vscode-typescript",
-  "vetur.format.options.tabSize": 2,
-  "vetur.format.defaultFormatterOptions": {
-    "js-beautify-html": {
-      "wrap_line_length": 150,
-      "wrap_attributes": true,
-      "end_with_newline": true
-      // #vue组件中html代码格式化样式
-    }
-  },
   "typescript.tsdk": "node_modules/typescript/lib",
+  "i18n-ally.keystyle": "flat",
+  "i18n-ally.sourceLanguage": "zh-CN",
+  "i18n-ally.displayLanguage": "zh-CN",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.namespace": true,
+  "i18n-ally.keepFulfilled": true,
+  "i18n-ally.enabledParsers": [
+    "ts",
+    "js",
+    "json"
+  ],
+  "i18n-ally.enabledFrameworks": [
+    "vue",
+    "vue-sfc"
+  ],
+  "i18n-ally.extract.autoDetect": true,
+  "i18n-ally.refactor.templates": [
+    {
+      "source": "html-inline",
+      "template": "{{ $t('{key}') }}"  // 不带参数的情况
+    },
+    {
+      "source": "html-inline-with-params",  // 带参数的情况
+      "template": "{{ $t('{key}', {injectionParameters}) }}"
+    },
+    {
+      "source": "html-attribute",
+      "template": "$t('{key}')",
+      "include": [
+        "value",
+        "placeholder",
+        "label",
+        "title",
+        "desc",
+        "content", 
+        "text",
+        "message"
+      ]
+    },
+    {
+      "source": "js-string",
+      "template": "t('{key}')"
+    },
+    {
+      "source": "js-string-with-params",
+      "template": "t('{key}', {injectionParameters})"
+    },
+    {
+      "source": "js-template",
+      "template": "t('{key}')"
+    },
+    {
+      "source": "js-template-with-params",  // 给js-template添加带参数的模板
+      "template": "t('{key}', {injectionParameters})"
+    }
+  ],
+  "i18n-ally.keysInUse": [
+    "zh-CN",
+    "en-US"
+  ],
+  "common-intellisense.ui": [],
   "i18n-ally.localesPaths": [
-    "src/uni_modules/wot-design-uni/locale",
-    "src/uni_modules/wot-design-uni/locale/lang"
+    "src/locale"
   ],
-  "common-intellisense.ui": []
+  "i18n-ally.extract.ignored": [
+    "不如摸鱼去",
+    "二狗",
+    "<wd-icon name=\"${icon}\" size=\"22px\"></wd-icon>",
+    "top left",
+    "top right",
+    "bottom left",
+    "bottom left",
+    "bottom right",
+    "bottom right",
+    "\n            Wot Design Uni\n            ",
+    "\n            Wot Design Uni\n            ",
+    "@{{ packageConfig.version }}",
+    "span: 24",
+    "span: 12",
+    "span: 8",
+    "span: 4",
+    "span: 8 offset: 4",
+    "span: 6",
+    "芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。",
+    "`${item}`"
+  ],
+  "i18n-ally.extract.ignoredByFiles": {
+  },
+  "i18n-ally.translate.engines": [
+    "baidu"
+  ]
 }

README.md

@@ -3,6 +3,10 @@
 </p>
 <h1 align="center">Wot Design Uni</h1>
 
+<div align="center">
+<p>简体中文 | <a href="./README_en.md">English</a></p>
+</div>
+
 <p align="center">📱 一个基于vue3+Typescript构建，参照<a href="https://github.com/jd-ftf/wot-design-mini?tab=readme-ov-file">wot-design</a>打造的uni-app组件库</p>
 
 <p align="center">

README_en.md

@@ -0,0 +1,135 @@
+<p align="center">
+    <img alt="logo" src="https://wot-design-uni.cn/logo.png" width="200">
+</p>
+<h1 align="center">Wot Design Uni</h1>
+
+<div align="center">
+<p><a href="./README.md">简体中文</a> | English</p>
+</div>
+
+<p align="center">📱 A uni-app component library built with Vue3 + TypeScript, inspired by <a href="https://github.com/jd-ftf/wot-design-mini?tab=readme-ov-file">wot-design</a></p>
+
+<p align="center">
+
+<a href="https://github.com/Moonofweisheng/wot-design-uni">
+  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Moonofweisheng/wot-design-uni?logo=github&color=%234d80f0&link=https%3A%2F%2Fgithub.com%2FMoonofweisheng%2Fwot-design-uni">
+ </a>
+
+<a href='https://gitee.com/wot-design-uni/wot-design-uni/stargazers'>
+<img src='https://gitee.com/wot-design-uni/wot-design-uni/badge/star.svg?theme=gray' alt='star'>
+</a>
+
+<a href="https://www.npmjs.com/package/wot-design-uni">
+  <img alt="npm" src="https://img.shields.io/npm/v/wot-design-uni?logo=npm&color=%234d80f0&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
+</a>
+
+<a href="https://www.npmjs.com/package/wot-design-uni">
+  <img alt="npm" src="https://img.shields.io/npm/dw/wot-design-uni?logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
+</a>
+
+<a href="https://www.npmjs.com/package/wot-design-uni">
+  <img src="https://img.shields.io/npm/dt/wot-design-uni?style=flat-square">
+</a>
+
+<a href="https://github.com/Moonofweisheng/wot-design-uni">
+  <img alt="GitHub" src="https://img.shields.io/github/license/Moonofweisheng/wot-design-uni?logo=github">
+ </a>
+
+<a href="https://github.com/actions-cool/" target="_blank" referrerpolicy="no-referrer">
+  <img src="https://img.shields.io/badge/using-actions--cool-red?style=flat-square" alt="actions-cool" />
+</a>
+
+<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
+  <img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" />
+</a>
+
+</p>
+
+<p align="center">
+  🚀 <a href="https://wot-design-uni.cn">Documentation (Recommended)</a>&nbsp;
+  ✈️ <a href="https://wot-design-uni.pages.dev/">Documentation (Cloudflare)</a>&nbsp;
+  🔥 <a href="https://wot-design-uni.netlify.app/">Documentation (Netlify)</a>&nbsp;
+</p>
+
+## ✨ Features
+
+- 🎯 Multi-platform support: WeChat Mini Program, Alipay Mini Program, DingTalk Mini Program, H5, APP, etc.
+- 🚀 70+ high-quality components covering mainstream mobile scenarios.
+- 💪 Built with TypeScript, providing a robust component type system.
+- 🌍 Internationalization support with 15 built-in language packs.
+- 📖 Rich documentation and component examples.
+- 🎨 Theme customization through CSS variables.
+- 🍭 Dark mode support.
+
+## 📱 Preview
+
+Scan the QR code to view the demo. Note: Due to WeChat review restrictions, the current WeChat Mini Program demo may not be the latest version. You can clone the code locally for preview.
+
+<p style="display:flex;gap:24px">
+<img src="https://wot-design-uni.cn/wx.jpg" width="200" height="200"/>
+<img src="https://wot-design-uni.cn/alipay.png" width="200" height="200" />
+<img src="https://wot-design-uni.cn/h5.png" width="200" height="200" />
+<img src="https://wot-design-uni.cn/android.png" width="200" height="200" />
+</p>
+
+## Quick Start
+
+For detailed instructions, see [Quick Start](https://wot-design-uni.cn/guide/quick-use.html).
+
+## Links
+
+- [FAQ](https://wot-design-uni.cn/guide/common-problems.html)
+- [Changelog](https://wot-design-uni.cn/guide/changelog.html)
+- [Discussions](https://github.com/Moonofweisheng/wot-design-uni/discussions)
+- [QQ Group](https://wot-design-uni.cn/guide/join-group.html)
+
+## Showcase
+
+Check out some excellent [examples](https://wot-design-uni.cn/guide/cases.html) here!
+
+We welcome contributions of excellent demos and cases. Feel free to submit your case in this [issue](https://github.com/Moonofweisheng/wot-design-uni/issues/16).
+
+## Contributing
+
+Please read our [Contributing Guide](./.github/CONTRIBUTING.md) before making changes to the code.
+
+If you encounter any issues, please feel free to submit an [Issue](https://github.com/Moonofweisheng/wot-design-uni/issues). We also welcome your [Pull Requests](https://github.com/Moonofweisheng/wot-design-uni/pulls).
+
+## Contributors
+
+Thanks to all the [developers](https://github.com/Moonofweisheng/wot-design-uni/graphs/contributors) who have contributed to Wot Design Uni.
+
+<a href="https://github.com/Moonofweisheng/wot-design-uni/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=Moonofweisheng/wot-design-uni" />
+</a>
+
+## Donate
+
+Developing a UI component library is time-consuming work, especially when it needs to be adapted for multiple platforms. The Wot Design Uni team often works late into the night...
+
+If you find Wot Design Uni helpful in your development work, you can donate to support our development work. Any amount is welcome, even if it's just a cola.
+
+After donating, your nickname and message will be displayed on the [donor list](https://wot-design-uni.cn/reward/donor.html).
+
+### Afdian Donation
+
+<a href="https://afdian.com/a/weisheng233">https://afdian.com/a/weisheng233</a>
+
+### Scan to Donate
+
+<p>
+<img src="https://wot-design-uni.cn/weixinQrcode.jpg" width="200" height="200" style="margin-right:30px"/>
+<img src="https://wot-design-uni.cn/alipayQrcode.jpg" width="200" height="200" />
+</p>
+
+## Acknowledgments
+
+- [wot-design](https://github.com/jd-ftf/wot-design-mini) - Thanks to the wot-design team for their years of maintenance.
+- [uni-helper](https://github.com/uni-helper) - Thanks to the uni-helper team for providing uni-app tool libraries.
+- [Donors](https://wot-design-uni.cn/reward/donor.html) - Thanks to all donors who help Wot Design Uni grow better.
+
+## License
+
+This project is licensed under the [MIT License](https://en.wikipedia.org/wiki/MIT_License). Feel free to enjoy and participate in open source.
+
+[![Star History Chart](https://api.star-history.com/svg?repos=Moonofweisheng/wot-design-uni&type=Date)](https://star-history.com/#Moonofweisheng/wot-design-uni&Date)

docs/.vitepress/config.mts

@@ -1,7 +1,7 @@
 /*
  * @Author: weisheng
  * @Date: 2023-07-27 10:26:09
- * @LastEditTime: 2025-03-25 16:27:19
+ * @LastEditTime: 2025-03-29 15:02:23
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: /wot-design-uni/docs/.vitepress/config.mts
@@ -10,8 +10,9 @@
 import { defineConfig } from 'vitepress';
 import viteCompression from 'vite-plugin-compression'
 import { fileURLToPath, URL } from 'node:url'
-
 import { MarkdownTransform } from './plugins/markdown-transform'
+import enUS from './locales/en-US'
+import zhCN from './locales/zh-CN'
 
 
 export default defineConfig({
@@ -64,6 +65,18 @@ export default defineConfig({
   },
   title: `Wot Design Uni`,
   description: '一个参照wot-design打造的uni-app组件库',
+  locales: {
+    root: {
+      label: '简体中文',
+      lang: 'zh-CN',
+      ...zhCN
+    },
+    'en-US': {
+      label: 'English', 
+      lang: 'en-US',
+      ...enUS,
+    }
+  },
   head: [
     ['link', { rel: 'icon', href: '/favicon.ico' }],
     ['link', { rel: 'stylesheet', href: '/petercatai/assistant.min.css' }],