From 0dd95508b591844f24e198c48a151b7ef2c34bb8 Mon Sep 17 00:00:00 2001 From: jxxghp Date: Fri, 5 Jun 2026 23:29:11 +0800 Subject: [PATCH] fix: refine theme radius options --- src/components/ThemeCustomizer.vue | 10 ++++---- src/composables/useThemeCustomizer.ts | 4 ++-- src/layouts/components/Footer.vue | 4 +++- src/locales/en-US.ts | 2 +- src/locales/zh-CN.ts | 2 +- src/locales/zh-TW.ts | 2 +- src/styles/common.scss | 34 +++++++++++++++++++++++---- 7 files changed, 43 insertions(+), 15 deletions(-) diff --git a/src/components/ThemeCustomizer.vue b/src/components/ThemeCustomizer.vue index 088b73a6..e3605d5f 100644 --- a/src/components/ThemeCustomizer.vue +++ b/src/components/ThemeCustomizer.vue @@ -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>(() => [ diff --git a/src/composables/useThemeCustomizer.ts b/src/composables/useThemeCustomizer.ts index 66b46c43..8eac94dd 100644 --- a/src/composables/useThemeCustomizer.ts +++ b/src/composables/useThemeCustomizer.ts @@ -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 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'] diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue index 2584b9a7..e1c9c28a 100644 --- a/src/layouts/components/Footer.vue +++ b/src/layouts/components/Footer.vue @@ -200,7 +200,7 @@ function resolveDynamicMenuItemTitle(item: DynamicButtonMenuItem) {
- +
@@ -248,6 +248,7 @@ function resolveDynamicMenuItemTitle(item: DynamicButtonMenuItem) { key="dynamic-btn" elevation="3" class="footer-nav-card dynamic-btn-card border" + rounded="pill" > @@ -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; diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts index 56ec57db..8fca8bd5 100644 --- a/src/locales/en-US.ts +++ b/src/locales/en-US.ts @@ -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', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index f8fe8f2e..2f5dcf07 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -169,11 +169,11 @@ export default { skinDefault: '默认', skinBordered: '边框', radius: '圆角', - radiusSquare: '直角', radiusSmall: '小圆角', radiusDefault: '默认', radiusLarge: '大圆角', radiusExtra: '超大圆角', + radiusHuge: '更大圆角', shadow: '阴影', shadowNone: '无阴影', shadowLow: '柔和', diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts index eba599b3..8aba3ee1 100644 --- a/src/locales/zh-TW.ts +++ b/src/locales/zh-TW.ts @@ -169,11 +169,11 @@ export default { skinDefault: '默認', skinBordered: '邊框', radius: '圓角', - radiusSquare: '直角', radiusSmall: '小圓角', radiusDefault: '默認', radiusLarge: '大圓角', radiusExtra: '超大圓角', + radiusHuge: '更大圓角', shadow: '陰影', shadowNone: '無陰影', shadowLow: '柔和', diff --git a/src/styles/common.scss b/src/styles/common.scss index 19b8d7b4..93723a78 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -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;