From 3d99acb0ad64758cdd3c8f4f2cbfcd37dbf99501 Mon Sep 17 00:00:00 2001
From: feeeei <g540203430@gmail.com>
Date: Wed, 29 Jul 2026 23:38:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A8=A1=E5=9E=8B=E5=B9=BF?=
 =?UTF-8?q?=E5=9C=BAUI:=E7=AD=9B=E9=80=89=E6=A0=8F=E6=8D=A2=E8=A1=8C?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90=E3=80=81=E6=A8=A1=E5=9E=8B=E6=8E=92=E5=BA=8F?=
 =?UTF-8?q?=E4=B8=8E=E8=A1=A8=E6=A0=BC=E7=95=99=E7=99=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 筛选栏各级标签移出 flex-wrap 容器,chip 单独成组,换行后左边缘与「全部」对齐
- 模型排序增加二级规则:同官方输出价时按名称降序(gpt-5.6 先于 gpt-5.5)
- 按图片/按次计费的模型沉到分组末尾,不再与 token 模型按官方价混排
- 表格顶到卡片边缘,左右留白改由首列/末列 padding 提供,hover 与分区底色横贯整行
---
 .../components/modelPlaza/PlazaFilterBar.vue  | 126 +++++++++---------
 .../modelPlaza/PlazaGroupSection.vue          |   8 +-
 .../modelPlaza/PlazaModelPricingTable.vue     |  20 ++-
 .../__tests__/PlazaModelPricingTable.spec.ts  |  61 +++++++++
 4 files changed, 145 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/modelPlaza/PlazaFilterBar.vue b/frontend/src/components/modelPlaza/PlazaFilterBar.vue
index a849d25de..4371105a2 100644
--- a/frontend/src/components/modelPlaza/PlazaFilterBar.vue
+++ b/frontend/src/components/modelPlaza/PlazaFilterBar.vue
@@ -1,81 +1,87 @@
 <template>
   <div class="space-y-3">
     <!-- 一级:平台 -->
-    <div class="flex flex-wrap items-center gap-2">
-      <span class="w-10 shrink-0 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-dark-500">
+    <div class="flex items-start gap-2">
+      <span class="w-10 shrink-0 pt-2 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-dark-500">
         {{ t('modelPlaza.filters.platformLabel') }}
       </span>
-      <button
-        v-for="p in ['all', ...platforms]"
-        :key="`platform-${p}`"
-        type="button"
-        class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-40 disabled:grayscale"
-        :class="p === 'all' ? chipClass(platform === 'all') : platform === p ? 'chip-tinted-active' : 'chip-tinted'"
-        :style="p === 'all' ? undefined : { '--chip-accent': platformAccentColor(p) }"
-        :disabled="p !== 'all' && !platformEnabled(p)"
-        @click="$emit('update:platform', p)"
-      >
-        <PlatformIcon v-if="p !== 'all'" :platform="p as GroupPlatform" size="xs" />
-        {{ p === 'all' ? t('modelPlaza.filters.all') : p }}
-      </button>
+      <div class="flex flex-wrap items-center gap-2">
+        <button
+          v-for="p in ['all', ...platforms]"
+          :key="`platform-${p}`"
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-40 disabled:grayscale"
+          :class="p === 'all' ? chipClass(platform === 'all') : platform === p ? 'chip-tinted-active' : 'chip-tinted'"
+          :style="p === 'all' ? undefined : { '--chip-accent': platformAccentColor(p) }"
+          :disabled="p !== 'all' && !platformEnabled(p)"
+          @click="$emit('update:platform', p)"
+        >
+          <PlatformIcon v-if="p !== 'all'" :platform="p as GroupPlatform" size="xs" />
+          {{ p === 'all' ? t('modelPlaza.filters.all') : p }}
+        </button>
+      </div>
     </div>
 
     <!-- 二级:分组(按所属平台着色,当前组合下无结果的置灰) -->
-    <div class="flex flex-wrap items-center gap-2">
-      <span class="w-10 shrink-0 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-dark-500">
+    <div class="flex items-start gap-2">
+      <span class="w-10 shrink-0 pt-2 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-dark-500">
         {{ t('modelPlaza.filters.groupLabel') }}
       </span>
