chore: 新增是否开启首选项导航栏（外观、布局、快捷键、通用）吸顶效果，调整部分样式 (#6804)
This commit is contained in:
zouawen
GitHub
parent
2ce161e585
commit
59097e2466
@ -22,6 +22,7 @@ const defaultPreferences: Preferences = {
|
||||
enableCheckUpdates: true,
|
||||
enablePreferences: true,
|
||||
enableRefreshToken: false,
|
||||
enableStickyPreferencesNavigationBar: true,
|
||||
isMobile: false,
|
||||
layout: 'sidebar-nav',
|
||||
locale: 'zh-CN',
|
||||
|
||||
@ -59,6 +59,10 @@ interface AppPreferences {
|
||||
* @zh_CN 是否开启refreshToken
|
||||
*/
|
||||
enableRefreshToken: boolean;
|
||||
/**
|
||||
* @zh_CN 是否开启首选项导航栏吸顶效果
|
||||
*/
|
||||
enableStickyPreferencesNavigationBar: boolean;
|
||||
/** 是否移动端 */
|
||||
isMobile: boolean;
|
||||
/** 布局方式 */
|
||||
|
||||
@ -35,16 +35,24 @@ const tabsIndicatorStyle = computed(() => {
|
||||
width: `${(100 / props.tabs.length).toFixed(0)}%`,
|
||||
};
|
||||
});
|
||||
|
||||
function activeClass(tab: string): string[] {
|
||||
return tab === activeTab.value ? ['!font-bold', 'text-primary'] : [];
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tabs v-model="activeTab" :default-value="getDefaultValue">
|
||||
<TabsList :style="tabsStyle" class="bg-accent relative grid w-full">
|
||||
<TabsList
|
||||
:style="tabsStyle"
|
||||
class="bg-accent !outline-heavy relative grid w-full !outline !outline-2"
|
||||
>
|
||||
<TabsIndicator :style="tabsIndicatorStyle" />
|
||||
<template v-for="tab in tabs" :key="tab.value">
|
||||
<TabsTrigger
|
||||
:value="tab.value"
|
||||
class="z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium disabled:pointer-events-none disabled:opacity-50"
|
||||
:class="activeClass(tab.value)"
|
||||
class="hover:text-primary z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium disabled:pointer-events-none disabled:opacity-50"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</TabsTrigger>
|
||||
|
||||
@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
|
||||
v-bind="forwardedProps"
|
||||
:class="
|
||||
cn(
|
||||
'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--radix-tabs-indicator-position] rounded-full px-0 py-1 pr-1 transition-[width,transform] duration-300',
|
||||
'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--radix-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
|
||||
@ -134,14 +134,14 @@ watch(
|
||||
<template v-if="theme.type !== 'custom'">
|
||||
<div
|
||||
:style="{ backgroundColor: theme.color }"
|
||||
class="mx-10 my-2 size-5 rounded-md"
|
||||
class="mx-9 my-2 size-5 rounded-md"
|
||||
></div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="size-full px-10 py-2" @click.stop="selectColor">
|
||||
<div class="size-full px-9 py-2" @click.stop="selectColor">
|
||||
<div class="flex-center relative size-5 rounded-sm">
|
||||
<UserRoundPen
|
||||
class="absolute z-10 size-5 opacity-60 group-hover:opacity-100"
|
||||
class="z-1 absolute size-5 opacity-60 group-hover:opacity-100"
|
||||
/>
|
||||
<input
|
||||
ref="colorInput"
|
||||
|
||||
@ -16,7 +16,7 @@ import type { SegmentedItem } from '@vben-core/shadcn-ui';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { Copy, RotateCw } from '@vben/icons';
|
||||
import { Copy, Pin, PinOff, RotateCw } from '@vben/icons';
|
||||
import { $t, loadLocaleMessages } from '@vben/locales';
|
||||
import {
|
||||
clearPreferencesCache,
|
||||
@ -69,6 +69,9 @@ const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
|
||||
const appWatermark = defineModel<boolean>('appWatermark');
|
||||
const appWatermarkContent = defineModel<string>('appWatermarkContent');
|
||||
const appEnableCheckUpdates = defineModel<boolean>('appEnableCheckUpdates');
|
||||
const appEnableStickyPreferencesNavigationBar = defineModel<boolean>(
|
||||
'appEnableStickyPreferencesNavigationBar',
|
||||
);
|
||||
const appPreferencesButtonPosition = defineModel<PreferencesButtonPositionType>(
|
||||
'appPreferencesButtonPosition',
|
||||
);
|
||||
@ -241,7 +244,7 @@ async function handleReset() {
|
||||
<Drawer
|
||||
:description="$t('preferences.subtitle')"
|
||||
:title="$t('preferences.title')"
|
||||
class="sm:max-w-sm"
|
||||
class="!border-0 sm:max-w-sm"
|
||||
>
|
||||
<template #extra>
|
||||
<div class="flex items-center">
|
||||
@ -249,18 +252,44 @@ async function handleReset() {
|
||||
:disabled="!diffPreference"
|
||||
:tooltip="$t('preferences.resetTip')"
|
||||
class="relative"
|
||||
@click="handleReset"
|
||||
>
|
||||
<span
|
||||
v-if="diffPreference"
|
||||
class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
|
||||
></span>
|
||||
<RotateCw class="size-4" @click="handleReset" />
|
||||
<RotateCw class="size-4" />
|
||||
</VbenIconButton>
|
||||
<VbenIconButton
|
||||
:tooltip="
|
||||
appEnableStickyPreferencesNavigationBar
|
||||
? $t('preferences.disableStickyPreferencesNavigationBar')
|
||||
: $t('preferences.enableStickyPreferencesNavigationBar')
|
||||
"
|
||||
class="relative"
|
||||
@click="
|
||||
() =>
|
||||
(appEnableStickyPreferencesNavigationBar =
|
||||
!appEnableStickyPreferencesNavigationBar)
|
||||
"
|
||||
>
|
||||
<PinOff
|
||||
v-if="appEnableStickyPreferencesNavigationBar"
|
||||
class="size-4"
|
||||
/>
|
||||
<Pin v-else class="size-4" />
|
||||
</VbenIconButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="p-1">
|
||||
<VbenSegmented v-model="activeTab" :tabs="tabs">
|
||||
<div>
|
||||
<VbenSegmented
|
||||
v-model="activeTab"
|
||||
:tabs="tabs"
|
||||
:class="{
|
||||
'sticky-tabs-header': appEnableStickyPreferencesNavigationBar,
|
||||
}"
|
||||
>
|
||||
<template #general>
|
||||
<Block :title="$t('preferences.general')">
|
||||
<General
|
||||
@ -449,3 +478,11 @@ async function handleReset() {
|
||||
</Drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.sticky-tabs-header [role='tablist']) {
|
||||
position: sticky;
|
||||
top: -12px;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
{
|
||||
"title": "Preferences",
|
||||
"subtitle": "Customize Preferences & Preview in Real Time",
|
||||
"enableStickyPreferencesNavigationBar": "Enable sticky preferences navigation bar",
|
||||
"disableStickyPreferencesNavigationBar": "Disable sticky preferences navigation bar",
|
||||
"resetTip": "Data has changed, click to reset",
|
||||
"resetTitle": "Reset Preferences",
|
||||
"resetSuccess": "Preferences reset successfully",
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
{
|
||||
"title": "偏好设置",
|
||||
"subtitle": "自定义偏好设置 & 实时预览",
|
||||
"enableStickyPreferencesNavigationBar": "开启首选项导航栏吸顶效果",
|
||||
"disableStickyPreferencesNavigationBar": "关闭首选项导航栏吸顶效果",
|
||||
"resetTitle": "重置偏好设置",
|
||||
"resetTip": "数据有变化，点击可进行重置",
|
||||
"resetSuccess": "重置偏好设置成功",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user