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

fix: 统一媒体详情玻璃控件样式

Browse Source
This commit is contained in:
jxxghp
2026-09-02 16:33:44 +08:00
parent ae0a423d4e
commit fecf8089d6
2 changed files with 66 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/__tests__/glassOverlayMaterial.spec.ts
+20
View File
@@ -107,6 +107,26 @@ describe('glass overlay material styles', () => {
expect(styles).not.toMatch(/\.v-chip--variant-(?:outlined|text|plain)\s*\{/)
})
it('keeps media source links and episode group cards on glass material tokens', () => {
const mediaDetail = readFileSync(resolve(cwd(), 'src/views/discover/MediaDetailView.vue'), 'utf8')
const mediaSourceRule = mediaDetail.match(
/\.media-detail-glass \.media-source-link-chip\s*\{(?<declarations>[\s\S]*?)\n\}/u,
)?.groups?.declarations
const episodeGroupRule = mediaDetail.match(
/\.media-detail-glass \.episode-group-option\s*\{(?<declarations>[\s\S]*?)\n\}/u,
)?.groups?.declarations
expect(mediaDetail.match(/media-source-link-chip/g)).toHaveLength(8)
expect(mediaSourceRule).toContain('var(--glass-chip-backdrop-filter)')
expect(mediaSourceRule).toContain('var(--glass-button-surface)')
expect(mediaSourceRule).toContain('var(--glass-chip-sheen)')
expect(mediaSourceRule).toContain('var(--glass-control-shadow)')
expect(episodeGroupRule).toContain('var(--glass-surface-backdrop-filter)')
expect(episodeGroupRule).toContain('var(--glass-surface)')
expect(episodeGroupRule).toContain('var(--glass-sheen)')
expect(episodeGroupRule).toContain('var(--glass-control-shadow)')
})
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')
src/views/discover/MediaDetailView.vue
+46 -6
View File
@@ -942,7 +942,7 @@ onUnmounted(() => {
target="_blank"
>
<div
class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
class="media-source-link-chip inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
>
<VIcon icon="mdi-link" />
<span class="ms-1">TheMovieDb</span>
@@ -950,7 +950,7 @@ onUnmounted(() => {
</a>
<div v-if="mediaDetail.douban_id" class="mb-2 mr-2 inline-flex last:mr-0" @click="handleDoubanClick">
<div
class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
class="media-source-link-chip inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
>
<VIcon icon="mdi-link" />
<span class="ms-1">豆瓣</span>
@@ -958,7 +958,7 @@ onUnmounted(() => {
</div>
<a v-if="mediaDetail.imdb_id" class="mb-2 mr-2 inline-flex last:mr-0" :href="getImdbLink()" target="_blank">
<div
class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
class="media-source-link-chip inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
>
<VIcon icon="mdi-link" />
<span class="ms-1">IMDb</span>
@@ -966,7 +966,7 @@ onUnmounted(() => {
</a>
<a v-if="mediaDetail.tvdb_id" class="mb-2 mr-2 inline-flex last:mr-0" :href="getTvdbLink()" target="_blank">
<div
class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
class="media-source-link-chip inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
>
<VIcon icon="mdi-link" />
<span class="ms-1">TheTvDb</span>
@@ -979,7 +979,7 @@ onUnmounted(() => {
target="_blank"
>
<div
class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
class="media-source-link-chip inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
>
<VIcon icon="mdi-link" />
<span class="ms-1">Bangumi</span>
@@ -992,7 +992,7 @@ onUnmounted(() => {
target="_blank"
>
<div
class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
class="media-source-link-chip inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 py-1 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
>
<VIcon icon="mdi-link" />
<span class="ms-1">AniList</span>
@@ -1570,6 +1570,22 @@ a.crew-name {
font-weight: 400;
}
.media-detail-glass .media-source-link-chip {
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: var(--glass-chip-backdrop-filter);
backdrop-filter: var(--glass-chip-backdrop-filter);
background-color: var(--glass-button-surface);
background-image: var(--glass-chip-sheen);
box-shadow: var(--glass-control-shadow);
color: rgb(var(--v-theme-on-surface));
}
.media-detail-glass .media-source-link-chip:hover {
border-color: var(--glass-border-hover);
background-color: var(--glass-button-surface-hover);
box-shadow: var(--glass-control-shadow-hover);
}
.media-status {
margin-block-end: 0.5rem;
}
@@ -1838,6 +1854,30 @@ a.crew-name {
background: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy, 0.5));
}
.media-detail-glass .episode-group-option {
-webkit-backdrop-filter: var(--glass-surface-backdrop-filter);
backdrop-filter: var(--glass-surface-backdrop-filter);
border-color: var(--glass-border);
background-color: var(--glass-surface);
background-image: var(--glass-sheen);
box-shadow: var(--glass-control-shadow);
}
.media-detail-glass .episode-group-option:hover {
border-color: var(--glass-border-hover);
background-color: var(--glass-surface-soft);
box-shadow: var(--glass-control-shadow-hover);
}
.media-detail-glass .episode-group-option--active {
border-color: rgba(var(--v-theme-primary), 0.7);
background-color: rgba(var(--v-theme-primary), 0.22);
}
.media-detail-glass .episode-group-option--active:hover {
background-color: rgba(var(--v-theme-primary), 0.28);
}
@media (width <= 640px) {
.episode-group-option {
flex-basis: 9.75rem;