样式改为走规范组件 FbSectionTitle / FbPersonChip (#77)

用户 2026-11-05：「样式还没变，还记得咱们之前规定的样式是怎么做的吗？」

找到了。规定就在 entry/src/main/ets/components/Widgets.ets，
而且 FbSectionTitle 的注释里**留着用户原话**：

  「"今天的日程"，既然是日程，标题颜色就应该用日程的主题色。
    …下面的"近期任务"改法跟上面一样，还有"最近纪念日"也不说了，全都是一样的。」

上一轮我做错的地方：**手写 Text 改 fontColor**，没走组件。
而 FbSectionTitle 给的是三样东西：
  · fontWeight: accent 存在时 Bold（不是 Medium）
  · fontColor: accent
  · letterSpacing: 0.6
我只改了颜色 ⇒ 字重和字距还是老样子 ⇒ 用户看着"样式没变"。

改动：
① 子任务 / 附件 / 留言 三个区块标题 → 全部换成 FbSectionTitle
   传 accent: this.accent（模块主题色）+ extra（数量/进度）
② 留言人 → 换成 FbPersonChip
   网页端留言人用的就是 person_chip()（头像 + 名字的胶囊），
   鸿蒙端对应 FbPersonChip。上一轮我手写的"头像 + 纯文字名字"只是长得像，
   不是同一套。换掉后同时删掉外置的那个 FbAvatar（组件内置了，会画两遍）。

🔴 踩到一个组件约束：FbSectionTitle 是 `width(100%)` 的独立组件，
   塞进 `Row` 里会和后面的计数/按钮抢宽度，被压成 0 宽。
   ⇒ 三处都改成**独占一行**；「已完成 2/5」这类附加信息走它自带的 extra；
      按钮（＋ 添加附件）另起一行右对齐。

编译通过，已装真机。

entry/src/main/ets/components/FbTaskPanel.ets

@@ -35,7 +35,7 @@ import {
 } from '../model/Types';
 import { FbSheetRing } from './FbSheetRing';
 import { FbSheetClose } from './FbSheetClose';
-import { FbCheckCircle, FbAvatar } from './Widgets';
+import { FbCheckCircle, FbAvatar, FbSectionTitle, FbPersonChip } from './Widgets';
 import { FbPersonPickSheet } from './FbPersonPickSheet';
 import { FbDateTimePicker, fbIsoOf, fbJoinDateTime } from './FbDateTimeField';
 import { fbAttachOpen } from '../common/FbAttachOpen';
@@ -1406,21 +1406,16 @@ export struct FbTaskPanel {
   @Builder
   kidSection() {
     Column({ space: 6 }) {
-      Row({ space: 6 }) {
-        Text('子任务')
-          .fontSize(FbMetric.fontSmall)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(this.accent)
-        if (this.kids().length > 0) {
-          Text(this.kidDoneCount().toString() + '/' + this.kids().length.toString())
-            .fontSize(FbMetric.fontTiny)
-            .fontColor(FbColors.faint)
-        }
-        Blank()
-      }
-      .width('100%')
-      .padding({ top: 12 })
-      .alignItems(VerticalAlign.Center)
+      /* #77h：`FbSectionTitle` 是 `width('100%')` 的独立组件，
+         必须**独占一行**（塞进 Row 会和后面的计数/按钮抢宽度，被压成 0 宽）。
+         「已完成 2/5」这种附加信息走它自带的 `extra`。 */
+      FbSectionTitle({
+        title: '子任务',
+        accent: this.accent,
+        extra: this.kids().length > 0
+          ? this.kidDoneCount().toString() + '/' + this.kids().length.toString()
+          : ''
+      })
 
       ForEach(this.kids(), (k: FbTaskKid) => {
         Row({ space: 8 }) {
@@ -1494,16 +1489,26 @@ export struct FbTaskPanel {
   @Builder
   attachSection() {
     Column({ space: 8 }) {
-      Row({ space: 6 }) {
-        Text('附件')
-          .fontSize(FbMetric.fontSmall)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(this.accent)
-        if (this.attachs().length > 0) {
-          Text(this.attachs().length.toString())
-            .fontSize(FbMetric.fontTiny)
-            .fontColor(FbColors.faint)
-        }
+      /* 🔴 #77h（用户 2026-11-05：「样式还没变，还记得咱们之前规定的样式是怎么做的吗？」）
+
+         规定就在 `Widgets.ets` 的 `FbSectionTitle` 上（它的注释里还留着用户原话）：
+           「"今天的日程"，既然是日程，标题颜色就应该用日程的主题色。
+             …下面的"近期任务"改法跟上面一样，还有"最近纪念日"也不说了，全都是一样的。」
+
+         ⇒ 区块标题**必须走 `FbSectionTitle`**，不能手写 `Text`：
+             它给了 **Bold + letterSpacing(0.6) + accent 色** 三样，
+             而手写 Text 我只改了 fontColor，字重和字距都还是老样子
+             —— 这就是"样式还没变"的原因。
+
+         ⚠️ `FbSectionTitle` 自带 `padding({top:12,bottom:8})` 且 `width('100%')`，
+            所以它必须**独立成行**，不能塞进原来那个 Row 里和按钮并排（会被挤掉宽度）。
+            ⇒ 把「标题 + 计数」交给组件，按钮单独另起一行右对齐（见下）。 */
+      FbSectionTitle({
+        title: '附件',
+        accent: this.accent,
+        extra: this.attachs().length > 0 ? this.attachs().length.toString() : ''
+      })
+      Row() {
         Blank()
         /* #77（用户 2026-11-05）：「加图片这个地方改成"添加附件"。」
            ⚠️ 文案改了，**行为也要跟着改** —— 原来 `pickAttach()` 只允许选图片
@@ -1599,24 +1604,23 @@ export struct FbTaskPanel {
   @Builder
   commentSection() {
     Column({ space: 8 }) {
-      Row({ space: 6 }) {
-        /* #77（用户 2026-11-05）：「留言那个地方需要是图标。」
-           ⇒ 标题前加一个对话气泡图标，与「附件」「协作人」几个小节拉开辨识度。 */
+      /* #77h：留言标题同样独立成行。
+         图标（#77「留言那个地方需要是图标」）放在标题组件**外面**、
+         用 Row 包一层 —— 组件本身不接受前插图。 */
+      Row({ space: 4 }) {
         Text('💬')
           .fontSize(FbMetric.fontSmall)
-        Text('留言')
-          .fontSize(FbMetric.fontSmall)
-          .fontWeight(FontWeight.Medium)
-          .fontColor(this.accent)
-        if (this.comments().length > 0) {
-          Text(this.comments().length.toString())
-            .fontSize(FbMetric.fontTiny)
-            .fontColor(FbColors.faint)
+        Column() {
+          FbSectionTitle({
+            title: '留言',
+            accent: this.accent,
+            extra: this.comments().length > 0 ? this.comments().length.toString() : ''
+          })
         }
-        Blank()
+        .layoutWeight(1)
+        .alignItems(HorizontalAlign.Start)
       }
       .width('100%')
-      .padding({ top: 12 })
       .alignItems(VerticalAlign.Center)
 
       ForEach(this.comments(), (c: FbTaskComment) => {
@@ -1628,26 +1632,21 @@ export struct FbTaskPanel {
                 有头像图用图、没设头像才退回首字色块。
              ⚠️ 用公共 `FbAvatar` 而不是自己拼 `Image`：全站头像的口径
                 （尺寸/圆角/兜底色）都收在那一个组件里，自己拼迟早不一致。 */
-          FbAvatar({
-            name: c.name,
-            color: c.color !== '' ? c.color : '#A84A28',
-            dia: 24,
-            fontSizeVp: 10,
-            imageUrl: c.avatar !== ''
-              ? fbImageSrc(c.avatar, this.token()) : ''
-          })
-
+          /* #77h：头像已由 `FbPersonChip` 内置（它会画 `FbAvatar`），
+             这里不再自己画一个 —— 否则同一条留言前面出现两个头像。 */
           Column({ space: 2 }) {
             Row({ space: 6 }) {
-              /* 🔴 #77e（用户 2026-11-05）：「根据我们之前样式的规定，
-                 它的标题和里面的文字，应该按照现在这个模块的主题色加粗显示。」
-                 ⇒ 留言人名用**模块主题色 + 加粗**（原来是 muted 灰、常规字重）。
-                    这是全站「小节标题/发言人以模块色标识」的既有规矩
-                    （观影用紫、旅程用绿、任务用赭红…），这里原来漏了。 */
-              Text(c.name)
-                .fontSize(FbMetric.fontTiny)
-                .fontWeight(FontWeight.Medium)
-                .fontColor(this.accent)
+              /* 🔴 #77h：留言人走规范组件 `FbPersonChip`。
+                 网页端留言人用的就是 `person_chip()`（头像 + 名字的胶囊），
+                 鸿蒙端对应的是 `FbPersonChip` —— 上一轮我手写的
+                 「头像 + 纯文字名字」只是长得像，不是同一套。
+
+                 ⚠️ `FbPersonChip` 自带 `FbAvatar`（dia 18）+ inputBg 胶囊底，
+                    所以外面那个 24vp 的 FbAvatar 要去掉，否则头像画两遍。 */
+              FbPersonChip({
+                name: c.name,
+                color: c.color !== '' ? c.color : '#A84A28'
+              })
               Text(c.createdAt)
                 .fontSize(9)
                 .fontColor(FbColors.faint)