Skip to content

Commit 6160c2f

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!315 商城装修
Merge pull request !315 from 疯狂的世界/dev
2 parents 85ee558 + e9299c6 commit 6160c2f

File tree

14 files changed

+762
-41
lines changed

14 files changed

+762
-41
lines changed

‎src/components/ColorInput/index.vue

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,18 @@
11
<template>
22
<el-input v-model="color">
33
<template #prepend>
4-
<el-color-picker v-model="color" :predefine="COLORS" />
4+
<el-color-picker v-model="color" :predefine="PREDEFINE_COLORS" />
55
</template>
66
</el-input>
77
</template>
88

99
<script setup lang="ts">
1010
import { propTypes } from '@/utils/propTypes'
11+
import { PREDEFINE_COLORS } from '@/utils/color'
1112
1213
// 颜色输入框
1314
defineOptions({ name: 'ColorInput' })
1415
15-
// 预设颜色
16-
const COLORS = [
17-
'#ff4500',
18-
'#ff8c00',
19-
'#ffd700',
20-
'#90ee90',
21-
'#00ced1',
22-
'#1e90ff',
23-
'#c71585',
24-
'#409EFF',
25-
'#909399',
26-
'#C0C4CC',
27-
'#b7390b',
28-
'#ff7800',
29-
'#fad400',
30-
'#5b8c5f',
31-
'#00babd',
32-
'#1f73c3',
33-
'#711f57'
34-
]
35-
3616
const props = defineProps({
3717
modelValue: propTypes.string.def('')
3818
})

‎src/components/DiyEditor/components/ComponentContainer.vue

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div :class="['component', { active: active }]">
33
<div
4+
class="component-inner"
45
:style="{
56
...style
67
}"
@@ -130,23 +131,19 @@ $toolbar-position: -55px;
130131
.component {
131132
position: relative;
132133
cursor: move;
134+
.component-inner {
135+
position: relative;
136+
z-index: 1;
137+
}
133138
.component-wrap {
139+
z-index: 0;
140+
pointer-events: none;
134141
display: block;
135142
position: absolute;
136143
left: -$active-border-width;
137144
top: 0;
138145
width: 100%;
139146
height: 100%;
140-
/* 鼠标放到组件上时 */
141-
&:hover {
142-
border: $hover-border-width dashed var(--el-color-primary);
143-
box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
144-
.component-name {
145-
/* 防止加了边框之后，位置移动 */
146-
left: $name-position - $hover-border-width;
147-
top: $hover-border-width;
148-
}
149-
}
150147
/* 左侧：组件名称 */
151148
.component-name {
152149
display: block;
@@ -199,6 +196,7 @@ $toolbar-position: -55px;
199196
margin-bottom: 4px;
200197
201198
.component-wrap {
199+
z-index: 2;
202200
border: $active-border-width solid var(--el-color-primary) !important;
203201
box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
204202
margin-bottom: $active-border-width + $active-border-width;
@@ -218,5 +216,18 @@ $toolbar-position: -55px;
218216
}
219217
}
220218
}
219+
/* 鼠标放到组件上时 */
220+
&:hover {
221+
.component-wrap {
222+
z-index: 2;
223+
border: $hover-border-width dashed var(--el-color-primary);
224+
box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
225+
.component-name {
226+
/* 防止加了边框之后，位置移动 */
227+
left: $name-position - $hover-border-width;
228+
top: $hover-border-width;
229+
}
230+
}
231+
}
221232
}
222233
</style>

