mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-15 16:02:19 +08:00
feat: convert psd page to composition API
This commit is contained in:
IchliebedichZhu
parent
7eb44396b4
commit
fddb5f3e7a
@ -12,10 +12,12 @@
|
||||
<div class="top-left">
|
||||
<div class="name" style="font-size: 15px">在线PSD解析</div>
|
||||
</div>
|
||||
<div style="flex: 1"><el-button plain type="primary" @click="jump2word">说明文档及PSD规范</el-button></div>
|
||||
<el-button v-show="isDone" @click="clear">清空模板</el-button>
|
||||
<div style="flex: 1">
|
||||
<el-button plain type="primary" @click="jump2word">说明文档及PSD规范</el-button>
|
||||
</div>
|
||||
<el-button v-show="state.isDone" @click="clear">清空模板</el-button>
|
||||
<div class="v-tips">
|
||||
<HeaderOptions :isDone="isDone" @change="optionsChange" />
|
||||
<HeaderOptions :isDone="state.isDone" @change="optionsChange" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -23,28 +25,38 @@
|
||||
<div class="page-design-index-wrap">
|
||||
<!-- <widget-panel></widget-panel> -->
|
||||
<design-board class="page-design-wrap" pageDesignCanvasId="page-design-canvas">
|
||||
<div v-if="isDone" class="shelter" :style="{ width: (dPage.width * dZoom) / 100 + 'px', height: (dPage.height * dZoom) / 100 + 'px' }"></div>
|
||||
<div v-if="state.isDone" class="shelter" :style="{ width: (dPage.width * dZoom) / 100 + 'px', height: (dPage.height * dZoom) / 100 + 'px' }"></div>
|
||||
<uploader v-else accept=".psd" :hold="true" :drag="true" class="uploader" @load="selectFile">
|
||||
<div class="uploader__box"><img style="margin-right: 1rem" src="https://cdn.dancf.com/design/svg/icon_psdimport.37e6f23e.svg" /> 在此拖入或选择PSD文件</div>
|
||||
<div class="uploader__box">
|
||||
<img
|
||||
style="margin-right: 1rem"
|
||||
src="https://cdn.dancf.com/design/svg/icon_psdimport.37e6f23e.svg"
|
||||
alt="upload"
|
||||
/> 在此拖入或选择PSD文件
|
||||
</div>
|
||||
</uploader>
|
||||
</design-board>
|
||||
<style-panel v-show="isDone"></style-panel>
|
||||
<style-panel v-show="state.isDone"></style-panel>
|
||||
</div>
|
||||
<!-- 缩放控制 -->
|
||||
<zoom-control v-if="isDone" ref="zoomControl" />
|
||||
<zoom-control v-if="state.isDone" ref="zoomControlRef" />
|
||||
<!-- 右键菜单 -->
|
||||
<right-click-menu />
|
||||
<!-- 旋转缩放组件 -->
|
||||
<Moveable />
|
||||
<!-- 遮罩百分比进度条 -->
|
||||
<ProgressLoading :percent="downloadPercent" :text="downloadText" :cancelText="cancelText" :msg="downloadMsg" @cancel="cancel" @done="downloadPercent = 0" />
|
||||
<ProgressLoading
|
||||
:percent="state.downloadPercent" :text="state.downloadText"
|
||||
:cancelText="state.cancelText" :msg="state.downloadMsg"
|
||||
@cancel="cancel" @done="state.downloadPercent = 0"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, getCurrentInstance, ComponentInternalInstance, onMounted, nextTick } from 'vue'
|
||||
<script lang="ts" setup>
|
||||
import { reactive, onMounted, nextTick, onBeforeMount, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { mapActions, mapGetters, useStore } from 'vuex'
|
||||
import { useStore } from 'vuex'
|
||||
import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
|
||||
import Moveable from '@/components/business/moveable/Moveable.vue'
|
||||
import shortcuts from '@/mixins/shortcuts'
|
||||
@ -54,125 +66,138 @@ import useLoading from '@/common/methods/loading'
|
||||
import uploader from '@/components/common/Uploader/index.vue'
|
||||
import designBoard from '@/components/modules/layout/designBoard/index.vue'
|
||||
import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
|
||||
import HeaderOptions from './components/UploadTemplate.vue'
|
||||
import HeaderOptions, { TEmitChangeData } from './components/UploadTemplate.vue'
|
||||
import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
|
||||
// import MyWorker from '@/utils/plugins/webWorker'
|
||||
import { processPSD2Page } from '@/utils/plugins/psd'
|
||||
import { useSetupMapGetters } from '@/common/hooks/mapGetters'
|
||||
|
||||
export default defineComponent({
|
||||
components: { RightClickMenu, Moveable, uploader, designBoard, zoomControl, HeaderOptions, ProgressLoading },
|
||||
mixins: [shortcuts],
|
||||
setup() {
|
||||
const state = reactive({
|
||||
isDone: true,
|
||||
downloadPercent: 0, // 下载进度
|
||||
downloadText: '',
|
||||
downloadMsg: '',
|
||||
cancelText: '',
|
||||
})
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const { proxy }: any = getCurrentInstance() as ComponentInternalInstance
|
||||
let loading: any = null
|
||||
type TState = {
|
||||
isDone: boolean
|
||||
downloadPercent: number // 下载进度
|
||||
downloadText: string
|
||||
downloadMsg: string
|
||||
cancelText: string
|
||||
}
|
||||
|
||||
// mixins: [shortcuts],
|
||||
const state = reactive<TState>({
|
||||
isDone: true,
|
||||
downloadPercent: 0, // 下载进度
|
||||
downloadText: '',
|
||||
downloadMsg: '',
|
||||
cancelText: '',
|
||||
})
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
|
||||
const { dPage, dZoom } = useSetupMapGetters(['dPage', 'dZoom'])
|
||||
const zoomControlRef = ref<typeof zoomControl | null>()
|
||||
|
||||
let loading: ReturnType<typeof useLoading> | null = null
|
||||
// const myWorker = new MyWorker('loadPSD')
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
state.isDone = false
|
||||
})
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
state.isDone = false
|
||||
})
|
||||
|
||||
function loadJS() {
|
||||
const link_element = document.createElement('script')
|
||||
link_element.setAttribute('src', '/psd.js')
|
||||
document.head.appendChild(link_element)
|
||||
function loadJS() {
|
||||
const link_element = document.createElement('script')
|
||||
link_element.setAttribute('src', '/psd.js')
|
||||
document.head.appendChild(link_element)
|
||||
}
|
||||
|
||||
async function selectFile(file: File) {
|
||||
loading = useLoading()
|
||||
await loadPSD(file)
|
||||
loading.close()
|
||||
state.isDone = true
|
||||
}
|
||||
|
||||
async function loadPSD(file: File) {
|
||||
// const { compositeBuffer, psdFile } = await myWorker.start(file)
|
||||
const data = await processPSD2Page(file)
|
||||
|
||||
setTimeout(async () => {
|
||||
const types: any = {
|
||||
text: wText.setting,
|
||||
image: wImage.setting,
|
||||
}
|
||||
async function selectFile(file: any) {
|
||||
loading = useLoading()
|
||||
await loadPSD(file)
|
||||
loading.close()
|
||||
state.isDone = true
|
||||
}
|
||||
async function loadPSD(file: any) {
|
||||
// const { compositeBuffer, psdFile } = await myWorker.start(file)
|
||||
const data = await processPSD2Page(file)
|
||||
|
||||
setTimeout(async () => {
|
||||
const types: any = {
|
||||
text: wText.setting,
|
||||
image: wImage.setting,
|
||||
}
|
||||
for (let i = 0; i < data.clouds.length; i++) {
|
||||
const x: any = data.clouds[i]
|
||||
const rawData = JSON.parse(JSON.stringify(types[x.type])) || {}
|
||||
delete x.type
|
||||
x.src && (x.imgUrl = x.src) && delete x.src
|
||||
store.dispatch('addWidget', Object.assign(rawData, x))
|
||||
}
|
||||
|
||||
const { width, height, background: bg } = data
|
||||
store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
|
||||
await proxy?.loadDone()
|
||||
}, 10)
|
||||
for (let i = 0; i < data.clouds.length; i++) {
|
||||
const x: any = data.clouds[i]
|
||||
const rawData = JSON.parse(JSON.stringify(types[x.type])) || {}
|
||||
delete x.type
|
||||
x.src && (x.imgUrl = x.src) && delete x.src
|
||||
store.dispatch('addWidget', Object.assign(rawData, x))
|
||||
}
|
||||
|
||||
async function clear() {
|
||||
store.commit('setDWidgets', [])
|
||||
store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
|
||||
store.commit('setShowMoveable', false)
|
||||
await nextTick()
|
||||
state.isDone = false
|
||||
}
|
||||
const { width, height, background: bg } = data
|
||||
store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
|
||||
await loadDone()
|
||||
}, 10)
|
||||
}
|
||||
|
||||
const optionsChange = ({ downloadPercent, downloadText, downloadMsg = '', cancelText = '' }: any) => {
|
||||
typeof downloadPercent === 'number' && (state.downloadPercent = downloadPercent)
|
||||
state.downloadText = downloadText
|
||||
state.downloadMsg = downloadMsg
|
||||
state.cancelText = cancelText
|
||||
}
|
||||
const cancel = () => {
|
||||
state.downloadPercent = 100
|
||||
window.open(`${window.location.protocol + '//' + window.location.host}/home?id=${route.query.id}`)
|
||||
}
|
||||
async function clear() {
|
||||
store.commit('setDWidgets', [])
|
||||
store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
|
||||
store.commit('setShowMoveable', false)
|
||||
await nextTick()
|
||||
state.isDone = false
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
loadJS,
|
||||
selectFile,
|
||||
clear,
|
||||
cancel,
|
||||
optionsChange,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['dPage', 'dZoom']),
|
||||
},
|
||||
async mounted() {
|
||||
document.addEventListener('keydown', this.handleKeydowm, false)
|
||||
document.addEventListener('keyup', this.handleKeyup, false)
|
||||
this.loadJS()
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener('keydown', this.handleKeydowm, false)
|
||||
document.removeEventListener('keyup', this.handleKeyup, false)
|
||||
document.oncontextmenu = null
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['selectWidget']),
|
||||
async loadDone() {
|
||||
await this.$nextTick()
|
||||
;(this.$refs as any).zoomControl.screenChange()
|
||||
setTimeout(() => {
|
||||
this.selectWidget({
|
||||
uuid: '-1',
|
||||
})
|
||||
// this.$store.commit('setShowMoveable', false)
|
||||
}, 100)
|
||||
},
|
||||
jump2word() {
|
||||
window.open('https://xp.palxp.cn/#/articles/1687855172725')
|
||||
// window.open('https://kdocs.cn/l/clmBsIkhve8d')
|
||||
},
|
||||
},
|
||||
const optionsChange = ({ downloadPercent, downloadText, downloadMsg = '', cancelText = '' }: TEmitChangeData) => {
|
||||
typeof downloadPercent === 'number' && (state.downloadPercent = downloadPercent)
|
||||
state.downloadText = downloadText
|
||||
state.downloadMsg = downloadMsg
|
||||
state.cancelText = cancelText
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
state.downloadPercent = 100
|
||||
window.open(`${window.location.protocol + '//' + window.location.host}/home?id=${route.query.id}`)
|
||||
}
|
||||
|
||||
const {handleKeydowm, handleKeyup,} = shortcuts.methods
|
||||
|
||||
// ...mapGetters(['dPage', 'dZoom']),
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleKeydowm, false)
|
||||
document.addEventListener('keyup', handleKeyup, false)
|
||||
loadJS()
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
document.removeEventListener('keydown', handleKeydowm, false)
|
||||
document.removeEventListener('keyup', handleKeyup, false)
|
||||
document.oncontextmenu = null
|
||||
})
|
||||
// ...mapActions(['selectWidget']),
|
||||
|
||||
async function loadDone() {
|
||||
await nextTick()
|
||||
if (!zoomControlRef.value) return
|
||||
zoomControlRef.value.screenChange()
|
||||
setTimeout(() => {
|
||||
store.dispatch('selectWidget', { uuid: '-1' })
|
||||
// selectWidget({
|
||||
// uuid: '-1',
|
||||
// })
|
||||
// this.$store.commit('setShowMoveable', false)
|
||||
}, 100)
|
||||
}
|
||||
function jump2word() {
|
||||
window.open('https://xp.palxp.cn/#/articles/1687855172725')
|
||||
// window.open('https://kdocs.cn/l/clmBsIkhve8d')
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
loadJS,
|
||||
selectFile,
|
||||
clear,
|
||||
cancel,
|
||||
optionsChange,
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@ -28,8 +28,15 @@ type TProps = {
|
||||
isDone?: boolean
|
||||
}
|
||||
|
||||
export type TEmitChangeData = {
|
||||
downloadPercent: number | null
|
||||
downloadText: string
|
||||
downloadMsg?: string
|
||||
cancelText?: string
|
||||
}
|
||||
|
||||
type TEmits = {
|
||||
(event: 'change', data: { downloadPercent: number | null, downloadText: string, downloadMsg?: string, cancelText?: string }): void
|
||||
(event: 'change', data: TEmitChangeData): void
|
||||
(event: 'update:modelValue', data: string): void
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user