ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

#玩转灵基# 用灵基Build从0到1开发并部署员工宿舍管理系统

#玩转灵基# 用灵基Build从0到1开发并部署员工宿舍管理系统 摘要灵基Build通过组合kingdee-design原型设计和standalone-build全栈开发两个技能成功从零构建并部署了员工宿舍管理系统。实践覆盖设计、数据库、后端、前端到部署全链路生成7个功能模块、11张表、8个API端点验证了其具备独立完成通用型全栈应用开发的能力。一、应用场景及解决的痛点问题市面上有不少 AI 编程工具声称能“一句话生成应用”但实际效果参差不齐。我一直在关注一个问题灵基的 Build 能力到底能不能像其他 AI 工具一样从 0 到 1 完成一个通用型应用的设计、开发和部署为了验证这一点我选了一个有代表性的业务场景——员工宿舍管理系统。这个系统不算简单要覆盖房间床位管理、入住退宿办理、维修报修、水电费管理、人员台账、巡查安全检查等多个功能模块涉及前后端、数据库和部署配置是一个典型的全栈应用开发任务。传统方式下开发这样一个系统需要经历 UI 设计、前端开发、后端开发、数据库设计、部署配置等多个阶段每个阶段对应不同的角色和工具沟通和衔接成本高整体周期长。我想看看灵基能不能把这条链路一次跑通。二、实践过程【核心能力】本次实践组合使用了灵基 Build 下的两个技能- kingdee-design高精度原型设计技能负责 UI 原型生成- standalone-build全栈应用开发技能负责数据库设计、后端 API、前端增强和本地部署两个技能形成流水线协作前者输出原型后者基于原型完成全栈开发。【实现思路】整体思路是“先设计后开发”的两阶段推进第一阶段用 kingdee-design 生成完整高精度原型确认 UI 和功能范围第二阶段用 standalone-build 基于原型完成数据库设计、后端 API 开发、前端增强和本地部署。两个技能的输出衔接关系明确——原型阶段的 HTML/CSS/JS 三文件直接作为全栈开发阶段的前端基础。【关键步骤】1 原型设计用 kingdee-design 生成高精度原型调用 kingdee-design 技能后该技能先通过 5 个设计问题对齐需求是否有现成设计系统、需要覆盖哪些功能模块、准确度要求、使用终端及视觉风格。我选择了金蝶默认品牌色、7 个功能模块全选、完整高精度原型、桌面端 Web、金蝶企业蓝风格。技能根据回答进入“位置四问 系统规划”阶段确定了叙事角色数据 操作混合、观众距离1m 笔记本距离、视觉温度冷静、权威、专业、容量估算信息密集型等设计参数。图1kingdee-design 技能加载后5个设计问题对齐需求并确认设计参数的对话界面图2原型生成完成后的交付总览生成过程中技能自动发现并修复了几个问题onclick 属性中的引号冲突导致 JS 语法错误、stat-card 的 info 类名在 CSS 中未定义以及 utilities 页面缺少图表初始化。修复后通过 Node.js 语法检查和沙箱安全检查无 localStorage、fetch、eval 等禁止项。原型覆盖的 7 个功能模块模块核心内容概览看板4 张统计卡 4 个 ECharts 图表 最新动态 楼栋概览进度条房间管理楼栋-楼层树形导航 房间卡片网格颜色编码状态 床位明细入住退宿Tab 分类 申请表 审批操作可实际改变状态维修报修统计卡 工单列表 派工/完成操作可实际流转工单状态水电费用统计卡 楼栋月度费用柱状图 账单表 抄表记录表人员台账在住/退宿中/已退宿统计 可搜索筛选的人员名册表巡查检查巡查统计卡 巡查记录表 安全隐患登记表2 全栈开发用 standalone-build 完成数据库、后端和部署原型完成后我接着调用 standalone-build 技能要求基于原型完成整个应用系统的数据库设计MySQL、应用系统开发、本地部署。图3standalone-build 技能加载后技术方案规划和项目目录结构创建数据库设计阶段技能生成了 schema.sql包含 11 张表和 2 个视图表名说明关键字段buildings楼栋code, name, floors, rooms_per_floor, beds_per_roomrooms房间building_id(FK), room_number(UK), floor, capacity, statusbeds床位room_id(FK), bed_number, status, tenant_idtenants入住人员emp_id(UK), name, department, building/room/bed_id(FK)applications入住/退宿申请app_no(UK), type, status, assigned/current_room_idwork_orders维修工单order_no(UK), room_id(FK), priority, status, workerutility_bills水电费账单building_id(FK), month, water/elec/gas_usage, statusmeter_readings抄表记录building/room_id(FK), water/elec_readinginspections巡查记录inspection_no(UK), type, area, status, issues_counthazards安全隐患hazard_no(UK), level, status, report/resolved_dateactivities活动记录text, type此外还包含 v_room_detail 和 v_tenant_detail 两个视图均含有索引和外键约束。图4数据库 schema.sql 生成结果后端 API 阶段技能构建了 Express 主服务和 8 个 API 路由模块路由模块端点功能dashboardGET /api/dashboard/stats看板统计GET /api/dashboard/buildings楼栋概览GET /api/dashboard/activities最新动态buildingsGET /api/buildings楼栋列表roomsGET /api/rooms房间列表筛选楼栋/楼层/状态GET /api/rooms/:id房间详情含床位明细PUT /api/rooms/:id更新房间状态applicationsGET /api/applications申请列表POST /api/applications新增申请PUT /api/applications/:id/approve审批work-ordersGET /api/work-orders工单列表POST /api/work-orders新建工单PUT /api/work-orders/:id/dispatch派工PUT /api/work-orders/:id/complete完成utilitiesGET /api/utilities/bills账单列表GET /api/utilities/meter-readings抄表记录tenantsGET /api/tenants人员列表筛选部门/状态/关键词inspectionsGET /api/inspections巡查记录GET /api/inspections/hazards隐患列表POST /api/inspections新建巡查图5后端8个API路由模块全部构建完成前端增强阶段技能在原型基础上改造 main.js所有内联数据替换为 fetch API 异步加载保留原有 UI 和交互支持加载状态、错误提示、表单提交新增申请/工单/巡查、状态流转审批/派工/完成。部署阶段技能生成了 Dockerfile 和 docker-compose.yml同时提供本地启动脚本 start.bat并成功安装 npm 依赖及连接 MySQL 8.0。图6部署验证结果3 验证全系统完整性检查技能最终做了完整性验证逐项检查通过验证项结果MySQL 数据库初始化11 表 2 视图创建成功种子数据3 栋楼 / 280 间房 / 1240 床位 / 18 人员 / 8 工单 / 9 账单前端 HTML 加载页面正常返回前端 JS/CSS 加载API 连接代码 品牌样式正常8 个 API 端点全部返回 200 正确数据数据库连接MySQL 8.0 连接成功三、效果与价值【亮点与价值】•从 0 到 1 全链路覆盖一次实践跑通了“设计→数据库→后端→前端→部署”完整链路验证了灵基 Build 具备从零构建通用型应用的能力不局限于单一环节的代码生成•两技能流水线协作kingdee-design 输出原型、standalone-build 接力全栈开发两个技能之间有明确的输出衔接关系不是各做各的•真实可运行系统不是停留在代码片段层面而是完整部署到本地环境8 个 API 端点全部验证通过前端页面正常加载可以实际操作•业务功能完整7 个功能模块覆盖了宿舍管理的核心场景审批、派工、完成工单等操作能真实改变数据状态不是静态展示页【可量化数据】指标数据数据库表11 张表 2 个视图API 端点8 个模块覆盖 CRUD 和状态流转种子数据3 栋楼 / 280 间房 / 1240 床位 / 18 人员 / 8 工单 / 9 账单功能模块7 个概览看板、房间管理、入住退宿、维修报修、水电费用、人员台账、巡查检查验证结果8 个 API 端点全部返回 200 正确数据系统状态服务运行于 localhost:3001入住率 52.1%图7员工宿舍管理系统运行界面展示概览看板页面这次实践验证了一个判断灵基 Build 不只是“帮你写代码”而是能像其他 AI 开发工具一样独立完成一个通用型应用从设计到部署的全流程。区别在于灵基通过技能组合的方式拆解任务——设计技能负责原型全栈技能负责开发——每个技能有明确的职责边界衔接关系清晰。四、总结先设计后开发的两阶段方法论有效。这次实践并未一开始就编写代码而是先利用 kingdee-design 生成完整原型在确认 UI 和功能范围后再进入全栈开发阶段。原型阶段的 HTML/CSS/JS 直接作为全栈开发的前端基础避免了“边设计边开发”常见的返工。如果同事要做类似的全栈应用开发我会建议先跑原型技能对齐需求再跑全栈技能做实现。技能组合的流水线协作是灵基的差异化能力。单个 AI 工具生成代码片段并不稀奇但通过两个技能的流水线协作完成全链路开发即设计技能的输出直接作为开发技能的输入这种模式更接近真实的开发流程。关键在于技能之间有明确的输出衔接关系不是各做各的。这次实践中kingdee-design 生成的三文件HTML/CSS/JS被 standalone-build 直接接管并增强前端从模拟数据切换到真实 API 调用衔接过程没有断裂。这次实践验证了灵基 Build 的全栈开发能力边界。从设计原型到数据库设计11 表 2 视图、后端 API8 个路由模块、前端增强连接真实 API、本地部署Docker 启动脚本整条链路一次跑通。与其他 AI 编程工具相比灵基的差异在于通过技能组合拆解任务——每个技能有明确的职责边界技能之间有清晰的输出衔接而不是把所有事情塞进一次对话里。这种模式的好处是可控性强、中间产物可检查代价是用户需要理解每个技能的定位手动完成技能间的衔接指令。
返回列表