yang/k5web
1
0
Fork 0
mirror of https://github.com/silenty4ng/k5web synced 2025-01-08 21:04:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

update mobile dispaly

Browse source
This commit is contained in:
Silent YANG 2024-05-19 12:16:41 +08:00
parent df34526d48
commit 3ccb0f7386
2 changed files with 133 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

204
src/components/navbar/index.vue
View file

@ -6,7 +6,7 @@
:style="{ margin: 0, fontSize: '18px' }" :style="{ margin: 0, fontSize: '18px' }"
:heading="5" :heading="5"
> >
K5Web {{ !topMenu && appStore.device === 'mobile' ? '' : 'K5Web' }}
</a-typography-title> </a-typography-title>
<icon-menu-fold <icon-menu-fold
v-if="!topMenu && appStore.device === 'mobile'" v-if="!topMenu && appStore.device === 'mobile'"
@ -19,83 +19,143 @@
<Menu v-if="topMenu" /> <Menu v-if="topMenu" />
</div> </div>
<ul class="right-side"> <ul class="right-side">
<li> <template v-if="!topMenu && appStore.device === 'mobile'">
<t-link href="https://txc.qq.com/products/647342" target="_blank">{{ $t('navbar.qa') }}</t-link> <li>
</li> <t-link href="https://txc.qq.com/products/647342" target="_blank">{{ $t('navbar.qa') }}</t-link>
<li> </li>
<a-button type="primary" @click="connectIt">{{ appStore.connectState ? $t('navbar.disconnect') : $t('navbar.connect') }}</a-button> <li>
</li> <a-button type="primary" @click="connectIt">{{ appStore.connectState ? $t('navbar.disconnect') : $t('navbar.connect') }}</a-button>
<li> </li>
<a-tooltip :content="$t('settings.language')"> <li>
<a-button <a-tooltip :content="$t('settings.language')">
class="nav-btn" <a-button
type="outline" class="nav-btn"
:shape="'circle'" type="outline"
@click="setDropDownVisible" :shape="'circle'"
> @click="setDropDownVisible"
<template #icon>
<icon-language />
</template>
</a-button>
</a-tooltip>
<a-dropdown trigger="click" @select="changeLocale as any">
<div ref="triggerBtn" class="trigger-btn"></div>
<template #content>
<a-doption
v-for="item in locales"
:key="item.value"
:value="item.value"
> >
<template #icon> <template #icon>
<icon-check v-show="item.value === currentLocale" /> <icon-language />
</template> </template>
{{ item.label }} </a-button>
</a-doption> </a-tooltip>
</template> <a-dropdown trigger="click" @select="changeLocale as any">
</a-dropdown> <div ref="triggerBtn" class="trigger-btn"></div>
</li> <template #content>
<li> <a-doption
<a-tooltip v-for="item in locales"
:content=" :key="item.value"
theme === 'light' :value="item.value"
? $t('settings.navbar.theme.toDark') >
: $t('settings.navbar.theme.toLight') <template #icon>
" <icon-check v-show="item.value === currentLocale" />
> </template>
<a-button {{ item.label }}
class="nav-btn" </a-doption>
type="outline"
:shape="'circle'"
@click="handleToggleTheme"
>
<template #icon>
<icon-moon-fill v-if="theme === 'dark'" />
<icon-sun-fill v-else />
</template> </template>
</a-button> </a-dropdown>
</a-tooltip> </li>
</li> <li>
<li> <a-tooltip
<a-tooltip :content="
:content=" theme === 'light'
isFullscreen ? $t('settings.navbar.theme.toDark')
? $t('settings.navbar.screen.toExit') : $t('settings.navbar.theme.toLight')
: $t('settings.navbar.screen.toFull') "
"
>
<a-button
class="nav-btn"
type="outline"
:shape="'circle'"
@click="toggleFullScreen"
> >
<template #icon> <a-button
<icon-fullscreen-exit v-if="isFullscreen" /> class="nav-btn"
<icon-fullscreen v-else /> type="outline"
:shape="'circle'"
@click="handleToggleTheme"
>
<template #icon>
<icon-moon-fill v-if="theme === 'dark'" />
<icon-sun-fill v-else />
</template>
</a-button>
</a-tooltip>
</li>
</template>
<template v-else="appStore.device === 'mobile'">
<li>
<t-link href="https://txc.qq.com/products/647342" target="_blank">{{ $t('navbar.qa') }}</t-link>
</li>
<li>
<a-button type="primary" @click="connectIt">{{ appStore.connectState ? $t('navbar.disconnect') : $t('navbar.connect') }}</a-button>
</li>
<li>
<a-tooltip :content="$t('settings.language')">
<a-button
class="nav-btn"
type="outline"
:shape="'circle'"
@click="setDropDownVisible"
>
<template #icon>
<icon-language />
</template>
</a-button>
</a-tooltip>
<a-dropdown trigger="click" @select="changeLocale as any">
<div ref="triggerBtn" class="trigger-btn"></div>
<template #content>
<a-doption
v-for="item in locales"
:key="item.value"
:value="item.value"
>
<template #icon>
<icon-check v-show="item.value === currentLocale" />
</template>
{{ item.label }}
</a-doption>
</template> </template>
</a-button> </a-dropdown>
</a-tooltip> </li>
</li> <li>
<a-tooltip
:content="
theme === 'light'
? $t('settings.navbar.theme.toDark')
: $t('settings.navbar.theme.toLight')
"
>
<a-button
class="nav-btn"
type="outline"
:shape="'circle'"
@click="handleToggleTheme"
>
<template #icon>
<icon-moon-fill v-if="theme === 'dark'" />
<icon-sun-fill v-else />
</template>
</a-button>
</a-tooltip>
</li>
<li>
<a-tooltip
:content="
isFullscreen
? $t('settings.navbar.screen.toExit')
: $t('settings.navbar.screen.toFull')
"
>
<a-button
class="nav-btn"
type="outline"
:shape="'circle'"
@click="toggleFullScreen"
>
<template #icon>
<icon-fullscreen-exit v-if="isFullscreen" />
<icon-fullscreen v-else />
</template>
</a-button>
</a-tooltip>
</li>
</template>
</ul> </ul>
</div> </div>
</template> </template>

1
src/layout/default-layout.vue
View file

@ -29,6 +29,7 @@
mask-closable mask-closable
:closable="false" :closable="false"
@cancel="drawerCancel" @cancel="drawerCancel"
title="K5Web"
> >
<Menu /> <Menu />
</a-drawer> </a-drawer>