feat(channels): themed model popover + group-badge with rate, subscription & exclusivity

Pricing popover:
- Teleport to body + fixed-position re-measuring on hover/scroll/resize so it
  escapes the card's overflow-hidden clip that was chopping off the lower
  half of the panel.
- Header + border adopt the platform theme via platformBorderClass /
  platformBadgeLightClass so each model card reads at a glance.

Accessible groups:
- Backend AvailableGroupRef / user DTO now expose subscription_type,
  rate_multiplier and is_exclusive. User-specific rates continue to come
  from /groups/rates (same pattern as the API keys page).
- Table renders groups through the shared GroupBadge, which already deepens
  subscription-type colors and shows default vs custom rate as
  <s>default</s> <b>custom</b>.
- Exclusive groups are labelled with a purple shield row, public groups
  with a grey globe row so admins and users can tell at a glance which
  groups they got via explicit grant vs. public access.

i18n keys for exclusive / public / their tooltips added to zh + en.

frontend/src/components/channels/SupportedModelChip.vue

@@ -1,12 +1,18 @@
 <template>
-  <div class="group relative inline-block">
+  <div class="relative inline-block">
     <span
+      ref="triggerEl"
       :class="[
         'inline-flex cursor-help items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors',
         effectivePlatform
           ? platformBadgeClass(effectivePlatform)
           : 'border-gray-200 bg-gray-50 text-gray-700 dark:border-dark-600 dark:bg-dark-800 dark:text-gray-300',
       ]"
+      @mouseenter="onEnter"
+      @mouseleave="onLeave"
+      @focusin="onEnter"
+      @focusout="onLeave"
+      tabindex="0"
     >
       <PlatformIcon
         v-if="effectivePlatform"
@@ -22,112 +28,123 @@
       {{ model.name }}
     </span>
 
-    <div
-      class="pointer-events-none invisible absolute left-1/2 z-50 mt-2 w-80 -translate-x-1/2 opacity-0 transition-opacity group-hover:visible group-hover:opacity-100"
-    >
+    <!-- Teleport to body so the popover is not clipped by card/overflow-hidden
+         ancestors. Fixed-position coords are computed from the trigger's
+         bounding rect; re-measured on enter / scroll / resize. -->
+    <Teleport to="body">
       <div
-        class="rounded-lg border border-gray-200 bg-white p-3 text-xs shadow-lg dark:border-dark-600 dark:bg-dark-800"
+        v-show="show"
+        ref="popoverEl"
+        role="tooltip"
+        class="pointer-events-none fixed z-[99999] w-80 max-w-[min(22rem,calc(100vw-1rem))] rounded-lg border bg-white text-xs shadow-xl dark:bg-dark-800"
+        :class="[popoverBorderClass]"
+        :style="popoverStyle"
       >
+        <!-- Header：平台主题色背景，含模型名 + 平台徽章 -->
         <div
-          class="mb-2 flex items-center justify-between gap-2 border-b border-gray-200 pb-2 dark:border-dark-600"
+          class="flex items-center justify-between gap-2 rounded-t-lg border-b px-3 py-2"
+          :class="[popoverHeaderClass, popoverBorderClass]"
         >
-          <span class="font-semibold text-gray-900 dark:text-gray-100">{{ model.name }}</span>
+          <span class="truncate font-semibold">{{ model.name }}</span>
           <span
             v-if="model.platform"
-            class="rounded bg-gray-100 px-1.5 py-0.5 text-[10px] uppercase text-gray-600 dark:bg-dark-700 dark:text-gray-400"
+            class="flex-shrink-0 rounded bg-white/70 px-1.5 py-0.5 text-[10px] uppercase tracking-wide dark:bg-dark-900/60"
           >
             {{ model.platform }}
           </span>
         </div>
 
-        <div v-if="!model.pricing" class="text-gray-500 dark:text-gray-400">
-          {{ noPricingLabel }}
-        </div>
-
-        <div v-else class="space-y-2 text-gray-700 dark:text-gray-300">
-          <div class="flex justify-between">
-            <span class="text-gray-500 dark:text-gray-400">{{ t(prefixKey('billingMode')) }}</span>
-            <span>{{ billingModeLabel }}</span>
+        <div class="p-3">
+          <div v-if="!model.pricing" class="text-gray-500 dark:text-gray-400">
+            {{ noPricingLabel }}
           </div>
 
