mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-06-16 13:11:22 +08:00
fix: refine theme radius options
This commit is contained in:
@@ -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 }>>(() => [
|
||||
|
||||
@@ -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']
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -169,11 +169,11 @@ export default {
|
||||
skinDefault: '默认',
|
||||
skinBordered: '边框',
|
||||
radius: '圆角',
|
||||
radiusSquare: '直角',
|
||||
radiusSmall: '小圆角',
|
||||
radiusDefault: '默认',
|
||||
radiusLarge: '大圆角',
|
||||
radiusExtra: '超大圆角',
|
||||
radiusHuge: '更大圆角',
|
||||
shadow: '阴影',
|
||||
shadowNone: '无阴影',
|
||||
shadowLow: '柔和',
|
||||
|
||||
@@ -169,11 +169,11 @@ export default {
|
||||
skinDefault: '默認',
|
||||
skinBordered: '邊框',
|
||||
radius: '圓角',
|
||||
radiusSquare: '直角',
|
||||
radiusSmall: '小圓角',
|
||||
radiusDefault: '默認',
|
||||
radiusLarge: '大圓角',
|
||||
radiusExtra: '超大圓角',
|
||||
radiusHuge: '更大圓角',
|
||||
shadow: '陰影',
|
||||
shadowNone: '無陰影',
|
||||
shadowLow: '柔和',
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user