H5-Dooring可视化编辑器核心架构

H5-Dooring可视化编辑器采用分层解耦的设计理念，通过模块化、组件化的方式构建了一个高度可扩展的编辑器系统。整个架构围绕数据驱动、组件动态加载、状态管理三大核心思想展开，采用经典的四层架构设计确保各层职责清晰、耦合度低。

编辑器整体架构设计思路

H5-Dooring可视化编辑器的整体架构设计采用了分层解耦的设计理念，通过模块化、组件化的方式构建了一个高度可扩展的编辑器系统。整个架构围绕数据驱动、组件动态加载、状态管理三大核心思想展开。

核心架构分层设计

H5-Dooring采用经典的四层架构设计，确保各层职责清晰、耦合度低：

flowchart TD
    A[表现层 UI Layer] --> B[业务逻辑层 Service Layer]
    B --> C[数据管理层 State Layer]
    C --> D[基础设施层 Infrastructure Layer]
    
    A -.-> E[组件库 Materials]
    B -.-> F[动态引擎 DynamicEngine]
    C -.-> G[Schema管理系统]
    D -.-> H[工具函数 Utilities]

1. 动态组件加载机制

编辑器的核心创新在于动态组件加载系统，通过DynamicEngine组件实现按需加载：

// DynamicEngine.tsx 动态组件加载核心实现
const DynamicFunc = (type: string, componentsType: string) => {
  return dynamic({
    loader: async function() {
      const { default: Graph } = await import(
        `@/materials/${componentsType}/${type}`
      );
      const Component = Graph;
      return (props: DynamicType) => {
        const { config, isTpl } = props;
        return <Component {...config} isTpl={isTpl} />;
      };
    },
    loading: () => <Loading />
  });
};

这种设计实现了：

• 按需加载：只在需要时加载组件代码，优化性能
• 组件隔离：每个组件独立打包，互不影响
• 热插拔：支持动态添加和移除组件类型

2. Schema驱动的组件管理系统

编辑器采用Schema驱动的方式管理所有组件，通过统一的Schema定义规范组件行为：

// schema.ts 组件Schema聚合管理
import BasicSchema from "./base/schema";
import MediaSchema from "./media/schema";
import VisualSchema from "./visual/schema";
import ShopSchema from "./shop/schema";

const schema = {
  ...BasicSchema,
  ...MediaSchema,
  ...VisualSchema,
  ...ShopSchema
};

Schema管理系统的主要功能：

功能模块	职责描述	技术实现
组件定义	描述组件的基本属性、配置项	JSON Schema
类型系统	定义组件的数据类型和验证规则	TypeScript接口
配置管理	管理组件的可配置属性	配置对象合并
依赖管理	处理组件间的依赖关系	模块化导入

3. 数据流架构设计

编辑器采用单向数据流架构，确保状态管理的可预测性：

flowchart LR
    U[用户操作] --> A[Action创建]
    A --> R[Reducer处理]
    R --> S[State更新]
    S --> V[视图渲染]
    V --> U

数据流的具体实现层次：

视图层（View Layer）

• 负责UI渲染和用户交互
• 通过事件触发Action
• 接收State变化进行重渲染

状态管理层（State Management）

• 集中管理应用状态
• 提供状态读写接口
• 处理状态变更逻辑

持久化层（Persistence Layer）

• 本地存储管理
• 远程数据同步
• 版本控制管理

4. 插件化架构设计

编辑器支持插件化扩展，通过统一的插件接口实现功能扩展：

// 插件接口定义
interface EditorPlugin {
  name: string;
  version: string;
  install: (editor: EditorInstance) => void;
  uninstall: () => void;
  // 更多插件生命周期方法...
}

插件系统支持的功能扩展类型：

插件类型	功能描述	应用场景
组件插件	扩展新的可视化组件	添加业务特定组件
工具插件	提供新的编辑工具	代码生成、数据分析
主题插件	更改编辑器外观	品牌定制、暗色主题
导出插件	扩展导出格式支持	PDF、图片、视频导出

