You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
623 lines
13 KiB
623 lines
13 KiB
/** 百分比 */
|
|
export type Percentage = `${number}%`
|
|
|
|
/** 计量原语 */
|
|
export type Unit =
|
|
| number // 根据情况，大多数情况下被作为逻辑像素使用
|
|
| Percentage
|
|
|
|
/** 对称策略 */
|
|
export interface Symmetric<T> {
|
|
vertical?: T
|
|
horizontal?: T
|
|
}
|
|
|
|
/** 四边策略 */
|
|
export interface Direction<T> {
|
|
left?: T
|
|
right?: T
|
|
top?: T
|
|
bottom?: T
|
|
}
|
|
|
|
/** 四角策略 */
|
|
export interface Corners<T> {
|
|
topLeft?: T // 左上角
|
|
topRight?: T // 右上角
|
|
bottomLeft?: T // 左下角
|
|
bottomRight?: T // 右下角
|
|
}
|
|
|
|
/**
|
|
* 线性渐变
|
|
*
|
|
* 不支持 sweep 和 radial 风格。
|
|
*
|
|
* 属性 stops 要么不设置，要么其数量必须与 colors 的数量一致。
|
|
*/
|
|
export interface Gradient {
|
|
/** 渐变角度 */
|
|
angle?: string
|
|
/** 颜色组，至少 2 个颜色值 */
|
|
colors: string[]
|
|
/** 颜色停顿位置组 */
|
|
stops?: number[]
|
|
/** 是否重复渲染 */
|
|
repeatable?: boolean
|
|
}
|
|
|
|
/** 边距，用于内外边距 */
|
|
export type EdgeInsets =
|
|
| Direction<Unit | 'auto'> // 四边
|
|
| Symmetric<Unit | 'auto'> // 对称
|
|
| Unit | 'auto' // 原语
|
|
|
|
/** 边框样式 */
|
|
export type BorderStyle =
|
|
| 'solid'
|
|
| 'dashed'
|
|
| 'dotted'
|
|
| 'double'
|
|
| 'groove'
|
|
| 'ridge'
|
|
| 'outset'
|
|
| 'inset'
|
|
| 'none'
|
|
|
|
/** 边框的边 */
|
|
export interface BorderSide {
|
|
color?: string
|
|
style?: BorderStyle
|
|
width?: number
|
|
}
|
|
|
|
/** 边框 */
|
|
export type Border =
|
|
| Direction<BorderSide> // 四边
|
|
| Symmetric<BorderSide> // 对称
|
|
| BorderSide // 统一设置
|
|
|
|
/** 圆角原语 */
|
|
export type RadiusPrimitive =
|
|
| number
|
|
| [number, number]
|
|
|
|
/** 圆角双值 */
|
|
export type RadiusDouble = [
|
|
RadiusPrimitive,
|
|
RadiusPrimitive,
|
|
]
|
|
|
|
/** 圆角 */
|
|
export type Radius =
|
|
| Corners<RadiusPrimitive | RadiusDouble>
|
|
| RadiusPrimitive
|
|
| RadiusDouble
|
|
|
|
/** 阴影 */
|
|
export interface Shadow {
|
|
x: number
|
|
y: number
|
|
blur?: number
|
|
spread?: number
|
|
color: string
|
|
inset?: boolean
|
|
}
|
|
|
|
/**
|
|
* 主轴对齐方式(子元素布局方向)
|
|
*
|
|
* 用于 Flex 布局，对应 CSS 属性 justify-content 的值。
|
|
*/
|
|
export type MainAlign =
|
|
| 'start' // 左对齐，默认值
|
|
| 'end' // 右对齐
|
|
| 'center' // 居中
|
|
| 'between' // 两端对齐，项目之间的间隔都相等。
|
|
| 'around' // 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
|
|
|
|
/**
|
|
* 交叉轴对齐方式（与主轴垂直的方向）
|
|
*
|
|
* 用于 Flex 布局，对应 CSS 属性 align-items 的值。
|
|
*/
|
|
export type CrossAlign =
|
|
| 'start' // 交叉轴的起点对齐。
|
|
| 'end' // 交叉轴的终点对齐。
|
|
| 'center' // 交叉轴的中点对齐。
|
|
| 'baseline' // 项目的第一行文字的基线对齐。
|
|
| 'stretch' // 默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
|
|
|
|
/** 文本方向 */
|
|
export type TextAlign =
|
|
| 'left'
|
|
| 'center'
|
|
| 'right'
|
|
|
|
/**
|
|
* 描述主轴方向
|
|
*
|
|
* x - 横轴
|
|
* y - 纵轴
|
|
*/
|
|
export type Axis = 'x' | 'y'
|
|
|
|
export type Attach<Data, Append> = {
|
|
[p in keyof Data]: Data[p] | Append
|
|
}
|
|
|
|
/**
|
|
* 文本
|
|
*
|
|
* 描述与文本外观相关的属性
|
|
*/
|
|
export interface Textual {
|
|
/** 文本颜色 */
|
|
textColor?: string
|
|
/** 字体大小 */
|
|
fontSize?: number
|
|
/** 字体粗细 */
|
|
fontWeight?: 400 | 500 | 600 | 700 | 800 | 900
|
|
/** 文本方向 */
|
|
textAlign?: TextAlign
|
|
/** 行高，行高比较特殊，需要转换单位 */
|
|
lineHeight?: number | Percentage | string
|
|
}
|
|
|
|
/**
|
|
* 弹性布局策略
|
|
*
|
|
* 描述与弹性布局相关的属性
|
|
*/
|
|
export interface Flexible {
|
|
/**
|
|
* 主轴方向，对应 CSS 属性 flex-direction。
|
|
* 如果值为 'x' 表示 `row`；值为 'y' 表示 `column`。
|
|
*/
|
|
axis?: Axis
|
|
/** 主轴对齐方式 */
|
|
mainAlign?: MainAlign
|
|
/** 交叉轴对齐方式 */
|
|
crossAlign?: CrossAlign
|
|
/** 是否自动换行 */
|
|
wrap?: boolean
|
|
/**
|
|
* 子组件间隔
|
|
*
|
|
* 当值未数组时：
|
|
*
|
|
* - 第一个值表示水平方向上子视图的间隔；
|
|
* - 第二个值表示垂直方向上的子视图间隔。
|
|
*/
|
|
gap?: number | [number, number]
|
|
}
|
|
|
|
/**
|
|
* 装饰策略
|
|
*
|
|
* 描述与视图外观相关的属性
|
|
*/
|
|
export interface Decoration {
|
|
/** 组件颜色，背景颜色 */
|
|
color?: string
|
|
/** 组件图片，背景图片 */
|
|
image?: string
|
|
/** 组件边框 */
|
|
border?: Border
|
|
/** 组件圆角 */
|
|
radius?: Radius
|
|
/** 组件阴影效果 */
|
|
shadow?: Shadow | Shadow[]
|
|
/** 组件渐变，背景渐变 */
|
|
gradient?: Gradient
|
|
}
|
|
|
|
/**
|
|
* 盒子模型块级元素或行级块元素
|
|
*
|
|
*/
|
|
export interface BoxBlock {
|
|
display?: 'block' | 'inline-block' | 'flex'
|
|
whiteSpace?: 'nowrap' | 'pre'
|
|
}
|
|
|
|
/**
|
|
* 空间分配策略
|
|
*
|
|
* 能够用在弹性布局子视图上的属性
|
|
*/
|
|
export interface Spatial {
|
|
/** 当组件作为 Flex 的子组件时，视图在主轴方向上的初始大小 */
|
|
basis?: number
|
|
/** 在 Flex 布局下的增长系数，对应 flex-grow */
|
|
grow?: number
|
|
/** 在 Flex 布局下的收缩规则 */
|
|
shrink?: number
|
|
}
|
|
|
|
|
|
/**
|
|
* 盒子策略
|
|
*
|
|
* 描述与盒子模型相关的属性
|
|
*/
|
|
export interface Boxed {
|
|
/** 组件内边距 */
|
|
padding?: EdgeInsets
|
|
/** 组件外边距 */
|
|
margin?: EdgeInsets
|
|
/** 组件宽度，若在 Flex 布局下可能会被作为主轴方向上的初始大小 */
|
|
width?: number | Percentage | 'auto'
|
|
/** 组件高度，若在 Flex 布局下可能会被作为主轴方向上的初始大小 */
|
|
height?: number | Percentage | 'auto'
|
|
}
|
|
|
|
export type ViewPosition =
|
|
| "absolute"
|
|
| "fixed"
|
|
| "relative"
|
|
| "static"
|
|
| "sticky"
|
|
|
|
export interface Stacked extends Direction<Unit> {
|
|
position?: ViewPosition
|
|
zIndex?: number
|
|
}
|
|
|
|
// /**
|
|
// * 相关框架组件
|
|
// *
|
|
// * 建议尽量使用业务组件。
|
|
// */
|
|
// export interface Widget {
|
|
// /** 组件名称 */
|
|
// name: string
|
|
// /** 组件属性 */
|
|
// props?: Record<string, unknown>
|
|
// /** 相关插槽，不包括默认插槽 */
|
|
// slots?: Omit<Slots, 'default'>
|
|
// }
|
|
|
|
/**
|
|
* 内容超出视图的剪切行为
|
|
*/
|
|
export type ClipBehavior =
|
|
| 'hidden'
|
|
| 'visible'
|
|
| 'auto'
|
|
| 'autoX' // overflow-x: auto; overflow-y: hidden
|
|
| 'autoY' // overflow-y: hidden; overflow-y: auto
|
|
|
|
/**
|
|
* 视图数据
|
|
*
|
|
* 描述了视图的基本布局和外观表现。
|
|
*/
|
|
export interface Theme extends Textual, Flexible, BoxBlock, Boxed, Decoration, Spatial, Flexible, Stacked {
|
|
/**
|
|
* 是否强制开启弹性布局
|
|
*
|
|
* 当未给出该属性时，如果指定了 Flexible 中的属性，引擎会自动启用弹性布局。
|
|
*/
|
|
flexible?: boolean
|
|
/**
|
|
* 超出视图剪切方式
|
|
*
|
|
* 对应 overflow 属性
|
|
*/
|
|
clip?: ClipBehavior
|
|
}
|
|
|
|
export type DynamicTheme = Attach<Theme, `@@${string}`>
|
|
|
|
export type DynamicValue<T> = T | `@@${string}`
|
|
|
|
export type ToStatic = <T>(v: DynamicValue<T>) => T
|
|
|
|
/** 文本配置引用 */
|
|
export interface TextRefer {
|
|
/** 标识为文本专用类型 */
|
|
type: 'text'
|
|
/** 对应的数据键名称 */
|
|
key: string
|
|
}
|
|
|
|
// https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
|
|
export type ObjectFit =
|
|
| 'fill'
|
|
| 'contain'
|
|
| 'cover'
|
|
| 'none'
|
|
| 'scale-down'
|
|
|
|
/** 图片配置引用 */
|
|
export interface ImageRefer {
|
|
/** 图片引用类型专用类型 */
|
|
type: 'image'
|
|
/** 图片地址键 */
|
|
key: string
|
|
/** 图片标题键 */
|
|
title?: string
|
|
/** 图片跳转链接键 */
|
|
link?: string
|
|
/** 图片填充方式 */
|
|
fit?: ObjectFit
|
|
/** 图片圆角 */
|
|
radius?: Radius
|
|
}
|
|
|
|
/** 视频配置引用 */
|
|
export interface VideoRefer {
|
|
/** 视频引用类型专用类型 */
|
|
type: 'video'
|
|
/** 视频地址键 */
|
|
key: string
|
|
/** 视频封片图片键 */
|
|
poster?: string
|
|
/** 视频标题键 */
|
|
title?: string
|
|
/** 视频填充方式 */
|
|
fit?: ObjectFit
|
|
// todo 其它配置实现，比如自动播放、控件配置等
|
|
}
|
|
|
|
/** 音频配置引用 */
|
|
export interface AudioRefer {
|
|
/** 音频引用类型专用 */
|
|
type: 'audio'
|
|
/** 音频地址键 */
|
|
key: string
|
|
/** 音频标题键，todo 是否需要显示？如何显示？ */
|
|
title: string
|
|
// todo 其它配置实现，比如自动播放、控件配置等
|
|
}
|
|
|
|
export interface EachRefer {
|
|
type: 'each'
|
|
/** 循环数据地址键 */
|
|
key: string
|
|
handle: ViewChildren
|
|
}
|
|
|
|
export interface TemplateRefer {
|
|
type: 'template'
|
|
/** 模板数据地址键 */
|
|
key: string
|
|
}
|
|
|
|
/** 目前支持的 4 中配置引用 */
|
|
export type DataRefer =
|
|
| TextRefer
|
|
| ImageRefer
|
|
| VideoRefer
|
|
| AudioRefer
|
|
| EachRefer
|
|
| TemplateRefer
|
|
|
|
export type ViewChild =
|
|
| string
|
|
| number
|
|
| DataRefer
|
|
| View
|
|
|
|
export type ViewChildren = ViewChild | Array<ViewChild>
|
|
|
|
/**
|
|
* 视图
|
|
*
|
|
* 用于构建页面的基本元素
|
|
*/
|
|
export interface View {
|
|
/** 视图唯一标识 */
|
|
vid?: string
|
|
/**
|
|
* 视图数据列表
|
|
*
|
|
* 如果存在同类型的，属性会根据顺序被覆盖。
|
|
*/
|
|
// theme?: Theme | Widget
|
|
theme?: DynamicTheme
|
|
title?: string
|
|
// /**
|
|
// * 关联数据源
|
|
// */
|
|
// source?: string
|
|
/** 子视图 */
|
|
children?: ViewChildren
|
|
}
|
|
|
|
/** 装修视图块 */
|
|
export interface Block extends View {
|
|
/** 视图唯一标识 */
|
|
vid: string
|
|
/** 模块唯一标识 */
|
|
mid: string
|
|
}
|
|
|
|
/** 装修模块 */
|
|
export interface Module extends Block {
|
|
/** 标题 */
|
|
title: string
|
|
/** 组件预览图 */
|
|
image?: string
|
|
/** 允许最大引用次数，如果值为负数则表示没有限制 */
|
|
maxReferenceCount?: number
|
|
/** 被引用次数，运行时属性 */
|
|
referenceCount?: number
|
|
/** 模块配置 */
|
|
configs: ModuleConfig[]
|
|
/** 初始化数据 */
|
|
init?: Record<string, any>
|
|
/** 关联模板 */
|
|
templates?: Record<string, ViewChildren>
|
|
}
|
|
|
|
export type ModuleConfig =
|
|
| ListConfig
|
|
| ObjectConfig
|
|
| BackgroundConfig
|
|
| BooleanConfig
|
|
| MarkConfig
|
|
| ImageConfig
|
|
| BaseConfig
|
|
|
|
export interface BaseConfig {
|
|
type: string
|
|
field: string
|
|
label: string
|
|
help?: string
|
|
required?: boolean
|
|
}
|
|
|
|
export interface ListConfig extends BaseConfig {
|
|
type: 'list'
|
|
addable?: boolean
|
|
min?: number
|
|
max?: number
|
|
configs: ModuleConfig[]
|
|
}
|
|
|
|
export interface ObjectConfig extends BaseConfig {
|
|
type: 'object'
|
|
configs: ModuleConfig[]
|
|
}
|
|
|
|
export interface BackgroundConfig extends BaseConfig {
|
|
type: 'background'
|
|
features: Array<'color' | 'gradient' | 'image'>
|
|
}
|
|
|
|
export interface ConfigValue<T = unknown> {
|
|
label: string
|
|
value: T
|
|
/** 帮助信息 */
|
|
help?: string
|
|
/** 以图标形式渲染 */
|
|
icon?: string
|
|
}
|
|
|
|
/** 针对单选或多选 */
|
|
export interface MarkConfig extends BaseConfig {
|
|
type: 'mark'
|
|
multiple?: boolean
|
|
values: ConfigValue[]
|
|
}
|
|
|
|
export interface BooleanConfig extends BaseConfig {
|
|
type: 'bool'
|
|
}
|
|
|
|
export interface ImageConfig extends BaseConfig {
|
|
type: 'image'
|
|
/** 内联，表示相关联的数据 */
|
|
inlines?: ModuleConfig[]
|
|
}
|
|
|
|
/** 模块分类 */
|
|
export interface Category {
|
|
/** 分类图标 */
|
|
icon: string
|
|
/** 分类名称 */
|
|
text: string
|
|
/** 模块列表 */
|
|
modules: Module[]
|
|
}
|
|
|
|
/**
|
|
* 亮度模式
|
|
*
|
|
* todo 考虑对比模式 contrast
|
|
*/
|
|
export type Brightness =
|
|
| 'dark'
|
|
| 'light'
|
|
|
|
/** 页面头尾固定区域配置 */
|
|
export interface StickyConfig {
|
|
/** 是否开启 */
|
|
enabled: boolean
|
|
/** 高度 */
|
|
height: number
|
|
/** 背景颜色 */
|
|
color: string
|
|
/** 文本颜色 */
|
|
textColor: string
|
|
/** 是否开启边框 */
|
|
bordered: boolean
|
|
/** 边框颜色 */
|
|
borderColor: string
|
|
}
|
|
|
|
/** 页面头部配置 */
|
|
export interface PageHeader extends StickyConfig {
|
|
/** 页面标题 */
|
|
title?: string
|
|
/** 页面标题是否居中显示，在小程序上非自定义头部时无效 */
|
|
centerTitle?: boolean
|
|
/** 自定义视图 */
|
|
custom?: View
|
|
}
|
|
|
|
/** 页面底部配置 */
|
|
export interface PageFooter extends StickyConfig {
|
|
/** 自定义视图，todo 小程序底部怎么弄？使用额外配置？ */
|
|
view?: View
|
|
}
|
|
|
|
/**
|
|
* 页面配置
|
|
*
|
|
* 包含组成页面的视图树和API接口
|
|
*/
|
|
export interface Page {
|
|
/** 亮度模式，支持暗模式和亮模式 */
|
|
brightness?: Brightness
|
|
/** 是否全屏模式 */
|
|
fullscreen?: boolean
|
|
/** 是否开启顶部安全区域（屏幕状态栏） */
|
|
safeAreaInsetTop?: boolean
|
|
/** 是否开启底部安全区域（底部操作条） */
|
|
safeAreaInsetBottom?: boolean
|
|
/** 页面背景颜色 */
|
|
backgroundColor?: string
|
|
/** 页面头部配置 */
|
|
header: PageHeader
|
|
/** 页面主体部分 */
|
|
body: Block[]
|
|
/** 页面底部配置 */
|
|
footer: PageFooter
|
|
}
|
|
|
|
// /** 交互类型 */
|
|
// export type Interaction =
|
|
// | 'carousel' // 轮播图
|
|
// | 'collapse' // 折叠面板
|
|
// | 'dialog' // 弹出层
|
|
// | 'drawer' // 抽屉
|
|
// | 'marquee' // 跑马灯（比如滚动通知）
|
|
// | 'count' // 计数（比如秒杀倒计时、短信验证码倒计时、数字滚动等）
|
|
// | 'keyboard' // 打开虚拟键盘
|
|
// | 'picker' // 打开 picker 面板
|
|
// | 'gesture' // 手势（长按、点击、双击、滑动等）
|
|
// | 'sticky' // 吸顶
|
|
//
|
|
// export interface Interop {
|
|
// /** 交互方式 */
|
|
// type: Interaction
|
|
// /**
|
|
// * 交互视图数据列表
|
|
// */
|
|
// effect?: ViewData[]
|
|
// /**
|
|
// * 交互关联视图列表
|
|
// *
|
|
// * 如果存在同类型的，属性会根据顺序被覆盖。
|
|
// */
|
|
// attach?: ViewData[]
|
|
// }
|
|
//
|
|
// /** 描述视图动画 */
|
|
// export interface Motion {
|
|
// /** 动画类型 */
|
|
// type: string
|
|
// }
|
|
|