表单规范全量铺开 + 编辑时视频附件不显示 (#56)

① 编辑行程的视频附件不显示

根因:照片墙对所有附件都用 Image 渲染,视频是 .mp4,
Image 加载不出来 ⇒ 空白块 ⇒ 用户以为"视频没带进来"。
按 mime 分流:video/ → 深色底 + ▶(不取首帧,端上解视频首帧很卡)。

② 新增共享组件 FbFormField.ets(GLOBAL-FORM-SPEC)

5 个表单原来各写一份 field()/labelRow(),改一处要改五处,
而且外层结构不一致(有的 Row 有的 Column),批量脚本改坏过两次。
收敛到一个组件,表单只调用不自己实现。

③ 全量铺开

- FbPersonEditSheet  姓名标必填(红色无星号)
- FbEventEditSheet   日程 field 两排
- FbMovieNewSheet    片名/影院/同看的人/海报/观影照片/简介/备注 全部两排
- FbDateTimeField    FbDateTimeRow 改两排(电影+日程同时生效)

规范:标签主题色 + Bold + fontSmall,必填红 #C0533F 无星号,
标签独占第一排、控件第二排整宽。
This commit is contained in:
2026-11-05 12:52:51 +08:00
parent ffd6ac5289
commit 0c2cf9b5e7
6 changed files with 294 additions and 61 deletions
@@ -657,18 +657,16 @@ export struct FbMovieNewSheet {
@Builder
titleField() {
Column({ space: 6 }) {
Row({ space: 8 }) {
Row({ space: 2 }) {
Text('片名')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
Text('*')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.red)
}
.width(48)
.alignItems(VerticalAlign.Center)
/* GLOBAL-FORM-SPEC(用户 2026-11-05):标签独占第一排,输入框第二排。
原来是 `Row` 里 `标签.width(48) + 输入框`,写死 48 只是"凑"对齐,
字数一变就错开。片名必填 ⇒ 红色,**无星号**(用户明确要求去掉)。 */
Text('片名')
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Bold)
.fontColor('#C0533F')
.width('100%')
Row({ space: 8 }) {
TextInput({ text: this.title, placeholder: '看了哪一部?' })
.placeholderColor(FbColors.faint)
.placeholderFont({ size: FbMetric.fontTiny })
@@ -781,10 +779,12 @@ export struct FbMovieNewSheet {
@Builder
cinemaField() {
Row({ space: 8 }) {
/* GLOBAL-FORM-SPEC:标签独占第一排(主题色 Bold,必填红无星号) */
Text('影院')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(48)
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Bold)
.fontColor(this.accentColor())
.width('100%')
Row({ space: 8 }) {
if (this.cinemaColor() !== '') {
@@ -828,10 +828,12 @@ export struct FbMovieNewSheet {
@Builder
personField() {
Row({ space: 8 }) {
/* GLOBAL-FORM-SPEC:标签独占第一排(主题色 Bold,必填红无星号) */
Text('同看的人')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(48)
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Bold)
.fontColor(this.accentColor())
.width('100%')
Row({ space: 8 }) {
Text(this.picked.length > 0
@@ -875,10 +877,12 @@ export struct FbMovieNewSheet {
posterField() {
Column({ space: 6 }) {
Row({ space: 8 }) {
/* GLOBAL-FORM-SPEC:标签独占第一排(主题色 Bold,必填红无星号) */
Text('海报')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(48)
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Bold)
.fontColor(this.accentColor())
.width('100%')
Row({ space: 8 }) {
if (this.posterUri !== '') {
@@ -953,10 +957,12 @@ export struct FbMovieNewSheet {
photoField() {
Column({ space: 6 }) {
Row({ space: 8 }) {
/* GLOBAL-FORM-SPEC:标签独占第一排(主题色 Bold,必填红无星号) */
Text('观影照片')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(48)
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Bold)
.fontColor(this.accentColor())
.width('100%')
Row({ space: 8 }) {
Text(this.photoUris.length > 0
@@ -1022,11 +1028,13 @@ export struct FbMovieNewSheet {
/** 一行多行文本输入(简介 / 备注) */
@Builder
areaField(label: string, placeholder: string, value: string, onChange: (v: string) => void) {
Row({ space: 8 }) {
/* GLOBAL-FORM-SPEC:标签独占第一排(原来是 .width(48) 硬凑) */
Column({ space: 6 }) {
Text(label)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(48)
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Bold)
.fontColor(this.accentColor())
.width('100%')
TextArea({ text: value, placeholder: placeholder })
.placeholderColor(FbColors.faint)
@@ -1036,13 +1044,13 @@ export struct FbMovieNewSheet {
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.height(72)
.layoutWeight(1)
.width('100%')
.padding({ left: 10, right: 10, top: 8, bottom: 8 })
.onChange((v: string): void => {
onChange(v);
})
}
.width('100%')
.alignItems(VerticalAlign.Top)
.alignItems(HorizontalAlign.Start)
}
}