feat: 重构前端项目结构并添加新功能
重构项目目录结构，将组件和服务模块化 添加Element Plus UI库并集成到项目中 实现文章、留言和分类的类型定义 新增工具函数模块包括日期格式化和字符串处理 重写路由配置并添加全局路由守卫 优化页面布局和响应式设计 新增服务层封装API请求 完善文章详情页和相关文章推荐功能
This commit is contained in:
qingfeng1121
240
src/components/LeftModule.vue
Normal file
240
src/components/LeftModule.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div id="alld">
|
||||
<div id="top">
|
||||
<div class="top1">
|
||||
<h3>小颠公告栏</h3>
|
||||
</div>
|
||||
<div class="top2">
|
||||
<p>站主发癫中请勿靠近</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cont">
|
||||
<div class="cont1">
|
||||
<h2>小颠片刻</h2>
|
||||
<p>左眼右右眼左，四十五度成就美</p>
|
||||
</div>
|
||||
<div class="cont2">
|
||||
<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
|
||||
<el-menu-item index="/:type">
|
||||
<el-icon>
|
||||
</el-icon>
|
||||
<span>首页</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/article-list">
|
||||
<el-icon>
|
||||
</el-icon>
|
||||
<span>文章</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/nonsense">
|
||||
<el-icon>
|
||||
</el-icon>
|
||||
<span>疯言疯语</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bot" :class="{ 'botrelative': scrollY }">
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<el-tab-pane label="个人简介" name="first">
|
||||
<div class="mylogo">
|
||||
<el-avatar :src="state.circleUrl" />
|
||||
</div>
|
||||
<p>清疯不颠</p>
|
||||
<p>重度精神失常患者</p>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="功能" name="second">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
// 当前激活菜单
|
||||
const activeIndex = ref('/:type')
|
||||
const router = useRouter()
|
||||
const activeName = ref('first')
|
||||
const state = reactive({
|
||||
circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
|
||||
squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
|
||||
sizeList: ['small', '', 'large'] as const,
|
||||
})
|
||||
|
||||
|
||||
// 处理菜单选择跳转
|
||||
const handleSelect = (key: string) => {
|
||||
router.push({ path: key })
|
||||
}
|
||||
|
||||
// 路由切换时同步菜单高亮
|
||||
router.beforeEach((to) => {
|
||||
activeIndex.value = to.path
|
||||
})
|
||||
|
||||
// 控制底部模块吸顶效果
|
||||
const scrollY = ref(false)
|
||||
const handleScroll = () => {
|
||||
scrollY.value = window.scrollY > 1100
|
||||
}
|
||||
|
||||
// 生命周期管理事件监听，防止内存泄漏
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 整体布局外层，每个子div底部间距 */
|
||||
#alld div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 顶部公告栏样式 */
|
||||
#top {
|
||||
height: 100px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(102, 161, 216, 0.9); /* 蓝色半透明背景 */
|
||||
}
|
||||
|
||||
.top1 {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.top2 {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 内容区域样式 */
|
||||
#cont {
|
||||
border-radius: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
|
||||
}
|
||||
|
||||
.cont1 {
|
||||
text-align: center;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.cont1 h2 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cont1 p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 菜单样式 */
|
||||
.cont2 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.cont2 .el-menu-vertical-demo{
|
||||
display: block;
|
||||
background-color: rgba(0, 0, 0,0 ); /* 白色半透明背景 */
|
||||
}
|
||||
.cont2 .el-menu-vertical-demo ul li:hover{
|
||||
background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
|
||||
}
|
||||
|
||||
/* 分类列表样式 */
|
||||
.cont3 {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.cont3 h3 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background-color: rgba(240, 240, 240, 0.5);
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background-color: rgba(52, 152, 219, 0.2);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.category-name {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.category-count {
|
||||
color: #7f8c8d;
|
||||
font-size: 12px;
|
||||
background-color: rgba(127, 140, 141, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* 底部标签页样式 */
|
||||
#bot {
|
||||
border-radius: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
|
||||
padding: 15px;
|
||||
}
|
||||
.demo-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav-scroll{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
/* 头像样式 */
|
||||
.mylogo {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
/* 吸顶效果 */
|
||||
.botrelative {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
z-index: 100;
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user