!319 商城装修

Merge pull request !319 from 疯狂的世界/dev
This commit is contained in:
芋道源码 2023-11-14 00:31:55 +00:00 committed by Gitee
commit c1a92ba22a
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
10 changed files with 549 additions and 11 deletions

View File

@ -60,18 +60,11 @@ export function createVitePlugins() {
}
}),
Components({
// 要搜索组件的目录的相对路径
dirs: ['src/components'],
// 组件的有效文件扩展名
extensions: ['vue', 'md'],
// 搜索子目录
deep: true,
include: [/\.vue$/, /\.vue\?vue/],
// 生成自定义 `auto-components.d.ts` 全局声明
dts: 'src/types/auto-components.d.ts',
// 自定义组件的解析器
resolvers: [ElementPlusResolver()],
exclude: [/[\\/]node_modules[\\/]/]
globs: ["src/components/**/**.{vue, md}", '!src/components/DiyEditor/components/mobile/**']
}),
EslintPlugin({
cache: false,

View File

@ -135,8 +135,11 @@ $toolbar-position: -55px;
position: relative;
z-index: 1;
}
/* 用于包裹组件,为组件提供 组件名称、工具栏、边框等样式 */
.component-wrap {
z-index: 0;
//
// component-wrap
pointer-events: none;
display: block;
position: absolute;
@ -146,6 +149,8 @@ $toolbar-position: -55px;
height: 100%;
/* 左侧:组件名称 */
.component-name {
//
pointer-events: auto;
display: block;
position: absolute;
width: 80px;
@ -174,6 +179,8 @@ $toolbar-position: -55px;
}
/* 右侧:组件操作工具栏 */
.component-toolbar {
//
pointer-events: auto;
display: none;
position: absolute;
top: 0;

View File

@ -21,7 +21,7 @@
</el-carousel>
<div
v-if="property.indicator === 'number'"
class="absolute p-y-2px bottom-10px right-10px rounded-xl bg-black p-x-8px text-10px text-white opacity-40"
class="absolute bottom-10px right-10px rounded-xl bg-black p-x-8px p-y-2px text-10px text-white opacity-40"
>{{ currentIndex }} / {{ property.items.length }}</div
>
</div>

View File

@ -0,0 +1,48 @@
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
/** 广告魔方属性 */
export interface MagicCubeProperty {
// 上圆角
borderRadiusTop: number
// 下圆角
borderRadiusBottom: number
// 间隔
space: number
// 导航菜单列表
list: MagicCubeItemProperty[]
// 组件样式
style: ComponentStyle
}
/** 广告魔方项目属性 */
export interface MagicCubeItemProperty {
// 图标链接
imgUrl: string
// 链接
url: string
// 宽
width: number
// 高
height: number
// 上
top: number
// 左
left: number
}
// 定义组件
export const component = {
id: 'MagicCube',
name: '广告魔方',
icon: 'fluent:puzzle-cube-piece-20-filled',
property: {
borderRadiusTop: 0,
borderRadiusBottom: 0,
space: 0,
list: [],
style: {
bgType: 'color',
bgColor: '#fff',
marginBottom: 8
} as ComponentStyle
}
} as DiyComponent<MagicCubeProperty>

View File

@ -0,0 +1,73 @@
<template>
<div
class="relative"
:style="{ height: `${rowCount * CUBE_SIZE}px`, width: `${4 * CUBE_SIZE}px` }"
>
<div
v-for="(item, index) in property.list"
:key="index"
class="absolute"
:style="{
width: `${item.width * CUBE_SIZE - property.space * 2}px`,
height: `${item.height * CUBE_SIZE - property.space * 2}px`,
margin: `${property.space}px`,
top: `${item.top * CUBE_SIZE}px`,
left: `${item.left * CUBE_SIZE}px`
}"
>
<el-image
class="h-full w-full"
fit="cover"
:src="item.imgUrl"
:style="{
borderTopLeftRadius: `${property.borderRadiusTop}px`,
borderTopRightRadius: `${property.borderRadiusTop}px`,
borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
borderBottomRightRadius: `${property.borderRadiusBottom}px`
}"
>
<template #error>
<div class="image-slot">
<div
class="flex items-center justify-center"
:style="{
width: `${item.width * CUBE_SIZE}px`,
height: `${item.height * CUBE_SIZE}px`
}"
>
<Icon icon="ep-picture" color="gray" :size="CUBE_SIZE" />
</div>
</div>
</template>
</el-image>
</div>
</div>
</template>
<script setup lang="ts">
import { MagicCubeProperty } from './config'
/** 广告魔方 */
defineOptions({ name: 'MagicCube' })
const props = defineProps<{ property: MagicCubeProperty }>()
//
const CUBE_SIZE = 93.75
/**
* 计算方块的行数
* 行数用于计算魔方的总体高度存在以下情况
* 1. 没有数据时默认就只显示一行的高度
* 2. 底部的空白不算高度例如只有第一行有数据那么就只显示一行的高度
* 3. 顶部及中间的空白算高度例如一共有四行只有最后一行有数据那么也显示四行的高度
*/
const rowCount = computed(() => {
let count = 0
if (props.property.list.length > 0) {
//
count = Math.max(...props.property.list.map((item) => item.bottom))
}
// 0 1
return count + 1
})
</script>
<style scoped lang="scss"></style>

