企业官网建设流程全解析

一、拍完照片之后，事情才刚开始

朋友开了一家摄影工作室，主要做人像写真和商业拍摄。团队不大：店长、摄影师、修图师各一人。听起来分工明确，但我在他办公室坐了半小时就发现了问题。

客户打电话来问进度，店长先打开 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 在三个环节贡献最大：

1. 工程骨架搭建：从空目录到完整的 Vue 3 前端架构（路由、状态管理、数据层），智能引导一次性生成，省掉了我大半天的脚手架搭建时间。
2. Mock 数据填充：自动生成贴合摄影业务场景的模拟数据，包括订单流转状态、客户信息、作品照片关联，让我可以立即进入页面交互调试。
3. 状态机设计：订单从「待预约」到「已交付」的六阶段流转，AI 自动建模的枚举和状态转换逻辑基本可以直接用。
   但我自己还是做了几件 AI 替代不了的事：

• 视觉风格定义：黑金 Editorial Portfolio 的配色和质感，需要理解摄影行业的品牌调性才能选对
• 选片交互设计：大图网格 + 实时计数 + 底部状态栏，这不是 CRUD，而是业务场景的深度理解
• 时间线的事件粒度：记录操作人、内容和时间，这一层信息密度是店长真正需要的，不是简单的「状态已更新」
• 角色视角差异化：摄影师看日历、修图师看任务看板、店长看工作台总览——数据相同，但呈现方式因角色而异
  写代码的脚手架可以交给 AI，但理解业务、设计交互、打磨细节，这些才是开发者真正的价值。

#飞算JavaAI炫技赛 #AI编程 #Java开发 #Vue3 #摄影工作室 #技术分享