smart-flow/yudao-ui-admin-vben
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vben into dev

Browse Source
This commit is contained in:
xingyu4j
2025-11-03 18:09:01 +08:00
parent 56cd619e3c f0f738a368
commit bd38cf4c7d
3 changed files with 48 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
View File

@@ -93,15 +93,11 @@ const handleDeleteComponent = () => {
};
</script>
<template>
<div class="component" :class="[{ active }]">
<div
:style="{
...style,
}"
>
<div class="component relative cursor-move" :class="[{ active }]">
<div :style="style">
<component :is="component.id" :property="component.property" />
</div>
<div class="component-wrap">
<div class="component-wrap absolute left-[-2px] top-0 block h-full w-full">
<!-- 左侧：组件名（悬浮的小贴条） -->
<div class="component-name" v-if="component.name">
{{ component.name }}
@@ -150,19 +146,8 @@ $hover-border-width: 1px;
$name-position: -85px;
$toolbar-position: -55px;
/* 组件 */
.component {
position: relative;
cursor: move;
.component-wrap {
position: absolute;
top: 0;
left: -$active-border-width;
display: block;
width: 100%;
height: 100%;
/* 鼠标放到组件上时 */
&:hover {
border: $hover-border-width dashed var(--el-color-primary);
@@ -228,7 +213,7 @@ $toolbar-position: -55px;
}
}
/* 组件选中时 */
/* 选中状态 */
&.active {
margin-bottom: 4px;

72
apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
View File

@@ -61,7 +61,10 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
</script>
<template>
<ElAside class="editor-left" width="261px">
<ElAside
class="editor-left z-[1] shrink-0 select-none shadow-[8px_0_8px_-8px_rgb(0_0_0/0.12)]"
width="261px"
>
<ElScrollbar>
<ElCollapse v-model="extendGroups">
<ElCollapseItem
@@ -71,7 +74,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
:title="group.name"
>
<draggable
class="component-container"
class="flex flex-wrap items-center"
ghost-class="draggable-ghost"
item-key="index"
:list="group.components"
@@ -83,9 +86,18 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
>
<template #item="{ element }">
<div>
<div class="drag-placement">组件放置区域</div>
<div class="component">
<IconifyIcon :icon="element.icon" :size="32" />
<div class="hidden text-white">组件放置区域</div>
<div
class="component flex h-[86px] w-[86px] cursor-move flex-col items-center justify-center border-b border-r [&:nth-of-type(3n)]:border-r-0"
:style="{
borderColor: 'var(--el-border-color-lighter)',
}"
>
<IconifyIcon
:icon="element.icon"
:size="32"
class="mb-1 text-gray-500"
/>
<span class="mt-1 text-xs">{{ element.name }}</span>
</div>
</div>
@@ -99,11 +111,6 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
<style scoped lang="scss">
.editor-left {
z-index: 1;
flex-shrink: 0;
user-select: none;
box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
:deep(.el-collapse) {
border-top: none;
}
@@ -124,50 +131,19 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
border-bottom: none;
}
.component-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.component {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 86px;
height: 86px;
cursor: move;
border-right: 1px solid var(--el-border-color-lighter);
border-bottom: 1px solid var(--el-border-color-lighter);
.el-icon {
margin-bottom: 4px;
color: gray;
}
}
/* 组件 hover 和 active 状态（需要 CSS 变量）*/
.component.active,
.component:hover {
color: var(--el-color-white);
background: var(--el-color-primary);
.el-icon {
:deep(.iconify) {
color: var(--el-color-white);
}
}
.component:nth-of-type(3n) {
border-right: none;
}
}
/* 拖拽占位提示，默认不显示 */
.drag-placement {
display: none;
color: #fff;
}
/* 拖拽区域全局样式 */
.drag-area {
/* 拖拽到手机区域时的样式 */
.draggable-ghost {
@@ -203,14 +179,12 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
background: #5487df;
}
/* 拖拽时隐藏组件 */
.component {
display: none;
display: none; /* 拖拽时隐藏组件 */
}
/* 拖拽时显示占位提示 */
.drag-placement {
display: block;
.hidden {
display: block !important; /* 拖拽时显示占位提示 */
}
}
}

88
apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
View File

@@ -304,9 +304,15 @@ onMounted(() => {
</script>
<template>
<div>
<ElContainer class="editor">
<ElContainer class="editor flex h-full flex-col">
<!-- 顶部：工具栏 -->
<ElHeader class="editor-header">
<ElHeader
class="editor-header flex !h-[42px] items-center justify-between !border-b !p-0"
:style="{
backgroundColor: 'var(--el-bg-color)',
borderBottomColor: 'var(--el-border-color)',
}"
>
<!-- 左侧操作区 -->
<slot name="toolBarLeft"></slot>
<!-- 中心操作区 -->
@@ -334,7 +340,7 @@ onMounted(() => {
</ElHeader>
<!-- 中心区域 -->
<ElContainer class="editor-container">
<ElContainer class="editor-container h-[calc(100vh-135px)]">
<!-- 左侧：组件库（ComponentLibrary） -->
<ElAside width="261px" class="editor-left">
<ComponentLibrary
@@ -344,11 +350,15 @@ onMounted(() => {
/>
</ElAside>
<!-- 中心：设计区域（ComponentContainer） -->
<div class="editor-center page-prop-area" @click="handlePageSelected">
<div
class="editor-center page-prop-area relative mt-4 flex w-full flex-1 flex-col justify-center overflow-hidden"
:style="{ backgroundColor: 'var(--app-content-bg-color)' }"
@click="handlePageSelected"
>
<!-- 手机顶部 -->
<div class="editor-design-top">
<div class="editor-design-top mx-auto flex w-[375px] flex-col">
<!-- 手机顶部状态栏 -->
<img alt="" class="status-bar" :src="statusBarImg" />
<img alt="" class="h-5 w-[375px] bg-white" :src="statusBarImg" />
<!-- 手机顶部导航栏 -->
<ComponentContainer
v-if="showNavigationBar"
@@ -415,7 +425,7 @@ onMounted(() => {
<!-- 手机底部导航 -->
<div
v-if="showTabBar"
class="editor-design-bottom component cursor-pointer"
class="editor-design-bottom component mx-auto w-[375px] cursor-pointer"
>
<ComponentContainer
:active="selectedComponent?.id === tabBarComponent.id"
@@ -425,7 +435,9 @@ onMounted(() => {
/>
</div>
<!-- 固定布局的组件 操作按钮区 -->
<div class="fixed-component-action-group">
<div
class="fixed-component-action-group absolute right-4 top-0 flex flex-col gap-2"
>
<ElTag
v-if="showPageConfig"
:effect="
@@ -467,7 +479,7 @@ onMounted(() => {
<!-- 右侧：属性面板（ComponentContainerProperty） -->
<ElAside
v-if="selectedComponent?.property"
class="editor-right"
class="editor-right shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
width="350px"
>
<ElCard
@@ -516,22 +528,8 @@ onMounted(() => {
/* 手机宽度 */
$phone-width: 375px;
/* 根节点样式 */
.editor {
display: flex;
flex-direction: column;
height: 100%;
/* 顶部：工具栏 */
.editor-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 42px;
padding: 0;
background-color: var(--el-bg-color);
border-bottom: solid 1px var(--el-border-color);
/* 隐藏工具栏按钮的边框 */
:deep(.el-radio-button__inner),
:deep(.el-button) {
@@ -543,14 +541,8 @@ $phone-width: 375px;
/* 中心操作区 */
.editor-container {
height: calc(100vh - 135px);
/* 右侧属性面板 */
:deep(.editor-right) {
flex-shrink: 0;
overflow: hidden;
box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
/* 属性面板顶部：减少内边距 */
:deep(.el-card__header) {
padding: 8px 16px;
@@ -579,37 +571,6 @@ $phone-width: 375px;
/* 中心区域 */
.editor-center {
position: relative;
display: flex;
flex: 1 1 0;
flex-direction: column;
justify-content: center;
width: 100%;
margin: 16px 0 0;
overflow: hidden;
background-color: var(--app-content-bg-color);
/* 手机顶部 */
.editor-design-top {
display: flex;
flex-direction: column;
width: $phone-width;
margin: 0 auto;
/* 手机顶部状态栏 */
.status-bar {
width: $phone-width;
height: 20px;
background-color: #fff;
}
}
/* 手机底部导航 */
.editor-design-bottom {
width: $phone-width;
margin: 0 auto;
}
/* 手机页面编辑区域 */
:deep(.editor-design-center) {
width: 100%;
@@ -632,13 +593,6 @@ $phone-width: 375px;
/* 固定布局的组件 操作按钮区 */
.fixed-component-action-group {
position: absolute;
top: 0;
right: 16px;
display: flex;
flex-direction: column;
gap: 8px;
:deep(.el-tag) {
border: none;
box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);