feat: add glass materials and quality profiles (#577)

src/components/cards/__tests__/MediaCard.spec.ts

@@ -548,6 +548,34 @@ describe('MediaCard', () => {
     )
   })
 
+  it('renders the AniList source badge after the poster loads', async () => {
+    const media = createMediaInfo({
+      anilist_id: 154588,
+      poster_path: '/original/anilist.jpg',
+      source: 'anilist',
+      tmdb_id: undefined,
+      type: '电视剧',
+    })
+    const VImgStub = defineComponent({
+      name: 'VImg',
+      emits: ['load'],
+      props: { src: String },
+      setup(_props, { emit, slots }) {
+        return () =>
+          h('div', [h('button', { 'aria-label': '图片加载成功', onClick: () => emit('load') }), slots.default?.()])
+      },
+    })
+    const { container } = await renderWithProviders(MediaCard, {
+      props: { media, width: '9rem' },
+      initialState: { user: { superUser: true } },
+      global: { stubs: { VImg: VImgStub } },
+    })
+
+    await fireEvent.click(container.querySelector('[aria-label="图片加载成功"]') as HTMLElement)
+
+    await waitFor(() => expect(container.querySelector('.v-avatar .iconify--mdi')).not.toBeNull())
+  })
+
   it('hides search and subscribe actions when the user lacks both permissions', async () => {
     const { container } = await renderCard(createMediaInfo({ tmdb_id: 9601 }), {
       permissions: {

src/components/dialog/GlassSettingsDialog.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import {
+  cancelGlassPreview,
+  commitGlassPreview,
+  previewGlassSettings,
+  useThemeCustomizer,
+  type ThemeCustomizerGlassAppearance,
+  type ThemeCustomizerGlassQuality,
+} from '@/composables/useThemeCustomizer'
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+  }>(),
+  {
+    modelValue: true,
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'close'): void
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const { t } = useI18n()
+const display = useDisplay()
+const { settings } = useThemeCustomizer()
+const draftAppearance = ref<ThemeCustomizerGlassAppearance>(settings.value.glassAppearance)
+const draftQuality = ref<ThemeCustomizerGlassQuality>(settings.value.glassQuality)
+const isSaving = ref(false)
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: value => {
+    if (!value) cancelGlassPreview()
+    emit('update:modelValue', value)
+    if (!value) emit('close')
+  },
+})
+
+/** 父级控制弹窗生命周期时，同步结束旧预览并重建持久化草稿。 */
+watch(
+  () => props.modelValue,
+  (value, previous) => {
+    if (value) {
+      draftAppearance.value = settings.value.glassAppearance
+      draftQuality.value = settings.value.glassQuality
+    } else if (previous) {
+      cancelGlassPreview()
+    }
+  },
+)
+
+const appearanceOptions: Array<{
+  label: string
+  value: ThemeCustomizerGlassAppearance
+}> = [
+  { label: 'theme.glassAppearanceClear', value: 'clear' },
+  { label: 'theme.glassAppearanceTinted', value: 'tinted' },
+  { label: 'theme.glassAppearanceFrosted', value: 'frosted' },
+]
+
+const qualityOptions: Array<{
+  label: string
+  value: ThemeCustomizerGlassQuality
+}> = [
+  { label: 'theme.glassQualityCss', value: 'css' },
+  { label: 'theme.glassQualityBalanced', value: 'balanced' },
+  { label: 'theme.glassQualityHigh', value: 'high' },
+]
+
+/** 仅允许已实现的材质进入待保存设置。 */
+function updateAppearance(value: unknown) {
+  if (value !== 'clear' && value !== 'tinted' && value !== 'frosted') return
+
+  draftAppearance.value = value
+  previewGlassSettings({ glassAppearance: value })
+}
+
+/** 仅允许面板声明的质量档位进入待保存设置。 */
+function updateQuality(value: unknown) {
+  const option = qualityOptions.find(item => item.value === value)
+  if (!option) return
+
+  draftQuality.value = option.value
+  previewGlassSettings({ glassQuality: option.value })
+}
+
+/** 一次提交当前预览，持久化后关闭不会发生视觉回跳。 */
+async function saveSettings() {
+  if (isSaving.value) return
+
+  isSaving.value = true
+
+  try {
+    previewGlassSettings({
+      glassAppearance: draftAppearance.value,
+      glassQuality: draftQuality.value,
+    })
+    commitGlassPreview()
+    visible.value = false
+  } finally {
+    isSaving.value = false
+  }
+}
+
+// 弹窗的任意未保存销毁路径都应恢复持久化快照。
+onScopeDispose(cancelGlassPreview)
+</script>
+
+<template>
+  <VDialog v-if="visible" v-model="visible" max-width="28rem" scrollable :fullscreen="display.xs.value">
+    <VCard class="glass-settings-dialog">
+      <VCardItem class="glass-settings-dialog__header py-3">
+        <template #prepend>
+          <VAvatar color="primary" variant="tonal" rounded size="40" class="me-2">
+            <VIcon icon="mdi-blur-radial" size="22" />
+          </VAvatar>
+        </template>
+        <VCardTitle>
+          {{ t('theme.glassSettings') }}
+        </VCardTitle>
+        <VDialogCloseBtn v-model="visible" />
+      </VCardItem>
+
+      <VCardText class="glass-settings-dialog__body">
+        <section>
+          <h3 class="glass-settings-dialog__label">{{ t('theme.glassAppearance') }}</h3>
+          <VBtnToggle
+            :model-value="draftAppearance"
+            mandatory
+            color="primary"
+            variant="text"
+            class="glass-settings-dialog__appearance"
+            @update:model-value="updateAppearance"
+          >
+            <VBtn
+              v-for="option in appearanceOptions"
+              :key="option.value"
+              :value="option.value"
+              class="glass-settings-dialog__appearance-option"
+            >
+              {{ t(option.label) }}
+            </VBtn>
+          </VBtnToggle>
+        </section>
+
+        <section>
+          <h3 class="glass-settings-dialog__label">{{ t('theme.glassQuality') }}</h3>
+          <VBtnToggle
+            :model-value="draftQuality"
+            mandatory
+            color="primary"
+            variant="text"
+            class="glass-settings-dialog__quality"
+            @update:model-value="updateQuality"
+          >
+            <VBtn
+              v-for="option in qualityOptions"
+              :key="option.value"
+              :value="option.value"
+              class="glass-settings-dialog__quality-option"
+            >
+              {{ t(option.label) }}
+            </VBtn>
+          </VBtnToggle>
+        </section>
+      </VCardText>
+
+      <VCardActions class="app-dialog-actions glass-settings-dialog__actions">
+        <VSpacer />
+        <VBtn
+          color="primary"
+          variant="flat"
+          prepend-icon="mdi-content-save"
+          class="px-5"
+          :loading="isSaving"
+          @click="saveSettings"
+        >
+          {{ t('common.save') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped lang="scss">
+.glass-settings-dialog {
+  overflow: hidden;
+  max-block-size: calc(100dvh - 2rem);
+}
+
+.glass-settings-dialog__header {
+  border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+}
+
+.glass-settings-dialog__body {
+  display: grid;
+  align-content: start;
+  gap: 24px;
+  grid-auto-rows: max-content;
+  padding: 20px 24px 24px;
+}
+
+.glass-settings-dialog__label {
+  margin: 0 0 10px;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.glass-settings-dialog__appearance,
+.glass-settings-dialog__quality {
+  display: grid;
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  border-radius: 10px;
+  background: rgba(var(--v-theme-on-surface), 0.035);
+  gap: 4px;
+  inline-size: 100%;
+  padding: 4px;
+}
+
+.glass-settings-dialog__appearance {
+  block-size: 42px !important;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.glass-settings-dialog__quality {
+  block-size: 42px !important;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.glass-settings-dialog__appearance-option {
+  block-size: 32px !important;
+  inline-size: 100%;
+  letter-spacing: 0;
+}
+
+.glass-settings-dialog__appearance-option,
+.glass-settings-dialog__quality-option {
+  border: 0 !important;
+  border-radius: 7px !important;
+  box-shadow: none !important;
+  min-inline-size: 0;
+  inline-size: 100%;
+  letter-spacing: 0;
+  padding-inline: 8px;
+}
+
+.glass-settings-dialog__quality-option {
+  block-size: 32px !important;
+}
+
+.glass-settings-dialog__appearance-option:deep(.v-btn--active),
+.glass-settings-dialog__quality-option:deep(.v-btn--active) {
+  background-color: rgba(var(--v-theme-primary), 0.14) !important;
+  box-shadow: inset 0 0 0 1px rgba(var(--v-theme-primary), 0.38) !important;
+}
+
+.glass-settings-dialog__actions {
+  border-block-start: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  padding-block: 0.875rem;
+  padding-inline: 1rem;
+}
+
+@media (width <= 600px) {
+  .glass-settings-dialog {
+    block-size: 100dvh;
+    max-block-size: 100dvh;
+  }
+
+  .glass-settings-dialog__body {
+    padding-inline: 18px;
+  }
+
+  .glass-settings-dialog__actions {
+    padding-block-end: max(0.875rem, calc(env(safe-area-inset-bottom) + 0.75rem));
+  }
+}
+</style>

src/components/dialog/__tests__/GlassSettingsDialog.spec.ts

@@ -0,0 +1,48 @@
+import { shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import GlassSettingsDialog from '@/components/dialog/GlassSettingsDialog.vue'
+
+const mocks = vi.hoisted(() => ({
+  cancelGlassPreview: vi.fn(),
+}))
+
+vi.mock('@/composables/useThemeCustomizer', () => ({
+  cancelGlassPreview: mocks.cancelGlassPreview,
+  commitGlassPreview: vi.fn(),
+  previewGlassSettings: vi.fn(),
+  useThemeCustomizer: () => ({
+    settings: {
+      value: {
+        glassAppearance: 'clear',
+        glassQuality: 'css',
+      },
+    },
+  }),
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+vi.mock('vuetify', () => ({
+  useDisplay: () => ({ xs: { value: false } }),
+}))
+
+describe('GlassSettingsDialog', () => {
+  beforeEach(() => {
+    mocks.cancelGlassPreview.mockClear()
+  })
+
+  it('cancels an active preview when the parent closes the dialog', async () => {
+    const wrapper = shallowMount(GlassSettingsDialog, {
+      global: {
+        stubs: { VDialogCloseBtn: true },
+      },
+      props: { modelValue: true },
+    })
+
+    await wrapper.setProps({ modelValue: false })
+
+    expect(mocks.cancelGlassPreview).toHaveBeenCalledOnce()
+  })
+})

src/components/theme/GlassOpticalLayer.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ThemeCustomizerGlassAppearance, ThemeCustomizerGlassQuality } from '@/composables/useThemeCustomizer'
+import { useGlassOpticalRenderer } from '@/composables/useGlassOpticalRenderer'
+
+const props = defineProps<{
+  /** 当前玻璃材质，用于选择透明、色调或磨砂的光学参数。 */
+  appearance: ThemeCustomizerGlassAppearance
+  /** 当前光学质量；标准档不会挂载该组件。 */
+  quality: Exclude<ThemeCustomizerGlassQuality, 'css'>
+  /** 路由变化标识，用于在页面内容稳定后重新发现高价值表面。 */
+  routeKey: string
+  /** 当前主题主色，用于同步色调材质的光学高光。 */
+  tintColor: string
+  /** 与 CSS 背景保持一致的活动壁纸。 */
+  wallpaperUrl: string
+}>()
+
+const canvas = ref<HTMLCanvasElement | null>(null)
+const { state } = useGlassOpticalRenderer({
+  active: true,
+  appearance: () => props.appearance,
+  canvas,
+  quality: () => props.quality,
+  routeKey: () => props.routeKey,
+  tintColor: () => props.tintColor,
+  wallpaperUrl: () => props.wallpaperUrl,
+})
+</script>
+
+<template>
+  <canvas ref="canvas" class="glass-optical-layer" aria-hidden="true" :data-state="state" />
+</template>

src/components/theme/ThemeCustomizer.vue

@@ -22,6 +22,8 @@ const customColorInput = ref<HTMLInputElement | null>(null)
 const {
   isCustomized,
   resetSettings,
+  setGlassAppearance,
+  setGlassQuality,
   setLayout,
   setPrimaryColor,
   setRadius,
@@ -137,6 +139,8 @@ const showShadowSection = computed(() => globalTheme.name.value !== 'glass')
 const hasAppModeCustomization = computed(() => {
   return (
     settings.value.primaryColor !== defaultPrimaryColor ||
+    settings.value.glassAppearance !== 'clear' ||
+    settings.value.glassQuality !== 'css' ||
     settings.value.radius !== 'default' ||
     settings.value.shadow !== '0' ||
     settings.value.skin !== 'default' ||
@@ -197,6 +201,8 @@ async function handleResetSettings() {
 
   // App 模式共享定制器，但保留桌面导航相关偏好，只重置 App 侧可调整的外观设置。
   await setPrimaryColor(defaultPrimaryColor)
+  await setGlassAppearance('clear')
+  await setGlassQuality('css')
   await setRadius('default')
   await setShadow('0')
   await setSkin('default')
@@ -205,11 +211,7 @@ async function handleResetSettings() {
 </script>
 
 <template>
-  <aside
-    class="theme-customizer-panel-host"
-    role="dialog"
-    :aria-label="t('theme.customizer.title')"
-  >
+  <aside class="theme-customizer-panel-host" role="dialog" :aria-label="t('theme.customizer.title')">
     <div class="theme-customizer-panel" :class="{ 'theme-customizer-panel--dialog': appMode, 'app-surface': appMode }">
       <div class="theme-customizer-header py-5 px-4">
         <div>
@@ -320,10 +322,7 @@ async function handleResetSettings() {
               :class="{ 'is-active': settings.radius === radius.value }"
               @click="setRadius(radius.value)"
             >
-              <span
-                class="theme-customizer-radius-scene"
-                :class="`theme-customizer-radius-scene--${radius.value}`"
-              >
+              <span class="theme-customizer-radius-scene" :class="`theme-customizer-radius-scene--${radius.value}`">
                 <span class="theme-customizer-radius-scene__card">
                   <span class="theme-customizer-radius-scene__badge" />
                   <span class="theme-customizer-radius-scene__line" />
@@ -350,7 +349,9 @@ async function handleResetSettings() {
                 >
                   <span class="theme-customizer-shadow-slider__sample-accent" />
                   <span class="theme-customizer-shadow-slider__sample-line" />
-                  <span class="theme-customizer-shadow-slider__sample-line theme-customizer-shadow-slider__sample-line--short" />
+                  <span
+                    class="theme-customizer-shadow-slider__sample-line theme-customizer-shadow-slider__sample-line--short"
+                  />
                 </span>
                 <VSlider
                   :model-value="shadowSliderValue"
@@ -367,10 +368,7 @@ async function handleResetSettings() {
                   @update:model-value="handleShadowSliderChange"
                 />
               </div>
-              <div
-                class="theme-customizer-shadow-slider__scale"
-                aria-hidden="true"
-              >
+              <div class="theme-customizer-shadow-slider__scale" aria-hidden="true">
                 <span>0</span>
                 <span>24</span>
               </div>