View File

@ -0,0 +1,76 @@
<template>
<ComponentContainerProperty v-model="formData.style">
<!-- 表单 -->
<el-form label-width="80px" :model="formData" class="m-t-8px">
<el-text tag="p"> 魔方设置 </el-text>
<el-text type="info" size="small"> 每格尺寸187 * 187 </el-text>
<MagicCubeEditor
class="m-y-16px"
v-model="formData.list"
:rows="4"
:cols="4"
@hot-area-selected="handleHotAreaSelected"
/>
<template v-for="(hotArea, index) in formData.list" :key="index">
<template v-if="selectedHotAreaIndex === index">
<el-form-item label="上传图片" :prop="`list[${index}].imgUrl`">
<UploadImg v-model="hotArea.imgUrl" height="80px" width="80px" />
</el-form-item>
<el-form-item label="链接" :prop="`list[${index}].url`">
<el-input v-model="hotArea.url" placeholder="请输入链接" />
</el-form-item>
</template>
</template>
<el-form-item label="上圆角" prop="borderRadiusTop">
<el-slider
v-model="formData.borderRadiusTop"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</el-form-item>
<el-form-item label="下圆角" prop="borderRadiusBottom">
<el-slider
v-model="formData.borderRadiusBottom"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</el-form-item>
<el-form-item label="间隔" prop="space">
<el-slider
v-model="formData.space"
:max="100"
:min="0"
show-input
input-size="small"
:show-input-controls="false"
/>
</el-form-item>
</el-form>
</ComponentContainerProperty>
</template>
<script setup lang="ts">
import { usePropertyForm } from '@/components/DiyEditor/util'
import { MagicCubeProperty } from '@/components/DiyEditor/components/mobile/MagicCube/config'
/** 广告魔方属性面板 */
defineOptions({ name: 'MagicCubeProperty' })
const props = defineProps<{ modelValue: MagicCubeProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
//
const selectedHotAreaIndex = ref(-1)
const handleHotAreaSelected = (_: any, index: number) => {
selectedHotAreaIndex.value = index
}
</script>
<style scoped lang="scss"></style>

View File

@ -105,7 +105,7 @@ export const PAGE_LIBS = [
{
name: '图文组件',
extended: true,
components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider']
components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider', 'MagicCube']
},
{ name: '商品组件', extended: true, components: ['ProductCard'] },
{

View File

@ -0,0 +1,270 @@
<template>
<div class="relative">
<table class="cube-table">
<!-- 底层魔方矩阵 -->
<tbody>
<tr v-for="(rowCubes, row) in cubes" :key="row">
<td
v-for="(cube, col) in rowCubes"
:key="col"
:class="['cube', { active: cube.active }]"
:style="{
width: `${cubeSize}px`,
height: `${cubeSize}px`
}"
@click="handleCubeClick(row, col)"
@mouseenter="handleCellHover(row, col)"
>
<Icon icon="ep-plus" />
</td>
</tr>
</tbody>
<!-- 顶层热区 -->
<div
v-for="(hotArea, index) in hotAreas"
:key="index"
class="hot-area"
:style="{
top: `${cubeSize * hotArea.top}px`,
left: `${cubeSize * hotArea.left}px`,
height: `${cubeSize * hotArea.height}px`,
width: `${cubeSize * hotArea.width}px`
}"
@click="handleHotAreaSelected(hotArea, index)"
@mouseover="exitHotAreaSelectMode"
>
<!-- 右上角热区删除按钮 -->
<div
v-if="selectedHotAreaIndex === index"
class="btn-delete"
@click="handleDeleteHotArea(index)"
>
<Icon icon="ep:circle-close-filled" />
</div>
{{ `${hotArea.width}×${hotArea.height}` }}
</div>
</table>
</div>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import * as vueTypes from 'vue-types'
import { Point, Rect, isContains, isOverlap, createRect } from './util'
//
//
// 1.
//
// 1.1
// 1.2
// 1.3
//
// 2.
defineOptions({ name: 'MagicCubeEditor' })
/**
* 方块
* @property active 是否激活
*/
type Cube = Point & { active: boolean }
//
const props = defineProps({
//
modelValue: vueTypes.array<any>().isRequired,
// 4
rows: propTypes.number.def(4),
// 4
cols: propTypes.number.def(4),
// px75px
cubeSize: propTypes.number.def(75)
})
//
const cubes = ref<Cube[][]>([])
//
watch(
() => [props.rows, props.cols],
() => {
//
cubes.value = []
if (!props.rows || !props.cols) return
//
for (let row = 0; row < props.rows; row++) {
cubes.value[row] = []
for (let col = 0; col < props.cols; col++) {
cubes.value[row].push({ x: col, y: row, active: false })
}
}
},
{ immediate: true }
)
//
const hotAreas = ref<Rect[]>([])
//
watch(
() => props.modelValue,
() => (hotAreas.value = props.modelValue || []),
{ immediate: true }
)
//
const hotAreaBeginCube = ref<Cube>()
//
const isHotAreaSelectMode = () => !!hotAreaBeginCube.value
/**
* 处理鼠标点击方块
*
* @param currentRow 当前行号
* @param currentCol 当前列号
*/
const handleCubeClick = (currentRow: number, currentCol: number) => {
const currentCube = cubes.value[currentRow][currentCol]
// 1
if (!isHotAreaSelectMode()) {
hotAreaBeginCube.value = currentCube
hotAreaBeginCube.value.active = true
return
}
// 2
hotAreas.value.push(createRect(hotAreaBeginCube.value!, currentCube))
//
exitHotAreaSelectMode()
//
let hotAreaIndex = hotAreas.value.length - 1
handleHotAreaSelected(hotAreas.value[hotAreaIndex], hotAreaIndex)
//
emitUpdateModelValue()
}
/**
* 处理鼠标经过方块
*
* @param currentRow 当前行号
* @param currentCol 当前列号
*/
const handleCellHover = (currentRow: number, currentCol: number) => {
//
if (!isHotAreaSelectMode()) return
//
const currentSelectedArea = createRect(
hotAreaBeginCube.value!,
cubes.value[currentRow][currentCol]
)
//
for (const hotArea of hotAreas.value) {
//
if (isOverlap(hotArea, currentSelectedArea)) {
//
exitHotAreaSelectMode()
return
}
}
//
eachCube((_, __, cube) => {
cube.active = isContains(currentSelectedArea, cube)
})
}
/**
* 处理热区删除
*
* @param index 热区索引
*/
const handleDeleteHotArea = (index: number) => {
hotAreas.value.splice(index, 1)
//
exitHotAreaSelectMode()
//
emitUpdateModelValue()
}
//
const emit = defineEmits(['update:modelValue', 'hotAreaSelected'])
//
const emitUpdateModelValue = () => emit('update:modelValue', hotAreas)
//
const selectedHotAreaIndex = ref(-1)
const handleHotAreaSelected = (hotArea: Rect, index: number) => {
selectedHotAreaIndex.value = index
emit('hotAreaSelected', hotArea, index)
}
/**
* 结束热区选择模式
*/
function exitHotAreaSelectMode() {
//
eachCube((_, __, cube) => {
if (cube.active) {
cube.active = false
}
})
//
hotAreaBeginCube.value = undefined
}
/**
* 迭代魔方矩阵
* @param callback 回调
*/
const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
for (let x = 0; x < cubes.value.length; x++) {
for (let y = 0; y < cubes.value[x].length; y++) {
callback(x, y, cubes.value[x][y])
}
}
}
</script>
<style lang="scss" scoped>
.cube-table {
position: relative;
border-spacing: 0;
border-collapse: collapse;
.cube {
border: 1px solid var(--el-border-color);
text-align: center;
color: var(--el-text-color-secondary);
cursor: pointer;
box-sizing: border-box;
&.active {
background: var(--el-color-primary-light-9);
}
}
.hot-area {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--el-color-primary);
background: var(--el-color-primary-light-8);
color: var(--el-color-primary);
box-sizing: border-box;
border-spacing: 0;
border-collapse: collapse;
cursor: pointer;
.btn-delete {
z-index: 1;
position: absolute;
top: -8px;
right: -8px;
height: 16px;
width: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #fff;
}
}
}
</style>

