修复图标显示不出来;标题改XX反馈系统;图标去掉背景色

一、图标显示不出来(根因)
用户上传图标时用的是修复前的代码,数据库里 icon_key 存的是
icons/2026/11/xxx.png —— 没有 local/ 也没有 oss.prefix 前缀。
上一轮我把键校验收紧成「必须带存储前缀」,于是这些键被判非法,
fb_icon_url() 返回空字符串,图标自然显示不出来。
而三个文件其实都真实存在于 OSS 上(13KB / 391KB / 379KB)。

修法两层:
1. fb_icon_key_ok / fb_icon_is_key 兼容历史无前缀形态,
   这些是有效资产,不能因为键格式不规范就让图标消失
2. 数据迁移:把对象复制到 feedlite/icons/… 并把数据库键改成规范形态,
   已对三个软件全部执行并验证(新键 200,大小与源文件一致)

二、标题改为「XX 反馈系统」
- 页头大标题 = 同步日历反馈系统(之前只有「同步日历」)
- 浏览器标签同步改
- 软件名本身含「反馈」时不叠加,避免「轻反馈反馈系统」

三、图标不要背景色
- 去掉色块底衬与圆角投影,直接「图标 + 文字」并排
- 前端 badge、提交页上下文条、邮件头部三处同步
- md 尺寸调到 28px,与 26px 标题文字视觉匹配

验证:三个软件页标题正确、图标全部 200 image/png、
全部页面 200、迁移后新键可读且大小一致。
This commit is contained in:
2026-11-03 08:27:03 +08:00
parent 872baf4153
commit 669ab9e43e
6 changed files with 81 additions and 43 deletions
+18 -17
View File
@@ -117,28 +117,29 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
}
/* ---------- 软件标识:图标 + 名字(多软件区分的主视觉) ----------
* 邮件模板里也有一套等价的 table 写法,两边的观感要对得上:
* 圆角色块 + 居中字符 + 紧跟软件名。 */
* 🔴 一律不要背景色:图标本身就是一张图/一个 emoji,再垫一个色块会糊在一起,
* 反而看不清。直接「图标 + 文字」并排是识别度最高的做法。
* 邮件模板里有等价的 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);
flex:none; line-height:1; letter-spacing:0;
background:none; border:0; box-shadow:none;
}
.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-badge-sm .sw-badge-nm{font-size:13.5px}
.sw-badge-lg .sw-badge-nm{font-size:26px}
/* 页头大标题:就是纯文字,不要 h1 的默认行高干扰 */
.page-h1-sw{margin:0; font-size:inherit; line-height:1.3}
/* 页头副行:图标 + 软件名,紧跟在「XX 反馈系统」下面 */
.page-sw-id{margin-top:8px; display:flex; align-items:center}
/* 提交页顶部的软件上下文条:同样无背景色,只留一行轻分隔 */
.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);
margin:0 0 16px; padding:0 0 12px; border-bottom:1px solid var(--line);
}
.sw-context .sw-badge-nm{color:var(--fg)}
/* 后台软件编辑:图标快选 */
@@ -152,9 +153,10 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
/* ---------- 软件图标(上传图片) ---------- */
/* 图标图片:外框与字符版完全一致,换图不会让布局跳动 */
/* 图标图片:不留背景、不加圆角底衬,直接贴图 */
.sw-badge-img{
display:inline-block; border-radius:7px; object-fit:cover; flex:none;
box-shadow:0 1px 2px rgba(15,25,45,.18); background:var(--card);
display:inline-block; object-fit:contain; flex:none;
background:none; border:0; box-shadow:none;
}
.chip.on .sw-badge-img{box-shadow:0 0 0 1px rgba(255,255,255,.5)}
/* 后台图标上传行 */
@@ -171,10 +173,9 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
}
.icon-up-main{flex:1; min-width:220px; display:flex; flex-direction:column}
.icon-up-main input[type=file]{font-size:13.5px; max-width:100%}
/* 选中态的 chip 里,图标底衬白、字符取软件色,避免同色糊在一起 */
.chip.on .sw-badge-ic{background:#fff !important; color:var(--brand) !important; box-shadow:none}
/* chip 里也不用白底反色了 —— 图标本来就没有底色 */
.chip.on .sw-badge-nm{color:#fff}
.chip .sw-badge-ic{box-shadow:none}
.chip .sw-badge-ic{background:none !important; color:inherit !important; box-shadow:none}
/* ---------- 主题色选择器 ---------- */
.sw-dot{