feat: element-plus app (#32)

* chore: init project

* chore: install element-plus

* chore: locale config

* fix: eslint error

* chore: merge from main

* fix: lint

* chore: finish todo

* chore: update comments

* chore: update

* fix: lint error

* chore: add unplugin-element-plus

* chore: add useElementPlusDesignTokens

* chore: configure some color

apps/web-ele/src/locales/README.md

@@ -0,0 +1,3 @@
+# locale
+
+每个app使用的国际化可能不同，这里用于扩展国际化的功能，例如扩展 dayjs、antd组件库的多语言切换，以及app本身的国际化文件。

apps/web-ele/src/locales/index.ts

@@ -0,0 +1,91 @@
+import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
+
+import type { App } from 'vue';
+import { ref } from 'vue';
+
+import { $t, setupI18n as coreSetup, loadLocalesMap } from '@vben/locales';
+import { preferences } from '@vben/preferences';
+
+import dayjs from 'dayjs';
+import { Language } from 'element-plus/es/locale';
+import defaultLocale from 'element-plus/es/locale/lang/zh-cn';
+
+const elementLocale = ref<Language>(defaultLocale);
+
+const modules = import.meta.glob('./langs/*.json');
+
+const localesMap = loadLocalesMap(modules);
+
+/**
+ * 加载应用特有的语言包
+ * 这里也可以改造为从服务端获取翻译数据
+ * @param lang
+ */
+async function loadMessages(lang: SupportedLanguagesType) {
+  const [appLocaleMessages] = await Promise.all([
+    localesMap[lang](),
+    loadThirdPartyMessage(lang),
+  ]);
+  return appLocaleMessages.default;
+}
+
+/**
+ * 加载第三方组件库的语言包
+ * @param lang
+ */
+async function loadThirdPartyMessage(lang: SupportedLanguagesType) {
+  await Promise.all([loadElementLocale(lang), loadDayjsLocale(lang)]);
+}
+
+/**
+ * 加载dayjs的语言包
+ * @param lang
+ */
+async function loadDayjsLocale(lang: SupportedLanguagesType) {
+  let locale;
+  switch (lang) {
+    case 'zh-CN': {
+      locale = await import('dayjs/locale/zh-cn');
+      break;
+    }
+    case 'en-US': {
+      locale = await import('dayjs/locale/en');
+      break;
+    }
+    // 默认使用英语
+    default: {
+      locale = await import('dayjs/locale/en');
+    }
+  }
+  dayjs.locale(locale);
+}
+
+/**
+ * 加载element-plus的语言包
+ * @param lang
+ */
+async function loadElementLocale(lang: SupportedLanguagesType) {
+  switch (lang) {
+    case 'zh-CN': {
+      elementLocale.value = defaultLocale;
+      break;
+    }
+    case 'en-US': {
+      elementLocale.value = (await import(
+        'element-plus/es/locale/lang/en'
+      )) as unknown as Language;
+      break;
+    }
+  }
+}
+
+async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
+  await coreSetup(app, {
+    defaultLocale: preferences.app.locale,
+    loadMessages,
+    missingWarn: !import.meta.env.PROD,
+    ...options,
+  });
+}
+
+export { $t, elementLocale, loadMessages, setupI18n };

apps/web-ele/src/locales/langs/en-US.json

@@ -0,0 +1,8 @@
+{
+  "page": {
+    "demos": {
+      "title": "Demos",
+      "element-plus": "Element Plus"
+    }
+  }
+}

apps/web-ele/src/locales/langs/zh-CN.json

@@ -0,0 +1,8 @@
+{
+  "page": {
+    "demos": {
+      "title": "演示",
+      "element-plus": "Element Plus"
+    }
+  }
+}