Skip to content

Commit ba702d0

Browse files
author
puhui999
committed
Merge remote-tracking branch 'yudao/dev' into dev-to-dev
2 parents 015a164 + c1a92ba commit ba702d0

File tree

10 files changed

+549
-11
lines changed

10 files changed

+549
-11
lines changed

‎build/vite/index.ts

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,18 +60,11 @@ export function createVitePlugins() {
6060
}
6161
}),
6262
Components({
63-
// 要搜索组件的目录的相对路径
64-
dirs: ['src/components'],
65-
// 组件的有效文件扩展名
66-
extensions: ['vue', 'md'],
67-
// 搜索子目录
68-
deep: true,
69-
include: [/\.vue$/, /\.vue\?vue/],
7063
// 生成自定义 `auto-components.d.ts` 全局声明
7164
dts: 'src/types/auto-components.d.ts',
7265
// 自定义组件的解析器
7366
resolvers: [ElementPlusResolver()],
74-
exclude: [/[\\/]node_modules[\\/]/]
67+
globs: ["src/components/**/**.{vue, md}", '!src/components/DiyEditor/components/mobile/**']
7568
}),
7669
EslintPlugin({
7770
cache: false,

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,8 +135,11 @@ $toolbar-position: -55px;
135135
position: relative;
136136
z-index: 1;
137137
}
138+
/* 用于包裹组件，为组件提供 组件名称、工具栏、边框等样式 */
138139
.component-wrap {
139140
z-index: 0;
141+
// 不可以被点击
142+
// component-wrap会遮挡组件，导致组件不能触发鼠标事件，所以这里要先禁用，然后在组件名称、工具栏上开启。
140143
pointer-events: none;
141144
display: block;
142145
position: absolute;
@@ -146,6 +149,8 @@ $toolbar-position: -55px;
146149
height: 100%;
147150
/* 左侧：组件名称 */
148151
.component-name {
152+
// 可以被点击
153+
pointer-events: auto;
149154
display: block;
150155
position: absolute;
151156
width: 80px;
@@ -174,6 +179,8 @@ $toolbar-position: -55px;
174179
}
175180
/* 右侧：组件操作工具栏 */
176181
.component-toolbar {
182+
// 可以被点击
183+
pointer-events: auto;
177184
display: none;
178185
position: absolute;
179186
top: 0;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</el-carousel>
2222
<div
2323
v-if="property.indicator === 'number'"
24-
class="absolute p-y-2px bottom-10px right-10px rounded-xl bg-black p-x-8px text-10px text-white opacity-40"
24+
class="absolute bottom-10px right-10px rounded-xl bg-black p-x-8px p-y-2px text-10px text-white opacity-40"
2525
>{{ currentIndex }} / {{ property.items.length }}</div
2626
>
2727
</div>

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
2+
3+
/** 广告魔方属性 */
4+
export interface MagicCubeProperty {
5+
// 上圆角
6+
borderRadiusTop: number
7+
// 下圆角
8+
borderRadiusBottom: number
9+
// 间隔
10+
space: number
11+
// 导航菜单列表
12+
list: MagicCubeItemProperty[]
13+
// 组件样式
14+
style: ComponentStyle
15+
}
16+
/** 广告魔方项目属性 */
17+
export interface MagicCubeItemProperty {
18+
// 图标链接
19+
imgUrl: string
20+
// 链接
21+
url: string
22+
// 宽
23+
width: number
24+
// 高
25+
height: number
26+
// 上
27+
top: number
28+
// 左
29+
left: number
30+
}
31+
32+
// 定义组件
33+
export const component = {
34+
id: 'MagicCube',
35+
name: '广告魔方',
36+
icon: 'fluent:puzzle-cube-piece-20-filled',
37+
property: {
38+
borderRadiusTop: 0,
39+
borderRadiusBottom: 0,
40+
space: 0,
41+
list: [],
42+
style: {
43+
bgType: 'color',
44+
bgColor: '#fff',
45+
marginBottom: 8
46+
} as ComponentStyle
47+
}
48+
} as DiyComponent<MagicCubeProperty>

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<div
3+
class="relative"
4+
:style="{ height: `${rowCount * CUBE_SIZE}px`, width: `${4 * CUBE_SIZE}px` }"
5+
>
6+
<div
7+
v-for="(item, index) in property.list"
8+
:key="index"
9+
class="absolute"
10+
:style="{
11+
width: `${item.width * CUBE_SIZE - property.space * 2}px`,
12+
height: `${item.height * CUBE_SIZE - property.space * 2}px`,
13+
margin: `${property.space}px`,
14+
top: `${item.top * CUBE_SIZE}px`,
15+
left: `${item.left * CUBE_SIZE}px`
16+
}"
17+
>
18+
<el-image
19+
class="h-full w-full"
20+
fit="cover"
21+
:src="item.imgUrl"
22+
:style="{
23+
borderTopLeftRadius: `${property.borderRadiusTop}px`,
24+
borderTopRightRadius: `${property.borderRadiusTop}px`,
25+
borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
26+
borderBottomRightRadius: `${property.borderRadiusBottom}px`
27+
}"
28+
>
29+
<template #error>
30+
<div class="image-slot">
31+
<div
32+
class="flex items-center justify-center"
33+
:style="{
34+
width: `${item.width * CUBE_SIZE}px`,
35+
height: `${item.height * CUBE_SIZE}px`
36+
}"
37+
>
38+
<Icon icon="ep-picture" color="gray" :size="CUBE_SIZE" />
39+
</div>
40+
</div>
41+
</template>
42+
</el-image>
43+
</div>
44+
</div>
45+
</template>
46+
47+
<script setup lang="ts">
48+
import { MagicCubeProperty } from './config'
49+
50+
/** 广告魔方 */
51+
defineOptions({ name: 'MagicCube' })
52+
const props = defineProps<{ property: MagicCubeProperty }>()
53+
// 一个方块的大小
54+
const CUBE_SIZE = 93.75
55+
/**
56+
* 计算方块的行数
57+
* 行数用于计算魔方的总体高度，存在以下情况：
58+
* 1. 没有数据时，默认就只显示一行的高度
59+
* 2. 底部的空白不算高度，例如只有第一行有数据，那么就只显示一行的高度
60+
* 3. 顶部及中间的空白算高度，例如一共有四行，只有最后一行有数据，那么也显示四行的高度
61+
*/
62+
const rowCount = computed(() => {
63+
let count = 0
64+
if (props.property.list.length > 0) {
65+
// 最大行号
66+
count = Math.max(...props.property.list.map((item) => item.bottom))
67+
}
68+
// 行号从 0 开始，所以加 1
69+
return count + 1
70+
})
71+
</script>
72+
73+
<style scoped lang="scss"></style>

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<ComponentContainerProperty v-model="formData.style">
3+
<!-- 表单 -->
4+
<el-form label-width="80px" :model="formData" class="m-t-8px">
5+
<el-text tag="p"> 魔方设置 </el-text>
6+
<el-text type="info" size="small"> 每格尺寸187 * 187 </el-text>
7+
<MagicCubeEditor
8+
class="m-y-16px"
9+
v-model="formData.list"
10+
:rows="4"
11+
:cols="4"
12+
@hot-area-selected="handleHotAreaSelected"
13+
/>
14+
<template v-for="(hotArea, index) in formData.list" :key="index">
15+
<template v-if="selectedHotAreaIndex === index">
16+
<el-form-item label="上传图片" :prop="`list[${index}].imgUrl`">
17+
<UploadImg v-model="hotArea.imgUrl" height="80px" width="80px" />
18+
</el-form-item>
19+
<el-form-item label="链接" :prop="`list[${index}].url`">
20+
<el-input v-model="hotArea.url" placeholder="请输入链接" />
21+
</el-form-item>
22+
</template>
23+
</template>
24+
<el-form-item label="上圆角" prop="borderRadiusTop">
25+
<el-slider
26+
v-model="formData.borderRadiusTop"
27+
:max="100"
28+
:min="0"
29+
show-input
30+
input-size="small"
31+
:show-input-controls="false"
32+
/>
33+
</el-form-item>
34+
<el-form-item label="下圆角" prop="borderRadiusBottom">
35+
<el-slider
36+
v-model="formData.borderRadiusBottom"
37+
:max="100"
38+
:min="0"
39+
show-input
40+
input-size="small"
41+
:show-input-controls="false"
42+
/>
43+
</el-form-item>
44+
<el-form-item label="间隔" prop="space">
45+
<el-slider
46+
v-model="formData.space"
47+
:max="100"
48+
:min="0"
49+
show-input
50+
input-size="small"
51+
:show-input-controls="false"
52+
/>
53+
</el-form-item>
54+
</el-form>
55+
</ComponentContainerProperty>
56+
</template>
57+
58+
<script setup lang="ts">
59+
import { usePropertyForm } from '@/components/DiyEditor/util'
60+
import { MagicCubeProperty } from '@/components/DiyEditor/components/mobile/MagicCube/config'
61+
62+
/** 广告魔方属性面板 */
63+
defineOptions({ name: 'MagicCubeProperty' })
64+
65+
const props = defineProps<{ modelValue: MagicCubeProperty }>()
66+
const emit = defineEmits(['update:modelValue'])
67+
const { formData } = usePropertyForm(props.modelValue, emit)
68+
69+
// 选中的热区
70+
const selectedHotAreaIndex = ref(-1)
71+
const handleHotAreaSelected = (_: any, index: number) => {
72+
selectedHotAreaIndex.value = index
73+
}
74+
</script>
75+
76+
<style scoped lang="scss"></style>

‎src/components/DiyEditor/util.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export const PAGE_LIBS = [
105105
{
106106
name: '图文组件',
107107
extended: true,
108-
components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider']
108+
components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider', 'MagicCube']
109109
},
110110
{ name: '商品组件', extended: true, components: ['ProductCard'] },
111111
{

0 commit comments

Comments
 (0)