增加左边栏布局

entry/src/main/ets/pages/Index.ets

@@ -1,7 +1,7 @@
 import { hilog } from '@kit.PerformanceAnalysisKit';
 import { edgeColors, display, AppStorageV2 } from '@kit.ArkUI';
 import { TitleTab } from './TitleLayout/TitleTab'
-import { LeftSideTab } from './LeftSideTab'
+import { LeftSideTab } from './LeftSideLayout/LeftSideTab'
 import { ModelViewTab } from './modelViewTab'
 import { TitleColumnSub } from './TitleLayout/TitleColumnSub'
 import { MainWindowInfo } from './AppStorageV2Class'
@@ -12,7 +12,9 @@ const DOMAIN = 0x0000;
 @ComponentV2
 struct Index {
   @Local mwInfo: MainWindowInfo = AppStorageV2.connect<MainWindowInfo>(MainWindowInfo, () => new MainWindowInfo())!;
-
+  @Local startX:number=0;
+  @Local isDragging:boolean=false;
+  @Provider('panelWidth') panelWidth:number=this.mwInfo.mainWindowWidth * 0.15;
   build() {
     //OpenCAX主界面整体布局,采用多行布局
     Column({ space: 0 }) {
@@ -34,11 +36,33 @@ struct Index {
 
       Row() {
         //左侧边导航区
-        LeftSideTab().width("15%");
+        LeftSideTab()
+        // 拖拽手柄
+        Button()
+          //.width(1) // 手柄宽度
+          .height('100%')
+          .type(ButtonType.Normal)
+          .backgroundColor(Color.Gray)
+          .onMouse((event) => {
+            if(event.button==MouseButton.Left&&event.action==MouseAction.Press){
+              this.startX = event.screenX; // 记录起始坐标
+              this.isDragging = true;
+            }else if(event.action==MouseAction.Move&&this.isDragging){
+                // 计算新的宽度
+                let newWidth = this.panelWidth + (event.screenX - this.startX);
+                // 添加最小宽度限制
+                newWidth = Math.max(newWidth, 0);
+                this.panelWidth = newWidth;
+                // 更新起始坐标，实现连续拖动
+                this.startX = event.screenX;
+            }else if(event.action==MouseAction.Release){
+              this.isDragging = false;
+            }
+          })
         //中间操作区域
         Row() {
           ModelViewTab()
-        }.width('90%')
+        }.layoutWeight(1)
          .borderWidth(1)
          .align(Alignment.Center)
       }.width('100%')

entry/src/main/ets/pages/LeftSideLayout/LeftSideComponent.ets

@@ -0,0 +1,76 @@
+import { TreeController, TreeListener, TreeListenerManager, TreeListenType, NodeParam, TreeView, CallbackParam,
+  SymbolGlyphModifier} from '@kit.ArkUI';
+
+//@ComponentV2
+
+@Entry
+@ComponentV2
+export struct LeftSideComponent {
+  private treeController: TreeController = new TreeController();
+  private treeListener: TreeListener = TreeListenerManager.getInstance().getTreeListener();
+  @Local clickNodeId: number = 0;
+
+  aboutToDisappear(): void {
+    this.treeListener.off(TreeListenType.NODE_CLICK, undefined);
+    this.treeListener.off(TreeListenType.NODE_ADD, undefined);
+    this.treeListener.off(TreeListenType.NODE_DELETE, undefined);
+    this.treeListener.off(TreeListenType.NODE_MOVE, undefined);
+  }
+
+  @Builder menuBuilder1() {
+    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+      Text('新增').fontSize(16).width(100).height(30).textAlign(TextAlign.Center)
+        .onClick((event: ClickEvent) => {
+          this.treeController.addNode();
+        })
+      Divider()
+      Text('删除').fontSize(16).width(100).height(30).textAlign(TextAlign.Center)
+        .onClick((event: ClickEvent) => {
+          this.treeController.removeNode();
+        })
+      Divider()
+      Text('重命名').fontSize(16).width(100).height(30).textAlign(TextAlign.Center)
+        .onClick((event: ClickEvent) => {
+          this.treeController.modifyNode();
+        })
+    }.width(100).border({width: 1, color: 0x80808a, radius: '16dp'})
+  }
+
+  aboutToAppear(): void {
+    this.treeListener.on(TreeListenType.NODE_CLICK, (callbackParam: CallbackParam) => {
+      this.clickNodeId = callbackParam.currentNodeId;
+    })
+    this.treeListener.on(TreeListenType.NODE_ADD, (callbackParam: CallbackParam) => {
+      this.clickNodeId = callbackParam.currentNodeId;
+    })
+    this.treeListener.on(TreeListenType.NODE_DELETE, (callbackParam: CallbackParam) => {
+      this.clickNodeId = callbackParam.currentNodeId;
+    })
+    this.treeListener.once(TreeListenType.NODE_MOVE, (callbackParam: CallbackParam) => {
+      this.clickNodeId = callbackParam.currentNodeId;
+    })
+
+    let normalResource: Resource = $r('sys.symbol.house');
+    let selectedResource: Resource = $r('sys.symbol.car');
+    let editResource: Resource = $r('sys.symbol.calendar');
+    let nodeParam: NodeParam = { parentNodeId:-1, currentNodeId: 1, isFolder: true, icon: normalResource, selectedIcon: selectedResource,
+      editIcon: editResource, primaryTitle: "部件历史记录",
+      secondaryTitle: "0" };
+    this.treeController
+      .addNode(nodeParam)
+      .buildDone();
+    this.treeController.refreshNode(-1, "父节点", "子节点");
+  }
+
+  build() {
+    Column(){
+      SideBarContainer(SideBarContainerType.Embed)
+      {
+        TreeView({ treeController: this.treeController })
+          .bindMenu(this.menuBuilder1)
+      }
+      .focusable(true)
+      .showControlButton(false)
+      .showSideBar(true)
+    }
+  }}

entry/src/main/ets/pages/LeftSideLayout/LeftSideTab.ets

@@ -1,12 +1,15 @@
-import { TitleButton } from './LayoutInterface/Interface/ButtonInterface';
+import { TitleButton } from '../LayoutInterface/Interface/ButtonInterface';
-import {LeftSideBars} from './LayoutInterface/Layout/LeftSideBar'
+import {LeftSideBars} from '../LayoutInterface/Layout/LeftSideBar'
+import { AppStorageV2 } from '@kit.ArkUI';
+import { MainWindowInfo } from '../AppStorageV2Class';
+import {LeftSideComponent} from './LeftSideComponent'
 @ComponentV2
 export struct LeftSideTab {
-
+  @Local mwInfo: MainWindowInfo = AppStorageV2.connect<MainWindowInfo>(MainWindowInfo, () => new MainWindowInfo())!;
   private leftSideBarTabs: TabsController = new TabsController();
   @Local leftSideBarFocusIndex: number = 0;
   @Local isExpanded:boolean=true;
-  @Local leftWidth:number=0;
+  @Consumer('panelWidth') panelWidth:number=this.mwInfo.mainWindowWidth * 0.18;
 
   build() {
     Row() {
@@ -27,6 +30,11 @@ export struct LeftSideTab {
           .height(50)
           .onClick(()=>{
             this.isExpanded = !this.isExpanded;
+            if(this.isExpanded){
+              this.panelWidth=this.mwInfo.mainWindowWidth * 0.15;
+            }else{
+              this.panelWidth=0;
+            }
         }).margin({ top: 2,left:1,bottom:0,right:2})
         Scroll() {
           Flex({ direction: FlexDirection.Column}) {
@@ -61,21 +69,21 @@ export struct LeftSideTab {
         .scrollBar(BarState.Off)
         .width(50)
         .height('100%')
-      }
+      }.borderWidth(1)
+       .borderColor(Color.Grey)
       Column({space:1}){
         if (this.isExpanded) {
           Column() {
             Tabs({ barPosition: BarPosition.Start, controller: this.leftSideBarTabs }) {
               ForEach(LeftSideBars, (item: TitleButton, index: number) => {
                 TabContent() {
-                  Text(item.eName)
+                  LeftSideComponent();
-                    .fontSize(30)
                 }
               })
             }.barHeight(0)
           }
         }
-      }
+      }.width(this.panelWidth)
     }.width('auto')
   }
 }

entry/src/main/ets/pages/TitleLayout/TitleTab.ets

@@ -64,6 +64,12 @@ export struct TitleTab {
                 this.titleBarFocusIndex = index;
                 //this.currentModel=TitleData.mModels.get(index);
               })
+              .onAxisEvent((event?: AxisEvent) => {
+                if (event?.hasAxis(AxisType.VERTICAL_AXIS)) {
+                  this.titleBarTabs.changeIndex(index);
+                  this.titleBarFocusIndex = index;
+                }
+              })
           })
         }
       }
