3.7 KiB
3.7 KiB
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 - 调整了表格显示：
- 将"试题考点"改为"邮件配置"
- 将"考点"列改为"配置项"列
- 将"权值"列改为"配置值"列
- 将"添加"按钮改为"设置"按钮
使用流程
- 用户在EmailForm中点击"设置"按钮
- 打开Email组件的设置弹窗
- 用户在Email组件中进行各种设置（语言、皮肤、账户等）
- 每次设置都会通过
sendEmailMsg()保存到emailStore.emailFormList中 - 用户关闭弹窗时，触发
handleEmailForm()函数 handleEmailForm()从store中获取数据并更新外部表格list.value- 表格显示格式化的配置信息，如：
- "设置邮件界面语言: 中文" | "common@language@zh_cn"
- "设置邮件应用皮肤: default" | "skin@appliedSkin@default"
- "设置邮件邮件昵称: demo" | "account@nickname@demo"
数据格式说明
每个配置项在store中的数据格式：
{
contentIn: "设置邮件界面语言: 中文", // 用户友好的描述
content: "common@language@zh_cn" // 结构化的数据标识
}
测试验证
可以按以下步骤测试功能：
- 打开EmailForm页面
- 点击"邮件配置"标签页中的"设置"按钮
- 在Email组件中修改各种设置（语言、皮肤等）
- 关闭设置弹窗
- 检查外部表格是否显示了相应的配置项
- 通过浏览器开发者工具查看console.log输出确认数据保存
这样就完成了Email组件的外部表格保存功能，与Setting组件的实现模式完全一致。