Skip to content

1.3 业务规范

在企业级后台系统中,业务逻辑往往复杂、层级多、交互密集。为了保证系统的可维护性与团队协作效率,我们需要在开发过程中遵循统一的业务实现规范。

本规范主要围绕应用结构设计和用户交互控制展开,帮助团队在开发过程中形成一致的编码习惯和设计思路。

一、应用结构

1. 分层架构设计

UI 层(View)

负责页面展示和用户交互,由 Vue/React 组件构成;

  • 页面组件存放在 views/*,对应具体路由;
  • 通用组件存放在 components/*,如表格、按钮、表单控件等;

逻辑层(ViewModel / Controller)

处理数据转换、状态管理、业务流程;

  • 使用 Pinia(Vue)或 Zustand(React)进行全局状态管理;
  • 避免多个组件之间直接共享状态,通过统一的状态中心通信;

服务层(Service)

封装 API 请求、本地存储、缓存处理;

  • 所有网络请求统一调用封装后的 service 方法;
  • 支持拦截器统一处理错误、加载状态、权限问题;

模型层(Model)

定义接口类型、数据结构;

  • TypeScript 接口统一存放于 types/ 或 models/ 目录;

示例目录结构

src/
├── views/
│   └── user/
│       ├── UserList.vue
│       └── UserDetail.vue
├── components/
│   └── common/
│       ├── DataGrid.vue
│       └── SearchBar.vue
├── services/
│   └── user.service.ts
├── types/
│   └── user.model.ts
├── store/
│   └── user.store.ts
└── router/
    └── user.routes.ts

2. 模块化开发模式

  • 按功能模块划分代码,如 userModule、orderModule;
  • 每个模块包含独立的组件、服务、路由、样式等资源;
  • 支持按需加载,提升首屏加载速度;
  • 公共模块抽取为 shared 目录,便于复用;

3. 路由配置策略

  • 路由与菜单绑定,支持动态加载;
  • 使用嵌套路由组织父子页面关系;
  • 路由守卫用于权限验证、登录跳转;
  • 路由路径命名清晰,如 /user/list、/order/detail/:id;

4. 状态管理策略

  • 使用 Pinia(Vue)或 Zustand(React)进行状态管理;
  • 明确状态变更流程(如 Action -> Mutation -> State);
  • 避免多个组件之间直接共享状态,通过统一的状态中心通信;
  • 对敏感状态(如用户信息、权限)做持久化处理;

5. 生命周期使用建议

  • 在组件/页面中合理使用生命周期钩子函数;

    • Vue:onMounted、onBeforeUnmount
    • React:useEffect
  • 避免在生命周期中执行过多副作用,建议封装为可复用的服务方法;

  • 清理副作用(如定时器、事件监听)在组件销毁前完成;

二、用户交互

1. 表单交互规范

  • 所有表单字段应有明确的 label 和 placeholder;
  • 必填项使用红色星号标记;
  • 表单提交前进行校验,错误提示定位到对应字段;
  • 异步校验(如用户名是否已存在)应给出 loading 提示;
  • 表单提交成功后给予明确反馈(如 Toast 提示、跳转页面);

2. 按钮行为规范

  • 主操作按钮突出显示(如蓝色背景);
  • 辅助操作按钮采用次级样式(如灰色边框按钮);
  • 禁用状态下按钮不可点击,并给出视觉反馈;
  • 提交类按钮在请求期间显示 loading 状态,防止重复提交;

3. 错误与提示机制

  • 页面异常统一展示“空状态”或“错误页”(如 404、网络异常);
  • 后端接口错误码统一处理,避免裸露原始错误信息;
  • 用户操作失败时,提示应具备指导性(如“请检查网络后重试”);
  • 成功提示使用绿色图标 + 简短文案,如“保存成功”;

4. 加载与过渡体验

  • 首屏内容优先渲染,非关键资源延迟加载;
  • 数据请求期间展示骨架屏或 Loading 动画;
  • 页面切换使用平滑动画,增强用户体验;
  • 大型操作(如文件上传、复杂计算)应提供进度条;

5. 权限与引导机制

  • 根据用户角色动态控制菜单和按钮的可见性;
  • 初次使用功能时提供引导提示(如 Tooltip、弹窗);
  • 敏感操作(如删除、清空)应二次确认,避免误操作;
  • 所有权限受限的操作加灰处理,并提示无权限原因;

6. 数据交互规范

  • 分页、排序、筛选等交互统一设计;
  • 所有分页组件支持自定义每页数量;
  • 表格列支持排序、筛选、固定列等功能;
  • 所有异步数据操作提供 loading 状态反馈;

7. 日志与埋点机制

  • 所有关键操作添加埋点,如按钮点击、页面进入、接口失败;
  • 日志记录统一格式,如 clicksubmit
  • 上线前移除调试日志输出;
  • 所有埋点上报统一封装,便于后期接入分析平台;