5. 性能优化策略

架构设计中融入了多项性能优化措施：

组件懒加载机制

• 动态导入组件代码
• 减少初始包体积
• 按需加载资源

状态更新优化

• 精细化的状态订阅
• 避免不必要的重渲染
• 使用React.memo优化组件

内存管理

• 组件实例池化
• 及时清理无用资源
• 避免内存泄漏

这种架构设计使得H5-Dooring具备了高度的可扩展性、可维护性和性能表现，为复杂的可视化编辑场景提供了坚实的技术基础。

Canvas画布渲染与布局管理

H5-Dooring可视化编辑器的核心在于其强大的Canvas画布渲染与布局管理系统。这套系统不仅实现了组件的自由拖拽和精准定位，还提供了丰富的交互体验和灵活的布局控制能力。本文将深入解析H5-Dooring在Canvas渲染与布局管理方面的技术实现。

网格布局系统架构

H5-Dooring采用基于React-Grid-Layout的网格布局系统，将画布划分为24列的网格体系，每个网格单元高度为2px，实现了精确的组件定位和尺寸控制。

flowchart TD
    A[用户拖拽操作] --> B[坐标转换处理]
    B --> C[网格坐标计算]
    C --> D[布局数据更新]
    D --> E[Canvas重新渲染]
    E --> F[实时视觉反馈]

网格布局的核心参数配置如下表所示：

参数	值	说明
列数(cols)	24	将画布水平分为24等份
行高(rowHeight)	2px	网格基础高度单位
边距(margin)	[0, 0]	网格间无间距
容器宽度(width)	动态计算	根据画布尺寸自适应

坐标转换与定位算法

当用户进行拖拽操作时，系统需要将屏幕坐标转换为网格坐标。这一转换过程通过以下算法实现：

// 坐标转换核心算法
const convertToGridCoordinates = (
  screenY: number, 
  canvasTop: number, 
  cellHeight: number = 2
): number => {
  const relativeY = screenY - canvasTop;
  return Math.ceil(relativeY / cellHeight);
};

该算法确保无论画布如何缩放，组件都能精准定位到正确的网格位置。

动态渲染引擎设计

H5-Dooring的动态渲染引擎采用懒加载和组件动态导入机制，显著提升了大型页面的渲染性能：

sequenceDiagram
    participant User
    participant DynamicEngine
    participant ComponentLoader
    participant GridLayout
    
    User->>DynamicEngine: 拖拽组件到画布
    DynamicEngine->>ComponentLoader: 动态导入组件模块
    ComponentLoader-->>DynamicEngine: 返回组件实例
    DynamicEngine->>GridLayout: 更新布局数据
    GridLayout-->>User: 实时渲染更新

动态引擎的核心实现基于React的dynamic导入和useMemo优化：

const DynamicFunc = (type: string, componentsType: string) => {
  return dynamic({
    loader: async function() {
      const { default: Graph } = await import(
        `@/materials/${componentsType}/${type}`
      );
      return (props: DynamicType) => {
        return <Component {...props.config} isTpl={props.isTpl} />;
      };
    },
    loading: () => <Loading />
  });
};

画布缩放与视口管理

H5-Dooring实现了完善的画布缩放系统，支持从50%到150%的多级缩放，同时保持布局的完整性和组件的相对位置：

缩放级别	缩放比例	适用场景
最小缩放	50%	整体布局预览
标准缩放	100%	正常编辑操作
放大查看	125%-150%	精细调整

缩放控制的数学模型基于CSS transform的scale变换：

const handleSlider = (type: boolean) => {
  if (type) {
    setScale(prev => +(prev + 0.1).toFixed(1));
  } else {
    setScale(prev => +(prev - 0.1).toFixed(1));
  }
};

