feat: 优化多个页面功能和界面

主要更新： 1. CoursesVideoPlayer组件：修复了白底logo容器边框样式 2. 专家支持中心： - 导入文旅产业问答数据 - 清空今天板块对话记录 - 禁用新建对话按钮，添加hover提示"非学员无权限" 3. 就业管家知识树：整个页面替换为iframe嵌入网页 4. 项目库：为四川大熊猫扇子项目添加3张效果图 5. 简历面试模拟：为活动执行和活动策划师岗位添加删除线修改版本 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-08 14:28:12 +08:00
parent efae5a15d9
commit 57e6af74f5
11 changed files with 502 additions and 1097 deletions
--- a/src/pages/ExpertSupportPage/index.css
+++ b/src/pages/ExpertSupportPage/index.css
@@ -70,6 +70,57 @@
  white-space: nowrap;
 }

+/* 禁用状态的新建对话按钮 */
+.new-conversation-btn.disabled {
+  cursor: not-allowed !important;
+  opacity: 0.6;
+  background-color: #e5e7eb !important;
+}
+
+.new-conversation-btn.disabled:hover {
+  transform: none !important;
+  box-shadow: none !important;
+  background-color: #e5e7eb !important;
+}
+
+/* hover提示容器 */
+.new-conversation-btn-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+/* hover提示气泡 */
+.new-conversation-btn-wrapper:hover .hover-tooltip {
+  display: block !important;
+}
+
+.hover-tooltip {
+  position: absolute;
+  top: -35px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 6px 12px;
+  background-color: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  display: none;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+/* 小三角箭头 */
+.hover-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.85);
+}
+
 /* 对话分组 */
 .conversation-groups {
  flex: 1;
--- a/src/pages/ExpertSupportPage/index.jsx
+++ b/src/pages/ExpertSupportPage/index.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
+import { expertQAData, expertInfo } from "@/data/expertQAData";
 import "./index.css";

 const ExpertSupportPage = () => {
@@ -12,122 +13,43 @@ const ExpertSupportPage = () => {

  // 用于跟踪最后活动时间

-  // 初始对话数据
+  // 初始对话数据 - 整合文旅产业问答内容
  const [conversationGroups, setConversationGroups] = useState({
-    今天: [
-      {
-        id: 1,
-        title: "TypeScript类型定义疑问",
-        lastMessage: "我需要了解更多关于泛型的使用",
-        time: "16:45",
-        status: "进行中",
-        statusType: "in-progress",
-        hasInactivityAlert: false,
-        lastActivityTime: Date.now() - 15 * 60 * 1000, // 15分钟前（模拟超时）
-      },
-      {
-        id: 2,
-        title: "数据库设计方案讨论",
-        lastMessage: "当前的表结构设计是否合理？",
-        time: "15:30",
-        status: "进行中",
-        statusType: "in-progress",
-        hasInactivityAlert: false,
-        lastActivityTime: Date.now() - 5 * 60 * 1000, // 5分钟前
-      },
-    ],
+    今天: [], // 清空今天板块的对话记录
    "7天内": [
-      {
-        id: 3,
-        title: "前端开发环境配置问题",
-        lastMessage: "问题已解决，感谢专家指导",
-        time: "01-07",
-        status: "已解决",
-        statusType: "resolved",
-        hasInactivityAlert: false,
-        lastActivityTime: Date.now() - 24 * 60 * 60 * 1000,
-      },
-      {
-        id: 4,
-        title: "React组件性能优化咨询",
-        lastMessage: "优化方案已实施，性能提升明显",
-        time: "01-06",
-        status: "已解决",
-        statusType: "resolved",
-        hasInactivityAlert: false,
-        lastActivityTime: Date.now() - 2 * 24 * 60 * 60 * 1000,
-      },
-      {
-        id: 5,
-        title: "Vue3升级迁移指导",
-        lastMessage: "迁移过程中遇到的兼容性问题",
-        time: "01-05",
-        status: "已解决",
-        statusType: "resolved",
-        hasInactivityAlert: false,
-        lastActivityTime: Date.now() - 3 * 24 * 60 * 60 * 1000,
-      },
-      {
-        id: 6,
-        title: "Node.js性能调优建议",
-        lastMessage: "内存泄漏排查和解决方案",
-        time: "01-04",
-        status: "已解决",
-        statusType: "resolved",
-        hasInactivityAlert: false,
-        lastActivityTime: Date.now() - 4 * 24 * 60 * 60 * 1000,
-      },
+      // 导入文旅产业问答数据中的最近记录
+      ...expertQAData.slice(0, 3).map(qa => ({
+        ...qa,
+        lastActivityTime: Date.now() - (Math.floor(Math.random() * 6) + 1) * 24 * 60 * 60 * 1000
+      })),
      {
        id: 7,
-        title: "Git分支管理策略",
-        lastMessage: "多人协作开发的最佳实践",
+        title: "文创产品开发咨询",
+        lastMessage: "如何设计有文化内涵的旅游纪念品",
        time: "01-03",
        status: "已解决",
        statusType: "resolved",
        hasInactivityAlert: false,
        lastActivityTime: Date.now() - 5 * 24 * 60 * 60 * 1000,
+        messages: []
      },
    ],
    "30天内": [
-      {
-        id: 8,
-        title: "微服务架构设计咨询",
-        lastMessage: "希望专家能提供详细的实施方案",
-        time: "12-20",
-        status: "已解决",
-        statusType: "resolved",
-        hasInactivityAlert: false,
-        lastActivityTime: Date.now() - 18 * 24 * 60 * 60 * 1000,
-      },
-      {
-        id: 9,
-        title: "Docker容器化部署问题",
-        lastMessage: "生产环境部署的最佳配置",
-        time: "12-18",
-        status: "已解决",
-        statusType: "resolved",
-        hasInactivityAlert: false,
-        lastActivityTime: Date.now() - 20 * 24 * 60 * 60 * 1000,
-      },
-      {
-        id: 10,
-        title: "Redis缓存策略优化",
-        lastMessage: "缓存穿透和雪崩的防护措施",
-        time: "12-15",
-        status: "已解决",
-        statusType: "resolved",
-        hasInactivityAlert: false,
-        lastActivityTime: Date.now() - 23 * 24 * 60 * 60 * 1000,
-      },
+      // 导入文旅产业问答数据中的其余记录
+      ...expertQAData.slice(3, 6).map(qa => ({
+        ...qa,
+        lastActivityTime: Date.now() - (Math.floor(Math.random() * 10) + 15) * 24 * 60 * 60 * 1000
+      })),
      {
        id: 11,
-        title: "MySQL索引优化指导",
-        lastMessage: "慢查询分析和索引设计建议",
+        title: "智慧旅游技术应用",
+        lastMessage: "如何利用数字技术提升游客体验",
        time: "12-12",
        status: "已解决",
        statusType: "resolved",
        hasInactivityAlert: false,
        lastActivityTime: Date.now() - 26 * 24 * 60 * 60 * 1000,
+        messages: []
      },
    ],
  });
@@ -221,7 +143,12 @@ const ExpertSupportPage = () => {
      setShowResolutionModal(conversation);
    } else {
      setSelectedConversation(conversation);
-      setMessages(conversationMessages);
+      // 如果对话有预设的消息记录，使用它们；否则使用默认消息
+      if (conversation.messages && conversation.messages.length > 0) {
+        setMessages(conversation.messages);
+      } else {
+        setMessages(conversationMessages);
+      }
      setIsNewConversation(false);
    }
  };
@@ -276,7 +203,12 @@ const ExpertSupportPage = () => {
    });

    setSelectedConversation(conversation);
-    setMessages(conversationMessages);
+    // 如果对话有预设的消息记录，使用它们；否则使用默认消息
+    if (conversation.messages && conversation.messages.length > 0) {
+      setMessages(conversation.messages);
+    } else {
+      setMessages(conversationMessages);
+    }
    setShowResolutionModal(null);
    setIsNewConversation(false);
  };
