feat(entry): 建立 MVVM+data 分层骨架,接入 V2 状态管理与 Navigation 路由

This commit is contained in:
AndyChen1024
2026-09-11 16:22:45 +08:00
parent 3a116df871
commit 058b978f25
11 changed files with 336 additions and 33 deletions

View File

@@ -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)
}
}