完成科学研究部分

web/src/views/ScientificResearch.vue

@@ -1,87 +1,275 @@
 <template>
-  <div class="scientific-research-page">
-    <!-- 页面标题区域 -->
-    <div class="page-header">
-      <h1 class="main-title">科学研究</h1>
-      <p class="english-title">Base Overview</p>
-    </div>
-
-    <!-- 导航标签区域 -->
-    <div class="nav-tabs">
-      <el-tabs v-model="activeTab" class="tabs-container">
-        <el-tab-pane label="科学研究" name="research"></el-tab-pane>
-        <el-tab-pane label="基地开放项目管理制度" name="management"></el-tab-pane>
-        <el-tab-pane label="基地开放项目立项结果" name="approval"></el-tab-pane>
-        <el-tab-pane label="基地开放项目中期检查" name="midterm"></el-tab-pane>
-        <el-tab-pane label="基地开放项目成果" name="results"></el-tab-pane>
-      </el-tabs>
-    </div>
-
-    <!-- 内容区域 -->
-    <div class="content-area">
-      <div class="content-title">
-        <h2 class="chinese-title">基地开放项目管理制度</h2>
-        <p class="english-subtitle">Base Open Project Management System</p>
+  <div class="scientific-research-container">
+    <!-- 顶部全屏封面图 -->
+    <div class="page-cover">
+      <img
+        :src="pageImageUrl || defaultCover"
+        alt="科学研究封面图"
+        class="cover-image"
+        @error="handleImageError"
+      >
+      <!-- 叠加的标题文字 -->
+      <div class="cover-title">
+        <h1 class="main-title">科学研究</h1>
+        <p class="english-title">SCIENTIFIC RESEARCH</p>
       </div>
+    </div>
 
-      <div class="content-text">
-        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
-        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
-        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
-        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
+    <!-- 内容容器 -->
+    <div class="content-wrapper">
+      <!-- 导航标签区域 -->
+      <el-tabs
+        v-model="activeTab"
+        class="content-tabs"
+        :border="false"
+      >
+        <el-tab-pane label="基地开放项目管理制度" name="management">
+          <div class="tab-content">
+            <div class="content-layout">
+              <div class="content-left">
+                <h2 class="section-title">基地开放项目管理制度</h2>
+                <p class="section-english">BASE OPEN PROJECT MANAGEMENT SYSTEM</p>
+              </div>
+              <div class="content-right">
+                <div class="text-content">
+                  <!-- 渲染Markdown格式的管理制度 -->
+                  <div v-if="researchInfo.basic_dev_project_management_system" class="markdown-content" v-html="renderMarkdown(researchInfo.basic_dev_project_management_system)"></div>
+                  <!-- 若无数据显示提示 -->
+                  <p v-else>暂无管理制度相关信息</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="基地开放项目立项结果" name="approval">
+          <div class="tab-content">
+            <div class="content-layout">
+              <div class="content-left">
+                <h2 class="section-title">基地开放项目立项结果</h2>
+                <p class="section-english">BASE OPEN PROJECT APPROVAL RESULTS</p>
+              </div>
+              <div class="content-right">
+                <div class="text-content">
+                  <!-- 渲染Markdown格式的立项结果 -->
+                  <div v-if="researchInfo.basic_dev_project_initiation_result" class="markdown-content" v-html="renderMarkdown(researchInfo.basic_dev_project_initiation_result)"></div>
+                  <!-- 若无数据显示提示 -->
+                  <p v-else>暂无立项结果相关信息</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="基地开放项目中期检查" name="midterm">
+          <div class="tab-content">
+            <div class="content-layout">
+              <div class="content-left">
+                <h2 class="section-title">基地开放项目中期检查</h2>
+                <p class="section-english">BASE OPEN PROJECT MIDTERM INSPECTION</p>
+              </div>
+              <div class="content-right">
+                <div class="text-content">
+                  <!-- 渲染Markdown格式的中期检查 -->
+                  <div v-if="researchInfo.basic_dev_project_midterm_inspection" class="markdown-content" v-html="renderMarkdown(researchInfo.basic_dev_project_midterm_inspection)"></div>
+                  <!-- 若无数据显示提示 -->
+                  <p v-else>暂无中期检查相关信息</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="基地开放项目成果" name="results">
+          <div class="tab-content">
+            <div class="content-layout">
+              <div class="content-left">
+                <h2 class="section-title">基地开放项目成果</h2>
+                <p class="section-english">BASE OPEN PROJECT RESULTS</p>
+              </div>
+              <div class="content-right">
+                <div class="text-content">
+                  <!-- 渲染Markdown格式的项目成果 -->
+                  <div v-if="researchInfo.basic_dev_project_achievements" class="markdown-content" v-html="renderMarkdown(researchInfo.basic_dev_project_achievements)"></div>
+                  <!-- 若无数据显示提示 -->
+                  <p v-else>暂无项目成果相关信息</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+
+      <!-- 底部二维码区域 -->
+      <div class="qrcode-container">
+        <div class="qrcode-item">
+          <img src="https://picsum.photos/100/100?random=1" alt="微信公众号" class="qrcode-img">
+        </div>
+        <div class="qrcode-item">
+          <img src="https://picsum.photos/100/100?random=2" alt="官方网站" class="qrcode-img">
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { ElTabs, ElTabPane } from 'element-plus';
+import { ref, reactive, onMounted } from 'vue';
+import axios from 'axios';
+import { ElMessage } from 'element-plus';
+// 引入Markdown渲染库（需先安装：npm install marked @types/marked）
+import { marked } from 'marked';
 
