多软件区分:邮件按软件换色+图标+软件名;补提交回执邮件
用户要求:多软件并存时,用「颜色 + 图标 + 名字」三重区分,
邮件也要跟着所属软件变,一眼能看出是哪款软件的来信。
1. software 表加 icon / download_url 字段(幂等迁移)
- icon 存单个字符(emoji / 汉字 / 字母),不存图片路径:
前端与邮件用同一个字符渲染,天然一致,不用再管一套上传与权限
- 没配 icon 时取名首字兜底,任何地方都不出现空图标
- 后台软件编辑加图标快选(12 个常用 emoji)
2. 邮件配色改为跟随软件(fb_mail_brand 取 fb_software_colors)
- 头部色条、按钮、引用块色条、徽标全部跟着软件走
- 邮件头部改为「图标色块 + 软件名」,下面再小字标站点名
- 主题行统一加【软件名】前缀,不点开就能分辨
3. 新增 receipt 事件:提交后立即给提问人发「已收到、待审核、请耐心等待」
- 独立开关 notify.receipt_enabled(与「回复通知」是两件事)
- 新增 7 处调用前的静默 return 也一并写日志
4. reply 邮件补上下文:原提问摘要 + 本次回复,像博客评论通知
5. status=resolved 文案改为「已完成并上线」,配了下载地址时给下载按钮
验证:多软件配色/图标/前缀全部通过(含反向验证),XSS 转义通过,
空图标兜底通过;页面顶栏、页头、选择器图标渲染正确。
This commit is contained in:
@@ -116,6 +116,44 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
|
||||
margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);
|
||||
}
|
||||
|
||||
/* ---------- 软件标识:图标 + 名字(多软件区分的主视觉) ----------
|
||||
* 邮件模板里也有一套等价的 table 写法,两边的观感要对得上:
|
||||
* 圆角色块 + 居中字符 + 紧跟软件名。 */
|
||||
.sw-badge{display:inline-flex; align-items:center; gap:7px; min-width:0; vertical-align:middle}
|
||||
.sw-badge-ic{
|
||||
display:inline-flex; align-items:center; justify-content:center;
|
||||
border-radius:7px; color:#fff; font-weight:600; flex:none;
|
||||
line-height:1; letter-spacing:0; box-shadow:0 1px 2px rgba(15,25,45,.18);
|
||||
}
|
||||
.sw-badge-nm{
|
||||
font-weight:600; font-size:14px; color:var(--fg);
|
||||
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
|
||||
}
|
||||
.sw-badge-sm .sw-badge-nm{font-size:13px}
|
||||
.sw-badge-lg .sw-badge-nm{font-size:17px}
|
||||
/* 页头大标题位置放软件标识:清掉 h1 的行高影响,让图标与文字垂直居中 */
|
||||
.page-h1-sw{margin:0; font-size:0; line-height:0}
|
||||
.page-h1-sw .sw-badge-nm{font-size:22px; font-weight:700; color:var(--fg)}
|
||||
/* 提交页顶部的软件上下文条 */
|
||||
.sw-context{
|
||||
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
|
||||
margin:0 0 16px; padding:11px 14px; border-radius:11px;
|
||||
background:var(--brand-soft); border:1px solid var(--line);
|
||||
}
|
||||
.sw-context .sw-badge-nm{color:var(--fg)}
|
||||
/* 后台软件编辑:图标快选 */
|
||||
.icon-presets{display:flex; gap:4px; flex-wrap:wrap; margin-top:8px}
|
||||
.icon-preset{
|
||||
width:34px; height:34px; border:1px solid var(--line-strong); border-radius:9px;
|
||||
background:var(--card); cursor:pointer; font-size:17px; line-height:1; padding:0;
|
||||
display:inline-flex; align-items:center; justify-content:center;
|
||||
}
|
||||
.icon-preset:hover{border-color:var(--brand); background:var(--brand-soft)}
|
||||
/* 选中态的 chip 里,图标底衬白、字符取软件色,避免同色糊在一起 */
|
||||
.chip.on .sw-badge-ic{background:#fff !important; color:var(--brand) !important; box-shadow:none}
|
||||
.chip.on .sw-badge-nm{color:#fff}
|
||||
.chip .sw-badge-ic{box-shadow:none}
|
||||
|
||||
/* ---------- 主题色选择器 ---------- */
|
||||
.sw-dot{
|
||||
display:inline-block; width:10px; height:10px; border-radius:50%;
|
||||
|
||||
Reference in New Issue
Block a user