标题收到最上顶头,标签下移一行;顶栏标题回当前软件;去掉跨软件引导

用户三个问题:

一、软件名/分类/状态三个标签挤在标题前面,把标题推到右边很难看
  列表页:item-top 里 badges 在前、标题在后 → 标题被挤到右边
  详情页:同一个毛病
  改法(两处一致):
    行1 标题(顶头、独占一行)
    行2 标签(分类/状态;详情页还有软件名)
    行3 摘要 / 作者信息
  列表页新增 .item-head + .item-tags;详情页新增 .subject-head + .subject-tags。
  ⚠️ .item-top 保留 —— admin.php 有三处内部列表还在用,删了后台会塌。

二、顶栏「XX 反馈系统」点完跳首页
  用户:「点完之后应该还是进入这个反馈系统,而不是进到首页。首页没有太大作用,
        只是演示说明用的。正常使用都是每个软件独立,要让用户觉得
        这套反馈系统就是专门为这个软件做的。」
  改法:brand-mini 的 href 从 "./" 改为 fb_software_list_url()。

三、软件内部不该引导去其他软件
  用户:「在一个反馈系统里面,我要反馈、问题列表、左上角那个链接,
        全部都是这个软件相关的内容,跟其他软件没关系。」
  - 提交成功页删掉整个「也可以去其他软件反馈」区块及其 CSS
  - 删掉成功页的「返回首页」按钮(已有「看该软件其他反馈」,重复且无意义)
  - 跨软件只剩顶栏三横线菜单一个入口

