区块与页面模板块模板和页面模板构成了 VTJ 用于创建可复用 UI 组件和完整页面布局的抽象层。该系统使开发者能够设计、管理和分发预构建的 UI 解决方案支持本地块管理和远程模板市场的集成。模板系统架构模板系统通过分层架构运行该架构连接了设计器界面、核心引擎和远程市场服务。这种架构支持双向流动模板可以从市场安装到本地块本地块也可以被设计、引用或从插件库获取。块模板概述块模板是可复用的 UI 组件在 VTJ 中存在于三个抽象级别。每个块由BlockFile接口表示包含元数据和 DSL 内容通过ProjectModel管理并实例化为BlockModel实例。块文件结构块文件包含定义其身份和来源的基本元数据interface BlockFile { type: FileType; // block id: string; // 唯一标识符 name: string; // 块名称 title: string; // 显示标题 category?: string; // 分组类别 market?: MarketInstallInfo; // 市场安装信息 fromType?: Schema | UrlSchema | Plugin; preset?: boolean; // 是否为预设插件 urls?: string; // Plugin/UrlSchema 的资源 URL library?: string; // 插件库名称 dsl?: BlockSchema; // 块 DSL 内容 }fromType属性决定了块内容的来源和管理方式。块创建后此字段不可更改以确保内容来源的完整性。块类型及其特性VTJ 支持三种不同的块类型每种类型服务于开发工作流中的不同用例。类型描述URL 格式可编辑用例Schema在 VTJ 设计器内设计的块无是从头创建的自定义组件UrlSchema从外部 JSON 引用的块单个 JSON URL是通过 CDN 或外部存储共享的块Plugin来自插件库的块多个 (.css,.js) URL否除非非预设第三方组件库类型区别会影响块的渲染、编辑和分发方式。标记为preset: true的插件块无法编辑或删除以保护第三方组件的完整性。块模式结构块的实际内容通过BlockSchema定义其中包括组件定义、状态管理和生命周期钩子。该模式支持 Vue 的 Composition API 模式包括响应式状态、计算属性、侦听器、生命周期钩子以及通过inject属性进行依赖注入。页面模板页面模板将块的概念扩展到完整的页面布局通过扩展BlockFile的PageFile接口支持路由、导航和页面级配置。页面文件扩展页面继承所有块属性同时添加页面特定配置interface PageFile extends BlockFile { dir?: boolean; // 目录与页面 layout?: boolean; // 布局页面标志 icon?: string; // 菜单图标 children?: PageFile[]; // 目录的子页面 mask?: boolean; // 在主模板内 hidden?: boolean; // 从菜单隐藏 raw?: boolean; // 源代码页面非低代码 pure?: boolean; // 纯页面标志 cache?: boolean; // 启用页面缓存 meta?: Recordstring, any; // 路由元数据 needLogin?: boolean; // UniApp 登录要求 style?: Recordstring, any; // UniApp 窗口配置 }这些属性支持页面级配置包括路由、导航菜单生成、缓存策略和平台特定行为。模板市场集成VTJ 提供了一个远程模板市场系统支持跨项目发现、安装和管理预构建的模板。模板数据模型来自市场的模板遵循TemplateDto结构interface TemplateDto { id: string; // 模板 ID name: string; // 模板名称 label: string; // 显示标签 category: string; // 类别分组 author: string; // 作者标识符 userId: string; // 用户 ID cover: string; // 封面图片 URL vip?: boolean; // VIP 标志 share?: boolean; // 共享标志 }模板按作者所有权用户的模板与共享模板和类别组织支持个性化浏览和发现。模板安装流程安装模板涉及从远程市场获取 DSL 并将其与当前页面或块配置合并。安装过程保留当前文件的身份ID 和名称同时用模板 DSL 替换内容确保现有文件引用保持完整。设计器中的块管理设计器提供了一个全面的块小部件支持块的创建、编辑、搜索和拖放操作。块小部件功能块小部件通过有组织的 UI 支持几个关键操作块按类别分组带有可折叠的部分显示计数徽章并支持对名称和标题进行关键词搜索。块创建配置创建新块需要通过对话框表单配置基本属性属性必填描述验证fromType是块来源类型Schema/UrlSchema/Plugin创建后禁用name是块标识符英文驼峰式命名正则模式验证title是显示标题用户友好的文本library条件插件库名称仅 Plugin 类型需要urls条件资源 URLPlugin/UrlSchema 类型需要文件上传器category否分组类别带有过滤/创建选项的选择名称字段使用正则验证NAME_REGEX以确保代码生成使用正确的标识符格式。提示块名称必须遵循驼峰式命名约定并根据现有块名称进行验证以防止重复。createEmtpyModel函数默认创建一个带有fromType: Schema的新模板为新块奠定基础。设计器中的模板管理模板小部件提供市场访问具有分类、过滤和安装功能。模板组织模板通过选项卡式界面组织将用户拥有的模板与共享模板分开isOwner函数根据用户 ID 和共享状态确定编辑/删除权限确保用户只能管理自己的非共享模板。模板安装要求模板安装需要身份验证并遵循权限模型条件操作用户体验未登录显示登录确认带有登录按钮的“模板需要登录”对话框已登录模板可用安装模板“模板已加载”成功消息已登录模板不可用错误通知“模板未发布版本”错误警报模板安装到页面更新页面 DSL当前页面内容被模板替换安装过程使用engine.onSaveBlockFileFinish确保文件修改后安全更新状态。核心实现模式理解底层的实现模式可以有效地扩展和定制模板系统。块模型生命周期BlockModel通过事件驱动更新管理块状态更新方法中的silent参数控制是否发出更改事件允许批量修改而不触发响应式级联。状态管理方法BlockModel 为块功能的不同方面提供细粒度的状态操作方法// 函数管理 (methods, computed, lifeCycles) setFunction(type, name, value, silent); removeFunction(type, name, silent); // 状态管理 setState(name, value, silent); removeState(name, silent); // 侦听器管理 setWatch(watch, silent); removeWatch(watch, silent); // Props, Emits, Slots setProp(prop, silent); removeProp(prop, silent); setEmit(emit, silent); removeEmit(emit, silent); setSlot(slot, silent); removeSlot(slot, silent);除非传递silent: true否则每个方法都会触发EVENT_BLOCK_CHANGE从而实现对响应式的细粒度控制。项目模型集成ProjectModel作为块和页面的中央注册表提供 CRUD 操作和验证// 块操作 createBlock(block: BlockFile, silent: boolean) updateBlock(block: BlockFile, silent: boolean) cloneBlock(block: BlockFile, silent: boolean) removeBlock(id: string, silent: boolean) existBlockName(name: string, excludes: string[]): boolean // 页面操作 (扩展块) createPage(page: PageFile, parentId?: string, silent: boolean) updatePage(page: PageFile, silent: boolean) clonePage(page: PageFile, parentId?: string, silent: boolean) removePage(id: string, silent: boolean) existPageName(name: string, excludes: string[]): booleanisPageFile类型守卫区分页面文件和块文件实现类型安全操作。提示ProjectModel 在project.blocks数组中维护块引用并通过existBlockName和existPageName方法提供验证防止项目结构中的命名冲突。高级模板功能VTJ 的模板系统支持复杂组件架构的高级功能。依赖注入块可以通过inject数组声明依赖启用组合模式interface BlockInject { name: string; // 注入键 from?: string | JSExpression; // 源表达式 default?: JSONValue | JSExpression; // 默认值 }这使块能够从父上下文接收服务、工具或配置。插槽定义块可以定义带有类型参数的命名插槽以进行内容投影interface BlockSlot { name: string; // 插槽标识符 params: string[]; // 作用域插槽的参数名称 }插槽支持灵活的内容组合同时通过参数声明保持类型安全。事件发出块通过emits数组声明自定义事件以与父组件通信interface BlockEmit { name: string; // 事件名称 params: string[]; // 参数类型 }事件定义支持具有 TypeScript 感知的事件处理和文档生成。集成点模板系统与多个 VTJ 子系统集成以提供全面的功能。设计器集成设计器提供用于块和模板管理的小部件面板Blocks Widget支持 CRUD 操作的本地块管理Templates Widget市场模板浏览和安装Drag Drop块可以直接拖放到设计画布上Context Menu右键单击操作用于编辑、复制和移除渲染器集成块通过 VTJ 渲染器在运行时渲染支持Property Binding通过表达式进行动态属性绑定Event Handling事件发出和父组件通信Slot Composition命名和作用域插槽渲染State Management带有侦听器和计算属性的响应式状态渲染器解释BlockSchema以生成具有完整 Composition API 支持的 Vue 组件。代码生成集成块通过代码生成器生成 Vue SFC 代码产生Component DefinitionProps、emits、expose 声明Setup Function状态、方法、计算属性、侦听器Template转换为 Vue 模板语法的节点Style来自块模式的 CSS 内容Script生命周期钩子和依赖注入最佳实践块设计指南单一职责设计块以实现专注的、可复用的功能类型安全使用显式类型声明 props 和 emits文档使用有意义的标题和描述分类使用 category 属性对相关块进行分组版本控制使用__VERSION__进行模板版本跟踪模板组织类别结构使用分层类别以提高可发现性封面图片为模板提供清晰的预览图片文档在模板描述中包含使用说明版本管理在不同模板版本之间保持向后兼容性性能考虑懒加载对大型外部块库使用UrlSchema代码分割将复杂的块拆分为更小的可复用单元资源优化最小化 Plugin 块中的 CSS 和 JS 资源下一步要加深您对 VTJ 模板系统及相关概念的理解探索 Material Schema Configuration 以了解详细的组件属性定义了解 Creating Custom Material Components 以构建可复用组件查看 DSL to Vue Code Generation 以了解块如何转换为运行时代码研究 Engine API Reference 以进行编程块操作检查 Project Structure and File Organization 以了解布局策略参考资料官方文档https://vtj.pro/在线平台https://app.vtj.pro/开源仓库https://gitee.com/newgateway/vtj