fix(available-channels): description as own column, fixed table layout

- 描述独立成列：渠道名与描述各占一列，均用 rowspan 纵向合并
- 渠道名单元格 text-center + align-middle，合并后视觉居中
- table-fixed：给 name/description/platform 显式宽度，groups 和
  supported_models 在剩余空间均分。支持模型列此前在 table-auto 下
  不会换行导致横向溢出遮挡（反馈截图），加 table-fixed 后天然 flex-wrap
- i18n 增加 availableChannels.columns.description（zh/en）

frontend/src/components/channels/AvailableChannelsTable.vue

 <template>
-  <div class="card">
-    <!-- 表头 -->
-    <div
-      class="grid items-center rounded-t-lg 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>
-
-    <div v-if="loading" class="flex justify-center py-10">
-      <Icon name="refresh" size="lg" class="animate-spin text-gray-400" />
-    </div>
-
-    <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" />
+  <div class="card overflow-hidden">
+    <table class="w-full table-fixed border-collapse text-sm">
+      <thead>
+        <tr class="border-b border-gray-100 bg-gray-50/50 text-xs font-medium uppercase tracking-wide text-gray-500 dark:border-dark-700 dark:bg-dark-800/50 dark:text-gray-400">
+          <th class="w-[180px] px-4 py-3 text-center">{{ columns.name }}</th>
+          <th class="w-[200px] px-4 py-3 text-left">{{ columns.description }}</th>
+          <th class="w-[140px] px-4 py-3 text-left">{{ columns.platform }}</th>
+          <th class="px-4 py-3 text-left">{{ columns.groups }}</th>
+          <th class="px-4 py-3 text-left">{{ columns.supportedModels }}</th>
+        </tr>
+      </thead>
+      <tbody v-if="loading">
+        <tr>
+          <td colspan="5" class="py-10 text-center">
+            <Icon name="refresh" size="lg" class="inline-block animate-spin text-gray-400" />
+          </td>
+        </tr>
+      </tbody>
+      <tbody v-else-if="rows.length === 0">
+        <tr>
+          <td colspan="5" class="py-12 text-center">
+            <Icon name="inbox" size="xl" class="mx-auto mb-3 h-12 w-12 text-gray-400" />
             <p class="text-sm text-gray-500 dark:text-gray-400">{{ emptyLabel }}</p>
-    </div>
-
-    <!-- 渠道分组：每个渠道一个 section，内部按 platform 顺序铺开。
-         外层无 overflow-hidden，避免裁掉 SupportedModelChip 的价格浮层。 -->
-    <div
+          </td>
+        </tr>
+      </tbody>
+      <!-- 每个渠道一个 tbody：首行 td rowspan 渠道名，后续行只渲染其余三列。
+           tbody 之间强分隔线表达"渠道边界"，tbody 内部用淡分隔线区分平台。 -->
+      <tbody
         v-else
         v-for="(channel, chIdx) in rows"
         :key="`${channel.name}-${chIdx}`"
-      class="border-b border-gray-100 last:rounded-b-lg last:border-b-0 dark:border-dark-700"
+        class="border-b-2 border-gray-200 last:border-b-0 dark:border-dark-600"
       >
-      <div
+        <tr
           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="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"
+          <!-- 渠道名：只在第一行渲染并用 rowspan 纵向合并 -->
+          <td
+            v-if="secIdx === 0"
+            :rowspan="channel.platforms.length"
+            class="px-4 py-3 text-center align-middle font-medium text-gray-900 dark:text-white"
           >
-              {{ channel.description }}
-            </div>
-          </template>
-        </div>
+            {{ channel.name }}
+          </td>
+
+          <!-- 描述：独立一列，同样用 rowspan 纵向合并 -->
+          <td
+            v-if="secIdx === 0"
+            :rowspan="channel.platforms.length"
+            class="px-4 py-3 align-middle text-xs text-gray-500 dark:text-gray-400"
+          >
+            <template v-if="channel.description">{{ channel.description }}</template>
+            <span v-else class="text-gray-400">-</span>
+          </td>
 
           <!-- 平台徽章 -->
-        <div>
+          <td class="align-top px-4 py-3">
             <span
               :class="[
                 'inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-medium uppercase',
@@ -59,10 +69,10 @@
               <PlatformIcon :platform="section.platform as GroupPlatform" size="xs" />
               {{ section.platform }}
             </span>
-        </div>
+          </td>
 
-        <!-- 分组：专属分组在前（紫色 shield 行），公开分组在后（灰色 globe 行）。
-             订阅分组由 GroupBadge 内部按 subscription_type 自动加深背景。 -->
+          <!-- 分组：专属分组在前（紫色 shield 行），公开分组在后（灰色 globe 行）。 -->
+          <td class="align-top px-4 py-3">
             <div class="flex flex-col gap-1.5">
               <div
                 v-if="exclusiveGroups(section).length > 0"
@@ -110,8 +120,10 @@
               </div>
               <span v-if="section.groups.length === 0" class="text-xs text-gray-400">-</span>
             </div>
+          </td>
 
           <!-- 支持模型 -->
+          <td class="align-top px-4 py-3">
             <div class="flex flex-wrap gap-1">
               <SupportedModelChip
                 v-for="m in section.supported_models"
@@ -126,8 +138,10 @@
                 {{ noModelsLabel }}
               </span>
             </div>
-      </div>
-    </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 
@@ -141,12 +155,10 @@ import type { UserAvailableChannel, UserAvailableGroup, UserChannelPlatformSecti
 import type { GroupPlatform, SubscriptionType } from '@/types'
 import { platformBadgeClass } from '@/utils/platformColors'
 
-/** 四列 grid 的 template-columns；与表头、每个 section 行共享。 */
-const gridStyle = 'grid-template-columns: 220px 140px minmax(240px, 1fr) minmax(280px, 2fr); display: grid;'
-
 const props = defineProps<{
   columns: {
     name: string
+    description: string
     platform: string
     groups: string
     supportedModels: string

frontend/src/i18n/locales/en.ts

@@ -944,6 +944,7 @@ export default {
     publicTooltip: 'Groups open to all users',
     columns: {
       name: 'Channel',
+      description: 'Description',
       platform: 'Platform',
       groups: 'Your Accessible Groups',
       supportedModels: 'Supported Models'

frontend/src/i18n/locales/zh.ts

@@ -948,6 +948,7 @@ export default {
     publicTooltip: '对所有用户公开的分组',
     columns: {
       name: '渠道名',
+      description: '描述',
       platform: '平台',
       groups: '我可访问的分组',
       supportedModels: '支持模型'

frontend/src/views/user/AvailableChannelsView.vue

@@ -70,6 +70,7 @@ const searchQuery = ref('')
 
 const columnLabels = computed(() => ({
   name: t('availableChannels.columns.name'),
+  description: t('availableChannels.columns.description'),
   platform: t('availableChannels.columns.platform'),
   groups: t('availableChannels.columns.groups'),
   supportedModels: t('availableChannels.columns.supportedModels'),