From 6fa5d353640083c21c8df5e125fa46980c7de93c Mon Sep 17 00:00:00 2001
From: ShawnPhang <palxiao@vip.qq.com>
Date: Tue, 26 Mar 2024 11:09:12 +0800
Subject: [PATCH] fix: scrollbar & lineGuides

---
 .gitignore                                    |   1 +
 src/assets/styles/main.less                   |  15 ++-
 src/components/business/moveable/Moveable.vue |  11 +-
 .../modules/layout/designBoard/index.vue      | 106 +++++++++---------
 .../modules/layout/zoomControl/data.ts        |   2 +-
 .../modules/layout/zoomControl/index.vue      |   7 +-
 src/components/modules/panel/stylePanel.vue   |  10 +-
 .../modules/panel/wrap/CompListWrap.vue       |   5 +
 .../modules/panel/wrap/GraphListWrap.vue      |   5 +
 .../modules/panel/wrap/TempListWrap.vue       |   9 +-
 .../modules/panel/wrap/TextListWrap.vue       |  17 ++-
 .../panel/wrap/components/classHeader.vue     |   7 +-
 .../panel/wrap/components/photoList.vue       |   5 +
 src/config.ts                                 |   2 +-
 src/store/modules/design/actions.ts           |   3 +-
 src/views/Index.vue                           |   4 +-
 16 files changed, 122 insertions(+), 87 deletions(-)

diff --git a/.gitignore b/.gitignore
index f0e3fe4..3496be6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 node_modules
 /dist
 config.json
+/.vite
 
 screenshot/node_modules/
 screenshot/dist/
diff --git a/src/assets/styles/main.less b/src/assets/styles/main.less
index 96f5033..3296d29 100644
--- a/src/assets/styles/main.less
+++ b/src/assets/styles/main.less
@@ -26,9 +26,14 @@ body {
   border-style: solid;
   border-color: #e5e7eb;
   // font-size: 14px;
-  scrollbar-width: none; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
+  // scrollbar-width: none; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
   -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
 }
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: none;
+  }
+}
 // html ::-webkit-scrollbar {
 //   display: none; /* Chrome Safari */
 // }
@@ -40,12 +45,13 @@ body {
 }
 &::-webkit-scrollbar-thumb {
   border-radius: 3px;
-  background-color: #ccd4de;
+  background-color: #d9dcdf;
+  cursor: pointer;
   // box-shadow: 0 0 1px hsl(0deg 0% 100% / 50%);
 }
 &::-webkit-scrollbar-track {
-  background-color: #f0f1f3;
-  // background-color: transparent;
+  // background-color: #f0f1f3;
+  background-color: transparent;
   // border-radius: 3px;
 }
 