验证:列表页/详情页 DOM 顺序均为 标题→标签→作者(实测 item-title 58 < item-tags 171;
subject-title 49 < subject-tags 151 < item-meta 592);
浏览器实测标题 top=282 标签 top=315(列表)、155→194(详情),标签确实在下方;
标题左边缘距卡片边 18/23px,就是卡片自身 padding,没有额外缩进;
顶栏标题 href=index.php?sw=synccalendar,不再指向根路径;全站 8 个路由 200。
This commit is contained in:
2026-11-03 13:43:15 +08:00
parent bec5b09bd6
commit c09a9875a3
6 changed files with 136 additions and 42 deletions
+92 -3
View File
@@ -449,8 +449,21 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
border-radius:13px; padding:15px 17px; box-shadow:var(--shadow); color:inherit; border-radius:13px; padding:15px 17px; box-shadow:var(--shadow); color:inherit;
} }
.item:hover{border-color:var(--brand); text-decoration:none; box-shadow:0 3px 12px rgba(0,87,184,.10)} .item:hover{border-color:var(--brand); text-decoration:none; box-shadow:0 3px 12px rgba(0,87,184,.10)}
/* 列表项:
* 行1 = 标题(顶头、单独一行)
* 行2 = 分类 / 状态 标签
* 行3 = 摘要、缩略图、作者信息
*
* 🔴 用户 2026-11-03:标签别放在标题前面。
* 以前 badges 和标题挤在同一个 flex 行里,标签占掉左边一大截,
* 标题被推到右边、长度不够就换行,很难看。
* 现在标题独占一行、从左边缘开始,标签另起一行。 */
/* ⚠️ .item-top 仍被 admin.php 的三处内部列表使用(后台待审核 / 详情头 / 操作日志)。
* 前台列表已改用 .item-head + .item-tags(标题独占一行),这里保留供后台用。 */
.item-top{display:flex; align-items:center; flex-wrap:wrap; gap:8px} .item-top{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.item-title{font-weight:600; font-size:16px; flex:1; min-width:160px} .item-head{display:flex; align-items:flex-start; gap:8px}
.item-title{font-weight:600; font-size:16px; flex:1; min-width:0; line-height:1.45; word-break:break-word}
.item-tags{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:7px}
.item-ex{color:var(--muted); font-size:14px; margin:8px 0 8px; word-break:break-word} .item-ex{color:var(--muted); font-size:14px; margin:8px 0 8px; word-break:break-word}
.item-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--muted)} .item-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.item-meta .who{color:#3a424d; font-weight:600} .item-meta .who{color:#3a424d; font-weight:600}
@@ -564,7 +577,12 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
/* ---------- 主题 / 回复 ---------- */ /* ---------- 主题 / 回复 ---------- */
.subject{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow)} .subject{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow)}
.subject-title{font-size:21px; margin:0; flex:1; min-width:200px} /* 详情页三段:标题(顶头独占一行)→ 标签行 → 作者信息行。
* 🔴 用户 2026-11-03:软件名/分类/状态这三个标签原来在标题前面,
* 把标题挤到右边去了。现在标题在最上面顶头,标签另起一行放下面。 */
.subject-head{display:flex; align-items:flex-start; gap:10px}
.subject-title{font-size:21px; margin:0; flex:1; min-width:0; line-height:1.4; word-break:break-word}
.subject-tags{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:10px 0 0}
.subject-body{margin-top:14px; white-space:normal; word-break:break-word; line-height:1.85} .subject-body{margin-top:14px; white-space:normal; word-break:break-word; line-height:1.85}
.subject-body br{content:""} .subject-body br{content:""}
@@ -579,7 +597,78 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
.reply-body{word-break:break-word; line-height:1.8} .reply-body{word-break:break-word; line-height:1.8}
/* ---------- 表单 ---------- */ /* ---------- 表单 ---------- */
.narrow{max-width:640px} /* 提交页容器。
* 🔴 原来只有 max-width:640px,**没有居中** —— 在 880px 的内容区里,
* 表单贴左边、右侧空出 240px 白,看起来像"页面缺了一块"。
* 用户 2026-11-03 指出这一点。现在:加 margin 居中,宽度放到 720px,
* 既不至于像正文那么宽(长行难读),也不会显得抠掉一块。 */
.narrow{max-width:720px; margin-left:auto; margin-right:auto}
/* ---------- 提交成功页 ----------
* 用户 2026-11-03:提交完不要跳走,要给回执 + 凭据 + 后续去处。 */
.submitted{
background:var(--card); border:1px solid var(--line);
border-radius:16px; padding:30px 32px 26px; margin-top:14px;
box-shadow:var(--shadow);
text-align:center;
}
.submitted-ok{
width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
background:var(--ok-soft, #e8f6ee); color:var(--ok, #16794a);
font-size:26px; line-height:52px; font-weight:700;
}
.submitted h1{font-size:22px; margin:0 0 10px}
.submitted-lead{
font-size:14px; line-height:1.75; color:var(--muted);
margin:0 auto 20px; max-width:520px;
}
.submitted-lead b{color:var(--fg)}
/* 凭据框:要显眼但不能吓人 —— 用中性浅底 + 等宽字,看起来像"码" */
.token-box{
text-align:left; margin:0 0 22px; padding:15px 16px;
background:var(--bg, #f6f8fb); border:1px solid var(--line);
border-radius:11px;
}
.token-box-hd{
font-size:12.5px; font-weight:700; color:var(--muted);
letter-spacing:.3px; margin-bottom:8px;
}
.token-code{
font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size:14px; font-weight:600; color:var(--fg);
padding:10px 12px; background:var(--card);
border:1px dashed var(--line-strong); border-radius:8px;
word-break:break-all; user-select:all; line-height:1.5;
}
.token-box-tip{
font-size:12.5px; line-height:1.7; color:var(--muted); margin:10px 0 0;
}
.token-box-warn{
font-size:12.5px; line-height:1.7; color:#8a5a10; margin:8px 0 0;
padding:7px 10px; background:#fff8e6; border-radius:6px;
}
.submitted-next{
font-size:13px; color:var(--muted); margin:0 0 10px; text-align:left;
}
.submitted-actions{
display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start;
margin:0 0 22px;
}
/* (已删)submitted-others / submitted-sw ——
* 成功页不再列其他软件的入口,跨软件只有顶栏三横线菜单一个入口。 */
.submitted-credit{
margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line);
font-size:12.5px; color:var(--muted); text-align:left;
word-break:break-all;
}
@media (max-width:600px){
.submitted{padding:24px 18px 20px}
.submitted-actions .btn{flex:1 1 auto; text-align:center}
}
.card-form{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow); margin-top:14px} .card-form{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow); margin-top:14px}
.field{display:block; margin-bottom:16px} .field{display:block; margin-bottom:16px}
.field > span{display:block; font-size:14px; font-weight:600; margin-bottom:6px} .field > span{display:block; font-size:14px; font-weight:600; margin-bottom:6px}
+8 -3
View File
@@ -165,12 +165,17 @@ fb_layout_head($sw ? fb_software_site_title($sw) : $headTitle, ['software' => $s
<?php else: ?> <?php else: ?>
<?php foreach ($threads as $t): ?> <?php foreach ($threads as $t): ?>
<a class="item" href="thread.php?id=<?php echo (int)$t['id']; ?>"> <a class="item" href="thread.php?id=<?php echo (int)$t['id']; ?>">
<div class="item-top"> <?php /* 标题单独占第一行、从最左边顶头开始 ——
<span class="badge cat"><?php echo e(fb_category_label($t['category_id'])); ?></span> 用户 2026-11-03:标签放在标题前面会把标题挤到右边,很难看。
<span class="badge st st-<?php echo e($t['status']); ?>"><?php echo e(fb_status_label($t['status'])); ?></span> 顺序改为「标题 → 标签」:标题在上,分类/状态另起一行。 */ ?>
<div class="item-head">
<span class="item-title"><?php echo e($t['title']); ?></span> <span class="item-title"><?php echo e($t['title']); ?></span>
<span class="item-id" title="问题编号">#<?php echo (int)$t['id']; ?></span> <span class="item-id" title="问题编号">#<?php echo (int)$t['id']; ?></span>
</div> </div>
<div class="item-tags">
<span class="badge cat"><?php echo e(fb_category_label($t['category_id'])); ?></span>
<span class="badge st st-<?php echo e($t['status']); ?>"><?php echo e(fb_status_label($t['status'])); ?></span>
</div>
<p class="item-ex"><?php echo e(fb_excerpt($t['excerpt'], 120)); ?></p> <p class="item-ex"><?php echo e(fb_excerpt($t['excerpt'], 120)); ?></p>
<?php if (!empty($attImgs[(int)$t['id']])): ?> <?php if (!empty($attImgs[(int)$t['id']])): ?>
<div class="thumbs"> <div class="thumbs">
+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', 32); } if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 34); }
} }
/* ------------------------------------------------------------------ /* ------------------------------------------------------------------
+9 -1
View File
@@ -71,7 +71,15 @@ function fb_layout_head($title, array $opt = []) {
list($curSwColor) = fb_software_colors($curSw); list($curSwColor) = fb_software_colors($curSw);
if ($curSwColor === '') { $curSwColor = '#0057B8'; } if ($curSwColor === '') { $curSwColor = '#0057B8'; }
?> ?>
<a class="brand-mini" href="./" <?php /* 🔴 点标题回到**当前软件**的列表,不是回首页。
用户 2026-11-03:「点完之后应该还是进入这个反馈系统,而不是进到首页,
首页其实没有太大作用 —— 它只是演示/说明用的。
正常人用的时候都是每个软件独立使用,要让用户觉得这套反馈系统
就是专门为这个软件做的。」
⇒ 在某个软件的反馈系统里,标题 / 「问题列表」/「我要反馈」
全都只跟这个软件有关,跟其他软件无关。
想切别的软件,只有右上角三横线那一个入口。 */ ?>
<a class="brand-mini" href="<?php echo e(fb_software_list_url($curSw)); ?>"
style="--swc:<?php echo e($curSwColor); ?>" style="--swc:<?php echo e($curSwColor); ?>"
title="<?php echo e(fb_software_site_title($curSw)); ?>"> title="<?php echo e(fb_software_site_title($curSw)); ?>">
<?php echo fb_software_badge($curSw, 'brand', fb_software_site_title($curSw)); ?> <?php echo fb_software_badge($curSw, 'brand', fb_software_site_title($curSw)); ?>
+14 -27
View File
@@ -179,7 +179,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
* 🔴 关键取舍:**不跳转、不用 302**。跳转会让用户失去"我刚提交成功"这一帧, * 🔴 关键取舍:**不跳转、不用 302**。跳转会让用户失去"我刚提交成功"这一帧,
* 而且详情页此刻还是「未公开」状态,跳过去反而像出错了。 * 而且详情页此刻还是「未公开」状态,跳过去反而像出错了。
* 这里直接把成功页渲染出来,把 token 明明白白摆在眼前。 */ * 这里直接把成功页渲染出来,把 token 明明白白摆在眼前。 */
fb_render_submitted($sw, $newId, $trackToken, $form, $swList); fb_render_submitted($sw, $newId, $trackToken, $form);
exit; exit;
} }
} }
@@ -289,7 +289,7 @@ fb_layout_foot();
* 邮件可能进垃圾箱、也可能被误删。把码当场亮出来,用户至少能复制存档, * 邮件可能进垃圾箱、也可能被误删。把码当场亮出来,用户至少能复制存档,
* 不至于彻底失去跟踪能力。这是"唯一凭据",丢了就找不回来(我们不认人)。 * 不至于彻底失去跟踪能力。这是"唯一凭据",丢了就找不回来(我们不认人)。
* ================================================================== */ * ================================================================== */
function fb_render_submitted($sw, $newId, $token, array $form, array $swList) { function fb_render_submitted($sw, $newId, $token, array $form) {
$swName = $sw ? (string)$sw['name'] : ''; $swName = $sw ? (string)$sw['name'] : '';
fb_layout_head('反馈已提交', ['robots' => 'noindex,nofollow', 'software' => $sw]); fb_layout_head('反馈已提交', ['robots' => 'noindex,nofollow', 'software' => $sw]);
?> ?>
@@ -326,38 +326,25 @@ function fb_render_submitted($sw, $newId, $token, array $form, array $swList) {
查看这条反馈 查看这条反馈
</a> </a>
<a class="btn" href="new.php<?php echo $sw ? '?sw=' . e(urlencode((string)$sw['slug'])) : ''; ?>">继续提交一条</a> <a class="btn" href="new.php<?php echo $sw ? '?sw=' . e(urlencode((string)$sw['slug'])) : ''; ?>">继续提交一条</a>
<?php /* 不再放「返回首页」—— 在某个软件的反馈系统里,首页(全局介绍页)
对用户没有意义。要回就回这个软件的问题列表。
想看别的软件,只有右上角三横线一个入口。 */ ?>
<a class="btn" href="<?php echo e(fb_software_list_url($sw)); ?>"> <a class="btn" href="<?php echo e(fb_software_list_url($sw)); ?>">
<?php echo $swName !== '' ? '看看「' . e($swName) . '」的其他反馈' : '返回问题列表'; ?> <?php echo $swName !== '' ? '看看「' . e($swName) . '」的其他反馈' : '返回问题列表'; ?>
</a> </a>
<a class="btn" href="index.php">返回首页</a>
</div> </div>
<?php <?php
/* 其他软件的入口:只列除了当前这个之外的,避免重复 */ /* ⚠️ 这里原来有一个「也可以去其他软件反馈」的列表,已删除。
$others = []; *
foreach ($swList as $s) { * 用户 2026-11-03:「在某个软件的反馈系统里面,什么我要反馈、问题列表、
if ($sw && (int)$s['id'] === (int)$sw['id']) { continue; } * 还有左上角的那个链接,全部都是这个软件相关的内容,跟其他软件没关系 ——
$others[] = $s; * 相对来讲它是独立的。他如果想进别的软件,只有右上角三个横线点开。」
} *
if ($others): * 所以在软件内部(列表 / 详情 / 提交页 / 成功页)都不引导用户去别的软件。
* 唯一的跨软件入口就是顶栏那个三横线菜单。
*/
?> ?>
<div class="submitted-others">
<div class="submitted-others-hd">也可以去其他软件反馈</div>
<div class="submitted-others-list">
<?php foreach ($others as $s): ?>
<?php
list($c) = fb_software_colors($s);
if ($c === '') { $c = '#0057B8'; }
?>
<a class="submitted-sw" href="new.php?sw=<?php echo e(urlencode((string)$s['slug'])); ?>"
style="--swc:<?php echo e($c); ?>">
<?php echo fb_software_chip($s); ?>
<span class="submitted-sw-go">去反馈 →</span>
</a>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<?php <?php
$creditUrl = (string)fb_cfg('footer.credit_url', fb_credit_url_default()); $creditUrl = (string)fb_cfg('footer.credit_url', fb_credit_url_default());
+8 -3
View File
@@ -195,16 +195,21 @@ fb_layout_head(fb_excerpt($thread['title'], 50), ['software' => $thSwForColor]);
<?php endif; ?> <?php endif; ?>
<article class="subject"> <article class="subject">
<div class="item-top">
<?php <?php
$thSw = !empty($thread['software_id']) ? fb_software((int)$thread['software_id']) : null; $thSw = !empty($thread['software_id']) ? fb_software((int)$thread['software_id']) : null;
$thCat = !empty($thread['category_id']) ? fb_category((int)$thread['category_id']) : null; $thCat = !empty($thread['category_id']) ? fb_category((int)$thread['category_id']) : null;
?> ?>
<?php /* 标题在最上面、顶头开始;软件名/分类/状态另起一行放下面。
用户 2026-11-03:这三个标签挤在标题前面,把标题推到右边很难看。
⚠️ 顺序是「行1 标题 → 行2 标签 → 行3 作者信息」,别把标签挪回前面。 */ ?>
<div class="subject-head">
<h1 class="subject-title"><?php echo e($thread['title']); ?></h1>
<span class="item-id" title="问题编号">#<?php echo (int)$id; ?></span>
</div>
<div class="subject-tags">
<?php if ($thSw): ?><?php echo fb_software_chip($thSw); ?><?php endif; ?> <?php if ($thSw): ?><?php echo fb_software_chip($thSw); ?><?php endif; ?>
<?php if ($thCat): ?><span class="badge cat"><?php echo e((string)$thCat['name']); ?></span><?php endif; ?> <?php if ($thCat): ?><span class="badge cat"><?php echo e((string)$thCat['name']); ?></span><?php endif; ?>
<span class="badge st st-<?php echo e($thread['status']); ?>"><?php echo e(fb_status_label($thread['status'])); ?></span> <span class="badge st st-<?php echo e($thread['status']); ?>"><?php echo e(fb_status_label($thread['status'])); ?></span>
<h1 class="subject-title"><?php echo e($thread['title']); ?></h1>
<span class="item-id" title="问题编号">#<?php echo (int)$id; ?></span>
</div> </div>
<div class="item-meta"> <div class="item-meta">
<span class="who"><?php echo e($thread['author_name']); ?></span> <span class="who"><?php echo e($thread['author_name']); ?></span>