Q1: 组件协议化设计思路详解

口头回答

组件协议化是我在这个低代码问卷平台中采用的核心设计思路，它的本质是通过统一的数据结构和接口规范，让不同的组件能够按照相同的协议进行注册、配置和管理。

简单来说，组件协议化就是为每个组件定义了一套标准的"身份证"，这个身份证包含了组件的类型、名称、唯一 ID，以及最重要的状态配置。通过这种方式，系统可以动态地识别、加载和管理各种不同类型的问卷组件，而不需要硬编码每个组件的具体实现。

这种设计的核心优势在于：

可扩展性：新增组件只需要按照协议定义配置文件，无需修改核心代码
可维护性：组件的业务逻辑和配置分离，便于管理和维护
动态性：支持运行时动态加载和渲染组件
一致性：所有组件都遵循相同的接口规范，降低了系统复杂度

具体实现细节

1. 组件协议的核心数据结构

在项目中，每个组件都遵循 SchemaType 接口定义：

// src/types/common.ts
export interface SchemaType {
  type: VueComType; // Vue组件实例
  name: MaterialComType; // 组件名称标识
  id: string; // 唯一ID
  status: OptionsStatus | TypeStatus; // 组件状态配置
}

2. 组件映射机制

通过 componentMap.ts 建立组件名称与实际 Vue 组件的映射关系：

// src/config/componentMap.ts
export const componentMap: ComponentMapType = {
  // 业务组件
  singleSelect: markRaw(SingleSelect),
  multiSelect: markRaw(MultiSelect),
  textInput: markRaw(TextInput),
  // 编辑组件
  titleEditor: markRaw(TitleEditor),
  optionsEditor: markRaw(OptionsEditor),
  // ...
};

这里使用 markRaw() 是为了避免 Vue 的响应式系统对组件实例进行深度监听，提升性能。

3. 默认状态配置系统

每个组件都有对应的默认状态配置，通过 defaultStatusMap.ts 进行管理：

// src/config/defaultStatus/defaultStatusMap.ts
export const defaultStatusMap = {
  singleSelect: singleSelectDefaultStatus,
  multiSelect: multiSelectDefaultStatus,
  textInput: textInputDefaultStatus,
  // ...
};

4. 组件状态协议设计

以单选题组件为例，其状态配置遵循严格的协议结构：

// src/config/defaultStatus/SingleSelect.ts
export default function () {
  return {
    type: markRaw(SingleSelect),
    name: "singleSelect",
    id: uuidV4(),
    status: {
      title: {
        id: uuidV4(),
        status: "单选默认标题",
        isShow: true,
        name: "titleEditor",
        editCom: markRaw(TitleEditor),
      },
      options: {
        id: uuidV4(),
        status: ["默认选项一", "默认选项二"],
        currentStatus: 0,
        isShow: true,
        name: "optionsEditor",
        editCom: markRaw(OptionsEditor),
      },
      // 更多状态配置...
    },
  };
}

每个状态项都包含：

id: 唯一标识
status: 实际数据值
isShow: 是否显示该编辑项
name: 对应的编辑组件名称
editCom: 编辑组件实例

5. 类型系统支撑

通过 TypeScript 的类型系统确保协议的严格性：

// src/types/editProps.ts
export interface BaseProps {
  id: string;
  name: string;
  isShow: boolean;
  editCom: VueComType;
}

export interface TextProps extends BaseProps {
  status: string;
}

export interface OptionsProps extends BaseProps {
  status: OptionStatusArr;
  currentStatus: number;
}

6. 动态组件渲染

在组件市场中，通过协议化配置实现动态渲染：

<!-- src/views/MaterialsView/Layout.vue -->
<template>
  <router-view v-slot="{ Component }">
    <component
      :is="Component"
      :status="currentCom.status"
      serialNum="1"
    ></component>
  </router-view>
</template>

7. 组件恢复机制

当从存储中读取组件数据时，通过 restoreComponentsStatus 函数恢复组件实例：

// src/utils/index.ts
export function restoreComponentsStatus(questionComs: SchemaType[]) {
  questionComs.forEach((item) => {
    // 业务组件还原
    item.type = componentMap[item.name];
    // 编辑组件还原
    for (let key in item.status) {
      const name = item.status[key].name as EditorComType;
      item.status[key].editCom = componentMap[name];
    }
  });
}

协议化设计的优势体现

统一的组件管理：所有组件都通过相同的接口进行管理，简化了系统架构
热插拔能力：新增组件只需要添加配置文件，无需修改核心逻辑
状态与视图分离：组件的状态配置与渲染逻辑完全分离，提高了可维护性
编辑器集成：每个状态项都对应特定的编辑组件，实现了"所见即所得"的编辑体验
数据持久化友好：协议化的数据结构便于序列化和存储，支持 IndexedDB 持久化