From 25a50355035c137d5710ac3dcc935b3e73f1e7e3 Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Wed, 22 Apr 2026 19:47:03 +0800
Subject: [PATCH] fix(available-channels): description as own column, fixed
 table layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 描述独立成列：渠道名与描述各占一列，均用 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）
---
 .../channels/AvailableChannelsTable.vue       | 268 +++++++++---------
 frontend/src/i18n/locales/en.ts               |   1 +
 frontend/src/i18n/locales/zh.ts               |   1 +
 .../src/views/user/AvailableChannelsView.vue  |   1 +
 4 files changed, 143 insertions(+), 128 deletions(-)

diff --git a/frontend/src/components/channels/AvailableChannelsTable.vue b/frontend/src/components/channels/AvailableChannelsTable.vue
index e6f75766..5b9c0eba 100644
--- a/frontend/src/components/channels/AvailableChannelsTable.vue
+++ b/frontend/src/components/channels/AvailableChannelsTable.vue
@@ -1,133 +1,147 @@
 <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" />
-      <p class="text-sm text-gray-500 dark:text-gray-400">{{ emptyLabel }}</p>
-    </div>
-
-    <!-- 渠道分组：每个渠道一个 section，内部按 platform 顺序铺开。
-         外层无 overflow-hidden，避免裁掉 SupportedModelChip 的价格浮层。 -->
-    <div
-      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"
-    >
-      <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"
+  <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>
+          </td>
+        </tr>
+      </tbody>
+      <!-- 每个渠道一个 tbody：首行 td rowspan 渠道名，后续行只渲染其余三列。
+           tbody 之间强分隔线表达"渠道边界"，tbody 内部用淡分隔线区分平台。 -->
+      <tbody
+        v-else
+        v-for="(channel, chIdx) in rows"
+        :key="`${channel.name}-${chIdx}`"
+        class="border-b-2 border-gray-200 last:border-b-0 dark:border-dark-600"
       >
-        <!-- 渠道名：仅第一行渲染，后续行留空（视觉上的 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"
+        <tr
+          v-for="(section, secIdx) in channel.platforms"
+          :key="`${channel.name}-${section.platform}`"
+          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 }"
+        >
+          <!-- 渠道名：只在第一行渲染并用 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.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>
+
+          <!-- 平台徽章 -->
+          <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',
+                platformBadgeClass(section.platform),
+              ]"
             >
-              {{ channel.description }}
+              <PlatformIcon :platform="section.platform as GroupPlatform" size="xs" />
+              {{ section.platform }}
+            </span>
+          </td>
+
+          <!-- 分组：专属分组在前（紫色 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"
+                class="flex flex-wrap items-center gap-1.5"
+              >
+                <span
+                  class="inline-flex items-center gap-0.5 text-[10px] font-medium uppercase text-purple-600 dark:text-purple-400"
+                  :title="t('availableChannels.exclusiveTooltip')"
+                >
+                  <Icon name="shield" size="xs" class="h-3 w-3" />
+                  {{ t('availableChannels.exclusive') }}
+                </span>
+                <GroupBadge
+                  v-for="g in exclusiveGroups(section)"
+                  :key="`ex-${g.id}`"
+                  :name="g.name"
+                  :platform="g.platform as GroupPlatform"
+                  :subscription-type="(g.subscription_type || 'standard') as SubscriptionType"
+                  :rate-multiplier="g.rate_multiplier"
+                  :user-rate-multiplier="userGroupRates[g.id] ?? null"
+                  always-show-rate
+                />
+              </div>
+              <div
+                v-if="publicGroups(section).length > 0"
+                class="flex flex-wrap items-center gap-1.5"
+              >
+                <span
+                  class="inline-flex items-center gap-0.5 text-[10px] font-medium uppercase text-gray-500 dark:text-gray-400"
+                  :title="t('availableChannels.publicTooltip')"
+                >
+                  <Icon name="globe" size="xs" class="h-3 w-3" />
+                  {{ t('availableChannels.public') }}
+                </span>
+                <GroupBadge
+                  v-for="g in publicGroups(section)"
+                  :key="`pub-${g.id}`"
+                  :name="g.name"
+                  :platform="g.platform as GroupPlatform"
+                  :subscription-type="(g.subscription_type || 'standard') as SubscriptionType"
+                  :rate-multiplier="g.rate_multiplier"
+                  :user-rate-multiplier="userGroupRates[g.id] ?? null"
+                  always-show-rate
+                />
+              </div>
+              <span v-if="section.groups.length === 0" class="text-xs text-gray-400">-</span>
             </div>
-          </template>
-        </div>
+          </td>
 
-        <!-- 平台徽章 -->
-        <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>
-
-        <!-- 分组：专属分组在前（紫色 shield 行），公开分组在后（灰色 globe 行）。
-             订阅分组由 GroupBadge 内部按 subscription_type 自动加深背景。 -->
-        <div class="flex flex-col gap-1.5">
-          <div
-            v-if="exclusiveGroups(section).length > 0"
-            class="flex flex-wrap items-center gap-1.5"
-          >
-            <span
-              class="inline-flex items-center gap-0.5 text-[10px] font-medium uppercase text-purple-600 dark:text-purple-400"
-              :title="t('availableChannels.exclusiveTooltip')"
-            >
-              <Icon name="shield" size="xs" class="h-3 w-3" />
-              {{ t('availableChannels.exclusive') }}
-            </span>
-            <GroupBadge
-              v-for="g in exclusiveGroups(section)"
-              :key="`ex-${g.id}`"
-              :name="g.name"
-              :platform="g.platform as GroupPlatform"
-              :subscription-type="(g.subscription_type || 'standard') as SubscriptionType"
-              :rate-multiplier="g.rate_multiplier"
-              :user-rate-multiplier="userGroupRates[g.id] ?? null"
-              always-show-rate
-            />
-          </div>
-          <div
-            v-if="publicGroups(section).length > 0"
-            class="flex flex-wrap items-center gap-1.5"
-          >
-            <span
-              class="inline-flex items-center gap-0.5 text-[10px] font-medium uppercase text-gray-500 dark:text-gray-400"
-              :title="t('availableChannels.publicTooltip')"
-            >
-              <Icon name="globe" size="xs" class="h-3 w-3" />
-              {{ t('availableChannels.public') }}
-            </span>
-            <GroupBadge
-              v-for="g in publicGroups(section)"
-              :key="`pub-${g.id}`"
-              :name="g.name"
-              :platform="g.platform as GroupPlatform"
-              :subscription-type="(g.subscription_type || 'standard') as SubscriptionType"
-              :rate-multiplier="g.rate_multiplier"
-              :user-rate-multiplier="userGroupRates[g.id] ?? null"
-              always-show-rate
-            />
-          </div>
-          <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>
+          <!-- 支持模型 -->
+          <td class="align-top px-4 py-3">
+            <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>
+          </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
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index ef3c351c..3ae81dca 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/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'
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index 2bd42fcd..3059f8f8 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -948,6 +948,7 @@ export default {
     publicTooltip: '对所有用户公开的分组',
     columns: {
       name: '渠道名',
+      description: '描述',
       platform: '平台',
       groups: '我可访问的分组',
       supportedModels: '支持模型'
diff --git a/frontend/src/views/user/AvailableChannelsView.vue b/frontend/src/views/user/AvailableChannelsView.vue
index 8392f815..a6c9ebc8 100644
--- a/frontend/src/views/user/AvailableChannelsView.vue
+++ b/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'),