My-Notes

015.前端可配置化系统设计：从硬编码到可视化配置

6分钟阅读

出处：掘金

原作者：金泽宸

可配置系统是前端工程架构抽象能力的巅峰体现，让功能由工程师驱动，逐步转向由产品和数据平台驱动

写在前面

可配置系统是从前端工程师到架构师的分水岭。 硬编码功能能跑，配置化功能能扩展，平台化功能能赚钱

从业务角度看，你应该具备这样的能力：

  • 不用改代码就能上线新活动、新表单、新逻辑
  • 通过 JSON、平台配置、低代码表达业务需求
  • 通用模块 + 配置渲染，即搭即用

本篇我们将设计一套表单/表格/页面/按钮等可配置系统的前端架构方案，并覆盖渲染引擎、配置结构、动态组件加载与平台对接等核心内容

常见可配置化场景

模块可配置内容
表单字段列表、校验规则、联动逻辑、默认值
表格列字段、格式化规则、操作按钮、嵌套配置
页面区块布局、Tab、组件嵌套、内容模块
按钮权限控制、事件类型、弹窗配置
活动运营时间规则、奖品配置、条件组合表达式

配置驱动渲染的核心思想

把逻辑写死在 JS 里，不如让配置表达逻辑，让系统表达场景

设计一套结构如下的 JSON 配置：

{
  "type": "form",
  "fields": [
    {
      "type": "input",
      "label": "用户名",
      "field": "username",
      "required": true
    },
    {
      "type": "select",
      "label": "角色",
      "field": "role",
      "options": [
        { "label": "管理员", "value": "admin" },
        { "label": "普通用户", "value": "user" }
      ]
    }
  ]
}

传入组件：<DynamicForm :config="formConfig" /> 前端动态渲染 UI，并接入事件、校验、接口等逻辑

统一组件渲染引擎设计

// schema 类型定义（核心）
interface ConfigSchema {
  type: 'form' | 'table' | 'page'
  fields?: FieldSchema[]
  columns?: ColumnSchema[]
  layout?: LayoutSchema[]
}

组件映射表：

const componentMap = {
  input: InputField,
  select: SelectField,
  table: DynamicTable,
  form: DynamicForm,
  page: PageRenderer,
}

渲染器封装：

<component :is="componentMap[schema.type]" v-bind="schema" />

平台化配置系统对接建议

后台配置管理：

  • 配置 JSON 存入数据库（关联业务类型/版本）
  • 页面加载时通过接口获取配置项：
const config = await fetchConfig('user-create-form')

渲染方式：

<ConfigRenderer :config="config" />

配置中支持联动/权限/表达式

能力实现方式
字段联动showWhen: (formModel) => formModel.role === 'admin'
条件判断visible: "role == 'admin' && status == 'active'"
权限控制permission: 'user.create'，配合 v-permission 实现
动态值注入使用变量模板："label": "欢迎{{user.name}}"

搭配 @vueuse/core 的 evaluateExpression()、lodash.template 实现表达式解析

配置字段样例（支持功能扩展）

{
  type: 'select',
  field: 'status',
  label: '状态',
  required: true,
  options: [
    { label: '启用', value: 'active' },
    { label: '停用', value: 'disabled' }
  ],
  disabledWhen: (model) => model.role !== 'admin'
}

平台编辑器建议（后期拓展）

模块功能
拖拽区拖入组件、修改属性
属性区表单配置字段编辑
JSON 模式支持直接修改 Schema
预览模式右侧实时渲染
发布/保存JSON 存入数据库，可设版本

搭配 lowcode-engine、form-builder-vue 可快速实现前端低代码配置器

配置系统中的抽象思维

原业务配置抽象
创建用户页面表单 Schema + 提交按钮组件
商品列表页表格组件 + columns 配置
活动编辑页面页面布局 Schema + 表单嵌套
公共弹窗弹窗组件 + type/config 渲染具体组件

可配置化的关键不是写死功能，而是提供足够通用的 UI 容器 + 渲染引擎 + 插槽

常见陷阱与解决方案

问题建议
配置项太多太乱分层设计：字段层 → 表单层 → 页面层
动态值注入太灵活限制字段表达式语法，仅支持特定变量
过于依赖 JS 逻辑配置只控制结构和 UI，逻辑用插件注入
多端配置复用困难统一配置协议，组件库适配不同端

落地建议（适用于企业级系统）

  1. 所有业务页面结构、字段、操作尽量抽象为 Schema
  2. 表单 + 表格配置可共用字段抽象类型
  3. 配置支持后端拉取、动态切换、版本管理
  4. 用户操作记录/日志接入埋点系统
  5. 平台维护配置时建议增加：
    • 配置校验器
    • 配置版本快照
    • 权限限制（谁能编辑、发布）

关系图谱