fix: 1 修改大屏标题不同分辨率下避免遮挡问题 2、智慧助手增加可以上下调节尺寸功能

2025-07-17 15:32:42 +08:00 · 2025-07-17 15:32:42 +08:00 · b87baf1e6b
commit b87baf1e6b
parent 8ecaf99a9a
4 changed files with 232 additions and 43 deletions
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@ -4,28 +4,13 @@
  <!-- 顶部导航栏 -->
  <header class="dashboard-header">
    <div class="logo">
-      <img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
-      <img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
-      <h1 class="main-title">
-        <div class="title-line"></div>
-        <span class="title-text">智慧科研评估系统</span>
-        <div class="title-line"></div>
-      </h1>
+      <img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" />
+      <img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" />
    </div>
-    <!-- <div class="year-selector">
-      <el-dropdown>
-        <span class="el-dropdown-link">
-          2025 <el-icon class="el-icon--right"><arrow-down /></el-icon>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item>2023</el-dropdown-item>
-            <el-dropdown-item>2024</el-dropdown-item>
-            <el-dropdown-item>2025</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </div> -->
+    <h1 class="main-title">
+      <span class="title-text">智慧科研评估系统</span>
+    </h1>
+    <div class="header-placeholder"></div> <!-- 用于平衡布局的占位元素 -->
  </header>
  
  <!-- 仪表盘内容 - 三列布局 -->
@ -126,10 +111,21 @@
          </div>
        </div>
      </div>
-  
      <!-- 智能助手 -->
-      <div class="dashboard-panel" style="flex: 4 1 0;">
-        <h2>智能助手</h2>
+      <div class="dashboard-panel" ref="assistantPanel" style="flex: 4 1 0; position: relative; z-index: 111111; ">
+        <div class="panel-header">
+          <div class="drag-handle" @mousedown="startResize">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M9 5H7V7H9V5Z" fill="currentColor"/>
+              <path d="M9 11H7V13H9V11Z" fill="currentColor"/>
+              <path d="M9 17H7V19H9V17Z" fill="currentColor"/>
+              <path d="M15 5H13V7H15V5Z" fill="currentColor"/>
+              <path d="M15 11H13V13H15V11Z" fill="currentColor"/>
+              <path d="M15 17H13V19H15V17Z" fill="currentColor"/>
+            </svg>
+          </div>
+          <h2>智能助手</h2>
+        </div>
        <div class="assistant-container">
          <div class="assistant-header">
            <img :src="dashboardData2?.logoUrl" class="assistant-avatar" />
@ -141,7 +137,7 @@
                <div v-html="dashboardData2?.prompt"></div> 
              </div>
              <div v-for="(message, index) in chatMessages" :key="index" 
-                   :class="['message', message.role === 'user' ? 'user-message' : 'assistant-message']">
+                  :class="['message', message.role === 'user' ? 'user-message' : 'assistant-message']">
                <div v-html="message.content"></div> 
              </div>
              <div v-if="isLoading" class="assistant-message loading-message">
@ -213,6 +209,65 @@ const awardsChartRef = ref(null)
 const fundingChartRef = ref(null)
 const teacherServiceChartRef = ref(null) // 新增教师服务图表DOM引用

