本文档涵盖了 VTJ 低代码平台的核心数据层，特别是管理项目结构、文件组织和状态管理的 ProjectModel 和 BlockModel 类。这些模型充当所有设计时作的中央数据存储，并为可视化设计人员的文件管理功能提供基础。

有关在运行时渲染和执行这些模型的信息，请参阅 Engine、Provider 和 Service Layer。有关从这些模型生成代码的详细信息，请参阅代码生成和解析管道 。

数据模型架构

project 和 block 模型形成一个分层数据结构，代表整个低代码 project 状态：

ProjectModel 类结构

ProjectModel 类用作管理项目状态的主要接口，并为对所有项目实体执行 CRUD 作提供方法：

核心属性

文件管理作

ProjectModel 提供了全面的文件管理功能：

事件驱动型架构

ProjectModel 为状态更改通知实现了一个全面的事件系统：

事件类型

事件流模式

文件类型系统

VTJ 管理两种具有不同特征的主要文件类型：

PageFile 结构

页面表示可导航的应用程序屏幕，可以按层次结构进行组织：

interface PageFile {
  id: string; // Unique identifier
  name: string; // Component name (PascalCase)
  title: string; // Display title
  type: 'page'; // File type marker
  dir?: boolean; // Directory flag
  children?: PageFile[]; // Child pages (for directories)
  dsl?: BlockSchema; // Design schema (null for directories)
  raw?: boolean; // Source code mode flag
  cache?: boolean; // Page caching
  hidden?: boolean; // Hide in navigation
  pure?: boolean; // Pure component mode
}

BlockFile 结构

区块是可重用的组件，可以通过多种方法创建：

interface BlockFile {
  id: string;
  name: string;
  title: string;
  type: 'block';
  fromType: 'Schema' | 'UrlSchema' | 'Plugin'; // Creation method
  dsl?: BlockSchema; // Design schema
  category?: string; // Organization category
  library?: string; // Plugin library name
  urls?: string; // External resource URLs
}

fromType 属性确定如何处理块：

• Schema ：通过可视化设计器创建
• UrlSchema：从外部 JSON 架构导入
• Plugin ：从外部 JavaScript/CSS 资源加载

与 Designer UI 集成

项目模型通过反应式钩子和 widget 组件与 designer 界面紧密集成：

UI 组件集成

UI 上下文中的文件操作

设计器小部件为文件作提供了用户友好的界面：

Pages 小组件作

// Page management actions
const onAction = async (action: any) => {
  const { name, modelValue } = action;
  const { data } = modelValue;

  switch (name) {
    case 'add':
      // Create new page/directory
      project.value?.createPage(pageData, parentId);
      break;
    case 'edit':
      // Update existing page
      project.value?.updatePage(pageData);
      break;
    case 'remove':
      // Delete page
      project.value?.removePage(data.id);
      break;
    case 'copy':
      // Clone page
      project.value?.clonePage(data, parentId);
      break;
    case 'saveToBlock':
      // Convert page to reusable block
      await project.value?.saveToBlock(data);
      break;
  }
};

区块管理界面

块小部件提供分类组织和拖放功能：

数据持久化和序列化

ProjectModel 为持久化和共享提供了序列化功能：

DSL 导出格式

toDsl(_version?: string): ProjectSchema {
  const attrs = ProjectModel.attrs.reduce((result, current) => {
    result[current] = (this as any)[current];
    return result;
  }, {} as Record<string, any>);

  // Clean DSL data for serialization
  if (attrs.pages) {
    attrs.pages = attrs.pages.map((page: PageFile) => ({
      ...page,
      dsl: undefined // Remove design schemas
    }));
  }

  return {
    __VTJ_PROJECT__: true,
    id: this.id,
    ...attrs
  } as ProjectSchema;
}

此方法创建适用于以下各项的可序列化表示形式：

• 项目文件存储
• 版本控制
• 模板发布
• 代码生成输入

状态管理生命周期

锁管理系统

ProjectModel 通过锁定机制包含协作编辑支持：

lock(id: string) {
  this.locked = id;
  // Emit change event
}

unlock(id: string) {
  if (id !== this.locked) return;
  this.locked = '';
  // Emit change event
}

该系统可防止在协作环境中进行并发修改，并与身份验证系统集成，以确保只有授权用户才能修改锁定的项目。

源码仓库

VTJ: 以AI驱动的Vue3前端低代码开发工具。内置低代码引擎、渲染器和代码生成器，支持Vue源码与低代码DSL双向转换，面向前端开发者，开箱即用。 无缝嵌入本地开发工程，不改变前端开发流程和编码习惯。