feat(channels): aggregate by channel with platform sections + rowspan table

Switch the user-facing 'Available Channels' view from "one row per
platform" to "one channel row-group with N platform sections".

Backend: userAvailableChannel now holds Platforms []section instead
of being exploded. buildPlatformSections replaces
explodeChannelByPlatform with the same per-platform grouping logic.

Frontend: drop the DataTable wrapper for this view and write a
four-column grid table (渠道名 / 平台 / 分组 / 支持模型) where the
channel name only renders on the first platform row of each channel —
visual rowspan without hacking DataTable.

- api/channels.ts: UserChannelPlatformSection + platforms[]
- AvailableChannelsTable: rewritten as native grid (header + per-
  channel section with hover row highlight)
- AvailableChannelsView: search now filters platforms sub-array;
  channel-name / description hits still keep the whole channel
- i18n: add availableChannels.columns.platform (zh/en)

frontend/src/api/channels.ts

@@ -40,18 +40,23 @@ export interface UserSupportedModel {
   pricing: UserSupportedModelPricing | null
 }
 
-export interface UserAvailableChannel {
-  name: string
-  description: string
-  /**
-   * 所属平台（anthropic / openai / antigravity / gemini ...）。后端按平台把一个渠道
-   * 摊开成多条记录，因此此字段决定整行的配色与图标。
-   */
+/**
+ * 渠道下单个平台的子视图：用户可访问的分组 + 该平台支持的模型。
+ * 后端把一个渠道按平台聚合成 sections，前端可以把渠道名作为 row-group
+ * 一次渲染，后面按 sections 顺序用 rowspan 铺开。
+ */
+export interface UserChannelPlatformSection {
   platform: string
   groups: UserAvailableGroup[]
   supported_models: UserSupportedModel[]
 }
 
+export interface UserAvailableChannel {
+  name: string
+  description: string
+  platforms: UserChannelPlatformSection[]
+}
+
 /** 列出当前用户可见的「可用渠道」（与 /groups/available 保持一致，返回平数组）。 */
 export async function getAvailable(options?: { signal?: AbortSignal }): Promise<UserAvailableChannel[]> {
   const { data } = await apiClient.get<UserAvailableChannel[]>('/channels/available', {

frontend/src/components/channels/AvailableChannelsTable.vue

@@ -1,131 +1,124 @@
 <template>
-  <DataTable :columns="columns" :data="rows" :loading="loading">
-    <template #cell-name="{ row }">
-      <div class="flex items-center gap-2">
-        <span class="font-medium text-gray-900 dark:text-white">{{ row.name }}</span>
-        <span
-          v-if="row.platform"
-          :class="[
-            'inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium uppercase',
-            platformBadgeClass(row.platform),
-          ]"
-          :title="row.description || undefined"
-        >
-          <PlatformIcon :platform="row.platform as GroupPlatform" size="xs" />
-          {{ row.platform }}
-        </span>
-      </div>
-    </template>
+  <div class="card overflow-hidden">
+    <!-- 表头 -->
+    <div
+      class="grid items-center border-b border-gray-100 bg-gray-50/50 px-4 py-3 text-xs font-medium uppercase tracking-wide text-gray-500 dark:border-dark-700 dark:bg-dark-800/50 dark:text-gray-400"
+      :style="gridStyle"
+    >
+      <div>{{ columns.name }}</div>
+      <div>{{ columns.platform }}</div>
+      <div>{{ columns.groups }}</div>
+      <div>{{ columns.supportedModels }}</div>
+    </div>
 
-    <template #cell-groups="{ row }">
-      <div v-if="row.groups.length === 0" class="text-xs text-gray-400">
-        <slot name="empty-groups">-</slot>
-      </div>
-      <div v-else class="flex flex-wrap gap-1">
-        <span
-          v-for="g in row.groups"
-          :key="g.id"
-          :class="[
-            'inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium',
-            platformBadgeLightClass(g.platform || row.platform || ''),
-          ]"
-        >
-          <PlatformIcon
-            v-if="g.platform || row.platform"
-            :platform="(g.platform || row.platform) as GroupPlatform"
-            size="xs"
-          />
-          {{ g.name }}
-        </span>
-      </div>
-    </template>
+    <div v-if="loading" class="flex justify-center py-10">
+      <Icon name="refresh" size="lg" class="animate-spin text-gray-400" />
+    </div>
 
-    <template #cell-supported_models="{ row }">
-      <div v-if="row.supported_models.length === 0" class="text-xs text-gray-400">
-        {{ noModelsLabel }}
-      </div>
-      <div v-else class="flex max-w-[560px] flex-wrap gap-1">
-        <SupportedModelChip
-          v-for="m in row.supported_models"
-          :key="`${m.platform}-${m.name}`"
-          :model="m"
-          :pricing-key-prefix="pricingKeyPrefix"
-          :no-pricing-label="noPricingLabel"
-          :show-platform="false"
-          :platform-hint="row.platform"
-        />
-      </div>
-    </template>
+    <div v-else-if="rows.length === 0" class="flex flex-col items-center py-12">
+      <Icon name="inbox" size="xl" class="mb-3 h-12 w-12 text-gray-400" />
+      <p class="text-sm text-gray-500 dark:text-gray-400">{{ emptyLabel }}</p>
+    </div>
 
-    <!-- 允许父组件为额外列提供自定义渲染（如 admin 的 status / billing_model_source）。 -->
-    <template v-for="slot in extraCellSlots" :key="slot" #[slot]="scope">
-      <slot :name="slot" v-bind="scope" />
-    </template>
-
-    <template #empty>
-      <slot name="empty">
-        <div class="flex flex-col items-center py-8">
-          <Icon name="inbox" size="xl" class="mb-3 h-12 w-12 text-gray-400" />
-          <p class="text-sm text-gray-500 dark:text-gray-400">{{ emptyLabel }}</p>
+    <!-- 渠道分组：每个渠道一个 section，内部按 platform 顺序铺开 -->
+    <div
+      v-else
+      v-for="(channel, chIdx) in rows"
+      :key="`${channel.name}-${chIdx}`"
+      class="border-b border-gray-100 last:border-b-0 dark:border-dark-700"
+    >
+      <div
+        v-for="(section, secIdx) in channel.platforms"
+        :key="`${channel.name}-${section.platform}`"
+        class="grid items-center px-4 py-3 transition-colors hover:bg-gray-50/40 dark:hover:bg-dark-800/40"
+        :class="{ 'border-t border-gray-100/70 dark:border-dark-700/50': secIdx > 0 }"
+        :style="gridStyle"
+      >
+        <!-- 渠道名：仅第一行渲染，后续行留空（视觉上的 rowspan） -->
+        <div>
+          <template v-if="secIdx === 0">
+            <div class="font-medium text-gray-900 dark:text-white">{{ channel.name }}</div>
+            <div
+              v-if="channel.description"
+              class="mt-0.5 text-xs text-gray-500 dark:text-gray-400"
+            >
+              {{ channel.description }}
+            </div>
+          </template>
         </div>
-      </slot>
-    </template>
-  </DataTable>
+
+        <!-- 平台徽章 -->
+        <div>
+          <span
+            :class="[
+              'inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-medium uppercase',
+              platformBadgeClass(section.platform),
+            ]"
+          >
+            <PlatformIcon :platform="section.platform as GroupPlatform" size="xs" />
+            {{ section.platform }}
+          </span>
+        </div>
+
+        <!-- 分组 -->
+        <div class="flex flex-wrap gap-1">
+          <span
+            v-for="g in section.groups"
+            :key="g.id"
+            :class="[
+              'inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium',
+              platformBadgeLightClass(section.platform),
+            ]"
+          >
+            <PlatformIcon :platform="section.platform as GroupPlatform" size="xs" />
+            {{ g.name }}
+          </span>
+          <span v-if="section.groups.length === 0" class="text-xs text-gray-400">-</span>
+        </div>
+
+        <!-- 支持模型 -->
+        <div class="flex flex-wrap gap-1">
+          <SupportedModelChip
+            v-for="m in section.supported_models"
+            :key="`${section.platform}-${m.name}`"
+            :model="m"
+            :pricing-key-prefix="pricingKeyPrefix"
+            :no-pricing-label="noPricingLabel"
+            :show-platform="false"
+            :platform-hint="section.platform"
+          />
+          <span v-if="section.supported_models.length === 0" class="text-xs text-gray-400">
+            {{ noModelsLabel }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
-import DataTable from '@/components/common/DataTable.vue'
 import Icon from '@/components/icons/Icon.vue'
 import PlatformIcon from '@/components/common/PlatformIcon.vue'
 import SupportedModelChip from './SupportedModelChip.vue'
-import type { UserSupportedModel } from '@/api/channels'
-import type { ChannelStatus, BillingModelSource } from '@/constants/channel'
+import type { UserAvailableChannel } from '@/api/channels'
 import type { GroupPlatform } from '@/types'
 import { platformBadgeClass, platformBadgeLightClass } from '@/utils/platformColors'
 
-interface GroupRef {
-  id: number
-  name: string
-  platform?: string
-}
-
-interface Row {
-  name: string
-  description?: string
-  /** 单条记录归属的平台；后端按平台摊开后每行一个。admin 场景可能缺失，因此允许 optional。 */
-  platform?: string
-  groups: GroupRef[]
-  // 复用 user 侧最小 DTO；admin 侧 SupportedModel 结构上是其超集，可直接传入。
-  supported_models: UserSupportedModel[]
-  // admin 独有字段：用精确类型代替 `unknown`，让消费端无需 `as` 断言，
-  // 也能在后端新增 union 成员时让前端 Record 查表立刻出空而非崩溃。
-  status?: ChannelStatus
-  billing_model_source?: BillingModelSource
-}
-
-interface Column {
-  key: string
-  label: string
-}
+/** 四列 grid 的 template-columns；与表头、每个 section 行共享。 */
+const gridStyle = 'grid-template-columns: 220px 140px minmax(200px, 1fr) minmax(280px, 2fr); display: grid;'
 
 defineProps<{
-  columns: Column[]
-  rows: Row[]
+  columns: {
+    name: string
+    platform: string
+    groups: string
+    supportedModels: string
+  }
+  rows: UserAvailableChannel[]
   loading: boolean
   pricingKeyPrefix: string
   noPricingLabel: string
   noModelsLabel: string
   emptyLabel: string
 }>()
-
-const slots = useSlots()
-/**
- * 透传父组件提供的 cell-* 插槽（除本组件内置的 name/groups/supported_models/empty-groups/empty
- * 之外），让 admin 场景可以自定义 status / billing_model_source 等列。
- */
-const extraCellSlots = computed(() => {
-  const reserved = new Set(['cell-name', 'cell-groups', 'cell-supported_models', 'empty-groups', 'empty'])
-  return Object.keys(slots).filter((name) => name.startsWith('cell-') && !reserved.has(name))
-})
 </script>

frontend/src/i18n/locales/en.ts

@@ -940,6 +940,7 @@ export default {
     noPricing: 'Pricing not configured',
     columns: {
       name: 'Channel',
+      platform: 'Platform',
       groups: 'Your Accessible Groups',
       supportedModels: 'Supported Models'
     },

frontend/src/i18n/locales/zh.ts

@@ -944,6 +944,7 @@ export default {
     noPricing: '未配置定价',
     columns: {
       name: '渠道名',
+      platform: '平台',
       groups: '我可访问的分组',
       supportedModels: '支持模型'
     },

frontend/src/views/user/AvailableChannelsView.vue

@@ -34,7 +34,7 @@
 
       <template #table>
         <AvailableChannelsTable
-          :columns="columns"
+          :columns="columnLabels"
           :rows="filteredChannels"
           :loading="loading"
           pricing-key-prefix="availableChannels.pricing"
@@ -65,22 +65,37 @@ const channels = ref<UserAvailableChannel[]>([])
 const loading = ref(false)
 const searchQuery = ref('')
 
-const columns = computed(() => [
-  { key: 'name', label: t('availableChannels.columns.name') },
-  { key: 'groups', label: t('availableChannels.columns.groups') },
-  { key: 'supported_models', label: t('availableChannels.columns.supportedModels') }
-])
+const columnLabels = computed(() => ({
+  name: t('availableChannels.columns.name'),
+  platform: t('availableChannels.columns.platform'),
+  groups: t('availableChannels.columns.groups'),
+  supportedModels: t('availableChannels.columns.supportedModels'),
+}))
 
+/**
+ * 搜索过滤：
+ * - 命中渠道名/描述 → 整个渠道（所有 platforms）都保留
+ * - 否则按 platform/group/model 维度在 sections 里过滤，保留有匹配的 section
+ * - 所有 sections 都不匹配时，渠道本身被过滤掉
+ */
 const filteredChannels = computed(() => {
   const q = searchQuery.value.trim().toLowerCase()
   if (!q) return channels.value
-  return channels.value.filter((ch) => {
-    if (ch.name.toLowerCase().includes(q)) return true
-    if ((ch.description || '').toLowerCase().includes(q)) return true
-    if (ch.groups.some((g) => g.name.toLowerCase().includes(q))) return true
-    if (ch.supported_models.some((m) => m.name.toLowerCase().includes(q))) return true
-    return false
-  })
+  return channels.value
+    .map((ch) => {
+      const nameHit = ch.name.toLowerCase().includes(q)
+      const descHit = (ch.description || '').toLowerCase().includes(q)
+      if (nameHit || descHit) return ch
+      const matchingSections = ch.platforms.filter(
+        (p) =>
+          p.platform.toLowerCase().includes(q) ||
+          p.groups.some((g) => g.name.toLowerCase().includes(q)) ||
+          p.supported_models.some((m) => m.name.toLowerCase().includes(q)),
+      )
+      if (matchingSections.length === 0) return null
+      return { ...ch, platforms: matchingSections }
+    })
+    .filter((ch): ch is UserAvailableChannel => ch !== null)
 })
 
 async function loadChannels() {