@@ -129,6 +135,7 @@ p {
   position: fixed;
   z-index: 99999;
   pointer-events: none;
+  opacity: .9;
 }
 .hide {
   opacity: 0 !important;
diff --git a/src/components/business/moveable/Moveable.vue b/src/components/business/moveable/Moveable.vue
index a87b12d..0a80932 100644
--- a/src/components/business/moveable/Moveable.vue
+++ b/src/components/business/moveable/Moveable.vue
@@ -364,10 +364,13 @@ export default defineComponent({
         if (this.resizeTempData) {
           this.$store.commit('resize', this.resizeTempData)
           this.resizeTempData = null
-          setTimeout(async () => {
-            await this.$nextTick()
-            this.moveable.updateRect()
-          }, 10)
+          // await this.$nextTick()
+          this.moveable.updateRect()
+          // 临时处理缩放后细线问题
+          this.$store.commit('setShowMoveable', false)
+          setTimeout(() => {
+            this.$store.commit('setShowMoveable', true)
+          }, 10);
         }
         try {
           if (this.dActiveElement.type === 'w-text') {
diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue
index 749e6c3..e04dd91 100644
--- a/src/components/modules/layout/designBoard/index.vue
+++ b/src/components/modules/layout/designBoard/index.vue
@@ -1,61 +1,61 @@
 <template>
-  <div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px' }">
-    <!-- <el-scrollbar> -->
-    <div
-      id="out-page"
-      class="out-page"
-      :style="{
-        width: (dPage.width * dZoom) / 100 + 120 + 'px',
-        height: (dPage.height * dZoom) / 100 + 120 + 'px',
-        opacity: 1 - (dZoom < 100 ? dPage.tag : 0),
-      }"
-    >
-      <slot />
+  <div id="main">
+    <div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px', minWidth: (dPage.width * dZoom) / 100 + 120 + 'px' }" >
       <div
-        :id="pageDesignCanvasId"
-        class="design-canvas"
-        :data-type="dPage.type"
-        :data-uuid="dPage.uuid"
+        id="out-page"
+        class="out-page"
         :style="{
-          width: dPage.width + 'px',
-          height: dPage.height + 'px',
-          transform: 'scale(' + dZoom / 100 + ')',
-          transformOrigin: (dZoom >= 100 ? 'center' : 'left') + ' top',
-          backgroundColor: dPage.backgroundColor,
-          backgroundImage: `url(${dPage?.backgroundImage})`,
-          backgroundSize: dPage?.backgroundTransform?.x ? 'auto' : 'cover',
-          backgroundPositionX: (dPage?.backgroundTransform?.x || 0) + 'px',
-          backgroundPositionY: (dPage?.backgroundTransform?.y || 0) + 'px',
-          opacity: dPage.opacity + (dZoom < 100 ? dPage.tag : 0),
+          width: (dPage.width * dZoom) / 100 + 120 + 'px',
+          height: (dPage.height * dZoom) / 100 + 120 + 'px',
+          opacity: 1 - (dZoom < 100 ? dPage.tag : 0),
         }"
-        @mousemove="dropOver($event)"
-        @drop="drop($event)"
-        @mouseup="drop($event)"
       >
-        <!-- <grid-size /> -->
+        <slot />
+        <div
+          :id="pageDesignCanvasId"
+          class="design-canvas"
+          :data-type="dPage.type"
+          :data-uuid="dPage.uuid"
+          :style="{
+            width: dPage.width + 'px',
+            height: dPage.height + 'px',
+            transform: 'scale(' + dZoom / 100 + ')',
+            transformOrigin: (dZoom >= 100 ? 'center' : 'left') + ' top',
+            backgroundColor: dPage.backgroundColor,
+            backgroundImage: `url(${dPage?.backgroundImage})`,
+            backgroundSize: dPage?.backgroundTransform?.x ? 'auto' : 'cover',
+            backgroundPositionX: (dPage?.backgroundTransform?.x || 0) + 'px',
+            backgroundPositionY: (dPage?.backgroundTransform?.y || 0) + 'px',
+            opacity: dPage.opacity + (dZoom < 100 ? dPage.tag : 0),
+          }"
+          @mousemove="dropOver($event)"
+          @drop="drop($event)"
+          @mouseup="drop($event)"
+        >
+          <!-- <grid-size /> -->
 
-        <!-- :class="{
-            layer: true,
-            'layer-active': getIsActive(layer.uuid),
-            'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid,
-          }" -->
-        <component :is="layer.type" v-for="layer in getlayers()" :id="layer.uuid" :key="layer.uuid" :class="['layer', { 'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid, 'layer-no-hover': dActiveElement.uuid === layer.uuid }]" :data-title="layer.type" :params="layer" :parent="dPage" :data-type="layer.type" :data-uuid="layer.uuid">
-          <template v-if="layer.isContainer">
-            <!-- :class="{
-                layer: true,
-                'layer-active': getIsActive(widget.uuid),
-                'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent,
-                'layer-hover': widget.uuid === dHoverUuid,
-              }" -->
-            <component :is="widget.type" v-for="widget in getChilds(layer.uuid)" :key="widget.uuid" child :class="['layer', { 'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent }]" :data-title="widget.type" :params="widget" :parent="layer" :data-type="widget.type" :data-uuid="widget.uuid" />
-          </template>
-        </component>
+          <!-- :class="{
+              layer: true,
+              'layer-active': getIsActive(layer.uuid),
+              'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid,
+            }" -->
+          <component :is="layer.type" v-for="layer in getlayers()" :id="layer.uuid" :key="layer.uuid" :class="['layer', { 'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid, 'layer-no-hover': dActiveElement.uuid === layer.uuid }]" :data-title="layer.type" :params="layer" :parent="dPage" :data-type="layer.type" :data-uuid="layer.uuid">
+            <template v-if="layer.isContainer">
+              <!-- :class="{
+                  layer: true,
+                  'layer-active': getIsActive(widget.uuid),
+                  'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent,
+                  'layer-hover': widget.uuid === dHoverUuid,
+                }" -->
+              <component :is="widget.type" v-for="widget in getChilds(layer.uuid)" :key="widget.uuid" child :class="['layer', { 'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent }]" :data-title="widget.type" :params="widget" :parent="layer" :data-type="widget.type" :data-uuid="widget.uuid" />
+            </template>
+          </component>
 
