diff --git a/app/src/main/ets/pages/Index.ets b/app/src/main/ets/pages/Index.ets
index 4c6e796..ec29b89 100644
--- a/app/src/main/ets/pages/Index.ets
+++ b/app/src/main/ets/pages/Index.ets
@@ -1,17 +1,51 @@
-import { ComponentConst, TitleBar } from '@devwiki/common_ui';
+import { ComponentConst, ScreenUtil, TitleBar } from '@devwiki/common_ui';
 import { TitleBarMenuType } from '@devwiki/common_ui/src/main/ets/component/TitleBar';
 import { router } from '@kit.ArkUI';
 import { PageRouter } from './PageRouter';
+import { WebPage } from './WebPage';
+
+@CustomDialog
+struct WebViewDialog {
+
+  aboutToAppear(): void {
+    ScreenUtil.getInstance().initScreenSize();
+  }
+
+  dialogController: CustomDialogController = new CustomDialogController({
+    builder: WebViewDialog({})
+  });
+
+  build() {
+    WebPage().height('100%').width('50%')
+  }
+}
 
 @Entry
 @Component
 struct Index {
   @State title: string = "Home";
+  dialogController: CustomDialogController = new CustomDialogController({
+    builder: WebViewDialog(),
+    alignment: DialogAlignment.CenterEnd,
+    customStyle: true
+  })
 
   onTitleBarLeftClick(_event: ClickEvent) {
     this.getUIContext().getRouter().back();
   }
 
+
+  onButtonClicked() {
+    this.dialogController.open();
+
+    // router.pushUrl({
+    //   // 两种方式都可以加载Page, 一个是和 resources/base/profile/main_pages.ets中的配置相同
+    //   // 一个是绝对路径
+    //   // url: "pages/WebPage",
+    //   url: PageRouter.WebPage
+    // }, router.RouterMode.Single);
+  }
+
   build() {
     Column() {
       RelativeContainer() {
@@ -24,29 +58,28 @@ struct Index {
           .alignRules({
             top: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Top },
             left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
-          }).id("title_bar");
+          }).id("title_bar"); //必须要设置id 否则不显示
 
         Divider().alignRules({
           top: { anchor: "title_bar", align: VerticalAlign.Bottom },
           left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start }
-        }).width('100%').id("divider")
+        }).width('100%').id("divider") //必须要设置id 否则不显示
 
-        Column() {
-          Button("WebPage").align(Alignment.Center).height(36).width(80).onClick(() => {
-            router.pushUrl({
-              // 两种方式都可以加载Page, 一个是和 resources/base/profile/main_pages.ets中的配置相同
-              // 一个是绝对路径
-              // url: "pages/WebPage",
-              url: PageRouter.WebPage
-            }, router.RouterMode.Single);
-          })
+        Column({ space: 8 }) {
+          Row({ space: 8 }) {
+            Button("WebPage").type(ButtonType.Capsule).align(Alignment.Center).height(36).width(80).onClick(() => {
+              this.onButtonClicked();
+            })
+          }.width(36);
+          Row().height(36);
+          Row().width(36);
         }
         .width('100%')
         .alignRules({
           top: { anchor: "divider", align: VerticalAlign.Bottom },
           left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start },
           bottom: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
-        }).id("host_web")
+        }).id("host_web") //必须要设置id 否则不显示
       }.width('100%').height('100%')
     }.width('100%').height('100%')
   }
diff --git a/app/src/main/ets/pages/PageRouter.ets b/app/src/main/ets/pages/PageRouter.ets
index 42a72d2..c11c892 100644
--- a/app/src/main/ets/pages/PageRouter.ets
+++ b/app/src/main/ets/pages/PageRouter.ets
@@ -1,4 +1,4 @@
 
 export class PageRouter{
   static readonly WebPage: string = "@bundle:net.devwiki.hm4demo/app/ets/pages/WebPage"
-}
\ No newline at end of file
+}
diff --git a/common_ui/Index.ets b/common_ui/Index.ets
index 275e0ad..efaa122 100644
--- a/common_ui/Index.ets
+++ b/common_ui/Index.ets
@@ -5,3 +5,4 @@ export { Emitter } from './src/main/ets/event/Emitter'
 export { WebView, WebViewController } from './src/main/ets/component/web/WebView'
 
 export { CommonRes } from './src/main/ets/utils/CommonRes'