布局数据状态管理

H5-Dooring采用Redux进行布局数据的状态管理，确保布局操作的撤销/重做功能：

interface PointDataItem {
  id: string;
  item: Record<string, any>;
  point: {
    i: string;      // 组件唯一标识
    x: number;      // 网格X坐标
    y: number;      // 网格Y坐标  
    w: number;      // 网格宽度
    h: number;      // 网格高度
    isBounded: boolean;
  };
  status: "inToCanvas" | string;
}

状态管理的数据流如下图所示：

stateDiagram-v2
    [*] --> Idle
    Idle --> Dragging: 开始拖拽
    Dragging --> Positioning: 释放组件
    Positioning --> Rendering: 坐标转换
    Rendering --> Updating: 布局更新
    Updating --> Idle: 完成更新
    
    Idle --> Resizing: 开始调整
    Resizing --> Updating: 尺寸更新

响应式布局适配

系统支持多种设备尺寸的布局适配，通过动态计算画布尺寸实现响应式设计：

useEffect(() => {
  const { width, height } = document
    .getElementById(canvasId)!
    .getBoundingClientRect();
  setCanvasRect([width, height]);
}, [canvasId]);

性能优化策略

H5-Dooring在Canvas渲染方面采用了多项性能优化措施：

1. 组件懒加载：只在需要时动态导入组件模块
2. 渲染节流：对频繁的布局更新操作进行节流处理
3. 记忆化优化：使用React.memo和useMemo避免不必要的重渲染
4. 虚拟化渲染：对大型画布采用可视区域渲染优化

// 节流函数实现
const throttle = (func: Function, delay: number) => {
  let timeoutId: NodeJS.Timeout;
  return (...args: any[]) => {
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(null, args);
        timeoutId = null as any;
      }, delay);
    }
  };
};

交互体验增强

系统提供了丰富的交互功能来提升用户体验：

• 右键上下文菜单：支持复制、删除等快捷操作
• 键盘快捷键：Command+C复制、Delete删除等
• 拖拽引导线：显示对齐辅助线
• 实时预览：缩放时保持布局完整性

// 右键菜单实现
const MyAwesomeMenu = () => (
  <Menu id="menu_id">
    <Item onClick={() => onConTextClick("copy")}>复制</Item>
    <Item onClick={() => onConTextClick("del")}>删除</Item>
  </Menu>
);

H5-Dooring的Canvas画布渲染与布局管理系统通过精心的架构设计和性能优化，为用户提供了流畅、直观的可视化编辑体验，成为低代码平台中的技术典范。

撤销重做与状态管理机制

H5-Dooring可视化编辑器采用基于Redux-undo的状态管理架构，实现了完整的撤销重做功能，为用户提供了流畅的操作体验和可靠的数据安全保障。

核心架构设计

H5-Dooring的状态管理系统建立在DVA + Redux-undo的组合之上，形成了分层式的状态管理架构：

graph TB
    A[用户操作] --> B[组件交互]
    B --> C[DVA Action]
    C --> D[Redux-undo中间件]
    D --> E[历史状态快照]
    D --> F[当前状态更新]
    E --> G[撤销栈]
    F --> H[重做栈]
    G --> I[撤销操作]
    H --> J[重做操作]
    I --> K[状态恢复]
    J --> K

Redux-undo集成实现

在src/app.tsx中，通过高阶reducer包装实现了撤销重做功能：

import undoable, { StateWithHistory } from "redux-undo";

export const dva = {
  config: {
    onReducer: (reducer: Reducer<any, AnyAction>) => {
      let undoReducer = undoable(reducer);
      return function(state: StateWithHistory<any>, action: AnyAction) {
        let newState = undoReducer(state, action);
        let router = newState.present.router || newState.present.routing;
        return { ...newState, router: router };
      };
    }
  }
};

状态操作API

编辑器提供了完整的CRUD操作接口，每个操作都会自动生成历史记录：

