/** * 家书 FamilyBook · 资源模块(鸿蒙端) * * 对应 Web 端 `templates/resources/index.php`。 * 资源 = 证件 / 资料 / 附件的集合(户口本、房产证、学籍资料…),可共享给某个成员。 * * 端上形态:**按类别分组的卡片列表**,卡片右侧显示归属人与附件数; * 那一排「类别筛选胶囊」对应 Web 端页头的分类入口。 */ import { FbColors, FbMetric, fbTint, FbTint, FB_MASK, fbAlpha } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; import { FbGroup, FbResourceItem } from '../../model/Types'; import { fbGroupResource } from '../../model/DemoData'; import { parseResources } from '../../data/FbParse'; import { loadModule } from '../../data/FbModuleLoad'; import { FbEmptyBox, FbIconButton, FbPrimaryButton, FbTag } from '../../components/Widgets'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; import { fbOnScroll, fbOnTouch } from '../../common/FbScroll'; import { fbMaskTransition, fbSheetTransition } from '../../common/FbAnim'; import { FbModuleSettingsSheet } from '../../components/FbModuleSettingsSheet'; import { FbResourceSheet } from '../../components/FbResourceSheet'; import { FB_BACK } from '../../common/FbBack'; import { FB_SET_RESOURCES } from '../../model/FbSettingsMenus'; @ComponentV2 export struct FbResourcesPage { /** * 顶栏插槽:由 Index.ets 传入,放在本页滚动流最前面 ⇒ 随页面一起滚走。 * 🔴 用户要求「向上滑动时标题栏跟着一起滑走」。 */ @BuilderParam topBar: () => void; @Param app: FbAppState = fbAppState(); /** 模块主题色(资源 = 靛蓝) */ private accent: string = '#5566A8'; /** * 模块设置浮层是否打开(右上角三条横线点开的那个)。 * * 🔴 用户 2026-10-16:「所有页面的设置按钮全部都改成和网页版一致, * 就是**三个横线**那种设置按钮。」 * 网页版的做法:动作区最右一个 ☰ → 点开是**这个模块的设置菜单**。 */ @Local settingsOpen: boolean = false; @Local all: FbResourceItem[] = []; /** * 当前筛选范围:'' = 全部 / 'shared' = 共享给我的 / 'mine' = 我名下的。 * * 🔴 v65:原来这里是「证件 / 资料」两个类别 —— 服务端 `resources` 表 * **没有类别列**(`app/Schema.php` 只有 title / content / owner_id), * 解析时 kind 只能全填 `other` ⇒ 这两个胶囊点了永远是空列表。 * 改成按**权限/归属**筛:这两个维度服务端真的给(`perm` / `owner_id`)。 */ @Local scopeFilter: string = ''; /** 资源浮层(新建 / 查看 / 编辑 / 删除)是否打开 */ @Local sheetOpen: boolean = false; /** 浮层里那条(0 = 新建) */ @Local sheetId: number = 0; @Local sheetTitle: string = ''; @Local sheetContent: string = ''; @Local sheetOwner: string = ''; @Local sheetCanWrite: boolean = true; /** * 页面出现:先读缓存、再拉接口(本地优先,见 FbModuleRepo 的说明)。 * * ⚠️ 不在这里打开本地库 —— `EntryAbility.onCreate` 已统一打开。 */ /** * 🔴 v59e(用户 2026-10-18):系统返回手势 —— 先关本页的浮层,再交给 `Index` 换模块。 * * 本页只有「模块设置」一个浮层,所以规则很短:开着就关掉(返回 true = 已消费)。 * ⚠️ 登记/注销成对出现,见 `common/FbBack.ets` 与 `Index.onBackPress`。 */ aboutToDisappear(): void { FB_BACK.unregister('resources'); } private backOnce(): boolean { if (this.sheetOpen) { this.sheetOpen = false; return true; } if (this.settingsOpen) { this.settingsOpen = false; return true; } return false; } aboutToAppear(): void { FB_BACK.register('resources', (): boolean => this.backOnce()); this.load(); } private async load(): Promise { await loadModule('resources', parseResources, (rows: FbResourceItem[]): void => { this.all = rows; }, (note: string): void => { this.syncNote = note; }); } /** 顶部提示(同步失败 / 未登录时显示一行小字) */ @Local syncNote: string = ''; /** * 设置浮层开着 ⇒ 让底部悬浮快捷栏让位。 * * 🔴 悬浮栏在**更外层 Index 的 Stack** 里,层级比本页高 ⇒ * 浮层底部的按钮会被它盖住、点击被抢走(名册/日程页都踩过)。 */ @Monitor('settingsOpen') onSettingsChanged(): void { fbAppState().sheetCount = this.settingsOpen ? 1 : 0; } /** 资源浮层开着 ⇒ 底部悬浮快捷栏同样让位(两个浮层不会同时开) */ @Monitor('sheetOpen') onResourceSheetChanged(): void { fbAppState().sheetCount = this.sheetOpen ? 1 : 0; } /** 打开「新增资源」 */ private openNew(): void { this.sheetId = 0; this.sheetTitle = ''; this.sheetContent = ''; this.sheetOwner = ''; this.sheetCanWrite = true; this.sheetOpen = true; } /** 打开某条资源(只读共享进来的锁输入框,但内容照看) */ private openDetail(r: FbResourceItem): void { this.sheetId = r.id; this.sheetTitle = r.name; this.sheetContent = r.content; this.sheetOwner = r.ownerName; /* `perm` 是服务端 `Resource::all` 里算好的:owner / write / read。 ⚠️ 只有 owner 与 write 能改(服务端 `Resource::canWrite` 同一口径)。 */ this.sheetCanWrite = r.perm === 'owner' || r.perm === 'write'; this.sheetOpen = true; } build() { // 🔴 外层 Stack:**模块设置浮层**要浮在页面之上 // (本页原来是 Scroll 直接作根,没有 Stack,这里补一层) Stack({ alignContent: Alignment.Bottom }) { Scroll() { Column() { this.topBar() // ---- 页头 ---- Row({ space: 8 }) { Column({ space: 2 }) { Text(this.all.length.toString() + ' 项资源') .fontSize(FbMetric.fontTitle) .fontWeight(FontWeight.Medium) .fontColor(FbColors.ink) Text('证件 / 资料 / 附件,可共享给家庭成员') .fontSize(FbMetric.fontTiny) .fontColor(FbColors.faint) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) FbPrimaryButton({ label: '添加', bg: this.accent, icon: $r('app.media.fb_ic_plus'), /* 🔴 v65:接上回调。原来这颗按钮**没有 `onTap`** —— 用户说的"新增加资源"没完成就是这条。 */ onTap: (): void => { this.openNew(); } }) // 🔴 设置按钮 = 网页版那种**三条横线**(☰)—— 用户 2026-10-16。 // 点开是本模块的设置菜单(条目照网页版 `templates/<模块>/_settings_menu.php`)。 FbIconButton({ icon: $r('app.media.fb_ic_menu'), tint: FbTint.muted, onTap: (): void => { this.settingsOpen = true; } }) } .width('100%') .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) .alignItems(VerticalAlign.Center) // ---- 筛选(全部 / 共享给我 / 我名下)---- Row({ space: 8 }) { this.scopeChip('全部', '') this.scopeChip('共享给我', 'shared') this.scopeChip('我名下', 'mine') Blank() Text('共享给我 ' + this.sharedCount().toString() + ' 项') .fontSize(FbMetric.fontTiny) .fontColor(FbColors.faint) } .width('100%') .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 8 }) .alignItems(VerticalAlign.Center) // ---- 列表 ---- if (this.filtered().length === 0) { FbEmptyBox({ title: '这里还没有资源', hint: '家里的证件、资料和附件都可以收进来,需要时一键共享', icon: $r('app.media.fb_ic_resources') }) } else { List({ space: 0 }) { ForEach(this.groups(), (g: FbGroup) => { ListItemGroup({ header: this.groupHeader(g.title, g.items.length.toString() + ' 项') }) { ForEach(g.items, (r: FbResourceItem) => { ListItem() { this.resourceCard(r) } }, (r: FbResourceItem): string => 'res_' + r.id.toString()) } }, (g: FbGroup): string => 'rsg_' + g.key) } .width('100%') .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 24 }) .scrollBar(BarState.Off) .edgeEffect(EdgeEffect.Spring) } } .width('100%') // 底部悬浮快捷栏的预留:它浮在内容之上,不留白会压住最后一屏 .padding({ bottom: FB_DOCK_RESERVE }) } .width('100%') .height('100%') .scrollBar(BarState.Off) .edgeEffect(EdgeEffect.Spring) // 🔴 滚动方向上报(驱动底部悬浮栏随滚收起 / 唤回)—— 见 common/FbScroll.ets .onDidScroll(fbOnScroll) // 🔴 触摸方向兜底(内容不足一屏的页面滚不动,只能靠手指位移判断) // 与上面的 `onDidScroll` 互补、互不冲突 —— 见 common/FbScroll.ets .onTouch(fbOnTouch) .align(Alignment.TopStart) // ---- 模块设置浮层(右上角三条横线点开的那个)---- if (this.settingsOpen) { Column() .width('100%') .height('100%') .backgroundColor(FB_MASK) .transition(fbMaskTransition()) .onClick((): void => { this.settingsOpen = false; }) FbModuleSettingsSheet({ // 🔴 环色 = 本模块主题色(用户 2026-10-19) accent: this.accent, title: '资源设置', items: FB_SET_RESOURCES, onClose: (): void => { this.settingsOpen = false; }, onPick: (action: string): void => { /* v65:两条都接上了(原来都是空串 ⇒ 画灰、点了不响应) */ if (action === 'resourceShared') { this.scopeFilter = 'shared'; this.settingsOpen = false; return; } if (action === 'resourceMine') { this.scopeFilter = 'mine'; this.settingsOpen = false; return; } } }) .transition(fbSheetTransition()) } // ---- 资源浮层:新建 / 查看 / 编辑 / 删除(v65)---- if (this.sheetOpen) { FbResourceSheet({ accent: this.accent, editingId: this.sheetId, editingTitle: this.sheetTitle, editingContent: this.sheetContent, ownerName: this.sheetOwner, canWrite: this.sheetCanWrite, onClose: (): void => { this.sheetOpen = false; }, onSaved: (): void => { this.sheetOpen = false; this.load(); }, onDeleted: (): void => { this.sheetOpen = false; this.load(); } }) .transition(fbSheetTransition()) } } .width('100%') .height('100%') } /** 一项资源卡(整卡可点 → 打开详情/编辑) */ @Builder resourceCard(r: FbResourceItem) { Row({ space: 12 }) { // 图标底:共享来的用「共享」图标,自己名下的用「锁」 Stack({ alignContent: Alignment.Center }) { Image(r.shared ? $r('app.media.fb_ic_share') : $r('app.media.fb_ic_lock')) .width(19) .height(19) .renderMode(ImageRenderMode.Template) .colorFilter(fbTint(this.accent)) } .width(42) .height(42) .borderRadius(FbMetric.radiusS) .backgroundColor(fbAlpha(this.accent, 0.08)) Column({ space: 4 }) { Row({ space: 6 }) { Text(r.name) .fontSize(FbMetric.fontBody) .fontWeight(FontWeight.Medium) .fontColor(FbColors.ink) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) .layoutWeight(1) if (r.shared) { FbTag({ text: r.perm === 'write' ? '可改' : '只读', tone: 'green' }) } } .width('100%') .alignItems(VerticalAlign.Center) // 正文预览:资源的正文就是"编号、有效期、放在哪" —— 比附件数有用得多 if (r.content !== '') { Text(r.content) .fontSize(10) .fontColor(FbColors.muted) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) .width('100%') } Row({ space: 10 }) { Text('归属 ' + r.ownerName) .fontSize(10) .fontColor(FbColors.muted) Text(r.updatedAt) .fontSize(10) .fontColor(FbColors.faint) } .alignItems(VerticalAlign.Center) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) Image($r('app.media.fb_ic_forward')) .width(13) .height(13) .renderMode(ImageRenderMode.Template) .colorFilter(fbTint(FbTint.faint)) } .width('100%') .padding(14) .backgroundColor(FbColors.surface) .borderRadius(FbMetric.radius) .margin({ bottom: 8 }) .alignItems(VerticalAlign.Center) /* 🔴 v65:整卡可点 → 打开详情(原来列表项**没有 `onClick`** ⇒ "点不进去") */ .onClick((): void => { this.openDetail(r); }) } /** 筛选胶囊(全部 / 共享给我 / 我名下) */ @Builder scopeChip(label: string, key: string) { Text(label) .fontSize(FbMetric.fontSmall) .fontColor(this.scopeFilter === key ? Color.White : FbColors.muted) .backgroundColor(this.scopeFilter === key ? this.accent : FbColors.inputBg) .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .borderRadius(FbMetric.radiusPill) .onClick(() => { this.scopeFilter = key; }) } @Builder groupHeader(title: string, count: string) { Row({ space: 8 }) { Text(title) .fontSize(FbMetric.fontSmall) .fontWeight(FontWeight.Medium) .fontColor(FbColors.ink) Text(count) .fontSize(FbMetric.fontTiny) .fontColor(FbColors.faint) Blank() } .width('100%') .padding({ left: 4, right: 4, top: 12, bottom: 8 }) .backgroundColor(FbColors.paper) } private filtered(): FbResourceItem[] { if (this.scopeFilter.length === 0) { return this.all; } if (this.scopeFilter === 'shared') { // 共享给我的 = 权限不是 owner 的那些 return this.all.filter((r: FbResourceItem): boolean => r.shared); } return this.all.filter((r: FbResourceItem): boolean => !r.shared); } private groups(): FbGroup[] { return fbGroupResource(this.filtered()); } private sharedCount(): number { return this.all.filter((r: FbResourceItem): boolean => r.shared).length; } }