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,231 @@
|
||||
/**
|
||||
* 家书 FamilyBook · 任务模块（鸿蒙端）
|
||||
*
|
||||
* 对应 Web 端 `templates/tasks/index.php`。Web 端是**看板**（按看板分列、卡片拖动改状态），
|
||||
* 端上改成**按状态分组的三段列表**（进行中 / 待办 / 已完成）：
|
||||
* 手机宽度放不下多列看板，横向滚动又容易误触；
|
||||
* 而用户真正关心的是「哪件事做到哪一步了」—— 按状态分组正对这个。
|
||||
*
|
||||
* 看板名仍保留（卡片上那个小色块标签），点它可以切到别的看板。
|
||||
*/
|
||||
|
||||
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 { FbCheckCircle, FbDot, FbEmptyBox, FbIconButton, FbPrimaryButton, FbTag } from '../../components/Widgets';
|
||||
|
||||
@ComponentV2
|
||||
export struct FbTasksPage {
|
||||
@Param app: FbAppState = fbAppState();
|
||||
|
||||
private boards: string[] = FB_DEMO_TASK_BOARDS;
|
||||
/** 模块主题色（任务 = 赭红） */
|
||||
private accent: string = '#A8574F';
|
||||
private tasks: FbTaskItem[] = FB_DEMO_TASKS;
|
||||
/** 当前筛选的看板（'' = 全部） */
|
||||
@Local boardFilter: string = '';
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
// ---- 页头 ----
|
||||
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)
|
||||
|
||||
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 })
|
||||
|
||||
// ---- 按状态分组的列表 ----
|
||||
if (this.filtered().length === 0) {
|
||||
FbEmptyBox({
|
||||
title: '这里没有任务',
|
||||
hint: '新建时会顺带指定它属于哪个看板、做到哪一步',
|
||||
icon: $r('app.media.fb_ic_tasks')
|
||||
})
|
||||
} else {
|
||||
List({ space: 0 }) {
|
||||
ForEach(this.groups(), (g: FbGroup<FbTaskItem>) => {
|
||||
ListItemGroup({ header: this.groupHeader(g) }) {
|
||||
ForEach(g.items, (t: FbTaskItem) => {
|
||||
ListItem() {
|
||||
this.taskCard(t)
|
||||
}
|
||||
}, (t: FbTaskItem): string => 'tk_' + t.id.toString())
|
||||
}
|
||||
}, (g: FbGroup<FbTaskItem>): string => 'grp_' + g.key)
|
||||
}
|
||||
.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
|
||||
boardChip(label: string, key: string) {
|
||||
Text(label)
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(this.boardFilter === key ? Color.White : FbColors.muted)
|
||||
.backgroundColor(this.boardFilter === key ? this.accent : FbColors.surface)
|
||||
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
|
||||
.borderRadius(FbMetric.radiusPill)
|
||||
.onClick(() => {
|
||||
this.boardFilter = key;
|
||||
})
|
||||
}
|
||||
|
||||
/** 分组头（粘在列表顶部，滚动时保持可见） */
|
||||
@Builder
|
||||
groupHeader(g: FbGroup<FbTaskItem>) {
|
||||
Row({ space: 8 }) {
|
||||
Text(g.title)
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(FbColors.ink)
|
||||
Text(g.count)
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.faint)
|
||||
Blank()
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: 4, right: 4, top: 12, bottom: 8 })
|
||||
.backgroundColor(FbColors.paper)
|
||||
}
|
||||
|
||||
/** 一张任务卡 */
|
||||
@Builder
|
||||
taskCard(t: FbTaskItem) {
|
||||
Column({ space: 8 }) {
|
||||
Row({ space: 10 }) {
|
||||
// 状态圈：完成=实心+勾、进行中=实心+白点、待办=空心
|
||||
FbCheckCircle({
|
||||
dia: 16,
|
||||
done: t.status === 'done',
|
||||
doing: t.status === 'doing',
|
||||
color: this.accent
|
||||
})
|
||||
|
||||
Text(t.title)
|
||||
.fontSize(FbMetric.fontBody)
|
||||
.fontColor(t.status === 'done' ? FbColors.faint : FbColors.ink)
|
||||
.decoration({
|
||||
type: t.status === 'done' ? TextDecorationType.LineThrough : TextDecorationType.None
|
||||
})
|
||||
.layoutWeight(1)
|
||||
.maxLines(2)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
}
|
||||
.width('100%')
|
||||
.alignItems(VerticalAlign.Center)
|
||||
|
||||
// 第二行：看板标签 + 负责人 + 截止 + 子任务进度
|
||||
Row({ space: 8 }) {
|
||||
Row({ space: 4 }) {
|
||||
FbDot({ dia: 6, fillC: t.boardColor })
|
||||
Text(t.board)
|
||||
.fontSize(10)
|
||||
.fontColor(t.boardColor)
|
||||
}
|
||||
|
||||
if (t.assignee.length > 0) {
|
||||
FbTag({ text: t.assignee, tone: 'muted' })
|
||||
}
|
||||
if (t.dueText.length > 0) {
|
||||
Row({ space: 3 }) {
|
||||
Text(t.dueText)
|
||||
.fontSize(10)
|
||||
.fontColor(t.overdue ? FbColors.red : FbColors.faint)
|
||||
if (t.overdue) {
|
||||
FbTag({ text: '逾期', tone: 'red' })
|
||||
}
|
||||
}
|
||||
}
|
||||
Blank()
|
||||
if (t.childTotal > 0) {
|
||||
Row({ space: 3 }) {
|
||||
Image($r('app.media.fb_ic_check'))
|
||||
.width(11)
|
||||
.height(11)
|
||||
.renderMode(ImageRenderMode.Template)
|
||||
.fillColor(FbColors.faint)
|
||||
Text(t.childDone.toString() + '/' + t.childTotal.toString())
|
||||
.fontSize(10)
|
||||
.fontColor(FbColors.faint)
|
||||
}
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.alignItems(VerticalAlign.Center)
|
||||
}
|
||||
.width('100%')
|
||||
.padding(14)
|
||||
.backgroundColor(FbColors.surface)
|
||||
.borderRadius(FbMetric.radius)
|
||||
.margin({ bottom: 8 })
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
|
||||
private filtered(): FbTaskItem[] {
|
||||
if (this.boardFilter.length === 0) {
|
||||
return this.tasks;
|
||||
}
|
||||
return this.tasks.filter((t: FbTaskItem): boolean => t.board === this.boardFilter);
|
||||
}
|
||||
|
||||
private groups(): FbGroup<FbTaskItem>[] {
|
||||
return fbGroupTask(this.filtered());
|
||||
}
|
||||
|
||||
private doingCount(): number {
|
||||
return this.tasks.filter((t: FbTaskItem): boolean => t.status === 'doing').length;
|
||||
}
|
||||
|
||||
private todoCount(): number {
|
||||
return this.tasks.filter((t: FbTaskItem): boolean => t.status === 'todo').length;
|
||||
}
|
||||
|
||||
private overdueCount(): number {
|
||||
return this.tasks.filter((t: FbTaskItem): boolean => t.overdue).length;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user