+export { ScreenUtil } from './src/main/ets/utils/ScreenUtil'
diff --git a/common_ui/src/main/ets/component/TitleBar.ets b/common_ui/src/main/ets/component/TitleBar.ets
index 200d17a..a66d541 100644
--- a/common_ui/src/main/ets/component/TitleBar.ets
+++ b/common_ui/src/main/ets/component/TitleBar.ets
@@ -73,20 +73,20 @@ export struct TitleBar {
         if (this.titleVisible == Visibility.Visible) {
           Text(this.title)
             .textAlign(this.titleTextAlign)
-            .margin({
-              left: this.leftMenuType != TitleBarMenuType.None ? this.barHeight : 0,
-              right: this.leftMenuType != TitleBarMenuType.None ? this.barHeight : 0
+            .backgroundColor(0xFFFFFF)
+            .padding({
+              left: this.leftMenuType != TitleBarMenuType.None ? 0 : this.menuPadding,
+              right: this.rightMenuType != TitleBarMenuType.None ? 0 : this.menuPadding
             })
-            .padding({left: this.leftMenuType != TitleBarMenuType.None ? 0 : this.menuPadding})
             .alignRules({
               top: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Top },
               left: {
                 anchor: this.leftMenuType != TitleBarMenuType.None ? "left_menu" : ComponentConst.ContainerId,
-                align: HorizontalAlign.Start
+                align: this.leftMenuType != TitleBarMenuType.None ? HorizontalAlign.End : HorizontalAlign.Start
               },
               right: {
                 anchor: this.leftMenuType != TitleBarMenuType.None ? "right_menu" : ComponentConst.ContainerId,
-                align: HorizontalAlign.End
+                align: this.leftMenuType != TitleBarMenuType.None ? HorizontalAlign.Start : HorizontalAlign.End
               },
               bottom: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
             })
diff --git a/common_ui/src/main/ets/pages/layout/LinearLayoutPage.ets b/common_ui/src/main/ets/pages/layout/LinearLayoutPage.ets
new file mode 100644
index 0000000..3f4934b
--- /dev/null
+++ b/common_ui/src/main/ets/pages/layout/LinearLayoutPage.ets
@@ -0,0 +1,16 @@
+
+@Entry
+@Component
+struct LinearLayoutPage {
+
+  @State space: number = 10;
+
+  build() {
+    Column({ space: this.space }) {
+      Text(`space:${this.space}`)
+      Row().width('90%')
+      Row().width('90%')
+      Row().width('90%')
+    }
+  }
+}
\ No newline at end of file
diff --git a/common_ui/src/main/ets/utils/ScreenUtil.ets b/common_ui/src/main/ets/utils/ScreenUtil.ets
new file mode 100644
index 0000000..25da2de
--- /dev/null
+++ b/common_ui/src/main/ets/utils/ScreenUtil.ets
@@ -0,0 +1,101 @@
+import window from '@ohos.window';
+
+export class ScreenUtil {
+  // TODO: 工具待抽离， key统一定义
+  static readonly isPortraitKey: string = "xy_screen_is_portrait";
+  private static instance: ScreenUtil;
+  public width: number = 0
+  public height: number = 0
+  public statusBarHeight: number = 0
+  public bottomSafeHeight: number = 0
+  public contentHeight: number = 0;
+
+  public layoutWidth: number = 0
+  public layoutHeight: number = 0
+
+
+  public static getInstance(): ScreenUtil {
+    if (!ScreenUtil.instance) {
+      ScreenUtil.instance = new ScreenUtil();
+    }
+    return ScreenUtil.instance;
+  }
+
+  initScreenSize(): void {
+    window.getLastWindow(getContext(this))
+      .then((windowClass: window.Window) => {
+        let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
+        let avoidArea = windowClass.getWindowAvoidArea(type);
+        this.bottomSafeHeight = px2vp(avoidArea.bottomRect.height); // 获取到导航条区域的高度
+        type = window.AvoidAreaType.TYPE_SYSTEM;
+        avoidArea = windowClass.getWindowAvoidArea(type);
+        this.statusBarHeight = px2vp(avoidArea.topRect.height);
+        this.width = px2vp(windowClass.getWindowProperties().windowRect.width);
+        this.height = px2vp(windowClass.getWindowProperties().windowRect.height);
+        this.layoutWidth = this.width;
+        this.layoutHeight = this.height - this.statusBarHeight - this.bottomSafeHeight;
+      })
+      .catch((error: Error) => {
+      })
+  }
+
+  setPreferredOrientation(orientation: window.Orientation): void {
+    window.getLastWindow(getContext(this))
+      .then((windowClass: window.Window) => {
+        windowClass.setPreferredOrientation(orientation);
+        AppStorage.setOrCreate(ScreenUtil.isPortraitKey, orientation == window.Orientation.PORTRAIT || orientation == window.Orientation.PORTRAIT_INVERTED);
+      })
+      .catch((error: Error) => {
+      })
+  }
+
+  setPreferredOrientationCallBack(orientation: window.Orientation, callback: ()=>void): void{
+    window.getLastWindow(getContext(this))
+      .then((windowClass: window.Window) => {
+        windowClass.setPreferredOrientation(orientation,callback);
+        AppStorage.setOrCreate(ScreenUtil.isPortraitKey, orientation == window.Orientation.PORTRAIT || orientation == window.Orientation.PORTRAIT_INVERTED);
+      })
+      .catch((error: Error) => {
+      })
+  }
+
+  setWindowLayoutFullScreen(isLayoutFullScreen: boolean): void {
+    window.getLastWindow(getContext(this))
+      .then((windowClass: window.Window) => {
+        windowClass.setWindowLayoutFullScreen(isLayoutFullScreen);
+        windowClass.setSpecificSystemBarEnabled('status', !isLayoutFullScreen);
+      })
+      .catch((error: Error) => {
+      })
+  }
+
+  setWindowSystemBarProperties(systemBarProperties: window.SystemBarProperties): void {
+    window.getLastWindow(getContext(this))
+      .then((windowClass: window.Window) => {
+        windowClass.setWindowSystemBarProperties(systemBarProperties, (err) => {
+          if (err.code) {
+            console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
+            return;
+          }
+          console.info('Succeeded in setting the system bar properties.');
+        });
+      })
+      .catch((error: Error) => {
+      })
+  }
+
+  setWindowSystemBarEnable(names:Array<'status' | 'navigation'>){
+    window.getLastWindow(getContext(this))
+      .then((windowClass: window.Window) => {
+        windowClass.setWindowSystemBarEnable(names, (err) => {
+          if (err.code) {
+            console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
+            return;
+          }
+          console.info('Succeeded in setting the system bar properties.');
+        });
+      })
+      .catch((error: Error) => {
+      })
+  }
+}
\ No newline at end of file