Explorar el Código

change(ui): 移动端首页标题调到 22px

用户指示「移动端调整到 22px」(PC 保持 32px 不动)。

- .heading:clamp(17px, 5.2vw, 20px) → clamp(17px, 5.7vw, 22px),基础值 22px
  (两行一起改 —— 只改基础值会被后写的 clamp 覆盖,这坑 Session 059 刚踩过)
- 5.7vw 按上限等比推得:≥386px 的屏恒为 22px,更窄的屏按比例收缩,保证标题恒定单行不被顶出屏幕

验证:npm run build 通过;排版按 9 种屏宽实算全部单行放得下 —— 386px 及以上生效 22px
(富余 ≥36px)、375px 生效 21.4px、360px 生效 20.5px、320px 生效 18.2px(最紧,富余 3px)。
⚠️ 未在真机看过。

Co-Authored-By: Claude Code <noreply@anthropic.com>
gongtianxiao hace 2 días
padre
commit
ba2f80ab33
Se han modificado 3 ficheros con 39 adiciones y 7 borrados
  1. 4 3
      README.md
  2. 30 0
      harness/progress.md
  3. 5 4
      src/components/BusinessAssistantMobile.vue

+ 4 - 3
README.md

@@ -233,9 +233,10 @@
     另有 `height: 100dvh` 无 `100vh` 兜底、页面无 `text-size-adjust: 100%` ——
     见技术债第 7 条,换台手机仍可能变样
 - 首页标题文案:一度按指示去掉「你好」,随即按要求**加回**(仍为 `你好,有什么我可以帮您的?`)
-- 首页标题字号:一度按指示整体收小 4px(PC 32→28px、移动端 20→16px),
-  用户看过移动端后反馈「太小了」,**已全部还原**(PC 回 32px、移动端回
-  `clamp(17px,5.2vw,20px)`)——净结果是字号未变,只有文案加回了「你好」
+- 首页标题字号:几经反复,**当前值以这里为准** ——
+  **PC 保持 32px 不变**;**移动端 22px**(`clamp(17px,5.7vw,22px)`,≥386px 的屏恒为 22px,
+  更窄的屏按比例收缩以免标题被顶出屏幕)。过程:一度整体 −4px(PC 32→28、移动端 20→16)
+  → 用户反馈移动端「太小了」→ 全部还原 → 用户要求移动端调到 22px
 - 移除移动端 `@media (max-width: 360px)` 里那条 `.heading { font-size: 28px }`:
   它最初与基础值同值(空操作),09-18 基础值改小后**变成窄屏把标题放大回 28px** 的覆盖,
   而标题是 `white-space: nowrap` —— 360px 屏下标题宽 356px、可用仅 272px,**会溢出屏幕 84px**;

+ 30 - 0
harness/progress.md

@@ -2399,3 +2399,33 @@
     这类"同值覆盖"在改基础值后会变成有效覆盖(本轮 Session 058 已经踩过一处 28px 的)
 - **下一步最佳动作**:真机看一眼移动端标题;确认窄屏那条覆盖是否要恢复
 
+## Session 060
+
+- **日期**:2026-09-18
+- **本轮目标**:用户指示「移动端调整到 22px」(PC 不动)
+- **已完成**:
+  - 移动端 `.heading`:`clamp(17px, 5.2vw, 20px)` → **`clamp(17px, 5.7vw, 22px)`**
+    (基础值同步改 22px;**两行一起改**,见 Session 059 的坑)
+  - `5.7vw` 这个系数是**按上限等比推的**(原 5.2vw 对应上限 20px):
+    ≥386px 的屏恒为 22px,更窄的屏按比例收缩
+  - PC **未动**(保持 32px)
+  - 注释里写清了这一串演进(20 → 16 → 20 → 22),免得下个会话看到 clamp 系数变化不明所以
+- **运行过的验证**:
+  - `npm run build` 通过
+  - **排版实算(脚本,9 种屏宽)**:全部单行放得下 ——
+    386px 及以上生效 22px(富余 ≥36px);375px 生效 21.4px;360px 生效 20.5px;
+    320px 生效 18.2px(**富余仅 3px,是最紧的一档**)
+  - 同时算出各屏上限:320px 屏最多 18.5px、360px 最多 21.6px、375px 最多 23.9px
+    → **22px 在 375px 及以上才完整生效**,360px 上会收到 20.5px(**不是 bug,是防溢出**)
+- **已记录证据**:本文件 Session 060;上面的排版实算输出;README 20260918 节
+  (该条已改写为「当前值:PC 32px / 移动端 22px」,并列出反复过程)
+- **提交记录**:见下条提交(已按约定提交推送)
+- **更新过的文件或工件**:`src/components/BusinessAssistantMobile.vue`、`README.md`、本文件
+- **已知风险或未解决问题**:
+  - ⚠️ **未在真机看过**:需确认 22px 的观感
+  - ⚠️ **若用户手机上看着"没到 22px"**:多半是屏宽 360px 档(生效 20.5px)。
+    要么接受,要么把 clamp 系数加大(但 360px 屏容不下 22px,会溢出)
+  - ⚠️ 320px 档富余只剩 3px,字体渲染有细微差异时可能贴边——真机若见贴边,
+    把下限或系数再收一点
+- **下一步最佳动作**:真机确认观感;若还要更大,需要先解决"窄屏放不下"这个硬约束
+

+ 5 - 4
src/components/BusinessAssistantMobile.vue

@@ -1810,12 +1810,13 @@ const confirmDeleteSession = () => {
 .heading {
   margin: 0;
   color: #141b2b;
-  /* 先给老内核一个固定值(窄屏也放得下),再用 clamp 让更窄的屏继续收一点。
+  /* 先给老内核一个固定值(= 上限),再用 clamp 让更窄的屏继续收一点。
      目的:这行字**恒定单行**不换行。
      ⚠️ 两行必须同进同退:clamp 这行在后面、会覆盖上一行,只改基础值等于没改。
-     2026-09-18:一度改到 16px,用户反馈「移动端太小了」,已改回 20px(clamp 同步回到 17~20)。 */
-  font-size: 20px;
-  font-size: clamp(17px, 5.2vw, 20px);
+     2026-09-18 演进:20px → 16px(用户反馈「太小了」)→ 20px → **22px(当前)**。
+     clamp 取 5.7vw:≥386px 的屏恒为 22px,更窄的屏按比例收缩以免标题被顶出屏幕。 */
+  font-size: 22px;
+  font-size: clamp(17px, 5.7vw, 22px);
   font-weight: 500;
   line-height: 1.2;
   letter-spacing: -0.64px;