‎src/components/DiyEditor/components/mobile/MenuGrid/config.ts

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
2+
import { cloneDeep } from 'lodash-es'
3+
4+
/** 宫格导航属性 */
5+
export interface MenuGridProperty {
6+
// 列数
7+
column: number
8+
// 导航菜单列表
9+
list: MenuGridItemProperty[]
10+
// 组件样式
11+
style: ComponentStyle
12+
}
13+
/** 宫格导航项目属性 */
14+
export interface MenuGridItemProperty {
15+
// 图标链接
16+
iconUrl: string
17+
// 标题
18+
title: string
19+
// 标题颜色
20+
titleColor: string
21+
// 副标题
22+
subtitle: string
23+
// 副标题颜色
24+
subtitleColor: string
25+
// 链接
26+
url: string
27+
// 角标
28+
badge: {
29+
// 是否显示
30+
show: boolean
31+
// 角标文字
32+
text: string
33+
// 角标文字颜色
34+
textColor: string
35+
// 角标背景颜色
36+
bgColor: string
37+
}
38+
}
39+
40+
export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
41+
title: '标题',
42+
titleColor: '#333',
43+
subtitle: '副标题',
44+
subtitleColor: '#bbb',
45+
badge: {
46+
show: false,
47+
textColor: '#fff',
48+
bgColor: '#FF6000'
49+
}
50+
} as MenuGridItemProperty
51+
52+
// 定义组件
53+
export const component = {
54+
id: 'MenuGrid',
55+
name: '宫格导航',
56+
icon: 'bi:grid-3x3-gap',
57+
property: {
58+
column: 3,
59+
list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
60+
style: {
61+
bgType: 'color',
62+
bgColor: '#fff',
63+
marginBottom: 8,
64+
marginLeft: 8,
65+
marginRight: 8,
66+
padding: 8,
67+
paddingTop: 8,
68+
paddingRight: 8,
69+
paddingBottom: 8,
70+
paddingLeft: 8,
71+
borderRadius: 8,
72+
borderTopLeftRadius: 8,
73+
borderTopRightRadius: 8,
74+
borderBottomRightRadius: 8,
75+
borderBottomLeftRadius: 8
76+
} as ComponentStyle
77+
}
78+
} as DiyComponent<MenuGridProperty>

‎src/components/DiyEditor/components/mobile/MenuGrid/index.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div class="flex flex-row flex-wrap">
3+
<div
4+
v-for="(item, index) in property.list"
5+
:key="index"
6+
class="relative flex flex-col items-center p-b-14px p-t-20px"
7+
:style="{ width: `${100 * (1 / property.column)}%` }"
8+
>
9+
<!-- 右上角角标 -->
10+
<span
11+
v-if="item.badge?.show"
12+
class="absolute left-50% top-10px z-1 h-20px rounded-50% p-x-6px text-center text-12px leading-20px"
13+
:style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }"
14+
>
15+
{{ item.badge.text }}
16+
</span>
17+
<el-image v-if="item.iconUrl" class="h-28px w-28px" :src="item.iconUrl" />
18+
<span class="m-t-8px h-16px text-12px leading-16px" :style="{ color: item.titleColor }">
19+
{{ item.title }}
20+
</span>
21+
<span class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
22+
{{ item.subtitle }}
23+
</span>
24+
</div>
25+
</div>
26+
</template>
27+
28+
<script setup lang="ts">
29+
import { MenuGridProperty } from './config'
30+
/** 宫格导航 */
31+
defineOptions({ name: 'MenuGrid' })
32+
defineProps<{ property: MenuGridProperty }>()
33+
</script>
34+
35+
<style scoped lang="scss"></style>

