fix: pass theme to purchase iframe and optimize embed layout

frontend/src/views/user/PurchaseSubscriptionView.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <AppLayout>
     <div class="purchase-page-layout">
       <div class="flex items-start justify-between gap-4">
@@ -70,14 +70,20 @@
           </div>
         </div>
 
-        <iframe v-else :src="purchaseUrl" class="h-full w-full border-0" allowfullscreen></iframe>
+        <div v-else class="purchase-embed-shell">
+          <iframe
+            :src="purchaseUrl"
+            class="purchase-embed-frame"
+            allowfullscreen
+          ></iframe>
+        </div>
       </div>
     </div>
   </AppLayout>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores'
 import { useAuthStore } from '@/stores/auth'
@@ -89,28 +95,48 @@ const appStore = useAppStore()
 const authStore = useAuthStore()
 
 const PURCHASE_USER_ID_QUERY_KEY = 'user_id'
+const PURCHASE_THEME_QUERY_KEY = 'theme'
+const PURCHASE_UI_MODE_QUERY_KEY = 'ui_mode'
+const PURCHASE_UI_MODE_EMBEDDED = 'embedded'
 
 const loading = ref(false)
+const purchaseTheme = ref<'light' | 'dark'>('light')
+let themeObserver: MutationObserver | null = null
 
 const purchaseEnabled = computed(() => {
   return appStore.cachedPublicSettings?.purchase_subscription_enabled ?? false
 })
 
-function buildPurchaseUrl(baseUrl: string, userId?: number): string {
-  if (!baseUrl || !userId) return baseUrl
+function detectTheme(): 'light' | 'dark' {
+  if (typeof document === 'undefined') return 'light'
+  return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+}
+
+function buildPurchaseUrl(baseUrl: string, userId?: number, theme: 'light' | 'dark' = 'light'): string {
+  if (!baseUrl) return baseUrl
   try {
     const url = new URL(baseUrl)
-    url.searchParams.set(PURCHASE_USER_ID_QUERY_KEY, String(userId))
+    if (userId) {
+      url.searchParams.set(PURCHASE_USER_ID_QUERY_KEY, String(userId))
+    }
+    url.searchParams.set(PURCHASE_THEME_QUERY_KEY, theme)
+    url.searchParams.set(PURCHASE_UI_MODE_QUERY_KEY, PURCHASE_UI_MODE_EMBEDDED)
     return url.toString()
   } catch {
+    const params: string[] = []
+    if (userId) {
+      params.push(`${PURCHASE_USER_ID_QUERY_KEY}=${encodeURIComponent(String(userId))}`)
+    }
+    params.push(`${PURCHASE_THEME_QUERY_KEY}=${encodeURIComponent(theme)}`)
+    params.push(`${PURCHASE_UI_MODE_QUERY_KEY}=${encodeURIComponent(PURCHASE_UI_MODE_EMBEDDED)}`)
     const separator = baseUrl.includes('?') ? '&' : '?'
-    return `${baseUrl}${separator}${PURCHASE_USER_ID_QUERY_KEY}=${encodeURIComponent(String(userId))}`
+    return `${baseUrl}${separator}${params.join('&')}`
   }
 }
 
 const purchaseUrl = computed(() => {
   const baseUrl = (appStore.cachedPublicSettings?.purchase_subscription_url || '').trim()
-  return buildPurchaseUrl(baseUrl, authStore.user?.id)
+  return buildPurchaseUrl(baseUrl, authStore.user?.id, purchaseTheme.value)
 })
 
 const isValidUrl = computed(() => {
@@ -119,6 +145,18 @@ const isValidUrl = computed(() => {
 })
 
 onMounted(async () => {
+  purchaseTheme.value = detectTheme()
+
+  if (typeof document !== 'undefined') {
+    themeObserver = new MutationObserver(() => {
+      purchaseTheme.value = detectTheme()
+    })
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+  }
+
   if (appStore.publicSettingsLoaded) return
   loading.value = true
   try {
@@ -127,12 +165,43 @@ onMounted(async () => {
     loading.value = false
   }
 })
+
+onUnmounted(() => {
+  if (themeObserver) {
+    themeObserver.disconnect()
+    themeObserver = null
+  }
+})
 </script>
 
 <style scoped>
 .purchase-page-layout {
   @apply flex flex-col gap-6;
-  height: calc(100vh - 64px - 4rem); /* 减去 header + lg:p-8 的上下padding */
+  height: calc(100vh - 64px - 4rem);
+}
+
+.purchase-embed-shell {
+  @apply h-full w-full overflow-auto rounded-2xl;
+  @apply bg-gradient-to-b from-gray-50 to-white dark:from-dark-900 dark:to-dark-950;
+  @apply p-3 sm:p-4;
+}
+
+.purchase-embed-frame {
+  display: block;
+  margin: 0 auto;
+  width: min(100%, 440px);
+  height: 840px;
+  border: 0;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
+  background: transparent;
+}
+
+@media (max-width: 640px) {
+  .purchase-embed-frame {
+    width: 100%;
+    height: 780px;
+    border-radius: 12px;
+  }
 }
 </style>
-