修改访问客制站点功能技术架构前的存档
parent
ddfba0ae1f
commit
c76aa923d4
@ -0,0 +1,23 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { getMenus } from '@renderer/api/api'
|
||||||
|
|
||||||
|
export const useMenusStore = defineStore('Menus', {
|
||||||
|
state: () => {
|
||||||
|
return {
|
||||||
|
menus: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getters: {},
|
||||||
|
actions: {
|
||||||
|
async getMenusAction() {
|
||||||
|
let res = await getMenus()
|
||||||
|
// console.log(res.data)
|
||||||
|
this.menus = res.data.data.slice(0, res.data.data.length)
|
||||||
|
},
|
||||||
|
getMenusDebug(items) {
|
||||||
|
// let res = getMenus()
|
||||||
|
// console.log(res.data)
|
||||||
|
this.menus = items.slice(0, items.length)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
interface Tab {
|
||||||
|
id: string
|
||||||
|
url: string
|
||||||
|
title: string
|
||||||
|
active: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useTabsStore = defineStore('tabs', {
|
||||||
|
state: () => ({
|
||||||
|
tabs: [] as Tab[],
|
||||||
|
currentTabId: null as string | null
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
addTab(item: { platformUrl: string; platformName: string }) {
|
||||||
|
const existingTab = this.tabs.find(tab => tab.url === item.platformUrl)
|
||||||
|
|
||||||
|
if (existingTab) {
|
||||||
|
this.currentTabId = existingTab.id
|
||||||
|
return existingTab.id
|
||||||
|
}
|
||||||
|
|
||||||
|
const newTab = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
url: item.platformUrl,
|
||||||
|
title: item.platformName,
|
||||||
|
active: true
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tabs.forEach(tab => tab.active = false)
|
||||||
|
this.tabs.push(newTab)
|
||||||
|
this.currentTabId = newTab.id
|
||||||
|
return newTab.id
|
||||||
|
},
|
||||||
|
setActiveTab(tabId: string) {
|
||||||
|
this.tabs.forEach(tab => {
|
||||||
|
tab.active = tab.id === tabId
|
||||||
|
})
|
||||||
|
this.currentTabId = tabId
|
||||||
|
},
|
||||||
|
closeTab(tabId: string) {
|
||||||
|
this.tabs = this.tabs.filter(tab => tab.id !== tabId)
|
||||||
|
if (this.currentTabId === tabId) {
|
||||||
|
this.currentTabId = this.tabs[0]?.id || null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
activeTab: (state) => state.tabs.find(tab => tab.id === state.currentTabId)
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
// event-bus.js
|
||||||
|
import mitt from 'mitt'
|
||||||
|
|
||||||
|
const emitter = mitt()
|
||||||
|
|
||||||
|
export default emitter
|
||||||
@ -1,7 +1,168 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
defineOptions({
|
||||||
|
name: 'WebContainer'
|
||||||
|
})
|
||||||
|
import { onBeforeUnmount, onMounted, watch, ref } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { useTabsStore } from '@renderer/store/tabs'
|
||||||
|
import { NIcon } from 'naive-ui'
|
||||||
|
import { CloseCircleOutline } from '@vicons/ionicons5'
|
||||||
|
import eventBus from '@renderer/utils/eventBus'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const tabsStore = useTabsStore()
|
||||||
|
// const webviewRefs = ref<webview[]>([])
|
||||||
|
// const tabs = ref([...]) // 你的标签页数据
|
||||||
|
|
||||||
|
// Initialize with current route item
|
||||||
|
watch(() => route.query, (newQuery) => {
|
||||||
|
if (newQuery.platformUrl) {
|
||||||
|
tabsStore.addTab({
|
||||||
|
platformUrl: newQuery.platformUrl as string,
|
||||||
|
platformName: newQuery.platformName as string
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, { immediate: true })
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
eventBus.on('logout-sent', navigateToLogout)
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
eventBus.off('logout-sent', navigateToLogout)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 设置 ref 的回调函数
|
||||||
|
// const setWebviewRef = (el) => {
|
||||||
|
// if (el) {
|
||||||
|
// webviewRefs.value.push(el)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
const navigateToLogout = async () => {
|
||||||
|
// 定义登出脚本
|
||||||
|
const logoutScript = `
|
||||||
|
// 尝试找到登出按钮并点击
|
||||||
|
const logoutSelectors = [
|
||||||
|
'#logout',
|
||||||
|
'[href*="logout"]',
|
||||||
|
'button[onclick*="logout"]',
|
||||||
|
'.logout-btn'
|
||||||
|
]
|
||||||
|
|
||||||
|
let foundLogout = false
|
||||||
|
|
||||||
|
for (const selector of logoutSelectors) {
|
||||||
|
const btn = document.querySelector(selector)
|
||||||
|
if (btn) {
|
||||||
|
btn.click()
|
||||||
|
foundLogout = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除本地存储
|
||||||
|
localStorage.clear()
|
||||||
|
sessionStorage.clear()
|
||||||
|
|
||||||
|
// 清除cookies
|
||||||
|
document.cookie.split(";").forEach(c => {
|
||||||
|
document.cookie = c.replace(/^ +/, "")
|
||||||
|
.replace(/=.*/, "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/")
|
||||||
|
})
|
||||||
|
|
||||||
|
foundLogout
|
||||||
|
`
|
||||||
|
const webviews = document.querySelectorAll('webview')
|
||||||
|
console.log(webviews)
|
||||||
|
// 遍历所有 webview 执行登出
|
||||||
|
webviews.forEach(webview => {
|
||||||
|
webview.addEventListener('close', () => {
|
||||||
|
console.log('webview被关闭')
|
||||||
|
// webview.src = 'about:blank'
|
||||||
|
// webview.executeJavaScript(logoutScript)
|
||||||
|
})
|
||||||
|
// ✅ 正确调用 Electron 的 webview API
|
||||||
|
// webview.executeJavaScript(logoutScript)
|
||||||
|
// .then(success => {
|
||||||
|
// if (success) {
|
||||||
|
// console.log('登出脚本执行成功')
|
||||||
|
// webview.reload(); // 刷新页面
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch(err => console.error('脚本执行失败:', err))
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>WebContainer</div>
|
<div class="web-container">
|
||||||
|
<div class="tabs">
|
||||||
|
<div v-for="tab in tabsStore.tabs" :key="tab.id" :class="['tab', { active: tab.id === tabsStore.currentTabId }]"
|
||||||
|
@click="tabsStore.setActiveTab(tab.id)">
|
||||||
|
<span class="title-tab">{{ tab.title }}</span>
|
||||||
|
<span class="title-tab close-tab" @click.stop="tabsStore.closeTab(tab.id)">
|
||||||
|
<n-icon :component="CloseCircleOutline" size="10" :depth="3" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="web-content">
|
||||||
|
<webview v-for="tab in tabsStore.tabs" v-show="tab.id === tabsStore.currentTabId" :key="tab.id" :src="tab.url"
|
||||||
|
sandbox="allow-same-origin allow-scripts" frameborder="0" class="webview" :data-tab-id="tab.id"></webview>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.web-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 92vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
background: #f0f0f0;
|
||||||
|
// padding: 8px 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 0 6px 0 10px;
|
||||||
|
margin-left: 4px;
|
||||||
|
background: #ddd;
|
||||||
|
color: #000;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.title-tab {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-tab {
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-tab:hover {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
background: #fff;
|
||||||
|
color: #000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.web-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webview {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue