From 82f4fa3c4957d150890e420fe7db09ce0401af32 Mon Sep 17 00:00:00 2001 From: laoyang Date: Tue, 3 Nov 2026 15:21:41 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E6=A0=8F=E5=9B=BE=E6=A0=87=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E4=B8=8E=E3=80=8C=E6=A0=87=E9=A2=98+=E7=AE=80?= =?UTF-8?q?=E4=BB=8B=E3=80=8D=E6=95=B4=E4=BD=93=E5=9E=82=E7=9B=B4=E5=B1=85?= =?UTF-8?q?=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户：「图标应该在标题和它的简介的正中间…现在图标和上面的标题是对齐的， 把图标往下放一放，让标题和它下面的简介合起来和图标高度一样， 两个对齐上下。」 根因是结构问题，不是调 padding 能解决的： 以前图标和标题被 fb_software_badge() 包在同一个 .sw-badge 里（单行结构）， note 挂在它外面下面一层 ⇒ 图标天然只能对齐第一行文字，永远做不到两行居中。 改结构为「左图标 + 右文字列」两栏： 图标 ← flex:none 30×30 ← flex column 标题 简介 外层 .brand-mini 用 align-items:center ⇒ 图标中线对齐文字列中线。 图标不再走 fb_software_badge()，改用 fb_software_icon() / icon_key 自己拼， 因为 badge 那个函数是把图标和名字绑死在一行的。 实测中线偏差： 桌面 1280：图标 18→48（中线 33.0），文字列 13.8→52.2（中线 33.0）→ 偏差 0.0px 手机 390：图标 17→43（中线 30.0），文字列 12.3→47.7（中线 30.0）→ 偏差 0.0px 首页（无软件时）仍是原来的 logo-mark + brand-text，未受影响；6 个路由全 200。 --- assets/style.css | 51 +++++++++++++++++++++++++++++++++++++---------- lib/bootstrap.php | 2 +- lib/layout.php | 30 ++++++++++++++++++++++------ 3 files changed, 65 insertions(+), 18 deletions(-) diff --git a/assets/style.css b/assets/style.css index 8959e5a..e24a1e2 100644 --- a/assets/style.css +++ b/assets/style.css @@ -34,20 +34,44 @@ p{margin:8px 0} /* 软件抽屉是 absolute + top:100%，需要它来做定位参照，否则会跑到页面最上面 */ } .topbar .wrap{display:flex; align-items:center; gap:14px; min-height:66px; padding-top:9px; padding-bottom:9px; position:relative; box-sizing:border-box} -/* 顶栏品牌位：两行结构 - * 行1 = 图标 + 「XX 反馈系统」（软件主题色，17px） - * 行2 = 一句话简介（灰色 12.5px），只在有 note 时出现 - * 🔴 用户 2026-11-03：简介从内容区挪到这里，用灰色。 - * 内容区那一行（标题+简介+我要反馈）与新顶栏完全重复，已删除。 */ -.topbar .brand-mini{display:flex; flex-direction:column; align-items:flex-start; gap:1px; font-weight:700; font-size:17px; color:var(--fg); min-width:0; line-height:1.25} +/* 顶栏品牌位：**左图标 + 右文字列**两栏 + * + * [📅] 同步日历反馈系统 ← 文字列 + * 优秀的鸿蒙CalDav同步客户端 + * + * 🔴 用户 2026-11-03：「图标应该在标题和简介的正中间… + * 让标题和它下面的简介合起来和图标高度一样，两个对齐上下。」 + * ⇒ 图标的垂直中线要与**两行文字整体**的中线重合，不是只对齐第一行。 + * + * ⚠️ 关键在 align-items:center 作用在「图标 vs 文字列」这一层： + * 图标是 .brand-ic，文字列是 .brand-txt（内部再上下排 title/note）。 + * 以前图标和标题被包在同一个 .sw-badge 里（单行结构）， + * note 挂在它下面，图标天然只能对齐第一行 —— 那种结构做不到居中。 + */ +.topbar .brand-mini{display:flex; flex-direction:row; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--fg); min-width:0; line-height:1.25} .topbar .brand-mini:hover{text-decoration:none; color:var(--fg)} -.topbar .brand-mini-row{display:flex; align-items:center; gap:10px; min-width:0} +/* 图标：固定 30×30 的方框，自身内容居中，不参与文字行高计算 */ +.topbar .brand-ic{ + width:30px; height:30px; flex:none; + display:flex; align-items:center; justify-content:center; + border-radius:9px; overflow:hidden; +} +.topbar .brand-ic img{width:30px; height:30px; object-fit:contain; display:block; border-radius:9px} +.topbar .brand-ic-ch{ + font-size:17px; line-height:1; color:var(--swc, var(--brand)); font-weight:700; +} +/* 文字列：上下两行，自己成一组 */ +.topbar .brand-txt{display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0} +.topbar .brand-title{ + font-size:17px; font-weight:700; letter-spacing:.2px; line-height:1.25; + color:var(--swc, var(--brand)); + overflow:hidden; text-overflow:ellipsis; white-space:nowrap; +} .topbar .brand-mini-note{ font-size:12.5px; font-weight:400; color:var(--muted); - line-height:1.35; max-width:520px; + line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; - /* 与标题文字左对齐：让简介从图标右侧开始，而不是贴到图标左侧 */ - padding-left:41px; + max-width:520px; } /* 顶栏里的软件标识：17px 字 + 32px 图标 —— * 比「选择软件」标签(13.5px)大两号，又不至于压过内容区标题。 */ @@ -55,10 +79,15 @@ p{margin:8px 0} .topbar .brand-mini .sw-badge-nm{font-size:17px; font-weight:700; letter-spacing:.2px} @media (max-width:560px){ .topbar .wrap{min-height:60px; padding-top:8px; padding-bottom:8px} + .topbar .brand-mini{font-size:15.5px; gap:8px} + .topbar .brand-ic{width:26px; height:26px} + .topbar .brand-ic img{width:26px; height:26px} + .topbar .brand-ic-ch{font-size:15px} + .topbar .brand-title{font-size:15.5px} + .topbar .brand-mini-note{font-size:11.5px; max-width:60vw} .topbar .brand-mini .sw-badge-nm{font-size:15.5px} .topbar .brand-mini .sw-badge-img{width:26px !important; height:26px !important} .topbar .brand-mini .sw-badge{gap:7px} - .topbar .brand-mini-note{font-size:11.5px; padding-left:33px; max-width:60vw} } /* ---------- 右上角三横线按钮 + 下拉菜单 ---------- */ diff --git a/lib/bootstrap.php b/lib/bootstrap.php index 76ec665..0ca8cad 100644 --- a/lib/bootstrap.php +++ b/lib/bootstrap.php @@ -8,7 +8,7 @@ if (!defined('FB_ROOT')) { define('FB_ROOT', dirname(__DIR__)); // 静态资源版本号：改 assets/ 下的 css/js 后把这个数字 +1， // 让浏览器与 CDN 缓存失效。全站只此一处，别再往页面里写死数字。 - if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 35); } + if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 36); } } /* ------------------------------------------------------------------ diff --git a/lib/layout.php b/lib/layout.php index 3f39e7b..be20ccf 100644 --- a/lib/layout.php +++ b/lib/layout.php @@ -85,16 +85,34 @@ function fb_layout_head($title, array $opt = []) { * 那个「同步日历反馈系统」下面那个位置，用个灰色的。」 * 这样内容区就不用再重复一遍标题和简介了。 */ $swNoteTop = !empty($curSw['note']) ? trim((string)$curSw['note']) : ''; + /* 图标要单独拿出来放在左边，才能与「标题 + 简介」两行**整体**垂直居中。 + * 🔴 用户 2026-11-03：「图标应该在标题和简介的正中间…现在图标和上面的标题 + * 是对齐的、在图标的正中间…把图标往下放一放，让标题和它下面的简介合起来 + * 和图标高度一样，两个对齐上下。」 + * ⇒ 结构必须是「图标 | 文字列」两栏，所以这里不用 fb_software_badge() + * （那个函数把图标和名字包在同一个 .sw-badge 里，天然是单行）。 + * 改用 fb_software_icon()/icon_key 自己拼图标，名字单独放右侧。 */ + $bIcon = fb_software_icon($curSw); + $bKey = trim((string)(isset($curSw['icon_key']) ? $curSw['icon_key'] : '')); + $bImg = $bKey !== '' ? fb_icon_url($bKey, 64) : ''; + $bTitle = fb_software_site_title($curSw); ?> - - + title=""> + + + + + + - - -