标题颜色/看板/截止/负责人/备注/协作人/留言头像 全部修正 (#77)

用户 2026-11-05:「还是不对,标题的颜色不对。分组看板那个地方没改,截止没改,
负责人没改,备注没改,协作人没改。评论那个地方的头像怎么又没了?」

逐条查下来,四个真问题:

① 上一轮只改了 3 个标题,漏了一大片
   只换了「子任务/附件/留言」,而 **看板、状态、协作人**、
   以及「更多信息」里的**字段标签**全是手写的 fontTiny + faint。
   ⇒ 看板/状态/协作人 补 FbSectionTitle(Bold + accent + 字距 0.6)。
   ⇒ 截止/负责人/备注/分类/循环 这些**行内字段标签**新增 fieldLb() Builder:
     同样取主题色 + Bold + letterSpacing,但宽度 48、无内边距
     (不能直接用 FbSectionTitle:它 width 100% + padding,会把右侧控件顶下去)。
   ⚠️ 这与「编辑表单」的口径不同:那边 `期限` 仍是浅灰小字。
      用户明确要求这个面板里字段标签也用主题色粗体 —— 按用户要求走,
      已在 fieldLb 的注释里写明这个差异,避免以后有人"统一"回去。

② 留言头像丢失的真因
   不是数据问题,是 `FbPersonChip` **不透传 imageUrl**。
   它内部的 `FbAvatar({ name, color, dia, fontSizeVp })` 漏了这个参数,
   而 `FbAvatar` 自己是支持的(注释里还写着"800 人里只有 19 人有头像,
   有图显示图、没图回落色块字")。
   ⇒ 上一轮我换成 FbPersonChip 后,原来手写 FbAvatar 时**能显示的头像反而没了**。
      给 FbPersonChip 补 `@Param imageUrl` 并传给内部 FbAvatar,
      调用点把 `fbImageSrc(c.avatar, token)` 传进去。

③ 状态区原来没有标题
   三个 chip 直接飘在那(上下每个区段都有标题)。补 FbSectionTitle(状态)。

④ 协作人标题改组件
   顺手把「+ 共享」按钮挪到标题下面单独一行(FbSectionTitle 是 100% 宽,
   放同一个 Row 里会把它压成 0 宽)。

编译通过,已装真机。
This commit is contained in:
2026-11-05 19:34:12 +08:00
parent 09f7878994
commit b42e657bb2
2 changed files with 88 additions and 36 deletions
+63 -35
View File
@@ -1020,13 +1020,20 @@ export struct FbTaskPanel {
/** 状态三段(点一下即改,没有"保存"按钮) */
@Builder
statusSeg() {
Row({ space: 8 }) {
this.statusChip('todo')
this.statusChip('doing')
this.statusChip('done')
Column({ space: 6 }) {
/* #77i:状态也有标题了(原来只有三个 chip,没有区段标题,
而下面每个区段都有 —— 视觉上它是"飘着的")。 */
FbSectionTitle({ title: '状态', accent: this.accent })
Row({ space: 8 }) {
this.statusChip('todo')
this.statusChip('doing')
this.statusChip('done')
}
.width('100%')
}
.width('100%')
.padding({ top: 10, bottom: 4 })
.padding({ bottom: 4 })
.alignItems(HorizontalAlign.Start)
}
@Builder
@@ -1064,9 +1071,15 @@ export struct FbTaskPanel {
@Builder
boardChips() {
Column({ space: 6 }) {
Text('分组(看板)')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
/* 🔴 #77i(用户 2026-11-05):「分组看板那个地方没改…还是不对,标题的颜色不对。」
上一轮我只把「子任务/附件/留言」三个标题换成了 `FbSectionTitle`,
**看板、状态、协作人、以及「更多信息」里那几个字段标签全都漏了** ——
它们还是手写的 `fontTiny + faint`(浅灰小字)。
规范(`Widgets.ets` / `FbSectionTitle`):区块标题 = **Bold + 主题色 + 字距 0.6**。
⇒ 这一处改成组件。 */
FbSectionTitle({ title: '分组(看板)', accent: this.accent })
if (this.boardCountAll() <= 6) {
/* 平铺:全部一屏可见 */
Flex({ wrap: FlexWrap.Wrap }) {
@@ -1150,10 +1163,7 @@ export struct FbTaskPanel {
Column({ space: 0 }) {
/* ---- 截止:可点,弹 FbDateTimePicker ---- */
Row({ space: 8 }) {
Text('截止')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(44)
this.fieldLb('截止')
Text(this.dueOf() !== '' ? this.dueOf() : '设置…')
.fontSize(FbMetric.fontSmall)
.fontColor(this.dueOf() === '' ? FbColors.faint
@@ -1182,10 +1192,7 @@ export struct FbTaskPanel {
/* ---- 负责人:头像 + 可点选人 ---- */
Row({ space: 8 }) {
Text('负责人')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(44)
this.fieldLb('负责人')
/* 头像(#77「负责人那个地方也需要有图标,就是人的头像」)
⚠️ 端上不一定拿得到头像图(`assigneeAvatar` 可能是空 key)⇒
有图用图,没图用首字色块兜底(与留言区同一个手法)。 */
@@ -1233,10 +1240,7 @@ export struct FbTaskPanel {
/* ---- 备注:可编辑 ---- */
Column({ space: 4 }) {
Row({ space: 8 }) {
Text('备注')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(44)
this.fieldLb('备注')
if (this.noteEdit) {
TextInput({ text: this.noteDraft, placeholder: '补充说明…' })
.placeholderColor(FbColors.faint)
@@ -1320,13 +1324,37 @@ export struct FbTaskPanel {
return k !== '' ? fbImageSrc(k, this.token()) : '';
}
/**
* 「更多信息」里的一行字段标题(截止 / 负责人 / 备注 / 分类 / 循环)。
*
* 🔴 #77j(用户 2026-11-05):「截止、负责人、备注没改 ——
* 这几个字的颜色要变主题色粗体。」
*
* ⚠️ 这与「编辑表单」的字段标签口径**不同**,是用户明确要求的:
* 整页编辑表单里 `期限` 那种是 `fontTiny + faint`(浅灰小字),
* 但这个详情面板里用户希望它们**和区块标题一个观感**
* (主题色 + Bold)—— 因为它和「子任务/附件/留言」那些标题同属一个视觉层级,
* 只有它浅灰会显得"这两块不是一回事"。
*
* ⚠️ 不走 `FbSectionTitle` 组件:那个带 `width('100%')` +
* `padding({top:12,bottom:8})`,而这里要的是"44vp 宽的行内标签",
* 塞进去会把右侧控件顶到下一行。只**取它的三个核心属性**
* (Bold / accent / letterSpacing 0.6),宽度与内边距按行内标签给。
*/
@Builder
fieldLb(t: string) {
Text(t)
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Bold)
.fontColor(this.accent)
.letterSpacing(0.6)
.width(48)
}
@Builder
kvRow(label: string, value: string) {
Row({ space: 8 }) {
Text(label)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(44)
this.fieldLb(label)
Text(value)
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink)
@@ -1341,17 +1369,14 @@ export struct FbTaskPanel {
@Builder
shareSection() {
Column({ space: 6 }) {
/* #77(用户 2026-11-05):「共享给谁这个地方都和网页端一样,都改成协作人吧。」
#77i:标题按规范走 `FbSectionTitle`(Bold + 主题色 + 字距)。 */
FbSectionTitle({
title: '协作人',
accent: this.accent,
extra: this.shares().length > 0 ? this.shares().length.toString() : ''
})
Row({ space: 6 }) {
/* #77(用户 2026-11-05):「共享给谁这个地方都和网页端一样,都改成协作人吧。」 */
Text('协作人')
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
if (this.shares().length > 0) {
Text(this.shares().length.toString())
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
Blank()
Text(this.shareBusy ? '处理中…' : '+ 共享')
.fontSize(FbMetric.fontTiny)
@@ -1643,9 +1668,12 @@ export struct FbTaskPanel {
⚠️ `FbPersonChip` 自带 `FbAvatar`(dia 18)+ inputBg 胶囊底,
所以外面那个 24vp 的 FbAvatar 要去掉,否则头像画两遍。 */
/* #77i:把头像 URL 传进去 —— `FbPersonChip` 之前不透传 `imageUrl`,
所以换成它之后头像就只剩首字色块了(那个参数我刚在 Widgets.ets 补上)。 */
FbPersonChip({
name: c.name,
color: c.color !== '' ? c.color : '#A84A28'
color: c.color !== '' ? c.color : '#A84A28',
imageUrl: c.avatar !== '' ? fbImageSrc(c.avatar, this.token()) : ''
})
Text(c.createdAt)
.fontSize(9)