开发组件设计流程标准

文档编号: SYS-STD-ARCH-COMP-001
版本: 1.0
创建日期: 2026-03-08
作者: 架构师
状态: ✅ 已完成

1. 流程概述

1.1 目的

本文档定义System平台开发组件设计的标准化流程，包括前端组件设计和后端组件设计，确保组件设计的一致性、可复用性和可维护性。

1.2 适用范围

前端基础UI组件设计
前端业务组件设计
后端通用组件设计
工具类组件设计

1.3 流程目标

建立统一的组件设计规范
提高组件复用率，减少重复开发
确保组件质量和可维护性
形成完整的组件文档体系

2. 流程步骤

步骤1: 基础组件选型

目标: 确定基于哪些开源/商业组件进行封装和扩展

输入:

技术选型报告
项目需求分析
团队技术栈评估

活动:

前端组件选型
- UI组件库选择（Element Plus、Ant Design Vue等）
- 工具库选择（VueUse、Lodash等）
- 图标库选择
- 日期处理库选择
后端组件选型
- Web框架选择（Spring Boot）
- ORM框架选择（MyBatis Plus）
- 安全框架选择（Spring Security）
- 连接池选择（Druid）
- API文档工具选择（Knife4j）
封装策略确定
- 前端：继承扩展、组合封装、主题定制
- 后端：Starter封装、自动配置、注解驱动

输出:

组件选型清单
封装策略文档

验收标准:

[√] 组件选型符合项目需求
[√] 开源组件社区活跃
[√] 封装策略清晰可行

步骤2: 前端组件设计

目标: 设计前端基础UI组件和业务组件

输入:

组件选型清单
业务需求分析
UI设计稿

活动:

基础UI组件设计
- SysButton：权限按钮，支持权限控制和确认对话框
- SysTable：数据表格，支持分页、排序、筛选、权限控制
- SysForm：动态表单，支持多种组件类型和动态渲染
- SysSelect：下拉选择，支持数据字典和远程搜索
- SysDialog：对话框，支持全屏、拖拽、自适应
业务组件设计
- SysDeptTree：部门树，支持懒加载和多选
- SysUserSelect：用户选择器，支持远程搜索和部门筛选
- SysRoleSelect：角色选择器
- SysMenuTree：菜单树，用于权限分配
- SysDictSelect：字典选择，自动加载字典数据
- SysUpload：文件上传，支持多文件和图片预览
- SysIconSelect：图标选择器
- SysPermissionMatrix：权限矩阵，用于角色权限分配
组件规范定义
- 命名规范：大驼峰命名
- 样式规范：SCSS + BEM
- 文档规范：Props/Events/Slots说明

输出:

前端组件设计文档
组件API文档
组件使用示例

验收标准:

[√] 组件功能完整
[√] API设计合理
[√] 文档清晰完整

步骤3: 后端组件设计

目标: 设计后端通用组件和工具类

输入:

组件选型清单
业务需求分析
架构设计文档

活动:

统一响应封装
- Result响应对象：统一响应格式
- ResultCode状态码：业务状态码定义
- PageResult分页响应：分页数据封装
全局异常处理
- 异常体系设计：BusinessException、ValidationException等
- 全局异常处理器：统一异常处理
- 异常日志记录：区分日志级别
数据校验组件
- 自定义校验注解：@Phone、@IdCard、@EnumValue等
- 校验工具类：ValidationUtils
日志组件
- @OperationLog注解：操作日志记录
- 操作日志切面：AOP实现
- 异步日志保存：性能优化
工具类组件
- SecurityUtils：安全工具类
- IpUtils：IP地址工具类

输出:

后端组件设计文档
组件源码
组件使用文档

验收标准:

[√] 组件功能完整
[√] 代码质量高
[√] 文档清晰完整

步骤4: 组件评审

目标: 评审组件设计结果，确保设计质量

输入:

