组件库

为了统一 UI 风格以及快速开发插件，我们内置了一些组件库方便大家快速使用

默认参数设置组件

默认参数设置组件直接使用即可，无需传入任何参数。

• Background 背景色设置
• BlendMode 元素的混合模式设置
• Align 元素的对齐方式设置
• Opacity 元素透明度设置
• Animation 元素动画的设置
• Position 元素的坐标位置设置
• Rotation 元素的旋转角度设置
• Size 元素的宽高大小设置
• Mask 元素遮罩设置
• TemplateMode 模版参数设置

使用案例：

<Size />

有参组件

这里的组件是单纯的组件，和编辑器没有任何业务交集

Item 布局用的组件

参数说明：

export interface IProps {
  title: string | JSX.Element; // 标题
  children?: JSX.Element; // 子元素
  className?: string; // 自定义class名称
  extra?: any; // 标题右侧的元素模块
  style?: Record<string, any>; // 自定义style样式
}

使用案例：

<Item title="模块名称">
  <Input />
</Item>

Color 颜色选择器

参数说明：

export interface IProps {
  value: string; // 颜色值，比如 '#000000' 或者 'rgba(0,0,0,1)'
  style?: Record<string, any>; // 自定义style样式
  onChange: (v: { hex: string }) => void; // 值变化触发
  onAfterChange?: (v: { hex: string }) => void; // 修改完成后触发
}

使用案例：

import React, { useState } from "react";

const [val, setVal] = useState("#000000");

<Color
  value={val}
  onChange={(v) => {
    setVal(v.hex);
  }}
/>;

GradualColor 设置渐变色组件

参数说明：

export interface IProps {
  colors: { color: string; p: number }[]; // 颜色值，比如 [{color: '#000000', p: 0}, {color: '#fff000', p: 1}]
  onChange: (colors: { color: string; p: number }[]) => void; // 值变化触发
  onAfterChange?: (colors: { color: string; p: number }[]) => void; // 修改完成后触发
}

使用案例：

import React, { useState } from "react";

const [val, setVal] = useState([
  { color: "#000000", p: 0 },
  { color: "#fff000", p: 1 },
]);

<GradualColor
  value={val}
  onChange={(colors) => {
    setVal(colors);
  }}
/>;

主题

主要分黑色主题和白色主题，同时也内置了 CSS 变量方便大家做 UI

黑色主题

--theme-bg #16161a

--theme-bg2 rgba(0, 0, 0, 0.5)

--theme-text rgba(255, 255, 255, 1)

--theme-text2 rgba(0, 0, 0, 1)

--theme-input-text rgba(255, 255, 255, 0.3)

--theme-text-default rgba(255, 255, 255, 0.5)

--theme-text-hover rgba(255, 255, 255, 1)

--theme-text-active rgba(255, 255, 255, 1)

--theme-main #0066ff

--theme-input rgba(255, 255, 255, 0.2)

--theme-icon rgba(255, 255, 255, 1)

--theme-timeline-bg rgba(0, 0, 0, 0.3)

--theme-timeline-textColor #ffffff

--theme-timeline-linebg rgba(255, 255, 255, 0.04)

--theme-timeline-infobg rgba(0, 0, 0, 0.5)

--theme-timeline-cursor rgba(255, 255, 255, 1)

--theme-timeline-trackLine rgba(255, 255, 255, 0.04)

--theme-border 1px solid rgba(255, 255, 255, 0.05)

--theme-border2 1px solid rgba(0, 0, 0, 0.1)

--theme-wateritem rgba(255, 255, 255, 0.1)

白色主题

--theme-bg #F3F3F3

--theme-bg2 rgba(255, 255, 255, 0.5)

--theme-text rgba(0, 0, 0, 1)

--theme-text2 rgba(0, 0, 0, 0.6)

--theme-input-text rgba(0, 0, 0, 0.3)

--theme-text-default rgba(0, 0, 0, 0.5)

--theme-text-hover rgba(255, 255, 255, 1)

--theme-text-active rgba(0, 0, 0, 1)

--theme-main #0066ff

--theme-input rgba(0, 0, 0, 0.1)

--theme-icon rgba(0, 0, 0, 1)

--theme-timeline-bg rgba(255, 255, 255, 0.3)

--theme-timeline-textColor #000000

--theme-timeline-linebg rgba(0, 0, 0, 0.04)

--theme-timeline-infobg rgba(255, 255, 255, 0.5)

--theme-timeline-cursor rgba(0, 0, 0, 1)

--theme-timeline-trackLine rgba(0, 0, 0, 0.04)

--theme-border 1px solid rgba(0, 0, 0, 0.05)

--theme-border2 1px solid rgba(255, 255, 255, 0.1)

--theme-wateritem rgba(0,0,0,0.05)