完成科学研究部分

2025-10-27 23:19:44 +08:00
parent 6cde2b4b81
commit 6f80de3b2f
7 changed files with 949 additions and 82 deletions
--- a/.idea/hldrSystem.iml
+++ b/.idea/hldrSystem.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
--- a/.idea/prettier.xml
+++ b/.idea/prettier.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+  </component>
+</project>
--- a/management/src/App.vue
+++ b/management/src/App.vue
@@ -55,6 +55,10 @@
        <el-icon><Memo /></el-icon>
        <template #title>编辑基地概况</template>
    </el-menu-item>
+          <el-menu-item index="/devproject">
+            <el-icon><Memo /></el-icon>
+            <template #title>编辑科学研究</template>
+          </el-menu-item>
    </el-menu>
      </el-aside>

--- a/management/src/router/index.ts
+++ b/management/src/router/index.ts
@@ -10,6 +10,7 @@ const PublishView = () => import('../views/publish/PublishView.vue')
 const CommunityView = () => import('../views/community/CommunityView.vue')
 const ResourceView = () => import('../views/resource/ResourceView.vue')
 const BaseOverview = ()=> import('../views/baseoverview/BaseOverView.vue')
+const DevProjectView = ()=> import('../views/devproject/devprojectView.vue')

 // 定义路由规则（现在 RouteRecordRaw 导入正确）
 const routes: RouteRecordRaw[] = [
@@ -85,7 +86,18 @@ const routes: RouteRecordRaw[] = [
            title: '编辑基地概况',
            requiresAuth: false
        }
+    },
+    {
+
+        path: '/devproject',
+        name: 'devproject',
+        component: DevProjectView,
+        meta: {
+            title: '编辑科学研究',
+            requiresAuth: false
        }
+    }
+
 ]

 const router = createRouter({
--- a/management/src/views/devproject/devprojectView.vue
+++ b/management/src/views/devproject/devprojectView.vue
@@ -0,0 +1,477 @@
+<template>
+  <div class="research-management">
+    <!-- 页面图片管理（单张图片） -->
+    <el-card class="page-header-card">
+      <h1 class="page-title">科学研究管理</h1>
+      <div class="page-image-management mt-4">
+        <h3 class="section-title">页面封面图管理</h3>
+        <p class="section-desc">上传科学研究页面的顶部封面图，建议16:9比例，支持JPG/PNG/WEBP格式，大小不超过5MB</p>
+
+        <div class="cover-uploader">
+          <!-- 已上传图片预览 -->
+          <div v-if="formData.pageImageUrl" class="cover-preview">
+            <img :src="formData.pageImageUrl" alt="科学研究页面封面" class="cover-img">
+            <button
+                class="remove-cover-btn"
+                @click="removePageImage"
+                title="删除封面图"
+                :disabled="isSaving"
+            >
+              <el-icon><Close /></el-icon>
+            </button>
+          </div>
+
+          <!-- 未上传时的上传区域 -->
+          <el-upload
+              v-else
+              class="cover-upload-area"
+              :action="uploadAction"
+              name="image"
+              :show-file-list="false"
+              :on-success="handleCoverSuccess"
+              :before-upload="beforeUpload"
+              :on-error="handlePageImageUploadError"
+              :disabled="isSaving"
+          >
+            <div class="upload-placeholder">
+              <el-icon class="upload-icon"><Upload /></el-icon>
+              <p class="upload-text">点击或拖拽图片至此处上传</p>
+              <p class="upload-subtext">支持JPG/PNG/WEBP，最大5MB，建议16:9比例</p>
+            </div>
+          </el-upload>
+        </div>
+
+        <div class="cover-action-buttons mt-3">
+          <el-button
+              type="primary"
+              @click="saveImage"
+              :loading="isSaving"
+              :disabled="!formData.pageImageUrl || isSaving"
+          >
+            <el-icon><Check /></el-icon>
+            保存封面图
+          </el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 标签页切换 -->
+    <el-tabs v-model="activeTab" type="card" class="mt-4">
+      <el-tab-pane label="基地开放项目管理制度" name="management">
+        <el-card class="mt-2">
+          <el-form ref="managementForm" :model="formData" label-width="120px">
+            <el-form-item label="制度内容">
+              <el-input
+                  type="textarea"
+                  v-model="formData.basicDevProjectManagementSystem"
+                  rows="10"
+                  placeholder="请输入基地开放项目管理制度内容（支持Markdown格式）"
+                  clearable
+                  resize="vertical"
+                  style="white-space: pre-line;"
+              />
+              <div class="form-hint mt-2">
+                提示：支持Markdown格式排版（标题、列表、表格等），换行请直接按Enter键
+              </div>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="基地开放项目立项结果" name="approval">
+        <el-card class="mt-2">
+          <el-form ref="approvalForm" :model="formData" label-width="120px">
+            <el-form-item label="立项结果">
+              <el-input
+                  type="textarea"
+                  v-model="formData.basicDevProjectInitiationResult"
+                  rows="10"
+                  placeholder="请输入基地开放项目立项结果内容（支持Markdown格式）"
+                  clearable
+                  resize="vertical"
+                  style="white-space: pre-line;"
+              />
+              <div class="form-hint mt-2">
+                提示：支持Markdown格式排版（标题、列表、表格等），换行请直接按Enter键
+              </div>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="基地开放项目中期检查" name="midterm">
+        <el-card class="mt-2">
+          <el-form ref="midtermForm" :model="formData" label-width="120px">
+            <el-form-item label="中期检查">
+              <el-input
+                  type="textarea"
+                  v-model="formData.basicDevProjectMidtermInspection"
+                  rows="10"
+                  placeholder="请输入基地开放项目中期检查内容（支持Markdown格式）"
+                  clearable
+                  resize="vertical"
+                  style="white-space: pre-line;"
+              />
+              <div class="form-hint mt-2">
+                提示：支持Markdown格式排版（标题、列表、表格等），换行请直接按Enter键
+              </div>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="基地开放项目成果" name="results">
+        <el-card class="mt-2">
+          <el-form ref="resultsForm" :model="formData" label-width="120px">
+            <el-form-item label="项目成果">
+              <el-input
+                  type="textarea"
+                  v-model="formData.basicDevProjectAchievements"
+                  rows="10"
+                  placeholder="请输入基地开放项目成果内容（支持Markdown格式）"
+                  clearable
+                  resize="vertical"
+                  style="white-space: pre-line;"
+              />
+              <div class="form-hint mt-2">
+                提示：支持Markdown格式排版（标题、列表、表格等），换行请直接按Enter键
+              </div>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 操作按钮（仅保留“保存全部”） -->
+    <div class="action-buttons mt-4">
+      <el-button type="primary" @click="saveAll" :loading="isSaving">保存全部</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Close, Upload, Check } from '@element-plus/icons-vue';
+import type { UploadProps } from 'element-plus';
+import axios from "axios";
+
+// 激活的标签页（默认显示管理制度）
+const activeTab = ref('management');
+// 保存状态（防止重复提交）
+const isSaving = ref(false);
+// 上传接口地址
+const uploadAction = import.meta.env.VITE_API_BASE_URL + '/upload/cover';
+
+// 统一管理表单数据（与数据库字段对应）
+const formData = reactive({
+  pageImageUrl: '', // 页面封面图URL
+  basicDevProjectManagementSystem: '', // 基地开放项目管理制度
+  basicDevProjectInitiationResult: '', // 基地开放项目立项结果
+  basicDevProjectMidtermInspection: '', // 基地开放项目中期检查
+  basicDevProjectAchievements: '' // 基地开放项目成果
+});
+
+// 页面挂载时加载数据：1.封面图 2.研究信息
+onMounted(() => {
+  console.log('API 基础地址：', import.meta.env.VITE_API_BASE_URL);
+  fetchCarouselImages();
+  fetchResearchInfo();
+});
+
+// 从后端获取封面图
+const fetchCarouselImages = async () => {
+  try {
+    const response = await axios.post('http://localhost:8080/api/page-image/get', { page: 'ScientificResearch' });
+    console.log('封面图加载结果：', response);
+    if (response.data.message === '查询成功' && Array.isArray(response.data.images) && response.data.images.length) {
+      formData.pageImageUrl = response.data.images[0].image_url;
+    }
+  } catch (error) {
+    console.error('封面图加载失败：', error);
+    ElMessage.warning('未获取到现有封面图，可重新上传');
+  }
+};
+
+// 加载数据库数据（适配新接口返回格式）
+const fetchResearchInfo = async () => {
+  try {
+    isSaving.value = true;
+    const response = await axios.get('http://localhost:8080/api/devproject/get');
+    console.log('科学研究数据加载结果：', response);
+
+    if (response.data.message === '查询成功' && response.data.dev_project) {
+      const dbData = response.data.dev_project;
+      // 直接赋值Markdown格式内容，保持原始排版
+      formData.basicDevProjectManagementSystem = dbData.basic_dev_project_management_system || '';
+      formData.basicDevProjectInitiationResult = dbData.basic_dev_project_initiation_result || '';
+      formData.basicDevProjectMidtermInspection = dbData.basic_dev_project_midterm_inspection || '';
+      formData.basicDevProjectAchievements = dbData.basic_dev_project_achievements || '';
+    } else {
+      ElMessage.warning('获取研究信息失败：' + (response.data.message || '未知错误'));
+    }
+  } catch (error) {
+    console.error('获取科学研究信息失败:', error);
+    ElMessage.error('获取研究信息失败，请刷新页面重试');
+  } finally {
+    isSaving.value = false;
+  }
+};
+
+// 上传前校验
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const allowTypes = ['image/jpeg', 'image/png', 'image/webp'];
+  if (!allowTypes.includes(rawFile.type)) {
+    ElMessage.error('仅支持JPG/PNG/WEBP格式的图片');
+    return false;
+  }
+  if (rawFile.size / 1024 / 1024 > 5) {
+    ElMessage.error('图片大小不能超过5MB');
+    return false;
+  }
+  console.log("图片校验成功");
+  return true;
+};
+
+// 封面上传成功
+const handleCoverSuccess: UploadProps['onSuccess'] = (response) => {
+  const ossUrl = response.data?.url;
+  if (ossUrl) {
+    formData.pageImageUrl = ossUrl;
+    ElMessage.success('封面上传成功');
+  } else {
+    ElMessage.error('封面上传失败：未获取到图片地址');
+  }
+};
+
+// 页面图片上传失败处理
+const handlePageImageUploadError = (error: any) => {
+  console.error('页面封面图上传错误：', error);
+  ElMessage.error('页面封面图上传失败，请重试');
+};
+
+// 删除页面图片
+const removePageImage = () => {
+  formData.pageImageUrl = '';
+  ElMessage.info('页面封面图已删除');
+};
+
+// 保存封面图（单独保存）
+const saveImage = async () => {
+  try {
+    isSaving.value = true;
+    if (!formData.pageImageUrl) {
+      ElMessage.warning('请先上传封面图再保存');
+      return;
+    }
+
+    const response = await axios.post('http://localhost:8080/api/page-image/save', {
+      id: 5, // 科学研究页面封面图ID
+      image_url: formData.pageImageUrl,
+    });
+
+    if (response.data.success || response.data.message === '保存成功') {
+      ElMessage.success('封面图保存成功');
+      console.log('封面图保存成功，地址：', formData.pageImageUrl);
+    } else {
+      ElMessage.error('封面图保存失败：' + (response.data.message || '未知错误'));
+    }
+  } catch (error) {
+    console.error('封面图保存失败：', error);
+    ElMessage.error('封面图保存失败，请重试');
+  } finally {
+    isSaving.value = false;
+  }
+};
+
+// 保存全部内容（适配数据库字段，保留原始换行符）
+const saveAll = async () => {
+  try {
+    isSaving.value = true;
+
+    // 构建提交数据（直接使用输入框原始换行符\n，保持数据库输入两个换行则会自动保留为两个\n）
+    const submitData = {
+      basic_dev_project_management_system: formData.basicDevProjectManagementSystem,
+      basic_dev_project_initiation_result: formData.basicDevProjectInitiationResult,
+      basic_dev_project_midterm_inspection: formData.basicDevProjectMidtermInspection,
+      basic_dev_project_achievements: formData.basicDevProjectAchievements
+    };
+
+    console.log("保存的数据（含原始换行换行符）：", submitData);
+
+    // 提交数据到后端保存
+    const response = await axios.post('http://localhost:8080/api/devproject/save', submitData);
+
+    if (response.data.success || response.data.message === '查询成功') {
+      // 控制台输出格式化信息，展示实际换行符
+      console.log('【数据库存储格式】修改后的完整数据：');
+      console.log('='.repeat(60));
+      console.log('管理制度（原始字符串）:', JSON.stringify(submitData.basic_dev_project_management_system));
+      console.log('立项结果（原始字符串）:', JSON.stringify(submitData.basic_dev_project_initiation_result));
+      console.log('中期检查（原始字符串）:', JSON.stringify(submitData.basic_dev_project_midterm_inspection));
+      console.log('项目成果（原始字符串）:', JSON.stringify(submitData.basic_dev_project_achievements));
+
+      // 构建Markdown预览（保持输入时的换行格式）
+      const mdContent = `# 科学研究（修改后）\n\n` +
+          `## 页面封面图\n` +
+          `![科学研究封面](${formData.pageImageUrl || '暂无封面图'})\n\n` +
+          `## 基地开放项目管理制度\n${formData.basicDevProjectManagementSystem || '暂无内容'}\n\n` +
+          `## 基地开放项目立项结果\n${formData.basicDevProjectInitiationResult || '暂无内容'}\n\n` +
+          `## 基地开放项目中期检查\n${formData.basicDevProjectMidtermInspection || '暂无内容'}\n\n` +
+          `## 基地开放项目成果\n${formData.basicDevProjectAchievements || '暂无内容'}`;
+
+      console.log('\n\n【Markdown显示预览】：\n');
+      console.log(mdContent);
+
+      ElMessage.success('内容保存成功！');
+    } else {
+      ElMessage.error('保存失败：' + (response.data.message || '未知错误'));
+    }
+  } catch (error) {
+    console.error('保存全部内容失败：', error);
+    ElMessage.error('保存失败，请重试');
+  } finally {
+    isSaving.value = false;
+  }
+};
+</script>
+<style scoped>
+.research-management {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.page-header-card {
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0;
+}
+
+/* 页面图片管理样式 */
+.page-image-management {
+  margin-top: 20px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.section-desc {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 15px;
+}
+
+.cover-uploader {
+  width: 100%;
+  max-width: 800px;
+}
+
+.cover-preview {
+  width: 100%;
+  height: 225px; /* 16:9比例适配 */
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+  background: #f5f5f5;
+}
+
+.cover-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.remove-cover-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.3s;
+}
+
+.remove-cover-btn:hover {
+  background: rgba(255, 0, 0, 0.8);
+}
+
+.cover-action-buttons {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.cover-upload-area {
+  width: 100%;
+  height: 225px;
+}
+
+.upload-placeholder {
+  width: 100%;
+  height: 100%;
+  border: 2px dashed #ccc;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #fafafa;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.upload-placeholder:hover {
+  border-color: #409eff;
+  background: #f0f7ff;
+}
+
+.upload-icon {
+  font-size: 36px;
+  color: #999;
+  margin-bottom: 12px;
+}
+
+.upload-text {
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 6px;
+}
+
+.upload-subtext {
+  color: #999;
+  font-size: 12px;
+}
+
+/* 操作按钮样式 */
+.action-buttons {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+
+/* 确保textarea正确渲染换行 */
+:deep(.el-textarea__inner) {
+  min-height: 200px;
+  resize: vertical;
+  white-space: pre-line;
+  line-height: 1.6;
+}
+</style>
--- a/web/src/views/ScientificResearch.vue
+++ b/web/src/views/ScientificResearch.vue
@@ -1,87 +1,275 @@
 <template>
-  <div class="scientific-research-page">
-    <!-- 页面标题区域 -->
-    <div class="page-header">
+  <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">Base Overview</p>
+        <p class="english-title">SCIENTIFIC RESEARCH</p>
+      </div>
    </div>

+    <!-- 内容容器 -->
+    <div class="content-wrapper">
      <!-- 导航标签区域 -->
-    <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
+        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>

-    <!-- 内容区域 -->
-    <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="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 class="content-text">
-        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
-        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
-        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
-        <p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
      </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;
 }

-/* 响应式调整 */
-@media (max-width: 768px) {
-  .page-header {
-    padding: 40px 20px;
+.text-content p:last-child {
+  margin-bottom: 0;
 }

-  .main-title {
+/* 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;
 }

-  .content-text {
-    column-count: 1; /* 移动端单列显示 */
+.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;
+}
+
+.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-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) {