gc_i18n 1.4.4 → 1.4.5

package/.qoder/repowiki/zh/content/API /345/217/202/350/200/203.md"

@@ -2,25 +2,22 @@
 
 <cite>
 **本文档中引用的文件**   
+- [package.json](file://package.json) - *版本信息，从1.4.3升级到1.4.4*
 - [gc_i18n.es.js](file://lib/gc_i18n.es.js) - *在最近的提交中更新*
 - [i18nUtils.ts](file://packages/libs/i18nUtils.ts) - *在最近的提交中更新*
 - [service.js](file://packages/libs/service.js) - *在最近的提交中更新，包含关键逻辑变更*
 - [utils.js](file://packages/libs/utils.js) - *在最近的提交中更新，包含 mergeArraysByKey 函数*
 - [packages/index.js](file://packages/index.js) - *库的入口点，包含初始化逻辑*
-- [package.json](file://package.json) - *版本信息，从1.3.12升级到1.4.1*
 </cite>
 
 ## 更新摘要
 **变更内容**   
-- 移除了 `fetchTranslate` 函数中的 `page` 参数，更新了函数签名和参数说明
-- 版本从 1.3.12 升级到 1.4.1
-- 更新了 `service.js` 中 `getTranslate` 方法的文档，以反映其新的行为：当返回 `common` 类型的翻译时，会移除当前路由的数据
-- 更新了 `gc_i18n.es.js` 中 `$t` 方法的文档，详细说明了其新的查找优先级：先查找 `route.key`，再查找 `common.key`，最后查找全局 `key`
-- 更新了 `utils.js` 中 `mergeArraysByKey` 函数的文档，说明了其在合并数据时会移除与 `common` 键匹配的当前路由数据
-- 修正了 `service.js` 中 `fetchTranslate` 和 `getTranslate` 方法的返回值描述，使其与代码实现一致
+- 版本从 1.4.3 升级到 1.4.4
+- 更新了 `packages/index.js` 中路由守卫的 `closeModal` 功能集成
+- 更新了 `gc_i18n.es.js` 中 `$t` 方法的文档，详细说明了其新的查找优先级
+- 更新了 `utils.js` 中 `mergeArraysByKey` 函数的文档
+- 修正了 `service.js` 中 `fetchTranslate` 和 `getTranslate` 方法的返回值描述
 - 更新了所有受影响部分的源代码引用，以反映最新的文件状态
-- **新增**：标准化了后端翻译服务端点，从 `i18n-web//app/getsupportedlangs` 迁移到 `i18n-web/app/getsupportedlangs`
-- **新增**：引入了 `getLanguagesWithCache` 函数，提供带缓存的语言列表获取功能
 
 ## 目录
 1. [简介](#简介)
@@ -40,6 +37,7 @@
 - **语言切换**：通过 `$changeLocale` 方法动态切换当前语言环境。
 - **语言包管理**：通过 `service.js` 提供的接口从后端获取和更新翻译资源。
 - **工具支持**：提供静态分析工具函数，用于提取项目中的翻译键。
+- **模态框关闭**：通过 `closeModal` 方法统一管理 SweetAlert2 模态框的关闭。
 
 **Section sources**
 - [gc_i18n.es.js](file://lib/gc_i18n.es.js)
@@ -116,6 +114,41 @@ $changeLocale(locale: string): Promise<void>
 - [src/view/Home.vue](file://src/view/Home.vue#L2)
 - [src/view/login.vue](file://src/view/login.vue#L2)
 
+### closeModal (关闭模态框方法)
+此方法用于统一关闭 SweetAlert2 弹窗，确保模态框的正确销毁和资源清理。
+
+**方法签名**
+```typescript
+closeModal(): void
+```
+
+**参数**
+- 无参数
+
+**返回值**
+- `void` - 无返回值
+
+**副作用**
+- 关闭当前显示的 SweetAlert2 弹窗
+- 清理弹窗相关的事件监听器和 DOM 元素
+- 触发 `willClose` 和 `didClose` 事件回调
+- 释放内存资源，防止内存泄漏
+
+**使用限制**
+- 仅在 SweetAlert2 弹窗处于激活状态时有效
+- 调用后会触发弹窗的销毁流程，无法恢复
+
+**错误处理建议**
+- 确保在调用前检查弹窗是否已激活
+- 监听 `willClose` 和 `didClose` 事件以处理关闭后的逻辑
+- 在路由切换时自动调用此方法，避免弹窗残留
+
+**新增** 该方法作为 SweetAlert2 的别名方法，提供统一的模态框关闭接口。
+
+**Section sources**
+- [gc_i18n.es.js:1340-1350](file://lib/gc_i18n.es.js#L1340-L1350) - *新增 closeModal 方法实现*
+- [gc_i18n.es.js:1930-1932](file://lib/gc_i18n.es.js#L1930-L1932) - *closeModal 方法别名注册*
+
 ## i18nUtils.ts 工具函数
 `i18nUtils.ts` 文件提供了一个用于静态分析的工具函数，帮助开发者管理和审计翻译资源。
 
@@ -363,6 +396,16 @@ const keys = extractTranslationKeys(MyComponent);
 console.log(keys); // 输出: ["hello", "greeting"]
 ```
 
+### 路由守卫中集成 closeModal
+```javascript
+// 在路由守卫中自动关闭模态框
+this.router.beforeEach(async (to, from, next) => {
+  // 自动关闭配置中心弹窗
+  this.configInstance && this.configInstance.closeModal();
+  // 其他路由逻辑...
+});
+```
+
 ## 错误处理与限制
 - **网络错误**: `service.js` 中的所有异步方法都可能因网络问题而失败。务必使用 `try-catch` 或 `.catch()` 处理 Promise 拒绝。
 - **缓存失效**: `getTranslate` 依赖本地存储。如果用户清除浏览器数据，缓存将丢失，需要重新下载完整语言包。
@@ -371,5 +414,7 @@ console.log(keys); // 输出: ["hello", "greeting"]
 - **逻辑变更**: `getTranslate` 方法现在会移除 `common` 键覆盖的当前路由数据，这可能会影响某些依赖于特定键的组件。
 - **参数变更**: `fetchTranslate` 函数已移除 `page` 参数，使用时请注意更新调用方式。
 - **端点标准化**: 所有翻译服务端点已标准化为 `/i18n-web/...` 结构，确保了后端服务的一致性。
+- **模态框管理**: 新增的 `closeModal` 方法提供了统一的 SweetAlert2 弹窗管理，避免了弹窗残留问题。
+- **版本更新** 本版本为 1.4.4，包含上述重要变更，特别是路由守卫中自动调用 `closeModal` 的功能集成。
 
-**版本更新** 本版本为 1.4.1，包含上述重要变更，特别是后端翻译服务端点的标准化迁移和新增的带缓存语言列表获取功能。
+**版本更新** 本版本为 1.4.4，包含上述重要变更，特别是路由守卫中自动调用 `closeModal` 的功能集成。

package/.qoder/repowiki/zh/content//346/240/270/345/277/203/345/272/223/345/256/236/347/216/260.md

@@ -43,6 +43,7 @@
 - **安全机制改进**，新增JWT令牌验证和权限控制
 - **SweetAlert2集成优化**，改进变量命名和代码组织结构，提升可读性和维护性
 - **新增智能语言列表缓存机制**，通过getLanguagesWithCache提供缓存和自动失效功能
+- **新增postMessage事件处理功能**，扩展了原有的updateLanguage事件处理机制，允许外部应用程序通过postMessage事件编程关闭模态框
 
 ## 目录
 1. [项目结构分析](#项目结构分析)
@@ -272,7 +273,7 @@ function _r(e, t) {
 
 ### 事件通知机制
 
-事件通知通过自定义事件系统实现，使用mitt事件发射器：
+**更新** 事件通知通过自定义事件系统实现，使用mitt事件发射器，新增了closeModal事件处理功能：
 
 ```javascript
 install(app, opts = {}) {
@@ -284,6 +285,10 @@ install(app, opts = {}) {
     if (event.data.type === "updateLanguage") {
       location.reload();
     }
+    // 新增：监听关闭弹窗消息
+    if (event.data.type === "closeModal") {
+      this.configInstance && this.configInstance.closeModal();
+    }
   });
 }
 ```
@@ -533,6 +538,10 @@ install(app, opts = {}) {
     if (event.data.type === "updateLanguage") {
       location.reload();
     }
+    // 新增：监听关闭弹窗消息
+    if (event.data.type === "closeModal") {
+      this.configInstance && this.configInstance.closeModal();
+    }
   });
 }
 ```
@@ -1760,4 +1769,80 @@ div:where(.swal2-container) button:where(.swal2-close):focus-visible {
 - [lib/gc_i18n.css](file://lib/gc_i18n.css)
 - [packages/libs/textEditMode.css:1-166](file://packages/libs/textEditMode.css#L1-L166)
 - [packages/swal.css:1-18](file://packages/swal.css#L1-L18)
-- [packages/index.js:338-343](file://packages/index.js#L338-L343)
+- [packages/index.js:338-343](file://packages/index.js#L338-L343)
+
+## PostMessage事件处理功能
+
+**新增** I18n类现在支持通过postMessage事件编程控制模态框的关闭，扩展了原有的updateLanguage事件处理机制。
+
+### 事件处理机制
+
+I18n类通过window.addEventListener监听postMessage事件，支持两种类型的事件：
+
+```javascript
+window.addEventListener("message", (event) => {
+  if (event.data.type === "updateLanguage") {
+    location.reload();
+  }
+  // 新增：监听关闭弹窗消息
+  if (event.data.type === "closeModal") {
+    this.configInstance && this.configInstance.closeModal();
+  }
+});
+```
+
+### 事件类型说明
+
+#### updateLanguage事件
+
+- **用途**: 触发语言更新，重新加载页面
+- **触发条件**: 接收到type为"updateLanguage"的消息
+- **行为**: 调用location.reload()重新加载当前页面
+
+#### closeModal事件
+
+- **用途**: 编程式关闭模态框
+- **触发条件**: 接收到type为"closeModal"的消息
+- **行为**: 调用configInstance.closeModal()关闭当前打开的配置模态框
+- **适用场景**: 外部应用程序需要程序化控制模态框的关闭
+
+### 外部应用程序集成
+
+外部应用程序可以通过postMessage API向目标窗口发送关闭模态框的指令：
+
+```javascript
+// 向目标窗口发送关闭模态框指令
+targetWindow.postMessage({ type: "closeModal" }, "*");
+
+// 或者指定目标源
+targetWindow.postMessage({ type: "closeModal" }, "https://your-domain.com");
+```
+
+### 与Earth组件的协同
+
+Earth组件同样支持closeModal事件处理，确保组件间的一致性：
+
+```javascript
+const handleMessage = (event) => {
+  if (event.data && event.data.type === "updateLanguage") {
+    // 从 store 重新读取当前语言
+    currentLocale.value = store2.get("I18N_LANGUAGE") || "zh-CN";
+  }
+  // Earth组件也支持closeModal事件
+  if (event.data && event.data.type === "closeModal") {
+    // Earth组件的关闭逻辑
+  }
+};
+```
+
+### 最佳实践
+
+1. **事件类型区分**: 确保发送的事件类型正确，避免误触发
+2. **目标窗口确认**: 在生产环境中指定具体的目标源，提高安全性
+3. **错误处理**: 添加适当的错误处理机制，防止事件丢失
+4. **时机控制**: 在模态框真正打开后再发送closeModal事件
+
+**本节来源**
+- [packages/index.js:546-555](file://packages/index.js#L546-L555)
+- [packages/components/earth.js:122-128](file://packages/components/earth.js#L122-L128)
+- [lib/gc_i18n.es.js:2868-2870](file://lib/gc_i18n.es.js#L2868-L2870)