+// 添加ref和响应式数据
+const assistantPanel = ref(null)
+const isResizing = ref(false)
+const startY = ref(0)
+const startHeight = ref(0)
+// 开始调整大小
+// 保持原有的resize逻辑不变，但修改触发方式
+const startResize = (e) => {
+  // 阻止事件冒泡，避免与面板内部交互冲突
+  e.stopPropagation()
+  
+  isResizing.value = true
+  startY.value = e.clientY
+  startHeight.value = parseInt(document.defaultView.getComputedStyle(assistantPanel.value).height, 10)
+  
+  // 添加鼠标移动和释放事件监听
+  document.addEventListener('mousemove', handleResize)
+  document.addEventListener('mouseup', stopResize)
+  
+  // 设置光标样式
+  document.body.style.cursor = 'row-resize'
+  document.body.style.userSelect = 'none'
+}
+
+// 其他resize相关函数保持不变
+const handleResize = (e) => {
+  if (!isResizing.value) return
+  
+  const dy = e.clientY - startY.value
+  const newHeight = startHeight.value - dy
+  
+  // 限制最小和最大高度
+  const minHeight = 200 // 最小高度
+  const maxHeight = window.innerHeight - 100 // 最大高度
+  
+  if (newHeight > minHeight && newHeight < maxHeight) {
+    assistantPanel.value.style.flex = 'none'
+    assistantPanel.value.style.height = `${newHeight}px`
+    
+    // 调整后立即重新计算工程研究中心图表
+    nextTick(() => {
+      const labBarChart = echarts.getInstanceByDom(labBarChartRef.value)
+      const labLineChart = echarts.getInstanceByDom(labLineChartRef.value)
+      if (labBarChart) labBarChart.resize()
+      if (labLineChart) labLineChart.resize()
+    })
+  }
+}
+
+const stopResize = () => {
+  isResizing.value = false
+  document.removeEventListener('mousemove', handleResize)
+  document.removeEventListener('mouseup', stopResize)
+  document.body.style.cursor = ''
+  document.body.style.userSelect = ''
+}
+
+
+
 // 教研人才图表数据
 const researcherData = ref({
  datax: [],
@ -1583,4 +1638,35 @@ onUnmounted(() => {
    padding: 15px 0;
  }
 }
+</style>
+<style scoped>
+
+/* 可拖动icon样式 */
+.drag-handle {
+  cursor: move;
+  padding: 5px;
+  margin-right: 10px;
+  color: rgba(255, 255, 255, 0.6);
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+}
+
+.drag-handle:hover {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(73, 134, 255, 0.3);
+  border-radius: 3px;
+}
+
+.drag-handle svg {
+  display: block;
+}
+
+/* 调整面板头部样式 */
+.assistant-panel .panel-header {
+  display: flex;
+  align-items: center;
+  cursor: move; /* 整个头部可拖动 */
+  user-select: none; /* 防止拖动时选中文本 */
+}
 </style>
--- a/src/components/LabDetail.vue
+++ b/src/components/LabDetail.vue
@ -3,14 +3,13 @@
    <!-- 顶部导航栏 -->
    <header class="dashboard-header">
      <div class="logo">
-        <img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
-        <img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
-        <h1 class="main-title">
-          <div class="title-line"></div>
-          <span class="title-text">智慧科研评估系统</span>
-          <div class="title-line"></div>
-        </h1>
+        <img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" />
+        <img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" />
      </div>
+      <h1 class="main-title">
+        <span class="title-text">智慧科研评估系统</span>
+      </h1>
+      <div class="header-placeholder"></div> <!-- 用于平衡布局的占位元素 -->
    </header>

    <!-- 主内容区域 -->
@ -664,7 +663,7 @@ watch(filteredLabs, () => {
  border: 2px solid rgba(38,47,80,0.3);
 }

-.dashboard-header {
+/* .dashboard-header {
  height: 60px;
  padding: 0 20px;
  display: flex;
@ -702,7 +701,7 @@ watch(filteredLabs, () => {

 .title-text {
  margin: 0 30px;
-}
+} */

 .content-container {
  display: flex;
--- a/src/components/TalentDetail.vue
+++ b/src/components/TalentDetail.vue
@ -3,14 +3,13 @@
    <!-- 顶部导航栏 -->
    <header class="dashboard-header">
      <div class="logo">
-        <img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
-        <img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
-        <h1 class="main-title">
-          <div class="title-line"></div>
-          <span class="title-text">智慧科研评估系统</span>
-          <div class="title-line"></div>
-        </h1>
+        <img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" />
+        <img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" />
      </div>
+      <h1 class="main-title">
+        <span class="title-text">智慧科研评估系统</span>
+      </h1>
+      <div class="header-placeholder"></div> <!-- 用于平衡布局的占位元素 -->
    </header>

    <!-- 主内容区域 -->
@ -418,7 +417,7 @@ const openTeacherDetail = (teacher) => {
  /* 防止页面整体出现滚动条 */
 }

-.dashboard-header {
+/* .dashboard-header {
  height: 60px;
  padding: 0 20px;
  display: flex;
@ -456,7 +455,7 @@ const openTeacherDetail = (teacher) => {

 .title-text {
  margin: 0 30px;
-}
+} */

 .content-container {
  display: flex;
--- a/src/components/common.css
+++ b/src/components/common.css
@ -306,4 +306,109 @@ h2{
  .teacher-card {
    min-height: 400px;
  }
+}
+
+
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  height: 80px;
+  background-color: rgba(12, 22, 51, 0.8);
+  position: relative;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1; /* 占据可用空间 */
+}
+
+.logo img {
+  height: 40px;
+  object-fit: contain;
+  cursor: pointer;
+}
+
+.main-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0;
+  font-size: 32px;
+  font-weight: bold;
+  color: white;
+  white-space: nowrap;
+  /* background: linear-gradient(90deg, transparent, rgba(73, 134, 255, 0.3), transparent); */
+  padding: 0 200px;
+}
+
+.main-title::before,
+.main-title::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 200px;
+  height: 4px;
+  background: linear-gradient(90deg, transparent, rgba(73, 134, 255, 0.8));
+}
+
+.main-title::before {
+  left: 0;
+}
+
+.main-title::after {
+  right: 0;
+  transform: scaleX(-1);
+}
+
+.header-placeholder {
+  flex: 1; /* 与logo对称的占位元素 */
+}
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .dashboard-header {
+    height: 60px;
+    padding: 0 10px;
+  }
+  
+  .logo img {
+    height: 30px;
+  }
+  
+  .main-title {
+    font-size: 28px;
+    padding: 0 150px;
+  }
+  
+  .main-title::before,
+  .main-title::after {
+    width: 150px;
+    height: 3px;
+  }
+}
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .dashboard-header {
+    height: 60px;
+    padding: 0 10px;
+  }
+  
+  .logo img {
+    height: 30px;
+  }
+  
+  .main-title {
+    font-size: 24px;
+    padding: 0 30px;
+  }
+  
+  .main-title::before,
+  .main-title::after {
+    width: 30px;
+    height: 2px;
+  }
 }