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,274 @@
|
||||
/**
|
||||
* 家书 FamilyBook · 旅程模块（鸿蒙端）
|
||||
*
|
||||
* 对应 Web 端 `templates/trips/index.php` + `trips/show.php`。
|
||||
*
|
||||
* 术语照 Web 端**固定下来**的那套（用户明确要求）：
|
||||
* · **旅程** = 列表里的一条（容器，如「青岛·崂山 两日」）；
|
||||
* · **行程** = 旅程里面的一段一段（详情页时间轴上的节点）。
|
||||
*
|
||||
* 端上的形态：**上列表 / 下详情同屏**不现实（手机高度不够），
|
||||
* 所以这页做「列表 + 展开选中项的行程摘要」；点某条旅程展开它的行程时间轴。
|
||||
* 时间轴节点分「计划 / 实际」两阶段 —— 与 Web 端一致（v41 加的四种动作按钮）。
|
||||
*/
|
||||
|
||||
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 { FbDot, FbEmptyBox, FbIconButton, FbPrimaryButton, FbTag } from '../../components/Widgets';
|
||||
|
||||
@ComponentV2
|
||||
export struct FbTripsPage {
|
||||
@Param app: FbAppState = fbAppState();
|
||||
|
||||
private trips: FbTripItem[] = FB_DEMO_TRIPS;
|
||||
private nodes: FbTripNode[] = FB_DEMO_TRIP_NODES;
|
||||
/** 模块主题色（旅程 = 绿） */
|
||||
private accent: string = '#3F7D5A';
|
||||
/** 当前展开的旅程 id（0 = 都没展开） */
|
||||
@Local expandedId: number = 0;
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
// ---- 页头操作条 ----
|
||||
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)
|
||||
|
||||
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)
|
||||
|
||||
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())
|
||||
}
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, bottom: 24 })
|
||||
.scrollBar(BarState.Off)
|
||||
.edgeEffect(EdgeEffect.Spring)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.backgroundColor(FbColors.paper)
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
|
||||
/** 一张旅程卡：标题 + 时间 + 进度；展开后接行程时间轴 */
|
||||
@Builder
|
||||
tripCard(t: FbTripItem) {
|
||||
Column({ space: 0 }) {
|
||||
// 卡头
|
||||
Row({ space: 10 }) {
|
||||
// 左侧色条（模块色的竖条，一眼区分旅程）
|
||||
Column()
|
||||
.width(4)
|
||||
.height(38)
|
||||
.borderRadius(2)
|
||||
.backgroundColor(this.accent)
|
||||
|
||||
Column({ space: 3 }) {
|
||||
Text(t.title)
|
||||
.fontSize(FbMetric.fontTitle)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(FbColors.ink)
|
||||
.maxLines(1)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
Row({ space: 8 }) {
|
||||
Text(t.dateRange)
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.muted)
|
||||
Text(t.sub)
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
}
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.layoutWeight(1)
|
||||
|
||||
Column({ space: 3 }) {
|
||||
if (t.nodeCount > 0) {
|
||||
Text(t.doneCount.toString() + '/' + t.nodeCount.toString())
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(this.accent)
|
||||
Text('行程')
|
||||
.fontSize(10)
|
||||
.fontColor(FbColors.faint)
|
||||
} else {
|
||||
FbTag({ text: '还没行程', tone: 'muted' })
|
||||
}
|
||||
}
|
||||
.alignItems(HorizontalAlign.End)
|
||||
|
||||
Image($r('app.media.fb_ic_forward'))
|
||||
.width(14)
|
||||
.height(14)
|
||||
.renderMode(ImageRenderMode.Template)
|
||||
.fillColor(FbColors.faint)
|
||||
.rotate({ angle: this.isExpanded(t.id) ? 90 : 0 })
|
||||
}
|
||||
.width('100%')
|
||||
.padding(FbMetric.cardPad)
|
||||
.alignItems(VerticalAlign.Center)
|
||||
.onClick(() => {
|
||||
// 展开/收起：只改本地状态，不发请求
|
||||
this.expandedId = this.isExpanded(t.id) ? 0 : t.id;
|
||||
})
|
||||
|
||||
// 展开区：行程时间轴
|
||||
if (this.isExpanded(t.id)) {
|
||||
Divider()
|
||||
.color(FbColors.line2)
|
||||
.margin({ left: FbMetric.cardPad, right: FbMetric.cardPad })
|
||||
|
||||
if (this.nodes.length === 0) {
|
||||
Column() {
|
||||
Text('这个旅程还没有排行程')
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
.width('100%')
|
||||
.padding(FbMetric.cardPad)
|
||||
} else {
|
||||
Column({ space: 0 }) {
|
||||
// 分两段列：「实际」（已发生的）在前，「计划」在后 —— 与 Web 端顺序一致
|
||||
this.stageBlock('实际', 'actual')
|
||||
this.stageBlock('计划', 'plan')
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: FbMetric.cardPad })
|
||||
}
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.backgroundColor(FbColors.surface)
|
||||
.borderRadius(FbMetric.radius)
|
||||
.clip(true)
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
|
||||
/** 一段阶段块（实际 / 计划）+ 它下面的节点时间轴 */
|
||||
@Builder
|
||||
stageBlock(title: string, stage: string) {
|
||||
if (this.nodesOf(stage).length > 0) {
|
||||
Column({ space: 0 }) {
|
||||
Row({ space: 6 }) {
|
||||
FbTag({
|
||||
text: title,
|
||||
tone: stage === 'actual' ? 'green' : 'blue'
|
||||
})
|
||||
Text(this.nodesOf(stage).length.toString() + ' 段')
|
||||
.fontSize(10)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ top: 10, bottom: 6 })
|
||||
|
||||
ForEach(this.nodesOf(stage), (n: FbTripNode) => {
|
||||
this.nodeRow(n)
|
||||
}, (n: FbTripNode): string => 'tn_' + stage + '_' + n.id.toString())
|
||||
}
|
||||
.width('100%')
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
}
|
||||
|
||||
/** 一个行程节点：左侧圆点 + 内容块，内容块的左边框连成时间轴竖线 */
|
||||
@Builder
|
||||
nodeRow(n: FbTripNode) {
|
||||
Row({ space: 8 }) {
|
||||
// 圆点：顶对齐，与标题首行齐平
|
||||
FbDot({
|
||||
dia: 9,
|
||||
fillC: n.status === 'done' ? this.accent : '#A8988A'
|
||||
})
|
||||
.margin({ top: 5 })
|
||||
|
||||
// 内容块：左边框 = 时间轴的竖线（节点之间无间距，边框首尾相接成为连续线）
|
||||
Column({ space: 4 }) {
|
||||
Row({ space: 8 }) {
|
||||
Text(n.title)
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(FbColors.ink)
|
||||
.layoutWeight(1)
|
||||
.maxLines(1)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
Text(n.when)
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
.width('100%')
|
||||
|
||||
Text(n.place)
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.muted)
|
||||
.maxLines(1)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
.width('100%')
|
||||
|
||||
Row({ space: 6 }) {
|
||||
if (n.mode.length > 0) {
|
||||
FbTag({ text: n.mode, tone: 'blue' })
|
||||
}
|
||||
if (n.status === 'done') {
|
||||
FbTag({ text: '已完成', tone: 'green' })
|
||||
} else if (n.status === 'skip') {
|
||||
FbTag({ text: '跳过', tone: 'muted' })
|
||||
} else {
|
||||
FbTag({ text: '待办', tone: 'muted' })
|
||||
}
|
||||
if (n.expenseCent > 0) {
|
||||
Text(fbMoney(n.expenseCent))
|
||||
.fontSize(10)
|
||||
.fontColor(FbColors.muted)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
}
|
||||
.layoutWeight(1)
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.padding({ left: 12, bottom: 16 })
|
||||
.border({ width: { left: 1 }, color: FbColors.line })
|
||||
}
|
||||
.width('100%')
|
||||
.alignItems(VerticalAlign.Top)
|
||||
}
|
||||
|
||||
private isExpanded(id: number): boolean {
|
||||
return this.expandedId === id;
|
||||
}
|
||||
|
||||
private nodesOf(stage: string): FbTripNode[] {
|
||||
return this.nodes.filter((n: FbTripNode): boolean => n.stage === stage);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user