mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-06 03:58:04 +08:00
feat: 新增动态预览功能
This commit is contained in:
奔跑的面条
parent
6ab34a0996
commit
221351ec11
@ -12,6 +12,15 @@ export const loginApi = async (data: object) => {
|
||||
}
|
||||
}
|
||||
|
||||
// * 新接口
|
||||
export const newApi = async (data: object) => {
|
||||
try {
|
||||
const resonse = await http(RequestHttpEnum.POST)(`新接口的路劲/xxx/xxx`, data)
|
||||
} catch (error) {
|
||||
httpErrorHandle();
|
||||
}
|
||||
}
|
||||
|
||||
// * 登出
|
||||
export const logoutApi = async () => {
|
||||
try {
|
||||
|
||||
@ -129,12 +129,8 @@ export const useSync = () => {
|
||||
// 获取缩略图片
|
||||
const range = document.querySelector('.go-edit-range') as HTMLElement
|
||||
const ruler = document.getElementById('mb-ruler')
|
||||
// 去除标尺Dom
|
||||
if (ruler) ruler.style.display = 'none'
|
||||
// 生成图片
|
||||
const canvasImage: HTMLCanvasElement = await html2canvas(range)
|
||||
// 还原标尺
|
||||
if (ruler) ruler.style.display = 'block'
|
||||
|
||||
// 上传预览图
|
||||
let uploadParams = new FormData()
|
||||
|
||||
@ -4,6 +4,7 @@ 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)
|
||||
|
||||
3
src/views/preview/index.d.ts
vendored
3
src/views/preview/index.d.ts
vendored
@ -1,5 +1,6 @@
|
||||
import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
|
||||
export interface ChartEditStorageType extends ChartEditStorage {
|
||||
id: string
|
||||
id: string,
|
||||
isRelease?: boolean
|
||||
}
|
||||
@ -1,100 +1,9 @@
|
||||
<template>
|
||||
<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>
|
||||
</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>
|
||||
<suspense>
|
||||
<suspense-index></suspense-index>
|
||||
</suspense>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { PreviewRenderList } from './components/PreviewRenderList'
|
||||
import { getFilterStyle } 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'
|
||||
|
||||
const localStorageInfo: ChartEditStorageType =
|
||||
getSessionStorageInfo() as ChartEditStorageType
|
||||
|
||||
const previewRefStyle = computed(() => {
|
||||
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 { entityRef, previewRef } = useScale(localStorageInfo)
|
||||
const { show } = useComInstall(localStorageInfo)
|
||||
import suspenseIndex from './suspenseIndex.vue'
|
||||
</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>
|
||||
|
||||
110
src/views/preview/suspenseIndex.vue
Normal file
110
src/views/preview/suspenseIndex.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { PreviewRenderList } from './components/PreviewRenderList'
|
||||
import { getFilterStyle, routerTurnByName, getSessionStorage } from '@/utils'
|
||||
import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
|
||||
import { PageEnum } from '@/enums/pageEnum'
|
||||
import { StorageEnum } from '@/enums/storageEnum'
|
||||
import { useScale } from './hooks/useScale.hook'
|
||||
import { useStore } from './hooks/useStore.hook'
|
||||
import { PreviewScaleEnum } from '@/enums/styleEnum'
|
||||
import { useComInstall } from './hooks/useComInstall.hook'
|
||||
import type { ChartEditStorageType } from './index.d'
|
||||
|
||||
const storageList: ChartEditStorageType[] = getSessionStorage(
|
||||
StorageEnum.GO_CHART_STORAGE_LIST
|
||||
)
|
||||
|
||||
const localStorageInfo = await getSessionStorageInfo() as ChartEditStorageType
|
||||
|
||||
// @ts-ignore
|
||||
if(localStorageInfo.isRelease === false) {
|
||||
routerTurnByName(PageEnum.REDIRECT_UN_PUBLISH_NAME, true, false)
|
||||
}
|
||||
|
||||
const previewRefStyle = computed(() => {
|
||||
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 { entityRef, previewRef } = useScale(localStorageInfo)
|
||||
const { show } = useComInstall(localStorageInfo)
|
||||
</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>
|
||||
@ -1,26 +1,40 @@
|
||||
import { getSessionStorage } from '@/utils'
|
||||
import { getSessionStorage, fetchRouteParamsLocation, httpErrorHandle } from '@/utils'
|
||||
import { ResultEnum } from '@/enums/httpEnum'
|
||||
import { StorageEnum } from '@/enums/storageEnum'
|
||||
import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { fetchProjectApi } from '@/api/path'
|
||||
|
||||
export interface ChartEditStorageType extends ChartEditStorage {
|
||||
id: string
|
||||
}
|
||||
|
||||
// 根据路由 id 获取存储数据的信息
|
||||
export const getSessionStorageInfo = () => {
|
||||
const urlHash = document.location.hash
|
||||
const toPathArray = urlHash.split('/')
|
||||
const id = toPathArray && toPathArray[toPathArray.length - 1]
|
||||
|
||||
export const getSessionStorageInfo = async () => {
|
||||
const id = fetchRouteParamsLocation()
|
||||
const storageList: ChartEditStorageType[] = getSessionStorage(
|
||||
StorageEnum.GO_CHART_STORAGE_LIST
|
||||
)
|
||||
|
||||
if(!storageList) return
|
||||
|
||||
for (let i = 0; i < storageList.length; i++) {
|
||||
if (id.toString() === storageList[i]['id']) {
|
||||
return storageList[i]
|
||||
|
||||
// 是否本地预览
|
||||
if (!storageList) {
|
||||
// 接口调用
|
||||
const res: any = await fetchProjectApi({ projectId: id })
|
||||
if (res.code === ResultEnum.SUCCESS) {
|
||||
const { content, state } = res.data
|
||||
if (state === -1) {
|
||||
// 跳转未发布页
|
||||
return { isRelease: false }
|
||||
}
|
||||
return { ...JSON.parse(content), id }
|
||||
} else {
|
||||
httpErrorHandle()
|
||||
}
|
||||
} else {
|
||||
// 本地读取
|
||||
for (let i = 0; i < storageList.length; i++) {
|
||||
if (id.toString() === storageList[i]['id']) {
|
||||
return storageList[i]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user