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