gc_i18n 1.3.12 → 1.3.13

package/.qoder/repowiki/zh/content//347/273/204/344/273/266/351/233/206/346/210/220.md

@@ -15,26 +15,30 @@
 - [service.js](file://packages/libs/service.js)
 - [utils.js](file://packages/libs/utils.js)
 - [index.js](file://lang/index.js)
+- [textEditMode.js](file://packages/libs/textEditMode.js)
+- [textEditMode.css](file://packages/libs/textEditMode.css)
 </cite>
 
 ## 更新摘要
 **所做变更**
-- 更新了Earth组件的重大功能增强：从简单的Icon组件升级为完整的v-model驱动编辑组件
+- 更新了 i18n-earth 组件的重大功能增强：从简单的 Icon 组件升级为完整的 v-model 驱动编辑组件
 - 新增了模态框编辑功能，支持多语言翻译的实时编辑和保存
 - 增强了缓存机制，包括语言列表缓存和翻译数据缓存
-- 完善了组件的Props配置和事件处理机制
-- 更新了组件的使用示例和最佳实践
+- 完善了组件的 Props 配置和事件处理机制
+- 更新了键盘快捷键配置，从 ctrl+shift+l 更改为 ctrl+shift+e
+- 新增了文本编辑模式功能，支持可视化翻译编辑
 
 ## 目录
 1. [项目结构分析](#项目结构分析)
 2. [Vue组件与gc_i18n库集成机制](#vue组件与gc_i18n库集成机制)
-3. [Earth组件：v-model驱动的多语言编辑器](#earth组件v-model驱动的多语言编辑器)
+3. [i18n-earth组件：v-model驱动的多语言编辑器](#i18n-earth组件v-model驱动的多语言编辑器)
 4. [config.vue语言切换控件详解](#configvue语言切换控件详解)
 5. [文本翻译函数$t()的使用分析](#文本翻译函数t的使用分析)
 6. [组件间语言状态共享实践](#组件间语言状态共享实践)
 7. [翻译文本传递与直接调用的权衡](#翻译文本传递与直接调用的权衡)
-8. [核心流程序列图](#核心流程序列图)
-9. [依赖关系图](#依赖关系图)
+8. [文本编辑模式与快捷键配置](#文本编辑模式与快捷键配置)
+9. [核心流程序列图](#核心流程序列图)
+10. [依赖关系图](#依赖关系图)
 
 ## 项目结构分析
 
@@ -59,6 +63,8 @@ earthCSS[earth.css]
 i18nUtils[i18nUtils.ts]
 service[service.js]
 utils[utils.js]
+textEditMode[textEditMode.js]
+textEditModeCSS[textEditMode.css]
 end
 subgraph "应用层"
 main[main.js]
@@ -71,7 +77,9 @@ lang --> pkg
 pkg --> earth
 pkg --> i18nUtils
 pkg --> service
+pkg --> textEditMode
 earth --> earthCSS
+textEditMode --> textEditModeCSS
 main --> app
 app --> home
 app --> login
@@ -92,7 +100,8 @@ Vue组件通过`gc_i18n`库实现国际化功能。该库基于`vue-i18n`构建
 2. `lang/index.js`初始化`gc_i18n`实例并注入Vue应用
 3. 各组件通过全局函数`$t()`进行文本翻译
 4. 特殊组件如`config.vue`提供翻译管理界面
-5. Earth组件通过自动注册方式提供Vue 2/3兼容性支持
+5. i18n-earth组件通过自动注册方式提供Vue 2/3兼容性支持
+6. 文本编辑模式通过快捷键 ctrl+shift+e 启用
 
 ```mermaid
 sequenceDiagram
@@ -100,12 +109,14 @@ participant Main as main.js
 participant Lang as lang/index.js
 participant I18n as index.js
 participant Earth as earth.js
+participant TextMode as textEditMode.js
 participant Component as Vue组件
 Main->>Lang : use(lang, router)
 Lang->>I18n : new gc_i18n(options)
 I18n->>I18n : initI18n()
 I18n->>I18n : initRouterGuards()
 I18n->>Earth : app.component("i18n-earth", earthVue)
+I18n->>TextMode : 绑定快捷键 ctrl+shift+e
 Earth->>Component : 注册全局组件
 Component->>I18n : 调用$t("key")
 I18n-->>Component : 返回翻译文本
@@ -121,9 +132,9 @@ Note over I18n : 支持自动注册和手动注册
 - [main.js:1-12](file://src/main.js#L1-L12)
 - [lang/index.js:1-33](file://lang/index.js#L1-L33)
 
-## Earth组件：v-model驱动的多语言编辑器
+## i18n-earth组件：v-model驱动的多语言编辑器
 
-**更新**：Earth组件已从简单的Icon组件升级为完整的v-model驱动编辑组件，具备强大的多语言编辑和管理功能
+**更新**：i18n-earth组件已从简单的Icon组件升级为完整的v-model驱动编辑组件，具备强大的多语言编辑和管理功能
 
 ### 组件特性
 - 使用`vue-demi`库实现Vue 2/3兼容
@@ -137,7 +148,7 @@ Note over I18n : 支持自动注册和手动注册
 
 ### v-model数据结构
 
-Earth组件支持数组对象格式的v-model数据：
+i18n-earth组件支持数组对象格式的v-model数据：
 
 ```javascript
 // v-model数据格式
@@ -407,7 +418,7 @@ ReloadPage --> End([完成])
 
 | 组件 | 模板中使用 | 脚本中使用 | 特点 |
 |------|------------|------------|------|
-| Home.vue | 是 | 是 | 完整的交互示例，包含Earth组件 |
+| Home.vue | 是 | 是 | 完整的交互示例，包含i18n-earth组件 |
 | login.vue | 是 | 否 | 简单的静态翻译 |
 | test.vue | 否 | 否 | 无$t()调用，使用静态文本 |
 
@@ -419,7 +430,7 @@ ReloadPage --> End([完成])
   <div>首页</div>
   <RouterLink to="/test">测试</RouterLink>
   
-  <!-- Earth组件使用 - v-model驱动的编辑器 -->
+  <!-- i18n-earth组件使用 - v-model驱动的编辑器 -->
   <i18n-earth
     :width="500"
     v-model="translations"
@@ -483,7 +494,7 @@ const handleSave = async (values) => {
 - 模板中使用`{{ $t("key") }}`进行动态翻译
 - 脚本中调用`$changeLocale`等全局函数
 - 包含完整的语言切换和用户管理功能
-- 集成了Earth组件展示Vue 2/3兼容性
+- 集成了i18n-earth组件展示Vue 2/3兼容性
 
 ### login.vue中的使用
 
@@ -588,7 +599,7 @@ I18n->>Component : 触发页面刷新
 <ChildComponent :saveText="$t('common.save')" />
 ```
 
-**注意**：Earth组件通过自动注册机制在全局可用，无需手动注册。
+**注意**：i18n-earth组件通过自动注册机制在全局可用，无需手动注册。
 
 **本节来源**
 - [index.js:491-501](file://packages/index.js#L491-L501)
@@ -649,6 +660,91 @@ export default {
 - [Home.vue:1-64](file://src/view/Home.vue#L1-L64)
 - [login.vue:1-15](file://src/view/login.vue#L1-L15)
 
+## 文本编辑模式与快捷键配置
+
+### 快捷键配置更新
+
+**更新**：键盘快捷键配置已从 `ctrl+shift+l` 更改为 `ctrl+shift+e`
+
+`gc_i18n`库现在支持自定义文本编辑模式快捷键：
+
+```javascript
+// 默认配置
+this.keyboard = keyboard || "ctrl+shift+l";
+this.editKeyboard = options.editKeyboard || "ctrl+shift+e";
+
+// 绑定快捷键
+keyboardJS.bind(this.editKeyboard, (e) => {
+  e.preventDefault();
+  textEditMode.toggle();
+});
+```
+
+### 文本编辑模式功能
+
+文本编辑模式提供了可视化的翻译编辑体验：
+
+1. **激活条件**：通过 `ctrl+shift+e` 快捷键激活
+2. **元素包装**：自动扫描页面文本节点并添加可编辑外框
+3. **弹窗编辑**：点击可编辑元素弹出SweetAlert2编辑窗口
+4. **实时保存**：编辑完成后自动保存到服务器
+
+### 编辑模式工作流程
+
+```mermaid
+flowchart TD
+Start([按下 ctrl+shift+e]) --> InitConfig["初始化配置"]
+InitConfig --> ScanElements["扫描页面文本元素"]
+ScanElements --> WrapElements["包装可编辑元素"]
+WrapElements --> ShowTips["显示操作提示"]
+ShowTips --> ClickElement{"点击可编辑元素?"}
+ClickElement --> |是| OpenModal["打开编辑弹窗"]
+ClickElement --> |否| WaitInput["等待用户输入"]
+OpenModal --> EditText["编辑翻译内容"]
+EditText --> SaveChanges["保存到服务器"]
+SaveChanges --> UpdateCache["更新本地缓存"]
+UpdateCache --> CloseModal["关闭弹窗"]
+CloseModal --> End([完成])
+```
+
+### 编辑弹窗功能
+
+编辑弹窗支持多语言翻译编辑：
+
+```javascript
+// 构建编辑表单
+const langInputs = this.languages
+  .map(
+    (item) => `
+      <div class="i18n-edit-field">
+        <label class="i18n-edit-label">${item.langName}:</label>
+        <input
+          type="text"
+          class="i18n-edit-input"
+          data-lang="${item.langCode}"
+          value="${this.escapeHtml(_.get(value, item.langCode) || "")}"
+          placeholder="请输入${item.langName}翻译"
+        />
+      </div>
+    `
+  )
+  .join("");
+```
+
+### 配置选项
+
+| 选项名 | 默认值 | 说明 |
+|--------|--------|------|
+| keyboard | "ctrl+shift+l" | 管理面板快捷键 |
+| editKeyboard | "ctrl+shift+e" | 文本编辑模式快捷键 |
+| baseUrl | 根据环境自动选择 | 翻译服务基础URL |
+
+**本节来源**
+- [index.js:109-111](file://packages/index.js#L109-L111)
+- [index.js:153-157](file://packages/index.js#L153-L157)
+- [textEditMode.js:1-623](file://packages/libs/textEditMode.js#L1-L623)
+- [textEditMode.css:1-166](file://packages/libs/textEditMode.css#L1-L166)
+
 ## 核心流程序列图
 
 ```mermaid
@@ -656,6 +752,8 @@ sequenceDiagram
 participant User as 用户
 participant Component as Vue组件
 participant I18n as gc_i18n实例
+participant Earth as i18n-earth组件
+participant TextMode as 文本编辑模式
 participant Service as service.js
 participant Storage as localStorage
 participant Server as 远程服务器
@@ -669,8 +767,11 @@ Service->>Storage : 缓存翻译数据
 Service-->>I18n : 返回翻译结果
 I18n->>I18n : setLocaleMessage('en-US', data)
 I18n->>Component : 触发页面刷新
-Component->>Component : 重新渲染，使用英文文本
-Component-->>User : 显示英文界面
+Component->>Earth : 更新当前语言显示
+Earth->>User : 显示英文翻译
+User->>TextMode : 按下 ctrl+shift+e
+TextMode->>TextMode : 启用编辑模式
+TextMode->>User : 显示可编辑元素
 ```
 
 **图表来源**
@@ -688,19 +789,22 @@ C --> D[packages/index.js]
 D --> E[earth.js]
 D --> F[i18nUtils.ts]
 D --> G[service.js]
-E --> H[earth.css]
-A --> I[router]
-I --> J[Home.vue]
-I --> K[login.vue]
-I --> L[test.vue]
-J --> D
-K --> D
+D --> H[textEditMode.js]
+E --> I[earth.css]
+H --> J[textEditMode.css]
+A --> K[router]
+K --> L[Home.vue]
+K --> M[login.vue]
+K --> N[test.vue]
 L --> D
-M[earth.js] --> N[earth.css]
-O[service.js] --> P[utils.js]
+M --> D
+N --> D
+O[earth.js] --> I
+P[textEditMode.js] --> J
+Q[service.js] --> R[utils.js]
 style A fill:#f9f,stroke:#333
 style D fill:#bbf,stroke:#333
-style M fill:#f96,stroke:#333
+style O fill:#f96,stroke:#333
 ```
 
 **图表来源**
@@ -710,4 +814,6 @@ style M fill:#f96,stroke:#333
 - [earth.js:1-339](file://packages/components/earth.js#L1-L339)
 - [earth.css:1-144](file://packages/components/earth.css#L1-L144)
 - [service.js:1-189](file://packages/libs/service.js#L1-L189)
-- [utils.js:1-51](file://packages/libs/utils.js#L1-L51)
+- [utils.js:1-51](file://packages/libs/utils.js#L1-L51)
+- [textEditMode.js:1-623](file://packages/libs/textEditMode.js#L1-L623)
+- [textEditMode.css:1-166](file://packages/libs/textEditMode.css#L1-L166)