github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 16:22:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 让预览文件目录和master-fetch一致

Browse Source
This commit is contained in:
奔跑的面条 2023-03-16 20:36:57 +08:00
parent 7c70c95c3e
commit 6c7847fecc
2 changed files with 101 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/views/preview/index.vue
View File

@ -1,97 +1,9 @@
<template> <template>
<div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`"> <suspense>
<template v-if="showEntity"> <suspense-index></suspense-index>
<!-- 实体区域 --> </suspense>
<div ref="entityRef" class="go-preview-entity">
<!-- 缩放层 -->
<div ref="previewRef" class="go-preview-scale">
<!-- 展示层 -->
<div :style="previewRefStyle" v-if="show">
<!-- 渲染层 -->
<preview-render-list></preview-render-list>
</div>
</div>
</div>
</template>
<template v-else>
<!-- 缩放层 -->
<div ref="previewRef" class="go-preview-scale">
<!-- 展示层 -->
<div :style="previewRefStyle" v-if="show">
<!-- 渲染层 -->
<preview-render-list></preview-render-list>
</div>
</div>
</template>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import suspenseIndex from './suspenseIndex.vue'
import { PreviewRenderList } from './components/PreviewRenderList'
import { getFilterStyle, setTitle } from '@/utils'
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'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
// const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
const chartEditStore = useChartEditStore() as unknown as ChartEditStorageType
getSessionStorageInfo()
setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
const previewRefStyle = computed(() => {
return {
...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
...getFilterStyle(chartEditStore.editCanvasConfig)
}
})
const showEntity = computed(() => {
const type = chartEditStore.editCanvasConfig.previewScaleType
return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
})
useStore(chartEditStore)
const { entityRef, previewRef } = useScale(chartEditStore)
const { show } = useComInstall(chartEditStore)
</script> </script>
<style lang="scss" scoped>
@include go('preview') {
position: relative;
height: 100vh;
width: 100vw;
@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>

97
src/views/preview/suspenseIndex.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<div :class="`go-preview ${chartEditStore.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></preview-render-list>
</div>
</div>
</div>
</template>
<template v-else>
<!-- 缩放层 -->
<div ref="previewRef" class="go-preview-scale">
<!-- 展示层 -->
<div :style="previewRefStyle" v-if="show">
<!-- 渲染层 -->
<preview-render-list></preview-render-list>
</div>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { PreviewRenderList } from './components/PreviewRenderList'
import { getFilterStyle, setTitle } from '@/utils'
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'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
// const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
await getSessionStorageInfo()
const chartEditStore = useChartEditStore() as unknown as ChartEditStorageType
setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
const previewRefStyle = computed(() => {
return {
...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
...getFilterStyle(chartEditStore.editCanvasConfig)
}
})
const showEntity = computed(() => {
const type = chartEditStore.editCanvasConfig.previewScaleType
return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
})
useStore(chartEditStore)
const { entityRef, previewRef } = useScale(chartEditStore)
const { show } = useComInstall(chartEditStore)
</script>
<style lang="scss" scoped>
@include go('preview') {
position: relative;
height: 100vh;
width: 100vw;
@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>