alex/fox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/header#VEGA-4759' into 'main'

Browse Source 
VEGA-4759 Адаптация UI шапки портала документации

See merge request common/vega/beecloud-docs!20
This commit is contained in:
Речкина Елена Валерьевна
2025-08-22 06:54:17 +00:00
parent 28e159b8bd 021236498e
commit ff9885c5f8
8 changed files with 163 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/.vitepress/config.mts
+21 -20
View File
@@ -42,7 +42,7 @@ console.log({ base: typeof new_version !== 'undefined' ? '/' : '/docs/' })
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "Beeline Cloud",
title: "cloud",
description: "Документация Beeline Cloud",
head: [['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/bee-favicon.png' }]],
base: typeof new_version !== 'undefined' ? '/' : '/docs/',
@@ -63,7 +63,11 @@ export default defineConfig({
}
},
themeConfig: {
logo: '/favicon.svg',
logo: {
light: '/logo-light-theme.svg',
dark: '/logo-dark-theme.svg',
alt: 'cloud',
},
search: {
provider: 'local',
options: {
@@ -90,30 +94,27 @@ export default defineConfig({
}
},
// https://vitepress.dev/reference/default-theme-config
// nav: [
// ],
// socialLinks: [
// { icon: { svg: gitlab }, link: 'https://git.vimpelcom.ru/common/vega/docs' }
// ],
// editLink: {
// pattern: 'https://git.vimpelcom.ru/-/ide/project/common/vega/docs/edit/develop/-/src/:path',
// text: 'Отредактируйте эту страницу на GitLab'
// },
nav: [
{
text: 'Документация',
link: '/guide/',
},
{
text: 'API',
link: '',
},
{
text: 'Terraform',
// link: '/terraform/',
link: '',
},
],
docFooter: {
next: 'Вперед',
prev: 'Назад'
},
// lastUpdated: {
// text: 'Обновлена',
// formatOptions: {
// dateStyle: 'long',
// }
// },
outline: {
label: 'Содержание'
},
src/.vitepress/theme/components/CustomButton.vue
+10 -1
View File
@@ -5,7 +5,7 @@ import { EXTERNAL_URL_RE } from 'vitepress/dist/client/shared'
interface Props {
tag?: string
size?: 'medium' | 'big'
size?: 'medium' | 'big' | 'small'
theme?: 'brand' | 'alt' | 'sponsor'
text: string
href?: string
@@ -51,6 +51,15 @@ const component = computed(() => {
transition: color 0.1s, border-color 0.1s, background-color 0.1s;
}
.VPButton.small {
border-radius: 12px;
padding: 0 16px;
line-height: 20px;
height: 40px;
font-size: 15px;
font-weight: 500;
}
.VPButton.medium {
border-radius: 12px;
padding: 0 20px;
src/.vitepress/theme/components/CustomNavBar.vue
+15 -9
View File
@@ -12,6 +12,7 @@ import VPNavBarSearch from 'vitepress/dist/client/theme-default/components/VPNav
import VPNavBarSocialLinks from 'vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue'
import CustomNavBarTitle from './CustomNavBarTitle.vue'
import VPNavBarTranslations from 'vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue'
import CustomButton from './CustomButton.vue'
defineProps<{
isScreenOpen: boolean
@@ -27,6 +28,7 @@ const { hasLocalNav } = useLocalNav()
const { frontmatter } = useData()
const classes = ref<Record<string, boolean>>({})
const loginUrl = import.meta.env.VITE_LOGIN_URL
watchPostEffect(() => {
classes.value = {
@@ -51,14 +53,9 @@ watchPostEffect(() => {
<div class="content">
<div class="content-body">
<slot name="nav-bar-content-before" />
<VPNavBarSearch class="search" />
<VPNavBarMenu class="menu" />
<VPNavBarTranslations class="translations" />
<VPNavBarAppearance class="appearance" />
<VPNavBarSocialLinks class="social-links" />
<VPNavBarExtra class="extra" />
<slot name="nav-bar-content-after" />
<VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
<VPNavBarSearch class="search" />
<CustomButton text="Войти" size="small" :href="loginUrl" />
</div>
</div>
</div>
@@ -105,7 +102,7 @@ watchPostEffect(() => {
@media (min-width: 768px) {
.wrapper {
padding: 0 32px;
padding: 0 24px;
}
}
@@ -187,7 +184,7 @@ watchPostEffect(() => {
.content-body {
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
height: var(--vp-nav-height);
transition: background-color 0.5s;
@@ -221,6 +218,10 @@ watchPostEffect(() => {
height: 24px;
background-color: var(--vp-c-divider);
content: "";
font-weight: 500;
font-size: 15px;
line-height: 20px;
letter-spacing: 0.2px;
}
.menu + .appearance::before,
@@ -251,4 +252,9 @@ watchPostEffect(() => {
background-color: rgba(255, 255, 255, 0.2);
}
}
.search {
justify-content: flex-end;
margin-right: 24px;
}
</style>
src/.vitepress/theme/components/CustomNavBarMenuLink.vue
+42 -5
View File
@@ -3,12 +3,16 @@ import type { DefaultTheme } from 'vitepress/theme'
import { useData } from 'vitepress/dist/client/theme-default/composables/data'
import { isActive } from 'vitepress/dist/client/shared'
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
import { computed, ref } from 'vue'
defineProps<{
item: DefaultTheme.NavItemWithLink
}>()
const { page } = useData()
const textRef = ref<HTMLElement | null>(null)
const wrapperWidth = computed(() => textRef.value?.offsetWidth)
</script>
<template>
@@ -20,22 +24,32 @@ const { page } = useData()
page.relativePath,
item.activeMatch || item.link,
!!item.activeMatch
)
),
disabled: !isActive(
page.relativePath,
item.activeMatch || item.link,
!!item.activeMatch
) && !item.link ? 'disabled' : '',
}"
:href="item.link"
:target="item.target"
:rel="item.rel"
tabindex="0"
>
<span v-html="item.text"></span>
<span
ref="textRef"
v-html="item.text"
/>
</VPLink>
</template>
<style scoped>
<style lang="scss" scoped>
@use '@beeline/design-tokens/scss/tokens/globals/colors';
.VPNavBarMenuLink {
display: flex;
align-items: center;
padding: 0 12px;
padding: 0 24px;
line-height: var(--vp-nav-height);
font-size: 16px;
font-weight: 500;
@@ -45,9 +59,32 @@ const { page } = useData()
.VPNavBarMenuLink.active {
color: var(--color-text-active);
&::after {
position: absolute;
bottom: 0;
content: '';
height: 4px;
display: none;
width: calc(v-bind(wrapperWidth) * 1px);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: colors.$color-background-brand;
}
&.active {
&::after {
display: block;
}
}
}
.VPNavBarMenuLink:hover {
.disabled {
opacity: 0.45;
pointer-events: none;
}
.VPNavBarMenuLink:hover:not(.disabled) {
color: var(--color-text-active);
}
</style>
src/.vitepress/theme/components/CustomNavBarSearchButton.vue
+4 -156
View File
@@ -14,8 +14,6 @@ const $t = createSearchTranslate(defaultTranslations)
</script>
<template>
<button type="button" class="DocSearch DocSearch-Button CustomDocSearch-Button" :aria-label="$t('button.buttonAriaLabel')">
<span class="DocSearch-Button-Container">
<svg
class="DocSearch-Search-Icon"
width="20"
@@ -32,13 +30,6 @@ const $t = createSearchTranslate(defaultTranslations)
stroke-linejoin="round"
/>
</svg>
<span class="DocSearch-Button-Placeholder">{{ $t('button.buttonText') }}</span>
</span>
<span class="DocSearch-Button-Keys">
<kbd class="DocSearch-Button-Key"></kbd>
<kbd class="DocSearch-Button-Key">K</kbd>
</span>
</button>
</template>
<style>
@@ -65,156 +56,13 @@ const $t = createSearchTranslate(defaultTranslations)
--docsearch-hit-shadow: none;
}
.DocSearch-Button {
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
margin: 0;
padding: 0;
width: 48px;
height: 55px;
background: transparent;
transition: border-color 0.25s;
}
.DocSearch-Button:hover {
background: transparent;
}
.DocSearch-Button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
.DocSearch-Button:focus:not(:focus-visible) {
outline: none !important;
}
@media (min-width: 768px) {
.DocSearch-Button {
justify-content: flex-start;
border: 1px solid transparent;
border-radius: 12px;
padding: 0 10px 0 12px;
width: 100%;
height: 40px;
background-color: var(--vp-c-bg-alt);
}
.DocSearch-Button:hover {
border-color: var(--vp-c-brand-1);
background: var(--vp-c-bg-alt);
}
}
.DocSearch-Button .DocSearch-Button-Container {
display: flex;
align-items: center;
}
.DocSearch-Button .DocSearch-Search-Icon {
.DocSearch-Search-Icon {
position: relative;
width: 16px;
height: 16px;
width: 18px;
height: 18px;
color: var(--vp-c-text-1);
fill: currentColor;
transition: color 0.5s;
}
.DocSearch-Button:hover .DocSearch-Search-Icon {
color: var(--vp-c-text-1);
}
@media (min-width: 768px) {
.DocSearch-Button .DocSearch-Search-Icon {
top: 1px;
margin-right: 8px;
width: 14px;
height: 14px;
color: var(--vp-c-text-2);
}
}
.DocSearch-Button .DocSearch-Button-Placeholder {
display: none;
margin-top: 2px;
padding: 0 16px 0 0;
font-size: 13px;
font-weight: 500;
color: var(--vp-c-text-2);
transition: color 0.5s;
}
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
color: var(--vp-c-text-1);
}
@media (min-width: 768px) {
.DocSearch-Button .DocSearch-Button-Placeholder {
display: inline-block;
}
}
.DocSearch-Button .DocSearch-Button-Keys {
/*rtl:ignore*/
direction: ltr;
display: none;
min-width: auto;
}
@media (min-width: 768px) {
.DocSearch-Button .DocSearch-Button-Keys {
display: flex;
align-items: center;
}
}
.DocSearch-Button .DocSearch-Button-Key {
display: block;
margin: 2px 0 0 0;
border: 1px solid var(--vp-c-divider);
/*rtl:begin:ignore*/
border-right: none;
border-radius: 4px 0 0 4px;
padding-left: 6px;
/*rtl:end:ignore*/
min-width: 0;
width: auto;
height: 22px;
line-height: 22px;
font-family: var(--vp-font-family-base);
font-size: 12px;
font-weight: 500;
transition: color 0.5s, border-color 0.5s;
}
.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
/*rtl:begin:ignore*/
border-right: 1px solid var(--vp-c-divider);
border-left: none;
border-radius: 0 4px 4px 0;
padding-left: 2px;
padding-right: 6px;
/*rtl:end:ignore*/
}
.DocSearch-Button .DocSearch-Button-Key:first-child {
font-size: 0 !important;
}
.DocSearch-Button .DocSearch-Button-Key:first-child:after {
content: 'Ctrl';
font-size: 12px;
letter-spacing: normal;
color: var(--docsearch-muted-color);
}
.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after {
content: '\2318';
}
.DocSearch-Button .DocSearch-Button-Key:first-child > * {
display: none;
margin: 8px;
}
</style>
src/.vitepress/theme/components/CustomNavBarTitle.vue
+7 -5
View File
@@ -38,10 +38,10 @@ const target = computed(() =>
:target="target"
>
<slot name="nav-bar-title-before" />
<VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
<template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
<template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
<slot name="nav-bar-title-after" />
<VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
</a>
</div>
</template>
@@ -53,10 +53,13 @@ const target = computed(() =>
border-bottom: 1px solid transparent;
width: 100%;
height: var(--vp-nav-height);
font-size: 16px;
font-weight: 600;
color: var(--vp-c-text-1);
font-size: 25px;
font-weight: 500;
line-height: 28px;
color: var(--color-text-inactive);
transition: opacity 0.25s;
gap: 20px;
margin-right: 24px;
}
@media (min-width: 960px) {
@@ -72,7 +75,6 @@ const target = computed(() =>
}
:deep(.logo) {
margin-right: 8px;
height: var(--vp-nav-logo-height);
}
</style>
src/public/logo-dark-theme.svg
+24
View File
@@ -0,0 +1,24 @@
<svg width="104" height="25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M84.04 7.02c2.024 0 3.464-1.063 3.74-3.395h-1.99c-.205.823-.686 1.234-1.747 1.234-1.063 0-1.612-.411-1.783-1.234h-1.99c.272 2.332 1.746 3.395 3.77 3.395zm-40.827 9.485V8.084h-2.502V20.36h2.607l5.04-8.563v8.563h2.503V8.084h-2.606l-5.042 8.421zM32.832 8.186c-1.983 0-3.674.924-4.55 2.639.125-2.782.678-4.437 3.898-4.868l5.008-.687-.206-2.743-5.213.72c-4.493.617-5.762 4.082-5.762 9.533 0 4.767 2.161 7.819 6.173 7.819 3.91 0 6.036-3.02 6.036-6.55s-2.365-5.863-5.384-5.863zm-.652 9.704c-2.264 0-3.6-1.645-3.6-4.115v-1.268c.479-.96 1.75-1.715 3.6-1.715 1.956 0 3.463.925 3.463 3.257s-1.199 3.841-3.463 3.841zm67.488-9.806v4.594h-4.87V8.082h-2.502V20.36h2.502v-5.145h4.87v5.145h2.504V8.084h-2.504zm-18.165 8.421V8.084H79V20.36h2.607l5.04-8.563v8.563h2.503V8.084h-2.606l-5.04 8.421zm-26.139-.912c-.274 1.372-.652 1.956-1.407 1.956-.411 0-.72-.035-.925-.103v2.846c.308.138.584.24 1.233.24 1.304 0 2.23-.754 2.676-1.92.273-.72.446-1.715.584-2.984.137-1.269.24-2.949.24-4.937h3.327v9.67h2.503V8.085h-7.921c0 3.703-.103 6.138-.31 7.51zm20.044 1.44.035-4.87c.035-3.086-1.853-4.355-4.596-4.355-2.264 0-4.32 1.234-4.629 4.115h2.4c.138-1.131 1.028-1.51 2.229-1.51 1.23 0 2.054.379 2.178 1.642l-3.069 1.24c-2.091.857-3.668 1.817-3.668 3.84 0 2.092 1.166 3.43 3.498 3.43 1.61 0 2.628-.756 3.443-2.234.122 1.478 1.102 2.132 2.798 2.132h.686v-2.367h-.205c-.792 0-1.1-.309-1.1-1.063zm-4.699.96c-1.166 0-2.023-.308-2.023-1.371 0-.926.72-1.337 1.955-1.853l2.39-.994-.025 3.326c-.411.516-1.234.892-2.297.892z"
fill="#fff"/>
<path
d="M10.005 22.498c5.524 0 10.002-4.477 10.002-10 0-5.521-4.478-9.998-10.002-9.998C4.48 2.5.002 6.977.002 12.499s4.478 9.999 10.003 9.999z"
fill="#FFC800"/>
<path
d="M14.309 19.948c-3.397 1.96-7.081 2.311-9.434 1.137A10.007 10.007 0 0 0 20.01 12.35c-.16 2.625-2.305 5.64-5.702 7.6zM11.273 3.233c.688 1.191-.976 3.442-3.72 5.023-2.743 1.581-5.523 1.9-6.211.706a1.092 1.092 0 0 1-.076-.182c-.179-.555.035-1.273.549-2.03a9.942 9.942 0 0 1 3.187-2.912 9.958 9.958 0 0 1 4.118-1.3c.912-.068 1.64.107 2.031.537.047.053.088.105.123.16z"
fill="#000"/>
<path
d="M15.525 4.523c1.203 2.082-1.224 5.731-5.418 8.152-4.195 2.421-8.571 2.697-9.772.615a2.535 2.535 0 0 1-.328-1.148 9.895 9.895 0 0 0 1.02 4.77l.014.026c.363.626.898 1.119 1.566 1.476 2.353 1.259 6.332.826 10.053-1.321 3.719-2.148 6.084-5.374 6.171-8.04.025-.752-.132-1.46-.49-2.087a9.936 9.936 0 0 0-3.628-3.29 2.514 2.514 0 0 1 .814.851l-.002-.004z"
fill="#000"/>
<path
d="M10.007 22.498c5.524 0 10.002-4.477 10.002-10 0-5.521-4.478-9.998-10.002-9.998C4.482 2.5.004 6.977.004 12.499s4.478 9.999 10.003 9.999z"
fill="url(#a)"/>
<defs>
<radialGradient id="a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.006 12.5) scale(10.0025)">
<stop offset=".5" stop-color="#fff" stop-opacity="0"/>
<stop offset="1" stop-color="#fff" stop-opacity=".35"/>
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

src/public/logo-light-theme.svg
+24
View File
@@ -0,0 +1,24 @@
<svg width="104" height="25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M84.04 7.02c2.024 0 3.464-1.063 3.74-3.395h-1.99c-.205.823-.686 1.234-1.747 1.234-1.063 0-1.612-.411-1.783-1.234h-1.99c.272 2.332 1.746 3.395 3.77 3.395zm-40.827 9.485V8.084h-2.502V20.36h2.607l5.04-8.563v8.563h2.503V8.084h-2.606l-5.042 8.421zM32.832 8.186c-1.983 0-3.674.924-4.55 2.639.125-2.782.678-4.437 3.898-4.868l5.008-.687-.206-2.743-5.213.72c-4.493.617-5.762 4.082-5.762 9.533 0 4.767 2.161 7.819 6.173 7.819 3.91 0 6.036-3.02 6.036-6.55s-2.365-5.863-5.384-5.863zm-.652 9.704c-2.264 0-3.6-1.645-3.6-4.115v-1.268c.479-.96 1.75-1.715 3.6-1.715 1.956 0 3.463.925 3.463 3.257s-1.199 3.841-3.463 3.841zm67.488-9.806v4.594h-4.87V8.082h-2.502V20.36h2.502v-5.145h4.87v5.145h2.504V8.084h-2.504zm-18.165 8.421V8.084H79V20.36h2.607l5.04-8.563v8.563h2.503V8.084h-2.606l-5.04 8.421zm-26.139-.912c-.274 1.372-.652 1.956-1.407 1.956-.411 0-.72-.035-.925-.103v2.846c.308.138.584.24 1.233.24 1.304 0 2.23-.754 2.676-1.92.273-.72.446-1.715.584-2.984.137-1.269.24-2.949.24-4.937h3.327v9.67h2.503V8.085h-7.921c0 3.703-.103 6.138-.31 7.51zm20.044 1.44.035-4.87c.035-3.086-1.853-4.355-4.596-4.355-2.264 0-4.32 1.234-4.629 4.115h2.4c.138-1.131 1.028-1.51 2.229-1.51 1.23 0 2.054.379 2.178 1.642l-3.069 1.24c-2.091.857-3.668 1.817-3.668 3.84 0 2.092 1.166 3.43 3.498 3.43 1.61 0 2.628-.756 3.443-2.234.122 1.478 1.102 2.132 2.798 2.132h.686v-2.367h-.205c-.792 0-1.1-.309-1.1-1.063zm-4.699.96c-1.166 0-2.023-.308-2.023-1.371 0-.926.72-1.337 1.955-1.853l2.39-.994-.025 3.326c-.411.516-1.234.892-2.297.892z"
fill="#000"/>
<path
d="M10.005 22.498c5.524 0 10.002-4.477 10.002-10 0-5.521-4.478-9.998-10.002-9.998C4.48 2.5.002 6.977.002 12.499s4.478 9.999 10.003 9.999z"
fill="#FFC800"/>
<path
d="M14.309 19.948c-3.397 1.96-7.081 2.311-9.434 1.137A10.007 10.007 0 0 0 20.01 12.35c-.16 2.625-2.305 5.64-5.702 7.6zM11.273 3.233c.688 1.191-.976 3.442-3.72 5.023-2.743 1.581-5.523 1.9-6.211.706a1.092 1.092 0 0 1-.076-.182c-.179-.555.035-1.273.549-2.03a9.942 9.942 0 0 1 3.187-2.912 9.958 9.958 0 0 1 4.118-1.3c.912-.068 1.64.107 2.031.537.047.053.088.105.123.16z"
fill="#000"/>
<path
d="M15.525 4.523c1.203 2.082-1.224 5.731-5.418 8.152-4.195 2.421-8.571 2.697-9.772.615a2.535 2.535 0 0 1-.328-1.148 9.895 9.895 0 0 0 1.02 4.77l.014.026c.363.626.898 1.119 1.566 1.476 2.353 1.259 6.332.826 10.053-1.321 3.719-2.148 6.084-5.374 6.171-8.04.025-.752-.132-1.46-.49-2.087a9.936 9.936 0 0 0-3.628-3.29 2.514 2.514 0 0 1 .814.851l-.002-.004z"
fill="#000"/>
<path
d="M10.007 22.498c5.524 0 10.002-4.477 10.002-10 0-5.521-4.478-9.998-10.002-9.998C4.482 2.5.004 6.977.004 12.499s4.478 9.999 10.003 9.999z"
fill="url(#a)"/>
<defs>
<radialGradient id="a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.006 12.5) scale(10.0025)">
<stop offset=".5" stop-color="#fff" stop-opacity="0"/>
<stop offset="1" stop-color="#fff" stop-opacity=".35"/>
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB