完成基地页面
This commit is contained in:
@@ -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',
|
||||
};
|
||||
// 页面图片上传失败处理
|
||||
const handlePageImageUploadError = (error: any) => {
|
||||
console.error('页面封面图上传错误：', error);
|
||||
ElMessage.error('页面封面图上传失败，请重试');
|
||||
};
|
||||
|
||||
formData[activeTab.value as keyof typeof initialValues] = initialValues[activeTab.value as keyof typeof initialValues];
|
||||
ElMessage.info('当前标签内容已重置！');
|
||||
// 删除页面图片
|
||||
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` +
|
||||
`\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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user