v0.5.5: 应急页 v0.5.4 + 移除IT设备升级 + admin登录修复 + 内容审核架构 + 知识库

frontend-h5/src/App.vue

@@ -8,23 +8,58 @@
 <template>
   <!-- Vant4 主题配置：根据 themeStore 切换浅色/深色 -->
   <van-config-provider :theme="themeStore.currentTheme">
-    <router-view />
+    <!-- v0.5.2 优化:用 v-if 控制路由视图,未挂载时显示 loading 占位 -->
+    <router-view v-if="appReady" v-slot="{ Component }">
+      <Suspense>
+        <component :is="Component" />
+        <template #fallback>
+          <div class="app-loading">
+            <van-loading type="spinner" color="#1989fa" size="36" />
+            <div class="app-loading__text">正在加载...</div>
+          </div>
+        </template>
+      </Suspense>
+    </router-view>
+    <!-- 首屏 fallback,Vue 还没 mount 完成时显示 -->
+    <div v-else class="app-loading">
+      <van-loading type="spinner" color="#1989fa" size="36" />
+      <div class="app-loading__text">正在加载...</div>
+    </div>
   </van-config-provider>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useThemeStore } from '@/stores/theme'
 
 /** 主题 Store */
 const themeStore = useThemeStore()
 
+/** v0.5.2 优化:appReady 控制路由视图是否渲染,避免空白闪烁 */
+const appReady = ref(false)
+
 // 应用挂载时初始化主题（从 localStorage 读取偏好并应用）
 onMounted(() => {
   themeStore.initTheme()
+  // 标记 app 已就绪,触发 router-view 渲染
+  appReady.value = true
 })
 </script>
 
 <style>
+/* v0.5.2 新增:全局 loading 样式 */
+.app-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: #f7f8fa;
+}
+.app-loading__text {
+  margin-top: 12px;
+  font-size: 14px;
+  color: #969799;
+}
 /* 根组件样式已在 global.css 中定义 */
 </style>

frontend-h5/src/components/chat/CallAgentModal.vue

@@ -28,7 +28,7 @@
             <div class="call-modal__step">
               <div class="call-modal__header">
                 <span class="call-modal__icon">🔔</span>
-                <h3>摇传菜铃呼叫人工坐席...</h3>
+                <h3>呼叫人工坐席帮助...</h3>
               </div>
               <div class="call-modal__body call-modal__body--center">
 

frontend-h5/src/main.ts

@@ -34,10 +34,26 @@ app.use(router)
 // 不需要在这里手动注册，减小打包体积
 
 // --------------------------------------------------------------------------
-// 挂载应用到 DOM
+// v0.5.2:挂载应用 + 显式关闭骨架屏(避免 :empty 选择器失效)
 // --------------------------------------------------------------------------
+// 1. 记录挂载开始时间(用于最小显示时间)
+const mountStart = Date.now()
+// 2. 最小显示时间 500ms(防止 Vue 太快挂载导致骨架屏"闪一下看不见")
+const MIN_SKELETON_DISPLAY_MS = 500
+
 app.mount('#app')
 
+// 3. 挂载完成后,主动给 body 加 .app-loaded 类名,触发 CSS 隐藏骨架屏
+//    比之前用 :empty 选择器更可靠(尤其在 Vue mount < 100ms 的情况下)
+const elapsed = Date.now() - mountStart
+if (elapsed >= MIN_SKELETON_DISPLAY_MS) {
+  document.body.classList.add('app-loaded')
+} else {
+  setTimeout(() => {
+    document.body.classList.add('app-loaded')
+  }, MIN_SKELETON_DISPLAY_MS - elapsed)
+}
+
 // --------------------------------------------------------------------------
 // 企微 OAuth2 授权检查（已迁移至路由守卫 router/index.ts）
 // --------------------------------------------------------------------------

frontend-h5/src/router/index.ts

@@ -10,6 +10,14 @@
 
 import { createRouter, createWebHistory } from 'vue-router'
 
+// v0.5.2 优化:ChatView 是 99% 用户唯一访问的页面,改用静态 import
+// 之前用 () => import() 懒加载,首次访问要二次下载 301KB 的 ChatView chunk
+// → 表现为白屏→突然全显示
+import ChatView from '@/views/ChatView.vue'
+// v0.5.4 BC/DR 应急页(身份检测 + H5 右栏)
+import EmergencyDispatcher from '@/views/EmergencyDispatcher.vue'
+import H5PreviewView from '@/views/H5PreviewView.vue'
+
 // --------------------------------------------------------------------------
 // 企微环境检测工具函数
 // --------------------------------------------------------------------------
