# agcit_lanxin_office_template

**Repository Path**: jiang_xiao_hao/agcit_lanxin_office_template

## Basic Information

- **Project Name**: agcit_lanxin_office_template
- **Description**: ArkTS 企业办公类模版
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2025-01-14
- **Last Updated**: 2026-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 1.介绍

本篇Codelab实现了移动办公类平台应用的基础框架，包含消息，通讯录，应用平台，我的,  Web Tab页。消息页是会话的列表数据展示，即时通讯的聊天会话会展示在该页面。通讯录是部门人事架构展示页面，支持多级部门的树形结构展示切换。应用平台支持加载和管理不同的H5页面，无缝迁移企业的H5办公产品，该模块使用独立的Ability打开。我的页面可通过数据添加自己的功能，如登录，个人信息，头像等。也可通过动态数据配置不同的办公类H5页在主Tab下。并且还集成了可定制的安全水印，便于管控软件使用，提升软件安全性。

手机效果如图所示：
### 强水印（样式、透明度均可自定义）
### 会话示例
![会话列表.jpg](./readme/2.jpg)

### 通讯录示例
![通讯录.jpg](./readme/3.jpg)

### 通讯录示例
![通讯录.jpg](./readme/4.jpg)

### 应用平台示例
![应用平台.jpg](./readme/5.jpg)

### 我的示例
![我的.jpg](./readme/6.jpg)


## 相关概念
[Ability跳转](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/uiability-intra-device-interaction-V5)
UIAbility是系统调度的最小单元。在设备内的功能模块之间跳转时，会涉及到启动特定的UIAbility，包括应用内的其他UIAbility、譬如本示例中的Webview，或者其他应用的UIAbility（例如启动三方支付UIAbility）。
[Tabs](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-tabs-V5)
通过Tabs组件可以在一个页面内快速实现视图内容的切换，譬如在本示例中，实现一个办公App各模块之间组件的切换。
[Canvas](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-drawing-customization-on-canvas-V5)
通过Canvas提供画布组件，可以自由的绘制想要的水印。
[Stack]层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。通过Stack实现全局的水印展示。


```c
我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。
```

#### 软件要求
- DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
- HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。

####硬件要求
- 设备类型：支持Harmony OS的华为手机。
- HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。

#### 环境搭建
安装DevEco Studio，详情请参考[下载](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-software-download-0000001507075446-V5?catalogVersion=V5)和[安装软件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-software-install-0000001558013317-V5?catalogVersion=V5)。
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，详情请参考[配置开发环境](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-environment-config-0000001507213638-V5?catalogVersion=V5)。
开发者可以参考以下链接，完成设备调试的相关配置：
[使用真机进行调试](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-debug-device-V5)

# 3.代码结构
```c
本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在源码下载中提供。
```

### 工程目录
```shell
├── README.md
├── AppScope
├── entry
│   ├── ets
│   │    ├── entryability
│   │    ├── entrybackupability
│   │    └── pages   
│   ├── module.json
│   │ 
│   └── resources
│
└── mainframe
       ├──ets
       │   ├── page   
       │   │     └── MainFramePage    // 外层封装框架组件
       │   │          
       │   ├── components   
       │   │      ├── mainPage
       │   │      │      └── MainNavWrapper     // 主页的基础页面框架 
       │   │      │    
       │   │      │                          
       │   │      ├── mainWindow
       │   │      │      ├── MessageWindow       //消息的Tab业务组件   
       │   │      │      ├── AddressBookWindow   //通讯录的Tab业务组件   
       │   │      │      ├── WorkBenchWindow     //工作台的Tab业务组件   
       │   │      │      ├── MineWindow          //我的Tab业务组件  
       │   │      │      └── WebviewWindow       //扩展屏Tab业务组件      
       │   │      │ 
       │   │      └── WatermarkDomain    // 控制水印的Domain      
       │   │
       │   ├── service
       │   │      └──  WebviewManager     // 应用打开独立UI进程的Ability的控制器  
       │   │
       │   ├── utils       // 常用方法定义
       │   │       
       │   └── viewmodels      // 组件使用的view-model      
       │ 
       └── resources 
```

# 4. 水印组件的具体使用
```typescript

@Entry({ routeName: 'MainFramePage' })
@Component
export struct MainFramePage {
  @Provide screenHeight: number = 0
  @Provide screenWidth: number = 0
  @Provide loginSessionId: string = noNetLoginSessionId
  @State vm: MainFrameVM = MainFrameVM.getInstance(this.loginSessionId)
  @State currentPageIndex: number = 0;
  @Provide safeAreaEdge: SafeAreaEdge[] = []

  aboutToAppear(): void {
    //  这里可以注册全局的事件，进行解耦的业务处理
  }

  onBackPress() {
    return true; // 首页禁止左滑退出
  }

  build() {
    Stack() {
      MainNavWrapper({
        vm: this.vm
      })
      // TODO 知识点，在根节点使用Stack，让水印浮在最上层
      this.WatermarkBuilder()
    }
    .onAreaChange((oldValue: Area, newValue: Area) => {
      // TODO 知识点，通过监控窗口尺寸变化，可以进行一多适配，动态更改Tabs的配置
      this.screenWidth = new Number(newValue.width).valueOf();
      this.screenHeight = new Number(newValue.height).valueOf();
      getContext().eventHub.emit("GLOBAL_AREA_SIZE_CHANGED", {
        width: this.screenWidth,
        height: this.screenHeight
      })
    })
  }

  
  @Builder
  WatermarkBuilder() {
    Canvas(watermarkCanvasContext)
      .width("100%")
      .height("100%")
      .hitTestBehavior(HitTestMode.Transparent)
      .onReady(() => {
        WatermarkDomain.getInstance(this.loginSessionId).initWatermark(watermarkCanvasContext)
      })
  }
}
```

# 5.总结
```c
您已经完成了本次Codelab的学习，并了解到以下知识点：

搭建一个办公常用的基础页面框架。
集成Webview，打开和管理H5应用的能力。
如何在App内集成管控水印
```