feat: 新增页面预览方式

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -6,6 +6,7 @@
         <n-input-number
           size="small"
           v-model:value="canvasConfig.width"
+          :disabled="editCanvas.lockScale"
           :validator="validator"
           @update:value="changeSizeHandle"
         ></n-input-number>
@@ -14,6 +15,7 @@
         <n-input-number
           size="small"
           v-model:value="canvasConfig.height"
+          :disabled="editCanvas.lockScale"
           :validator="validator"
           @update:value="changeSizeHandle"
         ></n-input-number>
@@ -55,7 +57,7 @@
         ></n-color-picker>
       </n-space>
       <n-space>
-        <n-text>使用颜色</n-text>
+        <n-text>颜色应用</n-text>
         <n-switch
           size="small"
           v-model:value="canvasConfig.selectColor"
@@ -66,10 +68,31 @@
         ></n-switch>
       </n-space>
       <n-space>
-        <n-text>背景</n-text>
+        <n-text>背景控制</n-text>
         <n-button size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage">清除背景图</n-button>
         <n-button size="small" :disabled="!canvasConfig.background" @click="clearColor">清除颜色</n-button>
       </n-space>
+      <n-space>
+        <n-text>预览方式</n-text>
+        <n-button-group>
+          <n-button 
+            ghost
+            v-for="item in previewTypeList"
+            :key="item.key"
+            :type="canvasConfig.previewScaleType === item.key ? 'primary' : 'tertiary'"
+            size="small"
+            @click="selectPreviewType(item.key)">
+            <n-tooltip :show-arrow="false" trigger="hover">
+              <template #trigger>
+                <n-icon size="18">
+                  <component :is="item.icon"></component>
+                </n-icon>
+              </template>
+              {{ item.desc }}
+            </n-tooltip>
+          </n-button>
+        </n-button-group>
+      </n-space>
     </n-space>
 
     <!-- 滤镜 -->
@@ -108,13 +131,15 @@ import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditSt
 import { StylesSetting } from '@/components/Pages/ChartItemSetting'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { fileToUrl, loadAsyncComponent } from '@/utils'
+import { PreviewScaleEnum } from '@/enums/styleEnum'
 import { icon } from '@/plugins'
 
 const { ColorPaletteIcon } = icon.ionicons5
-const { ZAxisIcon } = icon.carbon
+const { ZAxisIcon, ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon
 
 const chartEditStore = useChartEditStore()
 const canvasConfig = chartEditStore.getEditCanvasConfig
+const editCanvas = chartEditStore.getEditCanvas
 
 const uploadFileListRef = ref()
 const switchSelectColorLoading = ref(false)
@@ -153,10 +178,42 @@ const globalTabList = [
   }
 ]
 
-// 规则
+const previewTypeList = [
+  {
+    key: PreviewScaleEnum.FIT,
+    title: '自适应',
+    icon: ScaleIcon,
+    desc: '自适应比例展示，页面会有留白'
+  },
+  {
+    key: PreviewScaleEnum.SCROLL_Y,
+    title: 'Y轴滚动',
+    icon: FitToWidthIcon,
+    desc: 'X轴铺满，Y轴自适应滚动'
+  },
+  {
+    key: PreviewScaleEnum.SCROLL_X,
+    title: 'X轴滚动',
+    icon: FitToHeightIcon,
+    desc: 'Y轴铺满，X轴自适应滚动'
+  },
+  {
+    key: PreviewScaleEnum.FULL,
+    title: '铺满',
+    icon: FitToScreenIcon,
+    desc: '强行拉伸画面，填充所有视图'
+  },
+]
+
+// 画布尺寸规则
 const validator = (x: number) => x > 50
 
