From 7e9c70fe6adf3ac9888c4f2b8d4ef61b72a35a05 Mon Sep 17 00:00:00 2001
From: mayiming <1627832236@qq.com>
Date: Mon, 27 Oct 2025 17:22:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=9F=BA=E5=9C=B0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/baseoverview/BaseOverView.vue   | 489 +++++++++++++-----
 web/src/views/BaseOverview.vue                | 412 +++++++++++----
 2 files changed, 667 insertions(+), 234 deletions(-)

diff --git a/management/src/views/baseoverview/BaseOverView.vue b/management/src/views/baseoverview/BaseOverView.vue
index 72e24021..1602b45f 100644
--- a/management/src/views/baseoverview/BaseOverView.vue
+++ b/management/src/views/baseoverview/BaseOverView.vue
@@ -1,24 +1,75 @@
 <template>
   <div class="base-overview-admin">
-    <!-- 页面标题 -->
+    <!-- 页面图片管理（单张图片） -->
     <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="introduction">
         <el-card class="mt-2">
           <el-form ref="introductionForm" :model="formData" label-width="120px">
             <el-form-item label="简介内容">
               <el-input
-                type="textarea"
-                v-model="formData.introduction"
-                rows="10"
-                placeholder="请输入基地简介内容"
-                clearable
-                resize="vertical"
+                  type="textarea"
+                  v-model="formData.introduction"
+                  rows="10"
+                  placeholder="请输入基地简介内容（支持换行）"
+                  clearable
+                  resize="vertical"
+                  style="white-space: pre-line;"
               />
             </el-form-item>
           </el-form>
@@ -46,12 +97,13 @@
           <el-form ref="regulationsForm" :model="formData" label-width="120px">
             <el-form-item label="制度内容">
               <el-input
-                type="textarea"
-                v-model="formData.regulations"
-                rows="10"
-                placeholder="请输入规章制度内容"
-                clearable
-                resize="vertical"
+                  type="textarea"
+                  v-model="formData.regulations"
+                  rows="10"
+                  placeholder="请输入规章制度内容（支持换行）"
+                  clearable
+                  resize="vertical"
+                  style="white-space: pre-line;"
               />
             </el-form-item>
           </el-form>
@@ -78,137 +130,222 @@
       </el-tab-pane>
     </el-tabs>
 
-    <!-- 操作按钮 -->
+    <!-- 操作按钮（仅保留“保存全部”） -->
     <div class="action-buttons mt-4">
-      <el-button type="primary" @click="saveAll">保存全部</el-button>
-      <el-button @click="saveCurrent">保存当前标签</el-button>
-      <el-button type="info" @click="outputIntroduction">输出简介内容</el-button>
-      <el-button @click="resetAll">重置全部</el-button>
-      <el-button @click="resetCurrent">重置当前标签</el-button>
+      <el-button type="primary" @click="saveAll" :loading="isSaving">保存全部</el-button>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
+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('introduction');
+// 保存状态（防止重复提交）
+const isSaving = ref(false);
+// 上传接口地址
+const uploadAction = import.meta.env.VITE_API_BASE_URL + '/upload/cover';
 
 // 统一管理表单数据（与数据库字段对应）
 const formData = reactive({
-  introduction: '探索健康设计的新路径，引领知识创新的新范式...',
-  director: '张三',
-  deputyDirector: '李四',
-  researchers: '王五,赵六,孙七',
-  regulations: '1. 科研项目管理办法...',
-  address: '湖北省武汉市江夏区阳光大道1号',
-  phone: '027-87186XXX',
-  email: 'hldrcenter@wtu.edu.cn',
-  website: 'http://www.wtu.edu.cn/hldrcenter',
+  pageImageUrl: '', // 页面封面图URL
+  introduction: '', // 基地简介（输入框中显示实际换行，无\n\n）
+  director: '', // 主任
+  deputyDirector: '', // 副主任（对应数据库deputy_director）
+  researchers: '', // 研究人员
+  regulations: '', // 规章制度（输入框中显示实际换行，无\n\n）
+  address: '', // 地址
+  phone: '', // 电话
+  email: '', // 邮箱
+  website: '', // 网站
 });
 
