laoyang/FamilyBook_harmonyos
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

v63+v64：影院管理补齐（v63）与观影「记一场」豆瓣/弹框选择（v64）

Browse Source 
⚠️ 本提交含**两批**改动（同一批文件里交织，无法按文件拆开）：
  · v63（影院管理与搜索/统计/年报拆成平级入口）—— 本会话之外的工作，
    随本轮一并提交以免工作区长期留半成品；
  · v64（本会话，用户 2026-10-19 六条）。

v64 六条：
① 片名可经豆瓣自动获取简介与海报（与网页端同一份服务端输出：
   summary 全文 + 已落盘的 poster_key）；简介**只填空白的**，不覆盖用户写过的。
   联想 320ms 防抖（与网页端同值）。
② 开始/结束改成**与日程同一个**日期时间选择控件 —— 新抽 components/FbDateTimeField.ets
   （行 + 弹层 + 一组换算函数），日程那边旧的自绘实现整段删掉改用它
   （用户要的就是"两处一样"）。
③ 影院、同看人改成**弹框选择**：
   · FbCinemaPickSheet：顶部搜索框，匹配「地方 + 名称」，「不记录影院」恒在列表；
   · FbPersonPickSheet：顶部搜索框，拼音首字母**子序列**匹配（yyq 打成 yq 也能搜到），
     多选走"暂存 + 确定"两段式（点一个不关窗）。
   两排横向胶囊/头像全删（用户："这种方式太难找了"）。
④ 允许上传**多张**图片：海报 1 张 + 观影照片可一次选 9 张、可多次追加、可逐张删。
   ⚠️ 顺序是**先建记录再传图**（建记录失败就不会留孤儿图）；图失败**不挡记录**。
⑤ 删掉「地点」输入口（location 字段仍发，网页端与历史数据不受影响）。
⑥ 观影页搜索框改明显：白底 + 实色描边 + 图标放大到 18 并染主题色 +
   占位文字提到 muted/fontBody + 右侧「筛选 ›」暗示（用户："根本看不清"）。

FbMovieRepo 新增 doubanSuggest / doubanFetch / uploadPoster / uploadPhoto
（multipart 手写，与头像上传同一形态，抽成共用的 uploadOne）。