@@ -33,8 +41,8 @@ const routes = [
   {
     path: '/',
     name: 'ChatView',
-    // 懒加载：首次访问时才加载组件，减小首屏体积
-    component: () => import('@/views/ChatView.vue'),
+    // v0.5.2:首页静态引入,避免 301KB chunk 二次下载导致白屏
+    component: ChatView,
     meta: { title: 'IT智能服务台', requiresAuth: true },
   },
   {
@@ -49,6 +57,19 @@ const routes = [
     component: () => import('@/views/WeworkOnly.vue'),
     meta: { title: '请在企业微信中打开', requiresAuth: false },
   },
+  // v0.5.4 BC/DR 应急页(身份检测 + 员工右栏视图)
+  {
+    path: '/emergency',
+    name: 'EmergencyDispatcher',
+    component: EmergencyDispatcher,
+    meta: { title: '应急身份检测', requiresAuth: false },
+  },
+  {
+    path: '/h5-preview',
+    name: 'H5Preview',
+    component: H5PreviewView,
+    meta: { title: '员工自助', requiresAuth: false },
+  },
   // 404 兜底：未匹配的路径重定向到首页
   {
     path: '/:pathMatch(.*)*',
@@ -67,8 +88,14 @@ const router = createRouter({
 // 路由守卫 — 企微环境检测 + 认证检查
 // --------------------------------------------------------------------------
 router.beforeEach(async (to, _from, next) => {
-  // WeworkOnly 页面和 Login 页面不需要企微检测
-  if (to.name === 'WeworkOnly' || to.name === 'Login') {
+  // v0.5.4 应急页(身份检测 + 预览页)不需要企微 OAuth2 认证
+  // 由 EmergencyDispatcher 自己调企微 JS-SDK 检测角色
+  if (
+    to.name === 'WeworkOnly' ||
+    to.name === 'Login' ||
+    to.name === 'EmergencyDispatcher' ||
+    to.name === 'H5Preview'
+  ) {
     next()
     return
   }

frontend-h5/src/views/EmergencyDispatcher.vue

@@ -0,0 +1,234 @@
+<!-- =============================================================================
+// 企微IT智能服务台 — 应急页身份检测 dispatcher (v0.5.4)
+// =============================================================================
+// 说明：BC/DR 应急场景的统一入口
+// 流程：
+//   1. 加载企微 JS-SDK
+//   2. 调后端 /api/wecom/jsapi-config 拿签名
+//   3. wx.config() + wx.agentConfig() 鉴权
+//   4. 拿当前 userid
+//   5. 调 /api/wecom/check-role 判断角色
+//   6. 坐席 → /itagent/agent-preview,员工 → /h5-preview
+// 错误兜底:默认按"员工"处理,跳转 /h5-preview
+// ============================================================================= -->
+
+<template>
+  <div class="emergency-dispatcher">
+    <div class="emergency-dispatcher__panel">
+      <div class="logo"></div>
+      <h2 class="title">IT 智能服务台</h2>
+      <p class="subtitle">{{ statusText }}</p>
+      <van-loading v-if="loading" type="spinner" color="#1989fa" size="32" />
+      <div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { showLoadingToast, showFailToast } from 'vant'
+import axios from 'axios'
+
+const router = useRouter()
+
+const loading = ref(true)
+const errorMsg = ref('')
+const statusText = ref('正在检测身份...')
+
+const isMobile = computed(() => window.innerWidth < 500)
+
+/**
+ * 加载企微 JS-SDK
+ * 注意:企微 JS-SDK 文件名是 jweixin-1.2.0.js(历史遗留,虽然叫 jweixin)
+ */
+function loadWeworkSDK(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    // 已经加载过
+    if (typeof (window as any).wx !== 'undefined' && (window as any).wx.agentConfig) {
+      resolve()
+      return
+    }
+    const script = document.createElement('script')
+    script.src = 'https://res.wx.qq.com/wwopen/js/wwLogin-1.2.7.js'
+    script.onload = () => {
+      // 加载企微 agent SDK
+      const agentScript = document.createElement('script')
+      agentScript.src = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js'
+      agentScript.onload = () => resolve()
+      agentScript.onerror = () => reject(new Error('加载企微 agent SDK 失败'))
+      document.head.appendChild(agentScript)
+    }
+    script.onerror = () => reject(new Error('加载企微 JS-SDK 失败'))
+    document.head.appendChild(script)
+  })
+}
+
+/**
+ * 拿后端签名
+ */
+async function getJsapiConfig(url: string) {
+  const resp = await axios.get('/api/wecom/jsapi-config', { params: { url } })
+  if (resp.data.code !== 0) {
+    throw new Error(`拿签名失败: ${resp.data.message}`)
+  }
+  return resp.data.data
+}
+
+/**
+ * wx.config 初始化
+ */
+function wxConfig(config: any): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const wx = (window as any).wx
+    wx.config({
+      beta: true, // 开启内测接口
+      debug: false,
+      appId: config.corp_id,
+      timestamp: config.timestamp,
+      nonceStr: config.nonce_str,
+      signature: config.signature,
+      jsApiList: ['agentConfig'],
+    })
+    wx.ready(() => resolve())
+    wx.error((err: any) => reject(new Error(`wx.config 失败: ${JSON.stringify(err)}`)))
+  })
+}
+
+/**
+ * wx.agentConfig 拿身份
+ */
+function wxAgentConfig(config: any): Promise<{ userId: string }> {
+  return new Promise((resolve, reject) => {
+    const wx = (window as any).wx
+    wx.agentConfig({
+      corpid: config.corp_id,
+      agentid: config.agent_id,
+      timestamp: config.timestamp,
+      nonceStr: config.nonce_str,
+      signature: config.signature,
+      jsApiList: ['selectExternalContact'],
+      success: (res: any) => {
+        // 拿当前 userid(实际场景可能要从 selectExternalContact 等接口拿)
+        // 这里我们直接通过 URL 参数或后端回查
+        // 简化版:从后端 cookie / 之前登录态拿
+        const userId = (window as any).wecom_userid || ''
+        resolve({ userId })
+      },
+      fail: (err: any) => reject(new Error(`wx.agentConfig 失败: ${JSON.stringify(err)}`)),
+    })
+  })
+}
+
+/**
+ * 调后端检查角色
+ */
+async function checkRole(userid: string) {
+  const resp = await axios.get('/api/wecom/check-role', { params: { userid } })
+  if (resp.data.code !== 0) {
+    throw new Error(`检查角色失败: ${resp.data.message}`)
+  }
+  return resp.data.data
+}
+
+onMounted(async () => {
+  try {
+    statusText.value = '正在加载企微 SDK...'
+    await loadWeworkSDK()
+
+    statusText.value = '正在获取鉴权签名...'
+    const currentUrl = window.location.href.split('#')[0]
+    const config = await getJsapiConfig(currentUrl)
+
+    statusText.value = '正在初始化企微...'
+    await wxConfig(config)
+
+    statusText.value = '正在获取身份...'
+    const { userId } = await wxAgentConfig(config)
+
+    if (!userId) {
+      throw new Error('未能获取当前用户 userid')
+    }
+
+    statusText.value = '正在检查角色...'
+    const roleInfo = await checkRole(userId)
+    console.log('[EmergencyDispatcher] 角色检测:', roleInfo)
+
+    // 跳转
+    statusText.value = `角色: ${roleInfo.role},正在跳转...`
+    if (roleInfo.role === 'agent') {
+      window.location.href = '/itagent/agent-preview?userid=' + encodeURIComponent(userId)
+    } else {
+      router.push({ path: '/h5-preview', query: { userid: userId } })
+    }
+  } catch (err: any) {
+    console.error('[EmergencyDispatcher] 错误:', err)
+    errorMsg.value = err.message || '未知错误'
+    loading.value = false
+    showFailToast({ message: errorMsg.value, duration: 5000 })
+
+    // 兜底:3 秒后跳员工页
+    setTimeout(() => {
+      router.push({ path: '/h5-preview' })
+    }, 3000)
+  }
+})
+</script>
+
+<style scoped>
+.emergency-dispatcher {
+  position: fixed;
+  inset: 0;
+  background: linear-gradient(135deg, #f7f8fa 0%, #e7e9ed 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
+}
+
+.emergency-dispatcher__panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  max-width: 400px;
+  width: 90%;
+}
+
+.logo {
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #1989fa 0%, #1c64f2 100%);
+  margin-bottom: 24px;
+  box-shadow: 0 8px 24px rgba(25, 137, 250, 0.3);
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #323233;
+  margin: 0 0 12px;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #646566;
+  margin: 0 0 24px;
+  text-align: center;
+}
+
+.error-msg {
+  margin-top: 16px;
+  padding: 12px;
+  background: #fff7e8;
+  color: #ff976a;
+  font-size: 13px;
+  border-radius: 8px;
+  text-align: center;
+  word-break: break-all;
+}
+</style>

frontend-h5/src/views/H5PreviewView.vue

@@ -0,0 +1,224 @@
+<!-- =============================================================================
+// 企微IT智能服务台 — 应急页员工视图 (v0.5.4)
+// =============================================================================
+// 说明：BC/DR 应急场景下,显示 H5 用户端右栏内容
+// 桌面端:全宽显示 RightPanel(三段式:AI推荐/常用资源/趣味问答)
+// 移动端:顶部"菜单"按钮,点击从顶部滑出右栏内容(抽屉式)
+// ============================================================================= -->
+
+<template>
+  <div class="h5-preview">
+    <!-- ====== 顶部条(移动端 + 桌面端都有) ====== -->
+    <div class="h5-preview__topbar">
+      <div class="topbar-left">
+        <span class="logo">🤖</span>
+        <div class="title-block">
+          <h1 class="title">员工自助</h1>
+          <p class="subtitle">IT 智能服务台 · 应急模式</p>
+        </div>
+      </div>
+      <!-- 移动端:菜单按钮(打开抽屉) -->
+      <button
+        v-if="isMobile"
+        class="topbar-menu-btn"
+        @click="drawerVisible = true"
+      >
+        <van-icon name="apps-o" size="22" />
+        <span>右栏</span>
+      </button>
+      <!-- 桌面端:显示 userid(供验证) -->
+      <div v-else class="userid-tag">
+        userid: {{ userid || 'anonymous' }}
+      </div>
+    </div>
+
+    <!-- ====== 桌面端:直接显示 RightPanel ====== -->
+    <div v-if="!isMobile" class="h5-preview__content">
+      <RightPanel />
+    </div>
+
+    <!-- ====== 移动端:抽屉(Vant Popup 从顶部弹出) ====== -->
+    <van-popup
+      v-if="isMobile"
+      v-model:show="drawerVisible"
+      position="top"
+      :style="{ height: '85%' }"
+      :close-on-click-overlay="true"
+      closeable
+      safe-area-inset-top
+    >
+      <div class="h5-preview__drawer-header">
+        <span class="drawer-title">📋 右栏内容</span>
+        <van-icon
+          name="cross"
+          size="20"
+          class="drawer-close"
+          @click="drawerVisible = false"
+        />
+      </div>
+      <div class="h5-preview__drawer-body">
+        <RightPanel />
+      </div>
+    </van-popup>
+
+    <!-- ====== 移动端:底部提示卡片 ====== -->
+    <div v-if="isMobile" class="h5-preview__mobile-hint">
+      <p>💡 电脑端访问可获得完整体验(右栏常驻显示)</p>
+      <p>移动端请点上方"右栏"按钮打开内容</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { showToast } from 'vant'
+import RightPanel from '@/components/assistant/RightPanel.vue'
+
+const route = useRoute()
+const drawerVisible = ref(false)
+const userid = computed(() => (route.query.userid as string) || '')
+
+const isMobile = computed(() => window.innerWidth < 500)
+
+// 首次加载提示
+if (userid.value) {
+  showToast({ message: '员工模式', duration: 1500 })
+}
+</script>
+
+<style scoped>
+.h5-preview {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  background: #f7f8fa;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
+}
+
+/* ====== 顶部条 ====== */
+.h5-preview__topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  background: white;
+  border-bottom: 1px solid #ebedf0;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  z-index: 10;
+}
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo {
+  font-size: 28px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+  border-radius: 10px;
+}
+
+.title-block {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #323233;
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 12px;
+  color: #969799;
+  margin: 0;
+}
+
+.userid-tag {
+  font-size: 12px;
+  color: #969799;
+  padding: 4px 10px;
+  background: #f7f8fa;
+  border-radius: 4px;
+}
+
+/* 菜单按钮(移动端) */
+.topbar-menu-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  background: linear-gradient(135deg, #1989fa 0%, #1c64f2 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.topbar-menu-btn:active {
+  opacity: 0.8;
+}
+
+/* ====== 桌面端内容区 ====== */
+.h5-preview__content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* ====== 抽屉 ====== */
+.h5-preview__drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebedf0;
+  background: #fafafa;
+}
+
+.drawer-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #323233;
+}
+
+.drawer-close {
+  color: #969799;
+  cursor: pointer;
+}
+
+.h5-preview__drawer-body {
+  height: calc(100% - 50px);
+  overflow-y: auto;
+  background: white;
+}
+
+/* ====== 移动端提示 ====== */
+.h5-preview__mobile-hint {
+  padding: 12px 20px;
+  background: #fffbe8;
+  color: #ff976a;
+  font-size: 12px;
+  text-align: center;
+  line-height: 1.6;
+  border-top: 1px solid #ffe9b3;
+}
+
+.h5-preview__mobile-hint p {
+  margin: 0;
+}
+</style>