v0.1.0 界面框架：抽屉骨架 + 13 个模块页面
对应服务端 FamilyBook（家书）的鸿蒙客户端首版。本轮只做**界面框架**， 数据全部是演示数据 —— 服务端尚无客户端接口，所有增删改只做入口与样式， 不落任何数据。 ## 骨架 左侧抽屉 + 右侧内容。抽屉两套形态由窗口短边决定（≥600vp 为宽屏）： 宽屏常驻侧栏、窄屏滑出层。判据取「短边」而非「宽度」，因为短边在旋转时 不变，比例接近 1:1 的设备横竖屏布局天然一致。 ## 模块（与 Web 端 Module::LIST 一一对应，key 即路由名） 首页、家谱、名册、观影、旅程、日程、资源、任务、纪念日、财务、读书、 导航、笔记；另有通知消息、个人设置两个附加页。 ## 与 Web 端保持一致的几处 · 模块清单唯一来源在 model/Modules.ets，加模块只改那一处； · 模块主题色三档由主色按 HSL 压明度算出，预设色板与 Web 端逐值一致； · 术语沿用 Web 端固定下来的口径（旅程 ⊃ 行程；观影的「影院」不单独占 抽屉位，从模块内设置进）； · 页面结构照 Web 端的信息层次（首页信息面板 / 财务概览在账目之前 / 纪念日「即将到来」在顶 / 任务按状态而非按看板）。 ## 编译验证 hvigorw assembleHap --mode module -p product=default → BUILD SUCCESSFUL，0 error / 0 warning（含一次删 build 后的干净重建） 过程中修掉的编译期问题： · Circle().fill() 是 API 26 才有的重载（compatibleSdk 是 24） → 换「方块 + 圆角」画圆，零版本风险； · setWindowBackgroundColor 对 phone/tablet 不可用 → 去掉（页面已铺满同色）； · window.getLastWindow() 只有异步版 → 由 Ability 侧同步取窗存 AppStorage； · 颜色类 @Param 声明成 string 导致传 Resource 报错 → 统一改 ResourceColor； · 页面在 pages/<模块>/ 下，公共件 import 相对路径要多退一级。 （首轮编译 95 error / 18 warn，逐条定位到 5 类根因后归零。）
This commit is contained in:
@@ -0,0 +1,183 @@
|
||||
/**
|
||||
* 家书 FamilyBook · 主界面（鸿蒙端）
|
||||
*
|
||||
* 骨架：**左侧抽屉 + 右侧内容**，两套形态由窗口短边决定（见 FbAppState.wideLayout）：
|
||||
* · 宽屏（平板 / 折叠屏展开 / 横屏手机）：抽屉常驻，内容区并排；
|
||||
* · 窄屏：内容铺满，抽屉从左侧滑出（点遮罩或选中模块即收起）。
|
||||
*
|
||||
* 内容区 = 顶栏 + 当前模块页。此处只做**模块分发**，各模块的版面在各自文件里。
|
||||
*
|
||||
* ⚠️ 当前全部为**演示数据 / 静态界面**：还没有接口，所有「新建 / 编辑 / 删除」
|
||||
* 只做入口与样式，不落任何数据。接口到位后只要替换各页面里的数据源即可。
|
||||
*/
|
||||
|
||||
import { display, window } from '@kit.ArkUI';
|
||||
import { hilog } from '@kit.PerformanceAnalysisKit';
|
||||
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 { FbHomePage } from './home/FbHomePage';
|
||||
import { FbMoviesPage } from './movies/FbMoviesPage';
|
||||
import { FbTripsPage } from './trips/FbTripsPage';
|
||||
import { FbCalendarPage } from './calendar/FbCalendarPage';
|
||||
import { FbTasksPage } from './tasks/FbTasksPage';
|
||||
import { FbPeoplePage } from './people/FbPeoplePage';
|
||||
import { FbResourcesPage } from './resources/FbResourcesPage';
|
||||
import { FbDaysPage } from './days/FbDaysPage';
|
||||
import { FbLedgerPage } from './ledger/FbLedgerPage';
|
||||
import { FbBooksPage } from './books/FbBooksPage';
|
||||
import { FbNavPage, FbNotesPage, FbNotificationsPage } from './misc/FbMiscPages';
|
||||
import { FbSettingsPage } from './settings/FbSettingsPage';
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct Index {
|
||||
/** 全局状态（抽屉 / 当前模块 / 宽窄屏） */
|
||||
@Local app: FbAppState = fbAppState();
|
||||
/** 顶部安全区高度（状态栏），由窗口避让信息算出 */
|
||||
@Local topInset: number = 0;
|
||||
/** 底部安全区高度（手势条） */
|
||||
@Local bottomInset: number = 0;
|
||||
|
||||
aboutToAppear(): void {
|
||||
this.measureInsets();
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
// 顶部安全区：把内容推到状态栏下方（状态栏底色由 EntryAbility 设成页面底色）
|
||||
Column()
|
||||
.width('100%')
|
||||
.height(this.topInset)
|
||||
.backgroundColor(FbColors.surface)
|
||||
|
||||
// 主骨架：抽屉 + 内容
|
||||
Column() {
|
||||
FbDrawerShell({ app: this.app }) {
|
||||
this.mainArea()
|
||||
}
|
||||
}
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
|
||||
// 底部安全区
|
||||
Column()
|
||||
.width('100%')
|
||||
.height(this.bottomInset)
|
||||
.backgroundColor(FbColors.surface)
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.backgroundColor(FbColors.paper)
|
||||
}
|
||||
|
||||
/** 内容区：顶栏 + 当前模块页 */
|
||||
@Builder
|
||||
mainArea() {
|
||||
Column() {
|
||||
// ---- 顶栏（右侧插槽由各模块页填充；这里统一留空，
|
||||
// 因为「新建/搜索」这类操作已经放进各页自己的操作条里了）----
|
||||
FbTopBar({ app: this.app }) {
|
||||
}
|
||||
|
||||
// ---- 模块页 ----
|
||||
Column() {
|
||||
this.moduleContent()
|
||||
}
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.backgroundColor(FbColors.paper)
|
||||
}
|
||||
|
||||
/** 按当前模块渲染对应页面（用 if/else 分发：ArkUI 的 build 里不允许 switch） */
|
||||
@Builder
|
||||
moduleContent() {
|
||||
if (this.app.activeModule === 'home') {
|
||||
FbHomePage({ app: this.app }) {
|
||||
}
|
||||
} else if (this.app.activeModule === 'people' || this.app.activeModule === 'kin') {
|
||||
FbPeoplePage({ app: this.app })
|
||||
} else if (this.app.activeModule === 'movies') {
|
||||
FbMoviesPage({ app: this.app })
|
||||
} else if (this.app.activeModule === 'trips') {
|
||||
FbTripsPage({ app: this.app })
|
||||
} else if (this.app.activeModule === 'calendar') {
|
||||
FbCalendarPage({ app: this.app })
|
||||
} else if (this.app.activeModule === 'tasks') {
|
||||
FbTasksPage({ app: this.app })
|
||||
} else if (this.app.activeModule === 'resources') {
|
||||
FbResourcesPage({ app: this.app })
|
||||
} else if (this.app.activeModule === 'days') {
|
||||
FbDaysPage({ app: this.app })
|
||||
} else if (this.app.activeModule === 'ledger') {
|
||||
FbLedgerPage({ app: this.app })
|
||||
} else if (this.app.activeModule === 'books') {
|
||||
FbBooksPage({ app: this.app })
|
||||
} else if (this.app.activeModule === 'nav') {
|
||||
FbNavPage({ app: this.app })
|
||||
} else if (this.app.activeModule === 'notes') {
|
||||
FbNotesPage({ app: this.app })
|
||||
} else if (this.app.activeModule === '__notifications') {
|
||||
FbNotificationsPage({ app: this.app })
|
||||
} else if (this.app.activeModule === '__settings') {
|
||||
FbSettingsPage({ app: this.app })
|
||||
} else {
|
||||
// 兜底：模块还没做页面时给一句提示，而不是白屏
|
||||
Column({ space: 8 }) {
|
||||
Text('这个模块还没有页面')
|
||||
.fontSize(FbMetric.fontBody)
|
||||
.fontColor(FbColors.muted)
|
||||
Text('当前模块：' + this.app.activeModule)
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 量安全区与宽窄屏。
|
||||
*
|
||||
* ⚠️ 状态栏高度**不写死数字**：不同机型（刘海、挖孔、无手势条）差很多，
|
||||
* 写死必然在某些机型上错位。这里按窗口避让信息取真实值。
|
||||
*
|
||||
* ⚠️ 窗口引用从 EntryAbility 放进 AppStorage（`fbMainWindow`）后再取 ——
|
||||
* `window.getLastWindow()` 只有异步版，在 aboutToAppear 里 await 会把
|
||||
* 首帧的布局延后一帧；而 `windowStage.getMainWindowSync()` 是同步的，
|
||||
* 由 Ability 侧取一次存下来最省事。
|
||||
*/
|
||||
private measureInsets(): void {
|
||||
try {
|
||||
const d: display.Display = display.getDefaultDisplaySync();
|
||||
const density: number = d.densityPixels;
|
||||
if (density <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 宽窄屏：按窗口短边（短边旋转时不变，故比例接近 1:1 的设备横竖屏布局天然一致）
|
||||
const shortSide: number = Math.min(d.width, d.height) / density;
|
||||
this.app.wideLayout = shortSide >= FB_WIDE_BREAKPOINT;
|
||||
|
||||
// 安全区：取窗口的真实避让矩形
|
||||
const win: window.Window | undefined =
|
||||
AppStorage.get<window.Window>('fbMainWindow');
|
||||
if (win !== undefined) {
|
||||
const top: window.AvoidArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
|
||||
this.topInset = top.topRect.height / density;
|
||||
const bottom: window.AvoidArea =
|
||||
win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
|
||||
this.bottomInset = bottom.bottomRect.height / density;
|
||||
}
|
||||
} catch (err) {
|
||||
// 取不到就退到「只判宽窄屏、安全区按 0」—— 页面自带 12vp 顶部留白，不会贴边
|
||||
hilog.warn(0x0000, 'FamilyBook', 'measureInsets failed: %{public}s', JSON.stringify(err));
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user