-// 前置处理
+// 修改尺寸
+const changeSizeHandle = () => {
+  chartEditStore.computedScale()
+}
+
+// 上传图片前置处理
 //@ts-ignore
 const beforeUploadHandle = async ({ file }) => {
   uploadFileListRef.value = []
@@ -176,12 +233,6 @@ const beforeUploadHandle = async ({ file }) => {
   return true
 }
 
-// 修改尺寸
-const changeSizeHandle = () => {
-  chartEditStore.computedScale
-  chartEditStore.setPageSize
-}
-
 // 清除背景
 const clearImage = () => {
   chartEditStore.setEditCanvasConfig(
@@ -219,7 +270,6 @@ const switchSelectColorHandle = () => {
 // 自定义上传操作
 const customRequest = (options: UploadCustomRequestOptions) => {
   const { file } = options
-
   nextTick(() => {
     if (file.file) {
       const ImageUrl = fileToUrl(file.file)
@@ -236,6 +286,11 @@ const customRequest = (options: UploadCustomRequestOptions) => {
     }
   })
 }
+
+// 选择预览方式
+const selectPreviewType = (key: PreviewScaleEnum) => {
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PREVIEW_SCALE_TYPE, key)
+}
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -67,9 +67,9 @@ const rangeModelStyle = computed(() => {
 @include go(edit-range) {
   position: relative;
   transform-origin: left top;
+  background-size: cover;
   @include fetch-border-color('hover-border-color');
   @include fetch-bg-color('background-color2');
-
   @include go(edit-range-model) {
     z-index: -1;
     position: absolute;

src/views/preview/components/PreviewRenderList/index.vue

@@ -34,8 +34,6 @@ const props = defineProps({
   }
 })
 
-console.log(getTranstormStyle(props.localStorageInfo.componentList[0].styles))
-
 // 主题色
 const themeSetting = computed(() => {
   const chartThemeSetting = props.localStorageInfo.editCanvasConfig.chartThemeSetting

src/views/preview/hooks/useScale.hook.ts

@@ -1,31 +1,86 @@
-import { onUnmounted, ref, nextTick, computed } from 'vue'
-import { usePreviewScale } from '@/hooks/index'
+import { ref, nextTick, onMounted, onUnmounted} from 'vue'
+import { usePreviewFitScale, usePreviewScrollYScale, usePreviewScrollXScale, usePreviewFullScale } from '@/hooks/index'
 import type { ChartEditStorageType } from '../index.d'
+import { PreviewScaleEnum } from '@/enums/styleEnum'
 
 export const useScale = (localStorageInfo: ChartEditStorageType) => {
-
+  const entityRef = ref()
   const previewRef = ref()
-
-  const width = ref(localStorageInfo?.editCanvasConfig.width)
-  const height = ref(localStorageInfo?.editCanvasConfig.height)
+  const width = ref(localStorageInfo.editCanvasConfig.width)
+  const height = ref(localStorageInfo.editCanvasConfig.height)
 
   // 屏幕适配
-  nextTick(() => {
-    const { calcRate, windowResize, unWindowResize } = usePreviewScale(
-      width.value as number,
-      height.value as number,
-      previewRef.value
-    )
+  onMounted(() => {
+    switch (localStorageInfo.editCanvasConfig.previewScaleType) {
+      case PreviewScaleEnum.FIT: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewFitScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
+        break;
+      case PreviewScaleEnum.SCROLL_Y: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewScrollYScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+          (scale) => {
+            const dom = entityRef.value
+            dom.style.width = `${width.value * scale.width}px`
+            dom.style.height = `${height.value * scale.height}px`
+          }
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
 
-    calcRate()
-    windowResize()
+        break;
+      case PreviewScaleEnum.SCROLL_X: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewScrollXScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+          (scale) => {
+            const dom = entityRef.value
+            dom.style.width = `${width.value * scale.width}px`
+            dom.style.height = `${height.value * scale.height}px`
+          }
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
 
-    onUnmounted(() => {
-      unWindowResize()
-    })
+        break;
+      case PreviewScaleEnum.FULL: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewFullScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
+        break;
+    }
   })
 
   return {
+    entityRef,
     previewRef
   }
 }

src/views/preview/index.vue

@@ -1,15 +1,34 @@
 <template>
-  <div class="go-preview">
-    <!-- 缩放层 -->
-    <div ref="previewRef">
-      <!-- 展示层 -->
-      <div :style="previewRefStyle" v-if="show">
-        <!-- 渲染层 -->
-        <preview-render-list
-          :localStorageInfo="localStorageInfo"
-        ></preview-render-list>
+  <div
+    :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`"
+  >
+    <template v-if="showEntity">
+      <!-- 实体区域 -->
+      <div ref="entityRef" class="go-preview-entity">
+        <!-- 缩放层 -->
+        <div ref="previewRef" class="go-preview-scale">
+          <!-- 展示层 -->
+          <div :style="previewRefStyle" v-if="show">
+            <!-- 渲染层 -->
+            <preview-render-list
+              :localStorageInfo="localStorageInfo"
+            ></preview-render-list>
+          </div>
+        </div>
       </div>
-    </div>
+    </template>
+    <template v-else>
+      <!-- 缩放层 -->
+      <div ref="previewRef" class="go-preview-scale">
+        <!-- 展示层 -->
+        <div :style="previewRefStyle" v-if="show">
+          <!-- 渲染层 -->
+          <preview-render-list
+            :localStorageInfo="localStorageInfo"
+          ></preview-render-list>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -21,28 +40,61 @@ import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
 import { useStore } from './hooks/useStore.hook'
+import { PreviewScaleEnum } from '@/enums/styleEnum'
 import type { ChartEditStorageType } from './index.d'
 
-const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+const localStorageInfo: ChartEditStorageType =
+  getSessionStorageInfo() as ChartEditStorageType
 
 const previewRefStyle = computed(() => {
-  return { ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), ...getFilterStyle(localStorageInfo.editCanvasConfig) }
+  return {
+    ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
+    ...getFilterStyle(localStorageInfo.editCanvasConfig),
+  }
+})
+
+const showEntity = computed(() => {
+  const type = localStorageInfo.editCanvasConfig.previewScaleType
+  return (
+    type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
+  )
 })
 
 useStore(localStorageInfo)
-const { previewRef } = useScale(localStorageInfo)
+const { entityRef, previewRef } = useScale(localStorageInfo)
 const { show } = useComInstall(localStorageInfo)
 </script>
 
 <style lang="scss" scoped>
 @include go('preview') {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   height: 100vh;
   width: 100vw;
-  overflow: hidden;
   @include background-image('background-image');
+  &.fit,
+  &.full {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    .go-preview-scale {
+      transform-origin: center center;
+    }
+  }
+  &.scrollY {
+    overflow-x: hidden;
+    .go-preview-scale {
+      transform-origin: left top;
+    }
+  }
+  &.scrollX {
+    overflow-y: hidden;
+    .go-preview-scale {
+      transform-origin: left top;
+    }
+  }
+  .go-preview-entity {
+    overflow: hidden;
+  }
 }
 </style>

src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts

@@ -40,7 +40,7 @@ export const useDataListInit = () => {
   // 删除
   const deleteHandle = (cardData: object, index: number) => {
     goDialog({
-      type: DialogEnum.delete,
+      type: DialogEnum.DELETE,
       promise: true,
       onPositiveCallback: () =>
         new Promise(res => setTimeout(() => res(1), 1000)),