shalu-bigscreen-desiner/types/project.d.ts

import type { ComponentType } from "@/components";
interface BackgroundOptions {
  // 背景类型
  type: 'color' | 'image';
  // 背景颜色
  color?: string;
  // 背景图片
  image?: string;
  // 背景图片填充方式
  fillType?: string;
}

interface CustomElement {
  // 元素唯一标识
  key: number;
  // 元素名称
  name: string;
  // 组件类型
  componentType: ComponentType;
  // 元素位置
  position: {
    x: number;
    y: number;
  };
  // 元素尺寸
  size: {
    width: number;
    height: number;
  };
  // 元素层级
  zIndex: number;
  // 元素属性 -- 包含样式，组件属性
  props: Record<string, any>;
  // 元素交互
  events: Record<string, any>;
  // 元素动画
  animations: Record<string, any>;
  // 元素内容 -- 数据源
  content: Record<string, any>;
}

export interface ReferLine {
  // 辅助线唯一标识
  key: number;
  // 辅助线类型
  type: 'horizontal' | 'vertical' | null;
  // 辅助线位置
  value: number;
  // x坐标
  x?: number;
  // y坐标
  y?: number;
}

interface Page {
  // 页面名称
  name: string;
  // 页面背景
  background: BackgroundOptions;
  // 页面元素
  elements: CustomElement[];
  // 辅助线
  referLines: ReferLine[];
}

// 项目基本信息
export interface ProjectInfo {
  // 项目名称
  name: string;
  // 项目描述
  description: string;
  // 尺寸类型
  sizeType: string;
  // 屏幕宽度
  width: number;
  // 屏幕高度
  height: number;
  // 填充方式
  fillType?: ScreenFillEnum;
  // 页面内容
  pages: Page[];
}