Merge pull request #101 from JeremyYu-cn/feat-upgrade-vue3

Merge: merge main branch

.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/common/methods/DesignFeatures/setWidgetData.ts

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-22 15:06:14
  * @Description: 设置元素时根据类型处理
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-07-03 10:10:53
+ * @LastEditTime: 2024-03-22 16:00:17
  */
 // import store from '@/store'
 // import { getImage } from '../getImgDetail'
@@ -31,7 +31,6 @@ export default async function(type: string, item: TCommonItemData, data: Record<
     setting.width = img.width
     setting.height = img.height // parseInt(100 / item.value.ratio, 10)
     setting.imgUrl = item.value.url
-    console.log("setting", setting)
   }
   if (type === 'mask') {
     setting.mask = item.value.url

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()
-            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,61 +1,61 @@
 <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"
-      :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="pageDesignCanvasId"
+        id="out-page"
-        class="design-canvas"
+        class="out-page"
-        :data-type="dPage.type"
-        :data-uuid="dPage.uuid"
         :style="{
-          width: dPage.width + 'px',
+          width: (dPage.width * dZoom) / 100 + 120 + 'px',
-          height: dPage.height + 'px',
+          height: (dPage.height * dZoom) / 100 + 120 + 'px',
-          transform: 'scale(' + dZoom / 100 + ')',
+          opacity: 1 - (dZoom < 100 ? dPage.tag : 0),
-          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 /> -->
+        <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="{
+          <!-- :class="{
-            layer: true,
+              layer: true,
-            'layer-active': getIsActive(layer.uuid),
+              'layer-active': getIsActive(layer.uuid),
-            'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === 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">
+          <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">
+            <template v-if="layer.isContainer">
-            <!-- :class="{
+              <!-- :class="{
-                layer: true,
+                  layer: true,
-                'layer-active': getIsActive(widget.uuid),
+                  'layer-active': getIsActive(widget.uuid),
-                'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent,
+                  'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent,
-                'layer-hover': widget.uuid === dHoverUuid,
+                  '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" />
+              <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>
+            </template>
-        </component>
+          </component>
 
-        <!-- <ref-line v-if="dSelectWidgets.length === 0" /> -->
+          <!-- <ref-line v-if="dSelectWidgets.length === 0" /> -->
-        <!-- <size-control 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;

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

@@ -213,6 +213,11 @@ async function dragStart(e: any, item: any) {
 .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/components/modules/settings/colorSelect.vue

@@ -65,9 +65,7 @@ let first = true
     // })
 
 onMounted(() => {
-  if (props.modelValue) {
+  checkColorLength()
-    state.innerColor = props.modelValue + (props.modelValue.length === 7 ? 'ff' : '')
-  }
 })
 
 const dropColor = async (color: string) => {
@@ -90,6 +88,7 @@ watch(
   () => props.modelValue,
   (val) => {
     val !== state.innerColor && (state.innerColor = val)
+    checkColorLength()
   },
 )
 
@@ -105,12 +104,12 @@ const onChange = () => {
   emit('finish', state.innerColor)
 }
 
-// const addHistory = debounce(300, false, async (value) => {
+function checkColorLength() {
-//   store.dispatch('pushColorToHistory', value)
+  if (!props.modelValue) {
-// })
+    return
-// const colorChange = debounce(150, false, async (e) => {
+  }
-//   state.innerColor = e + (e.length === 7 ? 'ff' : '')
+  state.innerColor = props.modelValue + (props.modelValue.length === 7 ? 'ff' : '')
-// })
+}
 
 const inputBlur = (color: string) => {
   state.innerColor = color

src/components/modules/settings/numberSlider.vue

@@ -50,6 +50,7 @@ const props = withDefaults(defineProps<TProps>(), {
 const emit = defineEmits<TEmits>()
 
 const innerValue = ref<number>(props.minValue)
+innerValue.value = props.modelValue
 
 watch(
   () => innerValue.value,
@@ -67,10 +68,6 @@ watch(
   }
 )
 
-onMounted(() => {
-  innerValue.value = props.modelValue
-})
-
 function changeValue(value: number | number[]) {
   emit('finish', value)
 }

src/components/modules/widgets/wImage/wImageStyle.vue

@@ -3,7 +3,7 @@
  * @Date: 2021-08-09 11:41:53
  * @Description: 
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-09 00:59:44
+ * @LastEditTime: 2024-03-22 16:14:48
 -->
 <template>
   <div id="w-image-style">
@@ -71,7 +71,7 @@
 <script lang="ts" setup>
 // 图片组件样式
 // const NAME = 'w-image-style'
-import { nextTick, reactive, ref, watch } from 'vue'
+import { nextTick, reactive, ref, watch, onBeforeUnmount } from 'vue'
 import { useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
 import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
@@ -142,14 +142,18 @@ let lastUuid: string | undefined = undefined
 let tag: boolean
 let toolBarStyle: { left: string, top: string } | null = null
 
+onBeforeUnmount(() => {
+  imgCrop(false)
+  cropHandle()
+})
+
 watch(
   () => dActiveElement.value,
   (newValue, oldValue) => {
     change()
     // 失焦取消编辑模式
     if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
-      state.innerElement.cropEdit = false
+      imgCrop(false)
-      store.commit('setShowRotatable', true) // 失焦会导致大小变化锁定的错误
     }
     lastUuid = newValue.uuid
   },

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