-          <template v-if="model.pricing.billing_mode === BILLING_MODE_TOKEN">
-            <PricingRow
-              :label="t(prefixKey('inputPrice'))"
-              :value="model.pricing.input_price"
-              :unit="t(prefixKey('unitPerMillion'))"
-              :scale="perMillionScale"
-            />
-            <PricingRow
-              :label="t(prefixKey('outputPrice'))"
-              :value="model.pricing.output_price"
-              :unit="t(prefixKey('unitPerMillion'))"
-              :scale="perMillionScale"
-            />
-            <PricingRow
-              :label="t(prefixKey('cacheWritePrice'))"
-              :value="model.pricing.cache_write_price"
-              :unit="t(prefixKey('unitPerMillion'))"
-              :scale="perMillionScale"
-            />
-            <PricingRow
-              :label="t(prefixKey('cacheReadPrice'))"
-              :value="model.pricing.cache_read_price"
-              :unit="t(prefixKey('unitPerMillion'))"
-              :scale="perMillionScale"
-            />
-          </template>
-
-          <PricingRow
-            v-if="
-              model.pricing.billing_mode === BILLING_MODE_PER_REQUEST &&
-              model.pricing.per_request_price != null
-            "
-            :label="t(prefixKey('perRequestPrice'))"
-            :value="model.pricing.per_request_price"
-            :unit="t(prefixKey('unitPerRequest'))"
-            :scale="1"
-          />
-
-          <PricingRow
-            v-if="
-              model.pricing.billing_mode === BILLING_MODE_IMAGE &&
-              model.pricing.image_output_price != null
-            "
-            :label="t(prefixKey('imageOutputPrice'))"
-            :value="model.pricing.image_output_price"
-            :unit="t(prefixKey('unitPerRequest'))"
-            :scale="1"
-          />
-
-          <div
-            v-if="model.pricing.intervals && model.pricing.intervals.length > 0"
-            class="mt-2 border-t border-gray-200 pt-2 dark:border-dark-600"
-          >
-            <div class="mb-1 font-medium text-gray-600 dark:text-gray-400">
-              {{ t(prefixKey('intervals')) }}
+          <div v-else class="space-y-2 text-gray-700 dark:text-gray-300">
+            <div class="flex justify-between">
+              <span class="text-gray-500 dark:text-gray-400">{{ t(prefixKey('billingMode')) }}</span>
+              <span>{{ billingModeLabel }}</span>
             </div>
-            <div class="space-y-1">
-              <div
-                v-for="(iv, idx) in model.pricing.intervals"
-                :key="idx"
-                class="flex justify-between text-[11px]"
-              >
-                <span class="text-gray-500 dark:text-gray-400">
-                  <template v-if="iv.tier_label">{{ iv.tier_label }}</template>
-                  <template v-else>{{ formatRange(iv.min_tokens, iv.max_tokens) }}</template>
-                </span>
-                <span>{{ formatInterval(iv, model.pricing.billing_mode) }}</span>
+
+            <template v-if="model.pricing.billing_mode === BILLING_MODE_TOKEN">
+              <PricingRow
+                :label="t(prefixKey('inputPrice'))"
+                :value="model.pricing.input_price"
+                :unit="t(prefixKey('unitPerMillion'))"
+                :scale="perMillionScale"
+              />
+              <PricingRow
+                :label="t(prefixKey('outputPrice'))"
+                :value="model.pricing.output_price"
+                :unit="t(prefixKey('unitPerMillion'))"
+                :scale="perMillionScale"
+              />
+              <PricingRow
+                :label="t(prefixKey('cacheWritePrice'))"
+                :value="model.pricing.cache_write_price"
+                :unit="t(prefixKey('unitPerMillion'))"
+                :scale="perMillionScale"
+              />
+              <PricingRow
+                :label="t(prefixKey('cacheReadPrice'))"
+                :value="model.pricing.cache_read_price"
+                :unit="t(prefixKey('unitPerMillion'))"
+                :scale="perMillionScale"
+              />
+            </template>
+
+            <PricingRow
+              v-if="
+                model.pricing.billing_mode === BILLING_MODE_PER_REQUEST &&
+                model.pricing.per_request_price != null
+              "
+              :label="t(prefixKey('perRequestPrice'))"
+              :value="model.pricing.per_request_price"
+              :unit="t(prefixKey('unitPerRequest'))"
+              :scale="1"
+            />
+
+            <PricingRow
+              v-if="
+                model.pricing.billing_mode === BILLING_MODE_IMAGE &&
+                model.pricing.image_output_price != null
+              "
+              :label="t(prefixKey('imageOutputPrice'))"
+              :value="model.pricing.image_output_price"
+              :unit="t(prefixKey('unitPerRequest'))"
+              :scale="1"
+            />
+
+            <div
+              v-if="model.pricing.intervals && model.pricing.intervals.length > 0"
+              class="mt-2 border-t pt-2"
+              :class="[popoverBorderClass]"
+            >
+              <div class="mb-1 font-medium text-gray-600 dark:text-gray-400">
+                {{ t(prefixKey('intervals')) }}
+              </div>
+              <div class="space-y-1">
+                <div
+                  v-for="(iv, idx) in model.pricing.intervals"
+                  :key="idx"
+                  class="flex justify-between text-[11px]"
+                >
+                  <span class="text-gray-500 dark:text-gray-400">
+                    <template v-if="iv.tier_label">{{ iv.tier_label }}</template>
+                    <template v-else>{{ formatRange(iv.min_tokens, iv.max_tokens) }}</template>
+                  </span>
+                  <span>{{ formatInterval(iv, model.pricing.billing_mode) }}</span>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import PricingRow from './PricingRow.vue'
 import { formatScaled } from '@/utils/pricing'
