From 09f7878994bd35cf78bdc4fa48c7cc902e4dd704 Mon Sep 17 00:00:00 2001 From: laoyang Date: Thu, 5 Nov 2026 19:29:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=94=B9=E4=B8=BA=E8=B5=B0?= =?UTF-8?q?=E8=A7=84=E8=8C=83=E7=BB=84=E4=BB=B6=20FbSectionTitle=20/=20FbP?= =?UTF-8?q?ersonChip=20(#77)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户 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 | 113 +++++++++--------- 1 file changed, 56 insertions(+), 57 deletions(-) diff --git a/entry/src/main/ets/components/FbTaskPanel.ets b/entry/src/main/ets/components/FbTaskPanel.ets index 1f0465a..825eeaa 100644 --- a/entry/src/main/ets/components/FbTaskPanel.ets +++ b/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)