Skip to content

Commit 79d8f14

Browse files
fengjiancaiGreatZPP
fengjiancai
and
GreatZPP
authored
feat: 网站视觉优化 (DevCloudFE#1752)
Co-authored-by: GreatZP <greatzp@greatzp.cn>
1 parent 494927f commit 79d8f14

File tree

18 files changed

+424
-156
lines changed

18 files changed

+424
-156
lines changed

‎packages/devui-vue/docs/.vitepress/demo/Demo.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ export default {
209209
.demo-block {
210210
margin: 10px 0;
211211
border: solid 1px #ebebeb;
212-
border-radius: 3px;
212+
border-radius: 20px;
213213
transition: 0.2s;
214214
}
215215
@@ -249,8 +249,8 @@ export default {
249249
height: 44px;
250250
box-sizing: border-box;
251251
background-color: #fff;
252-
border-bottom-left-radius: 4px;
253-
border-bottom-right-radius: 4px;
252+
border-bottom-left-radius: 20px;
253+
border-bottom-right-radius: 20px;
254254
text-align: center;
255255
margin-top: -1px;
256256
color: #d3dce6;

‎packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -138,15 +138,14 @@ const contributors = computed(() => {
138138
<div class="theme" :class="pageClasses">
139139
<NavBar v-if="showNavbar" @toggle="toggleSidebar">
140140
<template #search>
141-
<slot name="navbar-search">
142-
<AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" :multilang="isMultiLang" :key="site.lang" />
143-
</slot>
141+
<slot name="navbar-search"> </slot>
144142
</template>
145143
</NavBar>
146144

147145
<SideBar :open="openSideBar">
148146
<template #sidebar-top>
149147
<slot name="sidebar-top" />
148+
<AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" :multilang="isMultiLang" :key="site.lang" />
150149
</template>
151150
<template #sidebar-bottom>
152151
<slot name="sidebar-bottom" />

‎packages/devui-vue/docs/.vitepress/devui-theme/components/AlgoliaSearchBox.vue

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function poll() {
3131
}
3232
3333
const docsearch$ = docsearch.default ?? docsearch;
34-
type DocSearchProps = Parameters<typeof docsearch$>[0]
34+
type DocSearchProps = Parameters<typeof docsearch$>[0];
3535
3636
function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
3737
// note: multi-lang search support is removed since the theme
@@ -42,10 +42,8 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
4242
navigator: {
4343
navigate({ itemUrl }) {
4444
const _itemUrl = itemUrl.replaceAll('//', '/');
45-
const { pathname: hitPathname } = new URL(
46-
window.location.origin + _itemUrl,
47-
);
48-
45+
const { pathname: hitPathname } = new URL(window.location.origin + _itemUrl);
46+
4947
// router doesn't handle same-page navigation so we use the native
5048
// browser location API for anchor navigation
5149
if (route.path === hitPathname) {
@@ -82,12 +80,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
8280
8381
function getRelativePath(absoluteUrl: string) {
8482
const { pathname, hash } = new URL(absoluteUrl);
85-
return (
86-
pathname.replace(
87-
/\.html$/,
88-
site.value.cleanUrls === 'disabled' ? '.html' : '',
89-
) + hash
90-
);
83+
return pathname.replace(/\.html$/, site.value.cleanUrls === 'disabled' ? '.html' : '') + hash;
9184
}
9285
</script>
9386

@@ -102,7 +95,7 @@ function getRelativePath(absoluteUrl: string) {
10295
10396
--docsearch-primary-color: var(--c-brand);
10497
--docsearch-highlight-color: var(--devui-brand);
105-
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--devui-brand);
98+
--docsearch-searchbox-shadow: inset 0 0 0 1px var(--devui-brand);
10699
--docsearch-text-color: var(--devui-text);
107100
--docsearch-muted-color: var(--devui-text);
108101
--docsearch-searchbox-background: var(--devui-global-bg);
@@ -114,17 +107,35 @@ function getRelativePath(absoluteUrl: string) {
114107
--docsearch-footer-shadow: '';
115108
--docsearch-hit-shadow: '';
116109
117-
.DocSearch-Commands-Key, .DocSearch-Button-Key{
110+
.DocSearch-Commands-Key,
111+
.DocSearch-Button-Key {
118112
color: var(--devui-light-text);
119113
}
120114
121115
.DocSearch-Hit-action,
122116
.DocSearch-Hit-icon,
123117
.DocSearch-Hit-path,
124118
.DocSearch-Hit-text,
125-
.DocSearch-Hit-title,
126-
{
119+
.DocSearch-Hit-title {
127120
color: var(--devui-text-weak);
128121
}
129122
}
123+
124+
#docsearch {
125+
padding: 16px 12px 16px 8px;
126+
}
127+
128+
.DocSearch-Button {
129+
width: 100%;
130+
margin: 0;
131+
border-radius: var(--devui-border-radius-full);
132+
}
133+
134+
.DocSearch-Button-Placeholder {
135+
color: var(--devui-placeholder);
136+
}
137+
138+
.DocSearch-Button-Keys {
139+
display: none;
140+
}
130141
</style>

‎packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,29 @@
11
<template>
22
<transition name="fade">
3-
<div
4-
v-if="show"
5-
class="go-to-top"
6-
@click="scrollToTop"
7-
>
3+
<div v-if="show" class="go-to-top" @click="scrollToTop">
84
<svg
5+
width="16px"
6+
height="16px"
7+
viewBox="0 0 16 16"
8+
version="1.1"
99
xmlns="http://www.w3.org/2000/svg"
10-
viewBox="0 0 49.484 28.284"
10+
xmlns:xlink="http://www.w3.org/1999/xlink"
1111
>
12-
<g transform="translate(-229 -126.358)">
13-
<rect
14-
fill="currentColor"
15-
width="35"
16-
height="5"
17-
rx="2"
18-
transform="translate(229 151.107) rotate(-45)"
19-
/>
20-
<rect
21-
fill="currentColor"
22-
width="35"
23-
height="5"
24-
rx="2"
25-
transform="translate(274.949 154.642) rotate(-135)"
26-
/>
12+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
13+
<path
14+
d="M8.71335931,15.2865297 C8.61179683,16.2090609 7.32293758,16.1267953 7.27304695,15.2865297 C7.27175008,14.6475142 7.27175008,5.26479636 7.27175008,5.26479636 L2.83675052,9.54548344 C2.14185995,10.1440615 1.3143288,9.18731159 1.83135998,8.55773353 C3.79557855,6.65310872 7.3202657,3.24515592 7.40179694,3.16632781 C7.72696878,2.81306222 8.23887498,2.79476534 8.58495308,3.16632781 C9.23193739,3.7919215 14.0334057,8.42146792 14.1791557,8.58804603 C14.66614,9.19338972 13.8787807,10.0892021 13.2066089,9.58451469 C13.0329683,9.43717095 8.71468744,5.26462448 8.71468744,5.26462448 L8.71335931,15.2865297 Z M1.81868811,-8.54871729e-14 L14.1075619,-8.54871729e-14 L14.1075619,1.39509361 L1.81868811,1.39509361 L1.81868811,-8.54871729e-14 Z"
15+
fill="#FFFFFF"
16+
fill-rule="nonzero"
17+
></path>
2718
</g>
2819
</svg>
2920
</div>
3021
</transition>
3122
</template>
3223

3324
<script lang="ts">
34-
import { debounce } from 'lodash'
35-
import { defineComponent, onMounted, computed, ref } from 'vue'
25+
import { debounce } from 'lodash';
26+
import { defineComponent, onMounted, computed, ref } from 'vue';
3627
export default defineComponent({
3728
name: 'BackToTop',
3829
props: {
@@ -42,58 +33,62 @@ export default defineComponent({
4233
},
4334
},
4435
setup(props) {
45-
const scrollTop = ref<number | null>(null)
36+
const scrollTop = ref<number | null>(null);
4637
const show = computed(() => {
47-
return scrollTop.value! > props.threshold
48-
})
38+
return scrollTop.value! > props.threshold;
39+
});
4940
const scrollToTop = () => {
50-
window.scrollTo({ top: 0, behavior: 'smooth' })
51-
scrollTop.value = 0
52-
}
41+
window.scrollTo({ top: 0, behavior: 'smooth' });
42+
scrollTop.value = 0;
43+
};
5344
const getScrollTop = () => {
54-
return (
55-
window.pageYOffset ||
56-
document.documentElement.scrollTop ||
57-
document.body.scrollTop ||
58-
0
59-
)
60-
}
45+
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
46+
};
6147
onMounted(() => {
62-
scrollTop.value = getScrollTop()
48+
scrollTop.value = getScrollTop();
6349
window.addEventListener(
6450
'scroll',
6551
debounce(() => {
66-
scrollTop.value = getScrollTop()
52+
scrollTop.value = getScrollTop();
6753
}, 100)
68-
)
69-
})
54+
);
55+
});
7056
7157
return {
7258
show,
7359
scrollToTop,
74-
}
60+
};
7561
},
76-
})
62+
});
7763
</script>
7864

