| 提交 | 用户 | 时间 | ||
| 314507 | 1 | import { ref, Ref } from 'vue' |
| H | 2 | import { PageConfigProperty } from '@/components/DiyEditor/components/mobile/PageConfig/config' |
| 3 | import { NavigationBarProperty } from '@/components/DiyEditor/components/mobile/NavigationBar/config' | |
| 4 | import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/config' | |
| 5 | ||
| 6 | // 页面装修组件 | |
| 7 | export interface DiyComponent<T> { | |
| 8 | // 用于区分同一种组件的不同实例 | |
| 9 | uid?: number | |
| 10 | // 组件唯一标识 | |
| 11 | id: string | |
| 12 | // 组件名称 | |
| 13 | name: string | |
| 14 | // 组件图标 | |
| 15 | icon: string | |
| 16 | /* | |
| 17 | 组件位置： | |
| 18 | top: 固定于手机顶部，例如 顶部的导航栏 | |
| 19 | bottom: 固定于手机底部，例如 底部的菜单导航栏 | |
| 20 | center: 位于手机中心，每个组件占一行，顺序向下排列 | |
| 21 | 空：同center | |
| 22 | fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角 | |
| 23 | */ | |
| 24 | position?: 'top' | 'bottom' | 'center' | '' | 'fixed' | |
| 25 | // 组件属性 | |
| 26 | property: T | |
| 27 | } | |
| 28 | ||
| 29 | // 页面装修组件库 | |
| 30 | export interface DiyComponentLibrary { | |
| 31 | // 组件库名称 | |
| 32 | name: string | |
| 33 | // 是否展开 | |
| 34 | extended: boolean | |
| 35 | // 组件列表 | |
| 36 | components: string[] | |
| 37 | } | |
| 38 | ||
| 39 | // 组件样式 | |
| 40 | export interface ComponentStyle { | |
| 41 | // 背景类型 | |
| 42 | bgType: 'color' | 'img' | |
| 43 | // 背景颜色 | |
| 44 | bgColor: string | |
| 45 | // 背景图片 | |
| 46 | bgImg: string | |
| 47 | // 外边距 | |
| 48 | margin: number | |
| 49 | marginTop: number | |
| 50 | marginRight: number | |
| 51 | marginBottom: number | |
| 52 | marginLeft: number | |
| 53 | // 内边距 | |
| 54 | padding: number | |
| 55 | paddingTop: number | |
| 56 | paddingRight: number | |
| 57 | paddingBottom: number | |
| 58 | paddingLeft: number | |
| 59 | // 边框圆角 | |
| 60 | borderRadius: number | |
| 61 | borderTopLeftRadius: number | |
| 62 | borderTopRightRadius: number | |
| 63 | borderBottomRightRadius: number | |
| 64 | borderBottomLeftRadius: number | |
| 65 | } | |
| 66 | ||
| 67 | // 页面配置 | |
| 68 | export interface PageConfig { | |
| 69 | // 页面属性 | |
| 70 | page: PageConfigProperty | |
| 71 | // 顶部导航栏属性 | |
| 72 | navigationBar: NavigationBarProperty | |
| 73 | // 底部导航菜单属性 | |
| 74 | tabBar?: TabBarProperty | |
| 75 | // 页面组件列表 | |
| 76 | components: PageComponent[] | |
| 77 | } | |
| 78 | // 页面组件，只保留组件ID，组件属性 | |
| 79 | export interface PageComponent extends Pick<DiyComponent<any>, 'id' | 'property'> {} | |
| 80 | ||
| 81 | // 属性表单监听 | |
| 82 | export function usePropertyForm<T>(modelValue: T, emit: Function): { formData: Ref<T> } { | |
| 83 | const formData = ref<T>() | |
| 84 | // 监听属性数据变动 | |
| 85 | watch( | |
| 86 | () => modelValue, | |
| 87 | () => { | |
| 88 | formData.value = modelValue | |
| 89 | }, | |
| 90 | { | |
| 91 | deep: true, | |
| 92 | immediate: true | |
| 93 | } | |
| 94 | ) | |
| 95 | // 监听表单数据变动 | |
| 96 | watch( | |
| 97 | () => formData.value, | |
| 98 | () => { | |
| 99 | emit('update:modelValue', formData.value) | |
| 100 | }, | |
| 101 | { | |
| 102 | deep: true | |
| 103 | } | |
| 104 | ) | |
| 105 | ||
| 106 | return { formData } as { formData: Ref<T> } | |
| 107 | } | |
| 108 | ||
| 109 | // 页面组件库 | |
| 110 | export const PAGE_LIBS = [ | |
| 111 | { | |
| 112 | name: '基础组件', | |
| 113 | extended: true, | |
| 114 | components: [ | |
| 115 | 'SearchBar', | |
| 116 | 'NoticeBar', | |
| 117 | 'MenuSwiper', | |
| 118 | 'MenuGrid', | |
| 119 | 'MenuList', | |
| 120 | 'Popover', | |
| 121 | 'FloatingActionButton' | |
| 122 | ] | |
| 123 | }, | |
| 124 | { | |
| 125 | name: '图文组件', | |
| 126 | extended: true, | |
| 127 | components: [ | |
| 128 | 'ImageBar', | |
| 129 | 'Carousel', | |
| 130 | 'TitleBar', | |
| 131 | 'VideoPlayer', | |
| 132 | 'Divider', | |
| 133 | 'MagicCube', | |
| 134 | 'HotZone' | |
| 135 | ] | |
| 136 | }, | |
| 137 | { name: '商品组件', extended: true, components: ['ProductCard', 'ProductList'] }, | |
| 138 | { | |
| 139 | name: '用户组件', | |
| 140 | extended: true, | |
| 141 | components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon'] | |
| 142 | }, | |
| 143 | { | |
| 144 | name: '营销组件', | |
| 145 | extended: true, | |
| 146 | components: [ | |
| 147 | 'PromotionCombination', | |
| 148 | 'PromotionSeckill', | |
| 149 | 'PromotionPoint', | |
| 150 | 'CouponCard', | |
| 151 | 'PromotionArticle' | |
| 152 | ] | |
| 153 | } | |
| 154 | ] as DiyComponentLibrary[] | |
