融合PK头像头像功能

src/views/pk-mini/PkMiniWorkbench.vue

@@ -0,0 +1,107 @@
+<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>