移动端案例详解：基于 smardaten 实现 OA 系统

需求背景

在当今快节奏的工作环境中，移动办公已成为企业提升运营效率和响应能力的重要方式。传统 OA 系统虽然能够满足基本的办公需求，但其 PC 端导向的设计难以适应移动场景下即时性、便捷性的操作要求。员工需要随时随地处理考勤、审批、报销等事务，管理者也期望能够实时掌握工作流状态并快速决策。然而，原生移动应用开发又面临周期长、成本高、更新迭代慢的普遍难题，无法高效响应企业移动办公需求。

smardaten 数据驱动的企业级 AI 原生开发平台，官方提供了软件工程智能体 SWE Agent，将生成式 AI 贯穿整个软件开发生命周期，使得软件开发更快、更容易、更智能化，帮助企业高效打造功能完善、体验流畅的移动端 OA 系统，提升运营效率和创新能力。

移动端能力介绍

• 生成式 AI 技术

￮ 智能生成应用：通过智能开发助手，只需使用自然语言描述需求，AI 助手即可自动完成需求分析、架构设计，并生成可运行的应用，并且支持携带测试数据。

￮ 智能生成与优化表单/页面：描述所需表单，AI 助手可自动生成包含字段的表单组件。还可通过指令对已有表单进行“重新布局”等优化操作。

￮ 智能数据资产创建：描述表单字段后，系统能自动生成对应的数据模型并完成数据库建表。

• 移动端专项配置

￮ 一体式开发模式：支持 PC 端与移动端一体化开发，在 PC 端利用 AI 智能助手快速生成表单/列表/资产，都可以在移动端进行复用。

￮ 丰富的移动端组件：平台提供大量移动端专用组件，如底部导航、轮播图、卡片菜单等，同时也提供画布等工具，支持灵活的界面设计。

￮ 核心页面模块化搭建：首页、工作台、个人中心等核心页面可通过组件快速配置。

▪ 首页：可灵活配置顶部导航、搜索栏、轮播图、快捷菜单、信息展示区等，并通过变量和逻辑控制实现数据的动态筛选与展示；

▪ 工作台：可直接使用内置的工作台组件，该组件已默认集成“待我处理”、“我发起的”等核心事务类别，实现审批事务的一站式处理；

▪ 个人中心：利用用户信息组件和列表菜单组件，快速配置个人信息展示和功能入口，如“我的请假”、“我的报销”等。

1. SWE Agent

1.1 智能生成应用

在 smardaten 工作台中，无需从零开始搭建应用。用户只需一键唤起平台右下角的 【智能生成助手】 ，输入 OA 系统所需的功能模块描述，例如“生成一个包含考勤、审批、差旅报销等功能的 OA 系统”。

AI 助手会自动解析需求，并实时展示从需求分析、架构设计到功能实现的完整生成进度。

生成完毕后，勾选“携带测试数据”选项，再点击“应用”按钮，系统将自动完成应用初始化并进入配置界面，为后续开发奠定了坚实基础。

1.2 智能生成表单

考勤管理部分已经包含了考勤打卡、统计和请假管理等三个页面，如果我们还需要再构建一个补考申请的表单，同样可以借助 AI 能力快速实现。只需在【应用助手】中输入指令“生成一个补卡申请的表单”。

系统便会自动分析并生成包含相应字段的完整表单布局，无需手动拖拽组件，显著节省了开发时间。

1.3 智能生成资产

表单生成后，需要创建对应的数据资产。继续向【应用助手】描述表单包含的字段，系统能自动根据字段的中文名称生成对应的英文字段并完成建表。

用户可以预览资产表结构是否符合需求，并进行微调。整个过程仅需几分钟，即可将资产表保存到指定的数据库中，实现了数据模型的快速构建。

1.4 智能表单优化

进入表单后，可以针对表单组件的排列布局进行优化。

右下角唤醒【表单助手】，输入“重新布局”指令，系统会自动重新调整，让界面展示更直观。

2. 移动端搭建

PC 端搭建完成后，我们一键切换移动端，实现一体化开发！

2.1 业务流程配置

在左侧我们新增移动端的页面，插入表单组件，用于请假申请的表单搭建。

进入表单配置页，直接复用 PC 端创建的表单，系统会自动插入表单组件并进行数据绑定。

