完成基地页面

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>