一、拍完照片之后事情才刚开始朋友开了一家摄影工作室主要做人像写真和商业拍摄。团队不大店长、摄影师、修图师各一人。听起来分工明确但我在他办公室坐了半小时就发现了问题。客户打电话来问进度店长先打开 Excel 查订单状态再打开网盘看照片有没有上传最后微信问摄影师「那天拍的怎么样了」。一个简单的问题要翻三套系统才能回答。摄影订单不像普通商品。客户预约后要排拍摄时间拍完要选片选完要修图最后才是交付。每个阶段对应不同的人在处理——摄影师关注拍摄安排修图师关注待处理素材店长需要知道哪些订单卡在了哪个环节。我想做一个订单页面让每一笔拍摄都能看到当前阶段用真实作品缩略图和订单数据把从预约到交付的流程讲清楚。二、我先按客户的拍摄流程来设计订单状态我定义为六个阶段每个阶段对应一个实际的业务动作。状态之间不是简单的「已完成」标记而是一套流转逻辑待预约客户意向确认但还没确定拍摄时间已排期日期定了摄影师知道哪天该拍什么拍摄完成相片已拍完进入选片环节选片中客户筛选喜欢的照片选取待修图的原片修图中修图师按单处理完成后标记已交付客户收到精修照片和实物产品订单关闭首页我不打算用传统的数据表格。摄影工作室的产品就是照片本身页面应该像作品集一样展示。我设想的是用几张大图卡展示最近的订单卡片上标注客户、拍摄日期和当前进度右上角用细线进度条表示完成度。三、这次我让智能引导先搭业务骨架我打开 IDEA选中飞算 JavaAI 的「智能引导」功能开始输入需求。飞算 JavaAI 的智能引导分五步走第一步确认需求。插件自动拆解了我的需求识别出三个角色店主、摄影师、修图师列出了从客户管理到订单流转、再到报表统计的完整功能清单。第二步接口与模型设计。系统生成了核心实体定义——客户Client、订单Order、套餐Package、照片Photo、修图任务RetouchTask以及它们之间的关联关系。第三步表结构设计。DDL 自动生成包含了订单状态枚举、外键关联索引和时间戳字段。针对订单状态流转自动设计了一个合理的状态机覆盖了从待预约到已交付的完整路径。第四步生成计划。插件列出了代码生成计划——路由结构、组件树、数据层划分、前后端接口契约。第五步源码生成。进度条走到 100%完整的 Vue 3 前端工程生成完毕可以直接导出运行。四、我把后台做成了作品集代码生成完成后我按照自己的设计要求做了几件事。4.1 登录视觉效果拉满4.2 工作台店长的一屏总览登录后进入工作台。顶部六个指标卡展示核心数据总订单数、进行中订单、本月营收、客户总数、待付定金的订单和今日拍摄场次。左侧是订单状态分布图右侧是最近订单列表。底部是一条完整的订单阶段时间轴每条线上标注了该阶段的订单数量。店长打开一屏就能判断「今天该催谁」。4.3 订单详情时间线驱动的进度透明点击任意订单进入详情页。左侧是作品照片缩略图网格右侧是订单信息和操作时间线。时间线上的每个节点记录了操作人、操作内容和时间——比如「2026-06-22 09:00 张摄影 完成拍摄上传 80 张」。客户问进度时店长可以直接截图发送不需要翻文件夹。4.4 选片大图网格 底部状态栏选片是摄影订单独有的环节。我在选片管理页设计了大图网格展示模式客户可以直观地浏览缩略图并标记「已选」。底部固定状态栏显示「已选 N 张」的实时计数。4.5 角色视角摄影师看排期修图师看任务系统为不同角色设计了不同的首页焦点。摄影师打开「拍摄排期」日历视图上标注了每天的拍摄安排。修图师打开「修图进度」看到的是按优先级排列的待处理和进行中任务。五、核心页面背后的设计意图做这个系统的时候我反复想了一个问题摄影订单管理系统和普通的 CRM 到底有什么区别答案是摄影的核心资产是照片不是字段。所以订单详情页没有做密集的表单布局而是把照片缩略图放在左侧主体位置订单信息放在右侧作为辅助。首页不做数据密集的表格而是用作品卡片和进度时间线来叙事。我还特别设计了选片交互。普通的「打勾」太机械摄影工作室选片本身就是客户和摄影师共同参与的重要环节大图展示 实时计数选片数量能让这个环节在线上也保留仪式感。另外时间线的设计也是关键。不是简单记录状态变更而是记录了每一步的操作人、操作内容和时间。这样客户问进度时店长不是回答「修图中」而是「李修图正在处理预计后天完成已经修了 8 张」。六、人机协作骨架由 AI 生成灵魂由开发者注入回顾整个过程飞算 JavaAI 在三个环节贡献最大工程骨架搭建从空目录到完整的 Vue 3 前端架构路由、状态管理、数据层智能引导一次性生成省掉了我大半天的脚手架搭建时间。Mock 数据填充自动生成贴合摄影业务场景的模拟数据包括订单流转状态、客户信息、作品照片关联让我可以立即进入页面交互调试。状态机设计订单从「待预约」到「已交付」的六阶段流转AI 自动建模的枚举和状态转换逻辑基本可以直接用。但我自己还是做了几件 AI 替代不了的事视觉风格定义黑金 Editorial Portfolio 的配色和质感需要理解摄影行业的品牌调性才能选对选片交互设计大图网格 实时计数 底部状态栏这不是 CRUD而是业务场景的深度理解时间线的事件粒度记录操作人、内容和时间这一层信息密度是店长真正需要的不是简单的「状态已更新」角色视角差异化摄影师看日历、修图师看任务看板、店长看工作台总览——数据相同但呈现方式因角色而异写代码的脚手架可以交给 AI但理解业务、设计交互、打磨细节这些才是开发者真正的价值。#飞算JavaAI炫技赛 #AI编程 #Java开发 #Vue3 #摄影工作室 #技术分享