548 lines
20 KiB
JavaScript
548 lines
20 KiB
JavaScript
|
|
|||
|
|
const { createApp } = Vue;
|
|||
|
|
|
|||
|
|
|
|||
|
|
const treeNode = {
|
|||
|
|
name: 'tree-node',
|
|||
|
|
props: {
|
|||
|
|
node: {
|
|||
|
|
type: Object,
|
|||
|
|
default: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
template: `
|
|||
|
|
<div class="w-full pb-[4px]">
|
|||
|
|
<div class="node" @click.stop="toggle(node)">
|
|||
|
|
<div v-if="node.folderFlag" @click.stop="toggle(node)" :style="{backgroundColor:selectId === node.uuid?'#E4EFFF':''}" class="h-32px flex items-center cursor-pointer rounded-[6px] hover:bg-[#E4EFFF]">
|
|||
|
|
<i v-if="isExpanded" style="margin-left:4px" class="mr-10px fas fa-caret-down arrow"></i>
|
|||
|
|
<i v-else style="margin-left:4px" class="mr-10px fas fa-caret-right arrow"></i>
|
|||
|
|
<svg class="text-[12px] mr-10px" width="1em" height="1em" fill="currentColor"
|
|||
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1091 1024">
|
|||
|
|
<path d="M0 932.552719V91.461901Q0 53.489228 27.290422 26.588669 54.190982 0 92.241628 0H412.475241a38.986318 38.986318 0 0 1 29.785547 13.801156l121.715283 143.859513h435.399196q38.050646 0 65.029178 26.588668 27.290422 26.900559 27.290422 64.951206v683.274203q0 38.128619-27.290422 64.951205-26.978532 26.588669-65.029178 26.588669H92.3196q-38.050646 0-65.10715-26.510696Q0 970.525392 0 932.396773z m77.972635 0q0 13.489266 14.346965 13.489266h906.977694q14.346965 0 14.346965-13.567239V249.200543q0-13.567239-14.346965-13.567239H545.808447a38.986318 38.986318 0 0 1-29.785546-13.801156L394.38559 77.972635H92.3196Q77.972635 77.972635 77.972635 91.539874V932.552719z" fill="#333333"></path>
|
|||
|
|
<path d="M38.986318 420.506422h1013.644259v77.972636H38.986318v-77.972636z" fill="#333333"></path>
|
|||
|
|
<path d="M0 301.754099a38.986318 38.986318 0 0 1 77.972635 0v315.39931a38.986318 38.986318 0 1 1-77.972635 0V301.754099z" fill="#333333"></path>
|
|||
|
|
</svg>
|
|||
|
|
<span class="text-[12px]">{{ node.pageName }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="children pl-4 rounded-[6px] hover:bg-[#E4EFFF]" @click.stop="selectPage(node)" :style="{backgroundColor:selectId === node.uuid?'#E4EFFF':''}">
|
|||
|
|
<div class="">
|
|||
|
|
<div class="h-32px ml-10px flex items-center cursor-pointer">
|
|||
|
|
<img
|
|||
|
|
v-if="node.pageScene === 'web'"
|
|||
|
|
src="./assets/img/pagelist-web-page.png"
|
|||
|
|
type="icon-yemian"
|
|||
|
|
class="mr-10px"
|
|||
|
|
/>
|
|||
|
|
<img
|
|||
|
|
v-else-if="node.pageScene === 'app'"
|
|||
|
|
src="./assets/img/pagelist-app-page.png"
|
|||
|
|
type="icon-yemian"
|
|||
|
|
class="mr-10px"
|
|||
|
|
/>
|
|||
|
|
<img v-else class="mr-10px" src="./public/assets/preview/page.png" alt="">
|
|||
|
|
<span class="text-[12px]">{{ node.pageName }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<ul v-show="isExpanded && node.folderFlag">
|
|||
|
|
<li v-for="child in node.childrenList" :key="child.id">
|
|||
|
|
<tree-node :node="child" :selectId="selectId" @node-click="(event) => $emit('node-click', event)"></tree-node>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
`,
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isExpanded: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
inject: ['getSelectId'],
|
|||
|
|
computed: {
|
|||
|
|
selectId () {
|
|||
|
|
return this.getSelectId()
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
toggle(node) {
|
|||
|
|
this.isExpanded = !this.isExpanded
|
|||
|
|
this.$emit('node-click', node)
|
|||
|
|
},
|
|||
|
|
selectPage(node){
|
|||
|
|
this.$emit('node-click', node)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const app = createApp({
|
|||
|
|
provide () {
|
|||
|
|
return {
|
|||
|
|
getSelectId: () => this.pageUuid
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
message: 'Hello Vue!',
|
|||
|
|
treeData: [],
|
|||
|
|
appVersion: '',
|
|||
|
|
pageUuid: '',
|
|||
|
|
pageType:'',
|
|||
|
|
pageName: '',
|
|||
|
|
previewSizeOptions: [],
|
|||
|
|
previewSizeW: 1920,
|
|||
|
|
previewSizeH: 1080,
|
|||
|
|
previewSize: '1920x1080',
|
|||
|
|
cleanup: null,
|
|||
|
|
currentIndex: 0,
|
|||
|
|
pageList: [],
|
|||
|
|
isPreview: false,
|
|||
|
|
isShowTip: false,
|
|||
|
|
appName: projectName,
|
|||
|
|
resizeObserver: null,
|
|||
|
|
setTimeout1: null,
|
|||
|
|
isHtml: true,
|
|||
|
|
url: '',
|
|||
|
|
childUrl: '',
|
|||
|
|
iframeMessage: null,
|
|||
|
|
childIframe: null, // 导航页内嵌子页面添加键盘事件
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
pageType:{
|
|||
|
|
handler(value){
|
|||
|
|
this.$nextTick(()=>{
|
|||
|
|
if (!this.appName) return
|
|||
|
|
this.changePageType(value)
|
|||
|
|
let iframeDoc = null
|
|||
|
|
let iframeAppDoc = null
|
|||
|
|
const iframeKeydownHandler=(e) => {
|
|||
|
|
this.keyboardEvents(e)
|
|||
|
|
}
|
|||
|
|
if (value === 'app') {
|
|||
|
|
if (iframeDoc) {
|
|||
|
|
iframeDoc.removeEventListener('keydown', iframeKeydownHandler);
|
|||
|
|
}
|
|||
|
|
const iframeId = this.isHtml ? '#iframeApp' : '#vueIframeApp'
|
|||
|
|
const iframeApp = document.querySelector(iframeId);
|
|||
|
|
// 聚焦到iframe时，键盘左右切换不生效
|
|||
|
|
// iframeApp.addEventListener('load', () => {
|
|||
|
|
// iframeAppDoc = iframeApp.contentDocument || iframeApp.contentWindow.document;
|
|||
|
|
// iframeAppDoc.addEventListener('keydown', iframeKeydownHandler);
|
|||
|
|
// if (!this.isHtml) {
|
|||
|
|
// const tag = iframeAppDoc.querySelector('.ai-tag')
|
|||
|
|
// tag && (tag.style && (tag.style.visibility = 'hidden') || tag.style.setAtrrbute('visibility','hidden'))
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
if (this.resizeObserver) {
|
|||
|
|
this.resizeObserver.disconnect()
|
|||
|
|
this.resizeObserver = null
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 监听web类型iframe父元素大小变化
|
|||
|
|
const element = document.querySelector('.preview-web')
|
|||
|
|
this.resizeObserver = new ResizeObserver(entries => {
|
|||
|
|
for (let entry of entries) {
|
|||
|
|
const { width, height } = entry.contentRect
|
|||
|
|
if (this.previewSize == 'auto') {
|
|||
|
|
this.previewSizeW = parseInt(width)
|
|||
|
|
this.previewSizeH = parseInt(height)
|
|||
|
|
}
|
|||
|
|
this.changeResolution()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.resizeObserver.observe(element)
|
|||
|
|
|
|||
|
|
if (iframeAppDoc) {
|
|||
|
|
iframeAppDoc.removeEventListener('keydown', iframeKeydownHandler);
|
|||
|
|
}
|
|||
|
|
// 聚焦到iframe时，键盘左右切换不生效
|
|||
|
|
const iframeWeb = this.isHtml ? document.getElementById('iframe') : document.getElementById('vueIframeWeb')
|
|||
|
|
iframeWeb.addEventListener('load', () => {
|
|||
|
|
iframeDoc = iframeWeb.contentDocument || iframeWeb.contentWindow.document;
|
|||
|
|
iframeDoc.addEventListener('keydown', iframeKeydownHandler);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
isHtml(value){
|
|||
|
|
this.$nextTick(()=>{
|
|||
|
|
if (!this.appName) return
|
|||
|
|
let iframeDoc = null
|
|||
|
|
let iframeAppDoc = null
|
|||
|
|
const iframeKeydownHandler=(e) => {
|
|||
|
|
this.keyboardEvents(e)
|
|||
|
|
}
|
|||
|
|
if (value === 'app') {
|
|||
|
|
if (iframeDoc) {
|
|||
|
|
iframeDoc.removeEventListener('keydown', iframeKeydownHandler);
|
|||
|
|
}
|
|||
|
|
const iframeId = this.isHtml ? '#iframeApp' : '#vueIframeApp'
|
|||
|
|
const iframeApp = document.querySelector(iframeId);
|
|||
|
|
// 聚焦到iframe时，键盘左右切换不生效
|
|||
|
|
// iframeApp.addEventListener('load', () => {
|
|||
|
|
// iframeAppDoc = iframeApp.contentDocument || iframeApp.contentWindow.document;
|
|||
|
|
// iframeAppDoc.addEventListener('keydown', iframeKeydownHandler);
|
|||
|
|
// if (!this.isHtml) {
|
|||
|
|
// this.$nextTick(() => {
|
|||
|
|
// const tag = iframeAppDoc.querySelector('.ai-tag')
|
|||
|
|
// tag && (tag.style && (tag.style.visibility = 'hidden') || tag.style.setAtrrbute('visibility','hidden'))
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
if (this.resizeObserver) {
|
|||
|
|
this.resizeObserver.disconnect()
|
|||
|
|
this.resizeObserver = null
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 监听web类型iframe父元素大小变化
|
|||
|
|
const element = document.querySelector('.preview-web')
|
|||
|
|
this.resizeObserver = new ResizeObserver(entries => {
|
|||
|
|
for (let entry of entries) {
|
|||
|
|
const { width, height } = entry.contentRect
|
|||
|
|
if (this.previewSize == 'auto') {
|
|||
|
|
this.previewSizeW = parseInt(width)
|
|||
|
|
this.previewSizeH = parseInt(height)
|
|||
|
|
}
|
|||
|
|
this.changeResolution()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.resizeObserver.observe(element)
|
|||
|
|
|
|||
|
|
if (iframeAppDoc) {
|
|||
|
|
iframeAppDoc.removeEventListener('keydown', iframeKeydownHandler);
|
|||
|
|
}
|
|||
|
|
// 聚焦到iframe时，键盘左右切换不生效
|
|||
|
|
const iframeWeb = this.isHtml ? document.getElementById('iframe') : document.getElementById('vueIframeWeb')
|
|||
|
|
iframeWeb.addEventListener('load', () => {
|
|||
|
|
iframeDoc = iframeWeb.contentDocument || iframeWeb.contentWindow.document;
|
|||
|
|
iframeDoc.addEventListener('keydown', iframeKeydownHandler);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
previewSize(val) {
|
|||
|
|
const option = this.previewSizeOptions.find(item => item.value === val)
|
|||
|
|
this.previewSizeW = option.w
|
|||
|
|
this.previewSizeH= option.h
|
|||
|
|
this.changeResolution()
|
|||
|
|
},
|
|||
|
|
previewSizeW(val) {
|
|||
|
|
if (!this.appName) return
|
|||
|
|
this.changeResolution()
|
|||
|
|
},
|
|||
|
|
previewSizeH(val) {
|
|||
|
|
if (!this.appName) return
|
|||
|
|
this.changeResolution()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
document.querySelector('#app').style.display = 'block'
|
|||
|
|
this.getPageList()
|
|||
|
|
this.communicationFun()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
communicationFun () {
|
|||
|
|
this.iframeMessage = useEventListener(window, 'message', async (event) => {
|
|||
|
|
// 处理消息 判断data值是页面id时处理切换页面
|
|||
|
|
if (event.source != window) {
|
|||
|
|
const currentPage = this.pageList.find(item => item.pageUuid == event.data)
|
|||
|
|
this.pageUuid = currentPage.pageUuid
|
|||
|
|
this.pageName = currentPage.pageName
|
|||
|
|
this.pageType = currentPage.pageScene
|
|||
|
|
this.isHtml = currentPage.codeType === 'html'
|
|||
|
|
this.getAppPageVersion(currentPage)
|
|||
|
|
this.currentIndex = this.pageList.findIndex(item=>item.pageUuid == this.pageUuid) || 0;
|
|||
|
|
}
|
|||
|
|
}, true)
|
|||
|
|
},
|
|||
|
|
// 修改页面类型
|
|||
|
|
changePageType(value) {
|
|||
|
|
const autoSize = {
|
|||
|
|
label: "自定义",
|
|||
|
|
value: "auto",
|
|||
|
|
w: 375,
|
|||
|
|
h: 812
|
|||
|
|
}
|
|||
|
|
if (value === 'app') {
|
|||
|
|
this.previewSizeOptions = [autoSize, ...resolutionInfo.app]
|
|||
|
|
this.previewSizeW = 393
|
|||
|
|
this.previewSizeH= 852
|
|||
|
|
this.previewSize = '393x852-16'
|
|||
|
|
} else {
|
|||
|
|
let iframe = document.querySelector('.preview-web')
|
|||
|
|
autoSize.w = parseInt(iframe.clientWidth)
|
|||
|
|
autoSize.h = parseInt(iframe.clientHeight)
|
|||
|
|
this.previewSizeOptions = [autoSize, ...resolutionInfo.web]
|
|||
|
|
this.previewSizeW = autoSize.w
|
|||
|
|
this.previewSizeH= autoSize.h
|
|||
|
|
this.previewSize = 'auto'
|
|||
|
|
}
|
|||
|
|
this.changeResolution()
|
|||
|
|
},
|
|||
|
|
// 找第一个页面
|
|||
|
|
findFirstPage(treeData) {
|
|||
|
|
const queue = [...treeData];
|
|||
|
|
while (queue.length > 0) {
|
|||
|
|
const item = queue.shift();
|
|||
|
|
|
|||
|
|
// 如果是有效页面，直接返回
|
|||
|
|
if (item.folderFlag === false && item.uuid) {
|
|||
|
|
return item;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果是文件夹且有子节点，将子节点加入队列前端（优先处理）
|
|||
|
|
if (item.folderFlag === true && item.childrenList?.length) {
|
|||
|
|
queue.unshift(...item.childrenList);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果是空文件夹，自动跳过（继续循环）
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return null;
|
|||
|
|
},
|
|||
|
|
// 页面列表
|
|||
|
|
getPageList() {
|
|||
|
|
this.treeData = filterByHasVersion(treeArr)
|
|||
|
|
// const currentPage = this.treeData.find(item => item.default) || this.treeData[0]
|
|||
|
|
const currentPage = this.findFirstPage(this.treeData)
|
|||
|
|
console.log(this.treeData, this.pageList);
|
|||
|
|
|
|||
|
|
this.pageUuid = currentPage.pageUuid
|
|||
|
|
this.pageName = currentPage.pageName
|
|||
|
|
this.pageType = currentPage.pageScene
|
|||
|
|
this.isHtml = currentPage.codeType === 'html'
|
|||
|
|
this.$nextTick(()=>{
|
|||
|
|
this.getAppPageVersion(currentPage)
|
|||
|
|
})
|
|||
|
|
collectItems(this.treeData, this.pageList);
|
|||
|
|
this.currentIndex = this.pageList.findIndex(item=>item.pageUuid == this.pageUuid) || 0;
|
|||
|
|
this.cleanup = this.createKeyboardNavigation();
|
|||
|
|
},
|
|||
|
|
// 获取应用中页面内容
|
|||
|
|
async getAppPageVersion(info) {
|
|||
|
|
const isApp = this.pageType == 'app'
|
|||
|
|
let iframe = this.isHtml ? document.getElementById('iframe') : document.getElementById('vueIframeWeb')
|
|||
|
|
|
|||
|
|
if (isApp) {
|
|||
|
|
iframe = document.getElementById('iframeApp')
|
|||
|
|
}
|
|||
|
|
if (info.parentUrl) {
|
|||
|
|
iframe.src = info.parentUrl
|
|||
|
|
this.childUrl = info.url
|
|||
|
|
} else {
|
|||
|
|
iframe.src = info.url;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
loadHtmlIframe() {
|
|||
|
|
if (this.childIframe) {
|
|||
|
|
this.childIframe()
|
|||
|
|
this.childIframe = null
|
|||
|
|
}
|
|||
|
|
const isApp = this.pageType == 'app'
|
|||
|
|
// let template = handleCode(this.pageHtml, !isApp);
|
|||
|
|
let iframe = document.getElementById('iframe')
|
|||
|
|
if (isApp) {
|
|||
|
|
iframe = document.getElementById('iframeApp')
|
|||
|
|
}
|
|||
|
|
const htmlIframe = iframe.contentDocument || iframe.contentWindow.document;
|
|||
|
|
if (htmlIframe) {
|
|||
|
|
const navIframe = htmlIframe.getElementById('navigation') || htmlIframe.getElementById('contentFrame')
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
const top = this.checkIframePositionSimple(htmlIframe)
|
|||
|
|
if (navIframe) {
|
|||
|
|
if (top) {
|
|||
|
|
navIframe.style.height = `calc(100vh - ${top}px)`; // 减去导航高度
|
|||
|
|
}
|
|||
|
|
// navIframe.srcdoc = handleCode(this.childUrl, !isApp);
|
|||
|
|
navIframe.src = this.childUrl
|
|||
|
|
const iframeKeydownHandler=(e) => {
|
|||
|
|
this.keyboardEvents(e)
|
|||
|
|
}
|
|||
|
|
navIframe.addEventListener('load', () => {
|
|||
|
|
const navIframeDoc = navIframe.contentDocument || navIframe.contentWindow.document;
|
|||
|
|
this.childIframe = useEventListener(navIframeDoc, 'keydown', iframeKeydownHandler)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
var homeMenu = htmlIframe.querySelector(`[data-uuid="${this.pageUuid}"]`)
|
|||
|
|
let currentMenu = htmlIframe.querySelector('.active-menu')
|
|||
|
|
if (homeMenu) {
|
|||
|
|
currentMenu?.classList.remove('active-menu')
|
|||
|
|
homeMenu.classList.add('active-menu');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 获取子页面位置信息
|
|||
|
|
checkIframePositionSimple(htmlIframe) {
|
|||
|
|
const iframe = htmlIframe.getElementById('navigation');
|
|||
|
|
if (iframe) {
|
|||
|
|
const iframeRect = iframe.getBoundingClientRect();
|
|||
|
|
return iframeRect.top
|
|||
|
|
}
|
|||
|
|
return
|
|||
|
|
},
|
|||
|
|
renderIframe(pageHtml) {
|
|||
|
|
// const isApp = this.pageType == 'app'
|
|||
|
|
// let template = handleCode(pageHtml, !isApp);
|
|||
|
|
// let iframe = document.getElementById('iframe')
|
|||
|
|
// if (isApp) {
|
|||
|
|
// iframe = document.getElementById('iframeApp')
|
|||
|
|
// }
|
|||
|
|
// if(isIOSWechat()) {
|
|||
|
|
// const parser = new DOMParser();
|
|||
|
|
// const doc = parser.parseFromString(template, 'text/html');
|
|||
|
|
// const updatedHtmlString = new XMLSerializer().serializeToString(doc);
|
|||
|
|
// const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
|
|||
|
|
// iframeDocument.write(updatedHtmlString);
|
|||
|
|
// return
|
|||
|
|
// }
|
|||
|
|
// if(!this.isHtml) {
|
|||
|
|
// return
|
|||
|
|
// }
|
|||
|
|
// iframe.srcdoc = template
|
|||
|
|
},
|
|||
|
|
// 点击目录切换页面
|
|||
|
|
handleChangePage(node) {
|
|||
|
|
if (!node.folderFlag) {
|
|||
|
|
this.pageName = node.pageName
|
|||
|
|
this.pageType = node.pageScene
|
|||
|
|
this.$nextTick(()=>{
|
|||
|
|
this.getAppPageVersion(node)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
this.currentIndex = this.pageList.findIndex(item=>item.pageUuid == node.uuid) || 0;
|
|||
|
|
this.pageUuid = node.uuid
|
|||
|
|
},
|
|||
|
|
changeResolution() {
|
|||
|
|
if (this.pageType === 'app') {
|
|||
|
|
const contentApp = document.querySelector('.preview-suitable-content-app')
|
|||
|
|
// contentApp.style.aspectRatio = Number(this.previewSizeW)/Number(this.previewSizeH)
|
|||
|
|
const borderDom = document.querySelector('.app-border')
|
|||
|
|
const scale = Math.min(contentApp.offsetWidth/Number(this.previewSizeW), contentApp.offsetHeight/Number(this.previewSizeH))
|
|||
|
|
borderDom.style.transform = `scale(${scale})`
|
|||
|
|
} else {
|
|||
|
|
if (this.appName) {
|
|||
|
|
const contentApp = document.querySelector('.page-content')
|
|||
|
|
let borderDom = this.isHtml ? document.getElementById('iframe') : document.getElementById('vueIframeWeb')
|
|||
|
|
const scale = Math.min(contentApp.offsetWidth/Number(this.previewSizeW), contentApp.offsetHeight/Number(this.previewSizeH))
|
|||
|
|
borderDom.style.transform = `scale(${scale})`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
changeCurrentIndex(num) {
|
|||
|
|
if (num == -1) {
|
|||
|
|
if (this.currentIndex > 0) {
|
|||
|
|
this.currentIndex--
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (this.currentIndex < this.pageList.length - 1) {
|
|||
|
|
this.currentIndex++
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.handleChangePage(this.pageList[this.currentIndex])
|
|||
|
|
},
|
|||
|
|
// 键盘事件
|
|||
|
|
keyboardEvents(event) {
|
|||
|
|
if (event.key === 'ArrowLeft') {
|
|||
|
|
// 向左键：移动到前一个项目，如果已经是第一个则不处理
|
|||
|
|
event.preventDefault();
|
|||
|
|
this.changeCurrentIndex(-1)
|
|||
|
|
} else if (event.key === 'ArrowRight') {
|
|||
|
|
// 向右键：移动到下一个项目，如果已经是最后一个则不处理
|
|||
|
|
event.preventDefault();
|
|||
|
|
this.changeCurrentIndex(1)
|
|||
|
|
} else if (event.key === 'Escape') {
|
|||
|
|
this.isPreview = false
|
|||
|
|
this.isShowTip = false
|
|||
|
|
clearTimeout(this.setTimeout1)
|
|||
|
|
this.setTimeout1 = null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
createKeyboardNavigation() {
|
|||
|
|
// 处理键盘事件
|
|||
|
|
const handleKeyDown = (event) => {
|
|||
|
|
if (this.pageList.length === 0) return;
|
|||
|
|
this.keyboardEvents(event)
|
|||
|
|
};
|
|||
|
|
// 添加事件监听
|
|||
|
|
window.addEventListener('keydown', handleKeyDown);
|
|||
|
|
|
|||
|
|
// 返回一个移除事件监听的函数
|
|||
|
|
return () => {
|
|||
|
|
window.removeEventListener('keydown', handleKeyDown);
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
toPreview() {
|
|||
|
|
this.isPreview = true
|
|||
|
|
this.isShowTip = true
|
|||
|
|
this.setTimeout1 = setTimeout(()=>{
|
|||
|
|
this.isShowTip = false
|
|||
|
|
}, 5000)
|
|||
|
|
},
|
|||
|
|
vueIfameloaded() {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
const iframeId = this.pageType === 'app' ? '#vueIframeApp' : '#vueIframeWeb'
|
|||
|
|
const iframeApp = document.querySelector(iframeId);
|
|||
|
|
// const iframeAppDoc = iframeApp.contentDocument || iframeApp.contentWindow.document;
|
|||
|
|
// const tag = iframeAppDoc.querySelector('.ai-tag')
|
|||
|
|
// tag && (tag.style && (tag.style.visibility = 'hidden') || tag.style.setAtrrbute('visibility','hidden'))
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
this.cleanup()
|
|||
|
|
if (this.resizeObserver) {
|
|||
|
|
this.resizeObserver.disconnect()
|
|||
|
|
}
|
|||
|
|
if (this.iframeMessage) {
|
|||
|
|
this.iframeMessage()
|
|||
|
|
this.iframeMessage = null
|
|||
|
|
}
|
|||
|
|
if (this.childIframe) {
|
|||
|
|
this.childIframe()
|
|||
|
|
this.childIframe = null
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
app.component('treeNode', treeNode);
|
|||
|
|
app.mount('#app')
|
|||
|
|
|
|||
|
|
// 过滤用户没有生成的页面
|
|||
|
|
function filterByHasVersion(data) {
|
|||
|
|
// 如果不是数组，直接返回
|
|||
|
|
if (!Array.isArray(data)) return data;
|
|||
|
|
|
|||
|
|
// 使用 filter 移除 hasVersion === 1 的对象
|
|||
|
|
return data.filter(item => {
|
|||
|
|
if (item.hasVersion === '1') {
|
|||
|
|
return false; // 移除该对象
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 递归处理 children
|
|||
|
|
if (item.children && Array.isArray(item.children)) {
|
|||
|
|
item.children = filterByHasVersion(item.children);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true; // 保留该对象
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 用于遍历嵌套数组中 folderFlag 为 false 的对象
|
|||
|
|
* @param {Array} items - 要遍历的嵌套数组
|
|||
|
|
*/
|
|||
|
|
function collectItems(nodes, flatItems) {
|
|||
|
|
nodes.forEach((node) => {
|
|||
|
|
|
|||
|
|
if (node.folderFlag === false) {
|
|||
|
|
flatItems.push({
|
|||
|
|
...node,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (node.childrenList && node.childrenList.length > 0) {
|
|||
|
|
collectItems(node.childrenList, flatItems);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|