‎src/components/DiyEditor/components/mobile/MenuGrid/property.vue

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<template>
2+
<ComponentContainerProperty v-model="formData.style">
3+
<!-- 表单 -->
4+
<el-form label-width="80px" :model="formData" class="m-t-8px">
5+
<el-form-item label="每行数量" prop="column">
6+
<el-radio-group v-model="formData.column">
7+
<el-radio :label="3">3个</el-radio>
8+
<el-radio :label="4">4个</el-radio>
9+
</el-radio-group>
10+
</el-form-item>
11+
12+
<el-text tag="p"> 菜单设置 </el-text>
13+
<el-text type="info" size="small"> 拖动左侧的小圆点可以调整顺序 </el-text>
14+
<template v-if="formData.list.length">
15+
<VueDraggable
16+
class="m-t-8px"
17+
:list="formData.list"
18+
item-key="index"
19+
handle=".drag-icon"
20+
:forceFallback="true"
21+
:animation="200"
22+
>
23+
<template #item="{ element, index }">
24+
<div class="mb-4px flex flex-col gap-4px rounded bg-gray-100 p-8px">
25+
<div class="flex flex-row justify-between">
26+
<Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
27+
<Icon icon="ep:delete" class="text-red-500" @click="handleDeleteMenu(index)" />
28+
</div>
29+
<el-form-item label="图标" prop="iconUrl">
30+
<UploadImg v-model="element.iconUrl" height="80px" width="80px">
31+
<template #tip> 建议尺寸：44 * 44 </template>
32+
</UploadImg>
33+
</el-form-item>
34+
<el-form-item label="标题" prop="title">
35+
<InputWithColor v-model="element.title" v-model:color="element.titleColor" />
36+
</el-form-item>
37+
<el-form-item label="副标题" prop="subtitle">
38+
<InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
39+
</el-form-item>
40+
<el-form-item label="链接" prop="url">
41+
<el-input v-model="element.url" />
42+
</el-form-item>
43+
<el-form-item label="显示角标" prop="badge.show">
44+
<el-switch v-model="element.badge.show" />
45+
</el-form-item>
46+
<template v-if="element.badge.show">
47+
<el-form-item label="角标内容" prop="badge.text">
48+
<InputWithColor
49+
v-model="element.badge.text"
50+
v-model:color="element.badge.textColor"
51+
/>
52+
</el-form-item>
53+
<el-form-item label="背景颜色" prop="badge.bgColor">
54+
<ColorInput v-model="element.badge.bgColor" />
55+
</el-form-item>
56+
</template>
57+
</div>
58+
</template>
59+
</VueDraggable>
60+
</template>
61+
<el-form-item label-width="0">
62+
<el-button @click="handleAddMenu" type="primary" plain class="m-t-8px w-full">
63+
<Icon icon="ep:plus" class="mr-5px" /> 添加菜单
64+
</el-button>
65+
</el-form-item>
66+
</el-form>
67+
</ComponentContainerProperty>
68+
</template>
69+
70+
<script setup lang="ts">
71+
import VueDraggable from 'vuedraggable'
72+
import { usePropertyForm } from '@/components/DiyEditor/util'
73+
import {
74+
EMPTY_MENU_GRID_ITEM_PROPERTY,
75+
MenuGridProperty
76+
} from '@/components/DiyEditor/components/mobile/MenuGrid/config'
77+
import { cloneDeep } from 'lodash-es'
78+
79+
/** 宫格导航属性面板 */
80+
defineOptions({ name: 'MenuGridProperty' })
81+
82+
const props = defineProps<{ modelValue: MenuGridProperty }>()
83+
const emit = defineEmits(['update:modelValue'])
84+
const { formData } = usePropertyForm(props.modelValue, emit)
85+
86+
/* 添加菜单 */
87+
const handleAddMenu = () => {
88+
formData.value.list.push(cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY))
89+
}
90+
/* 删除菜单 */
91+
const handleDeleteMenu = (index: number) => {
92+
formData.value.list.splice(index, 1)
93+
}
94+
</script>
95+
96+
<style scoped lang="scss"></style>

‎src/components/DiyEditor/components/mobile/MenuList/config.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
2+
import { cloneDeep } from 'lodash-es'
3+
4+
/** 列表导航属性 */
5+
export interface MenuListProperty {
6+
// 导航菜单列表
7+
list: MenuListItemProperty[]
8+
// 组件样式
9+
style: ComponentStyle
10+
}
11+
/** 列表导航项目属性 */
12+
export interface MenuListItemProperty {
13+
// 图标链接
14+
iconUrl: string
15+
// 标题
16+
title: string
17+
// 标题颜色
18+
titleColor: string
19+
// 副标题
20+
subtitle: string
21+
// 副标题颜色
22+
subtitleColor: string
23+
// 链接
24+
url: string
25+
}
26+
27+
export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
28+
title: '标题',
29+
titleColor: '#333',
30+
subtitle: '副标题',
31+
subtitleColor: '#bbb'
32+
}
33+
34+
// 定义组件
35+
export const component = {
36+
id: 'MenuList',
37+
name: '列表导航',
38+
icon: 'fa-solid:list',
39+
property: {
40+
list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
41+
style: {
42+
bgType: 'color',
43+
bgColor: '#fff',
44+
marginBottom: 8
45+
} as ComponentStyle
46+
}
47+
} as DiyComponent<MenuListProperty>

‎src/components/DiyEditor/components/mobile/MenuList/index.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="min-h-42px flex flex-col">
3+
<div
4+
v-for="(item, index) in property.list"
5+
:key="index"
6+
class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px"
7+
>
8+
<div class="flex flex-1 flex-row items-center gap-8px">
9+
<el-image v-if="item.iconUrl" class="h-16px w-16px" :src="item.iconUrl" />
10+
<span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
11+
</div>
12+
<div class="item-center flex flex-row justify-center gap-4px">
13+
<span class="text-12px" :style="{ color: item.subtitleColor }">{{ item.subtitle }}</span>
14+
<Icon icon="ep-arrow-right" color="#000" :size="16" />
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script setup lang="ts">
21+
import { MenuListProperty } from './config'
22+
/** 列表导航 */
23+
defineOptions({ name: 'MenuList' })
24+
defineProps<{ property: MenuListProperty }>()
25+
</script>
26+
27+
<style scoped lang="scss">
28+
.item + .item {
29+
border-top: 1px solid #eee;
30+
}
31+
</style>

0 commit comments

Comments
 (0)