-// 保存全部内容（打印原始数据 + Markdown格式）
-const saveAll = () => {
-  // 1. 打印可直接存入数据库的原始数据（保留所有格式）
-  console.log('【数据库存储格式】基地概况完整原始数据：');
-  console.log('='.repeat(50));
-  console.log(formData); // 直接打印对象，保留原始文本格式
-  console.log('\n【原始文本详情】：');
-  Object.entries(formData).forEach(([key, value]) => {
-    console.log(`- ${key}：`);
-    console.log(value); // 单独打印每个字段的原始文本
-    console.log('---');
-  });
+// 页面挂载时加载数据：1.封面图 2.基地概况信息
+onMounted(() => {
+  console.log('API 基础地址：', import.meta.env.VITE_API_BASE_URL);
+  fetchCarouselImages();
+  fetchBaseInfo(); // 加载数据库中的基地概况数据
+});
 
-  // 2. 构建Markdown格式内容（仅用于展示，不影响原始数据）
-  const mdContent = `# 基地概况\n\n` +
-    `## 基地简介\n${formData.introduction}\n\n` + // 不做格式化，直接使用原始文本
-    `## 基地成员\n` +
-    `- 主任：${formData.director}\n` +
-    `- 副主任：${formData.deputyDirector}\n` +
-    `- 研究人员：${formData.researchers}\n\n` +
-    `## 规章制度\n${formData.regulations}\n\n` + // 不做格式化
-    `## 联系我们\n` +
-    `- 地址：${formData.address}\n` +
-    `- 电话：${formData.phone}\n` +
-    `- 邮箱：${formData.email}\n` +
-    `- 网站：${formData.website}`;
-
-  console.log('\n\n【Markdown格式】基地概况内容：\n');
-  console.log(mdContent);
-
-  ElMessage.success('全部内容保存成功，已在控制台输出原始数据和Markdown格式内容');
+// 从后端获取封面图
+const fetchCarouselImages = async () => {
+  try {
+    const response = await axios.post('http://localhost:8080/api/page-image/get', { page: 'BaseOverview' });
+    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 outputIntroduction = () => {
-  console.log('【数据库存储格式】基地简介原始内容：');
-  console.log('='.repeat(50));
-  console.log('原始文本（可直接存入数据库）：');
-  console.log(formData.introduction); // 直接打印原始文本，保留所有换行和格式
+// 加载数据库数据时，将\n\n转为实际换行（输入框中显示正常换行）
+const fetchBaseInfo = async () => {
+  try {
+    isSaving.value = true;
+    const response = await axios.get('http://localhost:8080/api/base-overview');
+    console.log('基地概况数据加载结果：', response);
 
-  // 可选：同时打印带换行符标记的文本，方便查看换行位置
-  console.log('\n\n带换行符标记的文本（便于调试）：');
-  console.log(formData.introduction.replace(/\n/g, '\\n'));
-
-  // Markdown格式仍使用原始文本
-  const introMd = `# 基地简介\n\n${formData.introduction}`;
-  console.log('\n\n【Markdown格式】基地简介内容：\n');
-  console.log(introMd);
-
-  ElMessage.success('基地简介内容已在控制台输出');
+    if (response.data.success && response.data.data) {
+      const dbData = response.data.data;
+      // 数据库的\n\n → 输入框的实际换行（\n），确保无\n\n字符显示
+      formData.introduction = dbData.introduction ? dbData.introduction.replace(/\\n\\n/g, '\n').replace(/\n\n/g, '\n') : '';
+      formData.director = dbData.director || '';
+      formData.deputyDirector = dbData.deputy_director || ''; // 字段映射
+      formData.researchers = dbData.researchers || '';
+      // 规章制度同样处理
+      formData.regulations = dbData.regulations ? dbData.regulations.replace(/\\n\\n/g, '\n').replace(/\n\n/g, '\n') : '';
+      formData.address = dbData.address || '';
+      formData.phone = dbData.phone || '';
+      formData.email = dbData.email || '';
+      formData.website = dbData.website || '';
+    } else {
+      ElMessage.warning('获取基地信息失败：' + (response.data.message || '未知错误'));
+    }
+  } catch (error) {
+    console.error('获取基地概况信息失败:', error);
+    ElMessage.error('获取基地信息失败，请刷新页面重试');
+  } finally {
+    isSaving.value = false;
+  }
 };
 
-// 保存当前标签页内容（打印原始数据）
-const saveCurrent = () => {
-  const currentKey = activeTab.value as keyof typeof formData;
-  const currentValue = formData[currentKey];
-  
-  console.log(`【数据库存储格式】当前标签（${activeTab.value}）原始内容：`);
-  console.log('='.repeat(50));
-  console.log('字段名：', currentKey);
-  console.log('原始文本：');
-  console.log(currentValue); // 直接打印原始文本
-  console.log('\n带换行符标记的文本：');
-  console.log(currentValue.replace(/\n/g, '\\n')); // 便于调试换行位置
-
-  ElMessage.success(`当前标签（${activeTab.value}）内容保存成功，已在控制台输出原始数据`);
+// 上传前校验
+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 resetAll = () => {
-  Object.assign(formData, {
-    introduction: '探索健康设计的新路径，引领知识创新的新范式...',
-    director: '张三',
-    deputyDirector: '李四',
-    researchers: '王五,赵六,孙七',
-    regulations: '1. 科研项目管理办法...',
-    address: '湖北省武汉市江夏区阳光大道1号',
-    phone: '027-87186XXX',
-    email: 'hldrcenter@wtu.edu.cn',
-    website: 'http://www.wtu.edu.cn/hldrcenter',
-  });
-  ElMessage.info('全部内容已重置！');
+// 封面上传成功
+const handleCoverSuccess: UploadProps['onSuccess'] = (response) => {
+  const ossUrl = response.data?.url;
+  if (ossUrl) {
+    formData.pageImageUrl = ossUrl;
+    ElMessage.success('封面上传成功');
+  } else {
+    ElMessage.error('封面上传失败：未获取到图片地址');
+  }
 };
 
-// 重置当前标签页内容到初始值
-const resetCurrent = () => {
-  const initialValues = {
-    introduction: '探索健康设计的新路径，引领知识创新的新范式...',
-    director: '张三',
-    deputyDirector: '李四',
-    researchers: '王五,赵六,孙七',
-    regulations: '1. 科研项目管理办法...',
-    address: '湖北省武汉市江夏区阳光大道1号',
-    phone: '027-87186XXX',
-    email: 'hldrcenter@wtu.edu.cn',
-    website: 'http://www.wtu.edu.cn/hldrcenter',
-  };
-  
-  formData[activeTab.value as keyof typeof initialValues] = initialValues[activeTab.value as keyof typeof initialValues];
-  ElMessage.info('当前标签内容已重置！');
+// 页面图片上传失败处理
+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: 4,
+      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;
+  }
+};
+
+// 保存时将输入框的实际换行（\n）转为数据库需要的\n\n
+const saveAll = async () => {
+  try {
+    isSaving.value = true;
+
+    // 输入框的\n → 数据库的\n\n，满足存储格式要求
+    const submitData = {
+      id: 1,
+      introduction: formData.introduction.replace(/\n/g, '\n\n'), // 换行转\n\n
+      director: formData.director,
+      deputy_director: formData.deputyDirector, // 字段映射
+      researchers: formData.researchers,
+      regulations: formData.regulations.replace(/\n/g, '\n\n'), // 换行转\n\n
+      address: formData.address,
+      phone: formData.phone,
+      email: formData.email,
+      website: formData.website,
+    };
+
+    console.log("保存的数据：", submitData);
+
+    // 提交数据到后端保存
+    const response = await axios.patch('http://localhost:8080/api/base-overview', submitData);
+
+    if (response.data.success) {
+      // 控制台输出修改后的所有数据
+      console.log('【数据库存储格式】修改后的基地概况完整数据（含\n\n）：');
+      console.log('='.repeat(60));
+      console.log('提交到数据库的原始数据：', submitData);
+
+      console.log('\n【输入框显示格式】（含实际换行，无\n\n）：');
+      console.log('基地简介：', formData.introduction);
+      console.log('规章制度：', formData.regulations);
+
+      // 构建Markdown格式输出
+      const mdContent = `# 基地概况（修改后）\n\n` +
+          `## 页面封面图\n` +
+          `![基地概况封面](${formData.pageImageUrl || '暂无封面图'})\n\n` +
+          `## 基地简介\n${formData.introduction || '暂无内容'}\n\n` +
+          `## 基地成员\n` +
+          `- 主任：${formData.director || '暂无信息'}\n` +
+          `- 副主任：${formData.deputyDirector || '暂无信息'}\n` +
+          `- 研究人员：${formData.researchers || '暂无信息'}\n\n` +
+          `## 规章制度\n${formData.regulations || '暂无内容'}\n\n` +
+          `## 联系我们\n` +
+          `- 地址：${formData.address || '暂无信息'}\n` +
+          `- 电话：${formData.phone || '暂无信息'}\n` +
+          `- 邮箱：${formData.email || '暂无信息'}\n` +
+          `- 网站：${formData.website || '暂无信息'}`;
+
+      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>
 
@@ -221,6 +358,7 @@ const resetCurrent = () => {
 
 .page-header-card {
   margin-bottom: 20px;
+  padding-bottom: 20px;
 }
 
 .page-title {
@@ -229,14 +367,125 @@ const resetCurrent = () => {
   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>
\ No newline at end of file
diff --git a/web/src/views/BaseOverview.vue b/web/src/views/BaseOverview.vue
index 9e025d25..e31ce38f 100644
--- a/web/src/views/BaseOverview.vue
+++ b/web/src/views/BaseOverview.vue
@@ -1,145 +1,284 @@
 <template>
   <div class="base-overview-container">
-    <!-- 页面标题区域 -->
-    <div class="page-header">
-      <h1 class="main-title">基地概况</h1>
-      <p class="english-title">Base Overview</p>
+    <!-- 顶部全屏封面图 -->
+    <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>
+      </div>
     </div>
 
-    <!-- 导航标签区域 -->
-    <el-tabs
-      v-model="activeTab"
-      class="content-tabs"
-      :border="false"
-    >
-
-      <el-tab-pane label="基地简介" name="introduction">
-        <div class="tab-content">
-          <div class="content-layout">
-            <div class="content-left">
-              <h2 class="section-title">基地简介</h2>
-              <p class="section-english">Base Introduction</p>
-            </div>
-            <div class="content-right">
-              <div class="text-content">
-                <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="introduction">
+          <div class="tab-content">
+            <div class="content-layout">
+              <div class="content-left">
+                <h2 class="section-title">基地简介</h2>
+                <p class="section-english">BASE INTRODUCTION</p>
+              </div>
+              <div class="content-right">
+                <div class="text-content">
+                  <!-- 按处理后的换行符渲染多段落 -->
+                  <p v-for="(paragraph, index) in introductionParagraphs" :key="index">
+                    {{ paragraph }}
+                  </p>
+                  <!-- 若无数据显示提示 -->
+                  <p v-if="!baseInfo.introduction || introductionParagraphs.length === 0">暂无基地简介信息</p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </el-tab-pane>
+        </el-tab-pane>
 
-     <el-tab-pane label="基地成员" name="members">
-      <div class="tab-content">
-        <div class="content-layout">
-          <div class="content-left">
-            <h2 class="section-title">基地成员</h2>
-            <p class="section-english">Members</p>
-          </div>
-          <div class="content-right">
-            <div class="text-content">
-              <p><strong>主任：</strong> 张三</p>
-              <p><strong>副主任：</strong> 李四</p>
-              <p><strong>研究人员：</strong> 王五、赵六、孙七 等20余人</p>
-            </div>
-          </div>
-        </div>
-      </div>
-      </el-tab-pane>
-
-      <el-tab-pane label="规章制度" name="regulations">
-        <div class="tab-content">
-          <div class="content-layout">
-            <div class="content-left">
-              <h2 class="section-title">规章制度</h2>
-              <p class="section-english">Regulations</p>
-            </div>
-            <div class="content-right">
-              <div class="text-content">
-                <p><strong>1. 科研项目管理办法</strong>：规范中心科研项目的申报、立项、实施、验收等全流程管理，确保项目质量和成果产出。</p>
-                <p><strong>2. 学术活动管理规定</strong>：鼓励开展高水平学术交流活动，提升中心学术影响力和社会知名度。</p>
-                <p><strong>3. 经费使用管理办法</strong>：严格规范科研经费的使用，确保经费专款专用、合理高效。</p>
-                <p><strong>4. 成果管理办法</strong>：对科研成果的鉴定、登记、转化等进行规范管理，促进成果应用和社会效益发挥。</p>
+        <el-tab-pane label="基地成员" name="members">
+          <div class="tab-content">
+            <div class="content-layout">
+              <div class="content-left">
+                <h2 class="section-title">基地成员</h2>
+                <p class="section-english">BASE MEMBERS</p>
+              </div>
+              <div class="content-right">
+                <div class="text-content">
+                  <p><strong>主任：</strong> {{ baseInfo.director || '暂无信息' }}</p>
+                  <p><strong>副主任：</strong> {{ baseInfo.deputy_director || '暂无信息' }}</p>
+                  <p><strong>研究人员：</strong> {{ baseInfo.researchers || '暂无信息' }}</p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </el-tab-pane>
+        </el-tab-pane>
 
-      <el-tab-pane label="联系我们" name="contact">
-        <div class="tab-content">
-          <div class="content-layout">
-            <div class="content-left">
-              <h2 class="section-title">联系我们</h2>
-              <p class="section-english">Contact Us</p>
-            </div>
-            <div class="content-right">
-              <div class="text-content">
-                <p><strong>地址：</strong> 湖北省武汉市江夏区阳光大道1号 武汉纺织大学 设计学院</p>
-                <p><strong>邮编：</strong> 430200</p>
-                <p><strong>电话：</strong> 027-87186XXX</p>
-                <p><strong>邮箱：</strong> hldrcenter@wtu.edu.cn</p>
-                <p><strong>网站：</strong> <a href="http://www.wtu.edu.cn/hldrcenter" target="_blank">http://www.wtu.edu.cn/hldrcenter</a></p>
+        <el-tab-pane label="规章制度" name="regulations">
+          <div class="tab-content">
+            <div class="content-layout">
+              <div class="content-left">
+                <h2 class="section-title">规章制度</h2>
+                <p class="section-english">REGULATIONS</p>
+              </div>
+              <div class="content-right">
+                <div class="text-content">
+                  <!-- 按换行分割渲染规章制度 -->
+                  <p v-for="(item, index) in regulationsItems" :key="index">
+                    {{ item }}
+                  </p>
+                  <!-- 若无数据显示提示 -->
+                  <p v-if="!baseInfo.regulations || regulationsItems.length === 0">暂无规章制度信息</p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </el-tab-pane>
-    </el-tabs>
+        </el-tab-pane>
 
-    <!-- 底部二维码区域 -->
-    <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">
+        <el-tab-pane label="联系我们" name="contact">
+          <div class="tab-content">
+            <div class="content-layout">
+              <div class="content-left">
+                <h2 class="section-title">联系我们</h2>
+                <p class="section-english">CONTACT US</p>
+              </div>
+              <div class="content-right">
+                <div class="text-content">
+                  <p><strong>地址：</strong> {{ baseInfo.address || '暂无信息' }}</p>
+                  <p><strong>电话：</strong> {{ baseInfo.phone || '暂无信息' }}</p>
+                  <p><strong>邮箱：</strong> {{ baseInfo.email || '暂无信息' }}</p>
+                  <p><strong>网站：</strong>
+                    <!-- 修正：使用处理后的完整URL -->
+                    <a
+                      v-if="formattedWebsite"
+                      :href="formattedWebsite"
+                      target="_blank"
+                    >
+                      {{ baseInfo.website }}
+                    </a>
+                    <span v-else>暂无信息</span>
+                  </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, computed, watch } from 'vue';
+import axios from 'axios';
+import { ElMessage } from 'element-plus';
 
-// 控制当前激活的标签页，默认显示基地简介
+// 控制当前激活的标签页
 const activeTab = ref('introduction');
+// 封面图地址（优先使用管理端上传的图片）
+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 baseInfo = reactive({
+  id: 0,
+  introduction: '',
+  regulations: '',
+  address: '',
+  phone: '',
+  email: '',
+  website: '', // 网站地址（可能缺少http/https协议）
+  director: '',
+  deputy_director: '',
+  researchers: ''
+});
+
+// 页面挂载时加载数据
+onMounted(() => {
+  fetchCoverImage();
+  fetchBaseInfo();
+});
+
+// 从后端获取封面图
+const fetchCoverImage = async () => {
+  try {
+    const response = await axios.post('http://localhost:8080/api/page-image/get', { page: 'BaseOverview' });
+    if (response.data.message === '查询成功') {
+      pageImageUrl.value = response.data.images[0].image_url;
+    }
+    console.log("获取封面成功：", response.data);
+  } catch (error) {
+    console.log('封面图加载失败，使用默认图', error);
+  }
+};
+
+// 从后端获取基地概况信息并绑定到页面
+const fetchBaseInfo = async () => {
+  try {
+    const response = await axios.get('http://localhost:8080/api/base-overview');
+    if (response.data.success) {
+      Object.assign(baseInfo, response.data.data);
+    } else {
+      ElMessage.warning('获取基地信息失败：' + (response.data.message || '未知错误'));
+    }
+  } catch (error) {
+    console.error('获取基地概况信息失败:', error);
+    ElMessage.error('获取基地信息失败，请刷新页面重试');
+  }
+};
+
+// 图片加载失败时使用默认图
+const handleImageError = () => {
+  pageImageUrl.value = defaultCover;
+};
+
+// 处理简介换行
+const introductionParagraphs = computed(() => {
+  if (!baseInfo.introduction) return [];
+  const unescapedText = baseInfo.introduction.replace(/\\n/g, '\n');
+  return unescapedText.split(/\r?\n/)
+    .map(paragraph => paragraph.trim())
+    .filter(paragraph => paragraph);
+});
+
+// 处理规章制度换行
+const regulationsItems = computed(() => {
+  if (!baseInfo.regulations) return [];
+  const unescapedText = baseInfo.regulations.replace(/\\n/g, '\n');
+  return unescapedText.split(/\r?\n/)
+    .map(item => item.trim())
+    .filter(item => item);
+});
+
+// 核心修正：确保网站链接为完整URL（自动补全http/https协议）
+const formattedWebsite = computed(() => {
+  if (!baseInfo.website) return '';
+  // 检查是否已包含协议头（http:// 或 https://）
+  const hasProtocol = /^https?:\/\//.test(baseInfo.website);
+  if (hasProtocol) {
+    return baseInfo.website; // 已有协议，直接返回
+  } else {
+    // 无协议时，默认添加https://（更安全）
+    return `https://${baseInfo.website}`;
+  }
+});
 </script>
 
 <style scoped>
+/* 样式保持不变 */
 .base-overview-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 40px 20px;
+  width: 100%;
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
 }
 
-/* 页面标题样式 */
-.page-header {
-  margin-bottom: 40px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid #e0e0e0;
+.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: 28px;
-  color: #333;
-  margin: 0 0 8px 0;
-  font-weight: 500;
+  font-size: 48px;
+  font-weight: 600;
+  margin: 0 0 10px 0;
+  line-height: 1.2;
 }
 
 .english-title {
-  font-size: 16px;
-  color: #999;
-  margin: 0;
+  font-size: 24px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  margin: 0;
+  letter-spacing: 2px;
+}
+
+.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;
@@ -167,15 +306,13 @@ const activeTab = ref('introduction');
   background-color: #b50009;
 }
 
-/* 内容区域样式 */
 .tab-content {
   padding: 30px 0;
 }
 
-/* 左侧标题 + 右侧内容的布局 */
 .content-layout {
   display: grid;
-  grid-template-columns: 280px 1fr; /* 左侧固定宽度，右侧自适应 */
+  grid-template-columns: 280px 1fr;
   gap: 30px;
   align-items: start;
 }
@@ -206,8 +343,13 @@ const activeTab = ref('introduction');
 }
 
 .text-content p {
-  margin: 0 0 20px 0;
+  margin: 0 0 24px 0;
   text-align: justify;
+  text-indent: 2em;
+}
+
+.text-content p:last-child {
+  margin-bottom: 0;
 }
 
 .text-content a {
@@ -219,10 +361,9 @@ const activeTab = ref('introduction');
   text-decoration: underline;
 }
 
-/* 底部二维码区域 - 靠右对齐 */
 .qrcode-container {
   display: flex;
-  justify-content: flex-end; /* 靠右显示 */
+  justify-content: flex-end;
   gap: 30px;
   margin-top: 50px;
   padding-top: 20px;
@@ -242,10 +383,44 @@ const activeTab = ref('introduction');
   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; /* 移动端单列布局 */
+    grid-template-columns: 1fr;
   }
 
   .content-left {
@@ -255,15 +430,24 @@ const activeTab = ref('introduction');
     margin-bottom: 20px;
   }
 
-  .qrcode-container {
-    justify-content: center; /* 移动端居中显示二维码 */
+  .text-content p {
+    text-indent: 0;
+    margin-bottom: 16px;
   }
 
+  .qrcode-container {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .cover-title {
+    left: 20px;
+  }
   .main-title {
     font-size: 24px;
   }
-
-  .text-content {
+  .english-title {
     font-size: 14px;
   }
 }