feat: core components support simple locale switching (#4273)

* feat: core components support simple locale switching * fix: test error * fix: test error
vbenjs · Aug 29, 2024 · a77cc00 · a77cc00
1 parent 98da067
commit a77cc00
Show file tree

Hide file tree

Showing 18 changed files with 78 additions and 32 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -11,15 +11,13 @@
  "@vben-core/shadcn-ui": "workspace:*",
  "@vben/common-ui": "workspace:*",
  "@vben/styles": "workspace:*",
- "@vueuse/core": "^11.0.3",
  "lucide-vue-next": "^0.436.0",
  "markdown-it": "^14.1.0",
  "medium-zoom": "^1.1.0",
  "radix-vue": "^1.9.5"
  },
  "devDependencies": {
  "@nolebase/vitepress-plugin-git-changelog": "^2.4.0",
- "@types/markdown-it": "^14.1.2",
  "@vben/vite-config": "workspace:*",
  "@vite-pwa/vitepress": "^0.5.0",
  "vitepress": "^1.3.4",

diff --git a/docs/src/en/guide/in-depth/theme.md b/docs/src/en/guide/in-depth/theme.md
@@ -53,7 +53,7 @@ You can check the list below to understand all the available variables.
 
  /* Theme Colors */
 
- --primary: 211 91% 39%;
+ --primary: 231 98% 65%;
  --primary-foreground: 0 0% 98%;
 
  /* Used for destructive actions such as <Button variant="destructive"> */
@@ -351,7 +351,7 @@ type BuiltinThemeType =
 
  /* Theme Colors */
 
- --primary: 211 91% 39%;
+ --primary: 231 98% 65%;
  --primary-foreground: 0 0% 98%;
 
  /* Used for destructive actions such as <Button variant="destructive"> */

diff --git a/docs/src/guide/in-depth/theme.md b/docs/src/guide/in-depth/theme.md
@@ -53,7 +53,7 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
 
  /* 主题颜色 */
 
- --primary: 211 91% 39%;
+ --primary: 231 98% 65%;
  --primary-foreground: 0 0% 98%;
 
  /* Used for destructive actions such as <Button variant="destructive"> */
@@ -351,7 +351,7 @@ type BuiltinThemeType =
 
  /* 主题颜色 */
 
- --primary: 211 91% 39%;
+ --primary: 231 98% 65%;
  --primary-foreground: 0 0% 98%;
 
  /* Used for destructive actions such as <Button variant="destructive"> */

diff --git a/packages/@core/base/design/src/design-tokens/default/index.css b/packages/@core/base/design/src/design-tokens/default/index.css
@@ -28,7 +28,7 @@
 
  /* 主题颜色 */
 
- --primary: 211 91% 39%;
+ --primary: 231 98% 65%;
  --primary-foreground: 0 0% 98%;
 
  /* Used for destructive actions such as <Button variant="destructive"> */

diff --git a/packages/@core/composables/src/index.ts b/packages/@core/composables/src/index.ts
@@ -2,6 +2,7 @@ export * from './use-content-style';
 export * from './use-is-mobile';
 export * from './use-namespace';
 export * from './use-priority-value';
+export * from './use-simple-locale';
 export * from './use-sortable';
 export {
  useEmitAsProps,

diff --git a/packages/@core/composables/src/use-simple-locale/README.md b/packages/@core/composables/src/use-simple-locale/README.md
@@ -0,0 +1,3 @@
+# Simple i18n
+
+Simple i18 implementation
diff --git a/packages/@core/composables/src/use-simple-locale/index.ts b/packages/@core/composables/src/use-simple-locale/index.ts
@@ -0,0 +1,25 @@
+import { computed, ref } from 'vue';
+
+import { createSharedComposable } from '@vueuse/core';
+
+import { getMessages, type Locale } from './messages';
+
+export const useSimpleLocale = createSharedComposable(() => {
+ const currentLocale = ref<Locale>('zh-CN');
+
+ const setSimpleLocale = (locale: Locale) => {
+ currentLocale.value = locale;
+ };
+
+ const $t = computed(() => {
+ const localeMessages = getMessages(currentLocale.value);
+ return (key: string) => {
+ return localeMessages[key] || key;
+ };
+ });
+ return {
+ $t,
+ currentLocale,
+ setSimpleLocale,
+ };
+});
diff --git a/packages/@core/composables/src/use-simple-locale/messages.ts b/packages/@core/composables/src/use-simple-locale/messages.ts
@@ -0,0 +1,14 @@
+export type Locale = 'en-US' | 'zh-CN';
+
+export const messages: Record<Locale, Record<string, string>> = {
+ 'en-US': {
+ cancel: 'Cancel',
+ confirm: 'Confirm',
+ },
+ 'zh-CN': {
+ cancel: '取消',
+ confirm: '确认',
+ },
+};
+
+export const getMessages = (locale: Locale) => messages[locale];
diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts b/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
@@ -44,8 +44,8 @@ describe('drawerApi', () => {
 
  it('should initialize with default state', () => {
  expect(drawerState.isOpen).toBe(false);
- expect(drawerState.cancelText).toBe('取消');
- expect(drawerState.confirmText).toBe('确定');
+ expect(drawerState.cancelText).toBe(undefined);
+ expect(drawerState.confirmText).toBe(undefined);
  });
 
  it('should open the drawer', () => {

diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
@@ -28,12 +28,10 @@ export class DrawerApi {
  } = options;
 
  const defaultState: DrawerState = {
- cancelText: '取消',
  closable: true,
  closeOnClickModal: true,
  closeOnPressEscape: true,
  confirmLoading: false,
- confirmText: '确定',
  footer: true,
  isOpen: false,
  loading: false,

diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -3,7 +3,11 @@ import type { DrawerProps, ExtendedDrawerApi } from './drawer';
 
 import { ref, watch } from 'vue';
 
-import { useIsMobile, usePriorityValue } from '@vben-core/composables';
+import {
+ useIsMobile,
+ usePriorityValue,
+ useSimpleLocale,
+} from '@vben-core/composables';
 import { Info, X } from '@vben-core/icons';
 import {
  Sheet,
@@ -34,7 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const wrapperRef = ref<HTMLElement>();
-
+const { $t } = useSimpleLocale();
 const { isMobile } = useIsMobile();
 const state = props.drawerApi?.useStore?.();
 
@@ -165,15 +169,15 @@ function pointerDownOutside(e: Event) {
  <slot name="footer">
  <VbenButton variant="ghost" @click="() => drawerApi?.onCancel()">
  <slot name="cancelText">
- {{ cancelText }}
+ {{ cancelText || $t('cancel') }}
  </slot>
  </VbenButton>
  <VbenButton
  :loading="confirmLoading"
  @click="() => drawerApi?.onConfirm()"
  >
  <slot name="confirmText">
- {{ confirmText }}
+ {{ confirmText || $t('confirm') }}
  </slot>
  </VbenButton>
  </slot>

diff --git a/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts b/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
@@ -44,8 +44,8 @@ describe('modalApi', () => {
 
  it('should initialize with default state', () => {
  expect(modalState.isOpen).toBe(false);
- expect(modalState.cancelText).toBe('取消');
- expect(modalState.confirmText).toBe('确定');
+ expect(modalState.cancelText).toBe(undefined);
+ expect(modalState.confirmText).toBe(undefined);
  });
 
  it('should open the modal', () => {

diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@@ -28,12 +28,10 @@ export class ModalApi {
  } = options;
 
  const defaultState: ModalState = {
- cancelText: '取消',
  centered: false,
  closeOnClickModal: true,
  closeOnPressEscape: true,
  confirmLoading: false,
- confirmText: '确定',
  draggable: false,
  footer: true,
  fullscreen: false,

diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -3,7 +3,11 @@ import type { ExtendedModalApi, ModalProps } from './modal';
 
 import { computed, nextTick, ref, watch } from 'vue';
 
-import { useIsMobile, usePriorityValue } from '@vben-core/composables';
+import {
+ useIsMobile,
+ usePriorityValue,
+ useSimpleLocale,
+} from '@vben-core/composables';
 import { Expand, Info, Shrink } from '@vben-core/icons';
 import {
  Dialog,
@@ -44,6 +48,7 @@ const dialogRef = ref();
 const headerRef = ref();
 const footerRef = ref();
 
+const { $t } = useSimpleLocale();
 const { isMobile } = useIsMobile();
 const state = props.modalApi?.useStore?.();
 
@@ -235,15 +240,15 @@ function pointerDownOutside(e: Event) {
  <slot name="footer">
  <VbenButton variant="ghost" @click="() => modalApi?.onCancel()">
  <slot name="cancelText">
- {{ cancelText }}
+ {{ cancelText || $t('cancel') }}
  </slot>
  </VbenButton>
  <VbenButton
  :loading="confirmLoading"
  @click="() => modalApi?.onConfirm()"
  >
  <slot name="confirmText">
- {{ confirmText }}
+ {{ confirmText || $t('confirm') }}
  </slot>
  </VbenButton>
  </slot>

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@@ -53,10 +53,7 @@ withDefaults(defineProps<Props>(), {
  :width="logoSize"
  class="relative rounded-none bg-transparent"
  />
- <span
- v-if="!collapsed"
- class="text-primary dark:text-foreground truncate text-nowrap"
- >
+ <span v-if="!collapsed" class="text-foreground truncate text-nowrap">
  {{ text }}
  </span>
  </a>

diff --git a/packages/locales/package.json b/packages/locales/package.json
@@ -21,6 +21,7 @@
  },
  "dependencies": {
  "@intlify/core-base": "^9.14.0",
+ "@vben-core/composables": "workspace:*",
  "vue": "^3.4.38",
  "vue-i18n": "^9.14.0"
  }

diff --git a/packages/locales/src/i18n.ts b/packages/locales/src/i18n.ts
@@ -10,6 +10,8 @@ import type {
 import { type App, unref } from 'vue';
 import { createI18n } from 'vue-i18n';
 
+import { useSimpleLocale } from '@vben-core/composables';
+
 const i18n = createI18n({
  globalInjection: true,
  legacy: false,
@@ -19,6 +21,8 @@ const i18n = createI18n({
 
 const modules = import.meta.glob('./langs/*.json');
 
+const { setSimpleLocale } = useSimpleLocale();
+
 const localesMap = loadLocalesMap(modules);
 
 let loadMessages: LoadMessageFn;
@@ -75,6 +79,7 @@ async function loadLocaleMessages(lang: SupportedLanguagesType) {
  if (unref(i18n.global.locale) === lang) {
  return setI18nLanguage(lang);
  }
+ setSimpleLocale(lang);
 
  const message = await localesMap[lang]?.();
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml