v60b:所有弹框统一主题色描边环 + 编辑改居中弹框 + 修名册下拉回弹吃掉悬浮栏

1)9 个浮层统一描边环(抽组件,不复制 8 遍)
   新增 components/FbSheetRing.ets:环宽 FB_RING_W=2 全工程唯一一处;
   实现是"外层 Column 铺色 + padding",不是 border(border 画在盒子内侧);
   外圆角 = 内圆角 + 环宽。简要卡/详情/编辑/日程详情/日程编辑/观影详情/影院/
   日程设置/模块设置全部改用;各浮层的环色 = 所属模块的主题色。

2)编辑从"贴底满宽 + 只有上圆角"改成居中弹框
   人员编辑与日程编辑:Stack 对齐改 Center,卡片 92% 宽 + 四角圆 + 环;
   constraintSize 留在卡片自己身上(挪到外层会让内层 Scroll().layoutWeight
   拿到 0 高度,资料区塌成一条线)。日程的日期时间选择弹层、两个删除确认框
   一并套环,避免同一次交互里出现两种形态。

3)修名册下拉到头回弹后悬浮按钮消失
   EdgeEffect.Spring 在越界松手后把内容弹回,每帧 offset>0 被当成"用户在往上滑"
   ⇒ 收起悬浮栏。判据 = 手指已抬起 + 最后一次方向是下滑 + 抬手不到 500ms;
   拦截必须排在 offset >= HIDE_AT 快路径之前(回弹第一帧位移常 >= 12vp)。

4)真机截图暴露的两个观感问题(静态检查全绿也照错)
   - Scroll().layoutWeight(1) 让短内容也撑满 maxHeight ⇒ 卡片空半屏
     (日程详情/模块设置),改为 flexShrink(1);内容本来就长的浮层不动。
   - 人员编辑"虚拟人物(还没弄清真实身份)"被卡片裁掉半句:两个小开关从
     并排 Row 改为 Flex(wrap) 换行,间距改走 margin。

验证:ArkTS 守卫 444/0;反向验证 17/17;真机 _fb_v60b_verify.py 11/0,
且关掉回弹拦截重编重装后该用例确实变红(证明测试不是假绿);
9 个浮层逐个真机截图确认。
This commit is contained in:
2026-10-19 08:29:44 +08:00
parent 7858de27e3
commit 1a67247407
11 changed files with 1120 additions and 740 deletions
@@ -37,11 +37,13 @@
import { hilog } from '@kit.PerformanceAnalysisKit';
import { FbColors, FbMetric, FB_MASK } from '../common/Theme';
import { FbModuleDef, fbModuleOf, fbThemeVars } from '../model/Modules';
import { FbCalEventFull, FbCalEventInput, FbCalRepo } from '../data/FbCalRepo';
import { FbCalBook } from '../model/Types';
import { FB_TOKEN_STORE } from '../data/FbTokenStore';
import { FB_CAL_SETTINGS } from '../data/FbCalSettings';
import { FbEventChip } from './FbEventChip';
import { FbSheetRing } from './FbSheetRing';
const DOMAIN: number = 0x0000;
const TAG: string = 'FbEventEdit';
@@ -102,6 +104,23 @@ export struct FbEventEditSheet {
@Param presetDate: string = '';
/** 可选的日历本(新建时要选落到哪本) */
@Param books: FbCalBook[] = [];
/**
* 卡片外圈描边环的颜色(hex,'' = 用日程模块色)。
*
* ⚠️ 必须是字符串:环色要直接当背景色(`FbColors.brand` 是 `Resource`,用不了)。
*/
@Param accent: string = '';
/** 环色:显式给了就用给的,否则取日程模块色 */
private accentColor(): string {
if (this.accent !== '') {
return this.accent;
}
const m: FbModuleDef | undefined = fbModuleOf('calendar');
return fbThemeVars(m !== undefined ? m.color : '#A84A28').brand;
}
/** 取消 */
@Event onCancel: () => void = (): void => {
};
@@ -343,8 +362,10 @@ export struct FbEventEditSheet {
build() {
// 🔴 外层 `Stack` 是**必需**的:本组件有**三个**要显示的层
// (编辑卡片 + 日期时间弹层 + 删除确认遮罩),而 build() 只能有一个根节点。
// ⚠️ `alignContent: Bottom` 让卡片/弹层都贴底(同一形态)。
Stack({ alignContent: Alignment.Bottom }) {
// 🔴 2026-10-19 用户:「所有弹框都加线,编辑也弄成弹框,保持一致。」
// ⇒ 原来 `alignContent: Bottom`(贴底抽屉),现在改成**居中**,
// 与名册的编辑/详情、日程详情同一个形态(四角圆角浮卡 + 主题色环)。
Stack({ alignContent: Alignment.Center }) {
this.editCard()
// ---- 「日期 + 时间」选择弹层(照 SyncCalendar)----
@@ -362,7 +383,11 @@ export struct FbEventEditSheet {
@Builder
editCard() {
Column({ space: 0 }) {
// ⚠️ 这一层只给**宽度**(92%);卡片自己必须 100%,
// 否则 0.92×0.92 ≈ 84.6%,比别的浮层窄一圈。
Column() {
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
Column({ space: 0 }) {
// ---- 标题栏 ----
Row({ space: 12 }) {
Text(this.isCreate ? '新建日程' : '编辑日程')
@@ -538,10 +563,11 @@ export struct FbEventEditSheet {
}
.width('100%')
.constraintSize({ maxHeight: '86%' })
.padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP })
.backgroundColor(FbColors.surface)
.borderRadius({ topLeft: FbMetric.radius, topRight: FbMetric.radius })
.padding({ left: 18, right: 18, top: 18, bottom: 20 })
.alignItems(HorizontalAlign.Start)
}
}
.width('92%')
}
/**
@@ -640,7 +666,10 @@ export struct FbEventEditSheet {
*/
@Builder
dateTimePickerSheet() {
Column({ space: 14 }) {
// 🔴 2026-10-19:与其它弹框统一(92% 宽 + 四角圆角 + 主题色环)。
Column() {
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
Column({ space: 14 }) {
Text(this.pickIsEnd ? '选择结束时间' : '选择开始时间')
.fontSize(FbMetric.fontTitle)
.fontWeight(FontWeight.Medium)
@@ -693,10 +722,11 @@ export struct FbEventEditSheet {
})
}
.width('100%')
.backgroundColor(FbColors.surface)
.borderRadius({ topLeft: FbMetric.radius, topRight: FbMetric.radius })
.padding({ left: 18, right: 18, top: 8, bottom: 20 + FB_SHEET_BOTTOM_GAP })
.padding({ left: 18, right: 18, top: 8, bottom: 20 })
.alignItems(HorizontalAlign.Start)
}
}
.width('92%')
}
/** `YYYY-MM-DD` → `10月16日 周五`(比裸日期好读,且和时刻并排也不长) */
@@ -733,7 +763,10 @@ export struct FbEventEditSheet {
@Builder
deleteConfirm() {
Column() {
Column({ space: 8 }) {
// 🔴 2026-10-19:确认框也加主题色环("所有弹框都加线"不能漏这一层)
Column() {
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
Column({ space: 8 }) {
Text('删除这条日程?')
.fontSize(FbMetric.fontBody)
.fontWeight(FontWeight.Medium)
@@ -772,9 +805,10 @@ export struct FbEventEditSheet {
}
.width('100%')
.padding(18)
.backgroundColor(FbColors.surface)
.borderRadius(FbMetric.radius)
.alignItems(HorizontalAlign.Start)
}
}
.width('100%')
}
.width('100%')
.height('100%')