-        <!-- <ref-line v-if="dSelectWidgets.length === 0" /> -->
-        <!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
+          <!-- <ref-line v-if="dSelectWidgets.length === 0" /> -->
+          <!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
+        </div>
       </div>
     </div>
-    <!-- </el-scrollbar> -->
   </div>
 </template>
 
@@ -333,13 +333,17 @@ function getChilds(uuid: string) {
 </script>
 
 <style lang="less" scoped>
+#main {
+  overflow: auto; position: relative;
+}
 #page-design {
-  height: 100%;
+  scrollbar-width: none;
+  min-height: 100%;
   // display: flex;
   // align-items: center;
   overflow: auto;
   position: relative;
-  width: 100%;
+  // width: 100%;
   .out-page {
     margin: 0 auto;
     padding: 60px;
diff --git a/src/components/modules/layout/zoomControl/data.ts b/src/components/modules/layout/zoomControl/data.ts
index d2d3936..50660fb 100644
--- a/src/components/modules/layout/zoomControl/data.ts
+++ b/src/components/modules/layout/zoomControl/data.ts
@@ -34,7 +34,7 @@ export const ZoomList: TZoomData[] = [
     value: 200,
   },
   {
-    text: '最佳尺寸',
+    text: '适应屏幕',
     value: -1,
     // icon: 'icon-best-size',
   },
diff --git a/src/components/modules/layout/zoomControl/index.vue b/src/components/modules/layout/zoomControl/index.vue
index cd3518d..79c08cd 100644
--- a/src/components/modules/layout/zoomControl/index.vue
+++ b/src/components/modules/layout/zoomControl/index.vue
@@ -248,10 +248,9 @@ async function autoFixTop() {
   const presetPadding = 60
   const el = document.getElementById('out-page')
   if (!el) return
-  // const clientHeight = document.body.clientHeight - 54
-  
-  const parentHeight = (el.offsetParent as HTMLElement).offsetHeight - 54
-  let padding = (parentHeight - el.offsetHeight) / 2
+  const clientHeight = window.innerHeight - 54
+  // const parentHeight = (el.offsetParent as HTMLElement).offsetHeight - 54
+  let padding = (clientHeight - el.offsetHeight) / 2
   if (typeof curAction.value === 'undefined') {
     padding += presetPadding / 2
   }
diff --git a/src/components/modules/panel/stylePanel.vue b/src/components/modules/panel/stylePanel.vue
index 7cb3e99..b6e38fe 100644
--- a/src/components/modules/panel/stylePanel.vue
+++ b/src/components/modules/panel/stylePanel.vue
@@ -78,23 +78,23 @@ function layerChange(newLayer: Record<string, any>[]) {
 </script>
 
 <style lang="less" scoped>
-@color0: #ffffff; // Appears 5 times
-@color1: #999999; // Appears 3 times
-@color2: #d7d7d7; // Appears 2 times
+@color0: #ffffff;
+@color1: #999999;
+@background-color-transparent: rgba(0,0,0,.08);
 
 #style-panel ::-webkit-scrollbar {
   display: none; /* Chrome Safari */
 }
 #style-panel {
   background-color: @color0;
-  border-left: 1px solid @color2;
+  border-left: 1px solid @background-color-transparent;
   display: flex;
   flex-direction: column;
   height: 100%;
   position: relative;
   width: 280px;
   .style-tab {
-    box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: row;
     text-align: center;
diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue
index 270e0be..b50e412 100644
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/src/components/modules/panel/wrap/CompListWrap.vue
@@ -257,6 +257,11 @@ defineExpose({
 .infinite-list {
   height: 100%;
   padding-bottom: 150px;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+}
+.infinite-list::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
 }
 .list {
   width: 100%;
diff --git a/src/components/modules/panel/wrap/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue
index 7d16256..2b3bd2a 100644
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/src/components/modules/panel/wrap/GraphListWrap.vue
@@ -209,6 +209,11 @@ export default defineComponent({
 .infinite-list {
   height: 100%;
   padding-bottom: 150px;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+}
+.infinite-list::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
 }
 .list {
   width: 100%;
diff --git a/src/components/modules/panel/wrap/TempListWrap.vue b/src/components/modules/panel/wrap/TempListWrap.vue
index df968da..28a9bd8 100644
--- a/src/components/modules/panel/wrap/TempListWrap.vue
+++ b/src/components/modules/panel/wrap/TempListWrap.vue
@@ -2,7 +2,7 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-27 15:16:07
  * @Description: 模板列表
- * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @Date: 2024-03-06 21:16:00
 -->
 <template>
@@ -11,7 +11,7 @@
     <el-divider v-show="state.title" style="margin-top: 1.7rem" content-position="left">
       <span style="font-weight: bold">{{ state.title }}</span>
     </el-divider>
-
+    
     <ul ref="listRef" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
       <img-water-fall :listData="state.list" @select="selectItem" />
       <div v-show="state.loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
@@ -192,6 +192,11 @@ defineExpose({
   height: 100%;
   margin-top: 1rem;
   padding-bottom: 150px;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+}
+.infinite-list::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
 }
 // .list {
 //   width: 100%;
diff --git a/src/components/modules/panel/wrap/TextListWrap.vue b/src/components/modules/panel/wrap/TextListWrap.vue
index fa95fcc..e15c67a 100644
--- a/src/components/modules/panel/wrap/TextListWrap.vue
+++ b/src/components/modules/panel/wrap/TextListWrap.vue
@@ -11,7 +11,6 @@
         }"
         draggable="true"
         @click="selectBasicText(item)"
-        @dragstart="dragStart($event, item)"
       >
         {{ item.text }}
       </div>
@@ -25,7 +24,7 @@
 <script lang="ts" setup>
 // const NAME = 'text-list-wrap'
 
-import wText from '../../widgets/wText/wText.vue'
+import { wTextSetting } from '../../widgets/wText/wTextSetting'
 
 import { useStore } from 'vuex'
 
@@ -40,7 +39,7 @@ const store = useStore()
 
 const selectBasicText = (item: TBasicTextData) => {
   store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  let setting = JSON.parse(JSON.stringify(wText.setting))
+  let setting = JSON.parse(JSON.stringify(wTextSetting))
   setting.text = '双击编辑文字' // item.text
   setting.width = item.fontSize * setting.text.length
   setting.fontSize = item.fontSize
@@ -49,13 +48,12 @@ const selectBasicText = (item: TBasicTextData) => {
   setting.left = pW / 2 - item.fontSize * 3
   setting.top = pH / 2 - item.fontSize / 2
   store.dispatch('addWidget', setting)
-  // addWidget(setting)
 }
 
-const dragStart = (_: MouseEvent, item: any) => {
-  store.commit('setDraging', true)
-  store.commit('selectItem', { data: { value: item }, type: 'text' })
-}
+// const dragStart = (_: MouseEvent, item: any) => {
+//   store.commit('setDraging', true)
+//   store.commit('selectItem', { data: { value: item }, type: 'text' })
+// }
 
 const basicTextList: TBasicTextData[] = [
   // {
@@ -86,7 +84,6 @@ const basicTextList: TBasicTextData[] = [
 ]
 defineExpose({
   selectBasicText,
-  dragStart,
 })
 
 // ...mapActions(['addWidget'])
@@ -106,7 +103,7 @@ defineExpose({
     .basic-text-item {
       color: #33383e;
       background-color: #f1f2f4;
-      cursor: grab;
+      cursor: pointer;
       user-select: none;
       border-bottom: 1px solid rgba(255, 255, 255, 0);
       border-top: 1px solid rgba(255, 255, 255, 0);
diff --git a/src/components/modules/panel/wrap/components/classHeader.vue b/src/components/modules/panel/wrap/components/classHeader.vue
index fdf025a..c578743 100644
--- a/src/components/modules/panel/wrap/components/classHeader.vue
+++ b/src/components/modules/panel/wrap/components/classHeader.vue
@@ -27,7 +27,7 @@ export type TClassHeaderTypeData = {
 }
 
 type TProps = {
-  types: TClassHeaderTypeData[]
+  types?: TClassHeaderTypeData[]
   isBack?: boolean
 }
 
@@ -56,6 +56,11 @@ defineExpose({ select, back })
     height: 100%;
     overflow: auto;
     padding-bottom: 100px;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+  }
+  &__wrap::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
   }
 }
 .types {
diff --git a/src/components/modules/panel/wrap/components/photoList.vue b/src/components/modules/panel/wrap/components/photoList.vue
index 5db9a6b..6bc4a83 100644
--- a/src/components/modules/panel/wrap/components/photoList.vue
+++ b/src/components/modules/panel/wrap/components/photoList.vue
@@ -218,6 +218,11 @@ defineExpose({
 .img-list-wrap {
   height: 100%;
   overflow: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+}
+.img-list-wrap::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
 }
 .img {
   transform-origin: center;
diff --git a/src/config.ts b/src/config.ts
index 9a5862a..f1d88d1 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -13,7 +13,7 @@ export default {
   // API_URL: isDev ? 'http://localhost:9998' : '${API}',
   API_URL: 'https://palxp.cn:8887', // 服务端地址
   SCREEN_URL: isDev ? 'http://localhost:7001' : '#{SCREEN_URL}', // 截图服务地址
-  IMG_URL: 'https://store.palxp.com/', // 七牛云资源地址
+  IMG_URL: 'https://store.palxp.cn/', // 七牛云资源地址
   // ICONFONT_URL: '//at.alicdn.com/t/font_3223711_74mlzj4jdue.css',
   ICONFONT_URL: '//at.alicdn.com/t/font_2717063_ypy8vprc3b.css?display=swap',
   ICONFONT_EXTRA: '//at.alicdn.com/t/c/font_3228074_42xym3extur.css',
diff --git a/src/store/modules/design/actions.ts b/src/store/modules/design/actions.ts
index f267e7c..fd12e38 100644
--- a/src/store/modules/design/actions.ts
+++ b/src/store/modules/design/actions.ts
@@ -337,8 +337,7 @@ export default {
         store.state.dSelectWidgets = []
       }, 10)
     } else {
-      // TODO: 不清空会引起mask的bug，原因还不清楚..
-      store.state.dActiveElement = {}
+      // store.state.dActiveElement = {}
       setTimeout(() => {
         store.state.dActiveElement = widget
       }, 10)
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 64ee6e1..5d6af92 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -186,8 +186,8 @@ function loadData() {
   if (!optionsRef.value) return
   optionsRef.value.load(id, tempid, tempType, async () => {
     if (!zoomControlRef.value) return
-    zoomControlRef.value.screenChange()
-    await nextTick()
+    // await nextTick()
+    // zoomControlRef.value.screenChange()
     // 初始化激活的控件为page
     store.dispatch('selectWidget', { uuid: '-1' })
     // selectWidget({