验证：静态守卫 636/0 · 端上反向验证 87/0 · 接口 e2e 57/0 · 服务端反向验证 18/0 ·
本地全量 e2e 1521/0 · hvigor 编译成功并已装机。
⚠️ 真机验证脚本 _fb_v64_verify.py 已写好（六条全覆盖），因设备锁屏未能执行。
This commit is contained in:
laoyang
2026-10-20 07:35:37 +08:00
parent 4a063114c5
commit 8146aab1a7
10 changed files with 3519 additions and 1040 deletions
Download Patch File Download Diff File Expand all files Collapse all files
entry/src/main/ets/components/FbCinemaPickSheet.ets
+240
View File
@@ -0,0 +1,240 @@
/**
* 家书 FamilyBook · 「选择影院」弹框（鸿蒙端）
*
* 🔴 v64（用户 2026-10-19）原话：
* 「然后另外**影院都应该是弹框选择**…这种选择方式太难找了。」
* 「这个弹框选择要跟**网页端的一样**，在上面有个筛选框。」
*
* ⇒ 观影「记一场」原来把影院做成一排**横向胶囊**（要左右划着找，影院一多就找不到）。
* 网页端（`templates/movies/form.php` 的 `#cinemaPicker`）是：
* **一个按钮 → 弹出列表 → 列表顶部有搜索框 → 点一项选中**。
* 这里按同一形态做，并保留网页端已有的两条细节：
* · 「不记录影院」这一项**恒在列表最上方**（它是"清空选择"的出口，
* 被搜没了用户就取消不掉了 —— 网页端注释里点明过）；
* · 搜索匹配「地方 + 名称」（网页端 `data-text` 就是这两段拼的），
* 并且**不区分大小写、按子串**（与网页 `indexOf` 同一口径）。
*
* ⚠️ 为什么与人员选择器**不合并成一个组件**：
* 两者的候选源完全不同（影院有颜色/地方；人有意/头像/拼音首字母），
* 筛选规则也不同（影院按名称子串，人要按拼音**子序列**）。
* 硬合并会变成一个"什么都做、什么都做不专"的组件，且参数会膨胀到十几个。
* 共用的部分已经抽在 `FbSheetRing` / `FbSheetClose` 里了 —— 那才是真正重复的。
*
* ⚠️ 选中即关闭（单选语义）：
* 影院是单选（一条观影记录只可能在一家影院看），没有"暂存 + 确定"的必要 ——
* 那一步只会让用户白点一次。多选的是「同看的人」，那边才有暂存区。
*/
import { FbColors, FbMetric, FB_MASK, fbAlpha, fbTint, FbTint } from '../common/Theme';
import { FbModuleDef, fbModuleOf, fbThemeVars } from '../model/Modules';
import { FbCinemaItem } from '../data/FbMovieRepo';
import { FbSheetRing } from './FbSheetRing';
import { FbSheetClose } from './FbSheetClose';
@ComponentV2
export struct FbCinemaPickSheet {
/** 候选影院（本地库，通常几十家） */
@Param cinemas: FbCinemaItem[] = [];
/** 当前选中的影院 id（0 = 不记录影院） */
@Param selected: number = 0;
/** 环色（hex，'' = 观影模块色） */
@Param accent: string = '';
/** 选中一家（0 = 不记录影院） */
@Event onPick: (id: number) => void = (): void => {
};
/** 关闭（不改变选择） */
@Event onClose: () => void = (): void => {
};
@Local keyword: string = '';
private accentColor(): string {
if (this.accent !== '') {
return this.accent;
}
const m: FbModuleDef | undefined = fbModuleOf('movies');
return fbThemeVars(m !== undefined ? m.color : '#A84A28').brand;
}
/** 影院的显示名（「地方 · 名称」；没有地方就只是名称 —— 与网页端同口径） */
private labelOf(c: FbCinemaItem): string {
return c.place !== '' ? (c.place + ' · ' + c.name) : c.name;
}
/**
* 按关键词过滤。
*
* ⚠️ 与网页端 `filter()` **同一口径**：`toLowerCase().indexOf(kw) !== -1`。
* 用子串而不是前缀 —— 用户常常只记得"万象城"却记不全影院名。
* ⚠️ 匹配的是「地方 + 名称」拼起来的串（网页端 `data-text` 就是这个）：
* 只匹配名称的话，按"青岛"就搜不出青岛那几家。
*/
private filtered(): FbCinemaItem[] {
const kw: string = this.keyword.trim().toLowerCase();
if (kw === '') {
return this.cinemas;
}
return this.cinemas.filter((c: FbCinemaItem): boolean =>
this.labelOf(c).toLowerCase().indexOf(kw) >= 0);
}
build() {
// 整屏遮罩 + 居中卡片（与全应用浮层同一形态）
Column() {
Column()
.width('100%')
.height('100%')
.backgroundColor(FB_MASK)
.onClick((): void => {
this.onClose();
})
Column() {
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
Column({ space: 10 }) {
// ---- 标题栏（统一版式：左标题 + 右 ✕）----
Row({ space: 8 }) {
Column({ space: 2 }) {
Text('选择影院')
.fontSize(FbMetric.fontTitle)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
.maxLines(1)
Text('共 ' + this.cinemas.length.toString() + ' 家')
.fontSize(FbMetric.fontTiny)
.fontColor(this.accentColor())
.maxLines(1)
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
.flexShrink(1)
FbSheetClose({
onClose: (): void => {
this.onClose();
},
color: this.accentColor()
})
}
.width('100%')
.alignItems(VerticalAlign.Center)
// ---- 搜索框（用户点名要"跟网页端一样，上面有个筛选框"）----
Row({ space: 6 }) {
Image($r('app.media.fb_ic_search'))
.width(15)
.height(15)
.renderMode(ImageRenderMode.Template)
.colorFilter(fbTint(FbTint.faint))
TextInput({ text: this.keyword, placeholder: '搜影院（地方或名称）' })
.placeholderColor(FbColors.faint)
.placeholderFont({ size: FbMetric.fontTiny })
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink)
.backgroundColor(Color.Transparent)
.height(38)
.layoutWeight(1)
.padding(0)
.onChange((v: string): void => {
this.keyword = v;
})
}
.width('100%')
.padding({ left: 10, right: 10 })
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.alignItems(VerticalAlign.Center)
// ---- 列表 ----
Scroll() {
Column({ space: 6 }) {
// 「不记录影院」**恒在**（哪怕正在搜索）—— 它是取消选择的唯一出口
this.pickRow(0, '不记录影院', '', true)
ForEach(this.filtered(), (c: FbCinemaItem) => {
this.pickRow(c.id, this.labelOf(c), c.color, false)
}, (c: FbCinemaItem): string => 'cp_' + c.id.toString())
if (this.filtered().length === 0) {
Text('没有匹配的影院')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width('100%')
.textAlign(TextAlign.Center)
.padding({ top: 18, bottom: 18 })
}
}
.width('100%')
}
.constraintSize({ maxHeight: 320 })
.width('100%')
.scrollBar(BarState.Auto)
.align(Alignment.TopStart)
}
.width('100%')
.padding({ left: 18, right: 18, top: 18, bottom: 18 })
.alignItems(HorizontalAlign.Start)
}
}
.width('92%')
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.hitTestBehavior(HitTestMode.Transparent)
}
/**
* 一行影院。
*
* @param id 影院 id（0 = 不记录影院）
* @param text 显示名
* @param color 影院主题色（空 = 画一个虚线空心点，与网页端 `is-none` 一致）
* @param isNone 是不是"不记录影院"那一项
*/
@Builder
pickRow(id: number, text: string, color: string, isNone: boolean) {
Row({ space: 10 }) {
// 色点：影院色；「不记录影院」画空心圈
if (isNone || color === '') {
Text('')
.width(12)
.height(12)
.borderRadius(6)
.border({ width: 1.5, color: FbColors.faint })
} else {
Text('')
.width(12)
.height(12)
.borderRadius(6)
.backgroundColor(color)
}
Text(text)
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
// 选中态：右侧一个对勾（比"整行变色"更明确 —— 列表底色本来就浅）
if (id === this.selected) {
Text('✓')
.fontSize(FbMetric.fontSmall)
.fontColor(this.accentColor())
.fontWeight(FontWeight.Medium)
}
}
.width('100%')
.height(46)
.padding({ left: 12, right: 12 })
.backgroundColor(id === this.selected
? fbAlpha(this.accentColor(), 0.10) : FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.alignItems(VerticalAlign.Center)
.onClick((): void => {
this.onPick(id);
})
}
}
entry/src/main/ets/components/FbCinemaSheet.ets
+42 -833
View File
@@ -1,38 +1,25 @@
/**
* 家书 FamilyBook · 影院管理浮层（鸿蒙端）
*
* 🔴 v62（用户 2026-10-19）原话：
* 「设置里面的影院管理，这些功能都还没有，应该补充，就是增加影院呢、修改影院呢、
* 高级搜索、统计、年度报告，这些全部都应该补充进去。」
* 🔴 v63（用户 2026-10-19）**推翻了 v62 的页签方案**，原话：
* 「**影院管理就是影院管理。高级搜索统计和年度报告不在"影院管理"这个功能里**，
* 而是点击观影设置后，弹框里面有"影院管理""高级搜索统计"和"年度报告"；
* 点击之后，会进入到搜索统计和年度报告里面。
* **影院管理就是管理影院，不要把统计搜索和年报放在这里面。**」
*
* ⇒ 之前这个浮层**只是一个只读列表**（连"新增"都没有），而网页端
* `templates/movies/` 下早就有 `cinemas.php` / `search.php` / `stats.php` /
* `report.php` 四页。这一版把端上补齐到与网页同一套能力：
* · 顶部一排「页签」：影院 / 统计 / 搜索 / 年报；
* · 影院页：**新增 / 修改 / 删除**（服务端 CRUD 早就有，端上没接）；
* · 统计页：总览 + 按影院计数（`/api/v1/movies/stats`）；
* · 搜索页：片名 / 影院 / 人 / 起止日期（`/api/v1/movies/search`）；
* · 年报页：按年切换（`/api/v1/movies/report`）。
* ⇒ v62 我把四项做成同一个浮层里的四个页签；用户要的是**平级的三个入口**：
* 观影页 ☰ → 设置菜单（影院管理 / 高级搜索、统计 / 年度报告）→ 各自独立浮层。
* ⇒ 本组件**只剩影院本身**：列表 + 新增 / 修改 / 删除。
* 统计 / 搜索 / 年报在 `FbMovieInsightSheet`（由 `mode` 决定显示哪一项）。
*
* ⚠️ 四个页签**共用一个浮层**（而不是四个独立浮层）：
* 它们是"同一个东西的不同视角"，来回切换不该经过"关掉再打开"（那会闪一下）。
*
* 🔴 数据来源分两路（有意的）：
* · **影院列表**读**本地库**（`cinemas` 表）—— 与观影页其它内容一致，断网也看得见；
* · **统计 / 年报 / 搜索**必须**联网**——它们的口径要与网页**完全一致**
* （同一份 `MovieStats`）。本地库算出来的是"已同步的那部分"，
* 少同步一次就少一部，用户会发现"网页 124 部、App 121 部"。
* ⇒ 这三页断网时显示"需要联网"，而不是给一个偏低的数字。
* ⚠️ 数据来自**本地库**（观影同步时一起落库的 `cinemas` 表），不是现拉接口 ——
* 见 `FbMovieRepo.cinemaList()` 的说明。
* 但**写操作**（增改删）必须联网，写完立刻回写本地库（见 `saveCinema`）。
*/
import { FbColors, FbMetric, fbAlpha } from '../common/Theme';
import { FbModuleDef, fbModuleOf, fbThemeVars } from '../model/Modules';
import {
FbApiMovieSearchRow, FbCinemaItem, FbMovieCinemaStat, FbMovieMonthStat,
FbMovieOverview, FbMovieReport, FbMovieRepo, FbMovieSearchParams, FbMovieStats,
FbMovieYearStat
} from '../data/FbMovieRepo';
import { FB_TOKEN_STORE } from '../data/FbTokenStore';
import { FbCinemaItem, FbMovieRepo } from '../data/FbMovieRepo';
import { FbSheetRing } from './FbSheetRing';
import { FbSheetClose } from './FbSheetClose';
@@ -45,25 +32,15 @@ import { FbSheetClose } from './FbSheetClose';
*/
const FB_SHEET_BOTTOM_GAP: number = 16;
/** 四个页签 */
const TABS: string[] = ['影院', '统计', '搜索', '年报'];
/** 新增影院时的默认色（与网页 `Cinema::PALETTE` 里的紫同一档，便于区分新建的） */
/** 新建影院时的默认色（与网页 `Cinema::PALETTE` 里的紫同一档） */
const DEFAULT_CINEMA_COLOR: string = '#7A4E8C';
/**
* 空的报告统计对象。
*
* ⚠️ ArkTS 的 `arkts-no-untyped-obj-literals` **不允许空对象字面量**
* （`return {}` 直接编译不过）⇒ 用一个显式声明的空 interface 顶掉。
*/
interface FbEmptyStats {
}
const EMPTY_STATS: FbEmptyStats = {};
/** 同理：总览的空值（`return {}` 编译不过） */
const EMPTY_OVERVIEW: FbMovieOverview = {};
/** 新建影院时可选的颜色（与网页 `Cinema::PALETTE` 同一族，取"色相差得开"的那几个） */
const PALETTE: string[] = [
'#7A4E8C', '#e84393', '#e91e63', '#f06292',
'#2980b9', '#6c5ce7', '#16a085', '#2ecc71',
'#f8c471', '#a67c52', '#95a5a6', '#7f8c8d'
];
@ComponentV2
export struct FbCinemaSheet {
@@ -83,10 +60,7 @@ export struct FbCinemaSheet {
*/
@Param accent: string = '';
/** 当前页签（0=影院 1=统计 2=搜索 3=年报） */
@Local tab: number = 0;
// ---- 编辑态（影院页）----
// ---- 编辑态 ----
/** 正在编辑的影院 id（0 = 新增；-1 = 没在编辑） */
@Local editId: number = -1;
@Local fName: string = '';
@@ -100,26 +74,6 @@ export struct FbCinemaSheet {
/** 待确认删除的影院 id（0 = 没有） */
@Local delId: number = 0;
// ---- 统计 / 年报 / 搜索的加载态 ----
@Local statsLoading: boolean = false;
@Local stats: FbMovieStats | null = null;
@Local statsError: string = '';
@Local reportLoading: boolean = false;
@Local report: FbMovieReport | null = null;
@Local reportError: string = '';
/** 年报年份（0 = 用服务端返回的默认年） */
@Local reportYear: number = 0;
@Local searchLoading: boolean = false;
@Local searchRows: FbApiMovieSearchRow[] = [];
@Local searchError: string = '';
/** 搜索条件 */
@Local sTitle: string = '';
@Local sCinemaId: number = 0;
@Local sFrom: string = '';
@Local sTo: string = '';
private repo: FbMovieRepo = FbMovieRepo.inst();
/** 环色：显式给了就用给的，否则取观影模块色（影院属于观影） */
@@ -131,82 +85,6 @@ export struct FbCinemaSheet {
return fbThemeVars(m !== undefined ? m.color : '#A84A28').brand;
}
/** 切页签时按需拉数据（进统计/年报/搜索才打接口，不在打开浮层就打三个） */
private switchTab(i: number): void {
this.tab = i;
this.note = '';
if (i === 1 && this.stats === null) {
this.loadStats();
}
if (i === 3 && this.report === null) {
this.loadReport(0);
}
}
private async loadStats(): Promise<void> {
const token: string = FB_TOKEN_STORE.get();
if (token === '') {
this.statsError = '还没登录';
return;
}
this.statsLoading = true;
this.statsError = '';
const r: FbMovieStats | null = await this.repo.stats(token);
this.statsLoading = false;
if (r === null) {
this.statsError = '统计需要联网（本地库只有已同步的一部分，算不准）';
return;
}
this.stats = r;
}
private async loadReport(year: number): Promise<void> {
const token: string = FB_TOKEN_STORE.get();
if (token === '') {
this.reportError = '还没登录';
return;
}
this.reportLoading = true;
this.reportError = '';
const r: FbMovieReport | null = await this.repo.report(token, year);
this.reportLoading = false;
if (r === null) {
this.reportError = '年度报告需要联网';
return;
}
this.report = r;
const y: number | undefined = r.year;
this.reportYear = y !== undefined ? y : year;
}
private async doSearch(): Promise<void> {
const token: string = FB_TOKEN_STORE.get();
if (token === '') {
this.searchError = '还没登录';
return;
}
const p: FbMovieSearchParams = {
title: this.sTitle.trim(),
cinemaId: this.sCinemaId,
personId: 0,
dateFrom: this.sFrom.trim(),
dateTo: this.sTo.trim()
};
// ⚠️ 与网页同规则：条件全空就不查（否则等于"列出所有观影"，不是搜索）
if (p.title === '' && p.cinemaId <= 0 && p.dateFrom === '' && p.dateTo === '') {
this.searchError = '先设一个条件再搜（片名 / 影院 / 日期）';
this.searchRows = [];
return;
}
this.searchLoading = true;
this.searchError = '';
this.searchRows = await this.repo.search(token, p);
this.searchLoading = false;
if (this.searchRows.length === 0) {
this.searchError = '没有符合条件的观影记录';
}
}
/** 开始编辑（id=0 表示新增） */
private startEdit(id: number): void {
if (id === 0) {
@@ -216,7 +94,8 @@ export struct FbCinemaSheet {
this.fAddress = '';
this.fColor = DEFAULT_CINEMA_COLOR;
} else {
const c: FbCinemaItem | undefined = this.cinemas.find((x: FbCinemaItem): boolean => x.id === id);
const c: FbCinemaItem | undefined =
this.cinemas.find((x: FbCinemaItem): boolean => x.id === id);
if (c === undefined) {
return;
}
@@ -262,23 +141,25 @@ export struct FbCinemaSheet {
build() {
// FB_WRAP_CENTER：把卡片**垂直居中**（用户 2026-10-16 要求：浮在屏幕中间）。
// ⚠️ 居中放在**组件内部**做，而不是改宿主的 Stack 对齐 ——
// 宿主 Stack 里还有别的子元素（日程页的悬浮 ＋），改对齐会连带挪走它们。
// ⚠️ 外层铺满 + Center；内层仍是那张 92% 宽的圆角卡。
// 宿主 Stack 里还有别的子元素，改对齐会连带挪走它们。
// ⚠️ 外层铺满 + Center；内层是那张 92% 宽的圆角卡。
Column() {
// 🔴 2026-10-19：卡片外面加**主题色环**（用户：「所有弹框都加线」），
// 由共用组件 `FbSheetRing` 统一给；这一层只负责 92% 宽度。
Column() {
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
Column({ space: 0 }) {
// ---- 标题栏（统一版式：左标题 + 右 ✕，见 FbSheetClose.ets）----
Row({ space: 8 }) {
Column({ space: 2 }) {
Text(this.titleText())
Text(this.editId >= 0
? (this.editId === 0 ? '新增影院' : '修改影院') : '影院管理')
.fontSize(FbMetric.fontTitle)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
.maxLines(1)
Text(this.subtitleText())
/* 🔴 v63：副标题**不再写「N 家」**（用户：「影院电影列表里面有个
『影院26家』，不知道是什么意思……没有用，要把它删掉」）。
⇒ 换成一句说明"这里能做什么"，比一个看不懂的数字有用。 */
Text('管理看过的影院：新增 / 修改 / 删除')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.maxLines(1)
@@ -297,27 +178,16 @@ export struct FbCinemaSheet {
.width('100%')
.alignItems(VerticalAlign.Center)
// ---- 页签 ----
this.tabBar()
Divider()
.color(FbColors.line)
.margin({ top: 4, bottom: 4 })
.margin({ top: 10, bottom: 4 })
// ---- 内容区 ----
// ⚠️ `flexShrink(1)` 让内容**按自身高度收缩**（短内容不撑满 maxHeight）——
// 本项目在日程详情/模块设置踩过"卡片空半屏"（`layoutWeight(1)` 会吃满）。
// ---- 内容 ----
// ⚠️ `flexShrink(1)` 让内容**按自身高度收缩**（短内容不撑满 maxHeight），
// 本项目在日程详情/模块设置踩过"卡片空半屏"。
Scroll() {
Column({ space: 0 }) {
if (this.tab === 0) {
this.cinemaPane()
} else if (this.tab === 1) {
this.statsPane()
} else if (this.tab === 2) {
this.searchPane()
} else {
this.reportPane()
}
this.cinemaPane()
}
.width('100%')
}
@@ -326,7 +196,7 @@ export struct FbCinemaSheet {
.scrollBar(BarState.Off)
.align(Alignment.TopStart)
// ---- 底部：影院页的一行结果提示 ----
// ---- 底部：一行结果提示 ----
if (this.note !== '') {
Text(this.note)
.fontSize(FbMetric.fontTiny)
@@ -335,10 +205,6 @@ export struct FbCinemaSheet {
.padding({ top: 8 })
}
}
// 🔴 用户 2026-10-16：「它应该弹出一个**圆角的、浮在上面的卡片**……
// **不要让它左右充满整个屏幕，下面也不要挨着屏幕**，
// 而是放在**屏幕中间**，采用**圆角浮窗**式的形式。」
// ⇒ 不再贴底满宽：左右留边、四角圆角、垂直居中（由宿主的 Stack 对齐）。
.width('100%')
.constraintSize({ maxHeight: '76%' })
.padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP })
@@ -353,60 +219,7 @@ export struct FbCinemaSheet {
.hitTestBehavior(HitTestMode.Transparent)
}
/** 标题（随页签变，用户一眼知道自己在哪一页） */
private titleText(): string {
if (this.tab === 1) {
return '观影统计'
}
if (this.tab === 2) {
return '高级搜索'
}
if (this.tab === 3) {
return '年度报告'
}
return this.editId >= 0 ? (this.editId === 0 ? '新增影院' : '修改影院') : '影院管理';
}
private subtitleText(): string {
if (this.tab === 1) {
return '与网页端口径一致（需要联网）';
}
if (this.tab === 2) {
return '片名 / 影院 / 日期组合查';
}
if (this.tab === 3) {
return '以我为中心，只算我参与过的场次';
}
return this.cinemas.length.toString() + ' 家 · 按名字排序';
}
/** 四个页签（选中用主题色实底 + 白字，与顶栏分段同一套观感） */
@Builder
tabBar() {
Row({ space: 4 }) {
ForEach(TABS, (t: string, i: number) => {
Text(t)
.fontSize(FbMetric.fontSmall)
.fontColor(this.tab === i ? Color.White : FbColors.muted)
.fontWeight(this.tab === i ? FontWeight.Medium : FontWeight.Normal)
.textAlign(TextAlign.Center)
.layoutWeight(1)
.height(32)
.backgroundColor(this.tab === i ? this.accentColor() : Color.Transparent)
.borderRadius(FbMetric.radiusPill)
.onClick((): void => {
this.switchTab(i);
})
}, (t: string): string => 'cintab_' + t)
}
.width('100%')
.padding(3)
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusPill)
.margin({ top: 10 })
}
// ==================== ① 影院：增 / 改 / 删 ====================
// ==================== 影院：增 / 改 / 删 ====================
@Builder
cinemaPane() {
@@ -435,7 +248,6 @@ export struct FbCinemaSheet {
.height(20)
.backgroundColor(c)
.borderRadius(10)
// ⚠️ 选中的加一圈描边（否则分不出选了哪个）
.border({ width: this.fColor === c ? 2 : 0, color: FbColors.ink })
.onClick((): void => {
this.fColor = c;
@@ -454,7 +266,8 @@ export struct FbCinemaSheet {
.textAlign(TextAlign.Center)
.layoutWeight(1)
.height(40)
.backgroundColor(this.saving ? fbAlpha(this.accentColor(), 0.5) : this.accentColor())
.backgroundColor(this.saving
? fbAlpha(this.accentColor(), 0.5) : this.accentColor())
.borderRadius(FbMetric.radiusS)
.onClick((): void => {
this.save();
@@ -576,7 +389,7 @@ export struct FbCinemaSheet {
.width('100%')
}
// ---- 删除确认（红底确认框，与其它删除同一规格 —— 用户要求"删除按钮全部红色背景"）----
// ---- 删除确认（红底 —— 用户要求"删除按钮全部红色背景"）----
if (this.delId > 0) {
this.confirmDelete()
}
@@ -651,608 +464,4 @@ export struct FbCinemaSheet {
.padding({ top: 16, bottom: 6 })
.alignItems(HorizontalAlign.Center)
}
// ==================== ② 统计 ====================
@Builder
statsPane() {
if (this.statsLoading) {
this.loadingRow('正在取统计…')
} else if (this.statsError !== '') {
this.errorRow(this.statsError, (): void => {
this.loadStats();
})
} else if (this.stats !== null) {
// ---- 总览 ----
this.sectionTitle('总览')
Row({ space: 0 }) {
this.statCell('看过', this.ov().movies)
this.statCell('影院', this.ov().cinemas)
this.statCell('参与的人', this.ov().persons)
this.statCell('人次', this.ov().viewership)
}
.width('100%')
.padding({ top: 6, bottom: 10 })
if (this.spanText() !== '') {
Text(this.spanText())
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
// ---- 按影院 ----
if (this.cinemaStats().length > 0) {
this.sectionTitle('按影院')
Column({ space: 6 }) {
ForEach(this.cinemaStats(), (c: FbMovieCinemaStat) => {
this.barRow(
c.name !== undefined && c.name !== '' ? c.name : '(未命名)',
c.cnt !== undefined ? c.cnt : 0,
this.maxCinemaCount(),
c.color !== undefined && c.color !== '' ? c.color : this.accentColor())
}, (c: FbMovieCinemaStat): string => 'cs_' + (c.id !== undefined ? c.id : 0).toString())
}
.width('100%')
.padding({ top: 4 })
}
// ---- 按年 ----
if (this.yearStats().length > 0) {
this.sectionTitle('按年')
Column({ space: 6 }) {
ForEach(this.yearStats(), (y: FbMovieYearStat) => {
this.barRow(
(y.year !== undefined ? y.year.toString() : '') + ' 年',
y.cnt !== undefined ? y.cnt : 0,
this.maxYearCount(),
this.accentColor())
}, (y: FbMovieYearStat): string => 'ys_' + (y.year !== undefined ? y.year : 0).toString())
}
.width('100%')
.padding({ top: 4 })
}
// ---- 按月（近 12 个月）----
if (this.monthStats().length > 0) {
this.sectionTitle('近 12 个月')
Column({ space: 6 }) {
ForEach(this.monthStats(), (m: FbMovieMonthStat) => {
this.barRow(
m.label !== undefined && m.label !== ''
? m.label : (m.ym !== undefined ? m.ym : ''),
m.cnt !== undefined ? m.cnt : 0,
this.maxMonthCount(),
this.accentColor())
}, (m: FbMovieMonthStat): string =>
'ms_' + (m.ym !== undefined ? m.ym : (m.label !== undefined ? m.label : '')))
}
.width('100%')
.padding({ top: 4 })
}
}
}
/** 总览的安全取值 */
private ov(): FbMovieOverview {
if (this.stats === null || this.stats.overview === undefined) {
return EMPTY_OVERVIEW;
}
return this.stats.overview;
}
private spanText(): string {
const o: FbMovieOverview = this.ov();
const f: string | null | undefined = o.first_date;
const l: string | null | undefined = o.last_date;
if (f === undefined || f === null || f === '') {
return '';
}
return '从 ' + f + ' 到 ' + (l !== undefined && l !== null && l !== '' ? l : '今');
}
private cinemaStats(): FbMovieCinemaStat[] {
return this.stats !== null && this.stats.by_cinema !== undefined ? this.stats.by_cinema : [];
}
private yearStats(): FbMovieYearStat[] {
return this.stats !== null && this.stats.by_year !== undefined ? this.stats.by_year : [];
}
private monthStats(): FbMovieMonthStat[] {
return this.stats !== null && this.stats.by_month !== undefined ? this.stats.by_month : [];
}
private maxCinemaCount(): number {
let m: number = 1;
for (const c of this.cinemaStats()) {
const n: number = c.cnt !== undefined ? c.cnt : 0;
if (n > m) {
m = n;
}
}
return m;
}
private maxYearCount(): number {
let m: number = 1;
for (const y of this.yearStats()) {
const n: number = y.cnt !== undefined ? y.cnt : 0;
if (n > m) {
m = n;
}
}
return m;
}
private maxMonthCount(): number {
let m: number = 1;
for (const y of this.monthStats()) {
const n: number = y.cnt !== undefined ? y.cnt : 0;
if (n > m) {
m = n;
}
}
return m;
}
/** 总览的一格（大数字 + 小标签） */
@Builder
statCell(label: string, value: number | undefined) {
Column({ space: 2 }) {
Text(value !== undefined ? value.toString() : '0')
.fontSize(22)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
Text(label)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
.layoutWeight(1)
.alignItems(HorizontalAlign.Center)
}
/**
* 一条横向条形统计（名字 + 条 + 数字）。
*
* ⚠️ 条的宽度用 `layoutWeight` 按**比例**分配，而不是直接给百分比字符串：
* ArkTS 里 `width('62%')` 要拼字符串，且宽度为 0 的条会塌成一条线。
* 这里用"按 max 归一后的整数份数"再 `layoutWeight`，0 的时候
* 仍保留一个极小的占位（否则那一行看起来缺了一块）。
*/
@Builder
barRow(label: string, value: number, max: number, color: string) {
Row({ space: 8 }) {
Text(label)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.muted)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.width(72)
Row() {
Row()
.width(Math.max(4, Math.round((value / max) * 100)))
.height(8)
.backgroundColor(color)
.borderRadius(4)
Blank()
}
.layoutWeight(1)
.height(8)
.alignItems(VerticalAlign.Center)
Text(value.toString())
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.ink)
.width(30)
.textAlign(TextAlign.End)
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
// ==================== ③ 高级搜索 ====================
@Builder
searchPane() {
Column({ space: 8 }) {
this.field('片名', '含这几个字就算命中', this.sTitle, (v: string): void => {
this.sTitle = v;
})
// 影院：从本地影院列表里选（不额外打接口）
Row({ space: 8 }) {
Text('影院')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(52)
Scroll() {
Row({ space: 6 }) {
Text('不限')
.fontSize(FbMetric.fontTiny)
.fontColor(this.sCinemaId === 0 ? Color.White : FbColors.muted)
.padding({ left: 10, right: 10, top: 5, bottom: 5 })
.backgroundColor(this.sCinemaId === 0 ? this.accentColor() : FbColors.inputBg)
.borderRadius(FbMetric.radiusPill)
.onClick((): void => {
this.sCinemaId = 0;
})
ForEach(this.cinemas, (c: FbCinemaItem) => {
Text(c.name)
.fontSize(FbMetric.fontTiny)
.fontColor(this.sCinemaId === c.id ? Color.White : FbColors.muted)
.maxLines(1)
.padding({ left: 10, right: 10, top: 5, bottom: 5 })
.backgroundColor(this.sCinemaId === c.id ? this.accentColor() : FbColors.inputBg)
.borderRadius(FbMetric.radiusPill)
.onClick((): void => {
this.sCinemaId = c.id;
})
}, (c: FbCinemaItem): string => 'sch_' + c.id.toString())
}
}
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.layoutWeight(1)
}
.width('100%')
.alignItems(VerticalAlign.Center)
this.field('从', 'YYYY-MM-DD（可空）', this.sFrom, (v: string): void => {
this.sFrom = v;
})
this.field('到', 'YYYY-MM-DD（可空）', this.sTo, (v: string): void => {
this.sTo = v;
})
Row({ space: 8 }) {
Text(this.searchLoading ? '搜索中…' : '搜索')
.fontSize(FbMetric.fontSmall)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
.layoutWeight(1)
.height(40)
.backgroundColor(this.searchLoading
? fbAlpha(this.accentColor(), 0.5) : this.accentColor())
.borderRadius(FbMetric.radiusS)
.onClick((): void => {
this.doSearch();
})
Text('清空')
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.muted)
.textAlign(TextAlign.Center)
.layoutWeight(1)
.height(40)
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.onClick((): void => {
this.sTitle = '';
this.sCinemaId = 0;
this.sFrom = '';
this.sTo = '';
this.searchRows = [];
this.searchError = '';
})
}
.width('100%')
.margin({ top: 2 })
}
.width('100%')
.padding({ top: 12 })
.alignItems(HorizontalAlign.Start)
// ---- 结果 ----
if (this.searchError !== '') {
Text(this.searchError)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width('100%')
.padding({ top: 12, bottom: 8 })
}
if (this.searchRows.length > 0) {
this.sectionTitle('命中 ' + this.searchRows.length.toString() + ' 条')
Column({ space: 0 }) {
ForEach(this.searchRows, (r: FbApiMovieSearchRow) => {
Column({ space: 0 }) {
Row({ space: 10 }) {
Column()
.width(4)
.height(34)
.backgroundColor(r.cinema_color !== null && r.cinema_color !== undefined
&& r.cinema_color !== '' ? r.cinema_color : this.accentColor())
.borderRadius(2)
Column({ space: 3 }) {
Text(r.title !== undefined && r.title !== '' ? r.title : '未命名影片')
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Row({ space: 6 }) {
Text(this.dateOf(r.starts_at))
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.muted)
if (r.cinema_name !== null && r.cinema_name !== undefined && r.cinema_name !== '') {
Text(r.cinema_name)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.maxLines(1)
.layoutWeight(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
}
.width('100%')
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
}
.width('100%')
.padding({ top: 10, bottom: 10 })
.alignItems(VerticalAlign.Center)
Divider().strokeWidth(0.5).color(FbColors.line)
}
.width('100%')
}, (r: FbApiMovieSearchRow): string => 'srch_' + (r.id !== undefined ? r.id : 0).toString())
}
.width('100%')
}
}
/** `2026-10-19 19:30:00` → `2026-10-19` */
private dateOf(v: string | undefined | null): string {
if (v === undefined || v === null || v.length < 10) {
return '';
}
return v.substring(0, 10);
}
// ==================== ④ 年度报告 ====================
@Builder
reportPane() {
if (this.reportLoading) {
this.loadingRow('正在生成年度报告…')
} else if (this.reportError !== '') {
this.errorRow(this.reportError, (): void => {
this.loadReport(this.reportYear);
})
} else if (this.report !== null) {
// ---- 年份切换 ----
if (this.reportYears().length > 1) {
Scroll() {
Row({ space: 6 }) {
ForEach(this.reportYears(), (y: number) => {
Text(y.toString() + ' 年')
.fontSize(FbMetric.fontTiny)
.fontColor(this.reportYear === y ? Color.White : FbColors.muted)
.padding({ left: 12, right: 12, top: 5, bottom: 5 })
.backgroundColor(this.reportYear === y ? this.accentColor() : FbColors.inputBg)
.borderRadius(FbMetric.radiusPill)
.onClick((): void => {
this.loadReport(y);
})
}, (y: number): string => 'ry_' + y.toString())
}
}
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.width('100%')
.padding({ top: 10, bottom: 2 })
}
// ---- 大数 ----
Row({ space: 0 }) {
this.statCell('看了', this.numField('total'))
this.statCell('观影天数', this.numField('days'))
this.statCell('平均每月', this.numField('avg_per_month'))
}
.width('100%')
.padding({ top: 12, bottom: 10 })
// ---- 几条"最" ----
this.reportLine('最常去的影院', this.strField('top_cinema'),
this.numField('top_cinema_count'), '次')
this.reportLine('一起看最多的人', this.strField('top_person'),
this.numField('top_person_count'), '场')
this.reportLine('最多人一起看的', this.strField('most_viewers_movie'),
this.numField('most_viewers_count'), '人')
// ---- 首末场 ----
/* ⚠️ `@Builder` 里**不能写 `const` 声明**（编译器报 "Only UI component
syntax can be written here"）—— 只能直接调方法。
⇒ 判空/拼接都收进 `reportSpan()` 里，返回空串就不渲染这行。 */
if (this.reportSpan() !== '') {
this.sectionTitle('这一年')
Text(this.reportSpan())
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.muted)
.padding({ top: 2 })
}
// ---- 月份分布 ----
if (this.monthDist().length > 0) {
this.sectionTitle('每月分布')
Column({ space: 6 }) {
ForEach(this.monthDist(), (m: FbMovieMonthStat) => {
this.barRow(
m.label !== undefined ? m.label : '',
m.cnt !== undefined ? m.cnt : 0,
this.maxMonthDist(),
this.accentColor())
}, (m: FbMovieMonthStat): string => 'rd_' + (m.label !== undefined ? m.label : ''))
}
.width('100%')
.padding({ top: 4 })
}
if (this.numField('total') === 0) {
Text('这一年（' + this.reportYear.toString() + '）没有你参与的观影记录。')
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.faint)
.width('100%')
.padding({ top: 24, bottom: 16 })
.textAlign(TextAlign.Center)
}
}
}
private reportYears(): number[] {
if (this.report === null || this.report.years === undefined) {
return [];
}
return this.report.years;
}
private rp(): Object {
if (this.report === null || this.report.stats === undefined) {
// ⚠️ ArkTS 不允许空对象字面量 ⇒ 用一个显式声明的空 interface
return EMPTY_STATS;
}
return this.report.stats as Object;
}
/** 年报告里的「第一场 … 最后一场 …」；没有首场时返回空串（不渲染） */
private reportSpan(): string {
const f: string = this.strField('first_date');
if (f === '') {
return '';
}
const l: string = this.strField('last_date');
return '第一场 ' + f + '　·　最后一场 ' + (l !== '' ? l : '—');
}
/** 取一个数值字段（JSON 解析出来的是弱类型，统一在这里兜底） */
private numField(key: string): number {
const o: Record<string, Object> = this.rp() as Record<string, Object>;
const v: Object | undefined = o[key];
return typeof v === 'number' ? v : 0;
}
private strField(key: string): string {
const o: Record<string, Object> = this.rp() as Record<string, Object>;
const v: Object | undefined = o[key];
return typeof v === 'string' ? v : '';
}
/** 月份分布 → 条形数据（1..12 月） */
private monthDist(): FbMovieMonthStat[] {
const o: Record<string, Object> = this.rp() as Record<string, Object>;
const md: Object | undefined = o['month_distribution'];
const out: FbMovieMonthStat[] = [];
if (md === undefined || md === null) {
return out;
}
const m: Record<string, Object> = md as Record<string, Object>;
for (let i = 1; i <= 12; i++) {
const v: Object | undefined = m[i.toString()];
const it: FbMovieMonthStat = {};
it.label = i.toString() + ' 月';
it.cnt = typeof v === 'number' ? v : 0;
out.push(it);
}
return out;
}
private maxMonthDist(): number {
let m: number = 1;
for (const it of this.monthDist()) {
const n: number = it.cnt !== undefined ? it.cnt : 0;
if (n > m) {
m = n;
}
}
return m;
}
/**
* 报告里的一条「最 XX」。
*
* ⚠️ `total` 字段在端上是**弱类型**（服务端可能给 int），
* 所以统一走 `numField/strField` 兜底，不直接下标取值。
*/
@Builder
reportLine(label: string, value: string, count: number, unit: string) {
if (value !== '' && value !== '无') {
Row({ space: 8 }) {
Text(label)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(96)
Text(value)
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
if (count > 0) {
Text(count.toString() + ' ' + unit)
.fontSize(FbMetric.fontTiny)
.fontColor(this.accentColor())
}
}
.width('100%')
.padding({ top: 6, bottom: 6 })
.alignItems(VerticalAlign.Center)
}
}
// ==================== 小组件 ====================
@Builder
sectionTitle(t: string) {
Text(t)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width('100%')
.padding({ top: 14, bottom: 2 })
}
@Builder
loadingRow(t: string) {
Row({ space: 8 }) {
LoadingProgress().width(18).height(18).color(FbColors.faint)
Text(t)
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.faint)
}
.width('100%')
.justifyContent(FlexAlign.Center)
.padding({ top: 40, bottom: 40 })
}
/** 失败 + 一个「重试」（用户最烦"点了没反应"，给一条出路） */
@Builder
errorRow(msg: string, retry: () => void) {
Column({ space: 10 }) {
Text(msg)
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.faint)
.textAlign(TextAlign.Center)
Text('重试')
.fontSize(FbMetric.fontSmall)
.fontColor(this.accentColor())
.height(34)
.padding({ left: 16, right: 16 })
.borderRadius(FbMetric.radiusS)
.backgroundColor(fbAlpha(this.accentColor(), 0.10))
.textAlign(TextAlign.Center)
.onClick((): void => {
retry();
})
}
.width('100%')
.padding({ top: 32, bottom: 32 })
.alignItems(HorizontalAlign.Center)
}
}
/**
* 新建影院时可选的颜色（与网页 `Cinema::PALETTE` 同一族，取前若干个常用的）。
*
* ⚠️ 不是**全部**调色板（那有 40 个，竖排一片看不出差别）——
* 这里挑的是"色相差得开"的那几个，用户一眼能分。
*/
const PALETTE: string[] = [
'#7A4E8C', '#e84393', '#e91e63', '#f06292',
'#2980b9', '#6c5ce7', '#16a085', '#2ecc71',
'#f8c471', '#a67c52', '#95a5a6', '#7f8c8d'
];
}
entry/src/main/ets/components/FbDateTimeField.ets
+317
View File
@@ -0,0 +1,317 @@
/**
* 家书 FamilyBook · 「日期 + 时间」选择（鸿蒙端，**日程与观影共用**）
*
* 🔴 v64（用户 2026-10-19）原话：
* 「开始时间和结束时间，应该都是**时间选择框**才对，跟那个日程里面的是一样的，
* 保持一致。」
*
* ⇒ 观影的「记一场」原来把开始/结束做成了**两个纯文本输入框**
* （要用户手打 `2026-10-19 19:30` 这种串，还得自己记得格式），
* 而日程那边早就有一个"点开 → 日期与时间并排滚轮 → 确定回填"的控件。
* 用户要求两处**同一种控件**。
*
* ⚠️ 为什么不复制一份到观影里（这是本文件存在的唯一理由）：
* 复制 = 两份实现，改一处忘一处。本项目已经为"两份实现必然漂移"
* 栽过好几次（弹框描边环、关闭按钮、地址格式化都是）。所以抽成共用组件：
* · `FbDateTimeRow` —— 表单里的那一整行（显示 `10月16日 周五 20:00`）
* · `FbDateTimePicker` —— 点开后的弹层（日期与时间**并排** + 确定/取消）
* · 一组 `fb*` 换算函数 —— `cnDate` / `parseDate` / `parseTime` 等，
* 格式化规则也只有这一份（"10月16日 周五"这种写法两处必须一模一样）
*
* ⚠️ 为什么**弹层不放进 `FbDateTimeRow` 内部**：
* Row 一定位于浮层卡片**内部**（卡片才 92% 宽），弹层若渲染在 Row 里，
* 就只能撑到卡片的尺寸 ⇒ 变成"卡中卡"，与全应用"居中大卡 + 整屏遮罩"
* 的浮层形态不一致（真机上看着像被挤扁了）。
* ⇒ 弹层由**宿主页面**放到它自己的 `Stack` 里（与 `editCard` 同级、叠在它上面），
* 这样它跟其它浮层长得一样。宿主只需要管一个 `pickOpen` 布尔。
*
* ⚠️ 弹层内部用**草稿**（`draftDate`/`draftHour`/`draftMin`）：点了「取消」不写回。
* 若直接改宿主的真实值，"取消"就变成不可撤销了。
*/
import { FbColors, FbMetric, FB_MASK, FbTint } from '../common/Theme';
import { FbSheetRing } from './FbSheetRing';
// ============================================================
// 换算 / 格式化（**全应用唯一一份**）
// ============================================================
/** 补零到两位 */
export function fbPad2(n: number): string {
return n < 10 ? ('0' + n.toString()) : n.toString();
}
/** `YYYY-MM-DD` → `10月16日 周五`（比裸日期好读，与时刻并排也不长） */
export function fbCnDate(iso: string): string {
if (iso.length < 10) {
return iso;
}
const y: number = parseInt(iso.substring(0, 4), 10);
const m: number = parseInt(iso.substring(5, 7), 10);
const d: number = parseInt(iso.substring(8, 10), 10);
const w: string[] = ['日', '一', '二', '三', '四', '五', '六'];
return m.toString() + '月' + d.toString() + '日 周' + w[new Date(y, m - 1, d).getDay()];
}
/** 今天 `YYYY-MM-DD` */
export function fbToday(): string {
const n: Date = new Date();
return fbPad2(n.getFullYear()) + '-' + fbPad2(n.getMonth() + 1) + '-' + fbPad2(n.getDate());
}
/** `YYYY-MM-DD` → `Date`（解析不出给"今天"） */
export function fbParseDate(s: string): Date {
if (s.length < 10) {
return new Date();
}
const y: number = parseInt(s.substring(0, 4), 10);
const m: number = parseInt(s.substring(5, 7), 10) - 1;
const d: number = parseInt(s.substring(8, 10), 10);
return new Date(y, m, d);
}
/** `HH:mm` → `Date`（只取时分；解析不出给 09:00） */
export function fbParseTime(s: string): Date {
const out: Date = new Date();
if (s.length >= 5) {
out.setHours(parseInt(s.substring(0, 2), 10));
out.setMinutes(parseInt(s.substring(3, 5), 10));
} else {
out.setHours(9);
out.setMinutes(0);
}
return out;
}
/** `YYYY-MM-DD HH:MM:SS` → 日期段 `YYYY-MM-DD` */
export function fbDateOf(dt: string, fallback: string): string {
return dt.length >= 10 ? dt.substring(0, 10) : fallback;
}
/** `YYYY-MM-DD HH:MM:SS` → `HH:mm` */
export function fbTimeOf(dt: string, fallback: string): string {
return dt.length >= 16 ? dt.substring(11, 16) : fallback;
}
/** `Date` 的年月日 → `YYYY-MM-DD` */
export function fbIsoOf(d: Date): string {
return fbPad2(d.getFullYear()) + '-' + fbPad2(d.getMonth() + 1) + '-' + fbPad2(d.getDate());
}
/** `HH:mm` 往后推 1 小时（结束时间没填时的兜底） */
export function fbAddHour(time: string): string {
const hh: number = time.length >= 5 ? parseInt(time.substring(0, 2), 10) : 9;
const mm: string = time.length >= 5 ? time.substring(3, 5) : '00';
return fbPad2(Math.min(hh + 1, 23)) + ':' + mm;
}
/** 日期 + 时分拼成服务端认的 `YYYY-MM-DD HH:MM`（秒由服务端补） */
export function fbJoinDateTime(date: string, time: string): string {
return date + ' ' + time;
}
// ============================================================
// ① 表单里的那一行
// ============================================================
@ComponentV2
export struct FbDateTimeRow {
/** 左侧标签（「开始」/「结束」） */
@Param label: string = '开始';
/** 日期段 `YYYY-MM-DD` */
@Param date: string = '';
/** 时分 `HH:mm`（`allDay` 为真时不显示） */
@Param time: string = '';
/** 全天：只显示日期（日程用） */
@Param allDay: boolean = false;
/** 主题色（右侧 `›` 与文字对齐无关，留着给以后的强调态用） */
@Param accent: string = '';
/** 点这一行（宿主把它接到"打开弹层"） */
@Param onTap: () => void = (): void => {
};
build() {
Row({ space: 10 }) {
Text(this.label)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(28)
// 整块可点：日期与时间在**同一个控件**里，中间不再分两块
Row() {
Text(fbCnDate(this.date))
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink)
if (!this.allDay) {
Text(' ' + this.time)
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
}
}
.layoutWeight(1)
.height(42)
.padding({ left: 12, right: 12 })
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.alignItems(VerticalAlign.Center)
.onClick((): void => {
this.onTap();
})
// 右侧小箭头：暗示"点开会选"
Text('›')
.fontSize(FbMetric.fontBody)
.fontColor(FbColors.faint)
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
}
// ============================================================
// ② 点开后的弹层
// ============================================================
@ComponentV2
export struct FbDateTimePicker {
/** 弹层标题（「选择开始时间」/「选择结束时间」） */
@Param title: string = '选择时间';
/** 打开时的初始日期 */
@Param date: string = '';
/** 打开时的初始时分 */
@Param time: string = '09:00';
/** 全天：只画日期滚轮 */
@Param allDay: boolean = false;
/** 主题色（环色 + 确定按钮底色） */
@Param accent: string = '';
/** 可选日期范围（默认 2000~2035：观影可能是很多年前看的老片子） */
@Param minDate: string = '2000-01-01';
@Param maxDate: string = '2035-12-31';
/** 「确定」：回填（日期 `YYYY-MM-DD`、时分 `HH:mm`） */
@Event onConfirm: (date: string, time: string) => void = (): void => {
};
/** 「取消」/ 点遮罩 */
@Event onCancel: () => void = (): void => {
};
// ---- 草稿（取消则丢弃，不碰宿主的值）----
@Local draftDate: Date = new Date();
@Local draftHour: number = 9;
@Local draftMin: number = 0;
aboutToAppear(): void {
this.draftDate = fbParseDate(this.date);
const tm: Date = fbParseTime(this.time);
this.draftHour = tm.getHours();
this.draftMin = tm.getMinutes();
}
build() {
Column() {
// 遮罩：整屏铺一层，点它 = 取消。
// ⚠️ 必须**有**遮罩：没有的话，点弹层外面会直接点到下面那张编辑卡片上
// （真机上表现为"随手一点，表单被改了"）。
Column()
.width('100%')
.height('100%')
.backgroundColor(FB_MASK)
.onClick((): void => {
this.onCancel();
})
// ---- 居中卡片 ----
Column() {
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
Column({ space: 14 }) {
Text(this.title)
.fontSize(FbMetric.fontTitle)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
.width('100%')
.textAlign(TextAlign.Center)
.padding({ top: 12 })
Row({ space: 6 }) {
DatePicker({
start: fbParseDate(this.minDate),
end: fbParseDate(this.maxDate),
selected: this.draftDate
})
.onDateChange((v: Date): void => {
this.draftDate = v;
})
.textStyle({ color: FbColors.faint, font: { size: 14 } })
.selectedTextStyle({ color: FbColors.ink, font: { size: 16, weight: FontWeight.Medium } })
.disappearTextStyle({ color: FbColors.faint, font: { size: 14 } })
.layoutWeight(1)
.height(210)
if (!this.allDay) {
TimePicker({ selected: new Date(2000, 0, 1, this.draftHour, this.draftMin) })
.useMilitaryTime(true)
.onChange((v: TimePickerResult): void => {
// ⚠️ `hour`/`minute` 是**数字**；存草稿数字，拼 `HH:MM` 时再补零
this.draftHour = v.hour;
this.draftMin = v.minute;
})
.textStyle({ color: FbColors.faint, font: { size: 14 } })
.selectedTextStyle({ color: FbColors.ink, font: { size: 16, weight: FontWeight.Medium } })
.disappearTextStyle({ color: FbColors.faint, font: { size: 14 } })
.layoutWeight(1)
.height(210)
}
}
.width('100%')
Row({ space: 10 }) {
Text('取消')
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.muted)
.textAlign(TextAlign.Center)
.height(44)
.padding({ left: 18, right: 18 })
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.onClick((): void => {
this.onCancel();
})
Text(this.allDay ? '确定日期' : '确定')
.fontSize(FbMetric.fontSmall)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
.layoutWeight(1)
.height(44)
.backgroundColor(this.accentColor())
.borderRadius(FbMetric.radiusS)
.onClick((): void => {
this.onConfirm(fbIsoOf(this.draftDate),
fbPad2(this.draftHour) + ':' + fbPad2(this.draftMin));
})
}
.width('100%')
}
.width('100%')
.padding({ left: 18, right: 18, top: 8, bottom: 18 })
.alignItems(HorizontalAlign.Start)
}
}
.width('92%')
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
// ⚠️ 透明命中：让点击"卡片以外的区域"落到上面那层遮罩上（点遮罩关掉）
.hitTestBehavior(HitTestMode.Transparent)
}
/** 环色/按钮底色（没传 accent 时回落到品牌色的 hex） */
private accentColor(): string {
// ⚠️ 用 `FbTint.brand`（hex）而不是 `FbColors.brand`：
// `FbColors` 那一套是 `Resource`，参与不了 `.backgroundColor(string)`；
// 本组件要与别的浮层行为一致（环色/按钮底色都是可运算的 hex 串）。
return this.accent !== '' ? this.accent : FbTint.brand;
}
}
entry/src/main/ets/components/FbEventEditSheet.ets
+60 -170
View File
@@ -44,6 +44,24 @@ import { FB_TOKEN_STORE } from '../data/FbTokenStore';
import { FB_CAL_SETTINGS } from '../data/FbCalSettings';
import { FbEventChip } from './FbEventChip';
import { FbSheetRing } from './FbSheetRing';
/* 🔴 v64（用户 2026-10-19）：「观影的开始/结束时间应该跟**日程里面的是一样的**。」
⇒ 「日期 + 时间」那一套控件抽成了共用组件（见该文件头），日程与观影都用它。
⚠️ 本文件里原来的 `dateTimeRow` / `dateTimePickerSheet` / `cnDate` /
`parseDate` / `parseTime` / `pad` 全部删掉，改调这里的 —— 两份实现必然漂移，
用户这次点名的正是"两边不一致"。 */
import {
FbDateTimeRow,
FbDateTimePicker,
fbCnDate,
fbPad2,
fbToday,
fbParseDate,
fbParseTime,
fbDateOf,
fbTimeOf,
fbIsoOf,
fbAddHour
} from './FbDateTimeField';
const DOMAIN: number = 0x0000;
const TAG: string = 'FbEventEdit';
@@ -178,10 +196,10 @@ export struct FbEventEditSheet {
// ---- 编辑：回填 ----
this.fTitle = e.title;
this.fAllDay = e.all_day;
this.fStartDate = this.dateOf(e.starts_at);
this.fStartTime = this.timeOf(e.starts_at);
this.fEndDate = e.ends_at !== '' ? this.dateOf(e.ends_at) : this.dateOf(e.starts_at);
this.fEndTime = e.ends_at !== '' ? this.timeOf(e.ends_at) : this.addHour(e.starts_at);
this.fStartDate = fbDateOf(e.starts_at, this.todayStr());
this.fStartTime = fbTimeOf(e.starts_at, '09:00');
this.fEndDate = e.ends_at !== '' ? fbDateOf(e.ends_at, this.todayStr()) : fbDateOf(e.starts_at, this.todayStr());
this.fEndTime = e.ends_at !== '' ? fbTimeOf(e.ends_at, '10:00') : this.addHour(e.starts_at);
this.fPlace = e.location;
this.fNote = e.note;
this.fRepeat = this.repeatKeyOf(e.rrule);
@@ -190,15 +208,15 @@ export struct FbEventEditSheet {
return;
}
// ---- 新建：预填 ----
const d: string = this.presetDate !== '' ? this.presetDate : this.todayStr();
const d: string = this.presetDate !== '' ? this.presetDate : fbToday();
this.fStartDate = d;
this.fEndDate = d;
// 新建时把**开始时间**预填成"下一个整点"、结束 +1 小时 ——
// 比固定 09:00 更符合"现在就要加一条"的场景（打开就能直接存）。
const now: Date = new Date();
const nh: number = Math.min(now.getHours() + 1, 22);
this.fStartTime = this.pad(nh) + ':00';
this.fEndTime = this.pad(nh + 1 > 23 ? 23 : nh + 1) + ':00';
this.fStartTime = fbPad2(nh) + ':00';
this.fEndTime = fbPad2(nh + 1 > 23 ? 23 : nh + 1) + ':00';
this.fBookId = this.defaultBookId();
}
@@ -207,29 +225,12 @@ export struct FbEventEditSheet {
// ============================================================
private todayStr(): string {
const n: Date = new Date();
return this.pad(n.getFullYear()) + '-' + this.pad(n.getMonth() + 1) + '-' + this.pad(n.getDate());
return fbToday();
}
private pad(n: number): string {
return n < 10 ? ('0' + n.toString()) : n.toString();
}
/** 从 `YYYY-MM-DD HH:MM:SS` 取日期段 */
private dateOf(dt: string): string {
return dt.length >= 10 ? dt.substring(0, 10) : this.todayStr();
}
/** 从 `YYYY-MM-DD HH:MM:SS` 取时间段的 `HH:mm` */
private timeOf(dt: string): string {
return dt.length >= 16 ? dt.substring(11, 16) : '09:00';
}
/** 给一个时间的时分 +1 小时（当结束时间没填时的兜底） */
/** 给一个时刻的时分 +1 小时（当结束时间没填时的兜底） */
private addHour(dt: string): string {
const hh: number = dt.length >= 16 ? parseInt(dt.substring(11, 13), 10) : 9;
const h2: number = Math.min(hh + 1, 23);
return this.pad(h2) + ':' + (dt.length >= 16 ? dt.substring(14, 16) : '00');
return fbAddHour(fbTimeOf(dt, '09:00'));
}
/** 默认落到的日历本：设置里选的（若还在可选列表里），否则第一本可写的 */
@@ -577,51 +578,22 @@ export struct FbEventEditSheet {
/**
* **一个「日期 + 时间」控件**（照 SyncCalendar 的 `EventEditPage`）。
*
* 🔴 用户 2026-10-16：「你参考一下 SyncCalendar 的做法，实际上就是
* **把日期和时间放在一个控件里面**。」
* 它的做法（`dateTimePickerSheet`）：**一个底部弹层里 `DatePicker` 与
* `TimePicker` 并排**，选完点「确定」一次回填。
* ⚠️ 我第一版做成了"点日期块就地展开 DatePicker、点时间块再展开 TimePicker"
* —— 那是**两个控件、分两次选**，形态与它不同（也不如一次选完顺手）。
*
* 控件本身是**一整块可点的框**，显示 `10月16日 周五 20:00`；
* 点它 → 打开弹层（里面日期/时间并排）→ 「确定」写回。
* 🔴 v64：实现已抽到 `FbDateTimeField.ets::FbDateTimeRow`（**与观影共用**）——
* 用户 2026-10-19：「观影的开始/结束时间应该跟日程里面的是一样的。」
* 这里只负责"把本表单的值传进去 + 接住点击"。
*/
@Builder
dateTimeRow(label: string, isStart: boolean) {
Row({ space: 10 }) {
Text(label)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(28)
// 整块可点：日期与时间在**同一个控件**里，中间不再分两块
Row() {
Text(this.cnDate(isStart ? this.fStartDate : this.fEndDate))
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink)
if (!this.fAllDay) {
Text(' ' + (isStart ? this.fStartTime : this.fEndTime))
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
}
}
.layoutWeight(1)
.height(42)
.padding({ left: 12, right: 12 })
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.alignItems(VerticalAlign.Center)
.onClick((): void => {
FbDateTimeRow({
label: label,
date: isStart ? this.fStartDate : this.fEndDate,
time: isStart ? this.fStartTime : this.fEndTime,
allDay: this.fAllDay,
accent: this.accentColor(),
onTap: (): void => {
this.openPicker(isStart);
})
// 右侧小箭头：暗示"点开会选"（与 SyncCalendar 的行样式一致）
Text('›')
.fontSize(FbMetric.fontBody)
.fontColor(FbColors.faint)
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
})
}
/**
@@ -632,19 +604,17 @@ export struct FbEventEditSheet {
*/
private openPicker(isEnd: boolean): void {
this.pickIsEnd = isEnd;
const d: Date = this.parseDate(isEnd ? this.fEndDate : this.fStartDate);
this.pickDate = d;
const tm: Date = this.parseTime(isEnd ? this.fEndTime : this.fStartTime);
// ⚠️ 草稿值放在宿主，弹层组件 `aboutToAppear` 时从这里读初值 ——
// 组件每次挂载都会重新读一次，所以"点开始 → 取消 → 点结束"拿到的是各自的值。
this.pickDate = fbParseDate(isEnd ? this.fEndDate : this.fStartDate);
const tm: Date = fbParseTime(isEnd ? this.fEndTime : this.fStartTime);
this.pickHour = tm.getHours();
this.pickMin = tm.getMinutes();
this.pickOpen = true;
}
/** 「确定」：把草稿写回；开始改了还会把结束顺延（避免"负时长"） */
private applyPicker(): void {
const iso: string = this.pad(this.pickDate.getFullYear()) + '-'
+ this.pad(this.pickDate.getMonth() + 1) + '-' + this.pad(this.pickDate.getDate());
const hm: string = this.pad(this.pickHour) + ':' + this.pad(this.pickMin);
private applyPicker(iso: string, hm: string): void {
if (this.pickIsEnd) {
this.fEndDate = iso;
this.fEndTime = hm;
@@ -663,105 +633,25 @@ export struct FbEventEditSheet {
/**
* 日期 + 时间选择弹层（**照 SyncCalendar 的 `dateTimePickerSheet`**）。
*
* 结构：标题 → `Row { DatePicker | TimePicker }`（**并排**）→ 「确定」。
* ⚠️ 滚轮的 `textStyle`/`selectedTextStyle`/`disappearTextStyle` **要显式给色**：
* 默认取系统主题色，深色模式下会和弹层底色撞色（SyncCalendar 注释里点明过）。
* ⚠️ 全天日程没有"时刻"可言 ⇒ 只画 `DatePicker`。
* 🔴 v64：实现已抽到 `FbDateTimeField.ets::FbDateTimePicker`（**与观影共用**）。
* 结构（标题 → `Row { DatePicker | TimePicker }` 并排 → 确定）与原来完全一致，
* 差别只是"这一份现在只有一处代码"。
*/
@Builder
dateTimePickerSheet() {
// 🔴 2026-10-19：与其它弹框统一（92% 宽 + 四角圆角 + 主题色环）。
Column() {
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
Column({ space: 14 }) {
Text(this.pickIsEnd ? '选择结束时间' : '选择开始时间')
.fontSize(FbMetric.fontTitle)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
.width('100%')
.textAlign(TextAlign.Center)
.padding({ top: 12 })
Row({ space: 6 }) {
DatePicker({
start: new Date('2000-01-01'),
end: new Date('2035-12-31'),
selected: this.pickDate
})
.onDateChange((v: Date): void => {
this.pickDate = v;
})
.textStyle({ color: FbColors.faint, font: { size: 14 } })
.selectedTextStyle({ color: FbColors.ink, font: { size: 16, weight: FontWeight.Medium } })
.disappearTextStyle({ color: FbColors.faint, font: { size: 14 } })
.layoutWeight(1)
.height(210)
if (!this.fAllDay) {
TimePicker({ selected: new Date(2000, 0, 1, this.pickHour, this.pickMin) })
.useMilitaryTime(true)
.onChange((v: TimePickerResult): void => {
// ⚠️ `hour`/`minute` 是**数字**；这里存草稿数字，拼 `HH:MM` 时再补零
this.pickHour = v.hour;
this.pickMin = v.minute;
})
.textStyle({ color: FbColors.faint, font: { size: 14 } })
.selectedTextStyle({ color: FbColors.ink, font: { size: 16, weight: FontWeight.Medium } })
.disappearTextStyle({ color: FbColors.faint, font: { size: 14 } })
.layoutWeight(1)
.height(210)
}
FbDateTimePicker({
title: this.pickIsEnd ? '选择结束时间' : '选择开始时间',
date: fbIsoOf(this.pickDate),
time: fbPad2(this.pickHour) + ':' + fbPad2(this.pickMin),
allDay: this.fAllDay,
accent: this.accentColor(),
onConfirm: (d: string, t: string): void => {
this.applyPicker(d, t);
},
onCancel: (): void => {
this.pickOpen = false;
}
.width('100%')
Button(this.fAllDay ? '确定日期' : '确定')
.width('100%')
.height(44)
.borderRadius(FbMetric.radiusS)
.fontSize(FbMetric.fontBody)
.backgroundColor('#4A7C82')
.fontColor(Color.White)
.onClick((): void => {
this.applyPicker();
})
}
.width('100%')
.padding({ left: 18, right: 18, top: 8, bottom: 20 })
.alignItems(HorizontalAlign.Start)
}
}
.width('92%')
}
/** `YYYY-MM-DD` → `10月16日 周五`（比裸日期好读，且和时刻并排也不长） */
private cnDate(iso: string): string {
if (iso.length < 10) {
return iso;
}
const y: number = parseInt(iso.substring(0, 4), 10);
const m: number = parseInt(iso.substring(5, 7), 10);
const d: number = parseInt(iso.substring(8, 10), 10);
const w: string[] = ['日', '一', '二', '三', '四', '五', '六'];
return m.toString() + '月' + d.toString() + '日 周' + w[new Date(y, m - 1, d).getDay()];
}
private parseDate(s: string): Date {
if (s.length < 10) {
return new Date();
}
const y: number = parseInt(s.substring(0, 4), 10);
const m: number = parseInt(s.substring(5, 7), 10) - 1;
const d: number = parseInt(s.substring(8, 10), 10);
return new Date(y, m, d);
}
private parseTime(s: string): Date {
const out: Date = new Date();
if (s.length >= 5) {
out.setHours(parseInt(s.substring(0, 2), 10));
out.setMinutes(parseInt(s.substring(3, 5), 10));
}
return out;
})
}
@Builder
entry/src/main/ets/components/FbMovieInsightSheet.ets
+921
View File
@@ -0,0 +1,921 @@
/**
* 家书 FamilyBook · 观影「高级搜索 / 统计 / 年度报告」浮层（鸿蒙端）
*
* 🔴 v63（用户 2026-10-19）**推翻了 v62 的页签方案**，原话：
* 「**影院管理就是影院管理。高级搜索统计和年度报告不在"影院管理"这个功能里**，
* 而是点击观影设置后，弹框里面有"影院管理""高级搜索统计"和"年度报告"；
* 点击之后，会进入到搜索统计和年度报告里面。」
*
* ⇒ v62 我把四项塞进同一个浮层的四个页签里；用户要的是**平级的独立入口**。
* ⇒ 影院（列表+增改删）留在 `FbCinemaSheet`；
* 这一支负责另外三项，且**由 `mode` 决定显示哪一项**（同一份代码三种形态）：
* `search` —— 片名 / 影院 / 起止日期（`/api/v1/movies/search`）
* `stats` —— 总览 + 按影院/按年/按月（`/api/v1/movies/stats`）
* `report` —— 按年切换的年度报告（`/api/v1/movies/report`）
*
* ⚠️ 三项都必须**联网**——它们的口径要与网页**完全一致**（同一份 `MovieStats`）。
* 本地库算出来的是"已同步的那部分"，少同步一次就少一部，
* 用户会发现"网页 124 部、App 121 部" ⇒ 断网时明说"需要联网"，
* 而不是给一个偏低的数字。
*
* ⚠️ 三种形态共用一个组件（而不是拆三个文件）：
* 它们共享全部取值兜底（`numField` / `strField` / `barRow` / `sectionTitle`
* / 加载态 / 错误态），拆开就是把这些抄三遍。
*/
import { FbColors, FbMetric, fbAlpha } from '../common/Theme';
import { FbModuleDef, fbModuleOf, fbThemeVars } from '../model/Modules';
import {
FbApiMovieSearchRow, FbCinemaItem, FbMovieCinemaStat, FbMovieMonthStat,
FbMovieOverview, FbMovieReport, FbMovieRepo, FbMovieSearchParams, FbMovieStats,
FbMovieYearStat
} from '../data/FbMovieRepo';
import { FB_TOKEN_STORE } from '../data/FbTokenStore';
import { FbSheetRing } from './FbSheetRing';
import { FbSheetClose } from './FbSheetClose';
/**
* 贴底卡片的手势区缓冲（vp）。
*
* 🔴 应用开了全屏布局且**隐藏了系统手势条**（见 EntryAbility）——
* 手势区不再有任何视觉提示，贴底的卡片必须自己让出这一段，
* 否则最后一排按钮会被"从下往上滑"误触。
*/
const FB_SHEET_BOTTOM_GAP: number = 16;
/**
* 空值常量。
*
* ⚠️ ArkTS 的 `arkts-no-untyped-obj-literals` **不允许空对象字面量**
* （`return {}` 直接编译不过）⇒ 用一个显式声明的空 interface + 常量顶掉。
*/
interface FbEmptyStats {
}
interface FbEmptyOverview {
}
const EMPTY_STATS: FbEmptyStats = {};
const EMPTY_OVERVIEW: FbEmptyOverview = {};
@ComponentV2
export struct FbMovieInsightSheet {
/**
* 这一支要显示哪一项：`search` / `stats` / `report`。
*
* 🔴 用参数而不是三个组件：三者共享全部取值兜底与加载/错误态
* （见文件头说明）。⚠️ 设置菜单点哪一项就传哪个值。
*/
@Param mode: string = 'stats';
/** 影院列表（**搜索页的筛选项**要用；由页面传入，只读） */
@Param cinemas: FbCinemaItem[] = [];
/** 关闭回调 */
@Event onClose: () => void = (): void => {
};
/**
* 卡片外圈描边环的颜色（hex，'' = 用观影模块色）。
*
* ⚠️ 必须是字符串：环色要直接当背景色（`FbColors.brand` 是 `Resource`，用不了）。
*/
@Param accent: string = '';
/**
* 🔴 v63：不再有页签 —— 本组件只显示 `mode` 那一项。
* `aboutToAppear` 按 mode 拉对应数据（不在构造时就打三个接口）。
*/
@Local inited: boolean = false;
// ---- 统计 / 年报 / 搜索的加载态 ----
@Local statsLoading: boolean = false;
@Local stats: FbMovieStats | null = null;
@Local statsError: string = '';
@Local reportLoading: boolean = false;
@Local report: FbMovieReport | null = null;
@Local reportError: string = '';
/** 年报年份（0 = 用服务端返回的默认年） */
@Local reportYear: number = 0;
@Local searchLoading: boolean = false;
@Local searchRows: FbApiMovieSearchRow[] = [];
@Local searchError: string = '';
/** 搜索条件 */
@Local sTitle: string = '';
@Local sCinemaId: number = 0;
@Local sFrom: string = '';
@Local sTo: string = '';
private repo: FbMovieRepo = FbMovieRepo.inst();
/** 环色：显式给了就用给的，否则取观影模块色（影院属于观影） */
private accentColor(): string {
if (this.accent !== '') {
return this.accent;
}
const m: FbModuleDef | undefined = fbModuleOf('movies');
return fbThemeVars(m !== undefined ? m.color : '#A84A28').brand;
}
aboutToAppear(): void {
// 🔴 按 mode 拉数据（三种形态各只打一个接口）
if (this.inited) {
return;
}
this.inited = true;
if (this.mode === 'stats') {
this.loadStats();
} else if (this.mode === 'report') {
this.loadReport(0);
}
}
private async loadStats(): Promise<void> {
const token: string = FB_TOKEN_STORE.get();
if (token === '') {
this.statsError = '还没登录';
return;
}
this.statsLoading = true;
this.statsError = '';
const r: FbMovieStats | null = await this.repo.stats(token);
this.statsLoading = false;
if (r === null) {
this.statsError = '统计需要联网（本地库只有已同步的一部分，算不准）';
return;
}
this.stats = r;
}
private async loadReport(year: number): Promise<void> {
const token: string = FB_TOKEN_STORE.get();
if (token === '') {
this.reportError = '还没登录';
return;
}
this.reportLoading = true;
this.reportError = '';
const r: FbMovieReport | null = await this.repo.report(token, year);
this.reportLoading = false;
if (r === null) {
this.reportError = '年度报告需要联网';
return;
}
this.report = r;
const y: number | undefined = r.year;
this.reportYear = y !== undefined ? y : year;
}
private async doSearch(): Promise<void> {
const token: string = FB_TOKEN_STORE.get();
if (token === '') {
this.searchError = '还没登录';
return;
}
const p: FbMovieSearchParams = {
title: this.sTitle.trim(),
cinemaId: this.sCinemaId,
personId: 0,
dateFrom: this.sFrom.trim(),
dateTo: this.sTo.trim()
};
// ⚠️ 与网页同规则：条件全空就不查（否则等于"列出所有观影"，不是搜索）
if (p.title === '' && p.cinemaId <= 0 && p.dateFrom === '' && p.dateTo === '') {
this.searchError = '先设一个条件再搜（片名 / 影院 / 日期）';
this.searchRows = [];
return;
}
this.searchLoading = true;
this.searchError = '';
this.searchRows = await this.repo.search(token, p);
this.searchLoading = false;
if (this.searchRows.length === 0) {
this.searchError = '没有符合条件的观影记录';
}
}
build() {
// FB_WRAP_CENTER：把卡片**垂直居中**（用户 2026-10-16 要求：浮在屏幕中间）。
// ⚠️ 居中放在**组件内部**做，而不是改宿主的 Stack 对齐 ——
// 宿主 Stack 里还有别的子元素（日程页的悬浮 ＋），改对齐会连带挪走它们。
// ⚠️ 外层铺满 + Center；内层仍是那张 92% 宽的圆角卡。
Column() {
// 🔴 2026-10-19：卡片外面加**主题色环**（用户：「所有弹框都加线」），
// 由共用组件 `FbSheetRing` 统一给；这一层只负责 92% 宽度。
Column() {
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
Column({ space: 0 }) {
// ---- 标题栏（统一版式：左标题 + 右 ✕，见 FbSheetClose.ets）----
Row({ space: 8 }) {
Column({ space: 2 }) {
Text(this.titleText())
.fontSize(FbMetric.fontTitle)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
.maxLines(1)
Text(this.subtitleText())
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.maxLines(1)
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
.flexShrink(1)
FbSheetClose({
onClose: (): void => {
this.onClose();
},
color: this.accentColor()
})
}
.width('100%')
.alignItems(VerticalAlign.Center)
Divider()
.color(FbColors.line)
.margin({ top: 4, bottom: 4 })
// ---- 内容区 ----
// ⚠️ `flexShrink(1)` 让内容**按自身高度收缩**（短内容不撑满 maxHeight）——
// 本项目在日程详情/模块设置踩过"卡片空半屏"（`layoutWeight(1)` 会吃满）。
Scroll() {
Column({ space: 0 }) {
if (this.mode === 'stats') {
this.statsPane()
} else if (this.mode === 'search') {
this.searchPane()
} else {
this.reportPane()
}
}
.width('100%')
}
.flexShrink(1)
.width('100%')
.scrollBar(BarState.Off)
.align(Alignment.TopStart)
}
// 🔴 用户 2026-10-16：「它应该弹出一个**圆角的、浮在上面的卡片**……
// **不要让它左右充满整个屏幕，下面也不要挨着屏幕**，
// 而是放在**屏幕中间**，采用**圆角浮窗**式的形式。」
// ⇒ 不再贴底满宽：左右留边、四角圆角、垂直居中（由宿主的 Stack 对齐）。
.width('100%')
.constraintSize({ maxHeight: '76%' })
.padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP })
.alignItems(HorizontalAlign.Start)
}
}
.width('92%')
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.hitTestBehavior(HitTestMode.Transparent)
}
/** 标题（由 `mode` 决定，用户一眼知道自己在看哪一项） */
private titleText(): string {
if (this.mode === 'search') {
return '高级搜索'
}
if (this.mode === 'report') {
return '年度报告'
}
return '观影统计'
}
private subtitleText(): string {
if (this.mode === 'search') {
return '片名 / 影院 / 日期组合查';
}
if (this.mode === 'report') {
return '以我为中心，只算我参与过的场次';
}
return '与网页端口径一致（需要联网）';
}
// ==================== ② 统计 ====================
@Builder
statsPane() {
if (this.statsLoading) {
this.loadingRow('正在取统计…')
} else if (this.statsError !== '') {
this.errorRow(this.statsError, (): void => {
this.loadStats();
})
} else if (this.stats !== null) {
// ---- 总览 ----
this.sectionTitle('总览')
Row({ space: 0 }) {
this.statCell('看过', this.ov().movies)
this.statCell('影院', this.ov().cinemas)
this.statCell('参与的人', this.ov().persons)
this.statCell('人次', this.ov().viewership)
}
.width('100%')
.padding({ top: 6, bottom: 10 })
if (this.spanText() !== '') {
Text(this.spanText())
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
// ---- 按影院 ----
if (this.cinemaStats().length > 0) {
this.sectionTitle('按影院')
Column({ space: 6 }) {
ForEach(this.cinemaStats(), (c: FbMovieCinemaStat) => {
this.barRow(
c.name !== undefined && c.name !== '' ? c.name : '(未命名)',
c.cnt !== undefined ? c.cnt : 0,
this.maxCinemaCount(),
c.color !== undefined && c.color !== '' ? c.color : this.accentColor())
}, (c: FbMovieCinemaStat): string => 'cs_' + (c.id !== undefined ? c.id : 0).toString())
}
.width('100%')
.padding({ top: 4 })
}
// ---- 按年 ----
if (this.yearStats().length > 0) {
this.sectionTitle('按年')
Column({ space: 6 }) {
ForEach(this.yearStats(), (y: FbMovieYearStat) => {
this.barRow(
(y.year !== undefined ? y.year.toString() : '') + ' 年',
y.cnt !== undefined ? y.cnt : 0,
this.maxYearCount(),
this.accentColor())
}, (y: FbMovieYearStat): string => 'ys_' + (y.year !== undefined ? y.year : 0).toString())
}
.width('100%')
.padding({ top: 4 })
}
// ---- 按月（近 12 个月）----
if (this.monthStats().length > 0) {
this.sectionTitle('近 12 个月')
Column({ space: 6 }) {
ForEach(this.monthStats(), (m: FbMovieMonthStat) => {
this.barRow(
m.label !== undefined && m.label !== ''
? m.label : (m.ym !== undefined ? m.ym : ''),
m.cnt !== undefined ? m.cnt : 0,
this.maxMonthCount(),
this.accentColor())
}, (m: FbMovieMonthStat): string =>
'ms_' + (m.ym !== undefined ? m.ym : (m.label !== undefined ? m.label : '')))
}
.width('100%')
.padding({ top: 4 })
}
}
}
/** 总览的安全取值 */
private ov(): FbMovieOverview {
if (this.stats === null || this.stats.overview === undefined) {
return EMPTY_OVERVIEW;
}
return this.stats.overview;
}
private spanText(): string {
const o: FbMovieOverview = this.ov();
const f: string | null | undefined = o.first_date;
const l: string | null | undefined = o.last_date;
if (f === undefined || f === null || f === '') {
return '';
}
return '从 ' + f + ' 到 ' + (l !== undefined && l !== null && l !== '' ? l : '今');
}
private cinemaStats(): FbMovieCinemaStat[] {
return this.stats !== null && this.stats.by_cinema !== undefined ? this.stats.by_cinema : [];
}
private yearStats(): FbMovieYearStat[] {
return this.stats !== null && this.stats.by_year !== undefined ? this.stats.by_year : [];
}
private monthStats(): FbMovieMonthStat[] {
return this.stats !== null && this.stats.by_month !== undefined ? this.stats.by_month : [];
}
private maxCinemaCount(): number {
let m: number = 1;
for (const c of this.cinemaStats()) {
const n: number = c.cnt !== undefined ? c.cnt : 0;
if (n > m) {
m = n;
}
}
return m;
}
private maxYearCount(): number {
let m: number = 1;
for (const y of this.yearStats()) {
const n: number = y.cnt !== undefined ? y.cnt : 0;
if (n > m) {
m = n;
}
}
return m;
}
private maxMonthCount(): number {
let m: number = 1;
for (const y of this.monthStats()) {
const n: number = y.cnt !== undefined ? y.cnt : 0;
if (n > m) {
m = n;
}
}
return m;
}
/** 总览的一格（大数字 + 小标签） */
@Builder
statCell(label: string, value: number | undefined) {
Column({ space: 2 }) {
Text(value !== undefined ? value.toString() : '0')
.fontSize(22)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
Text(label)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
.layoutWeight(1)
.alignItems(HorizontalAlign.Center)
}
/**
* 一条横向条形统计（名字 + 条 + 数字）。
*
* ⚠️ 条的宽度用 `layoutWeight` 按**比例**分配，而不是直接给百分比字符串：
* ArkTS 里 `width('62%')` 要拼字符串，且宽度为 0 的条会塌成一条线。
* 这里用"按 max 归一后的整数份数"再 `layoutWeight`，0 的时候
* 仍保留一个极小的占位（否则那一行看起来缺了一块）。
*/
@Builder
barRow(label: string, value: number, max: number, color: string) {
Row({ space: 8 }) {
Text(label)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.muted)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.width(72)
Row() {
Row()
.width(Math.max(4, Math.round((value / max) * 100)))
.height(8)
.backgroundColor(color)
.borderRadius(4)
Blank()
}
.layoutWeight(1)
.height(8)
.alignItems(VerticalAlign.Center)
Text(value.toString())
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.ink)
.width(30)
.textAlign(TextAlign.End)
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
// ==================== ③ 高级搜索 ====================
@Builder
searchPane() {
Column({ space: 8 }) {
this.field('片名', '含这几个字就算命中', this.sTitle, (v: string): void => {
this.sTitle = v;
})
// 影院：从本地影院列表里选（不额外打接口）
Row({ space: 8 }) {
Text('影院')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(52)
Scroll() {
Row({ space: 6 }) {
Text('不限')
.fontSize(FbMetric.fontTiny)
.fontColor(this.sCinemaId === 0 ? Color.White : FbColors.muted)
.padding({ left: 10, right: 10, top: 5, bottom: 5 })
.backgroundColor(this.sCinemaId === 0 ? this.accentColor() : FbColors.inputBg)
.borderRadius(FbMetric.radiusPill)
.onClick((): void => {
this.sCinemaId = 0;
})
ForEach(this.cinemas, (c: FbCinemaItem) => {
Text(c.name)
.fontSize(FbMetric.fontTiny)
.fontColor(this.sCinemaId === c.id ? Color.White : FbColors.muted)
.maxLines(1)
.padding({ left: 10, right: 10, top: 5, bottom: 5 })
.backgroundColor(this.sCinemaId === c.id ? this.accentColor() : FbColors.inputBg)
.borderRadius(FbMetric.radiusPill)
.onClick((): void => {
this.sCinemaId = c.id;
})
}, (c: FbCinemaItem): string => 'sch_' + c.id.toString())
}
}
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.layoutWeight(1)
}
.width('100%')
.alignItems(VerticalAlign.Center)
this.field('从', 'YYYY-MM-DD（可空）', this.sFrom, (v: string): void => {
this.sFrom = v;
})
this.field('到', 'YYYY-MM-DD（可空）', this.sTo, (v: string): void => {
this.sTo = v;
})
Row({ space: 8 }) {
Text(this.searchLoading ? '搜索中…' : '搜索')
.fontSize(FbMetric.fontSmall)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
.layoutWeight(1)
.height(40)
.backgroundColor(this.searchLoading
? fbAlpha(this.accentColor(), 0.5) : this.accentColor())
.borderRadius(FbMetric.radiusS)
.onClick((): void => {
this.doSearch();
})
Text('清空')
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.muted)
.textAlign(TextAlign.Center)
.layoutWeight(1)
.height(40)
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.onClick((): void => {
this.sTitle = '';
this.sCinemaId = 0;
this.sFrom = '';
this.sTo = '';
this.searchRows = [];
this.searchError = '';
})
}
.width('100%')
.margin({ top: 2 })
}
.width('100%')
.padding({ top: 12 })
.alignItems(HorizontalAlign.Start)
// ---- 结果 ----
if (this.searchError !== '') {
Text(this.searchError)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width('100%')
.padding({ top: 12, bottom: 8 })
}
if (this.searchRows.length > 0) {
this.sectionTitle('命中 ' + this.searchRows.length.toString() + ' 条')
Column({ space: 0 }) {
ForEach(this.searchRows, (r: FbApiMovieSearchRow) => {
Column({ space: 0 }) {
Row({ space: 10 }) {
Column()
.width(4)
.height(34)
.backgroundColor(r.cinema_color !== null && r.cinema_color !== undefined
&& r.cinema_color !== '' ? r.cinema_color : this.accentColor())
.borderRadius(2)
Column({ space: 3 }) {
Text(r.title !== undefined && r.title !== '' ? r.title : '未命名影片')
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
Row({ space: 6 }) {
Text(this.dateOf(r.starts_at))
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.muted)
if (r.cinema_name !== null && r.cinema_name !== undefined && r.cinema_name !== '') {
Text(r.cinema_name)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.maxLines(1)
.layoutWeight(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
}
.width('100%')
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
}
.width('100%')
.padding({ top: 10, bottom: 10 })
.alignItems(VerticalAlign.Center)
Divider().strokeWidth(0.5).color(FbColors.line)
}
.width('100%')
}, (r: FbApiMovieSearchRow): string => 'srch_' + (r.id !== undefined ? r.id : 0).toString())
}
.width('100%')
}
}
/** `2026-10-19 19:30:00` → `2026-10-19` */
private dateOf(v: string | undefined | null): string {
if (v === undefined || v === null || v.length < 10) {
return '';
}
return v.substring(0, 10);
}
// ==================== ④ 年度报告 ====================
@Builder
reportPane() {
if (this.reportLoading) {
this.loadingRow('正在生成年度报告…')
} else if (this.reportError !== '') {
this.errorRow(this.reportError, (): void => {
this.loadReport(this.reportYear);
})
} else if (this.report !== null) {
// ---- 年份切换 ----
if (this.reportYears().length > 1) {
Scroll() {
Row({ space: 6 }) {
ForEach(this.reportYears(), (y: number) => {
Text(y.toString() + ' 年')
.fontSize(FbMetric.fontTiny)
.fontColor(this.reportYear === y ? Color.White : FbColors.muted)
.padding({ left: 12, right: 12, top: 5, bottom: 5 })
.backgroundColor(this.reportYear === y ? this.accentColor() : FbColors.inputBg)
.borderRadius(FbMetric.radiusPill)
.onClick((): void => {
this.loadReport(y);
})
}, (y: number): string => 'ry_' + y.toString())
}
}
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.width('100%')
.padding({ top: 10, bottom: 2 })
}
// ---- 大数 ----
Row({ space: 0 }) {
this.statCell('看了', this.numField('total'))
this.statCell('观影天数', this.numField('days'))
this.statCell('平均每月', this.numField('avg_per_month'))
}
.width('100%')
.padding({ top: 12, bottom: 10 })
// ---- 几条"最" ----
this.reportLine('最常去的影院', this.strField('top_cinema'),
this.numField('top_cinema_count'), '次')
this.reportLine('一起看最多的人', this.strField('top_person'),
this.numField('top_person_count'), '场')
this.reportLine('最多人一起看的', this.strField('most_viewers_movie'),
this.numField('most_viewers_count'), '人')
// ---- 首末场 ----
/* ⚠️ `@Builder` 里**不能写 `const` 声明**（编译器报 "Only UI component
syntax can be written here"）—— 只能直接调方法。
⇒ 判空/拼接都收进 `reportSpan()` 里，返回空串就不渲染这行。 */
if (this.reportSpan() !== '') {
this.sectionTitle('这一年')
Text(this.reportSpan())
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.muted)
.padding({ top: 2 })
}
// ---- 月份分布 ----
if (this.monthDist().length > 0) {
this.sectionTitle('每月分布')
Column({ space: 6 }) {
ForEach(this.monthDist(), (m: FbMovieMonthStat) => {
this.barRow(
m.label !== undefined ? m.label : '',
m.cnt !== undefined ? m.cnt : 0,
this.maxMonthDist(),
this.accentColor())
}, (m: FbMovieMonthStat): string => 'rd_' + (m.label !== undefined ? m.label : ''))
}
.width('100%')
.padding({ top: 4 })
}
if (this.numField('total') === 0) {
Text('这一年（' + this.reportYear.toString() + '）没有你参与的观影记录。')
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.faint)
.width('100%')
.padding({ top: 24, bottom: 16 })
.textAlign(TextAlign.Center)
}
}
}
private reportYears(): number[] {
if (this.report === null || this.report.years === undefined) {
return [];
}
return this.report.years;
}
private rp(): Object {
if (this.report === null || this.report.stats === undefined) {
// ⚠️ ArkTS 不允许空对象字面量 ⇒ 用一个显式声明的空 interface
return EMPTY_STATS;
}
return this.report.stats as Object;
}
/** 年报告里的「第一场 … 最后一场 …」；没有首场时返回空串（不渲染） */
private reportSpan(): string {
const f: string = this.strField('first_date');
if (f === '') {
return '';
}
const l: string = this.strField('last_date');
return '第一场 ' + f + '　·　最后一场 ' + (l !== '' ? l : '—');
}
/** 取一个数值字段（JSON 解析出来的是弱类型，统一在这里兜底） */
private numField(key: string): number {
const o: Record<string, Object> = this.rp() as Record<string, Object>;
const v: Object | undefined = o[key];
return typeof v === 'number' ? v : 0;
}
private strField(key: string): string {
const o: Record<string, Object> = this.rp() as Record<string, Object>;
const v: Object | undefined = o[key];
return typeof v === 'string' ? v : '';
}
/** 月份分布 → 条形数据（1..12 月） */
private monthDist(): FbMovieMonthStat[] {
const o: Record<string, Object> = this.rp() as Record<string, Object>;
const md: Object | undefined = o['month_distribution'];
const out: FbMovieMonthStat[] = [];
if (md === undefined || md === null) {
return out;
}
const m: Record<string, Object> = md as Record<string, Object>;
for (let i = 1; i <= 12; i++) {
const v: Object | undefined = m[i.toString()];
const it: FbMovieMonthStat = {};
it.label = i.toString() + ' 月';
it.cnt = typeof v === 'number' ? v : 0;
out.push(it);
}
return out;
}
private maxMonthDist(): number {
let m: number = 1;
for (const it of this.monthDist()) {
const n: number = it.cnt !== undefined ? it.cnt : 0;
if (n > m) {
m = n;
}
}
return m;
}
/**
* 报告里的一条「最 XX」。
*
* ⚠️ `total` 字段在端上是**弱类型**（服务端可能给 int），
* 所以统一走 `numField/strField` 兜底，不直接下标取值。
*/
@Builder
reportLine(label: string, value: string, count: number, unit: string) {
if (value !== '' && value !== '无') {
Row({ space: 8 }) {
Text(label)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(96)
Text(value)
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.layoutWeight(1)
if (count > 0) {
Text(count.toString() + ' ' + unit)
.fontSize(FbMetric.fontTiny)
.fontColor(this.accentColor())
}
}
.width('100%')
.padding({ top: 6, bottom: 6 })
.alignItems(VerticalAlign.Center)
}
}
/**
* 一行输入（标签 + 输入框）。**搜索页的三个条件都用它**。
*
* ⚠️ 之前它被误删过：我以为它只给"影院管理"用 —— 其实搜索页的
* 片名/从/到也用它（删了之后编译立刻报 `Property 'field' does not exist`）。
*/
@Builder
field(label: string, placeholder: string, value: string, onChange: (v: string) => void) {
Row({ space: 8 }) {
Text(label)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width(52)
TextInput({ text: value, placeholder: placeholder })
.placeholderColor(FbColors.faint)
.placeholderFont({ size: FbMetric.fontTiny })
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink)
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.height(38)
.layoutWeight(1)
.padding({ left: 10, right: 10 })
.onChange((v: string): void => {
onChange(v);
})
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
// ==================== 小组件 ====================
@Builder
sectionTitle(t: string) {
Text(t)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width('100%')
.padding({ top: 14, bottom: 2 })
}
@Builder
loadingRow(t: string) {
Row({ space: 8 }) {
LoadingProgress().width(18).height(18).color(FbColors.faint)
Text(t)
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.faint)
}
.width('100%')
.justifyContent(FlexAlign.Center)
.padding({ top: 40, bottom: 40 })
}
/** 失败 + 一个「重试」（用户最烦"点了没反应"，给一条出路） */
@Builder
errorRow(msg: string, retry: () => void) {
Column({ space: 10 }) {
Text(msg)
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.faint)
.textAlign(TextAlign.Center)
Text('重试')
.fontSize(FbMetric.fontSmall)
.fontColor(this.accentColor())
.height(34)
.padding({ left: 16, right: 16 })
.borderRadius(FbMetric.radiusS)
.backgroundColor(fbAlpha(this.accentColor(), 0.10))
.textAlign(TextAlign.Center)
.onClick((): void => {
retry();
})
}
.width('100%')
.padding({ top: 32, bottom: 32 })
.alignItems(HorizontalAlign.Center)
}
}
entry/src/main/ets/components/FbMovieNewSheet.ets
+1041
View File
File diff suppressed because it is too large Load Diff
entry/src/main/ets/components/FbPersonPickSheet.ets
+377
View File
@@ -0,0 +1,377 @@
/**
* 家书 FamilyBook · 「选择同看的人」弹框（鸿蒙端）
*
* 🔴 v64（用户 2026-10-19）原话：
* 「**同看的人也应该是弹框选择**，这种选择方式太难找了。而且这个弹框选择要跟
* 网页端的一样，**在上面有个筛选框，就是当输入人的拼音的首字母的时候，
* 可以把这个人给筛选出来**。」
*
* ⇒ 观影「记一场」原来把同看人做成一排**只列前 40 个的横向头像**（名册上千人，
* 要找的人排在后面就永远找不到）。网页端（`templates/_person_picker.php`）是：
* **点「+ 添加观影人」→ 弹窗 → 顶部搜索框（名字 / 拼音首字母）→
* 点人头像进"暂存区"（弹窗不关）→ 全选完点「确定」写回。**
* 这里按同一形态做，并保留网页端的两条关键语义：
*
* ① **暂存 + 确定**（v24 第 18 批用户明确要求的两段式）：
* 点一个人 = 进弹窗上半部分的暂存区、**弹窗不关**、可以接着搜下一个；
* 全部选完点「确定」才写回。旧行为（点一个 = 立刻生效并关窗）选 5 个人
* 要开合 5 次 —— 这正是用户这次说"太难找了"的由来之一。
* ② **"输入即筛选"用拼音首字母的子序列匹配**：
* 「杨永全」的首字母是 `yyq`，用户很自然会打 `y` / `yy` / `yq` ——
* 用**子序列**（不是前缀、不是子串）才都能命中。
* ⚠️ 与名册页（`FbPeoplePage.ets::isSubsequence`）和服务端
* （`Pinyin::isSubsequence`）**必须同一套规则** ——
* 否则会出现"本地搜得到、服务端搜不到"这种最难查的差异。
*
* ⚠️ 默认带上"我"（与网页端 v38 同口径）：
* 网页端新增观影时会把登录者**预置进已选**（"自己不用选择就应该已经选上了"）。
* 这里由调用方（`FbMovieNewSheet`）把 `selected` 的初值设成 `[meId]`，
* 本组件只负责"把宿主给的那份当初始暂存"——这样"取消"才能还原成调用方的原值。
*/
import { FbColors, FbMetric, FB_MASK, fbAlpha, fbTint, FbTint } from '../common/Theme';
import { FbModuleDef, fbModuleOf, fbThemeVars } from '../model/Modules';
import { FbRosterPerson } from '../data/FbPersonRepo';
import { FbAvatar } from './Widgets';
import { FbSheetRing } from './FbSheetRing';
import { FbSheetClose } from './FbSheetClose';
import { fbImageSrc } from '../data/FbAttachQueue';
import { FB_TOKEN_STORE } from '../data/FbTokenStore';
@ComponentV2
export struct FbPersonPickSheet {
/** 候选人（名册） */
@Param people: FbRosterPerson[] = [];
/** 打开时已选的人（= 调用方当前的值；点「确定」才写回） */
@Param selected: number[] = [];
/** 标题（「选择观影人」/「选择同行人」…） */
@Param title: string = '选择';
/** 环色（hex，'' = 观影模块色） */
@Param accent: string = '';
/** 「确定」：把暂存的人写回 */
@Event onConfirm: (ids: number[]) => void = (): void => {
};
/** 关掉（不改动调用方的值） */
@Event onClose: () => void = (): void => {
};
/** 搜索词（名字 / 拼音首字母） */
@Local keyword: string = '';
/**
* **暂存区**（已经点了头像但还没点确定的那批人）。
*
* ⚠️ 与网页端的关键取舍相同：这里就是"唯一的一份选择状态"。
* 网页端把暂存挂在 `input.checked` 上而不是另存数组，是为了避免
* "视觉状态与实际提交状态各一份、必然飘"；端上没有表单提交这一步，
* 所以 `picked` 数组本身就是那份唯一状态 —— 但**绝不能**在点击时同步改
* 调用方的 `selected`（那是"点一个就生效"，用户明确不要）。
*/
@Local picked: number[] = [];
aboutToAppear(): void {
// 初始暂存 = 调用方给的那份（浅拷贝一份，避免直接改 @Param）
this.picked = this.selected.slice();
}
private accentColor(): string {
if (this.accent !== '') {
return this.accent;
}
const m: FbModuleDef | undefined = fbModuleOf('movies');
return fbThemeVars(m !== undefined ? m.color : '#A84A28').brand;
}
/** 显示名（昵称优先，与名册列表一致） */
private nameOf(p: FbRosterPerson): string {
return p.shown !== '' ? p.shown : p.name;
}
/**
* 命中判断：名字子串 **或** 拼音首字母子序列。
*
* ⚠️ 与服务端 `Pinyin::initials`（把 `name + my_nickname` 拼起来算）同一来源，
* 所以 `p.initials` 这个串里同时含本名与昵称的首字母 —— 直接比即可。
* ⚠️ 只对**纯字母**查询词做子序列：用户输中文/数字时跟首字母比毫无意义
* （`indexOf` 一律 -1），白白拖慢列表。
*/
private matched(p: FbRosterPerson): boolean {
const k: string = this.keyword.trim().toLowerCase();
if (k === '') {
return true;
}
const name: string = this.nameOf(p).toLowerCase();
if (name.indexOf(k) >= 0) {
return true;
}
if (p.name.toLowerCase().indexOf(k) >= 0) {
return true;
}
if (/^[a-z]+$/.test(k)) {
return isSubsequence(k, p.initials.toLowerCase());
}
return false;
}
private filtered(): FbRosterPerson[] {
return this.people.filter((p: FbRosterPerson): boolean => this.matched(p));
}
/** 暂存区里那批人的对象（用来画 chips） */
private staged(): FbRosterPerson[] {
const out: FbRosterPerson[] = [];
for (const id of this.picked) {
const p: FbRosterPerson | undefined =
this.people.find((x: FbRosterPerson): boolean => x.id === id);
if (p !== undefined) {
out.push(p);
}
}
return out;
}
/** 点头像：已在暂存里就移除，否则加入（**不关弹窗**） */
private toggle(id: number): void {
const i: number = this.picked.indexOf(id);
if (i >= 0) {
// ⚠️ 用新数组赋值：`@Local` 只代理第一层，splice 不触发刷新
const next: number[] = this.picked.slice();
next.splice(i, 1);
this.picked = next;
return;
}
this.picked = this.picked.concat([id]);
}
build() {
Column() {
Column()
.width('100%')
.height('100%')
.backgroundColor(FB_MASK)
.onClick((): void => {
this.onClose();
})
Column() {
FbSheetRing({ radius: FbMetric.radius, ringColor: this.accentColor() }) {
Column({ space: 10 }) {
// ---- 标题栏（统一版式：左标题 + 右 ✕）----
Row({ space: 8 }) {
Column({ space: 2 }) {
Text(this.title)
.fontSize(FbMetric.fontTitle)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
.maxLines(1)
Text('图例：点头像选中，可连续选多个')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.maxLines(1)
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
.flexShrink(1)
FbSheetClose({
onClose: (): void => {
this.onClose();
},
color: this.accentColor()
})
}
.width('100%')
.alignItems(VerticalAlign.Center)
// ---- 搜索框（名字 / 拼音首字母）----
Row({ space: 6 }) {
Image($r('app.media.fb_ic_search'))
.width(15)
.height(15)
.renderMode(ImageRenderMode.Template)
.colorFilter(fbTint(FbTint.faint))
TextInput({ text: this.keyword, placeholder: '名字或拼音首字母，如 yyq 找「杨永全」' })
.placeholderColor(FbColors.faint)
.placeholderFont({ size: FbMetric.fontTiny })
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.ink)
.backgroundColor(Color.Transparent)
.height(38)
.layoutWeight(1)
.padding(0)
.onChange((v: string): void => {
this.keyword = v;
})
}
.width('100%')
.padding({ left: 10, right: 10 })
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.alignItems(VerticalAlign.Center)
/* ---- 暂存区（用户点过头像、还没点确定的那批人）----
⚠️ 这正是用户要的"暂存到选择框的上半部分"：
它让"已经选了谁"始终可见，也不逼用户一次选完。 */
if (this.picked.length > 0) {
Column({ space: 6 }) {
Row({ space: 6 }) {
Text('已选 ')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
Text(this.picked.length.toString() + ' 人')
.fontSize(FbMetric.fontTiny)
.fontWeight(FontWeight.Medium)
.fontColor(this.accentColor())
}
.width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(this.staged(), (p: FbRosterPerson) => {
Row({ space: 4 }) {
Text(this.nameOf(p))
.fontSize(FbMetric.fontTiny)
.fontColor(this.accentColor())
.maxLines(1)
Text('✕')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
.padding({ left: 8, right: 8, top: 3, bottom: 3 })
.margin({ right: 6, bottom: 6 })
.backgroundColor(fbAlpha(this.accentColor(), 0.10))
.borderRadius(FbMetric.radiusPill)
.onClick((): void => {
this.toggle(p.id);
})
}, (p: FbRosterPerson): string => 'st_' + p.id.toString())
}
.width('100%')
}
.width('100%')
.padding({ top: 2 })
.alignItems(HorizontalAlign.Start)
}
// ---- 候选人网格 ----
Scroll() {
Column() {
if (this.people.length === 0) {
Text('名册还没同步，同看的人稍后可以在网页端补')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width('100%')
.textAlign(TextAlign.Center)
.padding({ top: 24, bottom: 24 })
} else if (this.filtered().length === 0) {
Text('没有匹配的人')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.width('100%')
.textAlign(TextAlign.Center)
.padding({ top: 24, bottom: 24 })
} else {
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(this.filtered(), (p: FbRosterPerson) => {
Column({ space: 3 }) {
FbAvatar({
name: this.nameOf(p),
color: p.avatarColor !== '' ? p.avatarColor : '#A84A28',
dia: 44,
fontSizeVp: 17,
imageUrl: p.avatar !== ''
? fbImageSrc(p.avatar, FB_TOKEN_STORE.get()) : ''
})
Text(this.nameOf(p))
.fontSize(10)
.fontColor(this.picked.indexOf(p.id) >= 0
? this.accentColor() : FbColors.faint)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.width(52)
.textAlign(TextAlign.Center)
}
// ⚠️ 选中态用**一圈主题色描边**（不是换底色 —— 底色是头像自己的色）
.padding(3)
.margin({ right: 6, bottom: 8 })
.borderRadius(26)
.border({
width: this.picked.indexOf(p.id) >= 0 ? 2 : 0,
color: this.accentColor()
})
.onClick((): void => {
this.toggle(p.id);
})
}, (p: FbRosterPerson): string => 'pp_' + p.id.toString())
}
.width('100%')
}
}
.width('100%')
}
.constraintSize({ maxHeight: 260 })
.width('100%')
.scrollBar(BarState.Auto)
.align(Alignment.TopStart)
// ---- 底部：确定（关闭统一在右上角 ✕）----
Row({ space: 10 }) {
Text('清除')
.fontSize(FbMetric.fontSmall)
.fontColor(FbColors.muted)
.textAlign(TextAlign.Center)
.height(42)
.padding({ left: 16, right: 16 })
.backgroundColor(FbColors.inputBg)
.borderRadius(FbMetric.radiusS)
.onClick((): void => {
this.picked = [];
})
Text('确定')
.fontSize(FbMetric.fontSmall)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
.layoutWeight(1)
.height(42)
.backgroundColor(this.accentColor())
.borderRadius(FbMetric.radiusS)
.onClick((): void => {
this.onConfirm(this.picked.slice());
})
}
.width('100%')
}
.width('100%')
.padding({ left: 18, right: 18, top: 18, bottom: 18 })
.alignItems(HorizontalAlign.Start)
}
}
.width('92%')
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.hitTestBehavior(HitTestMode.Transparent)
}
}
/**
* `q` 是否是 `s` 的**子序列**。
*
* 🔴 与服务端 `Pinyin::isSubsequence`、名册页 `isSubsequence()` **同一算法** ——
* 三处必须是同一套规则，否则会出现"本地搜得到、服务端搜不到"这种最难查的差异。
*
* 例：`isSubsequence('yq', 'yyq') === true`（跳过第二个 y）；`'qy'` 则为 false。
*/
function isSubsequence(q: string, s: string): boolean {
if (q === '') {
return true;
}
let i: number = 0;
for (let j: number = 0; j < s.length && i < q.length; j++) {
if (s.charAt(j) === q.charAt(i)) {
i++;
}
}
return i === q.length;
}