前端组件设计文档
后端组件设计文档
组件源码

活动:

前端组件评审
- 基础UI组件评审
- 业务组件评审
- 组件规范评审
后端组件评审
- 统一响应封装评审
- 全局异常处理评审
- 数据校验组件评审
- 日志组件评审
- 工具类组件评审
- 代码规范评审
问题处理
- 记录评审意见
- 制定修改计划
- 完成文档修订

输出:

开发组件评审记录
修订后的设计文档

验收标准:

[√] 评审意见完整记录
[√] 所有问题已解决
[√] 文档正式批准

3. 关键模板

3.1 前端组件模板

vue

<template>
  <el-button
    :type="type"
    :size="size"
    :disabled="disabled || !hasPermission"
    @click="handleClick"
  >
    <slot />
  </el-button>
</template>

<script setup>
import { computed } from 'vue'
import { usePermission } from '@/hooks/usePermission'

const props = defineProps({
  type: { type: String, default: 'default' },
  size: { type: String, default: 'default' },
  permission: { type: String, default: '' },
  confirm: { type: Boolean, default: false },
  confirmText: { type: String, default: '' }
})

const emit = defineEmits(['click'])

const { hasPermission } = usePermission(props.permission)

const handleClick = () => {
  if (props.confirm) {
    ElMessageBox.confirm(props.confirmText, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      emit('click')
    })
  } else {
    emit('click')
  }
}
</script>

3.2 后端组件模板

java

@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class Result<T> implements Serializable {
    
    private Integer code;
    private String message;
    private T data;
    private Long timestamp;
    private String requestId;
    
    public static <T> Result<T> success(T data) {
        return Result.<T>builder()
                .code(ResultCode.SUCCESS.getCode())
                .message(ResultCode.SUCCESS.getMessage())
                .data(data)
                .timestamp(System.currentTimeMillis())
                .requestId(MDC.get("traceId"))
                .build();
    }
    
    public static <T> Result<T> error(String message) {
        return Result.<T>builder()
                .code(ResultCode.ERROR.getCode())
                .message(message)
                .timestamp(System.currentTimeMillis())
                .requestId(MDC.get("traceId"))
                .build();
    }
}

3.3 组件选型清单模板

组件类型	开源组件	版本	用途
UI组件库	Element Plus	2.5.x	基础UI组件
ORM框架	MyBatis Plus	3.5.x	数据访问层
连接池	Druid	1.2.x	数据库连接池
API文档	Knife4j	4.4.x	API文档生成

4. 输出文件

序号	文件名称	文件编号	说明
1	前端组件设计	SYS-DES-ARCH-COMP-001	前端组件规范
2	后端组件设计	SYS-DES-ARCH-COMP-002	后端组件规范
3	开发组件评审记录	SYS-DES-ARCH-COMP-REV-001	评审结果和签字

5. 修订记录

版本	日期	作者	变更内容
1.0	2026-03-08	架构师	初始版本，定义开发组件设计流程标准

开发组件设计流程标准 ​

1. 流程概述 ​

1.1 目的 ​

1.2 适用范围 ​

1.3 流程目标 ​

2. 流程步骤 ​

步骤1: 基础组件选型 ​

步骤2: 前端组件设计 ​

步骤3: 后端组件设计 ​

步骤4: 组件评审 ​

3. 关键模板 ​

3.1 前端组件模板 ​

3.2 后端组件模板 ​

3.3 组件选型清单模板 ​

4. 输出文件 ​

5. 修订记录 ​

开发组件设计流程标准

1. 流程概述

1.1 目的

1.2 适用范围

1.3 流程目标

2. 流程步骤

步骤1: 基础组件选型

步骤2: 前端组件设计

步骤3: 后端组件设计

步骤4: 组件评审

3. 关键模板

3.1 前端组件模板

3.2 后端组件模板

3.3 组件选型清单模板

4. 输出文件

5. 修订记录