-      <button
-        type="button"
-        class="rounded-lg px-3 py-1.5 text-sm font-medium transition"
-        :class="chipClass(groupId === 'all')"
-        @click="$emit('update:groupId', 'all')"
-      >
-        {{ t('modelPlaza.filters.all') }}
-      </button>
-      <button
-        v-for="g in groups"
-        :key="`group-${g.id}`"
-        type="button"
-        class="rounded-lg px-3 py-1.5 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-40 disabled:grayscale"
-        :class="groupId === g.id ? 'chip-tinted-active' : 'chip-tinted'"
-        :style="{ '--chip-accent': platformAccentColor(g.platform) }"
-        :disabled="!groupEnabled(g)"
-        @click="$emit('update:groupId', g.id)"
-      >
-        {{ g.name }}
-      </button>
+      <div class="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          class="rounded-lg px-3 py-1.5 text-sm font-medium transition"
+          :class="chipClass(groupId === 'all')"
+          @click="$emit('update:groupId', 'all')"
+        >
+          {{ t('modelPlaza.filters.all') }}
+        </button>
+        <button
+          v-for="g in groups"
+          :key="`group-${g.id}`"
+          type="button"
+          class="rounded-lg px-3 py-1.5 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-40 disabled:grayscale"
+          :class="groupId === g.id ? 'chip-tinted-active' : 'chip-tinted'"
+          :style="{ '--chip-accent': platformAccentColor(g.platform) }"
+          :disabled="!groupEnabled(g)"
+          @click="$emit('update:groupId', g.id)"
+        >
+          {{ g.name }}
+        </button>
+      </div>
     </div>
 
     <!-- 三级:倍率(当前组合下不存在的置灰) -->
-    <div class="flex flex-wrap items-center gap-2">
-      <span class="w-10 shrink-0 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-dark-500">
+    <div class="flex items-start gap-2">
+      <span class="w-10 shrink-0 pt-2 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-dark-500">
         {{ t('modelPlaza.filters.rateLabel') }}
       </span>
-      <button
-        type="button"
-        class="rounded-lg px-3 py-1.5 text-sm font-medium transition"
-        :class="chipClass(rate === 'all')"
-        @click="$emit('update:rate', 'all')"
-      >
-        {{ t('modelPlaza.filters.all') }}
-      </button>
-      <button
-        v-for="r in rates"
-        :key="`rate-${r}`"
-        type="button"
-        class="rounded-lg px-3 py-1.5 font-mono text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-40 disabled:grayscale"
-        :class="chipClass(rate === r)"
-        :disabled="!rateEnabled(r)"
-        @click="$emit('update:rate', r)"
-      >
-        {{ r }}x
-      </button>
+      <div class="flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          class="rounded-lg px-3 py-1.5 text-sm font-medium transition"
+          :class="chipClass(rate === 'all')"
+          @click="$emit('update:rate', 'all')"
+        >
+          {{ t('modelPlaza.filters.all') }}
+        </button>
+        <button
+          v-for="r in rates"
+          :key="`rate-${r}`"
+          type="button"
+          class="rounded-lg px-3 py-1.5 font-mono text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-40 disabled:grayscale"
+          :class="chipClass(rate === r)"
+          :disabled="!rateEnabled(r)"
+          @click="$emit('update:rate', r)"
+        >
+          {{ r }}x
+        </button>
+      </div>
     </div>
 
     <!-- 四级:模型名搜索(纯前端过滤) -->
-    <div class="flex flex-wrap items-center gap-2">
-      <span class="w-10 shrink-0 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-dark-500">
+    <div class="flex flex-wrap items-start gap-2">
+      <span class="w-10 shrink-0 pt-2 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-dark-500">
         {{ t('modelPlaza.filters.modelLabel') }}
       </span>
       <div class="relative w-full sm:w-72">
diff --git a/frontend/src/components/modelPlaza/PlazaGroupSection.vue b/frontend/src/components/modelPlaza/PlazaGroupSection.vue
index 0940233b5..1ab4dcde2 100644
--- a/frontend/src/components/modelPlaza/PlazaGroupSection.vue
+++ b/frontend/src/components/modelPlaza/PlazaGroupSection.vue
@@ -1,6 +1,6 @@
 <template>
   <section
