Browse Source

change(ui): 首页标题加回「你好」并把标题字号收小 4px

用户改主意:上一轮刚去掉的「你好」加回来,同时标题字号整体 −4px。

- 文案:PC 与移动端首页标题恢复为「你好,有什么我可以帮您的?」
- 字号:PC .heading 32px → 28px;移动端 20px → 16px(clamp(17px,5.2vw,20px) →
  clamp(13px,4.2vw,16px),上下限一并 −4px)
- 顺带移除移动端 @media (max-width: 360px) 里的 .heading { font-size: 28px }:
  它最初与基础值同值(空操作),基础值改小后变成**窄屏把标题放大回 28px** 的覆盖,
  而标题是 white-space: nowrap —— 13 字 × 28px ≈ 356px,360px 屏可用仅 272px,
  会把标题顶出屏幕约 84px。按约定注释保留原文并写明原因。

验证:npm run build 通过;排版按 8 种屏宽实算(320~768)全部单行放得下,
最紧的 320px 屏富余 66px;grep 确认全仓库 .heading 无其他覆盖源。
⚠️ 未在真机/浏览器看过。

Co-Authored-By: Claude Code <noreply@anthropic.com>
gongtianxiao 2 days ago
parent
commit
28de10ba05

+ 7 - 2
README.md

@@ -232,5 +232,10 @@
     给它预留的是写死的 `padding-bottom: 180px`(与输入框实际高度无关);
     另有 `height: 100dvh` 无 `100vh` 兜底、页面无 `text-size-adjust: 100%` ——
     见技术债第 7 条,换台手机仍可能变样
-- 首页标题文案去掉「你好」:`你好,有什么我可以帮您的?` → `有什么我可以帮您的?`
-  (PC 与移动端首页一致)
+- 首页标题调整:一度按指示去掉「你好」,随即按要求**加回**(文案仍为
+  `你好,有什么我可以帮您的?`),并把**标题字号整体收小 4px**:
+  PC 32px → 28px;移动端 20px → 16px(`clamp(17px,5.2vw,20px)` → `clamp(13px,4.2vw,16px)`)
+- 移除移动端 `@media (max-width: 360px)` 里那条 `.heading { font-size: 28px }`:
+  它最初与基础值同值(空操作),09-18 基础值改小后**变成窄屏把标题放大回 28px** 的覆盖,
+  而标题是 `white-space: nowrap` —— 360px 屏下标题宽 356px、可用仅 272px,**会溢出屏幕 84px**;
+  窄屏收缩已由 `.heading` 自己的 `clamp` 负责(已注释保留原文并写明原因)

+ 38 - 0
harness/progress.md

@@ -2323,3 +2323,41 @@
     用户若顺手验过「同政策两个申报事项点开内容不同」,即可去掉该标注
 - **下一步最佳动作**:真机/浏览器扫一眼新标题;若要继续收敛,见 Session 031 的优先级清单
 
+## Session 058
+
+- **日期**:2026-09-18
+- **本轮目标**:用户改主意 —— ①把「你好」**加回来** ②首页**标题字号整体收小 4px**
+- **已完成**:
+  1. **文案加回**(上一轮刚删的):PC 与移动端首页标题恢复为 `你好,有什么我可以帮您的?`
+  2. **标题字号 −4px**:
+     | 端 | 改前 | 改后 |
+     |---|---|---|
+     | PC `.heading` | 32px | **28px** |
+     | 移动端 `.heading` | 20px + `clamp(17px,5.2vw,20px)` | **16px** + `clamp(13px,4.2vw,16px)` |
+  3. 🐛 **顺带移除一处会「吃掉」这个改动的陈旧覆盖**(本轮新发现,不是用户要求的):
+     - 移动端 `@media (max-width: 360px)` 里有一条 `.heading { font-size: 28px }`
+     - 它**原本是空操作**(那时 `.heading` 基础值就是 28px),
+       但 2026-09-18 基础值改小后,它**在窄屏上反而把标题放大回 28px**
+     - 后果:标题是 `white-space: nowrap`,13 个字 × 28px ≈ **356px**,
+       而 360px 屏可用宽度只有 **272px** → **标题被顶出屏幕约 84px**(正是用户此前抱怨的那类现象)
+     - 已按项目约定**注释保留原文**并写明原因(不是直接删);窄屏收缩交给 `.heading` 自己的 `clamp`
+- **运行过的验证**:
+  - `npm run build` 通过
+  - **排版实算(脚本,非目测)**:8 种屏宽(320/360/375/390/393/412/428/768)逐一算
+    「生效字号 × 13 字 + 字距」与「可用宽度」——**全部单行放得下**,
+    最紧的 320px 屏富余 66px;同时算出被移除的 28px 覆盖在 360px 屏会溢出 84px
+  - grep 复核:全仓库 `.heading` 只剩 PC 与移动端两处定义(窄屏覆盖已注释),无其他覆盖源
+- **已记录证据**:本文件 Session 058;上面的排版实算输出;根 `README.md` 20260918 节
+  (上一轮那条「去掉你好」的记录**已改写**为「一度去掉、随即加回」——不留错误的旧记录)
+- **提交记录**:见下条提交(已按约定提交推送)
+- **更新过的文件或工件**:`src/components/BusinessAssistantPC.vue`、
+  `src/components/BusinessAssistantMobile.vue`、`README.md`、本文件
+  (`feature_list.json` 未动:纯样式/文案调整,无新增能力)
+- **已知风险或未解决问题**:
+  - ⚠️ **未在真机/浏览器看过**:需确认①两端标题都有「你好」②字号确实小了
+    ③**窄屏(≤360px)手机上标题不再被顶出屏幕**(这条是本轮修的那个覆盖,值得顺手一看)
+  - ⚠️ 那个 28px 覆盖**是一类通病**:样式表里"与基础值同值的 media query 覆盖",
+    基础值一改它就变成有效覆盖。本轮只发现并处理了这一处,没有全表排查
+- **下一步最佳动作**:真机确认三点(尤其窄屏);若还有别处"改基础值后行为变了",
+  按同样方法找同值覆盖
+