移动端的业务流程配置直观简便。以“请假申请”审批流为例，在表单中点击“绑定业务流”，即可进入可视化流程设计界面。首先，使用用户节点配置领导角色进行审批，并启用“部门隔离”功能，确保领导仅能审批本部门及子部门的申请

接着，配置“同意”和“拒绝”按钮，并设置审批结果自动抄送回申请人，一个简单的审批流程便在短时间内配置完成。

2.2 表单/列表搭建

完成表单和流程的搭建后，我们直接基于该表单快速生成请假申请列表。

在列表中，隐藏编辑和删除按钮，并添加查询条件。

在移动端应用中包含了“首页”、“工作台”和“我的”这三个导航页面。在首页中设定了请假申请、新闻发布等快捷入口，由于当前只存在列表页面，所以还需要依此创建新闻发布、工时填报和报销申请的表单页。

最后请假申请的页面，由于涉及到业务流程发起，需要使用发起组件绑定请假申请的业务流。

“我的”页面是用户的个人中心，会包含我的请假、我的工时和我的报销三个快捷入口。点击之后需要进入到对应的数据列表页。

同时列表页需完成数据权限的配置，实现数据的隔离。根据创建人进行筛选，只展示当前用户的信息。

2.3 首页页面配置

移动端首页是功能聚合与信息展示的核心。配置过程充分运用了平台组件与画布的自由度：

顶部区域：利用布局和应用画布组件构建标题栏；添加“通知”按钮并配置其点击事件，跳转至消息通知页面；插入移动端的“扫码”组件。

搜索栏：使用“输入框”组件，并将用户输入内容关联至变量，作为新闻列表的过滤参数。

轮播图：从移动端专属组件库中直接插入“轮播图”组件，优化样式并上传图片即可。

快捷菜单：使用“卡片菜单”组件或更自由的“画布”组件，配置各类功能入口，并绑定跳转页面。

猜你要办区：使用“横向画布卡片”组件，配置展示样式，接着将图片、标题、介绍、和跳转链接组件与实际资产进行绑定，后续只需修改资产中的数据，即可快速修改该区域的内容。

新闻展示区：使用“页签组件”划分资讯类别，结合“画布列表”展示新闻。

为了实现列表数据的筛选和搜索，需要完成数据权限规则设定。定义两个变量，分别用于接收“新闻类型”和“搜索关键词”。在数据权限中，让“新闻类型”字段必须与“新闻类型变量”匹配；同时，让“新闻内容”字段支持与“搜索关键词变量”的模糊匹配。

目前所有页签下的内容还是一样的。别担心，我们只需回到页签组件，在交互一栏为其添加点击事件，当用户点击某个页签时，利用操作变量的节点，就将这个页签的标题赋予给“新闻类型”变量。

同时还需考虑，在首页加载完成后，热门咨询页签下方的列表需要只展示热门咨询的内容。所以在交互中，添加组件加载完成时的事件，配置逻辑控制，同样的使用操作变量节点，将新闻类型变量赋予一个热门咨询的固定值。

底部导航区：直接使用移动端一栏提供的“底部导航”组件，设定名称和图标，并绑定页面。

最终效果展示：

2.4 工作台页面配置

“工作台”页面是处理待办事务的中心。配置非常方便，直接使用平台提供的“工作台组件”，该组件已默认集成“待我处理”、“我发起的”和“抄送我的”等核心事务区，无需额外开发，即可实现审批流程的一站式处理与跟踪。

最终效果展示：

2.5 个人中心页面配置

“我的”页面作为个人中心，配置清晰简洁。首先是用户信息，使用“用户信息组件”展示个人信息。

功能菜单：利用“列表菜单”组件，关联已有页面，配置“我的报销”、“我的请假”、“我的工时”的入口。最后，添加“退出登录”按钮，即可完成个人中心的搭建。

最终效果展示：

应用价值

通过 smardaten 平台智能化的开发能力，主要实现了两大核心价值：

• 智能开发-降低门槛，释放创造力：开发过程中利用多种 AI 智能助手，以自然语言描述需求，可自动完成应用、表单、数据资产的生成，减少人工操作，无需专业代码能力，从而降低开发门槛。

• 高效开发-缩短周期，提升落地效率：PC 端与移动端一体式开发，表单、列表、数据资产等成果直接复用，避免跨端重复开发。同时，依托移动端专属组件与模块化搭建能力，核心页面（首页、工作台等）可快速组装，从而简化关键环节配置，缩短系统上线周期。