gc_i18n 1.4.4 → 1.4.6

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)

package/.qoder/repowiki/zh/content//351/253/230/347/272/247/347/224/250/346/263/225//344/276/235/350/265/226/347/256/241/347/220/206/347/255/226/347/225/245.md

@@ -13,6 +13,12 @@
 - [README.md](file://README.md)
 </cite>
 
+## 更新摘要
+**变更内容**
+- 修复了 Vue i18n 依赖配置问题，将其从 devDependencies 移动到 dependencies
+- 解决了下游项目依赖解析问题
+- 更新了依赖管理策略以反映实际的运行时依赖需求
+
 ## 目录
 1. [简介](#简介)
 2. [项目结构](#项目结构)
@@ -36,6 +42,8 @@ gc_i18n 是一个基于 Vue 3 和 Vite 的国际化解决方案库。该项目
 - 实现了智能的远程翻译资源管理
 - 集成了实时多语言管理功能
 
+**更新** 修复了 Vue i18n 依赖配置问题，确保其在生产环境中正确可用
+
 ## 项目结构
 
 项目采用清晰的模块化组织结构，主要分为以下几个核心部分：
@@ -61,13 +69,13 @@ end
 ```
 
 **图表来源**
-- [package.json](file://package.json#L1-L48)
-- [vite.config.js](file://vite.config.js#L1-L72)
-- [packages/index.js](file://packages/index.js#L1-L418)
+- [package.json:1-48](file://package.json#L1-L48)
+- [vite.config.js:1-72](file://vite.config.js#L1-L72)
+- [packages/index.js:1-418](file://packages/index.js#L1-L418)
 
 **章节来源**
-- [package.json](file://package.json#L1-L48)
-- [vite.config.js](file://vite.config.js#L1-L72)
+- [package.json:1-48](file://package.json#L1-L48)
+- [vite.config.js:1-72](file://vite.config.js#L1-L72)
 
 ## 核心依赖分析
 
@@ -85,17 +93,17 @@ D[lodash-es] --> D1[工具函数]
 E[store2] --> E1[本地存储]
 F[sweetalert2] --> F1[模态框]
 G[vue-demi] --> G1[Vue兼容层]
-end
-subgraph "国际化相关"
 H[vue-i18n] --> H1[Vue国际化]
+end
+subgraph "框架相关"
 I[vue] --> I1[Vue框架]
 J[vue-router] --> J1[路由集成]
 end
 ```
 
 **图表来源**
-- [package.json](file://package.json#L21-L29)
-- [packages/index.js](file://packages/index.js#L1-L50)
+- [package.json:21-30](file://package.json#L21-L30)
+- [packages/index.js:1-50](file://packages/index.js#L1-L50)
 
 ### 关键依赖特性
 
@@ -105,10 +113,13 @@ end
 4. **lodash-es**: ES 模块版本的工具库，支持 Tree Shaking
 5. **store2**: 提供本地存储功能，支持命名空间隔离
 6. **sweetalert2**: 现代化的模态框组件，用于多语言管理界面
+7. **vue-i18n**: 国际化核心依赖，现已正确配置为生产依赖
+
+**更新** Vue i18n 现已从 devDependencies 移动到 dependencies，确保在生产环境中正确解析和使用
 
 **章节来源**
-- [package.json](file://package.json#L21-L29)
-- [packages/index.js](file://packages/index.js#L1-L50)
+- [package.json:21-30](file://package.json#L21-L30)
+- [packages/index.js:1-50](file://packages/index.js#L1-L50)
 
 ## 构建系统依赖管理
 
@@ -135,7 +146,7 @@ L --> O[lang/*]
 ```
 
 **图表来源**
-- [vite.config.js](file://vite.config.js#L20-L35)
+- [vite.config.js:20-35](file://vite.config.js#L20-L35)
 
 ### 构建输出策略
 
@@ -145,8 +156,8 @@ L --> O[lang/*]
 - **CSS 提取**: 独立的样式文件输出
 
 **章节来源**
-- [vite.config.js](file://vite.config.js#L10-L18)
-- [vite.config.js](file://vite.config.js#L35-L50)
+- [vite.config.js:10-18](file://vite.config.js#L10-L18)
+- [vite.config.js:35-50](file://vite.config.js#L35-L50)
 
 ## 运行时依赖策略
 
@@ -174,7 +185,7 @@ end
 ```
 
 **图表来源**
-- [packages/libs/service.js](file://packages/libs/service.js#L87-L131)
+- [packages/libs/service.js:87-131](file://packages/libs/service.js#L87-L131)
 
 ### 动态模块加载
 
@@ -191,11 +202,11 @@ F --> G[应用翻译]
 ```
 
 **图表来源**
-- [packages/index.js](file://packages/index.js#L148-L239)
+- [packages/index.js:148-239](file://packages/index.js#L148-L239)
 
 **章节来源**
-- [packages/libs/service.js](file://packages/libs/service.js#L87-L131)
-- [packages/index.js](file://packages/index.js#L148-L239)
+- [packages/libs/service.js:87-131](file://packages/libs/service.js#L87-L131)
+- [packages/index.js:148-239](file://packages/index.js#L148-L239)
 
 ## 开发依赖管理
 
@@ -227,11 +238,11 @@ end
 ```
 
 **图表来源**
-- [package.json](file://package.json#L30-L43)
+- [package.json:31-43](file://package.json#L31-L43)
 
 **章节来源**
-- [package.json](file://package.json#L30-L43)
-- [vite.config.js](file://vite.config.js#L63-L70)
+- [package.json:31-43](file://package.json#L31-L43)
+- [vite.config.js:63-70](file://vite.config.js#L63-L70)
 
 ## 依赖版本控制策略
 
@@ -254,7 +265,7 @@ H --> K[用于关键依赖]
 ```
 
 **图表来源**
-- [package.json](file://package.json#L21-L47)
+- [package.json:21-47](file://package.json#L21-L47)
 
 ### 锁定文件管理
 
@@ -265,8 +276,8 @@ H --> K[用于关键依赖]
 - **自动安装**: pnpm 自动处理 peer dependencies
 
 **章节来源**
-- [pnpm-lock.yaml](file://pnpm-lock.yaml#L1-L69)
-- [package.json](file://package.json#L44-L47)
+- [pnpm-lock.yaml:1-69](file://pnpm-lock.yaml#L1-L69)
+- [package.json:44-47](file://package.json#L44-L47)
 
 ## 模块解析策略
 
@@ -292,8 +303,8 @@ end
 ```
 
 **图表来源**
-- [package.json](file://package.json#L7-L12)
-- [package.json](file://package.json#L5-L11)
+- [package.json:7-12](file://package.json#L7-L12)
+- [package.json:5-11](file://package.json#L5-L11)
 
 ### 兼容性保证
 
@@ -304,8 +315,8 @@ end
 3. **API 兼容**: 统一的国际化 API 接口
 
 **章节来源**
-- [package.json](file://package.json#L5-L12)
-- [packages/index.js](file://packages/index.js#L7-L41)
+- [package.json:5-12](file://package.json#L5-L12)
+- [packages/index.js:7-41](file://packages/index.js#L7-L41)
 
 ## 性能优化考虑
 
@@ -324,7 +335,7 @@ I --> J[避免全局污染]
 ```
 
 **图表来源**
-- [packages/index.js](file://packages/index.js#L1-L50)
+- [packages/index.js:1-50](file://packages/index.js#L1-L50)
 
 ### 运行时优化
 
@@ -333,8 +344,8 @@ I --> J[避免全局污染]
 3. **增量更新**: 支持翻译数据的增量同步
 
 **章节来源**
-- [packages/libs/service.js](file://packages/libs/service.js#L95-L131)
-- [packages/index.js](file://packages/index.js#L329-L372)
+- [packages/libs/service.js:95-131](file://packages/libs/service.js#L95-L131)
+- [packages/index.js:329-372](file://packages/index.js#L329-L372)
 
 ## 故障排除指南
 
@@ -347,6 +358,14 @@ I --> J[避免全局污染]
 | 构建失败 | 编译错误或打包问题 | 检查 Vite 配置和外部化设置 |
 | 性能问题 | 加载缓慢或内存占用高 | 分析 bundle 大小和优化导入 |
 
+### 依赖配置问题
+
+**更新** Vue i18n 依赖配置问题已修复：
+- 问题：vue-i18n 曾被错误地放置在 devDependencies 中
+- 影响：下游项目无法正确解析 vue-i18n 依赖
+- 解决：已将其移动到 dependencies 中
+- 验证：现在可以在生产环境中正确使用
+
 ### 调试工具
 
 1. **依赖图分析**: 使用 `npm ls` 或 `pnpm ls` 查看依赖关系
@@ -354,7 +373,7 @@ I --> J[避免全局污染]
 3. **运行时监控**: 检查浏览器开发者工具中的网络请求
 
 **章节来源**
-- [README.md](file://README.md#L21-L51)
+- [README.md:21-51](file://README.md#L21-L51)
 
 ## 总结
 
@@ -374,4 +393,6 @@ gc_i18n 的依赖管理策略体现了现代前端工程的最佳实践：
 3. **构建优化**: 外部化和代码分割策略
 4. **测试覆盖**: 完善的单元测试和集成测试
 
+**更新** 通过修复 Vue i18n 依赖配置问题，确保了库在各种环境下的可靠性和兼容性，解决了下游项目可能遇到的依赖解析问题。
+
 该依赖管理策略为大型国际化项目的可维护性和扩展性提供了坚实的基础，是现代前端库开发的优秀范例。