feat: 为directus做I18n适配

- 添加getDirectusLocale方法用于获取Directus本地化字段

app/composables/useLocalizations.ts

@@ -3,38 +3,89 @@ import type { Language as ElementLanguage } from 'element-plus/es/locale';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
 import en from 'element-plus/es/locale/lang/en';
 
-// Strapi本地化映射
+/**
-export const strapiLocales: Record<string, StrapiLocale> = {
+ * 应用语言映射结构
-  zh: 'zh-CN',
+ * 用于统一 Strapi / Directus / Element Plus 的多语言配置
-  en: 'en',
+ */
-};
+export interface LocaleMapping {
+  /** 用于StrapiLocale **/
+  strapi: StrapiLocale;
+  /** 用于Directus translations.languages_code **/
+  directus: string;
+  /** Element Plus语言对象 **/
+  element: ElementLanguage;
+}
 
-// Element Plus本地化映射
+/**
-export const elementPlusLocales: Record<string, ElementLanguage> = {
+ * 应用支持的语言映射表。
-  zh: zhCn,
+ *
-  en: en,
+ * 每个键（如 "zh"、"en"）对应一套统一的本地化配置，
-};
+ * 方便在 Strapi / Directus / Element Plus 三方系统间保持一致。
+ */
+export const localeMap = {
+  zh: {
+    strapi: 'zh-CN',
+    directus: 'zh-CN',
+    element: zhCn,
+  },
+  en: {
+    strapi: 'en',
+    directus: 'en-US',
+    element: en,
+  },
+} satisfies Record<string, LocaleMapping>;
 
+/** 应用支持的语言键类型 **/
+export type AppLocale = keyof typeof localeMap;
+
+/** 默认语言， 当找不到匹配语言时回退到默认语言 **/
+const defaultLocale: AppLocale = 'zh';
+
+/**
+ * 提供 Strapi、 Directus 与 Element Plus的国际化映射工具
+ *
+ * ---
+ *  @example
+ *  ``` ts
+ * const { locale, getStrapiLocale, getElementPlusLocale } = useLocalizations()
+ *
+ * const strapiLang = getStrapiLocale()          // 当前 Strapi 语言码
+ * const elLocale = getElementPlusLocale('en')   // 获取 Element Plus 英文对象
+ * const all = getLocaleMapping('zh')            // 获取完整映射结构
+ *  ```
+ *  ---
+ *
+ *  @returns 返回当前语言及各系统的本地化获取方法
+ */
 export const useLocalizations = () => {
-  const { locale } = useI18n();
+  const { locale } = useI18n<{ locale: Ref<AppLocale> }>();
 
-  // 获取Strapi本地化代码
+  /**
-  const getStrapiLocale = (nuxtLocale?: string): StrapiLocale => {
+   * 获取对应语言的完整映射结构
-    const currentLocale = nuxtLocale || locale.value;
+   *
-    return strapiLocales[currentLocale] || 'zh-Hans';
+   * @param nuxtLocale - 可选的语言码参数，若提供则使用该语言码，否则使用当前应用语言
-  };
+   * @returns 返回当前语言的完整映射对象
-
+   */
-  // 获取Element Plus本地化
+  const getMapping = (nuxtLocale?: AppLocale): LocaleMapping => {
-  const getElementPlusLocale = (nuxtLocale?: string) => {
+    const current = nuxtLocale || locale.value;
-    const currentLocale = nuxtLocale || locale.value;
+    return localeMap[current] || localeMap[defaultLocale];
-    const elementPlusLocale =
-      elementPlusLocales[currentLocale] || elementPlusLocales['zh'];
-    return elementPlusLocale;
   };
 
   return {
+    /** 当前Nuxt I18n语言(只读) **/
     locale: readonly(locale),
-    getStrapiLocale,
+    /** 获取Strapi的本地化代码 **/
-    getElementPlusLocale,
+    getStrapiLocale: (l?: AppLocale) => getMapping(l).strapi,
+    /** 获取Directus的本地化代码 **/
+    getDirectusLocale: (l?: AppLocale) => getMapping(l).directus,
+    /** 获取Element Plus语言对象 **/
+    getElementPlusLocale: (l?: AppLocale) => getMapping(l).element,
+    /**
+     * 获取完整的语言映射结构(Strapi / Directus / Element Plus)
+     *
+     * @param l: 指定语言，默认为当前locale
+     * @returns 语言映射对象
+     */
+    getLocaleMapping: getMapping,
   };
 };

app/pages/productions/[...slug].vue

@@ -108,8 +108,8 @@
 <script setup lang="ts">
   import { readItem } from '@directus/sdk';
   const route = useRoute();
-  const { getStrapiLocale } = useLocalizations();
+  const { getDirectusLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
+  const directusLocale = computed(() => getDirectusLocale());
 
   const { $directus } = useNuxtApp();
   const { getImageUrl } = useDirectusImage();
@@ -187,14 +187,14 @@
           deep: {
             translations: {
               _filter: {
-                languages_code: { _eq: strapiLocale },
+                languages_code: { _eq: directusLocale.value },
               },
             },
             images: {
               product_images_id: {
                 translations: {
                   _filter: {
-                    languages_code: { _eq: strapiLocale },
+                    languages_code: { _eq: directusLocale.value },
                   },
                 },
               },
@@ -203,7 +203,7 @@
               questions_id: {
                 translations: {
                   _filter: {
-                    languages_code: { _eq: strapiLocale },
+                    languages_code: { _eq: directusLocale.value },
                   },
                 },
               },
@@ -212,14 +212,17 @@
               documents_id: {
                 translations: {
                   _filter: {
-                    languages_code: { _eq: strapiLocale },
+                    languages_code: { _eq: directusLocale.value },
                   },
                 },
               },
             },
           },
         })
-      )
+      ),
+    {
+      watch: [documentId, directusLocale],
+    }
   );
 
   console.log('Raw Data: ', data.value);

app/pages/productions/index.vue

@@ -46,8 +46,8 @@
 
 <script setup lang="ts">
   import { readItems } from '@directus/sdk';
-  const { getStrapiLocale } = useLocalizations();
+  const { getDirectusLocale } = useLocalizations();
-  const strapiLocale = getStrapiLocale();
+  const directusLocale = computed(() => getDirectusLocale());
 
   const { $directus } = useNuxtApp();
   const { getImageUrl } = useDirectusImage();
@@ -73,13 +73,13 @@
           deep: {
             translations: {
               _filter: {
-                languages_code: { _eq: strapiLocale },
+                languages_code: { _eq: directusLocale.value },
               },
             },
             product_type: {
               translations: {
                 _filter: {
-                  languages_code: { _eq: strapiLocale },
+                  languages_code: { _eq: directusLocale.value },
                 },
               },
             },
@@ -87,13 +87,13 @@
         })
       ),
     {
+      watch: [directusLocale],
       lazy: true,
     }
   );
 
   const activeNames = ref<string[]>([]);
 
-  // const productions = computed(() => data.value?.data ?? []);
   const productionsRaw = computed(() => data.value ?? []);
   const productions = computed(() =>
     productionsRaw.value.map((item) => toProductListView(item))