fix: refine theme radius options

This commit is contained in:
jxxghp
2026-06-05 23:29:11 +08:00
parent f3c524b6b5
commit 0dd95508b5
7 changed files with 43 additions and 15 deletions

View File

@@ -184,11 +184,6 @@ const radiusOptions = computed<
value: ThemeCustomizerRadius
}>
>(() => [
{
previewRadius: '0',
title: t('theme.customizer.radiusSquare'),
value: 'square',
},
{
previewRadius: '4px',
title: t('theme.customizer.radiusSmall'),
@@ -209,6 +204,11 @@ const radiusOptions = computed<
title: t('theme.customizer.radiusExtra'),
value: 'extra',
},
{
previewRadius: '24px',
title: t('theme.customizer.radiusHuge'),
value: 'huge',
},
])
const layoutOptions = computed<Array<{ icon: string; title: string; value: ThemeCustomizerLayout }>>(() => [

View File

@@ -24,7 +24,7 @@ export const themeCustomizerPrimaryColors = [
] as const
export type ThemeCustomizerLayout = 'collapsed' | 'horizontal' | 'vertical'
export type ThemeCustomizerRadius = 'default' | 'extra' | 'large' | 'small' | 'square'
export type ThemeCustomizerRadius = 'default' | 'extra' | 'huge' | 'large' | 'small'
export type ThemeCustomizerShadow = 'none' | 'low' | 'medium' | 'high'
export type ThemeCustomizerSkin = 'bordered' | 'default'
export type ThemeCustomizerTheme = 'auto' | 'dark' | 'light' | 'purple' | 'transparent'
@@ -43,7 +43,7 @@ type VuetifyThemeApi = ReturnType<typeof useTheme>
const defaultPrimaryColor = themeCustomizerPrimaryColors[0].value
const validLayouts: ThemeCustomizerLayout[] = ['vertical', 'collapsed', 'horizontal']
const validRadii: ThemeCustomizerRadius[] = ['square', 'small', 'default', 'large', 'extra']
const validRadii: ThemeCustomizerRadius[] = ['small', 'default', 'large', 'extra', 'huge']
const validShadows: ThemeCustomizerShadow[] = ['none', 'low', 'medium', 'high']
const validSkins: ThemeCustomizerSkin[] = ['default', 'bordered']
const validThemes: ThemeCustomizerTheme[] = ['auto', 'light', 'dark', 'purple', 'transparent']

View File

@@ -200,7 +200,7 @@ function resolveDynamicMenuItemTitle(item: DynamicButtonMenuItem) {
<Teleport v-if="appMode && showNav" to="body">
<div class="footer-nav-container">
<TransitionGroup name="footer-nav" tag="div" class="footer-nav-group">
<VCard key="main-nav" elevation="3" class="footer-nav-card border">
<VCard key="main-nav" elevation="3" class="footer-nav-card border" rounded="pill">
<VCardText class="footer-card-content">
<!-- 添加指示器 -->
<div ref="indicator" class="nav-indicator"></div>
@@ -248,6 +248,7 @@ function resolveDynamicMenuItemTitle(item: DynamicButtonMenuItem) {
key="dynamic-btn"
elevation="3"
class="footer-nav-card dynamic-btn-card border"
rounded="pill"
>
<VCardText class="footer-card-content">
<!-- 各页面的动态按钮 -->
@@ -316,6 +317,7 @@ function resolveDynamicMenuItemTitle(item: DynamicButtonMenuItem) {
.footer-nav-card {
position: relative;
overflow: hidden;
border-radius: 9999px !important;
backdrop-filter: blur(24px);
background-color: rgba(var(--v-theme-surface), 0.6);
pointer-events: auto;

View File

@@ -169,11 +169,11 @@ export default {
skinDefault: 'Default',
skinBordered: 'Bordered',
radius: 'Corners',
radiusSquare: 'Square',
radiusSmall: 'Small',
radiusDefault: 'Default',
radiusLarge: 'Large',
radiusExtra: 'Extra Large',
radiusHuge: 'Huge',
shadow: 'Shadows',
shadowNone: 'Flat',
shadowLow: 'Soft',

View File

@@ -169,11 +169,11 @@ export default {
skinDefault: '默认',
skinBordered: '边框',
radius: '圆角',
radiusSquare: '直角',
radiusSmall: '小圆角',
radiusDefault: '默认',
radiusLarge: '大圆角',
radiusExtra: '超大圆角',
radiusHuge: '更大圆角',
shadow: '阴影',
shadowNone: '无阴影',
shadowLow: '柔和',

View File

@@ -169,11 +169,11 @@ export default {
skinDefault: '默認',
skinBordered: '邊框',
radius: '圓角',
radiusSquare: '直角',
radiusSmall: '小圓角',
radiusDefault: '默認',
radiusLarge: '大圓角',
radiusExtra: '超大圓角',
radiusHuge: '更大圓角',
shadow: '陰影',
shadowNone: '無陰影',
shadowLow: '柔和',

View File

@@ -48,10 +48,6 @@ html {
--app-surface-hover-shadow: none;
}
html[data-theme-radius='square'] {
--app-surface-radius: 0;
}
html[data-theme-radius='small'] {
--app-surface-radius: 4px;
}
@@ -64,6 +60,10 @@ html[data-theme-radius='extra'] {
--app-surface-radius: 16px;
}
html[data-theme-radius='huge'] {
--app-surface-radius: 24px;
}
html[data-theme='dark'],
html[data-theme='purple'],
html[data-theme='transparent'] {
@@ -136,6 +136,11 @@ html[data-theme-shadow='high'] {
transition: border-radius 0.2s ease, box-shadow 0.2s ease;
}
// 底部导航卡片原本就是胶囊形态,不参与主题圆角切换。
.footer-nav-card.v-card {
border-radius: 9999px !important;
}
@media (hover: hover) {
.v-card:hover,
.v-application .v-card.v-card[class]:hover {
@@ -824,6 +829,27 @@ html[data-theme="transparent"] .app-card-colorful,
box-shadow: none !important;
}
// 小屏全屏弹窗仍贴底铺满,但顶部两个角跟随主题定制器圆角。
@media (width <= 600px) {
.v-dialog--fullscreen > .v-overlay__content {
overflow: hidden;
border-end-end-radius: 0 !important;
border-end-start-radius: 0 !important;
border-start-end-radius: var(--app-surface-radius) !important;
border-start-start-radius: var(--app-surface-radius) !important;
}
.v-dialog--fullscreen > .v-overlay__content > .v-card,
.v-dialog--fullscreen > .v-overlay__content > .v-sheet,
.v-dialog--fullscreen > .v-overlay__content > form > .v-card,
.v-dialog--fullscreen > .v-overlay__content > form > .v-sheet {
border-end-end-radius: 0 !important;
border-end-start-radius: 0 !important;
border-start-end-radius: var(--app-surface-radius) !important;
border-start-start-radius: var(--app-surface-radius) !important;
}
}
.settings-icon-button {
flex-shrink: 0;
border-radius: 0.95rem;