108 lines
2.3 KiB
Vue
108 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<div class="pk-mini-workbench">
|
||
|
|
<el-container class="pk-container">
|
||
|
|
<!-- 左侧导航栏 -->
|
||
|
|
<el-aside class="pk-aside" width="80px">
|
||
|
|
<PkAppaside :active="activeTab" @navigate="handleNavigate" />
|
||
|
|
</el-aside>
|
||
|
|
<!-- 右侧主体内容 -->
|
||
|
|
<el-main class="pk-main">
|
||
|
|
<KeepAlive>
|
||
|
|
<component :is="currentComponent" />
|
||
|
|
</KeepAlive>
|
||
|
|
</el-main>
|
||
|
|
</el-container>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||
|
|
import PkAppaside from '@/components/pk-mini/PkAppaside.vue'
|
||
|
|
import PkHall from './PkHall.vue'
|
||
|
|
import Forum from './Forum.vue'
|
||
|
|
import Message from './Message.vue'
|
||
|
|
import Mine from './Mine.vue'
|
||
|
|
import { initPkGoEasy, goEasyLink, goEasyDisConnect } from '@/utils/pk-mini/goeasy'
|
||
|
|
import { getOtp } from '@/api/pk-mini'
|
||
|
|
import { getMainUserData } from '@/utils/pk-mini/storage'
|
||
|
|
import { ElMessage } from 'element-plus'
|
||
|
|
|
||
|
|
const activeTab = ref('pk')
|
||
|
|
|
||
|
|
const componentMap = {
|
||
|
|
pk: PkHall,
|
||
|
|
forum: Forum,
|
||
|
|
message: Message,
|
||
|
|
mine: Mine
|
||
|
|
}
|
||
|
|
|
||
|
|
const currentComponent = computed(() => componentMap[activeTab.value])
|
||
|
|
|
||
|
|
const handleNavigate = (tab) => {
|
||
|
|
activeTab.value = tab
|
||
|
|
}
|
||
|
|
|
||
|
|
// 自动连接 IM
|
||
|
|
async function autoLinkIM() {
|
||
|
|
try {
|
||
|
|
const userData = getMainUserData()
|
||
|
|
if (!userData || !userData.id) {
|
||
|
|
console.log('PK Mini: 用户未登录，跳过 IM 连接')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
const otp = await getOtp()
|
||
|
|
const data = {
|
||
|
|
id: String(userData.id),
|
||
|
|
avatar: userData.headerIcon || '',
|
||
|
|
nickname: userData.nickName || userData.username || '',
|
||
|
|
key: otp
|
||
|
|
}
|
||
|
|
|
||
|
|
await goEasyLink(data)
|
||
|
|
console.log('PK Mini: IM 连接成功')
|
||
|
|
} catch (err) {
|
||
|
|
console.error('PK Mini: IM 连接失败', err)
|
||
|
|
ElMessage.warning('PK工作台聊天系统连接失败')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
// 初始化 GoEasy
|
||
|
|
initPkGoEasy()
|
||
|
|
// 自动连接 IM
|
||
|
|
autoLinkIM()
|
||
|
|
})
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
// 断开 IM 连接
|
||
|
|
goEasyDisConnect().catch(() => {})
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.pk-mini-workbench {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-image: url(@/assets/pk-mini/bg.png);
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pk-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pk-aside {
|
||
|
|
height: 100%;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pk-main {
|
||
|
|
height: 100%;
|
||
|
|
padding: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
</style>
|