Skip to content

Commit 268eca0

Browse files
worryzyyworryzyy
committed
feat: 添加回到顶部功能，更新样式
1 parent 26a60c7 commit 268eca0

File tree

9 files changed

+777
-31
lines changed

9 files changed

+777
-31
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,4 @@ lib/
2222
# 系统文件
2323
.DS_Store
2424
Thumbs.db
25+
.windsurf

‎docs/package-lock.json‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/src/.vuepress/components/BackToTop.vue‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div class="back-to-top" :class="{ 'back-to-top-show': show }" @click="scrollToTop">
3+
<i class="el-icon-arrow-up"></i>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'BackToTop',
10+
data() {
11+
return {
12+
show: false
13+
}
14+
},
15+
mounted() {
16+
window.addEventListener('scroll', this.handleScroll)
17+
},
18+
beforeDestroy() {
19+
window.removeEventListener('scroll', this.handleScroll)
20+
},
21+
methods: {
22+
handleScroll() {
23+
this.show = window.pageYOffset > 300
24+
},
25+
scrollToTop() {
26+
window.scrollTo({
27+
top: 0,
28+
behavior: 'smooth'
29+
})
30+
}
31+
}
32+
}
33+
</script>
34+
35+
<style scoped>
36+
.back-to-top {
37+
position: fixed;
38+
right: 20px;
39+
bottom: 20px;
40+
width: 40px;
41+
height: 40px;
42+
border-radius: 50%;
43+
background-color: var(--color-primary, #409EFF);
44+
color: white;
45+
display: flex;
46+
align-items: center;
47+
justify-content: center;
48+
cursor: pointer;
49+
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
50+
opacity: 0;
51+
transform: translateY(20px);
52+
transition: all 0.3s ease;
53+
z-index: 1000;
54+
}
55+
56+
.back-to-top-show {
57+
opacity: 1;
58+
transform: translateY(0);
59+
}
60+
61+
.back-to-top:hover {
62+
background-color: var(--color-primary-light, #66b1ff);
63+
}
64+
</style>

‎docs/src/.vuepress/components/GlobalLayout.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div class="global-layout">
3+
<component :is="layout"/>
4+
<BackToTop />
5+
</div>
6+
</template>
7+
8+
<script>
9+
import BackToTop from './BackToTop.vue'
10+
11+
export default {
12+
name: 'GlobalLayout',
13+
components: {
14+
BackToTop
15+
},
16+
computed: {
17+
layout() {
18+
const layout = this.$page.frontmatter.layout
19+
if (layout && (this.$vuepress.getLayoutAsyncComponent(layout) || this.$vuepress.getVueComponent(layout))) {
20+
return layout
21+
}
22+
return 'Layout'
23+
}
24+
}
25+
}
26+
</script>
27+
28+
<style>
29+
.global-layout {
30+
position: relative;
31+
}
32+
</style>

‎docs/src/.vuepress/config.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,12 +130,14 @@ module.exports = {
130130
docsDir: 'packages/docs/src',
131131
editLinks: true,
132132
editLinkText: '在 GitHub 上编辑此页',
133-
smoothScroll: true
133+
smoothScroll: true,
134+
sidebarDepth: 2, // 嵌套的标题链接深度，默认为1，最大为2，提取h2和h3标题
135+
activeHeaderLinks: true, // 页面滚动时自动激活侧边栏链接
136+
displayAllHeaders: false, // 默认值：false，设置为true会显示所有页面的标题链接
134137
},
135138
markdown: {
136139
lineNumbers: true,
137140
extractHeaders: ['h2', 'h3', 'h4', 'h5', 'h6']
138141
},
139142
plugins: ['demo-container'],
140-
141-
};
143+
};

‎docs/src/.vuepress/enhanceApp.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
import ElementUI from 'element-ui'
22
import ElementXUI from 'element-x-ui'
33
import 'element-ui/lib/theme-chalk/index.css' // 必须引入样式文件
4+
import BackToTop from './components/BackToTop.vue'
45

