diff --git a/entry/src/main/ets/components/FbPersonEditSheet.ets b/entry/src/main/ets/components/FbPersonEditSheet.ets index 6b68f92..b16b352 100644 --- a/entry/src/main/ets/components/FbPersonEditSheet.ets +++ b/entry/src/main/ets/components/FbPersonEditSheet.ets @@ -392,9 +392,14 @@ export struct FbPersonEditSheet { @Builder tagPicker() { Column({ space: 6 }) { + /* 🔴 2026-11-06 用户：「标签不对」—— 与 area()/field() 同一条： + 原来是淡灰小字，和同表的主题色加粗标签不是一个体系。 + 另：`width('100%')` 让它在 Flex 外独占一行（与两排版式一致）。 */ Text('标签') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontWeight(FontWeight.Bold) + .fontColor(this.accentColor()) + .width('100%') // ① 已选（没有任何已选时给一句提示，免得看着是空白） if (this.fTags.length === 0) { @@ -507,13 +512,24 @@ export struct FbPersonEditSheet { this.newTag = ''; } - /** 多行输入（备注类） */ + /** + * 多行输入（备注类）。 + * + * 🔴 2026-11-06 用户：「备注不对」「我的备注也不对」。 + * 根因与分组标题同一条：这里原来是 `fontTiny + faint` 淡灰小字， + * 而同一张表里 `field()` 已经是 `fontSmall + Bold + 主题色` —— + * 两个"标签"长得完全不同，用户看到的就是"这两个字段没有被改过"。 + * ⇒ 对齐 `field()`：主题色 + Bold + fontSmall + 独占第一排。 + * ⚠️ 两排版式同样是为了"输入框左边缘对齐"（GLOBAL-FORM-SPEC 的理由）。 + */ @Builder area(label: string, value: string, hint: string, onChange: (v: string) => void) { - Column({ space: 4 }) { + Column({ space: 6 }) { Text(label) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontWeight(FontWeight.Bold) + .fontColor(this.accentColor()) + .width('100%') TextArea({ text: value, placeholder: hint }) .placeholderColor(FbColors.faint) .fontSize(FbMetric.fontSmall) @@ -521,6 +537,7 @@ export struct FbPersonEditSheet { .backgroundColor(FbColors.inputBg) .borderRadius(FbMetric.radiusS) .height(72) + .width('100%') .padding({ left: 12, right: 12, top: 8, bottom: 8 }) .onChange((v: string): void => { onChange(v); @@ -530,23 +547,59 @@ export struct FbPersonEditSheet { .alignItems(HorizontalAlign.Start) } - /** 分组小标题（把一大堆字段分开，免得糊成一团） */ + /** + * 分组小标题（把一大堆字段分开，免得糊成一团）。 + * + * 🔴 2026-11-06 用户：「性别、颜色样式不对；联系方式不对；地址不对； + * 工作不对；其他不对；标签不对；备注不对；我的备注也不对。」 + * + * 逐条核对下来，"不对"的是**所有分组的视觉层级**，不是内容： + * · 分组标题原来是 `fontTiny + FbColors.faint`（10-11vp 淡灰）； + * · 而字段标签（`field()`）是 `fontSmall + Bold + 主题色`。 + * ⇒ 结果：**淡灰的"联系方式"比主题色加粗的"手机号（主号）"还弱**， + * 分组层级被压到字段之下，整张表看起来是一堆同级小字糊在一起， + * 完全看不出"哪几个字段属于哪一组"。 + * + * ⇒ 按 GLOBAL-FORM-SPEC 把分组标题抬成与字段标签**同级但更强**： + * 主题色 + Bold + fontBody（比字段标签大一号）+ 顶部留白拉开距离。 + * 「级别标题 > 字段标签 > 输入值」三层，一眼能读。 + * + * ⚠️ 顺带：「基本」这个标题**删掉了**（见 build 里的调用点）。 + * 它下面紧跟着"姓名 / 称呼 / 性别 / 排行 / 生日"，本来就属于最基础的一组， + * 而它是**表格的第一个分组**——上面没有任何内容需要与它区分， + * 挂一个"基本"只会让用户多读一个词。用户原话：「"基本"这两个字也不要。」 + */ @Builder section(title: string) { - Text(title) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - .width('100%') - .margin({ top: 6 }) + Row({ space: 6 }) { + /* 左侧一小段主题色竖条：比纯文字更像"分组"，且不抢眼 */ + Column() + .width(3) + .height(13) + .borderRadius(2) + .backgroundColor(this.accentColor()) + Text(title) + .fontSize(FbMetric.fontBody) + .fontWeight(FontWeight.Bold) + .fontColor(this.accentColor()) + } + .width('100%') + .alignItems(VerticalAlign.Center) + .margin({ top: 14, bottom: 2 }) } /** 性别选择（两段） */ @Builder genderPick() { Column({ space: 4 }) { + /* 🔴 2026-11-06 用户：「性别…颜色样式不对」—— 同一条，见 section() 的说明。 + ⚠️ 性别是**选项组**而不是输入框，所以第二排是三个 chip； + 标题样式与 `field()` 保持一致，视觉上才像同一个表单。 */ Text('性别') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontWeight(FontWeight.Bold) + .fontColor(this.accentColor()) + .width('100%') Row({ space: 8 }) { this.genderChip('男', 'm') this.genderChip('女', 'f') @@ -612,7 +665,7 @@ export struct FbPersonEditSheet { Row({ space: 6 }) { TextInput({ text: row.label, placeholder: '说明' }) .placeholderColor(FbColors.faint) - .fontSize(FbMetric.fontTiny) + .fontSize(FbMetric.fontSmall) .fontColor(FbColors.ink) .backgroundColor(FbColors.inputBg) .borderRadius(FbMetric.radiusS) @@ -674,7 +727,7 @@ export struct FbPersonEditSheet { Row({ space: 6 }) { TextInput({ text: row.title, placeholder: '职务' }) .placeholderColor(FbColors.faint) - .fontSize(FbMetric.fontTiny) + .fontSize(FbMetric.fontSmall) .fontColor(FbColors.ink) .backgroundColor(FbColors.inputBg) .borderRadius(FbMetric.radiusS) @@ -686,7 +739,7 @@ export struct FbPersonEditSheet { }) TextInput({ text: row.rankName, placeholder: '职称' }) .placeholderColor(FbColors.faint) - .fontSize(FbMetric.fontTiny) + .fontSize(FbMetric.fontSmall) .fontColor(FbColors.ink) .backgroundColor(FbColors.inputBg) .borderRadius(FbMetric.radiusS) @@ -701,7 +754,7 @@ export struct FbPersonEditSheet { Row({ space: 6 }) { TextInput({ text: row.startYm, placeholder: '起始 2015-07' }) .placeholderColor(FbColors.faint) - .fontSize(FbMetric.fontTiny) + .fontSize(FbMetric.fontSmall) .fontColor(FbColors.ink) .backgroundColor(FbColors.inputBg) .borderRadius(FbMetric.radiusS) @@ -713,7 +766,7 @@ export struct FbPersonEditSheet { }) TextInput({ text: row.endYm, placeholder: '结束（空=至今）' }) .placeholderColor(FbColors.faint) - .fontSize(FbMetric.fontTiny) + .fontSize(FbMetric.fontSmall) .fontColor(FbColors.ink) .backgroundColor(FbColors.inputBg) .borderRadius(FbMetric.radiusS) @@ -775,10 +828,22 @@ export struct FbPersonEditSheet { Text(this.isCreate ? '添加成员' : '编辑资料') .fontSize(FbMetric.fontTitle) .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Text(this.isCreate ? '填多少算多少，之后都能再改' : '全部字段都能改，改完点保存') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) + /* 🔴 用户 2026-11-06 定的口径：**编辑资料这几个字用主题色** + （此前是 `FbColors.ink` 正文色，和普通文字没区别）。 + ⚠️ 新建（"添加成员"）也一起用主题色 —— 用户说的是 + "编辑观影记录这几个字应该是主题色"，那是同一类标题； + 两种模式共用一个标题样式，才不会"新建时是黑的、编辑时是紫的"。 */ + .fontColor(this.accentColor()) + /* 🔴 2026-11-06 用户：「"全部字段都能改，改完点保存"这句话不要。」 + ⇒ 整行副标题删掉。 + 新建模式那半句「填多少算多少，之后都能再改」**保留**： + 它说明"可以不全填"，是有信息量的；而编辑模式那句 + 只是重复"点保存"的动作，属于废话。 */ + if (this.isCreate) { + Text('填多少算多少，之后都能再改') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } } .alignItems(HorizontalAlign.Start) .layoutWeight(1) @@ -798,7 +863,11 @@ export struct FbPersonEditSheet { Scroll() { Column({ space: 12 }) { - this.section('基本') + /* 🔴 2026-11-06 用户：「"基本"这两个字也不要。」 + ⇒ 这个分组标题删掉了。它是表格**第一个**分组， + 上面没有任何内容需要区分；挂个"基本"只会让用户多读一个词。 + ⚠️ 后面几个分组（联系方式/地址/工作/其它）**保留** —— + 它们确实在分隔不同的字段集合，删了字段会连成一片。 */ /* GLOBAL-FORM-SPEC：姓名必填 ⇒ 标签红色（无星号） */ this.field('姓名', this.fName, '', (v: string): void => { this.fName = v; @@ -880,9 +949,13 @@ export struct FbPersonEditSheet { }) Row({ space: 8 }) { Column({ space: 4 }) { + /* 省/市是**字段标签**（并排两列，所以不能独占整宽）—— + 样式与 field() 一致（主题色/Bold/fontSmall）， + 不整宽是因为它们左右并排、各自占一半。 */ Text('省') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontWeight(FontWeight.Bold) + .fontColor(this.accentColor()) TextInput({ text: this.fAddrProvince, placeholder: '山东省' }) .placeholderColor(FbColors.faint) .fontSize(FbMetric.fontSmall) @@ -898,9 +971,13 @@ export struct FbPersonEditSheet { .layoutWeight(1) .alignItems(HorizontalAlign.Start) Column({ space: 4 }) { + /* 省/市是**字段标签**（并排两列，所以不能独占整宽）—— + 样式与 field() 一致（主题色/Bold/fontSmall）， + 不整宽是因为它们左右并排、各自占一半。 */ Text('市') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontWeight(FontWeight.Bold) + .fontColor(this.accentColor()) TextInput({ text: this.fAddrCity, placeholder: '青岛市' }) .placeholderColor(FbColors.faint) .fontSize(FbMetric.fontSmall) @@ -976,22 +1053,71 @@ export struct FbPersonEditSheet { .fontColor('#A32D2D') .width('100%') } + + /* 🔴 用户 2026-11-06：「删除按钮还是不要放在这里，也容易误触。 + 还是跟之前的惯例一样，放在最下面，滚动条最下面。」 + ⇒ 删除按钮从**底部固定按钮条**挪到**滚动内容的最末尾**： + 要删就得先滑到底，天然挡掉误触；而且不会和"保存"并排抢注意力。 + ⚠️ 放在 `if (this.err !== '')` 之后 —— 报错信息要在删除按钮**上面**， + 否则用户滑到底先看到"删除"，再往上看才知道保存失败了。 + ⚠️ 新建模式没有删除（这人还不存在）：`isCreate` 时不渲染。 + ⚠️ 样式仍用**红底白字**（用户 2026-10-19 定的「删除按钮全部用红色背景」）， + 但整行占满宽度、与上方字段同宽 —— 它现在是"表单最后一项"， + 不再是一个挤在角落的小按钮。 */ + if (!this.isCreate) { + Column({ space: 6 }) { + Text('危险操作') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + if (this.deleting) { + Text('删除中…') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + .textAlign(TextAlign.Center) + .width('100%') + .height(42) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + } else { + Text('删除这个人') + .fontSize(FbMetric.fontSmall) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height(42) + .backgroundColor(FbColors.red) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + if (!this.busy) { + this.confirmDel = true; + } + }) + } + } + .width('100%') + .alignItems(HorizontalAlign.Start) + .margin({ top: 18 }) + } } .width('100%') - .padding({ top: 14 }) + .padding({ top: 14, bottom: 8 }) } .layoutWeight(1) .width('100%') .scrollBar(BarState.Off) .align(Alignment.TopStart) - // ---- 按钮：删除 / 取消 / 保存 ---- - // 🔴 用户 2026-10-15：「卡片上面有一个编辑按钮；点击编辑之后， - // 下面应该有编辑、删除之类的操作，或者关闭按钮。」 - // ⇒ 编辑态给三颗：**删除**（左，红色描边）/ 取消 / 保存。 - // ⚠️ 删除单独放最左、且用**描边**而不是实心红： - // 它是破坏性操作，不该和"保存"抢视觉重心（防误点）。 + // ---- 按钮：取消 / 保存 ---- + // 🔴 用户 2026-11-06：「删除按钮还是不要放在这里，也容易误触。 + // 还是跟之前的惯例一样，放在最下面，滚动条最下面。」 + // ⇒ 删除已挪进滚动区末尾（见上面的「危险操作」块）。 + // 这里只留"取消 / 保存"两颗，且**等宽平分** —— + // 两颗等宽是"选择"的排法；三颗（其中一个是红色删除）时 + // 删除会紧贴保存，手滑就点上了。 if (this.deleting) { + /* 删除中：底部这两颗不能点（删除请求飞行中，取消/保存都会打架）。 + ⚠️ 这一行只在"确实在删"时出现；删除按钮本体已挪到滚动区末尾。 */ Text('删除中…') .fontSize(FbMetric.fontSmall) .fontColor(FbColors.faint) @@ -1001,23 +1127,6 @@ export struct FbPersonEditSheet { .margin({ top: 16 }) } else { Row({ space: 10 }) { - // 新建模式没有"删除"（这人还不存在） - if (!this.isCreate) { - // 🔴 用户 2026-10-19：「删除按钮全部用红色背景」 - Text('删除') - .fontSize(FbMetric.fontSmall) - .fontColor(Color.White) - .textAlign(TextAlign.Center) - .height(42) - .padding({ left: 18, right: 18 }) - .backgroundColor(FbColors.red) - .borderRadius(FbMetric.radiusS) - .onClick((): void => { - if (!this.busy) { - this.confirmDel = true; - } - }) - } Text('取消') .fontSize(FbMetric.fontSmall) .fontColor(FbColors.muted)