View File

@ -0,0 +1,72 @@
// 坐标点
export interface Point {
x: number
y: number
}
// 矩形
export interface Rect {
// 左上角 X 轴坐标
left: number
// 左上角 Y 轴坐标
top: number
// 右下角 X 轴坐标
right: number
// 右下角 Y 轴坐标
bottom: number
// 矩形宽度
width: number
// 矩形高度
height: number
}
/**
*
* @param a A
* @param b B
*/
export const isOverlap = (a: Rect, b: Rect): boolean => {
return (
a.left < b.left + b.width &&
a.left + a.width > b.left &&
a.top < b.top + b.height &&
a.height + a.top > b.top
)
}
/**
*
* @param hotArea
* @param point
*/
export const isContains = (hotArea: Rect, point: Point): boolean => {
return (
point.x >= hotArea.left &&
point.x < hotArea.right &&
point.y >= hotArea.top &&
point.y < hotArea.bottom
)
}
/**
*
*
*
* 1. 1
* 2. X 1
* 3. Y 1
* 4.
*
* @param a
* @param b
*/
export const createRect = (a: Point, b: Point): Rect => {
// 计算矩形的范围
const [left, left2] = [a.x, b.x].sort()
const [top, top2] = [a.y, b.y].sort()
const right = left2 + 1
const bottom = top2 + 1
const height = bottom - top
const width = right - left
return { left, right, top, bottom, height, width }
}

View File

@ -78,7 +78,6 @@ const handleTemplateItemChange = () => {
currentFormData.value = formData.value!.pages.find(
(page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
)
console.log(currentFormData.value)
}
//