130 lines
3.0 KiB
TypeScript
130 lines
3.0 KiB
TypeScript
|
import type { NavigationBarProperty } from '#/components/diy-editor/components/mobile/NavigationBar/config';
|
|||
|
|
import type { PageConfigProperty } from '#/components/diy-editor/components/mobile/PageConfig/config';
|
|||
|
|
import type { TabBarProperty } from '#/components/diy-editor/components/mobile/TabBar/config';
|
|||
|
|
|
|||
|
|
// 页面装修组件
|
|||
|
|
export interface DiyComponent<T> {
|
|||
|
|
// 用于区分同一种组件的不同实例
|
|||
|
|
uid?: number;
|
|||
|
|
// 组件唯一标识
|
|||
|
|
id: string;
|
|||
|
|
// 组件名称
|
|||
|
|
name: string;
|
|||
|
|
// 组件图标
|
|||
|
|
icon: string;
|
|||
|
|
/*
|
|||
|
|
组件位置：
|
|||
|
|
top: 固定于手机顶部，例如 顶部的导航栏
|
|||
|
|
bottom: 固定于手机底部，例如 底部的菜单导航栏
|
|||
|
|
center: 位于手机中心，每个组件占一行，顺序向下排列
|
|||
|
|
空：同center
|
|||
|
|
fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
|
|||
|
|
*/
|
|||
|
|
position?: '' | 'bottom' | 'center' | 'fixed' | 'top';
|
|||
|
|
// 组件属性
|
|||
|
|
property: T;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页面装修组件库
|
|||
|
|
export interface DiyComponentLibrary {
|
|||
|
|
// 组件库名称
|
|||
|
|
name: string;
|
|||
|
|
// 是否展开
|
|||
|
|
extended: boolean;
|
|||
|
|
// 组件列表
|
|||
|
|
components: string[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 组件样式
|
|||
|
|
export interface ComponentStyle {
|
|||
|
|
// 背景类型
|
|||
|
|
bgType: 'color' | 'img';
|
|||
|
|
// 背景颜色
|
|||
|
|
bgColor: string;
|
|||
|
|
// 背景图片
|
|||
|
|
bgImg: string;
|
|||
|
|
// 外边距
|
|||
|
|
margin: number;
|
|||
|
|
marginTop: number;
|
|||
|
|
marginRight: number;
|
|||
|
|
marginBottom: number;
|
|||
|
|
marginLeft: number;
|
|||
|
|
// 内边距
|
|||
|
|
padding: number;
|
|||
|
|
paddingTop: number;
|
|||
|
|
paddingRight: number;
|
|||
|
|
paddingBottom: number;
|
|||
|
|
paddingLeft: number;
|
|||
|
|
// 边框圆角
|
|||
|
|
borderRadius: number;
|
|||
|
|
borderTopLeftRadius: number;
|
|||
|
|
borderTopRightRadius: number;
|
|||
|
|
borderBottomRightRadius: number;
|
|||
|
|
borderBottomLeftRadius: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页面配置
|
|||
|
|
export interface PageConfig {
|
|||
|
|
// 页面属性
|
|||
|
|
page: PageConfigProperty;
|
|||
|
|
// 顶部导航栏属性
|
|||
|
|
navigationBar: NavigationBarProperty;
|
|||
|
|
// 底部导航菜单属性
|
|||
|
|
tabBar?: TabBarProperty;
|
|||
|
|
// 页面组件列表
|
|||
|
|
components: PageComponent[];
|
|||
|
|
}
|
|||
|
|
// 页面组件，只保留组件ID，组件属性
|
|||
|
|
export type PageComponent = Pick<DiyComponent<any>, 'id' | 'property'>;
|
|||
|
|
|
|||
|
|
// 页面组件库
|
|||
|
|
export const PAGE_LIBS = [
|
|||
|
|
{
|
|||
|
|
name: '基础组件',
|
|||
|
|
extended: true,
|
|||
|
|
components: [
|
|||
|
|
'SearchBar',
|
|||
|
|
'NoticeBar',
|
|||
|
|
'MenuSwiper',
|
|||
|
|
'MenuGrid',
|
|||
|
|
'MenuList',
|
|||
|
|
'Popover',
|
|||
|
|
'FloatingActionButton',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '图文组件',
|
|||
|
|
extended: true,
|
|||
|
|
components: [
|
|||
|
|
'ImageBar',
|
|||
|
|
'Carousel',
|
|||
|
|
'TitleBar',
|
|||
|
|
'VideoPlayer',
|
|||
|
|
'Divider',
|
|||
|
|
'MagicCube',
|
|||
|
|
'HotZone',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '商品组件',
|
|||
|
|
extended: true,
|
|||
|
|
components: ['ProductCard', 'ProductList'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '用户组件',
|
|||
|
|
extended: true,
|
|||
|
|
components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '营销组件',
|
|||
|
|
extended: true,
|
|||
|
|
components: [
|
|||
|
|
'PromotionCombination',
|
|||
|
|
'PromotionSeckill',
|
|||
|
|
'PromotionPoint',
|
|||
|
|
'CouponCard',
|
|||
|
|
'PromotionArticle',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
] as DiyComponentLibrary[];
|