93 lines
3.7 KiB
Markdown
93 lines
3.7 KiB
Markdown
# 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组件的实现模式完全一致。
|