GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-08-18 12:14:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refine shared workflow and subscription dialogs

Browse Source
This commit is contained in:
jxxghp
2026-08-04 21:37:04 +08:00
parent 487e567d4c
commit b1f3d3eacb
13 changed files with 842 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/styles/__tests__/glassOverlayMaterial.spec.ts
View File

@@ -44,6 +44,19 @@ describe('glass overlay material styles', () => {
expect(styles).not.toMatch(/\.v-chip--variant-(?:outlined|text|plain)\s*\{/)
})
it('keeps workflow share gradients as colored glass in every appearance', () => {
const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')
const card = readFileSync(resolve(cwd(), 'src/components/cards/WorkflowShareCard.vue'), 'utf8')
expect(card).toContain('--workflow-share-gradient-start-rgb')
expect(card).toContain('--workflow-share-gradient-end-rgb')
expect(styles).toMatch(
/\.workflow-share-card\s*\{[\s\S]*?background-image:\s*[\s\S]*?var\(--glass-sheen\),[\s\S]*?var\(--workflow-share-glass-scrim\),[\s\S]*?var\(--workflow-share-gradient-start-rgb,[\s\S]*?var\(--workflow-share-gradient-end-rgb,[\s\S]*?!important;/,
)
expect(styles).toContain("&[data-glass-appearance='frosted'] .workflow-share-card")
expect(styles).toContain("&[data-glass-appearance='tinted'] .workflow-share-card")
})
it('composites glass dialogs at their final geometry instead of resampling a scaled backdrop', () => {
const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')

24
src/styles/common.scss
View File

@@ -589,6 +589,12 @@ html[data-theme-radius='extra'] {
line-height: 1.4;
}
// 左右布局的单行字段将值放在右栏中央；整行字段会在移动端规则中恢复左对齐。
.app-responsive-input--field .v-field__input {
justify-content: var(--app-responsive-input-value-alignment, center);
text-align: var(--app-responsive-input-value-alignment, center);
}
// 移动端单行字段内容超出可视宽度时保持一行并显示省略号。
.app-responsive-input--field .v-field__input {
overflow: hidden;
@@ -612,6 +618,19 @@ html[data-theme-radius='extra'] {
white-space: nowrap;
}
.app-responsive-input--field :is(input.v-field__input, .v-field__input > input),
.app-responsive-input--field :is(input.v-field__input, .v-field__input > input)::placeholder {
text-align: var(--app-responsive-input-value-alignment, center);
}
.app-responsive-input--field
.app-responsive-input__native:is(.v-select--single, .v-autocomplete--single, .v-combobox--single)
:is(.v-select__selection, .v-autocomplete__selection, .v-combobox__selection) {
inline-size: 100%;
justify-content: var(--app-responsive-input-value-alignment, center);
text-align: var(--app-responsive-input-value-alignment, center);
}
.app-responsive-input__native:is(.v-select--multiple, .v-autocomplete--multiple, .v-combobox--multiple)
.v-field__input {
overflow: visible;
@@ -663,12 +682,13 @@ html[data-theme-radius='extra'] {
.app-responsive-input--multiline .v-field__input {
min-block-size: 5.5rem;
align-items: start;
text-align: start;
}
.app-responsive-input--choice .app-responsive-input__control,
.app-responsive-input--choice .v-input__control,
.app-responsive-input--group .v-selection-control-group {
justify-content: end;
justify-content: center;
}
.app-responsive-input--choice .v-input__control {
@@ -748,6 +768,8 @@ html[data-theme-radius='extra'] {
.v-col-md-12:not([class*='v-col-lg-']):not([class*='v-col-xl-']):not([class*='v-col-xxl-'])
)
> :is(.app-responsive-input--field, .app-responsive-input--range) {
--app-responsive-input-value-alignment: start;
row-gap: 0.5rem;
align-items: start;
grid-template-columns: minmax(0, 1fr);

45
src/styles/themes/glass.scss
View File

@@ -993,6 +993,31 @@ html[data-theme='glass'] {
--workflow-card-header-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(2, 6, 16, 14%);
}
// 分享卡保留原随机渐变的色相，以半透明染色、吸光和镜面层组成有色玻璃。
.workflow-share-card {
--workflow-share-glass-start-opacity: calc(0.18 + var(--glass-tint-density, 0.65) * 0.38);
--workflow-share-glass-end-opacity: calc(0.24 + var(--glass-tint-density, 0.65) * 0.42);
--workflow-share-glass-scrim:
linear-gradient(
rgba(11, 19, 34, calc(0.1 + var(--glass-surface-density, 0.62) * 0.1)),
rgba(11, 19, 34, calc(0.2 + var(--glass-surface-density, 0.62) * 0.14))
);
background-color: var(--glass-surface) !important;
background-image:
var(--glass-sheen),
var(--workflow-share-glass-scrim),
linear-gradient(
135deg,
rgba(
var(--workflow-share-gradient-start-rgb, 74, 85, 104),
var(--workflow-share-glass-start-opacity)
)
0%,
rgba(var(--workflow-share-gradient-end-rgb, 45, 55, 72), var(--workflow-share-glass-end-opacity)) 100%
) !important;
}
// 插件卡片头部改为染色玻璃：图标主色只作为透光色相，压暗遮罩换成玻璃吸收与高光。
.plugin-card__banner {
border-block-end: 1px solid var(--glass-border);
@@ -1052,6 +1077,16 @@ html[data-theme='glass'] {
);
}
&[data-glass-appearance='frosted'] .workflow-share-card {
--workflow-share-glass-start-opacity: calc(0.12 + var(--glass-tint-density, 0.65) * 0.28);
--workflow-share-glass-end-opacity: calc(0.16 + var(--glass-tint-density, 0.65) * 0.34);
--workflow-share-glass-scrim:
linear-gradient(
rgba(11, 19, 34, calc(0.06 + var(--glass-surface-density, 0.86) * 0.07)),
rgba(11, 19, 34, calc(0.13 + var(--glass-surface-density, 0.86) * 0.1))
);
}
// 色调材质本身带主色语义，头部染色向主色收敛保持整页同一色温。
&[data-glass-appearance='tinted'] .plugin-card__banner {
--plugin-card-banner-tint: linear-gradient(
@@ -1097,6 +1132,16 @@ html[data-theme='glass'] {
);
}
&[data-glass-appearance='tinted'] .workflow-share-card {
--workflow-share-glass-start-opacity: calc(0.16 + var(--glass-tint-density, 0.65) * 0.32);
--workflow-share-glass-end-opacity: calc(0.21 + var(--glass-tint-density, 0.65) * 0.38);
--workflow-share-glass-scrim:
linear-gradient(
rgba(11, 19, 34, calc(0.09 + var(--glass-surface-density, 0.72) * 0.09)),
rgba(11, 19, 34, calc(0.18 + var(--glass-surface-density, 0.72) * 0.13))
);
}
// 文件夹卡片保留用户自选渐变作为色相，只降低不透明度让卡片本体的玻璃透出来。
.plugin-folder-card__bg {
opacity: calc(0.34 + var(--glass-surface-density, 0.62) * 0.145);