营销：优化装修编辑器样式

0b0ba1f3 · owen · 984351fb · 0b0ba1f3 · 0b0ba1f3 · 0b0ba1f3
Commit 0b0ba1f3 authored Nov 05, 2023 by owen
4 changed files
--- a/src/components/DiyEditor/components/ComponentContainer.vue
+++ b/src/components/DiyEditor/components/ComponentContainer.vue
 <template>
  <div
    :style="{
-      ...style,
+      ...style
-      background: property.bgType === 'color' ? property.bgColor : `url(${property.bgImg})`
    }"
  >
    <slot></slot>
@@ -18,7 +17,7 @@ import { ComponentStyle } from '@/components/DiyEditor/util'
 */
 defineOptions({ name: 'ComponentContainer' })
-const props = defineProps<{ property: ComponentStyle }>()
+const props = defineProps<{ property: ComponentStyle | undefined }>()
 const style = computed(() => {
  if (!props.property) {
@@ -37,7 +36,9 @@ const style = computed(() => {
    borderTopRightRadius: `${props.property.borderTopRightRadius || 0}px`,
    borderBottomRightRadius: `${props.property.borderBottomRightRadius || 0}px`,
    borderBottomLeftRadius: `${props.property.borderBottomLeftRadius || 0}px`,
-    overflow: 'hidden'
+    overflow: 'hidden',
+    background:
+      props.property.bgType === 'color' ? props.property.bgColor : `url(${props.property.bgImg})`
  }
 })
 </script>

--- a/src/components/DiyEditor/components/ComponentLibrary.vue
+++ b/src/components/DiyEditor/components/ComponentLibrary.vue
@@ -11,6 +11,7 @@
          <draggable
            class="component-container"
            ghost-class="draggable-ghost"
+            item-key="index"
            :list="group.components"
            :sort="false"
            :group="{ name: 'component', pull: 'clone', put: false }"

--- a/src/components/DiyEditor/components/mobile/SearchBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
@@ -42,7 +42,6 @@ defineProps<{ property: SearchProperty }>()
 <style scoped lang="scss">
 .search-bar {
-  width: 375px;
  /* 搜索框 */
  .inner {
    position: relative;

--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -33,7 +33,6 @@
      <ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0" />
      <!-- 中心设计区域 -->
      <div class="editor-center page-prop-area" @click="handlePageSelected">
-        <div class="editor-design">
        <!-- 手机顶部 -->
        <div class="editor-design-top">
          <!-- 手机顶部状态栏 -->
@@ -51,10 +50,11 @@
          />
        </div>
        <!-- 手机页面编辑区域 -->
-          <el-scrollbar class="editor-design-center" height="100%" view-class="page-prop-area">
+        <el-scrollbar
-            <div
+          height="100%"
-              class="phone-container"
+          wrap-class="editor-design-center page-prop-area"
-              :style="{
+          view-class="phone-container"
+          :view-style="{
            backgroundColor: pageConfigComponent.property.backgroundColor,
            backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
          }"
@@ -71,21 +71,22 @@
            @change="handleComponentChange"
          >
            <template #item="{ element, index }">
-                  <div class="component-container" @click="handleComponentSelected(element, index)">
+              <div class="component" @click="handleComponentSelected(element, index)">
-                    <!-- 左侧组件名 -->
-                    <div
-                      :class="['component-name', { active: selectedComponentIndex === index }]"
-                      v-if="element.name"
-                    >
-                      {{ element.name }}
-                    </div>
                <!-- 组件内容区 -->
-                    <div :class="['component', { active: selectedComponentIndex === index }]">
+                <ComponentContainer :property="element.property.style">
                  <component
                    :is="element.id"
                    :property="element.property"
                    :data-type="element.id"
                  />
+                </ComponentContainer>
+                <div :class="['component-wrap', { active: selectedComponentIndex === index }]">
+                  <!-- 左侧组件名 -->
+                  <div
+                    :class="['component-name', { active: selectedComponentIndex === index }]"
+                    v-if="element.name"
+                  >
+                    {{ element.name }}
                  </div>
                  <!-- 左侧：组件操作工具栏 -->
                  <div
@@ -122,9 +123,9 @@
                    </el-button-group>
                  </div>
                </div>
+              </div>
            </template>
          </draggable>
-            </div>
        </el-scrollbar>
        <!-- 手机底部导航 -->
        <div
@@ -139,7 +140,6 @@
          <TabBar :property="tabBarComponent.property" @click="handleTabBarSelected" />
        </div>
      </div>
-      </div>
      <!-- 右侧属性面板 -->
      <el-aside class="editor-right" width="350px" v-if="selectedComponent?.property">
        <el-card
@@ -383,6 +383,7 @@ onMounted(() => setDefaultSelectedComponent())
 <style lang="scss" scoped>
 /* 手机宽度 */
 $phone-width: 375px;
+$toolbar-height: 42px;
 /* 根节点样式 */
 .editor {
  height: 100%;
@@ -394,7 +395,7 @@ $phone-width: 375px;
    display: flex;
    align-items: center;
    justify-content: space-between;
-    height: auto;
+    height: $toolbar-height;
    padding: 0;
    border-bottom: solid 1px var(--el-border-color);
    background-color: var(--el-bg-color);
@@ -416,12 +417,14 @@ $phone-width: 375px;
  /* 中心操作区 */
  .editor-container {
    height: calc(
-      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 42px
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) -
+        $toolbar-height
    );
    /* 右侧属性面板 */
    .editor-right {
      flex-shrink: 0;
      box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
+      overflow: hidden;
      /* 属性面板顶部：减少内边距 */
      :deep(.el-card__header) {
        padding: 8px 16px;
@@ -440,29 +443,24 @@ $phone-width: 375px;
    /* 中心区域 */
    .editor-center {
+      position: relative;
      flex: 1 1 0;
-      padding: 16px 0;
      background-color: var(--app-content-bg-color);
      display: flex;
-      justify-content: center;
-      /* 中心设计区域 */
-      .editor-design {
-        position: relative;
-        height: 100%;
-        width: 100%;
-        display: flex;
      flex-direction: column;
-        align-items: center;
+      justify-content: center;
+      margin: 16px 0 0 0;
      overflow: hidden;
+      width: 100%;
      /* 组件 */
      .component {
-          border: 1px solid #fff;
        width: $phone-width;
        cursor: move;
        /* 鼠标放到组件上时 */
        &:hover {
          border: 1px dashed var(--el-color-primary);
+          box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
        }
      }
      /* 组件选中 */
@@ -472,6 +470,7 @@ $phone-width: 375px;
      /* 手机顶部 */
      .editor-design-top {
        width: $phone-width;
+        margin: 0 auto;
        /* 手机顶部状态栏 */
        .status-bar {
          height: 20px;
@@ -482,33 +481,42 @@ $phone-width: 375px;
      /* 手机底部导航 */
      .editor-design-bottom {
        width: $phone-width;
+        margin: 0 auto;
      }
      /* 手机页面编辑区域 */
-        .editor-design-center {
+      :deep(.editor-design-center) {
        width: 100%;
-          flex: 1 1 0;
-          :deep(.el-scrollbar__view) {
-            height: 100%;
-          }
        /* 主体内容 */
        .phone-container {
-            height: 100%;
-            box-sizing: border-box;
          position: relative;
          background-repeat: no-repeat;
          background-size: 100% 100%;
+          height: 100%;
          width: $phone-width;
          margin: 0 auto;
          .drag-area {
            height: 100%;
+            width: 100%;
          }
-            /* 组件容器（左侧：组件名称，中间：组件，右侧：操作工具栏） */
+          .component {
-            .component-container {
-              width: 100%;
            position: relative;
+            cursor: move;
+            .component-wrap {
+              display: none;
+              position: absolute;
+              left: -2px;
+              top: 0;
+              width: 100%;
+              height: 100%;
+              &.active {
+                display: block;
+                border: 2px solid var(--el-color-primary);
+                box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
+              }
              /* 左侧：组件名称 */
              .component-name {
                position: absolute;
@@ -518,7 +526,7 @@ $phone-width: 375px;
                height: 25px;
                background: #fff;
                font-size: 12px;
-                left: -85px;
+                left: -88px;
                top: 0;
                box-shadow:
                  0 0 4px #00000014,
@@ -548,7 +556,7 @@ $phone-width: 375px;
              .component-toolbar {
                position: absolute;
                top: 0;
-                right: -57px;
+                right: -55px;
                /* 左侧小三角 */
                &:before {
                  position: absolute;