🚀🚀🚀🚀
鸿蒙生态为开发者提供海量的 HarmonyOS 模板/组件，助力开发效率原地起飞
★一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★
👉覆盖 20+行业，点击查看往期案例汇总贴，持续更新，点击收藏！一键三连！常看常新！
【第 11 期】商务办公 ·办公应用
一、 概述
1. 行业洞察
1) 行业诉求：
关注用户业务重点与痛点差异：针对不同规模、不同行业、不同职能的团队，提供适配其工作流特性的功能与服务，实现降本增效与协同敏捷的核心价值。
具备智能分析与流程自动化能力：基于 AI 与大模型技术实现自动化能力，包括：自动生成会议纪要、优化文档内容、一键生成演示文稿等内容生成，自动分析报表数据，生成可视化图表数据分析辅助等。
多端无缝协同与数据连贯能力：实现手机、平板、PC、Web 端的数据、文件与进度实时互通，确保工作流的连续性。
集成、安全与可扩展的生态能力：提供丰富的 API 和连接器，构建一体化的工作台。端到端的数据加密、精细化的权限管控、操作日志审计，保障企业核心数字资产安全。
2) 行业常用三方 SDK
说明：“以上三方库及链接仅为示例，三方库由三方开发者独立提供，以其官方内容为准”
深信服VPN SDK 天融信VPN SDK 腾讯微信SDK 网易云信IM SDK 融云IMLib 腾讯视频会议SDK 融云CallLib 高德地图SDK 契约锁物理用印 百度人脸识别SDK
2. 案例概览（下载模板）
基于以上行业分析，本期将介绍鸿蒙生态市场商务办公类行业模板——商务办公应用模板，为行业提供常用功能的开发案例，模板主要分打卡、待办、日程、我的四大模块。
Stage 开发模型 + 声明式 UI 开发范式。
分层架构设计+ 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件。
本模板已集成华为账号、地图、日历等服务，只需做少量配置和定制即可快速实现华为账号的登录、考勤打卡、待办和日程管理等功能。
模板主要页面及核心功能如下所示：
办公考勤模板
|-- 打卡
| |-- 打卡
| |-- 打卡记录查看
| |-- 快捷打卡设置
|-- 待办
| |-- 待处理列表
| | | └-- 搜索
| |-- 已处理列表
| | | └-- 搜索
| |-- 待办创建
| | | └-- 附件上传
| |-- 待办修改
| | |-- 待办删除
| | |-- 附件上传
| | └-- 子代办创建
|-- 日程
| |-- 搜索
| |-- 月日历视图
| |-- 周日历视图
| |-- 日程创建
| | | └-- 地图选点
| └-- 日程详情
| └-- 日程删除
| └-- 日程修改
| └-- 地图选点
└-- 我的
|-- 用户信息
└-- 关于我们
复制代码
二、 应用架构设计
1. 分层化模块设计
o 本实践支持直板机，为单 HAP 包形式，包含路由根节点、底部导航栏等。
o 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
o 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。
o 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为 HAR 包被上层业务组件引用。
o 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
o 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。
本模板详细工程结构可见工程结构章节。
2. 业务组件设计
为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。
三、 行业场景技术方案
1. 考勤打卡功能
1）场景说明
提供员工考勤打卡服务，支持自动定位、打卡状态管理、打卡记录查看等功能。
2）技术方案
2. 服务卡片支持
1）场景说明
提供快捷打卡服务卡片，支持在桌面直接查看打卡状态和快速打卡。
2）技术方案
3. 日历日程选择
1）场景说明
提供完整的日历视图，支持月视图/周视图切换、日程显示、日期选择等功能。
2）技术方案
使用 Flex+ForEach 动态渲染日期网格。
支通过 visibility 属性控制农历和标记点的显示。
集成PanGesture实现左右滑动切换月份/周。
点击日期触发 changeSelectDay 事件，更新选中状态。
四、 模板代码
1. 工程结构（下载模板）
详细代码结构如下所示：
office_attendance
|-commons // 公共层
| |-commonlib/src/main/ets // 公共工具模块(har)
| | |-constants
| | | CheckInStatus.ets // 登录状态常量
| | | CommonContants.ets // 公共常量
| | | CommonEnum.ets // 公共枚举
| | └-utils
| | | AccountUtil.ets // 账号管理工具
| | | BreakpointType.ets // 断点类型
| | | DataPreferencesUtils.ets // 本地存储工具
| | | DateUtil.ets // 日志工具
| | | FormatUtil.ets // 日历、图片等格式管理工具
| | | GlobalRegister.ets // 全局对象注册容器
| | | LocationUtil.ets // 定位管理工具
| | | Logger.ets // 日志管理工具
| | | PermissionStatus.ets // 权限状态工具
| | | RouterModule.ets // 路由管理类
| | | StringUtil.ets // 字符串工具
| | | VibratorUtil.ets // 打卡震动工具
| | | WindowUtil.ets // 窗口管理工具
| | |-viewmodel
| | | AppStorageData.ets // 应用公共数据类型
| | | MainEntryVM.ets // 路由工具
| |
| |-componentlib/src/main/ets // 公共组件模块(har)
| | └-components
| | | BlankBackground.ets // 弹框背景组件
| | | CalenderView.ets // 日历组件
| | | CustomDialog.ets // 弹框组件
| | | TitleBar.ets // 公共头组件
| | └-types
| | DateElement.ets // 年月日数据类型
| | DateTimeElement.ets // 年月日时分秒数据类型
| |
| └-network/src/main/ets // 网络模块(har)
| |-apis // 网络接口
| |-mocks // 数据mock
| |-models // 网络库封装
| └-types // 请求和响应类型
|
|-product // 应用层
| └-phone/src/main/ets // 主包(hap)
| |-constants
| | Constants.ets // 导航常量
| |-entryability
| | EntryAbility.ets // 应用入口页
| |-pages
| | Login.ets // 账号登录页面
| | MainEntry.ets // 主页面
| |-phoneformability
| | PhoneFormAbility.ets // 打卡卡片
| └-servicecard
| |-pages
| | AttendanceCard.ets // 考勤组件
| |-view
| | CardListComponent.ets // 考勤记录组件
| └-viewmodel
| CardListParameter.ets // 考勤记录参数
|
└-scenes // 特性场景层
|-account/src/main/ets // 账号场景组件（har）
| |-accountbinding
| | About.ets // 关于页面
| | LoginView.ets // 账号登录页
| | MineView.ets // 我的主页面
| └-api
| RequestProxy.ets // 登录接口代理对象
|-agency/src/main/ets // 账号绑定场景组件（har）
| |-agency // 常量
| | └-components
| | AgencyTaskCalender.ets // 待办时间设置组件
| | AttachUpload.ets // 待办附件上传组件
| | PlanTimeSetting.ets // 待办计划时间组件
| | TimeSelector.ets // 待办计划时间选择组件
| | AddAgencyTask.ets // 待办新增页面
| | AgencyTaskListItem.ets // 待办列表组件
| | EditAgencyTask.ets // 待办编辑页面
| | AgencyTaskView.ets // 待办主页面
| |-api // 待办接口代理
| └-types // interface类型定义
|-checkin/src/main/ets // 签到场景组件（har）
| |-api // 签到接口代理
| |-checkin
| | |-components
| | | CheckInComponent.ets // 签到组件
| | | CheckInHistory.ets // 签到历史组件
| | | CheckInHistoryItem.ets // 签到单行记录组件
| | | CheckInSettings.ets // 签到设置组件
| | | CheckInTimeDetail.ets // 签到详情组件
| | | CheckInTimeDetailItem.ets // 签到单条记录组件
| | └-util
| | CheckInChannelUtil.ets // 签到渠道工具
| | ServiceCardNotificationUtil.ets // 服务卡片通知工具
| | CheckInView.ets // 签到主页面
| └-types // interface类型定义
└-schedule/src/main/ets // 账号绑定场景组件（har）
|-api // 日程接口代理
|-constants // 常量
|-schedule
| └-components
| ReminderDialog.ets // 日程提醒组件
| ScheduleForm.ets // 日程新增/编辑表单组件
| ScheduleItem.ets // 日程记录卡片组件
| ScheduleTitle.ets // 日程头组件
| EditSchedule.ets // 日程编辑页面
| NewSchedule.ets // 日程新增页面
| ScheduleDetail.ets // 日程详情月面
| ScheduleView.ets // 日程主页面
|-types // interface类型定义
└-utils
ScheduleUtils.ets // 日程日历操作工具
复制代码
2. 关键代码解读
本篇代码非应用的全量代码，只包括应用的部分能力的关键代码。
1) 日历渲染逻辑
/@Builderexport struct CalenderView { build() { Column() { // 星期标题 Flex({ justifyContent: FlexAlign.SpaceBetween }) { ForEach(CommonConstants.WEEK_TITLE, (str: Resource, index: number) => { Text(str).fontSize(this.fontSize) }) } // 日期网格 Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.showDays.showDays, (weekDays: DateElement[]) => { Flex({ justifyContent: FlexAlign.SpaceBetween }) { ForEach(weekDays, (day: DateElement, index: number) => { Column() { Text(`${day.day}`) // 公历日期 Text(DateUtils.getCurrentLunarDayDesc(day)) // 农历日期 Column().visibility(this.isHasSchedule(day) ? Visibility.Visible : Visibility.None) } .onClick(() => { this.changeSelectDay(day); }) }) } }) } } }
复制代码
2) 打卡组件设计
@Componentexport struct CardListComponent { @Link checkInStatus: CheckInStatus | undefined; @Link cardListParameter: CardListParameter | undefined; build() { Column() { // 标题区域 Row() { Image(this.cardListParameter.logo) Text(this.cardListParameter.title) } // 自定义内容区域 List() { this.customBuilderParam(); } // 打卡按钮 Button({ type: ButtonType.Capsule }) { Row() { if (this.checkInStatus === CheckInStatus.NOT_STARTED) { Text($r('app.string.servicecard_button_tip')) } else if (this.checkInStatus === CheckInStatus.ON_GOING) { LoadingProgress() Text($r('app.string.servicecard_button_ongoing_tip')) } } } .onClick(() => { // 打卡逻辑 }) } }}
复制代码
3) 地理位置服务集成
LocationUtil.getLocationName().then((address: string | undefined) => { // 处理打卡逻辑});
核心代码：@ComponentV2export struct CheckInComponent { @Local checkInStatus: CheckInStatus = CheckInStatus.NOT_STARTED; build() { Stack() { // 打卡动画圆圈 Shape() { this.circleBuilder(170, 0.1) // 外圈 this.circleBuilder(160, 1.0) // 内圈 } // 打卡按钮交互 Column() .onClick(async () => { this.checkin(); }) } } private checkin() { this.checkInStatus = CheckInStatus.ON_GOING; this.circleAnimator?.play(); // 获取位置并打卡 LocationUtil.getLocationName().then((address) => { if (address) { this.checkInStatus = CheckInStatus.FINISHED; this.addCheckInDetail(address); } }); }}
复制代码
以上代码展示了商务笔记应用的核心功能实现，包括日历选择、打卡位置确认、服务卡片等关键技术方案。
3. 模板集成（下载模板）
本模板提供了两种代码集成方式，供开发者自由使用。
1) 整体集成
开发者可以选择直接基于模板工程开发自己的应用工程。
· 模板代码获取：
① 通过 IDE 插件创建模板工程，开发指导。
② 通过生态市场下载源码， 下载模板。
③ 通过开源仓访问源码，仓库地址。
2) 按需集成
若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。
① 通过 IDE 插件下载组件源码。开发指导
② 通过生态市场下载组件源码。 下载地址
以上是第 11 期“办公应用”行业优秀案例的内容，更多行业敬请期待~
欢迎下载使用行业模板“点击下载”，若您有体验和开发问题，或者迫不及待想了解 XX 行业的优秀案例，欢迎在评论区留言，小编会快马加鞭为您解答~
同时诚邀您添加下方二维码加入“组件模板活动社群”，精彩上新 &活动不错过！
👉 HarmonyOS 官方模板优秀案例系列持续更新， 点击查看往期案例汇总贴，点击收藏，方便查找！
👉【集成有礼】HarmonyOS 官方模板集成创新活动，挥洒创意，赢精美大礼！点击参加
👉【HarmonyOS 行业解决方案】为各行业鸿蒙应用提供全流程技术方案。点击查看
评论