@@ -384,13 +316,37 @@ const ExpertSupportPage = () => {
      <div className="conversation-sidebar">
        <div className="sidebar-header">
          <h2 className="expert-support-sidebar-title">对话记录</h2>
-          <button
-            className="new-conversation-btn"
-            onClick={createNewConversation}
-          >
-            <span className="btn-icon">💬</span>
-            <span className="btn-text">新建对话</span>
-          </button>
+          <div className="new-conversation-btn-wrapper" style={{ position: 'relative', display: 'inline-block' }}>
+            <button
+              className="new-conversation-btn disabled"
+              onClick={(e) => e.preventDefault()}
+              disabled
+              style={{
+                cursor: 'not-allowed',
+                opacity: 0.6,
+                backgroundColor: '#f5f5f5'
+              }}
+            >
+              <span className="btn-icon">💬</span>
+              <span className="btn-text">新建对话</span>
+            </button>
+            <div className="hover-tooltip" style={{
+              position: 'absolute',
+              top: '-35px',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              padding: '6px 12px',
+              backgroundColor: 'rgba(0, 0, 0, 0.8)',
+              color: '#fff',
+              borderRadius: '4px',
+              fontSize: '12px',
+              whiteSpace: 'nowrap',
+              display: 'none',
+              zIndex: 1000
+            }}>
+              非学员无权限
+            </div>
+          </div>
        </div>

        {/* 按时间分组的对话列表 */}