@@ -79,7 +85,7 @@ export struct TitleTab {
           }.align(Alignment.Start)
            .margin({ top: 0,left:0,bottom:0,right:0})
         })
-      }.scrollable(false)
+      }.scrollable(true)
        .barHeight(0)
        .margin({ top: 0,left:0,bottom:0,right:0})
        .barMode(BarMode.Fixed)

oh-package-lock.json5

@@ -6,10 +6,18 @@
   "lockfileVersion": 3,
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
   "specifiers": {
+    "@ibestservices/ibest-ui-v2@^1.1.2": "@ibestservices/ibest-ui-v2@1.1.2",
     "@ohos/hamock@1.0.0": "@ohos/hamock@1.0.0",
     "@ohos/hypium@1.0.25": "@ohos/hypium@1.0.25"
   },
   "packages": {
+    "@ibestservices/ibest-ui-v2@1.1.2": {
+      "name": "@ibestservices/ibest-ui-v2",
+      "version": "1.1.2",
+      "integrity": "sha512-aERFyF/g3IrK6vgEAKV3TD3dWOAUUxovdOcFQ76JGOR+cDPyTUC4NtZEc2VxdtyKXMyU5MmMFs4y/LCd6z/zcQ==",
+      "resolved": "https://ohpm.openharmony.cn/ohpm/@ibestservices/ibest-ui-v2/-/ibest-ui-v2-1.1.2.har",
+      "registryType": "ohpm"
+    },
     "@ohos/hamock@1.0.0": {
       "name": "@ohos/hamock",
       "version": "1.0.0",

oh-package.json5

@@ -2,9 +2,11 @@
   "modelVersion": "6.0.2",
   "description": "Please describe the basic information.",
   "dependencies": {
+    "@ibestservices/ibest-ui-v2": "^1.1.2"
   },
   "devDependencies": {
     "@ohos/hypium": "1.0.25",
     "@ohos/hamock": "1.0.0"
-  }
+  },
+  "dynamicDependencies": {}
 }