@@ -142,7 +159,7 @@ import {
 import type { UserPricingInterval, UserSupportedModel } from '@/api/channels'
 import PlatformIcon from '@/components/common/PlatformIcon.vue'
 import type { GroupPlatform } from '@/types'
-import { platformBadgeClass } from '@/utils/platformColors'
+import { platformBadgeClass, platformBorderClass, platformBadgeLightClass } from '@/utils/platformColors'
 
 const props = withDefaults(
   defineProps<{
@@ -172,6 +189,19 @@ const { t } = useI18n()
 /** 按 token 定价展示时的换算单位：每百万 token。 */
 const perMillionScale = 1_000_000
 
+// Popover border + header classes echo the platform theme so each card reads
+// at a glance which model family it belongs to.
+const popoverBorderClass = computed(() =>
+  effectivePlatform.value
+    ? platformBorderClass(effectivePlatform.value)
+    : 'border-gray-200 dark:border-dark-600',
+)
+const popoverHeaderClass = computed(() =>
+  effectivePlatform.value
+    ? platformBadgeLightClass(effectivePlatform.value)
+    : 'bg-gray-50 text-gray-700 dark:bg-dark-700/60 dark:text-gray-300',
+)
+
 function prefixKey(k: string): string {
   return `${props.pricingKeyPrefix}.${k}`
 }
@@ -203,4 +233,62 @@ function formatInterval(iv: UserPricingInterval, mode: BillingMode): string {
   const output = formatScaled(iv.output_price, perMillionScale)
   return `${input} / ${output}`
 }
+
+// ── Popover positioning ─────────────────────────────────────────────
+// Teleport-to-body + fixed positioning avoids being clipped by
+// overflow-hidden ancestors (the parent table card). We re-measure on
+// hover enter, scroll, and resize. Pinning to the trigger's top-center
+// with a flip when the viewport edge is near keeps it aligned without a
+// full-blown positioning lib.
+const show = ref(false)
+const triggerEl = ref<HTMLElement | null>(null)
+const popoverEl = ref<HTMLElement | null>(null)
+const popoverStyle = ref<Record<string, string>>({ top: '0px', left: '0px' })
+
+function updatePosition() {
+  const trigger = triggerEl.value
+  if (!trigger) return
+  const rect = trigger.getBoundingClientRect()
+  const margin = 8
+  const popover = popoverEl.value
+  const popWidth = popover?.offsetWidth ?? 320
+  const popHeight = popover?.offsetHeight ?? 240
+  const vw = window.innerWidth
+  const vh = window.innerHeight
+
+  let top = rect.bottom + margin
+  // Flip upward if it would overflow below.
+  if (top + popHeight > vh - margin) {
+    top = Math.max(margin, rect.top - popHeight - margin)
+  }
+
+  let left = rect.left + rect.width / 2 - popWidth / 2
+  if (left < margin) left = margin
+  if (left + popWidth > vw - margin) left = vw - margin - popWidth
+
+  popoverStyle.value = {
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+  }
+}
+
+function onEnter() {
+  show.value = true
+  nextTick(() => {
+    updatePosition()
+    window.addEventListener('scroll', updatePosition, true)
+    window.addEventListener('resize', updatePosition)
+  })
+}
+
+function onLeave() {
+  show.value = false
+  window.removeEventListener('scroll', updatePosition, true)
+  window.removeEventListener('resize', updatePosition)
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', updatePosition, true)
+  window.removeEventListener('resize', updatePosition)
+})
 </script>