feat(entry): 建立 MVVM+data 分层骨架,接入 V2 状态管理与 Navigation 路由
This commit is contained in:
@@ -1,23 +1,63 @@
|
||||
import { AppColor, AppSpacing, AppButton, LoadingView, EmptyView } from 'uikit';
|
||||
import { HomeViewModel } from '../viewmodel/HomeViewModel';
|
||||
import { User } from '../model/User';
|
||||
import { AppRouter } from '../router/AppRouter';
|
||||
import { RouteMap, RouteNames } from '../router/RouteMap';
|
||||
import { StatusCard } from '../view/StatusCard';
|
||||
|
||||
/**
|
||||
* 首页(@Entry):Navigation 根容器,仅编排。
|
||||
* 演示「页面 -> ViewModel -> Repository -> Api -> HttpClient」完整链路。
|
||||
*/
|
||||
@Entry
|
||||
@Component
|
||||
@ComponentV2
|
||||
struct Index {
|
||||
@State message: string = 'Hello World';
|
||||
@Local pathStack: NavPathStack = new NavPathStack();
|
||||
@Local viewModel: HomeViewModel = HomeViewModel.create();
|
||||
@Local title: string = 'Harmony Client';
|
||||
|
||||
aboutToAppear(): void {
|
||||
AppRouter.init(this.pathStack);
|
||||
this.viewModel.load();
|
||||
}
|
||||
|
||||
build() {
|
||||
RelativeContainer() {
|
||||
Text(this.message)
|
||||
.id('HelloWorld')
|
||||
.fontSize($r('app.float.page_text_font_size'))
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.alignRules({
|
||||
center: { anchor: '__container__', align: VerticalAlign.Center },
|
||||
middle: { anchor: '__container__', align: HorizontalAlign.Center }
|
||||
})
|
||||
.onClick(() => {
|
||||
this.message = 'Welcome';
|
||||
Navigation(this.pathStack) {
|
||||
Column({ space: AppSpacing.md }) {
|
||||
Text(this.title)
|
||||
.fontSize(24)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.fontColor(AppColor.textPrimary)
|
||||
|
||||
if (this.viewModel.loading) {
|
||||
LoadingView({ text: '加载中...' })
|
||||
} else if (this.viewModel.error.length > 0) {
|
||||
EmptyView({ text: this.viewModel.error })
|
||||
} else {
|
||||
ForEach(this.viewModel.users, (user: User) => {
|
||||
StatusCard({ title: user.name, subtitle: user.email })
|
||||
}, (user: User) => user.id)
|
||||
}
|
||||
|
||||
AppButton({
|
||||
text: '进入详情页',
|
||||
onTap: () => {
|
||||
AppRouter.push(RouteNames.DETAIL, '来自首页的参数');
|
||||
}
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.padding(AppSpacing.lg)
|
||||
.backgroundColor(AppColor.background)
|
||||
}
|
||||
.height('100%')
|
||||
.width('100%')
|
||||
.navDestination(this.routeMap)
|
||||
.mode(NavigationMode.Stack)
|
||||
.hideTitleBar(true)
|
||||
}
|
||||
}
|
||||
|
||||
@Builder
|
||||
routeMap(name: string, param: Object) {
|
||||
RouteMap(name, param)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user