-// 控制当前激活的标签页
+// 控制当前激活的标签页（默认激活管理制度）
 const activeTab = ref('management');
+// 封面图地址（优先使用管理端上传的图片）
+const pageImageUrl = ref('');
+// 默认封面图（复用基地概况的默认图）
+const defaultCover = 'https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/6cc03dbbc19040e888533c9c1fd65b06.png~tplv-a9rns2rl98-resize-jpeg-v1.png?rcl=20251027155649B3056BCBCEFDAC17A006&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1762156610&x-signature=moWHZ%2FOpffhAFvZmA42l0w22M%2B8%3D';
+
+// 存储科学研究相关信息的响应式对象（匹配接口返回字段）
+const researchInfo = reactive({
+  id: 0,
+  basic_dev_project_management_system: '', // 基础开发项目管理制度
+  basic_dev_project_initiation_result: '', // 基础开发项目立项结果
+  basic_dev_project_midterm_inspection: '', // 基础开发项目中期检查
+  basic_dev_project_achievements: '' // 基础开发项目成果
+});
+
+// 页面挂载时加载数据
+onMounted(() => {
+  fetchCoverImage();
+  fetchResearchInfo();
+});
+
+// 从后端获取封面图
+const fetchCoverImage = async () => {
+  try {
+    const response = await axios.post('http://localhost:8080/api/page-image/get', { page: 'ScientificResearch' });
+    if (response.data.message === '查询成功') {
+      pageImageUrl.value = response.data.images[0].image_url;
+    }
+    console.log("获取科学研究封面成功：", response.data);
+  } catch (error) {
+    console.log('封面图加载失败，使用默认图', error);
+  }
+};
+
+// 从后端获取科学研究相关信息
+const fetchResearchInfo = async () => {
+  try {
+    const response = await axios.get('http://localhost:8080/api/devproject/get');
+    if (response.data.message === '查询成功' && response.data.dev_project) {
+      // 将接口返回的dev_project数据赋值给researchInfo
+      Object.assign(researchInfo, response.data.dev_project);
+      console.log("获取信息：", response.data);
+    } else {
+      ElMessage.warning('获取科学研究信息失败：' + (response.data.message || '未知错误'));
+    }
+  } catch (error) {
+    console.error('获取科学研究信息失败:', error);
+    ElMessage.error('获取信息失败，请刷新页面重试');
+  }
+};
+
+// 图片加载失败时使用默认图
+const handleImageError = () => {
+  pageImageUrl.value = defaultCover;
+};
+
+// Markdown渲染函数：处理Markdown文本并修复换行问题
+const renderMarkdown = (content: string) => {
+  if (!content) return '';
+
+  // 预处理内容：将字面量"\n"替换为实际换行符，并保留双换行作为段落分隔
+  let processedContent = content
+    .replace(/\\n/g, '\n') // 将字面量"\n"转为实际换行符
+    .replace(/\n{3,}/g, '\n\n'); // 将三个及以上连续换行符规范为两个，确保段落分隔
+
+  // 配置marked渲染选项
+  marked.setOptions({
+    breaks: true, // 单换行符渲染为<br>
+    gfm: true, // 支持GitHub Flavored Markdown
+    tables: true, // 支持表格
+    headerIds: false // 不生成header的id属性
+  });
+
+  // 调试：输出预处理后的内容
+  console.log('Processed Markdown content:', processedContent);
+
+  // 渲染Markdown为HTML
+  return marked.parse(processedContent);
+};
 </script>
 
 <style scoped>
-.scientific-research-page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 40px 20px;
+/* 整体容器样式 */
+.scientific-research-container {
+  width: 100%;
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
 }
 
