设计反馈组件类型

This commit is contained in:
2025-08-05 10:28:57 +08:00
parent cc1245d25a
commit 09d13339d8
2 changed files with 19 additions and 5 deletions

View File

@@ -8,7 +8,7 @@ interface DesignTemplate {
description?: string; // 模板描述 description?: string; // 模板描述
previewImage?: string; // 模板预览图 previewImage?: string; // 模板预览图
// 模板包含的组件 // 模板包含的组件
components: ScreenDesignTimeConfig["components"]; components: ScreenDesignTimeConfig["dataComponents"];
// 模板包含的分组信息 // 模板包含的分组信息
groups: ScreenDesignTimeConfig["groups"]; groups: ScreenDesignTimeConfig["groups"];
// 模板可能依赖的变量 // 模板可能依赖的变量

View File

@@ -1,5 +1,7 @@
// 大屏设计时的配置,可以被导出/导入 // 大屏设计时的配置,可以被导出/导入
// 由于设计了反馈组件因此大屏需要携带id字段
export interface ScreenDesignTimeConfig { export interface ScreenDesignTimeConfig {
id: string;
// 大屏样式 // 大屏样式
style: { style: {
width: number; width: number;
@@ -7,16 +9,16 @@ export interface ScreenDesignTimeConfig {
background: string; background: string;
stretchMode: string; // 拉伸模式 stretchMode: string; // 拉伸模式
}; };
// 组件配置 // 数据组件配置
// 可以支持组件包含子组件 // 可以支持组件包含子组件
components: Array<{ dataComponents: Array<{
id: string; // 组件id唯一 id: string; // 组件id唯一
type: string; // 组件类型 type: string; // 组件类型
name: string; // 组件名称(可由用户定义) name: string; // 组件名称(可由用户定义)
groupId?: string; // 组件所在分组ID如果存在 groupId?: string; // 组件所在分组ID如果存在
zIndex?: number; // 组件在分组中的层级 zIndex?: number; // 组件在分组中的层级
parentId?: string; // 组件的父组件ID如果存在 parentId?: string; // 组件的父组件ID如果存在
children: ScreenDesignTimeConfig["components"]; // 子组件 children: ScreenDesignTimeConfig["dataComponents"]; // 子组件
// 设计时属性,运行时会忽略 // 设计时属性,运行时会忽略
design: { design: {
hidden: boolean; hidden: boolean;
@@ -140,6 +142,18 @@ export interface ScreenDesignTimeConfig {
name: string; name: string;
payload: string; // (data: any, variables: any) => Promise<any> payload: string; // (data: any, variables: any) => Promise<any>
}>; }>;
// 反馈组件配置
// 可以认为反馈组件也是一个大屏不过反馈组件在设计时不会直接显示到大屏上而是在图层面板中会有“数据组件”、“反馈组件”等多个Tab
// “反馈组件”Tab面板中会显示所有的反馈组件当用户点击某个反馈组件时会进入一个新的大屏设计器反馈组件设计器
// 用户可以在反馈组件设计器中设计反馈组件的样式和行为。
// 反馈组件设计器中也会有一个“保存”按钮,用户可以点击该按钮将设计好的反馈组件保存到当前大屏中。
feedbackComponents: Array<{
id: string;
name: string;
style: ScreenDesignTimeConfig['style'];
dataComponents: ScreenDesignTimeConfig['dataComponents'];
// feedbackComponents: ScreenDesignTimeConfig['feedbackComponents']; // 是否允许反馈组件中包含反馈组件,即实现类似多对话框的效果
}>;
} }
// 组件的分类: // 组件的分类:
@@ -147,4 +161,4 @@ export interface ScreenDesignTimeConfig {
// 2. 控制组件:大屏中的悬浮组件,可拖拽,贴边时可隐藏,比如一个控制面版用于操作摄像机/录像机等设备 // 2. 控制组件:大屏中的悬浮组件,可拖拽,贴边时可隐藏,比如一个控制面版用于操作摄像机/录像机等设备
// 3. 反馈组件:弹窗(全局,带遮罩) // 3. 反馈组件:弹窗(全局,带遮罩)
export interface ScreenRuntimeConfig {} export interface ScreenRuntimeConfig { }