From d22299e01b925463952714451e4d463e1522b5fc Mon Sep 17 00:00:00 2001 From: skycurtain Date: Wed, 6 Aug 2025 22:38:50 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AE=80=E5=8C=96=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/datax-designlib-config.ts | 3 +-- src/datax-screen-config.ts | 33 +++++++++------------------------ 2 files changed, 10 insertions(+), 26 deletions(-) diff --git a/src/datax-designlib-config.ts b/src/datax-designlib-config.ts index 077711a..eb72c4f 100644 --- a/src/datax-designlib-config.ts +++ b/src/datax-designlib-config.ts @@ -8,8 +8,7 @@ interface DesignTemplate { description?: string; // 模板描述 previewImage?: string; // 模板预览图 // 模板包含的组件 - dataComponents: ScreenDesignModeConfig["dataComponents"]; - feedbackComponents: ScreenDesignModeConfig["feedbackComponents"]; + components: ScreenDesignModeConfig["components"]; // 模板包含的分组信息 groups: ScreenDesignModeConfig["groups"]; // 模板可能依赖的变量 diff --git a/src/datax-screen-config.ts b/src/datax-screen-config.ts index 77cc270..7b1c796 100644 --- a/src/datax-screen-config.ts +++ b/src/datax-screen-config.ts @@ -1,5 +1,4 @@ // 大屏设计时的配置，可以被导出/导入 -// 由于设计了反馈组件，因此大屏需要携带id字段 export interface ScreenDesignModeConfig { id: string; // 大屏样式 @@ -9,16 +8,19 @@ export interface ScreenDesignModeConfig { background: string; stretchMode: string; // 拉伸模式 }; - // 数据组件配置 + // 组件配置 // 可以支持组件包含子组件 - dataComponents: Array<{ + // 可以设计对话框和悬浮窗组件，例如它们的type分别为 Modal 和 FloatingPanel， + // 当在物料区的图层编辑器中点击编辑该组件时，会打开一个新的屏幕设计器，物料区中加载子组件。 + components: Array<{ id: string; // 组件id（唯一） type: string; // 组件类型 name: string; // 组件名称（可由用户定义） groupId?: string; // 组件所在分组ID（如果存在） - zIndex?: number; // 组件在分组中的层级 - parentId?: string; // 组件的父组件ID（如果存在） - children: ScreenDesignModeConfig["dataComponents"]; // 子组件 + parentId?: string; // 组件的父组件ID（如果存在），没有parentId的组件称为顶层组件 + // 当多个顶层组件成组时，组件的层级会被修改，也就是说分组并不是组件层级的参考系，组件的层级永远只与大屏和父组件有关 + zIndex?: number; // 组件在大屏/父组件中的层级 + children: Array; // 子组件id // 设计时属性，运行时会忽略 design: { hidden: boolean; @@ -115,7 +117,7 @@ export interface ScreenDesignModeConfig { // 进阶场景：全局变量可以定时请求数据，并配置“当数据更新时”事件， // 对应的交互行为是使某个分组下的组件更新数据，这些组件也同时配置了数据源为该全局变量， // 进而达到降低请求量的目的。 - // 在选择下游交互组件时，应当是“分组-组件”的级联选择 + // (在选择下游交互组件时，应当是“分组-组件”的级联选择) variables: Array<{ id: string; name: string; @@ -142,25 +144,8 @@ export interface ScreenDesignModeConfig { name: string; payload: string; // (data: any, variables: any) => Promise }>; - // 反馈组件配置 - // 可以认为反馈组件也是一个大屏，不过反馈组件在设计时不会直接显示到大屏上，而是在图层面板中会有“数据组件”、“反馈组件”等多个Tab， - // “反馈组件”Tab面板中会显示所有的反馈组件，当用户点击某个反馈组件时，会进入一个新的大屏设计器（反馈组件设计器）， - // 用户可以在反馈组件设计器中设计反馈组件的样式和行为。 - // 反馈组件设计器中也会有一个“保存”按钮，用户可以点击该按钮将设计好的反馈组件保存到当前大屏中。 - feedbackComponents: Array<{ - id: string; - name: string; - style: ScreenDesignModeConfig['style']; - dataComponents: ScreenDesignModeConfig['dataComponents']; - feedbackComponents: ScreenDesignModeConfig['feedbackComponents']; // 是否允许反馈组件中包含反馈组件，即实现类似多对话框的效果 - }>; } -// 组件的分类： -// 1. 数据组件：大屏中的组件 -// 2. 控制组件：大屏中的悬浮组件，可拖拽，贴边时可隐藏，比如一个控制面版用于操作摄像机/录像机等设备 -// 3. 反馈组件：弹窗（全局，带遮罩） - export interface ScreenPreviewModeConfig { } export interface ScreenPublishModeConfig { }