jianf/TrulyMEM-TrueHumanMEM
1
0
Fork 0
mirror of https://gitcode.com/JianFeeeee/TrulyMEM-TrueHumanMEM.git synced 2026-10-15 12:15:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 改用原生 Tabs 导航，清理旧 entry 目录代码

Browse Source 
- MainPage 改用 ArkUI Tabs + BottomTabBarStyle 原生导航
- 移除 ImmersiveTabNavigation 自定义组件依赖
- 清理旧 entry/src/main/ets/ 下的已迁移文件
- 更新 common/Index.ets 移除 ImmersiveTabNavigation 导出
This commit is contained in:
root
2026-05-01 09:21:39 +08:00
parent ab3d910387
commit 5ae2143822
12 changed files with 91 additions and 3889 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
products/phone/src/main/ets/pages/MainPage.ets
View File

@ -2,103 +2,105 @@ 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;
@Prop db: GraphDatabase;
@State isWide: boolean = false;
@State currentIndex: number = 0;
private tabController: TabsController = new TabsController();
aboutToAppear() {
this.updateBreakpoint();
try {
display.on('change', () => {
aboutToAppear() {
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');
try {
display.on('change', () => { this.updateBreakpoint(); });
} catch (e) {
console.error('display.on error: ' + JSON.stringify(e));
}
} else {
SettingsPage()
}
}
.width('100%')
.height('100%');
}
build() {
Stack() {
ImmersiveTabNavigation({
currentIndex: this.currentIndex,
onTabChange: (index: number): void => {
this.currentIndex = index;
},
contentBuilder: (): void => {
this.tabContentBuilder();
private updateBreakpoint(): void {
try {
const defaultWindow = display.getDefaultDisplaySync();
this.isWide = defaultWindow.width > 520;
} catch (e) {
console.error('updateBreakpoint error: ' + JSON.stringify(e));
}
})
}
.width('100%')
.height('100%');
}
}
@Builder
TabContentsBuilder() {
TabContent() {
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')
}
}
.tabBar(this.bottomTabBarStyle('TrulyMEM', '\ue8b6'))
TabContent() {
SettingsPage()
}
.tabBar(this.bottomTabBarStyle('设置', '\ue8b8'))
}
private bottomTabBarStyle(title: string, icon: string): BottomTabBarStyle {
return new BottomTabBarStyle({
normal: new SymbolGlyphModifier(icon)
}, title)
.padding({ bottom: 4 });
}
build() {
Tabs({ controller: this.tabController, index: this.currentIndex }) {
this.TabContentsBuilder()
}
.width('100%')
.height('100%')
.backgroundColor('#0A0A1A')
.barPosition(BarPosition.End)
.scrollable(false)
.animationMode(AnimationMode.NO_ANIMATION)
.onChange((index: number) => {
this.currentIndex = index;
})
}
}