标题位置修正:顶栏即「XX反馈系统」,内容区只留图标+软件名

用户指出三处问题:
1. 最上面标题应显示「同步日历反馈系统」,而不是光秃秃的「同步日历」
2. 内容区那个重复的「同步日历反馈系统」不要再要了,
   那里只要「图标 + 同步日历」
3. 内容区下面多了一个裸露的 ?> 字符
4. 图标和标题文字都要再大一点

改动:
- 顶栏改为 fb_software_badge(sw, brand, fb_software_site_title(sw))
  图标 56px、文字 26px,成为页面唯一主标题
- 删除内容区的 h1.page-h1-sw(重复标题)
- 内容区改为 badge(lg):图标 40px + 文字 30px
- 清除 index.php 里多余的 ?> (上次编辑留下的残渣)
- badge 新增 brand 尺寸档与  参数,可覆盖显示文字
- 顶栏高度 72->84px 容纳更大的图标;窄屏仍有降级

验证:顶栏 title/文字正确、已无 page-h1-sw、
无裸露 ?>、内容区只显示「同步日历」、5 处图标全走 media.php
且均为有效 PNG、三个软件页与全部路由 200。
This commit is contained in:
2026-11-03 08:34:03 +08:00
parent 669ab9e43e
commit 82484298e4
6 changed files with 46 additions and 30 deletions
+20 -7
View File
@@ -32,9 +32,17 @@ p{margin:8px 0}
-webkit-backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid var(--line); border-bottom:1px solid var(--line);
} }
.topbar .wrap{display:flex; align-items:center; gap:14px; height:64px} .topbar .wrap{display:flex; align-items:center; gap:14px; height:72px}
.topbar .brand-mini{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--fg); min-width:0} .topbar .brand-mini{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--fg); min-width:0}
.topbar .brand-mini:hover{text-decoration:none; color:var(--fg)} .topbar .brand-mini:hover{text-decoration:none; color:var(--fg)}
/* 顶栏里的软件标识:图标与「XX 反馈系统」一起放大,成为页面主标题 */
.topbar .brand-mini .sw-badge{gap:11px}
.topbar .brand-mini .sw-badge-nm{font-size:22px; font-weight:700}
@media (max-width:560px){
.topbar .wrap{height:62px}
.topbar .brand-mini .sw-badge-nm{font-size:17px}
.topbar .brand-mini .sw-badge-img{width:32px !important; height:32px !important}
}
.topbar .brand-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .topbar .brand-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .logo-mark{ .topbar .logo-mark{
width:30px; height:30px; flex:none; display:block; border-radius:8px; width:30px; height:30px; flex:none; display:block; border-radius:8px;
@@ -130,12 +138,17 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
font-weight:600; font-size:14px; color:var(--fg); font-weight:600; font-size:14px; color:var(--fg);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
} }
.sw-badge-sm .sw-badge-nm{font-size:13.5px} .sw-badge-sm .sw-badge-nm{font-size:14px}
.sw-badge-lg .sw-badge-nm{font-size:26px} .sw-badge-md .sw-badge-nm{font-size:17px}
/* 页头大标题:就是纯文字,不要 h1 的默认行高干扰 */ .sw-badge-lg .sw-badge-nm{font-size:28px; font-weight:700}
.page-h1-sw{margin:0; font-size:inherit; line-height:1.3} /* 顶栏主标题:图标 + 「XX 反馈系统」,要明显大于正文 */
/* 页头副行:图标 + 软件名,紧跟在「XX 反馈系统」下面 */ .sw-badge-brand .sw-badge-nm{font-size:22px; font-weight:700; letter-spacing:.2px}
.page-sw-id{margin-top:8px; display:flex; align-items:center} @media (max-width:560px){
/* 窄屏收一点,避免把「全部问题 / 管理后台」挤掉 */
.sw-badge-brand .sw-badge-nm{font-size:18px}
}
/* 页头副行:图标 + 软件名 */
.page-sw-id{margin:0; display:flex; align-items:center}
/* 提交页顶部的软件上下文条:同样无背景色,只留一行轻分隔 */ /* 提交页顶部的软件上下文条:同样无背景色,只留一行轻分隔 */
.sw-context{ .sw-context{
display:flex; align-items:center; gap:10px; flex-wrap:wrap; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
+5 -7
View File
@@ -86,19 +86,17 @@ fb_layout_head($sw ? fb_software_site_title($sw) : $headTitle, ['software' => $s
<div class="page-head"> <div class="page-head">
<div> <div>
<?php if ($sw): ?>
<h1 class="page-h1-sw"><?php echo e(fb_software_site_title($sw)); ?></h1>
<?php else: ?>
<h1>全部问题</h1>
<?php endif; ?>
<?php <?php
$siteDesc = (string)fb_cfg('site_desc'); $siteDesc = (string)fb_cfg('site_desc');
$swNote = ($sw && !empty($sw['note'])) ? (string)$sw['note'] : ''; $swNote = ($sw && !empty($sw['note'])) ? (string)$sw['note'] : '';
?> ?>
<?php if ($sw): ?> <?php if ($sw): ?>
<div class="page-sw-id"><?php echo fb_software_badge($sw, 'md'); ?></div> <?php /* 内容区只放「图标 + 软件名」,不再重复「XX 反馈系统」——
那个标题已经放到最上面的顶栏里了,两处重复反而啰嗦。 */ ?>
<div class="page-sw-id"><?php echo fb_software_badge($sw, 'lg'); ?></div>
<?php else: ?>
<h1>全部问题</h1>
<?php endif; ?> <?php endif; ?>
?>
<?php if ($siteDesc !== ''): ?><p class="muted"><?php echo e($siteDesc); ?></p><?php endif; ?> <?php if ($siteDesc !== ''): ?><p class="muted"><?php echo e($siteDesc); ?></p><?php endif; ?>
<?php if ($swNote !== ''): ?><p class="muted small" style="margin:2px 0 0"><?php echo e($swNote); ?></p><?php endif; ?> <?php if ($swNote !== ''): ?><p class="muted small" style="margin:2px 0 0"><?php echo e($swNote); ?></p><?php endif; ?>
</div> </div>
+1 -1
View File
@@ -8,7 +8,7 @@ if (!defined('FB_ROOT')) {
define('FB_ROOT', dirname(__DIR__)); define('FB_ROOT', dirname(__DIR__));
// 静态资源版本号:改 assets/ 下的 css/js 后把这个数字 +1, // 静态资源版本号:改 assets/ 下的 css/js 后把这个数字 +1,
// 让浏览器与 CDN 缓存失效。全站只此一处,别再往页面里写死数字。 // 让浏览器与 CDN 缓存失效。全站只此一处,别再往页面里写死数字。
if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 20); } if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 21); }
} }
/* ------------------------------------------------------------------ /* ------------------------------------------------------------------
+6 -5
View File
@@ -52,14 +52,15 @@ function fb_layout_head($title, array $opt = []) {
<header class="topbar"> <header class="topbar">
<div class="wrap"> <div class="wrap">
<?php <?php
/* 顶栏品牌位:当前在哪個软件下,就显示那个软件的「图标 + 名字」, /* 顶栏品牌位:当前在哪个软件下,就显示「图标 + XX 反馈系统」。
* 而不是一直挂着站点大标题 —— 多软件共用一套反馈系统, * 这是页面唯一的主标题 —— 多软件共用一套反馈系统,
* 用户要一眼看清「我现在是在给哪个软件提问题」。 */ * 用户要一眼看清「我现在是在给哪个软件的反馈系统提问题」。
* 内容区不再重复一遍同样的文字,只保留「图标 + 软件名」。 */
$curSw = isset($opt['software']) && is_array($opt['software']) ? $opt['software'] : null; $curSw = isset($opt['software']) && is_array($opt['software']) ? $opt['software'] : null;
?> ?>
<?php if ($curSw): ?> <?php if ($curSw): ?>
<a class="brand-mini" href="./" title="<?php echo e($site); ?>"> <a class="brand-mini" href="./" title="<?php echo e(fb_software_site_title($curSw)); ?>">
<?php echo fb_software_badge($curSw, 'md'); ?> <?php echo fb_software_badge($curSw, 'brand', fb_software_site_title($curSw)); ?>
</a> </a>
<?php else: ?> <?php else: ?>
<a class="brand-mini" href="./" title="<?php echo e($site); ?>"> <a class="brand-mini" href="./" title="<?php echo e($site); ?>">
+13 -9
View File
@@ -326,19 +326,23 @@ function fb_software_icon($software) {
* 🔴 不要背景色:图标本身就是一张图/一个 emoji,再垫一个色块反而糊在一起。 * 🔴 不要背景色:图标本身就是一张图/一个 emoji,再垫一个色块反而糊在一起。
* 直接「图标 + 文字」并排,识别度最高(用户 2026-11-03 明确要求)。 * 直接「图标 + 文字」并排,识别度最高(用户 2026-11-03 明确要求)。
* *
* @param array $sw 软件行 * @param array $sw 软件行
* @param string $size 'sm' | 'md' | 'lg' * @param string $size 'sm' | 'md' | 'lg' | 'brand'(brand = 顶栏主标题)
* @param string $label 覆盖显示文字(默认=软件名)。顶栏用它传「XX 反馈系统」。
*/ */
function fb_software_badge($software, $size = 'md') { function fb_software_badge($software, $size = 'md', $label = '') {
if (!is_array($software) || empty($software['name'])) { return ''; } if (!is_array($software) || empty($software['name'])) { return ''; }
$icon = fb_software_icon($software); $icon = fb_software_icon($software);
$name = (string)$software['name']; $name = $label !== '' ? (string)$label : (string)$software['name'];
/* md 用于页头副行,要跟上方 26px 的标题文字视觉匹配,所以比 sm 明显大一档; /* 尺寸档位:
* lg 只在大标题位置用(现在标题是纯文字,暂时没用到,留着备用)。 */ * sm 软件选择器里的小标签
$px = ['sm' => 18, 'md' => 28, 'lg' => 40]; * md 一般位置
$fs = ['sm' => 14, 'md' => 19, 'lg' => 30]; * lg 内容区「图标 + 软件名」
$box = isset($px[$size]) ? $px[$size] : 28; * brand 顶栏主标题,要显著大于正文,图标与「XX 反馈系统」一起放大 */
$px = ['sm' => 18, 'md' => 26, 'lg' => 38, 'brand' => 46];
$fs = ['sm' => 14, 'md' => 19, 'lg' => 28, 'brand' => 32];
$box = isset($px[$size]) ? $px[$size] : 26;
$fnt = isset($fs[$size]) ? $fs[$size] : 19; $fnt = isset($fs[$size]) ? $fs[$size] : 19;
/* 有上传的图标图片就用图片(管理员自己传的 logo),没有才用字符。 /* 有上传的图标图片就用图片(管理员自己传的 logo),没有才用字符。
+1 -1
View File
@@ -146,7 +146,7 @@ fb_layout_head('我要反馈', ['robots' => 'noindex,follow', 'software' => $sw]
<h1>我要反馈</h1> <h1>我要反馈</h1>
<?php if ($sw): ?> <?php if ($sw): ?>
<div class="sw-context"><?php echo fb_software_badge($sw, 'md'); ?> <div class="sw-context"><?php echo fb_software_badge($sw, 'md'); ?>
<span class="muted small">你正在为这个软件提交反馈</span></div> <span class="muted small">你正在为「<?php echo e(fb_software_site_title($sw)); ?>」提交反馈</span></div>
<?php endif; ?> <?php endif; ?>
<p class="muted">请描述你遇到的问题或想要的功能。提交后会先进入审核,确认为有效问题后才会公开显示;<b>若经确认不是应用的问题,我们会把结论与说明通过邮件发送给你</b>(请填写常用邮箱)。</p> <p class="muted">请描述你遇到的问题或想要的功能。提交后会先进入审核,确认为有效问题后才会公开显示;<b>若经确认不是应用的问题,我们会把结论与说明通过邮件发送给你</b>(请填写常用邮箱)。</p>