操作类型	Action名称	功能描述	历史记录
添加组件	addPointData	向画布添加新组件	✅ 自动记录
修改属性	modPointData	更新组件配置属性	✅ 自动记录
删除组件	delPointData	从画布移除组件	✅ 自动记录
复制组件	copyPointData	复制选中组件	✅ 自动记录
清空画布	clearAll	重置整个画布	✅ 自动记录

撤销重做控制器

在编辑器容器组件中，通过useMemo优化撤销重做处理器：

const redohandler = useMemo(() => {
  return () => {
    dispatch(ActionCreators.redo());
  };
}, [dispatch]);

const undohandler = useMemo(() => {
  return () => {
    dispatch(ActionCreators.undo());
  };
}, [dispatch]);

状态持久化机制

H5-Dooring采用localStorage进行状态持久化，确保刷新页面不丢失操作历史：

function overSave(name: string, data: any) {
  localStorage.setItem(name, JSON.stringify(data));
}

// 在每个reducer中自动调用持久化
reducers: {
  addPointData(state: any, { payload }: any) {
    let pointData = [...state.pointData, payload];
    overSave("userData", pointData); // 自动保存
    return { ...state, pointData, curPoint: payload };
  }
}

键盘快捷键支持

编辑器内置了键盘快捷键，提升操作效率：

subscriptions: {
  keyEvent({ dispatch, state }) {
    // 复制快捷键: ⌘+C / Ctrl+C
    key("⌘+c, ctrl+c", () => {
      dispatch({ type: "editorModal/keyboardCopyPointData" });
    });
    
    // 删除快捷键: Delete / Backspace
    key("delete, backspace", () => {
      dispatch({ type: "editorModal/keyboardDelPointData" });
    });
  }
}

状态数据结构

编辑器的核心状态数据结构采用扁平化设计：

interface EditorState {
  pointData: ComponentData[];    // 画布组件列表
  curPoint: ComponentData | null; // 当前选中组件
  history: StateWithHistory<any>; // 历史状态记录
}

interface ComponentData {
  id: string;           // 唯一标识（UUID生成）
  type: string;         // 组件类型
  item: ComponentItem;  // 组件配置
  status: string;       // 组件状态
}

interface ComponentItem {
  config: any;          // 组件配置对象
  editableEl: any[];    // 可编辑属性
}

操作流程时序

用户操作的完整时序流程如下：

sequenceDiagram
    participant User as 用户
    participant Component as 界面组件
    participant Action as DVA Action
    participant UndoMiddleware as Redux-undo
    participant Reducer as Model Reducer
    participant Storage as LocalStorage

    User->>Component: 执行操作（拖拽/配置）
    Component->>Action: dispatch(action)
    Action->>UndoMiddleware: 处理action
    UndoMiddleware->>Reducer: 执行状态变更
    Reducer->>Storage: 持久化状态
    Storage-->>Reducer: 保存完成
    Reducer-->>UndoMiddleware: 返回新状态
    UndoMiddleware-->>Action: 更新历史记录
    Action-->>Component: 渲染更新
    Component-->>User: 显示结果

性能优化策略

H5-Dooring在状态管理方面采用了多项性能优化措施：

1. 选择性持久化：只保存必要的组件数据，避免存储过大状态
2. 操作合并：对连续的同类型操作进行合并处理
3. 内存管理：合理设置历史记录栈深度，避免内存溢出
4. 懒加载：组件配置按需加载，减少初始状态体积

错误恢复机制

系统具备完善的错误恢复能力：

• 操作回滚：当操作出现异常时自动回滚到上一个稳定状态
• 数据校验：对持久化数据进行完整性校验
• 自动备份：定期自动备份用户操作数据
• 异常捕获：全局异常处理确保状态一致性

