refactor: 重构布局和组件结构
- 删除冗余的index.vue文件，将其功能整合到MainLayout.vue - 修改LeftModule.vue中的菜单项文字从"文章"改为"目录" - 更新打字机效果的默认文本为测试内容 - 优化jsconfig.json格式
This commit is contained in:
qingfeng1121
@@ -1,4 +1,5 @@
|
||||
{
|
||||
|
||||
"include": ["src/**/*"],
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<el-menu-item index="/article-list">
|
||||
<el-icon>
|
||||
</el-icon>
|
||||
<span>文章</span>
|
||||
<span>目录</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/nonsense">
|
||||
<el-icon>
|
||||
|
||||
210
src/index.vue
210
src/index.vue
@@ -1,210 +0,0 @@
|
||||
<template>
|
||||
<div class="elrow-top" :class="elrowtop">
|
||||
<el-row justify="center">
|
||||
<el-col :span="4" v-if="windowwidth">
|
||||
<div class="grid-content ep-bg-purple-dark">
|
||||
<div>清疯不颠</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14" justify="center">
|
||||
<div class="grid-content ep-bg-purple-dark">
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" :collapse="false" @select="handleSelect">
|
||||
<el-menu-item index="/:type">
|
||||
首页
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/aericle">
|
||||
文章
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/nonsense">
|
||||
疯言疯语
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/about">
|
||||
关于
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/message">
|
||||
留言板
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2" class="search-container" v-if="windowwidth">
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="hero" :class="{ 'newhero': classhero }" v-if="windowwidth">
|
||||
<h1 class="typewriter">{{ heroText }}</h1>
|
||||
</div>
|
||||
|
||||
<div id="content-section" :class="{ 'visible': isconts }">
|
||||
<div class="nonsensetitle" v-if="classnonsenset">
|
||||
<div class="nonsensetitleconst">
|
||||
<h1>发癫中QAQ</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 状态模块 -->
|
||||
<leftmodlue class="leftmodluepage" :class="{ 'nonsensetmargintop': classnonsenset }" v-if="windowwidth" />
|
||||
<!-- 内容模块 -->
|
||||
<RouterView class="RouterViewpage" :class="{ 'nonsensetmargintop': classnonsenset }" />
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="Pagination">
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
// import leftmodlue from '@/views/leftmodlue.vue';
|
||||
|
||||
// hero 区域样式控制
|
||||
const classhero = ref(false);
|
||||
// 内容区可见性
|
||||
const isconts = ref(false);
|
||||
// 左侧模块滚动状态
|
||||
const isScrollingleftmodlue = ref(false);
|
||||
// 导航栏样式类名
|
||||
const elrowtop = ref('transparent');
|
||||
// 疯言疯语标题区显示
|
||||
const classnonsenset = ref(false);
|
||||
// 屏幕宽度标记（true为大屏，false为小屏）
|
||||
const windowwidth = ref(true);
|
||||
// 当前激活菜单
|
||||
const activeIndex = ref('/:type');
|
||||
|
||||
// 打字机效果相关
|
||||
const fullHeroText = '如果感到累了撸一管就好了';
|
||||
const heroText = ref('');
|
||||
let heroIndex = 0;
|
||||
let heroTimer: number | undefined;
|
||||
|
||||
const startTypewriter = () => {
|
||||
heroText.value = '';
|
||||
heroIndex = 0;
|
||||
if (heroTimer) clearInterval(heroTimer);
|
||||
heroTimer = window.setInterval(() => {
|
||||
if (heroIndex < fullHeroText.length) {
|
||||
heroText.value += fullHeroText[heroIndex];
|
||||
heroIndex++;
|
||||
} else {
|
||||
clearInterval(heroTimer);
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
/**
|
||||
* 菜单选择跳转
|
||||
*/
|
||||
const handleSelect = (key: string) => {
|
||||
router.push({ path: key });
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据路由路径设置页面状态
|
||||
*/
|
||||
const updatePageState = (url: string) => {
|
||||
classhero.value = url !== '/:type';
|
||||
classnonsenset.value = url == '/nonsense';
|
||||
};
|
||||
|
||||
/**
|
||||
* 路由切换时处理页面状态和滚动
|
||||
*/
|
||||
router.beforeEach((to) => {
|
||||
updatePageState(to.path);
|
||||
setActiveIndex(to.path);
|
||||
// 跳转后回到顶部
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
// 首页内容区滚动动画仅大屏下生效
|
||||
if (to.path === '/:type') {
|
||||
isconts.value = window.innerWidth <= 768 ? true : false;
|
||||
// 首页时启动打字机
|
||||
startTypewriter();
|
||||
} else {
|
||||
isconts.value = true;
|
||||
heroText.value = '';
|
||||
if (heroTimer) clearInterval(heroTimer);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 滚动事件处理
|
||||
*/
|
||||
const handleScroll = () => {
|
||||
// 屏幕小于768时只切换导航栏样式，不做内容动画
|
||||
if (window.innerWidth < 768) {
|
||||
elrowtop.value = window.scrollY > 100 ? 'solid' : 'transparent';
|
||||
return;
|
||||
}
|
||||
// 导航栏样式切换
|
||||
if (window.scrollY > 1200) {
|
||||
elrowtop.value = 'hide';
|
||||
} else {
|
||||
elrowtop.value = window.scrollY > 100 ? 'solid' : 'transparent';
|
||||
}
|
||||
// 首页内容区滚动动画
|
||||
if (location.pathname === '/:type') {
|
||||
isconts.value = window.scrollY > 200;
|
||||
isScrollingleftmodlue.value = window.scrollY > 600;
|
||||
} else {
|
||||
isconts.value = true;
|
||||
isScrollingleftmodlue.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 添加滚动监听
|
||||
*/
|
||||
const addScrollListener = () => {
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
};
|
||||
|
||||
/**
|
||||
* 移除滚动监听
|
||||
*/
|
||||
const removeScrollListener = () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
|
||||
/**
|
||||
* 屏幕尺寸变化处理
|
||||
* 小屏时移除滚动监听并设置相关状态
|
||||
* 大屏时添加滚动监听
|
||||
*/
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth < 768) {
|
||||
windowwidth.value = false;
|
||||
isScrollingleftmodlue.value = true;
|
||||
classnonsenset.value = false;
|
||||
isconts.value = true;
|
||||
} else {
|
||||
windowwidth.value = true;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置当前激活菜单
|
||||
*/
|
||||
const setActiveIndex = (locationpathname) => {
|
||||
activeIndex.value = locationpathname;
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
handleResize(); addScrollListener();
|
||||
window.addEventListener('resize', handleResize);
|
||||
// 初始进入时如果是首页，启动打字机
|
||||
if (window.location.pathname === '/:type') {
|
||||
startTypewriter();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// removeScrollListener();
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (heroTimer) clearInterval(heroTimer);
|
||||
});
|
||||
</script>
|
||||
<style></style>
|
||||
@@ -78,7 +78,7 @@ const windowwidth = ref(true);
|
||||
const activeIndex = ref('/:type');
|
||||
|
||||
// 打字机效果相关
|
||||
const fullHeroText = '如果感到累了撸一管就好了';
|
||||
const fullHeroText = '测试打字机效果';
|
||||
const heroText = ref('');
|
||||
let heroIndex = 0;
|
||||
let heroTimer: number | undefined;
|
||||
|
||||
Reference in New Issue
Block a user