1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
| import { PageConfigProperty } from '@/components/DiyEditor/components/mobile/PageConfig/config'
| import { NavigationBarProperty } from '@/components/DiyEditor/components/mobile/NavigationBar/config'
| import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/config'
|
| // 页面装修组件
| export interface DiyComponent<T> {
| // 用于区分同一种组件的不同实例
| uid?: number
| // 组件唯一标识
| id: string
| // 组件名称
| name: string
| // 组件图标
| icon: string
| /*
| 组件位置：
| top: 固定于手机顶部，例如 顶部的导航栏
| bottom: 固定于手机底部，例如 底部的菜单导航栏
| center: 位于手机中心，每个组件占一行，顺序向下排列
| 空：同center
| fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
| */
| position?: 'top' | 'bottom' | 'center' | '' | 'fixed'
| // 组件属性
| 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 interface PageComponent extends 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[]
|
|
