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/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'
];
}