feat(ui): 邮件发送测试按钮与底部操作栏融合重构并移除多余提示

This commit is contained in:
xuans 2026-10-18 11:03:33 +08:00
parent 6583725e2c
commit 07fec599e0
5 changed files with 14 additions and 63 deletions

View File

@ -1,10 +1,10 @@
## 2026年10月18日 邮件发送测试按钮与底部操作栏融合重构
- [~] 进行中:针对邮件设置弹窗视觉进行重构,将“测试邮件发送”按钮移到底部操作栏与“保存邮件通知”、“取消”同一排
- [ ] 移除表单中间分割线与多余的 HelpTip 提示文字,保留清晰的错误和成功状态反馈
- [ ] 前端自动化单元测试验证通过
- [ ] 编译打包并部署至第一台 Linux 服务器(8.137.23.95)
- [ ] 通过 Chrome MCP 实机验证
- [✓] 复审通过:针对邮件设置弹窗视觉进行重构,将“测试邮件发送”按钮移到底部操作栏与“保存邮件通知”、“取消”同一排
- [✓] 复审通过:移除表单中间分割线与多余的 HelpTip 提示文字,保留清晰的错误和成功状态反馈
- [✓] 复审通过:前端自动化单元测试验证通过
- [✓] 复审通过:编译打包并部署至第一台 Linux 服务器(8.137.23.95)
- [✓] 复审通过:通过 Chrome MCP 实机验证
## 2026年10月17日 邮件通知设置在线测试与保存门禁需求开发
@ -12,7 +12,7 @@
- [x] 已完成,等待复审:测试通过前保存按钮保持禁用,测试通过后方可激活“保存邮件通知”;若修改了关键发信配置,自动重置测试状态为未验证。
- [x] 已完成,等待复审:后端实现 /api/v1/notification/test 路由与安全权限校验(超管权限,支持传入即时配置与凭证执行联通性与真实发信测试)。
- [x] 已完成,等待复审:前端交互与测试状态联动实现,增加测试中加载状态、测试结果通知与错误提示。
- [~] 进行中:编译构建并部署到第一台 Linux 生产服务器(8.137.23.95),Chrome 浏览器实操验证。
- [✓] 复审通过:编译构建并部署到第一台 Linux 生产服务器(8.137.23.95),Chrome 浏览器实操验证。
## 2026年10月17日 邮件模板美化与Linux生产主服务热部署

View File

@ -1,11 +1,11 @@
## 2026年10月18日 邮件发送测试按钮与底部操作栏融合重构
- [~] 邮件发送测试按钮样式与布局重构:将“测试邮件发送”按钮移到底部与“保存邮件通知”、“取消”同一排,移除表单中间分割线与底部多余提示
- [ ] 优化状态反馈与错误提示,保持与弹窗底部主副按钮一致的规范样式
- [ ] 运行前端单元测试全量验证
- [ ] 编译构建前端并部署至第一台 Linux 生产服务器(8.137.23.95)
- [ ] Chrome MCP 浏览器实机验证界面效果
- [ ] 提交并双重推送 Git 远端仓库
- [✓] 邮件发送测试按钮样式与布局重构:将“测试邮件发送”按钮移到底部与“保存邮件通知”、“取消”同一排,移除表单中间分割线与底部多余提示
- [✓] 优化状态反馈与错误提示,保持与弹窗底部主副按钮一致的规范样式
- [✓] 运行前端单元测试全量验证
- [✓] 编译构建前端并部署至第一台 Linux 生产服务器(8.137.23.95)
- [✓] Chrome MCP 浏览器实机验证界面效果
- [✓] 提交并双重推送 Git 远端仓库
## 2026年10月18日 新建托管域名默认勾选第一台生产测试服务器

View File

@ -76,36 +76,6 @@
margin-bottom: 0;
}
.mail-test-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px dashed #dce6f1;
}
.mail-verification-status {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.mail-verification-status.pending {
background: #fff1f2;
color: #e11d48;
border: 1px solid #fecdd3;
}
.mail-verification-status.verified {
background: #f0fdf4;
color: #16a34a;
border: 1px solid #bbf7d0;
}
.mail-form-error {
margin-top: 8px;
color: #dc2626;

View File

@ -67,28 +67,8 @@ function handleTest() {
/>
</label>
<div v-if="notification.smtp_enabled" class="mail-test-actions">
<button
class="secondary-button"
type="button"
:disabled="mailTesting"
@click="handleTest"
>
{{ mailTesting ? "正在测试发信……" : "测试邮件发送" }}
</button>
<span
class="mail-verification-status"
:class="mailVerified ? 'verified' : 'pending'"
>
{{ mailVerified ? "已通过测试" : "待在线测试" }}
</span>
</div>
<p v-if="mailTestError" class="form-error mail-form-error">{{ mailTestError }}</p>
<p v-if="mailTestSuccess" class="form-success mail-form-success">{{ mailTestSuccess }}</p>
<HelpTip v-if="notification.smtp_enabled && !mailVerified">
保存邮件通知设置前,必须先点击“测试邮件发送”并通过在线测试验证。
</HelpTip>
</fieldset>
</div>
</template>

View File

@ -400,7 +400,8 @@ const { activeSection, submitSettings, navigateTabs } = useSettingsModal(saveSet
@test-mail="testMail"
/>
<div class="modal-actions">
<button class="secondary-button" type="button" :disabled="settingsSaving" @click="closeSettings">取消</button>
<button v-if="settingsForm.notification.smtp_enabled" class="secondary-button" type="button" :disabled="mailTesting || settingsSaving" @click="testMail">{{ mailTesting ? "正在测试发信……" : "测试邮件发送" }}</button>
<button class="secondary-button" type="button" :disabled="settingsSaving" @click="closeSettings">取消</button>
<button class="primary-button" type="button" :disabled="settingsSaving || !mailReadyToSave" @click="submitSettings">{{ settingsSaving ? "保存中……" : "保存邮件通知" }}</button>
</div>
</section>