refactor: 应用参考工程代码模式，优化启动流程和架构

- 新增 SplashPage：启动页，2秒后跳转到 Index - 新增 MainPage：独立主页组件，含 Tab 导航 + 宽屏/窄屏自适应 - 简化 Index.ets：纯路由入口，初始化数据库，加载 MainPage - EntryAbility：加载 SplashPage 而非直接加载 Index - 新增 PageContext：NavPathStack 路由管理（参考工程模式） - 新增 BreakpointSystem：响应式断点系统 xs/sm/md/lg/xl - 新增 BaseViewModel：ViewModel 基类，含 attach/detach/dispose 生命周期 - 更新 common/Index.ets 导出新模块 - 更新 main_pages.json 注册 SplashPage 和 MainPage
2026-10-04 00:14:26 +00:00 · 2026-05-01 09:15:36 +08:00
parent 5916d2749c
commit ab3d910387
9 changed files with 325 additions and 112 deletions
--- a/products/phone/src/main/ets/entryability/EntryAbility.ets
+++ b/products/phone/src/main/ets/entryability/EntryAbility.ets
@ -1,18 +1,34 @@
-import UIAbility from '@ohos.app.ability.UIAbility';
-import window from '@ohos.window';
+import { UIAbility, AbilityConstant, Want } from '@kit.AbilityKit';
+import { window } from '@kit.ArkUI';
+import { BusinessError } from '@kit.BasicServicesKit';

 export default class EntryAbility extends UIAbility {
-  onCreate(want, launchParam) {
+  onCreate(want: Want, param: AbilityConstant.LaunchParam): void {
    console.info('EntryAbility onCreate');
  }

-  onDestroy() {
+  onDestroy(): void {
    console.info('EntryAbility onDestroy');
  }

-  onWindowStageCreate(windowStage: window.WindowStage) {
+  onWindowStageCreate(windowStage: window.WindowStage): void {
+    const windowClass: window.Window = windowStage.getMainWindowSync();
+    try {
+      windowClass.setWindowBackgroundColor('#00000000');
+    } catch (e) {
+      console.error('Failed to set background color: ' + (e as BusinessError).message);
+    }
+    try {
+      windowClass.setWindowSystemBarProperties({
+        statusBarColor: '#00000000',
+        navigationBarColor: '#00000000'
+      });
+    } catch (e) {
+      console.error('Failed to set system bar properties: ' + (e as BusinessError).message);
+    }
+
    console.info('EntryAbility onWindowStageCreate');
-    windowStage.loadContent('pages/Index', (err, data) => {
+    windowStage.loadContent('pages/SplashPage', (err, data) => {
      if (err.code) {
        console.error('Failed to load the content. Cause: ' + JSON.stringify(err));
        return;
@ -21,15 +37,15 @@ export default class EntryAbility extends UIAbility {
    });
  }

-  onWindowStageDestroy() {
+  onWindowStageDestroy(): void {
    console.info('EntryAbility onWindowStageDestroy');
  }

-  onForeground() {
+  onForeground(): void {
    console.info('EntryAbility onForeground');
  }

-  onBackground() {
+  onBackground(): void {
    console.info('EntryAbility onBackground');
  }
 }
--- a/products/phone/src/main/ets/pages/Index.ets
+++ b/products/phone/src/main/ets/pages/Index.ets
@ -1,19 +1,22 @@
 import { GraphDatabase } from '@ohos/common';
-import { GraphPage } from '@ohos/graph';
-import { ChatPage } from '@ohos/chat';
-import { SettingsPage } from '@ohos/settings';
-import { ImmersiveTabNavigation } from '@ohos/common';
+import { MainPage } from './MainPage';
 import display from '@ohos.display';

@Entry
@Component
 struct Index {
-  @State currentIndex: number = 0;
  private db: GraphDatabase = new GraphDatabase();
  private displayCallback?: Callback<number>;

  aboutToAppear() {
    this.db.init(getContext(this));
+    try {
+      this.displayCallback = (size: number): void => {
+      };
+      display.on('change', this.displayCallback);
+    } catch (e) {
+      console.error('display.on error: ' + JSON.stringify(e));
+    }
  }

  aboutToDisappear() {
@ -22,104 +25,7 @@ struct Index {
    }
  }

-  @Builder
-  tabContentBuilder() {
-    Column() {
-      if (this.currentIndex === 0) {
-        MainPage({ db: this.db })
-      } else {
-        SettingsPage()
-      }
-    }
-    .width('100%')
-    .height('100%')
-  }
-
  build() {
-    Stack() {
-      ImmersiveTabNavigation({
-        currentIndex: this.currentIndex,
-        onTabChange: (index: number): void => { this.currentIndex = index; },
-        contentBuilder: (): void => { this.tabContentBuilder(); }
-      })
-    }
-    .width('100%')
-    .height('100%')
-  }
-}
-
-@Component
-struct MainPage {
-  @Prop db: GraphDatabase;
-  @State isWide: boolean = false;
-
-  aboutToAppear() {
-    this.updateBreakpoint();
-    try {
-      display.on('change', () => {
-        this.updateBreakpoint();
-      });
-    } catch (e) {
-      console.error('display.on error: ' + JSON.stringify(e));
-    }
-  }
-
-  private updateBreakpoint(): void {
-    try {
-      const defaultWindow = display.getDefaultDisplaySync();
-      this.isWide = defaultWindow.width > 520;
-    } catch (e) {
-      console.error('updateBreakpoint error: ' + JSON.stringify(e));
-    }
-  }
-
-  build() {
-    if (this.isWide) {
-      Row() {
-        GraphPage({ db: this.db })
-          .layoutWeight(1)
-          .height('100%')
-          .clip(true)
-          .borderRadius(12)
-          .margin({ left: 4, right: 2 })
-
-        ChatPage({ db: this.db })
-          .width(380)
-          .height('100%')
-          .clip(true)
-          .borderRadius(12)
-          .margin({ left: 2, right: 4 })
-      }
-      .width('100%')
-      .height('100%')
-      .padding(4)
-      .backgroundColor('#1A1B2E')
-      .backgroundBlurStyle(BlurStyle.Regular)
-    } else {
-      Column() {
-        Stack() {
-          GraphPage({ db: this.db })
-        }
-        .height('55%')
-        .width('100%')
-        .clip(true)
-        .borderRadius(12)
-        .margin({ top: 2, left: 4, right: 4, bottom: 2 })
-
-        Stack() {
-          ChatPage({ db: this.db })
-        }
-        .height('45%')
-        .width('100%')
-        .clip(true)
-        .borderRadius(12)
-        .margin({ top: 2, left: 4, right: 4, bottom: 2 })
-      }
-      .width('100%')
-      .height('100%')
-      .padding(2)
-      .backgroundColor('#1A1B2E')
-      .backgroundBlurStyle(BlurStyle.Regular)
-    }
+    MainPage({ db: this.db }).width('100%').height('100%');
  }
 }
--- a/products/phone/src/main/ets/pages/MainPage.ets
+++ b/products/phone/src/main/ets/pages/MainPage.ets
@ -0,0 +1,104 @@
+import { GraphDatabase } from '@ohos/common';
+import { GraphPage } from '@ohos/graph';
+import { ChatPage } from '@ohos/chat';
+import { SettingsPage } from '@ohos/settings';
+import { ImmersiveTabNavigation } from '@ohos/common';
+import display from '@ohos.display';
+
+@Component
+export struct MainPage {
+  @Prop db: GraphDatabase;
+  @State isWide: boolean = false;
+  @State currentIndex: number = 0;
+
+  aboutToAppear() {
+    this.updateBreakpoint();
+    try {
+      display.on('change', () => {
+        this.updateBreakpoint();
+      });
+    } catch (e) {
+      console.error('display.on error: ' + JSON.stringify(e));
+    }
+  }
+
+  private updateBreakpoint(): void {
+    try {
+      const defaultWindow = display.getDefaultDisplaySync();
+      this.isWide = defaultWindow.width > 520;
+    } catch (e) {
+      console.error('updateBreakpoint error: ' + JSON.stringify(e));
+    }
+  }
+
+  @Builder
+  tabContentBuilder() {
+    Column() {
+      if (this.currentIndex === 0) {
+        if (this.isWide) {
+          Row() {
+            GraphPage({ db: this.db })
+              .layoutWeight(1)
+              .height('100%')
+              .clip(true)
+              .borderRadius(12)
+              .margin({ left: 4, right: 2 });
+            ChatPage({ db: this.db })
+              .width(380)
+              .height('100%')
+              .clip(true)
+              .borderRadius(12)
+              .margin({ left: 2, right: 4 });
+          }
+          .width('100%')
+          .height('100%')
+          .padding(4)
+          .backgroundColor('#1A1B2E');
+        } else {
+          Column() {
+            Stack() {
+              GraphPage({ db: this.db })
+            }
+            .height('55%')
+            .width('100%')
+            .clip(true)
+            .borderRadius(12)
+            .margin({ top: 2, left: 4, right: 4, bottom: 2 });
+            Stack() {
+              ChatPage({ db: this.db })
+            }
+            .height('45%')
+            .width('100%')
+            .clip(true)
+            .borderRadius(12)
+            .margin({ top: 2, left: 4, right: 4, bottom: 2 });
+          }
+          .width('100%')
+          .height('100%')
+          .padding(2)
+          .backgroundColor('#1A1B2E');
+        }
+      } else {
+        SettingsPage()
+      }
+    }
+    .width('100%')
+    .height('100%');
+  }
+
+  build() {
+    Stack() {
+      ImmersiveTabNavigation({
+        currentIndex: this.currentIndex,
+        onTabChange: (index: number): void => {
+          this.currentIndex = index;
+        },
+        contentBuilder: (): void => {
+          this.tabContentBuilder();
+        }
+      })
+    }
+    .width('100%')
+    .height('100%');
+  }
+}
--- a/products/phone/src/main/ets/pages/SplashPage.ets
+++ b/products/phone/src/main/ets/pages/SplashPage.ets
@ -0,0 +1,29 @@
+import router from '@ohos.router';
+
+@Entry
+@Component
+struct SplashPage {
+  aboutToAppear() {
+    setTimeout(() => {
+      router.replaceUrl({ url: 'pages/Index' });
+    }, 2000);
+  }
+
+  build() {
+    Column() {
+      Text('TrulyMEM')
+        .fontSize(48)
+        .fontWeight(FontWeight.Bold)
+        .fontColor(Color.White);
+      Text('True Human Memory')
+        .fontSize(20)
+        .fontColor(Color.White)
+        .margin({ top: 16 });
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor('#1A1B2E')
+    .justifyContent(FlexAlign.Center)
+    .alignItems(HorizontalAlign.Center);
+  }
+}
--- a/products/phone/src/main/resources/base/profile/main_pages.json
+++ b/products/phone/src/main/resources/base/profile/main_pages.json
@ -1,5 +1,7 @@
 {
  "src": [
+    "pages/SplashPage",
+    "pages/MainPage",
    "pages/Index"
  ]
 }