5-
export default ({ Vue }) => {
6+
export default ({ Vue, router }) => {
67
Vue.use(ElementUI)
78
Vue.use(ElementXUI)
9+
Vue.component('BackToTop', BackToTop)
10+
11+
// 添加全局的路由切换后回到顶部的功能
12+
router.options.scrollBehavior = (to, from, savedPosition) => {
13+
if (savedPosition) {
14+
return savedPosition
15+
} else {
16+
return { x: 0, y: 0 }
17+
}
18+
}
819
}

‎docs/src/.vuepress/styles/index.styl‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// 主题色变量
2+
$accentColor = #409EFF
3+
4+
// 设置侧边栏字体大小
5+
.sidebar-heading {
6+
font-size: 16px !important;
7+
}
8+
9+
.sidebar-link {
10+
font-size: 16px !important;
11+
}
12+
13+
// 表格样式
14+
.theme-default-content:not(.custom) {
15+
// 表格宽度铺满
16+
table {
17+
width: 100%;
18+
display: table;
19+
border-collapse: collapse;
20+
margin: 1rem 0;
21+
}
22+
23+
// 表头不换行
24+
th {
25+
white-space: nowrap;
26+
background-color: #fafafa;
27+
padding: 12px 8px;
28+
font-weight: 500;
29+
color: #333;
30+
border-bottom: 2px solid #ebeef5;
31+
}
32+
33+
// 表格单元格样式
34+
td {
35+
padding: 12px 8px;
36+
border-bottom: 1px solid #ebeef5;
37+
}
38+
39+
// 表格行悬停效果
40+
tr:hover {
41+
background-color: #fafafa;
42+
}
43+
44+
// 表格内的代码样式
45+
td code {
46+
background-color: rgba(64, 158, 255, 0.1);
47+
color: $accentColor;
48+
padding: 0.25rem 0.5rem;
49+
border-radius: 3px;
50+
}
51+
}
52+
53+
// 按钮样式
54+
.el-button--primary {
55+
background-color: $accentColor;
56+
border-color: $accentColor;
57+
}
58+
59+
// 滚动条样式
60+
::-webkit-scrollbar {
61+
width: 6px;
62+
height: 6px;
63+
}
64+
65+
::-webkit-scrollbar-track {
66+
background: #f1f1f1;
67+
}
68+
69+
::-webkit-scrollbar-thumb {
70+
background: #c1c1c1;
71+
border-radius: 3px;
72+
}
73+
74+
::-webkit-scrollbar-thumb:hover {
75+
background: $accentColor;
76+
}
77+
78+
// 回到顶部按钮样式
79+
.back-to-top {
80+
background-color: $accentColor;
81+
}
82+
83+
.back-to-top:hover {
84+
background-color: lighten($accentColor, 10%);
85+
}

‎docs/src/.vuepress/styles/palette.styl‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// 颜色
2+
$accentColor = #409EFF // 主题色，与 Element UI 默认主题色一致
3+
$textColor = #2c3e50 // 文本颜色
4+
$borderColor = #eaecef // 边框颜色
5+
$codeBgColor = #282c34 // 代码块背景色
6+
$arrowBgColor = #ccc // 箭头背景色
7+
$badgeTipColor = #42b983 // 提示徽标背景色
8+
$badgeWarningColor = #e7c000 // 警告徽标背景色
9+
$badgeErrorColor = #DA5961 // 错误徽标背景色
10+
11+
// 布局
12+
$navbarHeight = 3.6rem
13+
$sidebarWidth = 20rem
14+
$contentWidth = 740px
15+
$homePageWidth = 960px
16+
17+
// 响应式断点
18+
$MQNarrow = 959px
19+
$MQMobile = 719px
20+
$MQMobileNarrow = 419px

0 commit comments

Comments
 (0)