+ 12 - 4
src/components/BusinessAssistantMobile.vue

@@ -36,7 +36,7 @@
               <img src="@/assets/qingpu_logo_2_3x.png" alt="logo"
                 style="width: 100%; height: 100%; object-fit: cover; border-radius: 999px;" />
             </div>
-            <h1 class="heading">有什么我可以帮您的?</h1>
+            <h1 class="heading">你好,有什么我可以帮您的?</h1>
             <p class="desc">我是您的青浦区营商智能助手,可以为您提供惠企政策匹配以及出海、人才、科创、金融、法治方面的办事指引,请问有什么可以帮助您?</p>
           </section>
 
@@ -1811,9 +1811,10 @@ const confirmDeleteSession = () => {
   margin: 0;
   color: #141b2b;
   /* 先给老内核一个固定值(窄屏也放得下),再用 clamp 让更窄的屏继续收一点。
-     目的:这行字**恒定单行**不换行 */
-  font-size: 20px;
-  font-size: clamp(17px, 5.2vw, 20px);
+     目的:这行字**恒定单行**不换行。
+     2026-09-18 用户要求整体收小 4px:20px → 16px(clamp 上下限一并 −4px) */
+  font-size: 16px;
+  font-size: clamp(13px, 4.2vw, 16px);
   font-weight: 500;
   line-height: 1.2;
   letter-spacing: -0.64px;
@@ -2641,9 +2642,16 @@ const confirmDeleteSession = () => {
     padding-right: 16px;
   }
 
+  /* [已移除 2026-09-18] 此处原为 .heading { font-size: 28px }。
+     它最初与基础值同值(那时基础值是 28px),是个空操作;
+     2026-09-18 基础值改小后它反而变成**窄屏上把标题放大回 28px** 的覆盖——
+     而标题是 white-space: nowrap,13 个字 × 28px ≈ 356px,远超窄屏可用宽度
+     (360px 屏约 272px)—— 会把标题顶出屏幕约 84px。
+     窄屏的收缩已由 .heading 自己的 clamp(13px, 4.2vw, 16px) 负责,故移除。
   .heading {
     font-size: 28px;
   }
+  */
 
   .suggestion-chips {
     padding-left: 12px;

+ 3 - 2
src/components/BusinessAssistantPC.vue

@@ -124,7 +124,7 @@
             </div>
 
             <div class="welcome-text">
-              <div class="heading">有什么我可以帮您的?</div>
+              <div class="heading">你好,有什么我可以帮您的?</div>
               <div class="desc">我是您的青浦区营商智能助手,可以为您提供惠企政策匹配以及出海、人才、科创、金融、法治方面的办事指引和咨询服务</div>
             </div>
 
@@ -1950,7 +1950,8 @@ const isScopeExiting = (recordId: string | number) => {
 
 .heading {
   color: #141b2b;
-  font-size: 32px;
+  /* 2026-09-18 用户要求整体收小 4px:32px → 28px */
+  font-size: 28px;
   font-weight: 500;
   letter-spacing: -0.04em;
   line-height: 1.2;