From d1f27937b978c70c6bd98b0ca70a6e706b7184ac Mon Sep 17 00:00:00 2001 From: laoyang Date: Fri, 6 Nov 2026 12:04:55 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=8D=E5=86=8C=E7=BC=96=E8=BE=91=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=EF=BC=9A=E9=87=8D=E5=BB=BA=E8=A7=86=E8=A7=89=E5=B1=82?= =?UTF-8?q?=E7=BA=A7=20+=20=E5=88=A0=E5=86=97=E4=BD=99=E6=96=87=E6=A1=88?= =?UTF-8?q?=20+=20=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE=E7=A7=BB=E8=87=B3?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=BA=95=E9=83=A8=20(#91)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户：编辑名册资料这里，全部字段都能改。点完改完点保存，这句话不要， "基本"这两个字也不要。性别、颜色样式不对；联系方式不对；地址不对； 工作不对；其他不对；标签不对；备注不对；我的备注也不对。 还有，删除按钮还是不要放在这里，也容易误触。还是跟之前的惯例一样， 放在最下面，滚动条最下面。 关键判断：用户列的 8 个"不对"**不是内容问题，是同一个视觉层级缺陷**。 逐项走查确认： - 分组标题（联系方式/地址/工作/其它）是 fontTiny + faint（淡灰小字）， **比字段标签还弱**；而 field() 早已是 fontSmall + Bold + 主题色； - area()（备注/我的备注）、tagPicker()、genderPick()、省市标签全是 fontTiny + faint； - 内层输入框（联系方式行/工作经历行）字号也比主表单小一号。 ⇒ 淡灰分组标题压在主题色加粗字段标签下面，分组层级被压扁， 整张表看着是一堆同级小字糊在一起。 ① 删两处文案： - 「全部字段都能改，改完点保存」整行删（编辑模式）。 ⚠️ 新建模式那句"填多少算多少，之后都能再改"保留 —— 它说明可以不全填， 有信息量；编辑那句只是重复"点保存"，是废话； - 「基本」删除。它是表格第一个分组，上面没内容需要区分。 其余分组标题保留（确实在分隔字段集合）。 ② 重建三层级（核心）： 分组标题(fontBody+Bold+主题色+左侧竖条) > 字段标签(fontSmall+Bold+主题色) > 输入值(fontSmall+正文墨色)。section() 重写，area/tagPicker/genderPick/ 省市标签全部对齐 field()；内层输入框 fontTiny → fontSmall。 ③「编辑资料」标题改主题色（原 FbColors.ink 与普通文字无区别）。 新建的"添加成员"一起改 —— 同一类标题不能"新建黑、编辑紫"。 ④ 删除按钮从底部固定条移到**滚动内容最末尾**（前面加"危险操作"小标题）： - 要删必须先滑到底，天然隔开误触； - 不再与"保存"并排抢注意力； - 放在 err 提示之后（报错要在删除按钮上面）； - 仍红底白字、整宽（用户 2026-10-19 定的"删除全部用红色背景"）。 底部固定条只剩「取消」「保存」两颗，等宽平分。 验证（真机 5NC0225B27004718）： - 含「全部字段都能改」= False、含「基本」= False； - 颜色（最深5%像素均值）：编辑资料(69,115,116)、我对他的称呼(69,115,116)、 性别(70,117,119)、家中排行(68,116,117)、工作分组(73,118,120)、 单位字段(71,117,119)、其它分组(68,117,118) —— 均为主题色 #4A7C82； 姓名(168,74,54) 为必填红，符合规范； - 滚到底：「危险操作」y=1761、「删除这个人」y=1820（滚动区最末）； - **滚回顶部时「删除这个人」不可见**（必须滑到底才出现）； - 底部固定条：取消[105-524]、保存[555-975]，等宽平分； - 像素结构：y1826~1934 整宽红块（删除），y2042~2150 两颗按钮。 hvigorw assembleHap BUILD SUCCESSFUL。 --- .../main/ets/components/FbPersonEditSheet.ets | 213 +++++++++++++----- 1 file changed, 161 insertions(+), 52 deletions(-) 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)