-/* 页面标题样式 */
-.page-header {
-  background-color: #f5f5f5;
-  padding: 60px 40px;
-  margin-bottom: 30px;
-  text-align: left;
+/* 封面图样式 */
+.page-cover {
+  position: relative;
+  width: 100vw;
+  height: 400px;
+  left: 50%;
+  transform: translateX(-50%);
+  overflow: hidden;
+  margin: 0 0 40px 0;
+}
+
+.cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cover-title {
+  position: absolute;
+  left: 100px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  z-index: 2;
 }
 
 .main-title {
-  font-size: 36px;
-  color: #333;
+  font-size: 48px;
+  font-weight: 600;
   margin: 0 0 10px 0;
-  font-weight: 500;
+  line-height: 1.2;
 }
 
 .english-title {
-  font-size: 18px;
-  color: #666;
-  margin: 0;
+  font-size: 24px;
   text-transform: uppercase;
-  letter-spacing: 1px;
+  margin: 0;
+  letter-spacing: 2px;
 }
 
-/* 导航标签样式 */
-.nav-tabs {
-  border-bottom: 1px solid #e0e0e0;
+/* 内容容器样式 */
+.content-wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+/* 标签页样式 */
+.content-tabs {
   margin-bottom: 40px;
+  border-bottom: 1px solid #e0e0e0;
 }
 
 :deep(.el-tabs__nav) {
+  margin: 0 auto;
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
 }
 
 :deep(.el-tabs__item) {
@@ -89,71 +277,233 @@ const activeTab = ref('management');
   color: #666;
   padding: 0 20px;
   margin-right: 10px;
-  height: 50px;
-  line-height: 50px;
 }
 
 :deep(.el-tabs__item.is-active) {
-  color: #333;
+  color: #b50009;
   font-weight: 500;
 }
 
 :deep(.el-tabs__active-bar) {
-  background-color: #333;
-  height: 2px;
+  background-color: #b50009;
 }
 
-/* 内容区域样式 */
-.content-area {
-  padding: 0 10px;
+/* 标签页内容样式 */
+.tab-content {
+  padding: 30px 0;
 }
 
-.content-title {
-  margin-bottom: 30px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid #e0e0e0;
+.content-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 30px;
+  align-items: start;
 }
 
-.chinese-title {
+.content-left {
+  padding-right: 20px;
+  border-right: 1px solid #e0e0e0;
+}
+
+.section-title {
   font-size: 24px;
   color: #333;
   margin: 0 0 10px 0;
   font-weight: 500;
 }
 
-.english-subtitle {
+.section-english {
   font-size: 16px;
   color: #999;
-  margin: 0;
+  margin: 0 0 20px 0;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
 }
 
-.content-text {
+/* 文本内容样式 */
+.text-content {
   line-height: 1.8;
   color: #555;
   font-size: 16px;
-  column-count: 2; /* 双列布局 */
-  column-gap: 40px;
 }
 
-.content-text p {
-  margin: 0 0 20px 0;
+.text-content p {
+  margin: 0 0 24px 0;
+  text-align: justify;
+  text-indent: 2em;
+}
+
+.text-content p:last-child {
+  margin-bottom: 0;
+}
+
+/* Markdown渲染内容样式优化 */
+.markdown-content {
+  line-height: 1.8;
+  color: #555;
+  font-size: 16px;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  color: #333;
+  margin: 24px 0 16px 0;
+  font-weight: 500;
+}
+
+.markdown-content h1 {
+  font-size: 28px;
+}
+
+.markdown-content h2 {
+  font-size: 24px;
+}
+
+.markdown-content h3 {
+  font-size: 20px;
+}
+
+.markdown-content p {
+  margin: 0 0 24px 0;
+  text-align: justify;
+  text-indent: 2em;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  margin: 0 0 24px 2em;
+  padding: 0;
+}
+
+.markdown-content li {
+  margin: 8px 0;
   text-align: justify;
 }
 
-/* 响应式调整 */
-@media (max-width: 768px) {
-  .page-header {
-    padding: 40px 20px;
-  }
+.markdown-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 24px 0;
+}
 
+.markdown-content th,
+.markdown-content td {
+  border: 1px solid #e0e0e0;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.markdown-content th {
+  background-color: #f5f5f5;
+  font-weight: 500;
+}
+
+/* 二维码区域样式 */
+.qrcode-container {
+  display: flex;
+  justify-content: flex-end;
+  gap: 30px;
+  margin-top: 50px;
+  padding-top: 20px;
+  border-top: 1px solid #e0e0e0;
+}
+
+.qrcode-item {
+  width: 100px;
+  height: 100px;
+}
+
+.qrcode-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border: 1px solid #eee;
+  padding: 4px;
+}
+
+/* 响应式样式 */
+@media (max-width: 1200px) {
+  .cover-title {
+    left: 80px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .page-cover {
+    height: 300px;
+  }
+  .main-title {
+    font-size: 36px;
+  }
+  .english-title {
+    font-size: 20px;
+  }
+  .cover-title {
+    left: 60px;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-cover {
+    height: 200px;
+    margin-bottom: 20px;
+  }
+  .cover-title {
+    left: 30px;
+  }
   .main-title {
     font-size: 28px;
   }
+  .english-title {
+    font-size: 16px;
+  }
 
-  .content-text {
-    column-count: 1; /* 移动端单列显示 */
+  .content-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .content-left {
+    border-right: none;
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 15px;
+    margin-bottom: 20px;
+  }
+
+  .text-content p,
+  .markdown-content p {
+    text-indent: 0;
+    margin-bottom: 16px;
+  }
+
+  .markdown-content h1 {
+    font-size: 24px;
+  }
+
+  .markdown-content h2 {
+    font-size: 20px;
+  }
+
+  .markdown-content h3 {
+    font-size: 18px;
+  }
+
+  .qrcode-container {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .cover-title {
+    left: 20px;
+  }
+  .main-title {
+    font-size: 24px;
+  }
+  .english-title {
+    font-size: 14px;
   }
 
   :deep(.el-tabs__item) {