fix: 添加邮箱出题页面事件

Email组件外部表格保存功能说明.md

@@ -0,0 +1,92 @@
+# Email组件外部表格保存功能测试说明
+
+## 功能概述
+
+已为Email组件实现了模仿Setting组件的外部表格保存功能。当用户在Email组件中进行设置时，配置数据会自动保存到store中，当关闭弹窗时，外部的EmailForm会从store中获取这些数据并显示在表格中。
+
+## 实现细节
+
+### 1. 创建了Email Store (`src/store/modules/email.ts`)
+
+- `emailFormList`: 存储邮件配置数据的数组
+- `addEmailData()`: 添加邮件配置数据
+- `updateEmailData()`: 更新邮件配置数据
+- `removeEmailData()`: 删除邮件配置数据
+- `clearEmailData()`: 清空所有邮件配置数据
+
+### 2. 创建了Email消息发送函数 (`src/components/Email/index.ts`)
+
+- `sendEmailMsg()`: 将邮件设置数据保存到store中
+- 格式化数据：支持boolean类型显示为"打开/关闭"，其他类型直接显示值
+- 数据结构：`{ contentIn: "设置描述", content: "category@key@value" }`
+- 避免重复：相同category@key的数据会被更新而不是重复添加
+
+### 3. 修改了Email Setting组件 (`src/components/Email/components/setting.vue`)
+
+- 导入了`sendEmailMsg`函数
+- 为所有设置项的变更事件添加了数据保存调用：
+  - 语言设置：`common@language@value`
+  - 文字大小：`common@fontSize@value`
+  - 邮件数量：`common@emailCount@value`
+  - 邮件选项：`common@checkList@value`
+  - 天气显示：`common@weather@value`
+  - 生日提醒：`common@birthdayRemind@value`
+  - 邮件昵称：`account@nickname@value`
+  - 生日信息：`account@birthYear/birthMonth/birthDay@value`
+  - 生日可见性：`account@birthdayVisible@value`
+  - 默认账户：`account@defaultAccount@value`
+
+### 4. 修改了Email子组件 (`src/components/Email/children/components/skinSettings.vue`)
+
+- 为皮肤设置功能添加了数据保存：
+  - 选择皮肤：`skin@selectedSkin@value`
+  - 应用皮肤：`skin@appliedSkin@value`
+  - 恢复默认：`skin@resetSkin@default`
+
+### 5. 修改了EmailForm组件 (`src/views/paper/question/EmailForm.vue`)
+
+- 导入了`useEmailStore`
+- 添加了`handleEmailForm()`函数，在dialog关闭时从store获取数据
+- 修改了dialog的`@close`事件，绑定到`handleEmailForm`
+- 调整了表格显示：
+  - 将"试题考点"改为"邮件配置"
+  - 将"考点"列改为"配置项"列
+  - 将"权值"列改为"配置值"列
+  - 将"添加"按钮改为"设置"按钮
+
+## 使用流程
+
+1. 用户在EmailForm中点击"设置"按钮
+2. 打开Email组件的设置弹窗
+3. 用户在Email组件中进行各种设置（语言、皮肤、账户等）
+4. 每次设置都会通过`sendEmailMsg()`保存到`emailStore.emailFormList`中
+5. 用户关闭弹窗时，触发`handleEmailForm()`函数
+6. `handleEmailForm()`从store中获取数据并更新外部表格`list.value`
+7. 表格显示格式化的配置信息，如：
+   - "设置邮件界面语言: 中文" | "common@language@zh_cn"
+   - "设置邮件应用皮肤: default" | "skin@appliedSkin@default"
+   - "设置邮件邮件昵称: demo" | "account@nickname@demo"
+
+## 数据格式说明
+
+每个配置项在store中的数据格式：
+
+```javascript
+{
+  contentIn: "设置邮件界面语言: 中文",  // 用户友好的描述
+  content: "common@language@zh_cn"    // 结构化的数据标识
+}
+```
+
+## 测试验证
+
+可以按以下步骤测试功能：
+
+1. 打开EmailForm页面
+2. 点击"邮件配置"标签页中的"设置"按钮
+3. 在Email组件中修改各种设置（语言、皮肤等）
+4. 关闭设置弹窗
+5. 检查外部表格是否显示了相应的配置项
+6. 通过浏览器开发者工具查看console.log输出确认数据保存
+
+这样就完成了Email组件的外部表格保存功能，与Setting组件的实现模式完全一致。