通过这套完整的撤销重做与状态管理机制，H5-Dooring为用户提供了稳定可靠的可视化编辑体验，确保每一步操作都可追溯、可恢复，大大提升了产品的可用性和用户信任度。

多页面管理与模板系统

H5-Dooring可视化编辑器的多页面管理与模板系统是其核心架构的重要组成部分，为用户提供了高效、灵活的页面组织和复用机制。该系统通过精心设计的架构和丰富的功能特性，让用户能够轻松管理多个H5页面，并利用模板系统快速创建专业级的营销页面。

页面管理架构设计

H5-Dooring采用基于Redux的状态管理架构来管理多页面数据，通过DVA框架实现了页面数据的统一管理和持久化存储。页面管理系统的核心架构如下：

flowchart TD
    A[页面管理器] --> B[页面列表存储]
    A --> C[当前页面状态]
    A --> D[页面操作处理器]
    
    B --> E[localStorage持久化]
    C --> F[Redux状态管理]
    D --> G[页面创建]
    D --> H[页面复制]
    D --> I[页面删除]
    D --> J[页面切换]
    
    E --> K[数据恢复机制]
    F --> L[实时状态同步]

页面数据通过localStorage进行持久化存储，确保用户在刷新页面或重新打开编辑器时能够恢复之前的工作状态。每个页面都包含完整的组件配置、样式设置和交互逻辑。

页面操作功能实现

系统提供了完整的页面操作功能集，包括：

页面创建与保存

// 页面创建逻辑
const newPage = () => {
  let prev = localStorage.getItem("myH5");
  try {
    localStorage.setItem(
      "myH5",
      JSON.stringify(prev ? [...Array.from(prev), pointData] : [pointData])
    );
  } catch (err) {
    console.error(err);
  }
  clearData();
};

// 页面保存逻辑
const handleSaveTpl = () => {
  confirm({
    title: "确定要保存吗？",
    content: (
      <div className={styles.saveForm}>
        <div className={styles.formIpt}>
          <span>模版名称：</span>
          <Input ref={iptRef} />
        </div>
      </div>
    ),
    onOk() {
      let name = iptRef.current!.state.value;
      req.post("/visible/tpl/save", { name, tpl: pointData });
    }
  });
};

页面复制与删除 系统支持完整的CRUD操作，用户可以通过直观的界面进行页面复制、删除和重命名操作。复制功能会生成具有新ID的页面副本，确保页面间的独立性。

模板系统架构

H5-Dooring的模板系统采用模块化设计，将组件模板分为多个类别，每个类别包含特定的功能组件：

模板类别	包含组件	主要用途
基础组件	文本、图片、列表、表单等	构建页面基础结构
媒体组件	视频、音频、地图、日历等	添加多媒体内容
可视化组件	图表、进度条、面积图等	数据可视化展示
营销组件	优惠券、卡片标签、专栏等	营销活动设计

每个组件模板都包含完整的配置定义：

// 文本组件模板定义
const template = {
  type: "Text",
  h: 20,
  displayName: "文本组件"
};

// 文本组件Schema配置
const Text: ITextSchema = {
  editData: [
    {
      key: "text",
      name: "文字",
      type: "Text"
    },
    {
      key: "color",
      name: "标题颜色",
      type: "Color"
    },
    {
      key: "fontSize",
      name: "字体大小",
      type: "Number"
    }
  ],
  config: {
    text: "我是文本",
    color: "rgba(60,60,60,1)",
    fontSize: 18,
    align: "center",
    lineHeight: 2
  }
};

模板导入导出机制

系统提供了完善的模板导入导出功能，支持JSON格式的模板数据交换：

// 模板导出功能
const downLoadJson = () => {
  const jsonStr = JSON.stringify(pointData);
  const blob = new Blob([jsonStr], { type: "text/plain;charset=utf-8" });
  saveAs(blob, "template.json");
};

