fix: scrollbar & lineGuides

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 config.json
+/.vite
 
 screenshot/node_modules/
 screenshot/dist/

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: #f0f1f3;
-  // background-color: transparent;
+  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;

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()
-            await this.$nextTick()
           this.moveable.updateRect()
-          }, 10)
+          // 临时处理缩放后细线问题
+          this.$store.commit('setShowMoveable', false)
+          setTimeout(() => {
+            this.$store.commit('setShowMoveable', true)
+          }, 10);
         }
         try {
           if (this.dActiveElement.type === 'w-text') {

src/components/modules/layout/designBoard/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px' }">
+  <div id="main">
-    <!-- <el-scrollbar> -->
+    <div id="page-design" ref="page_design" :style="{ paddingTop: dPaddingTop + 'px', minWidth: (dPage.width * dZoom) / 100 + 120 + 'px' }" >
       <div
         id="out-page"
         class="out-page"
@@ -55,7 +55,7 @@
           <!-- <size-control v-if="dSelectWidgets.length === 0" /> -->
         </div>
       </div>
-    <!-- </el-scrollbar> -->
+    </div>
   </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;

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',
   },

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 clientHeight = window.innerHeight - 54
-  
+  // const parentHeight = (el.offsetParent as HTMLElement).offsetHeight - 54
-  const parentHeight = (el.offsetParent as HTMLElement).offsetHeight - 54
+  let padding = (clientHeight - el.offsetHeight) / 2
-  let padding = (parentHeight - el.offsetHeight) / 2
   if (typeof curAction.value === 'undefined') {
     padding += presetPadding / 2
   }

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
+@color0: #ffffff;
-@color1: #999999; // Appears 3 times
+@color1: #999999;
-@color2: #d7d7d7; // Appears 2 times
+@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;

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%;

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%;

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>
@@ -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%;

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) => {
+// const dragStart = (_: MouseEvent, item: any) => {
-  store.commit('setDraging', true)
+//   store.commit('setDraging', true)
-  store.commit('selectItem', { data: { value: item }, type: 'text' })
+//   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);

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 {

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;

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',

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)

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({