-    class="rounded-2xl border bg-white shadow-card dark:bg-dark-800/50"
+    class="overflow-hidden rounded-2xl border bg-white shadow-card dark:bg-dark-800/50"
     :class="[platformBorderStrongClass(group.platform)]"
   >
     <!-- 分组头部:名称/平台/倍率徽章/专属/订阅徽章 + 描述 -->
@@ -44,8 +44,8 @@
       </p>
     </header>
 
-    <!-- 模型价格表 -->
-    <div class="px-5">
+    <!-- 模型价格表:整行(含 hover 底色/分区底色)顶到卡片边缘,左右留白由表格首列/末列的 padding 提供 -->
+    <div>
       <PlazaModelPricingTable
         v-if="group.models.length > 0"
         :models="group.models"
@@ -53,7 +53,7 @@
         :rate-multiplier="group.rate_multiplier"
         :user-rate-multiplier="group.user_rate_multiplier ?? null"
       />
-      <p v-else class="py-4 text-center text-sm text-gray-400 dark:text-dark-500">
+      <p v-else class="px-5 py-4 text-center text-sm text-gray-400 dark:text-dark-500">
         {{ t('modelPlaza.detail.noModels') }}
       </p>
     </div>
diff --git a/frontend/src/components/modelPlaza/PlazaModelPricingTable.vue b/frontend/src/components/modelPlaza/PlazaModelPricingTable.vue
index f0f25e5bd..0f076a767 100644
--- a/frontend/src/components/modelPlaza/PlazaModelPricingTable.vue
+++ b/frontend/src/components/modelPlaza/PlazaModelPricingTable.vue
@@ -17,7 +17,7 @@
         >
           <th
             rowspan="2"
-            class="border-r border-gray-100 py-2.5 pr-4 text-left align-middle dark:border-dark-700/60"
+            class="border-r border-gray-100 py-2.5 pl-5 pr-4 text-left align-middle dark:border-dark-700/60"
           >
             {{ t('modelPlaza.table.model') }}
           </th>
@@ -38,7 +38,7 @@
           </th>
           <th
             rowspan="2"
-            class="border-l border-gray-100 py-2.5 pl-3 pr-1 text-right align-middle dark:border-dark-700/60"
+            class="border-l border-gray-100 py-2.5 pl-3 pr-5 text-right align-middle dark:border-dark-700/60"
           >
             {{ t('modelPlaza.table.rate') }}
           </th>
@@ -63,7 +63,7 @@
           class="border-b border-gray-100 transition-colors last:border-b-0 hover:bg-gray-50/70 dark:border-dark-800 dark:hover:bg-dark-800/50"
         >
           <!-- 模型名 + 非 token 计费模式徽章 -->
-          <td class="border-r border-gray-100 py-2.5 pr-4 align-middle dark:border-dark-700/60">
+          <td class="border-r border-gray-100 py-2.5 pl-5 pr-4 align-middle dark:border-dark-700/60">
             <div class="flex flex-wrap items-center gap-1.5">
               <span class="font-medium text-gray-900 dark:text-white">{{ m.name }}</span>
               <span
@@ -180,7 +180,7 @@
 
           <!-- 折扣倍率(专属倍率划线展示原倍率) -->
           <td
-            class="border-l border-gray-100 py-2.5 pl-3 pr-1 text-right align-middle font-mono text-xs dark:border-dark-700/60"
+            class="border-l border-gray-100 py-2.5 pl-3 pr-5 text-right align-middle font-mono text-xs dark:border-dark-700/60"
           >
             <template v-if="hasCustomRate">
               <span class="mr-1 text-gray-400 line-through dark:text-dark-500">{{ rateMultiplier }}x</span>