// 模板导入功能
const uploadprops = {
  name: "file",
  showUploadList: false,
  beforeUpload(file, fileList) {
    let reader = new FileReader();
    reader.onload = function(e: Event) {
      let data = (e as any).target.result;
      importTpl && importTpl(JSON.parse(data));
    };
    reader.readAsText(file);
  }
};

状态管理与数据流

多页面管理系统的状态管理采用Redux架构，通过DVA模型实现数据的统一管理：

// 编辑器状态管理模型
export default {
  namespace: "editorModal",
  state: {
    pointData: JSON.parse(pointData),
    curPoint: null
  },
  reducers: {
    addPointData(state, { payload }) {
      let pointData = [...state.pointData, payload];
      overSave("userData", pointData);
      return { ...state, pointData, curPoint: payload };
    },
    modPointData(state, { payload }) {
      const { id } = payload;
      const pointData = state.pointData.map(item => {
        if (item.id === id) return payload;
        return { ...item };
      });
      overSave("userData", pointData);
      return { ...state, pointData, curPoint: payload };
    }
  }
};

页面预览与实时同步

系统支持实时页面预览功能，用户可以在编辑过程中随时查看页面效果：

// 页面预览功能
const toPreview = () => {
  localStorage.setItem("pointData", JSON.stringify(pointData));
  savePreview();
  setTimeout(() => {
    window.open(`/preview?tid=${props.location.query.tid}`);
  }, 600);
};

// 预览数据保存
const savePreview = () => {
  const { tid } = props.location.query || "";
  req.post("/visible/preview", { tid, tpl: pointData });
};

响应式设计与多设备支持

多页面管理系统支持响应式设计，能够适应不同设备的屏幕尺寸：

flowchart LR
    A[桌面端编辑] --> B[移动端预览]
    A --> C[平板端适配]
    B --> D[实时二维码生成]
    C --> E[自适应布局]
    
    D --> F[微信扫描预览]
    E --> G[多尺寸画布]

系统提供多种画布尺寸选择，用户可以根据目标设备类型调整页面布局，确保在各种设备上都能获得最佳的显示效果。

键盘快捷键支持

为了提高操作效率，系统实现了丰富的键盘快捷键支持：

// 键盘事件处理
subscriptions: {
  keyEvent({ dispatch, state }) {
    // 复制快捷键
    key("⌘+c, ctrl+c", () => {
      dispatch({ type: "editorModal/keyboardCopyPointData" });
    });
    // 删除快捷键
    key("delete, backspace", () => {
      dispatch({ type: "editorModal/keyboardDelPointData" });
    });
  }
}

数据持久化与恢复

系统采用localStorage进行数据持久化，确保用户数据的安全性和可恢复性：

// 数据持久化函数
function overSave(name, data) {
  localStorage.setItem(name, JSON.stringify(data));
}

// 数据初始化
const pointData = localStorage.getItem("userData") || "[]";
state: {
  pointData: JSON.parse(pointData),
  curPoint: null
}

这种设计保证了即使在浏览器刷新或意外关闭的情况下，用户的工作进度也能得到完整保存。

H5-Dooring的多页面管理与模板系统通过精心设计的架构和丰富的功能特性，为用户提供了高效、灵活的页面创作体验。系统不仅支持基本的页面管理操作，还提供了强大的模板复用机制，让用户能够快速创建专业级的H5页面，大大提高了工作效率和创作质量。

H5-Dooring可视化编辑器通过精心设计的核心架构、Canvas画布渲染与布局管理、撤销重做与状态管理机制以及多页面管理与模板系统，构建了一个功能完整、性能优越的可视化编辑平台。系统采用分层解耦的设计理念，支持动态组件加载、Schema驱动的组件管理、插件化扩展等先进特性，为用户提供了高效、灵活的可视化编辑体验。同时，通过完善的状态管理和数据持久化机制，确保了系统的稳定性和可靠性，为低代码平台的发展提供了有力的技术支撑。