hldrCenter/web/src/views/BaseOverview.vue

<template>
  <div class="base-overview-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>
      </div>
    </div>

    <!-- 内容容器 -->
    <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>
        </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">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>
        </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 v-for="(item, index) in regulationsItems" :key="index">
                    {{ item }}
                  </p>
                  <!-- 若无数据显示提示 -->
                  <p v-if="!baseInfo.regulations || regulationsItems.length === 0">暂无规章制度信息</p>
                </div>
              </div>
            </div>
          </div>
        </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> {{ 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>
  </div>
</template>

<script lang="ts" setup>
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 {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.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-family: 'Source Han Serif CN', '思源宋体 CN', serif;
  font-size: 48px;
  font-weight: 600;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.english-title {
  font-family: 'Source Han Serif CN', '思源宋体 CN', serif;
  font-size: 48px;
  margin: 0;
  letter-spacing: 2px;
}

.content-wrapper {
  font-family: 'Source Han Serif CN', '思源宋体 CN', serif;
  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: center;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  color: #666;
  padding: 0 20px;
  margin-right: 10px;
}

:deep(.el-tabs__item.is-active) {
  color: #b50009;
  font-weight: 500;
}

:deep(.el-tabs__active-bar) {
  background-color: #b50009;
}

.tab-content {
  padding: 30px 0;
}

.content-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  align-items: start;
}

.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;
}

.section-english {
  font-size: 16px;
  color: #999;
  margin: 0 0 20px 0;
  text-transform: uppercase;
}

.text-content {
  line-height: 1.8;
  color: #555;
  font-size: 16px;
}

.text-content p {
  margin: 0 0 24px 0;
  text-align: justify;
  text-indent: 2em;
}

.text-content p:last-child {
  margin-bottom: 0;
}

.text-content a {
  color: #b50009;
  text-decoration: none;
}

.text-content a:hover {
  text-decoration: underline;
}

.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 {
    text-indent: 0;
    margin-bottom: 16px;
  }

  .qrcode-container {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .cover-title {
    left: 20px;
  }
  .main-title {
    font-size: 24px;
  }
  .english-title {
    font-size: 14px;
  }
}
</style>