工作記錄

20250526--樣式穿透失敗
20250527--下拉菜單展開不流暢
20250528--vue+vite 項目中圖片動態引入
20250607--數據響應失效
20250612-拷貝造成數據丟失問題。
20250613 關于 watch 只對引用類型有效，而對基本類型無效說明：
20250616--組件 setup 的賦值，在組件數據變更時不會重新賦值
20250618--頁面布局，它的滾動條可以在外側
<template>
  <div class="diy-page">
    <!-- 頭部 start -->
    <div class="page-header flex justify-between items-center">
      <div class="header-left">
        <button>&lt;&ensp;返回</button>
        <span class="header-left-current">當前頁面：模版 <i class="iconfont icon-bianji"></i></span>
      </div>
      <div class="header-right">
        <button class="header-right-btn">預覽</button>
        <button class="header-right-btn" @click="saveComp">保存</button>
        <button class="header-right-btn">保存并關閉</button>
      </div>
    </div>
    <!-- 頭部 end -->
    <!-- 主體 start -->
    <div class="diy-wrapper">
      <!-- 左側組件列表 -->
      <div class="left">
        <a-menu class="main-left-menu" :default-open-keys="['0']" :default-selected-keys="['0_2']">
          <a-sub-menu v-for="(category, index) of leftMenu" :key="`${index}`">
            <template #title>{{ category.title }}</template>
            <a-menu-item v-for="(item, index) of category.list" :key="index" @click="addDomLeft(item, 1)">
              <a-image class="subMenu-icon" src="@/assets/images/foot-004.png"></a-image>
              <p class="subMenu-name">{{ item.cname }}</p>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
      <!-- 中間可視化頁面 -->
      <div class="wrapper-con">
        <div class="content">
          <div class="contxt">
            <div class="overflowy">
              <div class="picture"><img
                  src="data:image/png;base64,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">
              </div>
              <div class="page-title on">
                首頁
                <div class="delete-box"></div>
                <div class="handle"></div>
              </div>
            </div>
            <div class="scrollCon">
              <div class="box">
                <div class="scroll-box noRepeat ysize">
                  <div class="dragArea list-group">
                  </div>
                </div>
              </div>
            </div>
            <div class="overflowy">
              <div class="page-foot">
                <div data-v-e618a5f8="" class="page-footer"
                  style="border:1px solid #f00;background-color:#fff;height: 50px;">
                  底部
                </div>
                <div class="delete-box"></div>
                <div class="handle"></div>
              </div>
            </div>
            <!-- 這是右上角的三個按鈕啊 -->
            <div data-v-6938943e="" class="defaultData">
              <button data-v-6938943e="" type="button"
                class="el-button data el-button--default el-button--small"><!----><!----><span>頁面設置</span></button><button
                data-v-6938943e="" type="button"
                class="el-button data el-button--default el-button--small"><!----><!----><span>另存模板</span></button><button
                data-v-6938943e="" type="button"
                class="el-button data el-button--default el-button--small"><!----><!----><span>重置</span></button>
            </div>
          </div>
        </div>
      </div>
      <!-- 右側編輯設置 -->
      <div class="right-box">
        <template v-for="(item, index) of rConfig" :key="index">
          <component :is="mConfigComp[item.configName]" :activeIndex="activeIndex" :num="item.num" :index="index">
          </component>
        </template>
      </div>
    </div>
    <!-- 主體 end -->
  </div>
</template>

<style scoped lang="less">
.diy-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
}

// 頭部
.page-header {
  flex-shrink: 0;
  height: 50px;
  padding: 0 20px;
  background-color: #0256FF;

  .header-left {
    color: #fff;

    .header-left-current {
      display: inline-block;
      padding-left: 15px;
      margin-left: 15px;
      border-left: 1px solid rgba(255, 255, 255, .6);
    }
  }

  .header-right {
    .header-right-btn {
      padding: 9px 15px;
      margin-left: 15px;
      font-size: 12px;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 4px;

      &:nth-child(3) {
        background: #fff;
        color: #0256FF;
      }
    }
  }

}

// -----------------
.diy-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 100% 1944px;
  min-width: 1100px;
  height: 100%;

  .left {
    min-width: 300px;
    max-width: 300px;
    border-radius: 4px;
    height: 100%;
  }

  .wrapper-con {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #f0f2f5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 20px;
    height: 100%;

    .content {
      position: relative;
      height: 100% 1227.42px;
      width: 100%;

      // 這個布局就很神奇，它可以決定 contxt 的高度，以及 defaultData 可以不設置 top 都沒有關系
      .contxt {
        // display: flex;
        // -webkit-box-orient: vertical;
        // -webkit-box-direction: normal;
        // -ms-flex-direction: column;
        flex-direction: column;
        overflow: hidden;
        height: 100%;


        .overflowy {
          margin-right: 4px;
        }

        .scrollCon {
          overflow-y: scroll;
          overflow-x: hidden;

          height: 60%;
          border: 1px solid #181b21;

          .box {
            width: 460px;
            margin: 0 auto;
            border: 1px solid rgb(6, 0, 0);

            .scroll-box {
              -webkit-box-flex: 1;
              -ms-flex: 1;
              flex: 1;
              background-color: #fff;
              width: 379px;
              margin: 0 auto;
              padding-top: 1px;
              min-height: 650px;

              .list-group {
                height: 1600px;
                background: linear-gradient(to bottom, #f0f2f5, #999);
                border: 2px solid #0256FF;
              }
            }
          }
        }

        .defaultData {
          cursor: pointer;
          position: absolute;
          left: 50%;
          margin-left: 245px;
          top: 0;

          .data {
            display: block;
            margin-top: 20px;
            color: #282828;
            background-color: #fff;
            width: 94px;
            text-align: center;
            height: 32px;
            border-radius: 3px;
            font-size: 12px;
            margin-left: 0 !important;
          }
        }
      }
    }
  }

  .right-box {
    max-width: 400px;
    min-width: 400px;
    height: 100%;
    border-radius: 4px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
}
</style>