-
+
diff --git a/assets/app.js b/assets/app.js
index 8fca85d..7a1a530 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -808,15 +808,20 @@
function bindSoftwarePanel() {
var btn = document.getElementById('swToggle');
var panel = document.getElementById('swPanel');
+ var mask = document.getElementById('swMask');
if (!btn || !panel) { return; }
function open() {
panel.hidden = false;
+ if (mask) { mask.hidden = false; }
btn.setAttribute('aria-expanded', 'true');
+ document.body.style.overflow = 'hidden'; // 抽屉开着时锁住背景滚动
}
function close() {
panel.hidden = true;
+ if (mask) { mask.hidden = true; }
btn.setAttribute('aria-expanded', 'false');
+ document.body.style.overflow = '';
}
function toggle() {
if (panel.hidden) { open(); } else { close(); }
@@ -827,7 +832,15 @@
toggle();
});
- // 点面板内部不算「点外部」
+ // 点遮罩关闭（遮罩就是「下面的内容」，点了就是点外部）
+ if (mask) {
+ mask.addEventListener('click', function (e) {
+ e.stopPropagation();
+ close();
+ });
+ }
+
+ // 点面板内部不算点外部
panel.addEventListener('click', function (e) { e.stopPropagation(); });
document.addEventListener('click', function () {
@@ -837,6 +850,11 @@
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && !panel.hidden) { close(); btn.focus(); }
});
+
+ // 转到别的页面时把滚动锁解掉，避免返回后页面不能滚
+ window.addEventListener('pagehide', function () {
+ document.body.style.overflow = '';
+ });
}
/* ---------- 邮件测试发送（后台设置页） ---------- */
diff --git a/assets/style.css b/assets/style.css
index b2b0c87..fc31624 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -31,6 +31,7 @@ p{margin:8px 0}
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid var(--line);
+ /* 软件抽屉是 absolute + top:100%，需要它来做定位参照，否则会跑到页面最上面 */
}
.topbar .wrap{display:flex; align-items:center; gap:14px; height:66px}
.topbar .brand-mini{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--fg); min-width:0}
@@ -64,34 +65,46 @@ p{margin:8px 0}
.sw-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.sw-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
+/* ---------- 软件抽屉：一律竖排浮层，覆盖在正文之上 ----------
+ * 用户 2026-11-03：「都保持统一，点了之后下拉出来一个条一个条竖着排列，
+ * 把下面的内容全部盖住」。
+ * 早期实现是宽屏横排、窄屏竖排两套，结果手机上会跟正文撞在一起；
+ * 现在只有一种形态：绝对定位的浮卡，overlay 盖住页面内容。 */
.sw-panel{
- border-top:1px solid var(--line);
+ position:absolute; left:0; right:0; top:100%;
+ z-index:60;
background:var(--card);
- box-shadow:0 8px 20px -12px rgba(20,30,50,.18);
+ border-top:1px solid var(--line);
+ border-bottom:1px solid var(--line);
+ box-shadow:0 18px 40px -12px rgba(20,30,50,.28);
+ max-height:calc(100vh - 66px);
+ overflow:auto;
}
-.sw-panel .wrap{padding-top:14px; padding-bottom:16px}
+.sw-panel .wrap{padding-top:14px; padding-bottom:14px}
.sw-panel-hd{
- font-size:13.5px; font-weight:600; color:var(--muted);
- margin-bottom:10px; letter-spacing:.2px;
+ font-size:13px; font-weight:600; color:var(--muted);
+ margin-bottom:8px; letter-spacing:.2px;
}
+/* 永远竖排：一条一行，不再有宽屏横排分支 */
.sw-panel-list{display:flex; flex-direction:column; gap:2px}
.sw-item{
display:flex; align-items:center; gap:10px;
- padding:9px 10px; border-radius:10px; color:var(--fg);
+ padding:10px 12px; border-radius:10px; color:var(--fg);
+ border:1px solid transparent;
}
.sw-item:hover{background:var(--bg, #f6f8fb); text-decoration:none; color:var(--fg)}
-.sw-item.on{background:var(--brand-soft)}
-.sw-item.on .sw-badge-nm{color:var(--brand); font-weight:700}
+.sw-item.on{background:var(--brand-soft); border-color:var(--brand-soft)}
+.sw-item.on .sw-badge-nm{font-weight:700}
.sw-item-cur{
margin-left:auto; font-size:11.5px; font-weight:600; color:var(--brand);
background:var(--card); border:1px solid var(--brand);
padding:1px 8px; border-radius:99px;
}
-@media (min-width:561px){
- .sw-panel-list{flex-direction:row; flex-wrap:wrap; gap:8px}
- .sw-item{padding:7px 12px; border:1px solid var(--line)}
- .sw-item.on{border-color:var(--brand)}
- .sw-item-cur{margin-left:4px}
+
+/* 抽屉打开时给正文加一层遮罩，点它也能关 —— 视觉上更明确「盖住了」 */
+.sw-mask{
+ position:fixed; inset:0; z-index:55;
+ background:rgba(15,23,35,.18);
}
.topbar .brand-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .logo-mark{
@@ -191,10 +204,12 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
.sw-badge-sm .sw-badge-nm{font-size:14px}
.sw-badge-md .sw-badge-nm{font-size:16px; font-weight:600}
/* 内容区：只是软件标识，字号刻意小于顶栏标题（17px），
- * 避免「上面的字比下面的小」这种主次颠倒。 */
-.sw-badge-lg .sw-badge-nm{font-size:15px; font-weight:600}
-/* 顶栏主标题：比「选择软件」标签(13.5px)大两号 = 17px，且大于内容区的 15px */
-.sw-badge-brand .sw-badge-nm{font-size:17px; font-weight:700; letter-spacing:.2px}
+ * 避免「上面的字比下面的小」这种主次颠倒。颜色同样跟随软件主题色。 */
+.sw-badge-lg .sw-badge-nm{font-size:15px; font-weight:600; color:var(--swc, var(--fg))}
+/* 顶栏主标题：比「选择软件」标签(13.5px)大两号 = 17px，且大于内容区的 15px。
+ * 颜色跟随软件主题色（--swc 由 PHP 内联写到 .brand-mini 上），
+ * 让「同步日历」「密码生成器」这些标题一眼可辨。 */
+.sw-badge-brand .sw-badge-nm{font-size:17px; font-weight:700; letter-spacing:.2px; color:var(--swc, var(--fg))}
/* 页头副行：图标 + 软件名 */
.page-sw-id{margin:0; display:flex; align-items:center}
/* 提交页顶部的软件上下文条：同样无背景色，只留一行轻分隔 */
@@ -422,7 +437,20 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
.badge.st-closed{background:#f1f3f5; color:#8a929c}
.badge.official{background:var(--brand); color:#fff}
/* 软件徽章：比分类更"重"，一眼看出属于哪个软件 */
-.badge.sw{background:#eef2f8; color:#2b4a74; border:1px solid #cfdcee; font-weight:600}
+/* 软件徽标：每个软件用自己的主题色 + 图标，方便一眼区分是哪个软件。
+ * 颜色由 PHP 内联写入（--swc / --swc-soft），这里只管形态。 */
+.badge.sw{
+ display:inline-flex; align-items:center; gap:5px;
+ background:var(--swc-soft, #eef2f8); color:var(--swc, #2b4a74);
+ border:1px solid var(--swc-line, #cfdcee); font-weight:600;
+ padding:1px 9px 1px 6px;
+}
+.badge.sw .badge-sw-ic{
+ display:inline-flex; align-items:center; justify-content:center;
+ width:15px; height:15px; flex:none; line-height:1;
+}
+.badge.sw .badge-sw-ic img{width:15px; height:15px; display:block; object-fit:contain}
+.badge.sw .badge-sw-nm{white-space:nowrap}
.badge.st-wontfix{background:#f6eef0; color:#a13c53}
/* ---------- 分页 ---------- */
diff --git a/index.php b/index.php
index 21e3c20..51c610c 100644
--- a/index.php
+++ b/index.php
@@ -87,17 +87,23 @@ fb_layout_head($sw ? fb_software_site_title($sw) : $headTitle, ['software' => $s
1): ?>
+
+
 . ')
';
+ } else {
+ $icHtml = '';
+ }
+ }
+
+ return ''
+ . $icHtml
+ . '' . e($name) . ''
+ . '';
+}
+
+/** 把主色调淡成浅底（与主色同色系，避免灰化） */
+function fb_color_soft($hex) {
+ $rgb = fb_hex_to_rgb($hex);
+ if (!$rgb) { return '#eef2f8'; }
+ return sprintf('#%02x%02x%02x',
+ (int)round($rgb[0] + (255 - $rgb[0]) * 0.90),
+ (int)round($rgb[1] + (255 - $rgb[1]) * 0.90),
+ (int)round($rgb[2] + (255 - $rgb[2]) * 0.90));
+}
+
+/** 把主色调成描边色（略深于浅底） */
+function fb_color_line($hex) {
+ $rgb = fb_hex_to_rgb($hex);
+ if (!$rgb) { return '#cfdcee'; }
+ return sprintf('#%02x%02x%02x',
+ (int)round($rgb[0] + (255 - $rgb[0]) * 0.72),
+ (int)round($rgb[1] + (255 - $rgb[1]) * 0.72),
+ (int)round($rgb[2] + (255 - $rgb[2]) * 0.72));
+}
+
+/** #rrggbb -> [r,g,b]，非法返回 null */
+function fb_hex_to_rgb($hex) {
+ $h = ltrim((string)$hex, '#');
+ if (strlen($h) === 3) { $h = $h[0].$h[0].$h[1].$h[1].$h[2].$h[2]; }
+ if (!preg_match('/^[0-9a-fA-F]{6}$/', $h)) { return null; }
+ return [hexdec(substr($h, 0, 2)), hexdec(substr($h, 2, 2)), hexdec(substr($h, 4, 2))];
+}
+
/** 某软件下的分类；不传软件则返回空数组 */
function fb_categories($softwareId = null, $onlyEnabled = true) {
if ($softwareId === null) { return []; }
diff --git a/thread.php b/thread.php
index d6e9904..ee36629 100644
--- a/thread.php
+++ b/thread.php
@@ -161,7 +161,7 @@ fb_layout_head(fb_excerpt($thread['title'], 50), ['software' => $thSwForColor]);
$thSw = !empty($thread['software_id']) ? fb_software((int)$thread['software_id']) : null;
$thCat = !empty($thread['category_id']) ? fb_category((int)$thread['category_id']) : null;
?>
-
+
-
+
+
我要反馈
diff --git a/lib/layout.php b/lib/layout.php
index 991f93f..988c45e 100644
--- a/lib/layout.php
+++ b/lib/layout.php
@@ -64,7 +64,16 @@ function fb_layout_head($title, array $opt = []) {
$swList = fb_softwares(true);
?>
-
+
+
@@ -91,6 +100,9 @@ function fb_layout_head($title, array $opt = []) {
全部问题
-选择软件
diff --git a/lib/util.php b/lib/util.php
index c1603ee..333a475 100644
--- a/lib/util.php
+++ b/lib/util.php
@@ -335,19 +335,21 @@ function fb_software_badge($software, $size = 'md', $label = '') {
$icon = fb_software_icon($software);
$name = $label !== '' ? (string)$label : (string)$software['name'];
- /* 尺寸档位（以「选择软件」标签的 13.5px 为基准，逐档放大）：
- * sm 18px 图标 / 14px 字 软件选择器里的小标签
- * md 26px 图标 / 19px 字 「选择软件」抽屉里的条目
- * lg 40px 图标 / 22px 字 内容区「图标 + 软件名」
- * brand 32px 图标 / 17px 字 顶栏主标题
+ /* 尺寸档位（以「选择软件」标签的 13.5px 为基准）：
+ * sm 18px 图标 / 14px 字 小标签
+ * md 24px 图标 / 16px 字 抽屉里的条目
+ * lg 24px 图标 / 15px 字 内容区「图标 + 软件名」
+ * brand 30px 图标 / 17px 字 顶栏主标题
*
- * 🔴 用户明确指出：顶栏标题的字号「比下面还小」是错的，但给到 26px 又太大。
- * 折中标准 = 比「选择软件」那个 13.5px 标签大两号 ≈ 17px。
- * 图标同比缩到 32px，别让图标压过文字。 */
- $px = ['sm' => 18, 'md' => 26, 'lg' => 40, 'brand' => 32];
- $fs = ['sm' => 14, 'md' => 19, 'lg' => 22, 'brand' => 17];
- $box = isset($px[$size]) ? $px[$size] : 26;
- $fnt = isset($fs[$size]) ? $fs[$size] : 19;
+ * 🔴 两条硬约束（都踩过）：
+ * 1. 顶栏标题 = 比「选择软件」的 13.5px 大两号 ≈ 17px，不要再放大到 26px；
+ * 2. **顶栏必须比内容区大**。之前顶栏 26px、内容区 30px，
+ * 主次直接颠倒，看着就是「上面的字比下面的小」。
+ * 现在 17 > 15，层级正确；内容区只是标识，不该抢标题的戏。 */
+ $px = ['sm' => 18, 'md' => 24, 'lg' => 24, 'brand' => 30];
+ $fs = ['sm' => 14, 'md' => 16, 'lg' => 15, 'brand' => 17];
+ $box = isset($px[$size]) ? $px[$size] : 24;
+ $fnt = isset($fs[$size]) ? $fs[$size] : 16;
/* 有上传的图标图片就用图片（管理员自己传的 logo），没有才用字符。
* 两者外框尺寸一致，换用图片不会让布局跳动。 */
@@ -386,6 +388,70 @@ function fb_software_site_title($software) {
return $name . '反馈系统';
}
+/**
+ * 软件徽标（后台/前台的小标签）—— 带图标，且用该软件自己的主题色。
+ *
+ * 为什么不复用 .badge 的固定蓝色：每个软件都配了主题色，
+ * 徽标却一律蓝色，等于把「颜色区分软件」这条设计浪费掉了。
+ *
+ * @param array $sw 软件行
+ * @param bool $icon 是否显示图标（默认显示）
+ */
+function fb_software_chip($sw, $withIcon = true) {
+ if (!is_array($sw) || empty($sw['name'])) { return ''; }
+ $name = (string)$sw['name'];
+
+ list($c) = fb_software_colors($sw);
+ if ($c === '') { $c = '#0057B8'; }
+ $soft = fb_color_soft($c); // 同色系浅底
+ $line = fb_color_line($c); // 同色系描边
+
+ $icHtml = '';
+ if ($withIcon) {
+ $imgKey = isset($sw['icon_key']) ? trim((string)$sw['icon_key']) : '';
+ $imgUrl = $imgKey !== '' ? fb_icon_url($imgKey, 30) : '';
+ if ($imgUrl !== '') {
+ $icHtml = '';
+ } else {
+ $icHtml = '';
+ }
+ }
+
+ return ''
+ . $icHtml
+ . '' . e($name) . ''
+ . '';
+}
+
+/** 把主色调淡成浅底（与主色同色系，避免灰化） */
+function fb_color_soft($hex) {
+ $rgb = fb_hex_to_rgb($hex);
+ if (!$rgb) { return '#eef2f8'; }
+ return sprintf('#%02x%02x%02x',
+ (int)round($rgb[0] + (255 - $rgb[0]) * 0.90),
+ (int)round($rgb[1] + (255 - $rgb[1]) * 0.90),
+ (int)round($rgb[2] + (255 - $rgb[2]) * 0.90));
+}
+
+/** 把主色调成描边色（略深于浅底） */
+function fb_color_line($hex) {
+ $rgb = fb_hex_to_rgb($hex);
+ if (!$rgb) { return '#cfdcee'; }
+ return sprintf('#%02x%02x%02x',
+ (int)round($rgb[0] + (255 - $rgb[0]) * 0.72),
+ (int)round($rgb[1] + (255 - $rgb[1]) * 0.72),
+ (int)round($rgb[2] + (255 - $rgb[2]) * 0.72));
+}
+
+/** #rrggbb -> [r,g,b]，非法返回 null */
+function fb_hex_to_rgb($hex) {
+ $h = ltrim((string)$hex, '#');
+ if (strlen($h) === 3) { $h = $h[0].$h[0].$h[1].$h[1].$h[2].$h[2]; }
+ if (!preg_match('/^[0-9a-fA-F]{6}$/', $h)) { return null; }
+ return [hexdec(substr($h, 0, 2)), hexdec(substr($h, 2, 2)), hexdec(substr($h, 4, 2))];
+}
+
/** 某软件下的分类；不传软件则返回空数组 */
function fb_categories($softwareId = null, $onlyEnabled = true) {
if ($softwareId === null) { return []; }
diff --git a/thread.php b/thread.php
index d6e9904..ee36629 100644
--- a/thread.php
+++ b/thread.php
@@ -161,7 +161,7 @@ fb_layout_head(fb_excerpt($thread['title'], 50), ['software' => $thSwForColor]);
$thSw = !empty($thread['software_id']) ? fb_software((int)$thread['software_id']) : null;
$thCat = !empty($thread['category_id']) ? fb_category((int)$thread['category_id']) : null;
?>
-
+