7965
<style lang="scss" scoped>
8066
.go-to-top {
8167
cursor: pointer;
8268
position: fixed;
8369
display: flex;
70+
justify-content: center;
71+
align-items: center;
8472
bottom: 2rem;
85-
right: calc((100vw - 1440px) / 2 + 144px);
86-
width: 22px;
87-
color: var(--devui-brand);
73+
right: 40px;
74+
width: 40px;
75+
height: 40px;
76+
border-radius: 50%;
77+
background-color: var(--devui-base-bg);
78+
box-shadow: 0 6px 16px 0 var(--devui-shadow);
8879
z-index: 1;
8980
9081
&:hover {
9182
color: var(--devui-brand-hover);
9283
}
9384
9485
& svg {
95-
width: 22px;
96-
height: 22px;
86+
width: 16px;
87+
height: 16px;
88+
89+
path {
90+
fill: var(--devui-text);
91+
}
9792
}
9893
}
9994

‎packages/devui-vue/docs/.vitepress/devui-theme/components/NextAndPrevLinks.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script setup lang="ts">
2-
import { withBase } from 'vitepress'
3-
import { useNextAndPrevLinks } from '../composables/nextAndPrevLinks'
4-
import ArrowLeft from './icons/ArrowLeft.vue'
5-
import ArrowRight from './icons/ArrowRight.vue'
2+
import { withBase } from 'vitepress';
3+
import { useNextAndPrevLinks } from '../composables/nextAndPrevLinks';
4+
import ArrowLeft from './icons/ArrowLeft.vue';
5+
import ArrowRight from './icons/ArrowRight.vue';
66
7-
const { hasLinks, prev, next } = useNextAndPrevLinks()
7+
const { hasLinks, prev, next } = useNextAndPrevLinks();
88
</script>
99

1010
<template>
@@ -28,7 +28,7 @@ const { hasLinks, prev, next } = useNextAndPrevLinks()
2828

2929
<style scoped>
3030
.next-and-prev-link {
31-
padding-top: 1rem;
31+
padding: 1rem 0;
3232
}
3333
3434
.container {

0 commit comments

Comments
 (0)