feat: 添加页脚组件并更新多个功能

- 新增Footer组件显示版权信息和备案号
- 替换favicon为blogicon.jpg
- 更新API基础URL为生产环境
- 重命名nonsenseService方法为createNonsense
- 在文章编辑页添加返回列表按钮
- 优化分类和标签创建后的页面跳转逻辑
- 移除home.vue中不必要的height样式
This commit is contained in:
qingfeng1121
2025-12-11 12:42:54 +08:00
parent fc581b0476
commit 0cbb91077d
10 changed files with 66 additions and 15 deletions

View File

@@ -2,7 +2,7 @@
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/blogicon.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清疯不颠</title>
</head>

BIN
public/blogicon.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -72,6 +72,8 @@
<!-- 分页区域 -->
<Establish class="establish-container" v-if="Login" />
<!-- 页脚 -->
<Footer class="footer-container" v-if="windowwidth" />
</template>
<script lang="ts" setup>
@@ -79,6 +81,7 @@ import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import LeftModule from '@/components/LeftModule.vue';
import Establish from '@/layouts/establish.vue';
import Footer from '@/views/Footer.vue';
// ========== 组件初始化 ==========
@@ -511,7 +514,9 @@ watch(
.close-btn:hover {
color: #409eff;
}
.footer-container {
margin-top: 20px;
}
/* 防止搜索框在小屏幕上重叠 */
@media screen and (max-width: 1200px) {
.search-box-container.open {

View File

@@ -287,12 +287,15 @@ const saveNonsense = (content) => {
}
// 调用服务保存疯言疯语
nonsenseService.saveNonsense({
nonsenseService.createNonsense({
content: content.trim(),
time: new Date()
time: new Date(),
status: 1
}).then(response => {
if (response.code === 200) {
ElMessage.success('疯言疯语发布成功')
// 刷新页面
router.push({ path: `/nonsense`});
} else {
ElMessage.error(response.message || '发布失败')
}
@@ -332,14 +335,14 @@ const createCategory = () => {
* @param {string} typename - 分类名称
*/
const saveCategory = (typename) => {
categoryService.saveCategory({
console.log('保存分类')
categoryService.createCategory({
typename: typename
}).then(response => {
if (response.code === 200) {
ElMessage.success('分类创建成功');
// 刷新页面以显示新分类
const timestamp = new Date().getTime();
router.push({ path: `/home/aericlelist`, query: { t: timestamp } });
// 刷新页面
router.push({ path: `/aericlelist`});
} else {
ElMessage.error(response.message || '创建分类失败');
}
@@ -383,8 +386,8 @@ const saveAttribute = (dto) => {
if (response.code === 200) {
closeAttributeModal()
ElMessage.success('标签创建成功');
// 刷新页面以显示新标签
router.push({ path: `/home/aericlelist`});
// 刷新页面
router.push({ path: `/aericlelist`});
} else {
ElMessage.error(response.message || '创建标签失败');
}

View File

@@ -4,7 +4,7 @@ import { ElMessage } from 'element-plus'
// 创建axios实例
const api = axios.create({
baseURL:'http://localhost:8080/api', // API基础URL
baseURL: 'http://qf1121.top/api', // API基础URL
timeout: 10000, // 请求超时时间
withCredentials: true // 允许跨域请求携带凭证如cookies
})

View File

@@ -1,4 +1,4 @@
// 留言相关API服务
// 疯言疯语相关API服务
import apiService from './apiService'
class NonsenseService {
@@ -22,7 +22,7 @@ class NonsenseService {
* @param {import('../types').Nonsense} nonsense - 疯言疯语内容对象
* @returns {Promise<import('../types').ApiResponse<import('../types').Nonsense>>}
*/
saveNonsense(nonsense){
createNonsense(nonsense){
return apiService.post('/nonsense', nonsense)
}
/**

30
src/views/Footer.vue Normal file
View File

@@ -0,0 +1,30 @@
<!-- 页脚 -->
<template>
<div class="footer">
<div class="footer-content">
<p>© 2023 我的网站. 所有权利保留.</p>
<p>联系我们<a href="mailto:xxxx@exxxx.com">xxxx@exxxx.com</a></p>
<!-- 备案 -->
<p>
备案号<a href="https://beian.miit.gov.cn/" target="_blank">
皖ICP备2025105428号-1
</a>
</p>
</div>
</div>
</template>
<style scoped>
.footer {
padding: 20px;
text-align: center;
}
.footer-content {
width: 80%;
margin: 0 auto;
background-color: #f5f5f5;
border-radius: 10px;
}
</style>

View File

@@ -44,7 +44,9 @@
<!-- 编辑区域 -->
<MdEditor v-model="Articleform.markdownscontent" class="markdown-editor" @on-save="handleSave" noImgZoomIn
noKatex />
<!-- 预览 -->
<!-- 返回列表 -->
<el-button type="primary" @click="handleReturn">返回列表</el-button>
</div>
</div>
</div>
@@ -253,6 +255,18 @@ const handleSave = (markdown) => {
}
})
};
/**
* 返回列表页
*/
const handleReturn = () => {
// 确定是否返回列表页
if (window.confirm('确定要返回列表页吗?所有未保存的更改将丢失。')) {
// 清除全局存储中的article
globalStore.removeValue('updatearticle');
router.push('/home');
}
};
</script>

View File

@@ -360,7 +360,6 @@ watch(
.article-list-content {
position: relative;
padding: 0 0 30px 0;
height: 100%;
}
.pagination-container {
position: absolute;