@@ -224,15 +224,23 @@ const accentStyle = computed(() => ({ '--plaza-accent': platformAccentColor(prop
 
 const PER_MILLION = 1_000_000
 
-/** 展示顺序:官方输出价从高到低;无官方价的排最后;同价按名称升序。 */
+/**
+ * 展示顺序:
+ * 1. token 计费的排在前,按图/按次计费的沉到末尾——它们的官方 token 价与实付的按张/按次价不同量纲,混排无意义;
+ * 2. 组内按官方输出价从高到低,无官方价的排最后;
+ * 3. 同价按名称降序(新版本号在前,如 gpt-5.6 先于 gpt-5.5)。
+ */
 const sortedModels = computed(() => {
   return [...props.models].sort((a, b) => {
+    const ta = billingMode(a) === BILLING_MODE_TOKEN
+    const tb = billingMode(b) === BILLING_MODE_TOKEN
+    if (ta !== tb) return ta ? -1 : 1
     const pa = a.official_pricing?.output_price ?? null
     const pb = b.official_pricing?.output_price ?? null
     if (pa != null && pb != null && pa !== pb) return pb - pa
     if (pa != null && pb == null) return -1
     if (pa == null && pb != null) return 1
-    return a.name.localeCompare(b.name)
+    return b.name.localeCompare(a.name)
   })
 })
 
diff --git a/frontend/src/components/modelPlaza/__tests__/PlazaModelPricingTable.spec.ts b/frontend/src/components/modelPlaza/__tests__/PlazaModelPricingTable.spec.ts
index f6c83663b..b56e7bed7 100644
--- a/frontend/src/components/modelPlaza/__tests__/PlazaModelPricingTable.spec.ts
+++ b/frontend/src/components/modelPlaza/__tests__/PlazaModelPricingTable.spec.ts
@@ -111,6 +111,67 @@ describe('PlazaModelPricingTable', () => {
     expect(names).toEqual(['model-expensive', 'model-cheap', 'model-no-official'])
   })
 
+  it('官方输出价相同时按模型名降序(新版本号在前)', () => {
+    const older = tokenModel({ name: 'gpt-5.5' })
+    const newer = tokenModel({ name: 'gpt-5.6-sol' })
+
+    const wrapper = mountTable([older, newer], 1)
+    const names = wrapper.findAll('tbody tr').map((tr) => tr.find('td').text())
+    expect(names).toEqual(['gpt-5.6-sol', 'gpt-5.5'])
+  })
+
+  it('按图片/按次计费的模型沉到末尾,不与 token 模型按官方价混排', () => {
+    // 官方输出价 $10,介于下面两个 token 模型之间,但因计费模式不同应排最后
+    const image = tokenModel({
+      name: 'gpt-image-2',
+      pricing: {
+        billing_mode: 'image',
+        input_price: null,
+        output_price: null,
+        cache_write_price: null,
+        cache_read_price: null,
+        image_input_price: null,
+        image_output_price: null,
+        per_request_price: 0.002,
+        intervals: []
+      },
+      official_pricing: {
+        input_price: 5e-6,
+        output_price: 1e-5,
+        cache_write_price: null,
+        cache_write_1h_price: null,
+        cache_read_price: 1.25e-6
+      }
+    })
+    const pricier = tokenModel({
+      name: 'gpt-5.6-terra',
+      official_pricing: {
+        input_price: 2.5e-6,
+        output_price: 1.5e-5,
+        cache_write_price: null,
+        cache_write_1h_price: null,
+        cache_read_price: null
+      }
+    })
+    const cheaper = tokenModel({
+      name: 'gpt-5.6-luna',
+      official_pricing: {
+        input_price: 1e-6,
+        output_price: 6e-6,
+        cache_write_price: null,
+        cache_write_1h_price: null,
+        cache_read_price: null
+      }
+    })
+
+    const wrapper = mountTable([pricier, image, cheaper], 1)
+    const names = wrapper.findAll('tbody tr').map((tr) => tr.find('td').text())
+    expect(names[0]).toBe('gpt-5.6-terra')
+    expect(names[1]).toBe('gpt-5.6-luna')
+    // 首列含「按图片计费」徽章文本,只断言模型名
+    expect(names[2]).toContain('gpt-image-2')
+  })
+
   it('两级表头:实付区与官方区各拆输入/输出/缓存列', () => {
     const wrapper = mountTable([tokenModel()], 1)
     const text = wrapper.text()