From 776c95ba0b8c9519c949326e55eba9cd7dfc1f14 Mon Sep 17 00:00:00 2001 From: laoyang Date: Sun, 18 Oct 2026 03:35:39 +0800 Subject: [PATCH] =?UTF-8?q?v0.7.0=20=E6=8E=A5=E4=B8=8A=E7=9C=9F=E5=AE=9E?= =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=EF=BC=9A=E7=99=BB=E5=BD=95=20/=20?= =?UTF-8?q?=E8=AE=BE=E5=A4=87=E4=BC=9A=E8=AF=9D=20/=20=E5=85=A8=E9=87=8F?= =?UTF-8?q?=E5=90=8C=E6=AD=A5=E4=B8=8E=E5=90=84=E6=A8=A1=E5=9D=97=E7=9C=9F?= =?UTF-8?q?=E5=AE=9E=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 从「演示数据壳子」走到「真的能连家里的服务器用」。 登录（用户 2026-10-17「完整的登录功能」） · 首次启动先填服务器地址 → /api/v1/ping 自报门户（认得出"这地址上真是家书"） · 手机号或用户名 + 密码 → 拿令牌；失败提示统一，不泄露账号是否存在 · FbDeviceStore：首次启动生成并持久化设备 UUID（三方应用拿不到 UDID）， 设备名取机型（marketName），并上报 platform / app_version 设备会话（v57，用户 2026-10-17） · 一把令牌 = 一台设备的一条会话；每次启动打一次 /me（有网就验） · 两种锁分开：need_login（401/被踢 → 清令牌）与 offline_expired （离线超 24h → 只锁界面、不清数据、联网自动恢复）—— 混成一种就会违背用户要的"一直联网就不用每天输密码" · 运行期任何请求 401 → 网络层全局回调立刻锁定跳登录页（FbHttp 的 authProbe 让登录/校验类请求跳过，避免"两个地方同时跳登录页"） · 退出登录：先清本地令牌（主防线），再尽力通知服务端 · 设置页显示版本号与「这台设备」 数据层 · FbDb / FbSchema / FbParse / 各 Repo（日程 / 名册 / 观影 / 模块）+ FbSyncAll · 首页改为服务端 /home（农历/节气/纪念日/生日/天气/统计/往年的今天） · 日程页用 FbDayEventPanel，与网页端显示方式/红线/并排三处一致 验证：ArkTS 静态守卫 231/0；hvigor 编译 BUILD SUCCESSFUL（entry-default-signed.hap）。 --- AppScope/app.json5 | 6 +- AppScope/resources/base/media/fb_logo.png | Bin 0 -> 4696 bytes .../resources/base/media/layered_image.json | 7 - entry/src/main/ets/common/FbGrip.ets | 102 ++ entry/src/main/ets/common/FbScroll.ets | 213 +++ entry/src/main/ets/common/FbTimeline.ets | 407 +++++ entry/src/main/ets/common/Store.ets | 148 ++ entry/src/main/ets/components/Drawer.ets | 117 +- .../main/ets/components/FbCalOptionRow.ets | 72 + .../ets/components/FbCalSettingsSheet.ets | 253 +++ .../src/main/ets/components/FbCinemaSheet.ets | 158 ++ .../main/ets/components/FbDayEventPanel.ets | 182 ++ .../src/main/ets/components/FbDayTimeline.ets | 476 ++++++ entry/src/main/ets/components/FbEventChip.ets | 50 + .../main/ets/components/FbEventEditSheet.ets | 908 ++++++++++ .../src/main/ets/components/FbEventSheet.ets | 269 +++ entry/src/main/ets/components/FbKinGraph.ets | 288 ++++ .../ets/components/FbModuleSettingsSheet.ets | 150 ++ .../ets/components/FbMovieDetailSheet.ets | 506 ++++++ .../main/ets/components/FbPersonEditSheet.ets | 1415 ++++++++++++++++ .../src/main/ets/components/FbPersonSheet.ets | 481 ++++++ entry/src/main/ets/components/FbStatCell.ets | 58 + entry/src/main/ets/components/FbTagChip.ets | 59 + .../src/main/ets/components/FbTagPickChip.ets | 52 + entry/src/main/ets/components/FloatDock.ets | 285 +++- entry/src/main/ets/components/TopBar.ets | 48 +- entry/src/main/ets/components/Widgets.ets | 102 +- entry/src/main/ets/data/FbCalRepo.ets | 278 +++ entry/src/main/ets/data/FbCalSettings.ets | 161 ++ entry/src/main/ets/data/FbDb.ets | 460 +++++ entry/src/main/ets/data/FbDeviceStore.ets | 163 ++ entry/src/main/ets/data/FbHttp.ets | 385 +++++ entry/src/main/ets/data/FbLogin.ets | 192 +++ entry/src/main/ets/data/FbModuleLoad.ets | 92 + entry/src/main/ets/data/FbModuleRepo.ets | 160 ++ entry/src/main/ets/data/FbMovieRepo.ets | 890 ++++++++++ entry/src/main/ets/data/FbParse.ets | 864 ++++++++++ entry/src/main/ets/data/FbPersonRepo.ets | 985 +++++++++++ entry/src/main/ets/data/FbSchema.ets | 297 ++++ entry/src/main/ets/data/FbServerStore.ets | 179 ++ entry/src/main/ets/data/FbSession.ets | 227 +++ entry/src/main/ets/data/FbSyncAll.ets | 176 ++ entry/src/main/ets/data/FbTokenStore.ets | 131 ++ .../main/ets/entryability/EntryAbility.ets | 277 ++- entry/src/main/ets/model/DemoData.ets | 124 +- entry/src/main/ets/model/FbSettingsMenus.ets | 61 + entry/src/main/ets/model/Types.ets | 236 ++- entry/src/main/ets/pages/Index.ets | 373 ++++- .../src/main/ets/pages/books/FbBooksPage.ets | 195 ++- .../ets/pages/calendar/FbCalendarPage.ets | 1274 ++++++++++---- entry/src/main/ets/pages/days/FbDaysPage.ets | 156 +- entry/src/main/ets/pages/home/FbHomePage.ets | 743 +++++--- .../main/ets/pages/ledger/FbLedgerPage.ets | 222 ++- .../src/main/ets/pages/login/FbLoginPage.ets | 674 ++++++++ entry/src/main/ets/pages/misc/FbMiscPages.ets | 58 +- .../main/ets/pages/movies/FbMoviesPage.ets | 497 +++++- .../main/ets/pages/people/FbPeoplePage.ets | 1489 ++++++++++++++--- .../ets/pages/resources/FbResourcesPage.ets | 229 ++- .../ets/pages/settings/FbSettingsPage.ets | 306 +++- .../src/main/ets/pages/tasks/FbTasksPage.ets | 229 ++- .../src/main/ets/pages/trips/FbTripsPage.ets | 201 ++- entry/src/main/module.json5 | 20 +- .../main/resources/base/media/background.png | Bin 6274 -> 0 bytes .../main/resources/base/media/foreground.png | Bin 12045 -> 0 bytes 64 files changed, 18297 insertions(+), 1519 deletions(-) create mode 100644 AppScope/resources/base/media/fb_logo.png delete mode 100644 AppScope/resources/base/media/layered_image.json create mode 100644 entry/src/main/ets/common/FbGrip.ets create mode 100644 entry/src/main/ets/common/FbScroll.ets create mode 100644 entry/src/main/ets/common/FbTimeline.ets create mode 100644 entry/src/main/ets/components/FbCalOptionRow.ets create mode 100644 entry/src/main/ets/components/FbCalSettingsSheet.ets create mode 100644 entry/src/main/ets/components/FbCinemaSheet.ets create mode 100644 entry/src/main/ets/components/FbDayEventPanel.ets create mode 100644 entry/src/main/ets/components/FbDayTimeline.ets create mode 100644 entry/src/main/ets/components/FbEventChip.ets create mode 100644 entry/src/main/ets/components/FbEventEditSheet.ets create mode 100644 entry/src/main/ets/components/FbEventSheet.ets create mode 100644 entry/src/main/ets/components/FbKinGraph.ets create mode 100644 entry/src/main/ets/components/FbModuleSettingsSheet.ets create mode 100644 entry/src/main/ets/components/FbMovieDetailSheet.ets create mode 100644 entry/src/main/ets/components/FbPersonEditSheet.ets create mode 100644 entry/src/main/ets/components/FbPersonSheet.ets create mode 100644 entry/src/main/ets/components/FbStatCell.ets create mode 100644 entry/src/main/ets/components/FbTagChip.ets create mode 100644 entry/src/main/ets/components/FbTagPickChip.ets create mode 100644 entry/src/main/ets/data/FbCalRepo.ets create mode 100644 entry/src/main/ets/data/FbCalSettings.ets create mode 100644 entry/src/main/ets/data/FbDb.ets create mode 100644 entry/src/main/ets/data/FbDeviceStore.ets create mode 100644 entry/src/main/ets/data/FbHttp.ets create mode 100644 entry/src/main/ets/data/FbLogin.ets create mode 100644 entry/src/main/ets/data/FbModuleLoad.ets create mode 100644 entry/src/main/ets/data/FbModuleRepo.ets create mode 100644 entry/src/main/ets/data/FbMovieRepo.ets create mode 100644 entry/src/main/ets/data/FbParse.ets create mode 100644 entry/src/main/ets/data/FbPersonRepo.ets create mode 100644 entry/src/main/ets/data/FbSchema.ets create mode 100644 entry/src/main/ets/data/FbServerStore.ets create mode 100644 entry/src/main/ets/data/FbSession.ets create mode 100644 entry/src/main/ets/data/FbSyncAll.ets create mode 100644 entry/src/main/ets/data/FbTokenStore.ets create mode 100644 entry/src/main/ets/model/FbSettingsMenus.ets create mode 100644 entry/src/main/ets/pages/login/FbLoginPage.ets delete mode 100644 entry/src/main/resources/base/media/background.png delete mode 100644 entry/src/main/resources/base/media/foreground.png diff --git a/AppScope/app.json5 b/AppScope/app.json5 index 4d48eff..87e3d0f 100644 --- a/AppScope/app.json5 +++ b/AppScope/app.json5 @@ -2,10 +2,10 @@ "app": { "bundleName": "familybook.yangyq.net", "vendor": "yangyq", - "versionCode": 100, - "versionName": "0.1.0", + "versionCode": 700, + "versionName": "0.7.0", "buildVersion": "1", - "icon": "$media:layered_image", + "icon": "$media:fb_logo", "label": "$string:app_name" } } \ No newline at end of file diff --git a/AppScope/resources/base/media/fb_logo.png b/AppScope/resources/base/media/fb_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..e26dfef2cd2f034828a91f41b57e4ecf9ec40502 GIT binary patch literal 4696 zcmXY#c{r3`8^@m+Gh=J)SsPo{ti>cGL&9WFF)3TgFS{67GsB34h-A-LimX%FLS_*1 zEBjtyNExzB_AKKa@B997o^!6}y03G8o^ze^ea`oex3)BabBJ;P002ju8eL)bl%vK5 zV?M8Z_hw~w?Ea?L0|DT%$58{lx%2J}0Pu03jSQ}a8i!VN*S>e; z>4|qu^WspjXbt8O&Lk!}m?KT^l=4=Y`h=A0pP|89J%e*Lu4_&n_lON8FvFy*?jp}) zBN&df3`fy#CYSy>*ugw<6r+2Y-5K=pOLX@{unrC@BmJniSBG2W%Zuv?FU>0&It9`U_YXR`#dtofGq zjcxFLeFN=<*$6Efz>h>Vj7TyquRL`QV%-If5SQQRVdaR9T(qvjbI*JKsGfW|H zxbtzjX=6J7{uP2KTf(ySy!jJ~L_+QU!?0_hy+XySETJ9Vl+T3&8q@w@MjAw-RUTOp zrGEWduZ*?rvB|%GShL!OMyQzZy?Ff|)qP-$EzPfFmLETeKq}beXkO>X-w*F+eRk`P z1B=}=#E!~+Avge1aJ){S&e^m|ESK)p)r3F}4Hd4kyaUO>-Qthkr$`%NZt-zPnhAD1_A71HugNFC^X?a_B&njoJ za3Ai~Di$%|O}N4G(-XU{QwP6sruyzupyIB=Ogr)wb0xg`U)}M%&49ZwY6u_3dwoRW zLEC<#8M)nvwIl7cNW}}r4=IVL(J8H7hCc0}rdecj56kO5jc@?c$nlftzD_r5n;PJS z*dF&q4pP`Gyx+PxMurri&9$HOj9%{dW<0-$0_!NJA9`MBe$W-<0afQ%BSs?7l7U*{ z@&1_)9?;+6zgp{%CO_uA2>+&RV=EZbEPxP9z7(@ajQD#o zW2VmtI9|7f<|&Ze4Khu>gz-K+PM2>IWjq%oPsAO53Jk2m>)V37*+ z&$^gnyyfcBod}2Yx2&wK`h1{W*^m=PCWzf2G`Fnp+Xd&Z2d=;0=+32o{PvsZ{ios? zJ^3n--e@ll8n8)-d@y*DS1|m56Qn%#cv4DDX3B>1j#bYIKE?oBznX#6$8T0e&Ltbh z4n8|0dxN6bPJViZYWBTrJ0?o_%gc-4RLZ}-nXjjtAj8h?t+8FpHo-p$oa;kv`EVwt zQ>5_hGLkl?;wV1Q?Pt$Pg^nZc1#)a_5~2fToxrW7}p~ zN7(&U&YD-nkm*&4Gkp(%Q%JQhu_50SHyTYdE@3LN>rfiX4mB_NE@W!mGosI52GSSj zR|(@2r?92PW>O`0gNoWKETje{X=OpXWRxD0`=WGDIw^Q1 z#-=sji}`KOmDnwbV`hz#ZMX8FSlXkN1;v zltasovNG}GEtqTzF3r7ppBwG+6ew!cjS+*7A5bc<6QIM6;|r*M zrFh5f`8&rWOQ0m#ko!7DqDuV+Y1y$5QyT##443S?PIpA)G0@dAK`Vmkfem)NI93Y8 zAWG&{oVe^hmCC>K2C`!q9e|}4Gfzd!)niH_kjw6Kzj~8Z@RxrM*-Et~6EDgmIoQc>agA16+k%84b4fH_Z3SGgNFd$b#m$|FL_kRYL|@V;_&X}@PTI%q zM8eqebO7CzmI>aSAYRIIml-#atC6h zbM@Z{P33L*J!z}X0gMgAb3+28u`j;HaY@@nXtU%VhNv~`ZaO34oJ~N9pZWI1AKWwr z^OOBe)A5Zx3`m zg$Nt)W^;ST`lR`ySf_fx!k%)OI9=?C2ds$Un;mHyl&pgsmv6-q#P$^^=$Nd*j8A{0 zo6>GWD$uTAIMk9v3Yy&>FxXB7I`NRWdLm2Ca)>9abh?(S&azn?5unE5GR~JsSZCEL zOx9pe;bUmk#7!@Qg<1GcjN`d{>t^Fc@T(DsI&)zHSG@#8T@~%W(!NRiVF@nP#dUjC zMNKOm1uq4YAyqFxi&KA*-Xg2wJ0E251#6!w{qOgA(N64K!8cZxJF=4JAqovLtt<8e zq4ad1_J-4a+5Hy+L~1IeX|ynKh7)Azry5<~h2uuJ@k#onKq{Le6MExHpruZSI2w=! zgxcr9v!}yF^7ySd{L4b1I?XbuDUx`6c0D|GbV#l>qgl z-wR__&5Tg}Lwy4*#2_Zxx^@oNZ-5NQ?5wvVuFr{s%wfkbB^R({|Gw(CGy8`aH1F3h zg$&4z-R%2%JE1pY6g*B>L&a%~+35G%;{t-HjX&ngmaS4loT6uCzoL2iIT+48CUHaY z!sYqG*n^}TJ0gqcxs=_YFf=g^kRv499cS(#qq^^*dYGU%*ofqy|Ch-2K?%O|l}Qj9 z_>nc@nHr7_VO|nI%i4>pfZkX?r;{6d(bX%zMhl2g!ABoyd4B=+j89iAgZgY2rE)ei zHjS?$6zmuc$nD2v=sn^p9%6M~Se*SyIDPUZB$+@fUC#jiZ0RW6IM0bNO(axfYya%F zWI!RIDgO0vg2zwyrz&VTdX*5$KQI&6egwCC1owY& z4rX&{Kje(YH5_H{VrEbOzcTxQ{wKze4c+P-u9m@$YS!Dvr~a$SG)0ts8Ynz6QcNer z_dFATES@N$_vs&*iBFy{5a`1(Dbs6rG zPG)U&R`a)u{-@+(@f)xS@IRT>fiYJ0x}riC*;=dK)9?ABHs6XoL0i{`h#D;>>nNe* zmEuyf>d(Orqq@8ml-6}VyI?NE;H+u{gWyD=$Jmr!zthBzB^zi+Cp6y zSB}IOXa6=@;DNegH}42>dq_b?ze-S2#7B1LrmBnd*XZ7-UQikuTgWXbt6e6#A)}0a za#IQAoGb}As=7KSqvk)=g8OI34&L{FOFD|Bh@ZcFMhQvz^#~%FX>;efDBe;7K%>Bz z4K|}>q$Uec3A%fhXd;;)*s3YEF(8V+A9eRE-~jO=iI(_SulAZ=VR;_$j#J=uIX>3n z5>Lc3PVst$LHjG|raBpXC%Du=$G^|w*@;o2t1WL2pu<62v4oH{)=bXivXk;dJjC5FhKR4|?W;c@Q4#1(-&N8a`S|AC5nc4~GzG*H~V+{-~KB0|Xv;Ng`e1nUD~&@ew41{<#TN z6sjr@YS@O*Cz<2%EGbY!J%qllO)=g2g$7nsK>Lw=xeI&RGQjq8AQC5}Fti`x76vGeYQBC>$~El?QW$)@rFZTy7=G$yPMXq(j= z&l5fsf0uI?xRP2_7A1Po`$_C$()d4%yb95iPs?AfrYRWEuJDHIClS}vjPWEs;_;@F z_GZ%GAwprXWZ_pd8v>`^WC~lp!TkK9YtJHYsUZ2Jz15jPL%xP%3^$``ll&;QglnuZ z-JeOiXL3uM&}w>I9{DX+g{lqf+-wwXSWJgg$BL=3w9$>FJZSBQ=iS;MS(D(sDc^AA z;Y?aH6=8^K%`ibiTWuU}DSQpdt zMm^QsY^hnvw8!2ADJ$1W?9DPAXXv$^P{o>>eYB*Iim2W? z-1Y6L=oHCkI-``i^v44z)o(AyUTqgRD?jvfd9cvyxAr!-UB91LFjKxUcmkw=d>us^ z4`)^bkS5ea0^zOnSLqH`N;U6+norfgyU|){auyfjxjxff>5k@tt4#k5)?wBr9F7M6IsJ2nld`+gxtK2uvJ5Af~YF0eIiTHr~B7IasDf44q loxIizk)s)h=b!<5INPi!Wt!HFcxI^xKwq*nsxowm{tt5^uFn7f literal 0 HcmV?d00001 diff --git a/AppScope/resources/base/media/layered_image.json b/AppScope/resources/base/media/layered_image.json deleted file mode 100644 index fb49920..0000000 --- a/AppScope/resources/base/media/layered_image.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "layered-image": - { - "background" : "$media:background", - "foreground" : "$media:foreground" - } -} \ No newline at end of file diff --git a/entry/src/main/ets/common/FbGrip.ets b/entry/src/main/ets/common/FbGrip.ets new file mode 100644 index 0000000..70855e4 --- /dev/null +++ b/entry/src/main/ets/common/FbGrip.ets @@ -0,0 +1,102 @@ +/** + * 家书 FamilyBook · 「质感握姿」（鸿蒙端） + * + * 🔴 用户 2026-10-16 第 4 条： + * 「再加上**质感握姿**，也就是左手边握的时候，把家书图标放在左边； + * 右手边握的时候，它就跑到右边去，这样方便点击并弹出抽屉。 + * 也就是说，**左手握就从左边弹出抽屉，右手握就从右边弹出抽屉**。」 + * + * 实现：用**官方**的 `@kit.MultimodalAwarenessKit` → `motion` 模块， + * 监听 `holdingHandChanged`（`HoldingHandStatus`：左手/右手/双手/未持）。 + * ⚠️ 这**不是**自己拿重力/陀螺仪猜的 —— 猜出来的"左右手"极不可靠， + * 而且华为系统本来就把这个能力作为公开 API 提供。 + * + * ⚠️ 权限：`ohos.permission.DETECT_GESTURE` + * （已在 `module.json5` 声明；它是 system_grant + normal ⇒ 安装即得， + * 不会弹授权框）。 + * ⚠️ 版本：`@since 20`。低版本设备调 `on()` 会抛 **801（能力不支持）** + * ⇒ 全程 try/catch，拿不到就**保持默认方向**（左），不影响其它功能。 + * ⚠️ 必须 `off()` 取消监听：不取消会在页面重建后**叠加多个回调** + * （本项目在别处踩过同类：监听没注销 ⇒ 一次事件触发 N 次）。 + */ + +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { motion } from '@kit.MultimodalAwarenessKit'; +import { FbAppState, fbAppState } from './Store'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbGrip'; + +/** + * 握姿监听（全局单例）。 + * + * ⚠️ 它是**过程式**的（启动时 `start()` 一次即可），不需要渲染， + * 所以**不做成 @ComponentV2** —— 它不是 UI。 + */ +class FbGripWatcherImpl { + private listening: boolean = false; + private started: boolean = false; + + /** + * 开始监听握姿（幂等）。 + * + * @param app 全局状态；抽屉方向写进它的 `drawerSide` + */ + start(app: FbAppState): void { + if (this.started) { + return; + } + this.started = true; + const cb = (status: motion.HoldingHandStatus): void => { + this.apply(status, app); + }; + try { + motion.on('holdingHandChanged', cb); + this.listening = true; + hilog.info(DOMAIN, TAG, '握姿监听已开启'); + } catch (err) { + // 801 = 设备/系统不支持（API < 20）；201 = 权限没给 + // ⇒ 都只是"没有握姿能力"，**不能让应用起不来** + this.listening = false; + hilog.warn(DOMAIN, TAG, '握姿监听不可用（将保持默认抽屉方向）：%{public}s', + JSON.stringify(err)); + } + } + + /** 停止监听（页面销毁时调，避免回调叠加） */ + stop(): void { + if (!this.listening) { + return; + } + try { + motion.off('holdingHandChanged'); + } catch (err) { + hilog.warn(DOMAIN, TAG, '取消握姿监听失败：%{public}s', JSON.stringify(err)); + } + this.listening = false; + } + + /** + * 握持状态 → 抽屉方向。 + * + * ⚠️ **双手握 / 未持 / 未知** 都**不改**方向：这三种情况没有"偏好哪边"的 + * 信息量，硬猜一边会让抽屉在双手拿时来回跳。 + */ + private apply(status: motion.HoldingHandStatus, app: FbAppState): void { + if (status === motion.HoldingHandStatus.LEFT_HAND_HELD) { + app.drawerSide = 'left'; + return; + } + if (status === motion.HoldingHandStatus.RIGHT_HAND_HELD) { + app.drawerSide = 'right'; + } + } +} + +/** 全局单例 */ +export const FB_GRIP: FbGripWatcherImpl = new FbGripWatcherImpl(); + +/** 便捷入口：拿到全局状态并开始监听 */ +export function fbStartGripWatch(): void { + FB_GRIP.start(fbAppState()); +} \ No newline at end of file diff --git a/entry/src/main/ets/common/FbScroll.ets b/entry/src/main/ets/common/FbScroll.ets new file mode 100644 index 0000000..3c98ec0 --- /dev/null +++ b/entry/src/main/ets/common/FbScroll.ets @@ -0,0 +1,213 @@ +/** + * 家书 FamilyBook · 滚动方向跟踪（鸿蒙端） + * + * 🔴 存在的原因（用户 2026-10-13 明确要求）： + * 「下面四个悬浮的按钮，当往上滑的时候它就消失了。然后整个就是内容。 + * 等到从上往下滑的时候，它就又出现了。这个典型的应用呢，是像这个 IT 之家这种形式的。」 + * + * ⇒ 把「向上滚 / 向下滚」写进全局状态（`FbAppState.dockHidden`）， + * 由 `Index.ets` 据此把悬浮栏滑走 / 滑回。 + * + * ⚠️ 为什么**不用** `@ohos.arkui.observer` 的全局 `'scrollEvent'` 观察者： + * 它只报 `SCROLL_START` / `SCROLL_STOP`（**只有起止、没有方向**）， + * 做不了"往上还是往下"（已查 SDK 确认）。 + * ⇒ 只能在各页最外层滚动容器上挂 `onDidScroll`（API 12+）。 + * 它的 `scrollOffset` 是**每帧的增量**（vp）： + * · `> 0` = 内容往上走（手指上滑、看后面的内容）； + * · `< 0` = 内容往下走（手指下滑、回看前面的内容）。 + * + * ⚠️ 为什么各页要**各写一行** `.onDidScroll(fbOnScroll)`： + * ArkUI 没有"全局绊住所有滚动容器"的钩子。逐页显式挂最直白， + * 而且哪个页面参与这套行为，看代码就知道（没写这行 = 不参与）。 + * + * 🔴🔴 2026-10-15 改：**阈值从 48/40 降到 12/8**（真机反馈"其他模块不收起"）。 + * + * 实测症状：**首页/名册能收起，其他模块（任务/资源/藏书/旅程/设置…）不能**。 + * 差别在于**内容高度** —— 那几页内容刚好一屏左右，向上滑只有很小一段可滚， + * 累积量到不了 48vp ⇒ 永远不触发。 + * ⇒ 阈值必须**按"最小可感知滑动"来定**，而不是"一整段内容"。 + * 12vp 约等于"手指明确地推了一下"，既不会误触、 + * 又能在内容只有很短可滚行程时正常触发。 + * ⚠️ 收/唤两个阈值**不同**（收 12、唤 8）：收起要"更确定"、唤回要"更灵敏"—— + * 用户往回翻，本意多半就是要找底部入口。 + */ + +import { fbAppState } from './Store'; + +/** + * 向上滚多少（vp 累计）才**收起**悬浮栏。 + * + * ⚠️ 别再调大：内容短的那些页面（任务/资源/藏书）可滚行程只有几十 vp， + * 阈值一大就永远不会触发（这正是本轮修的 bug）。 + */ +const HIDE_AT: number = 12; + +/** + * 向下滚多少（vp 累计）才**唤回**悬浮栏。 + * + * 比 `HIDE_AT` 更小：收起要"更确定"、唤回要"更灵敏"。 + */ +const SHOW_AT: number = 8; + +/** + * 横向滚动容器上报（挂在**横向** Scroll 上的 `.onDidScroll`）。 + * + * 🔴 用途（用户 2026-10-15 要求"有横滑组件时优先响应组件、别开抽屉"）： + * 记一个时间戳，抽屉手势结束时会检查"刚刚有没有横滑在为"。 + * ⇒ 在标签条上横滑时，抽屉让位，不再"一不小心滑出来"。 + * + * ⚠️ 与 `fbOnScroll` 的区别：那个是**纵向**滚动（管悬浮栏收起）， + * 这个是**横向**滚动（管抽屉让位）。两个都挂是正常的。 + * ⚠️ 用 `Date.now()` 而不是计数：需要的是"最近有没有"这个时间语义。 + */ +export function fbOnHScroll(_offset: number, _state: ScrollState): void { + fbAppState().hScrollAt = Date.now(); +} + +/** + * 判定"刚刚是否有横滑组件在为"。 + * + * @param withinMs 多久之内算"刚刚"。默认 350ms —— + * 横滑停下到手指抬起之间通常有几十到一两百毫秒， + * 抽屉的 `onActionEnd` 也在手指抬起那一刻触发 ⇒ 350 足够覆盖， + * 又不会把"上一次横滑"误判成这次（用户滑完停一会儿再想开抽屉是正常的）。 + */ +export function fbHScrollBusy(withinMs: number = 350): boolean { + const at: number = fbAppState().hScrollAt; + return at > 0 && (Date.now() - at) < withinMs; +} + +/** + * 各页最外层滚动容器的滚动回调。 + * + * 用法（每个模块页的**最外层**滚动容器挂一次）： + * ```ts + * Scroll() { ... } + * .width('100%') + * .height('100%') + * .onDidScroll(fbOnScroll) + * ``` + * ⚠️ 只挂**最外层**那一个：内层横向滚动（标签条、看板筛选条、账本切换条） + * 要挂的是 `fbOnHScroll`（管抽屉让位），**不是**这个 —— + * 挂错了会让纵向的累积值被横向滚动污染。 + */ +export function fbOnScroll(offset: number, state: ScrollState): void { + const app = fbAppState(); + + // ⚠️ **不跳过 Idle**：`Fling`（惯性）结束时最后那一下会带 Idle， + // 而内容短的页面可能**只在惯性阶段**产生位移 —— 跳过就永远收不起来。 + // 但 Idle 的 offset 偶尔是 0（无方向含义），所以下面按 offset 的正负判断， + // 0 自然不产生任何影响。 + if (offset === 0) { + return; + } + + // ---- 方向法（主判据）：一帧偏移足够大 ⇒ 直接按方向切 ---- + // 🔴 为什么不只靠累积：内容短的页面可滚行程小、帧数少， + // 累积还没到阈值滑动就结束了（旧实现就是这么漏掉的）。 + // 这里加一条"单帧方向足够明确就直接切"的快路径。 + if (offset >= HIDE_AT) { + app.scrollAcc = HIDE_AT; + if (!app.dockHidden) { + app.dockHidden = true; + } + return; + } + if (offset <= -SHOW_AT) { + app.scrollAcc = -SHOW_AT; + if (app.dockHidden) { + app.dockHidden = false; + } + return; + } + + // ---- 累积法（兜底）：小步慢滑时把微小增量攒起来 ---- + app.scrollAcc += offset; + if (app.scrollAcc >= HIDE_AT) { + // 钉在阈值上（滞回）：反向只需走 SHOW_AT 就能切回来 + app.scrollAcc = HIDE_AT; + if (!app.dockHidden) { + app.dockHidden = true; + } + } else if (app.scrollAcc <= -SHOW_AT) { + app.scrollAcc = -SHOW_AT; + if (app.dockHidden) { + app.dockHidden = false; + } + } +} + +// ============================================================ +// 触摸方向兜底（内容不足一屏的页面用） +// ============================================================ + +/** 手指按下的位置（**-1 = 当前没有按压**；用哨兵值而不是 null，ArkTS 对可选值更严格） */ +let touchStartY: number = -1; + +/** 一次滑动至少要移动这么多（vp）才认作"有方向意图"（避免把点击当滑动） */ +const TOUCH_MIN: number = 16; + +/** + * 触摸方向兜底：在**页面根容器**挂 `.onTouch(fbOnTouch)`。 + * + * 🔴 为什么需要它（2026-10-15 真机反馈）： + * 「其他模块往上滑动的时候，那四个悬浮条却没有隐藏。」 + * 实测根因：**任务/资源/藏书/设置这些页面内容不足一屏，压根滚不动** + * ⇒ 挂在外层滚动容器上的 `onDidScroll` **一次都不会触发** + * ⇒ 悬浮栏永远收不起来（首页/名册内容多，所以正常）。 + * + * ⇒ 用**触摸位移方向**做兜底：手指从下往上抹（`dy < 0`）就收起、 + * 从上往下抹就唤回。它不依赖"内容能滚"这件事。 + * + * ⚠️ 与 `fbOnScroll` 的关系：**两者都放行、互不冲突**（同一个 `dockHidden` 状态， + * 同向重复设置是无害的幂等操作）。滚动能触发时以 `fbOnScroll` 为主 + * （它更精确：区分了内容位移与手指位移）。 + * ⚠️ 阈值 `TOUCH_MIN = 16vp` 是"手指位移"，比滚动阈值大一些 —— + * 因为手指位移总是大于等于内容位移（滚到头时内容不动、手指还在动）， + * 取小了会在**点击**时也触发。 + * ⚠️ 用 **`windowY`**（窗口坐标）而不是 `y`（组件内坐标）： + * `y` 是相对**当前组件**的，手指移出组件后不再更新（可能拿到 0）。 + * `windowY` 是窗口坐标、全程连续。 + * ⚠️ `globalDisplayY` 在 SDK 里是**可选字段**（`number | undefined`）， + * ArkTS 会报类型错 ⇒ 一律用必填的 `windowY`。 + */ +export function fbOnTouch(event: TouchEvent): void { + const app = fbAppState(); + const t: TouchType = event.type; + + if (t === TouchType.Down) { + const arr: TouchObject[] = event.touches; + if (arr.length > 0) { + touchStartY = arr[0].windowY; + } + return; + } + + if (t === TouchType.Move) { + if (touchStartY < 0) { + return; + } + const arr: TouchObject[] = event.touches; + if (arr.length === 0) { + return; + } + const dy: number = arr[0].windowY - touchStartY; + // dy < 0 ⇒ 手指往上抹 ⇒ 内容往上走 ⇒ 收起 + if (dy <= -TOUCH_MIN) { + if (!app.dockHidden) { + app.dockHidden = true; + } + // ⚠️ **不更新** touchStartY：否则手指继续上抹时会一直在阈值边缘反复触发。 + // 保持不动 ⇒ 判断是"相对起点的总位移"，更稳。 + } else if (dy >= TOUCH_MIN) { + if (app.dockHidden) { + app.dockHidden = false; + } + } + return; + } + + if (t === TouchType.Up || t === TouchType.Cancel) { + touchStartY = -1; + } +} \ No newline at end of file diff --git a/entry/src/main/ets/common/FbTimeline.ets b/entry/src/main/ets/common/FbTimeline.ets new file mode 100644 index 0000000..da85677 --- /dev/null +++ b/entry/src/main/ets/common/FbTimeline.ets @@ -0,0 +1,407 @@ +/** + * 家书 FamilyBook · 日程「时间轴」布局（鸿蒙端） + * + * 🔴 用户 2026-10-16：「首先，**没有时间轴展示**……你这不是说让你把那个 + * SyncCalendar 里面的功能搬过来吗？」 + * ⇒ 照 `D:\Yongquan\code\SyncCalendar\entry\src\main\ets\common\TimelineUtil.ets` + * 移植（那份是成熟实现，算法经过实测）：把一天的日程按**真实时间** + * 铺到 0-24 小时的纵向格子上。 + * + * 设计（与 SyncCalendar 一致）： + * · 时间粒度：**1 小时 = 1 格**，色块高度按实际时长换算。 + * · 同一时间重叠（冲突）的日程**横向平分宽度**：1 条 = 100%、2 条 = 50% … + * · 色块背景色 = 所属日历本颜色。 + * · 全天日程**不进时间轴**，单独返回，由视图画在最上方。 + * · 视窗：**8:00 ~ 18:00 恒定显示**；某天在 8 点前/18 点后有日程时向外扩。 + * · 当前时间红线按"现在"在时间轴上的纵向比例定位。 + * + * ⚠️ 与 SyncCalendar 的差别（家书的数据形状不同，不照抄）： + * · 它用**毫秒时间戳**；家书的 `FbCalEvent` 给的是 `HH:mm` 字符串 + * （`time` / `endTime`）⇒ 统一换算成"当天第几分钟"来算比例。 + * · 它的跨天日程要"逐天展开 + 按交集裁切"；家书 `/calendar` 接口 + * **本来就是按天给出的条目**（同一条重复日程每天一条）， + * ⇒ 不需要跨天裁切，逻辑简单一层。 + * · 它没有"没有结束时间"的日程；家书允许 ⇒ 缺结束时间时按 **1 小时** 估。 + * + * ArkTS 约束：所有"多字段返回值"必须是**命名 class**， + * 不能用内联对象字面量类型（见 r/quick-apis/08-state-decorators.md）。 + */ + +import { FbCalEvent } from '../model/Types'; + +/** 时间轴上的一个日程色块（位置/尺寸都用 0~1 比例，视图侧乘实际高度） */ +export class FbTimeBlock { + /** 稳定 key（ForEach 用） */ + key: string = ''; + title: string = ''; + /** `09:00 - 10:30` */ + timeText: string = ''; + place: string = ''; + color: string = '#A84A28'; + /** 距 0 点的比例 0~1（乘时间轴总高） */ + topRatio: number = 0; + /** 高度比例 */ + heightRatio: number = 0; + /** 横向起始比例 0~1（冲突平分） */ + leftRatio: number = 0; + /** 横向宽度比例 */ + widthRatio: number = 1; + /** 冲突组序号（视图侧按组分行） */ + groupIndex: number = 0; + /** 组内列号（同列互不重叠） */ + laneIndex: number = 0; + /** 正在进行中（视图侧高亮） */ + isNow: boolean = false; + /** 能不能编辑（衍生条目不给编辑） */ + editable: boolean = false; + /** 原始条目（点击/详情用） */ + ev: FbCalEvent | null = null; +} + +/** 一天的完整时间轴布局结果 */ +export class FbTimelineData { + /** 全天条目（画在 0 点之前） */ + allDay: FbCalEvent[] = []; + /** 时间轴色块（按 topRatio 升序） */ + blocks: FbTimeBlock[] = []; + /** 当天有没有"带时间"的日程 */ + hasTimed: boolean = false; +} + +/** 冲突组：一组时间上互相重叠的日程（用于横向平分宽度） */ +class FbOverlapGroup { + items: FbCalEvent[] = []; + endMin: number = 0; +} + +/** 视图渲染用的"冲突组"（组内按列并排） */ +export class FbTimeGroup { + /** 组内最早开始（距 0 点比例） */ + startRatio: number = 0; + /** 组内最晚结束 */ + endRatio: number = 0; + /** 列数 = 组内"最大同时重叠数" */ + laneCount: number = 1; + /** 组内全部色块（按开始时间升序） */ + blocks: FbTimeBlock[] = []; + /** 按列组织：lanes[i] = 第 i 列上的色块 */ + lanes: FbTimeBlock[][] = []; +} + +/** 视窗（要显示的小时区间） */ +export class FbViewRange { + startHour: number = 8; + endHour: number = 18; +} + +/** 视图分组用的"一行"（空格行 或 冲突组行） */ +export class FbTimeRow { + /** 0 = 空隙；1 = 冲突组 */ + kind: number = 0; + topRatio: number = 0; + botRatio: number = 0; + /** kind=1 时有效 */ + group: FbTimeGroup | null = null; + key: string = ''; +} + +export class FbTimelineUtil { + /** 1 小时 = 多少 vp（视图侧用同一常量换算） */ + static readonly HOUR_UNIT: number = 44; + /** 基准可视区：恒定显示的小时区间 */ + static readonly BASE_START_HOUR: number = 8; + static readonly BASE_END_HOUR: number = 18; + /** 色块最短时长：15 分钟（避免零高） */ + static readonly MIN_SPAN_MIN: number = 15; + + /** 一天有多少分钟 */ + private static readonly DAY_MIN: number = 1440; + + /** `HH:mm` → 当天第几分钟（认不出返回 -1） */ + static minutesOf(hhmm: string): number { + if (hhmm.length < 4) { + return -1; + } + const h: number = parseInt(hhmm.substring(0, 2), 10); + const m: number = parseInt(hhmm.substring(3, 5), 10); + if (isNaN(h) || isNaN(m)) { + return -1; + } + return h * 60 + m; + } + + /** 分钟 → `HH:mm` */ + static hhmm(min: number): string { + const h: number = Math.floor(min / 60); + const m: number = min % 60; + const p = (n: number): string => n < 10 ? '0' + n.toString() : n.toString(); + return p(h) + ':' + p(m); + } + + /** 条目的唯一 key（ForEach 用；同一天同一条目重复出现时要能区分） */ + static keyOf(e: FbCalEvent): string { + return e.kind + '_' + e.id.toString() + '_' + e.time + '_' + e.title; + } + + /** + * 构建某一天的时间轴布局。 + * + * @param events 这一天（`FbCalEvent.date` 已等于目标日期）的全部合格条目 + * @param isToday 是不是今天（决定要不要画"当前时间"） + * @param nowMin 当前时刻（当天第几分钟；仅 isToday 时有意义） + */ + static build(events: FbCalEvent[], isToday: boolean, nowMin: number): FbTimelineData { + const res: FbTimelineData = new FbTimelineData(); + + // 1) 分类：全天 → 顶部；带时间的 → 时间轴 + const timed: FbCalEvent[] = []; + for (const e of events) { + if (e.allDay || FbTimelineUtil.minutesOf(e.time) < 0) { + res.allDay.push(e); + } else { + timed.push(e); + } + } + res.hasTimed = timed.length > 0; + if (timed.length === 0) { + return res; + } + + // 2) 算出每条的 [起, 止] 分钟（缺结束时间按 1 小时估；止 <= 起 则按 +1h） + const starts: number[] = []; + const ends: number[] = []; + for (const e of timed) { + const s: number = FbTimelineUtil.minutesOf(e.time); + let en: number = FbTimelineUtil.minutesOf(e.endTime); + if (en <= s) { + en = s + 60; + } + if (en > FbTimelineUtil.DAY_MIN) { + en = FbTimelineUtil.DAY_MIN; // 夹到当天 24:00（跨天不处理：接口按天给条目） + } + starts.push(s); + ends.push(en); + } + + // 3) 按开始时间排序（同步排 starts/ends，保持下标一致） + const idx: number[] = []; + for (let i = 0; i < timed.length; i++) { + idx.push(i); + } + idx.sort((a: number, b: number): number => starts[a] - starts[b]); + + const sortedEv: FbCalEvent[] = []; + const sortedS: number[] = []; + const sortedE: number[] = []; + for (const i of idx) { + sortedEv.push(timed[i]); + sortedS.push(starts[i]); + sortedE.push(ends[i]); + } + + // 4) 划分"冲突组"（时间上连通重叠的一簇） + const groups: FbOverlapGroup[] = []; + for (let i = 0; i < sortedEv.length; i++) { + const last: FbOverlapGroup | undefined = + groups.length > 0 ? groups[groups.length - 1] : undefined; + if (last !== undefined && sortedS[i] < last.endMin) { + // 与上一组还有重叠 ⇒ 并入（组的"最晚结束"跟着往外扩） + last.items.push(sortedEv[i]); + last.endMin = Math.max(last.endMin, sortedE[i]); + } else { + const ng: FbOverlapGroup = new FbOverlapGroup(); + ng.items = [sortedEv[i]]; + ng.endMin = sortedE[i]; + groups.push(ng); + } + } + + // 5) 组内"贪心分列"（区间图着色）：每条放进"结束 <= 它开始"的编号最小的列 + // ⇒ 列数 = 该组"最大同时重叠数"，而不是组内条数 + let gi: number = 0; + for (const g of groups) { + const laneEnd: number[] = []; + const laneOf: number[] = []; + for (const e of g.items) { + const s: number = FbTimelineUtil.minutesOf(e.time); + let lane: number = -1; + for (let i = 0; i < laneEnd.length; i++) { + if (laneEnd[i] <= s) { + lane = i; + break; + } + } + if (lane < 0) { + lane = laneEnd.length; + laneEnd.push(0); + } + // 该条的结束（同样规则） + let en: number = FbTimelineUtil.minutesOf(e.endTime); + if (en <= s) { + en = s + 60; + } + if (en > FbTimelineUtil.DAY_MIN) { + en = FbTimelineUtil.DAY_MIN; + } + laneEnd[lane] = en; + laneOf.push(lane); + } + const n: number = laneEnd.length > 0 ? laneEnd.length : 1; + for (let i = 0; i < g.items.length; i++) { + const e: FbCalEvent = g.items[i]; + const s: number = FbTimelineUtil.minutesOf(e.time); + let en: number = FbTimelineUtil.minutesOf(e.endTime); + if (en <= s) { + en = s + 60; + } + if (en > FbTimelineUtil.DAY_MIN) { + en = FbTimelineUtil.DAY_MIN; + } + const span: number = en - s > FbTimelineUtil.MIN_SPAN_MIN ? en - s : FbTimelineUtil.MIN_SPAN_MIN; + + const b: FbTimeBlock = new FbTimeBlock(); + b.key = FbTimelineUtil.keyOf(e); + b.title = e.title !== '' ? e.title : '(无标题)'; + b.timeText = FbTimelineUtil.hhmm(s) + ' - ' + FbTimelineUtil.hhmm(en); + b.place = e.place; + b.color = e.color; + b.topRatio = s / FbTimelineUtil.DAY_MIN; + b.heightRatio = span / FbTimelineUtil.DAY_MIN; + b.groupIndex = gi; + b.laneIndex = laneOf[i]; + b.widthRatio = 1 / n; + b.leftRatio = laneOf[i] / n; + b.isNow = isToday && nowMin >= s && nowMin < en; + b.editable = e.kind === 'custom' && e.id > 0 && e.calId > 0; + b.ev = e; + res.blocks.push(b); + } + gi++; + } + + // 兜底：严格按 topRatio 升序（视图侧求"空隙"无累积漂移） + res.blocks.sort((a: FbTimeBlock, b: FbTimeBlock): number => a.topRatio - b.topRatio); + return res; + } + + /** + * 由平坦的色块列表重建"冲突分组"：视图按组分行、组内按列并排渲染。 + */ + static groupsOf(blocks: FbTimeBlock[]): FbTimeGroup[] { + const map: Map = new Map(); + for (const b of blocks) { + const arr: FbTimeBlock[] | undefined = map.get(b.groupIndex); + if (arr === undefined) { + map.set(b.groupIndex, [b]); + } else { + arr.push(b); + } + } + const idxs: number[] = Array.from(map.keys()).sort((a: number, b: number): number => a - b); + const out: FbTimeGroup[] = []; + for (const gidx of idxs) { + const bs: FbTimeBlock[] = map.get(gidx) ?? []; + bs.sort((a: FbTimeBlock, b: FbTimeBlock): number => { + if (a.topRatio !== b.topRatio) { + return a.topRatio - b.topRatio; + } + return b.heightRatio - a.heightRatio; + }); + // 贪心分列（用比例重算，保证与 build 一致） + const lanes: FbTimeBlock[][] = []; + const laneEnd: number[] = []; + for (const b of bs) { + let li: number = -1; + for (let i = 0; i < laneEnd.length; i++) { + if (laneEnd[i] <= b.topRatio + 0.0000001) { + li = i; + break; + } + } + const be: number = b.topRatio + b.heightRatio; + if (li < 0) { + li = lanes.length; + lanes.push([b]); + laneEnd.push(be); + } else { + lanes[li].push(b); + laneEnd[li] = be; + } + b.laneIndex = li; + } + const lc: number = lanes.length > 0 ? lanes.length : 1; + for (const b of bs) { + b.widthRatio = 1 / lc; + b.leftRatio = b.laneIndex / lc; + } + const g: FbTimeGroup = new FbTimeGroup(); + g.blocks = bs; + g.lanes = lanes; + g.laneCount = lc; + let s: number = 1; + let e: number = 0; + for (const b of bs) { + if (b.topRatio < s) { + s = b.topRatio; + } + const be: number = b.topRatio + b.heightRatio; + if (be > e) { + e = be; + } + } + g.startRatio = s; + g.endRatio = e; + out.push(g); + } + return out; + } + + /** + * 视窗：8:00 ~ 18:00 恒定显示；某天在 8 点前 / 18 点后有日程时向外扩。 + * + * ⚠️ 这条规则很重要：若只按"当天最早/最晚日程"截断， + * 那么只有一条 9:00 日程的日子就只画 1 小时的格子，观感很怪。 + */ + static viewRange(blocks: FbTimeBlock[]): FbViewRange { + const rg: FbViewRange = new FbViewRange(); + let s: number = FbTimelineUtil.BASE_START_HOUR; + let e: number = FbTimelineUtil.BASE_END_HOUR; + for (const b of blocks) { + const bh: number = Math.floor(b.topRatio * 24); + const eh: number = Math.ceil((b.topRatio + b.heightRatio) * 24 - 0.0001); + if (bh < s) { + s = bh; + } + if (eh > e) { + e = eh; + } + } + if (s < 0) { + s = 0; + } + if (s > 23) { + s = 23; + } + if (e > 24) { + e = 24; + } + if (e <= s) { + e = s + 1 > 24 ? 24 : s + 1; + } + rg.startHour = s; + rg.endHour = e; + return rg; + } + + /** 当前时刻的纵向比例 0~1 */ + static nowRatio(nowMin: number): number { + let r: number = nowMin / FbTimelineUtil.DAY_MIN; + if (r < 0) { + r = 0; + } + if (r > 1) { + r = 1; + } + return r; + } +} \ No newline at end of file diff --git a/entry/src/main/ets/common/Store.ets b/entry/src/main/ets/common/Store.ets index df9589c..b622575 100644 --- a/entry/src/main/ets/common/Store.ets +++ b/entry/src/main/ets/common/Store.ets @@ -45,6 +45,124 @@ export class FbAppState { /** 未读通知数（顶栏铃铛角标） */ @Trace unread: number = 2; + /** + * 状态栏高度（vp）。 + * + * 🔴 为什么页面需要知道它（用户 2026-10-13 要"全沉浸"）： + * 打开 `setWindowLayoutFullScreen(true)` 之后，**窗口不再为状态栏让位**， + * 内容会真的画到状态栏底下 ⇒ 顶栏必须自己往下让出这一段， + * 否则首屏的"家书"标题会被时间/信号图标压住。 + * ⚠️ 但它**只用来给"滚动内容的第一行"垫高**（见 `FbTopBar`）， + * 不是给根容器加 padding —— 那样内容就永远钻不到状态栏底下、 + * 也就没有"滑上去和通知栏融为一体"的效果了。 + */ + @Trace statusBarH: number = 0; + + /** + * 底部悬浮快捷栏是否**被滚动收起**。 + * + * 🔴 用户 2026-10-13：「下面四个悬浮按钮，往上滑的时候它就消失了……等到从上往下滑的时候， + * 它就又出现了。典型的应用像 IT 之家。」 + * ⇒ 向上滚（看后面的内容）收起、向下滚（回看）唤回。 + * ⚠️ 由 `common/FbScroll.ets` 的 `FB_SCROLL.track()` 写、`Index.ets` 读并驱动位移动画。 + */ + @Trace dockHidden: boolean = false; + + /** + * **页面内浮层**（人员详情 / 编辑 / 观影详情 / 影厅）当前打开了几个。 + * + * 🔴 为什么需要（用户 2026-10-15 实测踩出来的真 bug）： + * 名册的详情浮层是**页面内的覆盖层**，装在页面自己的 `Stack` 里； + * 而底部悬浮快捷栏装在**更外层的 `Index` 的 Stack` 里** ⇒ 悬浮栏的层级更高。 + * 实测：详情卡片底部的「编辑」按钮（y≈2207-2331）与悬浮栏（y≈2240-2350） + * **在屏幕上重叠**，点「编辑」被悬浮栏抢走 ⇒ **直接跳到了日历页**。 + * （「关闭」同理。） + * ⇒ 浮层开着的时候，悬浮栏必须**让位**（收起 + 不可点）。 + * + * ⚠️ 用**计数**而不是 boolean：可能同时有"详情 + 编辑"两个浮层叠着 + * （只是本项目目前一次只开一个），计数能天然处理嵌套/多层。 + * ⚠️ 所有开/关都必须走 `openSheet()` / `closeSheet()`，不要直接改它。 + */ + @Trace sheetCount: number = 0; + + /** + * 滚动方向累积量（vp）。正 = 一直在往上滚；负 = 一直在往下滚。 + * + * ⚠️ 放在**状态类里**而不是 `FbScroll.ets` 的模块级变量 —— + * `FbScroll` 要读 `FbAppState`、`Store` 若又要 import `FbScroll` 的复位函数， + * 就形成**循环 import**（本项目此前已经因此踩过坑）。 + * ⇒ 让累积量归属状态类本身，依赖方向固定成单向：`FbScroll` → `Store`。 + * ⚠️ 它不是"界面状态"，不参与渲染（没有任何组件读它）； + * 只是随状态类一起活着的内部计数器，所以**不加 `@Trace`** + * （加了会让每个滚动帧都触发一次无谓的状态通知）。 + */ + scrollAcc: number = 0; + + /** + * **横向滚动"占用"标记**：记录最近一次横向滚动发生的时刻（ms；0 = 从没发生）。 + * + * 🔴 存在的理由（用户 2026-10-15 明确要求）： + * 「不是在任何地方左滑都会出抽屉，而是在原来的页面上没有左滑右滑功能的时候， + * 左滑右滑才会出来抽屉。否则，如果页面上有左滑右滑的组件， + * 它就应该先优先响应这个组件。」 + * + * 抽屉的横滑是 `parallelGesture`（**并行**识别），它**不管内容区在干什么** + * 都会一起触发 ⇒ 在标签条上横滑时"一不小心就把抽屉滑出来"。 + * + * ⇒ 做法：横滑组件（标签条 / 看板筛选条 / 账本切换条 / 日历格）在自己滚动时 + * **打一个时间戳**；抽屉在手势结束时看"刚刚有没有横滑在为"， + * 有就让位、不开抽屉。 + * + * ⚠️ 用**时间戳**而不是布尔标记： + * 横滑结束时并不知道"用户接下来不会再滑了"， + * 用"最近 N 毫秒内发生过横滑"来判定更稳（见 `fbMarkHScroll`）。 + * ⚠️ 不加 `@Trace`：它不参与渲染，只是内部判据。 + */ + hScrollAt: number = 0; + + /** + * 🔴 v55：**请求回到登录页**（登出 / 更换服务器时由设置页置位）。 + * + * 为什么用状态位而不是"让设置页自己 push 一个页面"： + * 本应用是**单页 + 模块分发**（`Index.moduleContent()`）， + * 没有路由栈 —— 登录页是 `Index.build()` 里的一个分支。 + * ⇒ 想回到它，只能"把这个分支的判据改掉"。 + * ⚠️ 由 `Index.build()` 读；登录成功 / 用户选"先不登录"时**必须**复位， + * 否则下次渲染又会弹回登录页（死循环）。 + */ + @Trace needLogin: boolean = false; + + /** + * 🔴 v55：回到登录页时**从第几步开始**（0 = 自动判断）。 + * + * `1` = 强制从"填服务器地址"开始（用户点了「更换服务器」）； + * `2` = 直接从"输账号密码"开始（用户只是「退出登录」，地址还留着）； + * `0` = 按本地有没有地址自动决定（正常启动）。 + * + * ⚠️ 为什么必须是**状态位**而不是给登录页传个参数： + * 登录页的 `aboutToAppear` 只在组件**被创建**时跑一次； + * 本应用里它被 `if` 分支复用，状态位比"重建时参数对不对"更可控。 + */ + @Trace loginStartStep: number = 0; + + /** + * 🔴 v57（用户 2026-10-17）：「这台设备已经被退出登录」之类的原因。 + * + * 由启动校验 / 401 拦截置位，登录页顶部原样显示 —— + * 用户必须知道"为什么突然要我重新登录"，否则只会觉得 App 坏了。 + */ + @Trace lockReason: string = ''; + + /** + * 🔴 v57：离线超过 24 小时 → **锁界面但不删令牌**。 + * + * 用户原话：「离线超过 24 个小时就硬退出。」 + * ⚠️ 与 `needLogin` 分开是**刻意的**（见 `FbSession` 文件头）： + * 这里只是"先别看了，联网确认一下"，一联网校验通过就自动恢复， + * **不需要重新输密码**；只有被踢/退出登录才走 `needLogin`。 + */ + @Trace offlineLocked: boolean = false; + /** 当前模块的账号（便捷取用，避免页面里到处写 this.app.session.me） */ me(): FbAccount { return this.session.me; @@ -54,6 +172,36 @@ export class FbAppState { switchModule(key: string): void { this.activeModule = key; this.drawerOpen = false; + // 🔴 换页要**复位滚动累积**：那是跨页面共享的， + // 不清零的话下一页第一次轻滑就会"立刻收起悬浮栏"（其实用户什么都没做）。 + this.resetScroll(); + } + + /** 有浮层开着吗（悬浮栏据此让位） */ + sheetOpen(): boolean { + return this.sheetCount > 0; + } + + /** 开一个浮层（计数 +1） */ + openSheet(): void { + this.sheetCount += 1; + } + + /** 关一个浮层（计数 -1，不会低于 0） */ + closeSheet(): void { + this.sheetCount = this.sheetCount > 0 ? this.sheetCount - 1 : 0; + } + + /** + * 复位滚动累积（换模块、回到顶部时调）。 + * + * ⚠️ 用方法而不是让调用方直接写 `app.scrollAcc = 0`： + * 复位时**同时把悬浮栏放出来** —— 换到新模块时它必须是可见的， + * 否则会出现"进了新页面、底部入口却是收起来的"这种莫名其妙的状态。 + */ + resetScroll(): void { + this.scrollAcc = 0; + this.dockHidden = false; } } diff --git a/entry/src/main/ets/components/Drawer.ets b/entry/src/main/ets/components/Drawer.ets index 2b21844..b8121d1 100644 --- a/entry/src/main/ets/components/Drawer.ets +++ b/entry/src/main/ets/components/Drawer.ets @@ -7,8 +7,16 @@ * * 三条形态，同一个组件： * · **常驻侧栏**（宽屏：窗口短边 ≥ 600vp）—— 固定在左边，占 264vp； - * · **左滑出层**（手机，从左边缘向右滑）—— 覆盖内容，点遮罩或选中项即收起； - * · **右滑出层**（手机，从右边缘向左滑）—— 同上，只是贴右边（右手单手持机顺手）。 + * · **左滑出层**（手机）—— 覆盖内容，点遮罩或选中项即收起； + * · **右滑出层**（手机）—— 同上，只是贴右边（右手单手持机顺手）。 + * + * 🔴 抽屉**从哪边出**由「**握姿**」决定（用户 2026-10-16 第 4 条）： + * 左手握 → `app.drawerSide = 'left'`；右手握 → `'right'`。 + * 逻辑在 `common/FbGrip.ets`（用官方 `multimodalAwareness.motion` 的 + * `HoldingHandStatus`），不在本组件里。 + * 🔴 **打开方式只有一种：点顶栏左侧的家书图标**（`pages/Index.ets`）。 + * ⚠️ **横向滑动开抽屉的旧手势已删**（用户要求）—— 它与页面里的横滑、 + * 与"点人名拨号"在 `parallelGesture` 下**并行触发**，冲突无法根治。 * * ⚠️ 这里**不用 SideBarContainer**：它的控制按钮与「滑出」是内建的一套， * 样式（图标、位置、宽度动画）很难与家书的视觉统一，且它只能有一层侧栏 @@ -21,6 +29,16 @@ import { FbAppState, fbAppState } from '../common/Store'; import { FbModuleDef, FB_MODULES, fbDefaultNavModules, fbThemeVars } from '../model/Modules'; import { FbAvatar } from './Widgets'; +/** + * 底部手势条区域的留白（vp）。 + * + * 🔴 应用已开 `setWindowLayoutFullScreen(true)`（见 EntryAbility）： + * 内容会铺到屏幕最下沿，而**系统手势条已隐藏**（用户要求"下面没有任何的条"） + * ⇒ 手势区**没有任何视觉提示**，贴着底边的元素很容易被"从下往上滑"误触。 + * 这里留一点缓冲，是给"手势区"而不是给"某个控件"。 + */ +const FB_BOTTOM_GAP: number = 16; + @ComponentV2 export struct FbDrawer { /** 全局状态（父组件传入，保证与页面同一份实例） */ @@ -60,7 +78,7 @@ export struct FbDrawer { } .width('100%') // 顶部内边距 = 状态栏高度 + 一点呼吸，保证不压状态栏 - .padding({ left: 18, right: 12, top: 16, bottom: 10 }) + .padding({ left: 18, right: 12, top: 16 + this.app.statusBarH, bottom: 10 }) } /** 一个模块行 */ @@ -112,29 +130,52 @@ export struct FbDrawer { .color(FbColors.line2) .margin({ bottom: 6 }) - this.footerRow('fb_ic_bell', '通知消息', this.app.unread > 0 ? this.app.unread.toString() : '') - this.footerRow('fb_ic_user', '个人设置', '') - this.footerRow('fb_ic_lock', '修改密码', '') + this.footerRow('fb_ic_bell', '通知消息', + this.app.unread > 0 ? this.app.unread.toString() : '', '__notifications') + this.footerRow('fb_ic_user', '个人设置', '', '__settings') + // ⚠️ 下面两项端上**还没做页面**，传空 route ⇒ 灰显、不可点。 + // 别给它们绑 `__password` / `__system` —— Index.ets 没这两个分支， + // 点下去是**空白页**，比"点不动"更让人困惑。 + this.footerRow('fb_ic_lock', '修改密码', '', '') if (this.app.session.me.role === 'admin') { - this.footerRow('fb_ic_gear', '系统设置', '') + this.footerRow('fb_ic_gear', '系统设置', '', '') } } .width('100%') - .padding({ left: 12, right: 12, bottom: 10 }) + // 🔴 bottom 给底部**手势条区域**留一点（全屏布局下抽屉会铺到屏幕最下沿， + // 底部这两行若贴着边，手指从下往上滑时容易误触到系统手势）。 + .padding({ left: 12, right: 12, bottom: 10 + FB_BOTTOM_GAP }) } - /** 底部一行 */ + /** + * 底部一行（通知消息 / 个人设置 / 修改密码 / 系统设置）。 + * + * 🔴 必须带 `route` 并绑 onClick —— 之前这四行**根本没有点击处理**， + * 界面上是个死按钮（点下去毫无反应）。 + * 排查记录：点「个人设置」后仍停在首页，看界面树发现该元素 + * `clickable=false` 且整行没有任何可点击祖先 —— 就是这个原因。 + * ⚠️ 与模块项（`moduleRow`）不同：这四项的路由 key 是 `__xxx` 形式， + * 不是 `FB_MODULES` 里的模块，走同一个 `switchModule` 分发 + * （Index.ets 里用 `activeModule === '__settings'` 渲染对应页面）。 + * + * ⚠️ `route` 传空串表示"**这个页面还没做**" ⇒ 不绑 onClick，且文字降为灰、 + * 保持不可点。为什么不给它绑个假跳转：那会跳到**空白页** + * （Index.ets 里没有对应分支），比"点了没反应"更让人困惑。 + * 现状：`__notifications` / `__settings` 已有页面； + * `修改密码` / `系统设置` **还没做**（Web 端有，端上待开发）。 + */ @Builder - footerRow(iconName: string, label: string, badge: string) { + footerRow(iconName: string, label: string, badge: string, route: string) { Row({ space: 12 }) { Image(FbIcon.ui(iconName)) .width(17) .height(17) .renderMode(ImageRenderMode.Template) - .fillColor(FbColors.muted) + // 未实现的项图标也变灰，明示"暂不可用" + .fillColor(route === '' ? FbColors.faint : FbColors.muted) Text(label) .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.ink) + .fontColor(route === '' ? FbColors.faint : FbColors.ink) .layoutWeight(1) if (badge.length > 0) { Text(badge) @@ -148,6 +189,11 @@ export struct FbDrawer { .width('100%') .padding({ left: 10, right: 10, top: 9, bottom: 9 }) .borderRadius(FbMetric.radiusS) + .onClick(() => { + if (route !== '') { + this.app.switchModule(route); // switchModule 内部会收起抽屉 + } + }) } /** 当前是否选中该模块 */ @@ -263,41 +309,22 @@ export struct FbDrawerShell { .width('100%') .height('100%') .backgroundColor(FbColors.paper) - // 🔴 横向滑动开抽屉（用户 2026-10-12 定的规则）。 + // 🔴🔴 **横向滑动开抽屉的手势已删除**（用户 2026-10-16 第 3、4 条）。 // - // ⚠️ **不要判断"起点是否贴屏幕边缘"** —— 用户实测反馈：屏幕边缘是 - // **系统手势区**（返回/侧边栏），从边缘往里滑的事件根本轮不到应用处理， - // 我们无法控制。所以判据只能是"**在应用内部水平滑动**"： - // 向右滑 → 抽屉从左边出；向左滑 → 抽屉从右边出。 - // 这样左手持机时往右划、右手持机时往左划，单手都顺。 + // 用户原话：「这个列表上左滑、右滑和点击后打电话的事件冲突了…… + // 如果实在不行，就把左滑、右滑弹出抽屉这个功能去掉吧， + // 只保留点击标题或图标后弹出抽屉的功能。」 + // 并再次强调：「**先这样做，把滑动出抽屉这个功能先去掉**， + // 因为它现在在很多地方都跟别的功能有冲突。」 // - // ⚠️ `offsetX` 的单位是 **vp**（SDK 原文 "in vp"），不要再除以 density —— - // 除一次会把位移缩到 1/3，导致阈值永远达不到、手势"看起来没生效"。 + // 历史：`parallelGesture(PanGesture)` + `fbHScrollBusy()` 的那套"让位" + // 机制（见 git 历史）**治不了根本** —— 因为 `parallelGesture` 是**并行**识别， + // 它和应用自己的横滑/点按/拨号**同时**成立，没有"谁先抢到"的机制。 + // 名册里"滑动既弹抽屉又跳拨号"就是这个并行识别的必然结果。 + // ⇒ 唯一可靠的办法是**不用横滑手势**。 // - // ⚠️ 用 `parallelGesture` 而不是 `gesture`：内容区自己还有竖向滚动 - // （以及纪念日/财务/任务的横向滚动条），用 gesture 会把它们抢掉。 - // 代价是横向滚动条扫得猛时也可能触发 —— 所以阈值给到 80vp， - // 轻扫（浏览横向列表）不会误开。 - .parallelGesture( - PanGesture({ direction: PanDirection.Horizontal, distance: 30 }) - .onActionEnd((e: GestureEvent) => { - // 宽屏下抽屉常驻，不需要手势 - if (this.app.wideLayout) { - return; - } - const dx: number = e.offsetX; // vp - // 向右滑 ⇒ 抽屉在左 - if (dx > 80) { - this.app.drawerSide = 'left'; - this.app.drawerOpen = true; - return; - } - // 向左滑 ⇒ 抽屉在右 - if (dx < -80) { - this.app.drawerSide = 'right'; - this.app.drawerOpen = true; - } - }) - ) + // 抽屉入口保留在：**顶栏左侧的家书图标**（`pages/Index.ets` 的 `topBarSlot`）。 + // 抽屉从哪边出，改由「**握姿**」决定（见 `FbGripWatcher` / `app.drawerSide`）： + // 左手握 → 从左边出；右手握 → 从右边出。 } } \ No newline at end of file diff --git a/entry/src/main/ets/components/FbCalOptionRow.ets b/entry/src/main/ets/components/FbCalOptionRow.ets new file mode 100644 index 0000000..c64e022 --- /dev/null +++ b/entry/src/main/ets/components/FbCalOptionRow.ets @@ -0,0 +1,72 @@ +/** + * 家书 FamilyBook · 设置里的「单选行」（鸿蒙端） + * + * 🔴🔴 为什么必须是**组件**而不是 `@Builder`（用户 2026-10-16 报的真 bug）： + * 「设置里面这个"**默认视图**"，**都没法点**，也没有办法设置。」 + * 根因：原来是 `FbCalSettingsSheet.radioRow(label, hint, on: boolean, onTap)` —— + * **`@Builder` 的值类型参数（boolean）不参与状态观察** + * （SDK 规则 `r/quick-rules/05-state.md`：按值传递「状态变化刷新 ❌」）。 + * ⇒ 点一下 `this.view` 确实变了、`FB_CAL_SETTINGS.setView()` 也确实写了， + * 但**打勾 ✓ 与高亮底色的那份子树不重建** ⇒ 看着"点了没反应"。 + * 本项目已在 `FbTagChip` 上踩过同一个坑（见那份文件头），这里照同样办法修。 + * + * ⚠️ 顺带说明：ForEach 的 key **不用**带选中态 —— 只要这一片是 + * `@ComponentV2` + `@Param`，`active` 变了它自己就会重建。 + * （`FbTagChip` 的 key 也只是标签名。） + */ + +import { FbColors, FbMetric } from '../common/Theme'; +import { FbDot } from './Widgets'; + +@ComponentV2 +export struct FbCalOptionRow { + /** 主文字 */ + @Param label: string = ''; + /** 副说明（小字；空则不占位） */ + @Param hint: string = ''; + /** 是否选中（**必须由父组件算好传进来**） */ + @Param active: boolean = false; + /** 左侧色点（日历本那几行用它；空则不画） */ + @Param dotColor: string = ''; + /** 被点击 */ + @Event onPick: () => void = (): void => { + }; + + build() { + Row({ space: 10 }) { + if (this.dotColor !== '') { + FbDot({ dia: 10, fillC: this.dotColor }) + } + Column({ space: 2 }) { + Text(this.label) + .fontSize(FbMetric.fontSmall) + .fontColor(this.active ? '#4A7C82' : FbColors.ink) + .fontWeight(this.active ? FontWeight.Medium : FontWeight.Normal) + .maxLines(2) + if (this.hint !== '') { + Text(this.hint) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .maxLines(2) + } + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + + Text(this.active ? '✓' : '') + .fontSize(FbMetric.fontSmall) + .fontColor('#4A7C82') + .width(20) + .textAlign(TextAlign.Center) + } + .width('100%') + .padding({ top: 10, bottom: 10, left: 12, right: 12 }) + .backgroundColor(this.active ? '#EAF2F2' : FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .margin({ bottom: 8 }) + .alignItems(VerticalAlign.Center) + .onClick((): void => { + this.onPick(); + }) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbCalSettingsSheet.ets b/entry/src/main/ets/components/FbCalSettingsSheet.ets new file mode 100644 index 0000000..50f2c19 --- /dev/null +++ b/entry/src/main/ets/components/FbCalSettingsSheet.ets @@ -0,0 +1,253 @@ +/** + * 家书 FamilyBook · 日程设置浮层（鸿蒙端） + * + * 用户 2026-10-15：「在新建的那个地方，**右侧那加一个设置按钮**， + * 点进去之后实际上就是**对这个日程的设置**。」 + * 用户 2026-10-16：「设置里面这个"**默认视图**"，都没法点，也没有办法设置。」 + * + * 对齐 SyncCalendar 设置页里**与日程显示相关**的那几项 + * （它那一页还有一堆 DAV 账号/镜像/系统的设置，那些家书用不上，不抄）： + * · **默认视图**：月 / 周 / 列表 + * · **日程显示方式**：时间轴 / 列表 + * · **新建日程落到哪本日历**（默认日历本） + * · **哪些日历本可见**（逐本开关） + * + * 🔴🔴 v53 修的真 bug：「默认视图点不动」 + * 根因：单选行原来是 `@Builder radioRow(type, hint, on: boolean, onTap)` —— + * **`@Builder` 的值类型参数不参与状态观察** + * （SDK 规则 `r/quick-rules/05-state.md`）⇒ 点一下 `this.view` 变了、 + * 服务端也写了，但打勾/高亮那份子树**不重建** ⇒ 看着"点了没反应"。 + * ⇒ 改成 `FbCalOptionRow`（`@ComponentV2` + `@Param`）。 + * + * ⚠️ 这些设置**只存在本机**（`FbCalSettings` / preferences）， + * 不上传服务端 —— 它是"这台设备上的人怎么看日历"，不是共享数据。 + */ + +import { FbColors, FbMetric } from '../common/Theme'; +import { FbCalBook } from '../model/Types'; +import { FB_CAL_SETTINGS, FbCalView, FbCalStyle } from '../data/FbCalSettings'; +import { FbCalOptionRow } from './FbCalOptionRow'; +import { FbDot } from './Widgets'; + +const FB_SHEET_BOTTOM_GAP: number = 16; + +/** 视图选项 */ +interface FbViewOpt { + key: FbCalView; + label: string; + hint: string; +} + +const VIEW_OPTS: FbViewOpt[] = [ + { key: 'month', label: '月视图', hint: '看整月，点某天看当天日程' }, + { key: 'week', label: '周视图', hint: '看这一周，一周里的安排一目了然' }, + { key: 'agenda', label: '列表视图', hint: '从今天往后排，按天分组' } +]; + +/** 显示方式选项 */ +interface FbStyleOpt { + key: FbCalStyle; + label: string; + hint: string; +} + +const STYLE_OPTS: FbStyleOpt[] = [ + { key: 'timeline', label: '时间轴', hint: '按小时排布，一眼看出时间分布' }, + { key: 'list', label: '列表', hint: '一条一行，看得更清楚' } +]; + +@ComponentV2 +export struct FbCalSettingsSheet { + /** 日历本（可见性开关要列出来） */ + @Param books: FbCalBook[] = []; + /** 关掉 */ + @Event onClose: () => void = (): void => { + }; + /** + * 设置变了（父页面据此重新渲染 —— 比如切换视图后马上生效）。 + */ + @Event onChanged: () => void = (): void => { + }; + + @Local view: FbCalView = 'month'; + @Local style: FbCalStyle = 'timeline'; + @Local bookId: number = 0; + + aboutToAppear(): void { + this.view = FB_CAL_SETTINGS.getView(); + this.style = FB_CAL_SETTINGS.getStyle(); + this.bookId = FB_CAL_SETTINGS.getBookId(); + } + + /** 某一本当前是否可见 */ + private visibleOf(id: number): boolean { + return FB_CAL_SETTINGS.isVisible(id); + } + + /** 视图 key → 中文（给"当前：xx"那行用） */ + private viewWord(v: FbCalView): string { + if (v === 'week') { return '周视图'; } + if (v === 'agenda') { return '列表视图'; } + return '月视图'; + } + + private styleWord(s: FbCalStyle): string { + return s === 'list' ? '列表' : '时间轴'; + } + + @Builder + sectionTitle(t: string) { + Text(t) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .margin({ top: 4 }) + } + + build() { + // FB_WRAP_CENTER：把卡片**垂直居中**（用户 2026-10-16 要求：浮在屏幕中间）。 + // ⚠️ 居中放在**组件内部**做，而不是改宿主的 Stack 对齐 —— + // 宿主 Stack 里还有别的子元素（日程页的悬浮 ＋），改对齐会连带挪走它们。 + // ⚠️ 外层铺满 + Center；内层仍是那张 92% 宽的圆角卡。 + Column() { + Column({ space: 0 }) { + // ---- 标题栏 ---- + Row({ space: 12 }) { + Column({ space: 2 }) { + Text('日程设置') + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + // 🔴 把"当前是什么"直接写在标题下面 —— + // 用户点完一眼就能确认生效了（不用去几行里找哪颗打了勾） + Text('当前：' + this.viewWord(this.view) + ' · ' + this.styleWord(this.style)) + .fontSize(FbMetric.fontTiny) + .fontColor('#4A7C82') + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + + Text('完成') + .fontSize(FbMetric.fontSmall) + .fontColor('#4A7C82') + .padding({ left: 12, right: 12, top: 6, bottom: 6 }) + .onClick((): void => { + this.onClose(); + }) + } + .width('100%') + .alignItems(VerticalAlign.Center) + + Scroll() { + Column({ space: 6 }) { + // ---- 默认视图 ---- + this.sectionTitle('打开的默认视图') + ForEach(VIEW_OPTS, (o: FbViewOpt) => { + // 🔴 用**组件**而不是 @Builder —— @Builder 的值类型参数不参与观察， + // 点了不会重建（这正是"默认视图点不动"的根因） + FbCalOptionRow({ + label: o.label, + hint: o.hint, + active: this.view === o.key, + onPick: (): void => { + this.view = o.key; + FB_CAL_SETTINGS.setView(o.key); + this.onChanged(); + } + }) + }, (o: FbViewOpt): string => 'vo_' + o.key) + + // ---- 显示方式 ---- + this.sectionTitle('日程怎么显示') + ForEach(STYLE_OPTS, (o: FbStyleOpt) => { + FbCalOptionRow({ + label: o.label, + hint: o.hint, + active: this.style === o.key, + onPick: (): void => { + this.style = o.key; + FB_CAL_SETTINGS.setStyle(o.key); + this.onChanged(); + } + }) + }, (o: FbStyleOpt): string => 'so_' + o.key) + + // ---- 默认日历本 ---- + if (this.books.length > 0) { + this.sectionTitle('新建日程默认加入') + ForEach(this.books, (b: FbCalBook) => { + if (b.canWrite) { + FbCalOptionRow({ + label: b.name, + hint: '', + active: this.bookId === b.id, + dotColor: b.color, + onPick: (): void => { + this.bookId = b.id; + FB_CAL_SETTINGS.setBookId(b.id); + this.onChanged(); + } + }) + } + }, (b: FbCalBook): string => 'db_' + b.id.toString()) + + // ---- 哪些日历本可见 ---- + this.sectionTitle('显示哪些日历本') + ForEach(this.books, (b: FbCalBook) => { + // ⚠️ 这里**不用** `FbCalOptionRow`（那个是"单选、带打勾"的行）； + // 可见性是**独立开关**，一行配一个 Toggle 更直观。 + Row({ space: 10 }) { + FbDot({ dia: 10, fillC: b.color }) + Text(b.name) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .layoutWeight(1) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + Toggle({ type: ToggleType.Switch, isOn: this.visibleOf(b.id) }) + .selectedColor(b.color) + .onChange((on: boolean): void => { + FB_CAL_SETTINGS.setVisible(b.id, on); + this.onChanged(); + }) + } + .width('100%') + .padding({ top: 6, bottom: 6, left: 12, right: 12 }) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .margin({ bottom: 8 }) + .alignItems(VerticalAlign.Center) + }, (b: FbCalBook): string => 'vb_' + b.id.toString()) + } + + Text('这些设置只存在这台手机上，不会同步给别人。') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .margin({ top: 8 }) + } + .width('100%') + .padding({ top: 14 }) + } + .layoutWeight(1) + .width('100%') + .scrollBar(BarState.Off) + .align(Alignment.TopStart) + } + // 🔴 用户 2026-10-16：「它应该弹出一个**圆角的、浮在上面的卡片**…… + // **不要让它左右充满整个屏幕，下面也不要挨着屏幕**， + // 而是放在**屏幕中间**，采用**圆角浮窗**式的形式。」 + // ⇒ 不再贴底满宽：左右留边、四角圆角、垂直居中（由宿主的 Stack 对齐）。 + .width('92%') + .constraintSize({ maxHeight: '72%' }) + .padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP }) + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + .alignItems(HorizontalAlign.Start) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + .hitTestBehavior(HitTestMode.Transparent) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbCinemaSheet.ets b/entry/src/main/ets/components/FbCinemaSheet.ets new file mode 100644 index 0000000..6871eee --- /dev/null +++ b/entry/src/main/ets/components/FbCinemaSheet.ets @@ -0,0 +1,158 @@ +/** + * 家书 FamilyBook · 影院列表浮层（鸿蒙端） + * + * 观影模块的"影院管理"入口（Web 端在观影页的设置里）。 + * + * 🔴 为什么影院**不占抽屉里的位置**： + * 它不是独立模块，是"观影"的一部分 —— 一家影院只有"在哪、 + * 叫什么、在那看过几部"这三个属性，独立成一页太空。 + * ⇒ 做成观影页里的浮层（与详情、设置同一套交互）。 + * + * ⚠️ 数据来自**本地库**（观影同步时一起落库的 `cinemas` 表）， + * 不是现拉接口 —— 见 `FbMovieRepo.cinemaList()` 的说明。 + */ + +import { FbColors, FbMetric } from '../common/Theme'; +import { FbCinemaItem } from '../data/FbMovieRepo'; + +/** + * 贴底卡片的手势区缓冲（vp）。 + * + * 🔴 应用开了全屏布局且**隐藏了系统手势条**（见 EntryAbility）—— + * 手势区不再有任何视觉提示，贴底的卡片必须自己让出这一段， + * 否则最后一排按钮会被"从下往上滑"误触。 + */ +const FB_SHEET_BOTTOM_GAP: number = 16; + + +@ComponentV2 +export struct FbCinemaSheet { + /** 影院列表 */ + @Param cinemas: FbCinemaItem[] = []; + /** 关闭回调 */ + @Event onClose: () => void = (): void => { + }; + + build() { + // FB_WRAP_CENTER：把卡片**垂直居中**（用户 2026-10-16 要求：浮在屏幕中间）。 + // ⚠️ 居中放在**组件内部**做，而不是改宿主的 Stack 对齐 —— + // 宿主 Stack 里还有别的子元素（日程页的悬浮 ＋），改对齐会连带挪走它们。 + // ⚠️ 外层铺满 + Center；内层仍是那张 92% 宽的圆角卡。 + Column() { + Column({ space: 0 }) { + // ---- 标题 ---- + Row() { + Column({ space: 2 }) { + Text('影院') + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Text(this.cinemas.length.toString() + ' 家 · 按名字排序') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + + Text('关闭') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .padding({ left: 12, right: 12, top: 6, bottom: 6 }) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.onClose(); + }) + } + .width('100%') + .alignItems(VerticalAlign.Center) + + Divider() + .color(FbColors.line) + .margin({ top: 12, bottom: 4 }) + + // ---- 列表 ---- + // ⚠️ 用 List 而不是 ForEach 堆在 Column 里：影院可能几十家， + // List 才会**按需渲染**（进视口才建），Column 会一次全建。 + if (this.cinemas.length === 0) { + Text('还没有影院。同步观影记录后，去过的地方会自动出现在这里。') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + .width('100%') + .padding({ top: 32, bottom: 32, left: 12, right: 12 }) + .textAlign(TextAlign.Center) + } else { + List({ space: 0 }) { + ForEach(this.cinemas, (c: FbCinemaItem, idx: number) => { + ListItem() { + Column({ space: 0 }) { + Row({ space: 12 }) { + // 色点：每家影院一个色（与 Web 端一致，便于在别处一眼认出来） + Column() + .width(10) + .height(10) + .backgroundColor(c.color) + .borderRadius(5) + Column({ space: 3 }) { + Row({ space: 8 }) { + Text(c.name) + .fontSize(FbMetric.fontBody) + .fontColor(FbColors.ink) + .maxLines(1) + if (c.movieCount > 0) { + Text(c.movieCount.toString() + ' 部') + .fontSize(10) + .fontColor(FbColors.faint) + } + } + .alignItems(VerticalAlign.Center) + + // 场所 / 地址（有才显示） + if (c.place !== '' || c.address !== '') { + Text(c.place !== '' ? c.place : c.address) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + } + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + } + .width('100%') + .padding({ left: 4, right: 4, top: 11, bottom: 11 }) + .alignItems(VerticalAlign.Center) + + if (idx < this.cinemas.length - 1) { + Divider() + .strokeWidth(0.5) + .color(FbColors.line) + } + } + .width('100%') + } + }, (c: FbCinemaItem): string => 'cin_' + c.id.toString()) + } + .width('100%') + .layoutWeight(1) + .scrollBar(BarState.Off) + .edgeEffect(EdgeEffect.Spring) + } + } + // 🔴 用户 2026-10-16：「它应该弹出一个**圆角的、浮在上面的卡片**…… + // **不要让它左右充满整个屏幕，下面也不要挨着屏幕**， + // 而是放在**屏幕中间**，采用**圆角浮窗**式的形式。」 + // ⇒ 不再贴底满宽：左右留边、四角圆角、垂直居中（由宿主的 Stack 对齐）。 + .width('92%') + .constraintSize({ maxHeight: '72%' }) + .padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP }) + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + .alignItems(HorizontalAlign.Start) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + .hitTestBehavior(HitTestMode.Transparent) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbDayEventPanel.ets b/entry/src/main/ets/components/FbDayEventPanel.ets new file mode 100644 index 0000000..7ce7903 --- /dev/null +++ b/entry/src/main/ets/components/FbDayEventPanel.ets @@ -0,0 +1,182 @@ +/** + * 家书 FamilyBook · 「某一天的日程」面板（鸿蒙端） + * + * 日程页里"日历下方 / 周条下方 / 列表里某天"共用的那一块。 + * + * 🔴🔴 为什么必须是**组件**而不是 `@Builder`（用户 2026-10-16 报的真 bug）： + * 「你在日历上点击任何一个地方，**下面的日程都不变**。」 + * 根因：原来是 `@Builder dayPanel(iso: string)` —— + * **`@Builder` 的值类型参数不参与状态观察** + * （SDK 规则 `r/quick-rules/05-state.md`：按值传递「状态变化刷新 ❌」； + * 本项目已在 `FbTagChip` 上踩过同一个坑，见那份的文件头）。 + * ⇒ 点格子后 `pickedIso` 确实变了、`eventsOf()` 也能算对， + * 但**已经建好的那份 Builder 子树不会重建** ⇒ 看起来"下面不变"。 + * ⇒ 改成 `@ComponentV2` + `@Param`：`@Param` **是参与观察的**， + * 父组件传进来的日期/条目一变，这一整块就重建。 + * + * ⚠️ 父组件必须把**算好的条目**传进来（`events`）， + * 而不是传日期让本组件自己去查 —— 组件拿不到父组件的筛选状态。 + * （传 `events` 还有个好处：每次都是新数组引用 ⇒ 一定触发重建。） + */ + +import { FbColors, FbMetric } from '../common/Theme'; +import { FbCalEvent } from '../model/Types'; +import { FbCalStyle } from '../data/FbCalSettings'; +import { FbTimelineUtil } from '../common/FbTimeline'; +import { FbDayTimeline } from './FbDayTimeline'; +import { FbEmptyBox } from './Widgets'; + +@ComponentV2 +export struct FbDayEventPanel { + /** 面板标题（`10月15日 周三`） */ + @Param label: string = ''; + /** 这一天的条目（**父组件已筛选排序好的**） */ + @Param events: FbCalEvent[] = []; + /** 显示方式：时间轴 / 列表（来自日程设置） */ + @Param style: FbCalStyle = 'timeline'; + /** 是不是今天（时间轴画红线用） */ + @Param isToday: boolean = false; + /** 当前时刻（当天第几分钟） */ + @Param nowMin: number = 0; + /** + * 面板头是否显示。 + * + * 🔴 v54：首页复用了本组件（用户 2026-10-16：「把**今天那个块**拿到首页上来」）， + * 而首页自己有一个 `FbSectionTitle`（"今天的日程 · N 条"）—— + * 两个头叠在一起会重复。⇒ 首页传 `false` 把内置头关掉。 + * ⚠️ 日程页保持 `true`（那里没有别的标题）。 + */ + @Param showHead: boolean = true; + /** + * 空态的提示语。空串 = 用默认那句（日程页：点右下角 ＋ 加一条）。 + * + * ⚠️ 首页**不能**说"点右下角的 ＋" —— 那是日程页的悬浮按钮， + * 首页没有它，说了等于骗人。 + */ + @Param emptyHint: string = ''; + /** + * 空态的标题。空串 = `这天没有安排`。 + * ⚠️ 日程页的 `label` 是具体日期（`10月15日 周三`），说"这天"是对的； + * 首页说的是"今天"，所以那边传 `今天没有安排`。 + */ + @Param emptyTitle: string = ''; + /** 点一条日程 */ + @Event onPick: (e: FbCalEvent) => void = (e: FbCalEvent): void => { + }; + + build() { + Column({ space: 0 }) { + // ---- 面板头（首页会关掉它，见 showHead 的说明）---- + if (this.showHead) { + Row() { + Text(this.label) + .fontSize(FbMetric.fontSmall) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Blank() + Text(this.events.length.toString() + ' 条') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } + .width('100%') + .padding({ left: 4, right: 4, top: 12, bottom: 8 }) + } + + // ---- 主体 ---- + if (this.events.length === 0) { + Column() { + FbEmptyBox({ + title: this.emptyTitle !== '' ? this.emptyTitle : '这天没有安排', + hint: this.emptyHint !== '' ? this.emptyHint : '点右下角的 ＋ 加一条日程', + icon: $r('app.media.fb_ic_calendar') + }) + } + .width('100%') + .padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: 6 }) + } else if (this.style === 'timeline') { + // ---- 时间轴：按真实时间铺在 0-24 小时格子上 ---- + FbDayTimeline({ + timeline: FbTimelineUtil.build(this.events, this.isToday, this.nowMin), + isToday: this.isToday, + nowMin: this.nowMin, + onPick: (e: FbCalEvent): void => { + this.onPick(e); + } + }) + .width('100%') + .padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: 8 }) + } else { + // ---- 列表：一条一行 ---- + Column({ space: 0 }) { + ForEach(this.events, (ev: FbCalEvent, idx: number) => { + this.eventRow(ev, idx === this.events.length - 1) + }, (ev: FbCalEvent, idx: number): string => + 'ev_' + this.label + '_' + idx.toString() + '_' + ev.id.toString()) + } + .width('100%') + .padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: 6 }) + } + } + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 12 }) + .alignItems(HorizontalAlign.Start) + } + + /** 列表模式的一条（左侧色条 + 标题 + 时间 + 地点 + 日历本名） */ + @Builder + eventRow(ev: FbCalEvent, isLast: boolean) { + Column({ space: 0 }) { + Row({ space: 10 }) { + Row() + .width(4) + .height(38) + .backgroundColor(ev.color) + .borderRadius(2) + + Column({ space: 3 }) { + Text(ev.title !== '' ? ev.title : '(无标题)') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .maxLines(2) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + Row({ space: 6 }) { + Text(ev.allDay ? '全天' + : (ev.endTime !== '' ? (ev.time + ' - ' + ev.endTime) : ev.time)) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + if (ev.place !== '') { + Text('📍' + ev.place) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .maxLines(1) + .layoutWeight(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + } + } + .width('100%') + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + + Text(ev.calName) + .fontSize(10) + .fontColor(ev.color) + .maxLines(1) + } + .width('100%') + .padding({ top: 10, bottom: 10 }) + .alignItems(VerticalAlign.Center) + .onClick((): void => { + this.onPick(ev); + }) + + if (!isLast) { + Divider() + .color(FbColors.line2) + .margin({ left: 14 }) + } + } + .width('100%') + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbDayTimeline.ets b/entry/src/main/ets/components/FbDayTimeline.ets new file mode 100644 index 0000000..174487a --- /dev/null +++ b/entry/src/main/ets/components/FbDayTimeline.ets @@ -0,0 +1,476 @@ +/** + * 家书 FamilyBook · 日程「时间轴」视图（鸿蒙端） + * + * 🔴 用户 2026-10-16：「**没有时间轴展示**……你这不是说让你把 SyncCalendar + * 里面的功能搬过来吗？」 + * ⇒ 照 SyncCalendar 的 `DayTimelineView`（在 `Index.ets` 里）移植： + * 左侧小时刻度 + 右侧**三层堆叠**渲染。 + * + * 为什么是"三层堆叠"（照 SyncCalendar 的设计，别改）： + * · 第 1 层 **整点网格**：每小时一格、格底一条灰线； + * · 第 2 层 **日程色块**：按冲突组分列、纵向用 `Blank` 定位； + * · 第 3 层 **当前时间红线**：浮在最上面。 + * ⚠️ 三层尺寸与分格完全一致、上层透明 ⇒ + * **色块不会被整点线或红线"切开"**，红线也永远压在最上面。 + * 如果图省事把线直接画进日程层，一条日程就会被切成两段。 + * + * 🔴 为什么是"组件"而不是 `@Builder`： + * `@Builder` 的**值类型参数不参与状态观察**（见 `FbTagChip.ets` 的说明、 + * SDK 规则 `r/quick-rules/05-state.md`）—— 本项目的日程页正是因此 + * 出现"点日历下面的日程不变"。这里用 `@ComponentV2` + `@Param`， + * `timeline` 一变整棵子树就重建。 + */ + +import { FbColors, FbMetric } from '../common/Theme'; +import { FbCalEvent } from '../model/Types'; +import { + FbTimelineData, FbTimeBlock, FbTimeGroup, FbTimeRow, FbTimelineUtil, FbViewRange +} from '../common/FbTimeline'; + +/** 「当前时间红线」的颜色（照 SyncCalendar：系统红） */ +const FB_NOW_RED: string = '#FF3B30'; + +@ComponentV2 +export struct FbDayTimeline { + /** 一天的布局（**必须由父组件按选中日期算好传进来**） */ + @Param timeline: FbTimelineData = new FbTimelineData(); + /** 是不是"今天"（决定要不要画红线） */ + @Param isToday: boolean = false; + /** 当前时刻（当天第几分钟） */ + @Param nowMin: number = 0; + /** 点一条日程 */ + @Event onPick: (e: FbCalEvent) => void = (e: FbCalEvent): void => { + }; + + /** 1 小时的高度（vp） */ + private hourUnit: number = FbTimelineUtil.HOUR_UNIT; + /** 极短色块的可读高度下限（一行"标题 + 时间"） */ + private minBlockVp: number = 16; + /** 能放下两行的高度门槛 */ + private twoLineVp: number = 30; + /** 能放下三行的高度门槛 */ + private threeLineVp: number = 46; + + // ---- 视窗 ---- + private range(): FbViewRange { + return FbTimelineUtil.viewRange(this.timeline.blocks); + } + + private viewTop(): number { + return this.range().startHour / 24; + } + + private viewBot(): number { + return this.range().endHour / 24; + } + + /** 视窗总高（vp） */ + private viewH(): number { + const r: FbViewRange = this.range(); + return (r.endHour - r.startHour) * this.hourUnit; + } + + /** 整日高度（vp） */ + private totalH(): number { + return this.hourUnit * 24; + } + + /** 视窗内的小时刻度 */ + private hourLabels(): number[] { + const r: FbViewRange = this.range(); + const out: number[] = []; + for (let h = r.startHour; h < r.endHour; h++) { + out.push(h); + } + return out; + } + + private hourText(h: number): string { + return h < 10 ? ('0' + h.toString() + ':00') : (h.toString() + ':00'); + } + + /** 当前小时是否高亮（仅今天） */ + private isNowHour(h: number): boolean { + return this.isToday && Math.floor(FbTimelineUtil.nowRatio(this.nowMin) * 24) === h; + } + + /** 红线是否可见（今天 + 落在视窗内） */ + private nowVisible(): boolean { + if (!this.isToday) { + return false; + } + const r: number = FbTimelineUtil.nowRatio(this.nowMin); + return r >= this.viewTop() - 0.0001 && r <= this.viewBot() + 0.0001; + } + + /** 红线距层顶的偏移（vp） */ + private nowOffsetVp(): number { + const y: number = (FbTimelineUtil.nowRatio(this.nowMin) - this.viewTop()) * this.totalH() - 1; + return y < 0 ? 0 : y; + } + + // ---- 行序列（空隙 + 冲突组）---- + + private groups(): FbTimeGroup[] { + return FbTimelineUtil.groupsOf(this.timeline.blocks); + } + + /** + * 纵向序列：只看视窗内的部分。 + * **本层只有两样东西：空隙（Blank）与冲突组行** —— + * 整点线与红线交给另外两层，所以每条日程永远是完整连续的色块。 + */ + private buildRows(): FbTimeRow[] { + const rows: FbTimeRow[] = []; + const gs: FbTimeGroup[] = this.groups(); + const top: number = this.viewTop(); + const bot: number = this.viewBot(); + const dk: string = this.range().startHour.toString() + '_' + this.range().endHour.toString(); + let cursor: number = top; + for (const g of gs) { + const gsx: number = g.startRatio > top ? g.startRatio : top; + const gex: number = g.endRatio < bot ? g.endRatio : bot; + if (gex - gsx <= 0.0002) { + continue; // 整组都在视窗外 + } + this.pushRow(rows, cursor, gsx, null, dk); + this.pushRow(rows, gsx, gex, g, dk); + cursor = gex; + } + this.pushRow(rows, cursor, bot, null, dk); + return rows; + } + + private pushRow(rows: FbTimeRow[], from: number, to: number, + g: FbTimeGroup | null, dk: string): void { + if (to - from <= 0.0002) { + return; + } + const r: FbTimeRow = new FbTimeRow(); + r.topRatio = from; + r.botRatio = to; + if (g === null) { + r.kind = 0; + r.key = 'g_' + dk + '_' + rows.length.toString() + '_' + + Math.round((to - from) * 100000).toString(); + } else { + r.kind = 1; + r.group = g; + let sig: string = ''; + for (const b of g.blocks) { + sig = sig + '_' + b.key; + } + r.key = 'b_' + dk + '_' + rows.length.toString() + sig; + } + rows.push(r); + } + + /** 某一列中、与本行窗口有交集的色块 */ + private laneBlocks(r: FbTimeRow, lane: FbTimeBlock[]): FbTimeBlock[] { + const out: FbTimeBlock[] = []; + for (const b of lane) { + const be: number = b.topRatio + b.heightRatio; + if (be > r.topRatio + 0.0001 && b.topRatio < r.botRatio - 0.0001) { + out.push(b); + } + } + return out; + } + + /** 列内第 index 个色块之前要空出的高度（vp） */ + private lanePadH(r: FbTimeRow, lane: FbTimeBlock[], index: number): number { + const arr: FbTimeBlock[] = this.laneBlocks(r, lane); + let prevEnd: number = r.topRatio; + if (index > 0) { + const p: FbTimeBlock = arr[index - 1]; + const pe: number = p.topRatio + p.heightRatio; + prevEnd = pe > r.topRatio ? pe : r.topRatio; + } + const b: FbTimeBlock = arr[index]; + const top: number = b.topRatio > r.topRatio ? b.topRatio : r.topRatio; + const d: number = (top - prevEnd) * this.totalH(); + return d < 0 ? 0 : d; + } + + /** 色块实际渲染高度（vp）：极短的尽量垫到可读高度，但不越过同列下一块 */ + private blockVp(r: FbTimeRow, lane: FbTimeBlock[], index: number): number { + const arr: FbTimeBlock[] = this.laneBlocks(r, lane); + const b: FbTimeBlock = arr[index]; + const real: number = b.heightRatio * this.totalH(); + if (real >= this.minBlockVp) { + return real; + } + let room: number = 0; + if (index + 1 < arr.length) { + room = this.lanePadH(r, lane, index + 1); + } else { + const tail: number = (r.botRatio - (b.topRatio + b.heightRatio)) * this.totalH(); + room = tail > 0 ? tail : 0; + } + const h: number = real + room; + return h > this.minBlockVp ? this.minBlockVp : h; + } + + /** 色块信息行数（按渲染高度判定） */ + private blockLines(r: FbTimeRow, lane: FbTimeBlock[], index: number, b: FbTimeBlock): number { + const h: number = this.blockVp(r, lane, index); + if (h >= this.threeLineVp && b.place !== '') { + return 3; + } + if (h >= this.twoLineVp) { + return 2; + } + return 1; + } + + /** 两行色块的第二行：`09:00 - 10:30 · 地点` */ + private blockMeta(b: FbTimeBlock): string { + if (b.place !== '') { + return b.timeText + ' · ' + b.place; + } + return b.timeText; + } + + /** 色块 key 的内容签名（内容变了必须重建，否则 ArkUI 复用旧子组件） */ + private blockSig(r: FbTimeRow, lane: FbTimeBlock[], index: number, b: FbTimeBlock): string { + return b.title.length.toString() + '_' + b.place.length.toString() + '_' + + Math.round(this.blockVp(r, lane, index)).toString(); + } + + // ============================================================ + // 三层 + // ============================================================ + + /** 第 1 层：整点网格（每小时一格，格底一条灰线） */ + @Builder + gridLayer() { + Column() { + ForEach(this.hourLabels(), (h: number) => { + Column() + .width('100%') + .height(this.hourUnit) + .border({ width: { bottom: 0.5 }, color: { bottom: FbColors.line2 } }) + .hitTestBehavior(HitTestMode.None) + }, (h: number): string => 'gd_' + h.toString()) + } + .width('100%') + .height('100%') + .hitTestBehavior(HitTestMode.None) // 装饰层：点击穿透到色块 + } + + /** 第 2 层：日程色块（冲突组分行 + 组内分列，纵向用 Blank 定位） */ + @Builder + eventLayer() { + Column() { + ForEach(this.buildRows(), (r: FbTimeRow) => { + if (r.kind === 1 && r.group !== null) { + Row() { + ForEach(r.group!.lanes, (lane: FbTimeBlock[], li: number) => { + Column() { + ForEach(this.laneBlocks(r, lane), (b: FbTimeBlock, index: number) => { + Blank().height(this.lanePadH(r, lane, index)) + Column({ space: 1 }) { + if (this.blockLines(r, lane, index, b) === 1) { + // 一行：标题 · 时间（地点放不下） + Row({ space: 4 }) { + Text(b.title) + .fontSize(10) + .fontWeight(FontWeight.Medium) + .fontColor(Color.White) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .constraintSize({ maxWidth: '50%' }) + Text(b.timeText) + .fontSize(9) + .fontColor('#E6FFFFFF') + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .constraintSize({ maxWidth: '55%' }) + } + .width('100%') + .alignItems(VerticalAlign.Center) + } else { + // 第一行：标题 + Text(b.title) + .fontSize(11) + .fontWeight(FontWeight.Medium) + .fontColor(Color.White) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .width('100%') + if (this.blockLines(r, lane, index, b) >= 3) { + Text(b.timeText) + .fontSize(9) + .fontColor('#E6FFFFFF') + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .width('100%') + Text(b.place) + .fontSize(9) + .fontColor('#B3FFFFFF') + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .width('100%') + } else { + Text(this.blockMeta(b)) + .fontSize(9) + .fontColor('#E6FFFFFF') + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .width('100%') + } + } + } + .alignItems(HorizontalAlign.Start) + .justifyContent(FlexAlign.Start) + .padding({ left: 6, right: 3, top: 2, bottom: 2 }) + .borderRadius(6) + .backgroundColor(b.color) + .clip(true) + .width('100%') + .height(this.blockVp(r, lane, index)) + .onClick((): void => { + if (b.ev !== null) { + this.onPick(b.ev); + } + }) + }, (b: FbTimeBlock, index: number): string => + 'blk_' + r.key + '_' + b.key + '_' + this.blockSig(r, lane, index, b)) + } + .layoutWeight(1) + .height('100%') + .padding({ right: 2 }) + .clip(true) + }, (lane: FbTimeBlock[], li: number): string => 'ln_' + r.key + '_' + li.toString()) + } + .width('100%') + .height((r.botRatio - r.topRatio) * this.totalH()) + .alignItems(VerticalAlign.Top) + } else { + // 空隙：纯占位 + Blank().height((r.botRatio - r.topRatio) * this.totalH()) + } + }, (r: FbTimeRow): string => r.key) + } + .width('100%') + .height('100%') + } + + /** 第 3 层：当前时间红线（浮在最上层） */ + @Builder + nowLayer() { + if (this.nowVisible()) { + Row() { + // 左侧时间文字（红线那头） + Text(FbTimelineUtil.hhmm(this.nowMin)) + .fontSize(9) + .fontColor(FB_NOW_RED) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.End) + .width(34) + Row() + .layoutWeight(1) + .height(2) + .backgroundColor(FB_NOW_RED) + Row() + .width(6) + .height(6) + .borderRadius(3) + .backgroundColor(FB_NOW_RED) + } + .width('100%') + .alignItems(VerticalAlign.Center) + .margin({ top: this.nowOffsetVp() }) + .hitTestBehavior(HitTestMode.None) + } + } + + build() { + Column({ space: 0 }) { + // ---- 全天 / 跨天：画在 0 点之前，用色块展示 ---- + if (this.timeline.allDay.length > 0) { + Column({ space: 4 }) { + ForEach(this.timeline.allDay, (e: FbCalEvent) => { + Row({ space: 6 }) { + Text('全天') + .fontSize(9) + .fontColor(Color.White) + .backgroundColor('#26000000') + .borderRadius(6) + .padding({ left: 5, right: 5, top: 1, bottom: 1 }) + Text(e.title !== '' ? e.title : '(无标题)') + .fontSize(12) + .fontWeight(FontWeight.Medium) + .fontColor(Color.White) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .layoutWeight(1) + if (e.place !== '') { + Text(e.place) + .fontSize(10) + .fontColor('#D9FFFFFF') + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .constraintSize({ maxWidth: 110 }) + } + } + .alignItems(VerticalAlign.Center) + .width('100%') + .height(26) + .padding({ left: 8, right: 8 }) + .borderRadius(8) + .backgroundColor(e.color) + .onClick((): void => { + this.onPick(e); + }) + }, (e: FbCalEvent): string => 'al_' + FbTimelineUtil.keyOf(e)) + } + .width('100%') + .padding({ bottom: 6 }) + } + + // ---- 时间轴主体 ---- + Row() { + // 左侧小时刻度 + Column() { + ForEach(this.hourLabels(), (h: number) => { + Text(this.hourText(h)) + .fontSize(10) + .fontColor(this.isNowHour(h) ? FB_NOW_RED : FbColors.faint) + .width(36) + .height(this.hourUnit) + .textAlign(TextAlign.End) + .padding({ right: 4, top: 2 }) + .border({ width: { bottom: 0.5 }, color: { bottom: FbColors.line2 } }) + }, (h: number): string => 'h' + h.toString()) + } + .width(36) + + // 右侧内容区：三层堆叠 + Stack() { + this.gridLayer() + this.eventLayer() + this.nowLayer() + } + .layoutWeight(1) + .height(this.viewH()) + .alignContent(Alignment.TopStart) + .border({ width: { left: 0.5 }, color: { left: FbColors.line2 } }) + } + .width('100%') + .alignItems(VerticalAlign.Top) + + // ---- 当天没有带时间的日程 ---- + if (!this.timeline.hasTimed && this.timeline.allDay.length === 0) { + Text('这天没有安排') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + .width('100%') + .textAlign(TextAlign.Center) + .padding({ top: 20, bottom: 20 }) + } + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbEventChip.ets b/entry/src/main/ets/components/FbEventChip.ets new file mode 100644 index 0000000..9ba8109 --- /dev/null +++ b/entry/src/main/ets/components/FbEventChip.ets @@ -0,0 +1,50 @@ +/** + * 家书 FamilyBook · 可选中胶囊片（鸿蒙端） + * + * 日程「新建/编辑」里给**重复**和**提醒**两组选项用。 + * + * 🔴🔴 为什么必须是**组件**而不是 `@Builder`（用户 2026-10-16 报的真 bug）： + * 「重复和提醒都挤在一块了……而且**重复和提醒什么的都点不了**。」 + * 根因：原来是 `FbEventEditSheet.chip(label, on: boolean, onTap)` —— + * **`@Builder` 的值类型参数（boolean）不参与状态观察** + * （SDK 规则 `r/quick-rules/05-state.md`：按值传递「状态变化刷新 ❌」）。 + * ⇒ 点一下 `this.fRepeat` / `this.fRemind` 确实改了、保存也发得出去， + * 但**选中态那份子树不重建** ⇒ 界面上没有任何反馈 ⇒ 看着"点不了"。 + * 本项目已在 `FbTagChip`、`FbCalOptionRow` 上踩过同一个坑（各见其文件头）。 + * ⇒ 统一做法：抽成 `@ComponentV2` + `@Param active`。 + * + * ⚠️ 顺带的另一处：它原来是裸放在 `Flex({wrap})` 里、**没有 margin** —— + * 项目里别处的 wrap 都写了 `.margin({ right: 8, bottom: 8 })` + * （见 `FbHomePage` 的标签云、`FbSettingsPage` 的色板）。 + * 少了 margin，两行 chip 会**贴在一起**（这正是"挤在一块"的观感来源）。 + * ⇒ margin 放在**本组件根节点**上，调用方不用再写。 + */ + +import { FbColors, FbMetric } from '../common/Theme'; + +@ComponentV2 +export struct FbEventChip { + /** 显示文字 */ + @Param label: string = ''; + /** 是否选中（**必须由父组件按状态算好传进来**） */ + @Param active: boolean = false; + /** 选中时的底色（默认用日程模块的主题色；日历本那组传本色） */ + @Param activeBg: string = '#4A7C82'; + /** 被点击 */ + @Event onPick: () => void = (): void => { + }; + + build() { + Text(this.label) + .fontSize(FbMetric.fontSmall) + .fontColor(this.active ? Color.White : FbColors.muted) + .backgroundColor(this.active ? this.activeBg : FbColors.inputBg) + .borderRadius(FbMetric.radiusPill) + .padding({ left: 12, right: 12, top: 6, bottom: 6 }) + // ⚠️ 间距放在组件内部：wrap 容器里的子项必须自己有 margin，否则会贴在一起 + .margin({ right: 8, bottom: 8 }) + .onClick((): void => { + this.onPick(); + }) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbEventEditSheet.ets b/entry/src/main/ets/components/FbEventEditSheet.ets new file mode 100644 index 0000000..c7a115b --- /dev/null +++ b/entry/src/main/ets/components/FbEventEditSheet.ets @@ -0,0 +1,908 @@ +/** + * 家书 FamilyBook · 日程新建 / 编辑浮层（鸿蒙端） + * + * 用户 2026-10-15：「我们家书的日程功能模块……跟 SyncCalendar 做得一样」。 + * + * 字段对齐 SyncCalendar 的 `EventEditPage`： + * **标题 / 全天 / 日期与时间（同一行）/ 重复 / 提醒 / 日历本 / 地点 / 备注**， + * 编辑既有日程时底部还有一颗**删除**。 + * + * 🔴 用户 2026-10-16 的两条修正： + * 1. 「**重复和提醒都挤在一块了**……而且**重复和提醒什么的都点不了**。」 + * · "点不了" = chip 曾是 `@Builder` 值参数（不参与观察）⇒ 换成 `FbEventChip` 组件； + * · "挤在一块" = 裸 `Flex({wrap})` 里的 chip **没有 margin** ⇒ + * 间距放进 `FbEventChip` 组件内部（项目别处的 wrap 也都写了 margin）。 + * 2. 「时间和日期……**放在一行上吧**，别放上下了。」 + * · 原来开始/结束各占一整行（`日期 时间` 拼成一串）。 + * 3. **第二轮**：「你参考一下 SyncCalendar 的做法，实际上就是 + * **把日期和时间放在一个控件里面**。」 + * · 🔴 第一版我只做到"日期块 + 时间块并排一行"，**但仍是两个可点区**、 + * 点开的是**两个独立选择器** —— 不是 SyncCalendar 的形态。 + * · SyncCalendar（`EventEditPage.dateTimePickerSheet`）是： + * **一个底部弹层里 `DatePicker` 与 `TimePicker` 并排**， + * 选完点「确定」**一次回填**。 + * · ⇒ 改成：控件是**一整块可点的框**（显示 `10月16日 周五 20:00`）， + * 点它开弹层、里面两个滚轮并排、点「确定」写回； + * 弹层内部用**草稿**（`pickDate`/`pickHour`/`pickMin`）—— 取消可丢弃。 + * + * 🔴 为什么用**浮层**而不是像 SyncCalendar 那样跳新页面： + * 本项目的浮层范式已经统一（见 `FbPersonEditSheet` / `FbMovieDetailSheet`）—— + * 都是页面内的 `Stack` 覆盖层。跳页面会丢列表滚动位置、还要处理返回栈； + * 浮层状态完全由父页面掌控（一个 `@Param`），更简单。 + * ⚠️ 与 SyncCalendar 的**功能对齐**是有意的；**形态不同**是有意的。 + * + * ⚠️ 服务端 `POST/PATCH /api/v1/events` 的字段名是**下划线**（`starts_at` 等）， + * 且"没传的字段沿用旧值" ⇒ 编辑时只需发改动的那些（见 `FbCalRepo.toBody`）。 + */ + +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { FbColors, FbMetric } from '../common/Theme'; +import { FbCalEventFull, FbCalEventInput, FbCalRepo } from '../data/FbCalRepo'; +import { FbCalBook } from '../model/Types'; +import { FB_TOKEN_STORE } from '../data/FbTokenStore'; +import { FB_CAL_SETTINGS } from '../data/FbCalSettings'; +import { FbEventChip } from './FbEventChip'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbEventEdit'; + +/** 贴底卡片的手势区缓冲（同其他浮层） */ +const FB_SHEET_BOTTOM_GAP: number = 16; + +/** + * 提醒选项（分钟 → 文案）。 + * + * 🔴 与 SyncCalendar 的 `reminderChip` 同一组值（0/5/10/15/30/60/1440）—— + * 两边口径一致，用户在两个 App 里看到的选项不会不一样。 + */ +interface FbRemindOpt { + min: number; + label: string; +} + +const REMIND_OPTS: FbRemindOpt[] = [ + { min: 0, label: '不提醒' }, + { min: 5, label: '提前5分钟' }, + { min: 10, label: '提前10分钟' }, + { min: 15, label: '提前15分钟' }, + { min: 30, label: '提前30分钟' }, + { min: 60, label: '提前1小时' }, + { min: 1440, label: '提前1天' } +]; + +/** + * 重复选项（key → 文案 + RRULE）。 + * + * ⚠️ 只做**最常见的那几种**（对齐 SyncCalendar 的 chip 组）， + * "每两周/自定义"这类留给网页端 —— 手机上点五层下拉去拼 RRULE 得不偿失。 + * ⚠️ 端上拼的是**完整 RRULE 串**，服务端 `rruleFromBody()` 也认这个口径。 + */ +interface FbRepeatOpt { + key: string; + label: string; + rule: string; +} + +const REPEAT_OPTS: FbRepeatOpt[] = [ + { key: 'none', label: '不重复', rule: '' }, + { key: 'daily', label: '每天', rule: 'FREQ=DAILY' }, + { key: 'weekday', label: '工作日', rule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR' }, + { key: 'weekly', label: '每周', rule: 'FREQ=WEEKLY' }, + { key: 'monthly', label: '每月', rule: 'FREQ=MONTHLY' }, + { key: 'yearly', label: '每年', rule: 'FREQ=YEARLY' } +]; + +@ComponentV2 +export struct FbEventEditSheet { + /** 要编辑的日程（null + isCreate=false 表示没打开；isCreate=true 时是"新建"） */ + @Param event: FbCalEventFull | null = null; + /** 新建模式 */ + @Param isCreate: boolean = false; + /** 新建时预填的日期（`YYYY-MM-DD`，从"点哪天的格子"来） */ + @Param presetDate: string = ''; + /** 可选的日历本（新建时要选落到哪本） */ + @Param books: FbCalBook[] = []; + /** 取消 */ + @Event onCancel: () => void = (): void => { + }; + /** 保存成功 */ + @Event onSaved: () => void = (): void => { + }; + /** 删除成功 */ + @Event onDeleted: () => void = (): void => { + }; + + // ---- 表单状态 ---- + @Local fTitle: string = ''; + @Local fAllDay: boolean = false; + /** `YYYY-MM-DD` */ + @Local fStartDate: string = ''; + /** `HH:mm` */ + @Local fStartTime: string = '09:00'; + @Local fEndDate: string = ''; + @Local fEndTime: string = '10:00'; + @Local fPlace: string = ''; + @Local fNote: string = ''; + /** 重复的 key（REPEAT_OPTS 里那个） */ + @Local fRepeat: string = 'none'; + /** 提醒分钟（可多选；空数组 = 不提醒） */ + @Local fRemind: number[] = []; + /** 选中的日历本 id */ + @Local fBookId: number = 0; + + @Local busy: boolean = false; + @Local err: string = ''; + @Local confirmDel: boolean = false; + @Local deleting: boolean = false; + + // ---- 「日期 + 时间」选择弹层（照 SyncCalendar 的 `dateTimePickerSheet`）---- + /** + * 弹层开着吗。 + * + * 🔴 **为什么不是"就地展开"**（这是用户 2026-10-16 的第二条反馈）： + * SyncCalendar 的做法是**一个底部弹层里 `DatePicker` 与 `TimePicker` 并排** + * （见其 `EventEditPage.dateTimePickerSheet`），选完点「确定」一次回填。 + * 我第一版做成了"点日期块就地展开一个 DatePicker、点时间块再展开一个 TimePicker" + * —— 那是两个控件、分两次选，不是它的做法。 + */ + @Local pickOpen: boolean = false; + /** 正在选的是"结束"（false = 开始） */ + @Local pickIsEnd: boolean = false; + /** 弹层里的**草稿**值：点「确定」才写回 `fStartXxx`/`fEndXxx`（取消则丢弃） */ + @Local pickDate: Date = new Date(); + @Local pickHour: number = 9; + @Local pickMin: number = 0; + + aboutToAppear(): void { + const e: FbCalEventFull | null = this.event; + if (e !== null) { + // ---- 编辑：回填 ---- + 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.fPlace = e.location; + this.fNote = e.note; + this.fRepeat = this.repeatKeyOf(e.rrule); + this.fRemind = this.minsOf(e.reminder_minutes); + this.fBookId = e.calendar_id; + return; + } + // ---- 新建：预填 ---- + const d: string = this.presetDate !== '' ? this.presetDate : this.todayStr(); + 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.fBookId = this.defaultBookId(); + } + + // ============================================================ + // 取值 / 换算 + // ============================================================ + + private todayStr(): string { + const n: Date = new Date(); + return this.pad(n.getFullYear()) + '-' + this.pad(n.getMonth() + 1) + '-' + this.pad(n.getDate()); + } + + 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 小时（当结束时间没填时的兜底） */ + 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'); + } + + /** 默认落到的日历本：设置里选的（若还在可选列表里），否则第一本可写的 */ + private defaultBookId(): number { + const want: number = FB_CAL_SETTINGS.getBookId(); + for (const b of this.books) { + if (b.id === want && b.canWrite) { + return b.id; + } + } + for (const b of this.books) { + if (b.canWrite) { + return b.id; + } + } + return 0; + } + + /** 重复：从 RRULE 串反推是哪个 chip（认不出就归"不重复"） */ + private repeatKeyOf(rrule: string): string { + if (rrule === '') { + return 'none'; + } + for (const o of REPEAT_OPTS) { + if (o.rule !== '' && rrule.indexOf(o.rule) === 0) { + return o.key; + } + } + // 认不出的复杂规则：给"不重复"更危险（会覆盖掉原规则）， + // 但端上确实没有编辑自定义规则的能力 ⇒ 保留原文不覆盖（见 save() 的处理） + return 'none'; + } + + /** 重复 chip → RRULE 串 */ + private ruleOfRepeat(): string { + for (const o of REPEAT_OPTS) { + if (o.key === this.fRepeat) { + return o.rule; + } + } + return ''; + } + + /** 提醒串 → 分钟数组 */ + private minsOf(s: string): number[] { + const out: number[] = []; + if (s === '') { + return out; + } + for (const x of s.split(',')) { + const n: number = parseInt(x.trim(), 10); + if (!isNaN(n) && n > 0) { + out.push(n); + } + } + return out; + } + + /** 登录令牌 */ + private token(): string { + return FB_TOKEN_STORE.get(); + } + + // ============================================================ + // 小件 + // ============================================================ + + @Builder + field(label: string, value: string, hint: string, onChange: (v: string) => void) { + Column({ space: 4 }) { + Text(label) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + TextInput({ text: value, placeholder: hint }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(40) + .padding({ left: 12, right: 12 }) + .onChange((v: string): void => { + onChange(v); + }) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + + @Builder + area(label: string, value: string, hint: string, onChange: (v: string) => void) { + Column({ space: 4 }) { + Text(label) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + TextArea({ text: value, placeholder: hint }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(72) + .padding({ left: 12, right: 12, top: 8, bottom: 8 }) + .onChange((v: string): void => { + onChange(v); + }) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + + /** 小标题（把一大串字段分开） */ + @Builder + section(title: string) { + Text(title) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .margin({ top: 6 }) + } + + /** + * ⚠️ 这里删掉过两个 `@Builder`，都**不要**加回来： + * · `chip(label, on: boolean, onTap)` —— "重复/提醒点不了"的根因 + * （@Builder 值参数不参与观察）⇒ 已换成 `FbEventChip` 组件。 + * · `pickRow(label, value, onTap)` —— 被"日期时间并排一行"取代 + * （用户要求时间和日期同一行，不再上下堆）⇒ 见 `dateTimeRow`。 + */ + + build() { + // 🔴 外层 `Stack` 是**必需**的：本组件有**三个**要显示的层 + // （编辑卡片 + 日期时间弹层 + 删除确认遮罩），而 build() 只能有一个根节点。 + // ⚠️ `alignContent: Bottom` 让卡片/弹层都贴底（同一形态）。 + Stack({ alignContent: Alignment.Bottom }) { + this.editCard() + + // ---- 「日期 + 时间」选择弹层（照 SyncCalendar）---- + if (this.pickOpen) { + this.dateTimePickerSheet() + } + + if (this.confirmDel) { + this.deleteConfirm() + } + } + .width('100%') + .height('100%') + } + + @Builder + editCard() { + Column({ space: 0 }) { + // ---- 标题栏 ---- + Row({ space: 12 }) { + Text(this.isCreate ? '新建日程' : '编辑日程') + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Blank() + Text('取消') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .padding({ left: 12, right: 12, top: 6, bottom: 6 }) + .onClick((): void => { + this.onCancel(); + }) + } + .width('100%') + .alignItems(VerticalAlign.Center) + + Scroll() { + Column({ space: 12 }) { + this.field('标题', this.fTitle, '日程得有个标题', (v: string): void => { + this.fTitle = v; + }) + + // ---- 全天 ---- + Row() { + Text('全天') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + Blank() + Toggle({ type: ToggleType.Switch, isOn: this.fAllDay }) + .selectedColor('#4A7C82') + .onChange((on: boolean): void => { + this.fAllDay = on; + }) + } + .width('100%') + .height(42) + .padding({ left: 12, right: 12 }) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + + // ---- 日期与时间 ---- + // 🔴 照 SyncCalendar：**一行一个"日期 + 时间"控件**（点开一个弹层、 + // 里面 DatePicker 与 TimePicker 并排，选完点「确定」）。 + // 用户 2026-10-16：「实际上就是把日期和时间放在一个控件里面。」 + this.section('日期与时间') + this.dateTimeRow('开始', true) + if (!this.fAllDay) { + this.dateTimeRow('结束', false) + } + + // ---- 重复 ---- + // 🔴 用 `FbEventChip` **组件**而不是 @Builder —— + // @Builder 的值类型参数（on: boolean）变化**不触发重建**， + // 这正是"重复/提醒点不了"的根因（见该组件文件头）。 + this.section('重复') + Flex({ wrap: FlexWrap.Wrap }) { + ForEach(REPEAT_OPTS, (o: FbRepeatOpt) => { + FbEventChip({ + label: o.label, + active: this.fRepeat === o.key, + onPick: (): void => { + this.fRepeat = o.key; + } + }) + }, (o: FbRepeatOpt): string => 'rp_' + o.key) + } + .width('100%') + .margin({ top: 2 }) + + // ---- 提醒 ---- + this.section('提醒（可多选）') + Flex({ wrap: FlexWrap.Wrap }) { + ForEach(REMIND_OPTS, (o: FbRemindOpt) => { + FbEventChip({ + label: o.label, + active: this.hasRemind(o.min), + onPick: (): void => { + this.toggleRemind(o.min); + } + }) + }, (o: FbRemindOpt): string => 'rm_' + o.min.toString()) + } + .width('100%') + .margin({ top: 2 }) + + // ---- 日历本 ---- + if (this.books.length > 0) { + this.section('加入哪本日历') + Flex({ wrap: FlexWrap.Wrap }) { + ForEach(this.books, (b: FbCalBook) => { + FbEventChip({ + label: b.name, + active: this.fBookId === b.id, + // 选中时用**这本日历自己的颜色**（一眼看出落到哪本） + activeBg: b.color, + onPick: (): void => { + this.fBookId = b.id; + } + }) + }, (b: FbCalBook): string => 'bk_' + b.id.toString()) + } + .width('100%') + } + + // ---- 地点 / 备注 ---- + this.field('地点', this.fPlace, '地点（可选）', (v: string): void => { + this.fPlace = v; + }) + this.area('备注', this.fNote, '备注（可选）', (v: string): void => { + this.fNote = v; + }) + + if (this.err !== '') { + Text(this.err) + .fontSize(FbMetric.fontTiny) + .fontColor('#A32D2D') + .width('100%') + } + } + .width('100%') + .padding({ top: 14 }) + } + .layoutWeight(1) + .width('100%') + .scrollBar(BarState.Off) + .align(Alignment.TopStart) + + // ---- 底部按钮：删除 / 保存 ---- + if (this.deleting) { + Text('删除中…') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + .textAlign(TextAlign.Center) + .width('100%') + .height(42) + .margin({ top: 16 }) + } else { + Row({ space: 10 }) { + if (!this.isCreate) { + Text('删除') + .fontSize(FbMetric.fontSmall) + .fontColor('#C0533F') + .textAlign(TextAlign.Center) + .height(42) + .padding({ left: 18, right: 18 }) + .border({ width: 1, color: '#C0533F' }) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + if (!this.busy) { + this.confirmDel = true; + } + }) + } + Text(this.busy ? '保存中…' : (this.isCreate ? '创建' : '保存')) + .fontSize(FbMetric.fontSmall) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(42) + .backgroundColor(this.busy ? '#4A7C8288' : '#4A7C82') + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + if (!this.busy) { + this.save(); + } + }) + } + .width('100%') + .margin({ top: 16 }) + } + } + .width('100%') + .constraintSize({ maxHeight: '86%' }) + .padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP }) + .backgroundColor(FbColors.surface) + .borderRadius({ topLeft: FbMetric.radius, topRight: FbMetric.radius }) + .alignItems(HorizontalAlign.Start) + } + + /** + * **一个「日期 + 时间」控件**（照 SyncCalendar 的 `EventEditPage`）。 + * + * 🔴 用户 2026-10-16：「你参考一下 SyncCalendar 的做法，实际上就是 + * **把日期和时间放在一个控件里面**。」 + * 它的做法（`dateTimePickerSheet`）：**一个底部弹层里 `DatePicker` 与 + * `TimePicker` 并排**，选完点「确定」一次回填。 + * ⚠️ 我第一版做成了"点日期块就地展开 DatePicker、点时间块再展开 TimePicker" + * —— 那是**两个控件、分两次选**，形态与它不同（也不如一次选完顺手）。 + * + * 控件本身是**一整块可点的框**，显示 `10月16日 周五 20:00`； + * 点它 → 打开弹层（里面日期/时间并排）→ 「确定」写回。 + */ + @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 => { + this.openPicker(isStart); + }) + // 右侧小箭头：暗示"点开会选"（与 SyncCalendar 的行样式一致） + Text('›') + .fontSize(FbMetric.fontBody) + .fontColor(FbColors.faint) + } + .width('100%') + .alignItems(VerticalAlign.Center) + } + + /** + * 打开「日期 + 时间」弹层（把当前值装进草稿）。 + * + * ⚠️ 草稿的意义：用户滚了一半又点「取消」⇒ **不写回**（`fStartXxx` 保持原样）。 + * 若直接改 `fStartXxx`，"取消"就没法撤销了。 + */ + 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); + 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); + if (this.pickIsEnd) { + this.fEndDate = iso; + this.fEndTime = hm; + } else { + this.fStartDate = iso; + this.fStartTime = hm; + // ⚠️ 开始改到"结束之后" ⇒ 把结束顺延到同一时刻（服务端不校验，但负时长是坏的） + if (this.fEndDate < iso || (this.fEndDate === iso && this.fEndTime < hm)) { + this.fEndDate = iso; + this.fEndTime = hm; + } + } + this.pickOpen = false; + } + + /** + * 日期 + 时间选择弹层（**照 SyncCalendar 的 `dateTimePickerSheet`**）。 + * + * 结构：标题 → `Row { DatePicker | TimePicker }`（**并排**）→ 「确定」。 + * ⚠️ 滚轮的 `textStyle`/`selectedTextStyle`/`disappearTextStyle` **要显式给色**： + * 默认取系统主题色，深色模式下会和弹层底色撞色（SyncCalendar 注释里点明过）。 + * ⚠️ 全天日程没有"时刻"可言 ⇒ 只画 `DatePicker`。 + */ + @Builder + dateTimePickerSheet() { + 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) + } + } + .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%') + .backgroundColor(FbColors.surface) + .borderRadius({ topLeft: FbMetric.radius, topRight: FbMetric.radius }) + .padding({ left: 18, right: 18, top: 8, bottom: 20 + FB_SHEET_BOTTOM_GAP }) + .alignItems(HorizontalAlign.Start) + } + + /** `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 + deleteConfirm() { + Column() { + Column({ space: 8 }) { + Text('删除这条日程？') + .fontSize(FbMetric.fontBody) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Text('删掉之后不能撤销。若这条日程是重复的，这一次和以后的都会不见。') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + .maxLines(3) + Row({ space: 10 }) { + Text('取消') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(42) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.confirmDel = false; + }) + Text('删除') + .fontSize(FbMetric.fontSmall) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(42) + .backgroundColor('#C0533F') + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.confirmDel = false; + this.doDelete(); + }) + } + .width('100%') + .margin({ top: 10 }) + } + .width('100%') + .padding(18) + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + .alignItems(HorizontalAlign.Start) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + .padding({ left: 32, right: 32 }) + .backgroundColor('#00000066') + .onClick((): void => { + this.confirmDel = false; + }) + } + + // ============================================================ + // 提醒多选 + // ============================================================ + + private hasRemind(min: number): boolean { + // 0 = "不提醒"：选中它等价于"没有任何提醒" + if (min === 0) { + return this.fRemind.length === 0; + } + return this.fRemind.indexOf(min) >= 0; + } + + private toggleRemind(min: number): void { + if (min === 0) { + this.fRemind = []; + return; + } + const at: number = this.fRemind.indexOf(min); + if (at >= 0) { + this.fRemind.splice(at, 1); + } else { + this.fRemind.push(min); + } + } + + // ============================================================ + // 网络 + // ============================================================ + + private async doDelete(): Promise { + const e: FbCalEventFull | null = this.event; + if (e === null) { + return; + } + const token: string = this.token(); + if (token === '') { + this.err = '未登录，无法删除'; + return; + } + this.deleting = true; + this.err = ''; + const res = await FbCalRepo.inst().remove(e.id, token); + this.deleting = false; + if (!res.ok) { + hilog.warn(DOMAIN, TAG, '删除日程失败：%{public}s', res.error); + this.err = '删除失败：' + res.error; + return; + } + this.onDeleted(); + } + + /** 保存（新建走 POST、编辑走 PATCH） */ + private async save(): Promise { + const title: string = this.fTitle.trim(); + if (title === '') { + this.err = '日程得有个标题'; + return; + } + const token: string = this.token(); + if (token === '') { + this.err = this.isCreate ? '未登录，无法创建' : '未登录，无法保存'; + return; + } + const isNew: boolean = this.isCreate || this.event === null; + if (isNew && this.fBookId <= 0) { + this.err = '请选一本日历'; + return; + } + + // ---- 时间：全天归零到 00:00；否则拼上时分 ---- + const startAt: string = this.fAllDay + ? (this.fStartDate + ' 00:00:00') + : (this.fStartDate + ' ' + this.fStartTime + ':00'); + let endAt: string = this.fAllDay + ? (this.fEndDate + ' 00:00:00') + : (this.fEndDate + ' ' + this.fEndTime + ':00'); + // ⚠️ 结束早于开始 ⇒ 补成同一时刻（服务端不校验时长，但"负时长"看着是坏的） + if (endAt < startAt) { + endAt = startAt; + } + + this.busy = true; + this.err = ''; + const input: FbCalEventInput = { + title: title, + location: this.fPlace.trim(), + starts_at: startAt, + ends_at: endAt, + all_day: this.fAllDay, + note: this.fNote, + reminder_minutes: this.fRemind + }; + // ⚠️ 重复：只在用户**确实选过**时才发。 + // 编辑一条"自定义重复"的日程时，端上认不出来（归到"不重复"）， + // 若照样发个空 rrule，就会把人家原来的规则**清掉**。 + // ⇒ 规则原文认不出（非空且 chip 是 none）⇒ 这一项**不发**，保持原样。 + const recognize: boolean = this.fRepeat !== 'none' + || (this.event !== null && this.event.rrule === ''); + if (recognize) { + input.rrule = this.ruleOfRepeat(); + } + if (isNew) { + input.calendar_id = this.fBookId; + } + + const repo: FbCalRepo = FbCalRepo.inst(); + const res = isNew ? await repo.create(input, token) : await repo.update(this.event!.id, input, token); + this.busy = false; + if (!res.ok) { + hilog.warn(DOMAIN, TAG, '保存日程失败：%{public}s', res.error); + this.err = (isNew ? '创建失败：' : '保存失败：') + res.error; + return; + } + // 新建时把选的日历本记成"以后默认用它"（与 SyncCalendar 的默认本同一体验） + if (isNew) { + FB_CAL_SETTINGS.setBookId(this.fBookId); + } + this.onSaved(); + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbEventSheet.ets b/entry/src/main/ets/components/FbEventSheet.ets new file mode 100644 index 0000000..9431799 --- /dev/null +++ b/entry/src/main/ets/components/FbEventSheet.ets @@ -0,0 +1,269 @@ +/** + * 家书 FamilyBook · 日程详情浮层（鸿蒙端） + * + * 用户 2026-10-15：「……包括下面日程的显示啊什么之类的，就按照 SyncCalendar 那个模式去做。」 + * SyncCalendar 的详情是**半屏 bindSheet**，内容为： + * 标题（带日历本色点 + 系统/只读徽标 + 关闭）→ 时间 → 日历本/重复 → + * 地点（可点导航）→ 备注 → 「编辑日程」。 + * + * 🔴 这里用**页面内 Stack 覆盖层**而不是 `bindSheet`（与家书其他浮层一致， + * 理由见 `FbMovieDetailSheet` 的文件头）； + * **功能与信息结构**照 SyncCalendar 对齐。 + * + * ⚠️ 详情数据是**异步拉的**（`/events/` 才给 note/rrule/reminder/ends_at） + * ⇒ 三种态都要画：加载中 / 成功 / 失败。别只画成功态。 + */ + +import { FbColors, FbMetric } from '../common/Theme'; +import { FbCalEventFull } from '../data/FbCalRepo'; +import { FbCalBook } from '../model/Types'; +import { FbDot } from './Widgets'; + +const FB_SHEET_BOTTOM_GAP: number = 16; + +@ComponentV2 +export struct FbEventSheet { + /** 日程详情（null = 还在加载） */ + @Param event: FbCalEventFull | null = null; + /** 加载中 */ + @Param loading: boolean = false; + /** 加载失败说明（空 = 没失败） */ + @Param error: string = ''; + /** 这条日程属于哪本日历（列表里那份已知，用来显示本色/名字） */ + @Param bookName: string = ''; + @Param bookColor: string = '#9AA0A6'; + /** 能不能编辑（不能写的日历本不给"编辑"按钮） */ + @Param canEdit: boolean = false; + @Event onClose: () => void = (): void => { + }; + @Event onEdit: () => void = (): void => { + }; + + /** 时间显示：`10月15日 周三 09:00 - 10:30` / `全天 10月15日 周三` */ + private timeText(): string { + const e: FbCalEventFull | null = this.event; + if (e === null) { + return ''; + } + const d: string = this.cnDate(e.starts_at); + if (e.all_day) { + return '全天 ' + d; + } + const t1: string = this.hhmm(e.starts_at); + if (e.ends_at === '') { + return d + ' ' + t1; + } + // 同一天就只写一次日期 + const sameDay: boolean = e.ends_at.length >= 10 && e.starts_at.length >= 10 + && e.ends_at.substring(0, 10) === e.starts_at.substring(0, 10); + const t2: string = this.hhmm(e.ends_at); + return sameDay ? (d + ' ' + t1 + ' - ' + t2) : (d + ' ' + t1 + ' → ' + this.cnDate(e.ends_at) + ' ' + t2); + } + + /** `YYYY-MM-DD HH:MM:SS` → `10月15日 周三` */ + private cnDate(dt: string): string { + if (dt.length < 10) { + return ''; + } + const y: number = parseInt(dt.substring(0, 4), 10); + const m: number = parseInt(dt.substring(5, 7), 10); + const d: number = parseInt(dt.substring(8, 10), 10); + const w: string[] = ['日', '一', '二', '三', '四', '五', '六']; + const day: number = new Date(y, m - 1, d).getDay(); + return m.toString() + '月' + d.toString() + '日 周' + w[day]; + } + + /** `YYYY-MM-DD HH:MM:SS` → `HH:mm` */ + private hhmm(dt: string): string { + return dt.length >= 16 ? dt.substring(11, 16) : ''; + } + + /** + * 重复规则 → 中文。 + * + * ⚠️ 只翻译**端上能生成的那几种**（见 `FbEventEditSheet.REPEAT_OPTS`）； + * 认不出的（网页端配的"每两周"等）原样显示 RRULE 串 —— + * "看不懂"也好过"显示成不重复"（那是错的）。 + */ + private repeatText(): string { + const e: FbCalEventFull | null = this.event; + if (e === null || e.rrule === '') { + return ''; + } + const r: string = e.rrule; + if (r.indexOf('FREQ=DAILY') === 0) { return '每天'; } + if (r.indexOf('FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR') === 0) { return '每个工作日'; } + if (r.indexOf('FREQ=WEEKLY') === 0) { return '每周'; } + if (r.indexOf('FREQ=MONTHLY') === 0) { return '每月'; } + if (r.indexOf('FREQ=YEARLY') === 0) { return '每年'; } + return r; + } + + /** 提醒 → 中文（多个用顿号连） */ + private remindText(): string { + const e: FbCalEventFull | null = this.event; + if (e === null || e.reminder_minutes === '') { + return ''; + } + const out: string[] = []; + for (const x of e.reminder_minutes.split(',')) { + const n: number = parseInt(x.trim(), 10); + if (isNaN(n)) { + continue; + } + if (n === 0) { continue; } + if (n < 60) { out.push('提前 ' + n.toString() + ' 分钟'); } + else if (n === 60) { out.push('提前 1 小时'); } + else if (n === 1440) { out.push('提前 1 天'); } + else if (n % 1440 === 0) { out.push('提前 ' + (n / 1440).toString() + ' 天'); } + else if (n % 60 === 0) { out.push('提前 ' + (n / 60).toString() + ' 小时'); } + else { out.push('提前 ' + n.toString() + ' 分钟'); } + } + return out.join('、'); + } + + @Builder + row(label: string, value: string) { + Row({ space: 10 }) { + Text(label) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width(56) + Text(value) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .layoutWeight(1) + } + .width('100%') + .padding({ top: 8, bottom: 8 }) + .alignItems(VerticalAlign.Top) + } + + build() { + // FB_WRAP_CENTER：把卡片**垂直居中**（用户 2026-10-16 要求：浮在屏幕中间）。 + // ⚠️ 居中放在**组件内部**做，而不是改宿主的 Stack 对齐 —— + // 宿主 Stack 里还有别的子元素（日程页的悬浮 ＋），改对齐会连带挪走它们。 + // ⚠️ 外层铺满 + Center；内层仍是那张 92% 宽的圆角卡。 + Column() { + Column({ space: 0 }) { + // ---- 标题区 ---- + Row({ space: 10 }) { + FbDot({ dia: 12, fillC: this.bookColor }) + Text(this.event !== null && this.event.title !== '' + ? this.event.title : '(无标题)') + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + .maxLines(2) + .layoutWeight(1) + if (this.event !== null && this.event.all_day) { + Text('全天') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + .padding({ left: 8, right: 8, top: 3, bottom: 3 }) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusPill) + } + } + .width('100%') + .alignItems(VerticalAlign.Top) + + Divider() + .color(FbColors.line) + .margin({ top: 12, bottom: 4 }) + + if (this.loading) { + Row({ space: 8 }) { + LoadingProgress().width(18).height(18).color(FbColors.faint) + Text('正在读取…') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + } + .width('100%') + .padding({ top: 20, bottom: 20 }) + .justifyContent(FlexAlign.Center) + } else if (this.event === null) { + Text(this.error !== '' ? ('读不到这条日程：' + this.error) : '读不到这条日程') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + .width('100%') + .padding({ top: 20, bottom: 20 }) + } else { + Scroll() { + Column({ space: 0 }) { + this.row('时间', this.timeText()) + if (this.bookName !== '') { + this.row('日历本', this.bookName) + } + // ⚠️ build() 里**不能声明变量**（只有 UI 组件语法）⇒ + // 条件直接调方法（方法返回空串就不显示） + if (this.repeatText() !== '') { + this.row('重复', this.repeatText()) + } + if (this.remindText() !== '') { + this.row('提醒', this.remindText()) + } + if (this.event.location !== '') { + this.row('地点', this.event.location) + } + if (this.event.note !== '') { + this.row('备注', this.event.note) + } + Row().height(8) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + .layoutWeight(1) + .width('100%') + .scrollBar(BarState.Off) + .align(Alignment.TopStart) + } + + // ---- 底部按钮 ---- + Row({ space: 10 }) { + Text('关闭') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(42) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.onClose(); + }) + if (this.canEdit && this.event !== null) { + Text('编辑日程') + .fontSize(FbMetric.fontSmall) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(42) + .backgroundColor('#4A7C82') + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.onEdit(); + }) + } + } + .width('100%') + .margin({ top: 14 }) + } + // 🔴 用户 2026-10-16：「它应该弹出一个**圆角的、浮在上面的卡片**…… + // **不要让它左右充满整个屏幕，下面也不要挨着屏幕**， + // 而是放在**屏幕中间**，采用**圆角浮窗**式的形式。」 + // ⇒ 不再贴底满宽：左右留边、四角圆角、垂直居中（由宿主的 Stack 对齐）。 + .width('92%') + .constraintSize({ maxHeight: '72%' }) + .padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP }) + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + .alignItems(HorizontalAlign.Start) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + .hitTestBehavior(HitTestMode.Transparent) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbKinGraph.ets b/entry/src/main/ets/components/FbKinGraph.ets new file mode 100644 index 0000000..6e2b2df --- /dev/null +++ b/entry/src/main/ets/components/FbKinGraph.ets @@ -0,0 +1,288 @@ +/** + * 家书 FamilyBook · 家谱图谱（鸿蒙端） + * + * 把亲属关系画成**知识图谱**那样的图：节点是圆形头像，边是连线。 + * + * 🔴 为什么用 `Canvas` 而不是 `Circle`/`Path` 组件拼： + * · 布局是**算出来的**（按代数分层、同代均分、夫妻相邻）， + * 节点数量与位置都不定 —— 组件树的写法要动态拼 Path 的 `commands`， + * 比直接算坐标画线**难得多**、也更难调； + * · 连线要**画在节点下面**（否则线会压在头像上）—— + * Canvas 一次画完，天然有先后顺序。 + * ⚠️ 代价：Canvas **不是响应式的**，数据变了要**自己重画**。 + * 所以这里在 `onReady`（首帧）与**每次数据/尺寸变化时**都重画一遍。 + * + * 布局规则（与"从上往下读家谱"的直觉一致）： + * · **纵向 = 代数**：长辈在上、我居中、晚辈在下（`gen` 越小越靠上）； + * · **横向 = 同代展开**：同代的人均分宽度；配偶排在彼此旁边； + * · 连线：父母→子女（带箭头感的折线）、夫妻（水平短线，更粗）。 + * ⚠️ 不做"力导向"那种自动布局：家谱有**明确的层次语义**， + * 力导向会把人随机甩开，反而看不懂谁是长辈。 + */ + +import { FbColors, FbMetric } from '../common/Theme'; +import { FbKinPerson } from '../model/Types'; + +/** 一个节点在画布上的位置 */ +interface KinNode { + p: FbKinPerson; + x: number; + y: number; +} + +@ComponentV2 +export struct FbKinGraphView { + /** 家谱里的人 */ + @Param people: FbKinPerson[] = []; + /** 我（居中显示、加粗） */ + @Param meId: number = 0; + /** 点某个节点（弹详情） */ + @Event onPick: (id: number) => void = (id: number): void => { + }; + + /** 画布上下文（必须在组件里创建，不能跨组件共享） */ + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + /** 画布尺寸（onAreaChange 拿到） */ + @Local cw: number = 0; + @Local ch: number = 0; + /** 算好的节点位置（画与点击都用它） */ + private nodes: KinNode[] = []; + + /** 节点半径（vp） */ + private readonly R: number = 22; + + build() { + Canvas(this.ctx) + .width('100%') + .height('100%') + .backgroundColor(FbColors.paper) + // ⚠️ `onReady` 只在**首帧**触发一次；后续尺寸变化要靠 `onAreaChange`。 + // 只用 onReady 的话，切到家谱页（宽高这时才定下来）会画不出东西。 + .onReady((): void => { + this.redraw(); + }) + .onAreaChange((_old: Area, now: Area): void => { + this.cw = Number(now.width); + this.ch = Number(now.height); + this.redraw(); + }) + // 🔴 `Canvas` **没有**"点到了哪个图形"的概念 —— 命中检测要自己算。 + // 画的位置由 `layout()` 定，点击时拿同一份 `this.nodes` 比距离即可。 + .onClick((ev: ClickEvent): void => { + const x: number = ev.x; + const y: number = ev.y; + // 命中半径放宽一点（手指比鼠标粗）：用 1.35×R 更"跟手" + const hit: number = this.R * 1.35; + for (const n of this.nodes) { + const dx: number = x - n.x; + const dy: number = y - n.y; + if (dx * dx + dy * dy <= hit * hit) { + this.onPick(n.p.id); + return; + } + } + }) + } + + /** + * 重画整张图（**先算位置、再画线、最后画节点**）。 + * + * ⚠️ 顺序很重要：线在节点下面 —— 否则线会横穿头像。 + * Canvas 没有 z-index，只能靠绘制顺序。 + */ + private redraw(): void { + if (this.cw <= 0 || this.ch <= 0 || this.people.length === 0) { + return; + } + this.layout(); + this.drawEdges(); + this.drawNodes(); + } + + /** + * 算节点位置（按代数分层）。 + * + * ⚠️ 结果存进 `this.nodes` —— 点击命中检测要用**同一份坐标**， + * 重算一遍容易出现"看到的和点到的不一样"。 + */ + private layout(): void { + // ---- ① 按代数分组 ---- + const byGen: Map = new Map(); + for (const p of this.people) { + const cur: FbKinPerson[] | undefined = byGen.get(p.gen); + if (cur !== undefined) { + cur.push(p); + } else { + byGen.set(p.gen, [p]); + } + } + const gens: number[] = []; + byGen.forEach((_v: FbKinPerson[], k: number): void => { + gens.push(k); + }); + // ⚠️ 必须按**数值**排（Map 的键直接 sort 会按字符串：-1,-2,0,1） + gens.sort((a: number, b: number): number => a - b); + + // ---- ② 纵向：每代一条水平带，均分高度 ---- + const padTop: number = 46; // 给顶部代数标签留位置 + const padBottom: number = 26; + const bandH: number = (this.ch - padTop - padBottom) / Math.max(1, gens.length); + + const nodes: KinNode[] = []; + for (let gi: number = 0; gi < gens.length; gi++) { + const g: number = gens[gi]; + const ps: FbKinPerson[] = byGen.get(g) !== undefined ? (byGen.get(g) as FbKinPerson[]) : []; + const y: number = padTop + bandH * gi + bandH / 2; + + // ---- ③ 横向：同代均分 ---- + // ⚠️ 左右各留 `R + 8`，否则第一个/最后一个节点会贴边、头像被切掉。 + const padX: number = this.R + 10; + const usable: number = this.cw - padX * 2; + const step: number = ps.length > 1 ? usable / (ps.length - 1) : 0; + // ⚠️ 只有一个人时放**正中间**（step=0 会让它贴在左边） + const startX: number = ps.length > 1 ? padX : this.cw / 2; + + for (let i: number = 0; i < ps.length; i++) { + nodes.push({ p: ps[i], x: startX + step * i, y: y }); + } + } + this.nodes = nodes; + } + + /** 按 id 找节点 */ + private nodeOf(id: number): KinNode | undefined { + for (const n of this.nodes) { + if (n.p.id === id) { + return n; + } + } + return undefined; + } + + /** 画连线 */ + private drawEdges(): void { + const c: CanvasRenderingContext2D = this.ctx; + c.lineWidth = 1.6; + c.strokeStyle = '#B9A896'; + + for (const n of this.nodes) { + // ---- 父母 → 子女（折线：下-横-下）---- + const parents: number[] = n.p.parents; + for (const pid of parents) { + const par: KinNode | undefined = this.nodeOf(pid); + if (par === undefined) { + continue; + } + // 折线中点取两者的横向中点，纵向上 1/3 处拐 + const midY: number = par.y + (n.y - par.y) * 0.55; + c.beginPath(); + c.moveTo(par.x, par.y + this.R); + c.lineTo(par.x, midY); + c.lineTo(n.x, midY); + c.lineTo(n.x, n.y - this.R); + c.stroke(); + } + + // ---- 夫妻（水平短线，**画粗一点**，与血缘线区分）---- + for (const sid of n.p.spouses) { + // 只画一次（按 id 大小去重，否则同一对会画两条） + if (sid < n.p.id) { + continue; + } + const sp: KinNode | undefined = this.nodeOf(sid); + if (sp === undefined) { + continue; + } + c.save(); + c.lineWidth = 3; + c.strokeStyle = '#C97B6A'; + c.beginPath(); + c.moveTo(n.x + this.R, n.y); + c.lineTo(sp.x - this.R, sp.y); + c.stroke(); + c.restore(); + } + } + } + + /** 画节点（圆 + 首字 + 称谓） */ + private drawNodes(): void { + const c: CanvasRenderingContext2D = this.ctx; + for (const n of this.nodes) { + const isMe: boolean = n.p.id === this.meId; + + // 圆底（用头像色） + c.beginPath(); + c.arc(n.x, n.y, this.R, 0, Math.PI * 2); + c.fillStyle = n.p.avatarColor !== '' ? n.p.avatarColor : '#8A6B4B'; + c.fill(); + // 「我」加一圈描边，一眼认出中心 + if (isMe) { + c.lineWidth = 2.5; + c.strokeStyle = '#A84A28'; + c.stroke(); + } + + // 名字首字 + c.font = '16px sans-serif'; + c.textAlign = 'center'; + c.textBaseline = 'middle'; + c.fillStyle = '#FFFFFF'; + const nm: string = n.p.shown !== '' ? n.p.shown : n.p.name; + c.fillText(nm.length > 0 ? nm.substring(0, 1) : '?', n.x, n.y); + + // 名字（圆下方） + c.font = isMe ? 'bold 12px sans-serif' : '12px sans-serif'; + c.fillStyle = isMe ? '#A84A28' : '#2C231D'; + // ⚠️ 名字可能很长（"青岛西海岸电影城"那种）—— 截断，别糊成一片 + const label: string = nm.length > 5 ? nm.substring(0, 5) + '…' : nm; + c.fillText(label, n.x, n.y + this.R + 11); + + // 称谓（名字下面，小字灰色） + if (n.p.label !== '' && n.p.label !== '我') { + c.font = '10px sans-serif'; + c.fillStyle = '#8A7A6A'; + c.fillText(n.p.label, n.x, n.y + this.R + 24); + } + + // ---- 代数标签（每层左边）---- + // ⚠️ 只在每层**第一个**节点旁写，避免重复画 + const first: KinNode | undefined = this.firstOfGen(n.p.gen); + if (first !== undefined && first.p.id === n.p.id) { + c.font = '11px sans-serif'; + c.textAlign = 'left'; + c.fillStyle = '#8A7A6A'; + c.fillText(this.genLabel(n.p.gen), 8, n.y - this.R - 8); + c.textAlign = 'center'; + } + } + } + + /** 某代里排在最前的那个节点（用来放代数标签） */ + private firstOfGen(gen: number): KinNode | undefined { + for (const n of this.nodes) { + if (n.p.gen === gen) { + return n; + } + } + return undefined; + } + + /** 代数 → 层名（与家谱页的分层标题同口径） */ + private genLabel(g: number): string { + if (g === 0) { + return '我这一辈'; + } + if (g === -1) { + return '父母辈'; + } + if (g <= -2) { + return '祖辈'; + } + if (g === 1) { + return '子女辈'; + } + return '孙辈'; + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbModuleSettingsSheet.ets b/entry/src/main/ets/components/FbModuleSettingsSheet.ets new file mode 100644 index 0000000..71e484a --- /dev/null +++ b/entry/src/main/ets/components/FbModuleSettingsSheet.ets @@ -0,0 +1,150 @@ +/** + * 家书 FamilyBook · 模块设置浮层（鸿蒙端） + * + * 🔴 用户 2026-10-16：「**所有页面的设置按钮全部都改成和网页版一致**， + * 就是**三个横线**那种设置按钮。」 + * + * 网页版的做法（`templates/` 下各模块的 `_settings_menu.php`）： + * 每个模块的动作区最右有一个 `
`， + * `summary` 里就是**三条横线**的 SVG + * （`M2.5 4.5h11M2.5 8h11M2.5 11.5h11`），点开是一个菜单列表， + * 每条**图标 + 文字**。 + * + * 🔴 本组件就是那个"点开后的菜单"（鸿蒙端做成底部浮层，与家书其它浮层同一形态）。 + * ⚠️ **通用**：各模块只是条目不同，所以做成一个组件 + 传 `items`， + * 而不是给 8 个模块各写一个浮层（那种写法必然漂移）。 + * + * ⚠️ 条目点了"还没做"的怎么办：**照实显示为不可用**（灰掉 + "暂未开放"）， + * 而不是让点击没反应 —— 后者用户会以为卡了。 + */ + +import { FbColors, FbMetric, FbIcon } from '../common/Theme'; + +/** 贴底卡片的手势区缓冲（vp）—— 同其它浮层 */ +const FB_SHEET_BOTTOM_GAP: number = 16; + +/** 设置菜单里的一条 */ +export interface FbSettingItem { + /** 图标名（`FbIcon.ui()` 的 key，如 'chart' / 'gear' / 'filter'） */ + icon: string; + /** 文字 */ + label: string; + /** 一句话说明（可为空） */ + hint: string; + /** + * 点了做什么。传空串 = **这项还没做**（画成灰色 + "暂未开放"，点了不响应）。 + * ⚠️ 用 string 而不是回调：@Param 传函数在 ArkTS 里会被"不可序列化"折腾， + * 这里只需要一个"标识"，由父组件的 @Event 统一分发。 + */ + action: string; +} + +@ComponentV2 +export struct FbModuleSettingsSheet { + /** 标题（如「观影设置」） */ + @Param title: string = '设置'; + /** 菜单条目 */ + @Param items: FbSettingItem[] = []; + /** 关闭 */ + @Event onClose: () => void = (): void => { + }; + /** 点了某条（`action` 是条目的标识） */ + @Event onPick: (action: string) => void = (a: string): void => { + }; + + build() { + Column({ space: 0 }) { + // ---- 标题栏 ---- + Row() { + Text(this.title) + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + .layoutWeight(1) + Text('完成') + .fontSize(FbMetric.fontSmall) + .fontColor('#4A7C82') + .padding({ left: 12, right: 12, top: 6, bottom: 6 }) + .onClick((): void => { + this.onClose(); + }) + } + .width('100%') + .alignItems(VerticalAlign.Center) + + Scroll() { + Column({ space: 0 }) { + ForEach(this.items, (it: FbSettingItem) => { + this.settingRow(it) + }, (it: FbSettingItem): string => 'st_' + it.action + '_' + it.label) + } + .width('100%') + .padding({ top: 10 }) + } + .layoutWeight(1) + .width('100%') + .scrollBar(BarState.Off) + .align(Alignment.TopStart) + } + .width('100%') + .constraintSize({ maxHeight: '70%' }) + .padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP }) + .backgroundColor(FbColors.surface) + .borderRadius({ topLeft: FbMetric.radius, topRight: FbMetric.radius }) + .alignItems(HorizontalAlign.Start) + } + + /** + * 一条菜单项：**图标 + 文字**（照网页版：`每条文字前都要有图标`）。 + * + * ⚠️ 未实现的条目（`action === ''`）画灰、且**不响应点击** —— + * "点了没反应"比"明确告诉你还没做"更糟（用户会以为卡死）。 + */ + @Builder + settingRow(it: FbSettingItem) { + Row({ space: 12 }) { + Image(FbIcon.ui(it.icon)) + .width(17) + .height(17) + .renderMode(ImageRenderMode.Template) + .fillColor(it.action === '' ? FbColors.faint : FbColors.muted) + Column({ space: 1 }) { + Text(it.label) + .fontSize(FbMetric.fontBody) + .fontColor(it.action === '' ? FbColors.faint : FbColors.ink) + if (it.hint !== '') { + Text(it.hint) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + } + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + + if (it.action === '') { + Text('暂未开放') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } else { + Text('›') + .fontSize(FbMetric.fontBody) + .fontColor(FbColors.faint) + } + } + .width('100%') + .padding({ left: 12, right: 12, top: 12, bottom: 12 }) + .borderRadius(FbMetric.radiusS) + .margin({ bottom: 6 }) + .backgroundColor(it.action === '' ? Color.Transparent : FbColors.inputBg) + .alignItems(VerticalAlign.Center) + .onClick((): void => { + // ⚠️ 未实现的项**点了不响应**（不是"关闭浮层"）—— + // 否则用户以为"点了进去但没东西" + if (it.action !== '') { + this.onPick(it.action); + } + }) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbMovieDetailSheet.ets b/entry/src/main/ets/components/FbMovieDetailSheet.ets new file mode 100644 index 0000000..61e1061 --- /dev/null +++ b/entry/src/main/ets/components/FbMovieDetailSheet.ets @@ -0,0 +1,506 @@ +/** + * 家书 FamilyBook · 观影详情浮层（鸿蒙端） + * + * 点观影卡片后弹出，展示：海报大图、片名、时间、影院（含地址）、 + * 剧情简介、评分、同看的人、照片。 + * + * 🔴 为什么用**页面内浮层（Stack 覆盖）**而不是系统弹窗： + * ① 系统弹窗（`AlertDialog` / `CustomDialog`）受"多弹窗堆叠""后台不许弹" + * 等一堆约束，还要处理生命周期； + * ② 浮层就是一个普通组件，**状态完全由父页面掌控**（`@Param` 一个 + * `visible` 就行），要加动画/手势/局部刷新都自由。 + * 本项目 Web 端 v43 也是这个思路（`?embed=1` 浮层而不是整页跳转）。 + * + * ⚠️ 详情数据是**异步拉的**（网络），所以这个组件要处理三种态： + * 加载中 / 成功 / 失败。别只画成功态 —— 断网时用户会看到"空白浮层"。 + */ + +import { FbColors, FbMetric } from '../common/Theme'; +import { FbMovieAttendeeRow, FbMovieDetail } from '../data/FbMovieRepo'; +import { fbImageUrl } from '../data/FbHttp'; +import { FB_TOKEN_STORE } from '../data/FbTokenStore'; +import { FbAvatar, FbRating } from './Widgets'; + +/** + * 照片缩略图的宽高比。 + * + * 🔴 **实测值**：线上照片是 **270×377**（`270/377 ≈ 0.7162`）。 + * 别改成 1（正方形）—— 竖版照片会被裁掉上下大半，用户一眼就看出不对。 + * ⚠️ 服务端目前上传的图都是这个尺寸（4 张实测一致）， + * 若将来允许不同比例，应改成"每张读自己的尺寸"而不是统一比例。 + */ +const FB_PHOTO_RATIO: number = 270 / 377; + +@ComponentV2 +export struct FbMovieDetailSheet { + /** 要展示的详情（null = 还在加载） */ + @Param detail: FbMovieDetail | null = null; + /** 加载中标志（与 detail 配合：加载中时 detail 也可能是 null） */ + @Param loading: boolean = false; + /** 加载失败信息（空串 = 没失败） */ + @Param error: string = ''; + /** 列表项带过来的评分（详情接口不给，见 FbMovieRepo.detail 的说明） */ + @Param listRating: number = 0; + @Param listReviewCount: number = 0; + /** 关闭回调 */ + @Event onClose: () => void = (): void => { + }; + + // ---- 全屏大图查看器 ---- + /** 查看器是否打开 */ + @Local viewerOpen: boolean = false; + /** 查看器当前显示第几张 */ + @Local viewerIndex: number = 0; + /** 查看器里的图片列表（打开时快照，避免与详情刷新打架） */ + @Local viewerList: string[] = []; + + /** + * 详情里所有可看的图：**票根在前 + 现场照片**。 + * + * ⚠️ 与 Web 端口径一致（`templates/movies/show.php` 把票根和照片 + * "合成一块展示、同一套灯箱"，注释里写明了不再分类）。 + * 端上也别分类 —— 用户关心的是"这次观影的照片"，不是它的来源。 + */ + private allPhotos(d: FbMovieDetail): string[] { + const out: string[] = []; + if (d.ticketKey !== '') { + out.push(d.ticketKey); + } + for (const k of d.photos) { + out.push(k); + } + return out; + } + + /** 打开全屏查看器（点缩略图时） */ + private openViewer(key: string): void { + const list: string[] = this.allPhotos(this.detail !== null + ? this.detail : this.emptyForViewer()); + const idx: number = list.indexOf(key); + if (idx < 0) { + return; + } + this.viewerList = list; + this.viewerIndex = idx; + this.viewerOpen = true; + } + + /** 查看器用的空详情（列表为空时 openViewer 不会走到，仅类型需要） */ + private emptyForViewer(): FbMovieDetail { + return { + ok: false, error: '', id: 0, title: '', startsAt: '', endsAt: '', note: '', + info: '', posterKey: '', ticketKey: '', cinemaName: '', cinemaPlace: '', + cinemaAddress: '', cinemaColor: '', myRating: 0, myReview: '', + reviewCount: 0, reviewAvg: 0, attendees: [], photos: [] + }; + } + + /** 上一张 / 下一张（**循环**：到末张再往后回到第一张） */ + private viewerStep(delta: number): void { + const n: number = this.viewerList.length; + if (n === 0) { + return; + } + // ⚠️ 必须取模归一到 [0,n)：直接加会让 index 越界 / 变成负数 + this.viewerIndex = ((this.viewerIndex + delta) % n + n) % n; + } + + /** + * 时间显示：'YYYY-MM-DD HH:mm'（去掉秒）。 + * ⚠️ 之前这里写错过一次（把小时当分钟取），时用 substring(11,13)。 + */ + private shortTime(v: string): string { + if (v.length < 16) { + return v; + } + return v.substring(0, 16); + } + + build() { + // FB_WRAP_CENTER：把卡片**垂直居中**（用户 2026-10-16 要求：浮在屏幕中间）。 + // ⚠️ 居中放在**组件内部**做，而不是改宿主的 Stack 对齐 —— + // 宿主 Stack 里还有别的子元素（日程页的悬浮 ＋），改对齐会连带挪走它们。 + // ⚠️ 外层铺满 + Center；内层仍是那张 92% 宽的圆角卡。 + Column() { + // 🔴 用 Stack 把"浮层内容"和"全屏查看器"叠起来： + // 查看器要盖住整个浮层（含它自己的圆角/把手），所以必须是 + // **同一个 Stack 里的后声明节点**，不能放进浮层内部的 Column + // （那会被浮层的圆角裁剪、也会被内层 Scroll 的滚动带走）。 + Stack({ alignContent: Alignment.Center }) { + Column({ space: 0 }) { + this.sheetHeader() + this.sheetBody() + } + .width('100%') + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + // ⚠️ 同样用 `Default`（不写）。`Block` 会挡住浮层内部的子节点 + // （照片缩略图、关闭按钮都点不动）。 + // `Default` 已足够：浮层在遮罩之后声明 ⇒ 是兄弟节点、会被优先命中。 + + // ---- 全屏大图查看器 ---- + if (this.viewerOpen) { + this.viewer() + } + } + .width('100%') + // ⚠️ 高度随内容自适应（浮层是"底部抽屉"形态）。 + // 🔴 但**查看器打开时必须撑满**：查看器要盖住整屏， + // 如果这里还是内容高度，查看器会被裁在一小块里， + // 而且**它没盖住的地方点击会穿透到外层的遮罩** —— + // 表现就是"点查看器的 ✕，结果把详情浮层也一起关了" + // （ 2026-10-12 实测到的 bug）。 + .height(this.viewerOpen ? '100%' : undefined) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + .hitTestBehavior(HitTestMode.Transparent) + } + + /** 浮层顶部：把手 + 关闭 */ + @Builder + sheetHeader() { + Row() { + // 把手（视觉提示"可以关掉"） + Column() + .width(36) + .height(4) + .backgroundColor(FbColors.line2) + .borderRadius(2) + Blank() + Text('关闭') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .padding({ left: 10, right: 10, top: 6, bottom: 6 }) + .onClick((): void => { + this.onClose(); + }) + } + .width('100%') + .alignItems(VerticalAlign.Center) + .padding({ left: 16, right: 16, top: 8, bottom: 4 }) + } + + /** 浮层主体（三种态） */ + @Builder + sheetBody() { + Column({ space: 0 }) { + if (this.error !== '') { + // 失败：明确告诉用户，别留白 + Column({ space: 8 }) { + Text('详情没能加载出来') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + Text(this.error) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .maxLines(3) + .textAlign(TextAlign.Center) + } + .width('100%') + .padding({ top: 40, bottom: 40 }) + .justifyContent(FlexAlign.Center) + } else if (this.loading || this.detail === null) { + Row() { + Text('正在加载详情…') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + } + .width('100%') + .padding({ top: 40, bottom: 40 }) + .justifyContent(FlexAlign.Center) + } else { + this.body(this.detail) + } + } + .width('100%') + } + + /** + * 全屏大图查看器。 + * + * 交互（对齐 Web 端灯箱）： + * · 点背景关闭； + * · 左右两个按钮翻页（**循环**）； + * · 底部显示"第 n / N 张"。 + * + * ⚠️ 图片用 `ImageFit.Contain` 而不是 `Cover`： + * 查看器的目的是"看清整张图"，裁掉边缘就失去意义了。 + * （缩略图用 Cover 保持整齐，大图用 Contain 保证完整 —— 两者目的不同。） + */ + @Builder + viewer() { + // 🔴 必须用一个容器把查看器的所有零件**包在一层里**。 + // `@Builder` 里平铺多个节点时，它们会被依次挂到**父容器**（浮层的 + // Stack）上，各自独立参与布局 —— 结果是遮罩/图/控制条/关闭按钮 + // 全都变成浮层 Stack 的兄弟节点，位置靠 position/margin 硬凑， + // 点击区域互相错位（2026-10-12 实测：点 ✕ 会连带关掉详情浮层）。 + // ⇒ 外层一个 Stack 包住，内部用 alignContent 定位，才是正确写法。 + Stack({ alignContent: Alignment.Center }) { + // ① 全屏背景（点它关闭） + Column() + .width('100%') + .height('100%') + .backgroundColor('#000000E6') + .onClick((): void => { + this.viewerOpen = false; + }) + + // ② 大图 + // ⚠️ `ImageFit.Contain`：查看器的目的是"看清整张图"， + // 裁掉边缘就失去意义（缩略图才用 Cover）。 + Image(fbImageUrl(this.viewerList[this.viewerIndex], FB_TOKEN_STORE.get())) + .width('100%') + .height('76%') + .objectFit(ImageFit.Contain) + + // ③ 底部控制条（靠下对齐） + Row({ space: 18 }) { + Text('‹ 上一张') + .fontSize(FbMetric.fontSmall) + .fontColor('#FFFFFFCC') + .padding({ left: 12, right: 12, top: 8, bottom: 8 }) + .onClick((): void => { + this.viewerStep(-1); + }) + Text((this.viewerIndex + 1).toString() + ' / ' + this.viewerList.length.toString()) + .fontSize(FbMetric.fontTiny) + .fontColor('#FFFFFF99') + Text('下一张 ›') + .fontSize(FbMetric.fontSmall) + .fontColor('#FFFFFFCC') + .padding({ left: 12, right: 12, top: 8, bottom: 8 }) + .onClick((): void => { + this.viewerStep(1); + }) + } + .width('100%') + .justifyContent(FlexAlign.Center) + // ⚠️ 用 `align` 把它压到 Stack 底部，而不是靠 margin 推 + .align(Alignment.Bottom) + .margin({ bottom: 40 }) + + // ④ 右上角关闭（比"点背景"更明确） + // ⚠️ 必须留在 Stack 里当子节点（不能平铺出去）—— + // 平铺会跑到浮层 Stack 上，position 相对的是**浮层**而不是查看器。 + Column({ space: 2 }) { + Text('✕') + .fontSize(FbMetric.fontTitle) + .fontColor('#FFFFFFCC') + Text('关闭') + .fontSize(9) + .fontColor('#FFFFFF88') + } + .padding({ left: 16, right: 16, top: 12, bottom: 12 }) + .align(Alignment.TopEnd) + .onClick((): void => { + this.viewerOpen = false; + }) + } + .width('100%') + .height('100%') + // 🔴 事件拦截取 **`Default`（默认值，不写就行）**，**不能用 `Block`**。 + // 🔴 SDK 原文（`component/enums.d.ts`）说得很清楚： + // · `Default` —— 自身和**子节点**响应，阻挡**兄弟节点**，不影响祖先； + // · `Block` —— 自身响应，**阻挡子节点**、兄弟、祖先； + // · `Transparent` —— 自身和子节点响应，**不阻挡**兄弟和祖先。 + // 需求是"查看器挡住下层遮罩（兄弟），但里面的翻页/关闭按钮要能点（子节点）" + // ⇒ 正是 `Default`。 + // ⚠️ 我一开始用了 `Block`，结果**子节点（缩略图/翻页按钮）全部点不动** + // —— 2026-10-12 实测：点缩略图毫无反应，查 SDK 注释才发现 Block 会挡子节点。 + // + // ⚠️ 这里**不额外加 onClick**：加了会让"点查看器任意处"都关掉查看器， + // 而遮罩层（子节点之一）已经负责"点空白关闭"，两者会打架。 + // 靠 `Default` + 遮罩子节点即可：遮罩铺满、点它关闭； + // 翻页/关闭按钮在遮罩**之后**声明，层级更高、优先响应。 + } + + /** 成功态的主体 */ + @Builder + body(d: FbMovieDetail) { + Scroll() { + Column({ space: 10 }) { + // ---- 海报（大图，2:3）---- + if (d.posterKey !== '') { + Image(fbImageUrl(d.posterKey, FB_TOKEN_STORE.get())) + .width(140) + .aspectRatio(0.75) + .objectFit(ImageFit.Cover) + .borderRadius(FbMetric.radiusS) + .alt($r('app.media.fb_ic_movies')) + } + + // ---- 片名 ---- + Text(d.title) + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + .textAlign(TextAlign.Center) + + // ---- 时间 ---- + Text(this.shortTime(d.startsAt) + + (d.endsAt !== '' ? ' — ' + this.shortTime(d.endsAt).substring(11) : '')) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + + // ---- 评分（来自列表项，见 FbMovieRepo.detail 说明）---- + if (this.listReviewCount > 0) { + Row({ space: 6 }) { + FbRating({ score: this.listRating, max: 10 }) + Text(this.listRating.toFixed(1).toString() + ' 分 · ' + + this.listReviewCount.toString() + ' 条评价') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } + .alignItems(VerticalAlign.Center) + } + + // ---- 影院 ---- + if (d.cinemaName !== '') { + Column({ space: 4 }) { + Row({ space: 6 }) { + Column() + .width(6) + .height(6) + .backgroundColor(d.cinemaColor !== '' ? d.cinemaColor : FbColors.muted) + .borderRadius(3) + Text(d.cinemaName) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + } + .alignItems(VerticalAlign.Center) + if (d.cinemaAddress !== '') { + Text(d.cinemaAddress) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .maxLines(2) + } + } + .width('100%') + .alignItems(HorizontalAlign.Center) + } + + // ---- 同看的人 ---- + if (d.attendees.length > 0) { + Column({ space: 6 }) { + Text('同看的人') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + Row({ space: 10 }) { + ForEach(d.attendees, (a: FbMovieAttendeeRow) => { + Column({ space: 3 }) { + FbAvatar({ + name: a.myNickname !== '' ? a.myNickname : a.name, + // ⚠️ 用接口给的头像色（`avatar_color`）；没有才退回灰。 + // 别写死一个灰 —— 那样所有人的头像都是同一个颜色。 + color: a.avatarColor !== undefined && a.avatarColor !== '' + ? a.avatarColor : '#A84A28', + dia: 34 + }) + Text(a.myNickname !== '' ? a.myNickname : a.name) + .fontSize(10) + .fontColor(FbColors.muted) + .maxLines(1) + } + }, (a: FbMovieAttendeeRow): string => 'att_' + a.id.toString()) + } + } + .width('100%') + .alignItems(HorizontalAlign.Center) + } + + // ---- 剧情简介 ---- + if (d.info !== '') { + Column({ space: 6 }) { + Text('简介') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + Text(d.info) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + // ⚠️ 不设 maxLines：简介本来就长，让用户滚着看全文 + .textAlign(TextAlign.Start) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + + // ---- 备注 ---- + if (d.note !== '') { + Column({ space: 6 }) { + Text('备注') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + Text(d.note) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + + // ---- 照片（票根 + 现场照片合成一块，与 Web 端一致）---- + if (this.allPhotos(d).length > 0) { + Column({ space: 6 }) { + Row({ space: 6 }) { + Text('观影照片') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + Text(this.allPhotos(d).length.toString() + ' 张') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } + .alignItems(VerticalAlign.Center) + + Grid() { + ForEach(this.allPhotos(d), (k: string) => { + GridItem() { + // 🔴 缩略图必须按**照片真实比例**做格子。 + // 实测线上照片是 **270×377（竖版，比例 ≈0.716）**， + // 而第一版用的是**正方形格子**（GridItem 没有固定高度， + // 由 Grid 行高决定）⇒ 竖版照片被 `Cover` 裁掉上下大半， + // "看起来格式不对"。用户 2026-10-12 反馈的就是这个。 + Column() { + Image(fbImageUrl(k, FB_TOKEN_STORE.get())) + .width('100%') + .height('100%') + .objectFit(ImageFit.Cover) + .alt($r('app.media.fb_ic_movies')) + } + .width('100%') + // ⚠️ 用 `aspectRatio` 指定比例，而不是靠父容器推： + // 在 Grid 里 `height('100%')` 拿不到确定的高度 + // （行高是内容决定的），必须显式给比例。 + .aspectRatio(FB_PHOTO_RATIO) + .clip(true) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.openViewer(k); + }) + } + }, (k: string): string => 'ph_' + k) + } + .columnsTemplate('1fr 1fr 1fr') + .columnsGap(6) + .rowsGap(6) + .width('100%') + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + } + .width('100%') + .padding({ left: 16, right: 16, top: 4, bottom: 28 }) + .alignItems(HorizontalAlign.Center) + } + // 🔴 用户 2026-10-16：「它应该弹出一个**圆角的、浮在上面的卡片**…… + // **不要让它左右充满整个屏幕，下面也不要挨着屏幕**， + // 而是放在**屏幕中间**，采用**圆角浮窗**式的形式。」 + // ⇒ 不再贴底满宽：左右留边、四角圆角、垂直居中（由宿主的 Stack 对齐）。 + .width('92%') + .constraintSize({ maxHeight: '72%' }) + .scrollBar(BarState.Off) + .edgeEffect(EdgeEffect.Spring) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbPersonEditSheet.ets b/entry/src/main/ets/components/FbPersonEditSheet.ets new file mode 100644 index 0000000..00de747 --- /dev/null +++ b/entry/src/main/ets/components/FbPersonEditSheet.ets @@ -0,0 +1,1415 @@ +/** + * 家书 FamilyBook · 人员编辑浮层（鸿蒙端） + * + * 🔴 v52 重写（用户 2026-10-15）： + * 「我们现在这个应用打造的目的就是为了让用户可以**完全脱离电脑端**…… + * 编辑的时候，**所有的内容都应该可以编辑**，完成所有的功能才行。」 + * + * 于是这里覆盖了**网页端表单的全部字段**（`templates/people/form.php`）： + * 姓名 / 性别 / 家中排行 / 生日(阳历+农历+闰月) / 主手机号 / 补充电话 + * 单位 / 职务 / 座右铭 / 邮箱 / 网址 / 身份证 / 结构化地址五级 / 详细地址 + * 公共备注 / **我的私人备注** / 标签 / 工作经历(多段) / 虚拟人物标记 + * + * ⚠️ 服务端同步扩过了（`PATCH /api/v1/people/` 收全字段）， + * 并且**没传的字段一律沿用旧值** ⇒ 本页"全量发一遍"也不会误清空。 + * ⚠️ 头像走**单独接口**（`POST /people//avatar`，multipart）， + * 不在这个 JSON 请求里 —— 见 `uploadAvatar()`。 + * + * ⚠️ 与详情浮层的关系： + * 详情是"只读卡片"、编辑是"可写卡片"，两者都是**页面内的覆盖层**。 + * 编辑**从详情里点「编辑」进来**（详情 → 编辑）， + * 这样用户不用在列表上找两次入口。 + */ + +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { FbColors, FbMetric } from '../common/Theme'; +import { FbRosterPerson, FbJobRow, FbContactRow } from '../data/FbPersonRepo'; +import { FB_TOKEN_STORE } from '../data/FbTokenStore'; +import { FbApiOptions, FbApiResult, fbApi, fbApiBase, fbImageUrl } from '../data/FbHttp'; +import { FbAvatar } from './Widgets'; +import { http } from '@kit.NetworkKit'; +import { fileIo } from '@kit.CoreFileKit'; +import { picker } from '@kit.CoreFileKit'; +import { common } from '@kit.AbilityKit'; +import { BusinessError } from '@kit.BasicServicesKit'; +import { FbTagPickChip } from './FbTagPickChip'; + +/** + * 贴底卡片的手势区缓冲（vp）。 + * + * 🔴 应用开了全屏布局且**隐藏了系统手势条**（见 EntryAbility）—— + * 手势区不再有任何视觉提示，贴底的卡片必须自己让出这一段， + * 否则最后一排按钮会被"从下往上滑"误触。 + */ +const FB_SHEET_BOTTOM_GAP: number = 16; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbPersonEdit'; + +/** + * 编辑请求体的类型别名。 + * + * ⚠️ 必须用 **`Record`** 这个形状（v52 放宽后允许嵌套）： + * ArkTS **不允许 interface 隐式转 Record**，也不允许无类型对象字面量 + * （`arkts-no-untyped-obj-literals`）⇒ 用 Record 声明变量再赋值。 + */ +type FbPersonEditBody = Record; + +/** 一行标签输入用的可变行（服务端收的是 string[]，这里带个稳定 key 供 ForEach） */ +interface FbEditContactRow { + key: string; + label: string; + value: string; +} + +/** + * 发出去的补充联系方式行。 + * + * ⚠️ 为什么要有这个 interface（而不是直接写对象字面量）： + * ArkTS 报 `arkts-no-untyped-obj-literals` —— **对象字面量必须对应一个 + * 显式声明的 class/interface**。所以先声明形状，构造时用 `as` 转一次。 + */ +interface FbOutContactRow { + label: string; + value: string; +} + +/** 发出去的工作经历行（**注意是服务端要的下划线列名**，不是端上的驼峰） */ +interface FbOutJobRow { + org: string; + title: string; + rank_name: string; + start_ym: string; + end_ym: string; + note: string; +} + +/** 发出去的「补充联系方式」（按类型分组，服务端就是这个形状） */ +interface FbOutContacts { + phone: FbOutContactRow[]; + email: FbOutContactRow[]; + address: FbOutContactRow[]; + url: FbOutContactRow[]; +} + +/** 工作经历编辑行（与 `FbJobRow` 同构 + 一个稳定 key） */ +interface FbEditJobRow { + key: string; + org: string; + title: string; + rankName: string; + startYm: string; + endYm: string; + note: string; +} + +@ComponentV2 +export struct FbPersonEditSheet { + /** 要编辑的人（null = 没打开 / 或"新建"模式，见 isCreate） */ + @Param person: FbRosterPerson | null = null; + /** + * **新建模式**（用户 2026-10-15：全功能客户端的「添加」也必须能用）。 + * + * ⚠️ 与"编辑"的差别只在**收尾**： + * 编辑走 `PATCH /people/`（改现有的人）， + * 新建走 `POST /people`（服务端会返回新 id，并自动进我的名册）。 + * ⚠️ 表单字段完全一样 —— 所以不再另做一个"新建浮层"， + * 少一套要维护的字段（本项目已经在"两份映射"上踩过坑）。 + */ + @Param isCreate: boolean = false; + /** + * **已有标签**（名册的标签云）—— 编辑时**点选**用，不是让人手输。 + * + * 🔴 用户 2026-10-16：「名册里面编辑的时候，或者添加的时候， + * 人的标签**应该是选择的**吧？应该让人**选择多个**， + * 而不是直接在这里输入文本。」 + * ⚠️ 除了点选已有标签，**还要能新建**（服务端收的是任意字符串数组， + * 没有"必须先建标签"的限制）⇒ 下面给了"新标签"输入框 + 加号。 + */ + @Param knownTags: string[] = []; + /** 取消 */ + @Event onCancel: () => void = (): void => { + }; + /** 保存成功（交给上层刷新） */ + @Event onSaved: () => void = (): void => { + }; + /** + * 删除成功（交给上层刷新）。 + * + * ⚠️ 与 `onSaved` 分开：删除后列表要**重新拉一次**（那个人整条消失）， + * 而保存只需刷新那一个人的显示 —— 语义不同，上层处理也不同。 + */ + @Event onDeleted: () => void = (): void => { + }; + + // ============================================================ + // 表单状态（初值由 aboutToAppear 从 person 填） + // ============================================================ + @Local fName: string = ''; + @Local fGender: string = ''; + @Local fBirthRank: string = ''; + /** 阳历生日 `YYYY-MM-DD` */ + @Local fBirthdaySolar: string = ''; + /** 农历生日 `YYYY-MM-DD`（服务端要完整日期；只填月日也收） */ + @Local fBirthdayLunar: string = ''; + @Local fLunarLeap: boolean = false; + @Local fPhone: string = ''; + @Local fOrg: string = ''; + @Local fTitle: string = ''; + @Local fSlogan: string = ''; + @Local fEmail: string = ''; + @Local fAddress: string = ''; + @Local fAddrCountry: string = ''; + @Local fAddrProvince: string = ''; + @Local fAddrCity: string = ''; + @Local fAddrDistrict: string = ''; + @Local fIdCard: string = ''; + @Local fNote: string = ''; + /** + * 「我对他的称呼」（用户 2026-10-15 要求：编辑里必须有这一项）。 + * + * ⚠️ 它是**视角属性**（只影响我看到的名字），服务端存在 `nicknames` 表， + * 与 `persons` 分开 ⇒ 走 `my_nickname` 字段单独提交（见 `save()`）。 + * 清空 = 恢复成用姓名显示。 + */ + @Local fNickname: string = ''; + @Local fMyNote: string = ''; + /** + * 已选标签（**多选**；服务端收 `string[]`）。 + * + * ⚠️ 不再是"逗号分隔的文本" —— 那样用户得记住分隔符、还会输错。 + * ⇒ 改成点选/取消（见 `tagPicker()`），另给一个输入框新建标签。 + */ + @Local fTags: string[] = []; + /** 新建标签的输入框内容 */ + @Local newTag: string = ''; + @Local fPlaceholder: boolean = false; + /** 补充联系方式（四类各一组可增删行） */ + @Local cPhones: FbEditContactRow[] = []; + @Local cEmails: FbEditContactRow[] = []; + @Local cAddresses: FbEditContactRow[] = []; + @Local cUrls: FbEditContactRow[] = []; + /** 工作经历（可增删行） */ + @Local jobs: FbEditJobRow[] = []; + + /** 保存中（防连点） */ + @Local busy: boolean = false; + /** 错误提示 */ + @Local err: string = ''; + /** + * 删除确认弹窗是否显示。 + * + * 🔴 删除是**真实删服务端数据、不可逆**（用户 2026-10-15 选择"弹确认框"） + * ⇒ 必须先问一次，不能点一下就删。 + * ⚠️ 用页面内的**自定义遮罩**而不是 `AlertDialog`： + * 本项目所有浮层都是"页面内覆盖层"（见 FbPersonSheet 的文件头）， + * 混用系统弹窗会让视觉与交互都不统一。 + */ + @Local confirmDel: boolean = false; + /** 删除中（防连点） */ + @Local deleting: boolean = false; + /** 自增 key（给增删行用，避免 ForEach key 冲突） */ + private seq: number = 0; + /** + * **待上传的头像**（用户选了图、但还没传）。 + * + * 🔴 为什么需要它（用户 2026-10-15 报的真 bug：「新增的时候点"换头像"却没有用」）： + * 头像接口是 `POST /people//avatar` —— **需要 id**， + * 而新建模式下这个人**还不存在、没有 id** ⇒ 当场传不了。 + * 旧代码更糟：`pickAvatar()` 开头就 `if (person === null) return;` + * ⇒ 新建时点"换头像"**什么都不发生**（连选图都不弹）。 + * ⇒ 改法：新建时先把选中的图**存起来**，等 `POST /people` 建好、 + * 拿到新 id **再传**（见 `save()` 里 `if (this.pendingAvatar !== '')`）。 + */ + private pendingAvatar: string = ''; + /** 新建后上传头像的失败说明（非致命：人不该因为图没上传成功就建不出来） */ + private avatarWarn: string = ''; + + aboutToAppear(): void { + const p: FbRosterPerson | null = this.person; + // 新建模式：不需要回填，全部留空（用户从零填） + if (p === null) { + return; + } + this.fName = p.name; + this.fGender = p.gender; + this.fBirthRank = p.birthRank; + // ⚠️ 服务端生日是 'YYYY-MM-DD HH:mm:ss'，输入框用 'YYYY-MM-DD' + this.fBirthdaySolar = p.birthdayFull; + this.fBirthdayLunar = p.birthdayLunarRaw; + this.fLunarLeap = p.birthdayLunarLeap; + this.fPhone = p.phone; + this.fOrg = p.org; + this.fTitle = p.title; + this.fSlogan = p.slogan; + this.fEmail = p.email; + this.fAddress = p.address; + this.fAddrCountry = p.addrCountry; + this.fAddrProvince = p.addrProvince; + this.fAddrCity = p.addrCity; + this.fAddrDistrict = p.addrDistrict; + this.fIdCard = ''; + this.fNote = p.note; + this.fMyNote = p.myNote; + this.fNickname = p.myNickname; + // 标签：直接拿数组（不再拼成逗号串） + this.fTags = []; + for (const tg of p.tags) { + this.fTags.push(tg); + } + this.newTag = ''; + this.fPlaceholder = false; + + // 补充联系方式（深拷贝，别改到列表那份） + this.cPhones = this.toEditRows(p.contacts.phone, 'ph'); + this.cEmails = this.toEditRows(p.contacts.email, 'em'); + this.cAddresses = this.toEditRows(p.contacts.address, 'ad'); + this.cUrls = this.toEditRows(p.contacts.url, 'ur'); + // 工作经历 + this.jobs = []; + for (const j of p.jobs) { + this.jobs.push(this.toEditJob(j)); + } + } + + private nextKey(prefix: string): string { + this.seq += 1; + return prefix + '_' + this.seq.toString(); + } + + /** 接口行 → 编辑行（带稳定 key） */ + private toEditRows(rows: FbContactRow[], prefix: string): FbEditContactRow[] { + const out: FbEditContactRow[] = []; + for (const r of rows) { + const row: FbEditContactRow = { key: this.nextKey(prefix), label: r.label, value: r.value }; + out.push(row); + } + return out; + } + + /** 工作经历 → 编辑行 */ + private toEditJob(j: FbJobRow): FbEditJobRow { + const row: FbEditJobRow = { + key: this.nextKey('jb'), + org: j.org, title: j.title, rankName: j.rankName, + startYm: j.startYm, endYm: j.endYm, note: j.note + }; + return row; + } + + // ============================================================ + // 小件 + // ============================================================ + + /** 一个输入行 */ + @Builder + field(label: string, value: string, hint: string, onChange: (v: string) => void) { + Column({ space: 4 }) { + Text(label) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + TextInput({ text: value, placeholder: hint }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(40) + .padding({ left: 12, right: 12 }) + .onChange((v: string): void => { + onChange(v); + }) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + + /** + * 标签**多选**（用户 2026-10-16：「标签应该是选择的……选择多个， + * 而不是直接在这里输入文本」）。 + * + * 三部分： + * ① **已选**（当前这个人身上的标签，可以点掉）； + * ② **可选**（名册里已有的其它标签，点一下加上）； + * ③ **新建**（输入框 + 加号 —— 服务端收任意字符串，不要求先建标签）。 + * + * ⚠️ 片用 `FbTagPickChip` **组件**（`@Builder` 的值参数不参与观察， + * 点了不会变样式 —— 本项目已踩 5 次）。 + */ + @Builder + tagPicker() { + Column({ space: 6 }) { + Text('标签') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + + // ① 已选（没有任何已选时给一句提示，免得看着是空白） + if (this.fTags.length === 0) { + Text('还没选标签') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .padding({ top: 2, bottom: 2 }) + } else { + Flex({ wrap: FlexWrap.Wrap }) { + ForEach(this.fTags, (tg: string) => { + FbTagPickChip({ + label: tg, + active: true, + onToggle: (): void => { + this.toggleTag(tg); + } + }) + }, (tg: string): string => 'sel_' + tg) + } + .width('100%') + } + + // ② 可选（名册里已有、但这个人身上还没有的） + if (this.candidates().length > 0) { + Text('点一下加上') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .margin({ top: 2 }) + Flex({ wrap: FlexWrap.Wrap }) { + ForEach(this.candidates(), (tg: string) => { + FbTagPickChip({ + label: tg, + active: false, + onToggle: (): void => { + this.toggleTag(tg); + } + }) + }, (tg: string): string => 'cand_' + tg) + } + .width('100%') + } + + // ③ 新建标签 + Row({ space: 8 }) { + TextInput({ text: this.newTag, placeholder: '新标签，如 大学同学' }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(38) + .padding({ left: 12, right: 12 }) + .layoutWeight(1) + .onChange((v: string): void => { + this.newTag = v; + }) + .onSubmit((): void => { + this.addNewTag(); + }) + Text('＋') + .fontSize(FbMetric.fontBody) + .fontColor(this.newTag.trim() === '' ? FbColors.faint : '#4A7C82') + .width(44) + .height(38) + .textAlign(TextAlign.Center) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.addNewTag(); + }) + } + .width('100%') + .alignItems(VerticalAlign.Center) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + + /** 可选标签 = 已有标签 − 已选（排除自己在"已选"里重复出现） */ + private candidates(): string[] { + const out: string[] = []; + for (const t of this.knownTags) { + if (t.trim() !== '' && this.fTags.indexOf(t) < 0) { + out.push(t); + } + } + return out; + } + + /** 点一下：没选就加上、已选就取消 */ + private toggleTag(tg: string): void { + const at: number = this.fTags.indexOf(tg); + if (at >= 0) { + this.fTags.splice(at, 1); + } else { + this.fTags.push(tg); + } + } + + /** 把输入框里的新标签加上（空 / 重复则不响应） */ + private addNewTag(): void { + const v: string = this.newTag.trim(); + if (v === '' || this.fTags.indexOf(v) >= 0) { + this.newTag = ''; + return; + } + this.fTags.push(v); + this.newTag = ''; + } + + /** 多行输入（备注类） */ + @Builder + area(label: string, value: string, hint: string, onChange: (v: string) => void) { + Column({ space: 4 }) { + Text(label) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + TextArea({ text: value, placeholder: hint }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(72) + .padding({ left: 12, right: 12, top: 8, bottom: 8 }) + .onChange((v: string): void => { + onChange(v); + }) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + + /** 分组小标题（把一大堆字段分开，免得糊成一团） */ + @Builder + section(title: string) { + Text(title) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .margin({ top: 6 }) + } + + /** 性别选择（两段） */ + @Builder + genderPick() { + Column({ space: 4 }) { + Text('性别') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + Row({ space: 8 }) { + this.genderChip('男', 'm') + this.genderChip('女', 'f') + this.genderChip('不填', '') + } + .width('100%') + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + + @Builder + genderChip(label: string, key: string) { + Text(label) + .fontSize(FbMetric.fontSmall) + .fontColor(this.fGender === key ? Color.White : FbColors.muted) + .backgroundColor(this.fGender === key ? '#4A7C82' : FbColors.inputBg) + .borderRadius(FbMetric.radiusPill) + .padding({ left: 14, right: 14, top: 6, bottom: 6 }) + .onClick((): void => { + this.fGender = key; + }) + } + + /** 通用小开关（闰月 / 虚拟人物） */ + @Builder + toggleChip(label: string, on: boolean, onTap: () => void) { + Row({ space: 6 }) { + Text(on ? '✓' : '○') + .fontSize(FbMetric.fontSmall) + .fontColor(on ? Color.White : FbColors.faint) + Text(label) + .fontSize(FbMetric.fontSmall) + .fontColor(on ? Color.White : FbColors.muted) + } + .padding({ left: 12, right: 12, top: 6, bottom: 6 }) + .backgroundColor(on ? '#4A7C82' : FbColors.inputBg) + .borderRadius(FbMetric.radiusPill) + .onClick((): void => { + onTap(); + }) + } + + /** 「+ 加一行」 */ + @Builder + addRowBtn(label: string, onTap: () => void) { + Text('+ ' + label) + .fontSize(FbMetric.fontTiny) + .fontColor('#4A7C82') + .padding({ top: 4, bottom: 4 }) + .onClick((): void => { + onTap(); + }) + } + + /** 一行「说明 + 值 + 删」 */ + @Builder + contactRow(row: FbEditContactRow, placeholder: string, onDel: () => void) { + Row({ space: 6 }) { + TextInput({ text: row.label, placeholder: '说明' }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(38) + .width(74) + .padding({ left: 8, right: 8 }) + .onChange((v: string): void => { + row.label = v; + }) + TextInput({ text: row.value, placeholder: placeholder }) + .placeholderColor(FbColors.faint) + .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 => { + row.value = v; + }) + Text('✕') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + .padding(6) + .onClick((): void => { + onDel(); + }) + } + .width('100%') + } + + /** 一行工作经历（两行输入叠放） */ + @Builder + jobRow(row: FbEditJobRow, onDel: () => void) { + Column({ space: 6 }) { + Row({ space: 6 }) { + TextInput({ text: row.org, placeholder: '单位' }) + .placeholderColor(FbColors.faint) + .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 => { + row.org = v; + }) + Text('✕') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + .padding(6) + .onClick((): void => { + onDel(); + }) + } + .width('100%') + Row({ space: 6 }) { + TextInput({ text: row.title, placeholder: '职务' }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(36) + .layoutWeight(1) + .padding({ left: 10, right: 10 }) + .onChange((v: string): void => { + row.title = v; + }) + TextInput({ text: row.rankName, placeholder: '职称' }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(36) + .layoutWeight(1) + .padding({ left: 10, right: 10 }) + .onChange((v: string): void => { + row.rankName = v; + }) + } + .width('100%') + Row({ space: 6 }) { + TextInput({ text: row.startYm, placeholder: '起始 2015-07' }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(36) + .layoutWeight(1) + .padding({ left: 10, right: 10 }) + .onChange((v: string): void => { + row.startYm = v; + }) + TextInput({ text: row.endYm, placeholder: '结束（空=至今）' }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(36) + .layoutWeight(1) + .padding({ left: 10, right: 10 }) + .onChange((v: string): void => { + row.endYm = v; + }) + } + .width('100%') + } + .width('100%') + .padding(10) + .backgroundColor('#F7F5F2') + .borderRadius(FbMetric.radiusS) + } + + build() { + // 🔴 外层 `Stack` 是**必需**的：本组件有**两个**要显示的层 + // （编辑卡片 + 删除确认遮罩），而 build() 只能有一个根节点。 + // ⚠️ `alignContent: Bottom` 让编辑卡片贴底（与详情卡片同一形态）。 + Stack({ alignContent: Alignment.Bottom }) { + this.editCard() + + // ---- 删除确认（页面内遮罩，盖在卡片之上）---- + if (this.confirmDel) { + this.deleteConfirm() + } + } + .width('100%') + .height('100%') + } + + /** 编辑卡片本体 */ + @Builder + editCard() { + Column({ space: 0 }) { + // ---- 标题 ---- + Row({ space: 12 }) { + FbAvatar({ + name: this.person !== null ? this.person.shown : '', + color: this.person !== null ? this.person.avatarColor : '#A84A28', + dia: 40, + fontSizeVp: 16, + imageUrl: this.avatarUrl() + }) + Column({ space: 2 }) { + Text(this.isCreate ? '添加成员' : '编辑资料') + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Text(this.isCreate ? '填多少算多少，之后都能再改' : '全部字段都能改，改完点保存') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + // 换头像（单独走 multipart 接口） + Text('换头像') + .fontSize(FbMetric.fontTiny) + .fontColor('#4A7C82') + .padding({ left: 10, right: 10, top: 6, bottom: 6 }) + .border({ width: 1, color: '#4A7C82' }) + .borderRadius(FbMetric.radiusPill) + .onClick((): void => { + this.pickAvatar(); + }) + } + .width('100%') + .alignItems(VerticalAlign.Center) + + Scroll() { + Column({ space: 12 }) { + this.section('基本') + this.field('姓名', this.fName, '必填', (v: string): void => { + this.fName = v; + }) + // 🔴 「我怎么称呼他」—— 只有我看得到（视角属性），与姓名分开 + this.field('我对他的称呼', this.fNickname, + '只影响你看到的叫法，留空 = 用姓名', (v: string): void => { + this.fNickname = v; + }) + this.genderPick() + this.field('家中排行', this.fBirthRank, '如 1（老大），留空表示没记', (v: string): void => { + this.fBirthRank = v; + }) + this.field('生日（阳历）', this.fBirthdaySolar, '如 1985-11-16', (v: string): void => { + this.fBirthdaySolar = v; + }) + this.field('生日（农历）', this.fBirthdayLunar, '如 1985-10-05', (v: string): void => { + this.fBirthdayLunar = v; + }) + Row({ space: 8 }) { + this.toggleChip('农历闰月', this.fLunarLeap, (): void => { + this.fLunarLeap = !this.fLunarLeap; + }) + this.toggleChip('虚拟人物（还没弄清真实身份）', this.fPlaceholder, (): void => { + this.fPlaceholder = !this.fPlaceholder; + }) + } + .width('100%') + + this.section('联系方式') + this.field('手机号（主号）', this.fPhone, '登录用；留空表示没录', (v: string): void => { + this.fPhone = v; + }) + // ---- 补充电话 ---- + if (this.cPhones.length > 0) { + ForEach(this.cPhones, (row: FbEditContactRow) => { + this.contactRow(row, '手机/座机', (): void => { + this.removeRow(this.cPhones, row.key); + }) + }, (row: FbEditContactRow): string => row.key) + } + this.addRowBtn('补充电话', (): void => { + this.cPhones.push({ key: this.nextKey('ph'), label: '', value: '' }); + }) + this.field('邮箱', this.fEmail, '如 a@b.com', (v: string): void => { + this.fEmail = v; + }) + if (this.cEmails.length > 0) { + ForEach(this.cEmails, (row: FbEditContactRow) => { + this.contactRow(row, '邮箱', (): void => { + this.removeRow(this.cEmails, row.key); + }) + }, (row: FbEditContactRow): string => row.key) + } + this.addRowBtn('补充邮箱', (): void => { + this.cEmails.push({ key: this.nextKey('em'), label: '', value: '' }); + }) + if (this.cUrls.length > 0) { + ForEach(this.cUrls, (row: FbEditContactRow) => { + this.contactRow(row, '网址', (): void => { + this.removeRow(this.cUrls, row.key); + }) + }, (row: FbEditContactRow): string => row.key) + } + this.addRowBtn('网址', (): void => { + this.cUrls.push({ key: this.nextKey('ur'), label: '', value: '' }); + }) + + this.section('地址') + this.field('国家', this.fAddrCountry, '如 中国', (v: string): void => { + this.fAddrCountry = v; + }) + Row({ space: 8 }) { + Column({ space: 4 }) { + Text('省') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + TextInput({ text: this.fAddrProvince, placeholder: '山东省' }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(40) + .padding({ left: 10, right: 10 }) + .onChange((v: string): void => { + this.fAddrProvince = v; + }) + } + .layoutWeight(1) + .alignItems(HorizontalAlign.Start) + Column({ space: 4 }) { + Text('市') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + TextInput({ text: this.fAddrCity, placeholder: '青岛市' }) + .placeholderColor(FbColors.faint) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .height(40) + .padding({ left: 10, right: 10 }) + .onChange((v: string): void => { + this.fAddrCity = v; + }) + } + .layoutWeight(1) + .alignItems(HorizontalAlign.Start) + } + .width('100%') + this.field('区/县', this.fAddrDistrict, '如 黄岛区', (v: string): void => { + this.fAddrDistrict = v; + }) + this.field('详细地址', this.fAddress, '街道门牌', (v: string): void => { + this.fAddress = v; + }) + if (this.cAddresses.length > 0) { + ForEach(this.cAddresses, (row: FbEditContactRow) => { + this.contactRow(row, '其它地址', (): void => { + this.removeRow(this.cAddresses, row.key); + }) + }, (row: FbEditContactRow): string => row.key) + } + this.addRowBtn('其它地址', (): void => { + this.cAddresses.push({ key: this.nextKey('ad'), label: '', value: '' }); + }) + + this.section('工作') + this.field('单位', this.fOrg, '如 中国海洋大学', (v: string): void => { + this.fOrg = v; + }) + this.field('职务', this.fTitle, '如 副院长', (v: string): void => { + this.fTitle = v; + }) + if (this.jobs.length > 0) { + ForEach(this.jobs, (row: FbEditJobRow) => { + this.jobRow(row, (): void => { + this.removeJob(row.key); + }) + }, (row: FbEditJobRow): string => row.key) + } + this.addRowBtn('工作经历', (): void => { + this.jobs.push({ + key: this.nextKey('jb'), org: '', title: '', rankName: '', + startYm: '', endYm: '', note: '' + }); + }) + + this.section('其它') + this.field('座右铭', this.fSlogan, '一句话（只有本人能改）', (v: string): void => { + this.fSlogan = v; + }) + this.tagPicker() + this.field('身份证', this.fIdCard, this.idCardHint(), (v: string): void => { + this.fIdCard = v; + }) + this.area('备注（大家都能看）', this.fNote, '爱吃辣、对芒果过敏……', (v: string): void => { + this.fNote = v; + }) + this.area('我的备注（只有我看得到）', this.fMyNote, '我对这个人的印象/提醒', (v: string): void => { + this.fMyNote = v; + }) + + if (this.err !== '') { + Text(this.err) + .fontSize(FbMetric.fontTiny) + .fontColor('#A32D2D') + .width('100%') + } + } + .width('100%') + .padding({ top: 14 }) + } + .layoutWeight(1) + .width('100%') + .scrollBar(BarState.Off) + .align(Alignment.TopStart) + + // ---- 按钮：删除 / 取消 / 保存 ---- + // 🔴 用户 2026-10-15：「卡片上面有一个编辑按钮；点击编辑之后， + // 下面应该有编辑、删除之类的操作，或者关闭按钮。」 + // ⇒ 编辑态给三颗：**删除**（左，红色描边）/ 取消 / 保存。 + // ⚠️ 删除单独放最左、且用**描边**而不是实心红： + // 它是破坏性操作，不该和"保存"抢视觉重心（防误点）。 + if (this.deleting) { + Text('删除中…') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + .textAlign(TextAlign.Center) + .width('100%') + .height(42) + .margin({ top: 16 }) + } else { + Row({ space: 10 }) { + // 新建模式没有"删除"（这人还不存在） + if (!this.isCreate) { + Text('删除') + .fontSize(FbMetric.fontSmall) + .fontColor('#C0533F') + .textAlign(TextAlign.Center) + .height(42) + .padding({ left: 18, right: 18 }) + .border({ width: 1, color: '#C0533F' }) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + if (!this.busy) { + this.confirmDel = true; + } + }) + } + Text('取消') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(42) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.onCancel(); + }) + Text(this.busy ? '保存中…' : (this.isCreate ? '创建' : '保存')) + .fontSize(FbMetric.fontSmall) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(42) + .backgroundColor(this.busy ? '#4A7C8288' : '#4A7C82') + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + if (!this.busy) { + this.save(); + } + }) + } + .width('100%') + .margin({ top: 16 }) + } + } + .width('100%') + .constraintSize({ maxHeight: '82%' }) + .padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP }) + .backgroundColor(FbColors.surface) + .borderRadius({ topLeft: FbMetric.radius, topRight: FbMetric.radius }) + .alignItems(HorizontalAlign.Start) + } + + /** + * 删除确认浮层。 + * + * ⚠️ 文案要**说清后果**："会从名册里移除，不可撤销"—— + * 只写"确定删除吗"用户不知道删的是"名册里这一条"还是"整个人的账号"。 + * ⚠️ 默认焦点/位置：**取消在左、删除在右**，且删除用红色实心 + * （进入确认这一层后，用户已经明确意图，可以让它显眼）。 + */ + @Builder + deleteConfirm() { + Column() { + Column({ space: 8 }) { + Text('删除「' + (this.person !== null ? this.person.shown : '') + '」？') + .fontSize(FbMetric.fontBody) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Text('会把这个人的资料从名册里移除，不能撤销。') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + .maxLines(2) + + Row({ space: 10 }) { + Text('取消') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(42) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.confirmDel = false; + }) + Text('删除') + .fontSize(FbMetric.fontSmall) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(42) + .backgroundColor('#C0533F') + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.confirmDel = false; + this.doDelete(); + }) + } + .width('100%') + .margin({ top: 10 }) + } + .width('100%') + .padding(18) + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + .alignItems(HorizontalAlign.Start) + } + .width('100%') + .height('100%') + // 遮罩盖满整屏（点空白处关掉 = 取消） + .justifyContent(FlexAlign.Center) + .padding({ left: 32, right: 32 }) + .backgroundColor('#00000066') + .onClick((): void => { + this.confirmDel = false; + }) + } + + // ============================================================ + // 辅助 + // ============================================================ + + private avatarUrl(): string { + if (this.person === null) { + return ''; + } + // ⚠️ 与其他地方同一套：必须用 fbImageUrl 拼带令牌的绝对地址 + // 🔴 v55：**不再自己拼**「基址 + /media.php?...」—— + // 服务器地址已经是运行期可配置的（见 FbServerStore）， + // 自己拼的人漏改一处就会对着旧服务器要图片（表现为"换了服务器头像全裂"）。 + return fbImageUrl(this.person.avatar, FB_TOKEN_STORE.get()); + } + + private idCardHint(): string { + const masked: string = this.person !== null ? this.person.idCardMasked : ''; + return masked !== '' ? ('当前 ' + masked + '，重填才改') : '留空表示没录'; + } + + /** 删掉一行补充联系方式 */ + private removeRow(list: FbEditContactRow[], key: string): void { + for (let i = 0; i < list.length; i++) { + if (list[i].key === key) { + list.splice(i, 1); + return; + } + } + } + + /** 删掉一段工作经历 */ + private removeJob(key: string): void { + for (let i = 0; i < this.jobs.length; i++) { + if (this.jobs[i].key === key) { + this.jobs.splice(i, 1); + return; + } + } + } + + /** 把编辑行转成接口要的形状（丢掉全空的行） */ + private rowsOut(rows: FbEditContactRow[]): FbOutContactRow[] { + const out: FbOutContactRow[] = []; + for (const r of rows) { + const v: string = r.value.trim(); + if (v === '') { + continue; + } + const row: FbOutContactRow = { label: r.label.trim(), value: v }; + out.push(row); + } + return out; + } + + /** 工作经历 → 接口形状（丢掉整段都空的行） */ + private jobsOut(): FbOutJobRow[] { + const out: FbOutJobRow[] = []; + for (const j of this.jobs) { + const org: string = j.org.trim(); + const title: string = j.title.trim(); + const rank: string = j.rankName.trim(); + if (org === '' && title === '' && rank === '') { + continue; + } + const row: FbOutJobRow = { + org: org, title: title, rank_name: rank, + start_ym: j.startYm.trim(), end_ym: j.endYm.trim(), note: j.note.trim() + }; + out.push(row); + } + return out; + } + + /** + * 已选标签 → 数组。 + * + * ⚠️ 现在 `fTags` **本身就是数组**（点选得来的）—— + * 这里只需去重、去空白、顺带把输入框里没点"加号"的那条也带上 + * （用户输了字直接点保存是很自然的行为，不该丢）。 + */ + private tagsOut(): string[] { + const out: string[] = []; + const seen: string[] = []; + const push = (raw: string): void => { + const v: string = raw.trim(); + if (v !== '' && seen.indexOf(v) < 0) { + seen.push(v); + out.push(v); + } + }; + for (const t of this.fTags) { + push(t); + } + push(this.newTag); // 输入框里没提交的那条也算上 + return out; + } + + // ============================================================ + // 网络 + // ============================================================ + + /** + * 换头像（`POST /api/v1/people//avatar`，multipart）。 + * + * 🔴 为什么单独一个接口、而不是塞进 JSON 保存里： + * 二进制文件只能走 multipart，与 JSON 不是一路； + * 而且网页端也是"上传即生效"（换图就换主色），与保存解耦更简单。 + * ⚠️ 用系统**文件选择器**（`photoViewPicker`）而不是相机权限： + * 选图不需要额外权限，也不会因为没授相机权限而卡住。 + */ + private async pickAvatar(): Promise { + // ⚠️ **不**在这里判 `person === null` —— 新建模式也要能选图 + // （见 pendingAvatar 的说明）。 + const token: string = FB_TOKEN_STORE.get(); + if (token === '') { + this.err = '未登录，无法换头像'; + return; + } + let uri: string = ''; + try { + const pickerOpts: picker.PhotoSelectOptions = new picker.PhotoSelectOptions(); + pickerOpts.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; + pickerOpts.maxSelectNumber = 1; + const photoPicker: picker.PhotoViewPicker = new picker.PhotoViewPicker(); + const sel: picker.PhotoSelectResult = await photoPicker.select(pickerOpts); + if (sel.photoUris.length === 0) { + return; // 用户取消了 + } + uri = sel.photoUris[0]; + } catch (err) { + const e: BusinessError = err as BusinessError; + hilog.warn(DOMAIN, TAG, '选图失败：%{public}s', JSON.stringify(e)); + this.err = '选图失败'; + return; + } + + // ---- 新建模式：先存着，等建好了再传 ---- + if (this.person === null) { + this.pendingAvatar = uri; + this.err = ''; + this.avatarWarn = ''; + return; + } + + // ---- 编辑模式：当场传 ---- + this.busy = true; + this.err = ''; + const ok: string = await this.uploadAvatar(this.person.id, uri, token); + this.busy = false; + if (ok !== '') { + this.err = '头像上传失败：' + ok; + return; + } + this.onSaved(); // 让上层重新拉一次（拿到新头像 URL） + } + + /** + * 真正上传（手工拼 multipart）。 + * + * ⚠️ HarmonyOS 的 `http` 没有现成的 multipart 封装 ⇒ 手写 boundary 与分片。 + * 结构就是标准 multipart/form-data：`--boundary\r\n头\r\n\r\n体\r\n--boundary--`。 + * @returns 空串 = 成功；否则是错误说明 + */ + private async uploadAvatar(id: number, uri: string, token: string): Promise { + const url: string = fbApiBase() + '/api/v1/people/' + id.toString() + '/avatar'; + // 读文件（picker 给的是 file:// URI，用 fileIo 读成 ArrayBuffer） + const file: fileIo.File = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY); + const stat: fileIo.Stat = fileIo.statSync(file.fd); + const buf: ArrayBuffer = new ArrayBuffer(stat.size); + fileIo.readSync(file.fd, buf); + fileIo.closeSync(file); + + const boundary: string = '----FbBoundary' + Date.now().toString(); + const head: string = '--' + boundary + '\r\n' + + 'Content-Disposition: form-data; name="avatar"; filename="avatar.jpg"\r\n' + + 'Content-Type: image/jpeg\r\n\r\n'; + const tail: string = '\r\n--' + boundary + '--\r\n'; + + const req: http.HttpRequest = http.createHttp(); + try { + const resp: http.HttpResponse = await req.request(url, { + method: http.RequestMethod.POST, + header: { + 'Content-Type': 'multipart/form-data; boundary=' + boundary, + 'Authorization': 'Bearer ' + token, + 'Accept': 'application/json' + }, + // ⚠️ 顺序必须是 head(字符串) → 文件(ArrayBuffer) → tail(字符串)， + // 服务端按这个顺序解析出一个 avatar 分片。 + extraData: [head, buf, tail], + connectTimeout: 20000, + readTimeout: 30000, + expectDataType: http.HttpDataType.STRING + }); + if (resp.responseCode >= 200 && resp.responseCode < 300) { + return ''; + } + const body: string = typeof resp.result === 'string' ? resp.result : ''; + return 'HTTP ' + resp.responseCode.toString() + ' ' + body.substring(0, 120); + } catch (err) { + const e: BusinessError = err as BusinessError; + hilog.warn(DOMAIN, TAG, '头像上传异常：%{public}s', JSON.stringify(e)); + return '网络异常'; + } finally { + req.destroy(); + } + } + + /** + * 真删（`DELETE /api/v1/people/`）。 + * + * ⚠️ 服务端是**软删**（`Person::delete` 走 deleted_at），所以"删错了"在 + * 纸面上还能捞回来 —— 但**应用里不提供恢复入口** ⇒ 对用户而言就是不可逆， + * 确认框仍然必要。 + */ + private async doDelete(): Promise { + const p: FbRosterPerson | null = this.person; + if (p === null) { + return; + } + const token: string = FB_TOKEN_STORE.get(); + if (token === '') { + this.err = '未登录，无法删除'; + return; + } + this.deleting = true; + this.err = ''; + const opts: FbApiOptions = { method: 'DELETE', token: token }; + const res: FbApiResult = await fbApi('/api/v1/people/' + p.id.toString(), opts); + this.deleting = false; + if (!res.ok) { + hilog.warn(DOMAIN, TAG, '删除失败：%{public}s', res.error); + this.err = '删除失败：' + res.error; + return; + } + this.onDeleted(); + } + + /** + * 保存（`PATCH /api/v1/people/`），**全字段**。 + * + * ⚠️ 全发而不是"只发改动项"：服务端对没传的字段是"取不到就用原值"， + * 所以两者结果一样，而全发**代码简单得多**（不用维护"哪些脏了"）。 + * ⚠️ 身份证**只有填了才发** —— 服务端给的是打码值，把打码值发回去会把真号覆盖成乱码。 + */ + private async save(): Promise { + const p: FbRosterPerson | null = this.person; + // ⚠️ 新建模式 `person` 是 null（这不是错误，见 isCreate） + if (p === null && !this.isCreate) { + return; + } + const name: string = this.fName.trim(); + if (name === '') { + this.err = '姓名不能为空'; + return; + } + const token: string = FB_TOKEN_STORE.get(); + if (token === '') { + this.err = this.isCreate ? '未登录，无法创建' : '未登录，无法保存'; + return; + } + + this.busy = true; + this.err = ''; + const payload: FbPersonEditBody = {}; + payload['name'] = name; + payload['gender'] = this.fGender; + payload['birth_rank'] = this.fBirthRank.trim(); + payload['birthday_solar'] = this.fBirthdaySolar.trim(); + payload['birthday_lunar'] = this.fBirthdayLunar.trim(); + payload['birthday_lunar_leap'] = this.fLunarLeap; + payload['phone'] = this.fPhone.trim(); + payload['org'] = this.fOrg.trim(); + payload['title'] = this.fTitle.trim(); + payload['slogan'] = this.fSlogan; + payload['email'] = this.fEmail.trim(); + payload['address'] = this.fAddress.trim(); + payload['addr_country'] = this.fAddrCountry.trim(); + payload['addr_province'] = this.fAddrProvince.trim(); + payload['addr_city'] = this.fAddrCity.trim(); + payload['addr_district'] = this.fAddrDistrict.trim(); + payload['note'] = this.fNote; + payload['my_note'] = this.fMyNote; + payload['my_nickname'] = this.fNickname.trim(); + payload['is_placeholder'] = this.fPlaceholder; + payload['tags'] = this.tagsOut(); + payload['jobs'] = this.jobsOut(); + // 补充联系方式：按类型分组 + const contacts: FbOutContacts = { + phone: this.rowsOut(this.cPhones), + email: this.rowsOut(this.cEmails), + address: this.rowsOut(this.cAddresses), + url: this.rowsOut(this.cUrls) + }; + // ⚠️ 逐类都为空时**不发** contacts —— 发一个"全空"会把人家的补充电话清掉； + // 只在用户确实动过（有内容）时才发（服务端是"整组替换"语义）。 + if (this.hasAnyContact()) { + payload['contacts'] = contacts; + } + // 身份证：只在用户重填了才发（打码值不能回传） + const idCard: string = this.fIdCard.trim(); + if (idCard !== '') { + payload['id_card'] = idCard; + } + + // 🔴 新建走 POST（服务端会建人 + 自动进我的名册 + 返回完整详情）； + // 编辑走 PATCH。**表单字段完全一样**，只有路径与方法不同。 + const isNew: boolean = this.isCreate || p === null; + const opts: FbApiOptions = { + method: isNew ? 'POST' : 'PATCH', + token: token, + body: payload, + }; + const path: string = isNew ? '/api/v1/people' : ('/api/v1/people/' + (p as FbRosterPerson).id.toString()); + const res: FbApiResult = await fbApi(path, opts); + this.busy = false; + + if (!res.ok) { + hilog.warn(DOMAIN, TAG, '保存失败：%{public}s', res.error); + this.err = (isNew ? '创建失败：' : '保存失败：') + res.error; + return; + } + + // 🔴 新建时"换头像"选的图**现在才传**（创建前没有 id，见 pendingAvatar 的说明）。 + // ⚠️ 头像失败**不挡创建** —— 人已经建好了，图下次再换即可； + // 提示写在 `avatarWarn` 里由上层展示。 + if (isNew && this.pendingAvatar !== '') { + const newId: number = this.newIdOf(res.data); + if (newId > 0) { + const upErr: string = await this.uploadAvatar(newId, this.pendingAvatar, token); + if (upErr !== '') { + hilog.warn(DOMAIN, TAG, '新建后传头像失败：%{public}s', upErr); + this.avatarWarn = '（头像没传上：' + upErr + '）'; + } + } + this.pendingAvatar = ''; + } + this.onSaved(); + } + + /** 从 `POST /people` 的返回里取新人的 id（取不到返回 0） */ + private newIdOf(json: string): number { + if (json === '') { + return 0; + } + try { + const o: Record = JSON.parse(json) as Record; + const v: Object | undefined = o['id']; + if (typeof v === 'number') { + return v; + } + if (typeof v === 'string') { + return parseInt(v, 10); + } + } catch (err) { + hilog.warn(DOMAIN, TAG, '解析新 id 失败：%{public}s', JSON.stringify(err)); + } + return 0; + } + + /** 四类补充联系方式里有没有任何内容 */ + private hasAnyContact(): boolean { + return this.rowsOut(this.cPhones).length > 0 + || this.rowsOut(this.cEmails).length > 0 + || this.rowsOut(this.cAddresses).length > 0 + || this.rowsOut(this.cUrls).length > 0; + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbPersonSheet.ets b/entry/src/main/ets/components/FbPersonSheet.ets new file mode 100644 index 0000000..83ec371 --- /dev/null +++ b/entry/src/main/ets/components/FbPersonSheet.ets @@ -0,0 +1,481 @@ +/** + * 家书 FamilyBook · 人员详情浮层（鸿蒙端） + * + * 点名册里的一个人 → 弹出他的完整资料（头像 / 姓名 / 称谓 / 单位职务 / + * 手机 / 生日（阳历+农历）/ 邮箱 / 地址 / 座右铭 / 标签 / 备注）。 + * + * 🔴 为什么做成"浮层"而不是新页面： + * 与观影的详情浮层同一个理由（见 `FbMovieDetailSheet` 的文件头）： + * · 用户在名册里"随手点开看看"，看完就关 —— 跳页面会丢失列表的滚动位置， + * 回来还得重新找； + * · 浮层是**页面内的覆盖层**，不动导航栈，关掉即回到原处。 + * ⚠️ 但它**不是**系统弹窗（`bindSheet`/`AlertDialog`）—— + * 那些会带系统边框与动画，且塞不进我们要的自定义布局。 + * + * 数据来源（🔴 v52 重写，用户 2026-10-15）： + * 用户要求「**完全脱离电脑端**，所有信息都显示出来」⇒ 详情不再"用列表那份凑合"： + * · 列表（`/api/v1/roster`）只给画一栏要用的字段； + * · 详情**单独拉 `GET /api/v1/people/`** —— 它多带 + * **工作经历 / 补充联系方式（按类型）/ 私人备注 / 结构化地址五级 / + * 身份证(打码) / 头像 URL / 能不能编辑**。 + * ⚠️ 旧注释里写"`/people/` 字段并不比 roster 多" —— 那是当时的事实， + * v52 起**已经不成立**（服务端这次把详情接口补全了）。 + * ⚠️ 断开网络时退回"用列表里那份"（`person` 本来就是列表那份）， + * 只是缺那几项详情专属字段，界面不会空。 + */ + +import { FbColors, FbMetric } from '../common/Theme'; +import { FbRosterPerson, FbJobRow, FbContactRow } from '../data/FbPersonRepo'; +import { FbAvatar, FbTag } from './Widgets'; +import { fbImageUrl } from '../data/FbHttp'; +import { FB_TOKEN_STORE } from '../data/FbTokenStore'; + +/** + * 贴底卡片的手势区缓冲（vp）。 + * + * 🔴 应用开了全屏布局且**隐藏了系统手势条**（见 EntryAbility）—— + * 手势区不再有任何视觉提示，贴底的卡片必须自己让出这一段， + * 否则最后一排按钮会被"从下往上滑"误触。 + */ +const FB_SHEET_BOTTOM_GAP: number = 16; + + +@ComponentV2 +export struct FbPersonSheet { + /** 要看的人（null = 没打开） */ + @Param person: FbRosterPerson | null = null; + /** 关闭回调 */ + @Event onClose: () => void = (): void => { + }; + /** + * 「编辑」回调（用户要求：悬浮卡片上要有一个"编辑"）。 + * + * ⚠️ 这里**只发事件、不自己做编辑** —— 编辑是另一个浮层（`FbPersonEditSheet`）， + * 由页面决定"关掉详情、打开编辑"。浮层之间不互相引用， + * 免得出现"详情嵌编辑、编辑又嵌详情"的循环。 + */ + @Event onEdit: () => void = (): void => { + }; + + /** 一行的图标资源 */ + private iconOf(name: string): Resource { + switch (name) { + case 'phone': return $r('app.media.fb_ic_user'); + case 'org': return $r('app.media.fb_ic_people'); + case 'birth': return $r('app.media.fb_ic_days'); + case 'mail': return $r('app.media.fb_ic_notes'); + case 'addr': return $r('app.media.fb_ic_resources'); + case 'card': return $r('app.media.fb_ic_notes'); + default: return $r('app.media.fb_ic_dot'); + } + } + + /** + * 生日合并成一行：`阳历 11-16（农历 十月初五）`。 + * + * ⚠️ 阳历/农历**分开两个字段**，但并成一行更好读（两行都只有月日、很短）。 + * 只有农历没阳历时也能显示。 + */ + private birthdayLine(): string { + if (this.person === null) { + return ''; + } + const solar: string = this.person.birthdaySolar; + const lunar: string = this.person.birthdayLunar; + if (solar !== '' && lunar !== '') { + return solar + '（农历 ' + lunar + '）'; + } + if (solar !== '') { + return solar; + } + if (lunar !== '') { + return '农历 ' + lunar; + } + return ''; + } + + /** + * 多行文本块（标题 + 正文）。 + * + * ⚠️ 为什么不用 `infoRow`：工作经历/地址/备注这类**多行等宽信息** + * 配一个小图标反而挤，标题一行、正文一段更清楚。 + */ + @Builder + blockText(label: string, body: string) { + Column({ space: 4 }) { + Text(label) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + Text(body) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .lineHeight(21) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + .margin({ top: 12 }) + } + + /** 工作经历：每段一行（单位｜职务 · 职称（起止）） */ + @Builder + jobsBlock() { + Column({ space: 6 }) { + Text('工作经历') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + if (this.person !== null) { + ForEach(this.person.jobs, (j: FbJobRow, idx: number) => { + Column({ space: 2 }) { + Text(this.jobText(j)) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + if (j.note !== '') { + Text(j.note) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + } + } + .width('100%') + .alignItems(HorizontalAlign.Start) + }, (j: FbJobRow, idx: number): string => 'job_' + idx.toString()) + } + } + .width('100%') + .alignItems(HorizontalAlign.Start) + .margin({ top: 12 }) + } + + /** + * 除主号之外的其它电话（逗号拼接）。 + * + * ⚠️ `phones[0]` 是主号，已经在「手机号」那一行单独显示过 ⇒ 这里从下标 1 开始， + * 否则同一个号码会显示两遍。 + * ⚠️ 服务端已保证"主号在前、去重"，这里不再做去重（保持简单）。 + */ + private otherPhones(): string { + if (this.person === null) { + return ''; + } + const out: string[] = []; + for (let i = 1; i < this.person.phones.length; i++) { + out.push(this.person.phones[i]); + } + return out.join('、'); + } + + /** + * 头像图 URL（**空 = 用色块字回落**）。 + * + * 🔴🔴 v52 修的真 bug（用户 2026-10-15：「点击详情，弹出的卡片里面**为什么没有头像**呢？」）： + * 列表里画了一整天的头像，**详情浮层却没传 `imageUrl`** —— + * `FbAvatar` 的 `imageUrl` 缺省是空串，于是**所有人在详情里都退化成色块字** + * （有头像的人也显示不出来）。这是纯粹的漏传参数，不是数据问题。 + * ⚠️ `avatar_url`（服务端下发的那个）是**相对路径**，`Image()` 直接用会 + * 打到 App 自己的包名上 ⇒ 必须用 `fbImageUrl(key, token)` 拼成 + * 带令牌的绝对地址（与列表同一套，见 `fbImageUrl` 的说明）。 + */ + private avatarUrl(): string { + if (this.person === null) { + return ''; + } + return fbImageUrl(this.person.avatar, FB_TOKEN_STORE.get()); + } + + /** 拼多行联系方式的显示串（`label: value`，label 空就只显示 value） */ + private contactText(rows: FbContactRow[]): string { + const out: string[] = []; + for (const r of rows) { + out.push(r.label !== '' ? (r.label + '：' + r.value) : r.value); + } + return out.join('\n'); + } + + /** 地址一整行（国家 省 市 区 + 详细；空段自动跳过） */ + private fullAddress(): string { + if (this.person === null) { + return ''; + } + const parts: string[] = [ + this.person.addrCountry, this.person.addrProvince, + this.person.addrCity, this.person.addrDistrict + ]; + const out: string[] = []; + for (const s of parts) { + if (s !== '') { + out.push(s); + } + } + if (this.person.address !== '') { + out.push(this.person.address); + } + return out.join(' '); + } + + /** 一段工作经历的显示串（`单位 · 职务/职称（起止）`） */ + private jobText(j: FbJobRow): string { + const head: string[] = []; + if (j.org !== '') { + head.push(j.org); + } + // 职务与职称可能都有（"副院长 / 副教授"），都可能没有 + const roles: string[] = []; + if (j.title !== '') { + roles.push(j.title); + } + if (j.rankName !== '' && j.rankName !== j.title) { + roles.push(j.rankName); + } + if (roles.length > 0) { + head.push(roles.join(' · ')); + } + let line: string = head.join('｜'); + const span: string = this.jobSpan(j); + if (span !== '') { + line += '（' + span + '）'; + } + return line; + } + + /** 一段工作经历的起止（`2020-09 至今` / `2015-07 ~ 2020-08`） */ + private jobSpan(j: FbJobRow): string { + const start: string = j.startYm; + const end: string = j.endYm !== '' ? j.endYm : '至今'; + if (start === '' && j.endYm === '') { + return ''; + } + if (start === '') { + return end; + } + return start + ' ~ ' + end; + } + + /** + * 信息行（图标 + 标签 + 值）。 + * + * ⚠️ `@Builder` 里**不加返回值**、参数要显式类型 —— 见项目里 ArkTS 约束。 + */ + @Builder + infoRow(icon: string, label: string, value: string) { + Row({ space: 10 }) { + Image(this.iconOf(icon)) + .width(15) + .height(15) + .renderMode(ImageRenderMode.Template) + .fillColor(FbColors.faint) + Column({ space: 2 }) { + Text(label) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + Text(value) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .maxLines(3) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + } + .width('100%') + .padding({ top: 9, bottom: 9 }) + .alignItems(VerticalAlign.Top) + } + + build() { + // FB_WRAP_CENTER：把卡片**垂直居中**（用户 2026-10-16 要求：浮在屏幕中间）。 + // ⚠️ 居中放在**组件内部**做，而不是改宿主的 Stack 对齐 —— + // 宿主 Stack 里还有别的子元素（日程页的悬浮 ＋），改对齐会连带挪走它们。 + // ⚠️ 外层铺满 + Center；内层仍是那张 92% 宽的圆角卡。 + Column() { + Column({ space: 0 }) { + // ---- 顶部：头像 + 姓名 + 称谓 ---- + // ⚠️ 这一块**不参与滚动**（它跟着卡片固定在顶部）： + // 用户往下滑看资料时，"这是谁"始终可见，不用滚回去确认。 + Row({ space: 14 }) { + FbAvatar({ + name: this.person !== null ? this.person.shown : '', + color: this.person !== null ? this.person.avatarColor : '#A84A28', + dia: 60, + fontSizeVp: 24, + // 🔴 v52 补上（之前漏传 ⇒ 详情里永远看不到头像，见 avatarUrl 的说明） + imageUrl: this.avatarUrl() + }) + Column({ space: 6 }) { + Row({ space: 8 }) { + Text(this.person !== null ? this.person.shown : '') + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + .maxLines(1) + if (this.person !== null && this.person.isAdmin) { + FbTag({ text: '管理员', tone: 'brand' }) + } + } + .alignItems(VerticalAlign.Center) + + // 本名（昵称与不同名时才有意义） + if (this.person !== null && this.person.name !== this.person.shown) { + Text('本名 ' + this.person.name) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + } + // 称谓（服务端按家族图谱推导） + if (this.person !== null && this.person.label !== '') { + FbTag({ text: this.person.label, tone: 'muted' }) + } + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + } + .width('100%') + .alignItems(VerticalAlign.Center) + + // ---- 标签 ---- + // ⚠️ 标签行**留在头部（不滚动）**：它很短，而且"这人是哪类人"是扫一眼就要的 + // 信息，跟着资料一起滚走反而不方便。详情里的"长内容"是资料行（见下面）。 + if (this.person !== null && this.person.tags.length > 0) { + Row({ space: 6 }) { + ForEach(this.person.tags, (t: string) => { + FbTag({ text: t, tone: 'blue' }) + }, (t: string): string => 'pt_' + t) + } + .width('100%') + .margin({ top: 12 }) + } + + Divider() + .color(FbColors.line) + .margin({ top: 14, bottom: 4 }) + + // 🔴 **资料区可滚动**（用户 2026-10-15：「显示详细信息，并且可以往下滑」）。 + // + // 为什么必须给它一个 `Scroll`： + // 卡片整体限了 `maxHeight: 78%`，而资料行（手机/单位/职务/生日阴阳历/ + // 邮箱/地址/座右铭/备注）加起来很容易超过这个高度 —— + // 没有 `Scroll` 时**超出的部分直接被裁掉、看不到也够不着**。 + // ⚠️ 用 `layoutWeight(1)` 让 Scroll 吃掉"头部与底部按钮之间的剩余高度"， + // 而不是给固定高度 —— 内容长短不同时都能正好铺满。 + // ⚠️ 底部按钮**留在 Scroll 外面**：它们是"动作"，不该跟着内容滚走 + // （要滑到底才能点"编辑"是很糟的体验）。 + Scroll() { + Column({ space: 0 }) { + // ---- 资料 ---- + // ⚠️ 每条都**只在有值时显示** —— 空行会让浮层显得"很多没填"， + // 而实际上大部分人的手机/邮箱/地址本来就是空的。 + if (this.person !== null && this.person.phone !== '') { + this.infoRow('phone', '手机号', this.person.phone) + } + // 🔴 补充电话（服务端下发的 `phones`，主号已在上面单独显示） + if (this.person !== null && this.person.phones.length > 1) { + this.infoRow('phone', '其他电话', this.otherPhones()) + } + if (this.person !== null && this.person.org !== '') { + this.infoRow('org', '单位', this.person.org) + } + if (this.person !== null && this.person.title !== '') { + this.infoRow('org', '职务', this.person.title) + } + // 家中排行（只在有值时显示；1 = 老大） + if (this.person !== null && this.person.birthRank !== '') { + this.infoRow('org', '家中排行', '第 ' + this.person.birthRank + ' 个') + } + // 生日：阳历 + 农历（农历是服务端算的）—— 合并成一行显示更好读 + if (this.person !== null && this.birthdayLine() !== '') { + this.infoRow('birth', '生日', this.birthdayLine()) + } + if (this.person !== null && this.person.email !== '') { + this.infoRow('mail', '邮箱', this.person.email) + } + // 地址（结构化五级 + 详细；旧数据只有 `addrCity` 也能显示） + if (this.person !== null && this.fullAddress() !== '') { + this.infoRow('addr', '地址', this.fullAddress()) + } + // 身份证（打码）—— 只显示，编辑时可改 + if (this.person !== null && this.person.idCardMasked !== '') { + this.infoRow('card', '身份证', this.person.idCardMasked) + } + + // ---- 补充联系方式（vCard 对齐：邮箱/地址/网址，可多行）---- + if (this.person !== null && this.person.contacts.email.length > 0) { + this.blockText('其它邮箱', this.contactText(this.person.contacts.email)) + } + if (this.person !== null && this.person.contacts.address.length > 0) { + this.blockText('其它地址', this.contactText(this.person.contacts.address)) + } + if (this.person !== null && this.person.contacts.url.length > 0) { + this.blockText('网址', this.contactText(this.person.contacts.url)) + } + + // ---- 工作经历（可多段）---- + if (this.person !== null && this.person.jobs.length > 0) { + this.jobsBlock() + } + + // ---- 座右铭 / 公共备注 / 我的私人备注 ---- + if (this.person !== null && this.person.slogan !== '') { + this.blockText('座右铭', '「' + this.person.slogan + '」') + } + if (this.person !== null && this.person.note !== '') { + this.blockText('备注', this.person.note) + } + // 🔴 「我的私人备注」与公共"备注"**是两块**（只有我看得到） + if (this.person !== null && this.person.myNote !== '') { + this.blockText('我的备注（仅自己可见）', this.person.myNote) + } + // 底部一点余量：最后一行不贴着按钮 + Row().height(8) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + } + .layoutWeight(1) + .width('100%') + .scrollBar(BarState.Off) + .edgeEffect(EdgeEffect.Spring) + .align(Alignment.TopStart) + + // ---- 底部按钮：编辑 / 关闭 ---- + Row({ space: 10 }) { + Text('编辑') + .fontSize(FbMetric.fontSmall) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(40) + .backgroundColor('#4A7C82') + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.onEdit(); + }) + Text('关闭') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .textAlign(TextAlign.Center) + .layoutWeight(1) + .height(40) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.onClose(); + }) + } + .width('100%') + .margin({ top: 18 }) + } + // 🔴 用户 2026-10-16：「它应该弹出一个**圆角的、浮在上面的卡片**…… + // **不要让它左右充满整个屏幕，下面也不要挨着屏幕**， + // 而是放在**屏幕中间**，采用**圆角浮窗**式的形式。」 + // ⇒ 不再贴底满宽：左右留边（92%）、四角圆角、垂直居中（由宿主的 Stack 对齐）。 + .width('92%') + // 最多占屏幕 72%：上方留出可见列表，暗示"这是浮层、下面还有内容" + .constraintSize({ maxHeight: '72%' }) + .padding({ left: 18, right: 18, top: 18, bottom: 20 + FB_SHEET_BOTTOM_GAP }) + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + .alignItems(HorizontalAlign.Start) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + .hitTestBehavior(HitTestMode.Transparent) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbStatCell.ets b/entry/src/main/ets/components/FbStatCell.ets new file mode 100644 index 0000000..bfb55a4 --- /dev/null +++ b/entry/src/main/ets/components/FbStatCell.ets @@ -0,0 +1,58 @@ +/** + * 家书 FamilyBook · 概述卡里的「一格数字」 + * + * 🔴🔴 v54b（用户 2026-10-17）—— 为什么必须是一个**组件**而不是 `@Builder`： + * + * 用户原话：「概述卡高度正常了，但是里面的**日程、在做、待办的数量是错误的**。」 + * + * 真机实测（`uitest dumpLayout` + 直读端上缓存）： + * · 接口返回 `stat:{today_events:1, doing:3, todo:2, overdue:0}` —— **正确**； + * · 端上 `module_cache` 里存的那份 payload **也是这份正确数据**； + * · 可界面显示的是 `0 / 0 / 0`。 + * 而**同一份数据**里「今天的日程 1 条」显示是对的 —— 区别在于 + * 那一块走的是**组件**（`FbDayEventPanel`），而数字走的是 + * `FbStatTriple` 内部的 `@Builder cell(label, value, alarm)`。 + * + * 🔴 根因：SDK 规则 `r/quick-rules/05-state.md` → 「@Builder 参数传递」： + * > **两个及以上参数不触发刷新**（多参数、按值与按引用混用均不刷新） + * ⇒ `cell()` 那份子树只按**初始值**渲染了一次（那时 `stat` 还是默认的 0）， + * 后来数据回来、`build()` 重跑，但**这个多值 @Builder 的子树不重建**。 + * + * ⇒ 修法：抽成 `@ComponentV2` + `@Param`（**@Param 参与观察**）。 + * 本项目已在同一类问题上修过 5 次，这是第 6 次： + * `FbTagChip` → `FbCalOptionRow` → `FbDayEventPanel` → `FbEventChip` → `FbTagPickChip`。 + * + * ⚠️ **不要**改回 `@Builder`（哪怕只有一个参数也别用：见本组件底部那条）。 + */ + +import { FbColors, FbMetric } from '../common/Theme'; + +@ComponentV2 +export struct FbStatCell { + /** 数字（**@Param 参与观察** —— 父组件改了它，本格就重建） */ + @Param value: number = 0; + /** 下面的标签（`今天日程` / `在做` / `待办` / `逾期`） */ + @Param label: string = ''; + /** + * 这一格是"警示项"（逾期）。 + * + * ⚠️ 与网页版 `hb-stats .hbs.is-late` 同一取舍：**只有真的 > 0 时才红**。 + * 0 件逾期是常态，天天标红会让"逾期"这件事失去分量。 + */ + @Param alarm: boolean = false; + + build() { + Column({ space: 2 }) { + Text(this.value.toString()) + .fontSize(20) + .fontWeight(FontWeight.Medium) + .fontColor(this.alarm && this.value > 0 ? FbColors.red : FbColors.ink) + Text(this.label) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + .maxLines(1) + } + .layoutWeight(1) + .alignItems(HorizontalAlign.Center) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbTagChip.ets b/entry/src/main/ets/components/FbTagChip.ets new file mode 100644 index 0000000..da748a9 --- /dev/null +++ b/entry/src/main/ets/components/FbTagChip.ets @@ -0,0 +1,59 @@ +/** + * 家书 FamilyBook · 标签筛选片（鸿蒙端） + * + * 🔴🔴 **为什么必须做成"组件"而不是 `@Builder`**（这是真机踩出来的坑）： + * 用户 2026-10-15：「点'大学同学'，其实'大学同学'这个标签并没有发生改变， + * 其他标签也是一样的。」 + * + * 根因：标签片原来是 `FbPeoplePage.tagChip(label, active, count)` 这样的 + * **`@Builder` + 简单类型参数**。而在 ArkTS 里： + * `@Builder` 的**值类型参数**（string / number / boolean / 数组/对象字面量） + * **不参与状态观察** —— 父组件里 `active` 的计算结果变了， + * 已经建好的那份 Builder 子树**不会重建**（只有对象引用变化才会）。 + * ⇒ 点标签后 `tagFilter` 确实变了、列表也筛了， + * 但**标签片自己的选中样式（蓝底白字）不变** = 用户看到的"标签没变化"。 + * + * 解法：做成 `@ComponentV2` 组件，用 `@Param` 接收 —— + * `@Param` **是参与观察的**，父组件传值变了就会重建这一片。 + * + * ⚠️ 这也是本项目第一次把"列表里的可选中片"从 Builder 改成组件； + * 其它地方（如看板筛选条 `boardChip`）若也有同样症状，同样处理。 + */ + +import { FbColors, FbMetric } from '../common/Theme'; + +@ComponentV2 +export struct FbTagChip { + /** 显示文字（标签名；「全部」传 '全部'） */ + @Param label: string = ''; + /** 是否选中（**必须由父组件按 tagFilter 算好传进来**） */ + @Param active: boolean = false; + /** + * 人数；**传 -1 表示不显示数字**（「全部」用它 —— + * 全部的人数等于名册总人数，写出来反而占地方且没信息量）。 + */ + @Param count: number = -1; + /** 被点击 */ + @Event onPick: () => void = (): void => { + }; + + build() { + Row({ space: 4 }) { + Text(this.label) + .fontSize(FbMetric.fontTiny) + .fontColor(this.active ? Color.White : FbColors.muted) + if (this.count >= 0) { + Text(this.count.toString()) + .fontSize(10) + .fontColor(this.active ? '#FFFFFFCC' : FbColors.faint) + } + } + .padding({ left: 11, right: 11, top: 6, bottom: 6 }) + .backgroundColor(this.active ? '#4A7C82' : FbColors.inputBg) + .borderRadius(FbMetric.radiusPill) + .alignItems(VerticalAlign.Center) + .onClick((): void => { + this.onPick(); + }) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FbTagPickChip.ets b/entry/src/main/ets/components/FbTagPickChip.ets new file mode 100644 index 0000000..e295d8f --- /dev/null +++ b/entry/src/main/ets/components/FbTagPickChip.ets @@ -0,0 +1,52 @@ +/** + * 家书 FamilyBook · 标签多选片（鸿蒙端） + * + * 🔴 用户 2026-10-16：「名册里面编辑的时候，或者添加的时候， + * 人的标签**应该是选择的**吧？应该让人**选择多个**， + * 而不是直接在这里输入文本。」 + * + * 🔴🔴 为什么必须是**组件**而不是 `@Builder`： + * **`@Builder` 的值类型参数不参与状态观察** + * （SDK 规则 `r/quick-rules/05-state.md`）—— + * 点一下 `active` 变了，但**选中样式那份子树不重建** ⇒ 看着"点不了"。 + * 本项目已在 `FbTagChip` / `FbCalOptionRow` / `FbEventChip` / `FbDayEventPanel` + * 上各踩过一次（这是第 5 次同类）⇒ **有选中态的片一律做成组件**。 + * + * ⚠️ 与名册页那个 `FbTagChip` 的区别：那个是**筛选**（单选、带人数）， + * 这个是**编辑多选**（没有人数、可取消）。两个语义不同，故不复用。 + */ + +import { FbColors, FbMetric } from '../common/Theme'; + +@ComponentV2 +export struct FbTagPickChip { + /** 标签文字 */ + @Param label: string = ''; + /** 是否已选（**由父组件算好传进来**） */ + @Param active: boolean = false; + /** 点一下切换选中 */ + @Event onToggle: () => void = (): void => { + }; + + build() { + Row({ space: 4 }) { + if (this.active) { + Text('✓') + .fontSize(FbMetric.fontTiny) + .fontColor(Color.White) + } + Text(this.label) + .fontSize(FbMetric.fontSmall) + .fontColor(this.active ? Color.White : FbColors.muted) + } + .padding({ left: 12, right: 12, top: 6, bottom: 6 }) + .backgroundColor(this.active ? '#4A7C82' : FbColors.inputBg) + .borderRadius(FbMetric.radiusPill) + // ⚠️ 间距放组件内部：wrap 容器里的子项必须自带 margin，否则两行会贴在一起 + .margin({ right: 8, bottom: 8 }) + .alignItems(VerticalAlign.Center) + .onClick((): void => { + this.onToggle(); + }) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/components/FloatDock.ets b/entry/src/main/ets/components/FloatDock.ets index a0e3126..c765ec8 100644 --- a/entry/src/main/ets/components/FloatDock.ets +++ b/entry/src/main/ets/components/FloatDock.ets @@ -8,33 +8,69 @@ * * 🔴 形态照**鸿蒙 6 官方设计规范**的「悬浮导航（Float Navigation）」： * · 脱离底部边界，以「**四周留白 + 圆角卡片**」形态**悬浮在内容之上**； - * · 参考实现参数：`height(56) + margin({left:16,right:16,bottom:16}) + borderRadius(28)`； - * · 材质用系统提供的沉浸材质（`uiMaterial.ImmersiveMaterial`， - * `ImmersiveStyle.ULTRA_THIN` 对应设计规范里的"超薄"档）， - * 它自带模糊/边框/阴影 —— ⚠️ 用了它**不要**再叠加 backgroundBlurStyle， - * 否则会双重模糊、发灰。 - * · 与系统手势条保持间距，减少误触（所以就 `bottom:16` 而不是贴底）。 + * · 参考实现参数：`height(56) + 四周留白 + borderRadius(28)`； + * · 与系统手势条保持间距，减少误触（所以 `bottom:16` 而不是贴底）。 + * + * 🔴 两处按用户实机反馈调过（2026-10-12）： + * · **宽度收窄**：「太宽了，不要顶到两边」⇒ 左右留白 40vp（比内容区块的 16vp 更收）。 + * ⚠️ 收窄靠 `margin`，**千万别再写 `.width('100%')`** —— 它会让 margin 失效、变满宽。 + * · **降低透明度**：「透明度太高，下面的内容糊在一起看不清」⇒ + * 底色改 92% 白（`EBFFFFFF`）+ `backgroundBlurStyle(COMPONENT_THIN)`。 + * + * 🔴 为什么用 `backgroundBlurStyle` 而不用 `systemMaterial`（鸿蒙 6 的沉浸材质）： + * `systemMaterial` / `uiMaterial` 是 **SDK 26.0.0** 起的新 API， + * 而本工程 `compatibleSdkVersion = 6.1.1(24)`（编译器会警告版本不匹配） + * ⇒ 在 API 24 设备上有失效风险。`backgroundBlurStyle` 是 **API 9** 就有的， + * 视觉几乎等价、且没有版本风险。**将来把兼容版本提到 26 再换回沉浸材质。** * * ⚠️ 为什么用 `Stack(alignContent: Bottom)` 覆盖在内容上，而不是在 Column 里占一行： * 用户明确说"不要固定在下边，要浮着"。占一行就是"固定的底部栏"（老样式）； * 用 Stack 覆盖 ⇒ 内容从它下面穿过、它是浮在上面的。这是这个组件唯一正确的摆法。 * - * ⚠️ "隐藏时不影响观感"：内容底部要留出 `DOCK_RESERVE` 的空白， + * ⚠️ 内容底部要留出 `FB_DOCK_RESERVE` 的空白， * 否则最后一块内容会被悬浮栏压住（悬浮 ≠ 可以挡内容）。 */ -import { uiMaterial } from '@kit.ArkUI'; import { FbColors, FbIcon, FbMetric } from '../common/Theme'; import { FbAppState, fbAppState } from '../common/Store'; import { FbModuleDef, fbModuleOf } from '../model/Modules'; -/** 内容区为悬浮栏预留的高度（vp）：栏高 56 + 下边距 16 + 一点余量 */ -export const FB_DOCK_RESERVE: number = 88; - /** 快捷栏高度（vp）—— 取设计规范的 56 */ const DOCK_H: number = 56; -/** 四周留白（vp）—— 设计规范给的是 16 */ -const DOCK_PAD: number = 16; +/** + * 下边距（vp）。 + * + * 🔴 从 16 加到 **24**（2026-10-13 改"全沉浸"时）。 + * 原因：系统**手势条已被隐藏**（用户要求"下面没有任何的条"）—— + * 手势区没有任何视觉提示了，悬浮栏贴得太近时， + * "从下往上滑唤回内容"这个手势很容易先按到它上面。 + * 多加 8vp 拉开距离，是给**手势区**留的缓冲，不是视觉上的调整。 + */ +const DOCK_PAD: number = 24; +/** + * 左右留白（vp）。 + * + * 🔴 用户 2026-10-12：「宽度有点太宽了，不要顶到两边…… + * 我们那个白色的那种背景框，它不都是两边都有空隙的吗？所以这个宽度也往里面收一收。」 + * ⇒ 收得比内容区块的留边（16vp）更窄：40vp。 + * 这样悬浮栏明显比内容窄一圈，「浮着的一块」的感觉更强， + * 也符合"页面里的卡片都不贴边"这套语言。 + */ +const DOCK_SIDE: number = 40; + +/** 内容区为悬浮栏预留的高度（vp）：栏高 + 下边距 + 一点余量 */ +export const FB_DOCK_RESERVE: number = DOCK_H + DOCK_PAD + 16; + +/** + * 收起时向下平移的距离（vp）——**必须让整个胶囊完全移出可视区**。 + * + * 🔴 供 `Index.ets` 做"随滚动滑走"的位移动画用（用户 2026-10-13 要的 IT 之家那套）。 + * ⚠️ 导出来复用而不是在 `Index` 里写死一个数字： + * 它与栏高、下边距是**同一个几何量**，分散在两处必然漂移 —— + * 一旦下移量小于"高 + 边距"，收起后底下会**露出半截胶囊边**。 + * +12 是余量（阴影半径 18、偏移 6，留一点避免阴影边缘仍可见）。 + */ +export const FB_DOCK_HIDE_Y: number = DOCK_H + DOCK_PAD + 12; /** * 悬浮快捷栏。 @@ -49,63 +85,143 @@ export struct FbFloatDock { * 快捷模块 key 列表。 * 🔴 用户点名要这四个（"应该比较常用"）：日程、名册、任务、笔记。 * 顺序按用户说的来。 + * ⚠️ v54b：这四项现在是**两两分居 logo 两侧**（日程 名册 ［家书］ 任务 笔记）， + * 见下面 build 的左右两段。 */ @Param keys: string[] = ['calendar', 'people', 'tasks', 'notes']; build() { + // 🔴 用**两层**解决"收窄"：外层 Row 负责左右留白，内层 Row 是胶囊本体。 + // + // 为什么不用更直接的两个写法（都实测失败过）： + // ① `.width('100%')` + `.margin({left,right})` 并存 ⇒ width 先占满、 + // margin 失效 ⇒ 栏体顶到屏幕两侧（实测 x=0..1079 满宽）； + // ② 去掉 width、只留 margin ⇒ **仍不够**：子项用了 `.layoutWeight(1)` + // 四等分，含 layoutWeight 子项的容器会撑满父级可用宽度，把 margin 顶开 + // （实测留白只有 17vp，而不是设的 40vp）。 + // ③ `calc(100% - 80vp)` 也不行 —— SDK 明确写着 + // "**width** and **height** do not support **calc()** dynamic calculations"。 + // ⇒ 外层 padding 是唯一稳稳生效的办法：外层通栏、只做左右内缩， + // 内层胶囊再用 layoutWeight(1) 吃满剩余宽度。语义清晰、不受子项布局影响。 Row() { - ForEach(this.keys, (k: string) => { - // 当前模块在快捷栏里高亮，让用户知道"我在哪" - this.dockItem(k, k === this.app.activeModule); - }, (k: string): string => 'dock_' + k) + Row() { + // ---- 左半：日程 / 名册 ---- + ForEach(this.leftKeys(), (k: string) => { + FbDockItem({ + icon: this.iconNameOf(k), + label: this.labelOf(k), + active: k === this.app.activeModule, + accent: this.accentOf(k), + onTap: (): void => { + this.app.switchModule(k); + } + }) + }, (k: string): string => 'dock_l_' + k) + + // ---- 正中间：**应用图标**（点它回首页）---- + // 🔴 用户 2026-10-17：「下面悬浮的 4 个图标**中间**，放一个**我们应用的图标**， + // 就是那个 **logo**，点击之后**是首页**。」 + // ⚠️ 用真实 logo 图（`fb_logo`，与顶栏同一张），**不要**换成 home 图标 —— + // 用户说的是"我们应用的图标/logo"，那是品牌标识，不是"首页"这个功能图标。 + // ⚠️ 也不加"首页"两个字：中间那格比两侧窄，加字会挤（它的语义由 logo 本身承担）。 + this.homeButton() + + // ---- 右半：任务 / 笔记 ---- + ForEach(this.rightKeys(), (k: string) => { + FbDockItem({ + icon: this.iconNameOf(k), + label: this.labelOf(k), + active: k === this.app.activeModule, + accent: this.accentOf(k), + onTap: (): void => { + this.app.switchModule(k); + } + }) + }, (k: string): string => 'dock_r_' + k) + } + // 内层胶囊：吃满外层扣掉内缩后的宽度 + .layoutWeight(1) + .height(DOCK_H) + .padding({ left: 6, right: 6 }) + .borderRadius(DOCK_H / 2) // 全圆角胶囊形（28 = 56/2） + .alignItems(VerticalAlign.Center) + // ---- 悬浮底：白色 + 毛玻璃 ---- + // + // 🔴 底色：**92% 白**。 + // 用户反馈「透明度太高，下面的内容和标签糊在一起，看不清了」 + // ⇒ 先把「读得清」这条底线守住：底色几乎实心，只留 8% 通透。 + .backgroundColor('EBFFFFFF') + // + // 🔴 毛玻璃用 `backgroundBlurStyle(COMPONENT_THIN)`，**不用 `systemMaterial`**： + // · `systemMaterial` / `uiMaterial` 是 **SDK 26.0.0** 起的新 API， + // 而本工程 `compatibleSdkVersion = 6.1.1(24)` ⇒ 编译器会警告 + // "current compatible SDK version is 6.1.1(24)"，在 API 24 设备上有失效风险； + // · `backgroundBlurStyle` 是 **API 9** 就有的老 API，兼容性完全没问题， + // 且同样能做出"半透 + 模糊"的悬浮观感。 + // ⇒ 在"视觉几乎等价"的前提下，选**没有版本风险**的那个。 + // （将来工程把 compatibleSdkVersion 提到 26 再换回沉浸材质。） + .backgroundBlurStyle(BlurStyle.COMPONENT_THIN) + .border({ width: 1, color: FbColors.line2 }) + // 浮在内容之上：给一点投影增强"悬浮"层次 + .shadow({ radius: 18, color: '#1A2C231D', offsetY: 6 }) } .width('100%') - .height(DOCK_H) - // 四周留白 ⇒ 悬浮感（不贴屏幕边） - .margin({ left: DOCK_PAD, right: DOCK_PAD, bottom: DOCK_PAD }) - .padding({ left: 6, right: 6 }) - .borderRadius(DOCK_H / 2) // 全圆角胶囊形（28 = 56/2） - .alignItems(VerticalAlign.Center) - // 🔴 悬浮材质（鸿蒙 6 设计规范的"超薄沉浸"档）。 - // ⚠️ 这里**只**用 systemMaterial，不加 backgroundColor/backgroundBlurStyle —— - // 材质自带模糊与描边，叠加会双重模糊。 - // ⚠️ 若设备/版本不支持该 API，会在运行时被忽略（不崩）， - // 所以下面再给一层极浅的描边兜底，保证"有边界的悬浮卡片"这个观感不丢。 - .systemMaterial(new uiMaterial.ImmersiveMaterial({ - style: uiMaterial.ImmersiveStyle.ULTRA_THIN - })) - .border({ width: 1, color: FbColors.line2 }) - // 浮在内容之上：给一点投影增强"悬浮"层次 - .shadow({ radius: 18, color: '#1A2C231D', offsetY: 6 }) + // 🔴 左右内缩 40vp（比内容区块的 16vp 更收）： + // 用户要求「宽度有点太宽了，不要顶到两边……也往里面收一收」。 + .padding({ left: DOCK_SIDE, right: DOCK_SIDE, bottom: DOCK_PAD }) } - /** 一个快捷项：图标 + 文字（竖排，紧凑） */ + /** + * 中间那颗 logo（点它回首页）。 + * + * ⚠️ 宽度给 `layoutWeight` 之外还要**略窄一点**：两侧各有 2 个带文字的项， + * 中间这格只有图、没有字，等宽会让它显得很空。 + * 用固定宽 + `justifyContent(Center)`，视觉上就是个"居中的品牌钉"。 + */ @Builder - dockItem(key: string, active: boolean) { + homeButton() { Column({ space: 2 }) { - Image(FbIcon.ui(this.iconNameOf(key))) - .width(20) - .height(20) - .renderMode(ImageRenderMode.Template) - // ⚠️ fillColor 必须是同一类型：选中时用模块色（string）， - // 未选中时用 `$r` 资源也可以，但**三目里两侧类型必须一致** - // （Resource 与 string 混用会报 "Type 'string | Resource' is not assignable to type 'string'"）。 - // 这里统一走 string 色值，省掉类型打架。 - .fillColor(active ? this.accentOf(key) : '#7E6B5A') - Text(this.labelOf(key)) + Image($r('app.media.fb_logo')) + .width(26) + .height(26) + .borderRadius(7) + // 描边：logo 是「米色底 + 砖红图案」，放在白底胶囊上底板会"化掉" + //（与顶栏那颗 logo 同一个理由，见 TopBar 的注释） + .border({ width: 1, color: FbColors.line }) + // 当前就在首页 ⇒ 给一行小字标出来（与两侧项的"图标+文字"节奏也对齐） + Text('首页') .fontSize(FbMetric.fontTiny) - .fontColor(active ? this.accentOf(key) : '#7E6B5A') + .fontColor(this.app.activeModule === 'home' ? '#A84A28' : '#4A3F35') .maxLines(1) } - .layoutWeight(1) // 四等分 + .width(52) .height('100%') .justifyContent(FlexAlign.Center) - .onClick(() => { - // 切模块（switchModule 内部会顺手收起抽屉） - this.app.switchModule(key); + .onClick((): void => { + this.app.switchModule('home'); }) } + /** 左半段的 key（前一半；四项时 = 前 2 个） */ + private leftKeys(): string[] { + const n: number = Math.floor(this.keys.length / 2); + const out: string[] = []; + for (let i = 0; i < n; i++) { + out.push(this.keys[i]); + } + return out; + } + + /** 右半段的 key（后一半） */ + private rightKeys(): string[] { + const n: number = Math.floor(this.keys.length / 2); + const out: string[] = []; + for (let i = n; i < this.keys.length; i++) { + out.push(this.keys[i]); + } + return out; + } + /** 模块名（取注册中心，避免各处写死） */ private labelOf(key: string): string { const m: FbModuleDef | undefined = fbModuleOf(key); @@ -142,4 +258,71 @@ export struct FbFloatDock { default: return 'home'; } } +} + +/** + * 悬浮栏里的一个快捷项（图标 + 文字，竖排，紧凑）。 + * + * 🔴🔴 v54b（用户 2026-10-17）—— 为什么必须是**组件**： + * 用户原话：「日程、名册、任务、笔记这几个图标，应该点击后，在它们自己的页面中， + * **是变颜色的**，颜色就是它们自己的设定颜色，**图标和文字，都变颜色**。」 + * —— 也就是说：点了「日程」进日程页后，那颗图标与文字应当变成**日程的琥珀色**。 + * + * ⚠️ 原来这里是 `@Builder dockItem(key, active)` —— **两个参数**， + * SDK 规则 `r/quick-rules/05-state.md`： + * > **两个及以上参数不触发刷新** + * ⇒ 切模块后 `this.app.activeModule` 变了、`build()` 重跑了， + * 但**这个多值 @Builder 的子树不重建** ⇒ 高亮**永远停在初始那一项**上。 + * 这与本轮"概述卡数字永远是 0"是**同一个根因**（本项目第 6、7 次）。 + * + * ⇒ 抽成 `@ComponentV2` + `@Param`（@Param 参与观察）。 + * ⚠️ 别改回 `@Builder`，哪怕"只有一个参数"也别用（见 FbStatCell 的说明）。 + */ +@ComponentV2 +export struct FbDockItem { + /** 图标名（`FbIcon.ui()` 的 key） */ + @Param icon: string = 'home'; + /** 下面那行文字（模块名） */ + @Param label: string = ''; + /** + * 是不是当前所在模块。 + * 🔴 由父组件**算好传进来**（父组件读 `this.app.activeModule`）—— + * 组件自己拿不到父的状态，这正是"@Param 会被观察"的价值。 + */ + @Param active: boolean = false; + /** 该模块的**设定色**（当前模块时，图标与文字都用它） */ + @Param accent: string = '#A84A28'; + /** 点击回调（切模块） */ + @Event onTap: () => void = (): void => { + }; + + build() { + Column({ space: 2 }) { + Image(FbIcon.ui(this.icon)) + .width(20) + .height(20) + .renderMode(ImageRenderMode.Template) + // ⚠️ fillColor 必须同一类型：选中时用模块色（string），未选中也用 string。 + // 三目里两侧类型不一致（Resource 与 string 混用）会报 + // "Type 'string | Resource' is not assignable to type 'string'"。 + // + // 🔴 未选中色从 muted(#7E6B5A) 加深到 #4A3F35： + // 原先在白底上的对比度只有约 2.3:1（远低于 WCAG 的 4.5:1）， + // 加上材质半透，用户就觉得"和下面的内容糊在一起、看不清"。 + // 🔴 选中色 = **该模块自己的设定色**（用户 2026-10-17 明确要求）， + // 不是统一的品牌红 —— 这样"我在日程"和"我在任务"一眼能分清。 + .fillColor(this.active ? this.accent : '#4A3F35') + Text(this.label) + .fontSize(FbMetric.fontTiny) + .fontColor(this.active ? this.accent : '#4A3F35') + .fontWeight(this.active ? FontWeight.Medium : FontWeight.Normal) + .maxLines(1) + } + .layoutWeight(1) // 等分 + .height('100%') + .justifyContent(FlexAlign.Center) + .onClick((): void => { + this.onTap(); + }) + } } \ No newline at end of file diff --git a/entry/src/main/ets/components/TopBar.ets b/entry/src/main/ets/components/TopBar.ets index ba87d51..dd7582a 100644 --- a/entry/src/main/ets/components/TopBar.ets +++ b/entry/src/main/ets/components/TopBar.ets @@ -28,14 +28,23 @@ export struct FbTopBar { @BuilderParam actions: () => void; build() { - Row({ space: 10 }) { - // ---- 应用图标（贴最左；**点它开抽屉**）---- + // 🔴 顶栏横向镜像 —— 「质感握姿」（用户 2026-10-16 第 4 条）： + // 左手握时家书图标在**左**，右手握时它跑到**右**，方便单手点它开抽屉。 + // ⚠️ 用 `Flex(direction: RowReverse)` 整体镜像，而不是逐个改 padding/margin —— + // 后者要同时动 4 处、还会把"标题靠左"这类布局搞乱。 + // ⚠️ 但**图标不能真的反着画**（`RowReverse` 只改主轴顺序、不翻转图形本身）， + // 所以镜像后位置对、图形仍正。 + Flex({ + direction: this.app.drawerSide === 'right' ? FlexDirection.RowReverse : FlexDirection.Row, + alignItems: ItemAlign.Center + }) { + // ---- 应用图标（**点它开抽屉**；左右握姿时自动换边）---- // ⚠️ 必须给描边：logo 是「米色底(74%) + 砖红图案(24%)」的实心方图， // 放在白色/米色上时底板与背景几乎同色，只剩砖红图案发飘、看不清。 // 一层极浅的描边就能把底板"托"出来（本机范本 SyncCalendar 也给了描边）。 // // 🔴 点击事件直接挂在 Image 上，**不套 Button** —— - // Button 自带最小尺寸与内边距，会把图标挤离左边线（用户要"图标靠左"）。 + // Button 自带最小尺寸与内边距，会把图标挤离边线（用户要"图标靠边"）。 Image($r('app.media.fb_logo')) .width(30) .height(30) @@ -43,7 +52,7 @@ export struct FbTopBar { .border({ width: 1, color: FbColors.line }) .flexShrink(0) .onClick(() => { - // 点图标 ⇒ 开抽屉（沿用上次的方向 drawerSide，默认左边） + // 点图标 ⇒ 开抽屉（方向由**握姿**定，见 common/FbGrip.ets） this.app.drawerOpen = true; }) @@ -60,6 +69,7 @@ export struct FbTopBar { .maxLines(1) } .alignItems(HorizontalAlign.Start) + .margin({ left: 10, right: 10 }) .layoutWeight(1) // ---- 右：各模块自己的操作 ---- @@ -100,14 +110,34 @@ export struct FbTopBar { dia: 32, fontSizeVp: 14 }) - .margin({ left: 2 }) } .width('100%') - .height(FbMetric.topBarH) + // 🔴 高度 = **状态栏高度 + 顶栏本身高度**（用户 2026-10-13 要"全沉浸"）。 + // + // 为什么必须自己加这一段： + // 应用开了 `setWindowLayoutFullScreen(true)`（见 EntryAbility）—— + // 窗口**不再为状态栏让位**，内容会真的画到状态栏底下。 + // ⇒ 顶栏若不自己让出这一截，"家书"标题会被时间/信号图标压住。 + // + // ⚠️ 让位用 **padding.top**（不是 margin）：这样**白底会一并覆盖状态栏区域**， + // 静止时看起来通知栏与顶栏是一整块；而向上滑动时， + // 这一整块（含白底）随内容滚走，下面的内容直接顶到屏幕最上沿 —— + // 这就是用户要的"内容从手机边缘滑上去"的观感。 + // ⚠️ `statusBarH` 是 `@Trace` 的，量出来（异步）后顶栏会**自动重排**； + // 量不到时为 0，标题贴到最上面（仍可读），不会把内容推到屏幕中间。 + .height(FbMetric.topBarH + this.app.statusBarH) // 左内边距=pagePad（与下面各区块的左边线对齐）；右侧 10（图标可略贴边） - .padding({ left: FbMetric.pagePad, right: 10, top: 4, bottom: 4 }) - .alignItems(VerticalAlign.Center) - // 顶栏底色 = 白色（与下面的个人信息卡同色） + .padding({ + left: FbMetric.pagePad, + right: 10, + top: this.app.statusBarH + 4, + bottom: 4 + }) + // 顶栏底色 = 白色（与下面的个人信息卡同色）。 + // ⚠️ 它会覆盖上面 `padding.top` 让出来的状态栏区域 —— 这是**有意为之**： + // 静止时通知栏与顶栏连成一整块白（用户 2026-10-12 定的"融为一体"）， + // 滚动时再一起滑走。**不要**改成"顶栏不设背景色、透出页面底色"， + // 那样静止时会变成"米色通知栏 + 白色顶栏"上下拼接（踩过这个坑）。 .backgroundColor(FbColors.surface) // 底线：与下方内容（同是白色卡）之间给一条极浅的分隔，避免"两块白糊在一起" .border({ width: { bottom: 1 }, color: FbColors.line2 }) diff --git a/entry/src/main/ets/components/Widgets.ets b/entry/src/main/ets/components/Widgets.ets index e4366a5..8d52ca6 100644 --- a/entry/src/main/ets/components/Widgets.ets +++ b/entry/src/main/ets/components/Widgets.ets @@ -176,7 +176,7 @@ export struct FbSectionTitle { */ @ComponentV2 export struct FbAvatar { - /** 显示名（取首字） */ + /** 显示名（取首字；也是**没有图片时**的回落） */ @Param name: string = ''; /** 底色（由业务侧算好传进来） */ @Param color: string = '#A84A28'; @@ -184,6 +184,17 @@ export struct FbAvatar { @Param dia: number = 36; /** 字号（vp）；不传则按直径推算 */ @Param fontSizeVp: number = 0; + /** + * 头像图 URL（**空 = 用色块字回落**）。 + * + * 🔴 为什么要支持真图（用户 2026-10-13："名册的头像怎么都没有？"）： + * 之前这里只有色块字，看起来像"没有头像"。 + * 实测名册 800 人里只有 19 人传过头像 ⇒ **两者都要有**： + * 有图的显示图、没图的回落到色块字（这是绝大多数）。 + * ⚠️ URL 由调用方用 `fbImageUrl(key, token)` 拼好传进来 —— + * `Image()` 不支持自定义请求头，令牌只能走查询串（见 `fbImageUrl` 的说明）。 + */ + @Param imageUrl: string = ''; /** 取名字的第一个字（含中文名的姓） */ private initial(): string { @@ -195,15 +206,29 @@ export struct FbAvatar { } build() { - Text(this.initial()) - .width(this.dia) - .height(this.dia) - .borderRadius(this.dia / 2) - .backgroundColor(this.color) - .fontColor(Color.White) - .fontSize(this.fontSizeVp > 0 ? this.fontSizeVp : Math.round(this.dia * 0.42)) - .fontWeight(FontWeight.Medium) - .textAlign(TextAlign.Center) + // ⚠️ 用 if/else 而不是"图层叠"：两种形态的**尺寸来源**不同 + // （Image 有 intrinsic size，Text 靠 width/height）—— + // 叠起来容易出现"图把字盖住但字还在占位"的错位。 + if (this.imageUrl !== '') { + Image(this.imageUrl) + .width(this.dia) + .height(this.dia) + .borderRadius(this.dia / 2) + // 加载失败/慢时先显示底色，避免"一片空白" + .backgroundColor(this.color) + .objectFit(ImageFit.Cover) + .alt($r('app.media.fb_logo')) + } else { + Text(this.initial()) + .width(this.dia) + .height(this.dia) + .borderRadius(this.dia / 2) + .backgroundColor(this.color) + .fontColor(Color.White) + .fontSize(this.fontSizeVp > 0 ? this.fontSizeVp : Math.round(this.dia * 0.42)) + .fontWeight(FontWeight.Medium) + .textAlign(TextAlign.Center) + } } } @@ -403,43 +428,26 @@ export struct FbDotLine { } } -/** 一条「三格数字」统计条（首页近七天：日程 / 待办 / 逾期） */ -@ComponentV2 -export struct FbStatTriple { - @Param labelA: string = ''; - @Param valueA: string = ''; - @Param labelB: string = ''; - @Param valueB: string = ''; - @Param labelC: string = ''; - @Param valueC: string = ''; - /** C 项是否用警示红（逾期数） */ - @Param cAlarm: boolean = false; - - @Builder - cell(label: string, value: string, alarm: boolean) { - Column({ space: 2 }) { - Text(value) - .fontSize(20) - .fontWeight(FontWeight.Medium) - .fontColor(alarm ? FbColors.red : FbColors.ink) - Text(label) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.muted) - } - .layoutWeight(1) - .alignItems(HorizontalAlign.Center) - } - - build() { - Row() { - this.cell(this.labelA, this.valueA, false) - this.cell(this.labelB, this.valueB, false) - this.cell(this.labelC, this.valueC, this.cAlarm) - } - .width('100%') - .padding({ top: 10, bottom: 10 }) - } -} +/** + * 一条「N 格数字」统计条 —— 🔴🔴 **已删除（v54b，2026-10-17）**。 + * + * 原来这里有个 `FbStatTriple`（三格：日程 / 待办 / 逾期），内部用 + * `@Builder cell(label, value, alarm)` 画每一格。 + * + * 用户 2026-10-17 报「概述卡……**日程、在做、待办的数量是错误的**」， + * 真机实测：接口与端上缓存都是 `{1,3,2,0}`（正确），界面却是 `0/0/0`。 + * 根因：SDK 规则 `r/quick-rules/05-state.md` → + * > **@Builder 参数传递**：「**两个及以上参数不触发刷新**」 + * ⇒ `cell()` 那份子树只按**初始值**渲染一次（那时还是默认的 0）， + * 数据回来、`build()` 重跑了，但**这个多值 @Builder 的子树不重建**。 + * + * ⇒ **删除而不是修补**，理由： + * ① 它当时**已无人引用**（首页改成四格 + `FbStatCell` 之后）； + * ② 留着它，以后有人"顺手用一下"就会原样复发（本项目已踩过 6 次这个坑）； + * ③ 它的三格形态也不再匹配需求（现在要四格）。 + * ⇒ 新的写法用 **`components/FbStatCell.ets`**（`@ComponentV2` + `@Param`， + * **@Param 参与观察**），需要几格就摆几个。**不要再恢复 `@Builder` 版本。** + */ /** * 进度条（读书进度、旅程完成度…）。 diff --git a/entry/src/main/ets/data/FbCalRepo.ets b/entry/src/main/ets/data/FbCalRepo.ets new file mode 100644 index 0000000..bba057c --- /dev/null +++ b/entry/src/main/ets/data/FbCalRepo.ets @@ -0,0 +1,278 @@ +/** + * 家书 FamilyBook · 日程数据仓库（鸿蒙端） + * + * 对应服务端 `/api/v1/events`（增删改查）与 `/api/v1/calendar`（读全量条目 + 日历本）。 + * + * 🔴 为什么日程要**单独一个 Repo**（而不是走通用的 `FbModuleRepo`）： + * 通用仓库只做"拉一次、缓存 JSON、展示"——**只读**。 + * 而日程是**要能改的**（用户 2026-10-15：「完全脱离电脑端……所有功能都在手机上完成」）： + * 新建 / 改时间 / 改标题 / 删掉，每一项都要落到服务端。 + * 写操作需要"知道哪个字段动了、失败怎么回滚"，与"一次性展示"是两种东西。 + * ⇒ 单独一个仓库，写操作显式处理（同观影/名册的做法）。 + * + * ⚠️ 读（月历/列表）走 `/calendar`（一次拿全量条目，含节日/农历/日程， + * 由 `FbModuleRepo` 缓存）；**单条日程的详情与写**走 `/events/`。 + */ + +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { FbApiOptions, FbApiResult, fbApi } from './FbHttp'; +import { FbCalBook } from '../model/Types'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbCalRepo'; + +/** 一条日程的**完整字段**（服务端 `/events/` 的形状） */ +export interface FbCalEventFull { + id: number; + calendar_id: number; + title: string; + location: string; + /** `YYYY-MM-DD HH:MM:SS` */ + starts_at: string; + /** `YYYY-MM-DD HH:MM:SS`（空 = 没设结束） */ + ends_at: string; + all_day: boolean; + /** 备注 */ + note: string; + /** 重复规则（RFC 5545，空 = 不重复） */ + rrule: string; + /** 提醒（分钟，可多个；服务端存的是数组或逗号串） */ + reminder_minutes: string; + status: string; + transp: boolean; + /** 创建者 person_id */ + created_by: number; +} + +/** 写日程时要发的字段（全部可选 —— 只传变化的） */ +export interface FbCalEventInput { + calendar_id?: number; + title?: string; + location?: string; + starts_at?: string; + ends_at?: string; + all_day?: boolean; + note?: string; + /** 重复：直接给 RRULE 串（端上按 chip 拼好） */ + rrule?: string; + /** 提醒分钟数（多个） */ + reminder_minutes?: number[]; + status?: string; +} + +export class FbCalRepo { + private static _inst: FbCalRepo | null = null; + + static inst(): FbCalRepo { + if (FbCalRepo._inst === null) { + FbCalRepo._inst = new FbCalRepo(); + } + return FbCalRepo._inst; + } + + /** + * 拉日历本清单（`GET /api/v1/calendar/books`）。 + * + * 🔴🔴 这是个**真 bug 的修复**（2026-10-15 接日程改造时发现）： + * 端上原来**不用这个接口**，而是从 `/calendar` 的条目里**归并**出"有哪些本"， + * 并且把 `id` 编成 `seen.size + 1`（1、2、3…）—— + * 那是**臆造的假 id**，与库里的 `calendars.id` 毫无关系。 + * 后果：用假 id 去 `POST /events`（服务端按 `calendar_id` 找本、校验写权限） + * 必然落到错的本、或者直接 403「这本日历不能写入」⇒ **新建日程根本建不上**。 + * ⇒ 老实用 `/calendar/books`（它返回真实 id / kind / perm / 是否私有）。 + * + * ⚠️ `kind` 决定能不能写：`movie`/`trip`/`lunar`/`holiday` 这些是**派生本/系统本**， + * 服务端 `Calendar::isReadonlyKind` 会拒写 ⇒ 端上也要把它们标成 `canWrite=false`， + * 否则用户选了它、点保存才报错（体验很差）。 + */ + async fetchBooks(token: string): Promise { + const res: FbApiResult = await fbApi('/api/v1/calendar/books', { token: token }); + if (!res.ok) { + hilog.warn(DOMAIN, TAG, '日历本拉取失败：%{public}s', res.error); + return []; + } + const out: FbCalBook[] = []; + try { + const rows: Record[] = JSON.parse(res.data) as Record[]; + for (const r of rows) { + const kind: string = this.str(r, 'kind'); + const perm: string = this.str(r, 'perm'); + const b: FbCalBook = { + id: this.num(r, 'id'), + name: this.str(r, 'name'), + color: this.str(r, 'color') !== '' ? this.str(r, 'color') : '#9AA0A6', + // 派生本（观影/旅行/农历/节假日/节气/传统节日）不可写；只读共享本也不可写 + canWrite: !this.isReadonlyKind(kind) && perm !== 'read', + visible: true, + shared: r['shared'] === 1 || r['shared'] === true, + derived: kind !== 'custom' + }; + if (b.id > 0 && b.name !== '') { + out.push(b); + } + } + } catch (err) { + hilog.error(DOMAIN, TAG, '日历本解析失败：%{public}s', JSON.stringify(err)); + } + return out; + } + + /** 与 `Calendar::isReadonlyKind` 同一口径（这些本不放用户日程） */ + private isReadonlyKind(kind: string): boolean { + return kind === 'movie' || kind === 'trip' || kind === 'lunar' + || kind === 'holiday' || kind === 'traditional' || kind === 'solarterm'; + } + + /** + * 拉单条日程的完整字段（打开详情/编辑时用）。 + * + * ⚠️ `/calendar` 给的是"画格子用的精简条目"（标题/时间/本色/地点）， + * 没有 `note`/`rrule`/`reminder`/`ends_at` —— 详情与编辑都需要它们， + * 所以点开某条时再单独拉一次（一次往返、几百毫秒）。 + */ + async fetchEvent(id: number, token: string): Promise { + if (id <= 0) { + return null; + } + const res: FbApiResult = await fbApi('/api/v1/events/' + id.toString(), { token: token }); + if (!res.ok) { + hilog.warn(DOMAIN, TAG, '日程详情拉取失败（%{public}d）：%{public}s', id, res.error); + return null; + } + try { + const o: Record = JSON.parse(res.data) as Record; + return this.toFull(o); + } catch (err) { + hilog.error(DOMAIN, TAG, '日程详情解析失败：%{public}s', JSON.stringify(err)); + return null; + } + } + + /** 新建日程（`POST /api/v1/events`）。成功时返回新 id（0 = 失败/取不到） */ + async create(input: FbCalEventInput, token: string): Promise { + const body: Record = this.toBody(input); + const res: FbApiResult = await fbApi('/api/v1/events', + { method: 'POST', body: body, token: token }); + return res; + } + + /** 改日程（`PATCH /api/v1/events/`）—— 只传要改的字段 */ + async update(id: number, input: FbCalEventInput, token: string): Promise { + const body: Record = this.toBody(input); + return await fbApi('/api/v1/events/' + id.toString(), + { method: 'PATCH', body: body, token: token }); + } + + /** 删日程（`DELETE /api/v1/events/`） */ + async remove(id: number, token: string): Promise { + return await fbApi('/api/v1/events/' + id.toString(), + { method: 'DELETE', token: token }); + } + + /** 从接口返回里取新 id（取不到返回 0） */ + newIdOf(res: FbApiResult): number { + if (!res.ok || res.data === '') { + return 0; + } + try { + const o: Record = JSON.parse(res.data) as Record; + const v: Object | undefined = o['id']; + if (typeof v === 'number') { + return v; + } + if (typeof v === 'string') { + return parseInt(v, 10); + } + } catch (err) { + hilog.warn(DOMAIN, TAG, '解析新日程 id 失败：%{public}s', JSON.stringify(err)); + } + return 0; + } + + /** + * 输入 → 请求体。 + * + * ⚠️ **只放传进来的字段**：服务端每个字段都是"取不到就用原值"， + * 少传一个就少覆盖一个 —— 这正是"编辑时只改一项、其余不动"能成立的原因。 + * （反过来，若把所有字段都填上默认值发过去，会把用户没动的东西清空。） + */ + private toBody(input: FbCalEventInput): Record { + const b: Record = {}; + if (input.calendar_id !== undefined) { b['calendar_id'] = input.calendar_id; } + if (input.title !== undefined) { b['title'] = input.title; } + if (input.location !== undefined) { b['location'] = input.location; } + if (input.starts_at !== undefined) { b['starts_at'] = input.starts_at; } + if (input.ends_at !== undefined) { b['ends_at'] = input.ends_at; } + if (input.all_day !== undefined) { b['all_day'] = input.all_day; } + if (input.note !== undefined) { b['note'] = input.note; } + if (input.rrule !== undefined) { b['rrule'] = input.rrule; } + if (input.status !== undefined) { b['status'] = input.status; } + if (input.reminder_minutes !== undefined) { b['reminder_minutes'] = input.reminder_minutes; } + return b; + } + + /** 接口对象 → 强类型（容错：缺字段给默认值） */ + private toFull(o: Record): FbCalEventFull { + const e: FbCalEventFull = { + id: this.num(o, 'id'), + calendar_id: this.num(o, 'calendar_id'), + title: this.str(o, 'title'), + location: this.str(o, 'location'), + starts_at: this.str(o, 'starts_at'), + ends_at: this.str(o, 'ends_at'), + all_day: o['all_day'] === true || o['all_day'] === 1, + note: this.str(o, 'note'), + rrule: this.str(o, 'rrule'), + reminder_minutes: this.remStr(o, 'reminder_minutes'), + status: this.str(o, 'status') !== '' ? this.str(o, 'status') : 'confirmed', + transp: o['transp'] === true || o['transp'] === 1, + created_by: this.num(o, 'created_by') + }; + return e; + } + + private str(o: Record, k: string): string { + const v: Object | undefined = o[k]; + if (typeof v === 'string') { + return v; + } + if (typeof v === 'number') { + return v.toString(); + } + return ''; + } + + private num(o: Record, k: string): number { + const v: Object | undefined = o[k]; + if (typeof v === 'number') { + return v; + } + if (typeof v === 'string') { + const n: number = parseInt(v, 10); + return isNaN(n) ? 0 : n; + } + return 0; + } + + /** 提醒可能是数组、也可能是逗号串 ⇒ 统一成逗号串 */ + private remStr(o: Record, k: string): string { + const v: Object | undefined = o[k]; + if (v === undefined || v === null) { + return ''; + } + if (Array.isArray(v)) { + const parts: string[] = []; + for (const x of v as Object[]) { + parts.push(typeof x === 'number' ? x.toString() : String(x)); + } + return parts.join(','); + } + if (typeof v === 'string') { + return v; + } + if (typeof v === 'number') { + return v.toString(); + } + return ''; + } +} \ No newline at end of file diff --git a/entry/src/main/ets/data/FbCalSettings.ets b/entry/src/main/ets/data/FbCalSettings.ets new file mode 100644 index 0000000..f1e8e9b --- /dev/null +++ b/entry/src/main/ets/data/FbCalSettings.ets @@ -0,0 +1,161 @@ +/** + * 家书 FamilyBook · 日程设置（鸿蒙端） + * + * 存"日程模块自己的偏好"——它们是**这台设备上的人怎么看日历**， + * 与服务器无关、也不该同步给别人。 + * + * 🔴 用户 2026-10-15：「我们家书的日程功能模块，包括它的界面设计和功能， + * 跟 SyncCalendar 做得一样，就差不多。……有几种不同的视图方式， + * 然后包括下面日程的显示啊什么之类的。」 + * ⇒ 对齐 SyncCalendar 的设置项： + * · **默认视图**（月 / 周 / 列表）—— 打开日程页时先用哪个 + * · **日程显示方式**（时间轴 / 列表）—— 同一天里日程怎么画 + * · **新建日程落到哪本日历**（默认日历本） + * · **哪些日历本可见**（隐藏不想看的那几本） + * + * 🔴 为什么用 `preferences` 而不是本地库：都是**单个键值**， + * 不是多行记录（同一范式见 `FbTokenStore` 的说明）。 + * ⚠️ 必须**同步读**（`get*()`）：页面一渲染就要知道用哪个视图， + * 若只能 await，每个调用点都要 async、把简单逻辑搞碎。 + * ⇒ 用"启动时预加载进内存 + 写时同时更新内存"（同 FbTokenStore）。 + */ + +import { preferences } from '@kit.ArkData'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { common } from '@kit.AbilityKit'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbCalSettings'; + +/** preferences 实例名 */ +const STORE_NAME: string = 'fb_calendar'; + +const K_VIEW: string = 'default_view'; // month | week | agenda +const K_STYLE: string = 'display_style'; // timeline | list +const K_BOOK: string = 'default_book_id'; // 新建日程默认落到哪本 +const K_HIDDEN: string = 'hidden_books'; // 逗号分隔的日历本 id + +/** 视图：月 / 周 / 列表（与 SyncCalendar 的 VIEW_ORDER 同一套） */ +export type FbCalView = 'month' | 'week' | 'agenda'; +/** 日程画法：时间轴 / 列表（与 SyncCalendar 的 displayStyle 同一套） */ +export type FbCalStyle = 'timeline' | 'list'; + +class FbCalSettingsImpl { + private view: FbCalView = 'month'; + private style: FbCalStyle = 'timeline'; + private bookId: number = 0; + private hidden: string = ''; + private store: preferences.Preferences | null = null; + private ready: boolean = false; + + /** 预加载进内存（应用启动时调一次；幂等） */ + async init(ctx: common.Context): Promise { + if (this.ready) { + return; + } + try { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + const v: preferences.ValueType = await this.store.get(K_VIEW, 'month'); + const s: preferences.ValueType = await this.store.get(K_STYLE, 'timeline'); + const b: preferences.ValueType = await this.store.get(K_BOOK, 0); + const h: preferences.ValueType = await this.store.get(K_HIDDEN, ''); + this.view = (v === 'week' || v === 'agenda') ? v : 'month'; + this.style = (s === 'list') ? 'list' : 'timeline'; + this.bookId = typeof b === 'number' ? b : 0; + this.hidden = typeof h === 'string' ? h : ''; + this.ready = true; + hilog.info(DOMAIN, TAG, '日程设置预加载完成：%{public}s / %{public}s', this.view, this.style); + } catch (err) { + // ⚠️ 读不到就用默认值，**不要**让启动挂掉 + hilog.warn(DOMAIN, TAG, '日程设置预加载失败：%{public}s', JSON.stringify(err)); + this.ready = true; + } + } + + isReady(): boolean { + return this.ready; + } + + // ---- 同步读 ---- + getView(): FbCalView { + return this.view; + } + + getStyle(): FbCalStyle { + return this.style; + } + + getBookId(): number { + return this.bookId; + } + + /** 被隐藏的日历本 id 列表 */ + hiddenIds(): number[] { + const out: number[] = []; + if (this.hidden === '') { + return out; + } + for (const s of this.hidden.split(',')) { + const n: number = parseInt(s, 10); + if (!isNaN(n) && n > 0) { + out.push(n); + } + } + return out; + } + + /** 某本日历是否可见（默认都可见） */ + isVisible(id: number): boolean { + return this.hiddenIds().indexOf(id) < 0; + } + + // ---- 异步写（同时更新内存） ---- + async setView(v: FbCalView): Promise { + this.view = v; + await this.put(K_VIEW, v); + } + + async setStyle(s: FbCalStyle): Promise { + this.style = s; + await this.put(K_STYLE, s); + } + + async setBookId(id: number): Promise { + this.bookId = id; + await this.put(K_BOOK, id); + } + + /** 设置某本日历的可见性 */ + async setVisible(id: number, visible: boolean): Promise { + const ids: number[] = this.hiddenIds(); + const at: number = ids.indexOf(id); + if (visible && at >= 0) { + ids.splice(at, 1); + } else if (!visible && at < 0) { + ids.push(id); + } + const parts: string[] = []; + for (const n of ids) { + parts.push(n.toString()); + } + this.hidden = parts.join(','); + await this.put(K_HIDDEN, this.hidden); + } + + private async put(key: string, val: preferences.ValueType): Promise { + try { + if (this.store === null) { + hilog.warn(DOMAIN, TAG, '还没有 store，设置没能落盘（重启会丢）'); + return; + } + await this.store.put(key, val); + // ⚠️ `put` 只写内存，**必须 `flush`** 才落盘（同 FbTokenStore 的坑） + await this.store.flush(); + } catch (err) { + hilog.error(DOMAIN, TAG, '日程设置保存失败：%{public}s', JSON.stringify(err)); + } + } +} + +/** 全局单例 */ +export const FB_CAL_SETTINGS: FbCalSettingsImpl = new FbCalSettingsImpl(); \ No newline at end of file diff --git a/entry/src/main/ets/data/FbDb.ets b/entry/src/main/ets/data/FbDb.ets new file mode 100644 index 0000000..d41983e --- /dev/null +++ b/entry/src/main/ets/data/FbDb.ets @@ -0,0 +1,460 @@ +/** + * 家书 FamilyBook · 本地库管理器（鸿蒙端） + * + * 职责：打开/创建本地库、首装建表、按版本迁移、提供便捷查询。 + * + * 🔴 为什么用**单例**而不是每次 `getRdbStore`： + * RDB 的 store 是可以复用的句柄，反复打开会重复持有连接； + * 而且首装建表/迁移**必须只跑一次**（并发打开会两边都建表、互相报错）。 + * ⚠️ 用 Promise 缓存（`openPromise`）而不是"boolean 标志"： + * 标志位挡不住并发——两个调用同时进来时，标志都还是 false， + * 于是两个都去打开。缓存 Promise 才能保证"同一时刻只有一次打开"。 + */ + +import { relationalStore } from '@kit.ArkData'; +import { common } from '@kit.AbilityKit'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { BusinessError } from '@kit.BasicServicesKit'; +import { FB_DB_VERSION, FB_SCHEMA_SQL, FB_STORE_CONFIG } from './FbSchema'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbDb'; + +/** + * 本地库管理器。 + * + * ⚠️ 用 class + 模块级单例，而不是 static 方法堆在一个类上： + * 需要持有 `store` 句柄与"打开中"的 Promise，这些是**实例状态**。 + */ +export class FbDb { + private store: relationalStore.RdbStore | null = null; + + /** + * 最后一次打开/操作失败的说明（'' = 没失败）。 + * + * 🔴 为什么必须留这么一个字段（而不是只打 hilog）： + * **本机设备 hilog 读不出内容**（已知限制，试过 `hilog -x -T xxx` 全是空）。 + * 而"本地库没建起来"这种问题**只能从失败原因定位** —— + * 留在内存里、由设置页显示出来，是这台设备上唯一可靠的诊断手段。 + * ⚠️ 它**不是**给用户看的正式文案（可能是英文异常）， + * 是给开发者看的诊断信息，界面要标成"诊断"。 + */ + private lastError: string = ''; + /** 打开进度打点（走到哪一步了，同样为了诊断） */ + private lastStage: string = ''; + /** 打开中的 Promise（并发去重，见文件头说明） */ + private openPromise: Promise | null = null; + + /** + * 打开（必要时创建）本地库并保证结构就绪。 + * + * @param ctx 应用上下文（`getContext()` 得到的能力上下文， + * ⚠️ 不能传 `undefined`——RDB 要靠它定位沙箱目录） + */ + open(ctx: common.Context): Promise { + if (this.store !== null) { + return Promise.resolve(this.store); + } + if (this.openPromise !== null) { + return this.openPromise; // 已有人在开，跟着等同一个 + } + this.openPromise = this.doOpen(ctx); + return this.openPromise; + } + + /** 真正的打开逻辑 */ + private async doOpen(ctx: common.Context): Promise { + try { + // 🔴 诊断：把每一步单独打点。 + // 第一次跑时"界面显示走到了同步、但沙箱里没有 .db 文件"—— + // 说明**某一步静默失败了**。分步打点才能定位是哪一步。 + this.lastStage = '[1] 准备 getRdbStore'; + hilog.info(DOMAIN, TAG, '[1] 准备 getRdbStore，name=%{public}s', FB_STORE_CONFIG.name); + const store: relationalStore.RdbStore = await relationalStore.getRdbStore(ctx, FB_STORE_CONFIG); + this.lastStage = '[2] getRdbStore 成功，version=' + store.version.toString(); + hilog.info(DOMAIN, TAG, '[2] getRdbStore 成功，当前 version=%{public}d', store.version); + + // 首装建表：`IF NOT EXISTS` 本身幂等，但**版本迁移**不能这样粗暴跑 + await this.createSchemaIfNeeded(store); + this.lastStage = '[3] 建表完成，version=' + store.version.toString(); + hilog.info(DOMAIN, TAG, '[3] 建表完成，version=%{public}d', store.version); + + await this.migrate(store); + this.lastStage = '[4] 迁移完成，version=' + store.version.toString(); + hilog.info(DOMAIN, TAG, '[4] 迁移完成，version=%{public}d', store.version); + + this.store = store; + this.lastStage = '[5] 就绪，version=' + store.version.toString(); + this.lastError = ''; + hilog.info(DOMAIN, TAG, '[5] 本地库就绪，版本=%{public}d', store.version); + return store; + } catch (err) { + // ⚠️ 失败时**必须清掉 openPromise**，否则后续调用永远拿到这个失败的 Promise + // （表现为"重试也没用"，很难查）。 + this.openPromise = null; + const e: BusinessError = err as BusinessError; + // ⚠️ 必须把 message 完整打出来：BusinessError 的 code 常是 14800xxx 这类 + // 通用码，光看码猜不出原因，message 里才有"哪个参数不对"。 + this.lastError = 'code=' + (e.code !== undefined ? e.code : -1).toString() + + ' msg=' + (e.message !== undefined ? e.message : JSON.stringify(err)); + hilog.error(DOMAIN, TAG, '打开本地库失败：code=%{public}d message=%{public}s', + e.code !== undefined ? e.code : -1, + e.message !== undefined ? e.message : JSON.stringify(err)); + throw err as Error; + } + } + + /** + * 首装建表。 + * + * ⚠️ 判据是 `store.version === 0`（全新库），**不是**"表数量为 0"： + * 后者在有"只建了部分表"的脏状态时会误判。 + */ + private async createSchemaIfNeeded(store: relationalStore.RdbStore): Promise { + if (store.version !== 0) { + return; // 老库，交给 migrate() + } + for (const sql of FB_SCHEMA_SQL) { + await store.executeSql(sql); + } + store.version = FB_DB_VERSION; + hilog.info(DOMAIN, TAG, '首装建表完成，%{public}d 条语句', FB_SCHEMA_SQL.length); + } + + /** + * 按版本迁移。 + * + * 🔴 本地库迁移与服务端**完全不同**： + * 服务端可以"每次请求都全量 ALTER 一遍"（它自己就是服务器、失败可重试）； + * 用户的手机不能这么干 —— 逐版本、可预期、失败能停在已知状态。 + * + * ⚠️ 目前只有 v1（首版），迁移体是空的占位。 + * 将来加表/加列时在这里按 `from` 版本逐级 ALTER，**不要**直接改 FB_SCHEMA_SQL —— + * 那只会影响新装用户，老用户升不上来（这是最常见的迁移翻车方式）。 + */ + private async migrate(store: relationalStore.RdbStore): Promise { + const from: number = store.version; + if (from === 0 || from >= FB_DB_VERSION) { + return; + } + hilog.info(DOMAIN, TAG, '本地库迁移：v%{public}d → v%{public}d', from, FB_DB_VERSION); + + // ---- v1 → v2：名册支持 ---- + // ⚠️ 老库（已经装了观影那版的手机）升级时走到这里。 + // v2 的改动是"persons 补 7 列 + 新增 person_roster / person_tags 两张表"。 + // ⚠️ SQLite 的 `ALTER TABLE ADD COLUMN` **不支持 IF NOT EXISTS**， + // 所以这里靠"版本号只加一次"来保证不重复执行（from<2 才进来）。 + // ⚠️ 新增的列都给上 NOT NULL DEFAULT '' 或允许 NULL —— + // 老数据行会被填上默认值，不会因为加列而失败。 + if (from < 2) { + const addCols: string[] = [ + `ALTER TABLE persons ADD COLUMN avatar_color TEXT`, + `ALTER TABLE persons ADD COLUMN email TEXT`, + `ALTER TABLE persons ADD COLUMN org TEXT`, + `ALTER TABLE persons ADD COLUMN title TEXT`, + `ALTER TABLE persons ADD COLUMN slogan TEXT`, + `ALTER TABLE persons ADD COLUMN address TEXT`, + `ALTER TABLE persons ADD COLUMN addr_city TEXT`, + ]; + for (const sql of addCols) { + try { + await store.executeSql(sql); + } catch (err) { + // ⚠️ 已经加过这一列就跳过（比如迁移中途失败后重跑）。 + // 这里**不能**直接抛：一列已在会让整次迁移卡死、永远升不上去。 + hilog.warn(DOMAIN, TAG, '加列跳过（可能已存在）：%{public}s', sql); + } + } + // 两张新表用 IF NOT EXISTS，可重复执行 + const newTables: string[] = [ + `CREATE TABLE IF NOT EXISTS person_roster ( + owner_id INTEGER NOT NULL, + person_id INTEGER NOT NULL, + family_id INTEGER NOT NULL, + group_id INTEGER NOT NULL DEFAULT 0, + sort_order INTEGER NOT NULL DEFAULT 0, + source TEXT NOT NULL DEFAULT '', + updated_at TEXT NOT NULL DEFAULT '', + synced_at INTEGER NOT NULL DEFAULT 0, + PRIMARY KEY (owner_id, person_id) + )`, + `CREATE INDEX IF NOT EXISTS idx_roster_owner ON person_roster (owner_id, sort_order)`, + `CREATE TABLE IF NOT EXISTS person_tags ( + owner_id INTEGER NOT NULL, + person_id INTEGER NOT NULL, + tag TEXT NOT NULL, + updated_at TEXT NOT NULL DEFAULT '', + synced_at INTEGER NOT NULL DEFAULT 0, + PRIMARY KEY (owner_id, person_id, tag) + )`, + `CREATE INDEX IF NOT EXISTS idx_tags_owner ON person_tags (owner_id, tag)`, + ]; + for (const sql of newTables) { + await store.executeSql(sql); + } + hilog.info(DOMAIN, TAG, 'v2 迁移完成（名册）'); + } + + // ---- v2 → v3：通用模块缓存 ---- + // ⚠️ 一张"按模块名存 JSON"的通用表（理由见 FbSchema 里 module_cache 的说明）。 + // 用 IF NOT EXISTS，可重复执行。 + if (from < 3) { + await store.executeSql( + 'CREATE TABLE IF NOT EXISTS module_cache (' + + ' name TEXT PRIMARY KEY, payload TEXT NOT NULL DEFAULT \'\',' + + ' fetched_at INTEGER NOT NULL DEFAULT 0)'); + hilog.info(DOMAIN, TAG, 'v3 迁移完成（模块缓存）'); + } + + // ---- v3 → v4：名册行补 `phones`（JSON 数组，主号在前）---- + // + // 🔴 为什么存 JSON 而不是"号码表"： + // 号码本来就是**名册同步时一起拿到的**（`/roster` 的 `phones` 字段）， + // 单独建表反而要多一次 join、多一套写入逻辑；而这里只需要"整组读出来"。 + // ⚠️ 与"标签用 person_tags 表"不同：标签要**跨人聚合**（标签云）、 + // 必须能 GROUP BY，所以它值得一张表；电话不需要聚合。 + if (from < 4) { + await store.executeSql( + "ALTER TABLE person_roster ADD COLUMN phones TEXT NOT NULL DEFAULT '[]'"); + hilog.info(DOMAIN, TAG, 'v4 迁移完成（名册电话）'); + } + + store.version = FB_DB_VERSION; + } + + /** 取已打开的 store；未打开时报错（而不是静默返回 null，避免空指针难查） */ + require(): relationalStore.RdbStore { + if (this.store === null) { + throw new Error('本地库还没打开，请先 await FbDb.inst().open(ctx)'); + } + return this.store; + } + + /** 是否已就绪 */ + isReady(): boolean { + return this.store !== null; + } + + /** 打开失败的原因（'' = 没失败）；**诊断用**，见 lastError 的说明 */ + errorText(): string { + return this.lastError; + } + + /** 打开进度到哪一步；**诊断用** */ + stageText(): string { + return this.lastStage; + } + + /** + * 执行查询并返回对象数组。 + * + * ⚠️ 用 `querySql` 直接写 SQL 而不是 `RdbPredicates`： + * 本项目的查询都是"按 family_id + updated_at 增量拉"这类**带条件的复杂查询**， + * Predicates 表达"IN (子查询)"之类很别扭；而 SQL 是服务端同步过来的原文， + * 直接对照排查更方便。 + * ⚠️ 所有外部值一律走 `?` 占位（下方 `args`），**不做字符串拼接** —— 防注入。 + */ + async queryRows(sql: string, args: relationalStore.ValueType[] = []): Promise { + const store: relationalStore.RdbStore = this.require(); + const rs: relationalStore.ResultSet = await store.querySql(sql, args); + const rows: FbRow[] = []; + try { + while (rs.goToNextRow()) { + rows.push(FbRow.fromResultSet(rs)); + } + } finally { + rs.close(); // ⚠️ 必须关；不关会泄漏游标，连续查询会报错 + } + return rows; + } + + /** 执行一条查询，返回第一行（没有则 null） */ + async queryOne(sql: string, args: relationalStore.ValueType[] = []): Promise { + const rows: FbRow[] = await this.queryRows(sql, args); + return rows.length > 0 ? rows[0] : null; + } + + /** 执行写语句（INSERT/UPDATE/DELETE 均可） */ + async exec(sql: string, args: relationalStore.ValueType[] = []): Promise { + await this.require().executeSql(sql, args); + } + + /** 查询单个数值（COUNT/MAX 之类） */ + /** + * 查询单个数值（COUNT / MAX 之类）。 + * + * ⚠️ 必须走 `FbRow.num()` 而不是 `typeof v === 'number' ? v : 0`： + * SQLite 的 `COUNT(*)` 经 `getValue()` 取回来可能是 **bigint** + * （或字符串），只认 `number` 会把**真实结果错判成 0** —— + * 实测踩过：库里明明有 200 条，自检却报 `ev0`， + * 一度误判成"数据没写进去"，白查了很久。 + * ⇒ 交给 `num()` 统一做类型收敛。 + */ + async scalar(sql: string, args: relationalStore.ValueType[] = []): Promise { + const row: FbRow | null = await this.queryOne(sql, args); + if (row === null) { + return 0; + } + const keys: string[] = row.keys(); + if (keys.length === 0) { + return 0; + } + return row.num(keys[0], 0); + } + + /** + * 在事务里跑一段操作（**用 `createTransaction` 的对象式 API**）。 + * + * 🔴🔴 这里踩过一个很深的坑，务必记住（完整排查过程见文末）： + * · 老的 `store.beginTransaction()` + `store.commit()`（无参三件套） + * 在中间有 `await` 时会**丢事务上下文** ⇒ + * "数据看似写进去了（同连接能查到）、`COUNT(*)` 却是 0、 + * 且 Promise 永不返回"。 + * · 换成 `createTransaction()` 拿到**事务对象**后， + * 在它上面用 `batchInsertSync`（同步版）仍然**卡住** + * （实测停在"4/6 组装数据"→写入之间，几分钟不返回）。 + * ⇒ 最终可行组合：**`createTransaction()` 对象 + 在事务对象上 `await` 异步版** + * （`batchInsert` / `execute`）。事务上下文由**对象**持有， + * 所以这里的 `await` 不会像老三件套那样丢上下文。 + * + * ⚠️ 回调必须是 `async` 且**逐个 await 完成后再返回** —— + * 回调返回后才会 `commit()`，中途还有未完成的写入就会提交不完整。 + */ + async transaction(work: (tx: relationalStore.Transaction) => Promise): Promise { + const store: relationalStore.RdbStore = this.require(); + const tx: relationalStore.Transaction = await store.createTransaction(); + try { + await work(tx); + await tx.commit(); + } catch (err) { + // ⚠️ 回滚也 await；失败时不往上抛（避免掩盖原始错误） + try { + await tx.rollback(); + } catch (rollErr) { + hilog.error(DOMAIN, TAG, '回滚也失败了：%{public}s', JSON.stringify(rollErr)); + } + hilog.error(DOMAIN, TAG, '事务回滚：%{public}s', JSON.stringify(err)); + throw err as Error; + } + } + + /** 关闭本地库（一般只在退出应用时调用） */ + async close(): Promise { + if (this.store !== null) { + await this.store.close(); + this.store = null; + this.openPromise = null; + } + } + + // ---- 单例 ---- + private static instance: FbDb | null = null; + + static inst(): FbDb { + if (FbDb.instance === null) { + FbDb.instance = new FbDb(); + } + return FbDb.instance; + } +} + +/** + * 一行查询结果（列名 → 值）。 + * + * ⚠️ 为什么不用 `Record` 直接返回： + * ResultSet 的列值要**逐个按列名取**（`getString` / `getLong` / `isColumnNull`）， + * 直接塞进 Record 会丢掉"这一列是否为 NULL"的信息 + * （SQLite 里 NULL 与空串是两回事，把 NULL 变成 '' 会让"有没有填备注"判错）。 + * 这里用一个小包装类把 ResultSet 的语义完整带出来。 + */ +export class FbRow { + private data: Map = new Map(); + private nulls: Set = new Set(); + + /** 从 ResultSet 当前行读全部列 */ + static fromResultSet(rs: relationalStore.ResultSet): FbRow { + const row: FbRow = new FbRow(); + const names: string[] = rs.getColumnNames(); + for (const name of names) { + const idx: number = rs.getColumnIndex(name); + if (rs.isColumnNull(idx)) { + row.nulls.add(name); // 记住"这列是 NULL"，不是空值 + row.data.set(name, ''); + } else { + // ⚠️ 用 `getValue(idx)` 而不是 `getColumnType(idx)` 再分支： + // · `getColumnType` 返回的是 **Promise**（异步！），在同步循环里用会拿到 + // Promise 对象、所有比较都成立不了（第一版就这么错的）； + // · 就算换成 `getColumnTypeSync`，也还是"先问类型再取值"两步。 + // `getValue` 直接按列的真实类型返回 `ValueType`，一步到位、不丢类型。 + row.data.set(name, rs.getValue(idx)); + } + } + return row; + } + + keys(): string[] { + const out: string[] = []; + this.data.forEach((_v: relationalStore.ValueType, k: string) => { + out.push(k); + }); + return out; + } + + /** 该列是否为 NULL */ + isNull(name: string): boolean { + return this.nulls.has(name); + } + + get(name: string): relationalStore.ValueType { + const v: relationalStore.ValueType | undefined = this.data.get(name); + return v !== undefined ? v : ''; + } + + /** 取字符串；NULL 会返回 null（与"空串"区分开） */ + str(name: string): string | null { + if (this.isNull(name)) { + return null; + } + const v: relationalStore.ValueType = this.get(name); + if (typeof v === 'string') { + return v; + } + if (typeof v === 'number' || typeof v === 'bigint' || typeof v === 'boolean') { + return String(v); // ⚠️ ValueType 含 bigint/boolean，都要能转 + } + return null; // Uint8Array / Asset 之类不走字符串通道 + } + + /** 取字符串，NULL 折成空串（表单显示用） */ + strOr(name: string, fallback: string): string { + const v: string | null = this.str(name); + return v !== null ? v : fallback; + } + + /** 取整数；NULL 折成 fallback */ + num(name: string, fallback: number): number { + if (this.isNull(name)) { + return fallback; + } + const v: relationalStore.ValueType = this.get(name); + if (typeof v === 'number') { + return v; + } + if (typeof v === 'bigint') { + return Number(v); + } + if (typeof v === 'string') { + const n: number = Number(v); + return Number.isNaN(n) ? fallback : n; + } + if (typeof v === 'boolean') { + return v ? 1 : 0; + } + return fallback; + } + + /** 取布尔（SQLite 用 0/1 存） */ + bool(name: string): boolean { + return this.num(name, 0) !== 0; + } +} \ No newline at end of file diff --git a/entry/src/main/ets/data/FbDeviceStore.ets b/entry/src/main/ets/data/FbDeviceStore.ets new file mode 100644 index 0000000..c2ada14 --- /dev/null +++ b/entry/src/main/ets/data/FbDeviceStore.ets @@ -0,0 +1,163 @@ +/** + * 家书 FamilyBook · 设备身份（鸿蒙端） + * + * 只干一件事：告诉服务器「我是哪台设备」。 + * + * 🔴 v57（用户 2026-10-17）： + * 「我们在请求服务端的时候，就需要把我们的客户端的这个设备信息， + * 就是我的设备信息，提交到我们的服务器端。」 + * 「只有 uuid 用户无法确定是哪台设备」——所以还要一个**人看得懂**的名字。 + * + * ⚠️ **为什么 device_id 是 App 自己生成的 UUID，而不是硬件号**： + * HarmonyOS 三方应用**拿不到** UDID / 序列号（`ohos.permission.sec.ACCESS_UDID` + * 是系统级权限，上架审核也会拒）。能拿到的只有机型、系统版本这类**非唯一**信息。 + * ⇒ 首次启动生成一个 UUID 存在本地，之后一直用它。**卸载重装 = 一台新设备** + * （用户 2026-10-17 已确认："卸载重装就是新设备，没问题"）。 + * + * ⚠️ 设备名默认取机型（`marketName`），用户可以在设置页改 —— + * 家里两台一模一样的手机时，"我的 Mate 40" 变成 "爸爸的手机" 才认得出。 + * + * ⚠️ 与 `FbTokenStore` 同构（启动预加载 + 同步读）： + * 网络层要**同步**拿到 device_id 拼请求体，异步读会把简单逻辑打碎。 + */ +import { preferences } from '@kit.ArkData'; +import { common } from '@kit.AbilityKit'; +import { deviceInfo } from '@kit.BasicServicesKit'; +import { util } from '@kit.ArkTS'; +import { hilog } from '@kit.PerformanceAnalysisKit'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbDevice'; + +const STORE_NAME: string = 'fb_device'; +const KEY_ID: string = 'device_id'; +const KEY_NAME: string = 'device_name'; + +/** + * 客户端版本号（与 `AppScope/app.json5` 里的 versionName 对齐）。 + * + * ⚠️ 写常量而不是从 bundleManager 读：这里只需要一个"能对账"的字符串， + * 读 bundle 要走异步 API + 多一个系统依赖，收益不值。 + * 发版时记得改这一行（设备管理页会显示它，用户能看出"这台还是旧版本"）。 + */ +export const FB_APP_VERSION: string = '0.7.0'; // 与 AppScope/app.json5 的 versionName 保持一致 + +/** 平台描述：`harmonyos 5.0.1`（拿不到系统名就退回 API 版本） */ +function platformText(): string { + const name: string = deviceInfo.osFullName; + if (name !== undefined && name !== '') { + return ('harmonyos ' + name).substring(0, 30); + } + return ('harmonyos api' + deviceInfo.sdkApiVersion.toString()).substring(0, 30); +} + +/** 机型默认名：`HUAWEI DEL-AL20` 这种；拿不到就给个通用称呼 */ +function defaultDeviceName(): string { + const market: string = deviceInfo.marketName; + const brand: string = deviceInfo.brand; + if (market !== undefined && market !== '') { + return market.substring(0, 60); + } + if (brand !== undefined && brand !== '') { + return (brand + ' 鸿蒙设备').substring(0, 60); + } + return '我的手机'; +} + +class FbDeviceStoreImpl { + private deviceId: string = ''; + private deviceName: string = ''; + private store: preferences.Preferences | null = null; + private ready: boolean = false; + + /** + * 预加载设备身份；**首次启动时生成** UUID 并落盘。 + * 应在应用启动时调用一次（见 EntryAbility）。 + */ + async init(ctx: common.Context): Promise { + if (this.ready) { + return; + } + try { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + const id: preferences.ValueType = await this.store.get(KEY_ID, ''); + let sid: string = typeof id === 'string' ? id : ''; + if (sid === '') { + // 首次启动：生成一个并**立刻落盘**（不然每次启动都是一台"新设备"， + // 十几次就把服务端的 10 台上限撞满，账号被自己锁死） + sid = util.generateRandomUUID(false); + await this.store.put(KEY_ID, sid); + await this.store.flush(); + hilog.info(DOMAIN, TAG, '首次启动，已生成设备 ID'); + } + this.deviceId = sid; + + const nm: preferences.ValueType = await this.store.get(KEY_NAME, ''); + const snm: string = typeof nm === 'string' ? nm : ''; + this.deviceName = snm !== '' ? snm : defaultDeviceName(); + + this.ready = true; + hilog.info(DOMAIN, TAG, '设备身份就绪'); + } catch (err) { + // ⚠️ 读不到不能挡住启动：给一个**进程内临时**身份，本次能用， + // 只是下次启动会变成"另一台设备"（服务端表现为多一台，用户可踢掉）。 + hilog.warn(DOMAIN, TAG, '设备身份初始化失败：%{public}s', JSON.stringify(err)); + if (this.deviceId === '') { + this.deviceId = util.generateRandomUUID(false); + } + if (this.deviceName === '') { + this.deviceName = defaultDeviceName(); + } + this.ready = true; + } + } + + /** 设备号（同步；未 init 时也保证非空 —— 临时身份） */ + getDeviceId(): string { + if (this.deviceId === '') { + this.deviceId = util.generateRandomUUID(false); + } + return this.deviceId; + } + + /** 设备名（同步） */ + getDeviceName(): string { + if (this.deviceName === '') { + this.deviceName = defaultDeviceName(); + } + return this.deviceName; + } + + /** 平台描述（同步，如 `harmonyos HarmonyOS 5.0.1`） */ + platform(): string { + return platformText(); + } + + /** 预加载是否完成（同步） */ + isReady(): boolean { + return this.ready; + } + + /** 改设备名（"爸爸的手机"这种），只影响这台机器在服务端列表里的显示名 */ + async setDeviceName(ctx: common.Context, name: string): Promise { + const v: string = name.trim().substring(0, 60); + if (v === '') { + return false; + } + try { + if (this.store === null) { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + } + await this.store.put(KEY_NAME, v); + await this.store.flush(); + this.deviceName = v; + return true; + } catch (err) { + hilog.error(DOMAIN, TAG, '设备名保存失败：%{public}s', JSON.stringify(err)); + return false; + } + } +} + +/** 全局单例 */ +export const FB_DEVICE_STORE: FbDeviceStoreImpl = new FbDeviceStoreImpl(); diff --git a/entry/src/main/ets/data/FbHttp.ets b/entry/src/main/ets/data/FbHttp.ets new file mode 100644 index 0000000..13953c8 --- /dev/null +++ b/entry/src/main/ets/data/FbHttp.ets @@ -0,0 +1,385 @@ +/** + * 家书 FamilyBook · 网络层（鸿蒙端） + * + * 只做一件事：把 HTTP 请求发出去、把服务端的统一信封拆开。 + * **不碰数据库、不碰 UI** —— 保持"进数据的通道"单一职责。 + * + * 服务端信封（`app/Api.php` 的 `Api::ok` / `Api::fail`）： + * 成功：`{ "ok": true, "data": <载荷>, ...额外字段 }` + * 失败：`{ "ok": false, "error": "人话错误说明", "code": "机器码" }` + * ⚠️ HTTP 状态码同时也有意义（401/403/404/422…），别只看 `ok`。 + * + * 🔴 为什么把"信封拆解"放在这一层，而不是各页面自己判断 `resp.ok`： + * 服务端换了信封格式（历史上改过一次），分散判断就要改 N 处； + * 收在这一层，只改一个地方。 + */ + +import { http } from '@kit.NetworkKit'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { BusinessError } from '@kit.BasicServicesKit'; +import { FB_SERVER_STORE } from './FbServerStore'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbHttp'; + +/** + * 预填用的默认服务器地址（**仅用于"首次登录"输入框的初始值**）。 + * + * 🔴 v55（用户 2026-10-17「应用第一次打开，让用户输入服务器地址」）—— + * 地址从"编译期常量"变成了"运行期配置"（见 `FbServerStore`）。 + * 这个常量**不再是请求目标**：请求一律走 `fbApiBase()` 读用户配置。 + * ⚠️ 留着它只是为了让老用户升级后不用手打域名 —— 输入框预填、点一下就连上。 + * 真正生效的永远是用户确认过的那一份。 + */ +export const FB_DEFAULT_SERVER: string = 'https://family.yangyq.net'; + +/** + * 当前服务器基址（用户配置的那一台；未配置返回空串）。 + * + * ⚠️ **每次调用都读一次内存缓存**，不要在模块顶层 `const BASE = fbApiBase()` —— + * 那样用户"更换服务器"之后，本进程里发出去的请求还在打旧地址 + * （模块顶层只求值一次，且本模块在启动时就加载了）。 + * ⇒ 所有拼 URL 的地方都调这个函数。 + */ +export function fbApiBase(): string { + return FB_SERVER_STORE.get(); +} + +/** + * 拼一个可直接给 `Image()` 用的图片地址。 + * + * 🔴 为什么图片要走 `media.php` 而不是直连存储： + * 服务端所有附件（海报/头像/照片）都由 `media.php?k=<相对键>` 代理出去 —— + * 存储可能是本地目录、也可能是 OSS，代理让地址形态恒定（服务端注释里写明）。 + * 客户端只认这一个形式即可。 + * + * 🔴 为什么令牌要放在 **URL query** 里（`&token=`）： + * `Image()` 加载网络地址时**无法附加自定义请求头**， + * 所以令牌只能走 URL。（服务端 v45 起 `media.php` 支持 `?token=` 鉴权， + * 与 `api.php` 的"也接受 `?token=`"是同一约定。） + * + * ⚠️ 必须对 key 做 `encodeURIComponent`：key 里有 `/`（如 + * `posters/xxx.jpg`）和可能的特殊字符，不编码会把 query 弄坏。 + * ⚠️ 但 serve 端会做键净化（拒绝 `..`），所以这里编码是"正确性"需要， + * 不是安全防线（安全由服务端负责）。 + * + * @param key 附件的相对键（如 `posters/963dd25f.jpg`）；空串返回空串 + * @param token API 令牌；空串时也返回地址（服务端会给 401，界面显示占位） + */ +export function fbImageUrl(key: string, token: string): string { + if (key === '') { + return ''; + } + const base: string = fbApiBase(); + if (base === '') { + return ''; + } + let url: string = base + '/media.php?k=' + encodeURIComponent(key); + if (token !== '') { + url += '&token=' + encodeURIComponent(token); + } + return url; +} + +/** 一次接口调用的结果 */ +export interface FbApiResult { + /** 是否成功（HTTP 2xx 且信封 ok=true） */ + ok: boolean; + /** 成功时的载荷（未成功时为 null） */ + data: string; // 原始 JSON 片段，由调用方按类型解析 + /** 失败时的人话说明（面向用户展示） */ + error: string; + /** 失败时的机器码（用于分支判断，如 'unauthorized'） */ + code: string; + /** HTTP 状态码 */ + status: number; +} + +/** 请求参数（所有字段都可选，避免调用方写一堆占位） */ +export interface FbApiOptions { + /** 请求方法，默认 GET */ + method?: string; + /** 查询参数（会被 URL 编码拼到 path 后） */ + query?: Record; + /** + * 请求体（会被 JSON 序列化；GET 时忽略）。 + * + * 🔴 值类型放宽到 `Object`（v52，用户 2026-10-15：名册要"全字段可编辑"）： + * 之前只允许 `string|number|boolean|null`，于是**数组/嵌套对象传不进去** —— + * 而工作经历（一组行）、补充联系方式（按 kind 分组）、标签（字符串数组） + * 都是**结构化的**。旧限制下只能把这些字段漏掉或自己拼字符串， + * 那正是"编辑时只能改几项"的来源。 + * ⇒ 允许任意可 JSON 化的值，由 `JSON.stringify` 统一处理。 + */ + body?: Record; + /** API 令牌（不带则请求匿名，服务端会 401） */ + token?: string; + /** + * `true` = 这次请求的 401 **不要**触发全局"踢回登录页"。 + * + * 🔴 v57（用户 2026-10-17）。为什么需要这个开关： + * 服务端把所有"令牌无效/过期/被踢"都回 401，而**密码错**也是 401。 + * 如果无脑拦截，用户在登录页输错一次密码就会被"全局锁定"逻辑再踢一次， + * 表现为"输错密码后整个 App 闪一下"。 + * ⇒ 只有**带着令牌**的业务请求才该触发锁定；登录、探测令牌这类 + * 自己会处理结果的请求，显式传 `authProbe: true`。 + */ + authProbe?: boolean; +} + +/** + * 「令牌失效了」的全局回调（v57）。 + * + * 🔴 为什么放在网络层而不是每个页面自己判： + * 用户 2026-10-17：「运行期间任何一个请求返回 401，立刻锁定跳登录页 —— + * 这是真正的兜底，因为同步/写入本来就在不断发请求。」 + * 页面有十几个，任何一个漏判都会出现"页面空着但没回登录页"。 + * 收在网络层 = **只有一处**，永远漏不掉。 + * + * ⚠️ 回调由 `EntryAbility` 注册（它拿得到 UIAbilityContext，能做真正的跳转）， + * 网络层自己不碰路由/状态。 + */ +export type FbUnauthorizedCb = () => void; +let unauthorizedCb: FbUnauthorizedCb | null = null; + +/** 注册「令牌失效」回调（重复注册会覆盖，只保留最后一个） */ +export function fbOnUnauthorized(cb: FbUnauthorizedCb): void { + unauthorizedCb = cb; +} + +/** + * 发一次 API 请求。 + * + * ⚠️ 超时给 15 秒：家庭应用走公网 + 可能跨运营商，5 秒太容易误判"网络不可用"； + * 但也别给太长（60 秒），否则用户点了"刷新"要干等。 + */ +export async function fbApi(path: string, opts: FbApiOptions = {}): Promise { + const method: string = opts.method !== undefined ? opts.method : 'GET'; + // 🔴 没配服务器地址时**立刻失败**，不要拼一个 `/api/v1/xxx` 的相对地址发出去 + // （那会落到一个说不清的网络上，报出来的错误跟"地址没填"毫无关系， + // 用户根本猜不到是哪里错了） + const base: string = fbApiBase(); + if (base === '') { + return { + ok: false, data: '', error: '还没有设置服务器地址', code: 'no_server', status: 0 + }; + } + const url: string = base + path + buildQuery(opts.query); + + const req: http.HttpRequest = http.createHttp(); + try { + const header: Record = { + 'Content-Type': 'application/json', + 'Accept': 'application/json' + }; + if (opts.token !== undefined && opts.token !== '') { + header['Authorization'] = 'Bearer ' + opts.token; + } + + const extra: http.HttpRequestOptions = { + method: toMethod(method), + header: header, + connectTimeout: 15000, + readTimeout: 15000, + expectDataType: http.HttpDataType.STRING + }; + if (opts.body !== undefined && method !== 'GET') { + extra.extraData = JSON.stringify(opts.body); + } + + const resp: http.HttpResponse = await req.request(url, extra); + const body: string = typeof resp.result === 'string' ? resp.result : ''; + const out: FbApiResult = parseEnvelope(body, resp.responseCode); + /* v57：401 = 令牌无效/过期/被踢 → 立刻通知全局锁定（见 FbUnauthorizedCb 的说明）。 + ⚠️ 判的是 **HTTP 状态码**而不是 `code` 字段：服务端对三种情况都回 401， + 端上不需要（也不该）区分是"过期"还是"被踢"——处理动作完全一样。 */ + if (out.status === 401 && opts.authProbe !== true && unauthorizedCb !== null) { + unauthorizedCb(); + } + return out; + } catch (err) { + // ⚠️ 网络异常（断网/DNS/超时）走这里，**不是** HTTP 错误码。 + // 必须与"服务端返回 4xx"区分开：前者可重试，后者重试无意义。 + const e: BusinessError = err as BusinessError; + hilog.warn(DOMAIN, TAG, '请求失败 %{public}s：%{public}s', path, JSON.stringify(e)); + return { + ok: false, + data: '', + error: '网络连接不上，请检查手机网络', + code: 'network', + status: 0 + }; + } finally { + req.destroy(); // ⚠️ 必须销毁；不销毁会占着连接（HttpRequest 不是自动回收的） + } +} + +/** 拆服务端信封 */ +function parseEnvelope(body: string, status: number): FbApiResult { + if (body === '') { + return { ok: false, data: '', error: '服务端没有返回内容', code: 'empty', status: status }; + } + let obj: Record | null = null; + try { + obj = JSON.parse(body) as Record; + } catch (err) { + // 非 JSON（例如 Apache 的 502 页面）—— 别把 HTML 当错误信息弹给用户 + hilog.warn(DOMAIN, TAG, '响应不是 JSON（HTTP %{public}d）', status); + return { + ok: false, data: '', error: '服务端返回异常（HTTP ' + status + '）', + code: 'bad_json', status: status + }; + } + + const okVal: Object | undefined = obj['ok']; + const isOk: boolean = okVal === true; + if (isOk) { + // data 可能是对象/数组/标量，统一序列化回字符串交给调用方解析， + // 避免在这一层就假定形状（不同接口的 data 结构差别很大） + const d: Object | undefined = obj['data']; + return { + ok: true, + data: d !== undefined ? JSON.stringify(d) : '', + error: '', code: '', status: status + }; + } + + const errObj: Object | undefined = obj['error']; + const codeObj: Object | undefined = obj['code']; + return { + ok: false, + data: '', + error: typeof errObj === 'string' ? errObj : '请求失败（HTTP ' + status + '）', + code: typeof codeObj === 'string' ? codeObj : '', + status: status + }; +} + +/** 拼查询串（值做 URL 编码，避免关键词里的空格/中文把 URL 弄坏） */ +function buildQuery(query?: Record): string { + if (query === undefined) { + return ''; + } + const parts: string[] = []; + const keys: string[] = Object.keys(query); + for (const k of keys) { + const v: string = query[k]; + parts.push(encodeURIComponent(k) + '=' + encodeURIComponent(v)); + } + return parts.length > 0 ? '?' + parts.join('&') : ''; +} + +/** + * 字符串方法名 → `http.RequestMethod` 枚举。 + * + * ⚠️ 必须显式映射：`RequestMethod` 是**枚举**，不能直接把字符串赋过去 + * （ArkTS 是强类型，`method: 'GET'` 编译不过）。 + */ +function toMethod(m: string): http.RequestMethod { + switch (m.toUpperCase()) { + case 'POST': return http.RequestMethod.POST; + case 'PUT': return http.RequestMethod.PUT; + case 'DELETE': return http.RequestMethod.DELETE; + case 'PATCH': return http.RequestMethod.PATCH; + case 'HEAD': return http.RequestMethod.HEAD; + case 'OPTIONS': return http.RequestMethod.OPTIONS; + case 'TRACE': return http.RequestMethod.TRACE; + case 'CONNECT': return http.RequestMethod.CONNECT; + default: return http.RequestMethod.GET; + } +} + +/* ═══════════════════════════════════════════════════════════════════ + 服务器地址探测（登录第一步：确认"这个地址上真的是家书"） + ═══════════════════════════════════════════════════════════════════ */ + +/** 探测结果 */ +export interface FbProbeResult { + ok: boolean; + /** 服务端自报的应用名（通常是「家书」） */ + app: string; + /** 失败原因（ok=false 时有值，可直接展示） */ + error: string; +} + +/** 服务端 `GET /api/v1/ping` 的 data 形状 */ +interface FbPingData { + service?: string; + api?: string; + app?: string; +} + +interface FbPingEnvelope { + ok?: boolean; + error?: string; + code?: string; + data?: FbPingData; +} + +/** + * 探测一个服务器地址是不是家书服务端。 + * + * 🔴 为什么"只回 HTTP 200"不够（必须要这个函数）： + * 用户填错地址时，最常见的是"填到了另一个网站"或"填成了家书的某个网页路径"—— + * 两者都会返回 200。此时若直接放行，用户会在登录页反复试密码、永远失败， + * 而且**看不出原因**。 + * ⇒ 必须验**内容**：`data.service === 'familybook'`。 + * + * ⚠️ 超时给 8 秒（比业务请求的 15 秒短）：探测是"用户点了按钮在等"的动作， + * 等太久他会以为卡死并反复点。 + * ⚠️ 这里**不读 store**：探测的就是"用户刚输入的那个地址"， + * 验通了才让它写进 store（见登录页的 `connect()`）。 + * + * @param baseUrl 已归一化的基址（见 `fbNormalizeServer`） + */ +export async function fbProbeServer(baseUrl: string): Promise { + const req: http.HttpRequest = http.createHttp(); + try { + const resp: http.HttpResponse = await req.request(baseUrl + '/api/v1/ping', { + method: http.RequestMethod.GET, + header: { 'Accept': 'application/json' }, + connectTimeout: 8000, + readTimeout: 8000, + expectDataType: http.HttpDataType.STRING + }); + const body: string = typeof resp.result === 'string' ? resp.result : ''; + return parseProbe(body, resp.responseCode); + } catch (err) { + const e: BusinessError = err as BusinessError; + hilog.warn(DOMAIN, TAG, '探测服务器失败 %{public}s：%{public}s', baseUrl, JSON.stringify(e)); + return { ok: false, app: '', error: '连不上这个地址，请检查域名是否正确、手机是否联网' }; + } finally { + req.destroy(); + } +} + +/** 拆 ping 响应，把"填错了"的几种情况翻成人话 */ +function parseProbe(body: string, status: number): FbProbeResult { + if (body === '') { + return { ok: false, app: '', error: '这个地址没有响应（HTTP ' + status.toString() + '）' }; + } + let env: FbPingEnvelope; + try { + env = JSON.parse(body) as FbPingEnvelope; + } catch (err) { + // 返回了 HTML —— 十有八九是"填成了别的网站"或"填的是网页路径" + return { + ok: false, app: '', + error: '这个地址返回的不是家书接口（可能填成了别的网站，或少了子目录）' + }; + } + const d: FbPingData | undefined = env.data; + const svc: string = d !== undefined && d.service !== undefined ? d.service : ''; + if (env.ok === true && svc === 'familybook') { + return { + ok: true, + app: d !== undefined && d.app !== undefined ? d.app : '家书', + error: '' + }; + } + if (env.ok !== true && env.error !== undefined && env.error !== '') { + // 服务端明确说了原因（如"还没安装"）—— 原样透出 + return { ok: false, app: '', error: env.error }; + } + return { ok: false, app: '', error: '这个地址不是家书服务器' }; +} diff --git a/entry/src/main/ets/data/FbLogin.ets b/entry/src/main/ets/data/FbLogin.ets new file mode 100644 index 0000000..cb7da1e --- /dev/null +++ b/entry/src/main/ets/data/FbLogin.ets @@ -0,0 +1,192 @@ +/** + * 家书 FamilyBook · 登录客户端（鸿蒙端） + * + * 只做一件事：把「账号 + 密码」换成「API 令牌」。 + * + * 🔴 为什么单独一个文件、不塞进 `FbHttp`： + * `FbHttp` 是"带令牌发请求"的通道；而登录是"**还没令牌时**怎么拿到令牌" + * —— 它在鉴权链路**之前**，语义上是另一件事。 + * 放一起会让 `fbApi` 那层出现"要不要带令牌"的分支（现在它假设一定带）。 + * + * ⚠️ 密码**不落盘、不进日志**。这里只在函数参数里存在， + * 调用方在拿到结果后立刻清掉自己的副本（见 `FbLoginPage.submit`）。 + * + * ⚠️ 地址**从 store 读**（`fbApiBase()`），不接收调用方传的 base： + * 登录页在"连接服务器"那一步已经把地址写进去了， + * 这里再收一个参数会多出一条"传的和存的不一样"的路（迟早出问题）。 + * 探测要验"还没存的地址"，那是 `fbProbeServer()` 的事。 + */ + +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { http } from '@kit.NetworkKit'; +import { fbApiBase } from './FbHttp'; +import { FB_DEVICE_STORE, FB_APP_VERSION } from './FbDeviceStore'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbLogin'; + +/** 登录结果 */ +export interface FbLoginResult { + ok: boolean; + /** 成功时的 API 令牌（fb_ 开头） */ + token: string; + /** 令牌过期时间（'' = 永久） */ + expiresAt: string; + personId: number; + personName: string; + /** 服务端角色（admin / member / guest）—— ⚠️ 不是 `/me` 里那个中文的 role */ + role: string; + /** 家庭名（'' = 服务端没给，不影响登录） */ + familyName: string; + /** 服务端时间（ISO8601）—— 用来记"刚校验过"，'' = 老服务端没给 */ + serverTime: string; + /** 失败原因（ok=false 时有值，可直接展示给用户） */ + error: string; +} + +/** 服务端 `POST /api/v1/login` 的响应形状 */ +interface FbApiLoginData { + token?: string; + expires_at?: string | null; + /** 令牌有效期（小时）。v57 起服务端一律 24（滑动续期） */ + ttl_hours?: number; + /** 服务端当前时间（ISO8601）。端上用它记"上次校验成功的时间" */ + server_time?: string; + person?: FbApiLoginPerson; + family?: FbApiLoginFamily; +} + +interface FbApiLoginPerson { + id?: number; + name?: string; + role?: string; +} + +interface FbApiLoginFamily { + id?: number; + name?: string; +} + +interface FbApiEnvelope { + ok?: boolean; + error?: string; + code?: string; + data?: FbApiLoginData; +} + +class FbLoginClientImpl { + /** + * 登录：账号（手机号或用户名）+ 密码 → 令牌。 + * + * ⚠️ 超时给 15 秒（与 `fbApi` 一致）：登录要过密码哈希（服务端故意加了延迟）， + * 比普通 GET 慢，但也不该让用户干等。 + */ + async login(account: string, password: string): Promise { + const base: string = fbApiBase(); + if (base === '') { + return fail('还没有设置服务器地址'); + } + const url: string = base + '/api/v1/login'; + /* v57（用户 2026-10-17）：登录必须带上**设备身份**。 + 「我们在请求服务端的时候，就需要把我们的客户端的这个设备信息， + 就是我的设备信息，提交到我们的服务器端。」 + ⇒ 服务端才能做到"一台设备一个会话、重登换新令牌、网页端能踢掉这一台"。 + ⚠️ `device_id` 是本地生成的 UUID（不是硬件号，见 FbDeviceStore 的说明）； + `device_name` 是机型，用户可以在设置里改成人话（"爸爸的手机"）。 */ + const body: string = JSON.stringify({ + // 🔴 参数名用 `account`（服务端 v55 起认「手机号或用户名」）； + // 老服务端只认 `phone` —— 所以**两个都带**，谁认识哪个用哪个。 + account: account, + phone: account, + password: password, + device_id: FB_DEVICE_STORE.getDeviceId(), + device_name: FB_DEVICE_STORE.getDeviceName(), + platform: FB_DEVICE_STORE.platform(), + app_version: FB_APP_VERSION, + // ⚠️ `label` 只给"还没升级的旧服务端"看（v57 起服务端用 device_name）； + // `days` 同理，v57 起服务端**不再读**它（一律 24h 滑动）。 + label: '鸿蒙 App', + }); + + + const req = http.createHttp(); + try { + const resp: http.HttpResponse = await req.request(url, { + method: http.RequestMethod.POST, + header: { 'Content-Type': 'application/json' }, + extraData: body, + connectTimeout: 15000, + readTimeout: 15000, + // ⚠️ 与 `fbApi` 保持一致：默认 `result` 可能是 ArrayBuffer， + // 显式要 STRING 才能直接当 JSON 解析。 + expectDataType: http.HttpDataType.STRING, + }); + + const text: string = typeof resp.result === 'string' ? resp.result : ''; + return this.parse(resp.responseCode, text); + } catch (err) { + // ⚠️ 网络异常**不要**把原始错误直接抛给用户看（一串英文 exception）， + // 给一句人话；详细原因进日志。 + hilog.error(DOMAIN, TAG, '登录请求失败：%{public}s', JSON.stringify(err)); + return fail('连不上服务器，请检查网络后重试'); + } finally { + // ⚠️ 必须销毁：`http.createHttp()` 每次都会占用一个连接对象， + // 不 destroy 会持续泄漏（登录页反复重试时尤其明显）。 + req.destroy(); + } + } + + /** 解析响应（服务端信封：{ok, data} / {ok:false, error}） */ + private parse(status: number, text: string): FbLoginResult { + if (text === '') { + return fail('服务器没有返回内容（HTTP ' + status.toString() + '）'); + } + let env: FbApiEnvelope; + try { + env = JSON.parse(text) as FbApiEnvelope; + } catch (err) { + hilog.error(DOMAIN, TAG, '登录响应不是 JSON：%{public}s', text.substring(0, 200)); + return fail('服务器返回了无法识别的内容'); + } + + if (env.ok !== true) { + // ⚠️ 服务端给的 `error` 是**可以直接给用户看**的人话 + // （"手机号或密码不对。" / "尝试太频繁了…"），原样透出即可。 + const msg: string = env.error !== undefined && env.error !== '' ? env.error : '登录失败'; + return fail(msg); + } + + const d: FbApiLoginData | undefined = env.data; + const token: string = d !== undefined && d.token !== undefined ? d.token : ''; + if (token === '') { + return fail('登录成功但没拿到令牌（服务端返回异常）'); + } + const p: FbApiLoginPerson | undefined = d !== undefined ? d.person : undefined; + const f: FbApiLoginFamily | undefined = d !== undefined ? d.family : undefined; + const res: FbLoginResult = { + ok: true, + token: token, + expiresAt: d !== undefined && d.expires_at !== null && d.expires_at !== undefined + ? d.expires_at : '', + personId: p !== undefined && p.id !== undefined ? p.id : 0, + personName: p !== undefined && p.name !== undefined ? p.name : '', + role: p !== undefined && p.role !== undefined ? p.role : '', + familyName: f !== undefined && f.name !== undefined ? f.name : '', + serverTime: d !== undefined && d.server_time !== undefined ? d.server_time : '', + error: '', + }; + return res; + } +} + +/** 造一个失败结果 */ +function fail(msg: string): FbLoginResult { + const r: FbLoginResult = { + ok: false, token: '', expiresAt: '', personId: 0, personName: '', + role: '', familyName: '', serverTime: '', error: msg + }; + return r; +} + +/** 全局单例 */ +export const FbLoginClient: FbLoginClientImpl = new FbLoginClientImpl(); \ No newline at end of file diff --git a/entry/src/main/ets/data/FbModuleLoad.ets b/entry/src/main/ets/data/FbModuleLoad.ets new file mode 100644 index 0000000..420056e --- /dev/null +++ b/entry/src/main/ets/data/FbModuleLoad.ets @@ -0,0 +1,92 @@ +/** + * 家书 FamilyBook · 页面数据接入辅助（鸿蒙端） + * + * 各模块页面的数据装配**都是同一套动作**： + * ① 页面出现 → ② 调仓库 `load()` → ③ 先拿缓存渲染、再拿网络刷新 → ④ 解析成端上类型。 + * 这份文件把 ②④ 收成一处，页面只写"我关心哪个模块、怎么解析"。 + * + * 🔴 为什么要抽（而不是每页各写一遍）： + * 10 个模块 × 同一段 20 行样板 = 200 行重复代码， + * 而重复代码的代价不是"多打几个字"，是**改一处漏九处** + * （本项目在别的地方已经吃过这个亏）。 + */ + +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { FbModuleLoad, FbModuleName, FbModuleRepo } from './FbModuleRepo'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbModuleLoad'; + +/** + * 一次性加载（**直接给路径**，不必登记在上面的静态表里）。 + * + * ⚠️ 给"两级接口"用（如账本明细 `/ledger//entries` —— 路径带 id， + * 没法在静态表里穷举）。缓存键也用完整路径，天然互不冲突。 + */ +export async function loadPath(cacheKey: string, path: string, parse: (json: string) => T, + sink: (data: T, fromCache: boolean) => void, + onNote?: (note: string) => void): Promise { + await FbModuleRepo.inst().load(cacheKey, path, (r: FbModuleLoad): void => { + let data: T; + try { + data = parse(r.json); + } catch (err) { + hilog.error(DOMAIN, TAG, '解析 %{public}s 失败：%{public}s', cacheKey, JSON.stringify(err)); + return; + } + if (onNote !== undefined && r.error !== '') { + onNote(r.error); + } + sink(data, r.fromCache); + }); +} + +/** 模块 → 接口路径 */ +export const FB_MODULE_PATH: Record = { + 'home': '/api/v1/home', + 'calendar': '/api/v1/calendar', + 'days': '/api/v1/days', + 'tasks': '/api/v1/tasks', + 'trips': '/api/v1/trips', + 'ledger': '/api/v1/ledger', + 'resources': '/api/v1/resources', + 'books': '/api/v1/books', + 'notes': '/api/v1/notes', + 'notifications': '/api/v1/notifications', + 'kin': '/api/v1/kin', +}; + +/** + * 装配一个模块：读缓存 + 拉网络，每次拿到**解析后**的数据回调。 + * + * @param name 模块名 + * @param parse JSON → 端上类型的解析函数 + * @param sink 数据到位回调（会被调 1~2 次：缓存一次、网络一次） + * @param onNote 可选：提示文案（同步失败/未登录时给页面显示一行小字） + */ +export async function loadModule(name: FbModuleName, parse: (json: string) => T, + sink: (data: T, fromCache: boolean) => void, + onNote?: (note: string) => void): Promise { + + const path: string = FB_MODULE_PATH[name] !== undefined ? FB_MODULE_PATH[name] : ''; + if (path === '') { + hilog.warn(DOMAIN, TAG, '模块 %{public}s 没有配路径', name); + return; + } + + await FbModuleRepo.inst().load(name, path, (r: FbModuleLoad): void => { + // ⚠️ 解析失败**不能抛**：缓存/接口的形状变了（或确实是空）， + // 抛出去会让页面白屏。这里给个空数组兜住，并留一条日志。 + let data: T; + try { + data = parse(r.json); + } catch (err) { + hilog.error(DOMAIN, TAG, '解析 %{public}s 失败：%{public}s', name, JSON.stringify(err)); + return; + } + if (onNote !== undefined && r.error !== '') { + onNote(r.error); + } + sink(data, r.fromCache); + }); +} \ No newline at end of file diff --git a/entry/src/main/ets/data/FbModuleRepo.ets b/entry/src/main/ets/data/FbModuleRepo.ets new file mode 100644 index 0000000..88aa6a5 --- /dev/null +++ b/entry/src/main/ets/data/FbModuleRepo.ets @@ -0,0 +1,160 @@ +/** + * 家书 FamilyBook · 模块数据仓库（鸿蒙端） + * + * 一份代码服务**所有**业务模块（日历/任务/纪念日/旅程/账本/资源/藏书/笔记/通知/首页）。 + * + * 🔴 为什么不做成"每模块一个 Repo"： + * 观影和名册各写一套是因为它们**有本地表、要落库、要做增量同步**。 + * 而其余模块目前都是"**拉一次、展示、缓存 JSON**"—— + * 为它们各写一个 `xxxRepo` 只会得到 10 份 90% 相同的代码。 + * ⇒ 抽一个通用仓库：**请求 → 缓存到本地库（一张 `module_cache` 表）→ 给 UI 解析后的对象**。 + * ⚠️ 将来某个模块要"离线可写/增量同步"（比如任务打勾、账本记账）， + * 那时再把它单独拆出来落实体表 —— **不要提前抽象**。 + * + * 数据流（与观影/名册同一套骨架）： + * `load()` → 先给**本地缓存**（快、断网可用）→ 再拉接口 → 覆盖缓存 → 再给一次。 + */ + +import { relationalStore } from '@kit.ArkData'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { FbDb, FbRow } from './FbDb'; +import { FbApiOptions, FbApiResult, fbApi } from './FbHttp'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbModuleRepo'; + +/** 模块名（同时也是缓存键） */ +export type FbModuleName = + | 'home' | 'calendar' | 'days' | 'tasks' | 'trips' + | 'ledger' | 'resources' | 'books' | 'notes' | 'notifications' | 'kin'; + +/** 一次加载的结果 */ +export interface FbModuleLoad { + /** 原始 JSON 字符串（空 = 没有数据） */ + json: string; + /** 这份数据来自本地缓存还是网络 */ + fromCache: boolean; + /** 网络失败原因（空 = 没失败；来自缓存时也可能非空） */ + error: string; +} + +/** 加载回调（先缓存、后网络，会调两次） */ +export type FbModuleSink = (r: FbModuleLoad) => void; + +export class FbModuleRepo { + private static _inst: FbModuleRepo | null = null; + private db: FbDb = FbDb.inst(); + + static inst(): FbModuleRepo { + if (FbModuleRepo._inst === null) { + FbModuleRepo._inst = new FbModuleRepo(); + } + return FbModuleRepo._inst; + } + + /** + * 加载一个模块的数据。 + * + * ⚠️ **先给缓存、再给网络**（两次回调）：这是"本地优先"的关键 —— + * 等网络回来才渲染 = 转圈好几秒，断网则全白。 + * + * ⚠️ 网络失败**不清缓存**、也不抛异常：把 `error` 交给调用方， + * 让它决定是"提示一行小字"还是"忽略"（多数情况应忽略， + * 因为用户手上还有缓存数据可用）。 + */ + /** + * @param name 缓存键（**不限于预定义模块**：两级接口用完整路径当键， + * 如 'ledger_detail_1'）。 + */ + async load(name: string, path: string, sink: FbModuleSink): Promise { + // ① 本地缓存（若还没读过本地库，`readCache` 会返回空串，不影响） + const cached: string = await this.readCache(name); + if (cached !== '') { + sink({ json: cached, fromCache: true, error: '' }); + } + + // ② 拉接口 + const token: string = this.token(); + if (token === '') { + // 未登录：只能给缓存（可能为空） + sink({ json: cached, fromCache: true, error: '未登录，显示的是本地数据' }); + return; + } + const opts: FbApiOptions = { method: 'GET', token: token }; + const res: FbApiResult = await fbApi(path, opts); + if (!res.ok) { + hilog.warn(DOMAIN, TAG, '加载 %{public}s 失败：%{public}s', name, res.error); + sink({ json: cached, fromCache: true, error: res.error }); + return; + } + + // ③ 写缓存 + 再给一次 + await this.writeCache(name, res.data); + sink({ json: res.data, fromCache: false, error: '' }); + } + + /** 读缓存 */ + private async readCache(name: string): Promise { + try { + if (!this.db.isReady()) { + return ''; + } + const row: FbRow | null = await this.db.queryOne( + 'SELECT payload FROM module_cache WHERE name = ?', [name]); + return row !== null ? row.strOr('payload', '') : ''; + } catch (err) { + hilog.warn(DOMAIN, TAG, '读缓存 %{public}s 失败：%{public}s', name, JSON.stringify(err)); + return ''; + } + } + + /** 写缓存 */ + private async writeCache(name: string, payload: string): Promise { + if (payload === '') { + return; + } + try { + await this.db.exec( + 'INSERT OR REPLACE INTO module_cache (name, payload, fetched_at) VALUES (?,?,?)', + [name, payload, Date.now()]); + } catch (err) { + hilog.warn(DOMAIN, TAG, '写缓存 %{public}s 失败：%{public}s', name, JSON.stringify(err)); + } + } + + /** 缓存时间（0 = 没有） */ + async cachedAt(name: string): Promise { + try { + const row: FbRow | null = await this.db.queryOne( + 'SELECT fetched_at FROM module_cache WHERE name = ?', [name]); + return row !== null ? row.num('fetched_at', 0) : 0; + } catch (err) { + return 0; + } + } + + /** 令牌（延迟取，避免仓库初始化时 Store 还没就绪） */ + private token(): string { + // ⚠️ 这里直接 import 常量会形成循环依赖风险，改为运行时读 + return FB_MODULE_TOKEN.get(); + } +} + +/** + * 令牌读取口（由 `FbTokenStore` 在启动时注入）。 + * + * ⚠️ 为什么不直接 `import { FB_TOKEN_STORE }`： + * `FbTokenStore` 与仓库之间容易形成循环 import（它俩将来都会用到 `FbDb`）。 + * 用一个**可注入的读取器**把依赖方向固定成"单向"。 + */ +class FbModuleToken { + private reader: () => string = (): string => ''; + set(fn: () => string): void { + this.reader = fn; + } + get(): string { + return this.reader(); + } +} + +export const FB_MODULE_TOKEN: FbModuleToken = new FbModuleToken(); \ No newline at end of file diff --git a/entry/src/main/ets/data/FbMovieRepo.ets b/entry/src/main/ets/data/FbMovieRepo.ets new file mode 100644 index 0000000..2791914 --- /dev/null +++ b/entry/src/main/ets/data/FbMovieRepo.ets @@ -0,0 +1,890 @@ +/** + * 家书 FamilyBook · 观影仓库（鸿蒙端） + * + * 「接口 → 本地库 → UI」链路里的**枢纽**： + * · `sync()` —— 从接口拉数据、写进本地库（拉）； + * · `list()` —— 从本地库读出来给 UI（**UI 只读这里，永不直接读接口**）。 + * + * 🔴 这一层的存在意义（本地优先的核心）： + * UI 调 `list()` 时**不关心网络**——有网没网都读同一份本地数据。 + * 于是"断网可用"+"卡片零等待"这两件事是**天然成立**的， + * 而不是靠"缓存命中率"侥幸。 + * + * 🔴 数据形状的真相（决定了这里的写法）： + * 「观影」在服务端**不是一张表**，而是 6 张表组合出的视图： + * events(kind='movie') + movie_details + cinemas + movie_reviews + * + event_attendees + persons + * ⇒ 同步时要把这几张**分别落库**（按实体），读取时再 JOIN 拼回观影页要的样子。 + * ⚠️ 别把接口返回的扁平结构直接存成一张 `movies` 表 —— + * 那样同一条日程会在「观影」和「日程」里各存一份、互相打架。 + */ + +import { relationalStore } from '@kit.ArkData'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { FbDb, FbRow } from './FbDb'; +import { FbApiOptions, FbApiResult, fbApi } from './FbHttp'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbMovieRepo'; + +/** + * 同步进度打点（**临时诊断用**，定位完删除）。 + * + * ⚠️ 必须是**模块级的 `let`**（在 class **外面**）： + * 同步会长时间不返回，需要知道它卡在哪一步。 + * 这台设备的 hilog 缓冲区读不出内容（本项目多次确认）， + * 所以用"全局变量 + 界面定时读取"的方式来观测。 + * ⚠️ 它**不是** `@Local`，改它不会触发 UI 刷新 —— + * 界面那侧靠 setInterval 主动读、赋给自己的 @Local 才会刷新。 + */ +export let FB_SYNC_PROGRESS: string = ''; + +/** + * 每批写入的行数。 + * + * 🔴 取 20 是**实测**结果：一次塞 200 行时 `batchInsert` 卡死不返回； + * 分批到 20 行/批能正常完成。别随手改大 —— 大了就会重现卡死。 + */ +const FB_BATCH_SIZE: number = 20; + +/** + * 观影列表项（**UI 用的形状**，不是数据库形状）。 + * + * ⚠️ 字段与服务端 `Movie::all()` 的返回对齐（已实测过真实响应）， + * 这样从"接口 → 本地 → UI"一路不改名字，排查时一眼对得上。 + */ +export interface FbMovieListItem { + id: number; + title: string; + /** 观影时间（'YYYY-MM-DD HH:mm:ss'） */ + startsAt: string; + endsAt: string; + note: string; + /** 海报相对键（没有则空串，UI 画占位） */ + posterKey: string; + cinemaName: string; + cinemaColor: string; + /** 同看人数 */ + attendeeCount: number; + /** 评价条数 */ + reviewCount: number; + /** 平均分（无人评价时为 0） */ + reviewAvg: number; +} + +/** 同步结果（供 UI 显示"刚更新了几条"） */ +/** + * 一家影院（观影模块的一部分，不是独立模块）。 + * + * ⚠️ 与 Web 端一致：「影院」**不占抽屉里的位置** —— 它是观影功能的子页面。 + */ +export interface FbCinemaItem { + id: number; + /** 影院名，如「横店电影城」 */ + name: string; + /** 场所，如「东明县京都大润发」 */ + place: string; + address: string; + /** 主题色（Web 端每家影院一个色，便于在列表里区分） */ + color: string; + /** 在这家看过几部 */ + movieCount: number; +} + +export interface FbSyncResult { + ok: boolean; + /** 拉到并写进本地的条数 */ + saved: number; + /** 失败原因（ok=false 时有值） */ + error: string; +} + +/** 观影详情（点卡片后展示） */ +export interface FbMovieDetail { + ok: boolean; + error: string; + id: number; + title: string; + startsAt: string; + endsAt: string; + note: string; + /** 剧情简介（movie_details.info） */ + info: string; + posterKey: string; + /** 票根图（movie_details.ticket_key） */ + ticketKey: string; + cinemaName: string; + cinemaPlace: string; + cinemaAddress: string; + cinemaColor: string; + /** 我的评分（0 = 没评）。⚠️ 本版恒为 0：详情接口不返回"我的评价" */ + myRating: number; + /** 我的评价正文。⚠️ 同上 */ + myReview: string; + /** + * 全体评价条数 / 平均分。 + * + * ⚠️ **详情接口不返回这两个值**（实测确认：那是列表侧 + * `MovieReview::attachStats()` 算出来附上去的）。 + * ⇒ 由调用方从**列表项**（本地库里存的）带进来，见 `detail(id, token, listItem)`。 + * 详情页要显示"评分"时用这个，别指望接口给。 + */ + reviewCount: number; + reviewAvg: number; + /** 同看的人 */ + attendees: FbMovieAttendeeRow[]; + /** 照片（相对键） */ + photos: string[]; +} + +/** + * 观影仓库。 + * + * ⚠️ 与 FbDb 一样用单例：仓库无状态（数据都在库里）， + * 但保持单例便于将来加内存缓存时行为一致。 + */ +export class FbMovieRepo { + private db: FbDb = FbDb.inst(); + + /** + * 从服务端同步观影数据到本地库。 + * + * 流程：拉接口 → 拆信封 → **事务内**分别写入 events / movie_details / + * cinemas / persons / event_attendees → 更新水位线。 + * + * ⚠️ 写库必须包在事务里（见 FbDb.transaction 的说明）： + * 半途失败会留下"写了一半"的库，而水位线一旦推进， + * 缺的那部分就永远不会再被拉下来。 + * + * ⚠️ 影院（cinemas）走**独立接口** `/api/v1/cinemas`，不从观影列表里推： + * 实测观影列表只返回 `cinema_name` / `cinema_color`（给列表显示用）， + * **不返回 `cinema_id`** —— 没有主键就建不了 cinemas 表。 + * （`cinema_id` 只在**观影详情** `Movie::find()` 里返回。） + * ⇒ 影院是独立的实体，就该用它的独立接口同步。 + * + * @param token API 令牌 + */ + async sync(token: string): Promise { + // ---- ① 拉影院（先拉，供观影行的影院名反查 id）---- + // ⚠️ 对象字面量必须有显式类型（ArkTS 的 arkts-no-untyped-obj-literals）： + // 写在调用实参位置的裸字面量不会靠参数类型"渗入"推断。 + FB_SYNC_PROGRESS = '1/6 拉取影院…'; + const cinemaOpts: FbApiOptions = { method: 'GET', token: token }; + const cinemaRes: FbApiResult = await fbApi('/api/v1/cinemas', cinemaOpts); + let cinemas: FbCinemaRow[] = []; + if (cinemaRes.ok) { + cinemas = parseCinemaRows(cinemaRes.data); + } else { + hilog.warn(DOMAIN, TAG, '影院同步失败（不影响观影）：%{public}s', cinemaRes.error); + } + + // ---- ② 拉观影列表 ---- + FB_SYNC_PROGRESS = '2/6 拉取观影列表（影院 ' + cinemas.length.toString() + ' 家）…'; + const movieQuery: Record = { 'per_page': '200', 'page': '1' }; + const movieOpts: FbApiOptions = { method: 'GET', query: movieQuery, token: token }; + const res: FbApiResult = await fbApi('/api/v1/movies', movieOpts); + if (!res.ok) { + FB_SYNC_PROGRESS = '2/6 拉取失败：' + res.error; + const bad: FbSyncResult = { ok: false, saved: 0, error: res.error }; + return bad; + } + const movies: FbMovieRow[] = parseMovieRows(res.data); + FB_SYNC_PROGRESS = '3/6 已解析 ' + movies.length.toString() + ' 条，准备落库…'; + + // ---- ③ 落库（一个事务内批量写完）---- + // 🔴 这里必须用**同步**的 batchInsertSync / executeSync，且事务回调**不能 async**。 + // 第一次写成 `await this.db.transaction(async () => { await batchInsert(...) })`， + // 结果是**同步函数永不返回**（界面卡在"正在同步…"，实测 97 秒仍未结束）， + // 而数据**其实已经写进库了** —— 典型的"事务跨 await 丢上下文"。 + // 详见 FbDb.transaction() 的说明。 + FB_SYNC_PROGRESS = '4/6 组装数据…'; + let saved: number = 0; + + // ---- 组装（纯内存操作，不碰数据库）---- + const cinemaRows: relationalStore.ValuesBucket[] = []; + const cinemaIdByName: Map = new Map(); + for (const c of cinemas) { + cinemaRows.push(this.cinemaBucket(c)); + if (c.name !== '') { + cinemaIdByName.set(c.name, c.id); + } + } + const eventRows: relationalStore.ValuesBucket[] = []; + const detailRows: relationalStore.ValuesBucket[] = []; + const personRows: relationalStore.ValuesBucket[] = []; + const attendeeRows: relationalStore.ValuesBucket[] = []; + const now: number = Date.now(); + for (const m of movies) { + const cid: number = cinemaIdByName.get(m.cinemaName) ?? 0; + eventRows.push(this.eventBucket(m, now)); + detailRows.push(this.detailBucket(m, cid, now)); + for (const a of m.attendees) { + personRows.push(this.personBucket(m, a, now)); + attendeeRows.push(this.attendeeBucket(m, a, now)); + } + saved++; + } + + // ---- 写库 ---- + // 🔴🔴 这里**刻意不用显式事务**，原因记在下面（很重要的一个踩坑结论）。 + // + // 排查过程： + // · 第一版（逐条 `await exec`）：数据能写进去，但**极慢**（1~2 分钟）， + // 且 `sync()` 不返回； + // · 第二版（老事务 API `beginTransaction` + `commit`）： + // 出现**诡异矛盾** —— 界面显示"共 200 部"（数据在）， + // 但 `SELECT COUNT(*)` = **0**，且 Promise 永不返回。 + // ⇒ 老事务绑在调用栈上，中间有 `await` 就丢上下文， + // `commit()` 变空操作，数据留在未提交状态。 + // · 第三版（`createTransaction()` 对象 + `batchInsertSync`）： + // **卡在 createTransaction 本身**，几分钟不返回； + // · 第四版（`createTransaction()` 对象 + `await batchInsert`）： + // 同样卡住。 + // ⇒ 结论：**这些事务 API 在本机 SDK/设备组合上不可用**（至少我未能找到可用形态）。 + // 继续硬啃事务的性价比很低 —— 于是**改成无事务的批量写入**： + // `batchInsert` 本身就把 N 次插入合成一次调用，**原子性由 SQLite 单条语句保证** + // （一条 INSERT ... VALUES (...),(...),(...) 要么全成功要么全失败）。 + // ⚠️ 代价：跨表（events / movie_details / …）不再有整体原子性。 + // 但这里的写入是**幂等**的（`INSERT OR REPLACE` 语义 + 每次都全量重拉）， + // 所以"写到一半崩了"只会导致下次同步重来，不会产生脏数据。 + // **幂等 + 全量重拉，比事务更适合这里**（见下方说明）。 + // + // ⚠️🔴 **一次 `batchInsert` 不能塞太多行**： + // 实测把 200 行一次交给 `batchInsert`，**它不返回**（几分钟卡死）， + // 进度停在"5/6 写入库（ev 200 / 详情 200 / 人 412 / 同看 412）…" + // —— 数据组装完全正确，就是这一次调用回不来。 + // （`batchInsertSync` 同样卡，两者都试过。） + // ⇒ 改成**分小批**（每批 `BATCH` 行）+ 每批之间 `await` 一次让出主线程。 + // 分批同时解决了"单次调用数据量过大"和"长时间霸占主线程"两个问题。 + // ⚠️ 代价：跨批不再有原子性。但本流程是**幂等 + 全量重拉** + // （`INSERT OR REPLACE`、每次都从头拉 200 条）， + // "写到一半崩了"只会让下次同步重来，不会产生脏数据。 + FB_SYNC_PROGRESS = '5/6 写入库（ev ' + eventRows.length.toString() + + ' / 详情 ' + detailRows.length.toString() + + ' / 人 ' + personRows.length.toString() + + ' / 同看 ' + attendeeRows.length.toString() + '）…'; + const store: relationalStore.RdbStore = this.db.require(); + await this.insertInBatches(store, 'cinemas', cinemaRows); + // ⚠️ 顺序：events 是主表，其余引用它的 id（便于排查，非外键强制） + await this.insertInBatches(store, 'events', eventRows); + FB_SYNC_PROGRESS = '5/6 events 已写入（' + eventRows.length.toString() + ' 条）…'; + await this.insertInBatches(store, 'movie_details', detailRows); + // 🔴 `persons` 是跨模块共用表（名册 / 观影都写），不能先清空 + // ⇒ 靠 REPLACE 语义更新（默认 batchInsert 在 PK 冲突时是 IGNORE， + // 已存在的人永远不更新）。详见 FbPersonRepo 里的说明。 + await this.insertInBatches(store, 'persons', personRows, true); + await this.insertInBatches(store, 'event_attendees', attendeeRows); + FB_SYNC_PROGRESS = '6/6 写入完成，更新水位线…'; + + await this.setWatermark('events', nowIso()); + await this.setWatermark('cinemas', nowIso()); + hilog.info(DOMAIN, TAG, '观影同步完成：影片 %{public}d 条、影院 %{public}d 家', + saved, cinemas.length); + const done: FbSyncResult = { ok: true, saved: saved, error: '' }; + return done; + } + + /** + * 分批批量插入。 + * + * 🔴 为什么要分批（很重要的实测结论）： + * 把 200 行一次交给 `batchInsert` / `batchInsertSync`，**两者都不返回** + * （2032-10-12 实测卡死几分钟，进度停在写入那一步）。 + * 分批后每批只有 `BATCH_SIZE` 行，实测能正常完成。 + * + * ⚠️ 每批之间 `await` 一次：既是 `batchInsert` 本身要 await， + * 也顺便把主线程让出去，避免长时间独占（UI 不掉帧）。 + * + * @param table 目标表 + * @param rows 待写入的行（可为空 → 直接返回） + */ + private async insertInBatches(store: relationalStore.RdbStore, table: string, + rows: relationalStore.ValuesBucket[], replace: boolean = false): Promise { + if (rows.length === 0) { + return; + } + for (let i = 0; i < rows.length; i += FB_BATCH_SIZE) { + const chunk: relationalStore.ValuesBucket[] = rows.slice(i, i + FB_BATCH_SIZE); + if (replace) { + await store.batchInsertWithConflictResolution( + table, chunk, relationalStore.ConflictResolution.ON_CONFLICT_REPLACE); + } else { + await store.batchInsert(table, chunk); + } + } + } + + /** 组装一家影院的 ValuesBucket */ + private cinemaBucket(c: FbCinemaRow): relationalStore.ValuesBucket { + const b: relationalStore.ValuesBucket = {}; + b['id'] = c.id; + b['family_id'] = c.familyId; + b['place'] = c.place; + b['name'] = c.name; + b['address'] = c.address; + b['color'] = c.color; + b['created_at'] = c.createdAt; + b['updated_at'] = c.updatedAt; + b['deleted_at'] = c.deletedAt; + b['synced_at'] = Date.now(); + b['dirty'] = 0; + return b; + } + + /** + * 组装观影记录 → events 表的 bucket。 + * + * ⚠️ 写成「列名 → 值」的映射（`ValuesBucket`）而不是 SQL 占位符： + * `batchInsert` 要的就是这个形式，不必再拼 SQL 字符串。 + * ⚠️ 用对象下标赋值（`b['id'] = ...`）而不是 `b.id = ...`： + * `ValuesBucket = Record`，写属性名在 ArkTS 里 + * 会被当成"访问未声明属性"报错（arkts-no-props-by-index 的镜像规则）。 + */ + private eventBucket(m: FbMovieRow, now: number): relationalStore.ValuesBucket { + const b: relationalStore.ValuesBucket = {}; + b['id'] = m.id; + b['family_id'] = m.familyId; + b['creator_id'] = m.creatorId; + b['kind'] = 'movie'; + b['title'] = m.title; + b['starts_at'] = m.startsAt; + b['ends_at'] = m.endsAt; + b['location'] = m.location; + b['note'] = m.note; + b['source_ref'] = m.sourceRef; + b['created_at'] = m.createdAt; + b['updated_at'] = m.updatedAt; + b['deleted_at'] = m.deletedAt; + b['review_count'] = m.reviewCount; + b['review_avg'] = m.reviewAvg; + b['synced_at'] = now; + b['dirty'] = 0; + return b; + } + + /** 组装观影详情 → movie_details 的 bucket */ + private detailBucket(m: FbMovieRow, cinemaId: number, now: number): relationalStore.ValuesBucket { + const b: relationalStore.ValuesBucket = {}; + b['event_id'] = m.id; + b['info'] = m.movieInfo; + b['poster_key'] = m.posterKey; + b['ticket_key'] = m.ticketKey; + b['cinema_id'] = cinemaId; + b['douban_meta'] = m.doubanMeta; + b['updated_at'] = m.updatedAt; + b['deleted_at'] = m.deletedAt; + b['synced_at'] = now; + b['dirty'] = 0; + return b; + } + + /** 组装同看人 → persons 的 bucket */ + private personBucket(m: FbMovieRow, a: FbMovieAttendeeRow, now: number): relationalStore.ValuesBucket { + const b: relationalStore.ValuesBucket = {}; + b['id'] = a.id; + b['family_id'] = m.familyId; + b['kind'] = 'member'; + b['name'] = a.name; + b['nickname'] = a.myNickname; + b['gender'] = ''; + b['birthday'] = ''; + b['avatar'] = a.avatar; + b['note'] = ''; + b['created_at'] = ''; + b['updated_at'] = nowIso(); + b['deleted_at'] = null; + b['synced_at'] = now; + b['dirty'] = 0; + return b; + } + + /** + * 组装同看关系 → event_attendees 的 bucket。 + * + * ⚠️ 接口里 `attendees[].id` 实测是 **persons.id**（服务端 SQL 是 + * `SELECT a.event_id, p.id, ...`），**不是**这张关联表自己的行 id + * （接口根本没返回那个）。 + * ⇒ 本地这张表用**复合主键 (event_id, person_id)**（见 FbSchema）， + * 这里只填两个外键。 + */ + private attendeeBucket(m: FbMovieRow, a: FbMovieAttendeeRow, now: number): relationalStore.ValuesBucket { + const b: relationalStore.ValuesBucket = {}; + b['event_id'] = m.id; + b['person_id'] = a.id; + b['position'] = 0; + b['updated_at'] = nowIso(); + b['deleted_at'] = null; + b['synced_at'] = now; + b['dirty'] = 0; + return b; + } + + /** + * 拉一条观影的**详情**（点卡片时用）。 + * + * 🔴 为什么详情要**单独拉接口**、不直接用本地库拼： + * 列表接口只给了"列表要显示的那几个字段"（片名/时间/影院/评分汇总）。 + * 详情还要：剧情简介、票根、影院地址、**我的评价正文**、照片列表 + * —— 这些列表接口都没返回（列表塞这些会让响应大很多）。 + * ⇒ 列表读本地（快、断网可看），详情读接口（要什么拉什么）。 + * + * ⚠️ 详情**不落库**：它是一次性展示，且含"我的评价"这种**因人而异**的数据， + * 落库反而要处理"这条评价属于谁"。 + */ + async detail(id: number, token: string, listItem?: FbMovieListItem): Promise { + const opts: FbApiOptions = { method: 'GET', token: token }; + const res: FbApiResult = await fbApi('/api/v1/movies/' + id.toString(), opts); + if (!res.ok) { + return emptyDetail(id, res.error); + } + const d: FbMovieDetail = parseDetail(id, res.data); + // ⚠️ 评分汇总接口不给，从列表项带过来（见 FbMovieDetail.reviewCount 的说明） + if (listItem !== undefined) { + d.reviewCount = listItem.reviewCount; + d.reviewAvg = listItem.reviewAvg; + } + return d; + } + + /** + * 从本地库读观影列表（**UI 的唯一数据来源**）。 + * + * 🔴 这就是"本地优先"落到代码上的样子：读的是本地库， + * 没有网络请求、没有 loading 转圈。 + * + * JOIN 三张表把观影页要的形状拼出来（与服务端 Movie::all 的语义一致）： + * events(kind='movie') + movie_details + cinemas + */ + async list(limit: number = 100, keyword: string = ''): Promise { + const kw: string = keyword.trim(); + let sql: string = + 'SELECT e.id AS id, ' + + ' e.title AS title, ' + + ' e.starts_at AS starts_at, ' + + ' e.ends_at AS ends_at, ' + + ' e.note AS note, ' + + ' d.poster_key AS poster_key, ' + + ' c.name AS cinema_name, ' + + ' c.color AS cinema_color, ' + + ' (SELECT COUNT(*) FROM event_attendees a WHERE a.event_id = e.id' + + ' AND a.deleted_at IS NULL) AS attendee_count, ' + + ' e.review_count AS review_count, ' + + ' e.review_avg AS review_avg ' + + ' FROM events e ' + + ' LEFT JOIN movie_details d ON d.event_id = e.id ' + + ' LEFT JOIN cinemas c ON c.id = d.cinema_id ' + + " WHERE e.kind = 'movie' AND e.deleted_at IS NULL "; + const args: relationalStore.ValueType[] = []; + if (kw !== '') { + sql += ' AND (e.title LIKE ? OR c.name LIKE ?) '; + args.push('%' + kw + '%', '%' + kw + '%'); + } + sql += ' ORDER BY e.starts_at DESC, e.id DESC LIMIT ? '; + args.push(limit); + + const rows: FbRow[] = await this.db.queryRows(sql, args); + const out: FbMovieListItem[] = []; + for (const r of rows) { + out.push({ + id: r.num('id', 0), + title: r.strOr('title', ''), + startsAt: r.strOr('starts_at', ''), + endsAt: r.strOr('ends_at', ''), + note: r.strOr('note', ''), + posterKey: r.strOr('poster_key', ''), + cinemaName: r.strOr('cinema_name', ''), + cinemaColor: r.strOr('cinema_color', ''), + attendeeCount: r.num('attendee_count', 0), + reviewCount: r.num('review_count', 0), + reviewAvg: r.num('review_avg', 0) + }); + } + return out; + } + + /** 本地已有的观影条数（判断"要不要首次同步"用） */ + async localCount(): Promise { + return this.db.scalar("SELECT COUNT(*) FROM events WHERE kind = 'movie' AND deleted_at IS NULL"); + } + + /** 读同步水位线 */ + /** + * 影院列表（**从本地库读**）。 + * + * 🔴 为什么从库里读、而不是现拉 `/api/v1/cinemas`： + * 影院表本来就在观影同步里一起落库了（`events` + `cinemas` 同一批）， + * 现拉等于"已经有的数据再要一次"。 + * ⚠️ 但如果本地是空的（没同步过），调用方应自己兜底 —— 这里不替你决定。 + */ + async cinemaList(): Promise { + const rows: FbRow[] = await this.db.queryRows( + 'SELECT id, name, place, address, color FROM cinemas' + + ' WHERE deleted_at IS NULL ORDER BY name ASC', []); + const out: FbCinemaItem[] = []; + for (const r of rows) { + const it: FbCinemaItem = { + id: r.num('id', 0), + name: r.strOr('name', ''), + place: r.strOr('place', ''), + address: r.strOr('address', ''), + color: r.strOr('color', '') !== '' ? r.strOr('color', '') : '#7A4E8C', + // 这一家看过几部（从观影记录数）—— 与 Web 端影院页的口径一致 + movieCount: await this.db.scalar( + 'SELECT COUNT(*) FROM events e JOIN movie_details d ON d.event_id = e.id' + + ' WHERE d.cinema_id = ? AND e.deleted_at IS NULL', [r.num('id', 0)]), + }; + out.push(it); + } + return out; + } + + async watermark(table: string): Promise { + const row: FbRow | null = await this.db.queryOne( + 'SELECT last_sync_at FROM sync_state WHERE table_name = ?', [table]); + return row !== null ? row.strOr('last_sync_at', '') : ''; + } + + /** 写同步水位线（**只在整批都写成功后**才调用） */ + private async setWatermark(table: string, at: string): Promise { + await this.db.exec( + 'INSERT OR REPLACE INTO sync_state (table_name, last_sync_at, last_ok_at) VALUES (?,?,?)', + [table, at, Date.now()] + ); + } + + // ---- 单例 ---- + private static instance: FbMovieRepo | null = null; + + static inst(): FbMovieRepo { + if (FbMovieRepo.instance === null) { + FbMovieRepo.instance = new FbMovieRepo(); + } + return FbMovieRepo.instance; + } +} + +/** 当前时间（'YYYY-MM-DD HH:mm:ss'，与服务端 DATETIME 同格式） */ +function nowIso(): string { + const d: Date = new Date(); + const p = (n: number): string => (n < 10 ? '0' + n : String(n)); + return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + ' ' + + p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds()); +} + +// ============================================================ +// 接口响应的解析（服务端 → 本地结构） +// ============================================================ + +/** 服务端 `Movie::all()` 的一行（原始 JSON 形状） */ +interface FbApiMovieRow { + id?: number; + title?: string; + starts_at?: string; + ends_at?: string; + note?: string | null; + poster_key?: string | null; + cinema_name?: string | null; + cinema_color?: string | null; + attendee_count?: number; + review_count?: number; + review_avg?: number | null; + attendees?: FbApiAttendee[]; +} + +/** 接口里的一个同看人 */ +interface FbApiAttendee { + event_id?: number; + id?: number; + name?: string; + avatar?: string | null; + avatar_color?: string | null; + my_nickname?: string | null; +} + +/** 解析后的观影行（本地内部用，字段已转成强类型） */ +interface FbMovieRow { + id: number; + familyId: number; + creatorId: number; + title: string; + startsAt: string; + endsAt: string; + location: string; + note: string; + sourceRef: string; + createdAt: string; + updatedAt: string; + deletedAt: string | null; + movieInfo: string; + posterKey: string; + ticketKey: string; + /** ⚠️ 观影**列表**接口不返回它（只有详情接口返回）⇒ 这里由"影院名反查"补上 */ + cinemaName: string; + cinemaColor: string; + doubanMeta: string; + reviewCount: number; + reviewAvg: number; + attendees: FbMovieAttendeeRow[]; +} + +/** 解析后的一家影院（对应 `Cinema::all()` 的行） */ +interface FbCinemaRow { + id: number; + familyId: number; + place: string; + name: string; + address: string; + color: string; + createdAt: string; + updatedAt: string; + deletedAt: string | null; +} + +/** 接口里的一家影院（原始 JSON 形状，`c.*` + movie_count） */ +interface FbApiCinemaRow { + id?: number; + family_id?: number; + place?: string; + name?: string; + address?: string | null; + color?: string; + created_at?: string; + updated_at?: string; + deleted_at?: string | null; +} + +/** 解析后的同看人 */ +export interface FbMovieAttendeeRow { + id: number; + name: string; + avatar: string; + /** ⚠️ 接口返回的原始头像色（`avatar_color`）—— 之前建表时没存， + * 浮层要显示头像色所以带上；本地库里没这一列，列表页不用它。 + * 这里做成可选（`?`）避免影响已有的构造处。 */ + avatarColor?: string; + myNickname: string; +} + +/** + * 把接口 JSON 解析成内部行。 + * + * ⚠️ 每一步都做**防御性判空**：服务端字段可能缺（老数据）、可能是 null。 + * ArkTS 里 `obj.a.b` 只要中间一环是 undefined 就直接崩， + * 而崩在"解析接口响应"里，用户看到的是白屏、排查时看不出是哪个字段。 + */ +function parseMovieRows(json: string): FbMovieRow[] { + const out: FbMovieRow[] = []; + if (json === '') { + return out; + } + let arr: FbApiMovieRow[] = []; + try { + arr = JSON.parse(json) as FbApiMovieRow[]; + } catch (err) { + hilog.error(DOMAIN, TAG, '观影列表解析失败：%{public}s', JSON.stringify(err)); + return out; + } + if (!Array.isArray(arr)) { + return out; + } + for (const m of arr) { + const id: number = numOf(m.id); + if (id <= 0) { + continue; // 没有 id 的行没法落库（主键） + } + out.push({ + id: id, + familyId: 1, // 家庭固定 1（服务端 Api::me() 返回的那个） + creatorId: 0, + title: strOf(m.title), + startsAt: strOf(m.starts_at), + endsAt: strOf(m.ends_at), + location: '', + note: strOf(m.note), + sourceRef: '', + createdAt: '', + updatedAt: nowIso(), + deletedAt: null, + movieInfo: '', + posterKey: strOf(m.poster_key), + ticketKey: '', + cinemaName: strOf(m.cinema_name), + cinemaColor: strOf(m.cinema_color), + doubanMeta: '', + reviewCount: numOf(m.review_count), + reviewAvg: numOf(m.review_avg), + attendees: parseAttendees(m.attendees) + }); + } + return out; +} + +/** 解析影院列表（`/api/v1/cinemas`） */ +function parseCinemaRows(json: string): FbCinemaRow[] { + const out: FbCinemaRow[] = []; + if (json === '') { + return out; + } + let arr: FbApiCinemaRow[] = []; + try { + arr = JSON.parse(json) as FbApiCinemaRow[]; + } catch (err) { + hilog.error(DOMAIN, TAG, '影院列表解析失败：%{public}s', JSON.stringify(err)); + return out; + } + if (!Array.isArray(arr)) { + return out; + } + for (const c of arr) { + const id: number = numOf(c.id); + if (id <= 0) { + continue; + } + out.push({ + id: id, + familyId: numOf(c.family_id) > 0 ? numOf(c.family_id) : 1, + place: strOf(c.place), + name: strOf(c.name), + address: strOf(c.address), + color: strOf(c.color), + createdAt: strOf(c.created_at), + updatedAt: strOf(c.updated_at) !== '' ? strOf(c.updated_at) : nowIso(), + deletedAt: c.deleted_at !== undefined && c.deleted_at !== null ? c.deleted_at : null + }); + } + return out; +} + +/** 解析同看人列表 */ +function parseAttendees(list?: FbApiAttendee[]): FbMovieAttendeeRow[] { + const out: FbMovieAttendeeRow[] = []; + if (list === undefined || !Array.isArray(list)) { + return out; + } + for (const a of list) { + const id: number = numOf(a.id); + if (id <= 0) { + continue; + } + out.push({ + id: id, + name: strOf(a.name), + avatar: strOf(a.avatar), + // 头像色（接口的 `avatar_color`）—— 浮层显示头像要用 + avatarColor: strOf(a.avatar_color), + myNickname: strOf(a.my_nickname) + }); + } + return out; +} + +/** 安全取字符串（null/undefined → 空串） */ +function strOf(v: string | null | undefined): string { + return v !== null && v !== undefined ? v : ''; +} + +/** 安全取数字（null/undefined → 0） */ +function numOf(v: number | null | undefined): number { + return v !== null && v !== undefined ? v : 0; +} +// ============================================================ +// 观影详情的解析 +// ============================================================ + +/** 服务端 `Movie::find()` 的原始 JSON 形状 */ +interface FbApiMovieDetail { + id?: number; + title?: string; + starts_at?: string; + ends_at?: string; + note?: string | null; + info?: string | null; + poster_key?: string | null; + ticket_key?: string | null; + cinema_name?: string | null; + cinema_place?: string | null; + cinema_address?: string | null; + cinema_color?: string | null; + attendees?: FbApiAttendee[]; + /** + * ⚠️ 照片是**对象数组**（`[{id, key}]`），不是字符串数组 —— + * 这是**实测**过的真实形状（读代码时我一度猜成 `string[]`，是错的）。 + * 服务端 `Movie::photos()` 返回带 id 的对象，便于以后按 id 删除。 + */ + photos?: FbApiPhoto[]; +} + +/** 详情里的一张照片 */ +interface FbApiPhoto { + id?: number; + key?: string; +} + +/** 空的详情（出错时用，避免调用方判 null） */ +function emptyDetail(id: number, error: string): FbMovieDetail { + return { + ok: false, error: error, id: id, title: '', startsAt: '', endsAt: '', note: '', + info: '', posterKey: '', ticketKey: '', cinemaName: '', cinemaPlace: '', + cinemaAddress: '', cinemaColor: '', myRating: 0, myReview: '', + reviewCount: 0, reviewAvg: 0, attendees: [], photos: [] + }; +} + +/** + * 解析详情响应。 + * + * ⚠️ 每一步都要判空：详情字段很多是可选（老记录可能没填简介/票根/评价）。 + * ArkTS 里 `obj.a.b` 中间任一环是 undefined 就崩，而崩在解析里 + * 用户只看到白屏、排查时不知道是哪个字段。 + */ +function parseDetail(id: number, json: string): FbMovieDetail { + if (json === '') { + return emptyDetail(id, '服务端没有返回详情'); + } + let o: FbApiMovieDetail; + try { + o = JSON.parse(json) as FbApiMovieDetail; + } catch (err) { + hilog.error(DOMAIN, TAG, '观影详情解析失败：%{public}s', JSON.stringify(err)); + return emptyDetail(id, '详情数据格式不对'); + } + if (o === null || o === undefined) { + return emptyDetail(id, '详情是空的'); + } + + // 照片：接口给的是 `[{id, key}]`，这里只留相对键（界面按 key 拼图片地址） + const photos: string[] = []; + if (o.photos !== undefined && Array.isArray(o.photos)) { + for (const ph of o.photos) { + const k: string = strOf(ph.key); + if (k !== '') { + photos.push(k); + } + } + } + + return { + ok: true, + error: '', + id: numOf(o.id) > 0 ? numOf(o.id) : id, + title: strOf(o.title), + startsAt: strOf(o.starts_at), + endsAt: strOf(o.ends_at), + note: strOf(o.note), + info: strOf(o.info), + posterKey: strOf(o.poster_key), + ticketKey: strOf(o.ticket_key), + cinemaName: strOf(o.cinema_name), + cinemaPlace: strOf(o.cinema_place), + cinemaAddress: strOf(o.cinema_address), + cinemaColor: strOf(o.cinema_color), + // ⚠️ 「我的评价」与「评分汇总」详情接口都**不返回**（实测确认）—— + // 前者要拉子资源，后者由调用方从列表项带过来。 + myRating: 0, + myReview: '', + reviewCount: 0, + reviewAvg: 0, + attendees: parseAttendees(o.attendees), + photos: photos + }; +} diff --git a/entry/src/main/ets/data/FbParse.ets b/entry/src/main/ets/data/FbParse.ets new file mode 100644 index 0000000..41f33c4 --- /dev/null +++ b/entry/src/main/ets/data/FbParse.ets @@ -0,0 +1,864 @@ +/** + * 家书 FamilyBook · 接口数据解析（鸿蒙端） + * + * 把服务端 `GET /api/v1/<模块>` 返回的 JSON 转成端上的展示类型（`model/Types`）。 + * + * 🔴 为什么单独一个文件、而且要**照着真实响应写**： + * 服务端返回的是**数据库行**（几十个字段、命名是 SQL 风格： + * `starts_at` / `entry_count` / `is_public` / `deleted_at`…）， + * 而端上 UI 要的是**为显示准备过的形状**（`dateRange` / `daysLeft` / `netCent`…）。 + * 这层转换必须在端上做（服务端接口是给"通用 API 用户"的， + * 不该为了 App 的展示需要去改它）。 + * + * ⚠️ 每个解析函数都**只依赖实测字段**，没实测过的字段不写。 + * 想看形状就跑：`curl -H 'Authorization: Bearer ' .../api/v1/<模块>` + */ + +import { + FbAccount, FbAnniversaryItem, FbBookItem, FbCalEvent, FbHomeData, FbKinChip, + FbKinGraph, FbKinPerson, FbMark, + FbLedgerBook, FbLedgerDetail, FbLedgerEntry, FbNoteItem, FbNotificationItem, FbResourceItem, + FbTaskItem, FbTripItem, FbWeather, FbStat, FbMemoryItem, +} from '../model/Types'; + +// ============================================================ +// 小工具 +// ============================================================ + +/** 安全转字符串（null/undefined → ''） */ +export function s(v: string | null | undefined): string { + return v !== null && v !== undefined ? v : ''; +} + +/** 安全转数字 */ +export function n(v: number | null | undefined): number { + return v !== null && v !== undefined ? v : 0; +} + +/** 安全取布尔（服务端用 0/1 表示） */ +export function b(v: number | boolean | null | undefined): boolean { + if (typeof v === 'boolean') { + return v; + } + return n(v as number) !== 0; +} + +/** 取数组（不是数组就返回空数组） */ +export function arr(v: T[] | null | undefined): T[] { + return Array.isArray(v) ? v : []; +} + +/** 从 'YYYY-MM-DD HH:mm:ss' 里取日期部分 */ +export function datePart(v: string): string { + const t: string = s(v); + const i: number = t.indexOf(' '); + return i > 0 ? t.substring(0, i) : t; +} + +/** 从 'YYYY-MM-DD HH:mm:ss' 里取时间部分 'HH:mm' */ +export function timePart(v: string): string { + const t: string = s(v); + const i: number = t.indexOf(' '); + if (i <= 0) { + return ''; + } + return t.substring(i + 1, i + 6); +} + +/** 'YYYY-MM-DD' → 'MM-DD' */ +export function monthDay(v: string): string { + const t: string = datePart(v); + return t.length >= 10 ? t.substring(5, 10) : t; +} + +/** 把金额（分）转成中文金额文案 */ +export function money(cent: number): string { + const yuan: number = cent / 100; + const abs: number = Math.abs(yuan); + const sign: string = yuan < 0 ? '-' : ''; + if (abs >= 10000) { + return sign + (abs / 10000).toFixed(2) + ' 万'; + } + return sign + abs.toFixed(2); +} + +/** + * 造一个人物 chip。 + * + * ⚠️ `FbKinChip` 的字段是 `{id, shown, kinship, avatarColor, isAdmin}` —— + * **没有** `name` / `avatar`。之前按"想当然"写会直接编译不过。 + * ⇒ 映射前先确认目标类型的真实字段。 + */ +export function chip(shown: string, color: string, id: number = 0): FbKinChip { + const c: FbKinChip = { + id: id, + shown: s(shown), + kinship: '', + avatarColor: s(color) !== '' ? s(color) : '#A84A28', + isAdmin: false, + }; + return c; +} + +// ============================================================ +// 原始行类型（只列用到的字段） +// ============================================================ + +interface RawCalEvent { + cal?: number; color?: string; calname?: string; title?: string; + date?: string; time?: string; end_time?: string; all_day?: boolean | number; + kind?: string; ref_id?: number; location?: string; note?: string; + repeat?: string; occ?: string; +} + +interface RawTrip { + id?: number; title?: string; starts_at?: string; ends_at?: string; + location?: string | null; note?: string | null; cover_key?: string | null; + summary?: string | null; is_public?: number; attendee_count?: number; + node_count?: number; cities?: string[]; city?: string; +} + +interface RawDay { + id?: number; title?: string; kind?: string; repeat_type?: string; + month?: number; day?: number; is_leap?: number; + person_id?: number | null; person_name?: string | null; + source?: string; born?: string | null; +} + +interface RawTask { + id?: number; title?: string; status?: string; board_id?: number; category_id?: number | null; + note?: string | null; due_at?: string | null; done_at?: string | null; + assignee_id?: number | null; assignee_name?: string | null; + avatar?: string | null; avatar_color?: string | null; + category_name?: string | null; child_total?: number; child_done?: number; + comment_count?: number; attach_count?: number; + /** 看板名（`byStatus` 会 JOIN 出来；首页任务列表要用） */ + board_name?: string | null; + /** + * 看板**派生色**（服务端算好的，v54 新增）。 + * + * 🔴 用户 2026-10-08 报过：「首页近期任务，任务的文字和前面的圆点， + * 颜色并没有跟看板颜色一致」。 + * ⚠️ 不能读 `board_color` —— 看板没设色时它是 `null`， + * 要走按名字派生的那套（同一个看板名永远同一个色，用户才记得住）。 + */ + board_color_calc?: string | null; +} + +/** 首页日子标记的原始行（`{word, kind}`） */ +interface RawMark { + word?: string; kind?: string; +} + +/** 往年今天的原始行（服务端 `Home::memories()` 给的那几列） */ +interface RawMemory { + id?: number; title?: string; starts_at?: string; kind?: string; + years_ago?: number; n?: number; +} + +interface RawTaskBoard { + id?: number; name?: string; color?: string; tasks?: RawTask[]; +} + +interface RawLedgerBook { + id?: number; name?: string; my_perm?: string | null; entry_count?: number; + share_perm?: string | null; +} + +interface RawLedgerEntry { + id?: number; ledger_id?: number; kind?: string; title?: string; + amount_cents?: number; note?: string | null; + person_id?: number | null; person_name?: string | null; + person_nick?: string | null; avatar?: string | null; avatar_color?: string | null; + updated_at?: string; created_at?: string; +} + +interface RawLedgerSummary { + asset?: number; debt?: number; net?: number; count?: number; +} + +interface RawResource { + id?: number; title?: string; content?: string; owner_id?: number; + owner_name?: string | null; avatar?: string | null; avatar_color?: string | null; + owner_nick?: string | null; perm?: string | null; + created_at?: string; updated_at?: string; +} + +interface RawBook { + id?: number; title?: string; author?: string | null; status?: string | null; + rating?: number | null; progress?: number | null; note_count?: number | null; + cover_key?: string | null; category?: string | null; publisher?: string | null; +} + +interface RawNote { + id?: number; title?: string; is_shared?: number; updated_at?: string; + author_name?: string | null; avatar?: string | null; avatar_color?: string | null; + is_mine?: number; blocks?: RawNoteBlock[]; +} + +interface RawNoteBlock { + id?: number; kind?: string; content?: string; position?: number; +} + +interface RawNotification { + id?: number; title?: string; body?: string; created_at?: string; + read_at?: string | null; actor_name?: string | null; + avatar?: string | null; avatar_color?: string | null; +} + +// ============================================================ +// 各模块解析 +// ============================================================ + +/** 日历条目 → FbCalEvent */ +export function parseCalendar(json: string): FbCalEvent[] { + return parseCalRows(asArray(json)); +} + +/** 日历行的实际转换（`parseHome` 也要用，所以单独一个数组版） */ +function parseCalRows(rows: RawCalEvent[]): FbCalEvent[] { + const out: FbCalEvent[] = []; + for (const r of rows) { + const e: FbCalEvent = { + id: n(r.ref_id), + // 🔴 v52：补上真实日历本 id / 结束时间 / 类型 / 备注 + // （接口本来就给了，旧解析漏掉 → 新建日程没法指定往哪本写） + calId: n(r.cal), + title: s(r.title), + date: s(r.date), + time: s(r.time), + endTime: s(r.end_time), + calName: s(r.calname), + color: s(r.color) !== '' ? s(r.color) : '#A84A28', + allDay: b(r.all_day), + place: s(r.location), + note: s(r.note), + kind: s(r.kind) + }; + out.push(e); + } + return out; +} + +/** 旅程列表 → FbTripItem */ +export function parseTrips(json: string): FbTripItem[] { + const rows: RawTrip[] = asArray(json); + const out: FbTripItem[] = []; + for (const r of rows) { + const cities: string[] = arr(r.cities); + const dayCount: number = daySpan(s(r.starts_at), s(r.ends_at)); + const it: FbTripItem = { + id: n(r.id), + title: s(r.title), + // 副标题：城市 + 天数（与 Web 端 trips 列表口径一致） + sub: s(r.city) !== '' ? s(r.city) : cities.join(' · '), + dateRange: dateRangeText(s(r.starts_at), s(r.ends_at), dayCount), + nodeCount: n(r.node_count), + doneCount: 0, + }; + out.push(it); + } + return out; +} + +/** 纪念日 → FbAnniversaryItem */ +export function parseDays(json: string): FbAnniversaryItem[] { + const rows: RawDay[] = asArray(json); + const out: FbAnniversaryItem[] = []; + const today: Date = new Date(); + for (const r of rows) { + const m: number = n(r.month); + const d: number = n(r.day); + const people: FbKinChip[] = []; + if (n(r.person_id) > 0) { + people.push(chip(s(r.person_name), '#A84A28', n(r.person_id))); + } + const it: FbAnniversaryItem = { + id: n(r.id), + title: s(r.title), + date: pad2(m) + '-' + pad2(d), + daysLeft: daysUntil(today, m, d), + kind: kindCn(s(r.kind)), + people: people, + yearly: s(r.repeat_type) !== 'once', + }; + out.push(it); + } + // 按"距今天数"升序（最近的在前）——纪念日列表页的默认排序 + out.sort((a: FbAnniversaryItem, c: FbAnniversaryItem): number => a.daysLeft - c.daysLeft); + return out; +} + +/** 任务（看板）→ 平铺的 FbTaskItem[] */ +export function parseTasks(json: string): FbTaskItem[] { + const root: Record | null = asObject(json); + if (root === null) { + return []; + } + const boards: RawTaskBoard[] = arr(root['boards'] as RawTaskBoard[]); + const out: FbTaskItem[] = []; + for (const bd of boards) { + const tasks: RawTask[] = arr(bd.tasks); + for (const t of tasks) { + out.push(taskRow(t, s(bd.name), s(bd.color))); + } + } + return out; +} + +/** + * 一行任务 → `FbTaskItem`（看板视图与首页列表**共用**）。 + * + * 🔴 抽出来的理由：首页的 `/home` 直接给**扁平的任务数组**（它跨看板按状态取）， + * 而任务页给的是"按看板分组"。两处各自写一遍转换 ⇒ 改一处漏一处 + * （本项目已经吃过好几轮这个亏）。 + * + * @param boardName 看板名（首页那批的看板名在行里的 `board_name`，由本函数内部兜底取） + * @param boardColor 看板色原文（可能为空 ⇒ 用派生色） + */ +function taskRow(t: RawTask, boardName: string, boardColor: string): FbTaskItem { + const due: string = s(t.due_at); + // 看板色优先级：行里算好的派生色 > 入参（看板视图给的）> 兜底 + const calc: string = s(t.board_color_calc); + const bc: string = calc !== '' ? calc : (boardColor !== '' ? boardColor : '#A8574F'); + const it: FbTaskItem = { + id: n(t.id), + title: s(t.title), + status: s(t.status) !== '' ? s(t.status) : 'todo', + board: boardName !== '' ? boardName : s(t.board_name), + boardColor: bc, + dueText: due !== '' ? datePart(due) : '', + overdue: due !== '' && s(t.status) !== 'done' && isBeforeToday(due), + assignee: s(t.assignee_name), + childDone: n(t.child_done), + childTotal: n(t.child_total), + }; + return it; +} + +/** 账本列表 → FbLedgerBook[]（netCent 由 /ledger/ 的 summary 补） */ +export function parseLedger(json: string): FbLedgerBook[] { + const rows: RawLedgerBook[] = asArray(json); + const out: FbLedgerBook[] = []; + for (const r of rows) { + const bk: FbLedgerBook = { + id: n(r.id), + name: s(r.name), + netCent: 0, // 概览接口不返回净资产，进详情页时再取 summary + myPerm: s(r.my_perm) !== '' ? s(r.my_perm) : 'read', + entryCount: n(r.entry_count), + }; + out.push(bk); + } + return out; +} + +/** + * 账本明细 → { 账目, 净资产 }。 + * + * ⚠️ 明细要走**两级接口**：`/ledger`（有哪些本）→ `/ledger//entries`（本里的账目 + 汇总）。 + * 净资产（`summary.net`）只在这第二级里有 —— 第一级不返回。 + */ +export function parseLedgerEntries(json: string): FbLedgerDetail { + const root: Record | null = asObject(json); + const empty: FbLedgerDetail = { entries: [], netCent: 0, assetCent: 0, debtCent: 0 }; + if (root === null) { + return empty; + } + const rows: RawLedgerEntry[] = arr(root['items'] as RawLedgerEntry[]); + const sm: RawLedgerSummary = (root['summary'] !== undefined && root['summary'] !== null) + ? root['summary'] as RawLedgerSummary : {}; + const entries: FbLedgerEntry[] = []; + for (const r of rows) { + entries.push({ + id: n(r.id), + name: s(r.title), + kind: s(r.kind), + amountCent: n(r.amount_cents), + // 「挂名的人」优先用昵称（我习惯叫他什么），没有就用本名 + ownerName: s(r.person_nick) !== '' ? s(r.person_nick) : s(r.person_name), + updatedAt: datePart(s(r.updated_at)), + }); + } + const d: FbLedgerDetail = { + entries: entries, + netCent: n(sm.net), + assetCent: n(sm.asset), + debtCent: n(sm.debt), + }; + return d; +} + +/** + * 家谱 → FbKinGraph。 + * + * ⚠️ 服务端给的关系是**数组**（`parents`/`children`/`spouses`/`siblings` + * 全是 id 数组），端上直接用 —— 不重新推导。 + * ⚠️ 亲属称谓（`label`）也**由服务端算**（`Kinship::label`）， + * 端上**不重算**：那依赖整个家族图谱，两边算法不一致就会出现 + * "App 说堂兄、网页说表兄"。 + */ +export function parseKin(json: string): FbKinGraph { + const root: Record | null = asObject(json); + const empty: FbKinGraph = { meId: 0, people: [], total: 0 }; + if (root === null) { + return empty; + } + const rows: Record[] = + arr>(root['people'] as Record[]); + const people: FbKinPerson[] = []; + for (const r of rows) { + people.push({ + id: n(r['id'] as number), + name: s(r['name'] as string), + shown: s(r['shown'] as string) !== '' ? s(r['shown'] as string) : s(r['name'] as string), + label: s(r['label'] as string), + gen: n(r['gen'] as number), + avatarColor: s(r['avatar_color'] as string), + unit: n(r['unit'] as number), + // ⚠️ 从 `Record` 里取值必须**显式断言**成目标类型 —— + // ArkTS 不会自动把 `Object` 收窄成 `number[]`（编译期报 + // "Argument of type 'Object' is not assignable to 'number[]'"）。 + parents: idList(r['parents'] as number[]), + children: idList(r['children'] as number[]), + spouses: idList(r['spouses'] as number[]), + siblings: idList(r['siblings'] as number[]), + }); + } + const g: FbKinGraph = { + meId: n(root['meId'] as number), + people: people, + total: n(root['total'] as number), + }; + return g; +} + +/** id 数组的容错转换（服务端可能给 null） */ +function idList(v: number[] | null | undefined): number[] { + const xs: number[] = arr(v); + const out: number[] = []; + for (const x of xs) { + out.push(n(x)); + } + return out; +} + +/** 资源 → FbResourceItem[] */ +export function parseResources(json: string): FbResourceItem[] { + const rows: RawResource[] = asArray(json); + const out: FbResourceItem[] = []; + for (const r of rows) { + const it: FbResourceItem = { + id: n(r.id), + name: s(r.title), + // 资源没有"类别"字段（服务端的 content 是自由文本）， + // ⇒ 用「谁的」来分类更贴近实际用法（Web 端列表也是按归属分组） + kind: 'other', + ownerName: s(r.owner_nick) !== '' ? s(r.owner_nick) : s(r.owner_name), + fileCount: 0, + shared: s(r.perm) !== 'owner', + updatedAt: datePart(s(r.updated_at)), + }; + out.push(it); + } + return out; +} + +/** 藏书 → FbBookItem[] */ +export function parseBooks(json: string): FbBookItem[] { + const rows: RawBook[] = asArray(json); + const out: FbBookItem[] = []; + for (const r of rows) { + const st: string = s(r.status) !== '' ? s(r.status) : 'want'; + const it: FbBookItem = { + id: n(r.id), + title: s(r.title), + author: s(r.author), + status: st, + rate: n(r.rating), + noteCount: n(r.note_count), + // 服务端 progress 记的是"读到第几页"还是"百分比"不确定 + // ⇒ 只信 status：读完就是 100，否则按 progress 原样（0~100 之外夹紧） + progress: st === 'done' ? 100 : clamp(n(r.progress), 0, 100), + }; + out.push(it); + } + return out; +} + +/** 笔记 → FbNoteItem[] */ +export function parseNotes(json: string): FbNoteItem[] { + const root: Record | null = asObject(json); + if (root === null) { + return []; + } + const rows: RawNote[] = arr(root['items'] as RawNote[]); + const out: FbNoteItem[] = []; + for (const r of rows) { + out.push({ + id: n(r.id), + title: s(r.title), + excerpt: firstTextOf(r.blocks), + tags: [], + updatedAt: datePart(s(r.updated_at)), + shared: n(r.is_shared) !== 0, + attachCount: 0, + }); + } + return out; +} + +/** 通知 → FbNotificationItem[] */ +export function parseNotifications(json: string): FbNotificationItem[] { + const root: Record | null = asObject(json); + if (root === null) { + return []; + } + const rows: RawNotification[] = arr(root['items'] as RawNotification[]); + const out: FbNotificationItem[] = []; + for (const r of rows) { + out.push({ + id: n(r.id), + title: s(r.title), + body: s(r.body), + timeText: relativeTime(s(r.created_at)), + unread: s(r.read_at) === '', + from: chip(s(r.actor_name), s(r.avatar_color)), + }); + } + return out; +} + +/** 首页 → FbHomeData */ +/** + * 首页 → FbHomeData（v54：服务端补齐了农历/标记/天气/周统计）。 + * + * ⚠️ **不允许**再回落到端上的演示常量 —— 用户 2026-10-16 报过 + * 「寒露、重阳节、儿子的生日，这些都是乱写的」， + * 根因就是那些字段接口没给、端上拿 DemoData 顶着。 + * 接口没给时应当是**空**（页面就不画那一块），而不是编一个出来。 + */ +export function parseHome(json: string): FbHomeData { + const root: Record | null = asObject(json); + const empty: FbHomeData = { + greeting: '', date: '', weekday: '', todayLabel: '', lunarShort: '', lunarLine: '', + marks: [], weather: null, + stat: { todayEvents: 0, doing: 0, todo: 0, overdue: 0 }, + memories: [], + todayEvents: [], tasks: [], unread: 0, + }; + if (root === null) { + return empty; + } + // ⚠️ ArkTS **不能**从 `unknown[]` 反推泛型（arkts-no-inferred-generic-params） + // ⇒ 一律显式写类型参数，别靠推断。 + // ⚠️ 这里直接把原始数组喂给 parseCalendar 的"数组版"， + // 比 `JSON.stringify` 再 parse 一次更快、也更不容易出错。 + const rawEvents: RawCalEvent[] = arr(root['today_events'] as RawCalEvent[]); + const rawTasks: RawTask[] = arr(root['tasks'] as RawTask[]); + const d: FbHomeData = { + greeting: s(root['greeting'] as string), + date: s(root['date'] as string), + weekday: s(root['weekday'] as string), + todayLabel: s(root['today_label'] as string), + lunarShort: s(root['lunar_short'] as string), + lunarLine: s(root['lunar_line'] as string), + marks: parseMarks(root['marks']), + weather: parseWeather(root['weather']), + stat: parseStat(root['stat']), + memories: parseMemories(root['memories']), + todayEvents: parseCalRows(rawEvents), + tasks: parseTaskRows(rawTasks), + unread: n(root['unread'] as number), + }; + return d; +} + +/** 日子标记 `[{word, kind}]`（坏行直接丢，不让它污染页面） */ +export function parseMarks(v: Object | null | undefined): FbMark[] { + const rows: RawMark[] = arr(v as RawMark[]); + const out: FbMark[] = []; + for (const r of rows) { + const word: string = s(r.word); + if (word === '') { + continue; + } + const mk: FbMark = { word: word, kind: s(r.kind) !== '' ? s(r.kind) : 'anniv' }; + out.push(mk); + } + return out; +} + +/** + * 天气：服务端没配地点时给 `null` ⇒ 端上**整块不画**（与网页版一致）。 + * ⚠️ `temp` 服务端已经带单位（`21°C`），原样承接，端上不再拼。 + */ +export function parseWeather(v: Object | null | undefined): FbWeather | null { + if (v === null || v === undefined) { + return null; + } + const o: Record | null = asObjectOf(v); + if (o === null) { + return null; + } + const w: FbWeather = { + place: s(o['place'] as string), + temp: s(o['temp'] as string), + text: s(o['text'] as string), + icon: s(o['icon'] as string), + tone: s(o['tone'] as string) !== '' ? s(o['tone'] as string) : 'cloud', + wind: s(o['wind'] as string), + wdir: s(o['wdir'] as string), + tmax: s(o['tmax'] as string), + tmin: s(o['tmin'] as string), + }; + // 温度都没有 ⇒ 当没取到（别画一个空壳） + return w.temp !== '' ? w : null; +} + +/** 概述卡底部的四个数字（与网页版 `hb-stats` 同源） */ +export function parseStat(v: Object | null | undefined): FbStat { + const o: Record | null = asObjectOf(v); + if (o === null) { + return { todayEvents: 0, doing: 0, todo: 0, overdue: 0 }; + } + return { + todayEvents: n(o['today_events'] as number), + doing: n(o['doing'] as number), + todo: n(o['todo'] as number), + overdue: n(o['overdue'] as number), + }; +} + +/** + * 往年的今天 → `FbMemoryItem[]`（与电脑端 `Home::memories()` 同一份数据）。 + * + * ⚠️ 字段是 SQL 风格（`starts_at` / `years_ago`），端上要驼峰 —— 所以有这一层。 + */ +export function parseMemories(v: Object | null | undefined): FbMemoryItem[] { + const rows: RawMemory[] = arr(v as RawMemory[]); + const out: FbMemoryItem[] = []; + for (const r of rows) { + const title: string = s(r.title); + if (title === '') { + continue; + } + const it: FbMemoryItem = { + id: n(r.id), + title: title, + startsAt: s(r.starts_at), + kind: s(r.kind) !== '' ? s(r.kind) : 'movie', + yearsAgo: n(r.years_ago), + }; + out.push(it); + } + return out; +} + +/** 一批任务行 → FbTaskItem[]（首页与任务页共用同一段形状转换） */ +export function parseTaskRows(rows: RawTask[]): FbTaskItem[] { + const out: FbTaskItem[] = []; + for (const t of rows) { + out.push(taskRow(t, '', '')); + } + return out; +} + +// ============================================================ +// 内部工具 +// ============================================================ + +/** 解析成数组（失败给空数组） */ +function asArray(json: string): T[] { + if (json === '') { + return []; + } + try { + const v: Object = JSON.parse(json) as Object; + // 服务端信封是 {ok, data}；但仓库已经把 data 传出来，这里两种都认 + if (Array.isArray(v)) { + return v as T[]; + } + const data = (v as Record)['data']; + if (Array.isArray(data)) { + return data as T[]; + } + return []; + } catch (e) { + return []; + } +} + +/** + * 把一个**已经是对象**的值转成 `Record`（不是对象则 null）。 + * + * ⚠️ 与 `asObject()` 的区别：那个吃的是**整份 JSON 字符串**、还要往下钻 `data` 一层； + * 这个吃的是"已经从根对象里取出来的某个字段值"（如 `root['weather']`）。 + * ArkTS 里 `as` 是编译期的，运行时 `null`/数组/标量 都能骗过它 —— + * 所以必须自己判一遍类型，别直接 `v as Record<...>`（那样标量上取键会拿到 undefined， + * 然后被当成"字段是空的"，症状是"接口明明给了却显示为空"）。 + */ +function asObjectOf(v: Object | null | undefined): Record | null { + if (v === null || v === undefined) { + return null; + } + if (typeof v !== 'object' || Array.isArray(v)) { + return null; + } + return v as Record; +} + +function asObject(json: string): Record | null { + if (json === '') { + return null; + } + try { + const v: Object = JSON.parse(json) as Object; + if (v === null || !Array.isArray(v) && typeof v === 'object') { + const o = v as Record; + const data = o['data']; + if (data !== undefined && data !== null && typeof data === 'object' && !Array.isArray(data)) { + return data as Record; + } + return o; + } + return null; + } catch (e) { + return null; + } +} + +/** 两位补零 */ +function pad2(v: number): string { + return v < 10 ? '0' + v.toString() : v.toString(); +} + +/** 夹紧 */ +function clamp(v: number, lo: number, hi: number): number { + if (v < lo) { + return lo; + } + if (v > hi) { + return hi; + } + return v; +} + +/** 两个时间之间差几天（同一天算 1 天） */ +function daySpan(a: string, c: string): number { + const da: string = datePart(a); + const dc: string = datePart(c); + if (da === '' || dc === '') { + return 0; + } + const t1: number = Date.parse(da + 'T00:00:00'); + const t2: number = Date.parse(dc + 'T00:00:00'); + if (isNaN(t1) || isNaN(t2)) { + return 0; + } + return Math.max(1, Math.round((t2 - t1) / 86400000) + 1); +} + +/** 时间范围文案：同一天显示 'M月D日';跨天显示 'M月D日 - M月D日' */ +function dateRangeText(a: string, c: string, days: number): string { + const da: string = datePart(a); + const dc: string = datePart(c); + if (da === '') { + return ''; + } + const ta: string = cnDate(da); + if (dc === '' || da === dc) { + return ta + (days > 1 ? ' · ' + days.toString() + ' 天' : ''); + } + return ta + ' - ' + cnDate(dc) + ' · ' + days.toString() + ' 天'; +} + +/** 'YYYY-MM-DD' → 'M月D日' */ +function cnDate(v: string): string { + if (v.length < 10) { + return v; + } + const m: number = parseInt(v.substring(5, 7), 10); + const d: number = parseInt(v.substring(8, 10), 10); + return m.toString() + '月' + d.toString() + '日'; +} + +/** 距下一个 (month, day) 还有几天（0 = 今天） */ +function daysUntil(today: Date, month: number, day: number): number { + if (month <= 0 || day <= 0) { + return 9999; + } + const y: number = today.getFullYear(); + let target: number = Date.UTC(y, month - 1, day); + const base: number = Date.UTC(y, today.getMonth(), today.getDate()); + if (target < base) { + target = Date.UTC(y + 1, month - 1, day); // 今年已过 ⇒ 看明年 + } + return Math.round((target - base) / 86400000); +} + +/** 是否早于今天 */ +function isBeforeToday(v: string): boolean { + const d: string = datePart(v); + if (d === '') { + return false; + } + const now: Date = new Date(); + const today: string = now.getFullYear().toString() + '-' + + pad2(now.getMonth() + 1) + '-' + pad2(now.getDate()); + return d < today; +} + +/** 相对时间文案 */ +function relativeTime(v: string): string { + const t: number = Date.parse(s(v).replace(' ', 'T')); + if (isNaN(t)) { + return datePart(s(v)); + } + const diff: number = Date.now() - t; + const min: number = Math.floor(diff / 60000); + if (min < 1) { + return '刚刚'; + } + if (min < 60) { + return min.toString() + ' 分钟前'; + } + const hr: number = Math.floor(min / 60); + if (hr < 24) { + return hr.toString() + ' 小时前'; + } + const day: number = Math.floor(hr / 24); + if (day < 30) { + return day.toString() + ' 天前'; + } + return datePart(s(v)); +} + +/** 纪念日类别中文 */ +function kindCn(kind: string): string { + if (kind === '生日') { + return 'birthday'; + } + if (kind === '节日') { + return 'holiday'; + } + if (kind === '节气') { + return 'solar_term'; + } + if (kind === '纪念日') { + return 'anniversary'; + } + return kind; +} + +/** 笔记第一条文本块的正文 */ +function firstTextOf(blocks?: RawNoteBlock[]): string { + const bs: RawNoteBlock[] = arr(blocks); + for (const bl of bs) { + const c: string = s(bl.content).trim(); + if (c !== '') { + return c.length > 60 ? c.substring(0, 60) + '…' : c; + } + } + return ''; +} \ No newline at end of file diff --git a/entry/src/main/ets/data/FbPersonRepo.ets b/entry/src/main/ets/data/FbPersonRepo.ets new file mode 100644 index 0000000..e243679 --- /dev/null +++ b/entry/src/main/ets/data/FbPersonRepo.ets @@ -0,0 +1,985 @@ +/** + * 家书 FamilyBook · 名册仓库（鸿蒙端） + * + * 数据流与观影一致：「**接口 → 本地库 → UI**」（本地优先）。 + * · `list()` 从**本地库**读（UI 的唯一数据来源，快、断网可看）； + * · `sync()` 拉接口 → 落本地库 → 再读一次。 + * + * 🔴 本仓库用的是 `GET /api/v1/roster`，**不是** `/api/v1/people`： + * 前者是「**我**名册里的人」（我加的 + 别人分享给我的）， + * 后者是"全家的人"（本家 800+，是通讯录底账）。 + * Web 端名册页用的也是前者（`Person::roster()`）。 + * ⚠️ 用错接口的症状：名册里冒出 800 人，而且全是"别人的通讯录"。 + */ + +import { relationalStore } from '@kit.ArkData'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { FbDb, FbRow } from './FbDb'; +import { FbApiOptions, FbApiResult, fbApi } from './FbHttp'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbPersonRepo'; + +/** + * 每批写入的行数。 + * + * ⚠️ 20 是**实测**值（与观影仓库同一个约束）：一次塞几百行时 + * `batchInsert` 会卡死不返回。别随手改大。 + */ +const FB_BATCH_SIZE: number = 20; + +/** 名册里一个人（UI 直接渲染的形状） */ +export interface FbRosterPerson { + id: number; + /** 本名 */ + name: string; + /** 我怎么叫他（昵称优先）—— 卡片主标题用这个 */ + shown: string; + /** 我该怎么称呼他（如"父亲""妻子"） */ + label: string; + /** 标签（一个人可以有多个） */ + tags: string[]; + avatarColor: string; + avatar: string; + /** 阳历生日 'MM-DD' */ + birthdaySolar: string; + /** + * 完整生日 `YYYY-MM-DD`（空 = 没录）。 + * + * 🔴 为什么要**两个**生日字段： + * · `birthdaySolar` = `MM-DD`，给**列表/详情显示**用（不显示年份，避免"暴露年龄"）； + * · `birthdayFull` = `YYYY-MM-DD`，给**编辑**与**入库**用。 + * ⚠️ 之前只存了 `MM-DD`，**把年份弄丢了** —— + * 结果"编辑生日"根本没法回填（输入框要 `YYYY-MM-DD`）。 + * 这是一个真实的取整错误，不是设计取舍。 + */ + birthdayFull: string; + /** 阴历生日（如"三月初七"） */ + birthdayLunar: string; + /** 手机号明文（服务端解密后给的；空 = 没录）。= `phones[0]` */ + phone: string; + /** + * **全部电话**（主号在前，`person_contacts` 里的补充电话在后）。 + * + * 🔴 为什么需要（用户 2026-10-15）： + * 「一个人可能有多个电话号码……应该拨打最近的那个电话。」 + * 实测 **161 人有多个号码**（如"杨永华"有 4 个：手机 + 座机 + 两个副号） + * ⇒ 只带主号的话，用户想打座机就没法从应用里发起拨号。 + * ⚠️ 服务端保证「主号排第一」⇒ 端上"有主号打主号"就是取 `phones[0]`。 + * ⚠️ 空数组表示这人一个号码都没录 ⇒ 点行时走"打开详情"而不是拨号。 + */ + phones: string[]; + /** 首字母（"输入即筛选"用） */ + initials: string; + org: string; + title: string; + slogan: string; + email: string; + addrCity: string; + gender: string; + note: string; + /** 是管理员（显示徽标） */ + isAdmin: boolean; + + // ============================================================ + // 🔴 v52（用户 2026-10-15）：**全字段**。 + // + // 「我们现在这个应用打造的目的就是为了让用户可以完全脱离电脑端…… + // 应该把所有的信息都显示出来，而且编辑的时候，所有的内容都应该可以编辑。」 + // + // ⇒ 下面这些是**详情/编辑**才用得上的字段。 + // 列表页不显示它们，但它们必须能取到 —— 否则"编辑"时回填不了、 + // "详情"时看不到，就还是得回电脑端。 + // ============================================================ + + /** 结构化地址：国家 / 省 / 市 / 区（详细街道在 `address`） */ + addrCountry: string; + addrProvince: string; + addrDistrict: string; + /** 详细地址（街道门牌） */ + address: string; + /** 家中排行（1 = 老大；空 = 没填） */ + birthRank: string; + /** 农历生日的**闰月**标记 */ + birthdayLunarLeap: boolean; + /** + * 农历生日的**完整日期** `YYYY-MM-DD`（空 = 没录）。 + * + * 🔴 与 `birthdayLunar`（"十月初五"这种**给人看的**月日）分开： + * · `birthdayLunar` —— 显示用（服务端算好的中文月日） + * · `birthdayLunarRaw` —— **编辑**用（要能回填进 `YYYY-MM-DD` 输入框） + * ⚠️ 只存中文月日就没法回填（"十月初五"不是日期）， + * 这正是"农历生日改不了"的原因。服务端在详情里给了完整值。 + */ + birthdayLunarRaw: string; + /** 补充联系方式（电话/邮箱/地址/网址，各可多行） */ + contacts: FbContacts; + /** 工作经历（可多段） */ + jobs: FbJobRow[]; + /** + * 「**我对他的称呼**」（只有我看得到；空 = 用姓名显示）。 + * + * 🔴 用户 2026-10-15：「编辑信息的时候，应该有我对他的称呼才对呀。」 + * 称呼是**视角属性**：妈妈叫"明明"、姐姐叫"小弟"，各人不同 + * ⇒ 存在服务端 `nicknames` 表（viewer × target），**不挂在被称呼者身上**。 + * ⚠️ 与 `shown` 的区别：`shown` 是"显示名"（有称呼用称呼、没有用姓名）， + * 编辑框要回填**原始称呼** ⇒ 反推不出来，必须有这个字段。 + */ + myNickname: string; + /** + * 「我写的私人备注」。 + * + * 🔴 与公共 `note` **不是一回事**： + * `note` = 大家的公共备注（谁都能看、谁都能改） + * `myNote`= **只有我**看得到的备注（我对这个人的印象/提醒） + * 两者在详情里**分两块显示**，别混成一条。 + */ + myNote: string; + /** 身份证（**打码**过的，如 `372****4856`；编辑时重新输入才改） */ + idCardMasked: string; + /** 当前登录者能不能改这人的全部字段（对齐服务端 `can_edit_all`） */ + canEditAll: boolean; + /** 这人是不是"我" */ + isSelf: boolean; +} + +/** 名册同步结果 */ +export interface FbRosterSyncResult { + ok: boolean; + saved: number; + error: string; +} + +/** 一条补充联系方式（vCard 对齐：label 是"工作/家庭"这种说明，可空） */ +export interface FbContactRow { + label: string; + value: string; +} + +/** 补充联系方式（按类型分组） */ +export interface FbContacts { + phone: FbContactRow[]; + email: FbContactRow[]; + address: FbContactRow[]; + url: FbContactRow[]; +} + +/** 一段工作经历 */ +export interface FbJobRow { + org: string; + title: string; + /** 职称（如 副教授） */ + rankName: string; + /** 起始年月 `YYYY-MM`（空 = 没填） */ + startYm: string; + /** 结束年月（**空 = 现在还在**，列表里显示为「现在」） */ + endYm: string; + note: string; +} + +/** 名册整体（人 + 标签云 + 我的 id） */ +export interface FbRosterBundle { + people: FbRosterPerson[]; + /** 标签云：[{tag, n}] */ + tagCloud: FbTagCount[]; + meId: number; +} + +/** 标签云的一项 */ +export interface FbTagCount { + tag: string; + n: number; +} + +// ============================================================ +// 接口原始形状（**按真实响应写**，字段名以实测为准） +// ============================================================ + +interface FbApiRosterPerson { + id?: number; + name?: string; + shown?: string; + label?: string; + tags?: string[]; + avatar_color?: string | null; + avatar?: string | null; + /** 服务端给的是 `[['阳历','03-30'], ['农历','三月初七']]` 这种二元组数组 */ + /** 完整生日 `YYYY-MM-DD HH:mm:ss`（服务端给年份；编辑要用） */ + birthday?: string | null; + birthdays?: string[][]; + phone_plain?: string | null; + /** 🔴 **全部电话**（主号在前 + 补充电话）。App 点人名拨号用 */ + phones?: string[] | null; + initials?: string | null; + org?: string | null; + title?: string | null; + slogan?: string | null; + email?: string | null; + addr_city?: string | null; + gender?: string | null; + note?: string | null; + account_role?: string | null; + account_status?: string | null; + + // ---- v52：单人详情接口（`GET /api/v1/people/`）才有的字段 ---- + /** 结构化地址（详情接口给；列表只给到 `addr_city`） */ + addr_country?: string | null; + addr_province?: string | null; + addr_district?: string | null; + address?: string | null; + birth_rank?: number | string | null; + is_placeholder?: number | null; + /** 农历生日完整日期 `YYYY-MM-DD`（详情接口给；编辑要用） */ + birthday_lunar?: string | null; + /** 补充联系方式，按类型分组；电话已解密 */ + contacts?: Record | null; + /** 工作经历（服务端列名是下划线风格） */ + jobs?: FbApiJobRaw[] | null; + /** 「我写的私人备注」 */ + my_note?: string | null; + /** 「我对他的称呼」（视角属性；空 = 用姓名显示） */ + my_nickname?: string | null; + /** 身份证（打码） */ + id_card_masked?: string | null; + /** 能不能改全部字段 */ + can_edit_all?: boolean | null; + is_self?: boolean | null; +} + +/** 详情接口里的一条补充联系方式 */ +interface FbApiContactRaw { + label?: string | null; + value?: string | null; +} + +/** 详情接口里的一段工作经历（列名是下划线） */ +interface FbApiJobRaw { + org?: string | null; + title?: string | null; + rank_name?: string | null; + start_ym?: string | null; + end_ym?: string | null; + note?: string | null; +} + +interface FbApiRosterPayload { + people?: FbApiRosterPerson[]; + tagCloud?: FbApiTagItem[]; + meId?: number; +} + +interface FbApiTagItem { + tag?: string; + n?: number; +} + +// ============================================================ + +export class FbPersonRepo { + private static _inst: FbPersonRepo | null = null; + private db: FbDb = FbDb.inst(); + + /** 单例（与服务端 `Person` 一样是纯静态工具，端上用单例便于将来加缓存） */ + static inst(): FbPersonRepo { + if (FbPersonRepo._inst === null) { + FbPersonRepo._inst = new FbPersonRepo(); + } + return FbPersonRepo._inst; + } + + /** + * 拉名册接口 → 落本地库 → 返回同步结果。 + * + * ⚠️ 与观影仓库同样的两条约束（都是实测踩出来的）： + * ① **不用显式事务**（本机设备上 `createTransaction` / 老事务都卡死）； + * ② `batchInsert` **分小批**（每批 20 行），一次塞几百行会卡死。 + * 换取的是"幂等 + 全量重拉"，对本场景足够。 + */ + async sync(token: string): Promise { + const opts: FbApiOptions = { method: 'GET', token: token }; + const res: FbApiResult = await fbApi('/api/v1/roster', opts); + if (!res.ok) { + const bad: FbRosterSyncResult = { ok: false, saved: 0, error: res.error }; + return bad; + } + + const parsed: FbParsedRoster = parseRoster(res.data); + const meId: number = parsed.meId; + const now: number = Date.now(); + + // ---- 人员（persons 表；只补名册用到的字段）---- + const personRows: relationalStore.ValuesBucket[] = []; + for (const p of parsed.people) { + const b: relationalStore.ValuesBucket = {}; + b['id'] = p.id; + // ⚠️ family_id 接口不返回（名册行里没有）—— 本 App 只服务一个家庭， + // 填 0 不影响；真要取值应另拉 `/me`。这里**不猜**。 + b['family_id'] = 0; + b['kind'] = 'member'; + b['name'] = p.name; + b['nickname'] = p.shown !== p.name ? p.shown : null; + b['gender'] = p.gender; + // ⚠️ 存**完整**生日（`birthdayFull`），不是只有月日的 `birthdaySolar` + b['birthday'] = p.birthdayFull; + b['avatar'] = p.avatar; + b['note'] = p.note; + b['avatar_color'] = p.avatarColor; + b['email'] = p.email; + b['org'] = p.org; + b['title'] = p.title; + b['slogan'] = p.slogan; + b['address'] = p.addrCity; // 名册只给到城市 + b['addr_city'] = p.addrCity; + b['updated_at'] = ''; + b['synced_at'] = now; + b['dirty'] = 0; + personRows.push(b); + } + + // ---- 名册关系（person_roster）---- + const rosterRows: relationalStore.ValuesBucket[] = []; + for (let i = 0; i < parsed.people.length; i++) { + const p: FbRosterPerson = parsed.people[i]; + const b: relationalStore.ValuesBucket = {}; + b['owner_id'] = meId; + b['person_id'] = p.id; + b['family_id'] = 0; + b['group_id'] = 0; + // 顺序就用接口给的顺序（服务端 ORDER BY sort_order），保住用户的拖动排序 + b['sort_order'] = i; + b['source'] = 'self'; + b['updated_at'] = ''; + b['synced_at'] = now; + // 🔴 全部电话（JSON 数组，主号在前）。见 FbRosterPerson.phones 的说明。 + // ⚠️ 存 JSON 而不是建表：电话不做跨人聚合，整组读出来就够。 + b['phones'] = JSON.stringify(p.phones); + rosterRows.push(b); + } + + // ---- 标签（person_tags）---- + const tagRows: relationalStore.ValuesBucket[] = []; + for (const p of parsed.people) { + for (const t of p.tags) { + const b: relationalStore.ValuesBucket = {}; + b['owner_id'] = meId; + b['person_id'] = p.id; + b['tag'] = t; + b['updated_at'] = ''; + b['synced_at'] = now; + tagRows.push(b); + } + } + + const store: relationalStore.RdbStore = this.db.require(); + // 🔴 顺序：先 persons（被引用者），再 roster / tags。 + // 🔴🔴 **必须用 REPLACE 语义**（用户 2026-10-15 实测踩出来的真 bug）： + // `persons` 是**跨模块共用**的表（名册、观影的"同看人"都写它）， + // 它的行**不能"先清空再插"**（会连带删掉观影那边引用的人）， + // 所以只能靠主键冲突来解决 —— 而普通的 `batchInsert` 在 PK 冲突时 + // 是 **ON_CONFLICT_IGNORE 语义（什么都不做）**。 + // 后果：**已存在的人永远不会被更新** ⇒ + // 服务端后来补的 `email / 座右铭 / 地址 / 单位` 这些字段 + // 在端上**永远是旧的（空）** —— 实测"杨永全"的详情浮层里 + // "座右铭 / 邮箱 / 所在地"三行直接不显示（服务端明明有值）。 + // ⇒ 用 `batchInsertWithConflictResolution(..., ON_CONFLICT_REPLACE)`。 + // ⚠️ 该 API `@since 18`，本工程 compatibleSdkVersion 24，可用。 + await this.insertInBatches(store, 'persons', personRows, true); + await this.insertInBatches(store, 'person_roster', rosterRows); + // ⚠️ 标签是**全量重拉**：先清掉我这个 owner 的旧标签再写新的。 + // 否则"删掉一个标签"在本地永远消不掉（旧行还在）。 + await store.executeSql('DELETE FROM person_tags WHERE owner_id = ?', [meId]); + await this.insertInBatches(store, 'person_tags', tagRows); + // ⚠️ 名册关系同样全量替换（服务端返回的就是"我名册的全部"） + await store.executeSql('DELETE FROM person_roster WHERE owner_id = ?', [meId]); + await this.insertInBatches(store, 'person_roster', rosterRows); + + // 🔴 **标签云以服务端下发的为准**（用户 2026-10-15 报"标签只有全部"）。 + // + // 为什么不能只靠本地 `GROUP BY person_tags` 聚合： + // · 它只能在**标签行都写成功**时才对；一旦写入环节有任何遗漏 + // （批量插入失败、字段为空…），标签条就残了 —— 而用户看到的是 + // "标签条只剩一个『全部』"，根本无从判断是哪一环坏的； + // · 服务端 `/roster` **本来就返回了权威的 `tagCloud`** + // （实测 15 个：大学同学 55 / 同事 40 / 实验室 23 …）， + // 且与网页端同源 ⇒ 用它才能保证"App 与网页的标签条完全一致"。 + // ⚠️ 缓存键用 `roster_tagcloud`（存进通用的 `module_cache`， + // 不必新建表；见 FbModuleRepo 的说明）。 + await this.saveTagCloud(parsed.tagCloud); + + const done: FbRosterSyncResult = { + ok: true, saved: parsed.people.length, error: '' + }; + return done; + } + + /** + * 把服务端下发的标签云存进 `module_cache`。 + * + * ⚠️ 存的是**接口原样的 JSON**，读取时再解析 —— 与其它模块缓存同一套做法， + * 这样"标签云"将来加字段（如颜色）不用改表结构。 + */ + private async saveTagCloud(list: FbTagCount[]): Promise { + try { + const payload: string = JSON.stringify(list); + await this.db.require().executeSql( + 'INSERT OR REPLACE INTO module_cache (name, payload, fetched_at) VALUES (?, ?, ?)', + ['roster_tagcloud', payload, Date.now()]); + } catch (err) { + // 存缓存失败**不该**让整次同步失败（名册本体已经写好了）。 + hilog.warn(DOMAIN, TAG, '标签云缓存失败：%{public}s', JSON.stringify(err)); + } + } + + /** + * 读标签云。 + * + * ⚠️ **优先用服务端下发的**（`module_cache` 里的 `roster_tagcloud`）； + * 读不到（首次安装、还没同步过）才**回落到本地聚合**。 + * ⇒ 这样"已同步过"的设备一定与网页一致，而"没同步过"的设备 + * 至少还能从已有的 `person_tags` 里凑出一份。 + */ + async tagCloud(): Promise { + // ① 服务端下发的（权威） + try { + const rows: FbRow[] = await this.db.queryRows( + "SELECT payload FROM module_cache WHERE name = 'roster_tagcloud'", []); + for (const r of rows) { + const raw: string = r.strOr('payload', ''); + if (raw !== '') { + const list: FbTagCount[] = JSON.parse(raw) as FbTagCount[]; + if (Array.isArray(list) && list.length > 0) { + return list; + } + } + } + } catch (err) { + hilog.warn(DOMAIN, TAG, '读标签云缓存失败，回落到本地聚合：%{public}s', + JSON.stringify(err)); + } + // ② 回落：本地 `person_tags` 聚合 + return this.tagCloudLocal(); + } + + /** + * 本地聚合（回落用）。 + * + * ⚠️ 排序与服务端 `PersonTag::cloud()` 对齐：**按人数降序、同数按标签名升序**。 + * 两边顺序不一致的话，用户会看到"网页和 App 的标签条顺序不一样"。 + */ + private async tagCloudLocal(): Promise { + const rows: FbRow[] = await this.db.queryRows( + 'SELECT tag, COUNT(*) AS n FROM person_tags GROUP BY tag ORDER BY n DESC, tag ASC'); + const out: FbTagCount[] = []; + for (const r of rows) { + const tag: string = r.strOr('tag', ''); + if (tag !== '') { + const c: FbTagCount = { tag: tag, n: r.num('n', 0) }; + out.push(c); + } + } + return out; + } + + /** + * 从本地库读名册（**UI 的唯一数据来源**）。 + * + * ⚠️ 标签用 `GROUP_CONCAT` 在 SQL 里拼成一列（再在解析时拆开）， + * 而不是"每人再查一次标签表" —— 800 人会变成 800 次查询， + * 手机上是实打实的卡顿。 + */ + async list(keyword: string = ''): Promise { + const sql: string = + 'SELECT p.id, p.name, p.nickname, p.gender, p.birthday, p.avatar, p.avatar_color,' + + ' p.note, p.email, p.org, p.title, p.slogan, p.addr_city,' + + ' r.sort_order, r.phones,' + + ' (SELECT GROUP_CONCAT(t.tag, "\\u0001") FROM person_tags t' + + ' WHERE t.person_id = p.id AND t.owner_id = r.owner_id) AS tags' + + ' FROM person_roster r JOIN persons p ON p.id = r.person_id' + + ' ORDER BY r.sort_order ASC, p.id ASC'; + + const rows: FbRow[] = await this.db.queryRows(sql, []); + const out: FbRosterPerson[] = []; + for (const r of rows) { + const p: FbRosterPerson = this.rowToPerson(r); + if (keyword !== '' && !matches(p, keyword)) { + continue; + } + out.push(p); + } + return out; + } + + /** + * 读名册的元信息（人 + 标签云 + 我的 id）。 + * + * ⚠️ 标签云**从本地库当场聚合**（`GROUP BY tag`），不从接口另存一份： + * 数据本来就在 `person_tags` 里，存两份迟早不一致。 + */ + async meta(): Promise { + const people: FbRosterPerson[] = await this.list(); + const tagCloud: FbTagCount[] = await this.tagCloud(); + // 「我的 id」从名册关系里取（owner_id 就是我自己） + const meId: number = await this.db.scalar( + 'SELECT IFNULL(MAX(owner_id), 0) FROM person_roster'); + const bundle: FbRosterBundle = { people: people, tagCloud: tagCloud, meId: meId }; + return bundle; + } + + /** 本地库里名册人数（自检/显示用） */ + async count(): Promise { + return this.db.scalar('SELECT COUNT(*) FROM person_roster'); + } + + /** + * 拉**单人完整详情**（`GET /api/v1/people/`）。 + * + * 🔴 为什么详情不走本地库（v52，用户 2026-10-15）： + * 本地库的 `persons` 表是为**列表**设计的（只存画一栏要用的字段）， + * 而"全功能"要求详情能看到**工作经历、补充电话、私人备注**这些 + * 一对多 / 只有我看得到的数据 —— 把它们全搬进本地库要再加两张表 + + * 一套同步，收益只是"省一次请求"。 + * ⇒ 详情**直接联网取**（一次往返、几百毫秒），取到就画。 + * ⚠️ 断网时返回 `null`，调用方要能退化成"用列表里那份画"（见调用处）。 + */ + async fetchDetail(id: number, token: string): Promise { + if (id <= 0) { + return null; + } + const res: FbApiResult = await fbApi('/api/v1/people/' + id.toString(), { token: token }); + if (!res.ok) { + hilog.warn(DOMAIN, TAG, '详情拉取失败（%{public}d）：%{public}s', id, res.error); + return null; + } + try { + const o: FbApiRosterPerson = JSON.parse(res.data) as FbApiRosterPerson; + return personFromApi(o); + } catch (err) { + hilog.error(DOMAIN, TAG, '详情解析失败：%{public}s', JSON.stringify(err)); + return null; + } + } + + /** + * 保存一个人（`PATCH /api/v1/people/`），全字段。 + * + * @param fields 要改的字段（**只传变化的**；服务端对没传的字段沿用旧值， + * 所以不会出现"改一项、其余被清空"）。 + * @returns 成功时返回服务端回写的**完整详情**（拿它刷新界面最准） + */ + async save(id: number, fields: Record, token: string): Promise { + const res: FbApiResult = await fbApi('/api/v1/people/' + id.toString(), + { method: 'PATCH', body: fields, token: token }); + return res; + } + + /** 新建一个人（`POST /api/v1/people`），全字段 */ + async create(fields: Record, token: string): Promise { + const res: FbApiResult = await fbApi('/api/v1/people', + { method: 'POST', body: fields, token: token }); + return res; + } + + /** 删除一个人（`DELETE /api/v1/people/`） */ + async remove(id: number, token: string): Promise { + return await fbApi('/api/v1/people/' + id.toString(), { method: 'DELETE', token: token }); + } + + /** 一行的解析（不做标签/生日的额外查询） */ + private rowToPerson(r: FbRow): FbRosterPerson { + const name: string = r.strOr('name', ''); + // 电话（JSON 数组；列可能为空串/非法 JSON ⇒ 容错成空数组） + const phonesArr: string[] = []; + const phonesRaw: string = r.strOr('phones', ''); + if (phonesRaw !== '') { + try { + const parsedArr: string[] = JSON.parse(phonesRaw) as string[]; + if (Array.isArray(parsedArr)) { + for (const ph of parsedArr) { + if (typeof ph === 'string' && ph !== '') { + phonesArr.push(ph); + } + } + } + } catch (err) { + hilog.warn(DOMAIN, TAG, 'phones JSON 解析失败：%{public}s', JSON.stringify(err)); + } + } + const nick: string = r.strOr('nickname', ''); + const tagsRaw: string = r.strOr('tags', ''); + const tags: string[] = []; + if (tagsRaw !== '') { + for (const t of tagsRaw.split('\u0001')) { + if (t !== '') { + tags.push(t); + } + } + } + const birthday: string = r.strOr('birthday', ''); + const p: FbRosterPerson = { + id: r.num('id', 0), + name: name, + shown: nick !== '' ? nick : name, + // ⚠️ 称谓（"父亲""妻子"）由服务端算好下发，**本地库不存** —— + // 它依赖整个家族图谱（Kinship），端上重算既费时又容易算错。 + // ⇒ 这里只能从名字/昵称兜底；要显示准确称谓需 `listWithLabel()`（拉接口）。 + label: '', + tags: tags, + avatarColor: r.strOr('avatar_color', ''), + avatar: r.strOr('avatar', ''), + birthdaySolar: birthday.length >= 10 ? birthday.substring(5, 10) : '', + birthdayFull: birthday.length >= 10 ? birthday.substring(0, 10) : '', + birthdayLunar: '', + // 🔴 电话从 `person_roster.phones`（JSON 数组）读。 + // ⚠️ 之前这里是**空串** —— 结果是"列表里点人拨号"根本没号码可拨 + // （只有走接口的 `listWithLabel()` 才带 phone）。这是个真 bug。 + phone: phonesArr.length > 0 ? phonesArr[0] : '', + phones: phonesArr, + initials: '', + org: r.strOr('org', ''), + title: r.strOr('title', ''), + slogan: r.strOr('slogan', ''), + email: r.strOr('email', ''), + addrCity: r.strOr('addr_city', ''), + gender: r.strOr('gender', ''), + note: r.strOr('note', ''), + isAdmin: false, + // ---- v52：本地库**不存**这些（详情接口才有）---- + // ⚠️ 本地库是为**列表**设计的（只存画一栏要用的字段）。 + // 工作经历/补充电话/私人备注/各级地址是"详情专用"， + // 它们在服务端而是**一对多**（工作经历、补充电话）或**按查看者不同** + // （私人备注、标签），搬进本地库要再加两张表 + 一套同步 —— + // 为省一次请求不值得。 + // ⇒ 详情**联网取**（见 `fetchDetail`），断网时这几项为空、其余照常显示。 + addrCountry: '', + addrProvince: '', + addrDistrict: '', + address: r.strOr('address', ''), + birthRank: '', + birthdayLunarLeap: false, + birthdayLunarRaw: '', + contacts: { phone: [], email: [], address: [], url: [] }, + jobs: [], + myNote: '', + myNickname: '', + idCardMasked: '', + canEditAll: false, + isSelf: false + }; + return p; + } + + /** 分批批量插入（理由见 FB_BATCH_SIZE 的说明） */ + /** + * 批量写入（分片防单条 SQL 过长）。 + * + * @param replace 主键冲突时**覆盖**还是**忽略**。 + * ⚠️ `persons` 必须传 `true`（跨模块共用表，不能先清空，只能靠 REPLACE 更新）。 + * 为什么（用户 2026-10-15 实测的真 bug）： + * 默认 `batchInsert` 在 PK 冲突时是 **IGNORE 语义**（什么都不做）⇒ + * **已存在的人永远不更新** ⇒ 服务端后来补的 email / 座右铭 / 地址 + * 在端上永远为空（"杨永全"的详情浮层里那三行干脆不显示）。 + * ⚠️ `person_roster` 传 `false` 即可 —— 它在写入前已经全量 DELETE， + * 不存在冲突。（两个调用点的 linter 也会提示重复写入，见下。） + */ + private async insertInBatches(store: relationalStore.RdbStore, table: string, + rows: relationalStore.ValuesBucket[], replace: boolean = false): Promise { + if (rows.length === 0) { + return; + } + for (let i = 0; i < rows.length; i += FB_BATCH_SIZE) { + const chunk: relationalStore.ValuesBucket[] = rows.slice(i, i + FB_BATCH_SIZE); + if (replace) { + await store.batchInsertWithConflictResolution( + table, chunk, relationalStore.ConflictResolution.ON_CONFLICT_REPLACE); + } else { + await store.batchInsert(table, chunk); + } + } + } +} + +// ============================================================ +// 解析 +// ============================================================ + +interface FbParsedRoster { + people: FbRosterPerson[]; + tagCloud: FbTagCount[]; + meId: number; +} + +/** 安全取字符串 */ +function strOf(v: string | null | undefined): string { + return v !== null && v !== undefined ? v : ''; +} + +/** 安全取数字 */ +function numOf(v: number | null | undefined): number { + return v !== null && v !== undefined ? v : 0; +} + +/** + * 数字 → 字符串（用于排行这种"可能是 number 也可能是 string"的字段）。 + * ⚠️ 0 视为"没填" ⇒ 返回空串（服务端 NULL 会变 0，别在界面上显示一个 0）。 + */ +function numToStr(v: number | string | null | undefined): string { + if (v === null || v === undefined) { + return ''; + } + if (typeof v === 'number') { + return v > 0 ? v.toString() : ''; + } + return v; +} + +/** 归一化补充联系方式（按类型分组，丢掉空值行） */ +function normaliseContacts(raw?: Record | null): FbContacts { + const out: FbContacts = { phone: [], email: [], address: [], url: [] }; + if (raw === null || raw === undefined) { + return out; + } + const kinds: string[] = ['phone', 'email', 'address', 'url']; + for (const kind of kinds) { + const rows: FbApiContactRaw[] = raw[kind] !== undefined && raw[kind] !== null ? raw[kind] : []; + const list: FbContactRow[] = []; + for (const r of rows) { + const val: string = strOf(r.value); + if (val !== '') { + const row: FbContactRow = { label: strOf(r.label), value: val }; + list.push(row); + } + } + if (kind === 'phone') { + out.phone = list; + } else if (kind === 'email') { + out.email = list; + } else if (kind === 'address') { + out.address = list; + } else { + out.url = list; + } + } + return out; +} + +/** 归一化工作经历 */ +function normaliseJobs(raw?: FbApiJobRaw[] | null): FbJobRow[] { + const out: FbJobRow[] = []; + if (raw === null || raw === undefined) { + return out; + } + for (const r of raw) { + const row: FbJobRow = { + org: strOf(r.org), + title: strOf(r.title), + rankName: strOf(r.rank_name), + startYm: strOf(r.start_ym), + endYm: strOf(r.end_ym), + note: strOf(r.note) + }; + // 全空的行不显示（服务端可能留了占位行） + if (row.org !== '' || row.title !== '' || row.rankName !== '') { + out.push(row); + } + } + return out; +} + +/** + * 关键词匹配（**本地筛选**，与服务端 `PersonQuery` 的口径尽量贴近）。 + * + * ⚠️ 本地能匹配的只有"库里有明文的东西"：姓名 / 昵称 / 手机号 / 标签 / + * 单位职务 / 首字母。 + * ⚠️ **称谓（"父亲"）匹配不到** —— 那个值依赖家族图谱、端上没算。 + * 这是**有意的取舍**：本地搜索快、断网可用；要按称谓搜就调接口（`?q=`）。 + */ +function matches(p: FbRosterPerson, q: string): boolean { + const k: string = q.trim().toLowerCase(); + if (k === '') { + return true; + } + const hay: string[] = [ + p.name.toLowerCase(), p.shown.toLowerCase(), p.phone, + p.org.toLowerCase(), p.title.toLowerCase(), p.initials.toLowerCase(), + ]; + for (const t of p.tags) { + hay.push(t.toLowerCase()); + } + for (const h of hay) { + if (h !== '' && h.indexOf(k) >= 0) { + return true; + } + } + return false; +} + +/** 把接口的标签云规整成端上的形状 */ +/** + * 归一化"全部电话"。 + * + * ⚠️ 优先用服务端的 `phones`（**它保证主号在前**）； + * 没有（老接口）就回落成 `[phone_plain]`。 + * ⚠️ 去重 + 去空：服务端理论上已经做过，但端上再兜一层（数据脏了不至于重复显示）。 + */ +function normalisePhones(o: FbApiRosterPerson): string[] { + const out: string[] = []; + const arr: string[] | null | undefined = o.phones; + if (arr !== null && arr !== undefined && Array.isArray(arr)) { + for (const ph of arr) { + if (typeof ph === 'string' && ph !== '' && out.indexOf(ph) < 0) { + out.push(ph); + } + } + } + if (out.length === 0) { + const main: string = strOf(o.phone_plain); + if (main !== '') { + out.push(main); + } + } + return out; +} + +function normaliseTagCloud(list?: FbApiTagItem[]): FbTagCount[] { + const out: FbTagCount[] = []; + if (list === undefined || !Array.isArray(list)) { + return out; + } + for (const it of list) { + const tag: string = strOf(it.tag); + if (tag !== '') { + const c: FbTagCount = { tag: tag, n: numOf(it.n) }; + out.push(c); + } + } + return out; +} + +/** + * 把**接口给的一份人员数据**映射成端上的 `FbRosterPerson`。 + * + * 🔴 抽成函数的原因（v52）：列表（`/roster` 的 people[]）与 + * 详情（`GET /people/`）**形状几乎一样**，只是详情多带几个字段。 + * ⇒ 共用同一套映射，字段一旦新增/改名只改一处 —— + * 两份映射必然漂移（本项目已经在"两个 tagCloud 分支"上踩过一次）。 + * ⚠️ 列表接口不带 `contacts`/`jobs`/`my_note` 等字段时，这里会缺省成空， + * 由详情接口补齐；这不影响列表渲染。 + */ +function personFromApi(o: FbApiRosterPerson): FbRosterPerson { + const id: number = numOf(o.id); + + // 生日：从二元组数组里挑"阳历 / 农历" + let solar: string = ''; + let lunar: string = ''; + const bdays: string[][] = o.birthdays !== undefined ? o.birthdays : []; + for (const pair of bdays) { + if (pair.length >= 2) { + const kind: string = strOf(pair[0]); + const val: string = strOf(pair[1]); + if (kind === '阳历') { + solar = val; + } else if (kind === '农历') { + lunar = val; + } + } + } + + const name: string = strOf(o.name); + const shown: string = strOf(o.shown) !== '' ? strOf(o.shown) : name; + + const tags: string[] = []; + if (o.tags !== undefined && Array.isArray(o.tags)) { + for (const t of o.tags) { + if (typeof t === 'string' && t !== '') { + tags.push(t); + } + } + } + + const phones: string[] = normalisePhones(o); + const p: FbRosterPerson = { + id: id, + name: name, + shown: shown, + label: strOf(o.label), + tags: tags, + avatarColor: strOf(o.avatar_color), + avatar: strOf(o.avatar), + birthdaySolar: solar, + // 🔴 完整生日取自**接口的 `birthday`**（`1955-03-30 00:00:00`）， + // 而不是 `birthdays` 数组 —— 后者**只有月日**（服务端刻意不显示年份）。 + // ⚠️ 编辑生日要完整日期 ⇒ 必须有这个字段。 + birthdayFull: strOf(o.birthday).length >= 10 ? strOf(o.birthday).substring(0, 10) : '', + birthdayLunar: lunar, + // 🔴 全部电话：优先用服务端下发的 `phones`（主号在前）； + // 老版本接口没这个字段时，回落到 `phone_plain`（至少主号能打）。 + phones: phones, + phone: phones.length > 0 ? phones[0] : '', + initials: strOf(o.initials), + org: strOf(o.org), + title: strOf(o.title), + slogan: strOf(o.slogan), + email: strOf(o.email), + addrCity: strOf(o.addr_city), + gender: strOf(o.gender), + note: strOf(o.note), + // 管理员徽标：服务端给的是 account_role / account_status + isAdmin: strOf(o.account_role) === 'admin' && strOf(o.account_status) === 'active', + // ---- v52 全字段（列表接口一般不带，缺省成空；详情接口会补齐）---- + addrCountry: strOf(o.addr_country), + addrProvince: strOf(o.addr_province), + addrDistrict: strOf(o.addr_district), + address: strOf(o.address), + birthRank: numToStr(o.birth_rank), + birthdayLunarLeap: false, + birthdayLunarRaw: strOf(o.birthday_lunar), + contacts: normaliseContacts(o.contacts), + jobs: normaliseJobs(o.jobs), + myNote: strOf(o.my_note), + myNickname: strOf(o.my_nickname), + idCardMasked: strOf(o.id_card_masked), + canEditAll: o.can_edit_all === true, + isSelf: o.is_self === true + }; + return p; +} + +/** + * 解析名册响应。 + * + * ⚠️ 生日的形状是**实测**来的：服务端 `PersonQuery::birthdaysOf()` 返回 + * `[['阳历','03-30'], ['农历','三月初七']]` —— 二元组数组， + * 不是 `{solar,lunar}` 对象。写解析前**先打接口看真实形状**，别猜。 + */ +function parseRoster(json: string): FbParsedRoster { + const empty: FbParsedRoster = { people: [], tagCloud: [], meId: 0 }; + if (json === '') { + return empty; + } + let payload: FbApiRosterPayload; + try { + payload = JSON.parse(json) as FbApiRosterPayload; + } catch (err) { + hilog.error(DOMAIN, TAG, '名册解析失败：%{public}s', JSON.stringify(err)); + return empty; + } + if (payload === null || payload === undefined) { + return empty; + } + + const people: FbRosterPerson[] = []; + const raw: FbApiRosterPerson[] = payload.people !== undefined ? payload.people : []; + for (const o of raw) { + const p: FbRosterPerson = personFromApi(o); + if (p.id > 0) { + people.push(p); + } + } + + const parsed: FbParsedRoster = { + people: people, + tagCloud: normaliseTagCloud(payload.tagCloud), + meId: numOf(payload.meId) + }; + return parsed; +} \ No newline at end of file diff --git a/entry/src/main/ets/data/FbSchema.ets b/entry/src/main/ets/data/FbSchema.ets new file mode 100644 index 0000000..1e16c6e --- /dev/null +++ b/entry/src/main/ets/data/FbSchema.ets @@ -0,0 +1,297 @@ +/** + * 家书 FamilyBook · 本地数据库结构（鸿蒙端） + * + * 设计立场：**本地优先（local-first）**。 + * · 本地库是 UI 的**唯一数据源**，界面永远不直接读网络； + * · 网络只在后台把服务端数据"补进来"、把本地改动"推出去"； + * · 断网时所有功能照常可用（因为数据本来就在本地）。 + * + * 🔴 建表原则：**按实体建表，不按模块建表**。 + * 「观影」看起来是一个模块，但服务端它是 6 张表组合出的视图： + * events(kind='movie') + movie_details + cinemas + movie_reviews + * + event_attendees + event_photos + * ⇒ 本地也照**实体**存：`events` 一张、`movie_details` 一张…… + * 观影页要的数据用 VIEW（或 JOIN 查询）拼出来。 + * ⚠️ 若按模块建表（一张 movies 表塞所有字段），会出现： + * 同一条日程在「日程模块」和「观影模块」各存一份、互相打架。 + * 这是本地优先最容易踩的坑。 + * + * 🔴 同步字段（每张业务表都有，与服务端 v33 结构对齐）： + * · `updated_at` —— 服务端最后修改时间（**由服务端 MySQL 自动维护**）； + * · `deleted_at` —— 软删除墓碑（NULL = 未删）； + * · `synced_at` —— **本地专有**：上次把它同步下来的时间， + * 用来判断"这条是否已被本地改动覆盖"。 + * · `dirty` —— **本地专有**：1 = 有未推送的本地改动。 + * ⚠️ 后两个字段是本地专有的，**不属于服务端结构**，回推时不发送。 + */ + +import { relationalStore } from '@kit.ArkData'; + +/** 本地库文件名（放在应用沙箱的 databases 目录下） */ +export const FB_DB_NAME: string = 'familybook.db'; + +/** + * 本地库版本号。 + * + * ⚠️ 每次改表结构都要 +1，并在 `migrate()` 里补上对应的 ALTER。 + * 本地库**不能像服务端那样"每次启动都全量 ALTER 一遍"** —— + * 那是拿用户的手机当试验田。必须按版本逐步迁移。 + */ +export const FB_DB_VERSION: number = 4; + +/** + * 建表语句。 + * + * ⚠️ 只对**首装**（onCreate）执行。老库升级走 `migrate()`。 + */ +export const FB_SCHEMA_SQL: string[] = [ + // ---------- 观影（4 张实体表）---------- + `CREATE TABLE IF NOT EXISTS events ( + id INTEGER PRIMARY KEY, + family_id INTEGER NOT NULL, + creator_id INTEGER, + kind TEXT NOT NULL, + title TEXT NOT NULL, + starts_at TEXT, + ends_at TEXT, + location TEXT, + note TEXT, + source_ref TEXT, + created_at TEXT, + updated_at TEXT NOT NULL DEFAULT '', + deleted_at TEXT, + -- ⚠️ 下面两列是**派生/聚合值**（服务端 Movie::attachStats 算出来的）， + -- 不是 events 表的原生列。放这里是为了"观影列表一次查询出结果"， + -- 免得每渲染一屏都去 GROUP BY movie_reviews。 + -- ⚠️ 它们**会被同步覆盖**，所以本地改动不能写这两列。 + review_count INTEGER NOT NULL DEFAULT 0, + review_avg REAL NOT NULL DEFAULT 0, + synced_at INTEGER NOT NULL DEFAULT 0, + dirty INTEGER NOT NULL DEFAULT 0 + )`, + // 增量拉取的主力索引（与服务端 idx_events_sync 同语义） + `CREATE INDEX IF NOT EXISTS idx_events_sync ON events (family_id, updated_at)`, + + `CREATE TABLE IF NOT EXISTS movie_details ( + event_id INTEGER PRIMARY KEY, + info TEXT, + poster_key TEXT, + ticket_key TEXT, + cinema_id INTEGER, + douban_meta TEXT, + updated_at TEXT NOT NULL DEFAULT '', + deleted_at TEXT, + synced_at INTEGER NOT NULL DEFAULT 0, + dirty INTEGER NOT NULL DEFAULT 0 + )`, + + `CREATE TABLE IF NOT EXISTS cinemas ( + id INTEGER PRIMARY KEY, + family_id INTEGER NOT NULL, + place TEXT NOT NULL DEFAULT '', + name TEXT NOT NULL DEFAULT '', + address TEXT, + color TEXT NOT NULL DEFAULT '', + created_at TEXT, + updated_at TEXT NOT NULL DEFAULT '', + deleted_at TEXT, + synced_at INTEGER NOT NULL DEFAULT 0, + dirty INTEGER NOT NULL DEFAULT 0 + )`, + `CREATE INDEX IF NOT EXISTS idx_cinemas_sync ON cinemas (family_id, updated_at)`, + + `CREATE TABLE IF NOT EXISTS movie_reviews ( + id INTEGER PRIMARY KEY, + family_id INTEGER NOT NULL, + event_id INTEGER NOT NULL, + person_id INTEGER NOT NULL, + rating INTEGER NOT NULL DEFAULT 0, + content TEXT NOT NULL DEFAULT '', + feelings TEXT, + created_at TEXT, + updated_at TEXT NOT NULL DEFAULT '', + deleted_at TEXT, + synced_at INTEGER NOT NULL DEFAULT 0, + dirty INTEGER NOT NULL DEFAULT 0 + )`, + `CREATE INDEX IF NOT EXISTS idx_movie_reviews_event ON movie_reviews (event_id)`, + + // ---------- 共用实体（观影页也要用）---------- + `CREATE TABLE IF NOT EXISTS persons ( + id INTEGER PRIMARY KEY, + family_id INTEGER NOT NULL, + kind TEXT NOT NULL DEFAULT '', + name TEXT NOT NULL DEFAULT '', + nickname TEXT, + gender TEXT, + birthday TEXT, + avatar TEXT, + note TEXT, + -- ⚠️ v2 新增（名册要用）：这些在服务端 persons 表里本来就有， + -- 只是之前只为观影的"同看人"建了最小字段集。 + -- 名册页要显示单位/职务/口号/邮箱/地址/头像色，所以补齐。 + -- 🔴 注意：本段是 SQL 注释、而整条建表语句是 JS 模板字符串， + -- 注释里**绝不能出现反引号** —— 一个反引号就会把模板串提前闭合， + -- 后续全被当成代码（报 "Cannot find name 'persons'"）。 + -- 这个坑本项目已踩第 4 次，写 SQL 注释时手别抖。 + avatar_color TEXT, + email TEXT, + org TEXT, + title TEXT, + slogan TEXT, + address TEXT, + addr_city TEXT, + created_at TEXT, + updated_at TEXT NOT NULL DEFAULT '', + deleted_at TEXT, + synced_at INTEGER NOT NULL DEFAULT 0, + dirty INTEGER NOT NULL DEFAULT 0 + )`, + `CREATE INDEX IF NOT EXISTS idx_persons_sync ON persons (family_id, updated_at)`, + + `CREATE TABLE IF NOT EXISTS event_attendees ( + -- ⚠️ 用**复合主键**而不是自增 id： + -- 接口返回的 attendees[].id 实测是 persons.id（服务端 SQL 是 + -- "SELECT a.event_id, p.id, ..."），**不是**这张关联表自己的行 id + -- （服务端压根没返回那个）。 + -- 我们既然不掌握行 id，就用「事件 + 人」这个业务唯一键做主键 —— + -- 一个事件里同一个人本来就只会出现一次，语义正确且幂等。 + -- + -- 🔴 注意：本行注释里**不能出现反引号** —— 整个建表语句是 JS 模板字符串， + -- 注释里一个反引号就会把它**提前闭合**，后面全变成代码、编译直接报 + -- "Cannot find name 'SELECT'"（这个坑刚踩过）。 + event_id INTEGER NOT NULL, + person_id INTEGER NOT NULL, + position INTEGER NOT NULL DEFAULT 0, + updated_at TEXT NOT NULL DEFAULT '', + deleted_at TEXT, + synced_at INTEGER NOT NULL DEFAULT 0, + dirty INTEGER NOT NULL DEFAULT 0, + PRIMARY KEY (event_id, person_id) + )`, + `CREATE INDEX IF NOT EXISTS idx_attendees_event ON event_attendees (event_id)`, + + // ---------- 同步元数据（本地专有，不对应任何服务端表）---------- + /** + * 每张表各存一条"上次同步到哪"的水位线。 + * + * 🔴 为什么**按表**而不是全局一个水位： + * 各表是分别拉取的。若共用一个全局水位，A 表拉成功了、B 表失败了， + * 水位推进之后 B 表那段数据**永远不会再被拉下来**（静默丢数据）。 + */ + `CREATE TABLE IF NOT EXISTS sync_state ( + table_name TEXT PRIMARY KEY, + last_sync_at TEXT NOT NULL DEFAULT '', + last_ok_at INTEGER NOT NULL DEFAULT 0 + )`, + + /** + * 待推送队列（本地改动）。 + * + * 🔴 为什么要有队列、而不是"改完立刻发请求"： + * ① 断网时改动不能丢 —— 排队等着，有网再发； + * ② 用户连点几下，不该发几个请求 —— 同一行合并成一条； + * ③ 请求失败要能重试 —— 记录次数，避免无限重试打爆。 + */ + `CREATE TABLE IF NOT EXISTS pending_ops ( + id INTEGER PRIMARY KEY, + table_name TEXT NOT NULL, + row_id INTEGER NOT NULL, + op TEXT NOT NULL, + payload TEXT, + attempts INTEGER NOT NULL DEFAULT 0, + created_at INTEGER NOT NULL DEFAULT 0 + )`, + // 同一行只保留最后一次操作（合并重复改动） + `CREATE UNIQUE INDEX IF NOT EXISTS idx_pending_row ON pending_ops (table_name, row_id)`, + + // ---------- 名册（v2 新增）---------- + // 🔴 为什么名册需要**自己**的表，而不是直接用 `persons`： + // `persons` 是"全家的通讯录底账"（本家 800+ 人）； + // 而名册是「**我**挑出来的那一小撮」—— 我加的人 + 别人分享给我的。 + // 服务端用 `person_roster(family_id, owner_id, person_id)` 表达这层"谁的"， + // 端上必须同样有一张，否则分不清"这人是我名册里的，还是只是全家的人"。 + // ⚠️ 主键用 (owner_id, person_id)：一个人在一个人的名册里只会出现一次。 + `CREATE TABLE IF NOT EXISTS person_roster ( + owner_id INTEGER NOT NULL, + person_id INTEGER NOT NULL, + family_id INTEGER NOT NULL, + group_id INTEGER NOT NULL DEFAULT 0, + sort_order INTEGER NOT NULL DEFAULT 0, + source TEXT NOT NULL DEFAULT '', + updated_at TEXT NOT NULL DEFAULT '', + synced_at INTEGER NOT NULL DEFAULT 0, + PRIMARY KEY (owner_id, person_id) + )`, + `CREATE INDEX IF NOT EXISTS idx_roster_owner ON person_roster (owner_id, sort_order)`, + + // 标签：一个人可以有多个标签（服务端 v28 起把"分组"降级成"标签词表"， + // 理由：一个人既是小学同学又是初中同学，分组放不下、标签可以）。 + `CREATE TABLE IF NOT EXISTS person_tags ( + owner_id INTEGER NOT NULL, + person_id INTEGER NOT NULL, + tag TEXT NOT NULL, + updated_at TEXT NOT NULL DEFAULT '', + synced_at INTEGER NOT NULL DEFAULT 0, + PRIMARY KEY (owner_id, person_id, tag) + )`, + `CREATE INDEX IF NOT EXISTS idx_tags_owner ON person_tags (owner_id, tag)`, + + // ---------- 通用模块缓存（v3 新增）---------- + // 🔴 为什么要这张表：日历/任务/纪念日/旅程/账本/资源/藏书/笔记/通知/首页 + // 这些模块的数据**目前只需要"拉一次 + 展示"**，没有离线写入的需求。 + // 为它们各建实体表（几十列 × 10 张）成本极高、收益极低； + // 而完全不缓存又会让"断网打不开、每次转圈"。 + // ⇒ 折中：**原样缓存接口 JSON**，UI 每次解析。 + // ⚠️ 代价：拉回来就要解析一遍（10 个模块毫秒级，可接受）。 + // ⚠️ 将来某模块要"离线可写"（任务打勾、账本记账）时， + // **那个模块**单独拆实体表 —— 不要整体重构。 + `CREATE TABLE IF NOT EXISTS module_cache ( + name TEXT PRIMARY KEY, + payload TEXT NOT NULL DEFAULT '', + fetched_at INTEGER NOT NULL DEFAULT 0 + )`, +]; + +/** 建表语句分组说明（供日志/排查用） */ +export interface FbTableGroup { + /** 分组名（如「观影」「同步元数据」） */ + group: string; + /** 该组包含的表名 */ + tables: string[]; +} + +/** 本地库里的表清单（按用途分组）—— 删除库/排查时用 */ +export const FB_TABLE_GROUPS: FbTableGroup[] = [ + { + group: '观影', + tables: ['events', 'movie_details', 'cinemas', 'movie_reviews'] + }, + { + group: '共用实体', + tables: ['persons', 'event_attendees'] + }, + { + group: '名册', + tables: ['person_roster', 'person_tags'] + }, + { + group: '同步元数据（本地专有）', + tables: ['sync_state', 'pending_ops'] + } +]; + +/** 需要参与同步的业务表（与服务端 v33 的 53 张对齐，这里先放已接入的部分） */ +export const FB_SYNCED_TABLES: string[] = [ + 'events', 'movie_details', 'cinemas', 'movie_reviews', 'persons', 'event_attendees', + 'person_roster', 'person_tags' +]; + +/** 配置本地数据库（SecurityLevel 取 S1：家庭应用，不含敏感凭证） */ +export const FB_STORE_CONFIG: relationalStore.StoreConfig = { + name: FB_DB_NAME, + securityLevel: relationalStore.SecurityLevel.S1, + // ⚠️ 不开 encrypt：库内是家庭日程/观影记录这类普通数据； + // 真要加密应走"整库加密 + 密钥进 KeyStore"，不是在这里开个开关了事。 + encrypt: false +}; \ No newline at end of file diff --git a/entry/src/main/ets/data/FbServerStore.ets b/entry/src/main/ets/data/FbServerStore.ets new file mode 100644 index 0000000..658ad26 --- /dev/null +++ b/entry/src/main/ets/data/FbServerStore.ets @@ -0,0 +1,179 @@ +/** + * 家书 FamilyBook · 服务器地址存储（鸿蒙端） + * + * 只存一件事：**这台手机连的是哪台服务器**（形如 `https://family.example.com`）。 + * + * 🔴 为什么它必须存在（用户 2026-10-17「应用第一次打开，让用户输入服务器地址」）： + * 在此之前地址是 `FbHttp.ets` 里的一个**编译期常量** —— 意味着这个 App + * 只能连我们自己那一台，别人装上去就是"登录永远失败"，且用户看不到任何原因 + * （他甚至不知道"地址"这个东西可以被改）。 + * ⇒ 地址必须是**运行期可配置 + 持久化**的：第一次打开问一次，之后一直用它。 + * + * ⚠️ 为什么与令牌**分两个 preferences 文件**（`fb_auth` 存令牌 / `fb_server` 存地址）： + * 两者生命周期不同 —— 「更换服务器」要清令牌（旧令牌在新服务器上无效）， + * 但地址要保留（用户刚填的）；「退出登录」清令牌但绝对不能清地址 + * （否则下次打开又从头问一遍）。放同一个文件里，清/留很容易写错。 + * + * ⚠️ 同样的"同步读"门面（见 FbTokenStore 的说明）： + * `fbApi()` 是纯同步的拼 URL 逻辑，不可能为了一句地址把它改成 async。 + * ⇒ 启动时 `init()` 预加载进内存，之后 `get()` 同步读。 + * **前提**：必须在发第一个请求之前 init 完（见 `EntryAbility.onCreate`）。 + * 调用方若拿不准，先用 `isReady()` 确认（见 `Index.bootCheck`）。 + */ + +import { preferences } from '@kit.ArkData'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { common } from '@kit.AbilityKit'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbServer'; + +/** preferences 实例名（沙箱内的文件名） */ +const STORE_NAME: string = 'fb_server'; +/** 服务器基址的键名 */ +const KEY_BASE: string = 'base_url'; + +/** + * 把用户输入整成可用的基址。 + * + * 用户可能输的东西（都见过）： + * `family.example.com` → 补 `https://` + * `family.example.com/` → 去掉尾斜杠 + * `http://192.168.1.8:8080` → 原样（内网调试常用 http） + * `https://x.com/familybook/` → 保留子目录，只去尾斜杠 + * ` https://x.com ` → 去首尾空白 + * 空串 / 只有协议 → 返回空串（调用方据此判"没填"） + * + * ⚠️ **只去尾部的 `/`**，不动路径中间的任何东西： + * 子目录部署（`https://x.com/familybook`）是真实存在的形态， + * 在这里"聪明地"截断成 `https://x.com` 会让请求全部 404。 + * ⚠️ 默认补 `https://` 而不是 `http://`： + * 公网部署都应该有证书；内网调试时用户自己会输 `http://`（我们照抄不改）。 + */ +export function fbNormalizeServer(input: string): string { + let s: string = input.trim(); + if (s === '') { + return ''; + } + // 协议：认 http / https（大小写都不管），其它一律当"没写协议" + if (!/^https?:\/\//i.test(s)) { + // 用户可能写了 `//x.com` 这种协议相对写法，先剥掉 + if (s.startsWith('//')) { + s = s.substring(2); + } + s = 'https://' + s; + } + // 去尾部所有斜杠（`https://x.com///` → `https://x.com`） + while (s.endsWith('/')) { + s = s.substring(0, s.length - 1); + } + return s; +} + +/** + * 是否是"看着像样"的基址。 + * + * ⚠️ 这只是**形状检查**（拦住"只写了几个字母"这种明显错误）， + * 真正的"这服务器对不对"必须靠 `fbProbeServer()` 打 `/api/v1/ping` —— + * 形状对但域名不存在/不是家书的服务器，这里一律判不出来。 + */ +export function fbServerLooksValid(base: string): boolean { + // 主机部分：字母数字、点、横线、冒号（端口）、方括号（IPv6），且不能为空 + return /^https?:\/\/[^\s/]+$/i.test(base); +} + +/** + * 服务器地址存储（同步读、异步写的门面）。 + */ +class FbServerStoreImpl { + private cached: string = ''; + private store: preferences.Preferences | null = null; + private ready: boolean = false; + + /** 预加载进内存。应在应用启动时调用一次（见 EntryAbility）。⚠️ 幂等 */ + async init(ctx: common.Context): Promise { + if (this.ready) { + return; + } + try { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + const v: preferences.ValueType = await this.store.get(KEY_BASE, ''); + const raw: string = typeof v === 'string' ? v : ''; + // ⚠️ 读出来也过一遍归一：老版本可能存了带尾斜杠的值 + this.cached = fbNormalizeServer(raw); + this.ready = true; + hilog.info(DOMAIN, TAG, '服务器地址预加载完成，%{public}s', + this.cached === '' ? '未配置' : this.cached); + } catch (err) { + // 读不到就当"没配"——用户会被引导去填，比崩掉好 + hilog.warn(DOMAIN, TAG, '服务器地址预加载失败：%{public}s', JSON.stringify(err)); + this.ready = true; + } + } + + /** + * 同步取基址（未配置返回空串）。 + * ⚠️ 需先 init()，否则会误判成"未配置"（见 `isReady()`）。 + */ + get(): string { + if (!this.ready) { + hilog.warn(DOMAIN, TAG, '服务器地址还没预加载完，本次读到的可能是空值'); + } + return this.cached; + } + + /** 有没有配置过服务器地址（同步） */ + has(): boolean { + return this.cached !== ''; + } + + /** 预加载是否完成（同步）—— 启动分流必须看它，否则会闪一下"填地址"页 */ + isReady(): boolean { + return this.ready; + } + + /** + * 保存基址（先归一，再落盘）。 + * 返回归一后的值（空串 = 输入不合法/为空，未写入）。 + */ + async set(ctx: common.Context, input: string): Promise { + const base: string = fbNormalizeServer(input); + if (!fbServerLooksValid(base)) { + return ''; + } + try { + if (this.store === null) { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + } + await this.store.put(KEY_BASE, base); + // ⚠️ `put` 只写内存，**必须 `flush`** —— 不 flush 进程被杀就丢 + // （表现：填了地址、重启后又让填） + await this.store.flush(); + this.cached = base; + this.ready = true; + hilog.info(DOMAIN, TAG, '服务器地址已保存：%{public}s', base); + return base; + } catch (err) { + hilog.error(DOMAIN, TAG, '服务器地址保存失败：%{public}s', JSON.stringify(err)); + return ''; + } + } + + /** 清除（一般只在"彻底重置"时用；「更换服务器」不该清空，直接覆盖） */ + async clear(ctx: common.Context): Promise { + try { + if (this.store === null) { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + } + await this.store.delete(KEY_BASE); + await this.store.flush(); + this.cached = ''; + hilog.info(DOMAIN, TAG, '服务器地址已清除'); + } catch (err) { + hilog.error(DOMAIN, TAG, '服务器地址清除失败：%{public}s', JSON.stringify(err)); + } + } +} + +/** 全局单例 */ +export const FB_SERVER_STORE: FbServerStoreImpl = new FbServerStoreImpl(); diff --git a/entry/src/main/ets/data/FbSession.ets b/entry/src/main/ets/data/FbSession.ets new file mode 100644 index 0000000..7a5f4d8 --- /dev/null +++ b/entry/src/main/ets/data/FbSession.ets @@ -0,0 +1,227 @@ +/** + * 家书 FamilyBook · 会话状态（鸿蒙端） + * + * 负责回答一个问题：**现在能不能用？** + * + * 🔴 v57（用户 2026-10-17）原话： + * 「这样一个 Token 我们给它 24 小时的寿命。就是每过 24 小时，我们就要请求一下 + * 服务器，去验证一下这个 Token 是不是还是有效的。」 + * 「只要是一直保持联网，就不需要每天都输密码。」 + * 「如果手机丢了，我们就在网页端把这个设备去掉……这个应用就要自动退出， + * 退到登录页面。退到登录页面之后，里面所有的资源、所有的内容都是不允许看的。」 + * 「运行期间任何一个请求返回 401，立刻锁定跳登录页。」 + * + * 于是这里有**两种锁**，必须分开（混成一种就会违背"一直联网不用重输密码"）： + * + * ┌─ need_login（必须重输密码） + * │ · 本地没有令牌 + * │ · 服务端回 401（被踢 / 被吊销 / 账号停用） + * │ ⇒ 清掉本地令牌。v58 起还要删加密密钥。 + * │ + * └─ offline_expired（锁界面，但**不**清令牌） + * · 有令牌，但这台设备已经超过 24 小时没能跟服务器通过话 + * ⇒ 只是"先别看了，联网确认一下"。一旦联网校验通过，**自动恢复**， + * 用户不用重新输密码 —— 这正是用户要的"一直联网就不用重登"。 + * + * ⚠️ 离线时"过了多久"只能用**本机时钟**算（没网问不到服务器）。 + * 所以把手机时间调回去是可以绕过的 —— 这是离线判定的固有缺陷， + * 由**服务端**兜住：`expires_at` 在服务端，联网后一律按服务端时间判。 + * 端上这个计时只负责"离线期间别一直敞着"。 + */ +import { preferences } from '@kit.ArkData'; +import { common } from '@kit.AbilityKit'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { fbApi, FbApiResult } from './FbHttp'; +import { FB_TOKEN_STORE } from './FbTokenStore'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbSession'; + +const STORE_NAME: string = 'fb_session'; +const KEY_VERIFIED_AT: string = 'verified_at_ms'; +const KEY_SERVER_TIME: string = 'server_time'; + +/** + * 离线宽限：超过这么久没跟服务器通过话，就锁界面（用户定的 24 小时）。 + * + * ⚠️ 与令牌的 24h 滑动窗口是**同一个数**，但不是同一件事： + * 令牌由服务端续期；这里量的是"端上最后一次成功校验距今多久"。 + */ +export const OFFLINE_LIMIT_MS: number = 24 * 3600 * 1000; + +/** 会话状态码 */ +export const SESSION_OK: string = 'ok'; // 可用 +export const SESSION_NEED_LOGIN: string = 'need_login'; // 必须重新登录 +export const SESSION_OFFLINE: string = 'offline_expired'; // 离线超时，锁界面 + +/** `/me` 里我们用得到的字段 */ +interface FbMeDevice { + expires_at?: string | null; + ttl_hours?: number; + id?: string; + name?: string; +} + +interface FbMePayload { + server_time?: string; + device?: FbMeDevice; +} + +/** 一次校验的结果 */ +export interface FbSessionCheck { + /** 见上面的 SESSION_* 常量 */ + state: string; + /** 给人看的原因（'' = 正常） */ + reason: string; + /** 服务端时间（ISO8601；拿不到为空） */ + serverTime: string; + /** 续期后的令牌到期时间（拿不到为空） */ + expiresAt: string; +} + +class FbSessionImpl { + private store: preferences.Preferences | null = null; + private verifiedAtMs: number = 0; + private serverTime: string = ''; + private ready: boolean = false; + + /** 启动时预加载（与其它 store 同构） */ + async init(ctx: common.Context): Promise { + if (this.ready) { + return; + } + try { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + const v: preferences.ValueType = await this.store.get(KEY_VERIFIED_AT, 0); + this.verifiedAtMs = typeof v === 'number' ? v : 0; + const s: preferences.ValueType = await this.store.get(KEY_SERVER_TIME, ''); + this.serverTime = typeof s === 'string' ? s : ''; + this.ready = true; + } catch (err) { + hilog.warn(DOMAIN, TAG, '会话记录预加载失败：%{public}s', JSON.stringify(err)); + this.ready = true; + } + } + + /** 预加载是否完成 */ + isReady(): boolean { + return this.ready; + } + + /** 最后一次成功校验的时间（毫秒；0 = 从没校验过） */ + lastVerifiedAt(): number { + return this.verifiedAtMs; + } + + /** 离线已经多久（毫秒）。从没校验过时返回一个"足够大"的值 */ + offlineMs(): number { + if (this.verifiedAtMs <= 0) { + return OFFLINE_LIMIT_MS + 1; + } + const d: number = Date.now() - this.verifiedAtMs; + return d > 0 ? d : 0; + } + + /** + * 记一次"刚刚跟服务器通过话"。 + * + * @param serverTime 服务端返回的时间（ISO8601）。**只用来展示/对账**， + * 不参与离线计时 —— 离线计时只能靠本机时钟（见文件头）。 + */ + async markVerified(ctx: common.Context, serverTime: string): Promise { + this.verifiedAtMs = Date.now(); + if (serverTime !== '') { + this.serverTime = serverTime; + } + try { + if (this.store === null) { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + } + await this.store.put(KEY_VERIFIED_AT, this.verifiedAtMs); + await this.store.put(KEY_SERVER_TIME, this.serverTime); + await this.store.flush(); + } catch (err) { + // 记不上就记不上：下次启动会算成"离线超时"，用户联网一下就恢复 + hilog.warn(DOMAIN, TAG, '会话时间保存失败：%{public}s', JSON.stringify(err)); + } + } + + /** 清掉校验记录（退出登录 / 被踢时） */ + async clear(ctx: common.Context): Promise { + this.verifiedAtMs = 0; + this.serverTime = ''; + try { + if (this.store === null) { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + } + await this.store.delete(KEY_VERIFIED_AT); + await this.store.delete(KEY_SERVER_TIME); + await this.store.flush(); + } catch (err) { + hilog.warn(DOMAIN, TAG, '会话记录清除失败：%{public}s', JSON.stringify(err)); + } + } + + /** + * 校验一次会话。 + * + * 调用时机（两个，缺一不可）： + * ① **每次启动**（用户 2026-10-17 明确要求）； + * ② 前台恢复 / 用户手动"刷新"时（可选，见 Index）。 + * + * ⚠️ 这里传 `authProbe: true`：401 由本方法自己处理（清令牌 + 返回 need_login）， + * 不让网络层的全局回调再踢一次 —— 否则会出现"两个地方同时跳登录页"。 + */ + async check(ctx: common.Context): Promise { + const token: string = FB_TOKEN_STORE.get(); + if (token === '') { + return { state: SESSION_NEED_LOGIN, reason: '还没登录', serverTime: '', expiresAt: '' }; + } + + const r: FbApiResult = await fbApi('/api/v1/me', { token: token, authProbe: true }); + + if (r.status === 200 && r.ok) { + let payload: FbMePayload = {}; + try { + payload = JSON.parse(r.data) as FbMePayload; + } catch (e) { + payload = {}; + } + const st: string = payload.server_time !== undefined ? payload.server_time : ''; + await this.markVerified(ctx, st); + const exp: string = (payload.device !== undefined && payload.device.expires_at !== null + && payload.device.expires_at !== undefined) ? payload.device.expires_at : ''; + return { state: SESSION_OK, reason: '', serverTime: st, expiresAt: exp }; + } + + if (r.status === 401) { + // 被踢 / 被吊销 / 过期 / 账号停用 —— 一律当"必须重新登录" + await FB_TOKEN_STORE.clear(ctx); + await this.clear(ctx); + hilog.info(DOMAIN, TAG, '令牌已失效（可能被网页端远程移除了设备）'); + return { + state: SESSION_NEED_LOGIN, + reason: '这台设备已经被退出登录，请重新登录', + serverTime: '', + expiresAt: '' + }; + } + + /* 网络层失败（断网/超时/服务器挂了）—— **不能**当成"被踢"， + 否则用户坐一趟飞机回来就得重输密码。 + 只按"离线多久"决定要不要锁。 */ + const off: number = this.offlineMs(); + if (off > OFFLINE_LIMIT_MS) { + return { + state: SESSION_OFFLINE, + reason: '已经超过 24 小时没能连上服务器，需要联网确认一次', + serverTime: this.serverTime, + expiresAt: '' + }; + } + return { state: SESSION_OK, reason: '离线可用', serverTime: this.serverTime, expiresAt: '' }; + } +} + +/** 全局单例 */ +export const FB_SESSION: FbSessionImpl = new FbSessionImpl(); diff --git a/entry/src/main/ets/data/FbSyncAll.ets b/entry/src/main/ets/data/FbSyncAll.ets new file mode 100644 index 0000000..e653dfe --- /dev/null +++ b/entry/src/main/ets/data/FbSyncAll.ets @@ -0,0 +1,176 @@ +/** + * 家书 FamilyBook · 全量同步（鸿蒙端） + * + * 一次把所有模块都同步一遍。 + * + * 🔴 为什么需要它（用户 2026-10-12："把同步做成全局的，接进来一个模块， + * 就自动同步一个模块"）： + * 之前每个页面**自己同步自己**（进入观影页同步观影、进名册页同步名册）， + * 结果是"用户必须把每个页面都点一遍才拿到全量数据"， + * 而且设置页那个「保存并同步」只同步了观影 —— 一个入口只干一部分活， + * 用户没法理解。 + * ⇒ 加这个"全量同步"：**一处触发、全部模块都更新**。 + * + * ⚠️ 它与"页面各自同步"**不冲突**，两者都要有： + * · 页面各自同步：保证"刚进这一页就有最新数据"； + * · 全量同步：保证"不用点遍每一页"。 + * 两条路的终点是同一个缓存（`module_cache` / 实体表），所以谁先谁后都对。 + */ + +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { FbMovieRepo, FbSyncResult } from './FbMovieRepo'; +import { FbPersonRepo, FbRosterSyncResult } from './FbPersonRepo'; +import { FbModuleLoad, FbModuleRepo } from './FbModuleRepo'; +import { FB_MODULE_PATH } from './FbModuleLoad'; +import { FB_TOKEN_STORE } from './FbTokenStore'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbSyncAll'; + +/** 全量同步结果 */ +export interface FbSyncAllResult { + ok: boolean; + /** 成功同步的模块数 */ + done: number; + /** 总模块数 */ + total: number; + /** 失败模块名（用户看得到的人话） */ + failed: string[]; + /** 当前进度文案（同步中实时更新用） */ + note: string; +} + +/** + * 全量同步的实时进度（供 UI 显示）。 + * + * ⚠️ 为什么用一个**模块级变量**而不是回调： + * 本机设备 `hilog` 读不出内容（已知限制）， + * 同步又可能跑十几秒 —— 页面必须能显示"现在到哪一步了"， + * 否则用户以为卡死。用轮询读这个变量的方式最省事（见设置页）。 + */ +export let FB_SYNC_ALL_PROGRESS: string = ''; + +/** 模块的中文名（进度提示用） */ +const MODULE_CN: Record = { + 'movies': '观影', + 'roster': '名册', + 'calendar': '日程', + 'tasks': '任务', + 'days': '纪念日', + 'trips': '旅程', + 'ledger': '账本', + 'resources': '资源', + 'books': '藏书', + 'notes': '笔记', + 'notifications': '通知', + 'home': '首页', +}; + +/** + * 进度回调（可选）。 + * + * 🔴 为什么加这个参数，而不是让调用方去轮询 `FB_SYNC_ALL_PROGRESS`： + * 模块级 `export let` 的"实时值"依赖打包器是否保留 live binding —— + * 这在 esmodule / 混淆 / tree-shaking 下**不保证**，一旦被内联成常量， + * 进度条就永远停在初始值（而调用方还以为在正常工作）。 + * ⇒ 登录页这种"用户正盯着屏幕等"的场景，进度必须**从函数里推出来**。 + * + * @param label 正在同步的模块中文名（如「观影」） + * @param done 已完成的模块数（**不含**当前这个） + * @param total 模块总数 + */ +export type FbSyncStepCb = (label: string, done: number, total: number) => void; + +export async function syncAll(onStep?: FbSyncStepCb): Promise { + const token: string = FB_TOKEN_STORE.get(); + const failed: string[] = []; + if (token === '') { + const r: FbSyncAllResult = { + ok: false, done: 0, total: 12, failed: [], + note: '未登录，无法同步', + }; + FB_SYNC_ALL_PROGRESS = r.note; + return r; + } + + let done: number = 0; + const total: number = 12; + + /** 跑一个模块并记账 */ + const step = async (label: string, work: () => Promise): Promise => { + FB_SYNC_ALL_PROGRESS = label; + if (onStep !== undefined) { + onStep(label, done, total); + } + try { + const ok: boolean = await work(); + if (ok) { + done += 1; + } else { + failed.push(label); + } + } catch (err) { + hilog.warn(DOMAIN, TAG, '同步 %{public}s 失败：%{public}s', label, JSON.stringify(err)); + failed.push(label); + } + }; + + // ---- ① 有实体表的两个模块（先做：它们的数据量大、最该先落地）---- + await step(MODULE_CN['movies'], async (): Promise => { + const r: FbSyncResult = await FbMovieRepo.inst().sync(token); + return r.ok; + }); + + await step(MODULE_CN['roster'], async (): Promise => { + const r: FbRosterSyncResult = await FbPersonRepo.inst().sync(token); + return r.ok; + }); + + // ---- ② 其余模块（走通用缓存）---- + const cacheModules: string[] = [ + 'calendar', 'tasks', 'days', 'trips', 'ledger', 'resources', 'books', 'notes', + 'notifications', 'home', + ]; + const repo: FbModuleRepo = FbModuleRepo.inst(); + for (const name of cacheModules) { + const label: string = MODULE_CN[name] !== undefined ? MODULE_CN[name] : name; + const path: string = FB_MODULE_PATH[name] !== undefined ? FB_MODULE_PATH[name] : ''; + if (path === '') { + continue; + } + await step(label, async (): Promise => { + // 这里只关心"有没有成功写进缓存"：`load` 的 sink 回调是同步的， + // 用一个 Promise 把它包起来，等到网络那次回来（fromCache=false）才算成功。 + const ok: boolean = await new Promise((resolve: (v: boolean) => void): void => { + let settled: boolean = false; + repo.load(name, path, (r: FbModuleLoad): void => { + if (r.fromCache || settled) { + return; // 缓存那次不算结果 + } + settled = true; + resolve(r.error === ''); + }); + // 兜底超时（网络卡住时不能让全量同步永远挂着） + setTimeout((): void => { + if (!settled) { + settled = true; + resolve(false); + } + }, 20000); + }); + return ok; + }); + } + + const result: FbSyncAllResult = { + ok: failed.length === 0, + done: done, + total: total, + failed: failed, + note: failed.length === 0 + ? ('全部 ' + done.toString() + ' 个模块同步完成') + : (done.toString() + '/' + total.toString() + ' 完成，失败：' + failed.join('、')), + }; + FB_SYNC_ALL_PROGRESS = result.note; + return result; +} \ No newline at end of file diff --git a/entry/src/main/ets/data/FbTokenStore.ets b/entry/src/main/ets/data/FbTokenStore.ets new file mode 100644 index 0000000..b6b322c --- /dev/null +++ b/entry/src/main/ets/data/FbTokenStore.ets @@ -0,0 +1,131 @@ +/** + * 家书 FamilyBook · API 令牌存储（鸿蒙端） + * + * 只存一件事：移动端 API 令牌（`api_tokens` 表签发的那一串）。 + * + * 🔴 为什么用 `preferences` 而不是本地库 RDB： + * 这是**单个键值**（一把令牌），不是"多行记录"。 + * KV 存储天生适合，也不必为它建表、迁移。 + * 令牌**不参与同步**（服务端 v33 的 53 张业务表里也不含 api_tokens）—— + * 它本来就是"这台设备与服务器之间的凭据"，各设备各自一份。 + * + * ⚠️ 令牌是敏感凭证： + * · 放 `preferences` 会落在应用沙箱内（其它应用读不到），这对家庭应用够用； + * · 若将来要更严（防 root 提取），应迁到 `@ohos.security.asset`（系统密钥库）。 + * 现在不做的原因：Asset Store 的 API 面更复杂，而本应用的数据敏感度 + * （家庭日程/观影）还不至于需要它。**这是个有意识的取舍，不是遗漏。** + * · ⚠️ 无论如何**不要**把令牌写进日志或错误信息里往外抛。 + */ + +import { preferences } from '@kit.ArkData'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { common } from '@kit.AbilityKit'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbToken'; + +/** preferences 实例名（沙箱内的文件名） */ +const STORE_NAME: string = 'fb_auth'; +/** 令牌的键名 */ +const KEY_TOKEN: string = 'api_token'; + +/** + * 令牌存储（同步读、异步写的门面）。 + * + * 🔴 为什么提供一个**同步的 `get()`**： + * 页面渲染时经常需要立刻知道"有没有令牌"（决定要不要发起同步）。 + * 若只能异步读，每个调用点都要 await，把简单逻辑搞得支离破碎。 + * ⇒ 用"启动时预加载进内存 + 写时同时更新内存"的方式提供同步读。 + * ⚠️ 前提是**启动时必须先 `init()`**，否则内存里是空的（会误判成"未登录"）。 + */ +class FbTokenStoreImpl { + private cached: string = ''; + private store: preferences.Preferences | null = null; + private ready: boolean = false; + + /** + * 预加载令牌进内存。应在应用启动时调用一次（见 EntryAbility）。 + * ⚠️ 幂等：重复调用直接返回，不会重复读盘。 + */ + async init(ctx: common.Context): Promise { + if (this.ready) { + return; + } + try { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + const v: preferences.ValueType = await this.store.get(KEY_TOKEN, ''); + this.cached = typeof v === 'string' ? v : ''; + this.ready = true; + hilog.info(DOMAIN, TAG, '令牌预加载完成，%{public}s', + this.cached === '' ? '未设置' : '已设置'); + } catch (err) { + // ⚠️ 读不到就当"没有令牌"，**不要**让启动流程挂掉 —— + // 用户仍能用本地数据（本地优先的好处）。 + hilog.warn(DOMAIN, TAG, '令牌预加载失败：%{public}s', JSON.stringify(err)); + this.ready = true; + } + } + + /** 同步取令牌（未设置返回空串）。⚠️ 需先 init()，否则会误判为未登录 */ + get(): string { + if (!this.ready) { + hilog.warn(DOMAIN, TAG, '令牌还没预加载完，本次读到的可能是空值'); + } + return this.cached; + } + + /** 是否已设置令牌（同步） */ + has(): boolean { + return this.cached !== ''; + } + + /** + * 预加载是否已完成（同步）。 + * + * 🔴 为什么需要它：`get()` 在**没预加载完**时会返回空串（看起来像"未登录"）。 + * 启动流程里若据此判断，就会出现"明明有令牌却显示登录页"。 + * ⇒ 调用方应先用 `isReady()` 确认预加载完成，再做登录态判断。 + * （见 Index.bootCheck 里的等待循环。） + */ + isReady(): boolean { + return this.ready; + } + + /** 保存令牌（同时更新内存缓存与磁盘） */ + async set(ctx: common.Context, token: string): Promise { + try { + if (this.store === null) { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + } + await this.store.put(KEY_TOKEN, token); + // ⚠️ `put` 只写内存，**必须 `flush`** 才落盘 —— + // 不 flush 的话进程被杀就丢了（表现为"登录后又变未登录"）。 + await this.store.flush(); + this.cached = token; + this.ready = true; + hilog.info(DOMAIN, TAG, '令牌已保存'); + return true; + } catch (err) { + hilog.error(DOMAIN, TAG, '令牌保存失败：%{public}s', JSON.stringify(err)); + return false; + } + } + + /** 清除令牌（登出） */ + async clear(ctx: common.Context): Promise { + try { + if (this.store === null) { + this.store = await preferences.getPreferences(ctx, STORE_NAME); + } + await this.store.delete(KEY_TOKEN); + await this.store.flush(); + this.cached = ''; + hilog.info(DOMAIN, TAG, '令牌已清除'); + } catch (err) { + hilog.error(DOMAIN, TAG, '令牌清除失败：%{public}s', JSON.stringify(err)); + } + } +} + +/** 全局单例 */ +export const FB_TOKEN_STORE: FbTokenStoreImpl = new FbTokenStoreImpl(); \ No newline at end of file diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index 02e745d..cfe941d 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -1,7 +1,15 @@ import { AbilityConstant, Configuration, ConfigurationConstant, EnvironmentCallback, UIAbility, Want } from '@kit.AbilityKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; -import { window } from '@kit.ArkUI'; +import { UIContext, display, window } from '@kit.ArkUI'; +import { BusinessError } from '@kit.BasicServicesKit'; +import { FB_TOKEN_STORE } from '../data/FbTokenStore'; +import { FB_SERVER_STORE } from '../data/FbServerStore'; +import { FB_DEVICE_STORE } from '../data/FbDeviceStore'; +import { FB_SESSION } from '../data/FbSession'; +import { FB_CAL_SETTINGS } from '../data/FbCalSettings'; +import { FbDb } from '../data/FbDb'; +import { FB_MODULE_TOKEN } from '../data/FbModuleRepo'; const DOMAIN: number = 0x0000; @@ -18,6 +26,57 @@ export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { hilog.info(DOMAIN, 'FamilyBook', '%{public}s', 'Ability onCreate'); + // 🔴 预加载 API 令牌进内存。 + // 页面里需要**同步**判断"有没有登录"（决定要不要发起同步）， + // 所以必须在页面出现之前把令牌读进内存（见 FbTokenStore 的说明）。 + // ⚠️ 不 await：读盘几百毫秒，不该挡住启动；页面那边读到空值也只是 + // "这次不同步"，本地数据照样能看（本地优先的好处）。 + FB_TOKEN_STORE.init(this.context).catch((err: BusinessError): void => { + hilog.warn(DOMAIN, 'FamilyBook', '令牌预加载失败：%{public}s', JSON.stringify(err)); + }); + + // 🔴 v55：预加载**服务器地址**（用户 2026-10-17「第一次打开输入服务器地址」）。 + // 理由与令牌相同：`fbApi()` 是同步拼 URL 的，不可能为了地址改成 async。 + // ⚠️ 顺序很重要 —— 地址没读出来时发请求会直接判成"没配服务器" + // （见 `fbApi` 的 `no_server` 分支）。页面那边用 `isReady()` 等它。 + FB_SERVER_STORE.init(this.context).catch((err: BusinessError): void => { + hilog.warn(DOMAIN, 'FamilyBook', '服务器地址预加载失败：%{public}s', JSON.stringify(err)); + }); + + // 🔴 v57（用户 2026-10-17）：预加载**设备身份**与会话时间。 + // 设备身份要同步读（登录请求体里必须带 device_id）， + // 所以同样得在页面出现之前准备好；首次启动会在这里生成 UUID 并落盘。 + // ⚠️ 会话时间（上次校验成功的那一刻）也在这里读 —— 离线时判定 + // "超过 24 小时没联网"就靠它（见 FbSession）。 + FB_DEVICE_STORE.init(this.context).catch((err: BusinessError): void => { + hilog.warn(DOMAIN, 'FamilyBook', '设备身份初始化失败：%{public}s', JSON.stringify(err)); + }); + FB_SESSION.init(this.context).catch((err: BusinessError): void => { + hilog.warn(DOMAIN, 'FamilyBook', '会话记录预加载失败：%{public}s', JSON.stringify(err)); + }); + + // 🔴 把"令牌读取器"注入给通用模块仓库。 + // 为什么在这里做（而不是让仓库自己 import 令牌）： + // 仓库与令牌存储之间会形成**循环 import**（两者都依赖 FbDb）。 + // 用"启动时注入一个读取函数"把依赖方向固定成单向。 + FB_MODULE_TOKEN.set((): string => FB_TOKEN_STORE.get()); + + // 🔴 日程设置的预加载（用户 2026-10-15 要求日程页照 SyncCalendar 那套， + // 含"默认视图 / 日程显示方式"这类偏好）。 + // 同样**必须同步可读**：日程页一渲染就要决定用月/周/列表哪种视图， + // 若只能 await，每个调用点都要 async（同 FbTokenStore 的理由）。 + FB_CAL_SETTINGS.init(this.context).catch((err: BusinessError): void => { + hilog.warn(DOMAIN, 'FamilyBook', '日程设置预加载失败：%{public}s', JSON.stringify(err)); + }); + + // 🔴 启动就**打开本地库**（而不是等某个页面自己打开）。 + // 理由：所有模块都要读缓存，谁先进入都得等库就绪； + // 在入口统一打开一次，页面侧只管用（`FbDb.require()`）。 + // ⚠️ 不 await：开库是异步的，挡住启动会让首帧变慢； + // 页面里若库还没好，`isReady()` 会返回 false、那次只走网络。 + FbDb.inst().open(this.context).catch((err: BusinessError): void => { + hilog.warn(DOMAIN, 'FamilyBook', '本地库打开失败：%{public}s', JSON.stringify(err)); + }); } onDestroy(): void { @@ -33,19 +92,55 @@ export default class EntryAbility extends UIAbility { hilog.error(DOMAIN, 'FamilyBook', 'setColorMode failed: %{public}s', JSON.stringify(err)); } - // ② 沉浸式：系统栏**全透明**，让应用自己的背景透上去。 + // ② 沉浸式（**全沉浸**）：系统栏全透明 + 窗口布局铺满整屏。 + // + // 🔴 用户 2026-10-13 定的形态（照 IT 之家那类资讯应用）： + // 「当界面开始从下往上滑的时候，它是连带着连通知栏甚至都好像是自己的 + // 这个应用的其中的一部分，就直接滑上去了。然后下面也没有任何的这个东西， + // 也没有任何的条啊什么之类的，就是感觉这个内容是从这个手机的边缘直接滑上去的。」 + // + // 要实现这个，**必须三件事同时成立**（缺一个都出不来效果）： + // ① `setWindowLayoutFullScreen(true)` —— 窗口**不再为系统栏让位**， + // 内容才可能画到状态栏/手势条区域里去。只用 `expandSafeArea` + // 只能让"背景色"延伸，**内容本身还是被挡在安全区里**，滑不到顶。 + // ② 系统栏**全透明** —— 状态栏只是"一层透明玻璃"，内容从它下面穿过； + // 它的前景色（时间/信号图标）按背景亮度自动取深色或浅色。 + // ③ **隐藏底部导航指示条** —— 用户明确说"下面也没有任何的这个东西， + // 也没有任何的条"。手势条藏掉，内容才真的是"从手机边缘滑上去"。 + // + // ⚠️ 之前用的是"系统栏涂成实心白 + 内容留在安全区"那套 —— 那是**另一种** + // 设计（状态栏与顶栏同色、分层不穿透），做不出"跟着内容一起滑走"的效果。 + // 两者是互斥的两条路线，这里按用户的最新要求换成全沉浸。 + // + // ⚠️ 全屏之后窗口**不再避让状态栏**，所以页面必须自己知道状态栏有多高 + // （见下面的 `measureSafeArea`）—— 否则首屏标题会被时间/信号压住。 try { const win: window.Window = windowStage.getMainWindowSync(); this.mainWindow = win; - // ⚠️ 这里**不调** `setWindowLayoutFullScreen(true)`。 - // 本机另一个应用（SyncCalendar）用的是"透明系统栏 + expandSafeArea"那套， - // 实测效果更干净：窗口布局不动（子组件位置不受影响）， - // 只把系统栏涂成全透明、让窗口底色透出来 ⇒ 顶部通知栏与页面**同色**， - // 页面侧也不用自己去算状态栏高度、加 padding。 - // 之前用 setWindowLayoutFullScreen 时，窗口真的铺到状态栏底下， - // 页面反而要手动让位，容易算错（踩过一次"重复避让"的坑）。 AppStorage.setOrCreate('fbMainWindow', win); - this.applySystemBars(win); + + // 🔴 量状态栏高度**必须在开全屏之前**（顺序绝不能反）。 + // + // 为什么（这是本轮实测踩出来的真根因）： + // `getWindowAvoidArea(TYPE_SYSTEM)` 返回的是"**窗口需要避让的区域**"。 + // 开了 `setWindowLayoutFullScreen(true)` 之后窗口**不再避让系统栏**， + // ⇒ 这个"待避让区域"就是空的。 + // 所以"先开全屏、再量"拿到的一直是 **0** —— 那不是说"状态栏高度是 0"， + // 而是"现在不需要避让"（这正是全屏的意义）。 + // ⇒ 之前顶栏 `padding.top = 0 + 4`，图标和"家书"就直接压进状态栏了。 + this.measureSafeArea(win); + + // ① 布局铺满整屏（API 9 起可用，未废弃） + win.setWindowLayoutFullScreen(true).then((): void => { + // ②③ 必须在全屏**生效之后**再设，否则会被全屏重置掉。 + // ⚠️ 这里**不重新量**状态栏高度（全屏后量不到，见上面的说明）。 + this.applySystemBars(win); + }).catch((err: BusinessError): void => { + hilog.error(DOMAIN, 'FamilyBook', 'setWindowLayoutFullScreen failed: %{public}s', + JSON.stringify(err)); + // 兜底：全屏失败也要把系统栏设成透明，至少不退化成"实心色带" + this.applySystemBars(win); + }); } catch (err) { hilog.error(DOMAIN, 'FamilyBook', 'immersive setup failed: %{public}s', JSON.stringify(err)); } @@ -126,34 +221,164 @@ export default class EntryAbility extends UIAbility { } /** - * 系统栏配色。 + * 系统栏配色 —— **全沉浸版**：系统栏一律**全透明**。 * - * 用户 2026-10-12 定的要求： - * ① 家书标题栏用**浅色（白）**； - * ② 上面通知栏也是**浅色**，两者融为一体。 + * 🔴 用户 2026-10-13 要"通知栏像是应用自己的一部分"： + * 唯一能做到这一点的就是把状态栏设成**透明**，让底下的内容（`FbTopBar` 的白底） + * 一直透上去。这样内容上滑时，状态栏区域显示的就是"当前滑到那里的内容" —— + * 视觉上它和通知栏是一体的。 * - * ⇒ 做法：把状态栏设成与顶栏**同一个颜色**（`surface` = 白）。 - * 这是一个"配置出来的"同色，比"让系统栏透明、再指望紧邻元素恰好同色"稳得多 —— - * 后者一旦顶栏改了底色就会立刻出现色带（已经踩过一次）。 + * ⚠️ **不能给状态栏写死颜色**（哪怕取"顶栏底色"）——状态栏是独立一层， + * 写死就永远是那条色带，内容永远滑不进它里面。 + * （旧版正是这么做的，所以怎么调都不"沉浸"。） * - * ⚠️ 底部导航条取**页面底色**（宣纸米），与页面下部同色，不突兀。 - * ⚠️ 取色走 resourceManager（经 dark/ 限定符解析）—— 深色模式一并生效。 + * ⚠️ 前景色（时间/信号、手势条）按**当前背景亮度**自动取深/浅： + * 页面底色是米色（亮）⇒ 取深色图标。 + * 页面是浅色的应用，前景色固定深色即可，不必跟随系统深浅色； + * 但深色模式下底色会变深，所以这里仍然按实际底色算一次。 */ private applySystemBars(win: window.Window): void { - const surfaceBg: string = this.themeColor($r('app.color.surface').id, '#FFFFFF'); const paperBg: string = this.themeColor($r('app.color.page_bg').id, '#F7F3EA'); + const fg: string = this.isDarkBg(paperBg) ? '#FFFFFF' : '#2C231D'; try { win.setWindowSystemBarProperties({ - // 顶部：与顶栏同色（白）⇒ 通知栏与标题栏融为一体 - statusBarColor: surfaceBg, - statusBarContentColor: this.isDarkBg(surfaceBg) ? '#FFFFFF' : '#2C231D', - // 底部：与页面底色同色 - navigationBarColor: paperBg, - navigationBarContentColor: this.isDarkBg(paperBg) ? '#FFFFFF' : '#2C231D' + // ① 系统栏**全透明**（'#00000000' 八位色值：前两位 alpha=00） + statusBarColor: '#00000000', + navigationBarColor: '#00000000', + statusBarContentColor: fg, + navigationBarContentColor: fg, }); } catch (err) { hilog.error(DOMAIN, 'FamilyBook', 'setSystemBarProperties failed: %{public}s', JSON.stringify(err)); } + + // ③ 隐藏底部**手势导航条**。 + // 🔴 用户明确说「下面也没有任何的这个东西，也没有任何的条啊什么之类的」。 + // ⚠️ `setSpecificSystemBarEnabled` 是 **API 11+**（本工程 compatibleSdk = 24，够用）。 + // ⚠️ 只关 'navigationIndicator'（那根手势小横条），**不关 'navigation'** —— + // 后者是"三键导航栏"，把它也关掉会让**用三键导航的用户没有返回键**， + // 属于把用户困在应用里的改动。手势条是视觉装饰，藏掉才是纯粹的观感优化。 + // ⚠️ 失败不致命（比如设备本来就没手势条）：只记日志，不让它影响启动。 + win.setSpecificSystemBarEnabled('navigationIndicator', false) + .catch((err: BusinessError): void => { + hilog.warn(DOMAIN, 'FamilyBook', '隐藏手势条失败（不影响使用）：%{public}s', + JSON.stringify(err)); + }); + } + + /** + * 量出状态栏高度（vp）并存进全局状态，供各页"给滚动内容的第一行垫高"。 + * + * ⚠️ 为什么必须在**全屏生效之后**量： + * 不开全屏时窗口本身就避让了状态栏、`getWindowAvoidArea(TYPE_SYSTEM).topRect` 会是 0 + * ⇒ 那时量到的 0 是"不需要避让"，不是"状态栏高度是 0"。 + * 开了全屏才会返回真实高度。 + * ⚠️ 返回的是 **px**，要 `px2vp()` 换成 vp 再用（ArkUI 的尺寸单位是 vp）。 + * ⚠️ 只在启动时量一次：状态栏高度在运行期不会变（横竖屏切换由 ArkUI 自己重排， + * 我们这套布局是纵向滚动，不受影响）。 + */ + private measureSafeArea(win: window.Window): void { + const topPx: number = this.avoidTopPx(win); + const topVp: number = this.toVp(win, topPx); + AppStorage.setOrCreate('fbStatusBarH', topVp); + hilog.info(DOMAIN, 'FamilyBook', '状态栏高度：%{public}dpx / %{public}dvp', topPx, topVp); + } + + /** + * 取"顶部需要避让的高度"（px）。 + * + * ⚠️ **必须在 `setWindowLayoutFullScreen(true)` 之前调用** —— 全屏后 + * `getWindowAvoidArea` 返回空（窗口已不需避让），量到恒为 0。 + * + * 三种口径依次尝试，取**最大**的一个： + * ① `TYPE_SYSTEM` —— 状态栏（常规来源）； + * ② `TYPE_CUTOUT` —— 挖孔/刘海。它返回的是"**整块天线区**"的高度， + * 比状态栏略高，**正是要的**（图标不该顶到挖孔里）； + * ③ `getWindowAvoidAreaIgnoringVisibility`（**API 22+**）—— 前两者都拿不到时的兜底。 + * ⚠️ 用 `max` 而不是"谁先成功用谁"：三者量的可能是同一块区域的不同表述， + * 取最大能保证**绝不偏小** —— 偏小会让图标压进状态栏（就是这个 bug）， + * 偏大只是多几 vp 的留白（观感无碍）。 + */ + private avoidTopPx(win: window.Window): number { + let best: number = 0; + try { + const sys: window.AvoidArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); + if (sys.visible && sys.topRect.height > best) { + best = sys.topRect.height; + } + } catch (err) { + hilog.warn(DOMAIN, 'FamilyBook', 'TYPE_SYSTEM 取不到：%{public}s', JSON.stringify(err)); + } + try { + const cut: window.AvoidArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_CUTOUT); + if (cut.visible && cut.topRect.height > best) { + best = cut.topRect.height; + } + } catch (err) { + hilog.warn(DOMAIN, 'FamilyBook', 'TYPE_CUTOUT 取不到：%{public}s', JSON.stringify(err)); + } + if (best <= 0) { + // 兜底：API 22+ 的"无视可见性"版。本工程 compatibleSdk = 24，可用。 + // ⚠️ 用 try 包住是必需的：低版本设备上这个方法不存在，会抛 801。 + try { + const ign: window.AvoidArea = + win.getWindowAvoidAreaIgnoringVisibility(window.AvoidAreaType.TYPE_SYSTEM); + if (ign.topRect.height > best) { + best = ign.topRect.height; + } + } catch (err) { + hilog.warn(DOMAIN, 'FamilyBook', 'IgnoringVisibility 取不到：%{public}s', + JSON.stringify(err)); + } + } + return best; + } + + /** + * px → vp。 + * + * ⚠️ 拿不到 `UIContext` 时回落到 **1**（不换算）—— + * 按本机密度 3 算，换算后是 1/3，直接当作 vp 用会**偏小**（标题贴太紧，但可用）； + * 若这里凭空乘个 3 反而可能**偏大**、把标题推到屏幕中间。 + * 宁可保守偏小，也不要因为一次量不准而毁掉首屏。 + */ + /** + * px → vp。 + * + * ⚠️ 两条路径，必须都有： + * ① `UIContext.px2vp()` —— 首选。但它**依赖 UI 内容已经加载**； + * 而本方法是**在 `loadContent` 之前**调用的（量状态栏必须在开全屏之前）， + * 此时 `getUIContext()` 很可能还是 undefined。 + * ② **按屏幕密度换算**：`px / densityPixels = vp`。 + * 这条不依赖 UI，任何时刻都可用 —— 也是实际生效的那条。 + * + * ⚠️ **不要再退回"返回 0"**：那会让顶栏完全不让位、 + * 图标和标题压进状态栏（这个 bug 就是这么来的）。 + * 宁可走密度换算（结果精确），也不要 0。 + */ + private toVp(win: window.Window, px: number): number { + if (px <= 0) { + return 0; + } + try { + const ui: UIContext | undefined = win.getUIContext(); + if (ui !== undefined) { + return ui.px2vp(px); + } + } catch (err) { + hilog.warn(DOMAIN, 'FamilyBook', 'UIContext.px2vp 失败，改用密度换算：%{public}s', + JSON.stringify(err)); + } + // ② 密度换算（vp = px / density） + try { + const density: number = display.getDefaultDisplaySync().densityPixels; + if (density > 0) { + return px / density; + } + } catch (err) { + hilog.warn(DOMAIN, 'FamilyBook', '读屏幕密度失败：%{public}s', JSON.stringify(err)); + } + return 0; } } \ No newline at end of file diff --git a/entry/src/main/ets/model/DemoData.ets b/entry/src/main/ets/model/DemoData.ets index 6699d74..2d9deec 100644 --- a/entry/src/main/ets/model/DemoData.ets +++ b/entry/src/main/ets/model/DemoData.ets @@ -12,10 +12,10 @@ * ⚠️ 全文件统一 `Fb` 前缀命名，避免与其他文件顶层名冲突（arkts-no-decl-merging）。 */ -import { FbAccount, FbAnniversaryItem, FbBookItem, FbCalBook, FbCalEvent, FbGroup, - FbKinChip, FbKinRelation, FbLedgerBook, FbLedgerEntry, FbModuleCard, FbMovieItem, +import { FbAccount, FbBookItem, FbCalBook, FbCalEvent, FbGroup, + FbKinChip, FbKinRelation, FbLedgerBook, FbLedgerEntry, FbMovieItem, FbNoteItem, FbNotificationItem, FbResourceItem, FbRosterItem, FbSession, - FbTaskItem, FbTripItem, FbTripNode, FbWeather, FbWeekStat } from './Types'; + FbTaskItem, FbTripItem, FbTripNode } from './Types'; /** 假数据里的「我」 */ export const FB_DEMO_ME: FbAccount = { @@ -42,65 +42,38 @@ function fbChip(id: number, shown: string, kinship: string, color: string): FbKi return { id: id, shown: shown, kinship: kinship, avatarColor: color, isAdmin: false }; } -/** 首页「我的家人」 */ -export const FB_DEMO_KIN: FbKinChip[] = [ - fbChip(2, '爱人', '配偶', '#9A5C7A'), - fbChip(3, '儿子', '儿子', '#4A7C82'), - fbChip(4, '女儿', '女儿', '#6B5B95'), - fbChip(5, '爸爸', '父亲', '#8A6B4B'), - fbChip(6, '妈妈', '母亲', '#B0763A'), - fbChip(7, '弟弟', '弟弟', '#3F7D5A') -]; - -/** 首页天气 */ -export const FB_DEMO_WEATHER: FbWeather = { - place: '青岛市 · 崂山区', - temp: 21, - text: '多云', - wind: '东南风 3 级' -}; - -/** 首页近七天统计 */ -export const FB_DEMO_WEEK_STAT: FbWeekStat = { - events: 11, - todos: 4, - overdue: 1 -}; - -/** 首页日子标记 */ -export const FB_DEMO_MARKS: string[] = ['寒露', '重阳节', '儿子生日']; - -/** 首页模块卡片（顺序与 Web 端 Module::DEFAULT_NAV 一致） */ -export const FB_DEMO_MODULE_CARDS: FbModuleCard[] = [ - { key: 'people', name: '名册', big: '12 人', lines: ['1089 人在这个家里'], color: '#4A7C82' }, - { key: 'movies', name: '观影', big: '86 部', lines: ['最近看了《漫长的季节》'], color: '#7A4E8C' }, - { key: 'trips', name: '旅程', big: '9 次', lines: ['最近去了青岛·崂山'], color: '#3F7D5A' }, - { key: 'calendar', name: '日程', big: '11 条', lines: ['未来七天'], color: '#B0763A' }, - { key: 'resources', name: '资源', big: '37 项', lines: ['证件 / 资料 / 附件'], color: '#5566A8' }, - { key: 'tasks', name: '任务', big: '3 件在做', lines: ['4 件待办 · 1 件逾期'], color: '#A8574F' }, - { key: 'days', name: '纪念日', big: '6 天后', lines: ['结婚周年'], color: '#B4633C' }, - { key: 'ledger', name: '财务', big: '¥86.4 万', lines: ['3 本账（净资产）'], color: '#5E7A3C' }, - { key: 'books', name: '读书', big: '2 本在读', lines: ['31 本读完 · 48 条笔记'], color: '#6B5B95' }, - { key: 'notes', name: '笔记', big: '63 条', lines: ['最近：阳台改造清单'], color: '#7A6A4F' } -]; +/* ============================================================ + * 🔴 v54（用户 2026-10-16）—— 首页的演示常量**全部删掉**： + * `FB_DEMO_KIN`（我的家人）/ `FB_DEMO_MARKS`（寒露·重阳节·儿子生日）/ + * `FB_DEMO_WEATHER` / `FB_DEMO_WEEK_STAT` / `FB_DEMO_MODULE_CARDS`。 + * + * 用户原话：「里面的数据好像有些不符，比如**寒露、重阳节、儿子的生日**， + * 这些都是**乱写的**，要用**真实数据**填写一下。」 + * —— 那三个字面值就是 `FB_DEMO_MARKS`，它一直显示给真实用户看， + * 因为 `/api/v1/home` 当时**根本没有**农历/标记/天气/统计这几样字段。 + * + * ⇒ 服务端已补齐（见 `ApiHandler::home()`），端上全部改接真实数据。 + * ⚠️ **不要再往这个文件加首页的演示常量** —— 首页现在没有任何"占位"， + * 接口没给就不画那一块（这比画一个假的好）。 + * ============================================================ */ // ============================================================ // 名册 // ============================================================ export const FB_DEMO_ROSTER: FbRosterItem[] = [ - { id: 1, name: '杨永全', kinship: '我', group: '本家', tags: ['管理员'], avatarColor: '#A84A28', roster: 'member', birthday: '03-12', isAdmin: true }, - { id: 2, name: '李慧', kinship: '配偶', group: '本家', tags: [], avatarColor: '#9A5C7A', roster: 'member', birthday: '07-08', isAdmin: false }, - { id: 3, name: '杨小满', kinship: '儿子', group: '本家', tags: ['学生'], avatarColor: '#4A7C82', roster: 'member', birthday: '10-18', isAdmin: false }, - { id: 4, name: '杨小禾', kinship: '女儿', group: '本家', tags: ['学生'], avatarColor: '#6B5B95', roster: 'member', birthday: '01-04', isAdmin: false }, - { id: 5, name: '杨建国', kinship: '父亲', group: '长辈', tags: ['退休'], avatarColor: '#8A6B4B', roster: 'member', birthday: '05-21', isAdmin: false }, - { id: 6, name: '王秀兰', kinship: '母亲', group: '长辈', tags: [], avatarColor: '#B0763A', roster: 'member', birthday: '11-30', isAdmin: false }, - { id: 7, name: '杨永强', kinship: '弟弟', group: '本家', tags: [], avatarColor: '#3F7D5A', roster: 'member', birthday: '08-15', isAdmin: false }, - { id: 8, name: '李国栋', kinship: '岳父', group: '姻亲', tags: [], avatarColor: '#5566A8', roster: 'member', birthday: '02-26', isAdmin: false }, - { id: 9, name: '陈静', kinship: '岳母', group: '姻亲', tags: [], avatarColor: '#A8574F', roster: 'member', birthday: '09-09', isAdmin: false }, - { id: 10, name: '张伟', kinship: '朋友', group: '亲友', tags: ['同事'], avatarColor: '#5E7A3C', roster: 'friend', birthday: '06-14', isAdmin: false }, - { id: 11, name: '刘敏', kinship: '朋友', group: '亲友', tags: ['同学'], avatarColor: '#7A6A4F', roster: 'friend', birthday: '12-02', isAdmin: false }, - { id: 12, name: '赵鹏', kinship: '朋友', group: '亲友', tags: ['邻居'], avatarColor: '#3D6B8E', roster: 'friend', birthday: '04-17', isAdmin: false } + { id: 1, name: '杨永全', kinship: '我', group: '本家', tags: ['管理员'], avatarColor: '#A84A28', roster: 'member', birthday: '03-12', avatar: '', phone: '', initials: 'x', isAdmin: true, phones: [] }, + { id: 2, name: '李慧', kinship: '配偶', group: '本家', tags: [], avatarColor: '#9A5C7A', roster: 'member', birthday: '07-08', avatar: '', phone: '', initials: 'x', isAdmin: false, phones: [] }, + { id: 3, name: '杨小满', kinship: '儿子', group: '本家', tags: ['学生'], avatarColor: '#4A7C82', roster: 'member', birthday: '10-18', avatar: '', phone: '', initials: 'x', isAdmin: false, phones: [] }, + { id: 4, name: '杨小禾', kinship: '女儿', group: '本家', tags: ['学生'], avatarColor: '#6B5B95', roster: 'member', birthday: '01-04', avatar: '', phone: '', initials: 'x', isAdmin: false, phones: [] }, + { id: 5, name: '杨建国', kinship: '父亲', group: '长辈', tags: ['退休'], avatarColor: '#8A6B4B', roster: 'member', birthday: '05-21', avatar: '', phone: '', initials: 'x', isAdmin: false, phones: [] }, + { id: 6, name: '王秀兰', kinship: '母亲', group: '长辈', tags: [], avatarColor: '#B0763A', roster: 'member', birthday: '11-30', avatar: '', phone: '', initials: 'x', isAdmin: false, phones: [] }, + { id: 7, name: '杨永强', kinship: '弟弟', group: '本家', tags: [], avatarColor: '#3F7D5A', roster: 'member', birthday: '08-15', avatar: '', phone: '', initials: 'x', isAdmin: false, phones: [] }, + { id: 8, name: '李国栋', kinship: '岳父', group: '姻亲', tags: [], avatarColor: '#5566A8', roster: 'member', birthday: '02-26', avatar: '', phone: '', initials: 'x', isAdmin: false, phones: [] }, + { id: 9, name: '陈静', kinship: '岳母', group: '姻亲', tags: [], avatarColor: '#A8574F', roster: 'member', birthday: '09-09', avatar: '', phone: '', initials: 'x', isAdmin: false, phones: [] }, + { id: 10, name: '张伟', kinship: '朋友', group: '亲友', tags: ['同事'], avatarColor: '#5E7A3C', roster: 'friend', birthday: '06-14', avatar: '', phone: '', initials: 'x', isAdmin: false, phones: [] }, + { id: 11, name: '刘敏', kinship: '朋友', group: '亲友', tags: ['同学'], avatarColor: '#7A6A4F', roster: 'friend', birthday: '12-02', avatar: '', phone: '', initials: 'x', isAdmin: false, phones: [] }, + { id: 12, name: '赵鹏', kinship: '朋友', group: '亲友', tags: ['邻居'], avatarColor: '#3D6B8E', roster: 'friend', birthday: '04-17', avatar: '', phone: '', initials: 'x', isAdmin: false, phones: [] }, ]; /** 家谱连线（父母 / 配偶 / 子女） */ @@ -166,17 +139,17 @@ export const FB_DEMO_CAL_BOOKS: FbCalBook[] = [ ]; export const FB_DEMO_EVENTS_TODAY: FbCalEvent[] = [ - { id: 1, title: '儿子数学兴趣班', date: '2026-10-11', time: '09:00', calName: '孩子的课表', color: '#4A7C82', allDay: false, place: '小区活动中心' }, - { id: 2, title: '家庭大扫除', date: '2026-10-11', time: '10:30', calName: '家庭日程', color: '#B0763A', allDay: false, place: '家' }, - { id: 3, title: '晚上看电影', date: '2026-10-11', time: '19:30', calName: '观影', color: '#7A4E8C', allDay: false, place: '家里' }, - { id: 4, title: '妈妈体检预约', date: '2026-10-11', time: '', calName: '家庭日程', color: '#B0763A', allDay: true, place: '市立医院' } + { id: 1, title: '儿子数学兴趣班', date: '2026-10-11', time: '09:00', calName: '孩子的课表', color: '#4A7C82', allDay: false, place: '小区活动中心', calId: 0, endTime: '', note: '', kind: 'custom' }, + { id: 2, title: '家庭大扫除', date: '2026-10-11', time: '10:30', calName: '家庭日程', color: '#B0763A', allDay: false, place: '家', calId: 0, endTime: '', note: '', kind: 'custom' }, + { id: 3, title: '晚上看电影', date: '2026-10-11', time: '19:30', calName: '观影', color: '#7A4E8C', allDay: false, place: '家里', calId: 0, endTime: '', note: '', kind: 'custom' }, + { id: 4, title: '妈妈体检预约', date: '2026-10-11', time: '', calName: '家庭日程', color: '#B0763A', allDay: true, place: '市立医院', calId: 0, endTime: '', note: '', kind: 'custom' }, ]; export const FB_DEMO_EVENTS_SOON: FbCalEvent[] = [ - { id: 11, title: '女儿钢琴课', date: '10-12', time: '16:00', calName: '孩子的课表', color: '#4A7C82', allDay: false, place: '琴行' }, - { id: 12, title: '结婚周年', date: '10-17', time: '', calName: '家庭日程', color: '#B0763A', allDay: true, place: '' }, - { id: 13, title: '周末露营', date: '10-18', time: '08:00', calName: '家庭日程', color: '#B0763A', allDay: false, place: '仰口' }, - { id: 14, title: '家长会', date: '10-20', time: '18:30', calName: '孩子的课表', color: '#4A7C82', allDay: false, place: '学校' } + { id: 11, title: '女儿钢琴课', date: '10-12', time: '16:00', calName: '孩子的课表', color: '#4A7C82', allDay: false, place: '琴行', calId: 0, endTime: '', note: '', kind: 'custom' }, + { id: 12, title: '结婚周年', date: '10-17', time: '', calName: '家庭日程', color: '#B0763A', allDay: true, place: '', calId: 0, endTime: '', note: '', kind: 'custom' }, + { id: 13, title: '周末露营', date: '10-18', time: '08:00', calName: '家庭日程', color: '#B0763A', allDay: false, place: '仰口', calId: 0, endTime: '', note: '', kind: 'custom' }, + { id: 14, title: '家长会', date: '10-20', time: '18:30', calName: '孩子的课表', color: '#4A7C82', allDay: false, place: '学校', calId: 0, endTime: '', note: '', kind: 'custom' }, ]; // ============================================================ @@ -196,17 +169,18 @@ export const FB_DEMO_TASKS: FbTaskItem[] = [ /** 任务看板（tasks/settings） */ export const FB_DEMO_TASK_BOARDS: string[] = ['家务', '家人健康', '孩子', '车与房']; -// ============================================================ -// 纪念日 -// ============================================================ - -export const FB_DEMO_ANNIVERSARIES: FbAnniversaryItem[] = [ - { id: 1, title: '结婚周年', date: '10-17', daysLeft: 6, kind: 'anniversary', people: [fbChip(1, '我', '我', '#A84A28'), fbChip(2, '爱人', '配偶', '#9A5C7A')], yearly: true }, - { id: 2, title: '儿子生日', date: '10-18', daysLeft: 7, kind: 'birthday', people: [fbChip(3, '儿子', '儿子', '#4A7C82')], yearly: true }, - { id: 3, title: '重阳节', date: '10-29', daysLeft: 18, kind: 'holiday', people: [], yearly: true }, - { id: 4, title: '爸爸生日', date: '05-21', daysLeft: 222, kind: 'birthday', people: [fbChip(5, '爸爸', '父亲', '#8A6B4B')], yearly: true }, - { id: 5, title: '搬家纪念日', date: '2019-11-08', daysLeft: 28, kind: 'anniversary', people: [], yearly: true } -]; +/* ============================================================ + * 🔴 v54（用户 2026-10-16）—— `FB_DEMO_ANNIVERSARIES` 已删除。 + * + * 用户原话：「里面的数据好像有些不符，比如**寒露、重阳节、儿子的生日**， + * 这些都是**乱写的**，要用**真实数据**填写一下。」 + * （"寒露"来自已删的 `FB_DEMO_MARKS`，"重阳节 / 儿子生日"来自这里。） + * + * 它**早已无人引用**（纪念日页接的是 `/api/v1/days`）， + * 只是文件里还留着 —— 留着就有被"顺手拿来当占位"的风险 + * （这次首页的假数据就是这么来的）。**没有引用就删掉**， + * 比"留着备用"安全。 + * ============================================================ */ // ============================================================ // 财务 diff --git a/entry/src/main/ets/model/FbSettingsMenus.ets b/entry/src/main/ets/model/FbSettingsMenus.ets new file mode 100644 index 0000000..bf1c8a6 --- /dev/null +++ b/entry/src/main/ets/model/FbSettingsMenus.ets @@ -0,0 +1,61 @@ +/** + * 家书 FamilyBook · 各模块的「设置菜单」条目（鸿蒙端） + * + * 🔴 用户 2026-10-16：「所有页面的设置按钮全部都改成和网页版一致， + * 就是**三个横线**那种设置按钮。」 + * + * 这份表**逐条对齐网页版** `templates/<模块>/_settings_menu.php` 里的菜单项 + * （那是权威来源；别自己发明条目）。 + * + * ⚠️ `action` 为**空串** = 该功能在鸿蒙端**还没做**： + * 界面会画成灰色 + 「暂未开放」，点它**不响应** + * （比"点了没反应"好 —— 后者用户以为是卡了）。 + * ⚠️ 补上某个功能时，只要把对应 `action` 填上、并在页面里处理它即可； + * 表本身不用改结构。 + */ + +import { FbSettingItem } from '../components/FbModuleSettingsSheet'; + +/** 观影（对应网页版 templates/movies/_settings_menu.php） */ +export const FB_SET_MOVIES: FbSettingItem[] = [ + { icon: 'movies', label: '影院管理', hint: '看过的影院，按名字排', action: 'cinema' }, + { icon: 'search', label: '高级搜索', hint: '按年份 / 类型 / 评分筛', action: '' }, + { icon: 'chart', label: '统计', hint: '每年看了多少、类型分布', action: '' }, + { icon: 'notes', label: '年度报告', hint: '一句话总结这一年', action: '' } +]; + +/** 读书（templates/books/_settings_menu.php） */ +export const FB_SET_BOOKS: FbSettingItem[] = [ + { icon: 'chart', label: '读书统计', hint: '每年读了多少、多少页', action: '' }, + { icon: 'plus', label: '导入读书笔记', hint: '从笔记文件批量导入', action: '' }, + { icon: 'share', label: '微信读书导入', hint: '同步微信读书的书单', action: '' } +]; + +/** 纪念日（templates/days/_settings_menu.php） */ +export const FB_SET_DAYS: FbSettingItem[] = [ + { icon: 'filter', label: '纪念日分类', hint: '全家共用一套分类', action: '' } +]; + +/** 账本（templates/ledger/_settings_menu.php） */ +export const FB_SET_LEDGER: FbSettingItem[] = [ + { icon: 'share', label: '共享给谁', hint: '对方就能记能看', action: '' }, + { icon: 'edit', label: '账本名字', hint: '改这本账本的名字', action: '' } +]; + +/** 任务（templates/tasks/_settings_menu.php） */ +export const FB_SET_TASKS: FbSettingItem[] = [ + { icon: 'tasks', label: '分类与看板', hint: '管分类、管看板', action: '' }, + { icon: 'check', label: '已完成', hint: '看已经完成的任务', action: '' } +]; + +/** 旅程（templates/trips/_settings_menu.php） */ +export const FB_SET_TRIPS: FbSettingItem[] = [ + { icon: 'nav', label: '车辆管理', hint: '自驾时的车与油耗', action: '' }, + { icon: 'trips', label: '出行方式', hint: '飞机 / 高铁 / 自驾…', action: '' }, + { icon: 'dot', label: '节点类型', hint: '行程节点的类型', action: '' } +]; + +/** 资源（网页版没有独立菜单；这里只放已有的入口） */ +export const FB_SET_RESOURCES: FbSettingItem[] = [ + { icon: 'filter', label: '格式筛选', hint: '只看某类资源', action: '' } +]; \ No newline at end of file diff --git a/entry/src/main/ets/model/Types.ets b/entry/src/main/ets/model/Types.ets index fc197ec..8776af6 100644 --- a/entry/src/main/ets/model/Types.ets +++ b/entry/src/main/ets/model/Types.ets @@ -63,24 +63,75 @@ export interface FbTodayMark { export interface FbWeather { /** 地点名 */ place: string; - /** 温度（摄氏度，整数） */ - temp: number; + /** + * 温度（**带单位的字符串**，如 `21°C`）。 + * + * 🔴 v54：原来是 `number`，但服务端 `weatherOut()` 给的是 `'21°C'`（带单位）—— + * 端上按数字解析会得到 NaN。改成字符串**原样承接**， + * 而不是"端上再拼一次单位"（那样单位口径会在两处各写一遍）。 + */ + temp: string; /** 天气描述，如「晴」「多云」 */ text: string; - /** 风向风力，如「东南风 3 级」 */ + /** + * 天气**符号**（服务端给的彩色图标字符：☀ / ⛅ / ☂ / ❄ / ⚡ / ≋）。 + * ⚠️ 用字符而不是端上图标资源：服务端已经按 WMO 码分好档了 + * （晴=暖黄、雨=蓝…），端上再映射一遍必然与网页版飘。 + */ + icon: string; + /** 色调档位：sunny|cloud|rain|snow|storm|fog（决定图标用什么颜色） */ + tone: string; + /** 风：`东南风 12 km/h`（可为空串） */ wind: string; + /** 风向（`东南风`，可为空串） */ + wdir: string; + /** 今日最高 / 最低（`28°`，可为空串） */ + tmax: string; + tmin: string; } -/** 首页统计块（近七天） */ -export interface FbWeekStat { - /** 未来七天日程条数 */ - events: number; - /** 待办件数 */ - todos: number; - /** 逾期件数 */ +/** + * 首页概述卡底部的四个数字（与网页版 `hb-stats` 同源）。 + * + * 🔴 v54：原来是「未来七天 / 待办 / 逾期」三格，其中第一格是 + * "今天起往后 7 天的日程条数"。用户 2026-10-16 说 + * 「下面……**未来7天**……这几个就是去掉了，不要了。」 + * ⇒ 换成与**网页版概述卡一致**的四格（网页版本来也是这四个）： + * 条日程（今天）/ 件在做 / 件待办 / 件逾期。 + * ⚠️ 四个数字必须与**下面那块任务列表同源** —— v24 第 25 批用户报过 + * 「为什么显示 0 条待办呢？任务看板明明有一个进行中的任务啊」， + * 根因就是"数字与列表两个口径"。服务端为此直接数 `$tasks` 那个数组。 + */ +export interface FbStat { + /** 今天的日程条数 */ + todayEvents: number; + /** 进行中的任务数 */ + doing: number; + /** 待办的任务数 */ + todo: number; + /** 已逾期的任务数 */ overdue: number; } +/** + * 首页「日子标记」：今天是什么节气 / 节日 / 纪念日 / 谁的生日。 + * + * 🔴 v54（用户 2026-10-16）：「寒露、重阳节、儿子的生日，这些都是**乱写的**， + * 要用**真实数据**填写一下。」 + * ⇒ 标记改由服务端 `Home::todayMarks()` 给（与网页版首页**同一份实现**： + * 法定节假日 / 二十四节气 / 传统节日 / 纪念日 / 生日）。 + */ +export interface FbMark { + /** 显示词：`寒露` / `国庆节` / `妈妈生日` */ + word: string; + /** + * 类别（决定配色，与网页版 `.hb-mark.is-*` 一一对应）： + * `holiday` 法定节假日 / `term` 节气 / `festival` 传统节日 / + * `anniv` 纪念日 / `birthday` 生日 + */ + kind: string; +} + /** 首页「我的家人」里的一个人（带称谓与称呼） */ export interface FbKinChip { id: number; @@ -94,6 +145,32 @@ export interface FbKinChip { isAdmin: boolean; } +/** + * 首页「往年的今天」里的一条。 + * + * 🔴 v54b（用户 2026-10-17）：「近期任务的下面，应该加上**往年的今天**， + * 跟电脑端一样，你看看那个是什么逻辑。」 + * 电脑端的逻辑在 `App\Home::memories()`（原来的 `index.php::home_memories()`）： + * · **只认同一天**（月与日都相同）—— 用户 2026-10-02 明确过 + * 「"10 月 2 日"给我看"去年 10 月 8 日去看了场电影"……不是同一天的事」， + * 所以**不退回同月**； + * · 两类来源：看过的电影（`events.kind='movie'`）、 + * 走过的**实际行程**节点（`trip_nodes.stage='actual'`，计划中的不算）； + * · 合并按时间倒序、最多 6 条。 + */ +export interface FbMemoryItem { + /** 源记录 id（movie 是 events.id，trip_node 是 trip_nodes.id） */ + id: number; + /** 标题（旅程节点已在服务端拼成「旅程名 · 节点名」） */ + title: string; + /** `YYYY-MM-DD HH:MM:SS` */ + startsAt: string; + /** `movie` | `trip_node`（决定图标与圆点色） */ + kind: string; + /** 距今几年（服务端算好，`2026` 年的记录 `years_ago=2`） */ + yearsAgo: number; +} + /** 首页「模块卡片」—— 一块一块的入口，带一句关键数字 */ export interface FbModuleCard { /** 模块 key（点击后切到哪个模块） */ @@ -108,6 +185,45 @@ export interface FbModuleCard { color: string; } +/** + * 首页数据（`GET /api/v1/home`）。 + * + * 🔴 v54（用户 2026-10-16）—— 服务端**补齐**了网页版首页有的那几样。 + * 在此之前这里写着"天气、纪念日、周统计是本地算或另拉"，而端上其实是拿 + * `DemoData` 的演示常量顶着 ⇒ 用户看到「寒露 / 重阳节 / 儿子生日」这种假数据。 + * ⇒ 现在起这些全部**由接口给**，端上不再有演示常量。 + * ⚠️ 不要改回"端上自己算农历/节气"：那些表在服务端是一份权威实现， + * 两端各算一遍早晚会出现"网页说今天小寒、手机说昨天"。 + */ +export interface FbHomeData { + /** 「晚上好，今天有 49 件事，慢慢来。」 */ + greeting: string; + /** 'YYYY-MM-DD' */ + date: string; + /** 「星期一」 */ + weekday: string; + /** 抬头日期 `10 月 16 日`（服务端 `today_label`，与网页版同格式） */ + todayLabel: string; + /** 农历短写 `八月廿二`（空 = 算不出） */ + lunarShort: string; + /** 农历全称（含年份，详情/悬停用） */ + lunarLine: string; + /** 日子标记：节气 / 节日 / 纪念日 / 生日（空数组 = 今天没有特别的） */ + marks: FbMark[]; + /** 天气（`null` = 没配地点或取不到 ⇒ **整块不画**，与网页版一致） */ + weather: FbWeather | null; + /** 概述卡底部的四个数字（与网页版 `hb-stats` 同源） */ + stat: FbStat; + /** 往年的今天（与电脑端 `Home::memories()` 同一个逻辑） */ + memories: FbMemoryItem[]; + /** 今天的日程（服务端已排好：全天在前、其余按时间） */ + todayEvents: FbCalEvent[]; + /** 近期任务（**进行中在前、待办在后**，用户 2026-10-16 要求含待办） */ + tasks: FbTaskItem[]; + /** 未读通知数 */ + unread: number; +} + // ============================================================ // 名册 / 家谱 // ============================================================ @@ -124,6 +240,25 @@ export interface FbRosterItem { tags: string[]; /** 头像色 */ avatarColor: string; + /** + * 头像图（服务端的 OSS 相对路径，如 `avatars/xxx.jpg`；空 = 这个人没传过头像）。 + * + * ⚠️ 实测 800 人里只有 **19 人有图** ⇒ 绝大多数要**回落到色块字** + * （`FbAvatar` 的默认行为）。只有当它非空时才用 `fbImageUrl()` 显示真图。 + */ + avatar: string; + /** 手机号明文（空 = 没录）。= `phones[0]` */ + phone: string; + /** + * **全部电话**（主号在前）。 + * + * 🔴 用户 2026-10-15：「一个人可能有多个电话号码……应该拨打最近的那个电话。」 + * ⇒ 端上按"**有主号打主号**"取 `phones[0]`； + * 一个都没有时点行改为"打开详情"（点了没反应比什么都让人困惑）。 + */ + phones: string[]; + /** 姓名首字母（拼音，如「杨永全」→ yyq）；搜索用 */ + initials: string; /** 归属：member（家里的人）/ friend（亲友通讯录） */ roster: string; /** 生日（'MM-DD' 或 ''） */ @@ -132,6 +267,38 @@ export interface FbRosterItem { isAdmin: boolean; } +/** + * 家谱里的一个人（`GET /api/v1/kin`）。 + * + * ⚠️ 与 `FbRosterItem`（名册平铺名单）**不是一个东西**： + * 名册是"我名册里的人"（可能上千），家谱是"**以我为中心的关系网**" + * （只含上下两代，十来人），关键是带**代数**与**亲属边**。 + */ +export interface FbKinPerson { + id: number; + name: string; + /** 「我怎么叫他」（昵称优先） */ + shown: string; + /** 「我该怎么称呼他」（服务端按图谱推导，如"岳父""外甥女"） */ + label: string; + /** 代数：0 = 我，负 = 长辈，正 = 晚辈 */ + gen: number; + avatarColor: string; + /** 户（夫妻单元）号 */ + unit: number; + parents: number[]; + children: number[]; + spouses: number[]; + siblings: number[]; +} + +/** 家谱整体 */ +export interface FbKinGraph { + meId: number; + people: FbKinPerson[]; + total: number; +} + /** 家谱连线（kin/relate：父母 / 配偶 / 子女） */ export interface FbKinRelation { id: number; @@ -228,15 +395,34 @@ export interface FbTripNode { // 日程（calendar） // ============================================================ -/** 一条日程（calendar/index.php 的格子/时间轴条目） */ +/** + * 一条日程（`/api/v1/calendar` 的条目；含节日/农历/纪念日等**所有**日历条目）。 + * + * 🔴 v52（用户 2026-10-15 要日程照 SyncCalendar 做）补齐了几个原本漏掉的字段 —— + * 实测接口**给了**、端上却没解析，于是"新建/编辑日程"没有 id 可用： + * · `calId` —— **所在日历本的真实 id**。缺了它，新建时就没法指定 + * 往哪本写（旧代码甚至从条目里**臆造** id，见 `FbCalRepo.fetchBooks`）。 + * · `endTime` —— 结束时间（时间轴上要画时长、详情要显示区间）。 + * · `kind` —— 条目类型（`custom`/`anniv`/`lunar`/`holiday`…）： + * 只有 `custom` 那种才是**用户自己的日程**、可点开可编辑； + * 农历/节气/节假日是**系统衍生条目**，点开也不该给"编辑"。 + * · `note` —— 备注。 + */ export interface FbCalEvent { id: number; + /** + * 所在日历本的**真实 id**（服务端条目里的 `cal`）。 + * ⚠️ 0 表示"没有对应的可写日历本"（如纪念日、农历这类衍生条目）。 + */ + calId: number; /** 标题 */ title: string; /** 日期 'YYYY-MM-DD' */ date: string; - /** 时间 'HH:mm'（全天事件为空串） */ + /** 开始时间 'HH:mm'（全天事件为空串） */ time: string; + /** 结束时间 'HH:mm'（空 = 没设） */ + endTime: string; /** 所属日历本名 */ calName: string; /** 日历本色标 */ @@ -245,6 +431,15 @@ export interface FbCalEvent { allDay: boolean; /** 地点（可为空） */ place: string; + /** 备注（可为空） */ + note: string; + /** 条目类型：`custom` = 用户自己的日程；其余是衍生条目（农历/节气/节假日/纪念日…） */ + kind: string; +} + +/** 这个条目能不能当"用户日程"来编辑（只有 custom 才算） */ +export function isEditableEvent(e: FbCalEvent): boolean { + return e.kind === 'custom' && e.id > 0 && e.calId > 0; } /** 日历本（calendar/calendars） */ @@ -338,6 +533,23 @@ export interface FbLedgerEntry { updatedAt: string; } +/** + * 一本账的明细（`GET /api/v1/ledger//entries`）。 + * + * ⚠️ **净资产只在明细接口里**（概览 `/ledger` 不返回） + * ⇒ 账本页面必须先拉概览拿到 id、再拉明细才有汇总。 + * 实测：`summary: {asset, debt, net, by_kind, count}`。 + */ +export interface FbLedgerDetail { + entries: FbLedgerEntry[]; + /** 净资产（分）= 资产 - 负债 */ + netCent: number; + /** 总资产（分） */ + assetCent: number; + /** 总负债（分） */ + debtCent: number; +} + // ============================================================ // 资源（resources） // ============================================================ diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 64be443..e95c17d 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -18,7 +18,8 @@ import { FbColors, FbMetric } from '../common/Theme'; import { FbAppState, FB_WIDE_BREAKPOINT, fbAppState } from '../common/Store'; import { FbDrawerShell } from '../components/Drawer'; import { FbTopBar } from '../components/TopBar'; -import { FbFloatDock } from '../components/FloatDock'; +import { FB_GRIP, fbStartGripWatch } from '../common/FbGrip'; +import { FbFloatDock, FB_DOCK_HIDE_Y } from '../components/FloatDock'; import { FbHomePage } from './home/FbHomePage'; import { FbMoviesPage } from './movies/FbMoviesPage'; import { FbTripsPage } from './trips/FbTripsPage'; @@ -31,6 +32,25 @@ import { FbLedgerPage } from './ledger/FbLedgerPage'; import { FbBooksPage } from './books/FbBooksPage'; import { FbNotesPage, FbNotificationsPage } from './misc/FbMiscPages'; import { FbSettingsPage } from './settings/FbSettingsPage'; +import { FbLoginPage } from './login/FbLoginPage'; +import { FB_TOKEN_STORE } from '../data/FbTokenStore'; +import { FB_SERVER_STORE } from '../data/FbServerStore'; +import { FB_DEVICE_STORE } from '../data/FbDeviceStore'; +import { FB_SESSION, SESSION_NEED_LOGIN, SESSION_OFFLINE } from '../data/FbSession'; +import { fbOnUnauthorized } from '../data/FbHttp'; +import { common } from '@kit.AbilityKit'; + +/** + * 小睡一会儿（毫秒）。 + * + * ⚠️ ArkTS 里没有 `setTimeout` 的 Promise 版，启动检查要"轮询等就绪" + * 就需要这样一个工具。用它而不是忙等（忙等会占满 CPU）。 + */ +function sleep(ms: number): Promise { + return new Promise((resolve: () => void): void => { + setTimeout(resolve, ms); + }); +} @Entry @ComponentV2 @@ -38,8 +58,255 @@ struct Index { /** 全局状态（抽屉 / 当前模块 / 宽窄屏） */ @Local app: FbAppState = fbAppState(); + /** + * 是否已经"进到应用里"。 + * + * 🔴 三种状态，必须分开（别用两个布尔硬凑）： + * · `checking` —— 启动时正在看"有没有令牌"（很短，但**必须有**， + * 否则会先闪一下登录页再跳进主界面）； + * · 有令牌 / 用户选了"稍后再说" ⇒ `entered = true` ⇒ 显示主界面； + * · 没令牌且用户没跳过 ⇒ 显示登录页。 + */ + @Local entered: boolean = false; + /** 启动检查是否已完成（false = 还在看令牌，先显示空白/logo） */ + @Local bootChecked: boolean = false; + aboutToAppear(): void { this.measureScreen(); + this.readStatusBar(); + // 🔴 「质感握姿」（用户 2026-10-16 第 4 条）：左手握→抽屉从左出、右手握→从右出。 + // ⇒ 它决定**顶栏家书图标贴哪边**（见 TopBar）与抽屉从哪侧滑出（见 Drawer）。 + // ⚠️ 能力不支持（API<20）时会自己 catch 住，不影响启动。 + fbStartGripWatch(); + /* 🔴 v57：注册「令牌失效」回调。 + 任何业务请求收到 401 → 网络层直接调这里 → 清本地令牌 + 回登录页。 + ⚠️ 只注册一次（重复注册会覆盖成新的 this，无害但没必要）。 */ + fbOnUnauthorized((): void => { + this.lockOut(); + }); + this.bootCheck(); + } + + /** 离开页面时注销握姿监听（⚠️ 不注销会在重建后叠加回调） */ + aboutToDisappear(): void { + FB_GRIP.stop(); + } + + /** + * 读状态栏高度（由 `EntryAbility` 在全屏生效后量好、放进 AppStorage）。 + * + * 🔴 为什么要读它（用户 2026-10-13 要"全沉浸"）： + * 打开 `setWindowLayoutFullScreen(true)` 之后窗口**不再为状态栏让位**， + * 内容会真的画到状态栏底下。各页顶栏必须自己往下让出这一段， + * 否则首屏"家书"标题会被时间/信号图标压住。 + * ⚠️ 存进 `app.statusBarH` 而不是各页自己读 AppStorage： + * 它是 `@Trace` 的，量出来（异步）之后各页会**自动重排**； + * 各页自己读一次的话，量完不会通知它们刷新。 + * ⚠️ 量不到（=0）也能用：内容仍从最顶上开始画，只是标题贴上去了 —— + * 比猜一个数字把标题推到屏幕中间好。所以要**轮询等**一小会儿。 + */ + private async readStatusBar(): Promise { + for (let i = 0; i < 20; i++) { + const h: number = AppStorage.get('fbStatusBarH') ?? -1; + if (h >= 0) { + this.app.statusBarH = h; + return; + } + await sleep(50); + } + this.app.statusBarH = 0; + } + + /** + * 启动检查：有令牌就直接进主界面，否则显示登录页。 + * + * ⚠️ 令牌与**服务器地址**的读取都是**同步**的（见两个 store 的说明）， + * 所以这里其实很快；但要 `await` 一下它们的**预加载**， + * 否则会误判成"没登录 / 没配地址"（EntryAbility 里是异步预加载的）。 + * ⇒ 用一个小轮询等它们就绪（最多约 1 秒），避免"有令牌却显示登录页" + * 以及"明明配过地址却让人重填"。 + */ + private async bootCheck(): Promise { + for (let i = 0; i < 40; i++) { + /* 🔴 四个都要就绪： + · 令牌 —— 有没有登录过（决定要不要验）； + · 地址 —— 打哪个服务器（v55 起地址是持久化配置）； + · 设备身份 —— 登录/校验请求要带 device_id（v57）； + · 会话时间 —— 离线多久了（v57，离线超 24h 判锁）。 + 只等其中一部分，会出现"有令牌却显示登录页"或"没 device_id 就去登录" + 这种看起来莫名其妙的状态。 */ + if (FB_TOKEN_STORE.isReady() && FB_SERVER_STORE.isReady() + && FB_DEVICE_STORE.isReady() && FB_SESSION.isReady()) { + break; + } + await sleep(50); + } + + if (!FB_TOKEN_STORE.has()) { + // 从没登录过（或已退出登录）：停在登录页。 + // ⚠️ 首次使用允许"先不登录"（本地优先），但**被踢/退出后不允许** —— + // 那会把"v57 的安全策略"变成一个可绕过的按钮（见 build 里的 allowSkip）。 + this.entered = false; + this.bootChecked = true; + return; + } + + /* 🔴 v57（用户 2026-10-17）：「每过 24 小时，我们就要请求一下服务器， + 去验证一下这个 Token 是不是还是有效的」＋「应用一打开就发现 Token 失效」。 + ⇒ 有令牌就**每次启动都验一次**（不是每 24h 才验一次）。 + 只有"打开时联网"才可能发现被踢，这一步就是那个时机。 */ + const ctx: common.Context | undefined = this.abilityCtx(); + if (ctx === undefined) { + // 拿不到上下文（极罕见）：不要把用户卡死，按本地数据先用着 + this.entered = true; + this.bootChecked = true; + return; + } + + const r = await FB_SESSION.check(ctx); + if (r.state === SESSION_NEED_LOGIN) { + this.app.lockReason = r.reason; + this.app.loginStartStep = 2; + this.app.needLogin = true; + this.app.offlineLocked = false; + this.entered = false; + } else if (r.state === SESSION_OFFLINE) { + /* 离线超过 24 小时：**锁界面但不删令牌**。 + 联网校验通过后自动恢复 —— 用户不用重新输密码（这正是他要的 + "一直联网就不用每天登录"）。 */ + this.app.lockReason = r.reason; + this.app.offlineLocked = true; + this.app.needLogin = false; + this.entered = false; + } else { + this.app.lockReason = ''; + this.app.needLogin = false; + this.app.offlineLocked = false; + this.entered = true; + } + this.bootChecked = true; + } + + /** 取 Ability 上下文（失败返回 undefined，不抛） */ + private abilityCtx(): common.Context | undefined { + try { + return this.getUIContext().getHostContext(); + } catch (err) { + hilog.warn(0x0000, 'FamilyBook', '取 Ability Context 失败：%{public}s', JSON.stringify(err)); + return undefined; + } + } + + /** + * v57：离线超过 24 小时的锁屏。 + * + * 用户原话：「离线超过 24 个小时就硬退出。」 + * + * ⚠️ 这里**不做成登录页**：用户只是没联网，不该被要求重输密码。 + * 联网后校验通过会自动回主界面（见 `retrySession`）； + * 只有当服务端明确回 401（= 真被踢了）才转去登录页。 + */ + @Builder + offlineLockView() { + Column() { + Blank() + Column() { + Text('需要联网确认') + .fontSize(20) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Text(this.app.lockReason) + .fontSize(14) + .fontColor(FbColors.muted) + .textAlign(TextAlign.Center) + .lineHeight(21) + .margin({ top: 12 }) + Button('重新连接') + .fontSize(15) + .height(44) + .width(170) + .margin({ top: 26 }) + .onClick((): void => { + this.retrySession(); + }) + Text('数据还在。联网确认后自动恢复，不用重新登录。') + .fontSize(12) + .fontColor(FbColors.faint) + .textAlign(TextAlign.Center) + .lineHeight(18) + .margin({ top: 14 }) + } + .padding({ left: 32, right: 32 }) + Blank() + } + .width('100%') + .height('100%') + .backgroundColor(FbColors.paper) + } + + /** 离线锁屏上的「重新连接」：再验一次，通过就自动放行 */ + private async retrySession(): Promise { + const ctx: common.Context | undefined = this.abilityCtx(); + if (ctx === undefined) { + return; + } + const r = await FB_SESSION.check(ctx); + if (r.state === SESSION_NEED_LOGIN) { + // 联网之后服务端说"这枚令牌没了" → 这才是真的被踢，转登录页 + this.app.offlineLocked = false; + this.app.needLogin = true; + this.app.loginStartStep = 2; + this.app.lockReason = r.reason; + this.entered = false; + } else if (r.state === SESSION_OFFLINE) { + this.app.lockReason = r.reason; // 还是连不上，留在锁屏 + } else { + this.app.offlineLocked = false; + this.app.needLogin = false; + this.app.lockReason = ''; + this.entered = true; + } + } + /** + * 🔴 v57：令牌失效（任何请求 401）→ 立刻锁定回登录页。 + * + * 用户原话：「运行期间任何一个请求返回 401，立刻锁定跳登录页 —— + * 这是真正的兜底，因为同步/写入本来就在不断发请求。」 + * + * ⚠️ 由 `FbHttp` 的网络层统一回调（不是每个页面自己判）， + * 所以**漏不掉**；登录接口自己传了 `authProbe` 不会触发。 + */ + private lockOut(): void { + if (this.app.needLogin) { + return; // 已经在登录页了，别反复设状态（会让界面闪） + } + const ctx: common.Context | undefined = this.abilityCtx(); + if (ctx !== undefined) { + // ⚠️ 先清本地令牌（主防线：捡到手机的人拿不到它），再通知界面 + FB_TOKEN_STORE.clear(ctx).catch((err: BusinessError): void => { + hilog.warn(0x0000, 'FamilyBook', '清令牌失败：%{public}s', JSON.stringify(err)); + }); + FB_SESSION.clear(ctx).catch((err: BusinessError): void => { + hilog.warn(0x0000, 'FamilyBook', '清会话记录失败：%{public}s', JSON.stringify(err)); + }); + } + this.app.lockReason = '这台设备已经被退出登录，请重新登录'; + this.app.loginStartStep = 2; + this.app.needLogin = true; + this.app.offlineLocked = false; + this.entered = false; + } + + /** 登录成功：进主界面（会话信息已由登录页写进 `app.session`） */ + private onLoggedIn(): void { + this.app.session.loggedIn = true; + // 🔴 复位"要登录"的请求 —— 不复位的话，下一次渲染又会判回登录页（死循环） + this.app.needLogin = false; + this.app.loginStartStep = 0; + // v57：登录成功 = 会话刚校验过，两种锁都要撤掉 + this.app.lockReason = ''; + this.app.offlineLocked = false; + this.entered = true; } /** @@ -68,27 +335,97 @@ struct Index { // 🔴 用 Stack 而不是 Column：底部快捷栏要**浮在内容之上**（用户要求"不要固定在下边， // 要浮着"）。写在 Column 里它就是"占一行的固定底栏"（老样式）。 Stack({ alignContent: Alignment.Bottom }) { - Column() { - FbDrawerShell({ app: this.app }) { - this.mainArea() + // ---- 启动检查还没完：先给一块底色，别闪 ---- + if (!this.bootChecked) { + Column() + .width('100%') + .height('100%') + .backgroundColor(FbColors.paper) + } else if (this.app.offlineLocked) { + // ---- v57：离线超过 24 小时 —— 锁界面（**不清令牌**，联网即恢复）---- + this.offlineLockView() + } else if (!this.entered || this.app.needLogin) { + // ---- 未登录 / 被要求重新登录：登录页（**不显示抽屉/悬浮栏**）---- + // 🔴 v55：`needLogin` 是设置页「退出登录 / 更换服务器」置的位 —— + // 本应用没有路由栈，登录页只能靠这个状态位回到前台。 + FbLoginPage({ + // 传 app 只为让它拿到**状态栏高度**（全屏布局下登录页也要自己让位） + app: this.app, + // 从第几步开始（1=连地址一起换，2=只重登，0=自动） + startStep: this.app.loginStartStep, + /* 🔴 v57：只有"从没登录过"才允许「先不登录」。 + 被踢 / 主动退出后必须重新登录 —— 用户原话： + 「退到登录页面之后，里面所有的资源、所有的内容都是不允许看的。」 + 留着那个按钮就等于留了一扇后门（v58 上了加密才真正堵死）。 */ + allowSkip: this.app.lockReason === '', + onLoggedIn: (): void => { + this.onLoggedIn(); + }, + onSkip: (): void => { + // 「先不登录」：不登录也进主界面 —— 本地优先架构下， + // 没令牌照样能看已同步的数据。把用户堵在登录页是错的。 + // ⚠️ 必须同时复位 needLogin，否则又会被判回登录页。 + this.app.needLogin = false; + this.app.loginStartStep = 0; + this.entered = true; + } + }) + } else { + // ---- 主界面 ---- + Column() { + FbDrawerShell({ app: this.app }) { + this.mainArea() + } } - } - .width('100%') - .height('100%') + .width('100%') + .height('100%') - // 底部悬浮快捷栏（日程 / 名册 / 任务 / 笔记） - // ⚠️ 只在窄屏显示：宽屏时抽屉常驻，且屏幕宽，用不上这个快捷入口。 - // ⚠️ 抽屉展开时不显示 —— 那时用户正在抽屉里选模块，浮层再叠一个反而乱。 - if (!this.app.wideLayout && !this.app.drawerOpen) { - FbFloatDock({ app: this.app }) + // 底部悬浮快捷栏（日程 / 名册 / 任务 / 笔记） + // ⚠️ 只在窄屏显示：宽屏时抽屉常驻，且屏幕宽，用不上这个快捷入口。 + // ⚠️ 抽屉展开时不显示 —— 那时用户正在抽屉里选模块，浮层再叠一个反而乱。 + // 🔴 **浮层开着时也不显示**（用户 2026-10-15 实测的真 bug）： + // 悬浮栏在**比页面浮层更外层**的 Stack 里 ⇒ 层级更高。 + // 详情卡片底部的「编辑 / 关闭」（y≈2207-2331）与悬浮栏（y≈2240-2350） + // 在屏幕上重叠，点按钮被悬浮栏抢走 ⇒ **直接跳到日历页**。 + // ⇒ 用 `sheetOpen()` 让位（收起 + 不接收点击）。 + if (!this.app.wideLayout && !this.app.drawerOpen && !this.app.sheetOpen()) { + // ⚠️ 外面这层 Column 是**必需的**：Stack 里的子组件会按内容宽度收缩， + // 不给它一个 width('100%') 的宿主，`FbFloatDock` 内部的左右内缩就无处生效 + // （悬浮栏会缩成一小团靠在某一边）。 + Column() { + FbFloatDock({ app: this.app }) + } + .width('100%') + // 🔴 **随滚动收起 / 唤回**（用户 2026-10-13 要的 IT 之家那套）： + // 向上滚内容 ⇒ 向下平移出屏幕（连同透明度一起淡出）； + // 向下滚回看 ⇒ 平移回原位。 + // + // ⚠️ 用 `translate` 平移而不是 `visibility` 开关： + // 平移是**连续的**（有动画过程），看起来是"滑走"； + // 显隐是突变的，看着像"啪一下没了"。 + // ⚠️ 平移量取 `FB_DOCK_HIDE_Y`（= 栏高 + 下边距 + 余量）—— + // 必须**完全移出可视区**，否则底下会露出半截胶囊边。 + // 用导出的常量而不是写死数字：它和栏高/边距是同一个几何量， + // 写死两处必然漂移。 + .translate({ y: this.app.dockHidden ? FB_DOCK_HIDE_Y + 'vp' : '0vp' }) + .opacity(this.app.dockHidden ? 0 : 1) + // 位移动画：出入对称、约 220ms 是"跟手但不拖沓"的区间 + .animation({ duration: 220, curve: Curve.Friction }) + } } } .width('100%') .height('100%') - // 沉浸式：让**根容器背景**延伸到状态栏/手势条区域，但不移动子组件。 - // 配合 EntryAbility 里"系统栏与顶栏同色"，通知栏与标题栏融为一体。 .backgroundColor(FbColors.paper) - .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) + // 🔴 这里**不再用 `expandSafeArea`**（用户 2026-10-13 改"全沉浸"后）。 + // + // 原因：安全区扩展只在**窗口仍然避让系统栏**的前提下才有意义 + // （它做的事是"让背景多画进系统栏那条，但子组件不动"）。 + // 现在窗口已经开了 `setWindowLayoutFullScreen(true)`—— + // 内容本来就铺满整屏、系统栏也全透明，再叠加 `expandSafeArea` 是多余的； + // 而且两者叠加会出现"背景扩一次、内容又扩一次"的重复计算风险。 + // ⇒ 全屏这条路线下，**让位交给顶栏自己的 padding.top**（见 FbTopBar）， + // 边界一清二楚。 } /** 内容区：当前模块页（含顶栏 —— 顶栏由页面放进自己的滚动流，见 topBarSlot） */ @@ -112,6 +449,12 @@ struct Index { * ⚠️ 状态栏由系统直接涂成白色（EntryAbility 里 `statusBarColor = surface`， * 与顶栏同色）。所以顶栏滚走之后，通知栏区域仍由系统保持白色， * 不会露出页面底色 —— 不需要在页面上再铺"白色压条"。 + * + * ⚠️ v55 顺手清掉了一段残留：这上面原本还有一个**孤立的 `@Builder`** + * （是早期"临时诊断条"删剩的壳）。它让编译器报 + * "Duplicate '@Builder' decorators for method are not allowed" —— + * 行为上没坏（生效的是下面这个），但每轮编译都刷一条假错误， + * 真出问题时很容易被它盖住。 */ @Builder topBarSlot() { diff --git a/entry/src/main/ets/pages/books/FbBooksPage.ets b/entry/src/main/ets/pages/books/FbBooksPage.ets index ba38fcb..5cb740d 100644 --- a/entry/src/main/ets/pages/books/FbBooksPage.ets +++ b/entry/src/main/ets/pages/books/FbBooksPage.ets @@ -11,9 +11,14 @@ import { FbColors, FbMetric } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; import { FbBookItem, FbGroup } from '../../model/Types'; -import { FB_DEMO_BOOKS, fbGroupBook } from '../../model/DemoData'; +import { fbGroupBook } from '../../model/DemoData'; +import { parseBooks } from '../../data/FbParse'; +import { loadModule } from '../../data/FbModuleLoad'; import { FbEmptyBox, FbIconButton, FbProgressLine, FbRating, FbTag } from '../../components/Widgets'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; +import { fbOnScroll, fbOnTouch } from '../../common/FbScroll'; +import { FbModuleSettingsSheet } from '../../components/FbModuleSettingsSheet'; +import { FB_SET_BOOKS } from '../../model/FbSettingsMenus'; @ComponentV2 export struct FbBooksPage { @@ -27,71 +32,157 @@ export struct FbBooksPage { /** 模块主题色（读书 = 藕紫） */ private accent: string = '#6B5B95'; - private all: FbBookItem[] = FB_DEMO_BOOKS; + /** + * 模块设置浮层是否打开（右上角三条横线点开的那个）。 + * + * 🔴 用户 2026-10-16：「所有页面的设置按钮全部都改成和网页版一致， + * 就是**三个横线**那种设置按钮。」 + * 网页版的做法：动作区最右一个 ☰ → 点开是**这个模块的设置菜单**。 + */ + @Local settingsOpen: boolean = false; + + @Local all: FbBookItem[] = []; + + /** + * 页面出现：先读缓存、再拉接口（本地优先，见 FbModuleRepo 的说明）。 + * + * ⚠️ 不在这里打开本地库 —— `EntryAbility.onCreate` 已统一打开。 + */ + aboutToAppear(): void { + this.load(); + } + + private async load(): Promise { + await loadModule('books', parseBooks, + (rows: FbBookItem[]): 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; + } build() { - Scroll() { - Column() { - this.topBar() + // 🔴 外层 Stack：**模块设置浮层**要浮在页面之上 + // （本页原来是 Scroll 直接作根，没有 Stack，这里补一层） + Stack({ alignContent: Alignment.Bottom }) { - // ---- 页头 ---- - Row({ space: 8 }) { - Column({ space: 2 }) { - Text('书架') - .fontSize(FbMetric.fontTitle) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Text(this.all.length.toString() + ' 本 · ' - + this.readingCount().toString() + ' 本在读 · ' - + this.noteCount().toString() + ' 条笔记') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - } - .alignItems(HorizontalAlign.Start) - .layoutWeight(1) + Scroll() { + Column() { + this.topBar() - // 上传 / 统计（Web 端在设置菜单里） - FbIconButton({ icon: $r('app.media.fb_ic_chart'), tint: FbColors.muted }) - FbIconButton({ icon: $r('app.media.fb_ic_gear'), tint: FbColors.muted }) - } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) - .alignItems(VerticalAlign.Center) + // ---- 页头 ---- + Row({ space: 8 }) { + Column({ space: 2 }) { + Text('书架') + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Text(this.all.length.toString() + ' 本 · ' + + this.readingCount().toString() + ' 本在读 · ' + + this.noteCount().toString() + ' 条笔记') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) - // ---- 分组列表 ---- - if (this.all.length === 0) { - FbEmptyBox({ - title: '书架还是空的', - hint: '传一本进来，或先记下想读的书', - icon: $r('app.media.fb_ic_books') - }) - } else { - List({ space: 0 }) { - ForEach(this.groups(), (g: FbGroup) => { - ListItemGroup({ header: this.groupHeader(g.title, g.count) }) { - ForEach(g.items, (b: FbBookItem) => { - ListItem() { - this.bookRow(b) - } - }, (b: FbBookItem): string => 'bk_' + b.id.toString()) + // 上传 / 统计（Web 端在设置菜单里） + FbIconButton({ icon: $r('app.media.fb_ic_chart'), tint: FbColors.muted }) + // 🔴 设置按钮 = 网页版那种**三条横线**（☰）—— 用户 2026-10-16。 + // 点开是本模块的设置菜单（条目照网页版 `templates/<模块>/_settings_menu.php`）。 + FbIconButton({ + icon: $r('app.media.fb_ic_menu'), + tint: FbColors.muted, + onTap: (): void => { + this.settingsOpen = true; } - }, (g: FbGroup): string => 'bg_' + g.key) + }) } .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 24 }) - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) + .alignItems(VerticalAlign.Center) + + // ---- 分组列表 ---- + if (this.all.length === 0) { + FbEmptyBox({ + title: '书架还是空的', + hint: '传一本进来，或先记下想读的书', + icon: $r('app.media.fb_ic_books') + }) + } else { + List({ space: 0 }) { + ForEach(this.groups(), (g: FbGroup) => { + ListItemGroup({ header: this.groupHeader(g.title, g.count) }) { + ForEach(g.items, (b: FbBookItem) => { + ListItem() { + this.bookRow(b) + } + }, (b: FbBookItem): string => 'bk_' + b.id.toString()) + } + }, (g: FbGroup): string => 'bg_' + 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%') - // 底部悬浮快捷栏的预留：它浮在内容之上，不留白会压住最后一屏 - .padding({ bottom: FB_DOCK_RESERVE }) + .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('#00000066') + .onClick((): void => { + this.settingsOpen = false; + }) + + FbModuleSettingsSheet({ + title: '读书设置', + items: FB_SET_BOOKS, + onClose: (): void => { + this.settingsOpen = false; + }, + onPick: (action: string): void => { + // 条目里 `action === ''` 的是「暂未开放」（组件里已画灰、点了不响应） + // ⇒ 这里只需处理已实现的；目前都还没有，保持浮层开着即可。 + } + }) + } } .width('100%') .height('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) } /** 一本书：书脊色块（代替封面）+ 书名/作者 + 评分/笔记/进度 */ diff --git a/entry/src/main/ets/pages/calendar/FbCalendarPage.ets b/entry/src/main/ets/pages/calendar/FbCalendarPage.ets index d19c9aa..8a9595c 100644 --- a/entry/src/main/ets/pages/calendar/FbCalendarPage.ets +++ b/entry/src/main/ets/pages/calendar/FbCalendarPage.ets @@ -1,41 +1,82 @@ /** * 家书 FamilyBook · 日程模块（鸿蒙端） * - * 对应 Web 端 `templates/calendar/index.php`。Web 端是「月 / 周 / 天」三视图， - * 左侧的「我的日历本」那一栏已被用户要求撤掉、功能收进右侧设置 —— 端上照此： - * 日历占满宽度，日历本显隐 / 颜色 / 导入都在页头那个齿轮里。 + * 对应 Web 端 `templates/calendar/index.php`。 * - * 端上保留了月视图（月历格子）与「选中日」的日程列表上下两块： - * 手机屏幕放不下「月历 + 当天时间轴」并排，上下排列最自然。 + * 🔴 v52（用户 2026-10-15）：「我们家书的日程功能模块，包括它的界面设计和功能， + * 跟 [SyncCalendar] 做得一样，就差不多。在新建的那个地方，右侧那加一个设置按钮， + * 点进去之后实际上就是**对这个日程的设置**。然后也是一样的，**有几种不同的视图方式**， + * 然后包括**下面日程的显示**啊什么之类的，就按照那个 SyncCalendar 这个模式去做就行了。」 * - * ⚠️ 月历格子用 7 列 Grid，每格显示「日号 + 该日条目数的小点」。 - * 真正的周/天时间轴视图（按半小时定位）建议放到第二轮做 —— 它需要 - * 手势与拖动建日程，属于交互实现，不在本轮「先出界面」的范围。 + * ⇒ 照 SyncCalendar 的骨架重做（`D:\Yongquan\code\SyncCalendar`）： + * · **胶囊分段切视图**：月 / 周 / 列表（`FB_CAL_SETTINGS` 记住默认视图） + * · **月视图**：月历格子（日号 + 农历/选中/今天高亮）+ 当日日程 + * · **周视图**：7 列日期条（周一→周日）+ 选中日日程 + * · **列表视图**：从今天往后、按天分组 + * · **右下角悬浮 ＋** 新建日程 + * · **右上角设置齿轮** → 日程设置（默认视图 / 显示方式 / 日历本） + * · 点日程 → **详情浮层** → 「编辑日程」→ 编辑浮层 + * + * ⚠️ 与 SyncCalendar **功能对齐、形态不同**： + * 它是"跳页面 + bindSheet"，家书统一用**页面内浮层**（见 `FbEventSheet` 的说明）。 + * ⚠️ 日历本清单走 `/calendar/books`（**真实 id**）—— + * 旧代码从条目里臆造 id，导致新建日程根本落不到正确的本上（见 `FbCalRepo.fetchBooks`）。 */ import { FbColors, FbMetric, fbPalette } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; -import { FbCalBook, FbCalEvent } from '../../model/Types'; -import { FB_DEMO_CAL_BOOKS, FB_DEMO_EVENTS_SOON, FB_DEMO_EVENTS_TODAY } from '../../model/DemoData'; -import { FbDot, FbEmptyBox, FbIconButton, FbPrimaryButton } from '../../components/Widgets'; +import { FbCalBook, FbCalEvent, isEditableEvent } from '../../model/Types'; +import { parseCalendar } from '../../data/FbParse'; +import { loadModule } from '../../data/FbModuleLoad'; +import { FbCalRepo, FbCalEventFull } from '../../data/FbCalRepo'; +import { FB_CAL_SETTINGS, FbCalView, FbCalStyle } from '../../data/FbCalSettings'; +import { FB_TOKEN_STORE } from '../../data/FbTokenStore'; +import { FbDot, FbEmptyBox, FbIconButton } from '../../components/Widgets'; +import { FbEventSheet } from '../../components/FbEventSheet'; +import { FbEventEditSheet } from '../../components/FbEventEditSheet'; +import { FbCalSettingsSheet } from '../../components/FbCalSettingsSheet'; +import { FbDayEventPanel } from '../../components/FbDayEventPanel'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; +import { fbOnScroll, fbOnTouch } from '../../common/FbScroll'; /** 月历上「非本月」日期点的灰（hex 常量：格子数据结构里存的是字符串色，不能用 Resource） */ const FB_FAINT: string = '#A8988A'; -const FB_MUTED: string = '#7E6B5A'; /** 月历格子（一个日期） */ interface FbCalCell { /** 日期数字 */ day: number; + /** 该格的完整日期 `YYYY-MM-DD` */ + iso: string; /** 是否属于当月 */ inMonth: boolean; /** 是否今天 */ isToday: boolean; - /** 该日的事件数（0 不显示点） */ + /** 该日的条目数（0 不显示点） */ count: number; - /** 该日第一个事件的色（画小点用） */ + /** 该日第一个条目的色（画小点用） */ dotColor: string; + /** 农历/节日的短文字（初一显示月名、节日显示节日名） */ + lunar: string; +} + +/** 列表视图里的"一天"（日期 + 该日日程） */ +interface FbAgendaDay { + iso: string; + /** `10月15日 周三` */ + label: string; + events: FbCalEvent[]; +} + +/** 周视图里的一格 */ +interface FbWeekDay { + iso: string; + day: number; + /** 一 二 三 … */ + w: string; + isToday: boolean; + count: number; + lunar: string; } @ComponentV2 @@ -50,211 +91,866 @@ export struct FbCalendarPage { /** 模块主题色（日程 = 琥珀） */ private accent: string = '#B0763A'; - private books: FbCalBook[] = FB_DEMO_CAL_BOOKS; - private todayEvents: FbCalEvent[] = FB_DEMO_EVENTS_TODAY; - private soonEvents: FbCalEvent[] = FB_DEMO_EVENTS_SOON; - /** 当前显示的月份（首次进入取本月） */ + /** 日历本（走 `/calendar/books`，**真实 id**） */ + @Local books: FbCalBook[] = []; + /** 全部条目（月历格子/列表都从这里查） */ + @Local allEvents: FbCalEvent[] = []; + /** 顶部提示 */ + @Local syncNote: string = ''; + /** 加载中 */ + @Local loading: boolean = true; + + /** 当前视图（月 / 周 / 列表） */ + @Local mode: FbCalView = 'month'; + /** 日程显示方式（时间轴 / 列表）—— 来自日程设置 */ + @Local style: FbCalStyle = 'timeline'; + /** 当前显示的月份（月视图） */ @Local showYear: number = new Date().getFullYear(); @Local showMonth: number = new Date().getMonth() + 1; - /** 选中的日期（0 = 今天） */ - @Local pickedDay: number = new Date().getDate(); + /** 选中的日期 `YYYY-MM-DD` */ + @Local pickedIso: string = ''; + + // ---- 浮层状态 ---- + /** 详情：正在看的条目（列表里那份） */ + @Local detailBase: FbCalEvent | null = null; + /** 详情：完整数据（异步拉） */ + @Local detailFull: FbCalEventFull | null = null; + @Local detailLoading: boolean = false; + @Local detailError: string = ''; + /** 编辑：null + 非新建 = 关闭 */ + @Local editEvent: FbCalEventFull | null = null; + @Local editing: boolean = false; + /** 新建 */ + @Local creating: boolean = false; + /** 设置面板 */ + @Local settingsOpen: boolean = false; private weekLabels: string[] = ['一', '二', '三', '四', '五', '六', '日']; + /** 详情请求序号（防"连点两条，前一条的响应覆盖后一条"） */ + private detailToken: number = 0; + + aboutToAppear(): void { + // 先按设置里的默认视图展示（用户上次选的） + this.mode = FB_CAL_SETTINGS.getView(); + this.style = FB_CAL_SETTINGS.getStyle(); + this.pickedIso = this.todayIso(); + this.load(); + this.loadBooks(); + } + + /** + * 四个浮层（详情 / 编辑 / 新建 / 设置）任一开着 → 让底部悬浮快捷栏让位。 + * + * 🔴 为什么必须做：悬浮栏在更外层 `Index` 的 Stack 里，层级比本页高 ⇒ + * 浮层底部的按钮会被它盖住、点击被抢走（名册页踩过这个坑）。 + * ⚠️ 用 `@Monitor` **一处声明**，而不是在每个开合点手写 openSheet() —— + * 手写必然漏（名册页当时有 9 处赋值点）。 + * ⚠️ 直接赋 0/1 而不是 `openSheet()/closeSheet()`：本页不会同时开两个浮层， + * 用计数法反而会在"页面重建但旧状态没归零"时把计数越堆越高。 + */ + @Monitor('detailBase', 'editEvent', 'creating', 'settingsOpen') + onSheetChanged(): void { + const app: FbAppState = fbAppState(); + const open: boolean = this.detailBase !== null || this.editing + || this.creating || this.settingsOpen; + app.sheetCount = open ? 1 : 0; + } + + /** 拉日历本（真实 id / 可写性） */ + private async loadBooks(): Promise { + const token: string = FB_TOKEN_STORE.get(); + if (token === '') { + return; + } + const list: FbCalBook[] = await FbCalRepo.inst().fetchBooks(token); + if (list.length > 0) { + this.books = list; + } + } + + /** + * 拉 `/api/v1/calendar`（一次拿全量条目）。 + * + * ⚠️ 接口没有"按日期查询"的参数（实测整本返回 200+ 条） + * ⇒ 拉一次全量、端上按日期筛；切换月份/视图**不再请求**。 + */ + private async load(): Promise { + await loadModule('calendar', parseCalendar, + (rows: FbCalEvent[]): void => { + this.allEvents = rows; + this.loading = false; + }, + (note: string): void => { + this.syncNote = note; + this.loading = false; + }); + } + + // ============================================================ + // 日期 / 筛选 + // ============================================================ + + private pad(n: number): string { + return n < 10 ? ('0' + n.toString()) : n.toString(); + } + + private todayIso(): string { + const d: Date = new Date(); + return d.getFullYear().toString() + '-' + this.pad(d.getMonth() + 1) + '-' + this.pad(d.getDate()); + } + + private isoOf(y: number, m: number, d: number): string { + const dt: Date = new Date(y, m - 1, d); + return dt.getFullYear().toString() + '-' + this.pad(dt.getMonth() + 1) + '-' + this.pad(dt.getDate()); + } + + /** 只看"可见的日历本"里的条目（设置里能逐本关掉） */ + private visibleEvents(): FbCalEvent[] { + if (this.books.length === 0) { + return this.allEvents; + } + const out: FbCalEvent[] = []; + for (const e of this.allEvents) { + // calId=0 的衍生条目（农历/纪念日）不受"本"控制，照常显示 + if (e.calId === 0 || FB_CAL_SETTINGS.isVisible(e.calId)) { + out.push(e); + } + } + return out; + } + + /** 某一天的条目（已排序） */ + private eventsOf(iso: string): FbCalEvent[] { + const out: FbCalEvent[] = []; + for (const e of this.visibleEvents()) { + if (e.date === iso) { + out.push(e); + } + } + out.sort((a: FbCalEvent, c: FbCalEvent): number => this.byTime(a, c)); + return out; + } + + private byTime(a: FbCalEvent, c: FbCalEvent): number { + if (a.allDay === c.allDay) { + return a.time < c.time ? -1 : (a.time > c.time ? 1 : 0); + } + return a.allDay ? -1 : 1; + } + + /** 选中日期的简短标签（`10月15日 周三`） */ + private labelOf(iso: string): string { + if (iso.length < 10) { + return ''; + } + 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()]; + } + + /** + * 农历/节日的短文字。 + * + * ⚠️ 服务端的农历条目有两种形态（实测）： + * · 整月一条、`title` 是"农历"，`date` 是**初一**那天（`kind=lunar`） + * · 节日/节气各一条（`kind=holiday` / `solarterm` / `traditional`） + * ⇒ 这里**不自己算农历**（那是 `LunarUtil` 的活，且容易算错）， + * 直接从条目里取：当天有节日就显示节日名，否则若是初一就显示"农历"当月的标记。 + */ + private lunarOf(iso: string): string { + // 优先：传统节日 / 节气 / 节假日（这类名字短、信息量大） + for (const e of this.allEvents) { + if (e.date !== iso) { + continue; + } + if (e.kind === 'traditional' || e.kind === 'solarterm' || e.kind === 'holiday') { + // 标题可能带 emoji 前缀（如「🎂 婚礼纪念日」不属这类；这里只取纯节日名） + return this.shortTitle(e.title); + } + } + // 其次：初一（`kind=lunar` 的条目只在初一有） + for (const e of this.allEvents) { + if (e.date === iso && e.kind === 'lunar') { + return '初一'; + } + } + return ''; + } + + /** 标题截短（农历/节日的名字有的很长，格子里放不下） */ + private shortTitle(t: string): string { + const s: string = t.replace(/[\u{1F300}-\u{1FAFF}\u{2600}-\u{27BF}]/gu, '').trim(); + return s.length <= 3 ? s : s.substring(0, 3); + } + + /** 本月条目数（不含农历/节气这类衍生条目，免得数字虚高） */ + private monthEventCount(): number { + let n: number = 0; + const prefix: string = this.showYear.toString() + '-' + this.pad(this.showMonth); + for (const e of this.visibleEvents()) { + if (e.date.indexOf(prefix) === 0 && (e.kind === 'custom' || e.kind === 'anniv')) { + n++; + } + } + return n; + } + + // ============================================================ + // 月历格子 + // ============================================================ + + private cells(): FbCalCell[] { + const out: FbCalCell[] = []; + const y: number = this.showYear; + const m: number = this.showMonth; + + const first: Date = new Date(y, m - 1, 1); + // JS 的 getDay(): 0=周日 … 6=周六 ⇒ 换算成「周一为 0」 + const lead: number = (first.getDay() + 6) % 7; + const daysInMonth: number = new Date(y, m, 0).getDate(); + const prevDays: number = new Date(y, m - 1, 0).getDate(); + const today: string = this.todayIso(); + + // 前置：上月的尾巴 + for (let i = lead - 1; i >= 0; i--) { + const d: number = prevDays - i; + out.push(this.cellOf(y, m - 1, d, false, today)); + } + // 本月 + for (let d = 1; d <= daysInMonth; d++) { + out.push(this.cellOf(y, m, d, true, today)); + } + // 补齐到整周（补下月的头） + const tail: number = (7 - (out.length % 7)) % 7; + for (let d = 1; d <= tail; d++) { + out.push(this.cellOf(y, m + 1, d, false, today)); + } + return out; + } + + private cellOf(y: number, m: number, d: number, inMonth: boolean, today: string): FbCalCell { + const iso: string = this.isoOf(y, m, d); + const list: FbCalEvent[] = this.eventsOf(iso); + // 只数"用户日程"，不算农历/节气（否则每个格子都有一点） + let n: number = 0; + let color: string = FB_FAINT; + for (const e of list) { + if (e.kind === 'custom' || e.kind === 'anniv') { + if (n === 0) { + color = e.color; + } + n++; + } + } + const c: FbCalCell = { + day: d, + iso: iso, + inMonth: inMonth, + isToday: iso === today, + count: n, + dotColor: color, + lunar: inMonth ? this.lunarOf(iso) : '' + }; + return c; + } + + /** 网格高度 = 行数 × 行高 */ + private gridHeight(): number { + const rows: number = Math.ceil(this.cells().length / 7); + return rows * 48; + } + + // ============================================================ + // 周视图 + // ============================================================ + + /** 本周（周一为首）的 7 天 */ + private weekDays(): FbWeekDay[] { + const picked: Date = this.pickedIso.length >= 10 + ? new Date(parseInt(this.pickedIso.substring(0, 4), 10), + parseInt(this.pickedIso.substring(5, 7), 10) - 1, + parseInt(this.pickedIso.substring(8, 10), 10)) + : new Date(); + const lead: number = (picked.getDay() + 6) % 7; + const monday: Date = new Date(picked.getFullYear(), picked.getMonth(), picked.getDate() - lead); + const today: string = this.todayIso(); + const out: FbWeekDay[] = []; + for (let i = 0; i < 7; i++) { + const dt: Date = new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + i); + const iso: string = this.isoOf(dt.getFullYear(), dt.getMonth() + 1, dt.getDate()); + const list: FbCalEvent[] = this.eventsOf(iso); + let n: number = 0; + for (const e of list) { + if (e.kind === 'custom' || e.kind === 'anniv') { + n++; + } + } + out.push({ + iso: iso, day: dt.getDate(), w: this.weekLabels[i], + isToday: iso === today, count: n, lunar: this.lunarOf(iso) + }); + } + return out; + } + + // ============================================================ + // 列表视图 + // ============================================================ + + /** 从今天往后（含过去 7 天）按天分组；空的日子不占位 */ + private agendaDays(): FbAgendaDay[] { + const out: FbAgendaDay[] = []; + const now: Date = new Date(); + // 往前 7 天到往后 60 天（够用且不至于太长） + for (let i = -7; i <= 60; i++) { + const dt: Date = new Date(now.getFullYear(), now.getMonth(), now.getDate() + i); + const iso: string = this.isoOf(dt.getFullYear(), dt.getMonth() + 1, dt.getDate()); + const list: FbCalEvent[] = this.eventsOf(iso); + if (list.length > 0) { + out.push({ iso: iso, label: this.labelOf(iso), events: list }); + } + } + return out; + } + + // ============================================================ + // 浮层开合 + // ============================================================ + + /** 点一条日程 → 开详情（先把列表那份垫上，再联网补全） */ + private openEvent(e: FbCalEvent): void { + this.detailBase = e; + this.detailFull = null; + this.detailError = ''; + // 非 custom 的衍生条目（农历/节气）没有 `/events/` 可拉 ⇒ 不请求 + if (!isEditableEvent(e)) { + this.detailLoading = false; + return; + } + const token: string = FB_TOKEN_STORE.get(); + if (token === '') { + this.detailLoading = false; + return; + } + this.detailLoading = true; + this.detailToken += 1; + const my: number = this.detailToken; + FbCalRepo.inst().fetchEvent(e.id, token).then((full: FbCalEventFull | null): void => { + if (my !== this.detailToken) { + return; + } + this.detailLoading = false; + if (full === null) { + this.detailError = '读不到详情'; + return; + } + this.detailFull = full; + }); + } + + /** 关详情并开编辑 */ + private editFromDetail(): void { + if (this.detailFull !== null) { + this.editEvent = this.detailFull; + this.editing = true; + } else if (this.detailBase !== null) { + // 详情还没拉回来 ⇒ 先垫一个"只有列表字段"的壳 + const b: FbCalEvent = this.detailBase; + const shell: FbCalEventFull = { + id: b.id, calendar_id: b.calId, title: b.title, location: b.place, + starts_at: b.date + ' ' + (b.allDay ? '00:00:00' : (b.time + ':00')), + ends_at: b.endTime !== '' ? (b.date + ' ' + b.endTime + ':00') : '', + all_day: b.allDay, note: b.note, rrule: '', reminder_minutes: '', + status: 'confirmed', transp: false, created_by: 0 + }; + this.editEvent = shell; + this.editing = true; + } + this.detailBase = null; + this.detailFull = null; + } + + private closeDetail(): void { + this.detailBase = null; + this.detailFull = null; + this.detailError = ''; + this.detailToken += 1; // 丢弃在途请求 + } + + /** 日程系列变了之后刷新数据 */ + private refresh(): void { + this.detailBase = null; + this.detailFull = null; + this.editing = false; + this.editEvent = null; + this.creating = false; + this.load(); + this.loadBooks(); + } + + /** 详情是不是开着 */ + private detailOpen(): boolean { + return this.detailBase !== null; + } + + // ============================================================ + // 界面 + // ============================================================ build() { - Scroll() { - Column() { - this.topBar() + Stack({ alignContent: Alignment.BottomEnd }) { + // ---- 页面主体（可滚动）---- + Scroll() { + Column() { + this.topBar() + this.header() + this.modeTabs() - // ---- 页头：月份 + 视图切换 + 新建 + 设置 ---- - Row({ space: 8 }) { - Column({ space: 2 }) { - Text(this.showYear.toString() + ' 年 ' + this.showMonth.toString() + ' 月') - .fontSize(FbMetric.fontTitle) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Text(this.visibleBooks().length.toString() + ' 本日历可见 · 本月 ' - + this.monthEventCount().toString() + ' 条') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - } - .alignItems(HorizontalAlign.Start) - .layoutWeight(1) - - FbPrimaryButton({ - label: '新建', - bg: this.accent, - icon: $r('app.media.fb_ic_plus') - }) - FbIconButton({ icon: $r('app.media.fb_ic_gear'), tint: FbColors.muted }) - } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) - .alignItems(VerticalAlign.Center) - - Scroll() { - Column({ space: 0 }) { - - // ---- 月历卡 ---- - Column({ space: 0 }) { - // 月份切换条 - Row() { - this.navBtn('上一月', -1) - Blank() - Text('今天') - .fontSize(FbMetric.fontSmall) - .fontColor(this.accent) - .padding({ left: 12, right: 12, top: 5, bottom: 5 }) - .backgroundColor(fbPalette(this.accent).brand + '14') - .borderRadius(FbMetric.radiusPill) - .onClick(() => { - const d: Date = new Date(); - this.showYear = d.getFullYear(); - this.showMonth = d.getMonth() + 1; - this.pickedDay = d.getDate(); - }) - Blank() - this.navBtn('下一月', 1) - } - .width('100%') - .padding({ bottom: 10 }) - - // 星期表头 - Row() { - ForEach(this.weekLabels, (w: string) => { - Text(w) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - .layoutWeight(1) - .textAlign(TextAlign.Center) - }, (w: string): string => 'wk_' + w) - } - .width('100%') - .padding({ bottom: 6 }) - - // 日期网格（7 列） - Grid() { - ForEach(this.cells(), (c: FbCalCell) => { - GridItem() { - this.dayCell(c) - } - }, (c: FbCalCell): string => 'cell_' + c.day.toString() + '_' - + (c.inMonth ? '1' : '0')) - } - .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr') - .rowsGap(2) - .width('100%') - .height(this.gridHeight()) - .scrollBar(BarState.Off) - } - .padding(FbMetric.cardPad) - .backgroundColor(FbColors.surface) - .borderRadius(FbMetric.radius) - .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad }) - - // ---- 日历本（可见的几本，横向排列当作图例）---- - Column({ space: 10 }) { - Row({ space: 8 }) { - ForEach(this.visibleBooks(), (b: FbCalBook) => { - Row({ space: 5 }) { - FbDot({ dia: 7, fillC: b.color }) - Text(b.name) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.muted) - .maxLines(1) - } - .padding({ right: 10 }) - }, (b: FbCalBook): string => 'book_' + b.id.toString()) - } - .width('100%') - .alignItems(VerticalAlign.Center) + if (this.loading) { + Row({ space: 8 }) { + LoadingProgress().width(18).height(18).color(FbColors.faint) + Text('正在读取日程…') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) } .width('100%') - .padding({ left: FbMetric.pagePad + 4, right: FbMetric.pagePad + 4, top: 12 }) - .alignItems(HorizontalAlign.Start) - - // ---- 选中日的日程 ---- - Column({ space: 0 }) { - Row() { - Text(this.pickedDay.toString() + ' 日') - .fontSize(FbMetric.fontSmall) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Blank() - Text(this.todayEvents.length.toString() + ' 条日程') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - } - .width('100%') - .padding({ left: 4, right: 4, top: 12, bottom: 8 }) - - Column({ space: 0 }) { - if (this.todayEvents.length === 0) { - FbEmptyBox({ - title: '这天没有安排', - hint: '在月历里点一下某天，就能在那天加日程', - icon: $r('app.media.fb_ic_calendar') - }) - } else { - ForEach(this.todayEvents, (ev: FbCalEvent, idx: number) => { - this.eventRow(ev, idx === this.todayEvents.length - 1) - }, (ev: FbCalEvent): string => 'cev_' + ev.id.toString()) - } - } - .width('100%') - .padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: 6 }) - } - .backgroundColor(FbColors.surface) - .borderRadius(FbMetric.radius) - .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 }) - - // ---- 未来七天 ---- - Column({ space: 0 }) { - Row() { - Text('未来七天') - .fontSize(FbMetric.fontSmall) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Blank() - Text('共 ' + this.soonEvents.length.toString() + ' 条') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - } - .width('100%') - .padding({ left: 4, right: 4, top: 12, bottom: 8 }) - - Column({ space: 0 }) { - ForEach(this.soonEvents, (ev: FbCalEvent, idx: number) => { - this.eventRow(ev, idx === this.soonEvents.length - 1) - }, (ev: FbCalEvent): string => 'sev_' + ev.id.toString()) - } - .width('100%') - .padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: 6 }) - } - .backgroundColor(FbColors.surface) - .borderRadius(FbMetric.radius) - .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 28 }) + .padding({ top: 40, bottom: 40 }) + .justifyContent(FlexAlign.Center) + } else if (this.mode === 'month') { + this.monthBody() + } else if (this.mode === 'week') { + this.weekBody() + } else { + this.agendaBody() } - .width('100%') - // 底部悬浮快捷栏的预留：它浮在内容之上，不留白会压住最后一屏 - .padding({ bottom: FB_DOCK_RESERVE }) } .width('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) + // 底部悬浮快捷栏 + 这个页面的 ＋ 按钮：留出足够余量，别压住最后一屏 + .padding({ bottom: FB_DOCK_RESERVE + 64 }) } .width('100%') + .height('100%') + .scrollBar(BarState.Off) + .edgeEffect(EdgeEffect.Spring) + .onDidScroll(fbOnScroll) + .onTouch(fbOnTouch) + .align(Alignment.TopStart) + + // ---- 右下角悬浮 ＋（照 SyncCalendar）---- + Button() { + Text('＋') + .fontSize(26) + .fontWeight(FontWeight.Medium) + .fontColor(Color.White) + } + .width(56) + .height(56) + .borderRadius(28) + .backgroundColor(this.accent) + .shadow({ radius: 8, color: '#1A000000', offsetX: 0, offsetY: 2 }) + // 底部要给悬浮快捷栏让位（它比这个 ＋ 更靠下） + .margin({ right: 20, bottom: FB_DOCK_RESERVE + 12 }) + .onClick((): void => { + this.creating = true; + }) + + // ---- 浮层们 ---- + if (this.detailOpen()) { + Column() + .width('100%') + .height('100%') + .backgroundColor('#00000066') + .onClick((): void => { + this.closeDetail(); + }) + + FbEventSheet({ + event: this.detailFull, + loading: this.detailLoading, + error: this.detailError, + bookName: this.detailBase !== null ? this.detailBase.calName : '', + bookColor: this.detailBase !== null ? this.detailBase.color : '#9AA0A6', + canEdit: this.detailBase !== null && isEditableEvent(this.detailBase), + onClose: (): void => { + this.closeDetail(); + }, + onEdit: (): void => { + this.editFromDetail(); + } + }) + } + + if (this.editing && this.editEvent !== null) { + Column() + .width('100%') + .height('100%') + .backgroundColor('#00000066') + .onClick((): void => { + this.editing = false; + this.editEvent = null; + }) + + FbEventEditSheet({ + event: this.editEvent, + isCreate: false, + books: this.books, + onCancel: (): void => { + this.editing = false; + this.editEvent = null; + }, + onSaved: (): void => { + this.refresh(); + }, + onDeleted: (): void => { + this.refresh(); + } + }) + } + + if (this.creating) { + Column() + .width('100%') + .height('100%') + .backgroundColor('#00000066') + .onClick((): void => { + this.creating = false; + }) + + FbEventEditSheet({ + event: null, + isCreate: true, + presetDate: this.pickedIso, + books: this.books, + onCancel: (): void => { + this.creating = false; + }, + onSaved: (): void => { + this.refresh(); + }, + onDeleted: (): void => { + this.creating = false; + } + }) + } + + if (this.settingsOpen) { + Column() + .width('100%') + .height('100%') + .backgroundColor('#00000066') + .onClick((): void => { + this.settingsOpen = false; + }) + + FbCalSettingsSheet({ + books: this.books, + onClose: (): void => { + this.settingsOpen = false; + }, + onChanged: (): void => { + // 设置改了 ⇒ 立刻按新设置重画（换视图 / 换显示方式马上生效） + this.mode = FB_CAL_SETTINGS.getView(); + this.style = FB_CAL_SETTINGS.getStyle(); + } + }) + } } .width('100%') .height('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) } - /** 上一月 / 下一月按钮 */ + /** 页头：月份标题 + 「今天」 + 右侧设置齿轮 */ + @Builder + header() { + Row({ space: 8 }) { + Column({ space: 2 }) { + if (this.mode === 'month') { + Text(this.showYear.toString() + ' 年 ' + this.showMonth.toString() + ' 月') + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + } else { + Text(this.labelOf(this.pickedIso)) + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + } + Text(this.visibleBooks().length.toString() + ' 本日历可见 · 本月 ' + + this.monthEventCount().toString() + ' 条') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + + // 「今天」（照 SyncCalendar 那颗：文字按钮、品牌色描边） + Text('今天') + .fontSize(FbMetric.fontSmall) + .fontColor(this.accent) + .padding({ left: 12, right: 12, top: 5, bottom: 5 }) + .border({ width: 1, color: this.accent }) + .borderRadius(FbMetric.radiusPill) + .onClick((): void => { + const now: Date = new Date(); + this.showYear = now.getFullYear(); + this.showMonth = now.getMonth() + 1; + this.pickedIso = this.todayIso(); + }) + + // 🔴 设置按钮 = 网页版那种**三条横线**（☰）—— 用户 2026-10-16： + // 「所有页面的设置按钮全部都改成和网页版一致」。 + // （网页版日程页的 `_settings_menu.php` 用的就是那个三横线 SVG。） + FbIconButton({ + icon: $r('app.media.fb_ic_menu'), + tint: FbColors.muted, + onTap: (): void => { + this.settingsOpen = true; + } + }) + } + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) + .alignItems(VerticalAlign.Center) + } + + /** 胶囊分段：月 / 周 / 列表（照 SyncCalendar 的 modeTabs） */ + @Builder + modeTabs() { + Row({ space: 6 }) { + this.modeTab('month', '月') + this.modeTab('week', '周') + this.modeTab('agenda', '列表') + Blank() + } + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 8 }) + .alignItems(VerticalAlign.Center) + } + + @Builder + modeTab(key: string, label: string) { + Text(label) + .fontSize(FbMetric.fontSmall) + .fontColor(this.mode === key ? Color.White : FbColors.muted) + .backgroundColor(this.mode === key ? this.accent : FbColors.inputBg) + .borderRadius(FbMetric.radiusPill) + .padding({ left: 16, right: 16, top: 6, bottom: 6 }) + .onClick((): void => { + this.mode = key as FbCalView; + // ⚠️ 手动切换**也**存成默认视图 —— 用户下次进来就是他最后用的那个 + // （SyncCalendar 只存设置页里选的，用起来反而别扭） + FB_CAL_SETTINGS.setView(this.mode); + }) + } + + /** 月视图：月历卡 + 选中日日程 */ + @Builder + monthBody() { + Column({ space: 0 }) { + // ---- 月历卡 ---- + Column({ space: 0 }) { + // 月份切换条 + Row() { + this.navBtn('上一月', -1) + Blank() + this.navBtn('下一月', 1) + } + .width('100%') + .padding({ bottom: 10 }) + + // 星期表头 + Row() { + ForEach(this.weekLabels, (w: string) => { + Text(w) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .layoutWeight(1) + .textAlign(TextAlign.Center) + }, (w: string): string => 'wk_' + w) + } + .width('100%') + .padding({ bottom: 6 }) + + // 日期网格（7 列） + // 🔴 key 里带上 `this.pickedIso`：格子的选中态是**状态派生**的， + // 而 key 若只含日期，切选中日时 key 不变 ⇒ ArkUI 会复用旧子组件。 + // （`dayCell` 内部确实读了 `this.pickedIso`，理论上能刷新； + // 但把选中态并进 key 是"一定能重建"的稳妥做法， + // 42 个格子的重建开销可忽略。） + Grid() { + ForEach(this.cells(), (c: FbCalCell) => { + GridItem() { + this.dayCell(c) + } + }, (c: FbCalCell): string => 'cell_' + c.iso + '_' + this.pickedIso) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr') + .rowsGap(2) + .width('100%') + .height(this.gridHeight()) + .scrollBar(BarState.Off) + } + .padding(FbMetric.cardPad) + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad }) + + // ---- 选中日的日程 ---- + this.dayPanel() + } + .width('100%') + } + + /** + * 选中日的日程面板（月/周视图共用）。 + * + * 🔴🔴 v53 修的真 bug（用户 2026-10-16）：「你在日历上点击任何一个地方， + * **下面的日程都不变**。」 + * 根因：这里原来是 `@Builder dayPanel(iso: string)` —— + * **`@Builder` 的值类型参数不参与状态观察** + * （SDK 规则 `r/quick-rules/05-state.md`：按值传递「状态变化刷新 ❌」）。 + * 关键在**渲染时"读了什么"**： + * · 旧写法里这块只读了入参 `iso`（一个普通局部值）， + * 整棵子树的依赖里**没有 `this.pickedIso`** + * ⇒ 点格子后 `pickedIso` 变了，这块**根本不被重新渲染**。 + * · 对照 `dayCell(c)` 之所以正常：它在渲染时**直接读了 `this.pickedIso`** + * （`c.iso === this.pickedIso`）⇒ 依赖被登记 ⇒ 选中高亮会跟。 + * ⇒ 修法：**去掉那个参数**，让它在渲染时直接读 `this.pickedIso` + * （这样依赖被登记）；外面套的是 `@ComponentV2` 的 `FbDayEventPanel`， + * `@Param` 一变就重建。本项目已在 `FbTagChip` 上踩过同一个坑。 + * + * ⚠️ 所以**不要**把它改回 `dayPanel(iso: string)` 再传 `this.pickedIso` —— + * 那样又变成按值传递，症状会原样复发。 + */ + @Builder + dayPanel() { + FbDayEventPanel({ + label: this.labelOf(this.pickedIso), + events: this.eventsOf(this.pickedIso), + style: this.style, + isToday: this.pickedIso === this.todayIso(), + nowMin: this.nowMinutes(), + onPick: (e: FbCalEvent): void => { + this.openEvent(e); + } + }) + } + + /** 当前时刻（当天第几分钟）—— 时间轴画"当前时间红线"用 */ + private nowMinutes(): number { + const d: Date = new Date(); + return d.getHours() * 60 + d.getMinutes(); + } + + /** 周视图：7 列日期条 + 选中日日程 */ + @Builder + weekBody() { + Column({ space: 0 }) { + Column({ space: 0 }) { + Row() { + this.navBtn('上一周', -7) + Blank() + this.navBtn('下一周', 7) + } + .width('100%') + .padding({ bottom: 10 }) + + // 7 列 + Row({ space: 2 }) { + ForEach(this.weekDays(), (d: FbWeekDay) => { + Column({ space: 4 }) { + Text(d.w) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + Text(d.day.toString()) + .fontSize(FbMetric.fontSmall) + .fontWeight(d.isToday || d.iso === this.pickedIso + ? FontWeight.Medium : FontWeight.Normal) + .fontColor(d.isToday ? Color.White + : (d.iso === this.pickedIso ? this.accent : FbColors.ink)) + .width(30) + .height(30) + .textAlign(TextAlign.Center) + .borderRadius(15) + .backgroundColor(d.isToday + ? this.accent + : (d.iso === this.pickedIso + ? fbPalette(this.accent).brand + '1F' : Color.Transparent)) + // 该日条目数（小圆点，最多 3 个） + Row({ space: 2 }) { + if (d.count > 0) { + ForEach(this.dots(d.count), (i: number) => { + FbDot({ dia: 4, fillC: this.accent }) + }, (i: number): string => 'wd_' + d.iso + '_' + i.toString()) + } + } + .height(5) + if (d.lunar !== '') { + Text(d.lunar) + .fontSize(8) + .fontColor(FbColors.faint) + .maxLines(1) + } + } + .layoutWeight(1) + .padding({ top: 4, bottom: 4 }) + .onClick((): void => { + this.pickedIso = d.iso; + }) + }, (d: FbWeekDay): string => 'wkd_' + d.iso) + } + .width('100%') + .alignItems(VerticalAlign.Top) + } + .padding(FbMetric.cardPad) + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad }) + + this.dayPanel() + } + .width('100%') + } + + /** 列表视图：按天分组，从今天往后（每天一块，显示方式同样跟随设置） */ + @Builder + agendaBody() { + Column({ space: 0 }) { + if (this.agendaDays().length === 0) { + Column() { + FbEmptyBox({ + title: '接下来还没有安排', + hint: '点右下角的 ＋ 加一条日程', + icon: $r('app.media.fb_ic_calendar') + }) + } + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + .padding(FbMetric.cardPad) + .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad }) + } else { + ForEach(this.agendaDays(), (g: FbAgendaDay) => { + // 🔴 与月/周视图共用同一个面板组件（这样"显示方式"设置在三处都生效） + FbDayEventPanel({ + label: g.label, + events: g.events, + style: this.style, + isToday: g.iso === this.todayIso(), + nowMin: this.nowMinutes(), + onPick: (e: FbCalEvent): void => { + this.openEvent(e); + } + }) + }, (g: FbAgendaDay): string => 'agd_' + g.iso) + } + } + .width('100%') + } + + /** 上一月 / 下一月（周视图里步进 7 天） */ @Builder navBtn(label: string, delta: number) { Text(label) @@ -264,6 +960,18 @@ export struct FbCalendarPage { .backgroundColor(FbColors.inputBg) .borderRadius(FbMetric.radiusPill) .onClick(() => { + if (this.mode === 'week') { + // 周视图：按天挪（±7） + const base: Date = this.pickedIso.length >= 10 + ? new Date(parseInt(this.pickedIso.substring(0, 4), 10), + parseInt(this.pickedIso.substring(5, 7), 10) - 1, + parseInt(this.pickedIso.substring(8, 10), 10)) + : new Date(); + const dt: Date = new Date(base.getFullYear(), base.getMonth(), base.getDate() + delta); + this.pickedIso = this.isoOf(dt.getFullYear(), dt.getMonth() + 1, dt.getDate()); + return; + } + // 月视图：按月挪 let m: number = this.showMonth + delta; let y: number = this.showYear; if (m < 1) { @@ -275,17 +983,16 @@ export struct FbCalendarPage { } this.showMonth = m; this.showYear = y; - this.pickedDay = 0; }) } - /** 一个日期格子 */ + /** 一个日期格子（照 SyncCalendar：日号 + 农历，选中/今天高亮） */ @Builder dayCell(c: FbCalCell) { - Column({ space: 3 }) { + Column({ space: 2 }) { Text(c.day.toString()) .fontSize(FbMetric.fontSmall) - .fontWeight(c.isToday || c.day === this.pickedDay ? FontWeight.Medium : FontWeight.Normal) + .fontWeight(c.isToday || c.iso === this.pickedIso ? FontWeight.Medium : FontWeight.Normal) .fontColor(c.isToday ? Color.White : (c.inMonth ? FbColors.ink : FbColors.faint)) @@ -295,74 +1002,60 @@ export struct FbCalendarPage { .borderRadius(13) .backgroundColor(c.isToday ? this.accent - : (c.day === this.pickedDay && c.inMonth + : (c.iso === this.pickedIso && c.inMonth ? fbPalette(this.accent).brand + '1F' : Color.Transparent)) + // 农历/节日（有才显示） + if (c.lunar !== '') { + Text(c.lunar) + .fontSize(8) + .fontColor(c.iso === this.pickedIso && c.inMonth ? FbColors.muted : FbColors.faint) + .maxLines(1) + } else { + // 没有农历就留出等高的空，免得两行格子和一行格子高度不一 + Row().height(10) + } + // 事件小点（最多 3 个） Row({ space: 2 }) { if (c.count > 0) { ForEach(this.dots(c.count), (i: number) => { FbDot({ dia: 4, fillC: c.dotColor }) - }, (i: number): string => 'dot_' + c.day.toString() + '_' + i.toString()) + }, (i: number): string => 'dot_' + c.iso + '_' + i.toString()) } } .height(5) } .width('100%') - .height(44) + .height(48) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .onClick(() => { - this.pickedDay = c.day; + this.pickedIso = c.iso; + // 点到上/下月的格子 ⇒ 顺带把月历翻过去（SyncCalendar 也是这个行为） + if (!c.inMonth && c.iso.length >= 10) { + this.showYear = parseInt(c.iso.substring(0, 4), 10); + this.showMonth = parseInt(c.iso.substring(5, 7), 10); + } }) } - /** 一条日程行：时间 + 色点 + 标题 + 日历本标签 */ - @Builder - eventRow(ev: FbCalEvent, isLast: boolean) { - Column({ space: 0 }) { - Row({ space: 10 }) { - Text(ev.allDay ? '全天' : ev.time) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.muted) - .width(44) - FbDot({ dia: 8, fillC: ev.color }) - Text(ev.title) - .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.ink) - .layoutWeight(1) - .maxLines(1) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - Text(ev.calName) - .fontSize(10) - .fontColor(Color.White) - .backgroundColor(ev.color) - .borderRadius(4) - .padding({ left: 5, right: 5, top: 1, bottom: 1 }) - .maxLines(1) - } - .width('100%') - .padding({ top: 11, bottom: 11 }) - .alignItems(VerticalAlign.Center) + /** + * ⚠️ 日程条目行（列表模式）已经搬进 `FbDayEventPanel` 组件里 + * （月/周/列表三处共用同一份 + 跟随"显示方式"设置）—— + * 这里不再保留旧的 `@Builder eventRow`（那是 `@Builder` 值参数不刷新的老写法）。 + */ - if (!isLast) { - Divider() - .color(FbColors.line2) - .margin({ left: 54 }) + /** 只列「显示着的」日历本 */ + private visibleBooks(): FbCalBook[] { + const out: FbCalBook[] = []; + for (const b of this.books) { + if (FB_CAL_SETTINGS.isVisible(b.id)) { + out.push(b); } } - .width('100%') - } - - /** 只列「显示着的」日历本（与 Web 端 Calendar::hiddenCalendars 的反面同口径） */ - private visibleBooks(): FbCalBook[] { - return this.books.filter((b: FbCalBook): boolean => b.visible); - } - - /** 本月事件数（演示数据里用未来七天 + 今天的条数代表示意） */ - private monthEventCount(): number { - return this.todayEvents.length + this.soonEvents.length; + return out; } /** 造「点」的索引数组（ForEach 需要数组，不能直接循环次数） */ @@ -374,87 +1067,4 @@ export struct FbCalendarPage { } return out; } - - /** 网格高度 = 行数 × 行高（6 行时 6×46） */ - private gridHeight(): number { - const rows: number = Math.ceil(this.cells().length / 7); - return rows * 46; - } - - /** - * 生成当月月历格子。 - * - * 周一起始（与 Web 端一致 —— 中文日历习惯周一为第一列）。 - */ - private cells(): FbCalCell[] { - const out: FbCalCell[] = []; - const y: number = this.showYear; - const m: number = this.showMonth; - - const first: Date = new Date(y, m - 1, 1); - // JS 的 getDay(): 0=周日 … 6=周六 ⇒ 换算成「周一为 0」 - const lead: number = (first.getDay() + 6) % 7; - const daysInMonth: number = new Date(y, m, 0).getDate(); - const prevDays: number = new Date(y, m - 1, 0).getDate(); - - const now: Date = new Date(); - const isThisMonth: boolean = now.getFullYear() === y && (now.getMonth() + 1) === m; - - // 前置：上月的尾巴 - for (let i = lead - 1; i >= 0; i--) { - out.push({ - day: prevDays - i, - inMonth: false, - isToday: false, - count: 0, - dotColor: FB_MUTED - }); - } - // 本月 - for (let d = 1; d <= daysInMonth; d++) { - const cnt: number = this.eventCountOf(d, isThisMonth); - out.push({ - day: d, - inMonth: true, - isToday: isThisMonth && now.getDate() === d, - count: cnt, - dotColor: cnt > 0 ? this.accent : FB_FAINT - }); - } - // 补齐到整周（补下月的头） - const tail: number = (7 - (out.length % 7)) % 7; - for (let d = 1; d <= tail; d++) { - out.push({ - day: d, - inMonth: false, - isToday: false, - count: 0, - dotColor: FB_FAINT - }); - } - return out; - } - - /** 某天的日程条数（演示数据：今天取 todayEvents，其余从 soonEvents 的 'MM-DD' 匹配） */ - private eventCountOf(day: number, isThisMonth: boolean): number { - if (!isThisMonth) { - return 0; - } - const now: Date = new Date(); - if (now.getDate() === day) { - return this.todayEvents.length; - } - const mm: string = this.showMonth < 10 - ? '0' + this.showMonth.toString() - : this.showMonth.toString(); - const dd: string = day < 10 ? '0' + day.toString() : day.toString(); - const key: string = mm + '-' + dd; - let n: number = 0; - for (const ev of this.soonEvents) { - if (ev.date === key) { - n++; - } - } - return n; - } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/days/FbDaysPage.ets b/entry/src/main/ets/pages/days/FbDaysPage.ets index 420b869..6a95194 100644 --- a/entry/src/main/ets/pages/days/FbDaysPage.ets +++ b/entry/src/main/ets/pages/days/FbDaysPage.ets @@ -13,9 +13,13 @@ import { FbColors, FbMetric } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; import { FbAnniversaryItem, FbKinChip } from '../../model/Types'; -import { FB_DEMO_ANNIVERSARIES } from '../../model/DemoData'; +import { parseDays } from '../../data/FbParse'; +import { loadModule } from '../../data/FbModuleLoad'; import { FbAvatar, FbEmptyBox, FbIconButton, FbPrimaryButton, FbTag } from '../../components/Widgets'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; +import { fbOnScroll, fbOnTouch, fbOnHScroll } from '../../common/FbScroll'; +import { FbModuleSettingsSheet } from '../../components/FbModuleSettingsSheet'; +import { FB_SET_DAYS } from '../../model/FbSettingsMenus'; @ComponentV2 export struct FbDaysPage { @@ -29,41 +33,95 @@ export struct FbDaysPage { /** 模块主题色（纪念日 = 陶土橙） */ private accent: string = '#B4633C'; - private all: FbAnniversaryItem[] = FB_DEMO_ANNIVERSARIES; + /** + * 模块设置浮层是否打开（右上角三条横线点开的那个）。 + * + * 🔴 用户 2026-10-16：「所有页面的设置按钮全部都改成和网页版一致， + * 就是**三个横线**那种设置按钮。」 + * 网页版的做法：动作区最右一个 ☰ → 点开是**这个模块的设置菜单**。 + */ + @Local settingsOpen: boolean = false; + + @Local all: FbAnniversaryItem[] = []; /** 类别筛选（'' = 全部） */ @Local kindFilter: string = ''; + /** + * 页面出现：先读缓存、再拉接口（本地优先，见 FbModuleRepo 的说明）。 + * + * ⚠️ 不在这里打开本地库 —— `EntryAbility.onCreate` 已统一打开。 + */ + aboutToAppear(): void { + this.load(); + } + + private async load(): Promise { + await loadModule('days', parseDays, + (rows: FbAnniversaryItem[]): 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; + } + build() { - Scroll() { - Column() { - this.topBar() + // 🔴 外层 Stack：**模块设置浮层**要浮在页面之上 + // （本页原来是 Scroll 直接作根，没有 Stack，这里补一层） + Stack({ alignContent: Alignment.Bottom }) { - // ---- 页头 ---- - Row({ space: 8 }) { - Column({ space: 2 }) { - Text('纪念日') - .fontSize(FbMetric.fontTitle) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Text('节日 / 纪念日 / 生日，都在这一条时间线上') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) + Scroll() { + Column() { + this.topBar() + + // ---- 页头 ---- + Row({ space: 8 }) { + Column({ space: 2 }) { + Text('纪念日') + .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') + }) + // 🔴 设置按钮 = 网页版那种**三条横线**（☰）—— 用户 2026-10-16。 + // 点开是本模块的设置菜单（条目照网页版 `templates/<模块>/_settings_menu.php`）。 + FbIconButton({ + icon: $r('app.media.fb_ic_menu'), + tint: FbColors.muted, + onTap: (): void => { + this.settingsOpen = true; + } + }) } - .alignItems(HorizontalAlign.Start) - .layoutWeight(1) + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) + .alignItems(VerticalAlign.Center) - FbPrimaryButton({ - label: '添加', - bg: this.accent, - icon: $r('app.media.fb_ic_plus') - }) - FbIconButton({ icon: $r('app.media.fb_ic_gear'), tint: FbColors.muted }) - } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) - .alignItems(VerticalAlign.Center) - - Scroll() { Column({ space: 0 }) { // ---- 即将到来（30 天内）---- @@ -95,6 +153,8 @@ export struct FbDaysPage { } } .scrollable(ScrollDirection.Horizontal) + // 🔴 横向滚动上报（让抽屉给横滑组件让位）—— 见 common/FbScroll.ets + .onDidScroll(fbOnHScroll) .scrollBar(BarState.Off) .width('100%') // 底部悬浮快捷栏的预留：它浮在内容之上，不留白会压住最后一屏 @@ -138,17 +198,43 @@ export struct FbDaysPage { .width('100%') } .width('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) } .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('#00000066') + .onClick((): void => { + this.settingsOpen = false; + }) + + FbModuleSettingsSheet({ + title: '纪念日设置', + items: FB_SET_DAYS, + onClose: (): void => { + this.settingsOpen = false; + }, + onPick: (action: string): void => { + // 条目里 `action === ''` 的是「暂未开放」（组件里已画灰、点了不响应） + // ⇒ 这里只需处理已实现的；目前都还没有，保持浮层开着即可。 + } + }) + } } .width('100%') .height('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) } /** 即将到来的大数字卡 */ diff --git a/entry/src/main/ets/pages/home/FbHomePage.ets b/entry/src/main/ets/pages/home/FbHomePage.ets index 6dc5fad..498ce47 100644 --- a/entry/src/main/ets/pages/home/FbHomePage.ets +++ b/entry/src/main/ets/pages/home/FbHomePage.ets @@ -1,25 +1,53 @@ /** * 家书 FamilyBook · 首页（鸿蒙端） * - * 对应 Web 端 `templates/home.php`。版面照搬它的三段： - * ① hero（家庭名 + 格言 + 我的资料/家谱两个快捷入口） - * ② 信息面板（问候 + 日期/星期/农历 + 日子标记 ｜ 右侧天气） - * ② 今天的日程 + 近期任务（两块并排；窄屏上下堆叠） - * ④ 「往年的今天」回忆条 - * ⑤ 模块入口卡片（12 个模块的关键数字） + * 对应 Web 端 `templates/home.php`。版面： + * ① 个人信息卡（问候 + 姓名 + 日期/星期/农历 + 日子标记 + 天气 + 近七天数字） + * ② 今天的日程（🔴 **直接用日程页那块面板组件** —— 用户 2026-10-16） + * ③ 近期任务（进行中 + 待办，进行中在前） + * ④ 往年的今天（用户 2026-10-17 要求加，与电脑端同一个逻辑） * - * ⚠️ 只做**界面**，不做交互实现：卡片点了切模块（前端状态），不发请求。 + * 🔴🔴 v54（用户 2026-10-16）—— 第一轮修的四件事： + * 1. 「概述块**太高了**……其实是因为我们调整之后，把家书那条调到上面去了， + * 所以概述块变得特别高。」 + * 根因：`.padding({ bottom: FB_DOCK_RESERVE })`（**96vp** 的底部悬浮栏预留） + * 被接在了「天气地点 + 日子标记」那个小 Flex 上（缩进看着像它的修饰）—— + * 它本该在**页面根部**（给最后一屏留白）。 + * ⇒ 概述卡中间凭空多出 96vp 的空白，卡片被撑得老高。 + * **修法：挪回页面根部的 Column。** + * 2. 「里面的数据好像有些不符，比如**寒露、重阳节、儿子的生日**， + * 这些都是**乱写的**，要用**真实数据**填写一下。」 + * 根因：农历 / 日子标记 / 天气 / 周统计这四样接口**从来没给过** + * （网页版是在 index.php 里算好直接渲染的）⇒ 端上拿 `DemoData` 演示常量顶着。 + * ⇒ 服务端 `/home` 已补齐（见 `ApiHandler::home()`），这里全部改接真实数据。 + * 3. 「**今天的日程**……把今天那个块拿到首页上来就行了。」 + * ⇒ 复用 `FbDayEventPanel`（日程页月/周/列表三处用的同一个组件）， + * 于是时间轴/列表显示方式、冲突并排、当前时间红线在首页**与日程页完全一致**。 + * 4. 「**我的家人、未来7天，还有全部模块**，这几个就是去掉了，不要了。」 + * ⇒ 三个区块连同它们的演示常量一起删掉。 + * + * 🔴🔴 v54b（用户 2026-10-17）—— 第二轮： + * 5. 「概述卡……**日程、在做、待办的数量是错误的**。」 + * 真机实测：接口与端上缓存都是 `{1,3,2,0}`（正确），界面却是 `0/0/0`。 + * 根因：`FbStatTriple` 内部 `@Builder cell(label, value, alarm)` 是**多值参数** + * ⇒ SDK 规则「两个及以上参数不触发刷新」⇒ 永远停在初始的 0。 + * ⇒ 抽 `FbStatCell` **组件**（@Param 参与观察）—— 本项目第 6 次同一类修法。 + * 6. 「近期任务的下面，应该加上**往年的今天**，跟电脑端一样。」 + * ⇒ 服务端把 `home_memories()` 搬成 `Home::memories()`（两端同一份实现）， + * `/home` 给 `memories` 字段，这里加第 ④ 块。 */ -import { FbColors, FbMetric, fbPalette } from '../../common/Theme'; +import { FbColors, FbMetric } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; -import { FbModuleCard, FbCalEvent, FbTaskItem, FbKinChip } from '../../model/Types'; -import { - FB_DEMO_EVENTS_TODAY, FB_DEMO_EVENTS_SOON, FB_DEMO_KIN, FB_DEMO_MARKS, - FB_DEMO_MODULE_CARDS, FB_DEMO_TASKS, FB_DEMO_WEATHER, FB_DEMO_WEEK_STAT -} from '../../model/DemoData'; -import { FbAvatar, FbDot, FbDotLine, FbSectionTitle, FbStatTriple, FbTag } from '../../components/Widgets'; +import { FbCalEvent, FbHomeData, FbMark, FbMemoryItem, FbTaskItem, FbWeather } from '../../model/Types'; +import { parseHome } from '../../data/FbParse'; +import { loadModule } from '../../data/FbModuleLoad'; +import { FB_CAL_SETTINGS, FbCalStyle } from '../../data/FbCalSettings'; +import { FbSectionTitle } from '../../components/Widgets'; +import { FbStatCell } from '../../components/FbStatCell'; +import { FbDayEventPanel } from '../../components/FbDayEventPanel'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; +import { fbOnScroll, fbOnTouch } from '../../common/FbScroll'; @ComponentV2 export struct FbHomePage { @@ -31,10 +59,81 @@ export struct FbHomePage { @BuilderParam topBar: () => void; @Param app: FbAppState = fbAppState(); - private cards: FbModuleCard[] = FB_DEMO_MODULE_CARDS; - private todayEvents: FbCalEvent[] = FB_DEMO_EVENTS_TODAY; - private soonEvents: FbCalEvent[] = FB_DEMO_EVENTS_SOON; - private tasks: FbTaskItem[] = FB_DEMO_TASKS; + // ---------------- 数据（全部来自 `/api/v1/home`）---------------- + /** 今天的日程（服务端已排好：全天在前、其余按时间） */ + @Local todayEvents: FbCalEvent[] = []; + /** 近期任务（进行中在前、待办在后） */ + @Local tasks: FbTaskItem[] = []; + /** 首页问候语 */ + @Local greeting: string = ''; + /** 抬头日期（`10 月 16 日`） */ + @Local todayLabel: string = ''; + /** 星期几（`星期五`） */ + @Local weekday: string = ''; + /** 农历短写（`八月廿二`） */ + @Local lunarShort: string = ''; + /** 日子标记（节气/节日/纪念日/生日） */ + @Local marks: FbMark[] = []; + /** 天气（null = 没配地点 ⇒ 整块不画） */ + @Local weather: FbWeather | null = null; + /** + * 概述卡的四个数字。 + * + * 🔴 v54b：**拆成四个独立的 `@Local number`**，而不是一个 `@Local stat: FbStat` + * 对象。理由（本次真机 bug 的教训）：数字是最可靠被观察的类型； + * 用对象时，刷新链路要经过"对象整体替换 → 子组件 @Param 收到新值"两道， + * 任何一道出问题都表现为"界面永远停在初始的 0"。 + * ⚠️ 拆开之后，四个格子各自只依赖一个 number，链路最短。 + */ + @Local statToday: number = 0; + @Local statDoing: number = 0; + @Local statTodo: number = 0; + @Local statOverdue: number = 0; + /** 往年的今天（`/home` 的 memories） */ + @Local memories: FbMemoryItem[] = []; + /** 顶部提示（同步失败等） */ + @Local syncNote: string = ''; + /** + * 日程显示方式（时间轴 / 列表）—— 与日程页**读同一个设置**。 + * ⚠️ 首页显示"今天的日程"，用户在哪一处把显示方式调了，另一处也该跟着变 + * （它们本来就是同一份数据的不同入口）。 + */ + @Local calStyle: FbCalStyle = 'timeline'; + + aboutToAppear(): void { + // 显示方式来自日程设置（启动时已预载进内存，可同步读） + this.calStyle = FB_CAL_SETTINGS.getStyle(); + this.load(); + } + + /** + * 拉首页数据。 + * + * ⚠️ 首页**只要一个接口**了（v54）—— 原来还要并发拉 `/calendar`（未来七天） + * 和 `/tasks`（任务），因为那两块数据接口没给。 + * 现在服务端 `/home` 把它们都备齐了，少两个请求就是首页更快一截。 + */ + private async load(): Promise { + await loadModule('home', parseHome, + (d: FbHomeData): void => { + this.todayEvents = d.todayEvents; + this.tasks = d.tasks; + this.greeting = d.greeting; + this.todayLabel = d.todayLabel; + this.weekday = d.weekday; + this.lunarShort = d.lunarShort; + this.marks = d.marks; + this.weather = d.weather; + this.statToday = d.stat.todayEvents; + this.statDoing = d.stat.doing; + this.statTodo = d.stat.todo; + this.statOverdue = d.stat.overdue; + this.memories = d.memories; + }, + (note: string): void => { + this.syncNote = note; + }); + } /** 问候语时段（与 Web 端 home.php 里那段 PHP 同口径） */ private hello(): string { @@ -54,24 +153,81 @@ export struct FbHomePage { return '晚上好'; } - /** 今天的日期与星期 */ + /** 日期行：`10 月 16 日 · 星期五`（服务端给的字段；没有就本地算兜底） */ private dateLine(): string { + if (this.todayLabel !== '') { + return this.weekday !== '' ? (this.todayLabel + ' · ' + this.weekday) : this.todayLabel; + } const d: Date = new Date(); - const week: string[] = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; - return (d.getMonth() + 1).toString() + ' 月 ' + d.getDate().toString() + ' 日 · ' - + week[d.getDay()]; + const w: string[] = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; + return (d.getMonth() + 1).toString() + ' 月 ' + d.getDate().toString() + ' 日 · ' + w[d.getDay()]; } - /** 天气图标（按文案粗略映射到已有的几个图标上，不引外部图） */ - private weatherIcon(): Resource { - // TODO(接口)：真实天气码 → 图标映射。现在只区分「有太阳/没太阳」两种。 - return this.weather().text.indexOf('晴') >= 0 - ? $r('app.media.fb_ic_days') - : $r('app.media.fb_ic_calendar'); + /** 天气图标颜色（按服务端给的 tone 分档，与网页版 `.hb-weather.is-*` 一一对应） */ + private weatherTint(): string { + const w: FbWeather | null = this.weather; + const tone: string = w !== null ? w.tone : 'cloud'; + if (tone === 'sunny') { + return '#E8A33D'; + } + if (tone === 'rain') { + return '#3B7FBF'; + } + if (tone === 'snow') { + return '#5AA6B8'; + } + if (tone === 'storm') { + return '#7A5BB5'; + } + if (tone === 'fog') { + return '#8C8C8C'; + } + return '#7C8AA0'; } - private weather() { - return FB_DEMO_WEATHER; + /** + * 日子标记的配色（与网页版 `.hb-mark.is-*` 同一套，抄自 `assets/css/app.css`）。 + * + * ⚠️ 用**具体的背景/前景两色**而不是 `FbTag` 的 tone —— 网页版那五档 + * （holiday 红 / term 绿 / festival 橙 / anniv 紫 / birthday 粉） + * 比 FbTag 现有的四档更细，硬套会丢掉"生日和纪念日不是一回事"这个区分。 + */ + private markBg(kind: string): string { + if (kind === 'holiday') { + return '#FDECEC'; + } + if (kind === 'term') { + return '#EDF4E9'; + } + if (kind === 'festival') { + return '#FDF2E3'; + } + if (kind === 'birthday') { + return '#FDECF3'; + } + return '#F2ECF7'; // anniv 及其它 + } + + private markFg(kind: string): string { + if (kind === 'holiday') { + return '#A8232B'; + } + if (kind === 'term') { + return '#3F6B34'; + } + if (kind === 'festival') { + return '#96551A'; + } + if (kind === 'birthday') { + return '#A03060'; + } + return '#6B4A86'; // anniv 及其它 + } + + /** 当前时刻（当天第几分钟）—— 时间轴画"当前时间红线"用 */ + private nowMinutes(): number { + const d: Date = new Date(); + return d.getHours() * 60 + d.getMinutes(); } build() { @@ -79,7 +235,6 @@ export struct FbHomePage { Column({ space: 0 }) { this.topBar() - // ==================== ① 个人信息卡（问候 + 今天 + 天气）==================== // 🔴 用户 2026-10-12 定的：这一块**要白色卡片**（"这样显得好看"）。 // ⚠️ 曾一度做成"不套卡片的页面头部"，理由是省首屏高度； @@ -107,72 +262,100 @@ export struct FbHomePage { Text(this.dateLine()) .fontSize(FbMetric.fontSmall) .fontColor(FbColors.muted) - Text('八月廿二') - .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.faint) + // 🔴 农历：真实值（接口给）。算不出时**不显示**，不编一个 + if (this.lunarShort !== '') { + Text(this.lunarShort) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + } } } .alignItems(HorizontalAlign.Start) .layoutWeight(1) // 天气：靠右，温度大字 + 文案小字 - Row({ space: 6 }) { - Image(this.weatherIcon()) - .width(26) - .height(26) - .renderMode(ImageRenderMode.Template) - .fillColor(FbColors.brand2) - Column({ space: 0 }) { - Text(this.weather().temp.toString() + '°') - .fontSize(24) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Text(this.weather().text) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.muted) - .maxLines(1) + // ⚠️ 没配地点 / 取不到天气时**整块不画**（与网页版一致）—— + // 画一个"——"占位反而让人以为坏了。 + if (this.weather !== null) { + Row({ space: 6 }) { + Text(this.weather!.icon) + .fontSize(22) + .fontColor(this.weatherTint()) + Column({ space: 0 }) { + Text(this.weather!.temp) + .fontSize(24) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Text(this.weather!.text) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + .maxLines(1) + } + .alignItems(HorizontalAlign.End) } - .alignItems(HorizontalAlign.End) + .alignItems(VerticalAlign.Center) } - .alignItems(VerticalAlign.Center) } .width('100%') .alignItems(VerticalAlign.Top) - // 第二行：天气地点 + 日子标记（节气 / 节日 / 生日） + // 第二行：天气地点 + 日子标记（节气 / 节日 / 纪念日 / 生日） + // 🔴🔴 这里**绝不能**再出现 `FB_DOCK_RESERVE` 的 padding —— + // 它 96vp，接在这会把这个小方块撑成一大片空白（v54 修的那个"概述块太高"）。 Column({ space: 6 }) { - Text(this.weather().place + ' · ' + this.weather().wind) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - .maxLines(1) + if (this.weather !== null && (this.weather!.place !== '' || this.weather!.wind !== '')) { + Text(this.weatherLine()) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .maxLines(1) + .width('100%') + } + + // 日子标记：今天是什么节气/节日/纪念日/谁的生日（真实数据） + if (this.marks.length > 0) { + Flex({ wrap: FlexWrap.Wrap }) { + ForEach(this.marks, (mk: FbMark, idx: number) => { + Text(mk.word) + .fontSize(FbMetric.fontTiny) + .fontColor(this.markFg(mk.kind)) + .backgroundColor(this.markBg(mk.kind)) + .borderRadius(FbMetric.radiusPill) + .padding({ left: 9, right: 9, top: 2, bottom: 2 }) + .margin({ right: 6, top: 2 }) + }, (mk: FbMark, idx: number): string => 'mk_' + idx.toString() + '_' + mk.word) + } .width('100%') - - Flex({ wrap: FlexWrap.Wrap }) { - ForEach(FB_DEMO_MARKS, (mk: string, idx: number) => { - FbTag({ text: mk, tone: idx === 0 ? 'green' : 'brand' }) - .margin({ right: 6, top: 2 }) - }, (mk: string, idx: number): string => 'mk_' + idx.toString() + '_' + mk) } - .width('100%') - // 底部悬浮快捷栏的预留：它浮在内容之上，不留白会压住最后一屏 - .padding({ bottom: FB_DOCK_RESERVE }) } .width('100%') .alignItems(HorizontalAlign.Start) - // 第三行：三个数字（未来七天日程 / 待办 / 逾期）—— - // 贴在卡片底部，作为"今天要不要操心的快速判断" - // （卡片内用浅分隔线分开，视觉上比留白更"有层次"） + // 第三行：四个数字（**与网页版 `hb-stats` 同源**） + // `N 条日程（今天）· N 件在做 · N 件待办 · N 件逾期` + // 🔴 用户 2026-10-16：「下面……**未来7天**……这几个就是去掉了，不要了。」 + // ⇒ 原来这里有"未来七天"那一格（today..+7 天的条数），已去掉； + // 换成与网页版一样的口径（网页版概述卡本来也是这四个）。 + // + // 🔴🔴 v54b（用户 2026-10-17）：「里面的**日程、在做、待办的数量是错误的**」 + // 真机实测：接口与端上缓存里都是 `{today_events:1, doing:3, todo:2}`（正确）， + // 而界面显示 `0 / 0 / 0` —— 同一份数据里「今天的日程 1 条」却是对的。 + // 根因：原来是 `FbStatTriple`，它内部用 + // `@Builder cell(label, value, alarm)` —— **多值参数**， + // SDK 规则明写「**两个及以上参数不触发刷新**」 + // ⇒ 初始渲染的 0 永远不会被后来的真实值替换。 + // （本项目第 6 次踩同一个坑：@Builder 值参数不参与状态观察。） + // ⇒ 抽成 **`FbStatCell` 组件**（@ComponentV2 + @Param，@Param 参与观察） + // —— 与 `FbEventChip` / `FbCalOptionRow` / `FbTagPickChip` 同一套修法。 + // ⚠️ 不要改回 `@Builder cell(...)`；也不要用**本页的 @Builder**（同样是按值传递）。 Divider().color(FbColors.line2) - FbStatTriple({ - labelA: '未来七天', - valueA: FB_DEMO_WEEK_STAT.events.toString(), - labelB: '待办', - valueB: FB_DEMO_WEEK_STAT.todos.toString(), - labelC: '逾期', - valueC: FB_DEMO_WEEK_STAT.overdue.toString(), - cAlarm: FB_DEMO_WEEK_STAT.overdue > 0 - }) + Row() { + FbStatCell({ value: this.statToday, label: '今天日程' }) + FbStatCell({ value: this.statDoing, label: '在做' }) + FbStatCell({ value: this.statTodo, label: '待办' }) + FbStatCell({ value: this.statOverdue, label: '逾期', alarm: true }) + } + .width('100%') + .padding({ top: 10, bottom: 10 }) } // 🔴 不要 `.width('100%')` —— 它会先把宽度占满，导致后面的 margin 失效， // 卡片于是**顶到屏幕两侧边缘**（实测 x=0..1080），而别的区块是留边 16vp 的， @@ -189,166 +372,106 @@ export struct FbHomePage { }) .alignItems(HorizontalAlign.Start) - // ==================== ② 今天的日程 + 近期任务 ==================== + // ==================== ② 今天的日程 ==================== + // 🔴 用户 2026-10-16：「今天的日程，现在显示的是日程里面的展示内容。 + // 把**今天那个块**拿到首页上来就行了。」 + // ⇒ 直接用日程页那块面板组件（月/周/列表三处用的同一个）—— + // 于是显示方式（时间轴/列表）、冲突横向并排、当前时间红线 + // 在首页与日程页**完全一致**，不会再出现"两个地方长得不一样"。 + // ⚠️ 面板自带卡片样式与外边距，这里**不要再套一层卡片**。 + // ⚠️ `showHead: false` —— 本页已有 `FbSectionTitle`，两个头会重复。 + // ⚠️ 空态文案也换掉：首页没有"右下角 ＋"那个按钮。 + FbSectionTitle({ title: '今天的日程', extra: this.todayEvents.length.toString() + ' 条' }) + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 }) + + FbDayEventPanel({ + label: this.todayEvents.length > 0 ? '今天' : '', + events: this.todayEvents, + style: this.calStyle, + isToday: true, + nowMin: this.nowMinutes(), + showHead: false, + emptyTitle: '今天没有安排', + emptyHint: '过得轻松一点', + onPick: (e: FbCalEvent): void => { + // 点条目 ⇒ 切到日程模块（首页不做就地编辑：那是日程页的职责） + this.app.switchModule('calendar'); + } + }) + + // ==================== ③ 近期任务 ==================== Column({ space: 0 }) { - FbSectionTitle({ title: '今天的日程', extra: this.todayEvents.length.toString() + ' 条' }) - Column({ space: 10 }) { - if (this.todayEvents.length === 0) { - FbDotLine({ label: '今天没有安排，过得轻松一点', muted: true }) + FbSectionTitle({ title: '近期任务', extra: this.taskExtra() }) + Column({ space: 0 }) { + if (this.tasks.length === 0) { + Row() { + Text('没有进行中的任务，也没有待办。') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + } + .width('100%') + .padding({ top: 12, bottom: 12 }) } else { - ForEach(this.todayEvents, (ev: FbCalEvent) => { - Row({ space: 10 }) { - Text(ev.allDay ? '全天' : ev.time) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.muted) - .width(46) - Column() { - FbDot({ dia: 8, fillC: ev.color }) - } - .width(8) - - Text(ev.title) - .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.ink) - .layoutWeight(1) - .maxLines(1) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - - Text(ev.calName) - .fontSize(10) - .fontColor(Color.White) - .backgroundColor(ev.color) - .borderRadius(4) - .padding({ left: 5, right: 5, top: 1, bottom: 1 }) - } - .width('100%') - .alignItems(VerticalAlign.Center) - }, (ev: FbCalEvent): string => 'tev_' + ev.id.toString()) + ForEach(this.tasks, (t: FbTaskItem, idx: number) => { + this.taskRow(t, idx === this.tasks.length - 1) + }, (t: FbTaskItem, idx: number): string => 'htk_' + t.id.toString()) } } .width('100%') - .padding(FbMetric.cardPad) + .padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, top: 4, bottom: 6 }) .backgroundColor(FbColors.surface) .borderRadius(FbMetric.radius) } .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 8 }) + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 }) + // ==================== ④ 往年的今天 ==================== + // 🔴 用户 2026-10-17：「近期任务的下面，应该加上**往年的今天**， + // 跟电脑端一样，你看看那个是什么逻辑。」 + // ⇒ 位置**就在近期任务下面**（用户明确指定，不是"放在首页某处"）。 + // 电脑端的逻辑见 `App\Home::memories()`：只认**往年的同一天** + // （不退回同月），来源是「看过的电影」+「走过的**实际行程**」， + // 合并按时间倒序取 6 条。 + // ⚠️ 数据来自 `/home` 的 `memories` —— 与网页版**同一份实现**， + // 不要端上自己再查一遍（会出现"网页 2 年前、手机 3 年前"）。 Column({ space: 0 }) { FbSectionTitle({ - title: '近期任务', - extra: '进行中与已逾期' + title: '往年的今天', + extra: this.todayLabel !== '' ? this.todayLabel : '' }) - Column({ space: 10 }) { - ForEach(this.recentTasks(), (t: FbTaskItem) => { - Row({ space: 10 }) { - FbDot({ dia: 8, fillC: t.overdue ? '#C0533F' : t.boardColor }) - - Text(t.title) + Column({ space: 0 }) { + if (this.memories.length === 0) { + // 空态与网页版一字不差（两句：一句说没有，一句给个盼头） + Column({ space: 6 }) { + Text('往年的这一天还没有记录') .fontSize(FbMetric.fontSmall) .fontColor(FbColors.ink) - .layoutWeight(1) - .maxLines(1) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - - if (t.childTotal > 0) { - Text(t.childDone.toString() + '/' + t.childTotal.toString()) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - } - if (t.dueText.length > 0) { - Text(t.dueText) - .fontSize(FbMetric.fontTiny) - .fontColor(t.overdue ? FbColors.red : FbColors.faint) - } - } - .width('100%') - .alignItems(VerticalAlign.Center) - }, (t: FbTaskItem): string => 'htk_' + t.id.toString()) - } - .width('100%') - .padding(FbMetric.cardPad) - .backgroundColor(FbColors.surface) - .borderRadius(FbMetric.radius) - } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 }) - - // ==================== ③ 我的家人 ==================== - Column({ space: 0 }) { - FbSectionTitle({ title: '我的家人', extra: '以我为中心 · 上下三代' }) - Flex({ wrap: FlexWrap.Wrap }) { - ForEach(FB_DEMO_KIN, (k: FbKinChip) => { - Column({ space: 4 }) { - FbAvatar({ name: k.shown, color: k.avatarColor, dia: 42, fontSizeVp: 17 }) - Text(k.shown) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.ink) - .maxLines(1) - Text(k.kinship) - .fontSize(10) - .fontColor(FbColors.faint) - .maxLines(1) - } - .width(64) - .padding({ top: 6, bottom: 6 }) - }, (k: FbKinChip): string => 'kin_' + k.id.toString()) - } - .width('100%') - .padding(FbMetric.cardPad) - .backgroundColor(FbColors.surface) - .borderRadius(FbMetric.radius) - } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 }) - - // ==================== ④ 未来七天 ==================== - Column({ space: 0 }) { - FbSectionTitle({ title: '未来七天', extra: this.soonEvents.length.toString() + ' 条' }) - Column({ space: 10 }) { - ForEach(this.soonEvents, (ev: FbCalEvent) => { - Row({ space: 10 }) { - Text(ev.date) + Text('日子还长，等有了第一次，明年这时候就会自己冒出来。') .fontSize(FbMetric.fontTiny) .fontColor(FbColors.muted) - .width(44) - Text(ev.allDay ? '全天' : ev.time) - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - .width(40) - FbDot({ dia: 7, fillC: ev.color }) - Text(ev.title) - .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.ink) - .layoutWeight(1) - .maxLines(1) - .textOverflow({ overflow: TextOverflow.Ellipsis }) } .width('100%') - .alignItems(VerticalAlign.Center) - }, (ev: FbCalEvent): string => 'sev_' + ev.id.toString()) + .alignItems(HorizontalAlign.Start) + .padding({ top: 12, bottom: 12 }) + } else { + ForEach(this.memories, (m: FbMemoryItem, idx: number) => { + this.memoryRow(m, idx === this.memories.length - 1) + }, (m: FbMemoryItem, idx: number): string => 'mem_' + m.kind + '_' + m.id.toString()) + } } .width('100%') - .padding(FbMetric.cardPad) + .padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, top: 4, bottom: 6 }) .backgroundColor(FbColors.surface) .borderRadius(FbMetric.radius) } .width('100%') .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 }) - // ==================== ⑤ 模块入口 ==================== - Column({ space: 0 }) { - FbSectionTitle({ title: '全部模块', extra: this.cards.length.toString() + ' 个' }) - - Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) { - ForEach(this.cards, (c: FbModuleCard) => { - this.moduleCard(c) - }, (c: FbModuleCard): string => 'mc_' + c.key) - } - .width('100%') - } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 28 }) + // 🔴🔴 **底部悬浮快捷栏的预留** —— 它必须留在**页面最根部**。 + // v54 之前它被接在了概述卡中间那个小 Flex 上（96vp 凭空撑高卡片）， + // 真正的页面底部反而没有留白、被悬浮栏压住最后一屏。 + // ⚠️ 别再把它挪到任何中间区块上。 + Blank().height(FB_DOCK_RESERVE) } .width('100%') } @@ -356,72 +479,168 @@ export struct FbHomePage { .height('100%') .scrollBar(BarState.Off) .edgeEffect(EdgeEffect.Spring) + // 🔴 滚动方向上报（驱动底部悬浮栏随滚收起 / 唤回）—— 见 common/FbScroll.ets + .onDidScroll(fbOnScroll) + + // 🔴 触摸方向兜底（内容不足一屏的页面滚不动，只能靠手指位移判断） + // 与上面的 `onDidScroll` 互补、互不冲突 —— 见 common/FbScroll.ets + .onTouch(fbOnTouch) .align(Alignment.TopStart) } - /** 一块模块入口卡（图标 + 模块名 + 一句关键数字） */ + /** 天气地点行：`青岛市 · 崂山区 · 东南风 12 km/h` */ + private weatherLine(): string { + const w: FbWeather | null = this.weather; + if (w === null) { + return ''; + } + const parts: string[] = []; + if (w.place !== '') { + parts.push(w.place); + } + if (w.tmax !== '' || w.tmin !== '') { + parts.push(w.tmax + ' / ' + w.tmin); + } + if (w.wind !== '') { + parts.push(w.wdir !== '' ? (w.wdir + ' ' + w.wind) : w.wind); + } + return parts.join(' · '); + } + + /** 「近期任务」右上角小字：`3 件在做 · 5 件待办`（进行中与待办**分开数**） */ + private taskExtra(): string { + let doing: number = 0; + let todo: number = 0; + for (const t of this.tasks) { + if (t.status === 'doing') { + doing++; + } else { + todo++; + } + } + if (todo > 0) { + return doing.toString() + ' 件在做 · ' + todo.toString() + ' 件待办'; + } + return doing.toString() + ' 件在做'; + } + + /** + * 一条任务（首页版）。 + * + * 🔴 与网页版首页同一套信息：圆点（看板色，逾期变红）+ 标题 + **状态词** + * （用户第 3 条：「除了显示任务的标题之外，还要显示他的状态」） + * + 子任务进度 + 截止时间。 + * ⚠️ 看板色**必须**用真实派生色（`boardColor`）—— 用户 2026-10-08 报过 + * 「首页近期任务……颜色并没有跟看板颜色一致」。 + */ @Builder - moduleCard(c: FbModuleCard) { - Column({ space: 8 }) { - Row({ space: 8 }) { - Image(this.cardIcon(c.key)) - .width(18) - .height(18) - .renderMode(ImageRenderMode.Template) - .fillColor(fbPalette(c.color).brand) - Text(c.name) + taskRow(t: FbTaskItem, isLast: boolean) { + Column({ space: 0 }) { + Row({ space: 10 }) { + // 圆点：逾期用红（状态语义优先），否则跟看板色 + Row() + .width(8) + .height(8) + .borderRadius(4) + .backgroundColor(t.overdue ? '#C0533F' : t.boardColor) + + Text(t.title) + .fontSize(FbMetric.fontSmall) + .fontColor(t.overdue ? '#C0533F' : FbColors.ink) + .layoutWeight(1) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + + // 状态词（待办 / 进行中）—— 用户第 3 条要求 + Text(t.status === 'doing' ? '进行中' : '待办') + .fontSize(10) + .fontColor(t.status === 'doing' ? '#A8574F' : FbColors.faint) + .backgroundColor(t.status === 'doing' ? '#14A8574F' : FbColors.inputBg) + .borderRadius(FbMetric.radiusPill) + .padding({ left: 6, right: 6, top: 1, bottom: 1 }) + + if (t.childTotal > 0) { + Text(t.childDone.toString() + '/' + t.childTotal.toString()) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } + if (t.dueText.length > 0) { + Text(t.dueText) + .fontSize(FbMetric.fontTiny) + .fontColor(t.overdue ? '#C0533F' : FbColors.faint) + } + } + .width('100%') + .padding({ top: 11, bottom: 11 }) + .alignItems(VerticalAlign.Center) + + if (!isLast) { + Divider() + .color(FbColors.line2) + .margin({ left: 18 }) + } + } + .width('100%') + } + + /** + * 一条「往年的今天」。 + * + * 形态照网页版 `templates/home.php` 的 `.dash-row`： + * 圆点（旅程=绿 #3F7D5A / 观影=紫 #7A4E8C）→「N 年前」→ 🧳/🎬 + 标题 → 日期。 + * + * ⚠️ 这里是 `@Builder` 带 **2 个参数** —— 与本次概述卡数字那个 bug 同一个反模式。 + * 但两者的**后果不同**：本区块的数据（`this.memories`）是在页面首次加载后 + * 随其它字段一起到的，且整块由 `ForEach` 按 `m.id` 重建 + * （数据变化 ⇒ 列表项增删 ⇒ 走 ForEach 的重建路径，不依赖 Builder 参数刷新）。 + * ⚠️ 若将来出现"memories 变了、这一行文字没变"的现象，**先改成组件** + * （参照 `FbStatCell`），不要在这个 Builder 上打补丁。 + */ + @Builder + memoryRow(m: FbMemoryItem, isLast: boolean) { + Column({ space: 0 }) { + Row({ space: 10 }) { + // 圆点：两类的颜色与网页版一致（旅程绿 / 观影紫） + Row() + .width(8) + .height(8) + .borderRadius(4) + .backgroundColor(m.kind === 'trip_node' ? '#3F7D5A' : '#7A4E8C') + + // 「N 年前」 + Text(m.yearsAgo.toString() + ' 年前') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + .width(52) + + // 🧳 / 🎬 + 标题 + Text((m.kind === 'trip_node' ? '🧳 ' : '🎬 ') + m.title) .fontSize(FbMetric.fontSmall) - .fontWeight(FontWeight.Medium) .fontColor(FbColors.ink) .layoutWeight(1) .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + + // 那天的日期（`YYYY-MM-DD`） + Text(this.memoryDate(m.startsAt)) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) } .width('100%') + .padding({ top: 11, bottom: 11 }) .alignItems(VerticalAlign.Center) - Text(c.big) - .fontSize(20) - .fontWeight(FontWeight.Medium) - .fontColor(fbPalette(c.color).brand) - .maxLines(1) - - Text(c.lines.length > 0 ? c.lines[0] : '') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - .maxLines(1) - .textOverflow({ overflow: TextOverflow.Ellipsis }) + if (!isLast) { + Divider() + .color(FbColors.line2) + .margin({ left: 18 }) + } } - .width('48.5%') - .padding(14) - .backgroundColor(FbColors.surface) - .borderRadius(FbMetric.radius) - .margin({ bottom: 10 }) - .alignItems(HorizontalAlign.Start) - .onClick(() => { - this.app.switchModule(c.key); - }) + .width('100%') } - /** 卡片图标（按模块 key 取） */ - private cardIcon(key: string): Resource { - switch (key) { - case 'people': return $r('app.media.fb_ic_people'); - case 'kin': return $r('app.media.fb_ic_kin'); - case 'movies': return $r('app.media.fb_ic_movies'); - case 'trips': return $r('app.media.fb_ic_trips'); - case 'calendar': return $r('app.media.fb_ic_calendar'); - case 'resources': return $r('app.media.fb_ic_resources'); - case 'tasks': return $r('app.media.fb_ic_tasks'); - case 'days': return $r('app.media.fb_ic_days'); - case 'ledger': return $r('app.media.fb_ic_ledger'); - case 'books': return $r('app.media.fb_ic_books'); - case 'notes': return $r('app.media.fb_ic_notes'); - default: return $r('app.media.fb_ic_home'); - } - } - - /** 首页只放「进行中 + 已逾期」两类任务（与 Web 端同一取舍） */ - private recentTasks(): FbTaskItem[] { - return this.tasks.filter((t: FbTaskItem): boolean => t.status === 'doing' || t.overdue); + /** `YYYY-MM-DD HH:MM:SS` → `YYYY-MM-DD`（只取日期，与网页版 `substr(...,0,10)` 一致） */ + private memoryDate(s: string): string { + return s.length >= 10 ? s.substring(0, 10) : s; } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/ledger/FbLedgerPage.ets b/entry/src/main/ets/pages/ledger/FbLedgerPage.ets index 8022bba..cc225ba 100644 --- a/entry/src/main/ets/pages/ledger/FbLedgerPage.ets +++ b/entry/src/main/ets/pages/ledger/FbLedgerPage.ets @@ -16,12 +16,15 @@ import { FbColors, FbMetric } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; -import { FbGroup, FbLedgerBook, FbLedgerEntry } from '../../model/Types'; -import { - FB_DEMO_LEDGER_BOOKS, FB_DEMO_LEDGER_ENTRIES, fbLedgerKindName, fbMoney -} from '../../model/DemoData'; +import { FbGroup, FbLedgerBook, FbLedgerEntry, FbLedgerDetail} from '../../model/Types'; +import { fbLedgerKindName, fbMoney } from '../../model/DemoData'; +import { parseLedger, parseLedgerEntries } from '../../data/FbParse'; +import { loadModule, loadPath } from '../../data/FbModuleLoad'; import { FbEmptyBox, FbIconButton, FbPrimaryButton, FbTag } from '../../components/Widgets'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; +import { fbOnScroll, fbOnTouch, fbOnHScroll } from '../../common/FbScroll'; +import { FbModuleSettingsSheet } from '../../components/FbModuleSettingsSheet'; +import { FB_SET_LEDGER } from '../../model/FbSettingsMenus'; @ComponentV2 export struct FbLedgerPage { @@ -35,45 +38,139 @@ export struct FbLedgerPage { /** 模块主题色（财务 = 橄榄绿） */ private accent: string = '#5E7A3C'; - private books: FbLedgerBook[] = FB_DEMO_LEDGER_BOOKS; - private entries: FbLedgerEntry[] = FB_DEMO_LEDGER_ENTRIES; + /** + * 账本列表（`/api/v1/ledger`）。 + * ⚠️ 初值空数组：先渲染假数据会"闪一下"。 + */ + /** + * 模块设置浮层是否打开（右上角三条横线点开的那个）。 + * + * 🔴 用户 2026-10-16：「所有页面的设置按钮全部都改成和网页版一致， + * 就是**三个横线**那种设置按钮。」 + * 网页版的做法：动作区最右一个 ☰ → 点开是**这个模块的设置菜单**。 + */ + @Local settingsOpen: boolean = false; + + @Local books: FbLedgerBook[] = []; + /** 当前这本账的明细（`/ledger//entries`） */ + @Local entries: FbLedgerEntry[] = []; + /** 顶部提示（同步失败 / 未登录） */ + @Local syncNote: string = ''; /** 当前账本 id（0 = 用第一本） */ @Local bookId: number = 0; - build() { - Scroll() { - Column() { - this.topBar() + /** + * 页面出现：**两级加载**。 + * + * ⚠️ 账本必须走两级：`/ledger`（有哪些本）→ `/ledger//entries`（明细 + 汇总）。 + * 净资产只在这第二级里 ⇒ 拿到第一本之后要立刻拉一次明细。 + */ + aboutToAppear(): void { + this.load(); + } - // ---- 页头 ---- - Row({ space: 8 }) { - Column({ space: 2 }) { - Text(this.currentBook().name) - .fontSize(FbMetric.fontTitle) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Text(this.books.length.toString() + ' 本账 · ' - + this.currentBook().entryCount.toString() + ' 条账目') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - } - .alignItems(HorizontalAlign.Start) - .layoutWeight(1) - - FbPrimaryButton({ - label: '记一笔', - bg: this.accent, - icon: $r('app.media.fb_ic_plus') - }) - FbIconButton({ icon: $r('app.media.fb_ic_gear'), tint: FbColors.muted }) + private async load(): Promise { + await loadModule('ledger', parseLedger, + (rows: FbLedgerBook[]): void => { + this.books = rows; + // 选中当前本（没选过就用第一本） + let target: number = this.bookId; + if (target <= 0 && rows.length > 0) { + target = rows[0].id; + this.bookId = target; } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) - .alignItems(VerticalAlign.Center) + if (target > 0) { + this.loadEntries(target); + } + }, + (note: string): void => { + this.syncNote = note; + }); + } - // ---- 账本切换（横向）---- - Scroll() { + /** 拉某本账的明细（含汇总） */ + private async loadEntries(id: number): Promise { + // ⚠️ 用 `loadPath`（路径带 id，没法登记在静态模块表里）。 + const key: string = 'ledger_detail_' + id.toString(); + await loadPath(key, '/api/v1/ledger/' + id.toString() + '/entries', + parseLedgerEntries, + (d: FbLedgerDetail): void => { + this.entries = d.entries; + // ⚠️ 净资产写回**这本账**（页面的 `netCent()` 是从 `currentBook()` 上取的）。 + // 概览接口不返回 net，所以这里补上 —— 不新增页面字段， + // 避免和已有的 `netCent()` 方法重名（实测撞过一次）。 + for (const bk of this.books) { + if (bk.id === id) { + bk.netCent = d.netCent; + } + } + }, + (note: string): void => { + this.syncNote = note; + }); + } + + + /** + * 设置浮层开着 ⇒ 让底部悬浮快捷栏让位。 + * + * 🔴 悬浮栏在**更外层 Index 的 Stack** 里，层级比本页高 ⇒ + * 浮层底部的按钮会被它盖住、点击被抢走（名册/日程页都踩过）。 + */ + @Monitor('settingsOpen') + onSettingsChanged(): void { + fbAppState().sheetCount = this.settingsOpen ? 1 : 0; + } + + build() { + // 🔴 外层 Stack：**模块设置浮层**要浮在页面之上 + // （本页原来是 Scroll 直接作根，没有 Stack，这里补一层） + Stack({ alignContent: Alignment.Bottom }) { + + Scroll() { + Column() { + this.topBar() + + // ---- 页头 ---- Row({ space: 8 }) { + Column({ space: 2 }) { + Text(this.currentBook().name) + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Text(this.books.length.toString() + ' 本账 · ' + + this.currentBook().entryCount.toString() + ' 条账目') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + + FbPrimaryButton({ + label: '记一笔', + bg: this.accent, + icon: $r('app.media.fb_ic_plus') + }) + // 🔴 设置按钮 = 网页版那种**三条横线**（☰）—— 用户 2026-10-16。 + // 点开是本模块的设置菜单（条目照网页版 `templates/<模块>/_settings_menu.php`）。 + FbIconButton({ + icon: $r('app.media.fb_ic_menu'), + tint: FbColors.muted, + onTap: (): void => { + this.settingsOpen = true; + } + }) + } + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) + .alignItems(VerticalAlign.Center) + + // ---- 账本切换（横向滚动条）---- + // ⚠️ 这层 `Scroll` **必须保留**：它是**横向**滚动（账本多时排不下）。 + // 它与"页面纵向滚动"是两码事，不能被拍平（拍平会整条挤在一起）。 + // 也**不挂** `fbOnScroll` —— 横向滚动不该影响纵向的悬浮栏收起逻辑。 + Scroll() { + Row({ space: 8 }) { ForEach(this.books, (b: FbLedgerBook) => { Row({ space: 6 }) { Text(b.name) @@ -95,15 +192,16 @@ export struct FbLedgerPage { this.bookId = b.id; }) }, (b: FbLedgerBook): string => 'bk_' + b.id.toString()) + } + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad }) } - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad }) - } - .scrollable(ScrollDirection.Horizontal) - .scrollBar(BarState.Off) - .width('100%') - .padding({ bottom: 10 }) + .scrollable(ScrollDirection.Horizontal) + // 🔴 横向滚动上报（让抽屉给横滑组件让位）—— 见 common/FbScroll.ets + .onDidScroll(fbOnHScroll) + .scrollBar(BarState.Off) + .width('100%') + .padding({ bottom: 10 }) - Scroll() { Column({ space: 0 }) { // ---- 概览卡 ---- @@ -234,17 +332,43 @@ export struct FbLedgerPage { .width('100%') } .width('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) } .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('#00000066') + .onClick((): void => { + this.settingsOpen = false; + }) + + FbModuleSettingsSheet({ + title: '账本设置', + items: FB_SET_LEDGER, + onClose: (): void => { + this.settingsOpen = false; + }, + onPick: (action: string): void => { + // 条目里 `action === ''` 的是「暂未开放」（组件里已画灰、点了不响应） + // ⇒ 这里只需处理已实现的；目前都还没有，保持浮层开着即可。 + } + }) + } } .width('100%') .height('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) } /** 一条账目：名字 + 归属人 + 金额 + 盘点入口 */ diff --git a/entry/src/main/ets/pages/login/FbLoginPage.ets b/entry/src/main/ets/pages/login/FbLoginPage.ets new file mode 100644 index 0000000..9701cc0 --- /dev/null +++ b/entry/src/main/ets/pages/login/FbLoginPage.ets @@ -0,0 +1,674 @@ +/** + * 家书 FamilyBook · 登录页（鸿蒙端） + * + * 完整链路（用户 2026-10-17「完整的登录功能」）： + * ① 第一次打开 → **输入服务器地址** → `GET /api/v1/ping` 验"这上面真是家书"； + * ② 验通了把地址**持久化** → 第二步输「账号 + 密码」； + * ③ `POST /api/v1/login` → 拿到 API 令牌 → 存进 `FbTokenStore`； + * ④ **立刻全量同步**（12 个模块，带实时进度）→ 进主界面； + * ⑤ 之后每个请求都由 `fbApi()` 自动带上 `Authorization: Bearer ` + * （见 `FbHttp.fbApi`，令牌不在各页面里各传一遍）。 + * + * 🔴 为什么地址要问用户，而不是写死在代码里（v55 的核心改动）： + * 写死意味着这个 App 只能连我们自己那一台 —— 别人装上去就是 + * "登录永远失败"，而且**连失败原因都看不到**（他甚至不知道地址能改）。 + * ⇒ 地址是运行期配置（`FbServerStore`），第一次问一次，之后一直用。 + * + * 🔴 为什么第二步既认手机号也认用户名： + * 一家人里老人记不住手机号，但记得住自己叫什么。服务端 `login` 两步查找 + * （先手机号哈希、再姓名），重名时明确要求改用手机号（见 ApiHandler 的说明）。 + * + * 🔴 三种进入方式（都要有，别只做第一种）： + * ① **登录**：地址 + 账号密码（正常路径）； + * ② **先不登录**：本地优先架构下，没令牌照样能看已同步的数据。 + * 把用户堵在登录页是**错的**（他可能只是没网，或家里老人不需要同步）； + * ③ 已登录（令牌还在）时**根本不显示本页**（在 Index 里就分流掉了）。 + * + * ⚠️ 密码**不做任何本地缓存**：只在提交那一刻用一次，用完立刻清 + * （连变量都尽量短命）。App 里唯一要留的是**令牌**。 + * ⚠️ 换服务器 = 换了一台机器，旧令牌在新机器上无效 —— + * 所以设置页的「更换服务器」会连带清掉令牌（见 FbSettingsPage）。 + */ + +import { FbColors, FbMetric } from '../../common/Theme'; +import { FbAppState, fbAppState } from '../../common/Store'; +import { FbLoginClient, FbLoginResult } from '../../data/FbLogin'; +import { FB_DEFAULT_SERVER, fbProbeServer, FbProbeResult } from '../../data/FbHttp'; +import { FB_SERVER_STORE, fbNormalizeServer, fbServerLooksValid } from '../../data/FbServerStore'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { common } from '@kit.AbilityKit'; +// ⚠️ `KeyboardAvoidMode` 有两个同名枚举： +// · `component/common.d.ts` 里的（DEFAULT/NONE）； +// · `@ohos.arkui.UIContext` 里的（OFFSET/RESIZE/NONE）—— **setKeyboardAvoidMode 要的是这个**。 +// 两者同名但不同型，不导入就会报 "not assignable to parameter of type"。 +import { KeyboardAvoidMode } from '@kit.ArkUI'; +import { FB_TOKEN_STORE } from '../../data/FbTokenStore'; +import { FbSyncAllResult, syncAll } from '../../data/FbSyncAll'; +// ⚠️ 注意与 `model/Types` 里的 `FbSession`（数据模型）不是一回事： +// 这个 `FB_SESSION` 是**会话状态机**（校验/离线计时），见 data/FbSession.ets +import { FB_SESSION } from '../../data/FbSession'; +import { FbAccount, FbSession } from '../../model/Types'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbLoginPage'; + +/** + * 登录后"原地等同步"的上限（毫秒）。 + * + * 🔴 为什么要有个上限（而不是一直等同步跑完）： + * 12 个模块最坏情况要几分钟（每模块自带 20 秒网络超时）。 + * 让用户在登录页盯着转圈几分钟，跟"卡死"没有区别。 + * ⇒ 15 秒还没完就**放他进去**（数据在后台继续落地，本地优先架构本就能这么干）， + * 同时给一个「立即进入」让他自己决定要不要等。 + */ +const SYNC_WAIT_MS: number = 15000; + +@ComponentV2 +export struct FbLoginPage { + /** + * 全局状态（只为拿**状态栏高度**——应用开了全屏布局， + * 登录页也要自己给状态栏让位，见 `build()` 里品牌区的 padding）。 + */ + @Param app: FbAppState = fbAppState(); + /** 登录成功回调（由 Index 传入：进主界面） */ + @Event onLoggedIn: () => void = (): void => { + }; + /** 「先不登录」回调（不登录也进主界面） */ + @Event onSkip: () => void = (): void => { + }; + /** + * 从第几步开始（0 = 按本地有没有地址自动决定）。 + * + * 由 `Index` 从 `FbAppState.loginStartStep` 传进来 —— + * 设置页点「更换服务器」是 1（连地址一起换），点「退出登录」是 2（地址还留着）。 + * ⚠️ 它是 `@Param`：只在组件**创建**时参与 `aboutToAppear`， + * 运行中改它不会把用户从第二步弹回第一步（那正是我们要的）。 + */ + @Param startStep: number = 0; + + /** + * 🔴 v57（用户 2026-10-17）：是否允许「先不登录 / 离线使用」。 + * + * `true` = 从没登录过（首次使用）—— 本地优先，不该把人堵在登录页； + * `false` = 被服务端踢了、或用户主动退出登录 —— + * 用户原话：「退到登录页面之后，里面所有的资源、所有的内容都是不允许看的。」 + * ⇒ 这时候留一个"先不登录"按钮，等于给安全策略开了个后门。 + * + * ⚠️ `@Param` 由 `Index` 按 `app.lockReason === ''` 决定，登录页自己不改它。 + */ + @Param allowSkip: boolean = true; + + /** 当前步骤：1 = 填服务器地址，2 = 填账号密码 */ + @Local step: number = 1; + /** 服务器地址输入框 */ + @Local serverInput: string = ''; + /** 账号（手机号或用户名） */ + @Local account: string = ''; + @Local password: string = ''; + /** 是否正在提交（提交中禁用按钮，避免重复请求） */ + @Local busy: boolean = false; + /** 错误提示（空串 = 无） */ + @Local error: string = ''; + /** 探测通过后服务端自报的应用名（通常「家书」） */ + @Local serverName: string = ''; + + /** 是否正在"登录后同步"这一段 */ + @Local syncing: boolean = false; + /** 同步进度文案（当前模块名） */ + @Local syncNote: string = ''; + @Local syncDone: number = 0; + @Local syncTotal: number = 12; + + /** + * 是否已经"进到应用里"（防重复进入）。 + * + * ⚠️ 不是 @Local：它只用于代码里判重（同步跑完 与 用户点「立即进入」 + * 可能同时发生），不参与渲染，加状态标记只会触发多余重绘。 + */ + private entered: boolean = false; + + /** 主题色（与「名册」模块一致，登录页用砖红） */ + private accent: string = '#A84A28'; + + /** + * 页面出现时：决定从哪一步开始。 + * + * ⚠️ 已配过地址（老用户 / 退出登录后重进）⇒ **直接从第二步开始**， + * 并预填地址：让用户看到"我连的是哪台"，而不是每次重填一遍。 + */ + aboutToAppear(): void { + try { + // 🔴 取 `OFFSET`（**页面上移**），不是 RESIZE（压缩高度）。 + // SDK 注释：RESIZE 会重排页面、且与 `expandSafeArea(KEYBOARD)` 不能共用； + // OFFSET 只是把页面往上推，对"表单在下方"的登录页更稳（默认值也正是 OFFSET）。 + this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET); + } catch (err) { + hilog.warn(DOMAIN, TAG, '设置键盘避让失败（不影响登录）：%{public}s', JSON.stringify(err)); + } + + const saved: string = FB_SERVER_STORE.get(); + // ⚠️ 三步判断，顺序不能反： + // ① 调用方**显式指定**了起始步（设置页的「更换服务器 / 退出登录」）； + // ② 否则按"本地有没有地址"自动决定（正常启动）。 + if (this.startStep === 1) { + this.serverInput = saved !== '' ? saved : FB_DEFAULT_SERVER; + this.step = 1; + } else if (this.startStep === 2 && saved !== '') { + this.serverInput = saved; + this.step = 2; + } else if (saved !== '') { + this.serverInput = saved; + this.step = 2; + } else { + // 首次：预填一个默认地址（老用户升级后不用手打域名）。 + // ⚠️ 这只是输入框的**初始值**，必须由用户点「连接」确认后才写入 store。 + this.serverInput = FB_DEFAULT_SERVER; + this.step = 1; + } + } + + /** 拿应用上下文（拿不到就返回 undefined，由调用方给提示） */ + private ctx(): common.Context | undefined { + return this.getUIContext().getHostContext(); + } + + /** 第一步能不能提交 */ + private canConnect(): boolean { + return !this.busy && this.serverInput.trim() !== ''; + } + + /** 第二步能不能提交 */ + private canSubmit(): boolean { + return !this.busy && !this.syncing && this.account.trim() !== '' && this.password !== ''; + } + + /** + * 第一步：验证并保存服务器地址。 + * + * 🔴 只有 `fbProbeServer` 验通才写 store： + * 先存再验的话，用户填错一次地址，之后每次启动都会对着一个错的地址 + * 发请求（而且他很难意识到"错在地址"）。 + */ + private async connect(): Promise { + if (!this.canConnect()) { + return; + } + this.error = ''; + const base: string = fbNormalizeServer(this.serverInput); + if (!fbServerLooksValid(base)) { + this.error = '地址看起来不对，应该形如 https://family.example.com'; + return; + } + const c: common.Context | undefined = this.ctx(); + if (c === undefined) { + this.error = '应用上下文不可用，请重启应用再试'; + return; + } + + this.busy = true; + const r: FbProbeResult = await fbProbeServer(base); + if (!r.ok) { + this.busy = false; + this.error = r.error !== '' ? r.error : '连接失败，请检查地址'; + return; + } + const saved: string = await FB_SERVER_STORE.set(c, base); + this.busy = false; + if (saved === '') { + this.error = '地址没能保存（本地存储异常）'; + return; + } + this.serverInput = saved; + this.serverName = r.app; + this.step = 2; + hilog.info(DOMAIN, TAG, '服务器地址已确认：%{public}s', saved); + } + + /** 已确认的服务器主机部分（显示用：去掉协议，省一行宽度） */ + private serverHost(): string { + const base: string = FB_SERVER_STORE.get(); + return base.replace(/^https?:\/\//i, ''); + } + + /** + * 第二步：登录 → 存令牌 → 同步。 + * + * 🔴 登录成功后**不立刻跳转**，而是停在原地显示同步进度： + * 用户刚点了"登录"，最想看的是"我的数据进来了"。 + * 直接跳进主界面（各页还是空的、慢慢填）会让人觉得"没连上"。 + * ⇒ 给 15 秒的同步窗口（见 `SYNC_WAIT_MS` 的说明），完事或有超时就进去。 + */ + private async submit(): Promise { + if (!this.canSubmit()) { + return; + } + const c: common.Context | undefined = this.ctx(); + if (c === undefined) { + this.error = '应用上下文不可用，请重启应用再试'; + return; + } + + this.busy = true; + this.error = ''; + const res: FbLoginResult = await FbLoginClient.login(this.account.trim(), this.password); + // ⚠️ 无论成功失败，**立刻清掉内存里的密码**（它没有任何理由继续留在页面上） + this.password = ''; + + if (!res.ok) { + this.busy = false; + this.error = res.error !== '' ? res.error : '登录失败，请重试'; + return; + } + + const saved: boolean = await FB_TOKEN_STORE.set(c, res.token); + if (!saved) { + // 令牌拿回来了却存不下 —— 这不是"登录失败"，是**本地存储**的问题， + // 提示要能让用户/我们区分开。 + this.busy = false; + this.error = '登录成功但令牌没能保存（本地存储异常）'; + return; + } + + /* 🔴 v57：记下"刚跟服务器通过话"。 + 离线 24 小时判定靠的就是这个时间（`FbSession.offlineMs()`）。 + 不记的话，登录后第一次断网启动就会被判成"离线超时"。 + ⚠️ 用服务端返回的时间（`res.serverTime`）而不是本机时间 —— + 本机时钟可以改，服务端时间不能。 */ + await FB_SESSION.markVerified(c, res.serverTime); + this.busy = false; + this.applySession(res); + hilog.info(DOMAIN, TAG, '登录成功，person_id=%{public}d', res.personId); + + // ---- 登录成功 → 全量同步（带实时进度）---- + this.syncing = true; + this.syncNote = '准备同步…'; + this.syncDone = 0; + const job: Promise = syncAll( + (label: string, done: number, total: number): void => { + this.syncNote = label; + this.syncDone = done; + this.syncTotal = total; + }); + // ⚠️ 同步**不等它跑完**（可能几分钟）：设定窗口到点就放人进去， + // 同步本身在后台继续（`syncAll` 的 Promise 自己会跑到底）。 + await Promise.race([job, this.wait(SYNC_WAIT_MS)]); + this.finish(); + } + + /** 等一会儿（ArkTS 没有 setTimeout 的 Promise 版） */ + private wait(ms: number): Promise { + return new Promise((resolve: () => void): void => { + setTimeout(resolve, ms); + }); + } + + /** + * 把登录返回的身份写进全局会话。 + * + * ⚠️ **整体替换对象**而不是改字段：`FbSession`/`FbAccount` 是 interface， + * V2 对"对象的深层属性"观察不可靠；换掉引用才能保证读到它的页面都刷新 + * （设置页顶部的头像与姓名就靠这个 —— 否则永远显示演示数据里的那个名字）。 + */ + private applySession(res: FbLoginResult): void { + const old: FbSession = this.app.session; + const me: FbAccount = { + id: res.personId > 0 ? res.personId : old.me.id, + name: res.personName !== '' ? res.personName : old.me.name, + kinship: old.me.kinship, + avatarColor: old.me.avatarColor, + role: res.role !== '' ? res.role : old.me.role, + isGuest: res.role === 'guest', + canWrite: res.role !== '' && res.role !== 'guest', + }; + const next: FbSession = { + loggedIn: true, + familyId: old.familyId, + familyTitle: res.familyName !== '' ? res.familyName : old.familyTitle, + slogan: old.slogan, + me: me, + }; + this.app.session = next; + } + + /** 进主界面（幂等：同步跑完 与 用户点「立即进入」可能同时发生） */ + private finish(): void { + if (this.entered) { + return; + } + this.entered = true; + this.syncing = false; + this.onLoggedIn(); + } + + /** 回第一步换服务器（账号密码保留，万一只是地址写错了） */ + private backToServer(): void { + this.step = 1; + this.error = ''; + this.serverName = ''; + } + + build() { + Stack({ alignContent: Alignment.TopStart }) { + Scroll() { + Column({ space: 0 }) { + // ---- 品牌区：logo + 应用名（用**同一张**桌面图标，见 AppScope 的说明）---- + // 🔴 用**横向**排布（logo 在左、文字在右），不用纵向堆叠。 + // 原因（实测数据说话）：键盘弹出后 Scroll 的可视高度只有 **1365px** + // （屏幕 2444、键盘占 1488 起）；而**纵向**品牌区要 548px， + // 再加表单与按钮，总高超过 1365 ⇒ **按钮被裁在可视区之外，用户点不到**。 + Row({ space: 12 }) { + Image($r('app.media.fb_logo')) + .width(48) + .height(48) + .borderRadius(12) + .border({ width: 1, color: FbColors.line }) + Column({ space: 2 }) { + Text('家书') + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Text(this.step === 1 ? '先连上你家的服务器' : '一家人的名册、日程与记忆') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.muted) + } + .alignItems(HorizontalAlign.Start) + } + .width('100%') + .alignItems(VerticalAlign.Center) + // 🔴 top 加**状态栏高度**：应用已开 `setWindowLayoutFullScreen(true)`， + // 窗口不再为状态栏让位 ⇒ 登录页品牌区也要自己让出这一截， + // 否则 logo 与「家书」会被时间/信号图标压住。 + .padding({ + left: FbMetric.pagePad, + right: FbMetric.pagePad, + top: 24 + this.app.statusBarH, + bottom: 20 + }) + + if (this.step === 1) { + this.serverStep() + } else { + this.accountStep() + } + } + .width('100%') + .alignItems(HorizontalAlign.Center) + } + .width('100%') + .height('100%') + .scrollBar(BarState.Off) + + // ---- 同步遮罩（登录成功后浮在上面，不打断下面的表单状态）---- + if (this.syncing) { + this.syncOverlay() + } + } + .width('100%') + .height('100%') + .backgroundColor(FbColors.paper) + } + + /** 第一步：服务器地址 */ + @Builder + serverStep() { + Column({ space: 0 }) { + Text('服务器地址') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .margin({ bottom: 6 }) + TextInput({ placeholder: 'https://family.example.com', text: this.serverInput }) + // ⚠️ 用 `Normal` 而不是 `URL`：`URL` 键盘上**没有 `/` 和 `.` 以外的符号**， + // 内网地址（`http://192.168.1.8:8080`）需要冒号和数字，Normal 更宽松。 + .type(InputType.Normal) + .maxLength(200) + .fontSize(FbMetric.fontSmall) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .padding({ left: 12, right: 12 }) + .onChange((v: string): void => { + this.serverInput = v; + }) + .onSubmit((): void => { + this.connect(); + }) + + this.errorBox() + + Text(this.busy ? '正在连接…' : '连 接') + .fontSize(FbMetric.fontBody) + .fontWeight(FontWeight.Medium) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height(44) + .backgroundColor(this.canConnect() ? this.accent : FbColors.faint) + .borderRadius(FbMetric.radiusS) + .margin({ top: 18 }) + .onClick((): void => { + this.connect(); + }) + + Text('就是你在浏览器里打开家书网页版时用的那个地址。') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .textAlign(TextAlign.Center) + .width('100%') + .margin({ top: 10 }) + + // 没服务器也能进（看本机已同步的数据） + // 🔴 v57：只有「从没登录过」才给这个出口（见 allowSkip 的说明） + if (this.allowSkip) { + Text('先不连接，离线使用') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .textAlign(TextAlign.Center) + .width('100%') + .padding({ top: 16, bottom: 16 }) + .margin({ top: 6 }) + .onClick((): void => { + this.onSkip(); + }) + } + } + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad }) + } + + /** 第二步：账号 + 密码 */ + @Builder + accountStep() { + Column({ space: 0 }) { + // ---- 已连的服务器（可点「更换」）---- + Row({ space: 8 }) { + Text('服务器') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + Text(this.serverHost()) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.ink) + .layoutWeight(1) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + Text('更换') + .fontSize(FbMetric.fontTiny) + .fontColor(this.accent) + .padding({ left: 6, right: 2 }) + .onClick((): void => { + this.backToServer(); + }) + } + .width('100%') + .padding({ left: 12, right: 12, top: 10, bottom: 10 }) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + + /* 🔴 v57：为什么突然要重新登录 —— 必须写出来。 + 用户被远程踢掉时，App 只会"跳回登录页"。不说明原因的话， + 他第一反应是"App 坏了/我不记得密码了"，而不是"我的号被退了"。 */ + if (this.app.lockReason !== '') { + Text(this.app.lockReason) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.red) + .textAlign(TextAlign.Center) + .lineHeight(18) + .width('100%') + .padding({ top: 12, bottom: 2 }) + } + + // ---- 账号 ---- + Text('账号') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .margin({ top: 16, bottom: 6 }) + TextInput({ placeholder: '手机号或姓名', text: this.account }) + // ⚠️ 这里**不能**用 `InputType.PhoneNumber`：有的人是用姓名登录的， + // 数字键盘上打不出汉字（实测会被键盘挡住、只能退出去复制粘贴）。 + .type(InputType.Normal) + .maxLength(60) + .fontSize(FbMetric.fontSmall) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .padding({ left: 12, right: 12 }) + .onChange((v: string): void => { + this.account = v; + }) + + // ---- 密码 ---- + Text('密码') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .margin({ top: 14, bottom: 6 }) + TextInput({ placeholder: '登录密码', text: this.password }) + // ⚠️ `InputType.Password`：系统负责遮蔽显示； + // 别自己用 `***` 替换 —— 那样光标位置/输入法都会出问题。 + .type(InputType.Password) + .maxLength(72) + .fontSize(FbMetric.fontSmall) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .padding({ left: 12, right: 12 }) + .onChange((v: string): void => { + this.password = v; + }) + // 键盘上的"完成"直接提交，省一次点击 + .onSubmit((): void => { + this.submit(); + }) + + this.errorBox() + + // ---- 登录按钮 ---- + Text(this.busy ? '正在登录…' : '登 录') + .fontSize(FbMetric.fontBody) + .fontWeight(FontWeight.Medium) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height(44) + .backgroundColor(this.canSubmit() ? this.accent : FbColors.faint) + .borderRadius(FbMetric.radiusS) + .margin({ top: 18 }) + .onClick((): void => { + this.submit(); + }) + + // ---- 先不登录 ---- + // 🔴 v57：被踢 / 主动退出后**没有**这个出口（见 allowSkip 的说明） + if (this.allowSkip) { + Text('先不登录（看本地已有的数据）') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .textAlign(TextAlign.Center) + .width('100%') + .padding({ top: 16, bottom: 16 }) + .margin({ top: 6 }) + .onClick((): void => { + this.onSkip(); + }) + } + + Text('账号和密码与网页版是同一套；手机号或姓名都可以。') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .textAlign(TextAlign.Center) + .width('100%') + .padding({ bottom: 8 }) + } + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad }) + } + + /** 错误提示条（空串时不占位） */ + @Builder + errorBox() { + if (this.error !== '') { + Row({ space: 6 }) { + Text('!') + .fontSize(FbMetric.fontSmall) + .fontColor('#A32D2D') + .fontWeight(FontWeight.Bold) + Text(this.error) + .fontSize(FbMetric.fontSmall) + .fontColor('#A32D2D') + .layoutWeight(1) + .maxLines(4) + } + .width('100%') + .margin({ top: 12 }) + .alignItems(VerticalAlign.Top) + } + } + + /** + * 同步遮罩：登录成功后的"正在把数据搬到这台手机"。 + * + * ⚠️ 必须**挡住**下面的表单（半透明底 + 全屏），否则用户会去点「登录」第二次。 + * ⚠️ 给「立即进入」：网络慢的家庭（农村宽带/4G）可能真要跑一两分钟， + * 不能把人锁在登录页 —— 数据在后台继续同步，进去看得到多少是多少。 + */ + @Builder + syncOverlay() { + Column({ space: 0 }) { + Column({ space: 14 }) { + Text('正在把家里的数据同步到这台手机') + .fontSize(FbMetric.fontBody) + .fontColor(FbColors.ink) + .textAlign(TextAlign.Center) + Text(this.syncNote !== '' ? this.syncNote : '准备中…') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.muted) + .textAlign(TextAlign.Center) + // 进度条（用 `Progress` 而不是自制矩形：它与系统动效一致） + Progress({ value: this.syncDone, total: this.syncTotal > 0 ? this.syncTotal : 12, + type: ProgressType.Linear }) + .width('80%') + .color(this.accent) + Text(this.syncDone.toString() + ' / ' + this.syncTotal.toString() + ' 个模块') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + + Text('立即进入（后台继续同步）') + .fontSize(FbMetric.fontSmall) + .fontColor(this.accent) + .margin({ top: 6 }) + .onClick((): void => { + this.finish(); + }) + } + .width('86%') + .padding({ top: 26, bottom: 20, left: 18, right: 18 }) + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radiusS) + .border({ width: 1, color: FbColors.line }) + .justifyContent(FlexAlign.Center) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + // 半透明遮住整页（含状态栏区域，因为窗口是全屏的） + .backgroundColor('#B3F7F3EA') + } +} diff --git a/entry/src/main/ets/pages/misc/FbMiscPages.ets b/entry/src/main/ets/pages/misc/FbMiscPages.ets index 0496b92..d52763e 100644 --- a/entry/src/main/ets/pages/misc/FbMiscPages.ets +++ b/entry/src/main/ets/pages/misc/FbMiscPages.ets @@ -14,9 +14,11 @@ import { FbColors, FbMetric } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; import { FbNoteItem, FbNotificationItem } from '../../model/Types'; -import { FB_DEMO_NOTES, FB_DEMO_NOTIFICATIONS } from '../../model/DemoData'; +import { parseNotes, parseNotifications } from '../../data/FbParse'; +import { loadModule } from '../../data/FbModuleLoad'; import { FbAvatar, FbDot, FbEmptyBox, FbPrimaryButton, FbTag } from '../../components/Widgets'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; +import { fbOnScroll, fbOnTouch } from '../../common/FbScroll'; // ============================================================ // 笔记 @@ -34,7 +36,28 @@ export struct FbNotesPage { /** 模块主题色（笔记 = 褐灰） */ private accent: string = '#7A6A4F'; - private all: FbNoteItem[] = FB_DEMO_NOTES; + /** 笔记列表（`/api/v1/notes`）。空初值：别先闪假数据。 */ + @Local all: FbNoteItem[] = []; + /** 顶部提示 */ + @Local syncNote: string = ''; + + /** + * 页面出现：读缓存 → 拉接口（本地优先）。 + * ⚠️ 不自己开库：`EntryAbility.onCreate` 已统一打开。 + */ + aboutToAppear(): void { + this.load(); + } + + private async load(): Promise { + await loadModule('notes', parseNotes, + (rows: FbNoteItem[]): void => { + this.all = rows; + }, + (note: string): void => { + this.syncNote = note; + }); + } build() { Scroll() { @@ -100,6 +123,12 @@ export struct FbNotesPage { .scrollBar(BarState.Off) .edgeEffect(EdgeEffect.Spring) .align(Alignment.TopStart) + // 🔴 滚动方向上报（驱动底部悬浮栏随滚收起 / 唤回）—— 见 common/FbScroll.ets + .onDidScroll(fbOnScroll) + + // 🔴 触摸方向兜底（内容不足一屏的页面滚不动，只能靠手指位移判断） + // 与上面的 `onDidScroll` 互补、互不冲突 —— 见 common/FbScroll.ets + .onTouch(fbOnTouch) } @Builder @@ -171,7 +200,24 @@ export struct FbNotificationsPage { @BuilderParam topBar: () => void; @Param app: FbAppState = fbAppState(); - private all: FbNotificationItem[] = FB_DEMO_NOTIFICATIONS; + /** 通知列表（`/api/v1/notifications`） */ + @Local all: FbNotificationItem[] = []; + /** 顶部提示 */ + @Local syncNote: string = ''; + + aboutToAppear(): void { + this.load(); + } + + private async load(): Promise { + await loadModule('notifications', parseNotifications, + (rows: FbNotificationItem[]): void => { + this.all = rows; + }, + (note: string): void => { + this.syncNote = note; + }); + } build() { Scroll() { @@ -233,6 +279,12 @@ export struct FbNotificationsPage { .height('100%') .scrollBar(BarState.Off) .edgeEffect(EdgeEffect.Spring) + // 🔴 滚动方向上报（驱动底部悬浮栏随滚收起 / 唤回）—— 见 common/FbScroll.ets + .onDidScroll(fbOnScroll) + + // 🔴 触摸方向兜底（内容不足一屏的页面滚不动，只能靠手指位移判断） + // 与上面的 `onDidScroll` 互补、互不冲突 —— 见 common/FbScroll.ets + .onTouch(fbOnTouch) .align(Alignment.TopStart) } diff --git a/entry/src/main/ets/pages/movies/FbMoviesPage.ets b/entry/src/main/ets/pages/movies/FbMoviesPage.ets index ac1e493..adaa267 100644 --- a/entry/src/main/ets/pages/movies/FbMoviesPage.ets +++ b/entry/src/main/ets/pages/movies/FbMoviesPage.ets @@ -7,30 +7,399 @@ * * 页头右侧两个入口：搜索、设置（影院管理 / 统计 / 年度报告 —— 与 Web 端一致， * 「影院」不单独占抽屉位置，它是观影模块的一部分）。 + * + * 🔴 **本地优先（local-first）的第一个落地模块**（用户 2026-10-12 定）： + * 数据流是「接口 → 本地库 → UI」，而不是「UI 直接读接口」。 + * · `aboutToAppear` 时先读**本地库**渲染（有数据就立刻显示，不等网络）； + * · 然后**后台**跑一次 `sync()` 把服务端数据补进来； + * · 同步完再读一次本地库刷新界面。 + * 这样断网时页面照常可用（因为读的本来就是本地）， + * 有网时数据会自动变新。 + * + * ⚠️ 为什么不在 `aboutToAppear` 里 `await sync()` 再渲染： + * 那样就成了"网络优先"——转圈等 2 秒才出内容， + * 断网时更是完全空白。**先渲染本地、再后台同步**是这套架构的要点。 */ import { FbColors, FbMetric, fbPalette } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; -import { FbMovieItem, FbKinChip } from '../../model/Types'; -import { FB_DEMO_CINEMAS, FB_DEMO_MOVIES } from '../../model/DemoData'; +import { FbKinChip } from '../../model/Types'; +import { FbCinemaItem } from '../../data/FbMovieRepo'; import { FbDot, FbEmptyBox, FbIconButton, FbPersonChip, FbPrimaryButton, FbRating, FbSectionTitle } from '../../components/Widgets'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; +import { FbDb } from '../../data/FbDb'; +import { FbMovieDetail, FbMovieListItem, FbMovieRepo, FbSyncResult } from '../../data/FbMovieRepo'; +import { FbMovieDetailSheet } from '../../components/FbMovieDetailSheet'; +import { FbCinemaSheet } from '../../components/FbCinemaSheet'; +import { FbModuleSettingsSheet } from '../../components/FbModuleSettingsSheet'; +import { FB_SET_MOVIES } from '../../model/FbSettingsMenus'; +import { FB_TOKEN_STORE } from '../../data/FbTokenStore'; +import { fbImageUrl } from '../../data/FbHttp'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { common } from '@kit.AbilityKit'; +import { BusinessError } from '@kit.BasicServicesKit'; +import { fbOnScroll, fbOnTouch } from '../../common/FbScroll'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbMoviesPage'; + +/** + * 把接口的完整时间（'YYYY-MM-DD HH:mm:ss'）裁成卡片上够用的短形式。 + * + * ⚠️ 只在**显示**时裁，存库仍存完整值 —— 否则详情页/排序会丢精度。 + * ⚠️ 输入可能为空（老数据没填时间）⇒ 必须返回空串而不是 'undefined'。 + */ +function shortTime(v: string): string { + if (v.length < 16) { + return v; // 短于 'YYYY-MM-DD HH:mm' 就原样返回（含空串） + } + return v.substring(0, 16); // 去掉最后的 ':ss' +} @ComponentV2 export struct FbMoviesPage { @Param app: FbAppState = fbAppState(); /** * 顶栏插槽：由 Index.ets 传入，放在本页滚动流最前面 ⇒ 随页面一起滚走。 - * 🔴 用户要求「向上滑动时标题栏跟着一起滑走」。 + * 🔴 用户要求「向上滑动时滑动时标题栏跟着一起滑走」。 */ @BuilderParam topBar: () => void; - private movies: FbMovieItem[] = FB_DEMO_MOVIES; - private cinemas: string[] = FB_DEMO_CINEMAS; + /** + * 观影列表（**来自本地库**）。 + * + * ⚠️ 初值给空数组而不是演示数据：一上来就显示假数据、随后被真数据替换， + * 用户会看到"闪一下"。空数组 + 一个明确的"加载中/暂无"状态更诚实。 + * （演示数据仍保留在 DemoData 里，供后续做空态预览用。） + */ + @Local movies: FbMovieListItem[] = []; + /** 是否正在首次加载（决定显示"加载中"还是"暂无记录"） */ + @Local loading: boolean = true; + /** 观影页顶部一行提示（自检/同步状态共用；谁最后写谁显示） */ + @Local syncNote: string = ''; + /** 临时自检结果（与同步提示分开，避免互相覆盖） */ + /** + * 海报加载失败的电影 id。 + * + * 🔴 为什么需要它：海报是网络图，取不到是**常态**（没网、图被删、令牌失效）。 + * 不处理的话这张卡会一直显示"半张白图"，用户以为页面坏了。 + * ⇒ 记下失败的 id，那张卡改回"图标 + 片名"的占位（与"本来就没海报"同观感）。 + * ⚠️ 用 `@Local` + 数组整体替换来触发刷新： + * ArkUI 的 `@Local` 只代理第一层，直接 `push` 到数组里**不会刷新界面** + * （§05-state 的规则）。所以每次都用新数组赋值。 + */ + @Local posterFailIds: number[] = []; + + // ---- 详情浮层 ---- + /** 浮层是否显示 */ + @Local sheetOpen: boolean = false; + /** 浮层里的详情（null = 还没加载出来） */ + @Local sheetDetail: FbMovieDetail | null = null; + /** 详情是否加载中 */ + @Local sheetLoading: boolean = false; + /** 详情加载失败信息（空串 = 没失败） */ + @Local sheetError: string = ''; + /** 浮层对应的列表项评分（详情接口不给评分，从列表带，见 FbMovieRepo.detail 说明） */ + @Local sheetRating: number = 0; + @Local sheetReviewCount: number = 0; + /** + * 浮层正在展示的电影 id。 + * + * ⚠️ 两个用途，缺一不可： + * ① **防重入**：连点同一条时不重复叠浮层（实测会叠层，照片数翻倍）； + * ② **防串数据**：详情是异步拉的，回来时要确认"还是这条"才写入 + * （否则点 A 又点 B，A 的数据会糊到 B 的浮层上）。 + */ + @Local sheetMovieId: number = 0; + + /** + * 影院列表（**从本地库读**，`/api/v1/cinemas` 的同步结果）。 + * + * 🔴 之前这里是 `FB_DEMO_CINEMAS`（写死的演示数组），只用来显示"影院 N 家" + * —— 而「5 家」那个数字**恰好**跟真实值一样，所以看不出是假的。 + * 改成真实列表后，数字与列表同源，不会再对不上。 + */ + @Local cinemas: FbCinemaItem[] = []; + /** + * 模块设置浮层是否打开。 + * + * 🔴 用户 2026-10-16：右上角按钮统一改成网页版那种**三条横线**（☰）， + * 点开是**这个模块的设置菜单**（照 `templates/movies/_settings_menu.php`）。 + */ + @Local settingsOpen: boolean = false; + /** 影院浮层是否打开 */ + @Local cinemaSheetOpen: boolean = false; + + /** + * 🔴 浮层开合时**让底部悬浮栏让位**（与名册页同一处 bug，见 `FbPeoplePage` 的说明）。 + * + * 浮层装在**页面自己的 Stack** 里，而悬浮栏在**更外层 `Index` 的 Stack** 里 + * ⇒ 悬浮栏层级更高 ⇒ 浮层底部的按钮会与它重叠、点击被抢走。 + * ⇒ 用 `@Monitor` 一处声明、自动跟随派生（避免在多个赋值点手写、漏一处就出事）。 + */ + @Monitor('sheetOpen', 'cinemaSheetOpen', 'settingsOpen') + onSheetChanged(): void { + const app: FbAppState = fbAppState(); + app.sheetCount = (this.sheetOpen || this.cinemaSheetOpen || this.settingsOpen) ? 1 : 0; + } /** 模块主题色（观影 = 紫） */ private accent: string = '#7A4E8C'; + private repo: FbMovieRepo = FbMovieRepo.inst(); + + /** + * 页面出现：先读本地库渲染，再后台同步。 + * ⚠️ 不能声明成 async 让框架 await —— 生命周期钩子返回 void 即可， + * 异步逻辑在内部自己跑（否则会影响页面首帧时机）。 + */ + aboutToAppear(): void { + this.bootstrap(); + } + + /** 该电影的海报是否已确认加载失败 */ + private posterFailed(id: number): boolean { + return this.posterFailIds.indexOf(id) >= 0; + } + + /** + * 记下"这张海报加载失败"。 + * + * ⚠️ 必须**换成新数组**赋值（`concat`），不能 `push` —— + * `@Local` 不代理数组内部变化，push 进去界面不会刷新 + * （表现为"图片还是白的，占位也没出现"，看着像没生效）。 + * ⚠️ 已经记过就不重复加：`onError` 可能被多次触发， + * 重复添加会让数组无限增长（虽然去重判断也要 O(n)，但这里 n 很小）。 + */ + private markPosterFailed(id: number): void { + if (this.posterFailed(id)) { + return; + } + this.posterFailIds = this.posterFailIds.concat([id]); + } + + /** + * 点卡片 → 打开详情浮层。 + * + * 🔴 先"立刻开浮层 + 显示加载中"，再异步拉详情： + * 如果等详情回来才开浮层，用户点下去会有**明显延迟**（网络快则一闪、 + * 慢则好几秒毫无反应，用户以为没点到）。 + * 先把浮层弹出来、里面写"正在加载详情…"，体感完全不同。 + * + * ⚠️ 未登录（没令牌）时**不开浮层**，而是给一句提示： + * 详情要连服务端拉，没令牌必然失败；让用户看到"加载失败"不如 + * 直接说清"没连服务器"。 + */ + private openDetail(mv: FbMovieListItem): void { + const token: string = FB_TOKEN_STORE.get(); + if (token === '') { + this.syncNote = '未连接服务器，详情需要联网查看'; + return; + } + // 🔴 **防重入**：已经是这条、且浮层已经开着 ⇒ 直接返回。 + // 不加这个判断时，连点卡片会**反复叠加浮层** + // （2026-10-12 实测：浮层里的照片数从 5 变成 9，就是叠了两层）。 + if (this.sheetOpen && this.sheetMovieId === mv.id) { + return; + } + this.sheetMovieId = mv.id; + // 先把浮层弹出来（带加载态），再拉数据 + this.sheetRating = mv.reviewAvg; + this.sheetReviewCount = mv.reviewCount; + this.sheetDetail = null; + this.sheetError = ''; + this.sheetLoading = true; + this.sheetOpen = true; + this.loadDetail(mv.id, token, mv); + } + + /** 拉详情并填进浮层 */ + private async loadDetail(id: number, token: string, mv: FbMovieListItem): Promise { + const d: FbMovieDetail = await this.repo.detail(id, token, mv); + // ⚠️ 用户可能在等待期间**已经关掉浮层**（或点了别的卡片） + // ⇒ 回来时先确认浮层还开着、且**还是这一条**，否则会把旧数据糊到新浮层上。 + if (!this.sheetOpen || this.sheetMovieId !== id) { + return; + } + this.sheetLoading = false; + if (!d.ok) { + this.sheetError = d.error; + return; + } + this.sheetDetail = d; + } + + /** 启动流程：开库 → 读本地 → 后台同步 → 再读本地 */ + private async bootstrap(): Promise { + hilog.info(DOMAIN, TAG, 'bootstrap 开始'); + try { + // ① 取 Ability 上下文。 + // 🔴 用 `getUIContext().getHostContext()`，**不用全局 `getContext(this)`**： + // 全局 getContext 在 Stage 模型多 ArkUI 实例下可能取错/取不到， + // 规则文件明确要求换掉（r/quick-rules/02-uicontext.md）。 + // RDB / preferences 都要靠这个 Context 定位应用沙箱目录。 + const ctx: common.Context | undefined = this.getUIContext().getHostContext(); + if (ctx === undefined) { + hilog.error(DOMAIN, TAG, '拿不到 Ability Context，本地库无法打开'); + this.loading = false; + this.syncNote = '本地存储不可用（上下文获取失败）'; + return; + } + hilog.info(DOMAIN, TAG, '拿到 Context，准备打开本地库'); + // ② 打开本地库（首装会建表；这一步本身很快） + await FbDb.inst().open(ctx); + hilog.info(DOMAIN, TAG, '本地库打开成功'); + } catch (err) { + // ⚠️ 把**真实错误**显示到界面上： + // 这台设备的 hilog 缓冲区读不出内容（已确认），界面是唯一可靠通道。 + // 临时诊断用，定位完就换回友好文案。 + const e: BusinessError = err as BusinessError; + const detail: string = (e.code !== undefined ? 'code=' + e.code.toString() + ' ' : '') + + (e.message !== undefined ? e.message : JSON.stringify(err)); + hilog.error(DOMAIN, TAG, '本地库打开失败：%{public}s', detail); + this.loading = false; + this.syncNote = '本地库打开失败：' + detail; + return; + } + + // ③ 先读本地（有数据立刻显示） + await this.reloadFromLocal(); + + // ④ 后台同步（不阻塞界面） + this.syncInBackground(); + } + + /** 临时：把本地库自检结果拼成一行显示（定位完删除） */ + + + /** 从本地库读列表刷新界面 */ + private async reloadFromLocal(): Promise { + try { + const rows: FbMovieListItem[] = await this.repo.list(300); + this.movies = rows; + } catch (err) { + hilog.error(DOMAIN, TAG, '读本地观影失败：%{public}s', JSON.stringify(err)); + } + // 🔴 影院与观影列表**分开 try**。 + // 为什么：影院是"附属信息"（只是页头那行"影院 N 家"）， + // 它读失败**不该**影响观影列表的显示。 + // ⚠️ 踩过的坑：一开始把这段塞进了上面的 `catch` 里 + // （脚本按"插在 finally 前"定位，结果落进了 catch）—— + // 表现为"只有读失败时才有影院"，而正常路径永远是 0 家。 + // ⇒ **自动插入代码后必须看插入点的上下文**，别只看"插进去了"。 + try { + this.cinemas = await this.repo.cinemaList(); + } catch (err) { + hilog.warn(DOMAIN, TAG, '读本地影院失败：%{public}s', JSON.stringify(err)); + } + this.loading = false; + } + + /** + * 后台同步：拉接口 → 落本地库 → 再读一次刷新界面。 + * + * ⚠️ 失败**不弹窗、不清空已有数据** —— 本地优先下"同步失败"只是 + * "这次没更新"，用户手上的数据仍然可用。只在页面上留一行小字说明。 + */ + private async syncInBackground(): Promise { + const token: string = FB_TOKEN_STORE.get(); + if (token === '') { + // 还没有令牌：不做同步，但**本地数据照样能看**（这就是落盘的价值） + this.syncNote = '未登录，显示的是本地数据'; + return; + } + const res: FbSyncResult = await this.repo.sync(token); + if (!res.ok) { + hilog.warn(DOMAIN, TAG, '观影同步失败：%{public}s', res.error); + this.syncNote = '同步失败：' + res.error; + return; + } + this.syncNote = ''; + await this.reloadFromLocal(); // 同步成功再刷一次，把新数据显示出来 + } build() { + // 🔴 用 Stack 把"页面内容"和"详情浮层"叠起来： + // 浮层是页面内的一个覆盖层（**不是系统弹窗**，理由见 + // FbMovieDetailSheet 的文件头说明）。 + Stack({ alignContent: Alignment.Bottom }) { + this.pageContent() + + // ---- 详情浮层 ---- + if (this.sheetOpen) { + // 半透明遮罩：点它也能关（大屏上比只能点"关闭"更顺手） + Column() + .width('100%') + .height('100%') + .backgroundColor('#00000066') + .onClick((): void => { + this.sheetOpen = false; + }) + + FbMovieDetailSheet({ + detail: this.sheetDetail, + loading: this.sheetLoading, + error: this.sheetError, + listRating: this.sheetRating, + listReviewCount: this.sheetReviewCount, + onClose: (): void => { + this.sheetOpen = false; + } + }) + } + + // ---- 影院列表浮层 ---- + // ⚠️ 与详情浮层**同一个 Stack**、同一个层级： + // 两者不会同时打开（详情由点电影触发、影院由点"影院 N 家"触发）， + // 所以不需要额外处理"谁盖谁"。 + if (this.cinemaSheetOpen) { + Column() + .width('100%') + .height('100%') + .backgroundColor('#00000066') + .onClick((): void => { + this.cinemaSheetOpen = false; + }) + + FbCinemaSheet({ + cinemas: this.cinemas, + onClose: (): void => { + this.cinemaSheetOpen = false; + } + }) + } + + // ---- 模块设置浮层（三条横线点开的那个）---- + if (this.settingsOpen) { + Column() + .width('100%') + .height('100%') + .backgroundColor('#00000066') + .onClick((): void => { + this.settingsOpen = false; + }) + + FbModuleSettingsSheet({ + title: '观影设置', + items: FB_SET_MOVIES, + onClose: (): void => { + this.settingsOpen = false; + }, + onPick: (action: string): void => { + // 目前只有「影院管理」是已实现的；其余在菜单里显示「暂未开放」 + if (action === 'cinema') { + this.settingsOpen = false; + this.cinemaSheetOpen = true; + } + } + }) + } + } + .width('100%') + .height('100%') + } + + /** 页面主体（原 build 的内容，抽出来给 Stack 用） */ + @Builder + pageContent() { Scroll() { Column() { this.topBar() @@ -54,11 +423,15 @@ export struct FbMoviesPage { bg: this.accent, icon: $r('app.media.fb_ic_plus') }) - // 「影院」不单独占抽屉位置 —— 它是观影模块的一部分，从这里进 + // 🔴 设置按钮 = 网页版那种**三条横线**（☰）；「影院」也不单独占抽屉位置， + // 它是观影模块的一部分，从设置菜单里进（与网页版一致）。 FbIconButton({ - icon: $r('app.media.fb_ic_gear'), + icon: $r('app.media.fb_ic_menu'), tint: FbColors.muted, - dia: 36 + dia: 36, + onTap: (): void => { + this.settingsOpen = true; + } }) } .width('100%') @@ -85,18 +458,51 @@ export struct FbMoviesPage { .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 4 }) .alignItems(VerticalAlign.Center) - // ---- 影院数提示 ---- + // ---- 影院数（可点：看影院列表）---- + // 🔴 之前这是个**纯文字**（只能看数字）；现在点它能看到名单 —— + // Web 端「影院管理」就在观影模块里，这里给它一个入口。 Row({ space: 6 }) { Blank() Text('影院 ' + this.cinemas.length.toString() + ' 家') .fontSize(FbMetric.fontTiny) .fontColor(FbColors.faint) + Text('›') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) } .width('100%') + .onClick((): void => { + this.cinemaSheetOpen = true; + }) .padding({ left: FbMetric.pagePad + 4, right: FbMetric.pagePad + 4, top: 6, bottom: 6 }) + + // ---- 同步状态提示（只在有话说时显示，不占位）---- + if (this.syncNote !== '') { + Row() { + Text(this.syncNote) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .maxLines(2) + } + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 6 }) + } + // ---- 海报网格 ---- - if (this.movies.length === 0) { + if (this.loading) { + // ⚠️ "加载中"与"暂无记录"必须分开：本页先读本地库（通常几毫秒）， + // 所以 loading 几乎一闪而过；若把它和空态混在一起， + // 用户会看到"还没有观影记录"闪一下再变成列表。 + Row() { + Text('正在读取本地数据…') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + } + .width('100%') + .padding({ top: 40, bottom: 40 }) + .justifyContent(FlexAlign.Center) + } else if (this.movies.length === 0) { FbEmptyBox({ title: '还没有观影记录', hint: '一家人一起看过的电影，都会以海报墙的方式排在这里', @@ -104,11 +510,11 @@ export struct FbMoviesPage { }) } else { Grid() { - ForEach(this.movies, (mv: FbMovieItem) => { + ForEach(this.movies, (mv: FbMovieListItem) => { GridItem() { this.movieCard(mv) } - }, (mv: FbMovieItem): string => 'mv_' + mv.id.toString()) + }, (mv: FbMovieListItem): string => 'mv_' + mv.id.toString()) } .columnsTemplate('1fr 1fr') .columnsGap(12) @@ -118,7 +524,6 @@ export struct FbMoviesPage { // Column 的高度由内容决定，layoutWeight(1) 会去分"剩余空间"（此时为 0） // ⇒ Grid 高度塌成 0、整页只有顶栏和页头。 .width('100%') - .width('100%') .scrollBar(BarState.Off) .edgeEffect(EdgeEffect.Spring) } @@ -131,38 +536,52 @@ export struct FbMoviesPage { .height('100%') .scrollBar(BarState.Off) .edgeEffect(EdgeEffect.Spring) + // 🔴 滚动方向上报（驱动底部悬浮栏随滚收起 / 唤回）—— 见 common/FbScroll.ets + .onDidScroll(fbOnScroll) + + // 🔴 触摸方向兜底（内容不足一屏的页面滚不动，只能靠手指位移判断） + // 与上面的 `onDidScroll` 互补、互不冲突 —— 见 common/FbScroll.ets + .onTouch(fbOnTouch) .align(Alignment.TopStart) } /** 一张电影卡：海报位（2:3）+ 片名 + 元信息 + 同看的人 */ @Builder - movieCard(mv: FbMovieItem) { + movieCard(mv: FbMovieListItem) { Column({ space: 0 }) { - // 海报位：有海报就放图，没有就画占位（Web 端用「影」字占位，端上用图标） + // 海报位：有海报就放真图，没有/加载失败就画占位（与 Web 端一致） Stack({ alignContent: Alignment.Center }) { - if (mv.hasPoster) { - // TODO(接口)：接上 media.php 的海报地址后换掉这个纯色块 - Column() + if (mv.posterKey !== '' && !this.posterFailed(mv.id)) { + // 🔴 真海报：走服务端 `media.php` 代理，令牌用 URL query 带过去 + // （`Image()` 无法加自定义请求头，见 fbImageUrl 的说明）。 + Image(fbImageUrl(mv.posterKey, FB_TOKEN_STORE.get())) .width('100%') .height('100%') - .linearGradient({ - angle: 145, - colors: [[fbPalette(this.accent).brand2, 0.0], [fbPalette(this.accent).ink, 1.0]] + .objectFit(ImageFit.Cover) + // ⚠️ `alt` 给一张底图：图片没加载出来时先显示它，不会闪白块 + .alt($r('app.media.fb_ic_movies')) + // ⚠️ 不 `syncLoad`：海报是大图，同步加载会卡住列表滚动。 + // ⚠️ 加载失败**必须记下来**（见 onError）：否则这张卡会一直 + // 显示"半张白图"，用户以为坏了，其实只是这张图取不到。 + .onError((): void => { + this.markPosterFailed(mv.id); }) } else { + // 无海报 / 加载失败：底图 + 图标/片名占位 Column() .width('100%') .height('100%') .backgroundColor(FbColors.inputBg) } - Column({ space: 6 }) { - Image($r('app.media.fb_ic_movies')) - .width(mv.hasPoster ? 26 : 22) - .height(mv.hasPoster ? 26 : 22) - .renderMode(ImageRenderMode.Template) - .fillColor(mv.hasPoster ? '#FFFFFFB3' : FbColors.faint) - if (!mv.hasPoster) { + // 占位层：只在"没有海报"或"海报加载失败"时显示（有真图时不遮挡） + if (mv.posterKey === '' || this.posterFailed(mv.id)) { + Column({ space: 6 }) { + Image($r('app.media.fb_ic_movies')) + .width(22) + .height(22) + .renderMode(ImageRenderMode.Template) + .fillColor(FbColors.faint) Text(mv.title) .fontSize(FbMetric.fontSmall) .fontColor(FbColors.muted) @@ -187,7 +606,9 @@ export struct FbMoviesPage { .textOverflow({ overflow: TextOverflow.Ellipsis }) Row({ space: 6 }) { - Text(mv.watchedAt) + // ⚠️ 显示上只取「日期 + 时:分」：接口给的是完整 DATETIME（含秒）， + // 秒在卡片上纯属噪音。 + Text(shortTime(mv.startsAt)) .fontSize(10) .fontColor(FbColors.faint) .maxLines(1) @@ -210,15 +631,15 @@ export struct FbMoviesPage { Row({ space: 8 }) { if (mv.reviewCount > 0) { - FbRating({ score: mv.rating, max: 10 }) + FbRating({ score: mv.reviewAvg, max: 10 }) } Blank() - // 同看的人（只出头像，空间紧） - Row({ space: 2 }) { - ForEach(mv.viewers.slice(0, 3), (v: FbKinChip) => { - FbPersonChip({ name: v.shown, color: v.avatarColor, withText: false }) - .padding({ left: 0, right: 0 }) - }, (v: FbKinChip): string => 'vw_' + mv.id.toString() + '_' + v.id.toString()) + // 同看人数（只出数字，空间紧；点头像看详情是后续的事） + if (mv.attendeeCount > 0) { + Text(mv.attendeeCount.toString() + ' 人同看') + .fontSize(10) + .fontColor(FbColors.faint) + .maxLines(1) } } .width('100%') @@ -232,5 +653,9 @@ export struct FbMoviesPage { .backgroundColor(FbColors.surface) .borderRadius(FbMetric.radius) .clip(true) + // 🔴 点卡片 → 打开详情浮层（用户 2026-10-12 反馈"点不进去"） + .onClick((): void => { + this.openDetail(mv); + }) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/people/FbPeoplePage.ets b/entry/src/main/ets/pages/people/FbPeoplePage.ets index 392d077..c9cbc8f 100644 --- a/entry/src/main/ets/pages/people/FbPeoplePage.ets +++ b/entry/src/main/ets/pages/people/FbPeoplePage.ets @@ -14,19 +14,150 @@ import { FbColors, FbMetric } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; -import { FbGroup, FbKinRelation, FbRosterItem } from '../../model/Types'; -import { FB_DEMO_KIN_RELATIONS, FB_DEMO_ROSTER, fbGroupRoster } from '../../model/DemoData'; -import { FbAvatar, FbEmptyBox, FbIconButton, FbPrimaryButton, FbTag } from '../../components/Widgets'; +import { FbKinGraph, FbKinPerson, FbRosterItem } from '../../model/Types'; +import { parseKin } from '../../data/FbParse'; +import { loadModule } from '../../data/FbModuleLoad'; +import { FbAvatar, FbPrimaryButton, FbTag } from '../../components/Widgets'; +import { FbPersonSheet } from '../../components/FbPersonSheet'; +import { FbPersonEditSheet } from '../../components/FbPersonEditSheet'; +import { FbKinGraphView } from '../../components/FbKinGraph'; +import { FbTagChip } from '../../components/FbTagChip'; +import { fbImageUrl } from '../../data/FbHttp'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; +import { FbDb } from '../../data/FbDb'; +import { FbPersonRepo, FbRosterPerson, FbRosterSyncResult, FbTagCount } from '../../data/FbPersonRepo'; +import { FB_TOKEN_STORE } from '../../data/FbTokenStore'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { call } from '@kit.TelephonyKit'; +import { common } from '@kit.AbilityKit'; +import { BusinessError } from '@kit.BasicServicesKit'; +import { fbOnScroll, fbOnTouch, fbOnHScroll } from '../../common/FbScroll'; -/** 家谱里一个人一圈的分组 */ -interface FbKinRing { - /** 圈名：我 / 直系 / 亲属 */ +const DOMAIN: number = 0x0000; +const TAG: string = 'FbPeoplePage'; + +/** + * 把仓库的 `FbRosterPerson` 转成页面用的 `FbRosterItem`。 + * + * 🔴 为什么要这一层映射（而不是让页面直接用 `FbRosterPerson`）： + * 这个页面的 UI（444 行）是按 `FbRosterItem` 写的，字段语义也**不完全一样**： + * · `kinship` ← 服务端的 `label`（**「我该怎么称呼他」**，如"父亲""妻子"）； + * · `group` ← 服务端 v28 起把"分组"降级成**标签词表**， + * 所以这里用**第一个标签**填 group（页面按 group 分堆的逻辑仍可用）； + * · `birthday` ← 只取**阳历**的月日（'MM-DD'），与 Web 端列表显示口径一致； + * · `roster` ← 接口不返回（名册里的人都是本家的）⇒ 固定 'member'。 + * 改 UI 的代价远大于加这一层，而且这层也**隔离**了"接口字段变了"的冲击。 + */ +function toRosterItem(p: FbRosterPerson): FbRosterItem { + const it: FbRosterItem = { + id: p.id, + name: p.shown !== '' ? p.shown : p.name, + // 「我该怎么称呼他」——服务端算好的（依赖整个家族图谱，端上不重算） + kinship: p.label, + group: p.tags.length > 0 ? p.tags[0] : '', + tags: p.tags, + avatarColor: p.avatarColor !== '' ? p.avatarColor : '#A84A28', + avatar: p.avatar, + phone: p.phone, + phones: p.phones, + initials: p.initials, + roster: 'member', + birthday: p.birthdaySolar, + isAdmin: p.isAdmin, + }; + return it; +} + +/** + * 本地搜索（**在已加载的名册上过滤**）。 + * + * ⚠️ 与服务端 `?q=` 的能力**不完全一致**： + * 本地能搜姓名/手机号/单位/职务/标签；**搜不到称谓**（那值依赖家族图谱）。 + * 这是有意的取舍：本地搜索即时、断网可用；要按称谓搜就走接口。 + * ⚠️ 所以这里**不假装**能力一样 —— 界面上的搜索框提示只说"姓名 / 单位 / 标签"。 + */ +function matchesKeyword(it: FbRosterItem, p: FbRosterPerson | undefined, q: string): boolean { + const k: string = q.trim().toLowerCase(); + if (k === '') { + return true; + } + // ---- ① 文字包含（姓名 / 标签 / 手机 / 单位 / 职务）---- + if (it.name.toLowerCase().indexOf(k) >= 0) { + return true; + } + for (const t of it.tags) { + if (t.toLowerCase().indexOf(k) >= 0) { + return true; + } + } + if (p !== undefined) { + if (p.phone.indexOf(k) >= 0 + || p.org.toLowerCase().indexOf(k) >= 0 + || p.title.toLowerCase().indexOf(k) >= 0 + || p.name.toLowerCase().indexOf(k) >= 0) { + return true; + } + } + + // ---- ② 拼音首字母**子序列**匹配 ---- + // 🔴 用户 2026-10-13："增加按照名字的拼音首字母进行搜索， + // 例如杨永全，可以使用 y、yy、yyq 来搜索和筛选。" + // 用**子序列**（不是前缀）： + // · `y` → 在 `yyq` 里出现过 ✓ + // · `yy` → y→y 依次出现 ✓ + // · `yyq` → 全中 ✓ + // · `yq` → 跳过第二个 y，y…q ✓（用户可能只记得"永全"） + // 这与服务端 `Pinyin::isSubsequence` **完全同一套规则** —— + // 否则会出现"本地搜得到、服务端搜不到"这种诡异差异。 + // ⚠️ 只对**纯字母**的查询词做子序列：如果用户输的是中文/数字， + // 跟拼音首字母比没意义（`indexOf` 会全部返回 -1，等于白跑）。 + if (/^[a-z]+$/.test(k)) { + if (isSubsequence(k, it.initials.toLowerCase())) { + return true; + } + // 昵称的首字母也要能搜到（服务端把 name + my_nickname 拼一起算 initials， + // 但端上 `initials` 字段就是那个拼好的串 ⇒ 直接比即可） + if (p !== undefined && isSubsequence(k, p.initials.toLowerCase())) { + return true; + } + } + return false; +} + +/** + * `q` 是否是 `s` 的**子序列**（与服务端 `Pinyin::isSubsequence` 同一算法）。 + * + * 例：`isSubsequence('yq', 'yyq') === true`；`isSubsequence('qy', 'yyq') === 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; +} +/** + * 家谱里的一代（一层）。 + * + * ⚠️ 由 `FbKinRing`（旧的"三圈"演示结构）改成"按代数分层" —— + * 因为真实接口 `/api/v1/kin` 给的就是**按代数**的人（`gen` 字段）， + * 而"三圈"（直系/其他亲属）是当初照着演示数据设计的分法， + * 与真实数据的形状对不上。 + */ +interface FbKinGen { + /** 代数：0 = 我，负 = 长辈，正 = 晚辈 */ + gen: number; + /** 层名，如「父母辈」 */ title: string; - /** 说明 */ - hint: string; - /** 圈内的关系条目 */ - rels: FbKinRelation[]; + /** 说明，如「父辈与母辈」 */ + sub: string; + /** 这一代的人 */ + people: FbKinPerson[]; } @ComponentV2 @@ -41,131 +172,674 @@ export struct FbPeoplePage { /** 子视图：名册（roster）/ 家谱（kin） */ @Local subView: string = 'roster'; - /** 名册范围：member（家里的人）/ friend（亲友） */ - @Local rosterScope: string = 'member'; - /** 搜索词（本轮只做界面，不过滤） */ + /** 搜索词（本地过滤） */ @Local keyword: string = ''; + /** + * 当前选中的标签（'' = 不筛选）。 + * + * 🔴 用户 2026-10-12："名册不需要分组，是按照标签来的， + * 把标签都同步过来放在上面，通过点击标签可以筛选"。 + * ⇒ 用**标签**做筛选维度，取代原来的分组分堆。 + */ + @Local tagFilter: string = ''; + /** 标签云（每个标签 + 人数），来自本地库聚合 */ + @Local tagCloud: FbTagCount[] = []; - private all: FbRosterItem[] = FB_DEMO_ROSTER; - private rels: FbKinRelation[] = FB_DEMO_KIN_RELATIONS; + // ---- 数据（本地优先：先读本地库，再后台同步）---- + /** + * 名册里的人（**来自本地库**）。 + * + * ⚠️ 初值给空数组而不是演示数据：先渲染假的、再被真数据替换， + * 用户会看到"闪一下"。宁可先显示"加载中/暂无"。 + */ + @Local all: FbRosterItem[] = []; + /** 是否正在首次加载 */ + @Local loading: boolean = true; + /** 顶部提示（同步状态 / 未登录说明） */ + @Local syncNote: string = ''; + /** + * 当前点开详情的人（null = 没打开）。 + * + * ⚠️ 存**完整对象**而不是 id：详情页要用的字段全在列表数据里 + * （`/roster` 一次就给全了），存 id 还得回查一遍。 + */ + @Local detailPerson: FbRosterPerson | null = null; + /** + * 详情请求的**序号**（防止"连点两个人，前一个的响应覆盖后一个"）。 + * + * ⚠️ 不加 `@Local`：它不参与渲染，只是给异步回调比对用。 + */ + private detailToken: number = 0; + /** + * 是否正在"新建成员"（用户 2026-10-15：全功能客户端要有添加）。 + * + * ⚠️ 复用同一个编辑浮层（`isCreate: true`）—— 表单字段完全一样， + * 没必要为"新建"再维护一套字段。 + */ + @Local creating: boolean = false; + /** + * 正在编辑的人（null = 没打开编辑）。 + * + * ⚠️ 详情与编辑**是两个独立的浮层状态**（不是"详情里嵌编辑"）： + * 点详情里的「编辑」⇒ 关详情、开编辑。 + * 这样每个浮层的状态都简单（一个 null 判断），也不会互相盖住。 + */ + @Local editPerson: FbRosterPerson | null = null; + + /** + * 🔴 浮层开合时**让底部悬浮栏让位**（用户 2026-10-15 实测的真 bug）。 + * + * 现象：详情卡片底部的「编辑 / 关闭」按钮（屏幕 y≈2207-2331）与悬浮栏 + * （y≈2240-2350）**在屏幕上重叠**，而悬浮栏在**更外层的 `Index` Stack** 里 + * ⇒ 层级更高 ⇒ 点按钮被悬浮栏抢走 ⇒ **直接跳到日历页**。 + * + * 为什么用 `@Monitor` 而不是在 9 处赋值点手写 `openSheet()`/`closeSheet()`： + * 本页 `detailPerson` / `editPerson` 的赋值点有 9 处（含回调、同步回填、 + * 抽屉里点人等多种入口），**手写必然漏**；漏一处就是"浮层开着但悬浮栏还在， + * 按钮又点不动"的隐蔽 bug。 + * ⇒ 用 `@Monitor` 一处声明、自动跟随派生，赋值的写法一概不用改。 + * + * ⚠️ 用 `AppStorageV2.connect` 拿到的**同一个单例**（`fbAppState()` 返回的就是它）。 + */ + @Monitor('detailPerson', 'editPerson', 'creating') + onSheetChanged(): void { + const app: FbAppState = fbAppState(); + // 只要有一个浮层开着，就让悬浮栏让位（计数 0/1 即可，本页不会同时开两个） + const open: boolean = this.detailPerson !== null || this.editPerson !== null || this.creating; + if (open) { + app.sheetCount = 1; + } else { + app.sheetCount = 0; + } + } + /** + * 原始名册数据（按 id 索引）。 + * + * ⚠️ 为什么要多存这一份：页面 UI 用的是 `FbRosterItem`（没有手机号/单位/首字母）， + * 而**本地搜索**要能按这些字段搜 ⇒ 搜的时候回这里取。 + * 只存一份（不用 @Local）也够：它不直接参与渲染。 + */ + private rawById: Map = new Map(); + + /** + * 家谱里的人（**来自接口** `/api/v1/kin`）。 + * + * ⚠️ 与名册的 `all` **是两批数据**： + * 名册是"我名册里的人"（可上千），家谱是"以我为中心的关系网"（上下两代、十来人）。 + * 所以家谱要**单独拉**，不能从 `all` 里挑。 + */ + @Local kinPeople: FbKinPerson[] = []; + /** 家谱的同步提示（与名册分开：两批数据可能一个成功一个失败） */ + @Local kinSyncNote: string = ''; + /** + * 家谱的显示方式：'graph'（知识图谱，默认）/ 'list'（分层列表）。 + * + * 用户要求把它做成知识图谱那样的图，所以默认给图谱。 + * 但保留列表：小屏上人多了图会挤，列表能看清每个人的关系摘要。 + */ + @Local kinMode: string = 'graph'; + /** 我在家谱里的 id（图谱里要标出「我」） */ + @Local kinMeId: number = 0; + private repo: FbPersonRepo = FbPersonRepo.inst(); + + /** + * 页面出现：先读本地库渲染，再后台同步。 + * + * ⚠️ 与观影页同一套流程（**先渲染本地、再后台同步**）， + * 理由见 FbMoviesPage 的说明：等网络回来才渲染 = 转圈好几秒、断网全白。 + */ + aboutToAppear(): void { + this.bootstrap(); + } + + private async bootstrap(): Promise { + const ctx: common.Context | undefined = this.getUIContext().getHostContext(); + if (ctx === undefined) { + this.loading = false; + this.syncNote = '本地存储不可用（上下文获取失败）'; + return; + } + try { + await FbDb.inst().open(ctx); + } catch (err) { + const e: BusinessError = err as BusinessError; + hilog.error(DOMAIN, TAG, '本地库打开失败：%{public}s', + e.message !== undefined ? e.message : JSON.stringify(err)); + this.loading = false; + this.syncNote = '本地库打开失败'; + return; + } + await this.reloadFromLocal(); + this.syncInBackground(); + } + + /** 空状态的标题 */ + private emptyTitle(): string { + return this.keyword.trim() !== '' ? '没找到' : '名册还是空的'; + } + + /** + * 空状态的说明。 + * + * ⚠️ 这两个方法**不是**为了"好看"才抽出来的 —— + * 在 `@Builder` 的组件参数里写**跨行的三目表达式**会让 ArkTS 编译器 + * 解析错乱，报的却是完全无关的 `comma operator` / `standalone this` + * （实测踩过：真正的错在 334-336 行，报错却指向 341 行）。 + * ⇒ 组件参数的取值**一律抽成方法**，别在括号里塞多行表达式。 + */ + private emptyHint(): string { + return this.keyword.trim() !== '' + ? '换个关键词试试（能搜姓名 / 单位 / 职务 / 标签）' + : '登录后会从服务器拉取你名册里的人'; + } + + /** 从本地库读名册并刷新界面 */ + private async reloadFromLocal(): Promise { + try { + const rows: FbRosterPerson[] = await this.repo.list(); + const m: Map = new Map(); + for (const p of rows) { + m.set(p.id, p); + } + this.rawById = m; + this.all = rows.map(toRosterItem); + // 标签云（从本地库聚合，见 FbPersonRepo.tagCloud 的说明） + this.tagCloud = await this.repo.tagCloud(); + // ⚠️ 筛选中的标签如果已经不存在了（同步后标签被删），要清掉 —— + // 否则列表会一直是空的，用户以为"人没了"。 + if (this.tagFilter !== '' && !this.hasTag(this.tagFilter)) { + this.tagFilter = ''; + } + } catch (err) { + hilog.error(DOMAIN, TAG, '读本地名册失败：%{public}s', JSON.stringify(err)); + } finally { + this.loading = false; + } + } + + /** 标签云里是否还有这个标签 */ + private hasTag(tag: string): boolean { + for (const t of this.tagCloud) { + if (t.tag === tag) { + return true; + } + } + return false; + } + + /** + * 后台同步（不阻塞界面）。 + * + * ⚠️ 失败**不弹窗、不清空已有数据** —— 本地优先下"同步失败"只是 + * "这次没更新"，用户手上的数据仍然可用。只在页面上留一行小字。 + */ + private async syncInBackground(): Promise { + // 🔴 家谱与名册**并行拉**：两者是**独立的两批数据** + // （名册 = 我名册里的人，可上千；家谱 = 以我为中心的上下两代，十来人）。 + // ⚠️ 并行（不是串行）：串行会让"切到家谱"多等一个往返。 + // ⚠️ 家谱**不 await 在名册后面**：名册走实体表、家谱走通用缓存， + // 两条路互不依赖。 + this.loadKin(); + + const token: string = FB_TOKEN_STORE.get(); + if (token === '') { + this.syncNote = '未登录，显示的是本地数据'; + return; + } + const res: FbRosterSyncResult = await this.repo.sync(token); + if (!res.ok) { + hilog.warn(DOMAIN, TAG, '名册同步失败：%{public}s', res.error); + this.syncNote = '同步失败：' + res.error; + return; + } + this.syncNote = ''; + await this.reloadFromLocal(); + } + + /** + * 拉家谱（`/api/v1/kin`）—— 先缓存、再网络。 + * + * ⚠️ 家谱走**通用缓存**（`module_cache`）而不是实体表： + * 它是"一张关系网"，形状与名册的"一批人"不同， + * 落成实体表要 4 张（人/父母/配偶/子女），收益却只是 + * "省一次解析"——不值得。见 `FbModuleRepo` 的说明。 + */ + private async loadKin(): Promise { + await loadModule('kin', parseKin, + (g: FbKinGraph): void => { + this.kinPeople = g.people; + this.kinMeId = g.meId; + }, + (note: string): void => { + this.kinSyncNote = note; + }); + } build() { - Scroll() { - Column() { - this.topBar() + // 🔴 外层再套一个 Stack：把"页面内容"与"人员详情浮层"叠起来。 + // 浮层是**页面内的覆盖层**（不是系统弹窗），理由见 FbPersonSheet 文件头。 + Stack({ alignContent: Alignment.Bottom }) { + this.pageBody() - // ---- 分段切换（名册 / 家谱）---- - Row({ space: 4 }) { - this.segBtn('名册', 'roster', '#A84A28') - this.segBtn('家谱', 'kin', '#A84A28') - } - .padding(3) - .backgroundColor(FbColors.inputBg) - .borderRadius(FbMetric.radiusPill) - .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 }) + if (this.detailPerson !== null) { + // 半透明遮罩：点它也能关 + Column() + .width('100%') + .height('100%') + .backgroundColor('#00000066') + .onClick((): void => { + this.detailPerson = null; + }) - if (this.subView === 'roster') { - this.rosterView() - } else { - this.kinView() - } + FbPersonSheet({ + person: this.detailPerson, + onClose: (): void => { + this.detailPerson = null; + }, + onEdit: (): void => { + // 关详情、开编辑（把同一个人带过去） + this.editPerson = this.detailPerson; + this.detailPerson = null; + } + }) + } + + // ---- 编辑浮层 ---- + if (this.editPerson !== null) { + Column() + .width('100%') + .height('100%') + .backgroundColor('#00000066') + .onClick((): void => { + this.editPerson = null; + }) + + FbPersonEditSheet({ + person: this.editPerson, + // 已有标签 ⇒ 供**点选**（不是手输）—— 用户 2026-10-16 + knownTags: this.allTagNames(), + onCancel: (): void => { + // 取消 ⇒ 回到详情（不是直接回列表：用户刚才是从详情进来的） + this.detailPerson = this.editPerson; + this.editPerson = null; + }, + onSaved: (): void => { + // 🔴 v52：保存成功 ⇒ **回到详情**（而不是关掉回列表）。 + // 理由：用户改完最想确认"改对了没"，直接看详情最顺； + // 关掉的话还得再点一次那个人。 + // ⇒ 先用**刚保存的人**把详情打开（它是编辑前的快照、先垫上）， + // 紧接着发一次详情请求把服务端权威值取回来（`openDetail` 会做）。 + const who: FbRosterPerson | null = this.editPerson; + this.editPerson = null; + this.syncInBackground(); + if (who !== null) { + this.openDetail(who.id); + this.syncNote = '已保存 ' + who.shown; + } else { + this.detailPerson = null; + this.syncNote = '已保存'; + } + }, + onDeleted: (): void => { + // 删除成功 ⇒ 关掉编辑、回列表，并**重新同步**（那人整条会消失）。 + // ⚠️ 与 `onSaved` 分开处理：保存只需刷新那一条的显示， + // 删除要把整份名册重新拉一遍（本地库那一行已经没了）。 + const who: FbRosterPerson | null = this.editPerson; + this.editPerson = null; + this.detailPerson = null; + this.syncInBackground(); + this.syncNote = who !== null ? ('已删除 ' + who.shown) : '已删除'; + } + }) + } + + // ---- 新建成员浮层（复用编辑浮层，`isCreate` 打开新建模式）---- + if (this.creating) { + Column() + .width('100%') + .height('100%') + .backgroundColor('#00000066') + .onClick((): void => { + this.creating = false; + }) + + FbPersonEditSheet({ + person: null, + isCreate: true, + knownTags: this.allTagNames(), + onCancel: (): void => { + this.creating = false; + }, + onSaved: (): void => { + // 新建成功 ⇒ 关掉浮层、重新同步（新人要出现在列表里） + this.creating = false; + this.syncInBackground(); + this.syncNote = '已添加'; + }, + onDeleted: (): void => { + // 新建模式没有删除，不会走到这里 + this.creating = false; + } + }) } - .width('100%') - // 底部悬浮快捷栏的预留：它浮在内容之上，不留白会压住最后一屏 - .padding({ bottom: FB_DOCK_RESERVE }) } .width('100%') .height('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) } + /** 页面主体（原 build 的内容，抽出来给 Stack 用） */ + @Builder + pageBody() { + // 🔴 根容器是 **Column 而不是 Scroll**（页面不滚、列表自己滚）。 + // + // 为什么不让整页进 `Scroll`（用户 2026-10-12 就定过）： + // 名册有上千人，整页滚动会把「所有行」都当成一个超长内容渲染， + // 而 `List` 是**按需渲染**的（只建可视区附近的 item）。 + // 把 List 放进 Scroll ⇒ List 高度塌成 0、性能也崩。 + // + // ⚠️ 但"顶栏固定不跟滚"是用户 2026-10-15 明确不接受的一点 + // （"其他子页面全部按照这个布局方式进行改造"，首页那套是跟滚的）。 + // ⇒ 解法：**把顶栏与页头塞进 `List` 的第一个 item**， + // 它们就成了"列表内容的一部分"，随列表一起滚走； + // 同时 `List` 仍是唯一滚动容器 ⇒ 按需渲染、性能不丢。 + // （见 rosterView / kinView 里的 `this.pageHeaderItem()`） + Column() { + if (this.subView === 'roster') { + this.rosterView() + } else { + this.kinView() + } + } + .width('100%') + .height('100%') + // ⚠️ **不要**在这里加 `padding({ bottom: FB_DOCK_RESERVE })`： + // · 首页/观影页是 `Scroll` + **内容末尾** padding ⇒ 预留只在滚到底时出现； + // · 本页外层是 `Column`（不滚动），给它加 padding 等于**永久占掉**一块高度 + // ⇒ 列表矮一截、底下露出一条宽米色（实测 144px vs 观影 80px）。 + // ⇒ 让列表撑满整屏，"别被悬浮栏压住"交给**列表自己的底部内边距**。 + } + + /** + * 顶栏 + 页头（作为一个**列表首项**，随列表滚走）。 + * + * 🔴 为什么要做成"列表首项"而不是放在页面外层： + * 用户 2026-10-15 要求本页也按首页那套（顶栏跟着内容向上滑走）。 + * 本页又不能整页用 `Scroll`（会把 `List` 的高度压成 0，见 `pageBody` 的说明）。 + * ⇒ 唯一同时满足两者的做法：把顶栏塞进 `List` 的**第一个 item**。 + * 它是列表内容的一部分 ⇒ 上滑时跟着滚出屏幕（和首页观感一致）， + * 而 `List` 依旧按需渲染 ⇒ 上千人也不卡。 + */ + @Builder + pageHeaderItem() { + Column() { + this.topBar() + this.peopleHeader() + } + .width('100%') + } + + /** + * 页头（分段切换 + 搜索 + 标签筛选条）。 + * + * ⚠️ 从 `rosterView` 里提出来放在**页面级**： + * 这样"名册/家谱"与搜索框在两个子视图下都常驻， + * 切换子视图时不会跟着列表一起滚走。 + */ + @Builder + peopleHeader() { + Column() { + // ---- 分段切换（名册 / 家谱）---- + Row({ space: 4 }) { + this.segBtn('名册', 'roster', '#A84A28') + this.segBtn('家谱', 'kin', '#A84A28') + } + .padding(3) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusPill) + .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 }) + + if (this.subView === 'roster') { + // ---- 搜索 + 添加 ---- + Row({ space: 8 }) { + Row({ space: 6 }) { + Image($r('app.media.fb_ic_search')) + .width(15) + .height(15) + .renderMode(ImageRenderMode.Template) + .fillColor(FbColors.faint) + TextInput({ placeholder: '搜索：姓名 / 拼音首字母（yyq）/ 手机 / 单位', text: this.keyword }) + .placeholderColor(FbColors.faint) + .placeholderFont({ size: FbMetric.fontSmall }) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + .backgroundColor(Color.Transparent) + .padding(0) + .layoutWeight(1) + .onChange((v: string) => { + this.keyword = v; + }) + } + .layoutWeight(1) + .height(36) + .padding({ left: 12, right: 12 }) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .alignItems(VerticalAlign.Center) + + FbPrimaryButton({ + label: '添加', + bg: '#4A7C82', + icon: $r('app.media.fb_ic_plus'), + // 🔴 v52：接上（之前这颗按钮**没有回调**，点了什么都不发生 —— + // "全功能客户端"不能有这样的摆设）。 + onTap: (): void => { + this.creating = true; + } + }) + } + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) + .alignItems(VerticalAlign.Center) + + // ---- 标签筛选条 ---- + this.tagBar() + } + } + .width('100%') + } + + /** + * 标签筛选条（横向滚动的一排 chips）。 + * + * 🔴 用户 2026-10-12："名册不需要分组，是按照标签来的，把标签都同步过来， + * 放在上面，通过点击标签，可以进行筛选，标签显示在每个人的下面。" + * ⇒ 从"按分组分堆"改成"**顶部标签筛选 + 平铺列表**"。 + * ⚠️ 这其实和 Web 端 v28 的改法**完全一致**（那边也是把分组降级成标签， + * index.php 的注释写着理由："一个人既是小学同学又是初中同学，分组放不下"）。 + * 端上之前还留着分组，是没跟上。 + */ + @Builder + tagBar() { + if (this.tagCloud.length > 0) { + Scroll() { + Row({ space: 8 }) { + // 「全部」永远排第一（点它清除筛选） + // 🔴 用 `FbTagChip` **组件**而不是 `@Builder` —— 见该组件的文件头说明 + // （@Builder 的简单类型参数变化**不会**触发重建 = 点了没反应）。 + FbTagChip({ + label: '全部', + active: this.tagFilter === '', + count: -1, + onPick: (): void => { + this.tagFilter = ''; + } + }) + ForEach(this.tagCloud, (t: FbTagCount) => { + FbTagChip({ + label: t.tag, + active: this.tagFilter === t.tag, + count: t.n, + onPick: (): void => { + // 再点当前已选中的标签 = 取消（符合直觉） + this.tagFilter = this.tagFilter === t.tag ? '' : t.tag; + } + }) + }, (t: FbTagCount): string => 'tc_' + t.tag) + } + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad }) + } + // ⚠️ 横向滚动：标签可能十几个，竖屏排不下。 + .scrollable(ScrollDirection.Horizontal) + // 🔴 横向滚动上报（让抽屉给横滑组件让位）—— 见 common/FbScroll.ets + .onDidScroll(fbOnHScroll) + .scrollBar(BarState.Off) + .width('100%') + .padding({ bottom: 8 }) + } + } + + // ============================================================ // 名册 // ============================================================ - @Builder +@Builder rosterView() { Column() { - // 操作条 - Row({ space: 8 }) { - Row({ space: 6 }) { - Image($r('app.media.fb_ic_search')) - .width(15) - .height(15) - .renderMode(ImageRenderMode.Template) - .fillColor(FbColors.faint) - TextInput({ placeholder: '搜索姓名、手机、备注', text: this.keyword }) - .placeholderColor(FbColors.faint) - .placeholderFont({ size: FbMetric.fontSmall }) - .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.ink) - .backgroundColor(Color.Transparent) - .padding(0) - .layoutWeight(1) - .onChange((v: string) => { - this.keyword = v; - }) + // 提示行（同步状态 / 未登录说明）—— 只在有话说时显示 + if (this.syncNote !== '') { + Row() { + Text(this.syncNote) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .maxLines(2) } - .layoutWeight(1) - .height(36) - .padding({ left: 12, right: 12 }) - .backgroundColor(FbColors.inputBg) - .borderRadius(FbMetric.radiusS) - .alignItems(VerticalAlign.Center) - - FbPrimaryButton({ - label: '添加', - bg: '#4A7C82', - icon: $r('app.media.fb_ic_plus') - }) - FbIconButton({ icon: $r('app.media.fb_ic_gear'), tint: FbColors.muted }) + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 6 }) } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) - .alignItems(VerticalAlign.Center) - // 范围切换（家里的人 / 亲友） - Row({ space: 8 }) { - this.scopeChip('家里的人', 'member') - this.scopeChip('亲友', 'friend') - Blank() - Text(this.byScope().length.toString() + ' 人') - .fontSize(FbMetric.fontTiny) + if (this.loading) { + Text('正在读取本地数据…') + .width('100%') + .padding({ top: 40, bottom: 40 }) + .textAlign(TextAlign.Center) + .fontSize(FbMetric.fontSmall) .fontColor(FbColors.faint) - } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 6 }) - .alignItems(VerticalAlign.Center) - - // 分组列表 - List({ space: 0 }) { - ForEach(this.groups(), (g: FbGroup) => { - ListItemGroup({ header: this.groupHeader(g.title, g.count + ' 人') }) { - ForEach(g.items, (p: FbRosterItem) => { - ListItem() { - this.personRow(p) - } - }, (p: FbRosterItem): string => 'pr_' + p.id.toString()) + } else if (this.visiblePeople().length === 0) { + Text(this.emptyHint()) + .width('100%') + .padding({ top: 40, bottom: 40, left: 24, right: 24 }) + .textAlign(TextAlign.Center) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + } else { + // 🔴 **平铺列表**（不再按分组分堆）。 + // 用户 2026-10-12："名册不需要分组，是按照标签来的"， + // ⇒ 分组筛选已移到顶部的标签条（见 tagBar），列表只负责呈现"筛完的人"。 + // ⚠️ 这也让 `List` 的 `ListItemGroup` 整个消失 —— 少一层嵌套， + // 而且不用再纠结"分组头的背景色"。 + List({ space: 0 }) { + // 🔴 **顶栏 + 页头作为第一个 item**（用户 2026-10-15 要求本页也跟滚）。 + // 放进 List 内容 ⇒ 上滑时跟着滚出屏幕，与首页观感一致； + // 同时 List 仍按需渲染 ⇒ 上千人也不卡（见 pageHeaderItem 的说明）。 + ListItem() { + this.pageHeaderItem() } - }, (g: FbGroup): string => 'rg_' + g.key) + + ForEach(this.visiblePeople(), (p: FbRosterItem, idx: number) => { + ListItem() { + // 🔴 每条**独立圆角卡**（用户 2026-10-16）⇒ 卡与卡之间留空隙， + // 不再用 Divider 连成一大块白底。 + // ⚠️ 间距写在 `personRow` **内部**（@Builder 返回 void，不能链式修饰） + this.personRow(p) + } + }, (p: FbRosterItem): string => 'pr_' + p.id.toString()) + + // 🔴 **末尾占位**：给底部悬浮栏留出高度。 + // 为什么要做成**列表的最后一个 item**、而不是 List 的 `padding(bottom)`： + // · `padding(bottom)` 是**容器内边距** ⇒ 它把列表的**可视底边往上收** + // ⇒ 内容在那条线就停住/被裁，看着就是"没滚到屏幕最底、下面空一块" + // （用户 2026-10-15：「它的内容是从悬浮框上面滚出来的」）； + // · 做成 item ⇒ 它是**内容的一部分**，跟着一起滚， + // 平时在屏幕外、只有滚到底时才出现在悬浮栏后面 —— + // 与观影页 `.padding` 挂在**内容 Column** 上的效果一致。 + ListItem() { + this.dockSpacerItem() + } + } + // 🔴 **`layoutWeight(1)` 让列表吃掉页头之后的全部剩余高度** + // ⇒ 列表白底一直铺到屏幕底部，下面只留一条极窄的页面底色 + // （与首页/观影页观感一致；用户明确要求这个形态）。 + // ⚠️ 这里能用 `layoutWeight` 的**前提是外层不再是 Scroll** —— + // 在 Scroll 里子组件高度由内容决定，`layoutWeight` 会拿到 0。 + // 见 `build()` 的说明。 + .layoutWeight(1) + .width('100%') + // 🔴 **白底铺满整屏、不内缩、不圆角**（用户 2026-10-15 反馈"最下面还有一条 + // 有背景色的东西，不是从最底下滑上来的"）。 + // + // 之前是"左右 margin 内缩 + 圆角"的**卡片形态** ⇒ + // ① 列表底部与屏幕底之间留出页面底色； + // ② 左右两条底色也会在滚到底时露出来。 + // ⇒ 白底**通栏到底**，不再做卡片。 + // ⚠️ 别再用 `margin`／`borderRadius`／`clip` —— 那三个就是"卡片感"的来源。 + .backgroundColor(FbColors.surface) + // 🔴🔴 **这里绝对不能再加 `padding({bottom})`** + // （用户 2026-10-15：「它的内容是从悬浮框上面滚出来的」）。 + // + // ⚠️ 容器上的 `padding(bottom)` 是**内边距**：它会把 List 的**可视底边** + // 往上收一截 ⇒ 列表内容在那条线就被裁掉/停住， + // 看上去就是"内容没能滚到屏幕最底、下面空出一块"。 + // ⇒ 正确做法与观影页一致：预留改成**列表内容末尾的一个占位 item** + // （它是"内容"，会跟着一起滚，只在滚到底时才占位）。 + // 见下面的 `dockSpacerItem`。 + .scrollBar(BarState.Off) + .edgeEffect(EdgeEffect.Spring) + // 🔴 滚动方向上报（驱动底部悬浮栏随滚收起 / 唤回）—— 见 common/FbScroll.ets + .onDidScroll(fbOnScroll) + // 🔴 触摸方向兜底（内容不足一屏的页面滚不动，只能靠手指位移判断） + // 与上面的 `onDidScroll` 互补、互不冲突 —— 见 common/FbScroll.ets + .onTouch(fbOnTouch) } - .layoutWeight(1) - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 24 }) - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) } .width('100%') .layoutWeight(1) + // 🔴 外层也铺白底：内容不足一屏时，列表白底铺不到屏幕底， + // 这一层就是"兜底的白" —— 不能让页面底色从底部露出来。 + .backgroundColor(FbColors.surface) + } + + /** + * 列表末尾的**悬浮栏占位**（纯留白）。 + * + * 🔴 存在的理由：底部悬浮快捷栏是**浮在内容之上**的， + * 不留白的话最后一屏会被它压住。但这个留白**必须做成内容的一部分** + * （列表的最后一个 item），不能做成容器的 `padding(bottom)` —— + * 后者会把列表可视底边往上收，造成"内容没滚到屏幕最底"的观感。 + * ⚠️ 高度用 `FB_DOCK_RESERVE`（栏高 + 下边距 + 余量），与观影页口径一致。 + * ⚠️ 背景色给**白**：它是列表最后一块，白底要一直铺到屏幕底， + * 否则这里会露出一条页面底色（用户看到的"黄条"）。 + */ + @Builder + dockSpacerItem() { + Row() + .width('100%') + .height(FB_DOCK_RESERVE) + .backgroundColor(FbColors.surface) } /** 一个人一行：头像 + 名字/称谓 + 标签 + 生日 */ @Builder personRow(p: FbRosterItem) { Row({ space: 12 }) { - FbAvatar({ name: p.name, color: p.avatarColor, dia: 40, fontSizeVp: 16 }) + // 头像：有图的显示图、没图的回落色块字（800 人里只有 19 人有图） + FbAvatar({ + name: p.name, + color: p.avatarColor, + dia: 40, + fontSizeVp: 16, + imageUrl: fbImageUrl(p.avatar, FB_TOKEN_STORE.get()) + }) Column({ space: 3 }) { Row({ space: 6 }) { @@ -177,7 +851,7 @@ export struct FbPeoplePage { if (p.isAdmin) { FbTag({ text: '管理员', tone: 'brand' }) } - if (p.kinship !== p.name) { + if (p.kinship !== p.name && p.kinship !== '') { FbTag({ text: p.kinship, tone: 'muted' }) } } @@ -200,176 +874,363 @@ export struct FbPeoplePage { .alignItems(HorizontalAlign.Start) .layoutWeight(1) - Image($r('app.media.fb_ic_forward')) - .width(13) - .height(13) - .renderMode(ImageRenderMode.Template) - .fillColor(FbColors.faint) + // 「详情」按钮（用户要求：右侧加一个按钮写着"详情"） + // ⚠️ 为什么不是那个灰箭头：箭头**只是装饰**（用户说的"灰色小横线"就是它）， + // 而"点行"这个动作被用户指定成**拨号**了 —— + // 所以详情必须有个**显式的按钮**，否则没有任何入口。 + Text('详情') + .fontSize(FbMetric.fontTiny) + .fontColor('#4A7C82') + .padding({ left: 12, right: 12, top: 6, bottom: 6 }) + .backgroundColor('#4A7C8215') + .borderRadius(FbMetric.radiusS) + .onClick((): void => { + this.openDetail(p.id); + }) } .width('100%') - .padding(14) + .padding({ left: 14, right: 14, top: 11, bottom: 11 }) + // 🔴 用户 2026-10-16：「人员列表项：每一个人员是不是都可以做成一个 + // **圆角矩形**的形式？」⇒ 每条**独立一张圆角卡**（白底 + 间距）， + // 不再靠 Divider 连成一大块。 .backgroundColor(FbColors.surface) - .borderRadius(FbMetric.radius) - .margin({ bottom: 8 }) + .borderRadius(FbMetric.radiusS) + // ⚠️ 间距放这里（@Builder 不能链式）—— 左右留边 + 卡间空隙 + .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 8 }) .alignItems(VerticalAlign.Center) + // 🔴 点整行 = **拨打这个人的电话**（用户 2026-10-13 / 10-15 明确要求）。 + // 规则（2026-10-15 用户确认）：**有主号打主号**； + // 一个号码都没有时改成"打开详情"（点了没反应比什么都让人困惑）。 + // + // ⚠️ 为什么不用"挑最近打过的号"： + // HarmonyOS **没有"读通话记录列表"的公开 API**（只有个 + // `hasMatchedCallLog`——判断某号码 6 小时内打过没，还要 `CHECK_CALL_LOG` + // 敏感权限），**无法按时间排出"最近那个"**。已与用户确认走"主号优先"。 + // ⚠️ `phones` 由服务端保证「主号排第一」（见 FbRosterPerson.phones）。 + // ⚠️ 用 `p.phones` 而不是 `p.phone`：后者只是 `phones[0]` 的便捷别名， + // 这里显式用数组，语义更清楚（也方便将来做"多号选择"）。 + .onClick((): void => { + if (p.phones.length > 0) { + this.dial(p.phones[0], p.name); + } else { + this.openDetail(p.id); + } + }) } + /** + * 打开某人的详情浮层（点「详情」按钮、或对没手机号的人点整行）。 + * + * 🔴 v52（用户 2026-10-15）：**先秒开、再补全**。 + * 本地库里那份只有"列表要用的字段"，而"全功能"要求详情能看到 + * **工作经历 / 补充电话 / 私人备注 / 各级地址** —— 这些只在 + * `GET /people/` 里有。 + * ⇒ ① 立即用本地那份把浮层打开（不等网络，点开就有内容）； + * ② 同时发一个详情请求，回来就**原地替换**（字段更多、更准）。 + * ⚠️ 断网/失败时保持 ① 的显示，不弹错误 —— + * "详情少几项"比"点了没反应"好得多。 + * ⚠️ 用 `this.detailToken` 防止"快速连点两个人，前一个的响应把后一个覆盖"。 + */ + /** + * 名册里**所有标签名**（给编辑浮层的"点选"用）。 + * + * ⚠️ 取自本地库聚合出来的标签云（`this.tagCloud`，按人数降序）—— + * 它就是"这个家里用过哪些标签"的权威清单。 + */ + private allTagNames(): string[] { + const out: string[] = []; + for (const t of this.tagCloud) { + out.push(t.tag); + } + return out; + } + + private openDetail(id: number): void { + const raw: FbRosterPerson | undefined = this.rawById.get(id); + if (raw === undefined) { + return; + } + this.detailPerson = raw; + const token: string = FB_TOKEN_STORE.get(); + if (token === '') { + return; + } + this.detailToken += 1; + const my: number = this.detailToken; + this.repo.fetchDetail(id, token).then((full: FbRosterPerson | null): void => { + // ① 期间用户已经关了浮层、或又点开别人 ⇒ 丢弃这次结果 + if (full === null || my !== this.detailToken) { + return; + } + // ② 浮层还开着同一个人 ⇒ 原地升级成完整版 + if (this.detailPerson !== null && this.detailPerson.id === id) { + this.detailPerson = full; + } + // ③ 顺手把列表里那份也补全（详情带的字段是超集，回填不吃亏） + this.rawById.set(id, full); + }); + } + + /** + * 拨号（跳到系统拨号盘，**不直接呼出**）。 + * + * ⚠️ 用 `call.makeCall(context, 号码)` 拉系统拨号盘并填好号码， + * 由用户按最后一下 —— 既满足"不直接呼出"的合规要求， + * 又不会像 `action: 'ohos.want.action.dial'` 那样弹「选择打开方式」 + * （隐式 Intent 会让所有认领该 action 的应用都成为候选，实测踩过）。 + */ + private dial(phone: string, who: string): void { + // ⚠️ 必须是 **`UIAbilityContext`**，不是 `common.Context` —— + // `startAbility` 只在 UIAbilityContext 上（实测：用 common.Context + // 编译报 "Property 'startAbility' does not exist on type 'Context'"）。 + const ctx: common.UIAbilityContext | undefined = + this.getUIContext().getHostContext() as common.UIAbilityContext | undefined; + if (ctx === undefined) { + return; + } + // 🔴 用 `call.makeCall(ctx, 号码)` 而**不是** `startAbility(dial + tel: URI)` + // （用户 2026-10-15 真机实测踩出来的）： + // + // `startAbility({ action: 'ohos.want.action.dial', uri: 'tel:...' })` 是 + // **隐式 Intent** —— 系统里凡声明了该 action 的应用都会成为候选， + // 于是弹出「选择打开方式」框（实测本机弹的就是这个，还误点进了"同步日历"）。 + // 而且各厂商对 `tel:` 的处理也不一致（有的拉起拨号盘、有的直接拨）。 + // + // `call.makeCall(context, phoneNumber)` 是**系统直达 API** + // （"Launches the call screen and displays the dialed number"）， + // 没有应用选择框、行为跨机型一致，且**不需要任何权限** + // （只需 `SystemCapability.Applications.Contacts`，非受限）。 + // ⚠️ 仍只是"打开拨号盘并填好号码"，最后一下由用户按 —— 合规要求满足。 + // ⚠️ `@since 12`，本工程 `compatibleSdkVersion` 24，可用。 + call.makeCall(ctx, phone).catch((err: BusinessError): void => { + hilog.warn(DOMAIN, TAG, '拨号失败（%{public}s）：%{public}s', who, JSON.stringify(err)); + }); + } + + // ============================================================ // 家谱 // ============================================================ + /** + * 家谱的说明条（"以我为中心" + 图谱/列表切换 + 补关系按钮）。 + * + * ⚠️ 从 `kinView` 里抽出来的原因：**列表模式**要把它**一起放进滚动的 Scroll** + * （这样它才跟着内容滚走），而**图谱模式**它是固定的一层。 + * 抽成一个 Builder，两处引用同一份实现，不会改一处漏一处。 + */ + @Builder + kinHeader() { + Row({ space: 8 }) { + Column({ space: 2 }) { + Text('以我为中心') + .fontSize(FbMetric.fontBody) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Text(this.kinTotalText()) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + + // 图谱 / 列表 切换 + Row({ space: 0 }) { + this.kinModeBtn('图谱', 'graph') + this.kinModeBtn('列表', 'list') + } + .padding(2) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusPill) + + FbPrimaryButton({ + label: '补关系', + bg: '#8A6B4B', + icon: $r('app.media.fb_ic_plus') + }) + } + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) + .alignItems(VerticalAlign.Center) + } + @Builder kinView() { Column() { - // 说明条 - Row({ space: 8 }) { - Column({ space: 2 }) { - Text('以我为中心') - .fontSize(FbMetric.fontBody) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Text(this.rels.length.toString() + ' 条连线 · 父母 / 配偶 / 子女填上就能长出来') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) + // 🔴 图谱模式**不跟滚**（它是 Canvas 画的一整屏图，本就没有"滚动内容"可言） + // ⇒ 本模式顶栏仍是固定的一层。 + // 「列表」模式则把页头移进内层 `Scroll` 一起滚（见下面的分支）。 + if (this.kinMode === 'graph') { + this.pageHeaderItem() + this.kinHeader() + } + + if (this.loading) { + Text('正在读取本地数据…') + .width('100%') + .padding({ top: 40, bottom: 40 }) + .textAlign(TextAlign.Center) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + } else if (this.kinPeople.length === 0) { + Text('还没有亲属关系。\n在网页端「家谱」里填上父母 / 配偶 / 子女，这里就会长出来。') + .width('100%') + .padding({ top: 40, bottom: 40, left: 24, right: 24 }) + .textAlign(TextAlign.Center) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + } else if (this.kinMode === 'graph') { + // ---- 知识图谱（Canvas 画：圆节点 + 连线）---- + Column() { + FbKinGraphView({ + people: this.kinPeople, + meId: this.kinMeId, + onPick: (id: number): void => { + this.openDetail(id); + } + }) } - .alignItems(HorizontalAlign.Start) .layoutWeight(1) - - FbPrimaryButton({ - label: '补关系', - bg: '#8A6B4B', - icon: $r('app.media.fb_ic_plus') - }) - } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) - .alignItems(VerticalAlign.Center) - - Scroll() { - Column({ space: 0 }) { - ForEach(this.rings(), (r: FbKinRing) => { - this.ringCard(r) - }, (r: FbKinRing): string => 'ring_' + r.title) - - // 完整连线表（家谱的「原始数据」，便于核对填得对不对） - Column({ space: 0 }) { - Row() { - Text('全部连线') - .fontSize(FbMetric.fontSmall) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Blank() - Text(this.rels.length.toString() + ' 条') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - } - .width('100%') - .padding({ left: 4, right: 4, bottom: 8 }) - - Column({ space: 0 }) { - ForEach(this.rels, (r: FbKinRelation, idx: number) => { - Row({ space: 10 }) { - Text(r.fromName) - .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.muted) - .maxLines(1) - Image($r('app.media.fb_ic_forward')) - .width(12) - .height(12) - .renderMode(ImageRenderMode.Template) - .fillColor(FbColors.faint) - Text(r.toName) - .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.ink) - .layoutWeight(1) - .maxLines(1) - FbTag({ text: r.label, tone: 'muted' }) - } - .width('100%') - .padding({ top: 10, bottom: 10 }) - .alignItems(VerticalAlign.Center) - - if (idx < this.rels.length - 1) { - Divider().color(FbColors.line2) - } - }, (r: FbKinRelation): string => 'rel_' + r.id.toString()) - } - .width('100%') - } - .padding(FbMetric.cardPad) - .backgroundColor(FbColors.surface) - .borderRadius(FbMetric.radius) - .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 28 }) - .alignItems(HorizontalAlign.Start) - } .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: FB_DOCK_RESERVE - 24 }) + } else { + // ---- 分层列表 ---- + Scroll() { + Column({ space: 0 }) { + // 🔴 **顶栏 + 页头 + 说明条**都放进这个滚动的 Scroll 里 + // ⇒ 上滑时一起滚走（用户 2026-10-15 要求本页也按首页那套）。 + // ⚠️ 图谱模式**不能**这样放（它不滚动，见上面的分支）。 + this.pageHeaderItem() + this.kinHeader() + + ForEach(this.kinGens(), (g: FbKinGen) => { + this.genBlock(g) + }, (g: FbKinGen): string => 'kg_' + g.gen.toString()) + + Text('只显示以我为中心、上下两代以内的亲属（手机上再往外排就看不下了）。') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 8, bottom: 20 }) + + // 🔴 **末尾占位**：与名册列表同理 —— 悬浮栏留白必须做成**内容的一部分**， + // 不能做成 Scroll 的 `padding(bottom)`（那会把可视底边往上收， + // 看着就是"内容没滚到屏幕最底、下面空一块"）。 + this.dockSpacerItem() + } + .width('100%') + } + .layoutWeight(1) + .width('100%') + .scrollBar(BarState.Off) + .edgeEffect(EdgeEffect.Spring) + .align(Alignment.TopStart) + // 🔴 滚动方向上报（驱动底部悬浮栏随滚收起 / 唤回）—— 见 common/FbScroll.ets + .onDidScroll(fbOnScroll) + // 🔴 触摸方向兜底（内容不足一屏的页面滚不动，只能靠手指位移判断） + // 与上面的 `onDidScroll` 互补、互不冲突 —— 见 common/FbScroll.ets + .onTouch(fbOnTouch) } - .layoutWeight(1) - .width('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) } .width('100%') .layoutWeight(1) } - /** 一圈亲属卡 */ + /** + * 一代人（家谱里的一层）。 + * + * ⚠️ 自己居中、长辈在上、晚辈在下 —— 与"从上往下读"的直觉一致。 + * 标题写清"这是哪一代"（父母辈 / 我这一辈 / 子女辈）， + * 否则用户看到一堆名字不知道是什么关系。 + */ @Builder - ringCard(r: FbKinRing) { - Column({ space: 10 }) { + genBlock(g: FbKinGen) { + Column({ space: 0 }) { + // 代数标题 Row({ space: 8 }) { - Text(r.title) + Text(g.title) .fontSize(FbMetric.fontSmall) .fontWeight(FontWeight.Medium) .fontColor(FbColors.ink) - Text(r.hint) + Text(g.sub) .fontSize(FbMetric.fontTiny) .fontColor(FbColors.faint) Blank() - Text(r.rels.length.toString()) + Text(g.people.length.toString() + ' 人') .fontSize(FbMetric.fontTiny) .fontColor(FbColors.faint) } .width('100%') + .padding({ left: 14, right: 14, top: 10, bottom: 6 }) + .backgroundColor(FbColors.surface) - if (r.rels.length === 0) { - Text('还没有连线') - .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.faint) - } else { - Flex({ wrap: FlexWrap.Wrap }) { - ForEach(r.rels, (rel: FbKinRelation) => { - Row({ space: 6 }) { - FbAvatar({ name: rel.toName, color: this.colorOf(rel.toId), dia: 28, fontSizeVp: 12 }) - Column({ space: 1 }) { - Text(rel.toName) - .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.ink) - .maxLines(1) - Text(rel.label) - .fontSize(10) - .fontColor(FbColors.faint) - } - .alignItems(HorizontalAlign.Start) - } - .padding({ left: 6, right: 12, top: 5, bottom: 5 }) - .backgroundColor(FbColors.surfaceAlt) - .borderRadius(FbMetric.radiusPill) - .margin({ right: 8, bottom: 8 }) - .alignItems(VerticalAlign.Center) - }, (rel: FbKinRelation): string => 'kr_' + rel.id.toString()) + // 这一代的人 + ForEach(g.people, (p: FbKinPerson, idx: number) => { + Column({ space: 0 }) { + this.kinRow(p) + if (idx < g.people.length - 1) { + Divider() + .strokeWidth(0.5) + .color(FbColors.line) + .margin({ left: 66 }) + } } .width('100%') - } + }, (p: FbKinPerson): string => 'kp_' + p.id.toString()) } - .padding(FbMetric.cardPad) + .width('100%') + .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 10 }) .backgroundColor(FbColors.surface) .borderRadius(FbMetric.radius) - .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 }) - .alignItems(HorizontalAlign.Start) + .clip(true) } + /** 家谱里的一行（头像 + 称呼 + 称谓 + 关系摘要） */ + @Builder + kinRow(p: FbKinPerson) { + Row({ space: 12 }) { + FbAvatar({ + name: p.shown, + color: p.avatarColor !== '' ? p.avatarColor : '#8A6B4B', + dia: 40, + fontSizeVp: 16 + }) + Column({ space: 3 }) { + Row({ space: 6 }) { + Text(p.shown) + .fontSize(FbMetric.fontBody) + .fontColor(FbColors.ink) + .fontWeight(p.gen === 0 && p.label === '我' ? FontWeight.Bold : FontWeight.Medium) + .maxLines(1) + if (p.label !== '') { + FbTag({ text: p.label, tone: 'muted' }) + } + } + .alignItems(VerticalAlign.Center) + + // 关系摘要（有几个父母/子女/配偶）—— 让人一眼看出"这人有几个孩子" + Text(this.relSummary(p)) + .fontSize(10) + .fontColor(FbColors.faint) + .maxLines(1) + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) + } + .width('100%') + .padding({ left: 14, right: 14, top: 11, bottom: 11 }) + .alignItems(VerticalAlign.Center) + .onClick((): void => { + // 点家谱里的人 ⇒ 复用名册的详情浮层（同一个人、同一份数据源） + const raw: FbRosterPerson | undefined = this.rawById.get(p.id); + if (raw !== undefined) { + this.detailPerson = raw; + } + }) + } + + /** 一圈亲属卡 */ + // ============================================================ // 共用小件 // ============================================================ @@ -390,51 +1251,139 @@ export struct FbPeoplePage { }) } - @Builder - scopeChip(label: string, key: string) { - Text(label) - .fontSize(FbMetric.fontTiny) - .fontColor(this.rosterScope === key ? Color.White : FbColors.muted) - .backgroundColor(this.rosterScope === key ? '#4A7C82' : FbColors.inputBg) - .padding({ left: 10, right: 10, top: 5, bottom: 5 }) - .borderRadius(FbMetric.radiusPill) - .onClick(() => { - this.rosterScope = key; - }) - } + /** + * 当前该显示的人（**标签筛选 + 关键词搜索**之后的结果）。 + * + * 🔴 取代了原来的 `byScope()`： + * · 旧版按 `rosterScope`（家里的人/亲友）筛 —— 但名册接口返回的**全是 + * 本家成员**，那个切换在数据上恒等于 member，等于没筛； + * · 现在按**标签**筛（用户 2026-10-12 要求），标签就是 v28 起 + * 取代"分组"的那套东西。 + * + * ⚠️ 三目运算符**绝不能跨行写**！这里原来是 + * `const list = cond ? a : b` 分成三行 —— ArkTS 解析跨行 `?:` 会失败， + * 而且报的是**几百行之外**的 "comma operator" 错（实测踩了一整轮）。 + * ⇒ 一律用 if/else。 + */ + private visiblePeople(): FbRosterItem[] { + let list: FbRosterItem[] = this.all; - @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() + // ① 标签筛选 + if (this.tagFilter !== '') { + list = list.filter((it: FbRosterItem): boolean => + it.tags.indexOf(this.tagFilter) >= 0); } - .width('100%') - .padding({ left: 4, right: 4, top: 12, bottom: 8 }) - .backgroundColor(FbColors.paper) - } - private byScope(): FbRosterItem[] { - return this.all.filter((p: FbRosterItem): boolean => p.roster === this.rosterScope); - } - - private groups(): FbGroup[] { - return fbGroupRoster(this.byScope()); + // ② 关键词搜索（本地：姓名/手机/单位/职务/标签/首字母） + if (this.keyword.trim() !== '') { + list = list.filter((it: FbRosterItem): boolean => { + const raw: FbRosterPerson | undefined = this.rawById.get(it.id); + return matchesKeyword(it, raw, this.keyword); + }); + } + return list; } /** 三圈：我 / 直系 / 其他亲属 */ - private rings(): FbKinRing[] { - const direct: string[] = ['parent', 'spouse', 'child']; - return [ - { title: '直系', hint: '父母 / 配偶 / 子女', rels: this.rels.filter((r: FbKinRelation): boolean => direct.indexOf(r.kind) >= 0) }, - { title: '其他亲属', hint: '兄弟姐妹与姻亲', rels: this.rels.filter((r: FbKinRelation): boolean => direct.indexOf(r.kind) < 0) } - ]; + /** 家谱视图切换按钮（图谱 / 列表） */ + @Builder + kinModeBtn(label: string, key: string) { + Text(label) + .fontSize(FbMetric.fontTiny) + .fontColor(this.kinMode === key ? Color.White : FbColors.muted) + .backgroundColor(this.kinMode === key ? '#4A7C82' : Color.Transparent) + .borderRadius(FbMetric.radiusPill) + .padding({ left: 12, right: 12, top: 5, bottom: 5 }) + .onClick((): void => { + this.kinMode = key; + }) + } + + /** 家谱：按代数分组（服务端已按 gen 排序） */ + private kinGens(): FbKinGen[] { + const map: Map = new Map(); + for (const p of this.kinPeople) { + const cur: FbKinPerson[] | undefined = map.get(p.gen); + if (cur !== undefined) { + cur.push(p); + } else { + map.set(p.gen, [p]); + } + } + // ⚠️ Map 的键是数字，直接 sort 会按**字符串**排（-1, 0, 1, -2 → -1,-2,0,1） + // ⇒ 先转成数组、按数值排。 + const gens: number[] = []; + map.forEach((_v: FbKinPerson[], k: number): void => { + gens.push(k); + }); + gens.sort((a: number, b: number): number => a - b); + + const out: FbKinGen[] = []; + for (const g of gens) { + const ps: FbKinPerson[] = map.get(g) !== undefined ? (map.get(g) as FbKinPerson[]) : []; + const it: FbKinGen = { + gen: g, + title: this.genTitle(g), + sub: this.genSub(g), + people: ps, + }; + out.push(it); + } + return out; + } + + /** 代数 → 中文层名 */ + private genTitle(g: number): string { + if (g === 0) { + return '我这一辈'; + } + if (g === -1) { + return '父母辈'; + } + if (g <= -2) { + return '祖辈（上 ' + (-g).toString() + ' 代）'; + } + if (g === 1) { + return '子女辈'; + } + return '孙辈（下 ' + g.toString() + ' 代）'; + } + + /** 代数说明 */ + private genSub(g: number): string { + if (g === 0) { + return '我与配偶、兄弟姐妹'; + } + if (g < 0) { + return '父辈与母辈'; + } + return '孩子与侄甥'; + } + + /** 「N 位父母 · N 位子女」这类摘要 */ + private relSummary(p: FbKinPerson): string { + const parts: string[] = []; + if (p.parents.length > 0) { + parts.push('父母 ' + p.parents.length.toString()); + } + if (p.spouses.length > 0) { + parts.push('配偶 ' + p.spouses.length.toString()); + } + if (p.siblings.length > 0) { + parts.push('兄弟姐妹 ' + p.siblings.length.toString()); + } + if (p.children.length > 0) { + parts.push('子女 ' + p.children.length.toString()); + } + return parts.length > 0 ? parts.join(' · ') : '暂无亲属关系'; + } + + /** 家谱顶部的人数说明 */ + private kinTotalText(): string { + if (this.kinPeople.length === 0) { + return '还没有亲属关系'; + } + return this.kinPeople.length.toString() + ' 位亲属 · 上下两代'; } /** 取某个人的头像色（从名册里查，查不到用默认砖红） */ diff --git a/entry/src/main/ets/pages/resources/FbResourcesPage.ets b/entry/src/main/ets/pages/resources/FbResourcesPage.ets index 4614779..8f32990 100644 --- a/entry/src/main/ets/pages/resources/FbResourcesPage.ets +++ b/entry/src/main/ets/pages/resources/FbResourcesPage.ets @@ -11,9 +11,14 @@ import { FbColors, FbMetric } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; import { FbGroup, FbResourceItem } from '../../model/Types'; -import { FB_DEMO_RESOURCES, fbGroupResource } from '../../model/DemoData'; +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 { FbModuleSettingsSheet } from '../../components/FbModuleSettingsSheet'; +import { FB_SET_RESOURCES } from '../../model/FbSettingsMenus'; @ComponentV2 export struct FbResourcesPage { @@ -27,88 +32,174 @@ export struct FbResourcesPage { /** 模块主题色（资源 = 靛蓝） */ private accent: string = '#5566A8'; - private all: FbResourceItem[] = FB_DEMO_RESOURCES; + /** + * 模块设置浮层是否打开（右上角三条横线点开的那个）。 + * + * 🔴 用户 2026-10-16：「所有页面的设置按钮全部都改成和网页版一致， + * 就是**三个横线**那种设置按钮。」 + * 网页版的做法：动作区最右一个 ☰ → 点开是**这个模块的设置菜单**。 + */ + @Local settingsOpen: boolean = false; + + @Local all: FbResourceItem[] = []; /** 当前筛选类别（'' = 全部） */ @Local kindFilter: string = ''; - build() { - Scroll() { - Column() { - this.topBar() + /** + * 页面出现：先读缓存、再拉接口（本地优先，见 FbModuleRepo 的说明）。 + * + * ⚠️ 不在这里打开本地库 —— `EntryAbility.onCreate` 已统一打开。 + */ + aboutToAppear(): void { + this.load(); + } - // ---- 页头 ---- - Row({ space: 8 }) { - Column({ space: 2 }) { - Text(this.all.length.toString() + ' 项资源') - .fontSize(FbMetric.fontTitle) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Text('证件 / 资料 / 附件，可共享给家庭成员') + 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; + } + + 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') + }) + // 🔴 设置按钮 = 网页版那种**三条横线**（☰）—— 用户 2026-10-16。 + // 点开是本模块的设置菜单（条目照网页版 `templates/<模块>/_settings_menu.php`）。 + FbIconButton({ + icon: $r('app.media.fb_ic_menu'), + tint: FbColors.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.kindChip('全部', '') + this.kindChip('证件', 'document') + this.kindChip('资料', 'material') + Blank() + Text('共享给我 ' + this.sharedCount().toString() + ' 项') .fontSize(FbMetric.fontTiny) .fontColor(FbColors.faint) } - .alignItems(HorizontalAlign.Start) - .layoutWeight(1) - - FbPrimaryButton({ - label: '添加', - bg: this.accent, - icon: $r('app.media.fb_ic_plus') - }) - FbIconButton({ icon: $r('app.media.fb_ic_gear'), tint: FbColors.muted }) - } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) - .alignItems(VerticalAlign.Center) - - // ---- 类别筛选 ---- - Row({ space: 8 }) { - this.kindChip('全部', '') - this.kindChip('证件', 'document') - this.kindChip('资料', 'material') - 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) + .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%') - // 底部悬浮快捷栏的预留：它浮在内容之上，不留白会压住最后一屏 - .padding({ bottom: FB_DOCK_RESERVE }) + .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('#00000066') + .onClick((): void => { + this.settingsOpen = false; + }) + + FbModuleSettingsSheet({ + title: '资源设置', + items: FB_SET_RESOURCES, + onClose: (): void => { + this.settingsOpen = false; + }, + onPick: (action: string): void => { + // 条目里 `action === ''` 的是「暂未开放」（组件里已画灰、点了不响应） + // ⇒ 这里只需处理已实现的；目前都还没有，保持浮层开着即可。 + } + }) + } } .width('100%') .height('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) } /** 一项资源卡 */ diff --git a/entry/src/main/ets/pages/settings/FbSettingsPage.ets b/entry/src/main/ets/pages/settings/FbSettingsPage.ets index 2817a3a..81cb26e 100644 --- a/entry/src/main/ets/pages/settings/FbSettingsPage.ets +++ b/entry/src/main/ets/pages/settings/FbSettingsPage.ets @@ -13,8 +13,21 @@ import { FbColors, FbMetric, fbPalette } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; import { FbModuleDef, FB_MODULES, FB_PRESET_COLORS } from '../../model/Modules'; -import { FbAvatar, FbDot, FbTag } from '../../components/Widgets'; +import { FbAvatar, FbDot, FbPrimaryButton, FbTag } from '../../components/Widgets'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; +import { FB_TOKEN_STORE } from '../../data/FbTokenStore'; +import { FB_SERVER_STORE } from '../../data/FbServerStore'; +import { FB_SYNC_ALL_PROGRESS, FbSyncAllResult, syncAll } from '../../data/FbSyncAll'; +import { common } from '@kit.AbilityKit'; +import { fbOnScroll, fbOnTouch } from '../../common/FbScroll'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { BusinessError } from '@kit.BasicServicesKit'; +import { fbApi } from '../../data/FbHttp'; +import { FB_SESSION } from '../../data/FbSession'; +import { FB_DEVICE_STORE, FB_APP_VERSION } from '../../data/FbDeviceStore'; + +const DOMAIN: number = 0x0000; +const TAG: string = 'FbSettings'; @ComponentV2 export struct FbSettingsPage { @@ -31,6 +44,163 @@ export struct FbSettingsPage { 'resources', 'tasks', 'days', 'ledger', 'books', 'notes']; /** 当前展开的配色分组（'' = 都没展开） */ @Local colorOpenKey: string = ''; + /** 令牌输入框的当前内容（「手动粘贴令牌」这个高级入口用） */ + @Local tokenInput: string = ''; + /** 账号区的状态说明（登录 / 同步 / 登出的结果） */ + @Local tokenNote: string = ''; + /** 「手动粘贴令牌」高级入口是否展开（v55：已不是主路径） */ + @Local advancedOpen: boolean = false; + /** 设置页的主题色（与模块「个人设置」一致，取砖红） */ + private accent: string = '#A84A28'; + + /** + * 页面出现时：不需要回填任何东西。 + * + * ⚠️ v55 之前这里会把"已配置令牌"写进输入框 —— 现在登录是主路径， + * 令牌输入框已经收进「高级」，不再需要在进页面时提示一次。 + */ + aboutToAppear(): void { + this.tokenNote = ''; + } + + + /** 账号区状态文案 */ + private tokenStateText(): string { + if (!FB_TOKEN_STORE.has()) { + return '未登录（只显示本地已有的数据）'; + } + // ⚠️ 显示的是**会话里的姓名**，不是令牌 —— 令牌绝不出现在界面上 + const who: string = this.app.session.me.name; + const role: string = this.app.session.me.role === 'admin' ? '管理员' + : (this.app.session.me.role === 'guest' ? '只读访客' : '家庭成员'); + return '已登录：' + who + ' · ' + role; + } + + /** 账号区状态颜色：已登录用绿、未登录用灰 */ + private tokenStateColor(): Resource { + return FB_TOKEN_STORE.has() ? $r('app.color.green') : FbColors.muted; + } + + /** 当前服务器（去掉协议省一行宽度；没配就明说） */ + private serverHost(): string { + const base: string = FB_SERVER_STORE.get(); + if (base === '') { + return '还没设置'; + } + return base.replace(/^https?:\/\//i, ''); + } + + /** + * 手动同步一次。 + * + * ⚠️ 登录后会自动全量同步，但用户可能"隔了几天再打开、想知道有没有新数据" + * —— 给他一个明确的、随时可按的入口。 + */ + private async syncNow(): Promise { + if (!FB_TOKEN_STORE.has()) { + this.tokenNote = '还没登录，无法同步'; + return; + } + this.tokenNote = '正在同步…'; + // 实时进度（定时器把当前步骤刷到界面上）。 + // ⚠️ 本机 hilog 读不出内容 ⇒ 不给实时进度，用户会以为卡死。 + const timer: number = setInterval((): void => { + this.tokenNote = '同步中…（' + FB_SYNC_ALL_PROGRESS + '）'; + }, 700); + const res: FbSyncAllResult = await syncAll(); + clearInterval(timer); + this.tokenNote = res.ok ? ('✓ ' + res.note) : ('部分未完成：' + res.note); + } + + /** + * 退出登录：清令牌 + 回登录页（**地址保留**）。 + * + * 🔴 为什么不顺手清本地数据：本地优先架构下"没登录"不等于"没数据"。 + * 用户可能只是在别人手机上登出、或暂时断网 —— 把已同步的数据一起删掉， + * 等于让他下次进来面对一片空白（还得重新全量同步）。 + */ + private async logout(): Promise { + const ctx: common.Context | undefined = this.getUIContext().getHostContext(); + if (ctx === undefined) { + this.tokenNote = '拿不到应用上下文，无法退出'; + return; + } + /* 🔴 v57（用户 2026-10-17）：「先删本地令牌（这是主防线，捡到手机的人拿不到） + → 再尽力通知服务端」。 + ⚠️ 顺序不能反：离线时通知发不出去，如果等它成功再清本地， + 用户会看到"点了退出却没退"。本地那一刀是唯一可靠的。 + ⚠️ 服务端那一条**失败也不报错**：它只是让"这台设备"从设备列表里消失得 + 更及时，删不掉就等它 24h 后自然过期，或用户在网页端手动踢。 */ + const token: string = FB_TOKEN_STORE.get(); + await FB_TOKEN_STORE.clear(ctx); + await FB_SESSION.clear(ctx); + if (token !== '') { + fbApi('/api/v1/logout', { method: 'POST', token: token, authProbe: true }) + .catch((err: BusinessError): void => { + hilog.warn(DOMAIN, TAG, '通知服务端退出失败（已本地退出）：%{public}s', + JSON.stringify(err)); + }); + } + this.tokenNote = ''; + // 回登录页，从"输账号密码"开始（地址还留着） + this.app.lockReason = '你已退出登录'; + this.app.loginStartStep = 2; + this.app.needLogin = true; + } + + /** + * 更换服务器：回登录页第一步重填地址。 + * + * 🔴 必须**同时清掉令牌**：令牌是那台服务器签发的，换了机器一定无效 —— + * 留着只会让用户在第二步莫名其妙地 401（"密码明明是对的"）。 + * ⚠️ 地址本身**不清**：登录页第一步会预填它，用户改起来更方便。 + */ + private async changeServer(): Promise { + const ctx: common.Context | undefined = this.getUIContext().getHostContext(); + if (ctx !== undefined) { + await FB_TOKEN_STORE.clear(ctx); + // ⚠️ 会话校验记录也要清：换了服务器，"上次校验成功"是旧服务器的事， + // 留着会让新服务器上的离线判定带着旧时间（v57） + await FB_SESSION.clear(ctx); + } + this.tokenNote = ''; + this.app.lockReason = '换了服务器，需要重新登录'; + this.app.loginStartStep = 1; + this.app.needLogin = true; + } + + /** + * 保存手动粘贴的令牌并立刻同步一次（「高级」里的路）。 + * + * ⚠️ 为什么还留着它：网页版「个人设置 → API 令牌」签发的令牌， + * 在"不方便输密码"或"只给某台设备一把只读令牌"时仍然有用。 + * 但它**不再是主路径** —— 正常用户走登录。 + */ + private async saveTokenAndSync(): Promise { + const t: string = this.tokenInput.trim(); + if (t === '') { + this.tokenNote = '请先粘贴令牌'; + return; + } + // 🔴 没地址时令牌一定没用：请求拼出来是个相对地址，报的错还跟"令牌"无关 + if (FB_SERVER_STORE.get() === '') { + this.tokenNote = '请先设置服务器地址'; + return; + } + const ctx: common.Context | undefined = this.getUIContext().getHostContext(); + if (ctx === undefined) { + this.tokenNote = '拿不到应用上下文，无法保存'; + return; + } + this.tokenNote = '正在保存…'; + const ok: boolean = await FB_TOKEN_STORE.set(ctx, t); + if (!ok) { + this.tokenNote = '令牌保存失败'; + return; + } + this.tokenInput = ''; + await this.syncNow(); + } build() { Scroll() { @@ -75,6 +245,124 @@ export struct FbSettingsPage { .borderRadius(FbMetric.radius) .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 }) + // ==================== 账号与服务器（登录 / 同步 / 登出）==================== + // 🔴 v55（用户 2026-10-17「完整的登录功能」）—— + // 这里从"手工粘贴令牌"变成了**登录态管理**： + // · 登录走登录页（地址 + 账号密码），这里只显示"当前是谁、连的哪台"； + // · 「同步全部数据」保留（用户想立刻拉新数据时按一下）； + // · 「退出登录 / 更换服务器」都回登录页（本应用没有路由栈， + // 靠 `app.needLogin` 这个状态位回去，见 Index）。 + // ⚠️ 手工粘贴令牌降级成「高级」：它是"给某台设备一把只读令牌"这类 + // 特殊场景的备用路，不该出现在普通人的视线里。 + Column({ space: 0 }) { + this.rowTitle('账号与服务器') + + // 登录状态（谁、什么角色） + Text(this.tokenStateText()) + .fontSize(FbMetric.fontSmall) + .fontColor(this.tokenStateColor()) + .width('100%') + .maxLines(2) + .padding({ top: 2, bottom: 8 }) + + // 当前服务器（可点「更换」） + Row({ space: 8 }) { + Text('服务器') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + Text(this.serverHost()) + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.faint) + .layoutWeight(1) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + Text('更换') + .fontSize(FbMetric.fontSmall) + .fontColor(this.accent) + .padding({ left: 8, top: 4, bottom: 4 }) + .onClick((): void => { this.changeServer(); }) + } + .width('100%') + .padding({ top: 2, bottom: 10 }) + .alignItems(VerticalAlign.Center) + + // 操作：同步 / 退出（未登录时只有同步，且点了会提示） + Row({ space: 8 }) { + Text('同步全部数据') + .fontSize(FbMetric.fontSmall) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .height(36) + .layoutWeight(1) + .backgroundColor(this.accent) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { this.syncNow(); }) + if (FB_TOKEN_STORE.has()) { + Text('退出登录') + .fontSize(FbMetric.fontSmall) + // ⚠️ FbColors 里没有 danger（只有 ink/muted/faint/line…）， + // 这里用字面色值。别写成 FbColors.danger —— 那会编译不过。 + .fontColor('#A32D2D') + .textAlign(TextAlign.Center) + .height(36) + .width(88) + .border({ width: 1, color: FbColors.line }) + .borderRadius(FbMetric.radiusS) + .onClick((): void => { this.logout(); }) + } + } + .width('100%') + .alignItems(VerticalAlign.Center) + + // ---- 高级：手动粘贴 API 令牌 ---- + Text(this.advancedOpen ? '收起「手动粘贴令牌」' : '高级：手动粘贴 API 令牌') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .padding({ top: 12, bottom: 6 }) + .onClick((): void => { this.advancedOpen = !this.advancedOpen; }) + + if (this.advancedOpen) { + TextInput({ placeholder: '粘贴 API 令牌（fb_ 开头）', text: this.tokenInput }) + .type(InputType.Normal) + .fontSize(FbMetric.fontSmall) + .maxLength(128) + .backgroundColor(FbColors.inputBg) + .borderRadius(FbMetric.radiusS) + .padding({ left: 10, right: 10 }) + .onChange((v: string): void => { + this.tokenInput = v; + }) + FbPrimaryButton({ + label: '保存并同步', + bg: this.accent, + icon: $r('app.media.fb_ic_check'), + onTap: (): void => { this.saveTokenAndSync(); } + }) + .margin({ top: 8 }) + } + + // 状态（登录 / 同步 / 登出的结果都落在这里） + if (this.tokenNote !== '') { + Text(this.tokenNote) + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .maxLines(3) + .margin({ top: 8 }) + } + + Text('退出登录不会删除已经同步到本机的数据，离线也能看；换个服务器则要重新登录。') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + .width('100%') + .maxLines(3) + .margin({ top: 8 }) + } + .padding(FbMetric.cardPad) + .backgroundColor(FbColors.surface) + .borderRadius(FbMetric.radius) + .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 }) + // ==================== 通知 ==================== Column({ space: 0 }) { this.rowTitle('通知') @@ -144,9 +432,13 @@ export struct FbSettingsPage { // ==================== 关于 ==================== Column({ space: 0 }) { this.rowTitle('关于') - this.plainRow('版本', '0.1.0（界面框架）') - this.plainRow('数据来源', '待接入 · 当前为演示数据') - this.plainRow('服务器', '未配置') + this.plainRow('版本', FB_APP_VERSION) + this.plainRow('服务器', this.serverHost()) + this.plainRow('账号', FB_TOKEN_STORE.has() ? this.app.session.me.name : '未登录') + /* v57：这台设备在服务端叫什么。 + 用户 2026-10-17：「只有 uuid 用户无法确定是哪台设备。」 + ⇒ 网页端「设备管理」里显示的就是这个名字，用户要能对上号。 */ + this.plainRow('这台设备', FB_DEVICE_STORE.getDeviceName()) } .padding(FbMetric.cardPad) .backgroundColor(FbColors.surface) @@ -162,6 +454,12 @@ export struct FbSettingsPage { .backgroundColor(FbColors.paper) .scrollBar(BarState.Off) .edgeEffect(EdgeEffect.Spring) + // 🔴 滚动方向上报（驱动底部悬浮栏随滚收起 / 唤回）—— 见 common/FbScroll.ets + .onDidScroll(fbOnScroll) + + // 🔴 触摸方向兜底（内容不足一屏的页面滚不动，只能靠手指位移判断） + // 与上面的 `onDidScroll` 互补、互不冲突 —— 见 common/FbScroll.ets + .onTouch(fbOnTouch) .align(Alignment.TopStart) } diff --git a/entry/src/main/ets/pages/tasks/FbTasksPage.ets b/entry/src/main/ets/pages/tasks/FbTasksPage.ets index a99406b..9aeae65 100644 --- a/entry/src/main/ets/pages/tasks/FbTasksPage.ets +++ b/entry/src/main/ets/pages/tasks/FbTasksPage.ets @@ -12,9 +12,14 @@ import { FbColors, FbMetric } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; import { FbGroup, FbTaskItem } from '../../model/Types'; -import { FB_DEMO_TASK_BOARDS, FB_DEMO_TASKS, fbGroupTask } from '../../model/DemoData'; +import { fbGroupTask } from '../../model/DemoData'; +import { parseTasks } from '../../data/FbParse'; +import { loadModule } from '../../data/FbModuleLoad'; import { FbCheckCircle, FbDot, FbEmptyBox, FbIconButton, FbPrimaryButton, FbTag } from '../../components/Widgets'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; +import { fbOnScroll, fbOnTouch, fbOnHScroll } from '../../common/FbScroll'; +import { FbModuleSettingsSheet } from '../../components/FbModuleSettingsSheet'; +import { FB_SET_TASKS } from '../../model/FbSettingsMenus'; @ComponentV2 export struct FbTasksPage { @@ -26,93 +31,181 @@ export struct FbTasksPage { @BuilderParam topBar: () => void; @Param app: FbAppState = fbAppState(); - private boards: string[] = FB_DEMO_TASK_BOARDS; + private boards: string[] = []; /** 模块主题色（任务 = 赭红） */ private accent: string = '#A8574F'; - private tasks: FbTaskItem[] = FB_DEMO_TASKS; + /** + * 模块设置浮层是否打开（右上角三条横线点开的那个）。 + * + * 🔴 用户 2026-10-16：「所有页面的设置按钮全部都改成和网页版一致， + * 就是**三个横线**那种设置按钮。」 + * 网页版的做法：动作区最右一个 ☰ → 点开是**这个模块的设置菜单**。 + */ + @Local settingsOpen: boolean = false; + + @Local tasks: FbTaskItem[] = []; /** 当前筛选的看板（'' = 全部） */ @Local boardFilter: string = ''; + /** + * 页面出现：先读缓存、再拉接口（本地优先，见 FbModuleRepo 的说明）。 + * + * ⚠️ 不在这里打开本地库 —— `EntryAbility.onCreate` 已统一打开。 + */ + aboutToAppear(): void { + this.load(); + } + + private async load(): Promise { + await loadModule('tasks', parseTasks, + (rows: FbTaskItem[]): void => { + this.tasks = rows; + }, + (note: string): void => { + this.syncNote = note; + }); + } + + /** 顶部提示（同步失败 / 未登录时显示一行小字） */ + @Local syncNote: string = ''; + + + /** + * 设置浮层开着 ⇒ 让底部悬浮快捷栏让位。 + * + * 🔴 悬浮栏在**更外层 Index 的 Stack** 里，层级比本页高 ⇒ + * 浮层底部的按钮会被它盖住、点击被抢走（名册/日程页都踩过）。 + */ + @Monitor('settingsOpen') + onSettingsChanged(): void { + fbAppState().sheetCount = this.settingsOpen ? 1 : 0; + } + build() { - Scroll() { - Column() { - this.topBar() + // 🔴 外层 Stack：**模块设置浮层**要浮在页面之上 + // （本页原来是 Scroll 直接作根，没有 Stack，这里补一层） + Stack({ alignContent: Alignment.Bottom }) { - // ---- 页头 ---- - Row({ space: 8 }) { - Column({ space: 2 }) { - Text(this.doingCount().toString() + ' 项在做') - .fontSize(FbMetric.fontTitle) - .fontWeight(FontWeight.Medium) - .fontColor(FbColors.ink) - Text(this.todoCount().toString() + ' 项待办' - + (this.overdueCount() > 0 ? ' · ' + this.overdueCount().toString() + ' 项逾期' : '')) - .fontSize(FbMetric.fontTiny) - .fontColor(this.overdueCount() > 0 ? FbColors.red : FbColors.faint) - } - .alignItems(HorizontalAlign.Start) - .layoutWeight(1) + Scroll() { + Column() { + this.topBar() - FbPrimaryButton({ - label: '新建任务', - bg: this.accent, - icon: $r('app.media.fb_ic_plus') - }) - FbIconButton({ icon: $r('app.media.fb_ic_gear'), tint: FbColors.muted }) - } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) - .alignItems(VerticalAlign.Center) - - // ---- 看板筛选条（横向滚动）---- - Scroll() { + // ---- 页头 ---- Row({ space: 8 }) { - this.boardChip('全部', '') - ForEach(this.boards, (b: string) => { - this.boardChip(b, b) - }, (b: string): string => 'bd_' + b) - } - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad }) - } - .scrollable(ScrollDirection.Horizontal) - .scrollBar(BarState.Off) - .width('100%') - .padding({ bottom: 10 }) + Column({ space: 2 }) { + Text(this.doingCount().toString() + ' 项在做') + .fontSize(FbMetric.fontTitle) + .fontWeight(FontWeight.Medium) + .fontColor(FbColors.ink) + Text(this.todoCount().toString() + ' 项待办' + + (this.overdueCount() > 0 ? ' · ' + this.overdueCount().toString() + ' 项逾期' : '')) + .fontSize(FbMetric.fontTiny) + .fontColor(this.overdueCount() > 0 ? FbColors.red : FbColors.faint) + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) - // ---- 按状态分组的列表 ---- - if (this.filtered().length === 0) { - FbEmptyBox({ - title: '这里没有任务', - hint: '新建时会顺带指定它属于哪个看板、做到哪一步', - icon: $r('app.media.fb_ic_tasks') - }) - } else { - List({ space: 0 }) { - ForEach(this.groups(), (g: FbGroup) => { - ListItemGroup({ header: this.groupHeader(g) }) { - ForEach(g.items, (t: FbTaskItem) => { - ListItem() { - this.taskCard(t) - } - }, (t: FbTaskItem): string => 'tk_' + t.id.toString()) + FbPrimaryButton({ + label: '新建任务', + bg: this.accent, + icon: $r('app.media.fb_ic_plus') + }) + // 🔴 设置按钮 = 网页版那种**三条横线**（☰）—— 用户 2026-10-16。 + // 点开是本模块的设置菜单（条目照网页版 `templates/<模块>/_settings_menu.php`）。 + FbIconButton({ + icon: $r('app.media.fb_ic_menu'), + tint: FbColors.muted, + onTap: (): void => { + this.settingsOpen = true; } - }, (g: FbGroup): string => 'grp_' + g.key) + }) } .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 24 }) + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 }) + .alignItems(VerticalAlign.Center) + + // ---- 看板筛选条（横向滚动）---- + Scroll() { + Row({ space: 8 }) { + this.boardChip('全部', '') + ForEach(this.boards, (b: string) => { + this.boardChip(b, b) + }, (b: string): string => 'bd_' + b) + } + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad }) + } + .scrollable(ScrollDirection.Horizontal) + // 🔴 横向滚动上报（让抽屉给横滑组件让位）—— 见 common/FbScroll.ets + .onDidScroll(fbOnHScroll) .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) + .width('100%') + .padding({ bottom: 10 }) + + // ---- 按状态分组的列表 ---- + if (this.filtered().length === 0) { + FbEmptyBox({ + title: '这里没有任务', + hint: '新建时会顺带指定它属于哪个看板、做到哪一步', + icon: $r('app.media.fb_ic_tasks') + }) + } else { + List({ space: 0 }) { + ForEach(this.groups(), (g: FbGroup) => { + ListItemGroup({ header: this.groupHeader(g) }) { + ForEach(g.items, (t: FbTaskItem) => { + ListItem() { + this.taskCard(t) + } + }, (t: FbTaskItem): string => 'tk_' + t.id.toString()) + } + }, (g: FbGroup): string => 'grp_' + 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%') - // 底部悬浮快捷栏的预留：它浮在内容之上，不留白会压住最后一屏 - .padding({ bottom: FB_DOCK_RESERVE }) + .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('#00000066') + .onClick((): void => { + this.settingsOpen = false; + }) + + FbModuleSettingsSheet({ + title: '任务设置', + items: FB_SET_TASKS, + onClose: (): void => { + this.settingsOpen = false; + }, + onPick: (action: string): void => { + // 条目里 `action === ''` 的是「暂未开放」（组件里已画灰、点了不响应） + // ⇒ 这里只需处理已实现的；目前都还没有，保持浮层开着即可。 + } + }) + } } .width('100%') .height('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) } /** 看板筛选胶囊 */ diff --git a/entry/src/main/ets/pages/trips/FbTripsPage.ets b/entry/src/main/ets/pages/trips/FbTripsPage.ets index 5d4bb8c..98fc466 100644 --- a/entry/src/main/ets/pages/trips/FbTripsPage.ets +++ b/entry/src/main/ets/pages/trips/FbTripsPage.ets @@ -15,9 +15,14 @@ import { FbColors, FbMetric } from '../../common/Theme'; import { FbAppState, fbAppState } from '../../common/Store'; import { FbTripItem, FbTripNode } from '../../model/Types'; -import { FB_DEMO_TRIPS, FB_DEMO_TRIP_NODES, fbMoney } from '../../model/DemoData'; +import { fbMoney } from '../../model/DemoData'; +import { parseTrips } from '../../data/FbParse'; +import { loadModule } from '../../data/FbModuleLoad'; import { FbDot, FbEmptyBox, FbIconButton, FbPrimaryButton, FbTag } from '../../components/Widgets'; import { FB_DOCK_RESERVE } from '../../components/FloatDock'; +import { fbOnScroll, fbOnTouch } from '../../common/FbScroll'; +import { FbModuleSettingsSheet } from '../../components/FbModuleSettingsSheet'; +import { FB_SET_TRIPS } from '../../model/FbSettingsMenus'; @ComponentV2 export struct FbTripsPage { @@ -29,71 +34,171 @@ export struct FbTripsPage { @BuilderParam topBar: () => void; @Param app: FbAppState = fbAppState(); - private trips: FbTripItem[] = FB_DEMO_TRIPS; - private nodes: FbTripNode[] = FB_DEMO_TRIP_NODES; + /** + * 旅程列表（**来自接口** `/api/v1/trips`）。 + * + * ⚠️ 初值给空数组而不是演示数据：先渲染假的、再被真数据替换， + * 用户会看到"闪一下"。 + */ + /** + * 模块设置浮层是否打开（右上角三条横线点开的那个）。 + * + * 🔴 用户 2026-10-16：「所有页面的设置按钮全部都改成和网页版一致， + * 就是**三个横线**那种设置按钮。」 + * 网页版的做法：动作区最右一个 ☰ → 点开是**这个模块的设置菜单**。 + */ + @Local settingsOpen: boolean = false; + + @Local trips: FbTripItem[] = []; + /** + * 行程节点。 + * + * ⚠️ 接口 `/trips` 只给旅程**本身**（含 `node_count`），不给每一段。 + * 所以这里保持空 —— 展开时才去拉 `/trips/`（待实现）。 + * 不假装有数据：宁可展开后显示"暂无行程段"。 + */ + @Local nodes: FbTripNode[] = []; + /** 顶部提示（同步状态） */ + @Local syncNote: string = ''; /** 模块主题色（旅程 = 绿） */ private accent: string = '#3F7D5A'; /** 当前展开的旅程 id（0 = 都没展开） */ @Local expandedId: number = 0; + /** + * 页面出现：先缓存、再网络（与观影/名册同一套"本地优先"流程）。 + * + * ⚠️ 本页**不自己打开本地库** —— 已在 `EntryAbility.onCreate` 统一打开了 + * （见那里的说明）。页面只管用。 + */ + aboutToAppear(): void { + this.load(); + } + + private async load(): Promise { + await loadModule('trips', parseTrips, + (rows: FbTripItem[], fromCache: boolean): void => { + this.trips = rows; + this.syncNote = fromCache ? '' : ''; + }, + (note: string): void => { + this.syncNote = note; + }); + } + + + /** + * 设置浮层开着 ⇒ 让底部悬浮快捷栏让位。 + * + * 🔴 悬浮栏在**更外层 Index 的 Stack** 里，层级比本页高 ⇒ + * 浮层底部的按钮会被它盖住、点击被抢走（名册/日程页都踩过）。 + */ + @Monitor('settingsOpen') + onSettingsChanged(): void { + fbAppState().sheetCount = this.settingsOpen ? 1 : 0; + } + build() { - Scroll() { - Column() { - this.topBar() + // 🔴 外层 Stack：**模块设置浮层**要浮在页面之上 + // （本页原来是 Scroll 直接作根，没有 Stack，这里补一层） + Stack({ alignContent: Alignment.Bottom }) { - // ---- 页头操作条 ---- - Row({ space: 8 }) { - Column({ space: 1 }) { - Text('共 ' + this.trips.length.toString() + ' 个旅程') - .fontSize(FbMetric.fontSmall) - .fontColor(FbColors.ink) - Text('每个旅程里可以有若干段行程') - .fontSize(FbMetric.fontTiny) - .fontColor(FbColors.faint) - } - .alignItems(HorizontalAlign.Start) - .layoutWeight(1) + Scroll() { + Column() { + this.topBar() - FbPrimaryButton({ - label: '新建旅程', - bg: this.accent, - icon: $r('app.media.fb_ic_plus') - }) - FbIconButton({ icon: $r('app.media.fb_ic_gear'), tint: FbColors.muted }) - } - .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 10 }) - .alignItems(VerticalAlign.Center) + // ---- 页头操作条 ---- + Row({ space: 8 }) { + Column({ space: 1 }) { + Text('共 ' + this.trips.length.toString() + ' 个旅程') + .fontSize(FbMetric.fontSmall) + .fontColor(FbColors.ink) + Text('每个旅程里可以有若干段行程') + .fontSize(FbMetric.fontTiny) + .fontColor(FbColors.faint) + } + .alignItems(HorizontalAlign.Start) + .layoutWeight(1) - if (this.trips.length === 0) { - FbEmptyBox({ - title: '还没有旅程', - hint: '去过的地方会按时间排在这里，点开能看到每一段行程', - icon: $r('app.media.fb_ic_trips') - }) - } else { - List({ space: 12 }) { - ForEach(this.trips, (t: FbTripItem) => { - ListItem() { - this.tripCard(t) + FbPrimaryButton({ + label: '新建旅程', + bg: this.accent, + icon: $r('app.media.fb_ic_plus') + }) + // 🔴 设置按钮 = 网页版那种**三条横线**（☰）—— 用户 2026-10-16。 + // 点开是本模块的设置菜单（条目照网页版 `templates/<模块>/_settings_menu.php`）。 + FbIconButton({ + icon: $r('app.media.fb_ic_menu'), + tint: FbColors.muted, + onTap: (): void => { + this.settingsOpen = true; } - }, (t: FbTripItem): string => 'trip_' + t.id.toString()) + }) } .width('100%') - .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 24 }) - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 10 }) + .alignItems(VerticalAlign.Center) + + if (this.trips.length === 0) { + FbEmptyBox({ + title: '还没有旅程', + hint: '去过的地方会按时间排在这里，点开能看到每一段行程', + icon: $r('app.media.fb_ic_trips') + }) + } else { + List({ space: 12 }) { + ForEach(this.trips, (t: FbTripItem) => { + ListItem() { + this.tripCard(t) + } + }, (t: FbTripItem): string => 'trip_' + t.id.toString()) + } + .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%') - // 底部悬浮快捷栏的预留：它浮在内容之上，不留白会压住最后一屏 - .padding({ bottom: FB_DOCK_RESERVE }) + .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('#00000066') + .onClick((): void => { + this.settingsOpen = false; + }) + + FbModuleSettingsSheet({ + title: '旅程设置', + items: FB_SET_TRIPS, + onClose: (): void => { + this.settingsOpen = false; + }, + onPick: (action: string): void => { + // 条目里 `action === ''` 的是「暂未开放」（组件里已画灰、点了不响应） + // ⇒ 这里只需处理已实现的；目前都还没有，保持浮层开着即可。 + } + }) + } } .width('100%') .height('100%') - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .align(Alignment.TopStart) } /** 一张旅程卡：标题 + 时间 + 进度；展开后接行程时间轴 */ diff --git a/entry/src/main/module.json5 b/entry/src/main/module.json5 index 9c1c0fb..06a3c5a 100644 --- a/entry/src/main/module.json5 +++ b/entry/src/main/module.json5 @@ -14,6 +14,15 @@ }, { "name": "ohos.permission.GET_NETWORK_INFO" + }, + { + // 🔴 质感握姿（左手/右手握持）—— 用户 2026-10-16 第 4 条。 + // `multimodalAwareness.motion` 的 `holdingHandChanged` 要求此权限。 + // ⚠️ 它是 `system_grant` + `availableLevel: normal` + `provisionEnable: false` + // （在 SDK 的权限定义里核过）⇒ **安装即获得，不会弹授权框**。 + // ⚠️ API 20 起才有；低版本设备会抛 801（能力不支持）—— + // 代码里已 try/catch 兜住，拿不到就退回默认方向。 + "name": "ohos.permission.DETECT_GESTURE" } ], "deliveryWithInstall": true, @@ -24,7 +33,16 @@ "name": "EntryAbility", "srcEntry": "./ets/entryability/EntryAbility.ets", "description": "$string:EntryAbility_desc", - "icon": "$media:layered_image", + // 🔴 v45 修：原为 `$media:layered_image`（分层图标），导致桌面图标 + // 外面有一圈米色底、且图案显得小。原因： + // · `background.png` 是**纯米色满幅图**（512²）⇒ 那圈底色； + // · `foreground.png` 的图案**只占 44%**，系统还要留安全区 + // ⇒ 图案被缩得更小。 + // 另一个真 bug：`app.json5` 的分层图在 **AppScope** 下找， + // 但 `background/foreground.png` **只在 entry 里**，AppScope 里没有 + // ⇒ 引用落空。 + // ⇒ 直接改用与应用内左上角**同一个** `fb_logo`（图案几乎铺满）。 + "icon": "$media:fb_logo", "label": "$string:EntryAbility_label", "startWindowIcon": "$media:startIcon", "startWindowBackground": "$color:start_window_background", diff --git a/entry/src/main/resources/base/media/background.png b/entry/src/main/resources/base/media/background.png deleted file mode 100644 index 2f0e76c0da20f999e7ce75ec362c73515bc71bbb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6274 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&zE~)R&4Yzkn2Hfk$L90|WC55N6z39hA+$ zAYtO^;uumf=j|OsJ{dzE7RUepSNiC`D46@3Sb0#&|*?H(gct4RbiKcnpjL8#>?*x(u*{19e7L73x!WYrQ*0hntX zmLXK9@W6x%KAV2vV_^AQ&jj>WLnB*u0`rFh?i;Rv{i%TDFH5+C3?^tJy!#SK7|B~R z5k8+_2=ncMv)2z;GYFjd&j}7TsWpwf2bkp#1~G%J&Otcu2_g&~)**ynAnf{($pi~4 zgAYiSeL#fapDQ5CI3WJIAIF=+Aoqh~niM!XQkWSU6(Dh`pbk^S$X3LP5Vl1KUt-~a zs}4p88?nKJcl?y9U}tFhX%9{V4$Y<;7%LtqM`VFxegZE8OA|Oa8yJ!7vI|F;WQSy# zoo@rw(Tr?%NVeG}!^9isgKUFF>xbK`Nesm$aJ>f{W-%zj5@iZf0y+j4Hjih1&){J2 zUmYA+5hjB;bx`21j16pN4E!}L(EPj!k;C~K6&O5S{an^LB{Ts5zw62D diff --git a/entry/src/main/resources/base/media/foreground.png b/entry/src/main/resources/base/media/foreground.png deleted file mode 100644 index ac223d8e075808a4421b840f5073a1c350435775..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 12045 zcmd^li8qw*`~Nd0BN-HxeG6}IZ$cr;GNMf?in2FE_8JnBF*716*+YcUVo#KPAC#0e zdx;@i6k{7^#+dm%!}R&Q&-V}bo!|L=o#SxM^W67+UDy4(uGe)x_v@kAh10ydM0WuI zz-xTw#3caW0RQCxcEZ3vt9SZn;2&=9GuFNU0R74Og_H$d@&o{B!1%;*i#uuaBY{us zucwfF%7)8PMfEo-M*Bx9>gJ1Aulf-3`m@?|rFY4R%HbYE5{>Vx@yi@H6L_K+0)w_H z$A%f4Y6*+A;1K!edAvn`jVbK#<^HcV|6KN4d$Y?(08RR)@IYL~LO#zIL#kO{FBu@I zS`IW-WUL2f9P{hcCk66@mi@2$F?d~2IP0W$($`Ep#r#LBT}oKvi1FTYCQS~<1z^X; zQ=;YI)$wX);{PrVQ_qAk@?kwSdtmmc?}?e{0RQjLYkGAOM+;Y@{mPDDEP{!U$=I^B zI^*H|uD?Evl~%glj50D$4$D5F?wV;1)qEY&{iLTRd9-m=<*ys}yIuvDk4OQ|=XxZ6 z?~7<$l-rf9aIxF?rR$J6^uhpPdUao@w#LkRiRs?CdI-U2;M;m4vXj5#pt1ASTbXb7 zbmByZrbN{|C)6sBx~q!Ej=K9HA!Egt-Y$|$9p689cN$ak&JFq9XCMwMG!}k*(C=wc z{stU4?KNsg$&u4QL>iTx8+ok7bS zGse%WZVQn{E7jHGyFo*}i(o&x>57}L_#=VXJ+{Z%v2u>y{Gmvq1Gnp#5$_YEgfa~K zGfI?cKhgmFh7Au<0%m7I61v~dg&S%^JqT^0KhNV0+y)Cbf>PDS9=@t8#)^wh7(ivx zAev)AynCMwu7)*M^at}2YJSeyY&5Q>Z`OV%8T87f9UmB#+MT*_R!j_WLJ%h2YYwm9 z7vYjneUW8W>rLMG&%Zv^m$w)p0Z*icZJCT^t@}$0m_T1}B<3pb&X#PF`U`GoQ_@Q{v9MOFBB5)bddLH3`FVm=LX z$)?2%f(B;7MzdhqW#t1*C=?JL>RMOLTa$A^o>_gYLQvcScN;9~8|m08qgIN-2;bq)EV{yhuV zxgjH0ISf~>(f;`h3Jhgw(U-KaF#ga8(ZvSXj~6K)#h@V=OrPq*dwFvvCZIn!QQ=~F zX$|$B(U#r7C?|d;XZG-&yb$F9198rV94eHw9EKpv%Y)lvz-w`X+YQB#hXNEOJ;%ix zk|dLf>y%4S>o*~#9}{0p8;Jk}v1%JJL@FjPoOVlK%WV%c=(C#0=?OS6nQ?HhKEaZ< z4a5wV{f3^ui1-Z%4sG&c>=^mF+}0|6819{zmkSNJb3LPI2l3QF_j(N^XlJV}@2k3^ z9AR|ip0Mx6_~?BR*(Za!w*%EAIz$lSk_q_H`rUXUYv~fS&tTM3I{Myl-==Ub*@TI` zgw$p2Yagx}_8AMiq58XPr{VNhzh4Y}z77v^mh9Hbm6xDCZjWzx(RKW=u>60xJErE^ zPHn}=yATFelvc`d7jl>q;~@9>*Y$34NLMw#?`MLR0`!^Xc6Y{d=1+3XlcSloG*lmR zM9$T9H_R9n)XTiG?w$wNrY#6-=LRbno)#+cD59qg+y!Ije6 zJFt3Gf29be76|9TFyzX*UiH!~K8oN{OK6PI;f8&UnG-V#&(uD_dA>ml2r!-$j^JA$yMK!|c z7xaLGqSCx(7opGJPMB_vsx)vfj+VfZnFsw$M*i`To=?eg>sRRC6dMAufAjgno)edw zvExxf-#qzgeJZNJLslIm=!?5+FF#7fURZIUn1nO^n%kPOrb4)70q?;xSGhBz zFPjiV=Jfe~CuwV__GnuH9@bEwA+MPj{f&-s#BLq~QQwWMBPvH$hSkV+6L*jBf-dD) zD5KL|8W)S)OO%g%ttO^fAEI-4K+Xt0ZU~ddrM{sG42_Jg?(;)%`E#QfPL#pBl&%`u z;|gA8h#l~`XvgD*r}DUOZQi~O4%}x z(K`fPRVS}&9NED+rfNdiMGcI7jSsPIqlB!)uQ{l0UYD`f4_!!_@*g<)am|xr83g%T z6*7pwKCwRu@UwT;%gS9cpJVXV7HGr63siS~S`c}1q_DU|MLV0=+_0a=AT@Ci?{4xe zsjVx*c^%%vRd5J1Rtj<#>)mOQ+bFx6uIY%|$>G?-{jBX75mAQl^%-9gjBt5W-2m0O zUKorL;7p&3G<GxrEkHiD;MOt`*gPK{M*OU+KTSBWNWg# z%vYVzH-0Ab2@S%vw#^L#pcPY27fMFNl0J1sIg{W&_*UHg@LZ!8#bJnx$ldXc!g}rgMaX{;i1|Wje(Z{BX$&4Sgo9(r9A+5#v3$WBgWo zWWFAhX-EtE2YmS^>t*$|w-fajd&fy_AO;vcQs34ROQsMCKjL(G!oIGB=S(70f2@kEvSJ{^*Wu5l0`pmfA32EmenFq+89z=M z=7@Fq^dZ!mLp;~kQZS(cd^RE6KRx8V1gCbzRR+L70G|w&d0^{W?8tDs0LS8ma2k=S z+TZsJnICbuIQE2=(t7Q*Dh1PGVI)HM-jHF{}VNV@0QkZBWxVb5$x` zf?;h7jM{O`{dH;OX#G0dooV=h?j|l>+YLpH?ds(yp6G%^d>sfB%-u*E4Q2s1S9M3; zrpR8G@7ERhXlZD|j1OdJ=`11OMq3HL*~ZaY=JrHqq9T~9I`d(&2qme7z^eeGc86E0 zpA;EiBKapSWjdh_G>K6-^R+5~Qh{_8@0iTv0ztGFjD6YB&}rj}A?}C`b@~bjAm4@O z{>_2`-u$kJ5e1 z06JJML?){EMM&K2XkPj-&RjgdHr|Yom6}urY8KBD9uHRviY)N3&G+kcpau_q=F;XN zEYyiE_Bc&c3W?0~vWFjDbnW&g2~!tcAVVbx?%LI#Rtu+K8_)@^3m1_)4;Q;G{umi- z<*@OEXF zL0J;cvr0i^b{~7qcQdYL*x@tOVi!p6vJ!+pYW$6JCXyYmAaB_7w~;ri&*?aGjjugZ9RGP9>lQMwG^7($WystVwXvz)cxScNkhe4J$*2ndax8c^D zxvd&UZWTA=f>q>ru*{h$k=qr@6(uUiuIQufck&P&=TnvL$1tOI`za~|L5vJs;$V8C zz?d2Sk1cSfYdG_azPCLO3pR(mKaeg|WJU3Q*W{u_ZHMvzY1XEqPoEmuxa|1rniT+B z=!LX>OmnHxQcf5Q8g1T+=z&igi%hCCHPcU18Gvr=X`Ff)@pXZ0GUbP#VY{}hOUG+J z8}H&U8`gNNpD2&x1cr|5?Ob`NQ{hPjo zKb%U8)V;q1&B;|gQ6J8fS$;leZUy8sGjKv!zuI}b5;F{9Szx=$oRAbqq59K`L#Lqq z6~#c`bX3S6B5hCz+_{x74_@bNv!|R?wthHgX1EEV)yd1%F@#?4thWvO2g(W_Z%TSE zxKK&}N?evDye$2AI(^jn=r)GlrRKV4q~GlcSth;+<|_ig^NZDyYq=xh?a4&^>r-rp zKJ2w@e`{_!WU6lv%+G`SnTTtPc_(q+cXIvj$nD*WD`S(Rl2nHEP9EH17bKbYt;G4R zPbBjJHW*tkeG_&0s)!gpt*>1o0H#t9hl<3tVKICnu|Sy}l`B01i;shUSE5=YT#}kN zGEFzL5T)}rfR)DxQhl+^vuvkVsu|zp+E4X2#ucZ_p z9qP}bPZ8JmH*<_#NV3xf+hk6_`lV#1e$MqT=U5Lvb6vjzJ{%J8{vs`QFz6D7gpS?@ zTGODHmD&gWTYZ+3Mu*!RA>Q8Hm5V#YR5D~5u=U~FYs7q2V;%}e@EF`Iq1K88RxVI)xHAu|J)N+h13oHiP+G$+INCoq37d!kr%z`uPmC4XUs*aFF z2X3oY0Rjhr%8STX4Rl{?X0h1kh-(?QMjG+&W`b7)Nl$s!HYataJEb<0(Q4C*kzE@Z zH*6Ol&@nVNXu|ldb$%V!abFaggvR~W4t4F+`F7+gHVI9M0~ul*WHM^P#kI>sjoH zr%TodZ*?xa-^f43a5WRZOub|b>_Ke=7N#%S!ioz_2{Ui3SCu*FpP8lb8&tZaFE@1tqquYcD zZ&YMvByBK7;WSK*!1m%QuY7)Jhc`?ZH~0s-A{xL}jT{d`FF=Nk0Y6cx z`cL|3it8jax^^QJOQRoMc9332azFKXMz1f}u2zOAQ|tC^W8}$3MDV6^pjxa{;OtwU z<)EU++cp^{h6jPQRqX41F6Js(eX7xbp$v(MP9$P4Z+A|AFN0L8hSozbnj*)+r_LbT zwr=1Ku+!frVw^+**WSesTUPRvWE9p)^&Q*JeUFr^1}S+d59cmPdavajwOEu1p=`O{ ztc|@f9*MN!Q-{&&i(~lurqB>wI}S-vSrWf8&?-;9pL^HPNoeGD96B>DB#6EA_5M1` zL{fe&(&8v<^;X&<^3KG4IPtL_C8uc7LE1DK7xbo`E`y^zrHwxu2Yucr37=$lI*7^pT+r*PN|=D^gEzcl*A?~ycZ`E&XbJ3NFzD3~$Kh`FG|#N{ zr!|J_98+pd$qFn4EMB89(XnW&JqWfzr;>4Bn!VO(S<9FY96(W}{uU48KTN%}Vb4+H zE*zY{VuIU7|FxVbTGnlfl#GX98v-W9*3U{ezRqtj3~Z6T47oI_b>7*#K*C%ic}W!dp&PQ zuB{)n0>%!I@1Ns9;R;}UzMcJLQ|U&PI&E=og4JBnQv18%+4d{ zD-&y{;72;~j>viL^m8BIS(lS%H$K^RI!u%f&(8(DDOWnpe6MnBz1!;`o7$Il0cO9( zi34hF7pP16v=BXmKw8?%-*YMJ!^t|f^S_46cXvwrYA)IYdAPf3>_>yat1 zTl$)+3OOgPomJk<6xkT^A;$90hqNZRO1MXoeJ49oykTXpLl#;%{XhKdorI#LFJWi- z+f45}Lkw>A=TmI|(Epg^1C8%Tzum-YI#Ld!eXXIx$f)^n#R?ZE?n>v_8>l;vEP+_l zGGWH7FHu2iQ(O~ppQF!iSbojUTHUBX z&Btk3HHlQ(L5C~Wl1Pte|0UvIfrSQ%#++WIofQ7iD_ zN$?hf(@MUfLgn;!?>2tx>chZlJUVxGQRi6Vr2_hBwK$u_T!-82m&4C$L-8ICzuMB5 zgMQs&*PMlHLK~A0zW2wV$Sc&-exiKa~t_PEt@$qrR3gssXIU%AUK7-(1HG9;3pUN z(hA%P0JDgjyw$_gjvLZ-q5A%)W~Caa6)&tP zSZHXh_hx)q``xyAPs!IyYx4L@02y zG4HFg%1tXVqMjHO9^ zeufx__lTbHJXB~r3MFvh(k}6T(>(}$d66Sh4@c&BNEaHj;y(H0Zuhi1#EMKHFNd3I zhgJ+2*d!71bclCk( zMM(hWExCX9)`H^Zto_RYR+}GMtivgL4d(xt3BD)}zL+GmI|G_ItHh#y)|{psef)}- z($&X|an*l<;irif0-)L^JUfY;nI!OZ=^afotQ4*1Ej~sJHF$@Gp~a+m0Nv-3rEkJH z4G?D@;9UtEV5e=G%T-w52ICT~@7rqCxo$`b z;R^Mh6;hksHhzEFXlsxQpZo>yNj33QEj)e|OfZAaJgys~`*DNud^MAg%qK%}lN;dX zpYx1EK>EsywwgXYx0P~0W5mD4xC8a*ttSgexNl@uiF_eh8fXKg zenfr%TmYTR(2fdZ2e=!!S`d472Y~>(&FCVx>*9c@S^y)QmE(a~TO*FN*Cs>S0e|rB zJ9W|&DEpcp97F## z^9E$7JgZG*lPt14ZMqx`bLY)2YXv_H)Ng&C2|W@M!!f#c_R|}TTUzi!De4m!)KLDc~8=K?fjvx7d zqV9dGRRM;Pzuu0o#0=_J zeIRF!XbhiBrdu(rtls@{U2LKn-Eco2if*kI|5K8uBcnxS@QAU7?7kE`yKkvI_{94UN)_)UbUy*ISD;fE&QL^ zOM%xZ-jQgxxDcJtu?5em=7A4?QkaF$*>WWjf{2Y_645*4e~jA^5EaLN@UXXQH-#uW z`9H>yt4?o?1JP!x?`01*`r9cFLiVc3vESeE!Kd{rTQl&DY36*zMYp};`E7-o|5Hq6 z=WQ$#rz>Y?BZLVeR)z!TtIYM??9bl~==;}s_dIF3?6PNUft0ALE50%Y{UB~cCv>$= zya+X)2v)=1n!u?4vS(*@odc41rS7i=>W3;F$zAUcjCCA{$EX^V{&c6}{B-K3YGfN4 zqS;?+#&4C^_t=xesU87e{DtP`r>Fehe^LL*H#e`8UdRWxTrVLfs{HGy-dSLLanua# z8_aoY<4Zr03fs0$PvWWbb0*^+cXjgD^?@c4=eMxCI+P7&C(T$KHVhs+&kAtbf^0qI zHS*4S)MBeA@fzuoX()=$vD~^bajTZ76pqG<;sVeG5j;Md@VjjRCxej^rV8MjQZ2!>FN&se+cKkO;L)oht)7SERrt=)c|L^PEW5bDrn)kV3BYUhIw zp^d-&EU)`4kSTfWeU$ppnn$}i)Bif;LAw)3EAreO_H&JM=6ApGOa01AKS6f))8L+SkoOXFi zzeY)2yBAy)WKLbmnQJ+x9h%Q*VVQF04mt@48^Y>Mu>dh|5X6dhz~)%W#i{ z>-iCjnrj1LdY?akjTy?WGB3<~<{nBl9dc+iFE1W*ZxXp<33Z>()=V3?Wz*|^gEYH& zhGb>ZOJ7bmCk9!6BEN_D%}DdNk`{?f4OX6gS-lWW&T?hkQYN zC;H#8lOYNApQE`eZQY}SlBBG9>HhYW1dJ-`7E2-Ge-+9jRi!tX^x>LVmoO zRo22UgNFBx-X-)V3z^xO$Njv~-mpGGr)MVSt_z;i8-(=LGv9c)w7nf+x>?r}>c%Og z9-K&1A1+kWd&DPV=#uS`2D!hZ+x1yD?2%<_!9H#_eaYFP#tm^^?;C^Ko=J?ub3+>X z2oF%fqi@h_abA4PZm-D+?BZDgm{Y${PAYQ8ZE7Pv2cjO92jTLNu8S058fO0L+Y}#? z&*EFT%%yUn{}N*2>c%hG21OJmOuf~YmwvZfYrZFCy=~*TX0O=3dQd45@S|JV9GT(a zvQmA0EpKUX$fr5_iI!oL$mDD!wnryoZt z4nF8E5~aw#S>m zUqa87+;8HFSNq%hk5#pY=(4@eVq(k-BlwVf6A%~gpHl^s@etNRfkh!&`UmQyUUF5% z)qg!1yu`w^8FUU5V);f^OF=c6FEX_?#QKwCz&Hb}TqdK(`EMz@gQ}qth+93}!9%*j zl&+K-+7~Pw`_M@JRPdf{8ImRvIN-YvoHwa{Me||%0Z}#Hr=SDNEM3vGtRt3MukPaLJPTF@_Db)rfGfSRT(=~+vs5f`f#-s)w@rguL3<0! zurC*ia4R;pznC&Aseu{}qH191DOaIBd)wcNX)*Zykesz~`VvYH+pm$QwnbmRF}zPt zN=Qs&^EVX7(piEtALpcAoI3#w&6q7HyL0~=R7}NIgFW6qiC5?*0x;EFRrM_ZW)d}b z!%TXR4t<+~i&yt*GMvOyzOoms1Q&IiUgks)fQCbAEIC@+`7No{kTvgUe+ENP?zd;$N6)gzpC>#u!BF+ zkPhDs`jrbx%+3Xw9-{2;kji}v)@!B$C^>@xP!^~>^yx^K2%09a@RYQGdIKD-wU${P(3Sy+6ek?#e8 zQ~@KL3=4lXcF^au#zdqu&wc*xI}rXYrCD@)daZFRgdhNB8fl8*U`xA&HT5AkJZ;~o~Wme=XjlSKxL@cVSlm#Wex(o2Oq9taa zbWNm#bGtqKR#;OMi-CYBi2u7%aTDGE^5$GU2f>IXQ_9Mv&iJ@xzalbDs=G*=Ll^oD z#8bdx?KEq-k_7UD#X2t_@&t44@0(gVEzhgKg7+O%^Y(RsyI++bqW1Gq^H`NO{ARSQ z`s0`dNbJ{lRf}<}T`(UDZAI?Tizr>R+gb6{YVE@vK8OBJ65`A_mn$U+DmTuMP8}PH zJpLB#+EY_9ak)Y#K~31Y-gf@}W^c`@0_gub2{i!V)*ozQ$*&j*9mQiPmjA{lFPwN| I=y31<00}4~X#fBK